Update/gutenboarding hide next button in intent gathering step

client/landing/gutenboarding/components/header/index.tsx

@@ -26,9 +26,10 @@ interface Props {
 }
 
 const Header: FunctionComponent< Props > = ( { next, prev } ) => {
-	const { domain, siteTitle, siteVertical } = useSelect( select =>
+	const { domain, selectedDesign, siteTitle, siteVertical } = useSelect( select =>
 		select( ONBOARD_STORE ).getState()
 	);
+	const hasSelectedDesign = !! selectedDesign;
 	const { setDomain } = useDispatch( ONBOARD_STORE );
 
 	const [ domainSearch ] = useDebounce(
@@ -103,9 +104,11 @@ const Header: FunctionComponent< Props > = ( { next, prev } ) => {
 			</div>
 			<div className="gutenboarding__header-section">
 				<div className="gutenboarding__header-group">
-					<Link to={ next } className="gutenboarding__header-next-button" isPrimary isLarge>
-						{ NO__( 'Next' ) }
-					</Link>
+					{ next && hasSelectedDesign && (
+						<Link to={ next } className="gutenboarding__header-next-button" isPrimary isLarge>
+							{ NO__( 'Create my site' ) }
+						</Link>
+					) }
 				</div>
 			</div>
 		</div>

client/landing/gutenboarding/gutenboard.tsx

@@ -11,7 +11,6 @@ import {
 } from '@wordpress/block-editor';
 import { Popover, DropZoneProvider } from '@wordpress/components';
 import { createBlock, registerBlockType } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 import '@wordpress/format-library';
 import React, { useRef } from 'react';
 // Uncomment and remove the redundant sass import from `./style.css` when a release after @wordpress/[email protected] is published.
@@ -24,30 +23,22 @@ import { useRouteMatch } from 'react-router-dom';
  */
 import Header from './components/header';
 import { name, settings } from './onboarding-block';
-import { STORE_KEY } from './stores/onboard';
 import { routes, Step } from './steps';
 import './style.scss';
 
 registerBlockType( name, settings );
 
 export function Gutenboard() {
-	const { siteVertical } = useSelect( select => select( STORE_KEY ).getState() );
-
 	// @TODO: This is currently needed in addition to the routing (inside the Onboarding Block)
 	// for the 'Back' and 'Next' buttons in the header. If we remove those (and move navigation
 	// entirely into the block), we'll be able to remove this code.
 	const r = useRouteMatch( routes );
 	let next: undefined | string;
 	let prev: undefined | string;
 	switch ( r?.url ) {
-		case Step.IntentGathering:
-			if ( siteVertical ) {
-				next = Step.DesignSelection;
-			}
-			break;
-
 		case Step.DesignSelection:
 			prev = Step.IntentGathering;
+			next = Step.CreateSite;
 			break;
 	}
 

client/landing/gutenboarding/onboarding-block/design-selector/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ as NO__ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import React, { useLayoutEffect, useRef, useState, FunctionComponent, MouseEvent } from 'react';
 import classnames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
@@ -14,6 +14,7 @@ import { Dialog, DialogBackdrop } from 'reakit/Dialog';
 /**
  * Internal dependencies
  */
+import { STORE_KEY as ONBOARD_STORE } from '../../stores/onboard';
 import DesignCard from './design-card';
 
 import './style.scss';
@@ -24,9 +25,10 @@ type Template = VerticalsTemplates.Template;
 const VERTICALS_TEMPLATES_STORE = VerticalsTemplates.register();
 
 const DesignSelector: FunctionComponent = () => {
-	const siteVertical = useSelect(
-		select => select( 'automattic/onboard' ).getState().siteVertical
+	const { selectedDesign, siteVertical } = useSelect( select =>
+		select( ONBOARD_STORE ).getState()
 	);
+	const { setSelectedDesign } = useDispatch( ONBOARD_STORE );
 
 	// @FIXME: If we don't have an ID (because we're dealing with a user-supplied vertical that
 	// WordPress.com doesn't know about), fall back to the 'm1' (Business) vertical. This is the
@@ -45,8 +47,6 @@ const DesignSelector: FunctionComponent = () => {
 		( { category } ) => category === 'home'
 	);
 
-	const [ selectedDesign, setSelectedDesign ] = useState< Template | undefined >();
-
 	const resetState = () => {
 		setSelectedDesign( undefined );
 	};
@@ -113,9 +113,7 @@ const DesignSelector: FunctionComponent = () => {
 								onClick={ ( e: MouseEvent< HTMLDivElement > ) => {
 									window.scrollTo( 0, 0 );
 									setCp( e.currentTarget.offsetTop );
-									setSelectedDesign( currentTemplate =>
-										currentTemplate?.slug === design?.slug ? undefined : design
-									);
+									setSelectedDesign( selectedDesign?.slug === design.slug ? undefined : design );
 								} }
 							/>
 						) ) }

client/landing/gutenboarding/steps.ts

@@ -6,6 +6,7 @@ import { map } from 'lodash';
 export enum Step {
 	IntentGathering = '/',
 	DesignSelection = '/design',
+	CreateSite = '/create-site',
 }
 
 export const routes = `(${ map( Step, ( route: string ) => route ).join( '|' ) })`;

client/landing/gutenboarding/stores/onboard/actions.ts

@@ -17,6 +17,13 @@ export const setDomain = (
 	domain,
 } );
 
+export const setSelectedDesign = (
+	selectedDesign: import('@automattic/data-stores').VerticalsTemplates.Template | undefined
+) => ( {
+	type: ActionType.SET_SELECTED_DESIGN as const,
+	selectedDesign,
+} );
+
 export const setSiteVertical = ( siteVertical: SiteVertical ) => ( {
 	type: ActionType.SET_SITE_VERTICAL as const,
 	siteVertical,

client/landing/gutenboarding/stores/onboard/reducer.ts

@@ -20,6 +20,16 @@ const domain: Reducer<
 	return state;
 };
 
+const selectedDesign: Reducer<
+	import('@automattic/data-stores').VerticalsTemplates.Template | undefined,
+	ReturnType< typeof Actions[ 'setSelectedDesign' ] >
+> = ( state = undefined, action ) => {
+	if ( action.type === ActionType.SET_SELECTED_DESIGN ) {
+		return action.selectedDesign;
+	}
+	return state;
+};
+
 const siteTitle: Reducer< string, ReturnType< typeof Actions[ 'setSiteTitle' ] > > = (
 	state = '',
 	action
@@ -57,7 +67,7 @@ const pageLayouts: Reducer<
 	return state;
 };
 
-const reducer = combineReducers( { domain, siteTitle, siteVertical, pageLayouts } );
+const reducer = combineReducers( { domain, selectedDesign, siteTitle, siteVertical, pageLayouts } );
 
 export type State = ReturnType< typeof reducer >;
 

client/landing/gutenboarding/stores/onboard/types.ts

@@ -1,6 +1,7 @@
 enum ActionType {
 	RESET_SITE_TYPE = 'RESET_SITE_TYPE',
 	SET_DOMAIN = 'SET_DOMAIN',
+	SET_SELECTED_DESIGN = 'SET_SELECTED_DESIGN',
 	SET_SITE_TITLE = 'SET_SITE_TITLE',
 	SET_SITE_TYPE = 'SET_SITE_TYPE',
 	SET_SITE_VERTICAL = 'SET_SITE_VERTICAL',