0609154fa35b3194026346c9cac2a248

Edit file

File name : features.js

Content :

import { useEffect, useState, useMemo } from '@wordpress/element';
import {
	FunnelIcon,
	HeartIcon,
	PlayCircleIcon,
	SquaresPlusIcon,
	CheckIcon,
	ChatBubbleLeftEllipsisIcon,
	WrenchIcon,
	PaintBrushIcon,
	Squares2X2Icon,
	QueueListIcon,
	ShoppingCartIcon,
	ChevronUpIcon,
} from '@heroicons/react/24/outline';
import { __ } from '@wordpress/i18n';
import { useDispatch, useSelect } from '@wordpress/data';
import apiFetch from '@wordpress/api-fetch';
import { STORE_KEY } from '../store';
import { classNames } from '../helpers';
import NavigationButtons from '../components/navigation-buttons';
import { useNavigateSteps } from '../router';
import withBuildSiteController from '../hoc/withBuildSiteController';
import Container from '../components/container';
import Heading from '../components/heading';
import Dropdown from '../components/dropdown';
import AISitesNotice from '../components/ai-sites-notice';
import { WooCommerceIcon, SureCartIcon } from '../ui/icons';

const fetchStatus = {
	fetching: 'fetching',
	fetched: 'fetched',
	error: 'error',
};

const EcommerceOptions = ( { ecomSupported, selectedEcom, onChange } ) => {
	const { setSiteFeaturesData } = useDispatch( STORE_KEY );
	const [ open, setOpen ] = useState( false );

const ICON_SET = {
	heart: HeartIcon,
	'squares-plus': SquaresPlusIcon,
	funnel: FunnelIcon,
	'play-circle': PlayCircleIcon,
	'live-chat': ChatBubbleLeftEllipsisIcon,
	'page-builder': PaintBrushIcon,
	'contact-form': QueueListIcon,
	blog: Squares2X2Icon,
	ecommerce: ShoppingCartIcon,
};

return {
			siteFeatures: getSiteFeatures(),
			loadingNextStep: getLoadingNextStep(),
		};
	}, [] );
	const {
		stepsData: { selectedTemplate, templateList },
	} = useSelect( ( select ) => {
		const { getAIStepData } = select( STORE_KEY );

return {
			stepsData: getAIStepData(),
		};
	}, [] );
	const selectedTemplateData = templateList.find(
		( item ) => item.uuid === selectedTemplate
	);
	// const enabledFeatures = siteFeatures
	// 	.filter( ( feature ) => feature.enabled )
	// 	.map( ( feature ) => feature.id );

// const uniqueSiteFeatures = [ ...new Set( enabledFeatures ) ];
	// const ecommerceEnabled = uniqueSiteFeatures.includes( 'ecommerce' );
	const [ ecomSupported, defaultEcom ] = useMemo( () => {
		return [
			selectedTemplateData?.features_data?.ecommerce_supported || [],
			selectedTemplateData?.features_data?.ecommerce_type,
		];
	}, [] );
	const [ selectedEcom, setSelectedEcom ] = useState( defaultEcom );

const [ isFetchingStatus, setIsFetchingStatus ] = useState(
		fetchStatus.fetching
	);

const fetchSiteFeatures = async () => {
		const response = await apiFetch( {
			path: 'zipwp/v1/site-features',
			method: 'GET',
			headers: {
				'X-WP-Nonce': aiBuilderVars.rest_api_nonce,
			},
		} );

if ( response?.success ) {
			// Store to state.
			storeSiteFeatures( response.data.data );

// Set status to fetched.
			return setIsFetchingStatus( fetchStatus.fetched );
		}

setIsFetchingStatus( fetchStatus.error );
	};

const handleToggleFeature = ( feature ) => () => {
		if ( feature.compulsory && feature.enabled ) {
			return;
		}
		setSiteFeatures( feature.id );
	};

useEffect( () => {
		if ( isFetchingStatus === fetchStatus.fetching ) {
			fetchSiteFeatures();
		}
	}, [] );

const listOfFeatures = useMemo( () => {
		// Exclude disabled features from UI only when site features have been fetched.
		return isFetchingStatus === fetchStatus.fetched
			? siteFeatures?.filter(
					( feat ) => ! disabledFeatures?.includes( feat.id )
			  )
			: [];
	}, [ siteFeatures, disabledFeatures, isFetchingStatus ] );

