Replace font ai suggestion with pre-defined rule-based approach (#40696)

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { Look } from '~/customize-store/design-with-ai/types';
+
 export const FONT_PREVIEW_LARGE_WIDTH = 136;
 export const FONT_PREVIEW_LARGE_HEIGHT = 106;
 export const FONT_PREVIEW_WIDTH = 120;
@@ -10,6 +15,7 @@ export const FONT_PAIRINGS = [
 	{
 		title: 'Inter + Inter',
 		version: 2,
+		lookAndFeel: [ 'Contemporary', 'Bold' ] as Look[],
 		settings: {
 			typography: {
 				fontFamilies: {
@@ -66,6 +72,7 @@ export const FONT_PAIRINGS = [
 	{
 		title: 'Bodoni Moda + Overpass',
 		version: 2,
+		lookAndFeel: [ 'Classic' ] as Look[],
 		settings: {
 			typography: {
 				fontFamilies: {
@@ -126,6 +133,7 @@ export const FONT_PAIRINGS = [
 	{
 		title: 'Commissioner + Crimson Pro',
 		version: 2,
+		lookAndFeel: [ 'Contemporary' ] as Look[],
 		settings: {
 			typography: {
 				fontFamilies: {
@@ -188,6 +196,7 @@ export const FONT_PAIRINGS = [
 	{
 		title: 'Libre Baskerville + DM Sans',
 		version: 2,
+		lookAndFeel: [ 'Classic', 'Bold' ] as Look[],
 		settings: {
 			typography: {
 				fontFamilies: {
@@ -248,6 +257,7 @@ export const FONT_PAIRINGS = [
 	{
 		title: 'Libre Franklin + EB Garamond',
 		version: 2,
+		lookAndFeel: [ 'Contemporary', 'Classic', 'Bold' ] as Look[],
 		settings: {
 			typography: {
 				fontFamilies: {
@@ -311,6 +321,7 @@ export const FONT_PAIRINGS = [
 	{
 		title: 'Montserrat + Arvo',
 		version: 2,
+		lookAndFeel: [ 'Contemporary', 'Bold' ] as Look[],
 		settings: {
 			typography: {
 				fontFamilies: {
@@ -374,6 +385,7 @@ export const FONT_PAIRINGS = [
 	{
 		title: 'Playfair Display + Fira Sans',
 		version: 2,
+		lookAndFeel: [ 'Classic' ] as Look[],
 		settings: {
 			typography: {
 				fontFamilies: {
@@ -438,6 +450,7 @@ export const FONT_PAIRINGS = [
 	{
 		title: 'Rubik + Inter',
 		version: 2,
+		lookAndFeel: [ 'Contemporary', 'Bold' ] as Look[],
 		settings: {
 			typography: {
 				fontFamilies: {
@@ -496,6 +509,7 @@ export const FONT_PAIRINGS = [
 	{
 		title: 'Space Mono + Roboto',
 		version: 2,
+		lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[],
 		settings: {
 			typography: {
 				fontFamilies: {

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/index.tsx

@@ -4,7 +4,10 @@
  * External dependencies
  */
 // @ts-ignore No types for this exist yet.
-import { __experimentalGrid as Grid } from '@wordpress/components';
+import { __experimentalGrid as Grid, Spinner } from '@wordpress/components';
+import { OPTIONS_STORE_NAME } from '@woocommerce/data';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,8 +15,40 @@ import { __experimentalGrid as Grid } from '@wordpress/components';
 import { FONT_PAIRINGS } from './constants';
 import { VariationContainer } from '../variation-container';
 import { FontPairingVariationPreview } from './preview';
+import { Look } from '~/customize-store/design-with-ai/types';
 
 export const FontPairing = () => {
+	const { aiSuggestions, isLoading } = useSelect( ( select ) => {
+		const { getOption, hasFinishedResolution } =
+			select( OPTIONS_STORE_NAME );
+		return {
+			aiSuggestions: getOption(
+				'woocommerce_customize_store_ai_suggestions'
+			) as { lookAndFeel: Look },
+			isLoading: ! hasFinishedResolution( 'getOption', [
+				'woocommerce_customize_store_ai_suggestions',
+			] ),
+		};
+	} );
+
+	const fontPairings = useMemo(
+		() =>
+			aiSuggestions?.lookAndFeel
+				? FONT_PAIRINGS.filter( ( font ) =>
+						font.lookAndFeel.includes( aiSuggestions?.lookAndFeel )
+				  )
+				: FONT_PAIRINGS,
+		[ aiSuggestions ]
+	);
+
+	if ( isLoading ) {
+		return (
+			<div className="woocommerce-customize-store_font-pairing-spinner-container">
+				<Spinner />
+			</div>
+		);
+	}
+
 	return (
 		<Grid
 			columns={ 2 }
@@ -24,7 +59,7 @@ export const FontPairing = () => {
 				animation: 'containerFadeIn 300ms ease-in-out forwards',
 			} }
 		>
-			{ FONT_PAIRINGS.map( ( variation, index ) => (
+			{ fontPairings.map( ( variation, index ) => (
 				<VariationContainer key={ index } variation={ variation }>
 					<FontPairingVariationPreview />
 				</VariationContainer>

plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss

@@ -388,7 +388,8 @@
 		gap: 7px;
 	}
 
-	.woocommerce-customize-store_color-palette-spinner-container {
+	.woocommerce-customize-store_color-palette-spinner-container,
+	.woocommerce-customize-store_font-pairing-spinner-container, {
 		display: flex;
 		justify-content: center;
 		align-items: center;

plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { assign, spawn, EventObject } from 'xstate';
+import { assign, spawn } from 'xstate';
 import {
 	getQuery,
 	updateQueryString,
@@ -18,7 +18,6 @@ import {
 	ColorPaletteResponse,
 	designWithAiStateMachineContext,
 	designWithAiStateMachineEvents,
-	FontPairing,
 	LookAndToneCompletionResponse,
 	Header,
 	Footer,
@@ -105,8 +104,7 @@ const assignFontPairing = assign<
 	designWithAiStateMachineContext,
 	designWithAiStateMachineEvents
 >( {
-	aiSuggestions: ( context, event: unknown ) => {
-		if ( ( event as EventObject ).type === 'xstate.error' ) {
+	aiSuggestions: ( context ) => {
 		let fontPairing = context.aiSuggestions.fontPairing;
 		const choice = context.lookAndFeel.choice;
 
@@ -126,18 +124,6 @@ const assignFontPairing = assign<
 			...context.aiSuggestions,
 			fontPairing,
 		};
-		}
-
-		return {
-			...context.aiSuggestions,
-			fontPairing: (
-				event as {
-					data: {
-						response: FontPairing;
-					};
-				}
-			 ).data.response.pair_name,
-		};
 	},
 } );
 

plugins/woocommerce-admin/client/customize-store/design-with-ai/services.ts

@@ -400,7 +400,10 @@ const installAndActivateTheme = async () => {
 
 const saveAiResponseToOption = ( context: designWithAiStateMachineContext ) => {
 	return dispatch( OPTIONS_STORE_NAME ).updateOptions( {
-		woocommerce_customize_store_ai_suggestions: context.aiSuggestions,
+		woocommerce_customize_store_ai_suggestions: {
+			...context.aiSuggestions,
+			lookAndFeel: context.lookAndFeel.choice,
+		},
 	} );
 };
 

plugins/woocommerce-admin/client/customize-store/design-with-ai/state-machine.tsx

@@ -22,7 +22,7 @@ import {
 } from './pages';
 import { actions } from './actions';
 import { services } from './services';
-import { defaultColorPalette, fontPairings } from './prompts';
+import { defaultColorPalette } from './prompts';
 
 export const hasStepInUrl = (
 	_ctx: unknown,
@@ -320,42 +320,8 @@ export const designWithAiStateMachineDefinition = createMachine(
 								},
 							},
 							chooseFontPairing: {
-								initial: 'pending',
-								states: {
-									pending: {
-										invoke: {
-											src: 'queryAiEndpoint',
-											data: ( context ) => {
-												return {
-													...fontPairings,
-													prompt: fontPairings.prompt(
-														context
-															.businessInfoDescription
-															.descriptionText,
-														context.lookAndFeel
-															.choice,
-														context.toneOfVoice
-															.choice
-													),
-												};
-											},
-											onDone: {
-												actions: [
-													'assignFontPairing',
-												],
-												target: 'success',
-											},
-											// If there's an error we don't want to block the user from proceeding.
-											onError: {
-												actions: [
-													'assignFontPairing',
-												],
-												target: 'success',
-											},
-										},
-									},
-									success: { type: 'final' },
-								},
+								entry: [ 'assignFontPairing' ],
+								type: 'final',
 							},
 							updateStorePatterns: {
 								initial: 'pending',

plugins/woocommerce/changelog/update-cys-font-paring

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Replace font ai suggestion with pre-defined Look & Feel cluster