From 41e1da5033fc2283e77441cc2988d32c45a9f602 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Wed, 27 Mar 2024 14:13:52 +0100 Subject: [PATCH] [CYS] Redirect to transitional page to the intro page if the CYS task was not completed (#45933) * Redirect to intro page when accessing the transitional page if no customized * Remove only * Add changefile(s) from automation for the following project(s): woocommerce * Check if the task is completed * Add transition screen class * Remove unused import --------- Co-authored-by: github-actions --- .../customize-store/assembler-hub/style.scss | 1 + .../client/customize-store/index.tsx | 34 ++++++++++++++++++- .../client/customize-store/intro/services.ts | 10 ++++++ ...en-going-to-transitional-but-no-theme-mods | 4 +++ .../customize-store/transitional.spec.js | 13 +++++++ 5 files changed, 61 insertions(+), 1 deletion(-) create mode 100644 plugins/woocommerce/changelog/45933-redirect-to-intro-when-going-to-transitional-but-no-theme-mods diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss b/plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss index d2e1d714028..ac54889b61b 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss @@ -61,6 +61,7 @@ } .woocommerce-customize-store__step-assemblerHub, +.woocommerce-customize-store__step-transitionalScreen, .woocommerce-customize-store__step-intro { a { text-decoration: none; diff --git a/plugins/woocommerce-admin/client/customize-store/index.tsx b/plugins/woocommerce-admin/client/customize-store/index.tsx index 028f5d49249..7e74987a007 100644 --- a/plugins/woocommerce-admin/client/customize-store/index.tsx +++ b/plugins/woocommerce-admin/client/customize-store/index.tsx @@ -489,8 +489,34 @@ export const customizeStoreStateMachineDefinition = createMachine( { }, }, transitionalScreen: { - initial: 'preTransitional', + initial: 'fetchCustomizeStoreCompleted', states: { + fetchCustomizeStoreCompleted: { + invoke: { + src: 'fetchCustomizeStoreCompleted', + onDone: { + actions: 'assignCustomizeStoreCompleted', + target: 'checkCustomizeStoreCompleted', + }, + }, + }, + checkCustomizeStoreCompleted: { + always: [ + { + // Redirect to the "intro step" if the active theme has no modifications. + cond: 'customizeTaskIsNotCompleted', + actions: [ + { type: 'updateQueryStep', step: 'intro' }, + ], + target: '#customizeStore.intro', + }, + { + // Otherwise, proceed to the next step. + cond: 'customizeTaskIsCompleted', + target: 'preTransitional', + }, + ], + }, preTransitional: { meta: { component: CYSSpinner, @@ -604,6 +630,12 @@ export const CustomizeStoreController = ( { activeThemeHasNoMods: ( _ctx ) => { return ! _ctx.activeThemeHasMods; }, + customizeTaskIsCompleted: ( _ctx ) => { + return _ctx.intro.customizeStoreTaskCompleted; + }, + customizeTaskIsNotCompleted: ( _ctx ) => { + return ! _ctx.intro.customizeStoreTaskCompleted; + }, }, } ); }, [ actionOverrides, servicesOverrides ] ); diff --git a/plugins/woocommerce-admin/client/customize-store/intro/services.ts b/plugins/woocommerce-admin/client/customize-store/intro/services.ts index 4965397b9b2..1f024a8105d 100644 --- a/plugins/woocommerce-admin/client/customize-store/intro/services.ts +++ b/plugins/woocommerce-admin/client/customize-store/intro/services.ts @@ -72,6 +72,16 @@ export const fetchActiveThemeHasMods = async () => { return { activeThemeHasMods }; }; +export const fetchCustomizeStoreCompleted = async () => { + const task = await resolveSelect( ONBOARDING_STORE_NAME ).getTask( + 'customize-store' + ); + + return { + customizeStoreTaskCompleted: task?.isComplete, + }; +}; + export const fetchIntroData = async () => { const currentTemplatePromise = // @ts-expect-error No types for this exist yet. diff --git a/plugins/woocommerce/changelog/45933-redirect-to-intro-when-going-to-transitional-but-no-theme-mods b/plugins/woocommerce/changelog/45933-redirect-to-intro-when-going-to-transitional-but-no-theme-mods new file mode 100644 index 00000000000..f27a595858d --- /dev/null +++ b/plugins/woocommerce/changelog/45933-redirect-to-intro-when-going-to-transitional-but-no-theme-mods @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Redirect to the CYS intro screen when accessing the transitional page without going through the customizing process. \ No newline at end of file diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/transitional.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/transitional.spec.js index 1ad02c80c7e..9fef530b3da 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/transitional.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/transitional.spec.js @@ -6,6 +6,7 @@ const { AssemblerPage } = require( './assembler/assembler.page' ); const CUSTOMIZE_STORE_URL = '/wp-admin/admin.php?page=wc-admin&path=%2Fcustomize-store'; const TRANSITIONAL_URL = `${ CUSTOMIZE_STORE_URL }%2Ftransitional`; +const INTRO_URL = `${ CUSTOMIZE_STORE_URL }%2Fintro`; const test = base.extend( { pageObject: async ( { page }, use ) => { @@ -56,6 +57,18 @@ test.describe( 'Store owner can view the Transitional page', () => { ); } ); + test( 'Accessing the transitional page when the CYS flow is not completed should redirect to the Intro page', async ( { + page, + baseURL, + } ) => { + await page.goto( TRANSITIONAL_URL ); + + const locator = page.locator( 'h1:visible' ); + await expect( locator ).not.toHaveText( 'Your store looks great!' ); + + await expect( page.url() ).toBe( `${ baseURL }${ INTRO_URL }` ); + } ); + test( 'Clicking on "Done" in the assembler should go to the transitional page', async ( { pageObject, baseURL,