diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx index 0309f68df05..494325bf537 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx @@ -60,20 +60,24 @@ export const SidebarNavigationScreenColorPalette = () => { context: { flowType }, } = useContext( CustomizeStoreContext ); - const description = - flowType === FlowType.AIOnline - ? __( - 'Based on the info you shared, our AI tool recommends using this color palette. Want to change it? You can select or add new colors below, or update them later in Editor | Styles.', - 'woocommerce' - ) - : __( - 'Choose the color palette that best suits your brand. Want to change it? Create your custom color palette below, or update it later in Editor | Styles.', - 'woocommerce' - ); + const aiOnline = flowType === FlowType.AIOnline; + + const title = aiOnline + ? __( 'Change the color palette', 'woocommerce' ) + : __( 'Choose your color palette', 'woocommerce' ); + const description = aiOnline + ? __( + 'Based on the info you shared, our AI tool recommends using this color palette. Want to change it? You can select or add new colors below, or update them later in Editor | Styles.', + 'woocommerce' + ) + : __( + 'Choose the color palette that best suits your brand. Want to change it? Create your custom color palette below, or update it later in Editor | Styles.', + 'woocommerce' + ); return ( { [ blocks, onChange, setSelectedPattern, scroll ] ); + const { context } = useContext( CustomizeStoreContext ); + const aiOnline = context.flowType === FlowType.AIOnline; + + const title = aiOnline + ? __( 'Change your footer', 'woocommerce' ) + : __( 'Choose your footer', 'woocommerce' ); + return ( { [ blocks, onChange, setSelectedPattern, scroll ] ); + const { context } = useContext( CustomizeStoreContext ); + const aiOnline = context.flowType === FlowType.AIOnline; + + const title = aiOnline + ? __( 'Change your header', 'woocommerce' ) + : __( 'Choose your header', 'woocommerce' ); + return ( { }, [ blocks, homePatterns ] ); const { context } = useContext( CustomizeStoreContext ); - const sidebarMessage = - context.flowType === FlowType.AIOnline - ? __( - 'Based on the most successful stores in your industry and location, our AI tool has recommended this template for your business. Prefer a different layout? Choose from the templates below now, or later via the Editor.', - 'woocommerce' - ) - : __( - 'Based on the most successful stores, we recommend this layout for your business. Prefer something different? Choose from the templates below now, or continue customizing this page, including the content, later via the Editor.', - 'woocommerce' - ); + const aiOnline = context.flowType === FlowType.AIOnline; + + const title = aiOnline + ? __( 'Change your homepage', 'woocommerce' ) + : __( 'Design your homepage', 'woocommerce' ); + const sidebarMessage = aiOnline + ? __( + 'Based on the most successful stores in your industry and location, our AI tool has recommended this template for your business. Prefer a different layout? Choose from the templates below now, or later via the Editor.', + 'woocommerce' + ) + : __( + 'Based on the most successful stores, we recommend this layout for your business. Prefer something different? Choose from the templates below now, or continue customizing this page, including the content, later via the Editor.', + 'woocommerce' + ); return ( { + const { + context: { flowType }, + } = useContext( CustomizeStoreContext ); + const aiOnline = flowType === FlowType.AIOnline; + return ( { ); } } > - { __( 'Change the color palette', 'woocommerce' ) } + { aiOnline + ? __( + 'Change the color palette', + 'woocommerce' + ) + : __( + 'Choose your color palette', + 'woocommerce' + ) } { ); } } > - { __( 'Change fonts', 'woocommerce' ) } + { aiOnline + ? __( 'Change fonts', 'woocommerce' ) + : __( 'Choose fonts', 'woocommerce' ) }
@@ -140,7 +157,9 @@ export const SidebarNavigationScreenMain = () => { ); } } > - { __( 'Change your header', 'woocommerce' ) } + { aiOnline + ? __( 'Change your header', 'woocommerce' ) + : __( 'Choose your header', 'woocommerce' ) } { ); } } > - { __( 'Change your homepage', 'woocommerce' ) } + { aiOnline + ? __( 'Change your homepage', 'woocommerce' ) + : __( 'Design your homepage', 'woocommerce' ) } { ); } } > - { __( 'Change your footer', 'woocommerce' ) } + { aiOnline + ? __( 'Change your footer', 'woocommerce' ) + : __( 'Choose your footer', 'woocommerce' ) } { /* TODO: Turn on this in Phrase 2 */ } { /* { const { context } = useContext( CustomizeStoreContext ); const aiOnline = context.flowType === FlowType.AIOnline; + const title = aiOnline + ? __( 'Change your font', 'woocommerce' ) + : __( 'Choose fonts', 'woocommerce' ); const label = aiOnline ? __( "AI has selected a font pairing that's the best fit for your business. If you'd like to change them, select a new option below now, or later in Editor | Styles.", @@ -33,7 +36,7 @@ export const SidebarNavigationScreenTypography = () => { return (
- +

diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler-hub.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler-hub.spec.js index c086febcb82..cdb854b5312 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler-hub.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler-hub.spec.js @@ -101,7 +101,7 @@ test.describe( 'Store owner can view Assembler Hub for store customization', () page, } ) => { await page.goto( ASSEMBLER_HUB_URL ); - await page.click( 'text=Change your header' ); + await page.click( 'text=Choose your header' ); const locator = page.locator( '.block-editor-block-patterns-list__list-item'