Videomaker Onboarding: Add theme selection step

client/landing/stepper/declarative-flow/internals/steps-repository/index.ts

@@ -35,6 +35,7 @@ export { default as difmStartingPoint } from './difm-starting-point';
 export { default as letsGetStarted } from './lets-get-started';
 export { default as intro } from './intro';
 export { default as linkInBioSetup } from './link-in-bio-setup';
+export { default as videomakerSetup } from './videomaker-setup';
 export { default as completingPurchase } from './completing-purchase';
 export { default as chooseADomain } from './choose-a-domain';
 export { default as chooseAPlan } from './choose-a-plan';
@@ -89,4 +90,5 @@ export type StepPath =
 	| 'subscribers'
 	| 'promote'
 	| 'getCurrentThemeSoftwareSets'
-	| 'chooseAPlan';
+	| 'chooseAPlan'
+	| 'videomakerSetup';

client/landing/stepper/declarative-flow/internals/steps-repository/videomaker-setup/index.tsx

@@ -0,0 +1,81 @@
+/* eslint-disable wpcalypso/jsx-classname-namespace */
+
+import { StepContainer } from '@automattic/onboarding';
+import { useDispatch } from '@wordpress/data';
+import { useI18n } from '@wordpress/react-i18n';
+import React from 'react';
+import FormattedHeader from 'calypso/components/formatted-header';
+import { ONBOARD_STORE } from 'calypso/landing/stepper/stores';
+import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
+import type { Step } from 'calypso/landing/stepper/declarative-flow/internals/types';
+
+import './styles.scss';
+
+const VideomakerSetup: Step = function VideomakerSetup( { navigation } ) {
+	const { submit } = navigation;
+	const { __ } = useI18n();
+	const { setSelectedDesign } = useDispatch( ONBOARD_STORE );
+
+	const onSelectTheme = ( slug: string ) => {
+		setSelectedDesign( {
+			slug: 'videomaker',
+			theme: slug,
+			is_premium: true,
+			title: 'Videomaker',
+			categories: [],
+			features: [],
+			template: '',
+		} );
+
+		submit?.();
+	};
+
+	const stepContent = (
+		<div className="videomaker-setup__step-content">
+			<div className="videomaker-setup__theme-picker">
+				<button
+					className="videomaker-setup__dark-button"
+					onClick={ () => onSelectTheme( 'premium/videomaker' ) }
+				>
+					<img
+						src="https://videopress2.files.wordpress.com/2022/10/videomaker-theme-dark.jpg"
+						alt={ __( 'Videomaker dark' ) }
+					/>
+				</button>
+				<button
+					className="videomaker-setup__light-button"
+					onClick={ () => onSelectTheme( 'premium/videomaker-white' ) }
+				>
+					<img
+						src="https://videopress2.files.wordpress.com/2022/10/videomaker-theme-light.jpg"
+						alt={ __( 'Videomaker white' ) }
+					/>
+				</button>
+			</div>
+		</div>
+	);
+
+	return (
+		<StepContainer
+			stepName={ 'videomaker-setup' }
+			isWideLayout={ true }
+			hideBack={ true }
+			flowName={ 'videopress' }
+			formattedHeader={
+				<FormattedHeader
+					id={ 'videomaker-setup-header' }
+					headerText={ __( 'Choose a design' ) }
+					subHeaderText={ __(
+						'This is what your homepage will look like. You’ll be able to customize it further at any time.'
+					) }
+					align={ 'center' }
+				/>
+			}
+			stepContent={ stepContent }
+			recordTracksEvent={ recordTracksEvent }
+			showVideoPressPowered
+		/>
+	);
+};
+
+export default VideomakerSetup;

client/landing/stepper/declarative-flow/internals/steps-repository/videomaker-setup/styles.scss

@@ -0,0 +1,112 @@
+@import '../../videopress.scss';
+
+$font-family: 'SF Pro Text', $sans;
+
+.videomaker-setup {
+	form {
+		padding: 0 20px;
+	}
+
+	.videomaker-setup__step-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.videomaker-setup__theme-picker {
+		display: flex;
+		flex-direction: column;
+		margin-block-end: 36px;
+		align-items: center;
+
+		.videomaker-setup__light-button img {
+			background-color: #FFFFFF;
+		}
+
+		.videomaker-setup__dark-button img {
+			background-color: #000000;
+		}
+
+		button {
+			background-color: $videopress-theme-border-color;
+			border: 10px solid $videopress-theme-border-color;
+			border-radius: 8px;
+			padding: 0;
+			margin: 0;
+			transition: all 0.2s ease-in-out;
+			transform: scale( 1.0 );
+			z-index: 0;
+			cursor: pointer;
+			max-width: 76%;
+
+			img {
+				display: block;
+				width: 100%;
+				height: auto;
+				border-radius: 6px;
+				flex-grow: 1;
+				object-fit: cover;
+			}
+
+			&:first-of-type {
+				margin-bottom: 30px;
+			}
+
+			&:hover {
+				transform: scale( 1.05 );
+				z-index: 1;
+				background-color: $videopress-theme-yellow;
+				border: 8px solid $videopress-theme-yellow;
+			}
+		}
+
+		@include break-medium {
+			flex-direction: row;
+			padding: 0 16px;
+			min-height: 312px;
+
+			button {
+
+				&:first-of-type {
+					margin-bottom: 0px;
+					margin-inline-end: 30px;
+				}
+			}
+
+			img {
+				max-width: 400px;
+			}
+		}
+
+		@include break-large {
+			img {
+				max-width: 500px;
+			}
+		}
+	}
+
+	.step-container__content {
+		display: flex;
+		justify-content: center;
+		margin-bottom: 30px;
+	}
+
+	.step-container__header {
+		margin-top: 100px;
+		margin-bottom: 36px;
+		padding: 0 24px;
+
+		h1.formatted-header__title {
+			font-size: $font-title-medium;
+
+			@include break-medium {
+				font-size: $font-headline-medium;
+			}
+		}
+	}
+
+	.videomaker-setup-form__submit {
+		border: none;
+		min-width: 240px;
+	}
+}

