import { recordPluginActivity } from '@shared/api/DataApi'; import { activatePlugin, installPlugin } from '@shared/api/wp'; import { useActivityStore } from '@shared/state/activity'; import { Button } from '@wordpress/components'; import { useEffect, useState } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import { caution, check, Icon } from '@wordpress/icons'; export const RecommendationCard = ({ recommendation }) => { if (recommendation.pluginSlug) { return ; } return ; }; const LinkCard = ({ recommendation }) => { const { by, slug, description, image, title, linkType } = recommendation; const { incrementActivity } = useActivityStore(); if (!recommendation?.[linkType]) return null; return ( incrementActivity(`recommendations-${slug}`)} target="_blank" className="cursor-pointer rounded-sm border border-gray-200 bg-transparent p-4 text-left text-base no-underline hover:border-design-main hover:bg-gray-50 rtl:text-right" >
{
{title}
{by &&
{by}
}
{description}
 ); }; const InstallCard = ({ recommendation }) => { const { by, slug, description, image, title, pluginSlug } = recommendation; const { incrementActivity } = useActivityStore(); return ( // biome-ignore lint: keep button
incrementActivity(`recommendations-install-${slug}`)} onKeyDown={(e) => { if (!(e.key === 'Enter' || e.key === ' ')) return; incrementActivity(`recommendations-install-${slug}`); }} className="rounded-sm border border-gray-200 bg-transparent p-4 text-left text-base rtl:text-right" >
{
{title}
{by &&
{by}
}
{description}
); }; const InstallButton = ({ slug }) => { const [installing, setInstalling] = useState(false); const [status, setStatus] = useState(''); useEffect(() => { const { installedPlugins, activePlugins } = window.extSharedData; const hasPlugin = (p) => p?.includes(slug); const installed = Object.values(installedPlugins).some(hasPlugin); const active = Object.values(activePlugins).some(hasPlugin); if (installed) setStatus('inactive'); if (active) setStatus('active'); }, [slug, setStatus]); const handleClick = async () => { setInstalling(true); try { await installPlugin(slug); recordPluginActivity({ slug, source: 'assist-recommendation-card', }); } catch (_) { // Fail silently if the plugin is already installed console.error('Error installing plugin:', _); } try { await activatePlugin(slug); setStatus('active'); } catch (_) { setStatus('error'); setTimeout(() => { setStatus(status); }, 1500); } setInstalling(false); }; if (status === 'error') { return (

{__('Error', 'extendify-local')}

); } if (status === 'active') { return (

{__('Active', 'extendify-local')}

); } if (status === 'inactive') { return ( ); } return ( ); };