Sid Gifari File Manager

Sid Gifari File Manager

🏠 Root / home2 / nuveprin / ahavahome.org / wp-content / plugins / extendify / src / Recommendations / components /

Editing: PluginSearchBanner.jsx

import { useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { safeDecodeURIComponent } from '@wordpress/url';
import { RecommendationsGrid } from '@recommendations/components/RecommendationsGrid';
import {
	selectIsLoading,
	selectIsError,
	selectRecommendations,
} from '@recommendations/selectors/plugin-search';
import { usePluginSearchStore } from '@recommendations/state/plugin-search';
import { recordActivity } from '@recommendations/utils/record-activity';

const showPartnerBranding =
	window.extRecommendationsData?.showPartnerBranding &&
	window.extSharedData?.partnerLogo;

export const PluginSearchBanner = () => {
	const query = usePluginSearchStore((state) => state.query);
	const isLoading = usePluginSearchStore(selectIsLoading);
	const isError = usePluginSearchStore(selectIsError);
	const recommendationsLimit = usePluginSearchStore(
		(state) => state.recommendationsLimit,
	);
	const recommendations = usePluginSearchStore(selectRecommendations);
	const fetchInstalledPlugins = usePluginSearchStore(
		(state) => state.fetchInstalledPlugins,
	);

useEffect(() => {
		if (!query) return;
		(async () => {
			await fetchInstalledPlugins(true);
			recordActivity({ slot: 'plugin-search', event: 'search' });
		})();
	}, [query, fetchInstalledPlugins]);

if (!query || !recommendations?.length || isLoading || isError) {
		return null;
	}

return (
		<div
			className="my-8 flex w-full flex-col overflow-hidden rounded border border-gray-400 bg-white"
			data-test="extendify-recommendations-banner">
			<div
				className={`flex h-14 border-b border-b-gray-200 ${showPartnerBranding ? 'bg-banner-main' : ''} px-6 py-4`}>
				{showPartnerBranding ? (
					<>
						<img
							className="mr-3 h-full"
							src={window.extSharedData?.partnerLogo}
						/>
						<div className="mr-3 border-l border-banner-text opacity-80" />
					</>
				) : null}
				<h2
					className={`m-0 flex h-full items-center ${showPartnerBranding ? 'text-banner-text' : ''} `}>
					{__('Recommended Solutions for: ', 'extendify')}
					{safeDecodeURIComponent(query)}
				</h2>
			</div>
			<RecommendationsGrid
				recommendations={recommendations.slice(0, recommendationsLimit)}
			/>
		</div>
	);
};