CYS - Core: install font when user clicks opt-in

woocommerce · Mar 14, 2024 · 71d8240 · 71d8240
1 parent 59635fb
commit 71d8240
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 26 deletions.
diff --git a/...min/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-typography.tsx b/...min/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-typography.tsx
@@ -211,8 +211,7 @@ export const SidebarNavigationScreenTypography = () => {
 												} );
 
 												OptIn();
-												closeModal();
-												window.location.href = `${ ADMIN_URL }admin.php?page=wc-admin&path=%2Fcustomize-store%2Fassembler-hub`;
+												window.location.href = `${ ADMIN_URL }admin.php?page=wc-admin&path=%2Fcustomize-store/design/install-fonts`;
 											} }
 											variant="primary"
 											disabled={ ! OptInDataSharing }

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
@@ -29,6 +29,47 @@ export const hasStepInUrl = (
 	);
 };
 
+export const hasInstallFontsInUrl = () => {
+	const { path = '' } = getQuery() as { path: string };
+	const pathFragments = path.split( '/' );
+	debugger;
+	return (
+		pathFragments[ 2 ] === 'design' &&
+		pathFragments[ 3 ] === 'install-fonts'
+	);
+};
+
+const installFontFamiliesState = {
+	initial: 'checkFontLibrary',
+	states: {
+		checkFontLibrary: {
+			always: [
+				{
+					cond: {
+						type: 'isFontLibraryAvailable',
+					},
+					target: 'pending',
+				},
+				{ target: 'success' },
+			],
+		},
+		pending: {
+			invoke: {
+				src: 'installFontFamilies',
+				onDone: {
+					target: 'success',
+				},
+				onError: {
+					actions: 'redirectToIntroWithError',
+				},
+			},
+		},
+		success: {
+			type: 'final',
+		},
+	},
+};
+
 export type DesignWithoutAIStateMachineEvents =
 	| { type: 'EXTERNAL_URL_UPDATE' }
 	| { type: 'NO_AI_FLOW_ERROR'; payload: { hasError: boolean } };
@@ -62,6 +103,12 @@ export const designWithNoAiStateMachineDefinition = createMachine(
 		states: {
 			navigate: {
 				always: [
+					{
+						cond: {
+							type: 'hasInstallFontsInUrl',
+						},
+						target: 'installFontFamilies',
+					},
 					{
 						cond: {
 							type: 'hasStepInUrl',
@@ -71,6 +118,23 @@ export const designWithNoAiStateMachineDefinition = createMachine(
 					},
 				],
 			},
+			installFontFamilies: {
+				meta: {
+					component: ApiCallLoader,
+				},
+				states: {
+					checkFontLibrary:
+						installFontFamiliesState.states.checkFontLibrary,
+					pending: installFontFamiliesState.states.pending,
+					success: {
+						meta: {
+							component: AssembleHubLoader,
+						},
+						entry: [ 'redirectToAssemblerHub' ],
+						type: 'final',
+					},
+				},
+			},
 			preAssembleSite: {
 				initial: 'preApiCallLoader',
 				id: 'preAssembleSite',
@@ -161,31 +225,14 @@ export const designWithNoAiStateMachineDefinition = createMachine(
 								},
 							},
 							installFontFamilies: {
-								initial: 'checkFontLibrary',
+								...installFontFamiliesState,
 								states: {
-									checkFontLibrary: {
-										always: [
-											{
-												cond: {
-													type: 'isFontLibraryAvailable',
-												},
-												target: 'pending',
-											},
-											{ target: 'success' },
-										],
-									},
-									pending: {
-										invoke: {
-											src: 'installFontFamilies',
-											onDone: {
-												target: 'success',
-											},
-											onError: {
-												actions:
-													'redirectToIntroWithError',
-											},
-										},
-									},
+									...installFontFamiliesState.states,
+									checkFontLibrary:
+										installFontFamiliesState.states
+											.checkFontLibrary,
+									pending:
+										installFontFamiliesState.states.pending,
 									success: {
 										type: 'final',
 									},
@@ -213,6 +260,7 @@ export const designWithNoAiStateMachineDefinition = createMachine(
 		services,
 		guards: {
 			hasStepInUrl,
+			hasInstallFontsInUrl,
 			isFontLibraryAvailable,
 		},
 	}