From cb3fdeb35d1257a61fad6d710532fb3864da10c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Tue, 5 Dec 2023 11:31:04 +0100
Subject: [PATCH] Change copy depending on the the AI availability

---
 ...idebar-navigation-screen-color-palette.tsx | 95 ++++++++++---------
 1 file changed, 52 insertions(+), 43 deletions(-)

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 <EditorLink>Editor</EditorLink> | <StyleLink>Styles</StyleLink>.',
+				'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 <EditorLink>Editor</EditorLink> | <StyleLink>Styles</StyleLink>.',
+				'woocommerce'
+		  );
+
 	return (
 		<SidebarNavigationScreen
 			title={ __( 'Change the color palette', 'woocommerce' ) }
-			description={ createInterpolateElement(
-				__(
-					'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 <EditorLink>Editor</EditorLink> | <StyleLink>Styles</StyleLink>.',
-					'woocommerce'
+			description={ createInterpolateElement( description, {
+				EditorLink: (
+					<Link
+						onClick={ () => {
+							recordEvent(
+								'customize_your_store_assembler_hub_editor_link_click',
+								{
+									source: 'color-palette',
+								}
+							);
+							window.open(
+								`${ ADMIN_URL }site-editor.php`,
+								'_blank'
+							);
+							return false;
+						} }
+						href=""
+					/>
 				),
-				{
-					EditorLink: (
-						<Link
-							onClick={ () => {
-								recordEvent(
-									'customize_your_store_assembler_hub_editor_link_click',
-									{
-										source: 'color-palette',
-									}
-								);
-								window.open(
-									`${ ADMIN_URL }site-editor.php`,
-									'_blank'
-								);
-								return false;
-							} }
-							href=""
-						/>
-					),
-					StyleLink: (
-						<Link
-							onClick={ () => {
-								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: (
+					<Link
+						onClick={ () => {
+							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={ <SidebarNavigationScreenColorPaletteContent /> }
 		/>
 	);