@automattic/launchpad 1.0.0 → 1.0.1

package/src/launchpad-internal.stories.tsx

@@ -0,0 +1,49 @@
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { http } from 'msw';
+import LaunchpadInternal from './launchpad-internal';
+import { launchpadResolver } from './msw/resolver';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const queryClient = new QueryClient();
+
+const meta: Meta< typeof LaunchpadInternal > = {
+	title: 'Launchpad/LaunchpadInternal',
+	component: LaunchpadInternal,
+	decorators: [
+		( Story ) => (
+			<QueryClientProvider client={ queryClient }>
+				<Story />
+			</QueryClientProvider>
+		),
+	],
+	parameters: {
+		msw: {
+			handlers: [ http.get( '/wpcom/v2/sites/*/launchpad', launchpadResolver ) ],
+		},
+	},
+	args: {
+		site: null,
+		siteSlug: 'example.wordpress.com',
+		launchpadContext: 'fullscreen',
+		checklistSlug: 'free',
+	},
+	argTypes: {
+		checklistSlug: {
+			defaultValue: 'free',
+			options: [ 'free', 'link-in-bio' ],
+			control: { type: 'select' },
+		},
+	},
+};
+
+type Story = StoryObj< typeof meta >;
+export const Default: Story = {};
+export const Loading: Story = {
+	parameters: {
+		msw: {
+			delay: 1000,
+		},
+	},
+};
+
+export default meta;

package/src/launchpad-internal.tsx

@@ -0,0 +1,85 @@
+import { useLaunchpad } from '@automattic/data-stores';
+import { type FC, useMemo } from 'react';
+import Checklist, { Placeholder as ChecklistPlaceHolder } from './checklist';
+import ChecklistItem from './checklist-item';
+import { useTracking } from './use-tracking';
+import type { Task } from './types';
+import type { SiteDetails, UseLaunchpadOptions } from '@automattic/data-stores';
+
+interface Props {
+	site?: SiteDetails | null;
+	siteSlug: string | null;
+	checklistSlug: string | null;
+	makeLastTaskPrimaryAction?: boolean;
+	taskFilter?: ( tasks: Task[] ) => Task[];
+	useLaunchpadOptions?: UseLaunchpadOptions;
+	launchpadContext: string;
+	flow?: string;
+}
+
+/**
+ * Low-level launchpad component that should only be used in exceptional cases.
+ * Please use the main Launchpad component whenever possible.
+ */
+const LaunchpadInternal: FC< Props > = ( {
+	flow,
+	site,
+	siteSlug,
+	checklistSlug,
+	taskFilter,
+	makeLastTaskPrimaryAction,
+	useLaunchpadOptions = {},
+	launchpadContext,
+} ) => {
+	const launchpadData = useLaunchpad(
+		siteSlug || '',
+		checklistSlug,
+		useLaunchpadOptions,
+		launchpadContext
+	);
+
+	const { isFetchedAfterMount, data } = launchpadData;
+	const { checklist } = data;
+
+	const tasks = useMemo( () => {
+		if ( ! checklist ) {
+			return [];
+		}
+		return taskFilter ? taskFilter( checklist ) : checklist;
+		// Array of tasks requires deep comparison
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ JSON.stringify( checklist ), taskFilter ] );
+
+	const { trackTaskClick } = useTracking( {
+		tasks,
+		checklistSlug,
+		site,
+		context: launchpadContext,
+		flow,
+	} );
+
+	const itemClickHandler = ( task: Task ) => {
+		trackTaskClick( task );
+		task?.actionDispatch?.();
+	};
+
+	return (
+		<div className="launchpad__checklist-wrapper">
+			{ isFetchedAfterMount ? (
+				<Checklist makeLastTaskPrimaryAction={ makeLastTaskPrimaryAction }>
+					{ tasks.map( ( task ) => (
+						<ChecklistItem
+							task={ task }
+							key={ task.id }
+							onClick={ () => itemClickHandler( task ) }
+						/>
+					) ) }
+				</Checklist>
+			) : (
+				<ChecklistPlaceHolder />
+			) }
+		</div>
+	);
+};
+
+export default LaunchpadInternal;

package/src/launchpad.tsx

