Adding new assembler flow

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;

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;
 

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',
+};

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,14 +36,15 @@ 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();
 	const siteSlug = useSiteSlugParam();
 	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 } ) => {
 			<DocumentHead title={ translate( 'Design your home' ) } />
 			<StepContainer
 				stepName="pattern-assembler"
-				hideBack={ showPatternSelectorType !== null }
+				hideBack={ showPatternSelectorType !== null || flow === ASSEMBLER_FLOW }
 				goBack={ onBack }
 				goNext={ goNext }
 				isHorizontalLayout={ false }

client/landing/stepper/declarative-flow/registered-flows.ts

@@ -47,6 +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' ),
+
 	'free-post-setup': () =>
 		import( /* webpackChunkName: "free-post-setup-flow" */ '../declarative-flow/free-post-setup' ),
 

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,11 +109,20 @@ function getThankYouNoSiteDestination() {
 }
 
 function getChecklistThemeDestination( { siteSlug, themeParameter } ) {
+	const canGoToAssemblerFlow = isDesktop();
+
 	if (
+		canGoToAssemblerFlow &&
 		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 }`;
 }

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(