[CYS on Core] Update the themes list on the intro screen (#44822)

* Update themes list on core. Update the themes data and remove hardcoded reference to free themes.

* Update styles for the Free, Paid and active cards.

* Add the color palletes to TT4 theme.

* Update the references for default and core themes.

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

* Update the link to TT4 theme

* Update default value for price.

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-admin/client/customize-store/intro/index.tsx

@@ -238,6 +238,7 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
 								total_palettes={ theme.total_palettes }
 								link_url={ theme?.link_url }
 								is_active={ theme.is_active }
+								price={ theme.price }
 								onClick={ () => {
 									if ( theme.is_active ) {
 										sendEvent( {

plugins/woocommerce-admin/client/customize-store/intro/intro.scss

@@ -278,28 +278,37 @@
 			}
 		}
 
+		.theme-card__free {
+			color: #1e1e1e;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 16px; /* 114.286% */
+		}
+
 		.theme-card__active {
-			border-radius: 100px;
 			background: rgba(56, 88, 233, 0.2);
+			color: #1d35b4;
+		}
+
+		.theme-card__paid {
+			background: #dcdcde;
+			color: #2c3338;
+		}
+
+		.theme-card__active,
+		.theme-card__paid {
+			border-radius: 100px;
 			padding: 5px 10px;
 			justify-content: flex-end;
 			align-items: center;
 			gap: 10px;
-			color: #1d35b4;
 			font-size: 12px;
 			font-style: normal;
 			font-weight: 500;
 			line-height: 20px; /* 166.667% */
 			margin-right: 10px;
 		}
-
-		.theme-card__free {
-			color: #1e1e1e;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 16px; /* 114.286% */
-		}
 	}
 }
 

plugins/woocommerce-admin/client/customize-store/intro/theme-card.tsx

@@ -19,6 +19,7 @@ export const ThemeCard = ( {
 	total_palettes = 0,
 	link_url = '',
 	is_active = false,
+	price = 'Free',
 	onClick,
 }: TypeThemeCard & {
 	onClick: () => void;
@@ -49,7 +50,12 @@ export const ThemeCard = ( {
 						{ __( 'Active theme', 'woocommerce' ) }
 					</span>
 				) }
-				<span className="theme-card__free">Free</span>
+				{ price !== 'Free' && (
+					<span className="theme-card__paid">
+						{ __( 'Paid', 'woocommerce' ) }
+					</span>
+				) }
+				<span className="theme-card__free">{ price }</span>
 			</div>
 		</div>
 	);

plugins/woocommerce-admin/client/customize-store/intro/types.ts

@@ -13,6 +13,7 @@ export type ThemeCard = {
 	thumbnail_url: string;
 	is_active: boolean;
 	link_url?: string;
+	price: string;
 	color_palettes: ColorPalette[];
 	total_palettes: number;
 };

plugins/woocommerce/changelog/44822-44609-cys-on-core-update-the-themes-list-on-the-intro-screen

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update the themes list on the Customize Your Store intro screen.

plugins/woocommerce/src/Admin/API/OnboardingThemes.php

@@ -249,9 +249,69 @@ public function get_recommended_themes( $request ) {
 			);
 		}
 
+		$core_themes = array(
+			array(
+				'name'           => 'Twenty Twenty-Four',
+				'price'          => 'Free',
+				'color_palettes' => array(
+					array(
+						'title'     => 'Black and white',
+						'primary'   => '#FEFBF3',
+						'secondary' => '#7F7E7A',
+					),
+					array(
+						'title'     => 'Brown Sugar',
+						'primary'   => '#EFEBE0',
+						'secondary' => '#AC6239',
+					),
+					array(
+						'title'     => 'Midnight',
+						'primary'   => '#161514',
+						'secondary' => '#AFADA7',
+					),
+					array(
+						'title'     => 'Olive',
+						'primary'   => '#FEFBF3',
+						'secondary' => '#7F7E7A',
+					),
+				),
+				'total_palettes' => 0,
+				'slug'           => 'twentytwentyfour',
+				'thumbnail_url'  => 'https://i0.wp.com/themes.svn.wordpress.org/twentytwentyfour/1.0/screenshot.png',
+				'link_url'       => 'https://wordpress.org/themes/twentytwentyfour/',
+			),
+			array(
+				'name'           => 'Highline',
+				'price'          => '$79/year',
+				'color_palettes' => array(),
+				'total_palettes' => 0,
+				'slug'           => 'highline',
+				'thumbnail_url'  => 'https://woo.com/wp-content/uploads/2023/12/Featured-image-538x403-1.png',
+				'link_url'       => 'https://woo.com/products/highline/',
+			),
+			array(
+				'name'           => 'Luminate',
+				'price'          => '$79/year',
+				'color_palettes' => array(),
+				'total_palettes' => 0,
+				'slug'           => 'luminate',
+				'thumbnail_url'  => 'https://woo.com/wp-content/uploads/2022/07/Featured-image-538x403-2.png',
+				'link_url'       => 'https://woo.com/products/luminate/',
+			),
+			array(
+				'name'           => 'Nokul',
+				'price'          => '$79/year',
+				'color_palettes' => array(),
+				'total_palettes' => 0,
+				'slug'           => 'nokul',
+				'thumbnail_url'  => 'https://woo.com/wp-content/uploads/2022/11/Product-logo.jpg',
+				'link_url'       => 'https://woo.com/products/nokul/',
+			),
+		);
+
 		// To be implemented: 1. Fetch themes from the marketplace API. 2. Convert prices to the requested currency.
 		// These are Dotcom themes.
-		$themes = array(
+		$default_themes = array(
 			array(
 				'name'           => 'Tsubaki',
 				'price'          => 'Free',
@@ -269,7 +329,6 @@ public function get_recommended_themes( $request ) {
 				'slug'           => 'tazza',
 				'thumbnail_url'  => 'https://i0.wp.com/s2.wp.com/wp-content/themes/premium/tazza/screenshot.png',
 				'link_url'       => 'https://wordpress.com/theme/tazza/',
-				'total_palettes' => 0,
 			),
 			array(
 				'name'           => 'Amulet',
@@ -333,6 +392,9 @@ public function get_recommended_themes( $request ) {
 			),
 		);
 
+		$ai_connection_enabled = get_option( 'woocommerce_blocks_allow_ai_connection' );
+		$themes                = $ai_connection_enabled ? $default_themes : $core_themes;
+
 		// To be implemented: Filter themes based on industry.
 		if ( $industry ) {
 			$filtered_themes = array_filter(