@automattic/plans-grid-next 1.0.0

package/src/components/plan-logo.tsx

@@ -0,0 +1,111 @@
+import {
+	getPlanClass,
+	isEcommercePlan,
+	isBusinessPlan,
+	isWooExpressPlan,
+	isWpcomEnterpriseGridPlan,
+	isPersonalPlan,
+	isPremiumPlan,
+	isFreePlan,
+	PlanSlug,
+} from '@automattic/calypso-products';
+import { CloudLogo, VIPLogo, WooLogo } from '@automattic/components';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import { usePlansGridContext } from '../grid-context';
+import useHighlightAdjacencyMatrix from '../hooks/use-highlight-adjacency-matrix';
+import { useManageTooltipToggle } from '../hooks/use-manage-tooltip-toggle';
+import PlanDivOrTdContainer from './plan-div-td-container';
+import { Plans2023Tooltip } from './plans-2023-tooltip';
+import PopularBadge from './popular-badge';
+import type { GridPlan } from '../types';
+
+const PlanLogo: React.FunctionComponent< {
+	renderedGridPlans: GridPlan[];
+	planSlug: PlanSlug;
+	isInSignup?: boolean;
+	isTableCell?: boolean;
+	planIndex: number;
+} > = ( { planSlug, isInSignup, renderedGridPlans, isTableCell, planIndex } ) => {
+	const [ activeTooltipId, setActiveTooltipId ] = useManageTooltipToggle();
+	const translate = useTranslate();
+	const shouldShowWooLogo = isEcommercePlan( planSlug ) && ! isWooExpressPlan( planSlug );
+	const { gridPlansIndex } = usePlansGridContext();
+	const { current } = gridPlansIndex[ planSlug ];
+	const highlightAdjacencyMatrix = useHighlightAdjacencyMatrix( {
+		renderedGridPlans,
+	} );
+	const headerClasses = clsx( 'plan-features-2023-grid__header-logo', getPlanClass( planSlug ) );
+	const tableItemClasses = clsx( 'plan-features-2023-grid__table-item', {
+		'popular-plan-parent-class': gridPlansIndex[ planSlug ]?.highlightLabel,
+		'is-left-of-highlight':
+			highlightAdjacencyMatrix[ planSlug as keyof typeof highlightAdjacencyMatrix ]
+				?.leftOfHighlight,
+		'is-right-of-highlight':
+			highlightAdjacencyMatrix[ planSlug as keyof typeof highlightAdjacencyMatrix ]
+				?.rightOfHighlight,
+		'is-only-highlight':
+			highlightAdjacencyMatrix[ planSlug as keyof typeof highlightAdjacencyMatrix ]
+				?.isOnlyHighlight,
+		'is-current-plan': current,
+		'is-first-in-row': planIndex === 0,
+		'is-last-in-row': planIndex === renderedGridPlans.length - 1,
+	} );
+	const popularBadgeClasses = clsx( {
+		'with-plan-logo': ! (
+			isFreePlan( planSlug ) ||
+			isPersonalPlan( planSlug ) ||
+			isPremiumPlan( planSlug )
+		),
+	} );
+
+	return (
+		<PlanDivOrTdContainer
+			key={ planSlug }
+			className={ tableItemClasses }
+			isTableCell={ isTableCell }
+		>
+			<PopularBadge
+				isInSignup={ isInSignup }
+				planSlug={ planSlug }
+				additionalClassName={ popularBadgeClasses }
+			/>
+			<header className={ headerClasses }>
+				{ isBusinessPlan( planSlug ) && (
+					<Plans2023Tooltip
+						text={ translate(
+							'WP Cloud gives you the tools you need to add scalable, highly available, extremely fast WordPress hosting.'
+						) }
+						id="wp-cloud-logo"
+						setActiveTooltipId={ setActiveTooltipId }
+						activeTooltipId={ activeTooltipId }
+					>
+						<CloudLogo />
+					</Plans2023Tooltip>
+				) }
+				{ shouldShowWooLogo && (
+					<Plans2023Tooltip
+						text={ translate( 'Make your online store a reality with the power of WooCommerce.' ) }
+						id="woo-logo"
+						setActiveTooltipId={ setActiveTooltipId }
+						activeTooltipId={ activeTooltipId }
+					>
+						<WooLogo />
+					</Plans2023Tooltip>
+				) }
+				{ isWpcomEnterpriseGridPlan( planSlug ) && (
+					<Plans2023Tooltip
+						text={ translate( 'The trusted choice for enterprise WordPress hosting.' ) }
+						id="enterprise-logo"
+						setActiveTooltipId={ setActiveTooltipId }
+						activeTooltipId={ activeTooltipId }
+					>
+						<VIPLogo />
+					</Plans2023Tooltip>
+				) }
+			</header>
+		</PlanDivOrTdContainer>
+	);
+};
+
+export default PlanLogo;

