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 } = 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: managePaidPlanPurchaseUrl,
+					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,7 @@ const ActionButton: FC< ActionButtonProps > = ( {
 		onManage,
 		primaryActionOverride,
 		isOwned,
+		managePaidPlanPurchaseUrl,
 	] );
 
 	const allActions = useMemo(

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

@@ -72,7 +72,9 @@ const ProductCard: FC< ProductCardProps > = props => {
 
 	const isError =
 		status === PRODUCT_STATUSES.SITE_CONNECTION_ERROR ||
-		status === PRODUCT_STATUSES.USER_CONNECTION_ERROR;
+		status === PRODUCT_STATUSES.USER_CONNECTION_ERROR ||
+		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 +84,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: 2px;
+		border-color: var( --jp-red-50 );
+	}
+	&.has-warning {
+		border-width: 2px;
+		border-color: #DEB100;
+	}
 }
 
 .description {

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

@@ -36,4 +36,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

@@ -155,6 +155,7 @@ interface Window {
 					plugin_slug: string;
 					post_activation_url: string;
 					post_checkout_url?: string;
+					manage_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/products/class-anti-spam.php

@@ -106,6 +106,41 @@ public static function get_features() {
 		);
 	}
 
+	/**
+	 * Get the product-slugs of the paid bundles/plans that this product/module is included in
+	 *
+	 * @return array
+	 */
+	public static function get_paid_bundles_that_include_product() {
+		return array(
+			'jetpack_security_t1_yearly',
+			'jetpack_security_t1_monthly',
+			'jetpack_security_t1_bi-yearly',
+			'jetpack_complete',
+			'jetpack_complete_monthly',
+			'jetpack_complete_bi-yearly',
+			'jetpack_business',
+			'jetpack_business_monthly',
+			'jetpack_premium',
+			'jetpack_premium_monthly',
+			'jetpack_personal',
+			'jetpack_personal_monthly',
+		);
+	}
+
+	/**
+	 * Get the product-slugs of the paid plans for this product (not including bundles)
+	 *
+	 * @return array
+	 */
+	public static function get_paid_plan_product_slugs() {
+		return array(
+			'jetpack_anti_spam',
+			'jetpack_anti_spam_monthly',
+			'jetpack_anti_spam_bi_yearly',
+		);
+	}
+
 	/**
 	 * 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

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
 	 *
@@ -239,4 +246,25 @@ 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 (not including bundles)
+	 *
+	 * @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
 	 *
@@ -391,4 +398,17 @@ public static function do_product_specific_activation( $current_result ) {
 
 		return $product_activation;
 	}
+
+	/**
+	 * Get the product-slugs of the paid plans for this product (not including bundles)
+	 *
+	 * @return array
+	 */
+	public static function get_paid_plan_product_slugs() {
+		return array(
+			'jetpack_boost_yearly',
+			'jetpack_boost_monthly',
+			'jetpack_boost_bi_yearly',
+		);
+	}
 }

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

@@ -339,6 +339,32 @@ public static function has_paid_plan_for_product() {
 		return false;
 	}
 
+	/**
+	 * Get the product-slugs of the paid bundles/plans that this product/module is included in
+	 *
+	 * @return array
+	 */
+	public static function get_paid_bundles_that_include_product() {
+		return array(
+			'jetpack_complete',
+			'jetpack_complete_monthly',
+			'jetpack_complete_bi-yearly',
+		);
+	}
+
+	/**
+	 * Get the product-slugs of the paid plans for this product (not including bundles)
+	 *
+	 * @return array
+	 */
+	public static function get_paid_plan_product_slugs() {
+		return array(
+			'jetpack_creator_yearly',
+			'jetpack_creator_monthly',
+			'jetpack_creator_bi_yearly',
+		);
+	}
+
 	/**
 	 * Checks whether the product can be upgraded - i.e. this shows the /#add-creator interstitial
 	 *

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

@@ -172,4 +172,15 @@ public static function has_paid_plan_for_product() {
 
 		return false;
 	}
+
+	/**
+	 * Get the product-slugs of the paid bundles/plans that this product/module is included in
+	 *
+	 * @return array
+	 */
+	public static function get_paid_bundles_that_include_product() {
+		return array(
+			'jetpack_complete',
+		);
+	}
 }

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

@@ -444,6 +444,19 @@ public static function get_wpcom_bi_yearly_product_slug() {
 		return 'jetpack_ai_bi_yearly';
 	}
 
+	/**
+	 * Get the product-slugs of the paid plans for this product (not including bundles)
+	 *
+	 * @return array
+	 */
+	public static function get_paid_plan_product_slugs() {
+		return array(
+			'jetpack_ai_yearly',
+			'jetpack_ai_monthly',
+			'jetpack_ai_bi_yearly',
+		);
+	}
+
 	/**
 	 * Checks whether the site has a paid plan for this product
 	 *