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

117 lines
3.1 KiB
TypeScript
Raw Normal View History

/**
* External dependencies
*/
import { useMachine, useSelector } from '@xstate/react';
import { useEffect, useState } from '@wordpress/element';
CYS - Add LookAndFeel and ToneOfVoice pages (#39979) * Add ProgressBar component to @woocommerce/components * Add changelog * Remove html.wp-toolbar in fullscreen mode * Add base style * Add Tell us a bit more about your business page * Fix merge conflict issues * Send BUSINESS_INFO_DESCRIPTION_COMPLETE event when continue button is clicked * Remove duplicated style import * Add changefile(s) from automation for the following project(s): @woocommerce/components, woocommerce * Lint fix * Add 'Look and Feel' and 'Tone of voice' pages'; * Use correct classname * Minor changes * Textearea color should be gray-900 after the user enter text * guide font weight should be 500 * Fix layout shift when a choice is selected * Fix choices width for tone of voice page * Use context value for the default * Revert button margin top * Fix default selection * Add X button * Decrease the margin by 20px to accommodate the height of the close button * Add close action * Include @woocommerce/ai package * Add AI service * Use AI service * Parse JSON from in function * Fix assignLookAndTone event type * Update plugins/woocommerce-admin/client/customize-store/design-with-ai/components/choice/choice.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/customize-store/design-with-ai/services.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Log when AI API endpoint request fails * Add spinner when user clicks the continue button * streamlined unnecessary isRequesting context and forwarded close event * pnpm-lock changes from trunk * lint fixes * ai package test passWithNoTests * changelog * reset pnpm-lock to trunk * Dev: update pnpm-lock.yaml and jest preset config (#40045) * Update pnpm-lock.yaml * Update jest-preset config to fix unexpected token error --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com>
2023-09-06 06:21:09 +00:00
import { AnyInterpreter, Sender } from 'xstate';
import { getNewPath } from '@woocommerce/navigation';
/**
* Internal dependencies
*/
2023-12-06 12:49:28 +00:00
import {
CustomizeStoreComponent,
FlowType,
2023-12-06 12:49:28 +00:00
customizeStoreStateMachineContext,
} from '../types';
import { designWithAiStateMachineDefinition } from './state-machine';
import { findComponentMeta } from '~/utils/xstate/find-component';
import {
BusinessInfoDescription,
ApiCallLoader,
LookAndFeel,
ToneOfVoice,
} from './pages';
import { customizeStoreStateMachineEvents } from '..';
import './style.scss';
import { isAIFlow } from '../guards';
import { navigateOrParent } from '../utils';
export type events = { type: 'THEME_SUGGESTED' };
export type DesignWithAiComponent =
| typeof BusinessInfoDescription
| typeof ApiCallLoader
| typeof LookAndFeel
| typeof ToneOfVoice;
export type DesignWithAiComponentMeta = {
component: DesignWithAiComponent;
};
CYS - Add LookAndFeel and ToneOfVoice pages (#39979) * Add ProgressBar component to @woocommerce/components * Add changelog * Remove html.wp-toolbar in fullscreen mode * Add base style * Add Tell us a bit more about your business page * Fix merge conflict issues * Send BUSINESS_INFO_DESCRIPTION_COMPLETE event when continue button is clicked * Remove duplicated style import * Add changefile(s) from automation for the following project(s): @woocommerce/components, woocommerce * Lint fix * Add 'Look and Feel' and 'Tone of voice' pages'; * Use correct classname * Minor changes * Textearea color should be gray-900 after the user enter text * guide font weight should be 500 * Fix layout shift when a choice is selected * Fix choices width for tone of voice page * Use context value for the default * Revert button margin top * Fix default selection * Add X button * Decrease the margin by 20px to accommodate the height of the close button * Add close action * Include @woocommerce/ai package * Add AI service * Use AI service * Parse JSON from in function * Fix assignLookAndTone event type * Update plugins/woocommerce-admin/client/customize-store/design-with-ai/components/choice/choice.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/customize-store/design-with-ai/services.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Log when AI API endpoint request fails * Add spinner when user clicks the continue button * streamlined unnecessary isRequesting context and forwarded close event * pnpm-lock changes from trunk * lint fixes * ai package test passWithNoTests * changelog * reset pnpm-lock to trunk * Dev: update pnpm-lock.yaml and jest preset config (#40045) * Update pnpm-lock.yaml * Update jest-preset config to fix unexpected token error --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com>
2023-09-06 06:21:09 +00:00
export const DesignWithAiController = ( {
parentMachine,
2023-12-06 12:49:28 +00:00
parentContext,
CYS - Add LookAndFeel and ToneOfVoice pages (#39979) * Add ProgressBar component to @woocommerce/components * Add changelog * Remove html.wp-toolbar in fullscreen mode * Add base style * Add Tell us a bit more about your business page * Fix merge conflict issues * Send BUSINESS_INFO_DESCRIPTION_COMPLETE event when continue button is clicked * Remove duplicated style import * Add changefile(s) from automation for the following project(s): @woocommerce/components, woocommerce * Lint fix * Add 'Look and Feel' and 'Tone of voice' pages'; * Use correct classname * Minor changes * Textearea color should be gray-900 after the user enter text * guide font weight should be 500 * Fix layout shift when a choice is selected * Fix choices width for tone of voice page * Use context value for the default * Revert button margin top * Fix default selection * Add X button * Decrease the margin by 20px to accommodate the height of the close button * Add close action * Include @woocommerce/ai package * Add AI service * Use AI service * Parse JSON from in function * Fix assignLookAndTone event type * Update plugins/woocommerce-admin/client/customize-store/design-with-ai/components/choice/choice.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/customize-store/design-with-ai/services.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Log when AI API endpoint request fails * Add spinner when user clicks the continue button * streamlined unnecessary isRequesting context and forwarded close event * pnpm-lock changes from trunk * lint fixes * ai package test passWithNoTests * changelog * reset pnpm-lock to trunk * Dev: update pnpm-lock.yaml and jest preset config (#40045) * Update pnpm-lock.yaml * Update jest-preset config to fix unexpected token error --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com>
2023-09-06 06:21:09 +00:00
}: {
parentMachine?: AnyInterpreter;
sendEventToParent?: Sender< customizeStoreStateMachineEvents >;
2023-12-06 12:49:28 +00:00
parentContext?: customizeStoreStateMachineContext;
} ) => {
2023-12-06 12:49:28 +00:00
// Assign aiOnline value from the parent context if it exists. Otherwise, ai is online by default.
designWithAiStateMachineDefinition.context.aiOnline =
parentContext?.flowType === FlowType.AIOnline;
const [ state, send, service ] = useMachine(
designWithAiStateMachineDefinition,
{
devTools: process.env.NODE_ENV === 'development',
CYS - Add LookAndFeel and ToneOfVoice pages (#39979) * Add ProgressBar component to @woocommerce/components * Add changelog * Remove html.wp-toolbar in fullscreen mode * Add base style * Add Tell us a bit more about your business page * Fix merge conflict issues * Send BUSINESS_INFO_DESCRIPTION_COMPLETE event when continue button is clicked * Remove duplicated style import * Add changefile(s) from automation for the following project(s): @woocommerce/components, woocommerce * Lint fix * Add 'Look and Feel' and 'Tone of voice' pages'; * Use correct classname * Minor changes * Textearea color should be gray-900 after the user enter text * guide font weight should be 500 * Fix layout shift when a choice is selected * Fix choices width for tone of voice page * Use context value for the default * Revert button margin top * Fix default selection * Add X button * Decrease the margin by 20px to accommodate the height of the close button * Add close action * Include @woocommerce/ai package * Add AI service * Use AI service * Parse JSON from in function * Fix assignLookAndTone event type * Update plugins/woocommerce-admin/client/customize-store/design-with-ai/components/choice/choice.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/customize-store/design-with-ai/services.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Log when AI API endpoint request fails * Add spinner when user clicks the continue button * streamlined unnecessary isRequesting context and forwarded close event * pnpm-lock changes from trunk * lint fixes * ai package test passWithNoTests * changelog * reset pnpm-lock to trunk * Dev: update pnpm-lock.yaml and jest preset config (#40045) * Update pnpm-lock.yaml * Update jest-preset config to fix unexpected token error --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com>
2023-09-06 06:21:09 +00:00
parent: parentMachine,
}
);
// eslint-disable-next-line react-hooks/exhaustive-deps -- false positive due to function name match, this isn't from react std lib
const currentNodeMeta = useSelector( service, ( currentState ) =>
findComponentMeta< DesignWithAiComponentMeta >(
currentState?.meta ?? undefined
)
);
const [ CurrentComponent, setCurrentComponent ] =
useState< DesignWithAiComponent | null >( null );
useEffect( () => {
if ( currentNodeMeta?.component ) {
setCurrentComponent( () => currentNodeMeta?.component );
}
}, [ CurrentComponent, currentNodeMeta?.component ] );
const currentNodeCssLabel =
state.value instanceof Object
? Object.keys( state.value )[ 0 ]
: state.value;
return (
<>
<div
className={ `woocommerce-design-with-ai__container woocommerce-design-with-ai-wizard__step-${ currentNodeCssLabel }` }
>
{ CurrentComponent ? (
<CurrentComponent
sendEvent={ send }
context={ state.context }
/>
) : (
<div />
) }
</div>
</>
);
};
//loader should send event 'THEME_SUGGESTED' when it's done
2023-12-06 12:49:28 +00:00
export const DesignWithAi: CustomizeStoreComponent = ( {
parentMachine,
context,
} ) => {
const assemblerUrl = getNewPath( {}, '/customize-store', {} );
if ( ! isAIFlow( context.flowType ) ) {
navigateOrParent( window, assemblerUrl );
return null;
}
return (
<>
2023-12-06 12:49:28 +00:00
<DesignWithAiController
parentMachine={ parentMachine }
parentContext={ context }
/>
</>
);
};