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

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

Hide file tree

Showing 3 changed files with 96 additions and 37 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
@@ -67,7 +67,7 @@ export const SidebarNavigationScreenTypography = () => {
 		upgradeNotice = '';
 	}
 
-	const OptIn = () => {
+	const optIn = () => {
 		recordEvent(
 			'customize_your_store_assembler_hub_opt_in_usage_tracking'
 		);
@@ -201,18 +201,8 @@ export const SidebarNavigationScreenTypography = () => {
 										</Button>
 										<Button
 											onClick={ async () => {
-												await dispatch(
-													OPTIONS_STORE_NAME
-												).updateOptions( {
-													woocommerce_allow_tracking:
-														OptInDataSharing
-															? 'yes'
-															: 'no',
-												} );
-
-												OptIn();
-												closeModal();
-												window.location.href = `${ ADMIN_URL }admin.php?page=wc-admin&path=%2Fcustomize-store%2Fassembler-hub`;
+												optIn();
+												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/services.ts b/plugins/woocommerce-admin/client/customize-store/design-without-ai/services.ts
@@ -205,11 +205,23 @@ const updateGlobalStylesWithDefaultValues = async (
 	);
 };
 
+export const enableTracking = async () => {
+	try {
+		await dispatch( OPTIONS_STORE_NAME ).updateOptions( {
+			woocommerce_allow_tracking: 'yes',
+		} );
+		window.wcTracks.isEnabled = true;
+	} catch ( error ) {
+		throw error;
+	}
+};
+
 export const services = {
 	assembleSite,
 	browserPopstateHandler,
 	installAndActivateTheme,
 	createProducts,
 	installFontFamilies,
 	updateGlobalStylesWithDefaultValues,
+	enableTracking,
 };
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,32 @@ export const designWithNoAiStateMachineDefinition = createMachine(
 					},
 				],
 			},
+			installFontFamilies: {
+				meta: {
+					component: ApiCallLoader,
+				},
+				initial: 'enableTracking',
+				states: {
+					enableTracking: {
+						invoke: {
+							src: 'enableTracking',
+							onDone: {
+								target: 'checkFontLibrary',
+							},
+						},
+					},
+					checkFontLibrary:
+						installFontFamiliesState.states.checkFontLibrary,
+					pending: installFontFamiliesState.states.pending,
+					success: {
+						meta: {
+							component: AssembleHubLoader,
+						},
+						entry: [ 'redirectToAssemblerHub' ],
+						type: 'final',
+					},
+				},
+			},
 			preAssembleSite: {
 				initial: 'preApiCallLoader',
 				id: 'preAssembleSite',
@@ -161,31 +234,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 +269,7 @@ export const designWithNoAiStateMachineDefinition = createMachine(
 		services,
 		guards: {
 			hasStepInUrl,
+			hasInstallFontsInUrl,
 			isFontLibraryAvailable,
 		},
 	}