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

This commit is contained in:
Chi-Hsuan Huang 2023-10-12 01:35:46 -05:00 committed by GitHub
parent 2f47695ebc
commit 532bb3056e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 79 additions and 70 deletions

View File

@ -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: {

View File

@ -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>

View File

@ -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;

View File

@ -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,
};
},
} );

View File

@ -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,
},
} );
};

View File

@ -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',

View File

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