wrap header discounting logic in a hook

Automattic · Nov 18, 2024 · 5ada27f · 5ada27f
1 parent 0ec7051
commit 5ada27f
Showing 1 changed file with 28 additions and 20 deletions.
diff --git a/packages/plans-grid-next/src/components/shared/header-price/index.tsx b/packages/plans-grid-next/src/components/shared/header-price/index.tsx
@@ -7,6 +7,7 @@ import {
 } from '@automattic/calypso-products';
 import { PlanPrice } from '@automattic/components';
 import { AddOns, Plans } from '@automattic/data-stores';
+import { useEffect, useState } from '@wordpress/element';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { usePlansGridContext } from '../../../grid-context';
@@ -39,6 +40,7 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 	const translate = useTranslate();
 	const { gridPlansIndex, enableTermSavingsPriceDisplay, siteId, coupon, helpers } =
 		usePlansGridContext();
+	const [ isAnyVisibleGridPlanDiscounted, setIsAnyVisibleGridPlanDiscounted ] = useState( false );
 	const {
 		current,
 		pricing: { currencyCode, originalPrice, discountedPrice, introOffer, billingPeriod },
@@ -51,14 +53,7 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 	 * 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( {
@@ -77,6 +72,31 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 		useCheckPlanAvailabilityForPurchase: helpers?.useCheckPlanAvailabilityForPurchase,
 	} )?.[ termVariantPlanSlug ?? '' ];
 
+	const termVariantPrice =
+		termVariantPricing?.discountedPrice.monthly ?? termVariantPricing?.originalPrice.monthly ?? 0;
+	const planPrice = discountedPrice.monthly ?? originalPrice.monthly ?? 0;
+	const savings =
+		termVariantPrice > planPrice
+			? Math.floor( ( ( termVariantPrice - planPrice ) / termVariantPrice ) * 100 )
+			: 0;
+
+	useEffect( () => {
+		const isAnyVisibleGridPlanOneTimeDiscounted = visibleGridPlans.some( ( { pricing } ) =>
+			Number.isFinite( pricing.discountedPrice.monthly )
+		);
+		const isAnyVisibleGridPlanOnIntroOffer = visibleGridPlans.some(
+			( { pricing } ) => pricing.introOffer && ! pricing.introOffer.isOfferComplete
+		);
+
+		if (
+			isAnyVisibleGridPlanOneTimeDiscounted ||
+			isAnyVisibleGridPlanOnIntroOffer ||
+			enableTermSavingsPriceDisplay
+		) {
+			setIsAnyVisibleGridPlanDiscounted( true );
+		}
+	}, [ enableTermSavingsPriceDisplay, visibleGridPlans ] );
+
 	if ( isWpcomEnterpriseGridPlan( planSlug ) || ! isPricedPlan ) {
 		return null;
 	}
@@ -155,14 +175,6 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 		);
 	}
 
-	const termVariantPrice =
-		termVariantPricing?.discountedPrice.monthly ?? termVariantPricing?.originalPrice.monthly ?? 0;
-	const planPrice = discountedPrice.monthly ?? originalPrice.monthly ?? 0;
-	const savings =
-		termVariantPrice > planPrice
-			? Math.floor( ( ( termVariantPrice - planPrice ) / termVariantPrice ) * 100 )
-			: 0;
-
 	if ( enableTermSavingsPriceDisplay && termVariantPricing && savings ) {
 		return (
 			<div className="plans-grid-next-header-price">
@@ -200,11 +212,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>