woocommerce · moon0326 · Jun 13, 2023 · Jun 5, 2023 · Jun 5, 2023 · Jun 5, 2023
diff --git a/packages/js/data/changelog/update-onboarding-types b/packages/js/data/changelog/update-onboarding-types
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Added install-and-activate-async to Onboarding and updated related types
diff --git a/packages/js/data/src/onboarding/actions.ts b/packages/js/data/src/onboarding/actions.ts
@@ -17,8 +17,9 @@ import {
 	TaskListType,
 	TaskType,
 	OnboardingProductTypes,
+	InstallAndActivatePluginsAsyncResponse,
 } from './types';
-import { Plugin } from '../plugins/types';
+import { Plugin, PluginNames } from '../plugins/types';
 
 export function getFreeExtensionsError( error: unknown ) {
 	return {
@@ -465,6 +466,28 @@ export function* actionTask( id: string ) {
 	}
 }
 
+export function* installAndActivatePluginsAsync(
+	plugins: Partial< PluginNames >[]
+) {
+	yield setIsRequesting( 'installAndActivatePluginsAsync', true );
+
+	try {
+		const results: InstallAndActivatePluginsAsyncResponse = yield apiFetch(
+			{
+				path: `${ WC_ADMIN_NAMESPACE }/onboarding/plugins/install-and-activate-async`,
+				method: 'POST',
+				data: { plugins },
+			}
+		);
+
+		return results;
+	} catch ( error ) {
+		throw error;
+	} finally {
+		yield setIsRequesting( 'installAndActivatePluginsAsync', false );
+	}
+}
+
 export type Action = ReturnType<
 	| typeof getFreeExtensionsError
 	| typeof getFreeExtensionsSuccess

diff --git a/packages/js/data/src/onboarding/test/reducer.ts b/packages/js/data/src/onboarding/test/reducer.ts
@@ -49,12 +49,19 @@ describe( 'plugins reducer', () => {
 	it( 'should handle SET_PROFILE_ITEMS', () => {
 		const state = reducer(
 			{
-				// @ts-expect-error - we're only testing profileItems
 				profileItems,
+				freeExtensions: [],
+				taskLists: {},
+				paymentMethods: [],
+				productTypes: {},
+				emailPrefill: '',
+				errors: {},
+				requesting: {},
 			},
 			{
 				type: TYPES.SET_PROFILE_ITEMS,
 				profileItems: { is_agree_marketing: true },
+				replace: false,
 			}
 		);
 
@@ -64,8 +71,14 @@ describe( 'plugins reducer', () => {
 	it( 'should handle SET_PROFILE_ITEMS with replace', () => {
 		const state = reducer(
 			{
-				// @ts-expect-error - we're only testing profileItems
 				profileItems,
+				freeExtensions: [],
+				taskLists: {},
+				paymentMethods: [],
+				productTypes: {},
+				emailPrefill: '',
+				errors: {},
+				requesting: {},
 			},
 			{
 				type: TYPES.SET_PROFILE_ITEMS,

diff --git a/packages/js/data/src/onboarding/types.ts b/packages/js/data/src/onboarding/types.ts
@@ -117,7 +117,7 @@ export type RevenueTypeSlug =
 	| 'more-than-250000';
 
 export type ProfileItems = {
-	business_extensions?: [] | null;
+	business_extensions?: string[] | null;
 	completed?: boolean | null;
 	industry?: Industry[] | null;
 	number_employees?: string | null;
@@ -180,7 +180,21 @@ export type Extension = {
 	image_url: string;
 	manage_url: string;
 	name: string;
+	label?: string;
 	is_built_by_wc: boolean;
 	is_visible: boolean;
 	is_installed?: boolean;
+	is_activated?: boolean;
+	learn_more_link?: string;
+	install_priority?: number;
+};
+
+export type InstallAndActivatePluginsAsyncResponse = {
+	job_id: string;
+	status: 'pending' | 'in-progress' | 'completed' | 'failed';
+	plugins: Array< {
+		status: 'pending' | 'installing' | 'installed' | 'activated' | 'failed';
+		errors: string[];
+		install_duration?: number;
+	} >;
 };
diff --git a/plugins/woocommerce-admin/client/core-profiler/actions/tracks.tsx b/plugins/woocommerce-admin/client/core-profiler/actions/tracks.tsx
@@ -11,6 +11,7 @@ import {
 	CoreProfilerStateMachineContext,
 	UserProfileEvent,
 	BusinessInfoEvent,
+	PluginsLearnMoreLinkClicked,
 } from '..';
 import { POSSIBLY_DEFAULT_STORE_NAMES } from '../pages/BusinessInfo';
 
@@ -89,11 +90,24 @@ const recordTracksBusinessInfoCompleted = (
 	} );
 };
 
+const recordTracksPluginsLearnMoreLinkClicked = (
+	_context: unknown,
+	_event: PluginsLearnMoreLinkClicked,
+	{ action }: { action: unknown }
+) => {
+	const { step } = action as { step: string };
+	recordEvent( `storeprofiler_${ step }_learn_more_link_clicked`, {
+		plugin: _event.payload.plugin,
+		link: _event.payload.learnMoreLink,
+	} );
+};
+
 export default {
 	recordTracksStepViewed,
 	recordTracksStepSkipped,
 	recordTracksIntroCompleted,
 	recordTracksUserProfileCompleted,
 	recordTracksSkipBusinessLocationCompleted,
 	recordTracksBusinessInfoCompleted,
+	recordTracksPluginsLearnMoreLinkClicked,
 };
diff --git a/plugins/woocommerce-admin/client/core-profiler/components/plugin-card/plugin-card.scss b/plugins/woocommerce-admin/client/core-profiler/components/plugin-card/plugin-card.scss
@@ -16,6 +16,10 @@
 		max-width: 100%;
 	}
 
+	.components-checkbox-control__input-container {
+		margin-top: 6px;
+	}
+
 	input {
 		margin: 3px 26px 0 0;
 		width: 20px;
@@ -26,15 +30,15 @@
 	}
 	img {
 		margin-right: 12px;
-		width: 25px;
-		height: 25px;
+		width: 28px;
 		@include breakpoint( '<782px' ) {
 			align-self: center;
 		}
 	}
 	h3 {
 		font-size: 14px;
 		line-height: 20px;
+		font-weight: 500;
 		margin: 0 0 8px 0;
 		padding: 0;
 		@include breakpoint( '<782px' ) {
@@ -43,14 +47,20 @@
 	}
 
 	p {
+		display: inline;
 		font-size: 13px;
 		line-height: 16px;
 		color: $gray-700;
 		margin: 0;
 		padding: 0;
-		a {
-			color: inherit;
+		@include breakpoint( '<782px' ) {
+			display: none;
 		}
+	}
+
+	a {
+		color: $gray-700;
+		margin-left: 5px;
 		@include breakpoint( '<782px' ) {
 			display: none;
 		}
@@ -63,6 +73,7 @@
 			height: 16px;
 			&:focus {
 				box-shadow: none;
+				border-color: #1e1e1e;
 			}
 		}
 		.components-checkbox-control__input[type='checkbox']:checked {

diff --git a/plugins/woocommerce-admin/client/core-profiler/components/plugin-card/plugin-card.tsx b/plugins/woocommerce-admin/client/core-profiler/components/plugin-card/plugin-card.tsx
@@ -19,6 +19,7 @@ export const PluginCard = ( {
 	onChange,
 	checked = false,
 	description,
+	learnMoreLink,
 }: {
 	// Checkbox will be hidden if true
 	installed?: boolean;
@@ -28,6 +29,7 @@ export const PluginCard = ( {
 	description: string | ReactNode;
 	checked?: boolean;
 	onChange?: () => void;
+	learnMoreLink?: ReactNode;
 } ) => {
 	return (
 		<div className="woocommerce-profiler-plugins-plugin-card">
@@ -53,6 +55,7 @@ export const PluginCard = ( {
 					) }
 				</div>
 				<p dangerouslySetInnerHTML={ sanitizeHTML( description ) } />
+				{ learnMoreLink }
 			</div>
 		</div>
 	);

diff --git a/plugins/woocommerce-admin/client/core-profiler/index.tsx b/plugins/woocommerce-admin/client/core-profiler/index.tsx
@@ -106,6 +106,14 @@ export type PluginsInstallationRequestedEvent = {
 	};
 };
 
+export type PluginsLearnMoreLinkClicked = {
+	type: 'PLUGINS_LEARN_MORE_LINK_CLICKED';
+	payload: {
+		plugin: string;
+		learnMoreLink: string;
+	};
+};
+
 // TODO: add types as we develop the pages
 export type OnboardingProfile = {
 	business_choice: BusinessChoice;
@@ -1107,6 +1115,14 @@ export const coreProfilerStateMachineDefinition = createMachine( {
 							],
 							target: 'pluginsSkipped',
 						},
+						PLUGINS_LEARN_MORE_LINK_CLICKED: {
+							actions: [
+								{
+									type: 'recordTracksPluginsLearnMoreLinkClicked',
+									step: 'plugins',
+								},
+							],
+						},
 						PLUGINS_INSTALLATION_REQUESTED: {
 							target: 'installPlugins',
 							actions: [ 'assignPluginsSelected' ],
@@ -1266,6 +1282,7 @@ export const coreProfilerStateMachineDefinition = createMachine( {
 						data: ( context ) => {
 							return {
 								selectedPlugins: context.pluginsSelected,
+								pluginsAvailable: context.pluginsAvailable,
 							};
 						},
 					},

diff --git a/plugins/woocommerce-admin/client/core-profiler/pages/Plugins.tsx b/plugins/woocommerce-admin/client/core-profiler/pages/Plugins.tsx
@@ -11,7 +11,10 @@ import { useState } from 'react';
 /**
  * Internal dependencies
  */
-import { CoreProfilerStateMachineContext } from '../index';
+import {
+	CoreProfilerStateMachineContext,
+	PluginsLearnMoreLinkClicked,
+} from '../index';
 import { PluginsInstallationRequestedEvent, PluginsPageSkippedEvent } from '..';
 import { Heading } from '../components/heading/heading';
 import { Navigation } from '../components/navigation/navigation';
@@ -36,13 +39,16 @@ export const Plugins = ( {
 }: {
 	context: CoreProfilerStateMachineContext;
 	sendEvent: (
-		payload: PluginsInstallationRequestedEvent | PluginsPageSkippedEvent
+		payload:
+			| PluginsInstallationRequestedEvent
+			| PluginsPageSkippedEvent
+			| PluginsLearnMoreLinkClicked
 	) => void;
 	navigationProgress: number;
 } ) => {
 	const [ selectedPlugins, setSelectedPlugins ] = useState<
 		ExtensionList[ 'plugins' ]
-	>( context.pluginsAvailable.filter( ( plugin ) => ! plugin.is_installed ) );
+	>( context.pluginsAvailable.filter( ( plugin ) => ! plugin.is_activated ) );
 
 	const setSelectedPlugin = ( plugin: Extension ) => {
 		setSelectedPlugins(
@@ -136,10 +142,29 @@ export const Plugins = ( {
 				) }
 				<div className="woocommerce-profiler-plugins__list">
 					{ context.pluginsAvailable.map( ( plugin ) => {
+						const learnMoreLink = plugin.learn_more_link ? (
+							<Link
+								onClick={ () => {
+									sendEvent( {
+										type: 'PLUGINS_LEARN_MORE_LINK_CLICKED',
+										payload: {
+											plugin: plugin.key,
+											learnMoreLink:
+												plugin.learn_more_link ?? '',
+										},
+									} );
+								} }
+								href={ plugin.learn_more_link }
+								target="_blank"
+								type="external"
+							>
+								{ __( 'Learn More', 'woocommerce' ) }
+							</Link>
+						) : null;
 						return (
 							<PluginCard
 								key={ `checkbox-control-${ plugin.key }` }
-								installed={ plugin.is_installed }
+								installed={ plugin.is_activated }
 								onChange={ () => {
 									setSelectedPlugin( plugin );
 								} }
@@ -156,8 +181,9 @@ export const Plugins = ( {
 										/>
 									) : null
 								}
-								title={ plugin.name }
+								title={ plugin.label }
 								description={ plugin.description }
+								learnMoreLink={ learnMoreLink }
 							/>
 						);
 					} ) }