package/src/components/plan-type-selector/components/interval-type-dropdown.tsx

@@ -0,0 +1,70 @@
+import { recordTracksEvent } from '@automattic/calypso-analytics';
+import { CustomSelectControl } from '@wordpress/components';
+import { useRef } from 'react';
+import DropdownOption from '../../dropdown-option';
+import useIntervalOptions from '../hooks/use-interval-options';
+import type { IntervalTypeProps, SupportedUrlFriendlyTermType } from '../../../types';
+
+export const IntervalTypeDropdown: React.FunctionComponent< IntervalTypeProps > = ( props ) => {
+	const {
+		hideDiscount,
+		intent,
+		intervalType,
+		displayedIntervals,
+		onPlanIntervalUpdate,
+		isInSignup,
+	} = props;
+	const supportedIntervalType = (
+		displayedIntervals.includes( intervalType ) ? intervalType : 'yearly'
+	) as SupportedUrlFriendlyTermType;
+	const optionsList = useIntervalOptions( props );
+	const hasOpenedDropdown = useRef( false );
+
+	const selectOptionsList = Object.values( optionsList ).map( ( option ) => ( {
+		key: option.key,
+		name: (
+			<DropdownOption
+				className="plan-type-selector__interval-type-dropdown-option"
+				title={ option.name }
+			>
+				{ option.discountText && ! hideDiscount ? (
+					<span className="discount"> { option.discountText } </span>
+				) : null }
+			</DropdownOption>
+		 ) as unknown as string,
+	} ) );
+
+	return (
+		<div className="plan-type-selector__interval-type-dropdown-container">
+			<CustomSelectControl
+				__next40pxDefaultSize
+				onFocus={ () => {
+					if ( ! hasOpenedDropdown.current ) {
+						recordTracksEvent( 'calypso_plans_plan_type_selector_open', {
+							plans_intent: intent,
+							is_in_signup: isInSignup,
+						} );
+						hasOpenedDropdown.current = true;
+					}
+				} }
+				className="plan-type-selector__interval-type-dropdown"
+				label=""
+				options={ selectOptionsList }
+				value={ selectOptionsList.find( ( { key } ) => key === supportedIntervalType ) }
+				onChange={ ( {
+					selectedItem: { key: intervalType },
+				}: {
+					selectedItem: { key: string };
+				} ) => {
+					recordTracksEvent( 'calypso_plans_plan_type_selector_option_change', {
+						interval_type: intervalType,
+						plans_intent: intent,
+						is_in_signup: isInSignup,
+					} );
+					onPlanIntervalUpdate &&
+						onPlanIntervalUpdate( intervalType as SupportedUrlFriendlyTermType );
+				} }
+			/>
+		</div>
+	);
+};

package/src/components/plan-type-selector/components/interval-type-selector.tsx

@@ -0,0 +1,13 @@
+import { IntervalTypeProps } from '../../../types';
+import { IntervalTypeDropdown } from './interval-type-dropdown';
+import { IntervalTypeToggle } from './interval-type-toggle';
+
+export const IntervalTypeSelector: React.FunctionComponent< IntervalTypeProps > = ( props ) => {
+	const { showPlanTypeSelectorDropdown } = props;
+
+	return showPlanTypeSelectorDropdown ? (
+		<IntervalTypeDropdown { ...props } />
+	) : (
+		<IntervalTypeToggle { ...props } />
+	);
+};

package/src/components/plan-type-selector/components/interval-type-toggle.tsx

