Sensei Tailored Flow

client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/launchpad-site-preview.tsx

@@ -1,6 +1,6 @@
 import { FEATURE_VIDEO_UPLOADS, planHasFeature } from '@automattic/calypso-products';
 import { DEVICE_TYPES } from '@automattic/components';
-import { FREE_FLOW, NEWSLETTER_FLOW, BUILD_FLOW } from '@automattic/onboarding';
+import { FREE_FLOW, NEWSLETTER_FLOW, BUILD_FLOW, SENSEI_FLOW } from '@automattic/onboarding';
 import { addQueryArgs } from '@wordpress/url';
 import { useTranslate } from 'i18n-calypso';
 import WebPreview from 'calypso/components/web-preview/component';
@@ -22,6 +22,7 @@ const LaunchpadSitePreview = ( {
 	const { globalStylesInUse, shouldLimitGlobalStyles } = usePremiumGlobalStyles();
 	const site = useSite();
 	const isInVideoPressFlow = isVideoPressFlow( flow );
+	const isSenseiFlow = SENSEI_FLOW === flow;
 
 	let previewUrl = siteSlug ? 'https://' + siteSlug : null;
 	const devicesToShow: Device[] = [ DEVICE_TYPES.COMPUTER, DEVICE_TYPES.PHONE ];
@@ -30,7 +31,7 @@ const LaunchpadSitePreview = ( {
 		components: { strong: <strong /> },
 	} );
 
-	if ( isInVideoPressFlow ) {
+	if ( isInVideoPressFlow || isSenseiFlow ) {
 		const windowWidth = window.innerWidth;
 		defaultDevice = windowWidth >= 1000 ? DEVICE_TYPES.COMPUTER : DEVICE_TYPES.PHONE;
 		const productSlug = site?.plan?.product_slug;

client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/task-helper.ts

@@ -275,6 +275,23 @@ export function getEnhancedTasks(
 						},
 					};
 					break;
+				case 'sensei_setup':
+					taskData = {
+						title: translate( 'Set up Course Site' ),
+						completed: true,
+					};
+					break;
+				case 'sensei_publish_first_course':
+					taskData = {
+						title: translate( 'Publish your first Course' ),
+						completed:
+							site?.options?.launchpad_checklist_tasks_statuses?.publish_first_course || false,
+						actionDispatch: () => {
+							recordTaskClickTracksEvent( flow, task.completed, task.id );
+							window.location.assign( `${ site?.URL }/wp-admin/post-new.php?post_type=course` );
+						},
+					};
+					break;
 			}
 			enhancedTaskList.push( { ...task, ...taskData } );
 		} );

client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/tasks.tsx

@@ -68,6 +68,18 @@ export const tasks: Task[] = [
 		taskType: 'blog',
 		disabled: true,
 	},
+	{
+		id: 'sensei_setup',
+		completed: true,
+		taskType: 'blog',
+		disabled: true,
+	},
+	{
+		id: 'sensei_publish_first_course',
+		completed: false,
+		taskType: 'blog',
+		disabled: false,
+	},
 	{
 		id: 'setup_free',
 		completed: true,
@@ -121,4 +133,5 @@ export const launchpadFlowTasks: LaunchpadFlowTaskList = {
 		'site_launched',
 	],
 	videopress: [ 'videopress_setup', 'plan_selected', 'videopress_upload', 'videopress_launched' ],
+	sensei: [ 'sensei_setup', 'plan_selected', 'sensei_publish_first_course' ],
 };

client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/translations.tsx

@@ -3,6 +3,7 @@ import {
 	LINK_IN_BIO_TLD_FLOW,
 	NEWSLETTER_FLOW,
 	VIDEOPRESS_FLOW,
+	SENSEI_FLOW,
 	FREE_FLOW,
 } from '@automattic/onboarding';
 import { translate } from 'i18n-calypso';
