A4A > Migrations: Add steps for WordPress.com & Pressable self migrat…

…ion tool. (#96525)

* add the self migration tool steps for WordPress.com & Pressable

* fix full page reload and add event tracking

* minor style fixes

client/a8c-for-agencies/components/a4a-contact-support-widget/get-default-product.ts

@@ -1,8 +1,14 @@
-import { A4A_MARKETPLACE_HOSTING_PRESSABLE_LINK } from '../sidebar-menu/lib/constants';
+import {
+	A4A_MARKETPLACE_HOSTING_PRESSABLE_LINK,
+	A4A_MIGRATIONS_MIGRATE_TO_PRESSABLE_LINK,
+	A4A_MIGRATIONS_MIGRATE_TO_WPCOM_LINK,
+} from '../sidebar-menu/lib/constants';
 
 // This map is used to determine the product when the user is on a specific page to preselect the product in the form.
 const pathToProductMap: Record< string, string > = {
 	[ A4A_MARKETPLACE_HOSTING_PRESSABLE_LINK ]: 'pressable',
+	[ A4A_MIGRATIONS_MIGRATE_TO_PRESSABLE_LINK ]: 'pressable',
+	[ A4A_MIGRATIONS_MIGRATE_TO_WPCOM_LINK ]: 'wpcom',
 };
 
 export default function getDefaultProduct(): string {

client/a8c-for-agencies/components/task-steps/index.tsx

@@ -4,6 +4,8 @@ import { Icon, check } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 import { useState } from 'react';
 import { preventWidows } from 'calypso/lib/formatting';
+import { useDispatch } from 'calypso/state';
+import { recordTracksEvent } from 'calypso/state/analytics/actions';
 
 import './style.scss';
 
@@ -12,29 +14,41 @@ export interface TaskStepItem {
 	count: number;
 	title: string;
 	description: string;
-	isCompleted: boolean;
-	buttonProps: {
+	buttonProps?: {
 		label: string;
 		href: string;
 		variant: 'primary' | 'secondary';
 		icon?: JSX.Element;
+		isExternal?: boolean;
+		eventName?: string;
 	};
 }
 
+export interface TaskStepItemWithCompletion extends TaskStepItem {
+	isCompleted: boolean;
+}
+
 interface TaskStepProps {
-	step: TaskStepItem;
+	step: TaskStepItemWithCompletion;
 	toggleTaskStatus: ( step: TaskStepItem ) => void;
 }
 
 interface TaskStepsProps {
 	heading: string;
 	subheading: string;
-	steps: TaskStepItem[];
+	steps: TaskStepItemWithCompletion[];
 	sessionStorageKey: string;
 }
 
 export function TaskStep( { step, toggleTaskStatus }: TaskStepProps ) {
 	const translate = useTranslate();
+	const dispatch = useDispatch();
+
+	const handleOnClick = () => {
+		if ( step.buttonProps?.eventName ) {
+			dispatch( recordTracksEvent( step.buttonProps?.eventName ) );
+		}
+	};
 
 	return (
 		<FoldableCard
@@ -51,14 +65,19 @@ export function TaskStep( { step, toggleTaskStatus }: TaskStepProps ) {
 					<div className="task-step__title">{ step.title }</div>
 				</div>
 			}
-			expanded
+			expanded={ ! step.isCompleted }
 			clickableHeader
 			summary={ false }
 		>
 			<div className="task-step__description">{ step.description }</div>
 			<div className="task-step__button-container">
 				{ step.buttonProps && (
-					<Button variant={ step.buttonProps.variant } href={ step.buttonProps.href }>
+					<Button
+						target={ step.buttonProps?.isExternal ? '_blank' : undefined }
+						variant={ step.buttonProps.variant }
+						href={ step.buttonProps.href }
+						onClick={ handleOnClick }
+					>
 						{ step.buttonProps.label }
 						{ step.buttonProps.icon && <Icon icon={ step.buttonProps.icon } size={ 24 } /> }
 					</Button>
@@ -73,6 +92,7 @@ export function TaskStep( { step, toggleTaskStatus }: TaskStepProps ) {
 
 export function TaskSteps( { heading, subheading, steps, sessionStorageKey }: TaskStepsProps ) {
 	const translate = useTranslate();
+	const dispatch = useDispatch();
 
 	const updatedStepIds = JSON.parse( sessionStorage.getItem( sessionStorageKey ) || '[]' );
 	const [ completedStepIds, setCompletedStepIds ] = useState< string[] >( updatedStepIds );
@@ -85,16 +105,28 @@ export function TaskSteps( { heading, subheading, steps, sessionStorageKey }: Ta
 	} );
 
 	const toggleTaskStatus = ( step: TaskStepItem ) => {
-		const updatedStepIds = completedStepIds.includes( step.stepId )
+		const checkIfTaskIsCompleted = completedStepIds.includes( step.stepId );
+		const updatedStepIds = checkIfTaskIsCompleted
 			? completedStepIds.filter( ( id ) => id !== step.stepId )
 			: [ ...completedStepIds, step.stepId ];
 		setCompletedStepIds( updatedStepIds );
 		sessionStorage.setItem( sessionStorageKey, JSON.stringify( updatedStepIds ) );
+		dispatch(
+			recordTracksEvent(
+				checkIfTaskIsCompleted
+					? 'calypso_a8c_for_agencies_reset_task'
+					: 'calypso_a8c_for_agencies_mark_task_as_done',
+				{
+					task_id: step.stepId,
+				}
+			)
+		);
 	};
 
 	const resetAllTasks = () => {
 		setCompletedStepIds( [] );
 		sessionStorage.removeItem( sessionStorageKey );
+		dispatch( recordTracksEvent( 'calypso_a8c_for_agencies_reset_all_tasks' ) );
 	};
 
 	return (
@@ -110,7 +142,7 @@ export function TaskSteps( { heading, subheading, steps, sessionStorageKey }: Ta
 			</div>
 			<div className="task-steps__steps">
 				{ updatedSteps.map( ( step ) => (
-					<TaskStep key={ step.count } step={ step } toggleTaskStatus={ toggleTaskStatus } />
+					<TaskStep key={ step.stepId } step={ step } toggleTaskStatus={ toggleTaskStatus } />
 				) ) }
 			</div>
 		</div>

client/a8c-for-agencies/components/task-steps/style.scss

@@ -1,6 +1,12 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
 
+.task-steps {
+	a {
+		text-decoration: underline;
+		color: unset;
+	}
+}
 
 .task-steps__steps {
 	display: flex;
@@ -32,6 +38,7 @@
 
 .task-steps__subheading {
 	@include a4a-font-body-lg;
+	color: var(--color-accent-60);
 }
 
 .task-step {
@@ -45,6 +52,10 @@
 		gap: 16px;
 	}
 
+	.foldable-card__secondary {
+		flex: unset;
+	}
+
 	&.card.foldable-card.is-expanded  {
 		margin: 0 0 16px 0;
 
@@ -53,7 +64,7 @@
 			border-top: none;
 
 			@include break-large {
-				padding: 20px 56px 16px 56px;
+				padding: 20px 72px 16px;
 			}
 		}
 	}
@@ -62,15 +73,10 @@
 .task-step__button-container {
 	display: flex;
 	gap: 10px;
-	flex-direction: row;
-	flex-wrap: wrap;
-
-	.components-button {
-		flex: 1 1 auto;
+	flex-direction: column;
 
-		@include break-large {
-			flex: unset;
-		}
+	@include break-large {
+		flex-direction: row;
 	}
 
 	svg {
@@ -85,7 +91,11 @@
 }
 
 .task-step__title {
-	@include a4a-font-heading-lg
+	@include a4a-font-heading-md($font-size: 19px);
+
+	@include break-large {
+		font-size: rem(20px)
+	}
 }
 
 .task-step__description {

client/a8c-for-agencies/sections/migrations/primary/migrations-commissions/empty-state.tsx

@@ -68,7 +68,7 @@ export default function MigrationsCommissionsEmptyState( {
 									}
 								) }
 							</li>
-							<li>{ translate( 'Tag the connected sites using the button below..' ) }</li>
+							<li>{ translate( 'Tag the connected sites using the button below.' ) }</li>
 						</ul>
 
 						<Button variant="primary" onClick={ onTagMySelfMigratedSitesClick }>

client/a8c-for-agencies/sections/migrations/primary/self-migration-tool/index.tsx

@@ -8,9 +8,11 @@ import LayoutHeader, {
 import LayoutTop from 'calypso/a8c-for-agencies/components/layout/top';
 import MobileSidebarNavigation from 'calypso/a8c-for-agencies/components/sidebar/mobile-sidebar-navigation';
 import { A4A_MIGRATIONS_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
-import { TaskSteps, TaskStepItem } from 'calypso/a8c-for-agencies/components/task-steps';
+import { TaskSteps } from 'calypso/a8c-for-agencies/components/task-steps';
 import { getMigrationInfo } from './migration-info';
 
+import './style.scss';
+
 const SelfMigrationTool = ( { type }: { type: 'pressable' | 'wpcom' } ) => {
 	const translate = useTranslate();
 
@@ -23,7 +25,7 @@ const SelfMigrationTool = ( { type }: { type: 'pressable' | 'wpcom' } ) => {
 			...step,
 			isCompleted: false,
 		};
-	} ) as TaskStepItem[];
+	} );
 
 	return (
 		<Layout className="self-migration-tool" title={ pageTitle } wide>