@automattic/launchpad 1.2.4 → 1.3.1

package/src/use-launchpad.ts

@@ -0,0 +1,249 @@
+import { recordTracksEvent } from '@automattic/calypso-analytics';
+import * as oauthToken from '@automattic/oauth-token';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+import wpcomRequest, { canAccessWpcomApis } from './wpcom-request';
+
+interface APIFetchOptions {
+	global: boolean;
+	path: string;
+}
+
+interface Task {
+	id: string;
+	completed: boolean;
+	disabled: boolean;
+	title: string;
+	subtitle?: string;
+	badgeText?: string;
+	actionDispatch?: () => void;
+	isLaunchTask?: boolean;
+	warning?: boolean;
+	order?: number;
+}
+
+export interface ChecklistStatuses {
+	links_edited?: boolean;
+	site_edited?: boolean;
+	site_launched?: boolean;
+	first_post_published?: boolean;
+	video_uploaded?: boolean;
+	publish_first_course?: boolean;
+	plan_selected?: boolean;
+	plan_completed?: boolean;
+	domain_upsell_deferred?: boolean;
+}
+
+type LaunchpadScreen = 'full' | 'off' | 'skipped' | 'minimized';
+
+export interface LaunchpadResponse {
+	site_intent?: string | null;
+	launchpad_screen?: LaunchpadScreen | boolean | null | undefined;
+	checklist?: Task[] | null;
+	checklist_statuses?: ChecklistStatuses;
+	is_enabled: boolean;
+	is_dismissed: boolean;
+	is_dismissible: boolean;
+	title?: string | null;
+}
+
+type LaunchpadUpdateSettings = {
+	checklist_statuses?: Record< string, boolean >;
+	is_checklist_dismissed?: {
+		slug: string;
+		is_dismissed?: boolean;
+		dismissed_until?: number | null;
+	};
+	launchpad_screen?: 'off' | 'minimized' | 'full' | 'skipped';
+};
+
+export type UseLaunchpadOptions = {
+	onSuccess?: ( data: LaunchpadResponse ) => LaunchpadResponse;
+};
+
+export const fetchLaunchpad = (
+	siteSlug: SiteSlug,
+	checklistSlug?: string | null,
+	launchpadContext?: string
+): Promise< LaunchpadResponse > => {
+	const slug = encodeURIComponent( siteSlug as string );
+	const checklistSlugEncoded = checklistSlug ? encodeURIComponent( checklistSlug ) : null;
+	const launchpadContextEncoded = launchpadContext ? encodeURIComponent( launchpadContext ) : null;
+	const queryArgs = {
+		_locale: 'user',
+		...( checklistSlug && { checklist_slug: checklistSlugEncoded } ),
+		...( launchpadContext && { launchpad_context: launchpadContextEncoded } ),
+	};
+	const token = oauthToken.getToken();
+	return canAccessWpcomApis()
+		? wpcomRequest( {
+				path: addQueryArgs( `/sites/${ slug }/launchpad`, queryArgs ),
+				apiNamespace: 'wpcom/v2',
+				method: 'GET',
+				token: typeof token === 'string' ? token : undefined,
+			} )
+		: apiFetch( {
+				global: true,
+				path: addQueryArgs( '/wpcom/v2/launchpad', queryArgs ),
+			} as APIFetchOptions );
+};
+
+const getKey = ( siteSlug: SiteSlug, checklistSlug?: string | null ) => {
+	return [ 'launchpad', siteSlug, checklistSlug ];
+};
+
+const addOrderToTask = ( task: Task, index: number ) => {
+	task.order = index;
+	return task;
+};
+
+export function sortLaunchpadTasksByCompletionStatus( response: LaunchpadResponse ) {
+	const tasks = response.checklist || [];
+	const completedTasks = tasks.filter( ( task: Task ) => task.completed );
+	const incompleteTasks = tasks.filter( ( task: Task ) => ! task.completed );
+	response.checklist = [ ...completedTasks, ...incompleteTasks ].map( addOrderToTask );
+	return response;
+}
+
+export function defaultSuccessCallback( response: LaunchpadResponse ) {
+	const tasks = response.checklist || [];
+	response.checklist = tasks.map( addOrderToTask );
+
+	return response;
+}
+
+type SiteSlug = string | number | null;
+
+export const useLaunchpad = (
+	siteSlug: SiteSlug,
+	checklistSlug?: string | null,
+	options?: UseLaunchpadOptions,
+	launchpad_context?: string | undefined
+) => {
+	const key = getKey( siteSlug, checklistSlug );
+	const onSuccessCallback = options?.onSuccess || defaultSuccessCallback;
+
+	return useQuery( {
+		queryKey: key,
+		queryFn: () =>
+			fetchLaunchpad( siteSlug, checklistSlug, launchpad_context ).then( onSuccessCallback ),
+		retry: 3,
+		initialData: {
+			site_intent: '',
+			launchpad_screen: undefined,
+			checklist_statuses: {},
+			checklist: null,
+			is_enabled: false,
+			is_dismissed: false,
+			is_dismissible: false,
+			title: null,
+		},
+		enabled: Boolean( siteSlug ),
+	} );
+};
+
+export const useSortedLaunchpadTasks = (
+	siteSlug: SiteSlug,
+	checklistSlug?: string | null,
+	launchpadContext?: string
+) => {
+	const launchpadOptions = {
+		onSuccess: sortLaunchpadTasksByCompletionStatus,
+	};
+
+	return useLaunchpad( siteSlug, checklistSlug, launchpadOptions, launchpadContext );
+};
+
+export const updateLaunchpadSettings = (
+	siteSlug: SiteSlug,
+	settings: LaunchpadUpdateSettings = {}
+) => {
+	const slug = siteSlug ? encodeURIComponent( siteSlug ) : null;
+	const token = oauthToken.getToken();
+	return canAccessWpcomApis()
+		? wpcomRequest( {
+				path: `/sites/${ slug }/launchpad`,
+				apiNamespace: 'wpcom/v2',
+				method: 'PUT',
+				body: settings,
+				token: typeof token === 'string' ? token : undefined,
+			} )
+		: apiFetch( {
+				global: true,
+				path: '/wpcom/v2/launchpad',
+				method: 'PUT',
+				data: settings,
+			} as APIFetchOptions );
+};
+
+export interface PermanentDismiss {
+	isDismissed: boolean;
+}
+export interface TemporaryDismiss {
+	dismissBy: '+ 1 day' | '+ 1 week';
+}
+
+type DismissSettings = PermanentDismiss | TemporaryDismiss;
+
+const isPermanentDismiss = ( settings: DismissSettings ): settings is PermanentDismiss =>
+	'isDismissed' in settings;
+
+const isTemporaryDismiss = ( settings: DismissSettings ): settings is TemporaryDismiss =>
+	'dismissBy' in settings;
+
+const getDismissParams = ( settings: DismissSettings ) => {
+	if ( isPermanentDismiss( settings ) ) {
+		return {
+			is_dismissed: settings.isDismissed,
+		};
+	}
+
+	if ( isTemporaryDismiss( settings ) ) {
+		return {
+			dismiss_by: settings.dismissBy,
+		};
+	}
+};
+
+export const useLaunchpadDismisser = (
+	siteSlug: SiteSlug,
+	checklistSlug: string,
+	launchpadContext: string
+) => {
+	const queryClient = useQueryClient();
+	const key = getKey( siteSlug, checklistSlug );
+
+	return useMutation( {
+		mutationFn: ( settings: DismissSettings ) => {
+			return updateLaunchpadSettings( siteSlug, {
+				is_checklist_dismissed: {
+					slug: checklistSlug,
+					...getDismissParams( settings ),
+				},
+			} );
+		},
+		onMutate: async () => {
+			await queryClient.cancelQueries( { queryKey: key } );
+			const previous = queryClient.getQueryData< LaunchpadResponse >( key );
+
+			queryClient.setQueryData( key, {
+				...previous,
+				is_dismissed: true,
+			} );
+
+			return { previous };
+		},
+		onSuccess: () => {
+			recordTracksEvent( 'calypso_launchpad_dismiss_guide', {
+				checklist_slug: checklistSlug,
+				context: launchpadContext,
+			} );
+		},
+		onError: ( _, _2, context ) => {
+			if ( context?.previous ) {
+				queryClient.setQueryData( key, context?.previous );
+			}
+		},
+	} );
+};

