use wp-data store

packages/data-stores/src/wpcom-plans-ui/actions.ts

@@ -7,6 +7,12 @@ export const setShowDomainUpsellDialog = ( show: boolean ) =>
 		show,
 	} ) as const;
 
+export const setIsAnyVisibleGridPlanDiscounted = ( isAnyVisibleGridPlanDiscounted: boolean ) =>
+	( {
+		type: 'WPCOM_PLANS_UI_SET_IS_ANY_VISIBLE_GRID_PLAN_DISCOUNTED' as const,
+		isAnyVisibleGridPlanDiscounted,
+	} ) as const;
+
 export const resetStore = () =>
 	( {
 		type: 'WPCOM_PLANS_UI_RESET_STORE',
@@ -29,5 +35,8 @@ export const setSelectedStorageOptionForPlan = ( {
 	} ) as const;
 
 export type WpcomPlansUIAction = ReturnType<
-	typeof setShowDomainUpsellDialog | typeof resetStore | typeof setSelectedStorageOptionForPlan
+	| typeof setShowDomainUpsellDialog
+	| typeof resetStore
+	| typeof setSelectedStorageOptionForPlan
+	| typeof setIsAnyVisibleGridPlanDiscounted
 >;

packages/data-stores/src/wpcom-plans-ui/reducer.ts

@@ -15,6 +15,18 @@ const showDomainUpsellDialog: Reducer< boolean | undefined, WpcomPlansUIAction >
 	return state;
 };
 
+const isAnyVisibileGridPlanDiscounted: Reducer< boolean | undefined, WpcomPlansUIAction > = (
+	state,
+	action
+) => {
+	if ( action.type === 'WPCOM_PLANS_UI_RESET_STORE' ) {
+		return undefined;
+	} else if ( action.type === 'WPCOM_PLANS_UI_SET_IS_ANY_VISIBLE_GRID_PLAN_DISCOUNTED' ) {
+		return action.isAnyVisibleGridPlanDiscounted;
+	}
+	return state;
+};
+
 const selectedStorageOptionForPlan: Reducer<
 	SelectedStorageOptionForPlan | undefined,
 	WpcomPlansUIAction
@@ -33,6 +45,7 @@ const selectedStorageOptionForPlan: Reducer<
 const reducer = combineReducers( {
 	showDomainUpsellDialog,
 	selectedStorageOptionForPlan,
+	isAnyVisibileGridPlanDiscounted,
 } );
 
 export type State = ReturnType< typeof reducer >;

packages/data-stores/src/wpcom-plans-ui/selectors.ts

@@ -18,3 +18,6 @@ export const getSelectedStorageOptions = ( state: State, siteId?: number | null
 	// expect siteId to be null or undefined here before site creation ( Ex. during onboarding ).
 	return state.selectedStorageOptionForPlan?.[ siteId ];
 };
+
+export const getIsAnyVisibileGridPlanDiscounted = ( state: State ) =>
+	state.isAnyVisibileGridPlanDiscounted;

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

@@ -6,7 +6,8 @@ import {
 	type PlanSlug,
 } from '@automattic/calypso-products';
 import { PlanPrice } from '@automattic/components';
-import { AddOns, Plans } from '@automattic/data-stores';
+import { AddOns, Plans, WpcomPlansUI } from '@automattic/data-stores';
+import { useDispatch, useSelect } from '@wordpress/data';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { usePlansGridContext } from '../../../grid-context';
@@ -43,30 +44,25 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 		current,
 		pricing: { currencyCode, originalPrice, discountedPrice, introOffer, billingPeriod },
 	} = gridPlansIndex[ planSlug ];
+	const { setIsAnyVisibleGridPlanDiscounted } = useDispatch( WpcomPlansUI.store );
+	const isAnyVisibleGridPlanDiscounted = useSelect(
+		( select ) => select( WpcomPlansUI.store ).getIsAnyVisibileGridPlanDiscounted(),
+		[]
+	);
 	const isPricedPlan = null !== originalPrice.monthly;
-
 	/**
 	 * If this discount is related to a `Plan upgrade credit`
 	 * then we do not show any discount messaging as per Automattic/martech#1927
 	 * We currently only support the `One time discount` in some currencies
 	 */
 	const isGridPlanOneTimeDiscounted = Number.isFinite( discountedPrice.monthly );
-	const isAnyVisibleGridPlanOneTimeDiscounted = visibleGridPlans.some( ( { pricing } ) =>
-		Number.isFinite( pricing.discountedPrice.monthly )
-	);
-
 	const isGridPlanOnIntroOffer = introOffer && ! introOffer.isOfferComplete;
-	const isAnyVisibleGridPlanOnIntroOffer = visibleGridPlans.some(
-		( { pricing } ) => pricing.introOffer && ! pricing.introOffer.isOfferComplete
-	);
-
 	const { prices } = usePlanPricingInfoFromGridPlans( { gridPlans: visibleGridPlans } );
 	const isLargeCurrency = useIsLargeCurrency( {
 		prices,
 		currencyCode: currencyCode || 'USD',
 		ignoreWhitespace: true,
 	} );
-
 	const storageAddOns = AddOns.useStorageAddOns( { siteId } );
 	const termVariantPlanSlug = getTermVariantPlanSlugForSavings( { planSlug, billingPeriod } );
 	const termVariantPricing = Plans.usePricingMetaForGridPlans( {
@@ -82,6 +78,8 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 	}
 
 	if ( isGridPlanOnIntroOffer ) {
+		setIsAnyVisibleGridPlanDiscounted( true );
+
 		return (
 			<div className="plans-grid-next-header-price">
 				{ ! current && (
@@ -122,6 +120,8 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 	}
 
 	if ( isGridPlanOneTimeDiscounted ) {
+		setIsAnyVisibleGridPlanDiscounted( true );
+
 		return (
 			<div className="plans-grid-next-header-price">
 				<div className="plans-grid-next-header-price__badge">
@@ -164,6 +164,8 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 			: 0;
 
 	if ( enableTermSavingsPriceDisplay && termVariantPricing && savings ) {
+		setIsAnyVisibleGridPlanDiscounted( true );
+
 		return (
 			<div className="plans-grid-next-header-price">
 				<div className="plans-grid-next-header-price__badge">
@@ -200,11 +202,7 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 		);
 	}
 
-	if (
-		isAnyVisibleGridPlanOneTimeDiscounted ||
-		isAnyVisibleGridPlanOnIntroOffer ||
-		enableTermSavingsPriceDisplay
-	) {
+	if ( isAnyVisibleGridPlanDiscounted ) {
 		return (
 			<div className="plans-grid-next-header-price">
 				<div className="plans-grid-next-header-price__badge is-hidden">' '</div>