diff --git a/plugins/woocommerce-admin/client/customize-store/intro/index.tsx b/plugins/woocommerce-admin/client/customize-store/intro/index.tsx index affcdc3e729..abcb7c107bd 100644 --- a/plugins/woocommerce-admin/client/customize-store/intro/index.tsx +++ b/plugins/woocommerce-admin/client/customize-store/intro/index.tsx @@ -31,6 +31,7 @@ import { ExistingAiThemeBanner, ExistingThemeBanner, NoAIBanner, + ExistingNoAiThemeBanner, } from './intro-banners'; export type events = @@ -54,6 +55,7 @@ const BANNER_COMPONENTS = { 'existing-ai-theme': ExistingAiThemeBanner, 'existing-theme': ExistingThemeBanner, [ FlowType.noAI ]: NoAIBanner, + 'existing-no-ai-theme': ExistingNoAiThemeBanner, default: DefaultBanner, }; @@ -85,16 +87,21 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => { let modalStatus: ModalStatus = 'no-modal'; let bannerStatus: BannerStatus = 'default'; + switch ( true ) { - case context.flowType === FlowType.noAI: - bannerStatus = FlowType.noAI; - break; case isNetworkOffline: bannerStatus = 'network-offline'; break; case isJetpackOffline as boolean: bannerStatus = 'jetpack-offline'; break; + case context.flowType === FlowType.noAI && + ! customizeStoreTaskCompleted: + bannerStatus = FlowType.noAI; + break; + case context.flowType === FlowType.noAI && customizeStoreTaskCompleted: + bannerStatus = 'existing-no-ai-theme'; + break; case ! customizeStoreTaskCompleted && activeThemeHasMods: bannerStatus = 'task-incomplete-active-theme-has-mods'; break; diff --git a/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx b/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx index 498986906c9..3fd6161dfb5 100644 --- a/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx +++ b/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx @@ -26,6 +26,7 @@ export const BaseIntroBanner = ( { bannerButtonOnClick, bannerButtonText, secondaryButton, + previewBanner, children, }: { bannerTitle: string; @@ -36,6 +37,7 @@ export const BaseIntroBanner = ( { bannerButtonOnClick?: () => void; bannerButtonText?: string; secondaryButton?: React.ReactNode; + previewBanner?: React.ReactNode; children?: React.ReactNode; } ) => { return ( @@ -82,6 +84,7 @@ export const BaseIntroBanner = ( { { children } + { previewBanner } ); }; @@ -289,3 +292,33 @@ export const ExistingAiThemeBanner = ( { ); }; + +export const ExistingNoAiThemeBanner = () => { + const siteUrl = getAdminSetting( 'siteUrl' ) + '?cys-hide-admin-bar=1'; + + return ( + { + recordEvent( 'customize_your_store_intro_customize_click' ); + navigateOrParent( + window, + getNewPath( + { customizing: true }, + '/customize-store/assembler-hub', + {} + ) + ); + } } + bannerButtonText={ __( 'Customize your theme', 'woocommerce' ) } + showAIDisclaimer={ false } + previewBanner={ } + > + ); +}; diff --git a/plugins/woocommerce-admin/client/customize-store/intro/intro.scss b/plugins/woocommerce-admin/client/customize-store/intro/intro.scss index f24ddb3e8a8..cf48aae4bad 100644 --- a/plugins/woocommerce-admin/client/customize-store/intro/intro.scss +++ b/plugins/woocommerce-admin/client/customize-store/intro/intro.scss @@ -108,6 +108,9 @@ min-height: 248px; width: 100%; align-items: center; + padding-left: 50px; + padding-right: 40px; + position: relative; &.offline-banner { background: rgba(242, 237, 255, 0.6) url(../assets/images/intro-banner-offline.svg) no-repeat center right; @@ -119,45 +122,40 @@ background: rgba(242, 237, 255, 0.6) url(../assets/images/intro-banner-no-ai.svg) no-repeat center right; } - &.existing-ai-theme-banner { + &.existing-ai-theme-banner, + &.existing-no-ai-theme-banner { background: rgba(246, 247, 247, 1); .woocommerce-customize-store-banner-content { width: 100%; display: flex; - } + justify-content: space-between; - .woocommerce-block-preview-container { - flex: 1; - position: relative; - } - - .iframe-container { - pointer-events: none; - overflow: hidden; - position: absolute; - top: -24px; - right: 15%; + .banner-actions { + width: 50%; + } } .preview-iframe { - width: 480px; - height: 301px; - zoom: 2.5; + pointer-events: none; + position: absolute; + bottom: -497px; + right: 50px; + width: 1100px; + height: 710px; -moz-transform: scale(0.3); -moz-transform-origin: top right; -o-transform: scale(0.3); -o-transform-origin: top right; -webkit-transform: scale(0.3); -webkit-transform-origin: top right; - border-top-left-radius: 8px; - border-top-right-radius: 8px; + border-top-left-radius: 28px; + border-top-right-radius: 28px; } } .woocommerce-customize-store-banner-content { width: 450px; - margin-left: 50px; @media only screen and (min-width: 1400px) { width: 700px; diff --git a/plugins/woocommerce/changelog/43690-43492-update-copy-when-customizing b/plugins/woocommerce/changelog/43690-43492-update-copy-when-customizing new file mode 100644 index 00000000000..9ebd0c01a22 --- /dev/null +++ b/plugins/woocommerce/changelog/43690-43492-update-copy-when-customizing @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +CYS intro screen: update the copy depending on whether the user already started to customize their store. \ No newline at end of file