client/landing/stepper/declarative-flow/internals/videopress.scss

@@ -5,6 +5,7 @@ $videopress-theme-background-color: #000000;
 $videopress-theme-grey: #a7aaad;
 $videopress-theme-yellow: #ffe61c;
 $videopress-theme-header-subtitle-text-color: #a7aaad;
+$videopress-theme-border-color: #252726;
 
 body.is-videopress-stepper {
 	background-color: #010101;

client/landing/stepper/declarative-flow/videopress.ts

@@ -19,6 +19,7 @@ export const videopress: Flow = {
 		return [
 			'intro',
 			'options',
+			'videomakerSetup',
 			'chooseADomain',
 			'chooseAPlan',
 			'completingPurchase',
@@ -47,7 +48,7 @@ export const videopress: Flow = {
 		}
 
 		const name = this.name;
-		const { setDomain, setSiteDescription, setSiteTitle, setStepProgress } =
+		const { setDomain, setSelectedDesign, setSiteDescription, setSiteTitle, setStepProgress } =
 			useDispatch( ONBOARD_STORE );
 		const flowProgress = useFlowProgress( { stepName: _currentStep, flowName: name } );
 		setStepProgress( flowProgress );
@@ -59,6 +60,7 @@ export const videopress: Flow = {
 			setSiteTitle( '' );
 			setSiteDescription( '' );
 			setDomain( undefined );
+			setSelectedDesign( undefined );
 		};
 
 		const stepValidateUserIsLoggedIn = () => {
@@ -109,18 +111,24 @@ export const videopress: Flow = {
 					const { siteTitle, tagline } = providedDependencies;
 					setSiteTitle( siteTitle as string );
 					setSiteDescription( tagline as string );
+					return navigate( 'videomakerSetup' );
+				}
+
+				case 'videomakerSetup': {
 					return navigate( 'chooseADomain' );
 				}
 
-				case 'chooseADomain':
+				case 'chooseADomain': {
 					return navigate( 'chooseAPlan' );
+				}
 
 				case 'chooseAPlan': {
 					return navigate( 'processing' );
 				}
 
-				case 'completingPurchase':
+				case 'completingPurchase': {
 					return navigate( 'launchpad' );
+				}
 
 				case 'launchpad': {
 					clearOnboardingSiteOptions();

packages/data-stores/src/onboard/actions.ts

@@ -54,7 +54,8 @@ export function* createVideoPressSite( {
 
 	const siteUrl = domain?.domain_name || siteTitle || username;
 	const lang_id = ( getLanguage( languageSlug ) as Language )?.value;
-	const defaultTheme = 'premium/videomaker';
+	const defaultTheme = selectedDesign?.theme || 'premium/videomaker';
+	const siteVertical = 'premium/videomaker' === defaultTheme ? 'videomaker' : 'videomaker-white';
 	const blogTitle = siteTitle.trim() === '' ? __( 'Site Title' ) : siteTitle;
 
 	const params: CreateSiteParams = {
@@ -76,6 +77,7 @@ export function* createVideoPressSite( {
 				font_headings: selectedFonts.headings,
 			} ),
 			use_patterns: true,
+			site_vertical_name: siteVertical,
 			selected_features: selectedFeatures,
 			wpcom_public_coming_soon: 1,
 			...( selectedDesign && { is_blank_canvas: isBlankCanvasDesign( selectedDesign ) } ),

packages/onboarding/src/flow-progress/use-flow-progress.ts

@@ -26,10 +26,11 @@ const flows: Record< string, { [ step: string ]: number } > = {
 		intro: 0,
 		user: 1,
 		options: 2,
-		chooseADomain: 3,
-		chooseAPlan: 4,
-		processing: 5,
-		launchpad: 6,
+		videomakerSetup: 3,
+		chooseADomain: 4,
+		chooseAPlan: 5,
+		processing: 6,
+		launchpad: 7,
 	},
 };