[CYS on Core] Intro screen - Update the copy depending on whether the user already started to customize their store (#43690)

* Add new banner for no-Ai existing theme

- Add new banner
- Update copy
- Refactor the theme preview structure

* Make preview optional

* Remove log

* Remove unused param

* Fix linting error

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Alba Rincón 2024-01-18 14:59:10 +01:00 committed by GitHub
parent 7cd04dfa5a
commit 589259f39f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 64 additions and 22 deletions

View File

@ -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;

View File

@ -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 = ( {
</div>
{ children }
</div>
{ previewBanner }
</div>
);
};
@ -289,3 +292,33 @@ export const ExistingAiThemeBanner = ( {
</BaseIntroBanner>
);
};
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>
);
};

View File

@ -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;

View File

@ -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.