From 60f51b1383201fb1e29febe9962e099ef0168b33 Mon Sep 17 00:00:00 2001 From: Ian Ramos <5714212+IanRamosC@users.noreply.github.com> Date: Wed, 18 Dec 2024 00:13:47 -0300 Subject: [PATCH] Add actions for each status --- .../product-card/recommendation-actions.tsx | 16 +++--- .../product-card/use-pricing-data.ts | 55 ++++++++++++++++++- projects/packages/my-jetpack/global.d.ts | 1 + .../src/products/class-module-product.php | 7 --- .../my-jetpack/src/products/class-product.php | 8 +++ 5 files changed, 71 insertions(+), 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 index c0d84ace2116b..8a05af0d71b51 100644 --- 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 (
- { purchaseAction && ( - + ) } + { secondaryAction && ( + ) } -
); 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 index 06e6beb1c01e9..aeda36f938185 100644 --- 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,13 +53,36 @@ 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 }; @@ -66,6 +90,14 @@ const getPurchaseAction = ( detail: ProductCamelCase, onCheckout: () => void ) = 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 index 3630bf179cdd9..5efae306c737d 100644 --- 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 index 9d1a14f0fee86..40e4ef7f4c6d5 100644 --- 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 index b2262eddd6b4a..de36694475714 100644 --- 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,