diff --git a/client/my-sites/plans-features-main/index.tsx b/client/my-sites/plans-features-main/index.tsx index ce5fe8be7b447f..23b46ec3a089dd 100644 --- 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 index a110a0f7c389ee..f5ce753d9b8aa9 100644 --- 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 index 10946e1e2eb65a..07cfa469e0a603 100644 --- 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 index 4cf0c57a509e5c..d4b346179347c2 100644 --- 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 index cce07ce01a94be..3008db759eec91 100644 --- 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 index d1d335860d51f0..caf557133e12a8 100644 --- 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.