package/src/use-site.ts

@@ -0,0 +1,36 @@
+import { useQuery } from '@tanstack/react-query';
+import wpcomRequest, { canAccessWpcomApis } from './wpcom-request';
+import type { LaunchpadSiteDetails } from './site-type';
+
+/**
+ * Fetches the site fields Launchpad reads. The response is the full site; only these
+ * fields are cached. Skipped where the proxy is unavailable, since there is no REST
+ * fallback, and kept for the session — both matching the site store this replaces.
+ */
+export const useSite = ( siteSlug: string | null ) => {
+	const { data } = useQuery< LaunchpadSiteDetails >( {
+		queryKey: [ 'launchpad-site', siteSlug ],
+		queryFn: async () => {
+			const site = await wpcomRequest< LaunchpadSiteDetails >( {
+				path: `/sites/${ encodeURIComponent( siteSlug as string ) }`,
+				apiVersion: '1.1',
+				query: 'force=wpcom',
+			} );
+
+			return {
+				slug: site?.slug,
+				URL: site?.URL,
+				options: {
+					site_intent: site?.options?.site_intent,
+					site_goals: site?.options?.site_goals,
+				},
+			};
+		},
+		enabled: Boolean( siteSlug ) && canAccessWpcomApis(),
+		staleTime: Infinity,
+		gcTime: Infinity,
+		meta: { persist: false },
+	} );
+
+	return data ?? null;
+};

