/**
* 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 (