@automattic/plans-grid-next 1.0.1 → 1.0.3

package/src/hooks/data-store/use-grid-plans.tsx

@@ -8,6 +8,8 @@ import {
 	TYPE_PREMIUM,
 	TYPE_WOOEXPRESS_MEDIUM,
 	TYPE_WOOEXPRESS_SMALL,
+	TYPE_WOO_HOSTED_BASIC,
+	TYPE_WOO_HOSTED_PRO,
 	getPlan,
 	isBloggerPlan,
 	applyTestFiltersToPlansList,
@@ -23,12 +25,16 @@ import {
 	isPremiumPlan,
 	isFreePlan,
 	isPersonalPlan,
+	planHasFeature,
+	getPlanClass,
 } from '@automattic/calypso-products';
 import { Plans } from '@automattic/data-stores';
+import i18n, { useTranslate } from 'i18n-calypso';
 import { isSamePlan } from '../../lib/is-same-plan';
 import { UseGridPlansParams, UseGridPlansType } from './types';
 import useHighlightLabels from './use-highlight-labels';
 import usePlansFromTypes from './use-plans-from-types';
+import useTitleBadges from './use-title-badges';
 import type { HiddenPlans, PlansIntent } from '../../types';
 import type { TranslateResult } from 'i18n-calypso';
 
@@ -51,39 +57,57 @@ const isGridPlanVisible = ( {
 		hideEcommercePlan,
 	} = {},
 	isDisplayingPlansNeededForFeature,
-	planSlug,
+	gridPlanSlug,
 	planSlugsForIntent,
 	selectedPlan,
+	selectedFeature,
+	currentPlanSlug,
 }: {
 	hiddenPlans?: HiddenPlans;
 	isDisplayingPlansNeededForFeature?: boolean;
-	planSlug: PlanSlug;
+	gridPlanSlug: PlanSlug;
 	planSlugsForIntent: PlanSlug[];
 	selectedPlan?: PlanSlug;
+	selectedFeature?: string | null;
+	currentPlanSlug?: PlanSlug;
 } ): boolean => {
-	let isVisible = planSlugsForIntent.includes( planSlug );
+	let isVisible = planSlugsForIntent.includes( gridPlanSlug );
 
-	if ( isDisplayingPlansNeededForFeature && selectedPlan ) {
-		if ( isEcommercePlan( selectedPlan ) ) {
-			isVisible = isEcommercePlan( planSlug );
+	if ( isDisplayingPlansNeededForFeature ) {
+		// Feature-based filtering: Show the plan being evaluated if it includes the selected feature,
+		// or if it's the user's current plan (ignoring billing term length)
+		if ( selectedFeature && ! selectedPlan ) {
+			const hasFeature = planHasFeature( gridPlanSlug, selectedFeature );
+			const isCurrentPlan =
+				currentPlanSlug && getPlanClass( currentPlanSlug ) === getPlanClass( gridPlanSlug );
+			isVisible = isVisible && ( isCurrentPlan || hasFeature );
 		}
+		// Plan-tier-based filtering: When a specific plan is pre-selected,
+		// show that plan tier and all higher tiers (e.g., if Premium is selected, show Premium + Business + Commerce)
+		else if ( selectedPlan ) {
+			if ( isEcommercePlan( selectedPlan ) ) {
+				isVisible = isEcommercePlan( gridPlanSlug );
+			}
 
-		if ( isBusinessPlan( selectedPlan ) ) {
-			isVisible = isBusinessPlan( planSlug ) || isEcommercePlan( planSlug );
-		}
+			if ( isBusinessPlan( selectedPlan ) ) {
+				isVisible = isBusinessPlan( gridPlanSlug ) || isEcommercePlan( gridPlanSlug );
+			}
 
-		if ( isPremiumPlan( selectedPlan ) ) {
-			isVisible =
-				isPremiumPlan( planSlug ) || isBusinessPlan( planSlug ) || isEcommercePlan( planSlug );
+			if ( isPremiumPlan( selectedPlan ) ) {
+				isVisible =
+					isPremiumPlan( gridPlanSlug ) ||
+					isBusinessPlan( gridPlanSlug ) ||
+					isEcommercePlan( gridPlanSlug );
+			}
 		}
 	}
 
 	if (
-		( hideFreePlan && isFreePlan( planSlug ) ) ||
-		( hidePersonalPlan && isPersonalPlan( planSlug ) ) ||
-		( hidePremiumPlan && isPremiumPlan( planSlug ) ) ||
-		( hideBusinessPlan && isBusinessPlan( planSlug ) ) ||
-		( hideEcommercePlan && isEcommercePlan( planSlug ) )
+		( hideFreePlan && isFreePlan( gridPlanSlug ) ) ||
+		( hidePersonalPlan && isPersonalPlan( gridPlanSlug ) ) ||
+		( hidePremiumPlan && isPremiumPlan( gridPlanSlug ) ) ||
+		( hideBusinessPlan && isBusinessPlan( gridPlanSlug ) ) ||
+		( hideEcommercePlan && isEcommercePlan( gridPlanSlug ) )
 	) {
 		isVisible = false;
 	}
@@ -122,6 +146,8 @@ export const usePlanTypesWithIntent = ( {
 		...( isEnterpriseAvailable ? [ TYPE_ENTERPRISE_GRID_WPCOM ] : [] ),
 		TYPE_WOOEXPRESS_SMALL,
 		TYPE_WOOEXPRESS_MEDIUM,
+		TYPE_WOO_HOSTED_BASIC,
+		TYPE_WOO_HOSTED_PRO,
 		TYPE_P2_PLUS,
 	];
 
@@ -150,11 +176,14 @@ export const usePlanTypesWithIntent = ( {
 			planTypes = [ TYPE_FREE, TYPE_PERSONAL, TYPE_PREMIUM ];
 			break;
 		case 'plans-new-hosted-site':
-			planTypes = [ TYPE_BUSINESS, TYPE_ECOMMERCE ];
+			planTypes = [ TYPE_PERSONAL, TYPE_PREMIUM, TYPE_BUSINESS, TYPE_ECOMMERCE ];
 			break;
 		case 'plans-new-hosted-site-business-only':
 			planTypes = [ TYPE_BUSINESS ];
 			break;
+		case 'plans-ai-assembler-free-trial':
+			planTypes = [ TYPE_PERSONAL, TYPE_PREMIUM, TYPE_BUSINESS ];
+			break;
 		case 'plans-import':
 			planTypes = [ TYPE_FREE, TYPE_PERSONAL, TYPE_PREMIUM, TYPE_BUSINESS ];
 			break;
@@ -165,6 +194,42 @@ export const usePlanTypesWithIntent = ( {
 				TYPE_ECOMMERCE,
 			];
 			break;
+		case 'plans-upgrade': {
+			// Show current plan plus all higher-tier plans (upgrade options only)
+			const upgradePlanTypes = [
+				TYPE_FREE,
+				TYPE_PERSONAL,
+				TYPE_PREMIUM,
+				TYPE_BUSINESS,
+				TYPE_ECOMMERCE,
+			];
+			if ( isEnterpriseAvailable ) {
+				upgradePlanTypes.push( TYPE_ENTERPRISE_GRID_WPCOM );
+			}
+
+			// Find the index of the current plan in the hierarchy
+			const currentPlanIndex = currentSitePlanType
+				? upgradePlanTypes.findIndex( ( planType ) => planType === currentSitePlanType )
+				: -1;
+
+			if ( currentPlanIndex >= 0 ) {
+				// Show current plan and all plans after it (higher tiers)
+				planTypes = upgradePlanTypes.slice( currentPlanIndex );
+			} else {
+				// If current plan not found or no current plan, show all plans
+				planTypes = upgradePlanTypes;
+			}
+			break;
+		}
+		case 'plans-upgrade-or-downgrade': {
+			// Show all plans — used when the current plan is expired and the user
+			// may want to downgrade as well as upgrade.
+			planTypes = [ TYPE_FREE, TYPE_PERSONAL, TYPE_PREMIUM, TYPE_BUSINESS, TYPE_ECOMMERCE ];
+			if ( isEnterpriseAvailable ) {
+				planTypes.push( TYPE_ENTERPRISE_GRID_WPCOM );
+			}
+			break;
+		}
 		case 'plans-jetpack-app':
 			planTypes = [ TYPE_PERSONAL, TYPE_PREMIUM, TYPE_BUSINESS, TYPE_ECOMMERCE ];
 			break;
@@ -199,9 +264,35 @@ export const usePlanTypesWithIntent = ( {
 			planTypes = [ TYPE_PREMIUM, TYPE_BUSINESS ];
 			break;
 		case 'plans-affiliate':
+			planTypes = [ TYPE_BUSINESS, TYPE_ECOMMERCE ];
+			break;
 		case 'plans-site-selected-legacy':
 			planTypes = [ TYPE_FREE, TYPE_PERSONAL, TYPE_PREMIUM, TYPE_BUSINESS, TYPE_ECOMMERCE ];
 			break;
+		case 'plans-playground':
+			planTypes = [ TYPE_BUSINESS, TYPE_ECOMMERCE ];
+			break;
+		case 'plans-playground-premium':
+			// This plan intent is currently not utilized but will be soon
+			planTypes = [ TYPE_PREMIUM, TYPE_BUSINESS, TYPE_ECOMMERCE ];
+			break;
+		case 'plans-wordpress-hosting':
+			planTypes = [ TYPE_BUSINESS, TYPE_ECOMMERCE, TYPE_ENTERPRISE_GRID_WPCOM ];
+			break;
+		case 'plans-website-builder':
+			planTypes = [ TYPE_FREE, TYPE_PERSONAL, TYPE_PREMIUM, TYPE_BUSINESS ];
+			break;
+		case 'plans-woo-hosted':
+			planTypes = [ TYPE_WOO_HOSTED_BASIC, TYPE_WOO_HOSTED_PRO ];
+			break;
+		// Used by the woo-hosting-solutions-flow ref: only show plans that support
+		// post-checkout WooCommerce auto-install.
+		case 'plans-woo-hosting-solutions':
+			planTypes = [ TYPE_PERSONAL, TYPE_PREMIUM, TYPE_BUSINESS, TYPE_ECOMMERCE ];
+			break;
+		case 'plans-migration':
+			planTypes = [ TYPE_PERSONAL, TYPE_PREMIUM, TYPE_BUSINESS, TYPE_ECOMMERCE ];
+			break;
 		default:
 			planTypes = availablePlanTypes;
 	}
@@ -223,6 +314,7 @@ const useGridPlans: UseGridPlansType = ( {
 	term = TERM_MONTHLY,
 	intent,
 	selectedPlan,
+	selectedFeature,
 	hiddenPlans,
 	isInSignup,
 	eligibleForFreeHostingTrial,
@@ -233,7 +325,10 @@ const useGridPlans: UseGridPlansType = ( {
 	highlightLabelOverrides,
 	isDomainOnlySite,
 	reflectStorageSelectionInPlanPrices,
+	useFocusedNewCopyTaglines,
+	showBillingDescriptionForIncreasedRenewalPrice,
 } ) => {
+	const translate = useTranslate();
 	const freeTrialPlanSlugs = useFreeTrialPlanSlugs?.( {
 		intent: intent ?? 'default',
 		eligibleForFreeHostingTrial,
@@ -281,6 +376,11 @@ const useGridPlans: UseGridPlansType = ( {
 		isDomainOnlySite: isDomainOnlySite || false,
 	} );
 
+	const titleBadges = useTitleBadges( {
+		intent,
+		planSlugs: planSlugsForIntent,
+	} );
+
 	// TODO: pricedAPIPlans to be queried from data-store package
 	const pricedAPIPlans = Plans.usePlans( { coupon } );
 	const pricingMeta = Plans.usePricingMetaForGridPlans( {
@@ -289,6 +389,7 @@ const useGridPlans: UseGridPlansType = ( {
 		siteId,
 		useCheckPlanAvailabilityForPurchase,
 		reflectStorageSelectionInPlanPrices,
+		showBillingDescriptionForIncreasedRenewalPrice,
 	} );
 
 	// Null return would indicate that we are still loading the data. No grid without grid plans.
@@ -313,14 +414,76 @@ const useGridPlans: UseGridPlansType = ( {
 			tagline = planConstantObj.getNewsletterTagLine?.() ?? '';
 		} else if ( 'plans-blog-onboarding' === intent ) {
 			tagline = planConstantObj.getBlogOnboardingTagLine?.() ?? '';
+		} else if ( 'plans-woo-hosting-solutions' === intent ) {
+			if ( isPersonalPlan( planSlug ) ) {
+				tagline = translate(
+					'Try out a store idea with low commitment. Custom domain and basic tools.'
+				);
+			} else if ( isPremiumPlan( planSlug ) ) {
+				tagline = translate(
+					'A solid foundation for new stores. More design options and faster support when you need help.'
+				);
+			} else if ( isBusinessPlan( planSlug ) ) {
+				tagline = translate(
+					'Built for real stores. 24/7 priority support, advanced features, and the performance your customers expect.'
+				);
+			} else if ( isEcommercePlan( planSlug ) ) {
+				tagline = translate(
+					'For serious stores. Priority support, advanced extensions, and premium store themes.'
+				);
+			} else {
+				tagline = planConstantObj.getPlanTagline?.() ?? '';
+			}
 		} else {
 			tagline = planConstantObj.getPlanTagline?.() ?? '';
 		}
 
-		const productNameShort =
-			isWpcomEnterpriseGridPlan( planSlug ) && planConstantObj.getPathSlug
-				? planConstantObj.getPathSlug()
-				: planObject?.productNameShort ?? null;
+		if ( useFocusedNewCopyTaglines ) {
+			const existingTagline = tagline;
+			if ( isFreePlan( planSlug ) ) {
+				tagline =
+					i18n.getLocaleSlug()?.startsWith( 'en' ) ||
+					i18n.hasTranslation( 'Start your WordPress journey.' )
+						? translate( 'Start your WordPress journey.' )
+						: existingTagline;
+			} else if ( isPersonalPlan( planSlug ) ) {
+				tagline =
+					i18n.getLocaleSlug()?.startsWith( 'en' ) ||
+					i18n.hasTranslation( 'Build your presence with a site you can customize.' )
+						? translate( 'Build your presence with a site you can customize.' )
+						: existingTagline;
+			} else if ( isPremiumPlan( planSlug ) ) {
+				tagline =
+					i18n.getLocaleSlug()?.startsWith( 'en' ) ||
+					i18n.hasTranslation( 'Accept payments on your site and reach more people.' )
+						? translate( 'Accept payments on your site and reach more people.' )
+						: existingTagline;
+			} else if ( isBusinessPlan( planSlug ) ) {
+				tagline =
+					i18n.getLocaleSlug()?.startsWith( 'en' ) ||
+					i18n.hasTranslation( 'Grow your business with powerful tools and priority support.' )
+						? translate( 'Grow your business with powerful tools and priority support.' )
+						: existingTagline;
+			} else if ( isEcommercePlan( planSlug ) ) {
+				tagline =
+					i18n.getLocaleSlug()?.startsWith( 'en' ) ||
+					i18n.hasTranslation( 'Run an online store and keep more of what you earn.' )
+						? translate( 'Run an online store and keep more of what you earn.' )
+						: existingTagline;
+			} else if ( isWpcomEnterpriseGridPlan( planSlug ) ) {
+				tagline =
+					i18n.getLocaleSlug()?.startsWith( 'en' ) ||
+					i18n.hasTranslation( 'Publish securely at enterprise scale.' )
+						? translate( 'Publish securely at enterprise scale.' )
+						: existingTagline;
+			}
+		}
+
+		// The enterprise plan isn't returned by the plans endpoint, so it has no
+		// server-provided product name; fall back to its fixed path slug.
+		const productNameShort = isWpcomEnterpriseGridPlan( planSlug )
+			? 'enterprise'
+			: planObject?.productNameShort ?? null;
 
 		// cartItemForPlan done in line here as it's a small piece of logic to pass another selector for
 		const cartItemForPlan =
@@ -331,9 +494,11 @@ const useGridPlans: UseGridPlansType = ( {
 				  };
 
 		const isVisible = isGridPlanVisible( {
-			planSlug,
+			gridPlanSlug: planSlug,
 			planSlugsForIntent,
 			selectedPlan,
+			selectedFeature,
+			currentPlanSlug: sitePlanSlug,
 			hiddenPlans,
 			isDisplayingPlansNeededForFeature,
 		} );
@@ -352,6 +517,7 @@ const useGridPlans: UseGridPlansType = ( {
 			isMonthlyPlan,
 			cartItemForPlan,
 			highlightLabel: highlightLabels[ planSlug ],
+			titleBadge: titleBadges[ planSlug ],
 			pricing: pricingMeta[ planSlug ],
 		};
 	} );

package/src/hooks/data-store/use-highlight-labels.ts

@@ -1,5 +1,6 @@
 import {
 	isBusinessPlan,
+	isEcommercePlan,
 	isPremiumPlan,
 	isPersonalPlan,
 	planLevelsMatch,
@@ -34,6 +35,8 @@ const useHighlightLabels = ( {
 	isDomainOnlySite,
 }: Props ) => {
 	const translate = useTranslate();
+	const isVisualSplitIntent =
+		intent === 'plans-wordpress-hosting' || intent === 'plans-website-builder';
 
 	return planSlugs.reduce(
 		( acc, planSlug ) => {
@@ -70,10 +73,16 @@ const useHighlightLabels = ( {
 				if ( isPremiumPlan( planSlug ) ) {
 					label = translate( 'Best for Blog' );
 				}
-			} else if ( isBusinessPlan( planSlug ) && ! selectedPlan ) {
-				label = translate( 'Best for devs' );
-			} else if ( isPopularPlan( planSlug ) && ! selectedPlan ) {
+			} else if ( 'plans-affiliate' === intent && isBusinessPlan( planSlug ) ) {
 				label = translate( 'Popular' );
+			} else if ( 'plans-woo-hosting-solutions' === intent ) {
+				if ( isEcommercePlan( planSlug ) ) {
+					label = translate( 'Best value' );
+				}
+			} else if ( isBusinessPlan( planSlug ) && ! selectedPlan && ! isVisualSplitIntent ) {
+				label = translate( 'Best value' );
+			} else if ( isPopularPlan( planSlug ) && ! selectedPlan && ! isVisualSplitIntent ) {
+				label = translate( 'Most popular' );
 			}
 
 			return {

package/src/hooks/data-store/use-plan-billing-description.tsx

@@ -10,8 +10,11 @@ import {
 	PLAN_HOSTING_TRIAL_MONTHLY,
 } from '@automattic/calypso-products';
 import { Plans } from '@automattic/data-stores';
-import { useTranslate, formatCurrency } from 'i18n-calypso';
+import { formatCurrency } from '@automattic/number-formatters';
+import { useTranslate } from 'i18n-calypso';
 import { usePlansGridContext } from '../../grid-context';
+import { calculateDiscountPercentage } from '../../lib/plan-pricing-utils';
+import { getRenewalPricingText } from './get-renewal-pricing-text';
 import type { GridPlan } from '../../types';
 
 interface UsePlanBillingDescriptionProps {
@@ -34,7 +37,12 @@ export default function usePlanBillingDescription( {
 }: UsePlanBillingDescriptionProps ) {
 	const translate = useTranslate();
 	const { currencyCode, originalPrice, discountedPrice, billingPeriod, introOffer } = pricing || {};
-	const { reflectStorageSelectionInPlanPrices } = usePlansGridContext();
+	const {
+		reflectStorageSelectionInPlanPrices,
+		showSimplifiedBillingDescription,
+		showBillingDescriptionForIncreasedRenewalPrice,
+		enableCategorisedFeatures,
+	} = usePlansGridContext();
 	const yearlyVariantPlanSlug = getPlanSlugForTermVariant( planSlug, TERM_ANNUALLY );
 
 	const yearlyVariantPricing = Plans.usePricingMetaForGridPlans( {
@@ -63,23 +71,33 @@ export default function usePlanBillingDescription( {
 		yearlyVariantPricing &&
 		( ! introOffer || introOffer.isOfferComplete )
 	) {
-		const yearlyVariantMaybeDiscountedPrice = Number.isFinite(
+		// For renewal pricing experiment in FeaturesGrid, show "per month" and move savings text to post-button area
+		// For ComparisonGrid, keep the original savings text above the button
+		if ( showBillingDescriptionForIncreasedRenewalPrice && enableCategorisedFeatures ) {
+			return translate( 'per month' );
+		}
+
+		let yearlyVariantMaybeDiscountedPrice = Number.isFinite(
 			yearlyVariantPricing.discountedPrice?.monthly
 		)
 			? yearlyVariantPricing.discountedPrice?.monthly
 			: yearlyVariantPricing.originalPrice?.monthly;
 
-		if (
-			yearlyVariantMaybeDiscountedPrice &&
-			yearlyVariantMaybeDiscountedPrice < originalPrice.monthly
-		) {
+		if ( showBillingDescriptionForIncreasedRenewalPrice ) {
+			yearlyVariantMaybeDiscountedPrice = Number.isFinite(
+				yearlyVariantPricing.discountedPrice?.monthly
+			)
+				? yearlyVariantPricing.discountedPrice?.monthly
+				: yearlyVariantPricing.introOffer?.rawPrice?.monthly ?? null;
+		}
+
+		const discountRate =
+			yearlyVariantMaybeDiscountedPrice != null
+				? calculateDiscountPercentage( originalPrice.monthly, yearlyVariantMaybeDiscountedPrice )
+				: undefined;
+		if ( discountRate !== undefined ) {
 			return translate( 'Save %(discountRate)s%% by paying annually', {
-				args: {
-					discountRate: Math.floor(
-						( 100 * ( originalPrice.monthly - yearlyVariantMaybeDiscountedPrice ) ) /
-							originalPrice.monthly
-					),
-				},
+				args: { discountRate },
 			} );
 		}
 
@@ -106,7 +124,12 @@ export default function usePlanBillingDescription( {
 	 *   1. We only expose introOffers to monthly & yearly plans for now (so no need to introduce more translations just yet)
 	 *   2. We only expose month & year based intervals for now (so no need to introduce more translations just yet)
 	 */
-	if ( introOffer?.intervalCount && introOffer.intervalUnit && ! introOffer.isOfferComplete ) {
+	if (
+		introOffer?.intervalCount &&
+		introOffer.intervalUnit &&
+		! introOffer.isOfferComplete &&
+		! showBillingDescriptionForIncreasedRenewalPrice
+	) {
 		const discountedPriceFull =
 			typeof discountedPrice?.full === 'number' ? discountedPrice.full : introOffer?.rawPrice?.full;
 
@@ -252,7 +275,15 @@ export default function usePlanBillingDescription( {
 		return null;
 	}
 
-	if ( discountedPriceFullTermText ) {
+	// For renewal pricing experiment with intro pricing
+	if ( showBillingDescriptionForIncreasedRenewalPrice && discountedPriceFullTermText ) {
+		// In FeaturesGrid, show "per month" above button
+		if ( enableCategorisedFeatures ) {
+			return translate( 'per month' );
+		}
+		// In ComparisonGrid, continue to renewal pricing section below (don't return here)
+	} else if ( discountedPriceFullTermText ) {
+		// Show intro pricing for non-experiment users
 		if ( PLAN_ANNUAL_PERIOD === billingPeriod ) {
 			return translate(
 				'per month, %(fullTermDiscountedPriceText)s for the first year, excl. taxes',
@@ -282,6 +313,40 @@ export default function usePlanBillingDescription( {
 				}
 			);
 		}
+	}
+
+	if ( showBillingDescriptionForIncreasedRenewalPrice ) {
+		// For renewal pricing experiment, show variation-specific text
+		// In FeaturesGrid (enableCategorisedFeatures), show "per month" and move renewal text below CTA
+		// In ComparisonGrid, show full renewal text above CTA
+		if ( enableCategorisedFeatures ) {
+			return translate( 'per month' );
+		}
+
+		return getRenewalPricingText( {
+			pricing,
+			showBillingDescriptionForIncreasedRenewalPrice,
+			translate,
+		} );
+	} else if ( showSimplifiedBillingDescription ) {
+		// Use simplified billing description
+		if ( PLAN_ANNUAL_PERIOD === billingPeriod ) {
+			return translate( 'per month, billed every %(months)s months', {
+				args: { months: 12 },
+			} );
+		}
+
+		if ( PLAN_BIENNIAL_PERIOD === billingPeriod ) {
+			return translate( 'per month, billed every %(months)s months', {
+				args: { months: 24 },
+			} );
+		}
+
+		if ( PLAN_TRIENNIAL_PERIOD === billingPeriod ) {
+			return translate( 'per month, billed every %(months)s months', {
+				args: { months: 36 },
+			} );
+		}
 	} else if ( originalPriceFullTermText ) {
 		if ( PLAN_ANNUAL_PERIOD === billingPeriod ) {
 			return translate( 'per month, %(rawPrice)s billed annually, excl. taxes', {

package/src/hooks/data-store/use-plan-billing-period.tsx

@@ -0,0 +1,28 @@
+import {
+	TERMS_LIST,
+	TERM_ANNUALLY,
+	TERM_BIENNIALLY,
+	TERM_MONTHLY,
+	TERM_TRIENNIALLY,
+} from '@automattic/calypso-products';
+import { EFFECTIVE_TERMS_LIST } from '../../constants';
+import type { SupportedUrlFriendlyTermType } from '../../types';
+
+const usePlanBillingPeriod = ( {
+	intervalType,
+	defaultValue,
+}: {
+	intervalType: SupportedUrlFriendlyTermType;
+	defaultValue?: ( typeof TERMS_LIST )[ number ];
+} ) => {
+	const plans: Record< SupportedUrlFriendlyTermType, ( typeof EFFECTIVE_TERMS_LIST )[ number ] > = {
+		monthly: TERM_MONTHLY,
+		yearly: TERM_ANNUALLY,
+		'2yearly': TERM_BIENNIALLY,
+		'3yearly': TERM_TRIENNIALLY,
+	} as const;
+
+	return plans[ intervalType ] || defaultValue || TERM_ANNUALLY;
+};
+
+export default usePlanBillingPeriod;