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

94 lines
2.4 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';
/**
* Internal dependencies
*/
import { CustomizeStoreComponent } 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';
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,
}: {
parentMachine?: AnyInterpreter;
sendEventToParent?: Sender< customizeStoreStateMachineEvents >;
} ) => {
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
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 DesignWithAi: CustomizeStoreComponent = ( { parentMachine } ) => {
return (
<>
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
<DesignWithAiController parentMachine={ parentMachine } />
</>
);
};