From 06c19fa8109879403e9a11f5a7a2646a2f0c05ad Mon Sep 17 00:00:00 2001
From: Luigi Teschio <gigitux@gmail.com>
Date: Fri, 15 Mar 2024 17:09:41 +0100
Subject: [PATCH] fix font installation

---
 .../sidebar-navigation-screen-typography.tsx  | 15 +++++++---
 .../design-without-ai/index.tsx               | 29 ++++++++++++-------
 .../design-without-ai/pages/ApiCallLoader.tsx | 21 ++++++++++++--
 .../design-without-ai/state-machine.tsx       | 22 ++------------
 .../client/customize-store/index.tsx          |  3 --
 .../product-list-content.tsx                  |  1 -
 6 files changed, 49 insertions(+), 42 deletions(-)

diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-typography.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-typography.tsx
index 7bd82de07b59..bf669eb1547c 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-typography.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-typography.tsx
@@ -9,7 +9,7 @@ import {
 	useContext,
 	useState,
 } from '@wordpress/element';
-import { dispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { Link } from '@woocommerce/components';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
@@ -24,6 +24,7 @@ import { ADMIN_URL } from '~/utils/admin-settings';
 import { FontPairing } from './global-styles';
 import { CustomizeStoreContext } from '..';
 import { FlowType } from '~/customize-store/types';
+import { isIframe, sendMessageToParent } from '~/customize-store/utils';
 export const SidebarNavigationScreenTypography = () => {
 	const { context, sendEvent } = useContext( CustomizeStoreContext );
 	const aiOnline = context.flowType === FlowType.AIOnline;
@@ -202,9 +203,15 @@ export const SidebarNavigationScreenTypography = () => {
 										<Button
 											onClick={ async () => {
 												optIn();
-												window.parent.__wcCustomizeStore.sendEventToIntroMachine(
-													{ type: 'INSTALL_FONTS' }
-												);
+												if ( isIframe( window ) ) {
+													sendMessageToParent( {
+														type: 'INSTALL_FONTS',
+													} );
+												} else {
+													sendEvent(
+														'INSTALL_FONTS'
+													);
+												}
 											} }
 											variant="primary"
 											disabled={ ! OptInDataSharing }
diff --git a/plugins/woocommerce-admin/client/customize-store/design-without-ai/index.tsx b/plugins/woocommerce-admin/client/customize-store/design-without-ai/index.tsx
index e28b6e43d136..fc4e84d961c7 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-without-ai/index.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/design-without-ai/index.tsx
@@ -15,7 +15,7 @@ import {
 } from '../types';
 import { designWithNoAiStateMachineDefinition } from './state-machine';
 import { findComponentMeta } from '~/utils/xstate/find-component';
-import { AssembleHubLoader } from '../design-with-ai/pages';
+import { AssembleHubLoader } from './pages/ApiCallLoader';
 
 export type DesignWithoutAiComponent = typeof AssembleHubLoader;
 export type DesignWithoutAiComponentMeta = {
@@ -30,15 +30,18 @@ export const DesignWithNoAiController = ( {
 	sendEventToParent?: Sender< customizeStoreStateMachineEvents >;
 	parentContext?: customizeStoreStateMachineContext;
 } ) => {
-	const [ , , service ] = useMachine( designWithNoAiStateMachineDefinition, {
-		devTools: process.env.NODE_ENV === 'development',
-		parent: parentMachine,
-		context: {
-			...designWithNoAiStateMachineDefinition.context,
-			isFontLibraryAvailable:
-				parentContext?.isFontLibraryAvailable ?? false,
-		},
-	} );
+	const [ , send, service ] = useMachine(
+		designWithNoAiStateMachineDefinition,
+		{
+			devTools: process.env.NODE_ENV === 'development',
+			parent: parentMachine,
+			context: {
+				...designWithNoAiStateMachineDefinition.context,
+				isFontLibraryAvailable:
+					parentContext?.isFontLibraryAvailable ?? false,
+			},
+		}
+	);
 
 	// 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 ) =>
@@ -59,7 +62,11 @@ export const DesignWithNoAiController = ( {
 	return (
 		<>
 			<div className={ `woocommerce-design-without-ai__container` }>
-				{ CurrentComponent ? <CurrentComponent /> : <div /> }
+				{ CurrentComponent ? (
+					<CurrentComponent sendEvent={ send } />
+				) : (
+					<div />
+				) }
 			</div>
 		</>
 	);
diff --git a/plugins/woocommerce-admin/client/customize-store/design-without-ai/pages/ApiCallLoader.tsx b/plugins/woocommerce-admin/client/customize-store/design-without-ai/pages/ApiCallLoader.tsx
index 6a4f9ad139d5..49674500b436 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-without-ai/pages/ApiCallLoader.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/design-without-ai/pages/ApiCallLoader.tsx
@@ -17,6 +17,7 @@ import {
 	createAugmentedSteps,
 	onIframeLoad,
 } from '~/customize-store/utils';
+import { DesignWithoutAIStateMachineEvents } from '../state-machine';
 
 const loaderSteps = [
 	{
@@ -103,11 +104,21 @@ export const ApiCallLoader = () => {
 	);
 };
 
-const AssemblerHub = () => {
+type SendEventFn = ( event: DesignWithoutAIStateMachineEvents ) => void;
+
+const AssemblerHub = ( { sendEvent }: { sendEvent: SendEventFn } ) => {
 	const assemblerUrl = getNewPath( {}, '/customize-store/assembler-hub', {} );
 	const iframe = useRef< HTMLIFrameElement >( null );
 	const [ isVisible, setIsVisible ] = useState( false );
 
+	useEffect( () => {
+		window.addEventListener( 'message', ( event ) => {
+			if ( event.data?.type === 'INSTALL_FONTS' ) {
+				sendEvent( { type: 'INSTALL_FONTS' } );
+			}
+		} );
+	}, [ sendEvent ] );
+
 	return (
 		<iframe
 			ref={ iframe }
@@ -127,7 +138,11 @@ const AssemblerHub = () => {
 	);
 };
 
-export const AssembleHubLoader = () => {
+export const AssembleHubLoader = ( {
+	sendEvent,
+}: {
+	sendEvent: SendEventFn;
+} ) => {
 	// Show the last two steps of the loader so that the last frame is the shortest time possible
 	const augmentedSteps = createAugmentedSteps( loaderSteps.slice( -2 ), 10 );
 
@@ -160,7 +175,7 @@ export const AssembleHubLoader = () => {
 					progress={ progress || 0 }
 				/>
 			</Loader>
-			<AssemblerHub />
+			<AssemblerHub sendEvent={ sendEvent } />
 		</>
 	);
 };
diff --git a/plugins/woocommerce-admin/client/customize-store/design-without-ai/state-machine.tsx b/plugins/woocommerce-admin/client/customize-store/design-without-ai/state-machine.tsx
index e4548375eb79..6677016c7948 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-without-ai/state-machine.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/design-without-ai/state-machine.tsx
@@ -29,15 +29,6 @@ export const hasStepInUrl = (
 	);
 };
 
-export const hasInstallFontsInUrl = () => {
-	const { path = '' } = getQuery() as { path: string };
-	const pathFragments = path.split( '/' );
-	return (
-		pathFragments[ 2 ] === 'design' &&
-		pathFragments[ 3 ] === 'install-fonts'
-	);
-};
-
 const installFontFamiliesState = {
 	initial: 'checkFontLibrary',
 	states: {
@@ -106,12 +97,6 @@ export const designWithNoAiStateMachineDefinition = createMachine(
 		states: {
 			navigate: {
 				always: [
-					{
-						cond: {
-							type: 'hasInstallFontsInUrl',
-						},
-						target: 'installFontFamilies',
-					},
 					{
 						cond: {
 							type: 'hasStepInUrl',
@@ -139,10 +124,9 @@ export const designWithNoAiStateMachineDefinition = createMachine(
 						installFontFamiliesState.states.checkFontLibrary,
 					pending: installFontFamiliesState.states.pending,
 					success: {
-						meta: {
-							component: AssembleHubLoader,
+						onDone: {
+							target: '#designWithoutAI.showAssembleHub',
 						},
-						entry: [ 'redirectToAssemblerHub' ],
 						type: 'final',
 					},
 				},
@@ -243,7 +227,6 @@ export const designWithNoAiStateMachineDefinition = createMachine(
 					component: AssembleHubLoader,
 				},
 				entry: [ 'redirectToAssemblerHub' ],
-				type: 'final',
 			},
 		},
 	},
@@ -252,7 +235,6 @@ export const designWithNoAiStateMachineDefinition = createMachine(
 		services,
 		guards: {
 			hasStepInUrl,
-			hasInstallFontsInUrl,
 			isFontLibraryAvailable,
 		},
 	}
diff --git a/plugins/woocommerce-admin/client/customize-store/index.tsx b/plugins/woocommerce-admin/client/customize-store/index.tsx
index 457a9c445446..beabb08c7341 100644
--- a/plugins/woocommerce-admin/client/customize-store/index.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/index.tsx
@@ -205,9 +205,6 @@ export const customizeStoreStateMachineDefinition = createMachine( {
 		},
 		INSTALL_FONTS: {
 			target: 'designWithoutAi',
-			actions: [
-				{ type: 'updateQueryStep', step: 'design/install-fonts' },
-			],
 		},
 	},
 	states: {
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx b/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
index 94c6175e7923..55283701496e 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
@@ -22,7 +22,6 @@ import { Product, ProductType } from '../product-list/types';
 import { appendURLParams } from '../../utils/functions';
 import { ADMIN_URL, getAdminSetting } from '~/utils/admin-settings';
 import { NoAIBanner } from '~/customize-store/intro/intro-banners';
-import { addQueryArgs } from '@wordpress/url';
 
 export default function ProductListContent( props: {
 	products: Product[];