OwlCyberSecurity - MANAGER

Edit File: hello-theme.js

/* eslint-disable @wordpress/i18n-ellipsis */
import { useContext, useEffect, useState, useCallback } from 'react';
import { OnboardingContext } from '../context/context';
import { useNavigate } from '@reach/router';
import useAjax from 'elementor-app/hooks/use-ajax';
import Layout from '../components/layout/layout';
import PageContentLayout from '../components/layout/page-content-layout';

export default function HelloTheme() {
	const { state, updateState, getStateObjectToUpdate } = useContext( OnboardingContext ),
		{ ajaxState: activateHelloThemeAjaxState, setAjax: setActivateHelloThemeAjaxState } = useAjax(),
		// Allow navigating back to this screen if it was completed in the onboarding.
		[ helloInstalledInOnboarding, setHelloInstalledInOnboarding ] = useState( false ),
		[ isInstalling, setIsInstalling ] = useState( false ),
		noticeStateSuccess = {
			type: 'success',
			icon: 'eicon-check-circle-o',
			message: __( 'Your site’s got Hello theme. High-five!', 'elementor' ),
		},
		[ noticeState, setNoticeState ] = useState( state.isHelloThemeActivated ? noticeStateSuccess : null ),
		[ activeTimeouts, setActiveTimeouts ] = useState( [] ),
		continueWithHelloThemeText = state.isHelloThemeActivated ? __( 'Next', 'elementor' ) : __( 'Continue with Hello Theme', 'elementor' ),
		[ actionButtonText, setActionButtonText ] = useState( continueWithHelloThemeText ),
		navigate = useNavigate(),
		pageId = 'hello',
		nextStep = 'siteName',
		goToNextScreen = () => navigate( 'onboarding/' + nextStep );

/**
	 * Setup
	 *
	 * If Hello Theme is already activated when onboarding starts, This screen is unneeded and is marked as 'completed'
	 * and skipped.
	 */
	useEffect( () => {
		if ( ! helloInstalledInOnboarding && state.isHelloThemeActivated ) {
			const stateToUpdate = getStateObjectToUpdate( state, 'steps', pageId, 'completed' );

updateState( stateToUpdate );

goToNextScreen();
		}
	}, [] );

const resetScreenContent = () => {
		// Clear any active timeouts for changing the action button text during installation.
		activeTimeouts.forEach( ( timeoutID ) => clearTimeout( timeoutID ) );

setActiveTimeouts( [] );

setIsInstalling( false );

setActionButtonText( continueWithHelloThemeText );
	};

/**
	 * Callbacks
	 */
	const onHelloThemeActivationSuccess = useCallback( () => {
		setIsInstalling( false );

elementorCommon.events.dispatchEvent( {
			event: 'indication prompt',
			version: '',
			details: {
				placement: elementorAppConfig.onboarding.eventPlacement,
				step: state.currentStep,
				action_state: 'success',
				action: 'hello theme activation',
			},
		} );

setNoticeState( noticeStateSuccess );

setActionButtonText( __( 'Next', 'elementor' ) );

const stateToUpdate = getStateObjectToUpdate( state, 'steps', pageId, 'completed' );

stateToUpdate.isHelloThemeActivated = true;

updateState( stateToUpdate );

setHelloInstalledInOnboarding( true );

goToNextScreen();
	}, [] );

const onErrorInstallHelloTheme = () => {
		elementorCommon.events.dispatchEvent( {
			event: 'indication prompt',
			version: '',
			details: {
				placement: elementorAppConfig.onboarding.eventPlacement,
				step: state.currentStep,
				action_state: 'failure',
				action: 'hello theme install',
			},
		} );

setNoticeState( {
			type: 'error',
			icon: 'eicon-warning',
			message: __( 'There was a problem installing Hello Theme.', 'elementor' ),
		} );

resetScreenContent();
	};

const activateHelloTheme = () => {
		setIsInstalling( true );

updateState( { isHelloThemeInstalled: true } );

setActivateHelloThemeAjaxState( {
			data: { action: 'elementor_activate_hello_theme' },
		} );
	};

const installHelloTheme = () => {
		if ( ! isInstalling ) {
			setIsInstalling( true );
		}

wp.updates.ajax( 'install-theme', {
			slug: 'hello-elementor',
			success: () => activateHelloTheme(),
			error: () => onErrorInstallHelloTheme(),
		} );
	};

const sendNextButtonEvent = () => {
		elementorCommon.events.dispatchEvent( {
			event: 'next',
			version: '',
			details: {
				placement: elementorAppConfig.onboarding.eventPlacement,
				step: state.currentStep,
			},
		} );
	};

/**
	 * Action Button
	 */
	const actionButton = {
		text: actionButtonText,
		role: 'button',
	};

if ( isInstalling ) {
		actionButton.className = 'e-onboarding__button--processing';
	}

if ( state.isHelloThemeActivated ) {
		actionButton.onClick = () => {
			sendNextButtonEvent();

goToNextScreen();
		};
	} else {
		actionButton.onClick = () => {
			sendNextButtonEvent();

if ( state.isHelloThemeInstalled && ! state.isHelloThemeActivated ) {
				activateHelloTheme();
			} else if ( ! state.isHelloThemeInstalled ) {
				installHelloTheme();
			} else {
				goToNextScreen();
			}
		};
	}

/**
	 * Skip Button
	 */
	let skipButton;

if ( 'completed' !== state.steps[ pageId ] ) {
		skipButton = {
			text: __( 'Skip', 'elementor' ),
		};
	}

/**
	 * Set timeouts for updating the 'Next' button text if the Hello Theme installation is taking too long.
	 */
	useEffect( () => {
		if ( isInstalling ) {
			setActionButtonText( (
				<>
					
				</>
			) );
		}

const actionTextTimeouts = [];

const timeout4 = setTimeout( () => {
			if ( ! isInstalling ) {
				return;
			}

setActionButtonText( (
				<>
					
					{ __( 'Hold on, this can take a minute...', 'elementor' ) }
				</>
			) );
		}, 4000 );

actionTextTimeouts.push( timeout4 );

const timeout30 = setTimeout( () => {
			if ( ! isInstalling ) {
				return;
			}

setActionButtonText( (
				<>
					
					{ __( 'Okay, now we\'re really close...', 'elementor' ) }
				</>
			) );
		}, 30000 );

actionTextTimeouts.push( timeout30 );

setActiveTimeouts( actionTextTimeouts );
	}, [ isInstalling ] );

useEffect( () => {
		if ( 'initial' !== activateHelloThemeAjaxState.status ) {
			if ( 'success' === activateHelloThemeAjaxState.status && activateHelloThemeAjaxState.response?.helloThemeActivated ) {
				onHelloThemeActivationSuccess();
			} else if ( 'error' === activateHelloThemeAjaxState.status ) {
				elementorCommon.events.dispatchEvent( {
					event: 'indication prompt',
					version: '',
					details: {
						placement: elementorAppConfig.onboarding.eventPlacement,
						step: state.currentStep,
						action_state: 'failure',
						action: 'hello theme activation',
					},
				} );

setNoticeState( {
					type: 'error',
					icon: 'eicon-warning',
					message: __( 'There was a problem activating Hello Theme.', 'elementor' ),
				} );

// Clear any active timeouts for changing the action button text during installation.
				resetScreenContent();
			}
		}
	}, [ activateHelloThemeAjaxState.status ] );

return (
		<Layout pageId={ pageId } nextStep={ nextStep }>
			<PageContentLayout
				image={ elementorCommon.config.urls.assets + 'images/app/onboarding/Illustration_Hello.svg' }
				title={ __( 'Every site starts with a theme.', 'elementor' ) }
				actionButton={ actionButton }
				skipButton={ skipButton }
				noticeState={ noticeState }
			>
				
					{ __( 'Hello is Elementor\'s official blank canvas theme optimized to build your website exactly the way you want.', 'elementor' ) }
				
				
					{ __( 'Here\'s why:', 'elementor' ) }
				
				<ul className="e-onboarding__feature-list">
					<li>{ __( 'Light-weight and fast loading', 'elementor' ) }</li>
					<li>{ __( 'Great for SEO', 'elementor' ) }</li>
					<li>{ __( 'Already being used by 1M+ web creators', 'elementor' ) }</li>
				</ul>
			</PageContentLayout>
			<div className="e-onboarding__footnote">
				{ '* ' + __( 'You can switch your theme later on', 'elementor' ) }
			</div>
		</Layout>
	);
}