woocommerce/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx

95 lines
2.2 KiB
TypeScript

/**
* External dependencies
*/
import { Loader } from '@woocommerce/onboarding';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import analyzingYourResponses from '../../assets/images/loader-analyzing-your-responses.svg';
import designingTheBestLook from '../../assets/images/loader-designing-the-best-look.svg';
import comparingTheTopPerformingStores from '../../assets/images/loader-comparing-top-performing-stores.svg';
import assemblingAiOptimizedStore from '../../assets/images/loader-assembling-ai-optimized-store.svg';
import applyingFinishingTouches from '../../assets/images/loader-applying-the-finishing-touches.svg';
const loaderSteps = [
{
title: __( 'Analyzing your responses', 'woocommerce' ),
image: (
<img
src={ analyzingYourResponses }
alt={ __( 'Analyzing your responses', 'woocommerce' ) }
/>
),
progress: 17,
},
{
title: __( 'Comparing the top performing stores', 'woocommerce' ),
image: (
<img
src={ comparingTheTopPerformingStores }
alt={ __(
'Comparing the top performing stores',
'woocommerce'
) }
/>
),
progress: 33,
},
{
title: __( 'Designing the best look for your business', 'woocommerce' ),
image: (
<img
src={ designingTheBestLook }
alt={ __(
'Designing the best look for your business',
'woocommerce'
) }
/>
),
progress: 50,
},
{
title: __( 'Assembling your AI-optimized store', 'woocommerce' ),
image: (
<img
src={ assemblingAiOptimizedStore }
alt={ __(
'Assembling your AI-optimized store',
'woocommerce'
) }
/>
),
progress: 66,
},
{
title: __( 'Applying the finishing touches', 'woocommerce' ),
image: (
<img
src={ applyingFinishingTouches }
alt={ __( 'Applying the finishing touches', 'woocommerce' ) }
/>
),
progress: 83,
},
];
export const ApiCallLoader = () => {
return (
<Loader>
<Loader.Sequence interval={ 3000 }>
{ loaderSteps.map( ( step, index ) => (
<Loader.Layout key={ index }>
<Loader.Illustration>
{ step.image }
</Loader.Illustration>
<Loader.Title>{ step.title }</Loader.Title>
<Loader.ProgressBar progress={ step.progress || 0 } />
</Loader.Layout>
) ) }
</Loader.Sequence>
</Loader>
);
};