Disable storage add-on updates to header price if term savings is ena…

…bled
Automattic · Nov 25, 2024 · 4c47849 · 4c47849
1 parent 2ac5e53
commit 4c47849
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 5 deletions.
diff --git a/client/my-sites/plans-features-main/index.tsx b/client/my-sites/plans-features-main/index.tsx
@@ -239,6 +239,7 @@ const PlansFeaturesMain = ( {
 	const { setShowDomainUpsellDialog } = useDispatch( WpcomPlansUI.store );
 	const domainFromHomeUpsellFlow = useSelector( getDomainFromHomeUpsellInQuery );
 	const showUpgradeableStorage = config.isEnabled( 'plans/upgradeable-storage' );
+	const enableTermSavingsPriceDisplay = isEnabled( 'plans/term-savings-price-display' );
 	const getPlanTypeDestination = usePlanTypeDestinationCallback();
 
 	const longerPlanTermDefaultExperiment = useLongerPlanTermDefaultExperiment();
@@ -409,6 +410,7 @@ const PlansFeaturesMain = ( {
 		useCheckPlanAvailabilityForPurchase,
 		useFreeTrialPlanSlugs,
 		isDomainOnlySite,
+		enableTermSavingsPriceDisplay,
 	} );
 
 	// we need only the visible ones for features grid (these should extend into plans-ui data store selectors)
@@ -431,6 +433,7 @@ const PlansFeaturesMain = ( {
 		useCheckPlanAvailabilityForPurchase,
 		useFreeTrialPlanSlugs,
 		isDomainOnlySite,
+		enableTermSavingsPriceDisplay,
 	} );
 
 	// when `deemphasizeFreePlan` is enabled, the Free plan will be presented as a CTA link instead of a plan card in the features grid.

diff --git a/packages/data-stores/src/plans/hooks/use-pricing-meta-for-grid-plans.ts b/packages/data-stores/src/plans/hooks/use-pricing-meta-for-grid-plans.ts
@@ -56,6 +56,12 @@ interface Props {
 	 * If true, the pricing includes discounts from upgrade credits.
 	 */
 	withProratedDiscounts?: boolean;
+
+	/**
+	 * TODO: Add more detailed comments because we've decided to make a tempoarary decision around storage-addons
+	 * while the calypso_plans_page_emphasize_longer_plan_savings experiment is running.
+	 */
+	enableTermSavingsPriceDisplay?: boolean;
 }
 
 function getTotalPrice( planPrice: number | null | undefined, addOnPrice = 0 ): number | null {
@@ -79,6 +85,7 @@ const usePricingMetaForGridPlans = ( {
 	useCheckPlanAvailabilityForPurchase,
 	storageAddOns,
 	withProratedDiscounts,
+	enableTermSavingsPriceDisplay,
 }: Props ): { [ planSlug: string ]: Plans.PricingMetaForGridPlan } | null => {
 	// plans - should have a definition for all plans, being the main source of API data
 	const plans = Plans.usePlans( { coupon } );
@@ -131,11 +138,12 @@ const usePricingMetaForGridPlans = ( {
 				const plan = plans.data?.[ planSlug ];
 				const sitePlan = sitePlans.data?.[ planSlug ];
 				const selectedStorageOption = selectedStorageOptions?.[ planSlug ];
-				const selectedStorageAddOn = selectedStorageOption
-					? storageAddOns?.find( ( addOn ) => {
-							return addOn?.addOnSlug === selectedStorageOption;
-					  } )
-					: null;
+				const selectedStorageAddOn =
+					selectedStorageOption && ! enableTermSavingsPriceDisplay
+						? storageAddOns?.find( ( addOn ) => {
+								return addOn?.addOnSlug === selectedStorageOption;
+						  } )
+						: null;
 				const storageAddOnPriceMonthly = selectedStorageAddOn?.prices?.monthlyPrice || 0;
 				const storageAddOnPriceYearly = selectedStorageAddOn?.prices?.yearlyPrice || 0;
 

diff --git a/packages/plans-grid-next/src/hooks/data-store/types.ts b/packages/plans-grid-next/src/hooks/data-store/types.ts
@@ -30,6 +30,9 @@ export interface UseGridPlansParams {
 	 * Used to hide the "Your Plan" label for domain-only sites
 	 */
 	isDomainOnlySite?: boolean;
+	// TODO: Add more detailed comments because we've decided to make a tempoarary decision around storage-addons
+	// while the calypso_plans_page_emphasize_longer_plan_savings experiment is running.
+	enableTermSavingsPriceDisplay?: boolean;
 }
 
 export type UseGridPlansType = (

diff --git a/packages/plans-grid-next/src/hooks/data-store/use-grid-plans-for-comparison-grid.ts b/packages/plans-grid-next/src/hooks/data-store/use-grid-plans-for-comparison-grid.ts
@@ -28,6 +28,7 @@ const useGridPlansForComparisonGrid = ( {
 	useCheckPlanAvailabilityForPurchase,
 	useFreeTrialPlanSlugs,
 	isDomainOnlySite,
+	enableTermSavingsPriceDisplay,
 }: UseGridPlansParams ): GridPlan[] | null => {
 	const gridPlans = useGridPlans( {
 		allFeaturesList,
@@ -46,6 +47,7 @@ const useGridPlansForComparisonGrid = ( {
 		useCheckPlanAvailabilityForPurchase,
 		useFreeTrialPlanSlugs,
 		isDomainOnlySite,
+		enableTermSavingsPriceDisplay,
 	} );
 
 	const planFeaturesForComparisonGrid = useRestructuredPlanFeaturesForComparisonGrid( {

diff --git a/packages/plans-grid-next/src/hooks/data-store/use-grid-plans-for-features-grid.ts b/packages/plans-grid-next/src/hooks/data-store/use-grid-plans-for-features-grid.ts
@@ -24,6 +24,7 @@ const useGridPlansForFeaturesGrid = ( {
 	useFreeTrialPlanSlugs,
 	highlightLabelOverrides,
 	isDomainOnlySite,
+	enableTermSavingsPriceDisplay,
 }: UseGridPlansParams ): GridPlan[] | null => {
 	const gridPlans = useGridPlans( {
 		allFeaturesList,
@@ -44,6 +45,7 @@ const useGridPlansForFeaturesGrid = ( {
 		useFreeTrialPlanSlugs,
 		highlightLabelOverrides,
 		isDomainOnlySite,
+		enableTermSavingsPriceDisplay,
 	} );
 
 	const planFeaturesForFeaturesGrid = usePlanFeaturesForGridPlans( {

diff --git a/packages/plans-grid-next/src/hooks/data-store/use-grid-plans.tsx b/packages/plans-grid-next/src/hooks/data-store/use-grid-plans.tsx
@@ -234,6 +234,7 @@ const useGridPlans: UseGridPlansType = ( {
 	isDisplayingPlansNeededForFeature,
 	highlightLabelOverrides,
 	isDomainOnlySite,
+	enableTermSavingsPriceDisplay,
 } ) => {
 	const freeTrialPlanSlugs = useFreeTrialPlanSlugs?.( {
 		intent: intent ?? 'default',
@@ -290,6 +291,7 @@ const useGridPlans: UseGridPlansType = ( {
 		coupon,
 		siteId,
 		useCheckPlanAvailabilityForPurchase,
+		enableTermSavingsPriceDisplay,
 	} );
 
 	// Null return would indicate that we are still loading the data. No grid without grid plans.