@automattic/launchpad 1.0.0 → 1.0.1

package/src/test/launchpad.tsx

@@ -1,9 +1,13 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-import Launchpad from '../launchpad';
+import { recordTracksEvent } from '@automattic/calypso-analytics';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React, { ComponentProps } from 'react';
+import LaunchpadInternal from '../launchpad-internal';
 import '@testing-library/jest-dom';
 import type { Task } from '../types';
 
+jest.mock( '@automattic/calypso-analytics' );
+
 jest.mock( '@automattic/data-stores', () => {
 	const { buildTask } = require( './lib/fixtures' );
 	return {
@@ -12,9 +16,9 @@ jest.mock( '@automattic/data-stores', () => {
 				isFetchedAfterMount: true,
 				data: {
 					checklist: [
-						buildTask( { id: 'task1' } ),
-						buildTask( { id: 'task2' } ),
-						buildTask( { id: 'task3' } ),
+						buildTask( { id: 'task1', title: 'Task 1', completed: false, disabled: false } ),
+						buildTask( { id: 'task2', title: 'Task 2' } ),
+						buildTask( { id: 'task3', title: 'Task 3' } ),
 					],
 				},
 			};
@@ -22,28 +26,51 @@ jest.mock( '@automattic/data-stores', () => {
 	};
 } );
 
-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( 'LaunchpadInternal', () => {
+	const defaultProps = {
+		siteSlug: 'any site',
+		checklistSlug: 'some-site',
+		launchpadContext: 'some-context',
+	};
+	const renderComponent = ( props: Partial< ComponentProps< typeof LaunchpadInternal > > = {} ) => {
+		return render( <LaunchpadInternal { ...defaultProps } { ...props } /> );
+	};
+
+	it( 'renders the tasks', () => {
+		renderComponent();
+		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 ] ];
-			};
+	it( 'records the checklist item click', async () => {
+		renderComponent();
 
-			render( <Launchpad siteSlug="any site" taskFilter={ filter } /> );
-			const checklistItems = screen.queryAllByRole( 'listitem' );
-			expect( checklistItems.length ).toBe( 1 );
+		jest.clearAllMocks();
+		await userEvent.click( screen.getByRole( 'button', { name: /Task 1/ } ) );
 
-			const taskId = checklistItems[ 0 ].querySelector( 'button' )?.getAttribute( 'data-task' );
-			expect( taskId ).toBe( 'task1' );
+		await waitFor( () => {
+			expect( recordTracksEvent ).toHaveBeenCalledWith( 'calypso_launchpad_task_clicked', {
+				checklist_completed: false,
+				checklist_slug: 'some-site',
+				context: 'some-context',
+				is_completed: false,
+				order: undefined,
+				task_id: 'task1',
+			} );
 		} );
 	} );
+
+	it( 'renders only the tasks returned taskFilter', () => {
+		const filter = ( tasks: Task[] ) => {
+			// return only the first task
+			return [ tasks[ 0 ] ];
+		};
+
+		renderComponent( { 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' );
+	} );
 } );

package/src/test/lib/fixtures.ts

@@ -139,7 +139,6 @@ export const defaultSiteDetails: SiteDetails = {
 		was_created_with_blank_canvas_design: false,
 		videopress_storage_used: 0,
 		is_difm_lite_in_progress: false,
-		difm_lite_site_options: {},
 		site_intent: 'link-in-bio',
 		site_vertical_id: null,
 		launchpad_screen: 'full',
@@ -212,6 +211,7 @@ export const defaultDomainResponse: any = {
 	aftermarketAuction: false,
 	aftermarketAuctionEnd: null,
 	aftermarketAuctionStart: null,
+	authCodeRequired: true,
 	autoRenewalDate: '',
 	autoRenewing: false,
 	beginTransferUntilDate: '',
@@ -223,6 +223,8 @@ export const defaultDomainResponse: any = {
 	cannotManageNameServersReason: null,
 	cannotUpdateContactInfoReason: null,
 	canSetAsPrimary: false,
+	canTransferToOtherSite: true,
+	canTransferToAnyUser: true,
 	canUpdateContactInfo: false,
 	connectionMode: '',
 	contactInfoDisclosed: false,
@@ -232,6 +234,7 @@ export const defaultDomainResponse: any = {
 	currentUserCanManage: false,
 	currentUserCannotAddEmailReason: null,
 	currentUserIsOwner: false,
+	dnssecRecords: undefined,
 	domain: '',
 	domainLockingAvailable: false,
 	domainRegistrationAgreementUrl: null,
@@ -245,7 +248,10 @@ export const defaultDomainResponse: any = {
 	hasWpcomNameservers: false,
 	hasZone: false,
 	isAutoRenewing: false,
+	isDnssecEnabled: false,
+	isDnssecSupported: false,
 	isEligibleForInboundTransfer: false,
+	isGravatarDomain: false,
 	isIcannVerificationSuspended: false,
 	isLocked: false,
 	isPendingIcannVerification: false,
@@ -311,7 +317,6 @@ export const MOCK_USE_QUERY_RESULT = {
 	isLoading: false,
 	isLoadingError: false,
 	isPlaceholderData: false,
-	isPreviousData: false,
 	isRefetchError: false,
 	isRefetching: false,
 	isStale: false,

package/src/types.ts

@@ -1,13 +1,16 @@
+import { ReactNode } from 'react';
+
 export interface TaskExtraData {
 	about_page_id?: number;
 }
+
 export interface Task {
 	id: string;
 	completed: boolean;
 	disabled: boolean;
-	title?: string;
+	title?: ReactNode | string;
 	subtitle?: string | React.ReactNode | null;
-	badge_text?: string;
+	badge_text?: ReactNode | string;
 	actionDispatch?: () => void;
 	isLaunchTask?: boolean;
 	extra_data?: TaskExtraData;
@@ -15,6 +18,19 @@ export interface Task {
 	target_repetitions?: number;
 	repetition_count?: number;
 	order?: number;
+	useCalypsoPath?: boolean;
+	actionUrl?: string;
+}
+
+export interface ExpandableAction {
+	label: string;
+	onClick: () => void;
+}
+
+export interface Expandable {
+	isOpen: boolean;
+	content: JSX.Element;
+	action?: ExpandableAction;
 }
 
 export type LaunchpadChecklist = Task[];
@@ -49,22 +65,21 @@ export interface LaunchpadStatuses {
 	domain_upsell_deferred?: boolean;
 }
 
-export interface LaunchpadResponse {
-	site_intent: string;
-	launchpad_screen: boolean | string;
-	checklist_statuses: LaunchpadStatuses[];
-}
-
 export interface PermittedActions {
 	setShareSiteModalIsOpen?: ( isOpen: boolean ) => void;
-	siteLaunched?: () => void;
 	setActiveChecklist: ( siteSlug: string, activeChecklistSlug: string ) => void;
 }
 
+export type EventHandlers = {
+	onSiteLaunched?: () => void;
+	onTaskClick?: ( task: Task ) => void;
+};
+
 export interface LaunchpadTaskActionsProps {
 	siteSlug: string | null;
 	tasks: Task[];
 	tracksData: LaunchpadTracksData;
 	extraActions: PermittedActions;
 	uiContext?: 'calypso';
+	eventHandlers?: EventHandlers;
 }

package/src/use-tracking/index.tsx

@@ -0,0 +1,87 @@
+import { recordTracksEvent } from '@automattic/calypso-analytics';
+import { useEffect, useMemo } from 'react';
+import type { Task } from '../types';
+import type { SiteDetails } from '@automattic/data-stores';
+
+interface Params {
+	tasks: Task[];
+	checklistSlug: string | null;
+	context: string;
+	site: SiteDetails | null | undefined;
+	flow?: string;
+}
+
+const stringifyTasks = ( tasks: Task[] ) => {
+	const prefix = ',';
+	const suffix = ',';
+	const separator = ',';
+
+	const taskIds = tasks.map( ( task ) => task.id ).join( separator );
+	return `${ prefix }${ taskIds }${ suffix }`;
+};
+
+export const useTracking = ( params: Params ) => {
+	const { tasks, checklistSlug, context, site, flow } = params;
+	const completedSteps = useMemo( () => tasks.filter( ( task ) => task.completed ), [ tasks ] );
+	const taskNames = useMemo( () => stringifyTasks( tasks ), [ tasks ] );
+	const numberOfSteps = tasks.length;
+	const numberOfCompletedSteps = completedSteps.length;
+	const isCheckListCompleted = completedSteps.length === tasks.length;
+	const isSiteAvailable = !! site;
+	const hasNoTask = tasks.length === 0;
+
+	// We skip the view events until we have fetched the site details to avoid sending incomplete data
+	const shoulSkipTracking = hasNoTask || ! isSiteAvailable;
+
+	useEffect( () => {
+		if ( shoulSkipTracking ) {
+			return;
+		}
+
+		const siteIntent = site?.options?.site_intent;
+
+		recordTracksEvent( 'calypso_launchpad_tasklist_viewed', {
+			number_of_steps: numberOfSteps,
+			number_of_completed_steps: numberOfCompletedSteps,
+			is_completed: isCheckListCompleted,
+			tasks: taskNames,
+			checklist_slug: checklistSlug,
+			context: context,
+			site_intent: siteIntent,
+			flow,
+		} );
+
+		tasks.forEach( ( task: Task ) => {
+			recordTracksEvent( 'calypso_launchpad_task_view', {
+				checklist_slug: checklistSlug,
+				task_id: task.id,
+				is_completed: task.completed,
+				context: context,
+				order: task.order,
+				site_intent: siteIntent,
+				flow,
+			} );
+		} );
+		// Array of tasks requires deep comparison
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [
+		JSON.stringify( tasks.map( ( { id, completed, order } ) => ( { id, completed, order } ) ) ),
+		shoulSkipTracking,
+	] );
+
+	const trackTaskClick = ( task: Task ) => {
+		recordTracksEvent( 'calypso_launchpad_task_clicked', {
+			checklist_completed: isCheckListCompleted,
+			is_completed: task.completed,
+			checklist_slug: checklistSlug,
+			context: context,
+			task_id: task.id,
+			flow,
+			order: task.order,
+		} );
+	};
+
+	return {
+		trackTaskClick,
+	};
+};

package/src/use-tracking/test/index.tsx

@@ -0,0 +1,116 @@
+import { recordTracksEvent } from '@automattic/calypso-analytics';
+import { renderHook } from '@testing-library/react';
+import { useTracking } from '..';
+import { buildTask } from '../../test/lib/fixtures';
+import type { SiteDetails } from '@automattic/data-stores';
+
+jest.mock( '@automattic/calypso-analytics' );
+
+describe( 'useTracking', () => {
+	beforeEach( () => jest.clearAllMocks() );
+
+	const buildDefaultProps = ( options = {} ) => ( {
+		checklistSlug: 'site-setup-checklist',
+		context: 'customer-home',
+		site: { options: { site_intent: 'build' } } as SiteDetails,
+		tasks: [
+			buildTask( { id: 'task-1', completed: true } ),
+			buildTask( { id: 'task-2', completed: false } ),
+		],
+		...options,
+	} );
+
+	it( 'tracks the view event on load', () => {
+		renderHook( () => useTracking( buildDefaultProps() ) );
+
+		expect( recordTracksEvent ).toHaveBeenCalledWith( 'calypso_launchpad_tasklist_viewed', {
+			checklist_slug: 'site-setup-checklist',
+			tasks: ',task-1,task-2,',
+			is_completed: false,
+			number_of_steps: 2,
+			number_of_completed_steps: 1,
+			context: 'customer-home',
+			site_intent: 'build',
+		} );
+	} );
+
+	it( 'use comma as prefix and suffix for the task names to simplify queries on the logs tool', () => {
+		renderHook( () => useTracking( buildDefaultProps() ) );
+
+		const tasks = jest.mocked( recordTracksEvent ).mock.calls[ 0 ][ 1 ].tasks;
+		expect( tasks ).toBe( ',task-1,task-2,' );
+	} );
+
+	it( 'tracks the view event by task', () => {
+		const tasks = [
+			buildTask( { id: 'task-1', completed: true, order: 3 } ),
+			buildTask( { id: 'task-2', completed: false, order: 4 } ),
+		];
+
+		renderHook( () => useTracking( buildDefaultProps( { tasks } ) ) );
+
+		expect( recordTracksEvent ).toHaveBeenNthCalledWith( 2, 'calypso_launchpad_task_view', {
+			checklist_slug: 'site-setup-checklist',
+			is_completed: true,
+			context: 'customer-home',
+			site_intent: 'build',
+			order: 3,
+			task_id: 'task-1',
+		} );
+	} );
+
+	it( 'prevent calls multiple times during rerender', () => {
+		const params = buildDefaultProps();
+		const { rerender } = renderHook( () => useTracking( params ) );
+
+		rerender();
+
+		// 3 calls: 1 for the view and 2 for the tasks
+		expect( recordTracksEvent ).toHaveBeenCalledTimes( 3 );
+	} );
+
+	it( 'logs the load events only when the site info is available', () => {
+		const { rerender } = renderHook( ( site = null ) =>
+			useTracking( buildDefaultProps( { site } ) )
+		);
+
+		expect( recordTracksEvent ).toHaveBeenCalledTimes( 0 );
+
+		rerender( { options: { site_intent: 'some-site-intent' } } as SiteDetails );
+
+		expect( recordTracksEvent ).toHaveBeenCalledWith(
+			'calypso_launchpad_tasklist_viewed',
+			expect.objectContaining( {
+				site_intent: 'some-site-intent',
+			} )
+		);
+
+		expect( recordTracksEvent ).toHaveBeenCalledWith(
+			'calypso_launchpad_task_view',
+			expect.objectContaining( {
+				site_intent: 'some-site-intent',
+			} )
+		);
+	} );
+
+	it( 'tracks the click event', () => {
+		const tasks = [
+			buildTask( { id: 'task-1', completed: true, order: 3 } ),
+			buildTask( { id: 'task-2', completed: false, order: 4 } ),
+		];
+
+		jest.clearAllMocks();
+		const { result } = renderHook( () => useTracking( buildDefaultProps() ) );
+
+		result.current.trackTaskClick( tasks[ 1 ] );
+
+		expect( recordTracksEvent ).toHaveBeenCalledWith( 'calypso_launchpad_task_clicked', {
+			checklist_slug: 'site-setup-checklist',
+			task_id: 'task-2',
+			checklist_completed: false,
+			is_completed: false,
+			order: 4,
+			context: 'customer-home',
+		} );
+	} );
+} );

package/static/mockServiceWorker.js

@@ -0,0 +1,287 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker (2.1.7).
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const INTEGRITY_CHECKSUM = '223d191a56023cd36aa88c802961b911';
+const IS_MOCKED_RESPONSE = Symbol( 'isMockedResponse' );
+const activeClientIds = new Set();
+
+self.addEventListener( 'install', function () {
+	self.skipWaiting();
+} );
+
+self.addEventListener( 'activate', function ( event ) {
+	event.waitUntil( self.clients.claim() );
+} );
+
+self.addEventListener( 'message', async function ( event ) {
+	const clientId = event.source.id;
+
+	if ( ! clientId || ! self.clients ) {
+		return;
+	}
+
+	const client = await self.clients.get( clientId );
+
+	if ( ! client ) {
+		return;
+	}
+
+	const allClients = await self.clients.matchAll( {
+		type: 'window',
+	} );
+
+	switch ( event.data ) {
+		case 'KEEPALIVE_REQUEST': {
+			sendToClient( client, {
+				type: 'KEEPALIVE_RESPONSE',
+			} );
+			break;
+		}
+
+		case 'INTEGRITY_CHECK_REQUEST': {
+			sendToClient( client, {
+				type: 'INTEGRITY_CHECK_RESPONSE',
+				payload: INTEGRITY_CHECKSUM,
+			} );
+			break;
+		}
+
+		case 'MOCK_ACTIVATE': {
+			activeClientIds.add( clientId );
+
+			sendToClient( client, {
+				type: 'MOCKING_ENABLED',
+				payload: true,
+			} );
+			break;
+		}
+
+		case 'MOCK_DEACTIVATE': {
+			activeClientIds.delete( clientId );
+			break;
+		}
+
+		case 'CLIENT_CLOSED': {
+			activeClientIds.delete( clientId );
+
+			const remainingClients = allClients.filter( ( client ) => {
+				return client.id !== clientId;
+			} );
+
+			// Unregister itself when there are no more clients
+			if ( remainingClients.length === 0 ) {
+				self.registration.unregister();
+			}
+
+			break;
+		}
+	}
+} );
+
+self.addEventListener( 'fetch', function ( event ) {
+	const { request } = event;
+	if ( ! request.url.includes( '/wpcom/v2/' ) ) {
+		// Do not propagate this event to other listeners (from MSW)
+		event.stopImmediatePropagation();
+	}
+	// Bypass navigation requests.
+	if ( request.mode === 'navigate' ) {
+		return;
+	}
+
+	// Opening the DevTools triggers the "only-if-cached" request
+	// that cannot be handled by the worker. Bypass such requests.
+	if ( request.cache === 'only-if-cached' && request.mode !== 'same-origin' ) {
+		return;
+	}
+
+	// Bypass all requests when there are no active clients.
+	// Prevents the self-unregistered worked from handling requests
+	// after it's been deleted (still remains active until the next reload).
+	if ( activeClientIds.size === 0 ) {
+		return;
+	}
+
+	// Generate unique request ID.
+	const requestId = crypto.randomUUID();
+	event.respondWith( handleRequest( event, requestId ) );
+} );
+
+async function handleRequest( event, requestId ) {
+	const client = await resolveMainClient( event );
+	const response = await getResponse( event, client, requestId );
+
+	// Send back the response clone for the "response:*" life-cycle events.
+	// Ensure MSW is active and ready to handle the message, otherwise
+	// this message will pend indefinitely.
+	if ( client && activeClientIds.has( client.id ) ) {
+		( async function () {
+			const responseClone = response.clone();
+
+			sendToClient(
+				client,
+				{
+					type: 'RESPONSE',
+					payload: {
+						requestId,
+						isMockedResponse: IS_MOCKED_RESPONSE in response,
+						type: responseClone.type,
+						status: responseClone.status,
+						statusText: responseClone.statusText,
+						body: responseClone.body,
+						headers: Object.fromEntries( responseClone.headers.entries() ),
+					},
+				},
+				[ responseClone.body ]
+			);
+		} )();
+	}
+
+	return response;
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient( event ) {
+	const client = await self.clients.get( event.clientId );
+
+	if ( client?.frameType === 'top-level' ) {
+		return client;
+	}
+
+	const allClients = await self.clients.matchAll( {
+		type: 'window',
+	} );
+
+	return allClients
+		.filter( ( client ) => {
+			// Get only those clients that are currently visible.
+			return client.visibilityState === 'visible';
+		} )
+		.find( ( client ) => {
+			// Find the client ID that's recorded in the
+			// set of clients that have registered the worker.
+			return activeClientIds.has( client.id );
+		} );
+}
+
+async function getResponse( event, client, requestId ) {
+	const { request } = event;
+
+	// Clone the request because it might've been already used
+	// (i.e. its body has been read and sent to the client).
+	const requestClone = request.clone();
+
+	function passthrough() {
+		const headers = Object.fromEntries( requestClone.headers.entries() );
+
+		// Remove internal MSW request header so the passthrough request
+		// complies with any potential CORS preflight checks on the server.
+		// Some servers forbid unknown request headers.
+		delete headers[ 'x-msw-intention' ];
+
+		return fetch( requestClone, { headers } );
+	}
+
+	// Bypass mocking when the client is not active.
+	if ( ! client ) {
+		return passthrough();
+	}
+
+	// Bypass initial page load requests (i.e. static assets).
+	// The absence of the immediate/parent client in the map of the active clients
+	// means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+	// and is not ready to handle requests.
+	if ( ! activeClientIds.has( client.id ) ) {
+		return passthrough();
+	}
+
+	// Bypass requests with the explicit bypass header.
+	// Such requests can be issued by "ctx.fetch()".
+	const mswIntention = request.headers.get( 'x-msw-intention' );
+	if ( [ 'bypass', 'passthrough' ].includes( mswIntention ) ) {
+		return passthrough();
+	}
+
+	// Notify the client that a request has been intercepted.
+	const requestBuffer = await request.arrayBuffer();
+	const clientMessage = await sendToClient(
+		client,
+		{
+			type: 'REQUEST',
+			payload: {
+				id: requestId,
+				url: request.url,
+				mode: request.mode,
+				method: request.method,
+				headers: Object.fromEntries( request.headers.entries() ),
+				cache: request.cache,
+				credentials: request.credentials,
+				destination: request.destination,
+				integrity: request.integrity,
+				redirect: request.redirect,
+				referrer: request.referrer,
+				referrerPolicy: request.referrerPolicy,
+				body: requestBuffer,
+				keepalive: request.keepalive,
+			},
+		},
+		[ requestBuffer ]
+	);
+
+	switch ( clientMessage.type ) {
+		case 'MOCK_RESPONSE': {
+			return respondWithMock( clientMessage.data );
+		}
+
+		case 'MOCK_NOT_FOUND': {
+			return passthrough();
+		}
+	}
+
+	return passthrough();
+}
+
+function sendToClient( client, message, transferrables = [] ) {
+	return new Promise( ( resolve, reject ) => {
+		const channel = new MessageChannel();
+
+		channel.port1.onmessage = ( event ) => {
+			if ( event.data && event.data.error ) {
+				return reject( event.data.error );
+			}
+
+			resolve( event.data );
+		};
+
+		client.postMessage( message, [ channel.port2 ].concat( transferrables.filter( Boolean ) ) );
+	} );
+}
+
+async function respondWithMock( response ) {
+	// Setting response status code to 0 is a no-op.
+	// However, when responding with a "Response.error()", the produced Response
+	// instance will have status code set to 0. Since it's not possible to create
+	// a Response instance with status code 0, handle that use-case separately.
+	if ( response.status === 0 ) {
+		return Response.error();
+	}
+
+	const mockedResponse = new Response( response.body, response );
+
+	Reflect.defineProperty( mockedResponse, IS_MOCKED_RESPONSE, {
+		value: true,
+		enumerable: true,
+	} );
+
+	return mockedResponse;
+}