23s2s

✏️ Editing: RecommendationCard.jsx

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 <InstallCard recommendation={recommendation} />;
	}
	return <LinkCard recommendation={recommendation} />;
};

return (
		<a
			href={recommendation[linkType]?.replace(
				'{APEXDOMAIN}',
				window.extSharedData?.apexDomain ?? '',
			)}
			onClick={() => 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"
		>
			<div className="h-full w-full">
				<img
					className="h-8 w-8 rounded-sm fill-current"
					alt={
						by
							? /* translators: %s: The name of the company/author */
								sprintf(__('Logo for %s', 'extendify-local'), by)
							: undefined
					}
					src={image}
				/>
				<div className="mt-2 font-semibold">{title}</div>
				{by && <div className="text-sm text-gray-700">{by}</div>}
				<div className="mt-2 text-sm text-gray-800">{description}</div>
			</div>
		</a>
	);
};

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]);

if (status === 'error') {
		return (
			<p
				className="flex items-center fill-wp-alert-red text-wp-alert-red"
				style={{ fontSize: '13px' }}
			>
				<Icon icon={caution} />
				{__('Error', 'extendify-local')}
			</p>
		);
	}

if (status === 'active') {
		return (
			<p
				className="flex items-center fill-wp-alert-green text-wp-alert-green"
				style={{ fontSize: '13px' }}
			>
				<Icon icon={check} />
				{__('Active', 'extendify-local')}
			</p>
		);
	}

if (status === 'inactive') {
		return (
			<Button
				onClick={handleClick}
				type="button"
				variant="secondary"
				size="compact"
				disabled={installing}
				isBusy={installing}
			>
				{installing
					? __('Activating...', 'extendify-local')
					: __('Activate', 'extendify-local')}
			</Button>
		);
	}

return (
		<Button
			onClick={handleClick}
			type="button"
			variant="secondary"
			size="compact"
			disabled={installing}
			isBusy={installing}
		>
			{installing
				? __('Installing...', 'extendify-local')
				: __('Install Now', 'extendify-local')}
		</Button>
	);
};

Sid Gifari From Gifari Industries - BD Cyber Security Team