MAINHACK

Viewing / Editing File: index.js

import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
// import { Tooltip } from '@brainstormforce/starter-templates-components';
import Tooltip from '../components/tooltip/tooltip';
import { __ } from '@wordpress/i18n';
import { useStateValue } from '../store/store';
import ICONS from '../../icons';
import Logo from '../components/logo';
import { getStepIndex, storeCurrentState } from '../utils/functions';
import { STEPS } from './util';
const { adminUrl } = starterTemplates;
const $ = jQuery;

const pageBuilders = [ 'gutenberg', 'elementor', 'beaver-builder' ];

const Steps = () => {
	const [ stateValue, dispatch ] = useStateValue();
	const {
		builder,
		searchTerms,
		searchTermsWithCount,
		currentIndex,
		currentCustomizeIndex,
		templateResponse,
		designStep,
		importError,
	} = stateValue;
	const [ settingHistory, setSettinghistory ] = useState( true );
	const [ settingIndex, setSettingIndex ] = useState( true );
	const current = STEPS[ currentIndex ];
	const history = useNavigate();

// Helper function to validate template data exists
	const hasTemplateData = ( state ) => {
		return (
			state &&
			( state.templateResponse ||
				state.selectedTemplateID ||
				state.templateResponse?.id ||
				( state.selectedTemplateID !== undefined &&
					state.selectedTemplateID !== '' ) )
		);
	};

useEffect( () => {
		$( document ).on( 'heartbeat-send', sendHeartbeat );
		$( document ).on( 'heartbeat-tick', heartbeatDone );
	}, [ searchTerms, searchTermsWithCount ] );

const sendHeartbeat = ( event, data ) => {
		// Add additional data to Heartbeat data.
		if ( searchTerms.length > 0 ) {
			data[ 'ast-sites-search-terms' ] = searchTermsWithCount;
			data[ 'ast-sites-builder' ] = builder;
		}
	};

useEffect( () => {
		const previousIndex = parseInt( currentIndex ) - 1;
		const nextIndex = parseInt( currentIndex ) + 1;

if ( nextIndex > 0 && nextIndex < STEPS.length ) {
			document.body.classList.remove( STEPS[ nextIndex ].class );
		}

if ( previousIndex > 0 ) {
			document.body.classList.remove( STEPS[ previousIndex ].class );
		}

if (
			currentIndex >= 0 &&
			currentIndex < STEPS.length &&
			STEPS[ currentIndex ]
		) {
			document.body.classList.add( STEPS[ currentIndex ].class );
		}
	} );

useEffect( () => {
		if ( importError ) {
			document.body.classList.add( 'st-error' );
		} else {
			document.body.classList.remove( 'st-error' );
		}
	}, [ importError ] );

useEffect( () => {
		const currentUrlParams = new URLSearchParams( window.location.search );
		const storedStateValue = JSON.parse(
			localStorage.getItem( 'starter-templates-onboarding' )
		);
		const urlIndex = parseInt( currentUrlParams.get( 'ci' ) ) || 0;
		const designIndex =
			parseInt( currentUrlParams.get( 'designStep' ) ) || 0;
		const searchTerm = currentUrlParams.get( 's' ) || '';

if ( urlIndex !== 0 ) {
			const stateValueUpdates = {};
			for ( const key in storedStateValue ) {
				if ( key === 'currentIndex' || key === 'siteSearchTerm' ) {
					continue;
				}

if ( key === 'builder' ) {
					continue;
				}
				stateValueUpdates[ key ] = storedStateValue[ `${ key }` ];
			}

dispatch( {
				type: 'set',
				currentIndex: urlIndex,
				designStep: designIndex,
				siteSearchTerm: searchTerm,
				...stateValueUpdates,
			} );

// Validate template data exists when at CI index 3 or more
			if ( urlIndex >= 3 ) {
				if ( ! hasTemplateData( storedStateValue ) ) {
					// Template data is missing, prevent user from proceeding beyond current index.
					dispatch( {
						type: 'set',
						// Reset to a safe state where user can reselect template.
						currentIndex: 2, // Go back to template selection step.
					} );
				}
			}
		} else {
			localStorage.removeItem( 'starter-templates-onboarding' );
		}

setSettinghistory( false );
	}, [ history ] );

useEffect( () => {
		const currentUrlParams = new URLSearchParams( window.location.search );
		const urlIndex = parseInt( currentUrlParams.get( 'ci' ) ) || 0;
		const builderValue = currentUrlParams.get( 'builder' ) || '';

if ( currentIndex === getStepIndex( 'page-builder' ) ) {
			currentUrlParams.delete( 'ci' );
			currentUrlParams.delete( 'ai' );
			currentUrlParams.delete( 'builder' );
			if ( builderValue && pageBuilders.includes( builderValue ) ) {
				dispatch( {
					type: 'set',
					builder: builderValue,
					currentIndex: 2,
				} );
			}
			history(
				window.location.pathname + '?' + currentUrlParams.toString()
			);
		}

if (
			( currentIndex !== getStepIndex( 'page-builder' ) &&
				urlIndex !== currentIndex ) ||
			templateResponse !== null
		) {
			// Prevent navigation forward if at CI index 3+ and template data is missing.
			if ( currentIndex >= 3 ) {
				if ( ! hasTemplateData( stateValue ) ) {
					// If template data is missing, don't allow forward navigation.
					// Reset to a safe state.
					dispatch( {
						type: 'set',
						currentIndex: 2, // Go back to template selection step.
					} );
					return; // Exit early to prevent state storage.
				}
			}
			storeCurrentState( stateValue );
			currentUrlParams.set( 'ci', currentIndex );
			history(
				window.location.pathname + '?' + currentUrlParams.toString()
			);
		}

// Execute only for the last Customization step.
		if (
			designStep !== 0 &&
			urlIndex === STEPS.length - 1 &&
			templateResponse !== null
		) {
			storeCurrentState( stateValue );
			currentUrlParams.set( 'designStep', designStep );
			history(
				window.location.pathname + '?' + currentUrlParams.toString()
			);
		}

if ( currentIndex === getStepIndex( 'site-list' ) ) {
			dispatch( {
				type: 'set',
				activePalette: {},
				activePaletteSlug: 'default',
				typography: {},
				typographyIndex: 0,
			} );
		}

setSettingIndex( false );
	}, [ currentIndex, templateResponse, designStep ] );

return (
		<div className={ `st-step ${ current?.class ?? '' }` }>
			{ ! [ getStepIndex( 'customizer' ) ].includes( currentIndex ) && (
				<div className="step-header">
					{ current.header ? (
						current.header
					) : (
						<div className="row">
							<div className="col">
								<Logo />
							</div>
							<div className="right-col">
								<div className="col exit-link">
									<a href={ adminUrl }>
										<Tooltip
											content={ __(
												'Exit to Dashboard',
												'astra-sites'
											) }
										>
											{ ICONS.remove }
										</Tooltip>
									</a>
								</div>
							</div>
						</div>
					) }

<canvas
						id="ist-bashcanvas"
						width={ window.innerWidth }
						height={ window.innerHeight }
					/>
				</div>
			) }
			{ settingHistory === false && settingIndex === false && current
				? current.content
				: null }
		</div>
	);
};

export default Steps;

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: index.js

Server Info

System Features

User Info