My Jetpack: Add "Expired" & "Expires soon" statuses to product cards

projects/packages/my-jetpack/_inc/components/product-card/action-button.tsx

@@ -47,7 +47,7 @@ const ActionButton: FC< ActionButtonProps > = ( {
 	const [ isDropdownOpen, setIsDropdownOpen ] = useState( false );
 	const [ currentAction, setCurrentAction ] = useState< ComponentProps< typeof Button > >( {} );
 	const { detail } = useProduct( slug );
-	const { manageUrl, purchaseUrl } = detail;
+	const { manageUrl, purchaseUrl, managePaidPlanPurchaseUrl, renewPaidPlanPurchaseUrl } = detail;
 	const isManageDisabled = ! manageUrl;
 	const dropdownRef = useRef( null );
 	const chevronRef = useRef( null );
@@ -188,6 +188,26 @@ const ActionButton: FC< ActionButtonProps > = ( {
 						PRODUCT_STATUSES.INACTIVE in primaryActionOverride &&
 						primaryActionOverride[ PRODUCT_STATUSES.INACTIVE ] ),
 				};
+			case PRODUCT_STATUSES.EXPIRING_SOON:
+				return {
+					...buttonState,
+					href: renewPaidPlanPurchaseUrl,
+					variant: 'primary',
+					label: __( 'Renew my plan', 'jetpack-my-jetpack' ),
+					...( primaryActionOverride &&
+						PRODUCT_STATUSES.EXPIRING_SOON in primaryActionOverride &&
+						primaryActionOverride[ PRODUCT_STATUSES.EXPIRING_SOON ] ),
+				};
+			case PRODUCT_STATUSES.EXPIRED:
+				return {
+					...buttonState,
+					href: managePaidPlanPurchaseUrl,
+					variant: 'primary',
+					label: __( 'Resume my plan', 'jetpack-my-jetpack' ),
+					...( primaryActionOverride &&
+						PRODUCT_STATUSES.EXPIRED in primaryActionOverride &&
+						primaryActionOverride[ PRODUCT_STATUSES.EXPIRED ] ),
+				};
 			default:
 				return null;
 		}
@@ -207,6 +227,8 @@ const ActionButton: FC< ActionButtonProps > = ( {
 		onManage,
 		primaryActionOverride,
 		isOwned,
+		managePaidPlanPurchaseUrl,
+		renewPaidPlanPurchaseUrl,
 	] );
 
 	const allActions = useMemo(

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

@@ -70,9 +70,8 @@ const ProductCard: FC< ProductCardProps > = props => {
 	const { ownedProducts } = getMyJetpackWindowInitialState( 'lifecycleStats' );
 	const isOwned = ownedProducts?.includes( slug );
 
-	const isError =
-		status === PRODUCT_STATUSES.SITE_CONNECTION_ERROR ||
-		status === PRODUCT_STATUSES.USER_CONNECTION_ERROR;
+	const isError = status === PRODUCT_STATUSES.EXPIRED;
+	const isWarning = status === PRODUCT_STATUSES.EXPIRING_SOON;
 	const isAbsent =
 		status === PRODUCT_STATUSES.ABSENT || status === PRODUCT_STATUSES.ABSENT_WITH_PLAN;
 	const isPurchaseRequired = status === PRODUCT_STATUSES.NEEDS_PLAN;
@@ -82,6 +81,7 @@ const ProductCard: FC< ProductCardProps > = props => {
 		[ styles[ 'is-purchase-required' ] ]: isPurchaseRequired,
 		[ styles[ 'is-link' ] ]: isAbsent,
 		[ styles[ 'has-error' ] ]: isError,
+		[ styles[ 'has-warning' ] ]: isWarning,
 	} );
 
 	const { recordEvent } = useAnalytics();

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

@@ -19,6 +19,10 @@ const getStatusLabel: StatusStateFunction = ( status, isOwned ) => {
 		case PRODUCT_STATUSES.ACTIVE:
 		case PRODUCT_STATUSES.CAN_UPGRADE:
 			return __( 'Active', 'jetpack-my-jetpack' );
+		case PRODUCT_STATUSES.EXPIRING_SOON:
+			return __( 'Expires soon', 'jetpack-my-jetpack' );
+		case PRODUCT_STATUSES.EXPIRED:
+			return __( 'Expired plan', 'jetpack-my-jetpack' );
 		case PRODUCT_STATUSES.INACTIVE:
 		case PRODUCT_STATUSES.MODULE_DISABLED:
 		case PRODUCT_STATUSES.NEEDS_ACTIVATION:
@@ -49,13 +53,16 @@ const getStatusClassName: StatusStateFunction = ( status, isOwned ) => {
 		case PRODUCT_STATUSES.ABSENT_WITH_PLAN:
 		case PRODUCT_STATUSES.SITE_CONNECTION_ERROR:
 		case PRODUCT_STATUSES.USER_CONNECTION_ERROR:
+		case PRODUCT_STATUSES.EXPIRING_SOON:
 			return styles.warning;
 		case PRODUCT_STATUSES.INACTIVE:
 		case PRODUCT_STATUSES.NEEDS_FIRST_SITE_CONNECTION:
 		case PRODUCT_STATUSES.NEEDS_ACTIVATION:
 			return styles.inactive;
 		case PRODUCT_STATUSES.NEEDS_PLAN:
 			return isOwned ? styles.warning : styles.inactive;
+		case PRODUCT_STATUSES.EXPIRED:
+			return styles.error;
 		default:
 			return styles.inactive;
 	}

projects/packages/my-jetpack/_inc/components/product-card/style.module.scss

@@ -5,6 +5,14 @@ $box-shadow-color: rgba( 0, 0, 0, 0.1 );
 .container {
 	position: relative;
 	min-height: 200px;
+	&.has-error {
+		border-width: 1px;
+		border-color: var( --jp-red-50 );
+	}
+	&.has-warning {
+		border-width: 1px;
+		border-color: #DEB100;
+	}
 }
 
 .description {

projects/packages/my-jetpack/_inc/constants.ts

@@ -39,4 +39,6 @@ export const PRODUCT_STATUSES = {
 	NEEDS_FIRST_SITE_CONNECTION: 'needs_first_site_connection',
 	USER_CONNECTION_ERROR: 'user_connection_error',
 	CAN_UPGRADE: 'can_upgrade',
+	EXPIRING_SOON: 'expiring',
+	EXPIRED: 'expired',
 };

projects/packages/my-jetpack/changelog/add-mj-expired-products-cards

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Added "Expired" & "Expires soon" statuses to My Jetpack product cards.

projects/packages/my-jetpack/global.d.ts

@@ -157,6 +157,8 @@ interface Window {
 					plugin_slug: string;
 					post_activation_url: string;
 					post_checkout_url?: string;
+					manage_paid_plan_purchase_url?: string;
+					renew_paid_plan_purchase_url?: string;
 					pricing_for_ui?: {
 						available: boolean;
 						wpcom_product_slug: string;

projects/packages/my-jetpack/src/class-products.php

@@ -20,6 +20,8 @@ class Products {
 	const STATUS_USER_CONNECTION_ERROR       = 'user_connection_error';
 	const STATUS_ACTIVE                      = 'active';
 	const STATUS_CAN_UPGRADE                 = 'can_upgrade';
+	const STATUS_EXPIRING_SOON               = 'expiring';
+	const STATUS_EXPIRED                     = 'expired';
 	const STATUS_INACTIVE                    = 'inactive';
 	const STATUS_MODULE_DISABLED             = 'module_disabled';
 	const STATUS_PLUGIN_ABSENT               = 'plugin_absent';
@@ -76,6 +78,16 @@ class Products {
 		self::STATUS_CAN_UPGRADE,
 	);
 
+	/**
+	 * List of statuses that display the module as active
+	 *
+	 * @var array
+	 */
+	public static $expiring_or_expired_module_statuses = array(
+		self::STATUS_EXPIRING_SOON,
+		self::STATUS_EXPIRED,
+	);
+
 	/**
 	 * List of all statuses that a product can have
 	 *
@@ -86,6 +98,8 @@ class Products {
 		self::STATUS_USER_CONNECTION_ERROR,
 		self::STATUS_ACTIVE,
 		self::STATUS_CAN_UPGRADE,
+		self::STATUS_EXPIRING_SOON,
+		self::STATUS_EXPIRED,
 		self::STATUS_INACTIVE,
 		self::STATUS_MODULE_DISABLED,
 		self::STATUS_PLUGIN_ABSENT,

projects/packages/my-jetpack/src/class-wpcom-products.php

@@ -9,6 +9,7 @@
 
 use Automattic\Jetpack\Connection\Client;
 use Automattic\Jetpack\Connection\Manager as Connection_Manager;
+use Automattic\Jetpack\Current_Plan;
 use Automattic\Jetpack\Status\Visitor;
 use Jetpack_Options;
 use WP_Error;
@@ -349,6 +350,15 @@ public static function get_site_current_purchases() {
 		return $purchases;
 	}
 
+	/**
+	 * Gets the site's currently active "plan" (bundle).
+	 *
+	 * @return array
+	 */
+	public static function get_site_current_plan() {
+		return Current_Plan::get();
+	}
+
 	/**
 	 * Reset the request failures to retry the API requests.
 	 *

projects/packages/my-jetpack/src/products/class-anti-spam.php

@@ -36,6 +36,13 @@ class Anti_Spam extends Product {
 	 */
 	public static $plugin_slug = 'akismet';
 
+	/**
+	 * The feature slug that identifies the paid plan
+	 *
+	 * @var string
+	 */
+	public static $feature_identifying_paid_plan = 'antispam';
+
 	/**
 	 * Whether this product requires a user connection
 	 *
@@ -107,41 +114,37 @@ public static function get_features() {
 	}
 
 	/**
-	 * Determine if the site has an Akismet plan by checking for an API key
-	 * Note that some Akismet Plans are free - we're just checking for an API key and don't have the perspective of the plan attached to it here
+	 * Get the product-slugs of the paid plans for this product.
+	 * (Do not include bundle plans, unless it's a bundle plan itself).
 	 *
-	 * @return bool - whether an API key was found
+	 * @return array
 	 */
-	public static function has_paid_plan_for_product() {
-		$products_with_anti_spam = array(
+	public static function get_paid_plan_product_slugs() {
+		return array(
 			'jetpack_anti_spam',
-			'jetpack_complete',
-			'jetpack_security',
-			'jetpack_personal',
-			'jetpack_premium',
-			'jetpack_business',
+			'jetpack_anti_spam_monthly',
+			'jetpack_anti_spam_bi_yearly',
 		);
-		// Check if the site has an API key for Akismet
-		$akismet_api_key = apply_filters( 'akismet_get_api_key', defined( 'WPCOM_API_KEY' ) ? constant( 'WPCOM_API_KEY' ) : get_option( 'wordpress_api_key' ) );
-		$fallback        = ! empty( $akismet_api_key );
+	}
 
-		// Check for existing plans
-		$purchases_data = Wpcom_Products::get_site_current_purchases();
-		if ( is_wp_error( $purchases_data ) ) {
-			return $fallback;
+	/**
+	 * Determine if the site has an Akismet plan.
+	 *
+	 * @return bool - whether an API key was found
+	 */
+	public static function has_paid_plan_for_product() {
+		if ( parent::has_paid_plan_for_product() ) {
+			return true;
 		}
+		// As a fallback, we're checking if the site has an API key for Akismet.
+		// Note that some Akismet Plans are free - we're just checking for an API key and don't have the perspective of the plan attached to it here
+		$akismet_api_key = apply_filters( 'akismet_get_api_key', defined( 'WPCOM_API_KEY' ) ? constant( 'WPCOM_API_KEY' ) : get_option( 'wordpress_api_key' ) );
+		if ( ! empty( $akismet_api_key ) ) {
+			return true;
 
-		if ( is_array( $purchases_data ) && ! empty( $purchases_data ) ) {
-			foreach ( $purchases_data as $purchase ) {
-				foreach ( $products_with_anti_spam as $product ) {
-					if ( strpos( $purchase->product_slug, $product ) !== false ) {
-						return true;
-					}
-				}
-			}
 		}
 
-		return $fallback;
+		return false;
 	}
 
 	/**

projects/packages/my-jetpack/src/products/class-backup.php

@@ -65,6 +65,13 @@ class Backup extends Hybrid_Product {
 	 */
 	public static $requires_plan = true;
 
+	/**
+	 * The feature slug that identifies the paid plan
+	 *
+	 * @var string
+	 */
+	public static $feature_identifying_paid_plan = 'backups';
+
 	/**
 	 * Get the product name
 	 *
@@ -193,19 +200,6 @@ private static function get_state_from_wpcom() {
 		return $status;
 	}
 
-	/**
-	 * Checks whether the current plan (or purchases) of the site already supports the product
-	 *
-	 * @return boolean
-	 */
-	public static function has_paid_plan_for_product() {
-		$rewind_data = static::get_state_from_wpcom();
-		if ( is_wp_error( $rewind_data ) ) {
-			return false;
-		}
-		return is_object( $rewind_data ) && isset( $rewind_data->state ) && 'unavailable' !== $rewind_data->state;
-	}
-
 	/**
 	 * Return product bundles list
 	 * that supports the product.
@@ -239,4 +233,26 @@ public static function get_manage_url() {
 			return Redirect::get_url( 'my-jetpack-manage-backup' );
 		}
 	}
+
+	/**
+	 * Get the product-slugs of the paid plans for this product.
+	 * (Do not include bundle plans, unless it's a bundle plan itself).
+	 *
+	 * @return array
+	 */
+	public static function get_paid_plan_product_slugs() {
+		return array(
+			'jetpack_backup_daily',
+			'jetpack_backup_daily_monthly',
+			'jetpack_backup_realtime',
+			'jetpack_backup_realtime_monthly',
+			'jetpack_backup_t1_yearly',
+			'jetpack_backup_t1_monthly',
+			'jetpack_backup_t1_bi_yearly',
+			'jetpack_backup_t2_yearly',
+			'jetpack_backup_t2_monthly',
+			'jetpack_backup_t0_yearly',
+			'jetpack_backup_t0_monthly',
+		);
+	}
 }

projects/packages/my-jetpack/src/products/class-boost.php

@@ -65,6 +65,13 @@ class Boost extends Product {
 	 */
 	public static $has_free_offering = true;
 
+	/**
+	 * The feature slug that identifies the paid plan
+	 *
+	 * @var string
+	 */
+	public static $feature_identifying_paid_plan = 'cloud-critical-css';
+
 	/**
 	 * Get the product name
 	 *
@@ -341,27 +348,6 @@ public static function get_pricing_for_ui() {
 		);
 	}
 
-	/**
-	 * Checks whether the current plan (or purchases) of the site already supports the product
-	 *
-	 * @return boolean
-	 */
-	public static function has_paid_plan_for_product() {
-		$purchases_data = Wpcom_Products::get_site_current_purchases();
-		if ( is_wp_error( $purchases_data ) ) {
-			return false;
-		}
-		if ( is_array( $purchases_data ) && ! empty( $purchases_data ) ) {
-			foreach ( $purchases_data as $purchase ) {
-				// Boost is available as standalone bundle and as part of the Complete plan.
-				if ( strpos( $purchase->product_slug, 'jetpack_boost' ) !== false || str_starts_with( $purchase->product_slug, 'jetpack_complete' ) ) {
-					return true;
-				}
-			}
-		}
-		return false;
-	}
-
 	/**
 	 * Get the URL where the user manages the product
 	 *
@@ -392,6 +378,20 @@ public static function do_product_specific_activation( $current_result ) {
 		return $product_activation;
 	}
 
+	/**
+	 * Get the product-slugs of the paid plans for this product.
+	 * (Do not include bundle plans, unless it's a bundle plan itself).
+	 *
+	 * @return array
+	 */
+	public static function get_paid_plan_product_slugs() {
+		return array(
+			'jetpack_boost_yearly',
+			'jetpack_boost_monthly',
+			'jetpack_boost_bi_yearly',
+		);
+	}
+
 	/**
 	 * Return product bundles list
 	 * that supports the product.