@automattic/launchpad 1.0.0

package/src/launchpad.tsx

@@ -0,0 +1,45 @@
+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';
+
+export interface LaunchpadProps {
+	siteSlug: string | null;
+	checklistSlug?: string | 0 | null | undefined;
+	makeLastTaskPrimaryAction?: boolean;
+	taskFilter?: ( tasks: Task[] ) => Task[];
+	useLaunchpadOptions?: UseLaunchpadOptions;
+}
+
+const Launchpad = ( {
+	siteSlug,
+	checklistSlug,
+	taskFilter,
+	makeLastTaskPrimaryAction,
+	useLaunchpadOptions = {},
+}: LaunchpadProps ) => {
+	const launchpadData = useLaunchpad( siteSlug || '', checklistSlug, useLaunchpadOptions );
+	const { isFetchedAfterMount, data } = launchpadData;
+	const tasks = useRef< Task[] >( [] );
+
+	useMemo( () => {
+		const originalTasks = data.checklist || [];
+		tasks.current = taskFilter ? taskFilter( originalTasks ) : originalTasks;
+	}, [ data, taskFilter ] );
+
+	return (
+		<div className="launchpad__checklist-wrapper">
+			{ isFetchedAfterMount ? (
+				<Checklist
+					tasks={ tasks.current }
+					makeLastTaskPrimaryAction={ makeLastTaskPrimaryAction }
+				/>
+			) : (
+				<Checklist.Placeholder />
+			) }
+		</div>
+	);
+};
+
+export default Launchpad;

package/src/setup-actions.ts

