From a125b234617c8c81836091cbc78650852173db9a Mon Sep 17 00:00:00 2001 From: bangank36 Date: Sun, 29 Jan 2023 11:35:51 +0700 Subject: [PATCH 1/7] - Adding new assembler flow --- .../stepper/declarative-flow/assembler.ts | 53 +++++++++++++++++++ .../declarative-flow/internals/global.scss | 3 +- .../pattern-assembler/constants.ts | 9 ++++ .../pattern-assembler/index.tsx | 15 ++++-- .../declarative-flow/registered-flows.ts | 2 + client/signup/config/flows.js | 8 ++- packages/onboarding/src/utils/flows.ts | 2 + 7 files changed, 85 insertions(+), 7 deletions(-) create mode 100644 client/landing/stepper/declarative-flow/assembler.ts diff --git a/client/landing/stepper/declarative-flow/assembler.ts b/client/landing/stepper/declarative-flow/assembler.ts new file mode 100644 index 0000000000000..a15303c7ea241 --- /dev/null +++ b/client/landing/stepper/declarative-flow/assembler.ts @@ -0,0 +1,53 @@ +import { useFlowProgress, ASSEMBLER_FLOW } from '@automattic/onboarding'; +import { useDispatch } from '@wordpress/data'; +import { useSiteSlug } from '../hooks/use-site-slug'; +import { ONBOARD_STORE } from '../stores'; +import { recordSubmitStep } from './internals/analytics/record-submit-step'; +import PatternAssembler from './internals/steps-repository/pattern-assembler'; +import Processing from './internals/steps-repository/processing-step'; +import { Flow, ProvidedDependencies } from './internals/types'; + +const assembler: Flow = { + name: ASSEMBLER_FLOW, + useSteps() { + return [ + { slug: 'patternAssembler', component: PatternAssembler }, + { slug: 'processing', component: Processing }, + ]; + }, + + useStepNavigation( _currentStep, navigate ) { + const flowName = this.name; + const { setStepProgress, setPendingAction } = useDispatch( ONBOARD_STORE ); + const flowProgress = useFlowProgress( { stepName: _currentStep, flowName } ); + setStepProgress( flowProgress ); + const siteSlug = useSiteSlug(); + + const exitFlow = ( to: string ) => { + setPendingAction( () => { + return new Promise( () => { + window.location.assign( to ); + } ); + } ); + + return navigate( 'processing' ); + }; + + const submit = ( providedDependencies: ProvidedDependencies = {} ) => { + recordSubmitStep( providedDependencies, '', flowName, _currentStep ); + + switch ( _currentStep ) { + case 'processing': + return exitFlow( `/site-editor/${ siteSlug }` ); + + case 'patternAssembler': { + return navigate( 'processing' ); + } + } + }; + + return { submit }; + }, +}; + +export default assembler; diff --git a/client/landing/stepper/declarative-flow/internals/global.scss b/client/landing/stepper/declarative-flow/internals/global.scss index e3839202258cd..484026aeefdee 100644 --- a/client/landing/stepper/declarative-flow/internals/global.scss +++ b/client/landing/stepper/declarative-flow/internals/global.scss @@ -73,7 +73,8 @@ button { .intro, .free-setup, .free-post-setup, -.free { +.free, +.assembler { padding: 60px 0 0; box-sizing: border-box; diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts index 7b1ebeeaf7c51..4e4c97eacf88a 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts @@ -2,3 +2,12 @@ export const PATTERN_SOURCE_SITE_ID = 174455321; // dotcompatterns export const PUBLIC_API_URL = 'https://public-api.wordpress.com'; export const PREVIEW_PATTERN_URL = PUBLIC_API_URL + '/wpcom/v2/block-previews/pattern'; export const SITE_TAGLINE = 'Site Tagline'; + +export const BLANK_CANVAS_DESIGN = { + slug: 'blank-canvas-3', + title: 'Blank Canvas', + recipe: { + stylesheet: 'pub/blank-canvas-3', + }, + design_type: 'assembler', +}; diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx index c4849e3936fcb..a94de0d1882e2 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx @@ -1,5 +1,5 @@ import { isEnabled } from '@automattic/calypso-config'; -import { StepContainer } from '@automattic/onboarding'; +import { StepContainer, SITE_SETUP_FLOW, ASSEMBLER_FLOW } from '@automattic/onboarding'; import { useDispatch, useSelect } from '@wordpress/data'; import { useTranslate } from 'i18n-calypso'; import { useState, useRef, useEffect } from 'react'; @@ -8,12 +8,13 @@ import AsyncLoad from 'calypso/components/async-load'; import DocumentHead from 'calypso/components/data/document-head'; import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; import { requestActiveTheme } from 'calypso/state/themes/actions'; +import { useQuery } from '../../../../hooks/use-query'; import { useSite } from '../../../../hooks/use-site'; import { useSiteIdParam } from '../../../../hooks/use-site-id-param'; import { useSiteSlugParam } from '../../../../hooks/use-site-slug-param'; import { SITE_STORE, ONBOARD_STORE } from '../../../../stores'; import { recordSelectedDesign } from '../../analytics/record-design'; -import { SITE_TAGLINE } from './constants'; +import { SITE_TAGLINE, BLANK_CANVAS_DESIGN } from './constants'; import PatternLayout from './pattern-layout'; import PatternSelectorLoader from './pattern-selector-loader'; import { useAllPatterns } from './patterns-data'; @@ -35,7 +36,7 @@ const PatternAssembler: Step = ( { navigation, flow } ) => { const { goBack, goNext, submit, goToStep } = navigation; const { setThemeOnSite, runThemeSetupOnSite, createCustomTemplate } = useDispatch( SITE_STORE ); const reduxDispatch = useReduxDispatch(); - const { setPendingAction } = useDispatch( ONBOARD_STORE ); + const { setPendingAction, setSelectedDesign } = useDispatch( ONBOARD_STORE ); const selectedDesign = useSelect( ( select ) => select( ONBOARD_STORE ).getSelectedDesign() ); const intent = useSelect( ( select ) => select( ONBOARD_STORE ).getIntent() ); const site = useSite(); @@ -43,6 +44,7 @@ const PatternAssembler: Step = ( { navigation, flow } ) => { const siteId = useSiteIdParam(); const siteSlugOrId = siteSlug ? siteSlug : siteId; const allPatterns = useAllPatterns(); + const selectedTheme = useQuery().get( 'theme' ); const largePreviewProps = { placeholder: null, @@ -59,8 +61,11 @@ const PatternAssembler: Step = ( { navigation, flow } ) => { useEffect( () => { // Require to start the flow from the first step - if ( ! selectedDesign ) { + if ( ! selectedDesign && flow === SITE_SETUP_FLOW ) { goToStep?.( 'goals' ); + } else if ( selectedTheme === 'blank-canvas-3' && flow === ASSEMBLER_FLOW ) { + // User has selected blank-canvas-3 theme from theme showcase and enter assembler flow + setSelectedDesign( BLANK_CANVAS_DESIGN as Design ); } }, [] ); @@ -371,7 +376,7 @@ const PatternAssembler: Step = ( { navigation, flow } ) => { Promise< { default: Flow } > > = { free: () => import( /* webpackChunkName: "free-flow" */ '../declarative-flow/free' ), + assembler: () => import( /* webpackChunkName: "free-flow" */ '../declarative-flow/assembler' ), + 'free-post-setup': () => import( /* webpackChunkName: "free-post-setup-flow" */ '../declarative-flow/free-post-setup' ), diff --git a/client/signup/config/flows.js b/client/signup/config/flows.js index e5d255fa65bff..dc87b5b3bff06 100644 --- a/client/signup/config/flows.js +++ b/client/signup/config/flows.js @@ -112,7 +112,13 @@ function getChecklistThemeDestination( { siteSlug, themeParameter } ) { themeParameter === 'blank-canvas-3' && config.isEnabled( 'pattern-assembler/logged-out-showcase' ) ) { - return `/setup/site-setup/patternAssembler?siteSlug=${ siteSlug }`; + return addQueryArgs( + { + theme: themeParameter, + siteSlug: siteSlug, + }, + `/setup/assembler` + ); } return `/home/${ siteSlug }`; } diff --git a/packages/onboarding/src/utils/flows.ts b/packages/onboarding/src/utils/flows.ts index fe66ad4265946..428260893b5dc 100644 --- a/packages/onboarding/src/utils/flows.ts +++ b/packages/onboarding/src/utils/flows.ts @@ -13,6 +13,8 @@ export const MIGRATION_FLOW = 'import-focused'; export const COPY_SITE_FLOW = 'copy-site'; export const BUILD_FLOW = 'build'; export const WRITE_FLOW = 'write'; +export const ASSEMBLER_FLOW = 'assembler'; +export const SITE_SETUP_FLOW = 'site-setup'; export const isLinkInBioFlow = ( flowName: string | null ) => { return Boolean( From 47fa53980853316e7c736b24a451e161f928bb2b Mon Sep 17 00:00:00 2001 From: bangank36 Date: Sun, 29 Jan 2023 12:26:27 +0700 Subject: [PATCH 2/7] - Prevent to assembler flow when viewport is not desktop --- client/signup/config/flows.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/client/signup/config/flows.js b/client/signup/config/flows.js index dc87b5b3bff06..84ebc75ea9865 100644 --- a/client/signup/config/flows.js +++ b/client/signup/config/flows.js @@ -1,4 +1,5 @@ import config from '@automattic/calypso-config'; +import { isDesktop } from '@automattic/viewport'; import { get, includes, reject } from 'lodash'; import detectHistoryNavigation from 'calypso/lib/detect-history-navigation'; import { getQueryArgs } from 'calypso/lib/query-args'; @@ -108,7 +109,10 @@ function getThankYouNoSiteDestination() { } function getChecklistThemeDestination( { siteSlug, themeParameter } ) { + const canGoToAssemblerFlow = isDesktop(); + if ( + canGoToAssemblerFlow && themeParameter === 'blank-canvas-3' && config.isEnabled( 'pattern-assembler/logged-out-showcase' ) ) { From 66ea2808b402cef9b47e91fbe92354a67c80f4b6 Mon Sep 17 00:00:00 2001 From: bangank36 Date: Mon, 30 Jan 2023 12:49:30 +0700 Subject: [PATCH 3/7] - Unify assembler name --- .../declarative-flow/internals/global.scss | 2 +- .../pattern-assembler/index.tsx | 8 ++------ .../declarative-flow/registered-flows.ts | 3 ++- .../{assembler.ts => site-assembler-flow.ts} | 19 ++++++++++++++++--- client/signup/config/flows.js | 19 +++++++++++-------- packages/onboarding/src/utils/flows.ts | 2 +- 6 files changed, 33 insertions(+), 20 deletions(-) rename client/landing/stepper/declarative-flow/{assembler.ts => site-assembler-flow.ts} (67%) diff --git a/client/landing/stepper/declarative-flow/internals/global.scss b/client/landing/stepper/declarative-flow/internals/global.scss index 484026aeefdee..c04692bc6dd79 100644 --- a/client/landing/stepper/declarative-flow/internals/global.scss +++ b/client/landing/stepper/declarative-flow/internals/global.scss @@ -74,7 +74,7 @@ button { .free-setup, .free-post-setup, .free, -.assembler { +.site-assembler { padding: 60px 0 0; box-sizing: border-box; diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx index a94de0d1882e2..f24746ea72dec 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx @@ -8,7 +8,6 @@ import AsyncLoad from 'calypso/components/async-load'; import DocumentHead from 'calypso/components/data/document-head'; import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; import { requestActiveTheme } from 'calypso/state/themes/actions'; -import { useQuery } from '../../../../hooks/use-query'; import { useSite } from '../../../../hooks/use-site'; import { useSiteIdParam } from '../../../../hooks/use-site-id-param'; import { useSiteSlugParam } from '../../../../hooks/use-site-slug-param'; @@ -36,7 +35,7 @@ const PatternAssembler: Step = ( { navigation, flow } ) => { const { goBack, goNext, submit, goToStep } = navigation; const { setThemeOnSite, runThemeSetupOnSite, createCustomTemplate } = useDispatch( SITE_STORE ); const reduxDispatch = useReduxDispatch(); - const { setPendingAction, setSelectedDesign } = useDispatch( ONBOARD_STORE ); + const { setPendingAction } = useDispatch( ONBOARD_STORE ); const selectedDesign = useSelect( ( select ) => select( ONBOARD_STORE ).getSelectedDesign() ); const intent = useSelect( ( select ) => select( ONBOARD_STORE ).getIntent() ); const site = useSite(); @@ -44,7 +43,6 @@ const PatternAssembler: Step = ( { navigation, flow } ) => { const siteId = useSiteIdParam(); const siteSlugOrId = siteSlug ? siteSlug : siteId; const allPatterns = useAllPatterns(); - const selectedTheme = useQuery().get( 'theme' ); const largePreviewProps = { placeholder: null, @@ -63,9 +61,6 @@ const PatternAssembler: Step = ( { navigation, flow } ) => { // Require to start the flow from the first step if ( ! selectedDesign && flow === SITE_SETUP_FLOW ) { goToStep?.( 'goals' ); - } else if ( selectedTheme === 'blank-canvas-3' && flow === ASSEMBLER_FLOW ) { - // User has selected blank-canvas-3 theme from theme showcase and enter assembler flow - setSelectedDesign( BLANK_CANVAS_DESIGN as Design ); } }, [] ); @@ -406,3 +401,4 @@ const PatternAssembler: Step = ( { navigation, flow } ) => { }; export default PatternAssembler; +export { BLANK_CANVAS_DESIGN }; diff --git a/client/landing/stepper/declarative-flow/registered-flows.ts b/client/landing/stepper/declarative-flow/registered-flows.ts index 55225f649f1a1..37f2724962453 100644 --- a/client/landing/stepper/declarative-flow/registered-flows.ts +++ b/client/landing/stepper/declarative-flow/registered-flows.ts @@ -47,7 +47,8 @@ const availableFlows: Record< string, () => Promise< { default: Flow } > > = { free: () => import( /* webpackChunkName: "free-flow" */ '../declarative-flow/free' ), - assembler: () => import( /* webpackChunkName: "free-flow" */ '../declarative-flow/assembler' ), + 'site-assembler': () => + import( /* webpackChunkName: "site-assembler-flow" */ './site-assembler-flow' ), 'free-post-setup': () => import( /* webpackChunkName: "free-post-setup-flow" */ '../declarative-flow/free-post-setup' ), diff --git a/client/landing/stepper/declarative-flow/assembler.ts b/client/landing/stepper/declarative-flow/site-assembler-flow.ts similarity index 67% rename from client/landing/stepper/declarative-flow/assembler.ts rename to client/landing/stepper/declarative-flow/site-assembler-flow.ts index a15303c7ea241..a407cc1c6bb83 100644 --- a/client/landing/stepper/declarative-flow/assembler.ts +++ b/client/landing/stepper/declarative-flow/site-assembler-flow.ts @@ -1,15 +1,28 @@ import { useFlowProgress, ASSEMBLER_FLOW } from '@automattic/onboarding'; +import { useEffect } from 'react'; import { useDispatch } from '@wordpress/data'; import { useSiteSlug } from '../hooks/use-site-slug'; +import { useQuery } from '../hooks/use-query'; import { ONBOARD_STORE } from '../stores'; import { recordSubmitStep } from './internals/analytics/record-submit-step'; -import PatternAssembler from './internals/steps-repository/pattern-assembler'; +import type { Design } from '@automattic/design-picker/src/types'; +import PatternAssembler, { BLANK_CANVAS_DESIGN } from './internals/steps-repository/pattern-assembler'; import Processing from './internals/steps-repository/processing-step'; import { Flow, ProvidedDependencies } from './internals/types'; -const assembler: Flow = { +const siteAssemblerFlow: Flow = { name: ASSEMBLER_FLOW, useSteps() { + const { setSelectedDesign } = useDispatch( ONBOARD_STORE ); + const selectedTheme = useQuery().get( 'theme' ); + + useEffect( () => { + if ( selectedTheme === 'blank-canvas-3' && this.name === ASSEMBLER_FLOW ) { + // User has selected blank-canvas-3 theme from theme showcase and enter assembler flow + setSelectedDesign( BLANK_CANVAS_DESIGN as Design ); + } + }, [] ); + return [ { slug: 'patternAssembler', component: PatternAssembler }, { slug: 'processing', component: Processing }, @@ -50,4 +63,4 @@ const assembler: Flow = { }, }; -export default assembler; +export default siteAssemblerFlow; diff --git a/client/signup/config/flows.js b/client/signup/config/flows.js index 84ebc75ea9865..5d54b3e105b52 100644 --- a/client/signup/config/flows.js +++ b/client/signup/config/flows.js @@ -112,17 +112,20 @@ function getChecklistThemeDestination( { siteSlug, themeParameter } ) { const canGoToAssemblerFlow = isDesktop(); if ( - canGoToAssemblerFlow && themeParameter === 'blank-canvas-3' && config.isEnabled( 'pattern-assembler/logged-out-showcase' ) ) { - return addQueryArgs( - { - theme: themeParameter, - siteSlug: siteSlug, - }, - `/setup/assembler` - ); + if ( canGoToAssemblerFlow ) { + return addQueryArgs( + { + theme: themeParameter, + siteSlug: siteSlug, + }, + `/setup/site-assembler` + ); + } + + return `/site-editor/${ siteSlug }`; } return `/home/${ siteSlug }`; } diff --git a/packages/onboarding/src/utils/flows.ts b/packages/onboarding/src/utils/flows.ts index 428260893b5dc..90877d1626e41 100644 --- a/packages/onboarding/src/utils/flows.ts +++ b/packages/onboarding/src/utils/flows.ts @@ -13,7 +13,7 @@ export const MIGRATION_FLOW = 'import-focused'; export const COPY_SITE_FLOW = 'copy-site'; export const BUILD_FLOW = 'build'; export const WRITE_FLOW = 'write'; -export const ASSEMBLER_FLOW = 'assembler'; +export const ASSEMBLER_FLOW = 'site-assembler'; export const SITE_SETUP_FLOW = 'site-setup'; export const isLinkInBioFlow = ( flowName: string | null ) => { From b1c2a93aac9b9a42edee27ed4781af9a637b605f Mon Sep 17 00:00:00 2001 From: bangank36 Date: Mon, 30 Jan 2023 12:57:25 +0700 Subject: [PATCH 4/7] Fix import order --- .../stepper/declarative-flow/site-assembler-flow.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/client/landing/stepper/declarative-flow/site-assembler-flow.ts b/client/landing/stepper/declarative-flow/site-assembler-flow.ts index a407cc1c6bb83..b2ebbd49e9063 100644 --- a/client/landing/stepper/declarative-flow/site-assembler-flow.ts +++ b/client/landing/stepper/declarative-flow/site-assembler-flow.ts @@ -1,14 +1,16 @@ import { useFlowProgress, ASSEMBLER_FLOW } from '@automattic/onboarding'; -import { useEffect } from 'react'; import { useDispatch } from '@wordpress/data'; -import { useSiteSlug } from '../hooks/use-site-slug'; +import { useEffect } from 'react'; import { useQuery } from '../hooks/use-query'; +import { useSiteSlug } from '../hooks/use-site-slug'; import { ONBOARD_STORE } from '../stores'; import { recordSubmitStep } from './internals/analytics/record-submit-step'; -import type { Design } from '@automattic/design-picker/src/types'; -import PatternAssembler, { BLANK_CANVAS_DESIGN } from './internals/steps-repository/pattern-assembler'; +import PatternAssembler, { + BLANK_CANVAS_DESIGN, +} from './internals/steps-repository/pattern-assembler'; import Processing from './internals/steps-repository/processing-step'; import { Flow, ProvidedDependencies } from './internals/types'; +import type { Design } from '@automattic/design-picker/src/types'; const siteAssemblerFlow: Flow = { name: ASSEMBLER_FLOW, From d615cd875a59332eddc47814a87516332675fb85 Mon Sep 17 00:00:00 2001 From: bangank36 Date: Mon, 30 Jan 2023 14:29:18 +0700 Subject: [PATCH 5/7] - Update constants name --- .../steps-repository/pattern-assembler/index.tsx | 7 +++---- .../stepper/declarative-flow/site-assembler-flow.ts | 11 +++++------ packages/onboarding/src/utils/flows.ts | 2 +- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx index f24746ea72dec..8c298b0e06f08 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx @@ -1,5 +1,5 @@ import { isEnabled } from '@automattic/calypso-config'; -import { StepContainer, SITE_SETUP_FLOW, ASSEMBLER_FLOW } from '@automattic/onboarding'; +import { StepContainer, SITE_SETUP_FLOW, SITE_ASSEMBLER_FLOW } from '@automattic/onboarding'; import { useDispatch, useSelect } from '@wordpress/data'; import { useTranslate } from 'i18n-calypso'; import { useState, useRef, useEffect } from 'react'; @@ -13,7 +13,7 @@ import { useSiteIdParam } from '../../../../hooks/use-site-id-param'; import { useSiteSlugParam } from '../../../../hooks/use-site-slug-param'; import { SITE_STORE, ONBOARD_STORE } from '../../../../stores'; import { recordSelectedDesign } from '../../analytics/record-design'; -import { SITE_TAGLINE, BLANK_CANVAS_DESIGN } from './constants'; +import { SITE_TAGLINE } from './constants'; import PatternLayout from './pattern-layout'; import PatternSelectorLoader from './pattern-selector-loader'; import { useAllPatterns } from './patterns-data'; @@ -371,7 +371,7 @@ const PatternAssembler: Step = ( { navigation, flow } ) => { { }; export default PatternAssembler; -export { BLANK_CANVAS_DESIGN }; diff --git a/client/landing/stepper/declarative-flow/site-assembler-flow.ts b/client/landing/stepper/declarative-flow/site-assembler-flow.ts index b2ebbd49e9063..47fd49e1cab1f 100644 --- a/client/landing/stepper/declarative-flow/site-assembler-flow.ts +++ b/client/landing/stepper/declarative-flow/site-assembler-flow.ts @@ -1,25 +1,24 @@ -import { useFlowProgress, ASSEMBLER_FLOW } from '@automattic/onboarding'; +import { useFlowProgress, SITE_ASSEMBLER_FLOW } from '@automattic/onboarding'; import { useDispatch } from '@wordpress/data'; import { useEffect } from 'react'; import { useQuery } from '../hooks/use-query'; import { useSiteSlug } from '../hooks/use-site-slug'; import { ONBOARD_STORE } from '../stores'; import { recordSubmitStep } from './internals/analytics/record-submit-step'; -import PatternAssembler, { - BLANK_CANVAS_DESIGN, -} from './internals/steps-repository/pattern-assembler'; +import PatternAssembler from './internals/steps-repository/pattern-assembler'; +import { BLANK_CANVAS_DESIGN } from './internals/steps-repository/pattern-assembler/constants'; import Processing from './internals/steps-repository/processing-step'; import { Flow, ProvidedDependencies } from './internals/types'; import type { Design } from '@automattic/design-picker/src/types'; const siteAssemblerFlow: Flow = { - name: ASSEMBLER_FLOW, + name: SITE_ASSEMBLER_FLOW, useSteps() { const { setSelectedDesign } = useDispatch( ONBOARD_STORE ); const selectedTheme = useQuery().get( 'theme' ); useEffect( () => { - if ( selectedTheme === 'blank-canvas-3' && this.name === ASSEMBLER_FLOW ) { + if ( selectedTheme === 'blank-canvas-3' && this.name === SITE_ASSEMBLER_FLOW ) { // User has selected blank-canvas-3 theme from theme showcase and enter assembler flow setSelectedDesign( BLANK_CANVAS_DESIGN as Design ); } diff --git a/packages/onboarding/src/utils/flows.ts b/packages/onboarding/src/utils/flows.ts index 90877d1626e41..ced8a75a425ee 100644 --- a/packages/onboarding/src/utils/flows.ts +++ b/packages/onboarding/src/utils/flows.ts @@ -13,7 +13,7 @@ export const MIGRATION_FLOW = 'import-focused'; export const COPY_SITE_FLOW = 'copy-site'; export const BUILD_FLOW = 'build'; export const WRITE_FLOW = 'write'; -export const ASSEMBLER_FLOW = 'site-assembler'; +export const SITE_ASSEMBLER_FLOW = 'site-assembler'; export const SITE_SETUP_FLOW = 'site-setup'; export const isLinkInBioFlow = ( flowName: string | null ) => { From 2ba5ba115ebbca7c9ada24fa28764a83b1917b32 Mon Sep 17 00:00:00 2001 From: bangank36 Date: Mon, 30 Jan 2023 15:35:26 +0700 Subject: [PATCH 6/7] - Update the wpcom_signup_completed_flow --- client/landing/stepper/declarative-flow/site-assembler-flow.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/client/landing/stepper/declarative-flow/site-assembler-flow.ts b/client/landing/stepper/declarative-flow/site-assembler-flow.ts index 47fd49e1cab1f..f2225a1448fa5 100644 --- a/client/landing/stepper/declarative-flow/site-assembler-flow.ts +++ b/client/landing/stepper/declarative-flow/site-assembler-flow.ts @@ -52,6 +52,7 @@ const siteAssemblerFlow: Flow = { switch ( _currentStep ) { case 'processing': + window.sessionStorage.setItem( 'wpcom_signup_completed_flow', 'pattern_assembler' ); return exitFlow( `/site-editor/${ siteSlug }` ); case 'patternAssembler': { From 383121d590209cd8a5a1ec25663975ca3d00ec89 Mon Sep 17 00:00:00 2001 From: bangank36 Date: Mon, 30 Jan 2023 19:56:07 +0700 Subject: [PATCH 7/7] - Use constant for 'blank-canvas-3' string --- client/landing/stepper/declarative-flow/site-assembler-flow.ts | 2 +- client/signup/config/flows.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/client/landing/stepper/declarative-flow/site-assembler-flow.ts b/client/landing/stepper/declarative-flow/site-assembler-flow.ts index f2225a1448fa5..c87ecee3589d7 100644 --- a/client/landing/stepper/declarative-flow/site-assembler-flow.ts +++ b/client/landing/stepper/declarative-flow/site-assembler-flow.ts @@ -18,7 +18,7 @@ const siteAssemblerFlow: Flow = { const selectedTheme = useQuery().get( 'theme' ); useEffect( () => { - if ( selectedTheme === 'blank-canvas-3' && this.name === SITE_ASSEMBLER_FLOW ) { + if ( selectedTheme === BLANK_CANVAS_DESIGN.slug && this.name === SITE_ASSEMBLER_FLOW ) { // User has selected blank-canvas-3 theme from theme showcase and enter assembler flow setSelectedDesign( BLANK_CANVAS_DESIGN as Design ); } diff --git a/client/signup/config/flows.js b/client/signup/config/flows.js index 5d54b3e105b52..8f8082e6633e9 100644 --- a/client/signup/config/flows.js +++ b/client/signup/config/flows.js @@ -1,6 +1,7 @@ import config from '@automattic/calypso-config'; import { isDesktop } from '@automattic/viewport'; import { get, includes, reject } from 'lodash'; +import { BLANK_CANVAS_DESIGN } from 'calypso/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants'; import detectHistoryNavigation from 'calypso/lib/detect-history-navigation'; import { getQueryArgs } from 'calypso/lib/query-args'; import { addQueryArgs } from 'calypso/lib/url'; @@ -112,7 +113,7 @@ function getChecklistThemeDestination( { siteSlug, themeParameter } ) { const canGoToAssemblerFlow = isDesktop(); if ( - themeParameter === 'blank-canvas-3' && + themeParameter === BLANK_CANVAS_DESIGN.slug && config.isEnabled( 'pattern-assembler/logged-out-showcase' ) ) { if ( canGoToAssemblerFlow ) {