Added personalization to purchase extension task (https://github.com/woocommerce/woocommerce-admin/pull/4849)

* Added personalization to purchase extension task

This commit adds personalization to purchase extension task

* Removed unnecessary naming fix

This commit removes an unnecessary naming fix

* Corrected param description

* Solved translation problem

* Naming corrected

The method 'getGroupedOnboardingProducts' was given a more accurate name.

* Modified string substitution

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>

plugins/woocommerce-admin/client/dashboard/utils.js

@@ -49,14 +49,81 @@ export function getProductIdsForCart(
 	profileItems,
 	includeInstalledItems = false,
 	installedPlugins
+) {
+	const productList = getProductList(
+		profileItems,
+		includeInstalledItems,
+		installedPlugins
+	);
+	const productIds = productList.map(
+		( product ) => product.id || product.product
+	);
+	return productIds;
+}
+
+/**
+ * Gets the labeled/categorized product names and types for items based on the product types and theme selected in the onboarding profiler.
+ *
+ * @param {Object} profileItems Onboarding profile.
+ * @param {Array} installedPlugins Installed plugins.
+ * @return {Array} Objects with labeled/categorized product names and types.
+ */
+export function getCategorizedOnboardingProducts(
+	profileItems,
+	installedPlugins
+) {
+	const productList = {};
+	productList.products = getProductList(
+		profileItems,
+		true,
+		installedPlugins
+	);
+	productList.remainingProducts = getProductList(
+		profileItems,
+		false,
+		installedPlugins
+	);
+
+	const uniqueItemsList = [
+		...new Set( [
+			...productList.products,
+			...productList.remainingProducts,
+		] ),
+	];
+
+	productList.uniqueItemsList = uniqueItemsList.map( ( product ) => {
+		let cleanedProduct;
+		if ( product.label ) {
+			cleanedProduct = { type: 'extension', name: product.label };
+		} else {
+			cleanedProduct = { type: 'theme', name: product.title };
+		}
+		return cleanedProduct;
+	} );
+
+	return productList;
+}
+
+/**
+ * Gets a product list for items based on the product types and theme selected in the onboarding profiler.
+ *
+ * @param {Object} profileItems Onboarding profile.
+ * @param {boolean} includeInstalledItems Include installed items in returned product list.
+ * @param {Array} installedPlugins Installed plugins.
+ * @return {Array} Products.
+ */
+export function getProductList(
+	profileItems,
+	includeInstalledItems = false,
+	installedPlugins
 ) {
 	const onboarding = getSetting( 'onboarding', {} );
-	const productIds = [];
+	const productList = [];
 
 	// The population of onboarding.productTypes only happens if the task list should be shown
 	// so bail early if it isn't present.
 	if ( ! onboarding.productTypes ) {
-		return productIds;
+		return productList;
 	}
 
 	const productTypes = profileItems.product_types || [];
@@ -70,7 +137,7 @@ export function getProductIdsForCart(
 					onboarding.productTypes[ productType ].slug
 				) )
 		) {
-			productIds.push( onboarding.productTypes[ productType ].product );
+			productList.push( onboarding.productTypes[ productType ] );
 		}
 	} );
 
@@ -84,10 +151,10 @@ export function getProductIdsForCart(
 		getPriceValue( theme.price ) > 0 &&
 		( includeInstalledItems || ! theme.is_installed )
 	) {
-		productIds.push( theme.id );
+		productList.push( theme );
 	}
 
-	return productIds;
+	return productList;
 }
 
 /**

plugins/woocommerce-admin/client/task-list/tasks.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { applyFilters } from '@wordpress/hooks';
 
 /**
@@ -20,7 +20,7 @@ import { Fragment } from '@wordpress/element';
  * Internal dependencies
  */
 import Appearance from './tasks/appearance';
-import { getProductIdsForCart } from 'dashboard/utils';
+import { getCategorizedOnboardingProducts } from 'dashboard/utils';
 import Products from './tasks/products';
 import Shipping from './tasks/shipping';
 import Tax from './tasks/tax';
@@ -70,17 +70,13 @@ export function getAllTasks( {
 		shippingZonesCount: 0,
 	} );
 
-	const productIds = getProductIdsForCart(
+	const groupedProducts = getCategorizedOnboardingProducts(
 		profileItems,
-		true,
-		installedPlugins
-	);
-	const remainingProductIds = getProductIdsForCart(
-		profileItems,
-		false,
 		installedPlugins
 	);
 
+	const { products, remainingProducts, uniqueItemsList } = groupedProducts;
+
 	const paymentsCompleted = Boolean(
 		taskListPayments && taskListPayments.completed
 	);
@@ -95,6 +91,17 @@ export function getAllTasks( {
 		product_types: productTypes,
 	} = profileItems;
 
+	let purchaseAndInstallText = __( 'Purchase & install extensions' );
+
+	if ( uniqueItemsList.length === 1 ) {
+		const { name: itemName, type: itemType } = uniqueItemsList[ 0 ];
+		const purchaseAndInstallFormat =
+			itemType === 'theme'
+				? __( 'Purchase & install %s theme', 'woocommerce-admin' )
+				: __( 'Purchase & install %s extension', 'woocommerce-admin' );
+		purchaseAndInstallText = sprintf( purchaseAndInstallFormat, itemName );
+	}
+
 	const tasks = [
 		{
 			key: 'store_details',
@@ -112,16 +119,16 @@ export function getAllTasks( {
 		},
 		{
 			key: 'purchase',
-			title: __( 'Purchase & install extensions', 'woocommerce-admin' ),
+			title: purchaseAndInstallText,
 			container: null,
 			onClick: () => {
 				recordEvent( 'tasklist_click', {
 					task_name: 'purchase',
 				} );
-				return remainingProductIds.length ? toggleCartModal() : null;
+				return remainingProducts.length ? toggleCartModal() : null;
 			},
-			visible: productIds.length,
-			completed: productIds.length && ! remainingProductIds.length,
+			visible: products.length,
+			completed: products.length && ! remainingProducts.length,
 			time: __( '2 minutes', 'woocommerce-admin' ),
 			isDismissable: true,
 		},