@@ -0,0 +1,100 @@
+import { PLAN_ANNUAL_PERIOD } from '@automattic/calypso-products';
+import { SegmentedControl } from '@automattic/components';
+import { Plans } from '@automattic/data-stores';
+import { useState } from '@wordpress/element';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import * as React from 'react';
+import useMaxDiscount from '../hooks/use-max-discount';
+import PopupMessages from './popup-messages';
+import type { IntervalTypeProps, SupportedUrlFriendlyTermType } from '../../../types';
+
+export const IntervalTypeToggle: React.FunctionComponent< IntervalTypeProps > = ( props ) => {
+	const translate = useTranslate();
+	const {
+		intervalType,
+		isInSignup,
+		eligibleForWpcomMonthlyPlans,
+		hideDiscount,
+		currentSitePlanSlug,
+		displayedIntervals,
+		useCheckPlanAvailabilityForPurchase,
+		title,
+		coupon,
+		siteId,
+		onPlanIntervalUpdate,
+	} = props;
+	const showBiennialToggle = displayedIntervals.includes( '2yearly' );
+	const [ spanRef, setSpanRef ] = useState< HTMLSpanElement >();
+	const segmentClasses = clsx( 'price-toggle', {
+		'is-signup': isInSignup,
+	} );
+	const popupIsVisible = Boolean( intervalType === 'monthly' && props.plans.length );
+	const maxDiscount = useMaxDiscount( props.plans, useCheckPlanAvailabilityForPurchase, siteId );
+	const pricingMeta = Plans.usePricingMetaForGridPlans( {
+		planSlugs: currentSitePlanSlug ? [ currentSitePlanSlug ] : [],
+		coupon,
+		siteId,
+		useCheckPlanAvailabilityForPurchase,
+	} );
+	const currentPlanBillingPeriod = currentSitePlanSlug
+		? pricingMeta?.[ currentSitePlanSlug ]?.billingPeriod
+		: null;
+
+	if ( showBiennialToggle ) {
+		// skip showing toggle if current plan's term is higher than 1 year
+		if ( currentPlanBillingPeriod && PLAN_ANNUAL_PERIOD < currentPlanBillingPeriod ) {
+			return null;
+		}
+	}
+
+	if ( ! showBiennialToggle ) {
+		if ( ! eligibleForWpcomMonthlyPlans ) {
+			return null;
+		}
+	}
+
+	const intervalTabs: SupportedUrlFriendlyTermType[] = showBiennialToggle
+		? [ 'yearly', '2yearly' ]
+		: [ 'monthly', 'yearly' ];
+
+	return (
+		<>
+			{ title && <div className="plan-type-selector__title">{ title }</div> }
+			<div
+				className="plan-type-selector__interval-type"
+				ref={ intervalType === 'monthly' ? ( ref ) => ref && ! spanRef && setSpanRef( ref ) : null }
+			>
+				<SegmentedControl compact className={ segmentClasses } primary>
+					{ intervalTabs.map( ( interval ) => (
+						<SegmentedControl.Item
+							key={ interval }
+							selected={ intervalType === interval }
+							onClick={ () => onPlanIntervalUpdate( interval ) }
+						>
+							<span>
+								{ interval === 'monthly' ? translate( 'Pay monthly' ) : null }
+								{ interval === 'yearly' && ! showBiennialToggle
+									? translate( 'Pay annually' )
+									: null }
+								{ interval === 'yearly' && showBiennialToggle ? translate( 'Pay 1 year' ) : null }
+								{ interval === '2yearly' ? translate( 'Pay 2 years' ) : null }
+							</span>
+							{ ! showBiennialToggle && hideDiscount ? null : (
+								<PopupMessages context={ spanRef } isVisible={ popupIsVisible }>
+									{ translate(
+										'Save up to %(maxDiscount)d%% by paying annually and get a free domain for one year',
+										{
+											args: { maxDiscount },
+											comment: 'Will be like "Save up to 30% by paying annually..."',
+										}
+									) }
+								</PopupMessages>
+							) }
+						</SegmentedControl.Item>
+					) ) }
+				</SegmentedControl>
+			</div>
+		</>
+	);
+};

package/src/components/plan-type-selector/components/popup-messages.tsx

