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

501 lines
12 KiB
TypeScript
Raw Normal View History

// @ts-expect-error -- No types for this exist yet.
// eslint-disable-next-line @woocommerce/dependency-group
import { store as coreStore } from '@wordpress/core-data';
/**
* External dependencies
*/
import { Sender, createMachine } from 'xstate';
import { useEffect, useMemo, useState } from '@wordpress/element';
import { useMachine, useSelector } from '@xstate/react';
import {
getNewPath,
getQuery,
updateQueryString,
} from '@woocommerce/navigation';
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
import { dispatch, resolveSelect } from '@wordpress/data';
import { Spinner } from '@woocommerce/components';
import { getAdminLink } from '@woocommerce/settings';
import { PluginArea } from '@wordpress/plugins';
/**
* Internal dependencies
*/
import { useFullScreen } from '~/utils';
import {
Intro,
events as introEvents,
services as introServices,
actions as introActions,
} from './intro';
import { DesignWithAi, events as designWithAiEvents } from './design-with-ai';
import { AssemblerHub, events as assemblerHubEvents } from './assembler-hub';
import {
events as transitionalEvents,
services as transitionalServices,
actions as transitionalActions,
} from './transitional';
import { findComponentMeta } from '~/utils/xstate/find-component';
import {
CustomizeStoreComponentMeta,
CustomizeStoreComponent,
customizeStoreStateMachineContext,
} from './types';
import { ThemeCard } from './intro/types';
import './style.scss';
import { navigateOrParent, attachParentListeners } from './utils';
import useBodyClass from './hooks/use-body-class';
export type customizeStoreStateMachineEvents =
| introEvents
| designWithAiEvents
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
| assemblerHubEvents
| transitionalEvents
| { type: 'AI_WIZARD_CLOSED_BEFORE_COMPLETION'; payload: { step: string } }
| { type: 'EXTERNAL_URL_UPDATE' };
const updateQueryStep = (
_context: unknown,
_evt: unknown,
{ action }: { action: unknown }
) => {
const { path } = getQuery() as { path: string };
const step = ( action as { step: string } ).step;
const pathFragments = path.split( '/' ); // [0] '', [1] 'customize-store', [2] step slug [3] design-with-ai, assembler-hub path fragments
if ( pathFragments[ 1 ] === 'customize-store' ) {
if ( pathFragments[ 2 ] !== step ) {
// this state machine is only concerned with [2], so we ignore changes to [3]
// [1] is handled by router at root of wc-admin
updateQueryString( {}, `/customize-store/${ step }` );
}
}
};
const redirectToWooHome = () => {
const url = getNewPath( {}, '/', {} );
navigateOrParent( window, url );
};
const redirectToThemes = ( _context: customizeStoreStateMachineContext ) => {
window.location.href =
_context?.intro?.themeData?._links?.browse_all?.href ??
getAdminLink( 'themes.php' );
};
const markTaskComplete = async () => {
const currentTemplate = await resolveSelect(
coreStore
// @ts-expect-error No types for this exist yet.
).__experimentalGetTemplateForLink( '/' );
return dispatch( OPTIONS_STORE_NAME ).updateOptions( {
woocommerce_admin_customize_store_completed: 'yes',
// we use this on the intro page to determine if this same theme was used in the last customization
woocommerce_admin_customize_store_completed_theme_id:
currentTemplate.id ?? undefined,
} );
};
const browserPopstateHandler =
() => ( sendBack: Sender< { type: 'EXTERNAL_URL_UPDATE' } > ) => {
const popstateHandler = () => {
sendBack( { type: 'EXTERNAL_URL_UPDATE' } );
};
window.addEventListener( 'popstate', popstateHandler );
return () => {
window.removeEventListener( 'popstate', popstateHandler );
};
};
const CYSSpinner = () => (
<div className="woocommerce-customize-store__loading">
<Spinner />
</div>
);
export const machineActions = {
updateQueryStep,
redirectToWooHome,
redirectToThemes,
};
export const customizeStoreStateMachineActions = {
...introActions,
...transitionalActions,
...machineActions,
};
export const customizeStoreStateMachineServices = {
...introServices,
...transitionalServices,
browserPopstateHandler,
markTaskComplete,
};
export const customizeStoreStateMachineDefinition = createMachine( {
id: 'customizeStore',
initial: 'navigate',
predictableActionArguments: true,
preserveActionOrder: true,
schema: {
context: {} as customizeStoreStateMachineContext,
events: {} as customizeStoreStateMachineEvents,
services: {} as {
fetchThemeCards: { data: ThemeCard[] };
},
},
context: {
intro: {
hasErrors: false,
themeData: {
themes: [] as ThemeCard[],
_links: {
browse_all: {
href: getAdminLink( 'themes.php' ),
},
},
},
activeTheme: '',
activeThemeHasMods: false,
customizeStoreTaskCompleted: false,
currentThemeIsAiGenerated: false,
},
transitionalScreen: {
hasCompleteSurvey: false,
},
2023-12-06 12:49:28 +00:00
aiOnline: true,
} as customizeStoreStateMachineContext,
invoke: {
src: 'browserPopstateHandler',
},
on: {
EXTERNAL_URL_UPDATE: {
target: 'navigate',
},
AI_WIZARD_CLOSED_BEFORE_COMPLETION: {
target: 'intro',
actions: [ { type: 'updateQueryStep', step: 'intro' } ],
},
},
states: {
navigate: {
always: [
{
target: 'intro',
cond: {
type: 'hasStepInUrl',
step: 'intro',
},
},
{
target: 'designWithAi',
cond: {
type: 'hasStepInUrl',
step: 'design-with-ai',
},
},
{
target: 'assemblerHub',
cond: {
type: 'hasStepInUrl',
step: 'assembler-hub',
},
},
{
target: 'transitionalScreen',
cond: {
type: 'hasStepInUrl',
step: 'transitional',
},
},
{
target: 'intro',
},
],
},
intro: {
id: 'intro',
initial: 'preIntro',
states: {
preIntro: {
2023-12-06 12:49:28 +00:00
type: 'parallel',
states: {
checkAiStatus: {
initial: 'pending',
states: {
pending: {
invoke: {
src: 'fetchAiStatus',
onDone: {
actions: 'assignAiStatus',
target: 'success',
},
onError: {
actions: 'assignAiOffline',
target: 'success',
},
},
},
success: { type: 'final' },
},
},
2023-12-06 12:49:28 +00:00
fetchIntroData: {
initial: 'pending',
states: {
pending: {
invoke: {
src: 'fetchIntroData',
onError: {
actions:
'assignFetchIntroDataError',
target: 'success',
},
onDone: {
target: 'success',
actions: [
'assignThemeData',
'assignActiveThemeHasMods',
'assignCustomizeStoreCompleted',
'assignCurrentThemeIsAiGenerated',
],
},
},
},
success: { type: 'final' },
},
},
},
2023-12-06 12:49:28 +00:00
onDone: 'intro',
},
intro: {
meta: {
component: Intro,
},
},
},
on: {
CLICKED_ON_BREADCRUMB: {
actions: 'redirectToWooHome',
},
DESIGN_WITH_AI: {
actions: [ 'recordTracksDesignWithAIClicked' ],
target: 'designWithAi',
},
SELECTED_NEW_THEME: {
actions: [ 'recordTracksThemeSelected' ],
target: 'appearanceTask',
},
SELECTED_ACTIVE_THEME: {
actions: [ 'recordTracksThemeSelected' ],
target: 'appearanceTask',
},
SELECTED_BROWSE_ALL_THEMES: {
actions: [
'recordTracksBrowseAllThemesClicked',
'redirectToThemes',
],
},
},
},
designWithAi: {
initial: 'preDesignWithAi',
states: {
preDesignWithAi: {
always: {
target: 'designWithAi',
},
},
designWithAi: {
meta: {
component: DesignWithAi,
},
entry: [
{ type: 'updateQueryStep', step: 'design-with-ai' },
],
},
},
on: {
THEME_SUGGESTED: {
target: 'assemblerHub',
},
},
},
assemblerHub: {
2023-12-06 12:49:28 +00:00
initial: 'checkAiStatus',
states: {
2023-12-06 12:49:28 +00:00
checkAiStatus: {
invoke: {
src: 'fetchAiStatus',
onDone: {
actions: 'assignAiStatus',
target: 'assemblerHub',
},
onError: {
actions: 'assignAiOffline',
target: 'assemblerHub',
},
},
},
assemblerHub: {
entry: [
{ type: 'updateQueryStep', step: 'assembler-hub' },
],
meta: {
component: AssemblerHub,
},
},
postAssemblerHub: {
invoke: [
{
src: 'markTaskComplete',
// eslint-disable-next-line xstate/no-ondone-outside-compound-state
onDone: {
target: '#customizeStore.transitionalScreen',
},
},
{
// Pre-fetch survey completed option so we can show the screen immediately.
src: 'fetchSurveyCompletedOption',
},
],
},
},
on: {
FINISH_CUSTOMIZATION: {
target: '.postAssemblerHub',
},
GO_BACK_TO_DESIGN_WITH_AI: {
target: 'designWithAi',
},
},
},
transitionalScreen: {
initial: 'preTransitional',
states: {
preTransitional: {
meta: {
component: CYSSpinner,
},
invoke: {
src: 'fetchSurveyCompletedOption',
onError: {
target: 'transitional', // leave it as initialised default on error
},
onDone: {
target: 'transitional',
actions: [ 'assignHasCompleteSurvey' ],
},
},
},
transitional: {
entry: [
{ type: 'updateQueryStep', step: 'transitional' },
],
meta: {
component: AssemblerHub,
},
on: {
GO_BACK_TO_HOME: {
actions: 'redirectToWooHome',
},
COMPLETE_SURVEY: {
actions: 'completeSurvey',
},
},
},
},
},
appearanceTask: {},
},
} );
export const CustomizeStoreController = ( {
actionOverrides,
servicesOverrides,
}: {
actionOverrides: Partial< typeof customizeStoreStateMachineActions >;
servicesOverrides: Partial< typeof customizeStoreStateMachineServices >;
} ) => {
useFullScreen( [ 'woocommerce-customize-store' ] );
const augmentedStateMachine = useMemo( () => {
return customizeStoreStateMachineDefinition.withConfig( {
services: {
...customizeStoreStateMachineServices,
...servicesOverrides,
},
actions: {
...customizeStoreStateMachineActions,
...actionOverrides,
},
guards: {
hasStepInUrl: ( _ctx, _evt, { cond }: { cond: unknown } ) => {
const { path = '' } = getQuery() as { path: string };
const pathFragments = path.split( '/' );
return (
pathFragments[ 2 ] === // [0] '', [1] 'customize-store', [2] step slug
( cond as { step: string | undefined } ).step
);
},
2023-12-06 12:49:28 +00:00
isAiOnline: ( _ctx ) => {
return _ctx.aiOnline;
},
isAiOffline: ( _ctx ) => {
return ! _ctx.aiOnline;
},
},
} );
}, [ actionOverrides, servicesOverrides ] );
const [ state, send, service ] = useMachine( augmentedStateMachine, {
devTools: process.env.NODE_ENV === 'development',
} );
// 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< CustomizeStoreComponentMeta >(
currentState?.meta ?? undefined
)
);
const [ CurrentComponent, setCurrentComponent ] =
useState< CustomizeStoreComponent | null >( null );
useEffect( () => {
if ( currentNodeMeta?.component ) {
setCurrentComponent( () => currentNodeMeta?.component );
}
}, [ CurrentComponent, currentNodeMeta?.component ] );
// Run listeners for parent window.
useEffect( () => {
const removeListener = attachParentListeners();
return removeListener;
}, [] );
useBodyClass( 'is-fullscreen-mode' );
const currentNodeCssLabel =
state.value instanceof Object
? Object.keys( state.value )[ 0 ]
: state.value;
return (
<>
<div
className={ `woocommerce-customize-store__container woocommerce-customize-store__step-${ currentNodeCssLabel }` }
>
{ CurrentComponent ? (
<CurrentComponent
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={ service }
sendEvent={ send }
context={ state.context }
currentState={ state.value }
/>
) : (
<CYSSpinner />
) }
</div>
{ /* @ts-expect-error 'scope' does exist. @types/wordpress__plugins is outdated. */ }
<PluginArea scope="woocommerce-customize-store" />
</>
);
};
export default CustomizeStoreController;