move it to header-price context

Automattic · Nov 18, 2024 · 9ece3ab · 9ece3ab
1 parent 5ada27f
commit 9ece3ab
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 50 deletions.
diff --git a/packages/plans-grid-next/src/components/comparison-grid/index.tsx b/packages/plans-grid-next/src/components/comparison-grid/index.tsx
@@ -36,6 +36,7 @@ import PopularBadge from '../popular-badge';
 import ActionButton from '../shared/action-button';
 import BillingTimeframe from '../shared/billing-timeframe';
 import HeaderPrice from '../shared/header-price';
+import HeaderPriceContextProvider from '../shared/header-price/header-price-context';
 import { PlanStorage } from '../shared/storage';
 import { StickyContainer } from '../sticky-container';
 import type {
@@ -53,7 +54,6 @@ import type {
 	PlanSlug,
 	FeatureGroupMap,
 } from '@automattic/calypso-products';
-
 import './style.scss';
 
 const featureGroupRowTitleCellMaxWidth = 450;
@@ -500,24 +500,26 @@ const ComparisonGridHeader = forwardRef< HTMLDivElement, ComparisonGridHeaderPro
 						</PlanTypeSelectorWrapper>
 					) }
 				</RowTitleCell>
-				{ visibleGridPlans.map( ( { planSlug }, index ) => (
-					<ComparisonGridHeaderCell
-						planSlug={ planSlug }
-						key={ planSlug }
-						isLastInRow={ index === visibleGridPlans.length - 1 }
-						isFooter={ isFooter }
-						allVisible={ allVisible }
-						isInSignup={ isInSignup }
-						visibleGridPlans={ visibleGridPlans }
-						onPlanChange={ onPlanChange }
-						displayedGridPlans={ displayedGridPlans }
-						currentSitePlanSlug={ currentSitePlanSlug }
-						planActionOverrides={ planActionOverrides }
-						selectedPlan={ selectedPlan }
-						showRefundPeriod={ showRefundPeriod }
-						isStuck={ isStuck }
-					/>
-				) ) }
+				<HeaderPriceContextProvider>
+					{ visibleGridPlans.map( ( { planSlug }, index ) => (
+						<ComparisonGridHeaderCell
+							planSlug={ planSlug }
+							key={ planSlug }
+							isLastInRow={ index === visibleGridPlans.length - 1 }
+							isFooter={ isFooter }
+							allVisible={ allVisible }
+							isInSignup={ isInSignup }
+							visibleGridPlans={ visibleGridPlans }
+							onPlanChange={ onPlanChange }
+							displayedGridPlans={ displayedGridPlans }
+							currentSitePlanSlug={ currentSitePlanSlug }
+							planActionOverrides={ planActionOverrides }
+							selectedPlan={ selectedPlan }
+							showRefundPeriod={ showRefundPeriod }
+							isStuck={ isStuck }
+						/>
+					) ) }
+				</HeaderPriceContextProvider>
 			</PlanRow>
 		);
 	}

diff --git a/packages/plans-grid-next/src/components/features-grid/plan-prices.tsx b/packages/plans-grid-next/src/components/features-grid/plan-prices.tsx
@@ -1,6 +1,7 @@
 import { GridPlan } from '../../types';
 import PlanDivOrTdContainer from '../plan-div-td-container';
 import HeaderPrice from '../shared/header-price';