@@ -0,0 +1,128 @@
+import { Popover } from '@automattic/components';
+import styled from '@emotion/styled';
+import * as React from 'react';
+import CSSTransition from 'react-transition-group/CSSTransition';
+
+const StyledPopover = styled( Popover )`
+	&.popover {
+		display: none;
+		opacity: 0;
+		transition-property: opacity, transform;
+		transition-timing-function: ease-in;
+
+		&.popover-enter-active {
+			opacity: 1;
+			transition-duration: 0.3s;
+		}
+
+		&.popover-exit,
+		&.popover-enter-done {
+			opacity: 1;
+			transition-duration: 0.01s;
+		}
+
+		&.is-right,
+		.rtl &.is-left {
+			@media ( min-width: 960px ) {
+				display: block;
+			}
+
+			&.popover-enter {
+				transform: translate( 10px, 0 );
+			}
+
+			&.popover-enter-active,
+			&.popover-enter-done {
+				transform: translate( 0, 0 );
+			}
+
+			.popover__arrow {
+				border-right-color: var( --color-neutral-100 );
+				&::before {
+					border-right-color: var( --color-neutral-100 );
+				}
+			}
+		}
+
+		.rtl &.is-left {
+			.popover__arrow {
+				right: 40px;
+				border-left-color: var( --color-neutral-100 );
+				&::before {
+					border-left-color: var( --color-neutral-100 );
+				}
+			}
+
+			.popover__inner {
+				left: -50px;
+			}
+		}
+
+		&.is-bottom {
+			@media ( max-width: 960px ) {
+				display: block;
+			}
+
+			&.popover-enter {
+				transform: translate( 0, 22px );
+			}
+
+			&.popover-enter-active,
+			&.popover-enter-done {
+				transform: translate( 0, 12px );
+			}
+
+			.popover__arrow {
+				border-bottom-color: var( --color-neutral-100 );
+				&::before {
+					border-bottom-color: var( --color-neutral-100 );
+				}
+			}
+		}
+
+		.rtl &.is-bottom {
+			.popover__arrow {
+				border-right-color: transparent;
+			}
+		}
+
+		.popover__inner {
+			padding: 8px 10px;
+			max-width: 210px;
+			background-color: var( --color-neutral-100 );
+			border-color: var( --color-neutral-100 );
+			color: var( --color-neutral-0 );
+			border-radius: 2px;
+			text-align: left;
+		}
+	}
+`;
+
+type PopupMessageProps = {
+	context?: HTMLElement;
+	isVisible: boolean;
+	children?: React.ReactNode;
+};
+
+const PopupMessages: React.FunctionComponent< PopupMessageProps > = ( {
+	context,
+	children,
+	isVisible,
+} ) => {
+	const timeout = { enter: 300, exit: 10 };
+	const inProp = Boolean( isVisible && context );
+
+	return (
+		<>
+			{ [ 'right', 'bottom' ].map( ( pos ) => (
+				<CSSTransition key={ pos } in={ inProp } timeout={ timeout } classNames="popover">
+					<StyledPopover position={ pos } context={ context } isVisible autoPosition={ false }>
+						{ children }
+					</StyledPopover>
+				</CSSTransition>
+			) ) }
+		</>
+	);
+};
+
+export default PopupMessages;

package/src/components/plan-type-selector/hooks/use-interval-options.tsx

@@ -0,0 +1,89 @@
+import { type LocalizeProps, type TranslateResult, useTranslate } from 'i18n-calypso';
+import useMaxDiscountsForPlanTerms from './use-max-discounts-for-plan-terms';
+import type { IntervalTypeProps, SupportedUrlFriendlyTermType } from '../../../types';
+
+const getDiscountText = ( discountPercentage: number, translate: LocalizeProps[ 'translate' ] ) => {
+	if ( ! discountPercentage ) {
+		return '';
+	}
+	return translate( 'up to %(discount)d%% off', {
+		args: { discount: discountPercentage },
+		comment: 'Discount percentage',
+	} );
+};
+
+type IntervalSelectOptionsMap = Record<
+	SupportedUrlFriendlyTermType,
+	{
+		key: string;
+		name: TranslateResult;
+		discountText: TranslateResult;
+		termInMonths: number;
+	}
+>;
+export default function useIntervalOptions( props: IntervalTypeProps ): IntervalSelectOptionsMap {
+	const translate = useTranslate();
+	const { displayedIntervals } = props;
+	const optionList: Record<
+		SupportedUrlFriendlyTermType,
+		{
+			key: SupportedUrlFriendlyTermType;
+			name: TranslateResult;
+			discountText: TranslateResult;
+			termInMonths: number;
+		}
+	> = {
+		yearly: {
+			key: 'yearly',
+			name: translate( 'Pay yearly' ),
+			discountText: '',
+			termInMonths: 12,
+		},
+		'2yearly': {
+			key: '2yearly',
+			name: translate( 'Pay every 2 years' ),
+			discountText: '',
+			termInMonths: 24,
+		},
+		'3yearly': {
+			key: '3yearly',
+			name: translate( 'Pay every 3 years' ),
+			discountText: '',
+			termInMonths: 36,
+		},
+		monthly: {
+			key: 'monthly',
+			name: translate( 'Pay monthly' ),
+			discountText: '',
+			termInMonths: 1,
+		},
+	};
+
+	let displayedOptionList = Object.fromEntries(
+		Object.entries( optionList ).filter( ( [ , value ] ) =>
+			displayedIntervals.includes( value.key )
+		)
+	) as IntervalSelectOptionsMap;
+
+	const termWiseMaxDiscount = useMaxDiscountsForPlanTerms(
+		props.plans,
+		Object.keys( displayedOptionList ) as Array< SupportedUrlFriendlyTermType >,
+		props.useCheckPlanAvailabilityForPurchase,
+		props.siteId
+	);
+
+	displayedOptionList = Object.fromEntries(
+		Object.keys( displayedOptionList ).map( ( key ) => [
+			key as SupportedUrlFriendlyTermType,
+			{
+				...displayedOptionList[ key as SupportedUrlFriendlyTermType ],
+				discountText: getDiscountText(
+					termWiseMaxDiscount[ key as SupportedUrlFriendlyTermType ],
+					translate
+				),
+			},
+		] )
+	) as IntervalSelectOptionsMap;
+
+	return displayedOptionList;
+}

