Add actions for each status

Automattic · Dec 23, 2024 · 60f51b1 · 60f51b1
1 parent 5a07845
commit 60f51b1
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 16 deletions.
diff --git a/projects/packages/my-jetpack/_inc/components/product-card/recommendation-actions.tsx b/projects/packages/my-jetpack/_inc/components/product-card/recommendation-actions.tsx
@@ -4,19 +4,21 @@ import styles from './style.module.scss';
 import usePricingData from './use-pricing-data';
 
 const RecommendationActions = ( { slug }: { slug: string } ) => {
-	const { secondaryAction, purchaseAction, isActivating } = usePricingData( slug );
+	const { secondaryAction, primaryAction, isActivating } = usePricingData( slug );
 
 	return (
 		<div className={ styles.actions }>
 			<div className={ clsx( styles.buttons, styles.upsell ) }>
-				{ purchaseAction && (
-					<Button size="small" { ...purchaseAction }>
-						{ purchaseAction.label }
+				{ primaryAction && (
+					<Button size="small" { ...primaryAction }>
+						{ primaryAction.label }
+					</Button>
+				) }
+				{ secondaryAction && (
+					<Button size="small" variant="secondary" disabled={ isActivating } { ...secondaryAction }>
+						{ secondaryAction.label }
 					</Button>
 				) }
-				<Button size="small" variant="secondary" disabled={ isActivating } { ...secondaryAction }>
-					{ secondaryAction.label }
-				</Button>
 			</div>
 		</div>
 	);

diff --git a/projects/packages/my-jetpack/_inc/components/product-card/use-pricing-data.ts b/projects/packages/my-jetpack/_inc/components/product-card/use-pricing-data.ts
@@ -8,6 +8,7 @@ import { ProductCamelCase } from '../../data/types';
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import useAnalytics from '../../hooks/use-analytics';
 import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
+import useInstallStandalonePlugin from '../../data/products/use-install-standalone-plugin';
 
 const parsePricingData = ( pricingForUi: ProductCamelCase[ 'pricingForUi' ] ) => {
 	const { tiers, wpcomFreeProductSlug, introductoryOffer } = pricingForUi;
@@ -52,20 +53,51 @@ const parsePricingData = ( pricingForUi: ProductCamelCase[ 'pricingForUi' ] ) =>
 	};
 };
 
-const getPurchaseAction = ( detail: ProductCamelCase, onCheckout: () => void ) => {
+// type for onCheckout and onActivate
+type Actions = {
+	onCheckout: () => void;
+	onActivate: () => void;
+	onInstall: () => void;
+	onManage: () => void;
+};
+
+const getPrimaryAction = (
+	detail: ProductCamelCase,
+	{ onCheckout, onActivate, onInstall, onManage }: Actions
+) => {
 	const isUpgradable =
 		detail.status === PRODUCT_STATUSES.ACTIVE &&
 		( detail.isUpgradableByBundle.length || detail.isUpgradable );
 	const upgradeHasPrice =
 		detail.pricingForUi.fullPrice || detail.pricingForUi.tiers?.upgraded?.fullPrice;
 
+	if ( detail.status === PRODUCT_STATUSES.MODULE_DISABLED ) {
+		return { label: __( 'Activate', 'jetpack-my-jetpack' ), onClick: onActivate };
+	}
+
+	if ( detail.status === PRODUCT_STATUSES.ABSENT ) {
+		return { label: __( 'Install', 'jetpack-my-jetpack' ), onClick: onInstall };
+	}
+
+	if ( detail.status === PRODUCT_STATUSES.USER_CONNECTION_ERROR ) {
+		return { label: __( 'Connect', 'jetpack-my-jetpack' ), href: '#/connection' };
+	}
+
 	if ( detail.status === PRODUCT_STATUSES.CAN_UPGRADE || isUpgradable ) {
 		if ( upgradeHasPrice ) {
 			return { label: __( 'Upgrade', 'jetpack-my-jetpack' ), onClick: onCheckout };
 		}
 		return null;
 	}
 
+	if ( detail.isFeature ) {
+		return {
+			label: __( 'Manage', 'jetpack-my-jetpack' ),
+			href: detail.manageUrl,
+			onClick: onCheckout,
+		};
+	}
+
 	return { label: __( 'Purchase', 'jetpack-my-jetpack' ), onClick: onCheckout };
 };
 
@@ -98,6 +130,7 @@ const usePricingData = ( slug: string ) => {
 	const { wpcomProductSlug, wpcomFreeProductSlug, ...data } = parsePricingData(
 		detail.pricingForUi
 	);
+	const { install: installPlugin, isPending: isInstalling } = useInstallStandalonePlugin( slug );
 
 	const { isUserConnected } = useMyJetpackConnection();
 	const { myJetpackUrl, siteSuffix } = getMyJetpackWindowInitialState();
@@ -135,9 +168,27 @@ const usePricingData = ( slug: string ) => {
 		runCheckout();
 	}, [ activate, recordEvent, runCheckout, slug ] );
 
+	const handleInstall = useCallback( () => {
+		recordEvent( 'jetpack_myjetpack_evaluation_recommendations_install_plugin_click', {
+			product: slug,
+		} );
+		installPlugin();
+	}, [ slug, installPlugin, recordEvent ] );
+
+	const handleManage = useCallback( () => {
+		recordEvent( 'jetpack_myjetpack_evaluation_recommendations_manage_click', {
+			product: slug,
+		} );
+	}, [ slug, recordEvent ] );
+
 	return {
 		secondaryAction: getSecondaryAction( detail, handleActivate ),
-		purchaseAction: getPurchaseAction( detail, handleCheckout ),
+		primaryAction: getPrimaryAction( detail, {
+			onCheckout: handleCheckout,
+			onActivate: handleActivate,
+			onInstall: handleInstall,
+			onManage: handleManage,
+		} ),
 		isActivating,
 		...data,
 	};

diff --git a/projects/packages/my-jetpack/global.d.ts b/projects/packages/my-jetpack/global.d.ts
@@ -177,6 +177,7 @@ interface Window {
 					has_paid_plan_for_product: boolean;
 					features_by_tier: Array< string >;
 					is_bundle: boolean;
+					is_feature: boolean;
 					is_plugin_active: boolean;
 					is_upgradable: boolean;
 					is_upgradable_by_bundle: string[];

diff --git a/projects/packages/my-jetpack/src/products/class-module-product.php b/projects/packages/my-jetpack/src/products/class-module-product.php
@@ -27,13 +27,6 @@ abstract class Module_Product extends Product {
 	 */
 	public static $module_name = null;
 
-	/**
-	 * Whether this module is a Jetpack feature
-	 *
-	 * @var boolean
-	 */
-	public static $is_feature = false;
-
 	/**
 	 * Get the plugin slug - ovewrite it ans return Jetpack's
 	 *

diff --git a/projects/packages/my-jetpack/src/products/class-product.php b/projects/packages/my-jetpack/src/products/class-product.php
@@ -73,6 +73,13 @@ abstract class Product {
 	 */
 	const EXPIRATION_CUTOFF_TIME = '+2 months';
 
+	/**
+	 * Whether this module is a Jetpack feature
+	 *
+	 * @var boolean
+	 */
+	public static $is_feature = false;
+
 	/**
 	 * Whether this product requires a site connection
 	 *
@@ -182,6 +189,7 @@ public static function get_info() {
 			'is_plugin_active'                => static::is_plugin_active(),
 			'is_upgradable'                   => static::is_upgradable(),
 			'is_upgradable_by_bundle'         => static::is_upgradable_by_bundle(),
+			'is_feature'                      => static::$is_feature,
 			'supported_products'              => static::get_supported_products(),
 			'wpcom_product_slug'              => static::get_wpcom_product_slug(),
 			'requires_user_connection'        => static::$requires_user_connection,