@@ -0,0 +1,168 @@
+import config from '@automattic/calypso-config';
+import { updateLaunchpadSettings } from '@automattic/data-stores';
+import { isMobile } from '@automattic/viewport';
+import { addQueryArgs } from '@wordpress/url';
+import wpcomRequest from 'wpcom-proxy-request';
+import type { LaunchpadTaskActionsProps, Task } from './types';
+
+const TASKS_TO_COMPLETE_ON_CLICK = [
+	'add_about_page',
+	'manage_paid_newsletter_plan',
+	'earn_money',
+	'manage_subscribers',
+	'connect_social_media',
+	'drive_traffic',
+];
+
+export const setUpActionsForTasks = ( {
+	siteSlug,
+	tasks,
+	tracksData,
+	extraActions,
+	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,
+		} );
+	};
+
+	// Add actions to the tasks.
+	return tasks.map( ( task: Task ) => {
+		let action: () => void;
+		let logMissingCalypsoPath = false;
+
+		if ( uiContext === 'calypso' && task.calypso_path !== undefined ) {
+			let targetPath = task.calypso_path;
+
+			if ( task.id === 'drive_traffic' && ! isMobile() ) {
+				targetPath = addQueryArgs( targetPath, { tour: 'marketingConnectionsTour' } );
+			}
+
+			// Enable task in 'calypso' context
+			if ( task.id === 'setup_general' ) {
+				task.disabled = false;
+			}
+
+			action = () => {
+				if ( siteSlug && TASKS_TO_COMPLETE_ON_CLICK.includes( task.id ) ) {
+					updateLaunchpadSettings( siteSlug, {
+						checklist_statuses: { [ task.id ]: true },
+					} );
+				}
+				window.location.assign( targetPath );
+			};
+		} else {
+			switch ( task.id ) {
+				case 'share_site':
+					action = () => {
+						setShareSiteModalIsOpen?.( true );
+					};
+					break;
+
+				case 'site_title':
+					logMissingCalypsoPath = true;
+					action = () => {
+						window.location.assign( `/settings/general/${ siteSlug }` );
+					};
+					break;
+
+				case 'domain_claim':
+				case 'domain_upsell':
+				case 'domain_customize':
+					logMissingCalypsoPath = true;
+					action = () => {
+						window.location.assign( `/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 );
+					};
+					break;
+				case 'add_new_page':
+					logMissingCalypsoPath = true;
+					action = () => {
+						window.location.assign( `/page/${ siteSlug }` );
+					};
+					break;
+				case 'edit_page':
+					logMissingCalypsoPath = true;
+					action = () => {
+						window.location.assign( `/pages/${ siteSlug }` );
+					};
+					break;
+				case 'update_about_page':
+					logMissingCalypsoPath = true;
+					action = () => {
+						window.location.assign( `/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` );
+						}
+					};
+					break;
+				case 'manage_subscribers':
+					logMissingCalypsoPath = true;
+					action = () => {
+						window.location.assign( `/subscribers/${ siteSlug }` );
+					};
+					break;
+				case 'site_launched':
+				case 'blog_launched':
+				case 'videopress_launched':
+				case 'link_in_bio_launched':
+					action = async () => {
+						await wpcomRequest( {
+							path: `/sites/${ siteSlug }/launch`,
+							apiVersion: '1.1',
+							method: 'post',
+						} );
+						siteLaunched?.();
+					};
+					break;
+				default:
+					logMissingCalypsoPath = true;
+					break;
+			}
+		}
+
+		if ( logMissingCalypsoPath ) {
+			recordTracksEvent( 'calypso_launchpad_task_missing_calypso_path', {
+				checklist_slug: checklistSlug,
+				task_id: task.id,
+				is_completed: task.completed,
+				context: launchpadContext,
+			} );
+		}
+
+		const actionDispatch = () => {
+			recordTaskClickTracksEvent( task );
+			if ( siteSlug && setActiveChecklist ) {
+				setActiveChecklist( siteSlug, checklistSlug );
+			}
+			action?.();
+		};
+
+		return { ...task, actionDispatch };
+	} );
+};

package/src/test/badge.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import Badge from '../badge/index';
+import '@testing-library/jest-dom';
+
+describe( 'Badge', () => {
+	test( 'should have badge class', () => {
+		const { container } = render( <Badge /> );
+		expect( container.getElementsByClassName( 'badge' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (warning)', () => {
+		const { container } = render( <Badge type="warning" /> );
+		expect( container.getElementsByClassName( 'badge badge--warning' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (success)', () => {
+		const { container } = render( <Badge type="success" /> );
+		expect( container.getElementsByClassName( 'badge badge--success' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (info)', () => {
+		const { container } = render( <Badge type="info" /> );
+		expect( container.getElementsByClassName( 'badge badge--info' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (info-blue)', () => {
+		const { container } = render( <Badge type="info-blue" /> );
+		expect( container.getElementsByClassName( 'badge badge--info-blue' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (error)', () => {
+		const { container } = render( <Badge type="error" /> );
+		expect( container.getElementsByClassName( 'badge badge--error' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (default)', () => {
+		const { container } = render( <Badge /> );
+		expect( container.getElementsByClassName( 'badge badge--warning' ).length ).toBe( 1 );
+	} );
+
+	test( 'should contains the passed children wrapped by a feature-example div', () => {
+		render(
+			<Badge>
+				<div>arbitrary-text-content</div>
+			</Badge>
+		);
+		expect( screen.getByText( 'arbitrary-text-content' ) ).toBeInTheDocument();
+	} );
+} );

package/src/test/checklist-item.tsx

@@ -0,0 +1,96 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import ChecklistItem from '../checklist-item';
+import { buildTask } from './lib/fixtures';
+import '@testing-library/jest-dom';
+
+describe( 'ChecklistItem', () => {
+	describe( 'when the task requires a badge', () => {
+		it( 'displays a badge', () => {
+			const badge_text = 'Badge Text';
+			render( <ChecklistItem task={ buildTask( { badge_text } ) } /> );
+			expect( screen.getByText( badge_text ) ).toBeTruthy();
+		} );
+	} );
+
+	describe( 'when the task is completed', () => {
+		it( 'shows the task completed icon', () => {
+			render( <ChecklistItem task={ buildTask( { completed: true } ) } /> );
+			const taskCompleteIcon = screen.queryByLabelText( 'Task complete' );
+			expect( taskCompleteIcon ).toBeTruthy();
+		} );
+		it( 'hides the task enabled icon', () => {
+			render( <ChecklistItem task={ buildTask( { completed: true } ) } /> );
+			const taskEnabledIcon = screen.queryByLabelText( 'Task enabled' );
+			expect( taskEnabledIcon ).toBeFalsy();
+		} );
+		it( 'disables the task', () => {
+			render( <ChecklistItem task={ buildTask( { completed: true } ) } /> );
+			const taskButton = screen.queryByRole( 'button' );
+			expect( taskButton ).toHaveAttribute( 'disabled' );
+		} );
+
+		describe( 'and the task is kept enabled', () => {
+			it( 'hides the task enabled icon', () => {
+				render( <ChecklistItem task={ buildTask( { completed: true, disabled: false } ) } /> );
+				const taskEnabledIcon = screen.queryByLabelText( 'Task enabled' );
+				expect( taskEnabledIcon ).toBeFalsy();
+			} );
+			it( 'enables the task', () => {
+				render( <ChecklistItem task={ buildTask( { completed: true, disabled: false } ) } /> );
+				const taskButton = screen.queryByRole( 'button' );
+				expect( taskButton ).not.toHaveAttribute( 'disabled' );
+			} );
+		} );
+	} );
+
+	describe( 'when a task is incomplete', () => {
+		it( 'hides the task complete icon', () => {
+			render( <ChecklistItem task={ buildTask( { completed: false } ) } /> );
+			const taskCompleteIcon = screen.queryByLabelText( 'Task complete' );
+			expect( taskCompleteIcon ).toBeFalsy();
+		} );
+	} );
+
+	describe( 'and the task depends on the completion of other tasks', () => {
+		it( 'hides the task enabled icon', () => {
+			const otherTaskCompleted = false;
+			render(
+				<ChecklistItem task={ buildTask( { completed: false, disabled: ! otherTaskCompleted } ) } />
+			);
+			const taskEnabledIcon = screen.queryByLabelText( 'Task enabled' );
+			expect( taskEnabledIcon ).toBeFalsy();
+		} );
+		it( 'disables the task', () => {
+			const otherTaskCompleted = false;
+			render(
+				<ChecklistItem task={ buildTask( { completed: false, disabled: ! otherTaskCompleted } ) } />
+			);
+			const taskButton = screen.queryByRole( 'button' );
+			expect( taskButton ).toHaveAttribute( 'disabled' );
+		} );
+	} );
+
+	describe( 'and the task does not depend on the completion of other tasks', () => {
+		it( 'shows the task enabled icon', () => {
+			render( <ChecklistItem task={ buildTask( { completed: false, disabled: false } ) } /> );
+			const taskEnabledIcon = screen.queryByLabelText( 'Task enabled' );
+			expect( taskEnabledIcon ).toBeTruthy();
+		} );
+		it( 'enables the task', () => {
+			render( <ChecklistItem task={ buildTask( { completed: false, disabled: false } ) } /> );
+			const taskButton = screen.queryByRole( 'button' );
+			expect( taskButton ).not.toHaveAttribute( 'disabled' );
+		} );
+	} );
+
+	describe( 'when a task is a primary action', () => {
+		it( 'displays a primary button', () => {
+			render(
+				<ChecklistItem task={ buildTask( { completed: false } ) } isPrimaryAction={ true } />
+			);
+			const taskButton = screen.queryByRole( 'button' );
+			expect( taskButton?.className ).toContain( 'checklist-item__checklist-primary-button' );
+		} );
+	} );
+} );

package/src/test/checklist.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import Checklist from '../checklist';
+import { buildTask } from './lib/fixtures';
+import '@testing-library/jest-dom';
+
+describe( 'Checklist', () => {
+	describe( 'when provided no tasks', () => {
+		it( 'then no tasks are rendered', () => {
+			render( <Checklist tasks={ [] } /> );
+			const checklistItems = screen.queryByRole( 'listitem' );
+			expect( checklistItems ).not.toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'when a number of tasks are provided', () => {
+		it( 'then the same number of tasks are rendered', () => {
+			render(
+				<Checklist tasks={ [ buildTask( { id: 'task1' } ), buildTask( { id: 'task2' } ) ] } />
+			);
+			const checklistItems = screen.getAllByRole( 'listitem' );
+			expect( checklistItems.length ).toBe( 2 );
+		} );
+	} );
+} );

package/src/test/launchpad.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import Launchpad from '../launchpad';
+import '@testing-library/jest-dom';
+import type { Task } from '../types';
+
+jest.mock( '@automattic/data-stores', () => {
+	const { buildTask } = require( './lib/fixtures' );
+	return {
+		useLaunchpad: jest.fn( () => {
+			return {
+				isFetchedAfterMount: true,
+				data: {
+					checklist: [
+						buildTask( { id: 'task1' } ),
+						buildTask( { id: 'task2' } ),
+						buildTask( { id: 'task3' } ),
+					],
+				},
+			};
+		} ),
+	};
+} );
+
+describe( 'Launchpad', () => {
+	describe( 'when no taskFilter is provided', () => {
+		it( 'then all tasks from useLaunchpad are rendered', () => {
+			render( <Launchpad siteSlug="any site" /> );
+			const checklistItems = screen.queryAllByRole( 'listitem' );
+			expect( checklistItems.length ).toBe( 3 );
+		} );
+	} );
+
+	describe( 'when taskFilter is provided', () => {
+		it( 'then render only tasks returned from the callback', () => {
+			const filter = ( tasks: Task[] ) => {
+				// return only the first task
+				return [ tasks[ 0 ] ];
+			};
+
+			render( <Launchpad siteSlug="any site" taskFilter={ filter } /> );
+			const checklistItems = screen.queryAllByRole( 'listitem' );
+			expect( checklistItems.length ).toBe( 1 );
+
+			const taskId = checklistItems[ 0 ].querySelector( 'button' )?.getAttribute( 'data-task' );
+			expect( taskId ).toBe( 'task1' );
+		} );
+	} );
+} );