/** * External dependencies */ import { Loader } from '@woocommerce/onboarding'; import { __ } from '@wordpress/i18n'; import { useEffect, useRef, useState } from '@wordpress/element'; import { getNewPath } from '@woocommerce/navigation'; /** * Internal dependencies */ import loaderAssemblingStore from '../../assets/images/loader-assembling-ai-optimized-store.svg'; import loaderTurningLights from '../../assets/images/loader-turning-lights.svg'; import openingTheDoors from '../../assets/images/loader-opening-the-doors.svg'; import { attachIframeListeners, createAugmentedSteps, onIframeLoad, } from '~/customize-store/utils'; import { DesignWithoutAIStateMachineEvents } from '../state-machine'; const loaderSteps = [ { title: __( 'Setting up the foundations', 'woocommerce' ), image: ( { ), progress: 25, }, { title: __( 'Turning on the lights', 'woocommerce' ), image: ( { ), progress: 50, }, { title: __( 'Opening the doors', 'woocommerce' ), image: ( { ), progress: 100, }, ]; // Loader for the API call without the last frame. export const ApiCallLoader = () => { const [ progress, setProgress ] = useState( 5 ); useEffect( () => { const preload = ( src: string ) => { const img = new Image(); img.src = src; img.onload = () => {}; }; // We preload the these images to avoid flickering. We only need to preload them because the others are small enough to be inlined in base64. preload( loaderAssemblingStore ); preload( loaderTurningLights ); preload( openingTheDoors ); }, [] ); const augmentedSteps = createAugmentedSteps( loaderSteps.slice( 0, -1 ), 10 ); return ( { // to get around bad set state timing issue setTimeout( () => { setProgress( augmentedSteps[ index ].progress ); }, 0 ); } } > { augmentedSteps.map( ( step ) => ( { step.image } { step.title } ) ) } ); }; type SendEventFn = ( event: DesignWithoutAIStateMachineEvents ) => void; const AssemblerHub = ( { sendEvent }: { sendEvent: SendEventFn } ) => { const assemblerUrl = getNewPath( {}, '/customize-store/assembler-hub', {} ); const iframe = useRef< HTMLIFrameElement >( null ); const [ isVisible, setIsVisible ] = useState( false ); useEffect( () => { window.addEventListener( 'message', ( event ) => { if ( event.data?.type === 'INSTALL_FONTS' ) { sendEvent( { type: 'INSTALL_FONTS' } ); } if ( event.data?.type === 'INSTALL_PATTERNS' ) { sendEvent( { type: 'INSTALL_PATTERNS' } ); } } ); }, [ sendEvent ] ); return (