diff --git a/plugins/woocommerce-admin/client/customize-store/index.tsx b/plugins/woocommerce-admin/client/customize-store/index.tsx index 464ae2ee7eb..1b66af78a21 100644 --- a/plugins/woocommerce-admin/client/customize-store/index.tsx +++ b/plugins/woocommerce-admin/client/customize-store/index.tsx @@ -280,41 +280,8 @@ export const customizeStoreStateMachineDefinition = createMachine( { }, intro: { id: 'intro', - initial: 'flowType', + initial: 'fetchIntroData', states: { - flowType: { - always: [ - { - target: 'fetchIntroData', - cond: 'isNotWooExpress', - actions: 'assignNoAI', - }, - { - target: 'checkAiStatus', - cond: 'isWooExpress', - }, - ], - }, - checkAiStatus: { - initial: 'pending', - states: { - pending: { - invoke: { - src: 'fetchAiStatus', - onDone: { - actions: 'assignAiStatus', - target: 'success', - }, - onError: { - actions: 'assignAiOffline', - target: 'success', - }, - }, - }, - success: { type: 'final' }, - }, - onDone: 'fetchIntroData', - }, fetchIntroData: { initial: 'pending', states: { @@ -450,31 +417,9 @@ export const customizeStoreStateMachineDefinition = createMachine( { { // Otherwise, proceed to the next step. cond: 'activeThemeHasMods', - target: 'preCheckAiStatus', - }, - ], - }, - preCheckAiStatus: { - always: [ - { - cond: 'isWooExpress', - target: 'checkAiStatus', - }, - { cond: 'isNotWooExpress', target: 'assemblerHub' }, - ], - }, - checkAiStatus: { - invoke: { - src: 'fetchAiStatus', - onDone: { - actions: 'assignAiStatus', target: 'assemblerHub', }, - onError: { - actions: 'assignAiOffline', - target: 'assemblerHub', - }, - }, + ], }, assemblerHub: { entry: [ @@ -542,36 +487,14 @@ export const customizeStoreStateMachineDefinition = createMachine( { invoke: { src: 'fetchSurveyCompletedOption', onError: { - target: 'preCheckAiStatus', // leave it as initialised default on error + target: 'transitional', // leave it as initialised default on error }, onDone: { - target: 'preCheckAiStatus', + target: 'transitional', actions: [ 'assignHasCompleteSurvey' ], }, }, }, - preCheckAiStatus: { - always: [ - { - cond: 'isWooExpress', - target: 'checkAiStatus', - }, - { cond: 'isNotWooExpress', target: 'transitional' }, - ], - }, - checkAiStatus: { - invoke: { - src: 'fetchAiStatus', - onDone: { - actions: 'assignAiStatus', - target: 'transitional', - }, - onError: { - actions: 'assignAiOffline', - target: 'transitional', - }, - }, - }, transitional: { entry: [ { type: 'updateQueryStep', step: 'transitional' }, @@ -640,8 +563,6 @@ export const CustomizeStoreController = ( { isAiOffline: ( _ctx ) => { return _ctx.flowType === FlowType.AIOffline; }, - isWooExpress: () => isWooExpress(), - isNotWooExpress: () => ! isWooExpress(), activeThemeHasMods: ( _ctx ) => { return !! _ctx.activeThemeHasMods; }, diff --git a/plugins/woocommerce-admin/client/customize-store/intro/actions.ts b/plugins/woocommerce-admin/client/customize-store/intro/actions.ts index cb5d1a0a5fd..c972d88382d 100644 --- a/plugins/woocommerce-admin/client/customize-store/intro/actions.ts +++ b/plugins/woocommerce-admin/client/customize-store/intro/actions.ts @@ -9,7 +9,6 @@ import { recordEvent } from '@woocommerce/tracks'; */ import { customizeStoreStateMachineEvents } from '..'; import { - aiStatusResponse, customizeStoreStateMachineContext, FlowType, RecommendThemesAPIResponse, @@ -108,47 +107,6 @@ export const assignCurrentThemeIsAiGenerated = assign< }, } ); -export const assignAiStatus = assign< - customizeStoreStateMachineContext, - customizeStoreStateMachineEvents // this is actually the wrong type for the event but I still don't know how to type this properly ->( { - flowType: ( _context, _event ) => { - const indicator = ( _event as DoneInvokeEvent< aiStatusResponse > ).data - .status.indicator; - const status = indicator !== 'critical' && indicator !== 'major'; - // @ts-expect-error temp workaround; - window.cys_aiOnline = status; - - recordEvent( 'customize_your_store_ai_status', { - online: status ? 'yes' : 'no', - } ); - - return status ? FlowType.AIOnline : FlowType.AIOffline; - }, -} ); - -export const assignAiOffline = assign< - customizeStoreStateMachineContext, - customizeStoreStateMachineEvents // this is actually the wrong type for the event but I still don't know how to type this properly ->( { - flowType: () => { - // @ts-expect-error temp workaround; - window.cys_aiOnline = false; - recordEvent( 'customize_your_store_ai_status', { - online: 'no', - } ); - - return FlowType.AIOffline; - }, -} ); - -export const assignNoAI = assign< - customizeStoreStateMachineContext, - customizeStoreStateMachineEvents // this is actually the wrong type for the event but I still don't know how to type this properly ->( { - flowType: FlowType.noAI, -} ); - export const assignNoAIFlowError = assign< customizeStoreStateMachineContext, customizeStoreStateMachineEvents @@ -203,4 +161,8 @@ export const assignFlags = assign< window.parent.__wcCustomizeStore.isFontLibraryAvailable || false; return isFontLibraryAvailable; }, + flowType: ( _context, event ) => { + const flowTypeData = event as DoneInvokeEvent< FlowType >; + return flowTypeData.data; + }, } ); diff --git a/plugins/woocommerce-admin/client/customize-store/intro/services.ts b/plugins/woocommerce-admin/client/customize-store/intro/services.ts index 1f024a8105d..22cabff82b1 100644 --- a/plugins/woocommerce-admin/client/customize-store/intro/services.ts +++ b/plugins/woocommerce-admin/client/customize-store/intro/services.ts @@ -7,14 +7,16 @@ import { store as coreStore } from '@wordpress/core-data'; import { resolveSelect } from '@wordpress/data'; import { ONBOARDING_STORE_NAME, OPTIONS_STORE_NAME } from '@woocommerce/data'; import apiFetch from '@wordpress/api-fetch'; +import { recordEvent } from '@woocommerce/tracks'; /** * Internal dependencies */ -import { aiStatusResponse } from '../types'; +import { FlowType, aiStatusResponse } from '../types'; import { isIframe } from '~/customize-store/utils'; +import { isWooExpress } from '~/utils/is-woo-express'; -export const fetchAiStatus = () => async (): Promise< aiStatusResponse > => { +export const fetchAiStatus = async (): Promise< aiStatusResponse > => { const response = await fetch( 'https://status.openai.com/api/v2/status.json' ); @@ -164,4 +166,31 @@ export const setFlags = async () => { // all of them to resolve before returning. await Promise.all( Object.values( _featureFlags ) ); } + + // Set FlowType flag. We want to set the flag only in the parent window. + if ( isWooExpress() && ! isIframe( window ) ) { + try { + const { status } = await fetchAiStatus(); + + const isAiOnline = + status.indicator !== 'critical' && status.indicator !== 'major'; + + // @ts-expect-error temp workaround; + window.cys_aiOnline = status; + recordEvent( 'customize_your_store_ai_status', { + online: isAiOnline ? 'yes' : 'no', + } ); + + return isAiOnline ? FlowType.AIOnline : FlowType.AIOffline; + } catch ( e ) { + // @ts-expect-error temp workaround; + window.cys_aiOnline = false; + recordEvent( 'customize_your_store_ai_status', { + online: 'no', + } ); + return FlowType.AIOffline; + } + } + + return FlowType.noAI; }; diff --git a/plugins/woocommerce/changelog/46528-fix-set-flow-type b/plugins/woocommerce/changelog/46528-fix-set-flow-type new file mode 100644 index 00000000000..16d4dcce1c8 --- /dev/null +++ b/plugins/woocommerce/changelog/46528-fix-set-flow-type @@ -0,0 +1,4 @@ +Significance: patch +Type: tweak +Comment: CYS - set flowType when the state machine is instantiated. +