package/src/components/plan-type-selector/hooks/use-max-discount.ts

@@ -0,0 +1,64 @@
+import {
+	type PlanSlug,
+	TERM_ANNUALLY,
+	getPlanSlugForTermVariant,
+	isMonthly,
+	isWpComPlan,
+} from '@automattic/calypso-products';
+import { Plans } from '@automattic/data-stores';
+import { useState } from '@wordpress/element';
+
+export default function useMaxDiscount(
+	plans: PlanSlug[],
+	useCheckPlanAvailabilityForPurchase: Plans.UseCheckPlanAvailabilityForPurchase,
+	siteId?: number | null
+): number {
+	const [ maxDiscount, setMaxDiscount ] = useState( 0 );
+	const wpcomMonthlyPlans = ( plans || [] ).filter( isWpComPlan ).filter( isMonthly );
+	const yearlyVariantPlanSlugs = wpcomMonthlyPlans
+		.map( ( planSlug ) => getPlanSlugForTermVariant( planSlug, TERM_ANNUALLY ) )
+		.filter( Boolean ) as PlanSlug[];
+	const monthlyPlansPricing = Plans.usePricingMetaForGridPlans( {
+		planSlugs: wpcomMonthlyPlans,
+		siteId,
+		coupon: undefined,
+		useCheckPlanAvailabilityForPurchase,
+	} );
+	const yearlyPlansPricing = Plans.usePricingMetaForGridPlans( {
+		planSlugs: yearlyVariantPlanSlugs,
+		siteId,
+		coupon: undefined,
+		useCheckPlanAvailabilityForPurchase,
+	} );
+
+	const discounts = wpcomMonthlyPlans.map( ( planSlug ) => {
+		const yearlyVariantPlanSlug = getPlanSlugForTermVariant( planSlug, TERM_ANNUALLY );
+
+		if ( ! yearlyVariantPlanSlug ) {
+			return 0;
+		}
+
+		const monthlyPlanAnnualCost =
+			( monthlyPlansPricing?.[ planSlug ]?.originalPrice.full ?? 0 ) * 12;
+
+		if ( ! monthlyPlanAnnualCost ) {
+			return 0;
+		}
+
+		const yearlyPlanAnnualCost =
+			yearlyPlansPricing?.[ yearlyVariantPlanSlug ]?.discountedPrice.full ||
+			yearlyPlansPricing?.[ yearlyVariantPlanSlug ]?.originalPrice.full ||
+			0;
+
+		return Math.floor(
+			( ( monthlyPlanAnnualCost - yearlyPlanAnnualCost ) / ( monthlyPlanAnnualCost || 1 ) ) * 100
+		);
+	} );
+	const currentMaxDiscount = discounts.length ? Math.max( ...discounts ) : 0;
+
+	if ( currentMaxDiscount > 0 && currentMaxDiscount !== maxDiscount ) {
+		setMaxDiscount( currentMaxDiscount );
+	}
+
+	return currentMaxDiscount || maxDiscount;
+}

package/src/components/plan-type-selector/hooks/use-max-discounts-for-plan-terms.ts

