2023-10-04 12:24:51 +00:00
|
|
|
|
/**
|
|
|
|
|
* External dependencies
|
|
|
|
|
*/
|
|
|
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
|
import classNames from 'classnames';
|
2024-02-26 13:53:02 +00:00
|
|
|
|
import { Button, Modal } from '@wordpress/components';
|
2023-10-09 05:19:08 +00:00
|
|
|
|
import { getNewPath } from '@woocommerce/navigation';
|
2023-11-09 01:32:47 +00:00
|
|
|
|
import { recordEvent } from '@woocommerce/tracks';
|
2023-11-15 04:39:51 +00:00
|
|
|
|
import interpolateComponents from '@automattic/interpolate-components';
|
|
|
|
|
import { Link } from '@woocommerce/components';
|
2024-02-26 13:53:02 +00:00
|
|
|
|
import { useState } from '@wordpress/element';
|
2024-03-05 10:11:31 +00:00
|
|
|
|
import { useSelect } from '@wordpress/data';
|
2023-10-04 12:24:51 +00:00
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Internal dependencies
|
|
|
|
|
*/
|
|
|
|
|
import { Intro } from '.';
|
2023-10-31 16:11:26 +00:00
|
|
|
|
import { IntroSiteIframe } from './intro-site-iframe';
|
|
|
|
|
import { getAdminSetting } from '~/utils/admin-settings';
|
2023-10-26 08:46:50 +00:00
|
|
|
|
import { navigateOrParent } from '../utils';
|
2023-10-04 12:24:51 +00:00
|
|
|
|
|
|
|
|
|
export const BaseIntroBanner = ( {
|
|
|
|
|
bannerTitle,
|
|
|
|
|
bannerText,
|
|
|
|
|
bannerClass,
|
2024-01-11 14:32:16 +00:00
|
|
|
|
showAIDisclaimer,
|
2023-10-04 12:24:51 +00:00
|
|
|
|
buttonIsLink,
|
|
|
|
|
bannerButtonOnClick,
|
|
|
|
|
bannerButtonText,
|
2023-10-31 16:11:26 +00:00
|
|
|
|
secondaryButton,
|
2024-01-18 13:59:10 +00:00
|
|
|
|
previewBanner,
|
2023-10-09 05:19:08 +00:00
|
|
|
|
children,
|
2023-10-04 12:24:51 +00:00
|
|
|
|
}: {
|
|
|
|
|
bannerTitle: string;
|
|
|
|
|
bannerText: string;
|
|
|
|
|
bannerClass: string;
|
2024-01-11 14:32:16 +00:00
|
|
|
|
showAIDisclaimer: boolean;
|
2023-10-12 02:49:25 +00:00
|
|
|
|
buttonIsLink?: boolean;
|
|
|
|
|
bannerButtonOnClick?: () => void;
|
|
|
|
|
bannerButtonText?: string;
|
2023-10-31 16:11:26 +00:00
|
|
|
|
secondaryButton?: React.ReactNode;
|
2024-01-18 13:59:10 +00:00
|
|
|
|
previewBanner?: React.ReactNode;
|
2023-10-09 05:19:08 +00:00
|
|
|
|
children?: React.ReactNode;
|
2023-10-04 12:24:51 +00:00
|
|
|
|
} ) => {
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
className={ classNames(
|
|
|
|
|
'woocommerce-customize-store-banner',
|
|
|
|
|
bannerClass
|
|
|
|
|
) }
|
|
|
|
|
>
|
|
|
|
|
<div className={ `woocommerce-customize-store-banner-content` }>
|
2023-10-31 16:11:26 +00:00
|
|
|
|
<div className="banner-actions">
|
|
|
|
|
<h1>{ bannerTitle }</h1>
|
|
|
|
|
<p>{ bannerText }</p>
|
|
|
|
|
{ bannerButtonText && (
|
|
|
|
|
<Button
|
|
|
|
|
onClick={ () =>
|
|
|
|
|
bannerButtonOnClick && bannerButtonOnClick()
|
|
|
|
|
}
|
|
|
|
|
variant={ buttonIsLink ? 'link' : 'primary' }
|
|
|
|
|
>
|
|
|
|
|
{ bannerButtonText }
|
|
|
|
|
</Button>
|
|
|
|
|
) }
|
|
|
|
|
{ secondaryButton }
|
2024-01-11 14:32:16 +00:00
|
|
|
|
{ showAIDisclaimer && (
|
|
|
|
|
<p className="ai-disclaimer">
|
|
|
|
|
{ interpolateComponents( {
|
|
|
|
|
mixedString: __(
|
|
|
|
|
'Powered by experimental AI. {{link}}Learn more{{/link}}',
|
|
|
|
|
'woocommerce'
|
2023-11-15 04:39:51 +00:00
|
|
|
|
),
|
2024-01-11 14:32:16 +00:00
|
|
|
|
components: {
|
|
|
|
|
link: (
|
|
|
|
|
<Link
|
|
|
|
|
href="https://automattic.com/ai-guidelines"
|
|
|
|
|
target="_blank"
|
|
|
|
|
type="external"
|
|
|
|
|
/>
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
} ) }
|
|
|
|
|
</p>
|
|
|
|
|
) }
|
2023-10-31 16:11:26 +00:00
|
|
|
|
</div>
|
2023-10-09 05:19:08 +00:00
|
|
|
|
{ children }
|
2023-10-04 12:24:51 +00:00
|
|
|
|
</div>
|
2024-01-18 13:59:10 +00:00
|
|
|
|
{ previewBanner }
|
2023-10-04 12:24:51 +00:00
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const NetworkOfflineBanner = () => {
|
|
|
|
|
return (
|
|
|
|
|
<BaseIntroBanner
|
|
|
|
|
bannerTitle={ __(
|
|
|
|
|
'Looking to design your store using AI?',
|
|
|
|
|
'woocommerce'
|
|
|
|
|
) }
|
|
|
|
|
bannerText={ __(
|
2023-10-12 02:49:25 +00:00
|
|
|
|
"Unfortunately, the [AI Store designer] isn't available right now as we can't detect your network. Please check your internet connection.",
|
2023-10-04 12:24:51 +00:00
|
|
|
|
'woocommerce'
|
|
|
|
|
) }
|
|
|
|
|
bannerClass="offline-banner"
|
|
|
|
|
bannerButtonOnClick={ () => {} }
|
2024-01-11 14:32:16 +00:00
|
|
|
|
showAIDisclaimer={ true }
|
2023-10-04 12:24:51 +00:00
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const JetpackOfflineBanner = ( {
|
|
|
|
|
sendEvent,
|
|
|
|
|
}: {
|
|
|
|
|
sendEvent: React.ComponentProps< typeof Intro >[ 'sendEvent' ];
|
|
|
|
|
} ) => {
|
|
|
|
|
return (
|
|
|
|
|
<BaseIntroBanner
|
|
|
|
|
bannerTitle={ __(
|
|
|
|
|
'Looking to design your store using AI?',
|
|
|
|
|
'woocommerce'
|
|
|
|
|
) }
|
|
|
|
|
bannerText={ __(
|
|
|
|
|
"It looks like you're using Jetpack's offline mode — switch to online mode to start designing with AI.",
|
|
|
|
|
'woocommerce'
|
|
|
|
|
) }
|
|
|
|
|
bannerClass="offline-banner"
|
|
|
|
|
buttonIsLink={ false }
|
|
|
|
|
bannerButtonOnClick={ () => {
|
|
|
|
|
sendEvent( {
|
|
|
|
|
type: 'JETPACK_OFFLINE_HOWTO',
|
|
|
|
|
} );
|
|
|
|
|
} }
|
|
|
|
|
bannerButtonText={ __( 'Find out how', 'woocommerce' ) }
|
2024-01-11 14:32:16 +00:00
|
|
|
|
showAIDisclaimer={ true }
|
2023-10-04 12:24:51 +00:00
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
2023-10-09 05:19:08 +00:00
|
|
|
|
export const ExistingThemeBanner = ( {
|
|
|
|
|
setOpenDesignChangeWarningModal,
|
|
|
|
|
}: {
|
|
|
|
|
setOpenDesignChangeWarningModal: ( arg0: boolean ) => void;
|
|
|
|
|
} ) => {
|
|
|
|
|
return (
|
|
|
|
|
<BaseIntroBanner
|
|
|
|
|
bannerTitle={ __(
|
|
|
|
|
'Use the power of AI to design your store',
|
|
|
|
|
'woocommerce'
|
|
|
|
|
) }
|
|
|
|
|
bannerText={ __(
|
|
|
|
|
'Design the look of your store, create pages, and generate copy using our built-in AI tools.',
|
|
|
|
|
'woocommerce'
|
|
|
|
|
) }
|
|
|
|
|
bannerClass=""
|
|
|
|
|
buttonIsLink={ false }
|
|
|
|
|
bannerButtonOnClick={ () => {
|
|
|
|
|
setOpenDesignChangeWarningModal( true );
|
|
|
|
|
} }
|
|
|
|
|
bannerButtonText={ __( 'Design with AI', 'woocommerce' ) }
|
2024-01-11 14:32:16 +00:00
|
|
|
|
showAIDisclaimer={ true }
|
2023-10-09 05:19:08 +00:00
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
2023-10-04 12:24:51 +00:00
|
|
|
|
export const DefaultBanner = ( {
|
|
|
|
|
sendEvent,
|
|
|
|
|
}: {
|
|
|
|
|
sendEvent: React.ComponentProps< typeof Intro >[ 'sendEvent' ];
|
|
|
|
|
} ) => {
|
|
|
|
|
return (
|
|
|
|
|
<BaseIntroBanner
|
|
|
|
|
bannerTitle={ __(
|
|
|
|
|
'Use the power of AI to design your store',
|
|
|
|
|
'woocommerce'
|
|
|
|
|
) }
|
|
|
|
|
bannerText={ __(
|
|
|
|
|
'Design the look of your store, create pages, and generate copy using our built-in AI tools.',
|
|
|
|
|
'woocommerce'
|
|
|
|
|
) }
|
|
|
|
|
bannerClass=""
|
|
|
|
|
buttonIsLink={ false }
|
|
|
|
|
bannerButtonOnClick={ () => {
|
|
|
|
|
sendEvent( {
|
|
|
|
|
type: 'DESIGN_WITH_AI',
|
|
|
|
|
} );
|
|
|
|
|
} }
|
|
|
|
|
bannerButtonText={ __( 'Design with AI', 'woocommerce' ) }
|
2024-01-11 14:32:16 +00:00
|
|
|
|
showAIDisclaimer={ true }
|
2023-10-04 12:24:51 +00:00
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const ThemeHasModsBanner = ( {
|
|
|
|
|
setOpenDesignChangeWarningModal,
|
|
|
|
|
}: {
|
|
|
|
|
setOpenDesignChangeWarningModal: ( arg0: boolean ) => void;
|
|
|
|
|
} ) => {
|
|
|
|
|
return (
|
|
|
|
|
<BaseIntroBanner
|
|
|
|
|
bannerTitle={ __(
|
|
|
|
|
'Use the power of AI to design your store',
|
|
|
|
|
'woocommerce'
|
|
|
|
|
) }
|
|
|
|
|
bannerText={ __(
|
|
|
|
|
'Design the look of your store, create pages, and generate copy using our built-in AI tools.',
|
|
|
|
|
'woocommerce'
|
|
|
|
|
) }
|
|
|
|
|
bannerClass=""
|
|
|
|
|
buttonIsLink={ false }
|
|
|
|
|
bannerButtonOnClick={ () => {
|
|
|
|
|
setOpenDesignChangeWarningModal( true );
|
|
|
|
|
} }
|
|
|
|
|
bannerButtonText={ __( 'Design with AI', 'woocommerce' ) }
|
2024-01-11 14:32:16 +00:00
|
|
|
|
showAIDisclaimer={ true }
|
2023-10-04 12:24:51 +00:00
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
};
|
2023-10-09 05:19:08 +00:00
|
|
|
|
|
2024-01-11 14:32:16 +00:00
|
|
|
|
export const NoAIBanner = ( {
|
|
|
|
|
sendEvent,
|
|
|
|
|
}: {
|
|
|
|
|
sendEvent: React.ComponentProps< typeof Intro >[ 'sendEvent' ];
|
|
|
|
|
} ) => {
|
2024-02-26 13:53:02 +00:00
|
|
|
|
const [ isModalOpen, setIsModalOpen ] = useState( false );
|
2024-03-05 10:11:31 +00:00
|
|
|
|
interface Theme {
|
|
|
|
|
stylesheet?: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const currentTheme = useSelect( ( select ) => {
|
|
|
|
|
return select( 'core' ).getCurrentTheme() as Theme;
|
|
|
|
|
}, [] );
|
|
|
|
|
|
|
|
|
|
const isDefaultTheme = currentTheme?.stylesheet === 'twentytwentyfour';
|
2024-02-26 13:53:02 +00:00
|
|
|
|
|
2024-01-09 14:49:59 +00:00
|
|
|
|
return (
|
2024-02-26 13:53:02 +00:00
|
|
|
|
<>
|
|
|
|
|
<BaseIntroBanner
|
|
|
|
|
bannerTitle={ __( 'Design your own', 'woocommerce' ) }
|
|
|
|
|
bannerText={ __(
|
|
|
|
|
'Quickly create a beautiful store using our built-in store designer. Choose your layout, select a style, and much more.',
|
|
|
|
|
'woocommerce'
|
|
|
|
|
) }
|
|
|
|
|
bannerClass="no-ai-banner"
|
|
|
|
|
bannerButtonText={ __( 'Start designing', 'woocommerce' ) }
|
|
|
|
|
bannerButtonOnClick={ () => {
|
2024-03-05 10:11:31 +00:00
|
|
|
|
if ( ! isDefaultTheme ) {
|
|
|
|
|
setIsModalOpen( true );
|
|
|
|
|
} else {
|
|
|
|
|
sendEvent( {
|
|
|
|
|
type: 'DESIGN_WITHOUT_AI',
|
|
|
|
|
} );
|
|
|
|
|
}
|
2024-02-26 13:53:02 +00:00
|
|
|
|
} }
|
|
|
|
|
showAIDisclaimer={ false }
|
|
|
|
|
/>
|
|
|
|
|
{ isModalOpen && (
|
|
|
|
|
<Modal
|
|
|
|
|
className={
|
|
|
|
|
'woocommerce-customize-store__theme-switch-warning-modal'
|
|
|
|
|
}
|
|
|
|
|
title={ __(
|
|
|
|
|
'Are you sure you want to design a new theme?',
|
|
|
|
|
'woocommerce'
|
|
|
|
|
) }
|
|
|
|
|
onRequestClose={ () => setIsModalOpen( false ) }
|
|
|
|
|
shouldCloseOnClickOutside={ false }
|
|
|
|
|
>
|
|
|
|
|
<p>
|
|
|
|
|
{ __(
|
|
|
|
|
'Your active theme will be changed and you could lose any changes you’ve made to it.',
|
|
|
|
|
'woocommerce'
|
|
|
|
|
) }
|
|
|
|
|
</p>
|
|
|
|
|
<div className="woocommerce-customize-store__theme-switch-warning-modal-footer">
|
|
|
|
|
<Button
|
|
|
|
|
onClick={ () => {
|
|
|
|
|
setIsModalOpen( false );
|
|
|
|
|
} }
|
|
|
|
|
variant="link"
|
|
|
|
|
>
|
|
|
|
|
{ __( 'Cancel', 'woocommerce' ) }
|
|
|
|
|
</Button>
|
|
|
|
|
<Button
|
|
|
|
|
onClick={ () => {
|
|
|
|
|
sendEvent( {
|
|
|
|
|
type: 'DESIGN_WITHOUT_AI',
|
|
|
|
|
} );
|
|
|
|
|
setIsModalOpen( false );
|
2024-03-05 10:11:31 +00:00
|
|
|
|
recordEvent(
|
|
|
|
|
'customize_your_store_agree_to_theme_switch_click'
|
|
|
|
|
);
|
2024-02-26 13:53:02 +00:00
|
|
|
|
} }
|
|
|
|
|
variant="primary"
|
|
|
|
|
>
|
|
|
|
|
{ __( 'Design a new theme', 'woocommerce' ) }
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</Modal>
|
2024-01-09 14:49:59 +00:00
|
|
|
|
) }
|
2024-02-26 13:53:02 +00:00
|
|
|
|
</>
|
2024-01-09 14:49:59 +00:00
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
2023-10-09 05:19:08 +00:00
|
|
|
|
export const ExistingAiThemeBanner = ( {
|
|
|
|
|
setOpenDesignChangeWarningModal,
|
|
|
|
|
}: {
|
|
|
|
|
setOpenDesignChangeWarningModal: ( arg0: boolean ) => void;
|
|
|
|
|
} ) => {
|
2023-10-31 16:11:26 +00:00
|
|
|
|
const secondaryButton = (
|
|
|
|
|
<Button
|
|
|
|
|
className=""
|
|
|
|
|
onClick={ () => {
|
2023-11-10 06:51:00 +00:00
|
|
|
|
recordEvent(
|
|
|
|
|
'customize_your_store_intro_create_a_new_one_click'
|
|
|
|
|
);
|
2023-10-31 16:11:26 +00:00
|
|
|
|
setOpenDesignChangeWarningModal( true );
|
|
|
|
|
} }
|
|
|
|
|
variant={ 'secondary' }
|
|
|
|
|
>
|
|
|
|
|
{ __( 'Create a new one', 'woocommerce' ) }
|
|
|
|
|
</Button>
|
|
|
|
|
);
|
|
|
|
|
const siteUrl = getAdminSetting( 'siteUrl' ) + '?cys-hide-admin-bar=1';
|
|
|
|
|
|
2023-10-09 05:19:08 +00:00
|
|
|
|
return (
|
|
|
|
|
<BaseIntroBanner
|
|
|
|
|
bannerTitle={ __( 'Customize your custom theme', 'woocommerce' ) }
|
|
|
|
|
bannerText={ __(
|
|
|
|
|
'Keep customizing the look of your AI-generated store, or start over and create a new one.',
|
|
|
|
|
'woocommerce'
|
|
|
|
|
) }
|
|
|
|
|
bannerClass="existing-ai-theme-banner"
|
|
|
|
|
buttonIsLink={ false }
|
|
|
|
|
bannerButtonOnClick={ () => {
|
2023-11-09 01:32:47 +00:00
|
|
|
|
recordEvent( 'customize_your_store_intro_customize_click' );
|
2023-10-26 08:46:50 +00:00
|
|
|
|
navigateOrParent(
|
|
|
|
|
window,
|
2023-12-21 15:56:22 +00:00
|
|
|
|
getNewPath(
|
|
|
|
|
{ customizing: true },
|
|
|
|
|
'/customize-store/assembler-hub',
|
|
|
|
|
{}
|
|
|
|
|
)
|
2023-10-09 05:19:08 +00:00
|
|
|
|
);
|
|
|
|
|
} }
|
|
|
|
|
bannerButtonText={ __( 'Customize', 'woocommerce' ) }
|
2023-10-31 16:11:26 +00:00
|
|
|
|
secondaryButton={ secondaryButton }
|
2024-01-11 14:32:16 +00:00
|
|
|
|
showAIDisclaimer={ true }
|
2023-10-09 05:19:08 +00:00
|
|
|
|
>
|
2023-10-31 16:11:26 +00:00
|
|
|
|
<div className={ 'woocommerce-block-preview-container' }>
|
|
|
|
|
<div className="iframe-container">
|
|
|
|
|
<IntroSiteIframe siteUrl={ siteUrl } />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-10-09 05:19:08 +00:00
|
|
|
|
</BaseIntroBanner>
|
|
|
|
|
);
|
|
|
|
|
};
|
2024-01-18 13:59:10 +00:00
|
|
|
|
|
|
|
|
|
export const ExistingNoAiThemeBanner = () => {
|
|
|
|
|
const siteUrl = getAdminSetting( 'siteUrl' ) + '?cys-hide-admin-bar=1';
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<BaseIntroBanner
|
|
|
|
|
bannerTitle={ __( 'Edit your custom theme', 'woocommerce' ) }
|
|
|
|
|
bannerText={ __(
|
|
|
|
|
'Continue to customize your store using the store designer. Change your color palette, fonts, page layouts, and more.',
|
|
|
|
|
'woocommerce'
|
|
|
|
|
) }
|
|
|
|
|
bannerClass="existing-no-ai-theme-banner"
|
|
|
|
|
buttonIsLink={ false }
|
|
|
|
|
bannerButtonOnClick={ () => {
|
|
|
|
|
recordEvent( 'customize_your_store_intro_customize_click' );
|
|
|
|
|
navigateOrParent(
|
|
|
|
|
window,
|
|
|
|
|
getNewPath(
|
|
|
|
|
{ customizing: true },
|
|
|
|
|
'/customize-store/assembler-hub',
|
|
|
|
|
{}
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
} }
|
|
|
|
|
bannerButtonText={ __( 'Customize your theme', 'woocommerce' ) }
|
|
|
|
|
showAIDisclaimer={ false }
|
|
|
|
|
previewBanner={ <IntroSiteIframe siteUrl={ siteUrl } /> }
|
|
|
|
|
></BaseIntroBanner>
|
|
|
|
|
);
|
|
|
|
|
};
|