@@ -1,44 +1,94 @@
-import { useLaunchpad } from '@automattic/data-stores';
-import { useRef, useMemo } from 'react';
-import Checklist from './checklist';
-import type { Task } from './types';
-import type { UseLaunchpadOptions } from '@automattic/data-stores';
+import { recordTracksEvent } from '@automattic/calypso-analytics';
+import {
+	LaunchpadNavigator,
+	Site,
+	type SiteSelect,
+	sortLaunchpadTasksByCompletionStatus,
+	useSortedLaunchpadTasks,
+} from '@automattic/data-stores';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from 'react';
+import { ShareSiteModal } from './action-components';
+import LaunchpadInternal from './launchpad-internal';
+import { setUpActionsForTasks } from './setup-actions';
+import type { EventHandlers, Task } from './types';
 
-export interface LaunchpadProps {
+export const SITE_STORE = Site.register( { client_id: '', client_secret: '' } );
+
+type LaunchpadProps = {
 	siteSlug: string | null;
-	checklistSlug?: string | 0 | null | undefined;
-	makeLastTaskPrimaryAction?: boolean;
-	taskFilter?: ( tasks: Task[] ) => Task[];
-	useLaunchpadOptions?: UseLaunchpadOptions;
-}
+	checklistSlug: string;
+	launchpadContext: string;
+	onSiteLaunched?: () => void;
+	onTaskClick?: EventHandlers[ 'onTaskClick' ];
+	onPostFilterTasks?: ( tasks: Task[] ) => Task[];
+};
 
 const Launchpad = ( {
 	siteSlug,
 	checklistSlug,
-	taskFilter,
-	makeLastTaskPrimaryAction,
-	useLaunchpadOptions = {},
+	launchpadContext,
+	onSiteLaunched,
+	onTaskClick,
+	onPostFilterTasks,
 }: LaunchpadProps ) => {
-	const launchpadData = useLaunchpad( siteSlug || '', checklistSlug, useLaunchpadOptions );
-	const { isFetchedAfterMount, data } = launchpadData;
-	const tasks = useRef< Task[] >( [] );
+	const {
+		data: { checklist },
+	} = useSortedLaunchpadTasks( siteSlug, checklistSlug, launchpadContext );
+	const { setActiveChecklist } = useDispatch( LaunchpadNavigator.store );
+
+	const tasklistCompleted = checklist?.every( ( task: Task ) => task.completed ) || false;
+
+	const tracksData = { recordTracksEvent, checklistSlug, tasklistCompleted, launchpadContext };
+
+	const site = useSelect(
+		( select ) => {
+			return siteSlug ? ( select( SITE_STORE ) as SiteSelect ).getSite( siteSlug ) : null;
+		},
+		[ siteSlug ]
+	);
+	const [ shareSiteModalIsOpen, setShareSiteModalIsOpen ] = useState( false );
+
+	const taskFilter = ( tasks: Task[] ) => {
+		const baseTasks = setUpActionsForTasks( {
+			tasks,
+			siteSlug,
+			tracksData,
+			extraActions: {
+				setActiveChecklist,
+				setShareSiteModalIsOpen,
+			},
+			eventHandlers: {
+				onSiteLaunched,
+				onTaskClick,
+			},
+		} );
+
+		if ( onPostFilterTasks ) {
+			return onPostFilterTasks( baseTasks );
+		}
+
+		return baseTasks;
+	};
 
-	useMemo( () => {
-		const originalTasks = data.checklist || [];
-		tasks.current = taskFilter ? taskFilter( originalTasks ) : originalTasks;
-	}, [ data, taskFilter ] );
+	const launchpadOptions = {
+		onSuccess: sortLaunchpadTasksByCompletionStatus,
+	};
 
 	return (
-		<div className="launchpad__checklist-wrapper">
-			{ isFetchedAfterMount ? (
-				<Checklist
-					tasks={ tasks.current }
-					makeLastTaskPrimaryAction={ makeLastTaskPrimaryAction }
-				/>
-			) : (
-				<Checklist.Placeholder />
+		<>
+			{ shareSiteModalIsOpen && site && (
+				<ShareSiteModal setModalIsOpen={ setShareSiteModalIsOpen } site={ site } />
 			) }
-		</div>
+			<LaunchpadInternal
+				site={ site }
+				siteSlug={ siteSlug }
+				checklistSlug={ checklistSlug }
+				taskFilter={ taskFilter }
+				useLaunchpadOptions={ launchpadOptions }
+				launchpadContext={ launchpadContext }
+			/>
+		</>
 	);
 };
 

package/src/msw/link-in-bio.ts

@@ -0,0 +1,66 @@
+export default {
+	site_intent: 'free',
+	launchpad_screen: 'full',
+	checklist_statuses: {
+		setup_free: true,
+		setup_general: true,
+		design_completed: true,
+		site_theme_selected: true,
+	},
+	checklist: [
+		{
+			id: 'design_selected',
+			title: 'Select a design',
+			completed: true,
+			disabled: false,
+			subtitle: '',
+			badge_text: '',
+			isLaunchTask: false,
+			calypso_path: '/setup/update-design/designSetup?siteSlug=site62798.wordpress.com',
+		},
+		{
+			id: 'setup_link_in_bio',
+			title: 'Personalize Link in Bio',
+			completed: true,
+			disabled: false,
+			subtitle: '',
+			badge_text: '',
+			isLaunchTask: false,
+			calypso_path:
+				'/setup/link-in-bio-post-setup/linkInBioPostSetup?siteSlug=site62798.wordpress.com',
+		},
+		{
+			id: 'plan_selected',
+			title: 'Choose a plan',
+			completed: true,
+			disabled: false,
+			subtitle: '',
+			badge_text: '',
+			isLaunchTask: false,
+			calypso_path: '/plans/site62798.wordpress.com',
+		},
+		{
+			id: 'links_added',
+			title: 'Add links',
+			completed: false,
+			disabled: false,
+			subtitle: '',
+			badge_text: '',
+			isLaunchTask: false,
+			calypso_path: '/site-editor/site62798.wordpress.com',
+		},
+		{
+			id: 'link_in_bio_launched',
+			title: 'Launch your site',
+			completed: false,
+			disabled: true,
+			subtitle: '',
+			badge_text: '',
+			isLaunchTask: false,
+		},
+	],
+	is_enabled: true,
+	is_dismissed: false,
+	is_dismissible: false,
+	title: 'Next steps for your site',
+};

package/src/msw/resolver.ts

@@ -0,0 +1,18 @@
+import { HttpResponse, HttpResponseResolver, delay } from 'msw';
+import linkInBio from './link-in-bio';
+import free from './setup-free';
+
+export const launchpadResolver: HttpResponseResolver = async ( { request } ) => {
+	const searchParams = new URL( request.url ).searchParams;
+	const checklistSlug = searchParams.get( 'checklist_slug' );
+
+	// Random delay to make the UI feel more realistic
+
+	await delay();
+
+	if ( checklistSlug === 'link-in-bio' ) {
+		return HttpResponse.json( linkInBio );
+	}
+
+	return HttpResponse.json( free );
+};

package/src/msw/setup-free.ts

@@ -0,0 +1,85 @@
+export default {
+	site_intent: 'free',
+	launchpad_screen: 'full',
+	checklist_statuses: {
+		setup_free: true,
+		setup_general: true,
+		design_completed: true,
+		site_theme_selected: true,
+	},
+	checklist: [
+		{
+			id: 'plan_selected',
+			title: 'Choose a plan',
+			completed: true,
+			disabled: false,
+			subtitle: '',
+			badge_text: '',
+			isLaunchTask: false,
+			calypso_path: '/plans/site62798.wordpress.com',
+		},
+		{
+			id: 'setup_free',
+			title: 'Personalize your site',
+			completed: true,
+			disabled: false,
+			subtitle: '',
+			badge_text: '',
+			isLaunchTask: false,
+			calypso_path: '/settings/general/site62798.wordpress.com',
+		},
+		{
+			id: 'design_selected',
+			title: 'Select a design',
+			completed: true,
+			disabled: false,
+			subtitle: '',
+			badge_text: '',
+			isLaunchTask: false,
+			calypso_path: '/setup/update-design/designSetup?siteSlug=site62798.wordpress.com',
+		},
+		{
+			id: 'domain_upsell',
+			title: 'Choose a domain',
+			completed: false,
+			disabled: false,
+			subtitle: '',
+			badge_text: 'Upgrade plan',
+			isLaunchTask: false,
+			calypso_path: '/setup/domain-upsell/domains?siteSlug=site62798.wordpress.com',
+		},
+		{
+			id: 'first_post_published',
+			title: 'Write your first post',
+			completed: false,
+			disabled: false,
+			subtitle: '',
+			badge_text: '',
+			isLaunchTask: false,
+			calypso_path: '/post/site62798.wordpress.com',
+		},
+		{
+			id: 'design_edited',
+			title: 'Edit site design',
+			completed: false,
+			disabled: false,
+			subtitle: '',
+			badge_text: '',
+			isLaunchTask: false,
+			calypso_path: '/site-editor/site62798.wordpress.com',
+		},
+		{
+			id: 'site_launched',
+			title: 'Launch your site',
+			completed: false,
+			disabled: false,
+			subtitle: '',
+			badge_text: '',
+			isLaunchTask: true,
+		},
+	],
+	is_enabled: true,
+	is_dismissed: false,
+	is_dismissible: false,
+	title: 'Next steps for your site',
+};

package/src/setup-actions.ts

@@ -1,5 +1,6 @@
 import config from '@automattic/calypso-config';
 import { updateLaunchpadSettings } from '@automattic/data-stores';
+import { localizeUrl } from '@automattic/i18n-utils';
 import { isMobile } from '@automattic/viewport';
 import { addQueryArgs } from '@wordpress/url';
 import wpcomRequest from 'wpcom-proxy-request';
@@ -12,6 +13,10 @@ const TASKS_TO_COMPLETE_ON_CLICK = [
 	'manage_subscribers',
 	'connect_social_media',
 	'drive_traffic',
+	'site_monitoring_page',
+	'front_page_updated',
+	'post_sharing_enabled',
+	'mobile_app_installed',
 ];
 
 export const setUpActionsForTasks = ( {
@@ -19,33 +24,23 @@ export const setUpActionsForTasks = ( {
 	tasks,
 	tracksData,
 	extraActions,
+	eventHandlers,
 	uiContext = 'calypso',
 }: LaunchpadTaskActionsProps ): Task[] => {
-	const { recordTracksEvent, checklistSlug, tasklistCompleted, launchpadContext } = tracksData;
-	const { setShareSiteModalIsOpen, siteLaunched, setActiveChecklist } = extraActions;
-
-	//Record click events for tasks
-	const recordTaskClickTracksEvent = ( task: Task ) => {
-		recordTracksEvent( 'calypso_launchpad_task_clicked', {
-			checklist_slug: checklistSlug,
-			checklist_completed: tasklistCompleted,
-			task_id: task.id,
-			is_completed: task.completed,
-			context: launchpadContext,
-			order: task.order,
-		} );
-	};
+	const { recordTracksEvent, checklistSlug, launchpadContext } = tracksData;
+	const { setShareSiteModalIsOpen, setActiveChecklist } = extraActions;
+	const { onSiteLaunched, onTaskClick } = eventHandlers || {};
 
 	// Add actions to the tasks.
 	return tasks.map( ( task: Task ) => {
 		let action: () => void;
 		let logMissingCalypsoPath = false;
+		let useCalypsoPath = true;
+		const hasCalypsoPath = task.calypso_path !== undefined;
 
-		if ( uiContext === 'calypso' && task.calypso_path !== undefined ) {
-			let targetPath = task.calypso_path;
-
-			if ( task.id === 'drive_traffic' && ! isMobile() ) {
-				targetPath = addQueryArgs( targetPath, { tour: 'marketingConnectionsTour' } );
+		if ( uiContext === 'calypso' && hasCalypsoPath ) {
+			if ( task.id === 'drive_traffic' && ! isMobile() && hasCalypsoPath ) {
+				task.calypso_path = addQueryArgs( task.calypso_path, { tour: 'marketingConnectionsTour' } );
 			}
 
 			// Enable task in 'calypso' context
@@ -59,7 +54,6 @@ export const setUpActionsForTasks = ( {
 						checklist_statuses: { [ task.id ]: true },
 					} );
 				}
-				window.location.assign( targetPath );
 			};
 		} else {
 			switch ( task.id ) {
@@ -67,66 +61,55 @@ export const setUpActionsForTasks = ( {
 					action = () => {
 						setShareSiteModalIsOpen?.( true );
 					};
+					useCalypsoPath = false;
 					break;
 
 				case 'site_title':
 					logMissingCalypsoPath = true;
-					action = () => {
-						window.location.assign( `/settings/general/${ siteSlug }` );
-					};
+					task.calypso_path = `/settings/general/${ siteSlug }`;
 					break;
 
 				case 'domain_claim':
 				case 'domain_upsell':
 				case 'domain_customize':
 					logMissingCalypsoPath = true;
-					action = () => {
-						window.location.assign( `/domains/add/${ siteSlug }` );
-					};
+					task.calypso_path = `/domains/add/${ siteSlug }`;
 					break;
+
 				case 'drive_traffic':
 					logMissingCalypsoPath = true;
-					action = () => {
-						const url = isMobile()
-							? `/marketing/connections/${ siteSlug }`
-							: `/marketing/connections/${ siteSlug }?tour=marketingConnectionsTour`;
-						window.location.assign( url );
-					};
+					task.calypso_path = isMobile()
+						? `/marketing/connections/${ siteSlug }`
+						: `/marketing/connections/${ siteSlug }?tour=marketingConnectionsTour`;
 					break;
+
 				case 'add_new_page':
 					logMissingCalypsoPath = true;
-					action = () => {
-						window.location.assign( `/page/${ siteSlug }` );
-					};
+					task.calypso_path = `/page/${ siteSlug }`;
 					break;
+
 				case 'edit_page':
 					logMissingCalypsoPath = true;
-					action = () => {
-						window.location.assign( `/pages/${ siteSlug }` );
-					};
+					task.calypso_path = `/pages/${ siteSlug }`;
 					break;
+
 				case 'update_about_page':
 					logMissingCalypsoPath = true;
-					action = () => {
-						window.location.assign( `/page/${ siteSlug }/${ task?.extra_data?.about_page_id }` );
-					};
+					task.calypso_path = `/page/${ siteSlug }/${ task?.extra_data?.about_page_id }`;
 					break;
+
 				case 'customize_welcome_message':
 					logMissingCalypsoPath = true;
-					action = () => {
-						if ( config.isEnabled( 'settings/newsletter-settings-page' ) ) {
-							window.location.assign( `/settings/newsletter/${ siteSlug }` );
-						} else {
-							window.location.assign( `/settings/reading/${ siteSlug }#newsletter-settings` );
-						}
-					};
+					task.calypso_path = config.isEnabled( 'settings/newsletter-settings-page' )
+						? `/settings/newsletter/${ siteSlug }`
+						: `/settings/reading/${ siteSlug }#newsletter-settings`;
 					break;
+
 				case 'manage_subscribers':
 					logMissingCalypsoPath = true;
-					action = () => {
-						window.location.assign( `/subscribers/${ siteSlug }` );
-					};
+					task.calypso_path = `/subscribers/${ siteSlug }`;
 					break;
+
 				case 'site_launched':
 				case 'blog_launched':
 				case 'videopress_launched':
@@ -137,11 +120,37 @@ export const setUpActionsForTasks = ( {
 							apiVersion: '1.1',
 							method: 'post',
 						} );
-						siteLaunched?.();
+						onSiteLaunched?.();
 					};
+					useCalypsoPath = false;
 					break;
+
+				case 'review_site':
+					action = () => {
+						// redirects to the site slug home page in a new tab
+						window.open( `https://${ siteSlug }`, '_blank' );
+						updateLaunchpadSettings( siteSlug, {
+							checklist_statuses: { [ task.id ]: true },
+						} );
+					};
+					useCalypsoPath = false;
+					break;
+
+				case 'domain_dns_mapped':
+					action = () => {
+						window.open(
+							localizeUrl(
+								`https://wordpress.com/support/domains/connect-existing-domain/#step-2-connect-your-domain`
+							),
+							'_blank'
+						);
+					};
+					useCalypsoPath = false;
+					break;
+
 				default:
 					logMissingCalypsoPath = true;
+					useCalypsoPath = false;
 					break;
 			}
 		}
@@ -156,13 +165,17 @@ export const setUpActionsForTasks = ( {
 		}
 
 		const actionDispatch = () => {
-			recordTaskClickTracksEvent( task );
-			if ( siteSlug && setActiveChecklist ) {
+			if ( siteSlug && setActiveChecklist && config.isEnabled( 'launchpad/navigator' ) ) {
 				setActiveChecklist( siteSlug, checklistSlug );
 			}
+			onTaskClick?.( task );
 			action?.();
 		};
 
+		// Note that we double-check for both the flag and a valid calypso_path as a safety check.
+		// We intentionally avoid `hasCalypsoPath`, as it may be out of date.
+		task.useCalypsoPath = useCalypsoPath && task.calypso_path !== undefined;
+
 		return { ...task, actionDispatch };
 	} );
 };