@@ -0,0 +1,99 @@
+import {
+	type PlanSlug,
+	URL_FRIENDLY_TERMS_MAPPING,
+	type UrlFriendlyTermType,
+	getBillingMonthsForTerm,
+	getPlan,
+	getPlanMultipleTermsVariantSlugs,
+	getPlanSlugForTermVariant,
+	isWpComPlan,
+	isWpcomEnterpriseGridPlan,
+} from '@automattic/calypso-products';
+import { Plans } from '@automattic/data-stores';
+
+/**
+ * Calculate the maximum discount for each term for a given set of plans
+ * @param plans plans considered
+ * @param urlFriendlyTerms terms calculated for
+ * @returns A map of term to maximum discount
+ */
+export default function useMaxDiscountsForPlanTerms(
+	plans: PlanSlug[],
+	urlFriendlyTerms: UrlFriendlyTermType[] = [],
+	useCheckPlanAvailabilityForPurchase: Plans.UseCheckPlanAvailabilityForPurchase,
+	siteId?: number | null
+): Record< UrlFriendlyTermType, number > {
+	const termDefinitionsMapping = urlFriendlyTerms.map( ( urlFriendlyTerm ) => ( {
+		urlFriendlyTerm,
+		term: URL_FRIENDLY_TERMS_MAPPING[ urlFriendlyTerm ],
+	} ) );
+	const terms = termDefinitionsMapping.map( ( { term } ) => term );
+
+	const allRelatedPlanSlugs = plans
+		.filter( ( planSlug ) => ! isWpcomEnterpriseGridPlan( planSlug ) )
+		.map( ( plan ) => getPlanMultipleTermsVariantSlugs( plan, terms ) )
+		.flat()
+		.filter( Boolean )
+		.filter( isWpComPlan ) as PlanSlug[];
+
+	const lowestTerm = terms.reduce( ( currentLowestTerm, term ) => {
+		return getBillingMonthsForTerm( currentLowestTerm ) <= getBillingMonthsForTerm( term )
+			? currentLowestTerm
+			: term;
+	}, terms[ 0 ] );
+	const lowestTermInMonths = getBillingMonthsForTerm( lowestTerm );
+
+	const lowestTermPlanSlugs = allRelatedPlanSlugs.filter(
+		( planSlug ) => getPlan( planSlug )?.term === lowestTerm
+	);
+
+	const plansPricing = Plans.usePricingMetaForGridPlans( {
+		planSlugs: allRelatedPlanSlugs,
+		siteId,
+		coupon: undefined,
+		useCheckPlanAvailabilityForPurchase,
+	} );
+
+	const termWiseMaxDiscount: Record< UrlFriendlyTermType, number > = {} as Record<
+		UrlFriendlyTermType,
+		number
+	>;
+	termDefinitionsMapping.forEach( ( termMapping ) => {
+		if ( termMapping.term === lowestTerm ) {
+			return 0;
+		}
+		const termDiscounts = lowestTermPlanSlugs.map( ( lowestTermPlanSlug ) => {
+			const lowestTermPlanPricing = plansPricing?.[ lowestTermPlanSlug ];
+			const lowestTermPlanCost = lowestTermPlanPricing?.originalPrice.full;
+			if ( ! lowestTermPlanCost ) {
+				return 0;
+			}
+			const lowestTermMonthlyCost = lowestTermPlanCost / lowestTermInMonths;
+
+			/**
+			 * Calculate the monthly cost of the term price
+			 */
+			const variantPlanSlug =
+				getPlanSlugForTermVariant( lowestTermPlanSlug, termMapping.term ) ?? '';
+			const variantPlanPricing = plansPricing?.[ variantPlanSlug ];
+			const variantTermPrice =
+				variantPlanPricing?.discountedPrice?.full || variantPlanPricing?.originalPrice?.full || 0;
+			if ( ! variantTermPrice ) {
+				return 0;
+			}
+			const variantTermInMonths = getBillingMonthsForTerm(
+				URL_FRIENDLY_TERMS_MAPPING[ termMapping.urlFriendlyTerm ]
+			);
+			const variantTermMonthlyCost = variantTermPrice / variantTermInMonths;
+
+			return Math.floor(
+				( ( lowestTermMonthlyCost - variantTermMonthlyCost ) * 100 ) / lowestTermMonthlyCost
+			);
+		} );
+		termWiseMaxDiscount[ termMapping.urlFriendlyTerm ] = termDiscounts.length
+			? Math.max( ...termDiscounts )
+			: 0;
+	} );
+
+	return termWiseMaxDiscount;
+}