all effective terms grid plans. working

client/my-sites/plans-features-main/hooks/use-plan-billing-period.ts

@@ -6,6 +6,7 @@ import {
 	TERM_TRIENNIALLY,
 	UrlFriendlyTermType,
 } from '@automattic/calypso-products';
+import { EFFECTIVE_TERMS_LIST } from '@automattic/plans-grid-next';
 
 type SupportedIntervalTypes = Extract<
 	UrlFriendlyTermType,
@@ -19,7 +20,7 @@ const usePlanBillingPeriod = ( {
 	intervalType: SupportedIntervalTypes;
 	defaultValue?: ( typeof TERMS_LIST )[ number ];
 } ) => {
-	const plans: Record< SupportedIntervalTypes, ( typeof TERMS_LIST )[ number ] > = {
+	const plans: Record< SupportedIntervalTypes, ( typeof EFFECTIVE_TERMS_LIST )[ number ] > = {
 		monthly: TERM_MONTHLY,
 		yearly: TERM_ANNUALLY,
 		'2yearly': TERM_BIENNIALLY,

client/my-sites/plans-features-main/index.tsx

@@ -429,7 +429,6 @@ const PlansFeaturesMain = ( {
 		showLegacyStorageFeature,
 		siteId,
 		storageAddOns,
-		term,
 		useCheckPlanAvailabilityForPurchase,
 		useFreeTrialPlanSlugs,
 		isDomainOnlySite,
@@ -438,17 +437,17 @@ const PlansFeaturesMain = ( {
 	// when `deemphasizeFreePlan` is enabled, the Free plan will be presented as a CTA link instead of a plan card in the features grid.
 	const gridPlansForFeaturesGrid = useMemo(
 		() =>
-			gridPlansForFeaturesGridRaw?.filter( ( { planSlug } ) => {
+			gridPlansForFeaturesGridRaw[ term ]?.filter( ( { planSlug } ) => {
 				if ( deemphasizeFreePlan ) {
 					return planSlug !== PLAN_FREE;
 				}
 				return true;
 			} ) ?? null, // optional chaining can result in `undefined`; we don't want to introduce it here.
-		[ gridPlansForFeaturesGridRaw, deemphasizeFreePlan ]
+		[ gridPlansForFeaturesGridRaw, term, deemphasizeFreePlan ]
 	);
 
 	// In some cases, the free plan is not an option at all. Make sure not to offer it in the subheader.
-	const offeringFreePlan = gridPlansForFeaturesGridRaw?.some(
+	const offeringFreePlan = gridPlansForFeaturesGridRaw[ term ]?.some(
 		( { planSlug } ) => planSlug === PLAN_FREE
 	);
 
@@ -735,6 +734,27 @@ const PlansFeaturesMain = ( {
 		</div>
 	);
 
+	const enableTermSavingsPriceDisplay = useMemo( () => {
+		const isAnyGridPlanDiscounted = Object.values( gridPlansForFeaturesGridRaw ).reduce(
+			( isDiscounted, gridPlans ) => {
+				const hasDiscount = gridPlans?.some( ( { pricing: { discountedPrice, introOffer } } ) => {
+					return discountedPrice.monthly || ( introOffer && ! introOffer.isOfferComplete );
+				} );
+				return isDiscounted || !! hasDiscount;
+			},
+			false
+		);
+
+		if ( isAnyGridPlanDiscounted ) {
+			return false;
+		}
+
+		return (
+			isEnabled( 'plans/term-savings-price-display' ) ||
+			longerPlanTermDefaultExperiment.isEligibleForTermSavings
+		);
+	}, [ gridPlansForFeaturesGridRaw, longerPlanTermDefaultExperiment.isEligibleForTermSavings ] );
+
 	return (
 		<>
 			<div className={ clsx( 'plans-features-main', 'is-pricing-grid-2023-plans-features-main' ) }>
@@ -846,10 +866,7 @@ const PlansFeaturesMain = ( {
 										enableReducedFeatureGroupSpacing={ showSimplifiedFeatures }
 										enableLogosOnlyForEnterprisePlan={ showSimplifiedFeatures }
 										hideFeatureGroupTitles={ showSimplifiedFeatures }
-										enableTermSavingsPriceDisplay={
-											isEnabled( 'plans/term-savings-price-display' ) ||
-											longerPlanTermDefaultExperiment.isEligibleForTermSavings
-										}
+										enableTermSavingsPriceDisplay={ enableTermSavingsPriceDisplay }
 									/>
 								) }
 								{ showEscapeHatch && hidePlansFeatureComparison && viewAllPlansButton }
@@ -909,10 +926,7 @@ const PlansFeaturesMain = ( {
 													}
 													enableFeatureTooltips
 													featureGroupMap={ featureGroupMapForComparisonGrid }
-													enableTermSavingsPriceDisplay={
-														isEnabled( 'plans/term-savings-price-display' ) ||
-														longerPlanTermDefaultExperiment.isEligibleForTermSavings
-													}
+													enableTermSavingsPriceDisplay={ enableTermSavingsPriceDisplay }
 												/>
 											) }
 											<ComparisonGridToggle

packages/plans-grid-next/src/constants.ts

@@ -0,0 +1,13 @@
+import {
+	TERM_ANNUALLY,
+	TERM_BIENNIALLY,
+	TERM_MONTHLY,
+	TERM_TRIENNIALLY,
+} from '@automattic/calypso-products';
+
+export const EFFECTIVE_TERMS_LIST = < const >[
+	TERM_MONTHLY,
+	TERM_ANNUALLY,
+	TERM_BIENNIALLY,
+	TERM_TRIENNIALLY,
+];

packages/plans-grid-next/src/hooks/data-store/types.ts

@@ -20,7 +20,6 @@ export interface UseGridPlansParams {
 	siteId?: number | null;
 	storageAddOns: ( AddOnMeta | null )[];
 	term?: ( typeof TERMS_LIST )[ number ]; // defaults to monthly
-	terms?: ( typeof TERMS_LIST )[];
 	useCheckPlanAvailabilityForPurchase: Plans.UseCheckPlanAvailabilityForPurchase;
 	useFreeTrialPlanSlugs?: UseFreeTrialPlanSlugs;
 	/**

packages/plans-grid-next/src/hooks/data-store/use-grid-plans-for-features-grid.ts

@@ -1,4 +1,5 @@
 import { useMemo } from '@wordpress/element';
+import { EFFECTIVE_TERMS_LIST } from '../../constants';
 import useGridPlans from './use-grid-plans';
 import usePlanFeaturesForGridPlans from './use-plan-features-for-grid-plans';
 import type { UseGridPlansParams } from './types';
@@ -23,7 +24,9 @@ const useGridPlansForFeaturesGrid = ( {
 	useFreeTrialPlanSlugs,
 	highlightLabelOverrides,
 	isDomainOnlySite,
-}: UseGridPlansParams ): GridPlan[] | null => {
+}: UseGridPlansParams ): {
+	[ term in ( typeof EFFECTIVE_TERMS_LIST )[ number ] ]?: GridPlan[] | null;
+} => {
 	const useGridPlansParams = {
 		allFeaturesList,
 		coupon,
@@ -44,15 +47,24 @@ const useGridPlansForFeaturesGrid = ( {
 		isDomainOnlySite,
 	};
 
-	const monthlyGridPlans = useGridPlans( { ...useGridPlansParams, term: 'TERM_MONTHLY' } );
-	const yearlyGridPlans = useGridPlans( { ...useGridPlansParams, term: 'TERM_ANNUALLY' } );
-
-	const gridPlans = useMemo( () => {
-		return {
-			monthly: monthlyGridPlans,
-			yearly: yearlyGridPlans,
-		};
-	}, [ monthlyGridPlans, yearlyGridPlans ] );
+	const gridPlans = {
+		[ EFFECTIVE_TERMS_LIST[ 0 ] ]: useGridPlans( {
+			...useGridPlansParams,
+			term: EFFECTIVE_TERMS_LIST[ 0 ],
+		} ),
+		[ EFFECTIVE_TERMS_LIST[ 1 ] ]: useGridPlans( {
+			...useGridPlansParams,
+			term: EFFECTIVE_TERMS_LIST[ 1 ],
+		} ),
+		[ EFFECTIVE_TERMS_LIST[ 2 ] ]: useGridPlans( {
+			...useGridPlansParams,
+			term: EFFECTIVE_TERMS_LIST[ 2 ],
+		} ),
+		[ EFFECTIVE_TERMS_LIST[ 3 ] ]: useGridPlans( {
+			...useGridPlansParams,
+			term: EFFECTIVE_TERMS_LIST[ 3 ],
+		} ),
+	};
 
 	const usePlanFeaturesForGridPlansParams = {
 		allFeaturesList,
@@ -63,38 +75,58 @@ const useGridPlansForFeaturesGrid = ( {
 		showLegacyStorageFeature,
 	};
 
-	const _planFeaturesForFeaturesGrid = {
-		monthly: usePlanFeaturesForGridPlans( {
+	const planFeaturesForFeaturesGrid = {
+		[ EFFECTIVE_TERMS_LIST[ 0 ] ]: usePlanFeaturesForGridPlans( {
+			...usePlanFeaturesForGridPlansParams,
+			gridPlans: gridPlans[ EFFECTIVE_TERMS_LIST[ 0 ] ] || [],
+		} ),
+		[ EFFECTIVE_TERMS_LIST[ 1 ] ]: usePlanFeaturesForGridPlans( {
+			...usePlanFeaturesForGridPlansParams,
+			gridPlans: gridPlans[ EFFECTIVE_TERMS_LIST[ 1 ] ] || [],
+		} ),
+		[ EFFECTIVE_TERMS_LIST[ 2 ] ]: usePlanFeaturesForGridPlans( {
 			...usePlanFeaturesForGridPlansParams,
-			gridPlans: gridPlans.monthly || [],
+			gridPlans: gridPlans[ EFFECTIVE_TERMS_LIST[ 2 ] ] || [],
 		} ),
-		yearly: usePlanFeaturesForGridPlans( {
+		[ EFFECTIVE_TERMS_LIST[ 3 ] ]: usePlanFeaturesForGridPlans( {
 			...usePlanFeaturesForGridPlansParams,
-			gridPlans: gridPlans.yearly || [],
+			gridPlans: gridPlans[ EFFECTIVE_TERMS_LIST[ 3 ] ] || [],
 		} ),
 	};
 
-	return useMemo( () => {
-		return Object.fromEntries(
-			Object.entries( gridPlans ).map( ( [ term, gridPlans ] ) => {
-				return [
-					term,
-					gridPlans?.reduce( ( acc, gridPlan ) => {
-						if ( gridPlan.isVisible ) {
-							return [
-								...acc,
-								{
-									...gridPlan,
-									features: _planFeaturesForFeaturesGrid[ term ][ gridPlan.planSlug ],
-								},
-							];
-						}
-						return acc;
-					}, [] as GridPlan[] ),
-				];
-			} )
-		);
-	}, [ gridPlans, _planFeaturesForFeaturesGrid ] );
+	return useMemo(
+		() => {
+			return Object.fromEntries(
+				EFFECTIVE_TERMS_LIST.map( ( term ) => {
+					return [
+						term,
+						gridPlans[ term ]?.reduce( ( acc, gridPlan ) => {
+							if ( gridPlan.isVisible ) {
+								return [
+									...acc,
+									{
+										...gridPlan,
+										features: planFeaturesForFeaturesGrid[ term ][ gridPlan.planSlug ],
+									},
+								];
+							}
+							return acc;
+						}, [] as GridPlan[] ),
+					];
+				} )
+			);
+		},
+		/* eslint-disable react-hooks/exhaustive-deps */ [
+			gridPlans[ EFFECTIVE_TERMS_LIST[ 0 ] ],
+			gridPlans[ EFFECTIVE_TERMS_LIST[ 1 ] ],
+			gridPlans[ EFFECTIVE_TERMS_LIST[ 2 ] ],
+			gridPlans[ EFFECTIVE_TERMS_LIST[ 3 ] ],
+			planFeaturesForFeaturesGrid[ EFFECTIVE_TERMS_LIST[ 0 ] ],
+			planFeaturesForFeaturesGrid[ EFFECTIVE_TERMS_LIST[ 1 ] ],
+			planFeaturesForFeaturesGrid[ EFFECTIVE_TERMS_LIST[ 2 ] ],
+			planFeaturesForFeaturesGrid[ EFFECTIVE_TERMS_LIST[ 3 ] ],
+		]
+	);
 };
 
 export default useGridPlansForFeaturesGrid;

packages/plans-grid-next/src/index.tsx

@@ -3,6 +3,7 @@ import FeaturesGrid from './components/features-grid';
 import PlanButton from './components/plan-button';
 import PlanTypeSelector from './components/plan-type-selector';
 import { Plans2023Tooltip } from './components/plans-2023-tooltip';
+import { EFFECTIVE_TERMS_LIST } from './constants';
 import useGridPlanForSpotlight from './hooks/data-store/use-grid-plan-for-spotlight';
 import useGridPlans from './hooks/data-store/use-grid-plans';
 import useGridPlansForComparisonGrid from './hooks/data-store/use-grid-plans-for-comparison-grid';
@@ -35,3 +36,8 @@ export {
 	usePlanFeaturesForGridPlans,
 	useRestructuredPlanFeaturesForComparisonGrid,
 };
+
+/**
+ * Constants
+ */
+export { EFFECTIVE_TERMS_LIST };