My Jetpack: Add red bubble and notice when paid plan needs plugin install or activation.

projects/packages/my-jetpack/_inc/components/connected-product-card/index.tsx

@@ -8,8 +8,8 @@ import { useCallback, useEffect } from 'react';
  * Internal dependencies
  */
 import { MyJetpackRoutes, PRODUCT_STATUSES } from '../../constants';
-import useActivate from '../../data/products/use-activate';
-import useInstallStandalonePlugin from '../../data/products/use-install-standalone-plugin';
+import useActivatePlugins from '../../data/products/use-activate-plugins';
+import useInstallPlugins from '../../data/products/use-install-plugins';
 import useProduct from '../../data/products/use-product';
 import useAnalytics from '../../hooks/use-analytics';
 import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
@@ -54,9 +54,8 @@ const ConnectedProductCard: FC< ConnectedProductCardProps > = ( {
 	const { isRegistered, isUserConnected } = useMyJetpackConnection();
 	const { recordEvent } = useAnalytics();
 
-	const { install: installStandalonePlugin, isPending: isInstalling } =
-		useInstallStandalonePlugin( slug );
-	const { activate, isPending: isActivating } = useActivate( slug );
+	const { install: installStandalonePlugin, isPending: isInstalling } = useInstallPlugins( slug );
+	const { activate, isPending: isActivating } = useActivatePlugins( slug );
 	const { detail, refetch, isLoading: isProductDataLoading } = useProduct( slug );
 	const {
 		name,

projects/packages/my-jetpack/_inc/components/connection-status-card/index.tsx

@@ -5,7 +5,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { Icon, info, check, lockOutline } from '@wordpress/icons';
 import clsx from 'clsx';
 import { useState, useCallback, useMemo } from 'react';
-import { useAllProducts } from '../../data/products/use-product';
+import { useAllProducts } from '../../data/products/use-all-products';
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import getProductSlugsThatRequireUserConnection from '../../data/utils/get-product-slugs-that-require-user-connection';
 import useAnalytics from '../../hooks/use-analytics';

projects/packages/my-jetpack/_inc/components/connections-section/index.jsx

@@ -1,5 +1,5 @@
 import { MyJetpackRoutes } from '../../constants';
-import { useAllProducts } from '../../data/products/use-product';
+import { useAllProducts } from '../../data/products/use-all-products';
 import getProductSlugsThatRequireUserConnection from '../../data/utils/get-product-slugs-that-require-user-connection';
 import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
 import useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate';

projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx

@@ -10,6 +10,7 @@ import {
 	ZendeskChat,
 	useBreakpointMatch,
 	ActionButton,
+	GlobalNotices,
 } from '@automattic/jetpack-components';
 import { __, _x } from '@wordpress/i18n';
 import clsx from 'clsx';
@@ -165,6 +166,7 @@ export default function MyJetpackScreen() {
 			<hr className={ styles.separator } />
 
 			<IDCModal />
+			<GlobalNotices />
 			{ ! isNewUser && (
 				<Container horizontalSpacing={ 0 }>
 					<Col>

projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss

@@ -93,6 +93,14 @@
 	flex-grow: 1;
 	display: flex;
 
+	a {
+		color: var( --jp-black );
+		&:hover, &:focus {
+			text-decoration: underline;
+			text-decoration-thickness: 2px;
+		}
+	}
+
 	& :global(.terms-of-service) {
 		font-size: var(--font-body-small);
 		color: var( --jp-gray-70 );
@@ -120,6 +128,15 @@
 			background-color: #f1f1f1
 		}
 	}
+
+	& :global(.plugins-list) {
+		& :global(.plugin-item) {
+			> span {
+				font-size: calc( var( --font-body-extra-small ) + 1px );
+				margin-inline-start: 5px;
+			}
+		}
+	}
 }
 
 .separator {

projects/packages/my-jetpack/_inc/components/plans-section/index.tsx

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import { useCallback } from 'react';
 import { MyJetpackRoutes, PRODUCT_STATUSES } from '../../constants';
 import { QUERY_PURCHASES_KEY, REST_API_SITE_PURCHASES_ENDPOINT } from '../../data/constants';
-import { useAllProducts } from '../../data/products/use-product';
+import { useAllProducts } from '../../data/products/use-all-products';
 import useSimpleQuery from '../../data/use-simple-query';
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import useAnalytics from '../../hooks/use-analytics';

projects/packages/my-jetpack/_inc/components/product-card/use-pricing-data.ts

@@ -2,8 +2,8 @@ import { useProductCheckoutWorkflow } from '@automattic/jetpack-connection';
 import { __ } from '@wordpress/i18n';
 import { useCallback } from 'react';
 import { PRODUCT_STATUSES } from '../../constants';
-import useActivate from '../../data/products/use-activate';
-import useInstallStandalonePlugin from '../../data/products/use-install-standalone-plugin';
+import useActivatePlugins from '../../data/products/use-activate-plugins';
+import useInstallPlugins from '../../data/products/use-install-plugins';
 import useProduct from '../../data/products/use-product';
 import { ProductCamelCase } from '../../data/types';
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
@@ -138,11 +138,11 @@ const usePricingData = ( slug: string ) => {
 	const { wpcomProductSlug, wpcomFreeProductSlug, ...data } = parsePricingData(
 		detail.pricingForUi
 	);
-	const { install: installPlugin, isPending: isInstalling } = useInstallStandalonePlugin( slug );
+	const { install: installPlugin, isPending: isInstalling } = useInstallPlugins( slug );
 
 	const { isUserConnected } = useMyJetpackConnection();
 	const { myJetpackUrl, siteSuffix } = getMyJetpackWindowInitialState();
-	const { activate, isPending: isActivating } = useActivate( slug );
+	const { activate, isPending: isActivating } = useActivatePlugins( slug );
 	const { run: runCheckout } = useProductCheckoutWorkflow( {
 		from: 'my-jetpack',
 		productSlug: wpcomProductSlug,

projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx

@@ -18,7 +18,7 @@ import React, { useCallback, useEffect } from 'react';
  */
 import { useParams } from 'react-router-dom';
 import { MyJetpackRoutes } from '../../constants';
-import useActivate from '../../data/products/use-activate';
+import useActivatePlugins from '../../data/products/use-activate-plugins';
 import useProduct from '../../data/products/use-product';
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import useAnalytics from '../../hooks/use-analytics';
@@ -78,7 +78,7 @@ export default function ProductInterstitial( {
 } ) {
 	const { detail } = useProduct( slug );
 	const { detail: bundleDetail } = useProduct( bundle );
-	const { activate, isPending: isActivating, isSuccess } = useActivate( slug );
+	const { activate, isPending: isActivating, isSuccess } = useActivatePlugins( slug );
 
 	// Get the post activation URL for the product.
 	let redirectUri = detail?.postActivationUrl || null;

projects/packages/my-jetpack/_inc/data/products/use-activate-plugins.ts

@@ -0,0 +1,92 @@
+import { useGlobalNotices } from '@automattic/jetpack-components';
+import { __, sprintf } from '@wordpress/i18n';
+import useAnalytics from '../../hooks/use-analytics';
+import { REST_API_SITE_PRODUCTS_ENDPOINT, QUERY_ACTIVATE_PRODUCT_KEY } from '../constants';
+import useSimpleMutation from '../use-simple-mutation';
+import { getMyJetpackWindowInitialState } from '../utils/get-my-jetpack-window-state';
+import useProducts from './use-products';
+import type { ProductCamelCase, ProductSnakeCase } from '../types';
+
+const setPluginActiveState = ( productId: string ) => {
+	const { items } = getMyJetpackWindowInitialState( 'products' );
+	if ( items[ productId ]?.plugin_slug === 'jetpack' ) {
+		return;
+	}
+	if ( items[ productId ]?.standalone_plugin_info.has_standalone_plugin ) {
+		window.myJetpackInitialState.products.items[
+			productId
+		].standalone_plugin_info.is_standalone_active = true;
+		window.myJetpackInitialState.products.items[
+			productId
+		].standalone_plugin_info.is_standalone_installed = true;
+	}
+};
+
+const getIsPluginAlreadyActive = ( detail: ProductCamelCase ) => {
+	const { standalonePluginInfo, isPluginActive } = detail;
+
+	if ( standalonePluginInfo?.hasStandalonePlugin ) {
+		return standalonePluginInfo?.isStandaloneActive;
+	}
+
+	return isPluginActive;
+};
+
+const useActivatePlugins = ( productSlugs: string | string[] ) => {
+	const productIds = Array.isArray( productSlugs ) ? productSlugs : [ productSlugs ];
+
+	const { products, refetch } = useProducts( productIds );
+	const { recordEvent } = useAnalytics();
+	const { createSuccessNotice } = useGlobalNotices();
+
+	const {
+		mutate: activate,
+		isPending,
+		isSuccess,
+	} = useSimpleMutation< { [ key: string ]: ProductSnakeCase } >( {
+		name: QUERY_ACTIVATE_PRODUCT_KEY,
+		query: {
+			path: `${ REST_API_SITE_PRODUCTS_ENDPOINT }/activate`,
+			method: 'POST',
+			data: { products: productIds },
+		},
+		options: {
+			onSuccess: () => {
+				products?.forEach( product => {
+					if ( ! getIsPluginAlreadyActive( product ) ) {
+						recordEvent( 'jetpack_myjetpack_product_activated', {
+							product: product.slug,
+						} );
+
+						// This is to handle an edge case where a user is redirected somewhere after activation
+						// and goes back in the browser and "activates" the product again. This will manually update
+						// the window state so that the tracking is not recorded twice for one activation.
+						setPluginActiveState( product.slug );
+					}
+				} );
+				refetch().then( () => {
+					createSuccessNotice(
+						sprintf(
+							/* translators: %s is either the product name, i.e.- "Jetpack Backup" or the word "Plugins". */
+							__( '%s activated successfully!', 'jetpack-my-jetpack' ),
+							products?.length === 1 ? products[ 0 ].title : __( 'Plugins', 'jetpack-my-jetpack' )
+						)
+					);
+				} );
+			},
+		},
+		errorMessage: sprintf(
+			// translators: %s is the Jetpack product name or comma seperated list of multiple Jetpack product names.
+			__( 'There was a problem activating %s.', 'jetpack-my-jetpack' ),
+			products?.map( product => product?.name ).join( ', ' )
+		),
+	} );
+
+	return {
+		activate,
+		isPending,
+		isSuccess,
+	};
+};
+
+export default useActivatePlugins;

projects/packages/my-jetpack/_inc/data/products/use-all-products.ts

@@ -0,0 +1,16 @@
+import { getMyJetpackWindowInitialState } from '../utils/get-my-jetpack-window-state';
+import { prepareProductData } from '../utils/prepare-product-data';
+import type { ProductCamelCase } from '../types';
+
+export const useAllProducts = (): { [ key: string ]: ProductCamelCase } => {
+	const { items: products } = getMyJetpackWindowInitialState( 'products' );
+
+	if ( ! products ) {
+		return {};
+	}
+
+	return Object.entries( products ).reduce(
+		( acc, [ key, product ] ) => ( { ...acc, [ key ]: prepareProductData( product ) } ),
+		{}
+	);
+};

projects/packages/my-jetpack/_inc/data/products/use-install-plugins.ts

@@ -0,0 +1,46 @@
+import { useGlobalNotices } from '@automattic/jetpack-components';
+import { __, sprintf } from '@wordpress/i18n';
+import { REST_API_SITE_PRODUCTS_ENDPOINT, QUERY_INSTALL_PRODUCT_KEY } from '../constants';
+import useSimpleMutation from '../use-simple-mutation';
+import useProducts from './use-products';
+
+const useInstallPlugins = ( productSlugs: string | string[] ) => {
+	const productIds = Array.isArray( productSlugs ) ? productSlugs : [ productSlugs ];
+
+	const { products, refetch } = useProducts( productIds );
+	const { createSuccessNotice } = useGlobalNotices();
+
+	const { mutate: install, isPending } = useSimpleMutation( {
+		name: QUERY_INSTALL_PRODUCT_KEY,
+		query: {
+			path: `${ REST_API_SITE_PRODUCTS_ENDPOINT }/install`,
+			method: 'POST',
+			data: { products: productIds },
+		},
+		options: {
+			onSuccess: () => {
+				refetch().then( () => {
+					createSuccessNotice(
+						sprintf(
+							/* translators: %s is the word "Plugin" or "Pluigns" (singular or plural). */
+							__( '%s installed successfully!', 'jetpack-my-jetpack' ),
+							products?.length === 1 ? products[ 0 ].title : __( 'Plugins', 'jetpack-my-jetpack' )
+						)
+					);
+				} );
+			},
+		},
+		errorMessage: sprintf(
+			// translators: %s is the Jetpack product name or comma seperated list of multiple Jetpack product names.
+			__( 'There was a problem installing and activating %s.', 'jetpack-my-jetpack' ),
+			products?.map( product => product?.name ).join( ', ' )
+		),
+	} );
+
+	return {
+		install,
+		isPending,
+	};
+};
+
+export default useInstallPlugins;