+import HeaderPriceContextProvider from '../shared/header-price/header-price-context';
 
 type PlanPricesProps = {
 	currentSitePlanSlug?: string | null;
@@ -11,22 +12,26 @@ type PlanPricesProps = {
 };
 
 const PlanPrices = ( { currentSitePlanSlug, options, renderedGridPlans }: PlanPricesProps ) => {
-	return renderedGridPlans.map( ( { planSlug } ) => {
-		return (
-			<PlanDivOrTdContainer
-				scope="col"
-				key={ planSlug }
-				className="plan-features-2023-grid__table-item plan-price"
-				isTableCell={ options?.isTableCell }
-			>
-				<HeaderPrice
-					planSlug={ planSlug }
-					currentSitePlanSlug={ currentSitePlanSlug }
-					visibleGridPlans={ renderedGridPlans }
-				/>
-			</PlanDivOrTdContainer>
-		);
-	} );
+	return (
+		<HeaderPriceContextProvider>
+			{ renderedGridPlans.map( ( { planSlug } ) => {
+				return (
+					<PlanDivOrTdContainer
+						scope="col"
+						key={ planSlug }
+						className="plan-features-2023-grid__table-item plan-price"
+						isTableCell={ options?.isTableCell }
+					>
+						<HeaderPrice
+							planSlug={ planSlug }
+							currentSitePlanSlug={ currentSitePlanSlug }
+							visibleGridPlans={ renderedGridPlans }
+						/>
+					</PlanDivOrTdContainer>
+				);
+			} ) }
+		</HeaderPriceContextProvider>
+	);
 };
 
 export default PlanPrices;
diff --git a/packages/plans-grid-next/src/components/shared/header-price/header-price-context.tsx b/packages/plans-grid-next/src/components/shared/header-price/header-price-context.tsx
@@ -0,0 +1,24 @@
+import { createContext, useContext, useState } from '@wordpress/element';
+
+interface HeaderPriceContext {
+	isAnyPlanPriceDiscounted: boolean;
+	setIsAnyPlanPriceDiscounted: ( isAnyPlanPriceDiscounted: boolean ) => void;
+}
+
+const HeaderPriceContext = createContext< HeaderPriceContext >( {} as HeaderPriceContext );
+
+const HeaderPriceContextProvider = ( { children }: { children: React.ReactNode } ) => {
+	const [ isAnyPlanPriceDiscounted, setIsAnyPlanPriceDiscounted ] = useState( false );
+
+	return (
+		<HeaderPriceContext.Provider
+			value={ { isAnyPlanPriceDiscounted, setIsAnyPlanPriceDiscounted } }
+		>
+			{ children }
+		</HeaderPriceContext.Provider>
+	);
+};
+
+export const useHeaderPriceContext = (): HeaderPriceContext => useContext( HeaderPriceContext );
+
+export default HeaderPriceContextProvider;
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,12 +7,13 @@ import {
 } from '@automattic/calypso-products';
 import { PlanPrice } from '@automattic/components';
 import { AddOns, Plans } from '@automattic/data-stores';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { usePlansGridContext } from '../../../grid-context';
 import useIsLargeCurrency from '../../../hooks/use-is-large-currency';
 import { usePlanPricingInfoFromGridPlans } from '../../../hooks/use-plan-pricing-info-from-grid-plans';
+import { useHeaderPriceContext } from './header-price-context';
 import type { GridPlan } from '../../../types';
 import './style.scss';
 
@@ -40,7 +41,7 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 	const translate = useTranslate();
 	const { gridPlansIndex, enableTermSavingsPriceDisplay, siteId, coupon, helpers } =
 		usePlansGridContext();
-	const [ isAnyVisibleGridPlanDiscounted, setIsAnyVisibleGridPlanDiscounted ] = useState( false );
+	const { isAnyPlanPriceDiscounted, setIsAnyPlanPriceDiscounted } = useHeaderPriceContext();
 	const {
 		current,
 		pricing: { currencyCode, originalPrice, discountedPrice, introOffer, billingPeriod },
@@ -81,21 +82,20 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 			: 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
+			isGridPlanOneTimeDiscounted ||
+			isGridPlanOnIntroOffer ||
+			( enableTermSavingsPriceDisplay && savings )
 		) {
-			setIsAnyVisibleGridPlanDiscounted( true );
+			setIsAnyPlanPriceDiscounted( true );
 		}
-	}, [ enableTermSavingsPriceDisplay, visibleGridPlans ] );
+	}, [
+		enableTermSavingsPriceDisplay,
+		isGridPlanOnIntroOffer,
+		isGridPlanOneTimeDiscounted,
+		savings,
+		setIsAnyPlanPriceDiscounted,
+	] );
 
 	if ( isWpcomEnterpriseGridPlan( planSlug ) || ! isPricedPlan ) {
 		return null;
@@ -212,7 +212,7 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 		);
 	}
 
-	if ( isAnyVisibleGridPlanDiscounted ) {
+	if ( isAnyPlanPriceDiscounted ) {
 		return (
 			<div className="plans-grid-next-header-price">
 				<div className="plans-grid-next-header-price__badge is-hidden">' '</div>