Sensei Tailored Flow (#71406)

Co-authored-by: Eduardo Villuendas <eduardo.villuendas@automattic.com>
Co-authored-by: Panos Kountanis <panosktn@gmail.com>
Co-authored-by: John Caruso <johncaruso@gmail.com>
Co-authored-by: thedebian <thedebian@users.noreply.github.com>
Co-authored-by: Mikey Arce <mikeyarce@gmail.com>
Co-authored-by: Omar Alshaker <omar@omaralshaker.com>
Co-authored-by: Pierre <thedebian@users.noreply.github.com>
Co-authored-by: Dan Roundhill <dan@automattic.com>
Co-authored-by: gkaragia <53191348+gkaragia@users.noreply.github.com>
Co-authored-by: Peter Kiss <peter@yscik.com>
Co-authored-by: Giannis Karagiannis <giannis.karagiannis@automattic.com>

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

@@ -0,0 +1,6 @@
+$sensei-mobile-layout-width: 1200px;
+$sensei-color: #43af99;
+
+.sensei .progress-bar__progress {
+	background-color: $sensei-color;
+}

client/landing/stepper/declarative-flow/internals/steps-repository/components/sensei-step-container/components.ts

@@ -0,0 +1,49 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+	position: relative;
+	height: 100vh;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: center;
+	padding-top: 10px;
+	overflow-y: auto;
+	box-sizing: border-box;
+
+	* {
+		box-sizing: border-box;
+	}
+`;
+
+export const TitleContainer = styled.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: flex-start;
+	margin: 32px auto 0 24px;
+	z-index: 1000;
+`;
+
+export const Title = styled.h1`
+	margin-left: 8px;
+	font-size: 18px;
+	line-height: 24px;
+	font-family: Recoleta, sans-serif;
+`;
+
+export const Footer = styled.div`
+	margin-top: auto;
+	padding: 56px 0;
+`;
+
+export const FooterText = styled.p`
+	font-size: 13px;
+	line-height: 20px;
+	color: #3c434a;
+	text-align: center;
+	&:not( :last-of-type ) {
+		margin-bottom: 6px;
+	}
+`;

client/landing/stepper/declarative-flow/internals/steps-repository/components/sensei-step-container/index.tsx

@@ -0,0 +1,47 @@
+import { SENSEI_FLOW, StepContainer } from '@automattic/onboarding';
+import { ExternalLink } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { Icon, wordpress } from '@wordpress/icons';
+import { useI18n } from '@wordpress/react-i18n';
+import React from 'react';
+import { Container, TitleContainer, Title, Footer, FooterText } from './components';
+import './styles.scss';
+
+interface SenseiStepContainerProps {
+	stepName: string;
+	recordTracksEvent: ( eventName: string, eventProperties: object ) => void;
+	children: React.ReactNode;
+}
+
+export const SenseiStepContainer: React.FC< SenseiStepContainerProps > = ( {
+	children,
+	...props
+} ) => {
+	const { __ } = useI18n();
+	return (
+		<StepContainer
+			flowName={ SENSEI_FLOW }
+			isWideLayout
+			hideFormattedHeader
+			shouldHideNavButtons
+			{ ...props }
+			stepContent={
+				<Container>
+					<TitleContainer>
+						<Icon icon={ wordpress } />
+						<Title>{ __( 'Course Creator' ) }</Title>
+					</TitleContainer>
+					{ children }
+					<Footer>
+						<FooterText>
+							{ createInterpolateElement( __( 'Hosted by <a>WordPress.com</a>' ), {
+								a: <ExternalLink href="https://wordpress.com" />,
+							} ) }
+						</FooterText>
+						<FooterText>{ __( 'Course creation and LMS tools powered by SenseiLMS' ) }</FooterText>
+					</Footer>
+				</Container>
+			}
+		/>
+	);
+};

client/landing/stepper/declarative-flow/internals/steps-repository/components/sensei-step-container/styles.scss

@@ -0,0 +1,23 @@
+.sensei {
+	.signup-header {
+		display: none;
+	}
+
+	.step-container {
+		max-width: 100%;
+	}
+
+	.progress-bar {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 10px;
+		z-index: 10;
+		border-radius: 0;
+
+		&__progress {
+			border-radius: 0;
+		}
+	}
+}

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

@@ -1,6 +1,12 @@
 import { FEATURE_VIDEO_UPLOADS, planHasFeature } from '@automattic/calypso-products';
 import { DEVICE_TYPES } from '@automattic/components';
-import { FREE_FLOW, NEWSLETTER_FLOW, BUILD_FLOW, WRITE_FLOW } from '@automattic/onboarding';
+import {
+	FREE_FLOW,
+	NEWSLETTER_FLOW,
+	BUILD_FLOW,
+	WRITE_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 +28,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 +37,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

@@ -280,6 +280,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,
@@ -134,4 +146,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';
@@ -45,6 +46,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 { 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 { SenseiStepContainer } from '../components/sensei-step-container';
+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;