@@ -43,6 +44,11 @@ export function getLaunchpadTranslations( flow: string | null ): TranslatedLaunc
 			translatedStrings.title = translate( 'Your site is almost ready!' );
 			translatedStrings.launchTitle = translate( 'Your site is almost ready!' );
 			break;
+		case SENSEI_FLOW:
+			translatedStrings.flowName = translate( 'Sensei' );
+			translatedStrings.title = translate( 'Your Course Site is ready to launch!' );
+			translatedStrings.launchTitle = translate( 'Your Course Site is ready to launch!' );
+			break;
 	}
 
 	return translatedStrings;

client/landing/stepper/declarative-flow/internals/steps-repository/sensei-domain/index.tsx

@@ -0,0 +1,88 @@
+/* eslint-disable wpcalypso/jsx-classname-namespace */
+import { SenseiStepContainer } from '@automattic/onboarding';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useI18n } from '@wordpress/react-i18n';
+import RegisterDomainStep from 'calypso/components/domains/register-domain-step';
+import ReskinSideExplainer from 'calypso/components/domains/reskin-side-explainer';
+import FormattedHeader from 'calypso/components/formatted-header';
+import { ONBOARD_STORE, PRODUCTS_LIST_STORE } from 'calypso/landing/stepper/stores';
+import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
+import CalypsoShoppingCartProvider from 'calypso/my-sites/checkout/calypso-shopping-cart-provider';
+import type { Step } from '../../types';
+
+import './style.scss';
+
+const SenseiDomain: Step = ( { navigation } ) => {
+	const { submit } = navigation;
+	const { __ } = useI18n();
+	const [ siteTitle, domain, productsList ] = useSelect( ( select ) => {
+		return [
+			select( ONBOARD_STORE ).getSelectedSiteTitle(),
+			select( ONBOARD_STORE ).getSelectedDomain(),
+			select( PRODUCTS_LIST_STORE ).getProductsList(),
+		];
+	} );
+	const { setDomain } = useDispatch( ONBOARD_STORE );
+
+	const onSkip = () => {
+		setDomain( domain );
+		submit?.( { domain: domain } );
+	};
+
+	const onAddDomain = ( selectedDomain: typeof domain ) => {
+		setDomain( selectedDomain );
+		submit?.( { domain: selectedDomain } );
+	};
+
+	const domainSuggestion = domain?.domain_name ?? siteTitle;
+
+	return (
+		<SenseiStepContainer stepName="senseiDomain" recordTracksEvent={ recordTracksEvent }>
+			<CalypsoShoppingCartProvider>
+				<FormattedHeader
+					id="choose-a-domain-header"
+					headerText="Choose a domain"
+					subHeaderText={
+						<>
+							{ __( 'Make your course site shine with a custom domain. Not sure yet ?' ) }
+							<button
+								className="button navigation-link step-container__navigation-link has-underline is-borderless"
+								onClick={ onSkip }
+							>
+								{ __( 'Decide later.' ) }
+							</button>
+						</>
+					}
+					align="center"
+				/>
+				<div className="container domains__step-content domains__step-content-domain-step">
+					<RegisterDomainStep
+						vendor="sensei"
+						key="domainForm"
+						suggestion={ domainSuggestion }
+						domainsWithPlansOnly={ true }
+						isSignupStep={ true }
+						includeWordPressDotCom
+						onAddDomain={ onAddDomain }
+						onSkip={ onSkip }
+						products={ productsList }
+						useProvidedProductsList
+						align="left"
+						isWideLayout={ true }
+						basePath=""
+					/>
+					<div className="domains__domain-side-content-container">
+						<div className="domains__domain-side-content domains__free-domain">
+							<ReskinSideExplainer onClick={ onSkip } type="free-domain-explainer" />
+						</div>
+						<div className="domains__domain-side-content">
+							<ReskinSideExplainer onClick={ onSkip } type="use-your-domain" />
+						</div>
+					</div>
+				</div>
+			</CalypsoShoppingCartProvider>
+		</SenseiStepContainer>
+	);
+};
+
+export default SenseiDomain;