package/src/use-tracking/index.tsx

@@ -1,13 +1,13 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { useEffect, useMemo } from 'react';
+import type { LaunchpadSiteDetails } from '../site-type';
 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;
+	site: LaunchpadSiteDetails | null | undefined;
 	flow?: string;
 }
 

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

@@ -2,7 +2,7 @@ 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';
+import type { LaunchpadSiteDetails } from '../../site-type';
 
 jest.mock( '@automattic/calypso-analytics' );
 
@@ -12,7 +12,7 @@ describe( 'useTracking', () => {
 	const buildDefaultProps = ( options = {} ) => ( {
 		checklistSlug: 'site-setup-checklist',
 		context: 'customer-home',
-		site: { options: { site_intent: 'build' } } as SiteDetails,
+		site: { options: { site_intent: 'build' } } as LaunchpadSiteDetails,
 		tasks: [
 			buildTask( { id: 'task-1', completed: true } ),
 			buildTask( { id: 'task-2', completed: false } ),
@@ -76,7 +76,7 @@ describe( 'useTracking', () => {
 
 		expect( recordTracksEvent ).toHaveBeenCalledTimes( 0 );
 
-		rerender( { options: { site_intent: 'some-site-intent' } } as SiteDetails );
+		rerender( { options: { site_intent: 'some-site-intent' } } as LaunchpadSiteDetails );
 
 		expect( recordTracksEvent ).toHaveBeenCalledWith(
 			'calypso_launchpad_tasklist_viewed',

package/src/wpcom-request.ts

@@ -0,0 +1,26 @@
+import wpcomProxyRequest, {
+	type WpcomRequestParams,
+	canAccessWpcomApis as originalCanAccessWpcomApis,
+} from 'wpcom-proxy-request';
+
+type WpcomRequester = < T >( params: WpcomRequestParams ) => Promise< T >;
+
+let customRequester: WpcomRequester | null = null;
+
+export function setRequester( requester: WpcomRequester ): void {
+	customRequester = requester;
+}
+
+export default function wpcomRequest< T >( params: WpcomRequestParams ): Promise< T > {
+	if ( customRequester ) {
+		return customRequester( params );
+	}
+	return wpcomProxyRequest( params );
+}
+
+export function canAccessWpcomApis(): boolean {
+	if ( customRequester ) {
+		return true;
+	}
+	return originalCanAccessWpcomApis();
+}

package/tsconfig.json

@@ -7,9 +7,5 @@
 	},
 	"include": [ "src" ],
 	"exclude": [ "**/test/*" ],
-	"references": [
-		{ "path": "../viewport" },
-		{ "path": "../components" },
-		{ "path": "../data-stores" }
-	]
+	"references": [ { "path": "../viewport" } ]
 }