Refactor Jetpack and WPCom plan types (#52836)

client/components/jetpack/upsell-switch/index.tsx

@@ -91,7 +91,7 @@ function UpsellSwitch( props: Props ): React.ReactElement {
 			productsList = [
 				...productsList,
 				...sitePlanDetails.getHiddenFeatures(),
-				...sitePlanDetails.getInferiorHiddenFeatures(),
+				...( sitePlanDetails.getInferiorHiddenFeatures?.() ?? [] ),
 			];
 		}
 		return !! productsList.find( productSlugTest );

client/my-sites/plan-features-comparison/index.jsx

@@ -113,7 +113,7 @@ export class PlanFeaturesComparison extends Component {
 			const classes = classNames( 'plan-features-comparison__table-item', {
 				'has-border-top': ! isReskinned,
 			} );
-			const audience = planConstantObj.getAudience();
+			const audience = planConstantObj.getAudience?.();
 			const billingTimeFrame = planConstantObj.getBillingTimeFrame();
 			const { annualPricePerMonth, isMonthlyPlan } = properties;
 
@@ -364,7 +364,7 @@ export default connect(
 
 				// Show price divided by 12? Only for non JP plans, or if plan is only available yearly.
 				const showMonthlyPrice = true;
-				const features = planConstantObj.getPlanCompareFeatures( abtest );
+				const features = planConstantObj.getPlanCompareFeatures();
 				let planFeatures = getPlanFeaturesObject( features );
 				if ( placeholder || ! planObject ) {
 					isPlaceholder = true;

client/my-sites/plan-features/index.jsx

@@ -344,8 +344,8 @@ export class PlanFeatures extends Component {
 			} = properties;
 			const { rawPrice, discountPrice, isMonthlyPlan } = properties;
 			const planDescription = isInVerticalScrollingPlansExperiment
-				? planConstantObj.getShortDescription( abtest )
-				: planConstantObj.getDescription( abtest );
+				? planConstantObj.getShortDescription()
+				: planConstantObj.getDescription();
 			return (
 				<div className="plan-features__mobile-plan" key={ planName }>
 					<PlanFeaturesHeader
@@ -369,7 +369,7 @@ export class PlanFeatures extends Component {
 						selectedPlan={ selectedPlan }
 						showPlanCreditsApplied={ true === showPlanCreditsApplied && ! this.hasDiscountNotice() }
 						isMonthlyPlan={ isMonthlyPlan }
-						audience={ planConstantObj.getAudience() }
+						audience={ planConstantObj.getAudience?.() }
 						isInVerticalScrollingPlansExperiment={ isInVerticalScrollingPlansExperiment }
 						isLoggedInMonthlyPricing={ this.props.isLoggedInMonthlyPricing }
 						isInSignup={ isInSignup }
@@ -441,7 +441,7 @@ export class PlanFeatures extends Component {
 			let { discountPrice } = properties;
 			const classes = classNames( 'plan-features__table-item', 'has-border-top' );
 			const billingTimeFrame = planConstantObj.getBillingTimeFrame();
-			let audience = planConstantObj.getAudience();
+			let audience = planConstantObj.getAudience?.();
 
 			if ( disableBloggerPlanWithNonBlogDomain || this.props.nonDotBlogDomains.length > 0 ) {
 				if ( planMatches( planName, { type: TYPE_BLOGGER } ) ) {
@@ -461,7 +461,7 @@ export class PlanFeatures extends Component {
 						audience = planConstantObj.getStoreAudience();
 						break;
 					default:
-						audience = planConstantObj.getAudience();
+						audience = planConstantObj.getAudience?.();
 				}
 			}
 
@@ -513,9 +513,9 @@ export class PlanFeatures extends Component {
 
 			let description = null;
 			if ( withScroll ) {
-				description = planConstantObj.getShortDescription( abtest );
+				description = planConstantObj.getShortDescription();
 			} else {
-				description = planConstantObj.getDescription( abtest );
+				description = planConstantObj.getDescription();
 			}
 
 			return (
@@ -981,16 +981,14 @@ const ConnectedPlanFeatures = connect(
 					switch ( siteType ) {
 						case 'blog':
 							if ( planConstantObj.getBlogSignupFeatures ) {
-								planFeatures = getPlanFeaturesObject(
-									planConstantObj.getBlogSignupFeatures( abtest )
-								);
+								planFeatures = getPlanFeaturesObject( planConstantObj.getBlogSignupFeatures() );
 							}
 
 							break;
 						case 'grid':
 							if ( planConstantObj.getPortfolioSignupFeatures ) {
 								planFeatures = getPlanFeaturesObject(
-									planConstantObj.getPortfolioSignupFeatures( abtest )
+									planConstantObj.getPortfolioSignupFeatures()
 								);
 							}
 

client/my-sites/plans/jetpack-plans/plan-upgrade/types.ts

@@ -5,9 +5,12 @@
 /**
  * Type dependencies
  */
-import type { JetpackPurchasableItem, JetpackLegacyPlanSlug } from '@automattic/calypso-products';
+import type {
+	JetpackPurchasableItemSlug,
+	JetpackLegacyPlanSlug,
+} from '@automattic/calypso-products';
 
 export type PlanRecommendation = [
 	JetpackLegacyPlanSlug,
-	Exclude< JetpackPurchasableItem, JetpackLegacyPlanSlug >[]
+	Exclude< JetpackPurchasableItemSlug, JetpackLegacyPlanSlug >[]
 ];

client/my-sites/plans/jetpack-plans/plan-upgrade/utils.ts

@@ -14,13 +14,15 @@ import { COMPARE_PLANS_QUERY_PARAM } from './constants';
  */
 import {
 	JetpackLegacyPlanSlug,
-	JetpackPurchasableItem,
+	JetpackPurchasableItemSlug,
 	TERM_MONTHLY,
 } from '@automattic/calypso-products';
 import type { PlanRecommendation } from './types';
 import type { Duration } from '../types';
 
-export function getComparePlansFromContext( { query }: PageJS.Context ): JetpackPurchasableItem[] {
+export function getComparePlansFromContext( {
+	query,
+}: PageJS.Context ): JetpackPurchasableItemSlug[] {
 	const value = query[ COMPARE_PLANS_QUERY_PARAM ] ?? '';
 	const plans = value.split( ',' );
 
@@ -51,7 +53,10 @@ export function getPlanRecommendationFromContext(
 		return;
 	}
 
-	return [ legacyPlan, resetPlans as Exclude< JetpackPurchasableItem, JetpackLegacyPlanSlug >[] ];
+	return [
+		legacyPlan,
+		resetPlans as Exclude< JetpackPurchasableItemSlug, JetpackLegacyPlanSlug >[],
+	];
 }
 
 export function getItemSlugByDuration< T extends string >( slug: T, duration: Duration ): T {

client/my-sites/plans/jetpack-plans/records-details/index.tsx

@@ -27,7 +27,7 @@ import './styles.scss';
 /**
  * Type dependencies
  */
-import type { ProductTranslations } from '@automattic/calypso-products';
+import type { JetpackProduct } from '@automattic/calypso-products';
 
 type Props = {
 	productSlug: string;
@@ -73,7 +73,7 @@ const RecordsDetails: FunctionComponent< Props > = ( { productSlug } ) => {
 	const isDiscounted = Number.isFinite( discountedPrice );
 	const recordCount = searchProduct?.price_tier_usage_quantity;
 	const translations = getJetpackProducts().find( ( p ) => p.slugs.includes( productSlug ) ) as
-		| ProductTranslations
+		| JetpackProduct
 		| undefined;
 	const tier = translations?.optionShortNamesCallback?.( searchProduct );
 

client/my-sites/plans/jetpack-plans/utils.ts

@@ -63,12 +63,7 @@ import type {
 	QueryArgs,
 	SiteProduct,
 } from './types';
-import type {
-	JetpackPlanSlug,
-	Plan,
-	JetpackPlanCardFeature,
-	JetpackProductSlug,
-} from '@automattic/calypso-products';
+import type { JetpackPlanSlug, Plan, JetpackProductSlug } from '@automattic/calypso-products';
 
 import type { SitePlan } from 'calypso/state/sites/selectors/get-site-plan';
 import ExternalLink from 'calypso/components/external-link';
@@ -470,7 +465,6 @@ export function itemToSelectorProduct(
 			// Using the same slug for any duration helps prevent unnecessary DOM updates
 			iconSlug: ( yearlyProductSlug || productSlug ) + iconAppend,
 			displayName: getForCurrentCROIteration( item.getTitle ),
-			buttonLabel: getForCurrentCROIteration( item.getButtonLabel ),
 			type: ITEM_TYPE_PLAN,
 			shortName: getForCurrentCROIteration( item.getTitle ),
 			tagline: getForCurrentCROIteration( item.getTagline ) || '',
@@ -496,15 +490,15 @@ export function itemToSelectorProduct(
 /**
  * Builds the feature item of a product card, from a feature key.
  *
- * @param {JetpackPlanCardFeature} featureKey Key of the feature
+ * @param {string[]|string} featureKey Key of the feature
  * @param {object?} options Options
  * @param {string?} options.withoutDescription Whether to build the card with a description
  * @param {string?} options.withoutIcon Whether to build the card with an icon
  * @param {string?} variation Experiment variation
  * @returns {SelectorProductFeaturesItem} Feature item
  */
 export function buildCardFeatureItemFromFeatureKey(
-	featureKey: JetpackPlanCardFeature,
+	featureKey: string[] | string,
 	options?: { withoutDescription?: boolean; withoutIcon?: boolean },
 	variation?: string
 ): SelectorProductFeaturesItem | undefined {
@@ -541,13 +535,13 @@ export function buildCardFeatureItemFromFeatureKey(
 /**
  * Builds the feature items passed to the product card, from feature keys.
  *
- * @param {JetpackPlanCardFeature[]} features Feature keys
+ * @param {string[]} features Feature keys
  * @param {object?} options Options
  * @param {string?} variation Experiment variation
  * @returns {SelectorProductFeaturesItem[] | SelectorProductFeaturesSection[]} Features
  */
 export function buildCardFeaturesFromFeatureKeys(
-	features: JetpackPlanCardFeature[],
+	features: string[],
 	options?: Record< string, unknown >,
 	variation?: Iterations
 ): SelectorProductFeaturesItem[] | SelectorProductFeaturesSection[] {

packages/calypso-products/src/constants/terms.ts

@@ -1,7 +1,8 @@
 export const TERM_MONTHLY = 'TERM_MONTHLY';
 export const TERM_ANNUALLY = 'TERM_ANNUALLY';
 export const TERM_BIENNIALLY = 'TERM_BIENNIALLY';
-export const TERMS_LIST = [ TERM_MONTHLY, TERM_ANNUALLY, TERM_BIENNIALLY ];
+
+export const TERMS_LIST = <const>[ TERM_MONTHLY, TERM_ANNUALLY, TERM_BIENNIALLY ];
 
 export const PLAN_MONTHLY_PERIOD = 31;
 export const PLAN_ANNUAL_PERIOD = 365;

packages/calypso-products/src/constants/types.ts

@@ -8,3 +8,16 @@ export const TYPE_SECURITY_DAILY = 'TYPE_SECURITY_DAILY';
 export const TYPE_SECURITY_REALTIME = 'TYPE_SECURITY_REALTIME';
 export const TYPE_ALL = 'TYPE_ALL';
 export const TYPE_P2_PLUS = 'TYPE_P2_PLUS';
+
+export const TYPES_LIST = <const>[
+	TYPE_FREE,
+	TYPE_BLOGGER,
+	TYPE_PERSONAL,
+	TYPE_PREMIUM,
+	TYPE_BUSINESS,
+	TYPE_ECOMMERCE,
+	TYPE_SECURITY_DAILY,
+	TYPE_SECURITY_REALTIME,
+	TYPE_ALL,
+	TYPE_P2_PLUS,
+];

packages/calypso-products/src/constants/wpcom.ts

@@ -4,6 +4,10 @@ export const GROUP_WPCOM = 'GROUP_WPCOM';
 export const PRODUCT_WPCOM_SEARCH = 'wpcom_search';
 export const PRODUCT_WPCOM_SEARCH_MONTHLY = 'wpcom_search_monthly';
 
+export const WPCOM_SEARCH_PRODUCTS = <const>[ PRODUCT_WPCOM_SEARCH, PRODUCT_WPCOM_SEARCH_MONTHLY ];
+
+export const WPCOM_PRODUCTS = <const>[ ...WPCOM_SEARCH_PRODUCTS ];
+
 // Plans
 export const PLAN_BUSINESS_MONTHLY = 'business-bundle-monthly';
 export const PLAN_BUSINESS = 'business-bundle';
@@ -27,7 +31,31 @@ export const PLAN_VIP = 'vip';
 export const PLAN_P2_PLUS = 'wp_p2_plus_monthly';
 export const PLAN_P2_FREE = 'p2_free_plan'; // Not a real plan; it's a renamed WP.com Free for the P2 project.
 
-export const WPCOM_MONTHLY_PLANS = [
+export const WPCOM_PLANS = <const>[
+	PLAN_BUSINESS_MONTHLY,
+	PLAN_BUSINESS,
+	PLAN_BUSINESS_2_YEARS,
+	PLAN_PREMIUM_MONTHLY,
+	PLAN_PREMIUM,
+	PLAN_PREMIUM_2_YEARS,
+	PLAN_PERSONAL_MONTHLY,
+	PLAN_PERSONAL,
+	PLAN_PERSONAL_2_YEARS,
+	PLAN_BLOGGER,
+	PLAN_BLOGGER_2_YEARS,
+	PLAN_ECOMMERCE_MONTHLY,
+	PLAN_ECOMMERCE,
+	PLAN_ECOMMERCE_2_YEARS,
+	PLAN_FREE,
+	PLAN_HOST_BUNDLE,
+	PLAN_WPCOM_ENTERPRISE,
+	PLAN_CHARGEBACK,
+	PLAN_VIP,
+	PLAN_P2_PLUS,
+	PLAN_P2_FREE,
+];
+
+export const WPCOM_MONTHLY_PLANS = <const>[
 	PLAN_BUSINESS_MONTHLY,
 	PLAN_PREMIUM_MONTHLY,
 	PLAN_PERSONAL_MONTHLY,

packages/calypso-products/src/is-jetpack-purchasable-item.ts

@@ -6,15 +6,15 @@ import { JETPACK_LEGACY_PLANS, JETPACK_PRODUCTS_LIST, JETPACK_RESET_PLANS } from
 /**
  * Type dependencies
  */
-import type { JetpackPurchasableItem } from './types';
+import type { JetpackPurchasableItemSlug } from './types';
 
 export default function isJetpackPurchasableItem(
 	itemSlug: string,
 	options: { includeLegacy?: boolean } = {}
-): itemSlug is JetpackPurchasableItem {
+): itemSlug is JetpackPurchasableItemSlug {
 	return [
 		...JETPACK_PRODUCTS_LIST,
 		...JETPACK_RESET_PLANS,
 		...( options.includeLegacy ? JETPACK_LEGACY_PLANS : [] ),
-	].includes( itemSlug as JetpackPurchasableItem );
+	].includes( itemSlug as JetpackPurchasableItemSlug );
 }

packages/calypso-products/src/main.js

@@ -146,8 +146,9 @@ export function planHasFeature( plan, feature ) {
  */
 export function planHasSuperiorFeature( plan, feature ) {
 	const planConstantObj = getPlan( plan );
+	const features = planConstantObj.getInferiorHiddenFeatures?.() ?? [];
 
-	return planConstantObj.getInferiorHiddenFeatures().includes( feature );
+	return features.includes( feature );
 }
 
 export function shouldFetchSitePlans( sitePlans, selectedSite ) {
@@ -439,10 +440,8 @@ export function plansLink( url, siteSlug, intervalType, forceIntervalType = fals
 
 export function applyTestFiltersToPlansList( planName, abtest, extraArgs = {} ) {
 	const filteredPlanConstantObj = { ...getPlan( planName ) };
-	const filteredPlanFeaturesConstantList = getPlan( planName ).getPlanCompareFeatures(
-		abtest,
-		extraArgs
-	);
+	const filteredPlanFeaturesConstantList =
+		getPlan( planName ).getPlanCompareFeatures?.( abtest, extraArgs ) ?? [];
 
 	// these becomes no-ops when we removed some of the abtest overrides, but
 	// we're leaving the code in place for future tests