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 b047f1f1ba2..901d621f2fb 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 @@ -16,6 +16,7 @@ import { unlock } from '@wordpress/edit-site/build-module/lock-unlock'; /** * Internal dependencies */ +import { CustomizeStoreContext } from '../'; import { SidebarNavigationScreen } from './sidebar-navigation-screen'; import { ADMIN_URL } from '~/utils/admin-settings'; import { ColorPalette, ColorPanel } from './global-styles'; @@ -54,53 +55,61 @@ const SidebarNavigationScreenColorPaletteContent = () => { }; export const SidebarNavigationScreenColorPalette = () => { + const { + context: { aiOnline }, + } = useContext( CustomizeStoreContext ); + + 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 ( Editor | Styles.', - 'woocommerce' + description={ createInterpolateElement( description, { + EditorLink: ( + { + recordEvent( + 'customize_your_store_assembler_hub_editor_link_click', + { + source: 'color-palette', + } + ); + window.open( + `${ ADMIN_URL }site-editor.php`, + '_blank' + ); + return false; + } } + href="" + /> ), - { - EditorLink: ( - { - recordEvent( - 'customize_your_store_assembler_hub_editor_link_click', - { - source: 'color-palette', - } - ); - window.open( - `${ ADMIN_URL }site-editor.php`, - '_blank' - ); - return false; - } } - href="" - /> - ), - StyleLink: ( - { - recordEvent( - 'customize_your_store_assembler_hub_style_link_click', - { - source: 'color-palette', - } - ); - window.open( - `${ ADMIN_URL }site-editor.php?path=%2Fwp_global_styles&canvas=edit`, - '_blank' - ); - return false; - } } - href="" - /> - ), - } - ) } + StyleLink: ( + { + recordEvent( + 'customize_your_store_assembler_hub_style_link_click', + { + source: 'color-palette', + } + ); + window.open( + `${ ADMIN_URL }site-editor.php?path=%2Fwp_global_styles&canvas=edit`, + '_blank' + ); + return false; + } } + href="" + /> + ), + } ) } content={ } /> );