return (
		<Container className="grid grid-cols-1 gap-8 auto-rows-auto !max-w-[55rem] w-full mx-auto">
			<AISitesNotice />
			<div className="space-y-4">
				<Heading
					heading={ __( 'Select features', 'ai-builder' ) }
					subHeading={ __(
						'Select the features you want on this website',
						'ai-builder'
					) }
				/>
			</div>
			{ /* Feature Cards */ }

<div className="grid grid-cols-1 lg:grid-cols-2 auto-rows-auto gap-x-8 gap-y-5 w-full">
				{ isFetchingStatus === fetchStatus.fetched &&
					listOfFeatures.map( ( feature ) => {
						const isEcommerce = feature.id === 'ecommerce';

const FeatureIcon = ICON_SET?.[ feature.icon ];
						return (
							<div
								key={ feature.id }
								className={ classNames(
									'relative py-4 pl-4 pr-5 rounded-md shadow-sm border border-solid bg-white border-button-disabled transition-colors duration-150 ease-in-out',
									feature.enabled && 'border-accent-st',
									'cursor-pointer'
								) }
								data-disabled={ loadingNextStep }
								onClick={ handleToggleFeature( feature ) }
							>
								<div className="flex items-start justify-start gap-3">
									<div className="p-0.5 shrink-0">
										{ FeatureIcon && (
											<FeatureIcon className="text-zip-body-text w-7 h-7" />
										) }
										{ ! FeatureIcon && (
											<WrenchIcon className="text-zip-body-text w-7 h-7" />
										) }
									</div>
									<div className="space-y-1 mr-0 w-full">
										<p className="p-0 m-0 !text-base !font-semibold !text-zip-app-heading">
											{ feature.title }
										</p>
										<div className="flex justify-between items-start w-full">
											<p className="p-0 m-0 !text-sm !font-normal !text-zip-body-text">
												{ feature.description }
											</p>
											<div
												onClick={ ( e ) =>
													e.stopPropagation()
												}
											>
												{ isEcommerce && (
													<EcommerceOptions
														ecomSupported={
															ecomSupported
														}
														selectedEcom={
															selectedEcom
														}
														onChange={
															setSelectedEcom
														}
													/>
												) }
											</div>
										</div>
									</div>
								</div>
								{ /* Check mark */ }

<span
									className={ classNames(
										'inline-flex absolute top-4 right-4 p-[0.1875rem] border border-solid border-zip-app-inactive-icon rounded',
										feature.enabled &&
											'border-accent-st bg-accent-st',
										feature.compulsory &&
											'border-button-disabled bg-button-disabled'
									) }
								>
									<CheckIcon
										className="w-2.5 h-2.5 text-white"
										strokeWidth={ 4 }
									/>
								</span>
							</div>
						);
					} ) }
				{ /* Skeleton */ }
				{ isFetchingStatus === fetchStatus.fetching &&
					Array.from( {
						length: Object.keys( ICON_SET ).length,
					} ).map( ( _, index ) => (
						<div
							key={ index }
							className="relative py-4 pl-4 pr-5 rounded-md shadow-sm border border-solid bg-white border-button-disabled"
						>
							<div className="flex items-start justify-start gap-3">
								<div className="p-0.5 shrink-0">
									<div className="w-7 h-7 bg-gray-200 rounded animate-pulse" />
								</div>
								<div className="space-y-1 w-full">
									<div className="w-3/4 h-6 bg-gray-200 rounded animate-pulse" />
									<div className="w-1/2 h-5 bg-gray-200 rounded animate-pulse" />
								</div>
							</div>
							<span className="inline-flex absolute top-4 right-4 w-4 h-4 bg-gray-200 animate-pulse rounded" />
							<div className="absolute inset-0 cursor-pointer" />
						</div>
					) ) }
			</div>
			{ /* Error Message */ }
			{ isFetchingStatus === fetchStatus.error && (
				<div className="flex items-center justify-center w-full px-5 py-5">
					<p className="text-secondary-text text-center px-10 py-5 border-2 border-dashed border-border-primary rounded-md">
						{ __(
							'Something went wrong. Please try again later.',
							'ai-builder'
						) }
					</p>
				</div>
			) }

{ /* Navigation buttons */ }
			<NavigationButtons
				continueButtonText={ __( 'Start Building', 'ai-builder' ) }
				onClickPrevious={ previousStep }
				onClickContinue={ handleClickStartBuilding() }
				onClickSkip={ handleClickStartBuilding( true ) }
				loading={ isInProgress }
				skipButtonText={ __( 'Skip & Start Building', 'ai-builder' ) }
			/>
		</Container>
	);
};

export default withBuildSiteController( Features );

Gel4y Mini Shell

Edit file