@automattic/plans-grid-next 1.0.1 → 1.0.3

package/src/hooks/data-store/use-plan-features-for-grid-plans.ts

@@ -1,9 +1,22 @@
 import {
+	FEATURE_AI_ASSISTANT,
+	FEATURE_AI_WEBSITE_BUILDER,
+	FEATURE_AI_WRITER_DESIGNER,
+	FEATURE_BUILT_IN_SITE_ASSISTANT,
 	FEATURE_CUSTOM_DOMAIN,
+	FEATURE_EMAIL_MARKETING,
+	FEATURE_ENHANCED_AI_ASSISTANT_AND_TOOLS,
+	FEATURE_GUIDED_WEBSITE_BUILDER,
+	FEATURE_SIMPLE_PAYMENTS,
+	FEATURE_PROFESSIONAL_EMAIL_FREE_YEAR,
 	applyTestFiltersToPlansList,
+	isBusinessPlan,
 	isMonthly,
+	isPersonalPlan,
+	isPremiumPlan,
 } from '@automattic/calypso-products';
 import { useMemo } from '@wordpress/element';
+import { useTranslate } from 'i18n-calypso';
 import getPlanFeaturesObject from '../../lib/get-plan-features-object';
 import useHighlightedFeatures from './use-highlighted-features';
 import type {
@@ -13,6 +26,61 @@ import type {
 	GridPlan,
 } from '../../types';
 import type { FeatureObject, FeatureList } from '@automattic/calypso-products';
+import type { TranslateResult } from 'i18n-calypso';
+
+function isPremiumWebsiteBuilderPillFeature( featureSlug: string ): boolean {
+	return (
+		featureSlug === FEATURE_AI_WEBSITE_BUILDER ||
+		featureSlug === FEATURE_GUIDED_WEBSITE_BUILDER ||
+		featureSlug === FEATURE_AI_WRITER_DESIGNER
+	);
+}
+
+function isBusinessAssistantPillFeature( featureSlug: string ): boolean {
+	return (
+		featureSlug === FEATURE_ENHANCED_AI_ASSISTANT_AND_TOOLS ||
+		featureSlug === FEATURE_AI_ASSISTANT ||
+		featureSlug === FEATURE_BUILT_IN_SITE_ASSISTANT ||
+		featureSlug === FEATURE_AI_WRITER_DESIGNER
+	);
+}
+
+function getPricingDifferentiationFeatureBadgeText(
+	planSlug: string,
+	featureSlug: string,
+	translate: ( text: string ) => TranslateResult,
+	options?: { suppressAiPills?: boolean }
+): TranslateResult | undefined {
+	const suppressAiPills = options?.suppressAiPills ?? false;
+
+	if ( isPersonalPlan( planSlug ) && featureSlug === FEATURE_CUSTOM_DOMAIN ) {
+		return translate( 'Free' );
+	}
+	if (
+		! suppressAiPills &&
+		isPremiumPlan( planSlug ) &&
+		isPremiumWebsiteBuilderPillFeature( featureSlug )
+	) {
+		return translate( 'AI' );
+	}
+	if ( isPremiumPlan( planSlug ) && featureSlug === FEATURE_SIMPLE_PAYMENTS ) {
+		return translate( 'New' );
+	}
+	if (
+		! suppressAiPills &&
+		isBusinessPlan( planSlug ) &&
+		isBusinessAssistantPillFeature( featureSlug )
+	) {
+		return translate( 'AI' );
+	}
+	if ( isBusinessPlan( planSlug ) && featureSlug === FEATURE_PROFESSIONAL_EMAIL_FREE_YEAR ) {
+		return translate( 'Email' );
+	}
+	if ( isBusinessPlan( planSlug ) && featureSlug === FEATURE_EMAIL_MARKETING ) {
+		return translate( 'New' );
+	}
+	return undefined;
+}
 
 export type UsePlanFeaturesForGridPlans = ( {
 	gridPlans,
@@ -23,6 +91,9 @@ export type UsePlanFeaturesForGridPlans = ( {
 	showLegacyStorageFeature,
 	selectedFeature,
 	isInSignup,
+	useVar42NoAiFeatures,
+	showPricingDifferentiationFeaturePills,
+	isExperimentVariant,
 }: {
 	gridPlans: Omit< GridPlan, 'features' >[];
 	allFeaturesList: FeatureList;
@@ -31,6 +102,9 @@ export type UsePlanFeaturesForGridPlans = ( {
 	selectedFeature?: string | null;
 	showLegacyStorageFeature?: boolean;
 	isInSignup?: boolean;
+	useVar42NoAiFeatures?: boolean;
+	showPricingDifferentiationFeaturePills?: boolean;
+	isExperimentVariant?: boolean;
 } ) => { [ planSlug: string ]: PlanFeaturesForGridPlan };
 
 /**
@@ -46,7 +120,11 @@ const usePlanFeaturesForGridPlans: UsePlanFeaturesForGridPlans = ( {
 	selectedFeature,
 	showLegacyStorageFeature,
 	isInSignup,
+	useVar42NoAiFeatures,
+	showPricingDifferentiationFeaturePills,
+	isExperimentVariant,
 } ) => {
+	const translate = useTranslate();
 	const highlightedFeatures = useHighlightedFeatures( { intent: intent ?? null, isInSignup } );
 	return useMemo( () => {
 		return gridPlans.reduce(
@@ -58,7 +136,21 @@ const usePlanFeaturesForGridPlans: UsePlanFeaturesForGridPlans = ( {
 				let wpcomFeatures: FeatureObject[] = [];
 				let jetpackFeatures: FeatureObject[] = [];
 
-				if ( 'plans-newsletter' === intent ) {
+				if ( useVar42NoAiFeatures ) {
+					wpcomFeatures = getPlanFeaturesObject(
+						allFeaturesList,
+						planConstantObj?.getVar42NoAiSignupWpcomFeatures?.() ??
+							planConstantObj?.get2023PricingGridSignupWpcomFeatures?.() ??
+							[],
+						isExperimentVariant ?? true
+					);
+
+					jetpackFeatures = getPlanFeaturesObject(
+						allFeaturesList,
+						planConstantObj.get2023PricingGridSignupJetpackFeatures?.() ?? [],
+						isExperimentVariant ?? true
+					);
+				} else if ( 'plans-newsletter' === intent ) {
 					wpcomFeatures = getPlanFeaturesObject(
 						allFeaturesList,
 						planConstantObj?.getNewsletterSignupFeatures?.() ?? []
@@ -103,6 +195,30 @@ const usePlanFeaturesForGridPlans: UsePlanFeaturesForGridPlans = ( {
 							return true;
 						} );
 					}
+				} else if ( 'plans-wordpress-hosting' === intent ) {
+					// Use visual split features for WordPress hosting intent
+					if ( planConstantObj?.getVisualSplitBusinessFeatures ) {
+						wpcomFeatures = getPlanFeaturesObject(
+							allFeaturesList,
+							planConstantObj.getVisualSplitBusinessFeatures() ?? []
+						);
+					} else if ( planConstantObj?.getVisualSplitCommerceFeatures ) {
+						wpcomFeatures = getPlanFeaturesObject(
+							allFeaturesList,
+							planConstantObj.getVisualSplitCommerceFeatures() ?? []
+						);
+					} else {
+						// Fallback to default features if visual split features aren't available
+						wpcomFeatures = getPlanFeaturesObject(
+							allFeaturesList,
+							planConstantObj?.get2023PricingGridSignupWpcomFeatures?.() ?? []
+						);
+					}
+
+					jetpackFeatures = getPlanFeaturesObject(
+						allFeaturesList,
+						planConstantObj.get2023PricingGridSignupJetpackFeatures?.() ?? []
+					);
 				} else {
 					wpcomFeatures = getPlanFeaturesObject(
 						allFeaturesList,
@@ -179,12 +295,26 @@ const usePlanFeaturesForGridPlans: UsePlanFeaturesForGridPlans = ( {
 							feature.getSlug()
 						);
 
+						const featureSlug = feature.getSlug();
+
+						const badgeText = showPricingDifferentiationFeaturePills
+							? getPricingDifferentiationFeatureBadgeText( planSlug, featureSlug, translate, {
+									suppressAiPills: useVar42NoAiFeatures,
+							  } )
+							: undefined;
+
 						wpcomFeaturesTransformed.push( {
 							...feature,
 							availableOnlyForAnnualPlans,
 							availableForCurrentPlan: ! isMonthlyPlan || ! availableOnlyForAnnualPlans,
+							...( badgeText && { badgeText } ),
 						} );
 					} );
+
+					if ( wpcomFeaturesTransformed.length > 0 && isExperimentVariant ) {
+						const lastIndex = wpcomFeaturesTransformed.length - 1;
+						wpcomFeaturesTransformed[ lastIndex ].isExperimentLastFeature = true;
+					}
 				}
 
 				const storageFeature = planConstantObj.getStorageFeature?.(
@@ -213,6 +343,10 @@ const usePlanFeaturesForGridPlans: UsePlanFeaturesForGridPlans = ( {
 		showLegacyStorageFeature,
 		allFeaturesList,
 		hasRedeemedDomainCredit,
+		useVar42NoAiFeatures,
+		showPricingDifferentiationFeaturePills,
+		isExperimentVariant,
+		translate,
 	] );
 };
 

package/src/hooks/data-store/use-restructured-plan-features-for-comparison-grid.ts

@@ -5,7 +5,7 @@ import {
 	type FeatureList,
 	FEATURE_CUSTOM_DOMAIN,
 } from '@automattic/calypso-products';
-import { useMemo } from 'react';
+import { useMemo } from '@wordpress/element';
 import getPlanFeaturesObject from '../../lib/get-plan-features-object';
 import usePlanFeaturesForGridPlans from './use-plan-features-for-grid-plans';
 import type {
@@ -22,6 +22,9 @@ export type UseRestructuredPlanFeaturesForComparisonGrid = ( {
 	intent,
 	showLegacyStorageFeature,
 	selectedFeature,
+	useVar42NoAiFeatures,
+	showPricingDifferentiationFeaturePills,
+	isExperimentVariant,
 }: {
 	gridPlans: Omit< GridPlan, 'features' >[];
 	allFeaturesList: FeatureList;
@@ -29,6 +32,9 @@ export type UseRestructuredPlanFeaturesForComparisonGrid = ( {
 	intent?: PlansIntent;
 	selectedFeature?: string | null;
 	showLegacyStorageFeature?: boolean;
+	useVar42NoAiFeatures?: boolean;
+	showPricingDifferentiationFeaturePills?: boolean;
+	isExperimentVariant?: boolean;
 } ) => { [ planSlug: string ]: PlanFeaturesForGridPlan };
 
 const useRestructuredPlanFeaturesForComparisonGrid: UseRestructuredPlanFeaturesForComparisonGrid =
@@ -39,6 +45,9 @@ const useRestructuredPlanFeaturesForComparisonGrid: UseRestructuredPlanFeaturesF
 		intent,
 		selectedFeature,
 		showLegacyStorageFeature,
+		useVar42NoAiFeatures,
+		showPricingDifferentiationFeaturePills,
+		isExperimentVariant,
 	} ) => {
 		const planFeaturesForGridPlans = usePlanFeaturesForGridPlans( {
 			gridPlans,
@@ -46,6 +55,9 @@ const useRestructuredPlanFeaturesForComparisonGrid: UseRestructuredPlanFeaturesF
 			intent,
 			selectedFeature,
 			showLegacyStorageFeature,
+			useVar42NoAiFeatures,
+			showPricingDifferentiationFeaturePills,
+			isExperimentVariant,
 		} );
 
 		return useMemo( () => {
@@ -58,26 +70,78 @@ const useRestructuredPlanFeaturesForComparisonGrid: UseRestructuredPlanFeaturesF
 				const annualPlansOnlyFeatures = planConstantObj.getAnnualPlansOnlyFeatures?.();
 				const isMonthlyPlan = isMonthly( planSlug );
 
-				const wpcomFeatures = planConstantObj.get2023PlanComparisonFeatureOverride?.().length
-					? getPlanFeaturesObject(
+				let wpcomFeatures;
+
+				// Plans differentiators (non-control): use experiment comparison override when present.
+				if (
+					isExperimentVariant &&
+					planConstantObj.get2023PlanComparisonFeatureOverrideForExperiment?.()?.length
+				) {
+					wpcomFeatures = getPlanFeaturesObject(
+						allFeaturesList,
+						planConstantObj.get2023PlanComparisonFeatureOverrideForExperiment().slice(),
+						isExperimentVariant
+					);
+				} else if (
+					// Check if there's a specific override for comparison
+					planConstantObj.get2023PlanComparisonFeatureOverride?.().length
+				) {
+					wpcomFeatures = getPlanFeaturesObject(
+						allFeaturesList,
+						planConstantObj.get2023PlanComparisonFeatureOverride().slice()
+					);
+				} else if ( 'plans-wordpress-hosting' === intent ) {
+					// Use visual split features for WordPress hosting intent
+					if ( planConstantObj?.getVisualSplitBusinessFeatures ) {
+						wpcomFeatures = getPlanFeaturesObject(
 							allFeaturesList,
-							planConstantObj.get2023PlanComparisonFeatureOverride().slice()
-					  )
-					: getPlanFeaturesObject(
+							planConstantObj.getVisualSplitBusinessFeatures().slice()
+						);
+					} else if ( planConstantObj?.getVisualSplitCommerceFeatures ) {
+						wpcomFeatures = getPlanFeaturesObject(
 							allFeaturesList,
-							planConstantObj.get2023PricingGridSignupWpcomFeatures?.().slice()
-					  );
-
-				const jetpackFeatures = planConstantObj.get2023PlanComparisonJetpackFeatureOverride?.()
-					.length
-					? getPlanFeaturesObject(
+							planConstantObj.getVisualSplitCommerceFeatures().slice()
+						);
+					} else {
+						// Fallback to default features
+						wpcomFeatures = getPlanFeaturesObject(
 							allFeaturesList,
-							planConstantObj.get2023PlanComparisonJetpackFeatureOverride().slice()
-					  )
-					: getPlanFeaturesObject(
-							allFeaturesList,
-							planConstantObj.get2023PricingGridSignupJetpackFeatures?.().slice()
-					  );
+							planConstantObj.get2023PricingGridSignupWpcomFeatures?.().slice()
+						);
+					}
+				} else {
+					// Default case
+					wpcomFeatures = getPlanFeaturesObject(
+						allFeaturesList,
+						planConstantObj.get2023PricingGridSignupWpcomFeatures?.().slice()
+					);
+				}
+
+				// Plans Differentiators Experiment: For comparison grid, use dedicated experiment override function
+				// when in an experiment variant for Jetpack features.
+				// Note: We check if the function exists, not if it returns a non-empty array, because an empty array
+				// is a valid return value (meaning "show no Jetpack features").
+				let jetpackFeatures;
+				if (
+					isExperimentVariant &&
+					planConstantObj.get2023PlanComparisonJetpackFeatureOverrideForExperiment
+				) {
+					jetpackFeatures = getPlanFeaturesObject(
+						allFeaturesList,
+						planConstantObj.get2023PlanComparisonJetpackFeatureOverrideForExperiment().slice(),
+						isExperimentVariant
+					);
+				} else if ( planConstantObj.get2023PlanComparisonJetpackFeatureOverride?.().length ) {
+					jetpackFeatures = getPlanFeaturesObject(
+						allFeaturesList,
+						planConstantObj.get2023PlanComparisonJetpackFeatureOverride().slice()
+					);
+				} else {
+					jetpackFeatures = getPlanFeaturesObject(
+						allFeaturesList,
+						planConstantObj.get2023PricingGridSignupJetpackFeatures?.().slice()
+					);
+				}
 
 				const wpcomFeaturesTransformed: TransformedFeatureObject[] | null | undefined =
 					annualPlansOnlyFeatures
@@ -145,14 +209,23 @@ const useRestructuredPlanFeaturesForComparisonGrid: UseRestructuredPlanFeaturesF
 						...previousPlanFeatures.jetpackFeatures,
 					],
 					storageFeature: planFeaturesForGridPlans[ planSlug ].storageFeature,
-					comparisonGridFeatureLabels: planConstantObj.getPlanComparisonFeatureLabels?.(),
+					comparisonGridFeatureLabels: planConstantObj.getPlanComparisonFeatureLabels?.( {
+						isExperimentVariant,
+					} ),
 				};
 
 				previousPlan = planSlug;
 			}
 
 			return planFeatureMap;
-		}, [ gridPlans, allFeaturesList, planFeaturesForGridPlans, intent, hasRedeemedDomainCredit ] );
+		}, [
+			gridPlans,
+			allFeaturesList,
+			planFeaturesForGridPlans,
+			intent,
+			hasRedeemedDomainCredit,
+			isExperimentVariant,
+		] );
 	};
 
 export default useRestructuredPlanFeaturesForComparisonGrid;

package/src/hooks/data-store/use-title-badges.ts

@@ -0,0 +1,31 @@
+import { isWooHostedBasicPlan, type PlanSlug } from '@automattic/calypso-products';
+import { useTranslate } from 'i18n-calypso';
+import type { PlansIntent } from '../../types';
+import type { TranslateResult } from 'i18n-calypso';
+
+interface Props {
+	intent?: PlansIntent;
+	planSlugs: PlanSlug[];
+}
+
+const useTitleBadges = ( { intent, planSlugs }: Props ) => {
+	const translate = useTranslate();
+
+	return planSlugs.reduce(
+		( acc, planSlug ) => {
+			let label;
+
+			if ( 'plans-woo-hosted' === intent && isWooHostedBasicPlan( planSlug ) ) {
+				label = translate( 'Recommended' );
+			}
+
+			return {
+				...acc,
+				[ planSlug ]: label ?? null,
+			};
+		},
+		{} as Record< PlanSlug, TranslateResult | null >
+	);
+};
+
+export default useTitleBadges;

package/src/hooks/test/use-visible-grid-plans.tsx

@@ -0,0 +1,116 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { PlanSlug } from '@automattic/calypso-products';
+import { renderHook } from '@testing-library/react';
+import React from 'react';
+import PlansGridContextProvider from '../../grid-context';
+import { GridPlan } from '../../types';
+import { useVisibleGridPlans } from '../use-visible-grid-plans';
+import type { TranslateResult } from 'i18n-calypso';
+
+// Mock the hooks we're using
+jest.mock( '@automattic/data-stores', () => ( {
+	Plans: {
+		useCurrentPlanTerm: jest.fn(),
+	},
+} ) );
+
+jest.mock( '../../hooks/data-store/use-plan-billing-period', () => ( {
+	__esModule: true,
+	default: jest.fn(),
+} ) );
+
+// Helper to create a mock GridPlan
+const createMockGridPlan = ( slug: PlanSlug ): GridPlan => ( {
+	planSlug: slug,
+	pricing: {
+		originalPrice: { monthly: 10, full: 20 },
+		discountedPrice: { monthly: 5, full: 10 },
+	},
+	isVisible: true,
+	features: {
+		wpcomFeatures: [],
+		jetpackFeatures: [],
+	},
+	tagline: '',
+	planTitle: '',
+	availableForPurchase: true,
+} );
+
+describe( 'useVisibleGridPlans', () => {
+	const mockGridPlans = [
+		createMockGridPlan( 'free_plan' ),
+		createMockGridPlan( 'personal-bundle' ),
+		createMockGridPlan( 'value_bundle' ),
+		createMockGridPlan( 'business-bundle' ),
+		createMockGridPlan( 'ecommerce-bundle' ),
+	];
+
+	const wrapper = ( { children }: { children: React.ReactNode } ) => (
+		<PlansGridContextProvider
+			gridPlans={ mockGridPlans }
+			intent={ undefined }
+			siteId={ 2345 }
+			allFeaturesList={ {} }
+			useCheckPlanAvailabilityForPurchase={ () => ( {} ) }
+			useAction={ () => ( {
+				primary: {
+					text: '' as TranslateResult,
+					callback: () => {},
+				},
+			} ) }
+			featureGroupMap={ {} }
+		>
+			{ children }
+		</PlansGridContextProvider>
+	);
+
+	test( 'should show correct number of plans based on grid size', () => {
+		const { result } = renderHook(
+			() => useVisibleGridPlans( { gridSize: 'small', intervalType: 'yearly', siteId: 2345 } ),
+			{ wrapper }
+		);
+
+		expect( result.current.visibleGridPlans ).toHaveLength( 2 );
+	} );
+
+	test( 'should always include current plan if it exists', () => {
+		const { result } = renderHook(
+			() =>
+				useVisibleGridPlans( {
+					gridSize: 'small',
+					currentSitePlanSlug: 'value_bundle',
+					intervalType: 'yearly',
+					siteId: 2345,
+				} ),
+			{ wrapper }
+		);
+
+		expect( result.current.visibleGridPlans.map( ( plan ) => plan.planSlug ) ).toContain(
+			'value_bundle'
+		);
+		expect( result.current.visibleGridPlans ).toHaveLength( 2 );
+	} );
+
+	test( 'should handle grid size changes correctly', () => {
+		const { result, rerender } = renderHook(
+			( { size }: { size: 'small' | 'large' } ) =>
+				useVisibleGridPlans( {
+					gridSize: size,
+					currentSitePlanSlug: 'value_bundle',
+					intervalType: 'yearly',
+					siteId: 2345,
+				} ),
+			{
+				wrapper,
+				initialProps: { size: 'small' },
+			}
+		);
+
+		expect( result.current.visibleGridPlans ).toHaveLength( 2 );
+		rerender( { size: 'large' } );
+		expect( result.current.visibleGridPlans ).toHaveLength( 4 );
+	} );
+} );

package/src/hooks/use-grid-size.ts

@@ -1,4 +1,5 @@
 import { useLayoutEffect, useState } from '@wordpress/element';
+import { GridSize } from '../types';
 
 interface Props {
 	containerRef: React.MutableRefObject< HTMLDivElement | null >;
@@ -8,7 +9,7 @@ interface Props {
 	 * but they could be used in the future in a containment context.
 	 * The keys are the labels, the values are the minimum widths.
 	 */
-	containerBreakpoints: Map< string, number >;
+	containerBreakpoints: Map< GridSize, number >;
 }
 
 /**
@@ -16,7 +17,7 @@ interface Props {
  * and the breakpoints passed through as props.
  */
 export default function useGridSize( { containerRef, containerBreakpoints }: Props ) {
-	const [ gridSize, setGridSize ] = useState< string | null >( null );
+	const [ gridSize, setGridSize ] = useState< GridSize | null >( null );
 
 	useLayoutEffect( () => {
 		if ( ! containerRef.current ) {

package/src/hooks/use-is-large-currency.ts

@@ -1,5 +1,5 @@
+import { formatCurrency } from '@automattic/number-formatters';
 import { useMemo } from '@wordpress/element';
-import { formatCurrency } from 'i18n-calypso';
 const LARGE_ADD_ON_CURRENCY_CHAR_THRESHOLD = 7;
 const LARGE_CURRENCY_CHAR_THRESHOLD = 6;
 const LARGE_CURRENCY_COMBINED_CHAR_THRESHOLD = 9;

package/src/hooks/use-visible-grid-plans.tsx

@@ -0,0 +1,102 @@
+// hooks/use-visible-grid-plans.ts
+import { getPlanClass } from '@automattic/calypso-products';
+import { Plans } from '@automattic/data-stores';
+import { useState, useEffect } from 'react';
+import { usePlansGridContext } from '../grid-context';
+import { GridPlan, GridSize, SupportedUrlFriendlyTermType } from '../types';
+import usePlanBillingPeriod from './data-store/use-plan-billing-period';
+import type { PlanSlug } from '@automattic/calypso-products';
+
+interface UseVisibleGridPlansProps {
+	gridSize: GridSize | undefined;
+	currentSitePlanSlug?: PlanSlug | null;
+	siteId: number | null | undefined;
+	intervalType: SupportedUrlFriendlyTermType;
+}
+
+export function useVisibleGridPlans( {
+	gridSize,
+	currentSitePlanSlug,
+	siteId,
+	intervalType,
+}: UseVisibleGridPlansProps ) {
+	const [ visibleGridPlans, setVisibleGridPlans ] = useState< GridPlan[] >( [] );
+	const { gridPlans, gridPlansIndex } = usePlansGridContext();
+	const currentPlanTerm = Plans.useCurrentPlanTerm( { siteId } );
+	const selectedPlanTerm = usePlanBillingPeriod( { intervalType } );
+
+	useEffect( () => {
+		setVisibleGridPlans( ( previousGridPlans ) => {
+			let visibleLength = gridPlans.length;
+
+			switch ( gridSize ) {
+				case 'large':
+					visibleLength = 4;
+					break;
+				case 'medium':
+					visibleLength = 3;
+					break;
+				case 'smedium':
+				case 'small':
+					visibleLength = 2;
+					break;
+			}
+
+			// Find the user's current plan in the current term
+			const usersGridPlanFromSelectedTerm = currentSitePlanSlug
+				? gridPlans.find(
+						( gridPlan ) =>
+							getPlanClass( gridPlan.planSlug ) === getPlanClass( currentSitePlanSlug )
+				  )
+				: null;
+
+			// Check if previous state is stale
+			const isPreviousGridPlansStale = previousGridPlans.some(
+				( plan ) => ! gridPlansIndex[ plan.planSlug ]
+			);
+
+			let nextGridPlans: GridPlan[] = previousGridPlans;
+
+			if ( previousGridPlans.length !== visibleLength ) {
+				nextGridPlans = gridPlans.slice( 0, visibleLength );
+			} else if ( isPreviousGridPlansStale ) {
+				// Map existing plans to their new term equivalents, preserving order
+				nextGridPlans = previousGridPlans.map( ( plan ) => {
+					const gridPlan = gridPlans.find(
+						( gridPlan ) => getPlanClass( gridPlan.planSlug ) === getPlanClass( plan.planSlug )
+					);
+					return gridPlan ?? plan;
+				} );
+			}
+
+			// Ensure current plan is visible
+			if ( usersGridPlanFromSelectedTerm ) {
+				const isCurrentPlanVisible = nextGridPlans.some(
+					( plan ) =>
+						getPlanClass( plan.planSlug ) === getPlanClass( usersGridPlanFromSelectedTerm.planSlug )
+				);
+
+				if ( ! isCurrentPlanVisible ) {
+					nextGridPlans = [ usersGridPlanFromSelectedTerm, ...nextGridPlans ].slice(
+						0,
+						visibleLength
+					);
+				}
+			}
+
+			return nextGridPlans;
+		} );
+	}, [
+		gridSize,
+		gridPlans,
+		currentSitePlanSlug,
+		currentPlanTerm,
+		selectedPlanTerm,
+		gridPlansIndex,
+	] );
+
+	return {
+		visibleGridPlans,
+		setVisibleGridPlans,
+	};
+}

package/src/index.tsx

@@ -9,10 +9,18 @@ import useGridPlans, { usePlanTypesWithIntent } from './hooks/data-store/use-gri
 import useGridPlansForComparisonGrid from './hooks/data-store/use-grid-plans-for-comparison-grid';
 import useGridPlansForFeaturesGrid from './hooks/data-store/use-grid-plans-for-features-grid';
 import usePlanBillingDescription from './hooks/data-store/use-plan-billing-description';
+import usePlanBillingPeriod from './hooks/data-store/use-plan-billing-period';
 import usePlanFeaturesForGridPlans from './hooks/data-store/use-plan-features-for-grid-plans';
 import usePlansFromTypes from './hooks/data-store/use-plans-from-types';
 import useRestructuredPlanFeaturesForComparisonGrid from './hooks/data-store/use-restructured-plan-features-for-comparison-grid';
 import { useManageTooltipToggle } from './hooks/use-manage-tooltip-toggle';
+import {
+	getPlanPriceForDuration,
+	calculateDiscountPercentage,
+	fromPricingMetaForGridPlan,
+	fromVariantPriceData,
+} from './lib/plan-pricing-utils';
+import type { PlanPriceInfo, VariantPriceData } from './lib/plan-pricing-utils';
 
 /**
  * Types
@@ -33,6 +41,7 @@ export {
 	useGridPlansForFeaturesGrid,
 	useGridPlansForComparisonGrid,
 	useGridPlanForSpotlight,
+	usePlanBillingPeriod,
 	usePlanBillingDescription,
 	usePlanFeaturesForGridPlans,
 	usePlansFromTypes,
@@ -44,3 +53,14 @@ export {
  * Constants
  */
 export { EFFECTIVE_TERMS_LIST };
+
+/**
+ * Plan pricing utilities
+ */
+export type { PlanPriceInfo, VariantPriceData };
+export {
+	getPlanPriceForDuration,
+	calculateDiscountPercentage,
+	fromPricingMetaForGridPlan,
+	fromVariantPriceData,
+};