OwlCyberSecurity - MANAGER

Edit File: ObjectiveSelection.jsx

import { useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Icon } from '@wordpress/icons';
import classNames from 'classnames';
import { useUserSelectionStore } from '@launch//state/user-selections';
import { Title } from '@launch/components/Title';
import { PageLayout } from '@launch/layouts/PageLayout';
import { usePagesStore } from '@launch/state/Pages';
import { pageState } from '@launch/state/factory';
import {
	Blog,
	Business,
	ECommerce,
	LandingPage,
	OtherSiteTypes,
} from '@launch/svg';

export const state = pageState('Website Objective', () => ({
	ready: false,
	canSkip: false,
	useNav: true,
	onRemove: () => {},
}));

const sections = [
	{
		title: __('Business', 'extendify-local'),
		slug: 'business',
		icon: <Business />,
	},
	{
		title: __('eCommerce', 'extendify-local'),
		slug: 'ecommerce',
		icon: <ECommerce />,
	},
	{
		title: __('Blog', 'extendify-local'),
		slug: 'blog',
		icon: <Blog />,
	},
	{
		title: __('Landing Page', 'extendify-local'),
		slug: 'landing-page',
		icon: <LandingPage />,
	},
	{
		title: __('Other', 'extendify-local'),
		slug: 'other',
		icon: <OtherSiteTypes />,
	},
];

export const ObjectiveSelection = () => {
	const { siteObjective, siteStructure, setSiteObjective, setSiteStructure } =
		useUserSelectionStore();

const { nextPage } = usePagesStore();

const handleClick = (slug) => {
		setSiteObjective(slug);
		// Add a small delay before page transition to ensure state updates
		// (particularly siteStructure) are fully processed and synchronized
		// before navigating to the next step in the site creation flow.
		setTimeout(nextPage, 5);
	};

useEffect(() => {
		if (siteObjective === 'landing-page') {
			setSiteStructure('single-page');
		}
	}, [siteObjective, setSiteStructure, siteStructure]);

useEffect(() => {
		state.setState({ ready: !!siteObjective });
	}, [siteObjective]);

return (
		<PageLayout>
			<div className="mx-auto grow overflow-y-auto px-6 py-8 md:p-12 3xl:p-16">
				<div className="mx-auto flex h-full flex-col justify-center">
					<Title
						title={__(
							'What type of website are you creating?',
							'extendify-local',
						)}
					/>
					<div className="grid grid-cols-2 gap-6 md:grid-cols-3 md:gap-8 lg:grid-cols-5">
						{sections.map(({ icon, slug, title }) => (
							<ButtonSelect
								icon={icon}
								key={slug}
								title={title}
								slug={slug}
								onClick={() => handleClick(slug)}
								selected={siteObjective === slug}
							/>
						))}
					</div>
				</div>
			</div>
		</PageLayout>
	);
};