OwlCyberSecurity - MANAGER

Edit File: authorize-account.js

import { useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { ArrowRightIcon, ArrowLongLeftIcon } from '@heroicons/react/24/outline';
import { useDispatch } from '@wordpress/data';
import Button from '../components/button';
import { STORE_KEY } from '../store';
import { Graphics } from '../ui/graphics';
import { useNavigateSteps } from '../router';
import Header from '../components/header';

const GetStarted = () => {
	const { nextStep } = useNavigateSteps();

const { setLimitExceedModal } = useDispatch( STORE_KEY );

const authenticated = aiBuilderVars?.zip_token_exists;
	const zipPlans = aiBuilderVars?.zip_plans;
	const sitesRemaining = zipPlans?.plan_data?.remaining;
	const aiSitesRemainingCount = sitesRemaining?.ai_sites_count;

const { zipwp_auth } = wpApiSettings || {};
	const { screen_url, redirect_url, source, partner_id } = zipwp_auth || {};

useEffect( () => {
		const urlParams = new URLSearchParams( window.location.search );

const encodedRedirectUrl = encodeURIComponent(
		redirect_url + '&security=' + aiBuilderVars.zipwp_auth_nonce
	);

return (
		<div className="flex-1 w-full bg-container-background">
			<Header />
			<div className="flex w-full mt-7 md:mt-14 lg:mt-28">
				<div className="gap-10 lg:gap-16 flex-wrap lg:flex-nowrap h-full flex items-center justify-center w-full px-8 lg:px-10">
					<div className="flex flex-col items-start justify-center gap-6 order-2 lg:order-1 h-full">
						<h1 className="font-semibold">
							{ __(
								'Building a website has never been this easy!',
								'ai-builder'
							) }
						</h1>
						<p className=" m-0 !text-zip-body-text !text-xl !font-normal">
							{ __(
								'Here is how the AI Website Builder works:',
								'ai-builder'
							) }
						</p>
						<ul className="list-decimal ml-6 my-0 !text-zip-body-text font-normal space-y-1.5">
							<li className="text-start text-xl">
								{ __(
									'Create a free account on ZipWP platform.',
									'ai-builder'
								) }
							</li>
							<li className="text-start text-xl">
								{ __(
									'Describe your dream website in your own words.',
									'ai-builder'
								) }
							</li>
							<li className="text-start text-xl">
								{ __(
									'Watch as AI crafts your WordPress website instantly.',
									'ai-builder'
								) }
							</li>
							<li className="text-start text-xl">
								{ __(
									'Refine the website with an easy drag & drop builder.',
									'ai-builder'
								) }
							</li>
							<li className="text-start text-xl">
								{ __( 'Launch.', 'ai-builder' ) }
							</li>
						</ul>

<div className="gap-6 mt-4 mb-10 flex flex-col items-start justify-start">
							<Button
								className="bg-accent-st-secondary text-white"
								variant="blank"
								hasSuffixIcon
								onClick={ () => {
									const url = `${ screen_url }?type=token&redirect_url=${ encodedRedirectUrl }&ask=/register&source=${ source }${
										partner_id ? `&aff=${ partner_id }` : ''
									}`;

export default GetStarted;