Plans (grid): Disable term-savings price display if another discount …

…is active (intro/coupon/etc.) (#96631)
Automattic · Dec 5, 2024 · 90dd8f2 · 90dd8f2
1 parent 61e16fb
commit 90dd8f2
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 13 deletions.
diff --git a/client/my-sites/plans-features-main/hooks/use-eligibility-for-term-savings-price-display.ts b/client/my-sites/plans-features-main/hooks/use-eligibility-for-term-savings-price-display.ts
@@ -0,0 +1,66 @@
+import { isEnabled } from '@automattic/calypso-config';
+import {
+	getPlanSlugForTermVariant,
+	PlanSlug,
+	URL_FRIENDLY_TERMS_MAPPING,
+	UrlFriendlyTermType,
+} from '@automattic/calypso-products';
+import { AddOns, Plans } from '@automattic/data-stores';
+import { GridPlan } from '@automattic/plans-grid-next';
+import useLongerPlanTermDefaultExperiment from './experiments/use-longer-plan-term-default-experiment';
+import useCheckPlanAvailabilityForPurchase from './use-check-plan-availability-for-purchase';
+
+const useEligibilityForTermSavingsPriceDisplay = ( {
+	gridPlans,
+	displayedIntervals,
+	coupon,
+	siteId,
+	storageAddOns,
+	isInSignup,
+}: {
+	gridPlans: GridPlan[];
+	displayedIntervals: UrlFriendlyTermType[];
+	storageAddOns: ( AddOns.AddOnMeta | null )[] | null;
+	coupon?: string;
+	siteId?: number | null;
+	isInSignup?: boolean;
+} ) => {
+	const longerPlanTermDefaultExperiment = useLongerPlanTermDefaultExperiment();
+	const planSlugs = gridPlans.map( ( { planSlug } ) => planSlug );
+	const planSlugsForAllDisplayedIntervals = planSlugs.flatMap(
+		( planSlug ) =>
+			displayedIntervals
+				.map( ( term ) =>
+					getPlanSlugForTermVariant( planSlug, URL_FRIENDLY_TERMS_MAPPING[ term ] )
+				)
+				.filter( ( planSlug ) => planSlug !== undefined ) as PlanSlug[]
+	);
+	const pricingForAllDisplayedIntervals = Plans.usePricingMetaForGridPlans( {
+		planSlugs: planSlugsForAllDisplayedIntervals,
+		storageAddOns,
+		coupon,
+		siteId,
+		useCheckPlanAvailabilityForPurchase,
+	} );
+	const isAnyGridPlanDiscounted = Object.values( pricingForAllDisplayedIntervals ?? {} ).reduce(
+		( isDiscounted, { discountedPrice, introOffer } ) => {
+			const hasDiscount =
+				'number' === typeof discountedPrice.monthly ||
+				( introOffer && ! introOffer.isOfferComplete );
+			return isDiscounted || !! hasDiscount;
+		},
+		false
+	);
+
+	if ( isAnyGridPlanDiscounted ) {
+		return false;
+	}
+
+	return (
+		( isEnabled( 'plans/term-savings-price-display' ) ||
+			longerPlanTermDefaultExperiment.isEligibleForTermSavings ) &&
+		isInSignup
+	);
+};
+
+export default useEligibilityForTermSavingsPriceDisplay;
diff --git a/client/my-sites/plans-features-main/hooks/use-plan-billing-period.ts b/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,

diff --git a/client/my-sites/plans-features-main/index.tsx b/client/my-sites/plans-features-main/index.tsx
@@ -1,4 +1,4 @@
-import config, { isEnabled } from '@automattic/calypso-config';
+import config from '@automattic/calypso-config';
 import {
 	chooseDefaultCustomerType,
 	getPlan,
@@ -74,6 +74,7 @@ import PlansPageSubheader from './components/plans-page-subheader';
 import useLongerPlanTermDefaultExperiment from './hooks/experiments/use-longer-plan-term-default-experiment';
 import useCheckPlanAvailabilityForPurchase from './hooks/use-check-plan-availability-for-purchase';
 import useDefaultWpcomPlansIntent from './hooks/use-default-wpcom-plans-intent';
+import useEligibilityForTermSavingsPriceDisplay from './hooks/use-eligibility-for-term-savings-price-display';
 import useFilteredDisplayedIntervals from './hooks/use-filtered-displayed-intervals';
 import useGenerateActionHook from './hooks/use-generate-action-hook';
 import usePlanBillingPeriod from './hooks/use-plan-billing-period';
@@ -442,10 +443,10 @@ const PlansFeaturesMain = ( {
 		showLegacyStorageFeature,
 		siteId,
 		storageAddOns,
-		term,
 		useCheckPlanAvailabilityForPurchase,
 		useFreeTrialPlanSlugs,
 		isDomainOnlySite,
+		term,
 	} );
 
 	// when `deemphasizeFreePlan` is enabled, the Free plan will be presented as a CTA link instead of a plan card in the features grid.
@@ -754,6 +755,15 @@ const PlansFeaturesMain = ( {
 		</div>
 	);
 
+	const enableTermSavingsPriceDisplay = useEligibilityForTermSavingsPriceDisplay( {
+		gridPlans: gridPlansForFeaturesGrid ?? [],
+		displayedIntervals: filteredDisplayedIntervals,
+		storageAddOns,
+		coupon,
+		siteId,
+		isInSignup,
+	} );
+
 	return (
 		<>
 			<div className={ clsx( 'plans-features-main', 'is-pricing-grid-2023-plans-features-main' ) }>
@@ -870,11 +880,7 @@ const PlansFeaturesMain = ( {
 										enableReducedFeatureGroupSpacing={ showSimplifiedFeatures }
 										enableLogosOnlyForEnterprisePlan={ showSimplifiedFeatures }
 										hideFeatureGroupTitles={ showSimplifiedFeatures }
-										enableTermSavingsPriceDisplay={
-											( isEnabled( 'plans/term-savings-price-display' ) ||
-												longerPlanTermDefaultExperiment.isEligibleForTermSavings ) &&
-											isInSignup
-										}
+										enableTermSavingsPriceDisplay={ enableTermSavingsPriceDisplay }
 									/>
 								) }
 								{ showEscapeHatch && hidePlansFeatureComparison && viewAllPlansButton }
@@ -934,11 +940,7 @@ const PlansFeaturesMain = ( {
 													}
 													enableFeatureTooltips
 													featureGroupMap={ featureGroupMapForComparisonGrid }
-													enableTermSavingsPriceDisplay={
-														( isEnabled( 'plans/term-savings-price-display' ) ||
-															longerPlanTermDefaultExperiment.isEligibleForTermSavings ) &&
-														isInSignup
-													}
+													enableTermSavingsPriceDisplay={ enableTermSavingsPriceDisplay }
 												/>
 											) }
 											<ComparisonGridToggle

diff --git a/client/my-sites/plans-features-main/test/index.jsx b/client/my-sites/plans-features-main/test/index.jsx
@@ -50,6 +50,8 @@ jest.mock( '../hooks/experiments/use-longer-plan-term-default-experiment', () =>
 	isLoadingExperiment: false,
 } ) );
 
+jest.mock( '../hooks/use-eligibility-for-term-savings-price-display', () => () => false );
+
 import {
 	PLAN_FREE,
 	PLAN_BUSINESS_MONTHLY,

diff --git a/packages/plans-grid-next/src/constants.ts b/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,
+];
diff --git a/packages/plans-grid-next/src/index.tsx b/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 };