55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { Button, Modal } from '@wordpress/components';
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
type AiOfflineModalProps = {
|
|
skipTour: () => void;
|
|
takeTour: () => void;
|
|
shouldTourBeShown: boolean;
|
|
};
|
|
|
|
export const AiOfflineModal = ( {
|
|
skipTour,
|
|
takeTour,
|
|
shouldTourBeShown,
|
|
}: AiOfflineModalProps ) => {
|
|
return (
|
|
<Modal
|
|
className="woocommerce-customize-store__onboarding-welcome-modal"
|
|
title={ __( 'Welcome to your store!', 'woocommerce' ) }
|
|
onRequestClose={ skipTour }
|
|
shouldCloseOnClickOutside={ false }
|
|
>
|
|
<span className="woocommerce-customize-store__title">
|
|
{ __(
|
|
'Our AI tool had a few issues generating your content.',
|
|
'woocommerce'
|
|
) }
|
|
</span>
|
|
<p>
|
|
{ __(
|
|
"But don't let that stop you! Start customizing the look and feel of your store by adding your logo and selecting your colors and layout. ",
|
|
'woocommerce'
|
|
) }
|
|
{ shouldTourBeShown &&
|
|
__(
|
|
"Take a quick tour to discover what's possible.",
|
|
'woocommerce'
|
|
) }
|
|
</p>
|
|
{ shouldTourBeShown && (
|
|
<div className="woocommerce-customize-store__design-change-warning-modal-footer">
|
|
<Button onClick={ skipTour } variant="link">
|
|
{ __( 'Skip', 'woocommerce' ) }
|
|
</Button>
|
|
<Button onClick={ takeTour } variant="primary">
|
|
{ __( 'Take a tour', 'woocommerce' ) }
|
|
</Button>
|
|
</div>
|
|
) }
|
|
</Modal>
|
|
);
|
|
};
|