Plans: Make storage selection calculations in plan prices optional

client/my-sites/plans-features-main/hooks/use-eligibility-for-term-savings-price-display.ts

@@ -2,32 +2,56 @@ import { isEnabled } from '@automattic/calypso-config';
 import {
 	getPlanSlugForTermVariant,
 	PlanSlug,
+	TERMS_LIST,
 	URL_FRIENDLY_TERMS_MAPPING,
 	UrlFriendlyTermType,
 } from '@automattic/calypso-products';
 import { AddOns, Plans } from '@automattic/data-stores';
-import { GridPlan } from '@automattic/plans-grid-next';
+import {
+	HiddenPlans,
+	PlansIntent,
+	usePlansFromTypes,
+	usePlanTypesWithIntent,
+} 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,
+	hiddenPlans,
+	intent,
+	isSubdomainNotGenerated,
+	selectedPlan,
+	term,
 	displayedIntervals,
 	coupon,
 	siteId,
 	storageAddOns,
 	isInSignup,
 }: {
-	gridPlans: GridPlan[];
+	hiddenPlans?: HiddenPlans;
+	intent?: PlansIntent;
+	isSubdomainNotGenerated?: boolean;
+	selectedPlan?: PlanSlug;
+	term: ( typeof TERMS_LIST )[ number ];
 	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(
+	const availablePlanSlugs = usePlansFromTypes( {
+		planTypes: usePlanTypesWithIntent( {
+			intent,
+			selectedPlan,
+			siteId,
+			hiddenPlans,
+			isSubdomainNotGenerated,
+		} ),
+		term,
+		intent,
+	} );
+	const planSlugsForAllDisplayedIntervals = availablePlanSlugs.flatMap(
 		( planSlug ) =>
 			displayedIntervals
 				.map( ( term ) =>

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

@@ -406,6 +406,19 @@ const PlansFeaturesMain = ( {
 		hideEnterprisePlan,
 	};
 
+	const enableTermSavingsPriceDisplay = useEligibilityForTermSavingsPriceDisplay( {
+		selectedPlan,
+		hiddenPlans,
+		isSubdomainNotGenerated: ! resolvedSubdomainName.result,
+		term,
+		intent,
+		displayedIntervals: filteredDisplayedIntervals,
+		storageAddOns,
+		coupon,
+		siteId,
+		isInSignup,
+	} );
+
 	// we need all the plans that are available to pick for comparison grid (these should extend into plans-ui data store selectors)
 	const gridPlansForComparisonGrid = useGridPlansForComparisonGrid( {
 		allFeaturesList: getFeaturesList(),
@@ -425,6 +438,7 @@ const PlansFeaturesMain = ( {
 		useCheckPlanAvailabilityForPurchase,
 		useFreeTrialPlanSlugs,
 		isDomainOnlySite,
+		reflectStorageSelectionInPlanPrices: ! enableTermSavingsPriceDisplay,
 	} );
 
 	// we need only the visible ones for features grid (these should extend into plans-ui data store selectors)
@@ -447,6 +461,7 @@ const PlansFeaturesMain = ( {
 		useFreeTrialPlanSlugs,
 		isDomainOnlySite,
 		term,
+		reflectStorageSelectionInPlanPrices: ! enableTermSavingsPriceDisplay,
 	} );
 
 	// when `deemphasizeFreePlan` is enabled, the Free plan will be presented as a CTA link instead of a plan card in the features grid.
@@ -755,15 +770,6 @@ 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' ) }>
@@ -863,6 +869,7 @@ const PlansFeaturesMain = ( {
 										onStorageAddOnClick={ handleStorageAddOnClick }
 										paidDomainName={ paidDomainName }
 										recordTracksEvent={ recordTracksEvent }
+										reflectStorageSelectionInPlanPrices={ ! enableTermSavingsPriceDisplay }
 										selectedFeature={ selectedFeature }
 										showLegacyStorageFeature={ showLegacyStorageFeature }
 										showRefundPeriod={ isAnyHostingFlow( flowName ) }
@@ -928,6 +935,7 @@ const PlansFeaturesMain = ( {
 															: undefined
 													}
 													recordTracksEvent={ recordTracksEvent }
+													reflectStorageSelectionInPlanPrices={ ! enableTermSavingsPriceDisplay }
 													selectedFeature={ selectedFeature }
 													selectedPlan={ selectedPlan }
 													showUpgradeableStorage={ showUpgradeableStorage }

packages/data-stores/src/plans/hooks/test/use-pricing-meta-for-grid-plans.ts

@@ -362,6 +362,7 @@ describe( 'usePricingMetaForGridPlans', () => {
 
 		const pricingMeta = usePricingMetaForGridPlans( {
 			planSlugs: [ PLAN_BUSINESS ],
+			reflectStorageSelectionInPlanPrices: true,
 			storageAddOns: STORAGE_ADD_ONS_MOCK,
 			siteId,
 			coupon: undefined,

packages/data-stores/src/plans/hooks/use-pricing-meta-for-grid-plans.ts

@@ -56,6 +56,13 @@ interface Props {
 	 * If true, the pricing includes discounts from upgrade credits.
 	 */
 	withProratedDiscounts?: boolean;
+
+	/**
+	 * Storage add-on products ( e.g. increase site storage by 50GB ) can be purchased alongside plans. If true,
+	 * storage add-on selections will be included in final plan price calculations. Otherwise, omit the add-ons
+	 * from the final price.
+	 */
+	reflectStorageSelectionInPlanPrices?: boolean;
 }
 
 function getTotalPrice( planPrice: number | null | undefined, addOnPrice = 0 ): number | null {
@@ -79,6 +86,7 @@ const usePricingMetaForGridPlans = ( {
 	useCheckPlanAvailabilityForPurchase,
 	storageAddOns,
 	withProratedDiscounts,
+	reflectStorageSelectionInPlanPrices = false,
 }: 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 +139,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 && reflectStorageSelectionInPlanPrices
+						? storageAddOns?.find( ( addOn ) => {
+								return addOn?.addOnSlug === selectedStorageOption;
+						  } )
+						: null;
 				const storageAddOnPriceMonthly = selectedStorageAddOn?.prices?.monthlyPrice || 0;
 				const storageAddOnPriceYearly = selectedStorageAddOn?.prices?.yearlyPrice || 0;
 

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

@@ -1156,6 +1156,7 @@ const WrappedComparisonGrid = ( {
 	enableFeatureTooltips,
 	featureGroupMap,
 	enableTermSavingsPriceDisplay,
+	reflectStorageSelectionInPlanPrices,
 	...otherProps
 }: ComparisonGridExternalProps ) => {
 	const gridContainerRef = useRef< HTMLDivElement >( null );
@@ -1190,6 +1191,7 @@ const WrappedComparisonGrid = ( {
 				featureGroupMap={ featureGroupMap }
 				hideUnsupportedFeatures={ hideUnsupportedFeatures }
 				enableTermSavingsPriceDisplay={ enableTermSavingsPriceDisplay }
+				reflectStorageSelectionInPlanPrices={ reflectStorageSelectionInPlanPrices }
 			>
 				<ComparisonGrid
 					intervalType={ intervalType }

packages/plans-grid-next/src/components/shared/header-price/index.tsx

@@ -44,8 +44,14 @@ const useTermVariantPlanSlugForSavings = ( {
 
 const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 	const translate = useTranslate();
-	const { gridPlansIndex, enableTermSavingsPriceDisplay, siteId, coupon, helpers } =
-		usePlansGridContext();
+	const {
+		gridPlansIndex,
+		enableTermSavingsPriceDisplay,
+		reflectStorageSelectionInPlanPrices,
+		siteId,
+		coupon,
+		helpers,
+	} = usePlansGridContext();
 	const { isAnyPlanPriceDiscounted, setIsAnyPlanPriceDiscounted } = useHeaderPriceContext();
 	const {
 		current,
@@ -76,6 +82,7 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 		coupon,
 		siteId,
 		useCheckPlanAvailabilityForPurchase: helpers?.useCheckPlanAvailabilityForPurchase,
+		reflectStorageSelectionInPlanPrices,
 	} )?.[ termVariantPlanSlug ?? '' ];
 
 	const termVariantPrice =

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

@@ -30,6 +30,7 @@ interface PlansGridContext {
 	hideUnsupportedFeatures?: boolean;
 	hideFeatureGroupTitles?: boolean;
 	enterpriseFeaturesList?: string[];
+	reflectStorageSelectionInPlanPrices?: boolean;
 }
 
 const PlansGridContext = createContext< PlansGridContext >( {} as PlansGridContext );
@@ -54,6 +55,7 @@ const PlansGridContextProvider = ( {
 	hideUnsupportedFeatures,
 	hideFeatureGroupTitles,
 	enterpriseFeaturesList,
+	reflectStorageSelectionInPlanPrices,
 }: GridContextProps ) => {
 	const gridPlansIndex = gridPlans.reduce(
 		( acc, gridPlan ) => ( {
@@ -87,6 +89,7 @@ const PlansGridContextProvider = ( {
 				hideUnsupportedFeatures,
 				hideFeatureGroupTitles,
 				enterpriseFeaturesList,
+				reflectStorageSelectionInPlanPrices,
 			} }
 		>
 			{ children }

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

@@ -30,6 +30,11 @@ export interface UseGridPlansParams {
 	 * Used to hide the "Your Plan" label for domain-only sites
 	 */
 	isDomainOnlySite?: boolean;
+	/**
+	 * Determine if storage add-on products should be combined with plan costs when
+	 * calculating prices.
+	 */
+	reflectStorageSelectionInPlanPrices?: boolean;
 }
 
 export type UseGridPlansType = (

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

@@ -28,6 +28,7 @@ const useGridPlansForComparisonGrid = ( {
 	useCheckPlanAvailabilityForPurchase,
 	useFreeTrialPlanSlugs,
 	isDomainOnlySite,
+	reflectStorageSelectionInPlanPrices,
 }: UseGridPlansParams ): GridPlan[] | null => {
 	const gridPlans = useGridPlans( {
 		allFeaturesList,
@@ -46,6 +47,7 @@ const useGridPlansForComparisonGrid = ( {
 		useCheckPlanAvailabilityForPurchase,
 		useFreeTrialPlanSlugs,
 		isDomainOnlySite,
+		reflectStorageSelectionInPlanPrices,
 	} );
 
 	const planFeaturesForComparisonGrid = useRestructuredPlanFeaturesForComparisonGrid( {

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

@@ -24,6 +24,7 @@ const useGridPlansForFeaturesGrid = ( {
 	useFreeTrialPlanSlugs,
 	highlightLabelOverrides,
 	isDomainOnlySite,
+	reflectStorageSelectionInPlanPrices,
 }: UseGridPlansParams ): GridPlan[] | null => {
 	const gridPlans = useGridPlans( {
 		allFeaturesList,
@@ -44,6 +45,7 @@ const useGridPlansForFeaturesGrid = ( {
 		useFreeTrialPlanSlugs,
 		highlightLabelOverrides,
 		isDomainOnlySite,
+		reflectStorageSelectionInPlanPrices,
 	} );
 
 	const planFeaturesForFeaturesGrid = usePlanFeaturesForGridPlans( {

packages/plans-grid-next/src/hooks/data-store/use-grid-plans.tsx

@@ -91,7 +91,7 @@ const isGridPlanVisible = ( {
 	return isVisible;
 };
 
-const usePlanTypesWithIntent = ( {
+export const usePlanTypesWithIntent = ( {
 	intent,
 	selectedPlan,
 	siteId,
@@ -234,6 +234,7 @@ const useGridPlans: UseGridPlansType = ( {
 	isDisplayingPlansNeededForFeature,
 	highlightLabelOverrides,
 	isDomainOnlySite,
+	reflectStorageSelectionInPlanPrices,
 } ) => {
 	const freeTrialPlanSlugs = useFreeTrialPlanSlugs?.( {
 		intent: intent ?? 'default',
@@ -290,6 +291,7 @@ const useGridPlans: UseGridPlansType = ( {
 		coupon,
 		siteId,
 		useCheckPlanAvailabilityForPurchase,
+		reflectStorageSelectionInPlanPrices,
 	} );
 
 	// Null return would indicate that we are still loading the data. No grid without grid plans.

packages/plans-grid-next/src/hooks/data-store/use-plan-billing-description.tsx

@@ -12,6 +12,7 @@ import {
 import { AddOns, Plans } from '@automattic/data-stores';
 import { formatCurrency } from '@automattic/format-currency';
 import { useTranslate } from 'i18n-calypso';
+import { usePlansGridContext } from '../../grid-context';
 import type { GridPlan } from '../../types';
 
 interface UsePlanBillingDescriptionProps {
@@ -35,7 +36,7 @@ export default function usePlanBillingDescription( {
 }: UsePlanBillingDescriptionProps ) {
 	const translate = useTranslate();
 	const { currencyCode, originalPrice, discountedPrice, billingPeriod, introOffer } = pricing || {};
-
+	const { reflectStorageSelectionInPlanPrices } = usePlansGridContext();
 	const yearlyVariantPlanSlug = getPlanSlugForTermVariant( planSlug, TERM_ANNUALLY );
 
 	const yearlyVariantPricing = Plans.usePricingMetaForGridPlans( {
@@ -44,6 +45,7 @@ export default function usePlanBillingDescription( {
 		coupon,
 		siteId,
 		useCheckPlanAvailabilityForPurchase,
+		reflectStorageSelectionInPlanPrices,
 	} )?.[ yearlyVariantPlanSlug ?? '' ];
 
 	if ( ! pricing ) {

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

@@ -5,11 +5,12 @@ 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 useGridPlans, { usePlanTypesWithIntent } from './hooks/data-store/use-grid-plans';
 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 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';
 
@@ -34,6 +35,8 @@ export {
 	useGridPlanForSpotlight,
 	usePlanBillingDescription,
 	usePlanFeaturesForGridPlans,
+	usePlansFromTypes,
+	usePlanTypesWithIntent,
 	useRestructuredPlanFeaturesForComparisonGrid,
 };
 

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

@@ -234,6 +234,12 @@ export type GridContextProps = {
 	 * This carries lower precedence than promo/coupon and introductory pricing, irrespective of whether set or not.
 	 */
 	enableTermSavingsPriceDisplay?: boolean;
+
+	/**
+	 * Determine if storage add-on products should be combined with plan costs when
+	 * calculating prices.
+	 */
+	reflectStorageSelectionInPlanPrices?: boolean;
 };
 
 export type ComparisonGridExternalProps = Omit<