@automattic/plans-grid-next 1.0.0

package/src/hooks/data-store/use-restructured-plan-features-for-comparison-grid.ts

@@ -0,0 +1,158 @@
+import {
+	applyTestFiltersToPlansList,
+	isMonthly,
+	isWooExpressPlan,
+	type FeatureList,
+	FEATURE_CUSTOM_DOMAIN,
+} from '@automattic/calypso-products';
+import { useMemo } from 'react';
+import getPlanFeaturesObject from '../../lib/get-plan-features-object';
+import usePlanFeaturesForGridPlans from './use-plan-features-for-grid-plans';
+import type {
+	TransformedFeatureObject,
+	PlanFeaturesForGridPlan,
+	PlansIntent,
+	GridPlan,
+} from '../../types';
+
+export type UseRestructuredPlanFeaturesForComparisonGrid = ( {
+	gridPlans,
+	allFeaturesList,
+	hasRedeemedDomainCredit,
+	intent,
+	showLegacyStorageFeature,
+	selectedFeature,
+}: {
+	gridPlans: Omit< GridPlan, 'features' >[];
+	allFeaturesList: FeatureList;
+	hasRedeemedDomainCredit?: boolean;
+	intent?: PlansIntent;
+	selectedFeature?: string | null;
+	showLegacyStorageFeature?: boolean;
+} ) => { [ planSlug: string ]: PlanFeaturesForGridPlan };
+
+const useRestructuredPlanFeaturesForComparisonGrid: UseRestructuredPlanFeaturesForComparisonGrid =
+	( {
+		gridPlans,
+		allFeaturesList,
+		hasRedeemedDomainCredit,
+		intent,
+		selectedFeature,
+		showLegacyStorageFeature,
+	} ) => {
+		const planFeaturesForGridPlans = usePlanFeaturesForGridPlans( {
+			gridPlans,
+			allFeaturesList,
+			intent,
+			selectedFeature,
+			showLegacyStorageFeature,
+		} );
+
+		return useMemo( () => {
+			let previousPlan = null;
+			const planFeatureMap: Record< string, PlanFeaturesForGridPlan > = {};
+
+			for ( const gridPlan of gridPlans ) {
+				const planSlug = gridPlan.planSlug;
+				const planConstantObj = applyTestFiltersToPlansList( planSlug, undefined );
+				const annualPlansOnlyFeatures = planConstantObj.getAnnualPlansOnlyFeatures?.();
+				const isMonthlyPlan = isMonthly( planSlug );
+
+				const wpcomFeatures = planConstantObj.get2023PlanComparisonFeatureOverride?.().length
+					? getPlanFeaturesObject(
+							allFeaturesList,
+							planConstantObj.get2023PlanComparisonFeatureOverride().slice()
+					  )
+					: getPlanFeaturesObject(
+							allFeaturesList,
+							planConstantObj.get2023PricingGridSignupWpcomFeatures?.().slice()
+					  );
+
+				const jetpackFeatures = planConstantObj.get2023PlanComparisonJetpackFeatureOverride?.()
+					.length
+					? getPlanFeaturesObject(
+							allFeaturesList,
+							planConstantObj.get2023PlanComparisonJetpackFeatureOverride().slice()
+					  )
+					: getPlanFeaturesObject(
+							allFeaturesList,
+							planConstantObj.get2023PricingGridSignupJetpackFeatures?.().slice()
+					  );
+
+				const wpcomFeaturesTransformed: TransformedFeatureObject[] | null | undefined =
+					annualPlansOnlyFeatures
+						? wpcomFeatures?.map( ( feature ) => {
+								const availableOnlyForAnnualPlans = annualPlansOnlyFeatures.includes(
+									feature.getSlug()
+								);
+
+								return {
+									...feature,
+									availableOnlyForAnnualPlans,
+									availableForCurrentPlan: ! isMonthlyPlan || ! availableOnlyForAnnualPlans,
+								};
+						  } )
+						: null;
+
+				const jetpackFeaturesTransformed: TransformedFeatureObject[] | null | undefined =
+					annualPlansOnlyFeatures
+						? jetpackFeatures?.map( ( feature ) => {
+								const availableOnlyForAnnualPlans = annualPlansOnlyFeatures.includes(
+									feature.getSlug()
+								);
+
+								return {
+									...feature,
+									availableOnlyForAnnualPlans,
+									availableForCurrentPlan: ! isMonthlyPlan || ! availableOnlyForAnnualPlans,
+								};
+						  } )
+						: null;
+
+				const featuresAvailable = isWooExpressPlan( planSlug )
+					? {
+							wpcomFeatures: wpcomFeaturesTransformed ?? [],
+							jetpackFeatures: [],
+					  }
+					: {
+							wpcomFeatures: wpcomFeaturesTransformed ?? [],
+							jetpackFeatures: jetpackFeaturesTransformed ?? [],
+					  };
+
+				const previousPlanFeatures = {
+					wpcomFeatures: previousPlan !== null ? planFeatureMap[ previousPlan ].wpcomFeatures : [],
+					jetpackFeatures:
+						previousPlan !== null ? planFeatureMap[ previousPlan ].jetpackFeatures : [],
+				};
+
+				planFeatureMap[ planSlug ] = {
+					wpcomFeatures: [
+						...featuresAvailable.wpcomFeatures,
+						...previousPlanFeatures.wpcomFeatures,
+					].filter( ( feature ) => {
+						// Remove the custom domain feature if custom domain has been redeemed or for Woo Express plans with an introductory offer.
+						if (
+							( ( 'plans-woocommerce' === intent && gridPlan.pricing.introOffer ) ||
+								hasRedeemedDomainCredit ) &&
+							FEATURE_CUSTOM_DOMAIN === feature.getSlug()
+						) {
+							return false;
+						}
+						return true;
+					} ),
+					jetpackFeatures: [
+						...featuresAvailable.jetpackFeatures,
+						...previousPlanFeatures.jetpackFeatures,
+					],
+					storageFeature: planFeaturesForGridPlans[ planSlug ].storageFeature,
+					comparisonGridFeatureLabels: planConstantObj.getPlanComparisonFeatureLabels?.(),
+				};
+
+				previousPlan = planSlug;
+			}
+
+			return planFeatureMap;
+		}, [ gridPlans, allFeaturesList, planFeaturesForGridPlans, intent, hasRedeemedDomainCredit ] );
+	};
+
+export default useRestructuredPlanFeaturesForComparisonGrid;

package/src/hooks/test/use-is-large-currency.ts

@@ -0,0 +1,69 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import useIsLargeCurrency from '../use-is-large-currency';
+
+jest.mock( '@wordpress/element', () => ( {
+	...jest.requireActual( '@wordpress/element' ),
+	useMemo: jest.fn().mockImplementation( ( fn ) => fn() ),
+} ) );
+
+describe( 'useIsLargeCurrency', () => {
+	afterAll( () => {
+		jest.clearAllMocks();
+	} );
+
+	const smallPrices = [ 0, 0, 100, 0, 2500, 0 ];
+	const largePrices = [ 0, 0, 100000, 0, 30000000, 20 ];
+
+	describe( 'Given add on prices', () => {
+		describe( 'when all display prices are below 7 digits', () => {
+			test( 'should not consider prices to be large large', () => {
+				expect(
+					useIsLargeCurrency( { prices: smallPrices, isAddOn: true, currencyCode: 'USD' } )
+				).toEqual( false );
+			} );
+		} );
+
+		describe( 'when some display prices are above 7 digits', () => {
+			test( 'should consider prices to be large', () => {
+				expect(
+					useIsLargeCurrency( { prices: largePrices, isAddOn: true, currencyCode: 'USD' } )
+				).toEqual( true );
+			} );
+		} );
+	} );
+
+	describe( 'Given plan prices', () => {
+		describe( 'when all display prices are below 6 digits', () => {
+			test( 'should not consider prices to be large', () => {
+				expect(
+					useIsLargeCurrency( { prices: smallPrices, isAddOn: false, currencyCode: 'USD' } )
+				).toEqual( false );
+			} );
+		} );
+
+		describe( 'when some display prices are above 6 digits', () => {
+			test( 'should consider prices to be large', () => {
+				expect(
+					useIsLargeCurrency( { prices: largePrices, isAddOn: false, currencyCode: 'USD' } )
+				).toEqual( true );
+			} );
+		} );
+
+		describe( 'when a pair of original and discounted prices are above 9 digits', () => {
+			test( 'should consider it large', () => {
+				const largeCombinedPlanPrices = [ 20000, 3000 ];
+
+				expect(
+					useIsLargeCurrency( {
+						prices: largeCombinedPlanPrices,
+						isAddOn: false,
+						currencyCode: 'USD',
+					} )
+				).toEqual( false );
+			} );
+		} );
+	} );
+} );

package/src/hooks/use-grid-size.ts

@@ -0,0 +1,46 @@
+import { useLayoutEffect, useState } from '@wordpress/element';
+import ResizeObserver from 'resize-observer-polyfill';
+
+interface Props {
+	containerRef: React.MutableRefObject< HTMLDivElement | null >;
+	/**
+	 * Labelled breakpoints a la "container query".
+	 * These are currently observed manually (i.e. we do not use container queries),
+	 * but they could be used in the future in a containment context.
+	 * The keys are the labels, the values are the minimum widths.
+	 */
+	containerBreakpoints: Map< string, number >;
+}
+
+/**
+ * useGridSize returns the current grid size based on the width of the container
+ * and the breakpoints passed through as props.
+ */
+export default function useGridSize( { containerRef, containerBreakpoints }: Props ) {
+	const [ gridSize, setGridSize ] = useState< string | null >( null );
+
+	useLayoutEffect( () => {
+		if ( ! containerRef.current ) {
+			return;
+		}
+
+		const observer = new ResizeObserver( ( [ entry ] ) => {
+			const { width } = entry.contentRect;
+
+			if ( width ) {
+				for ( const [ key, value ] of [ ...containerBreakpoints ].reverse() ) {
+					if ( width >= value ) {
+						setGridSize( key );
+						break;
+					}
+				}
+			}
+		} );
+
+		observer.observe( containerRef.current );
+
+		return () => observer.disconnect();
+	}, [ containerRef, containerBreakpoints ] );
+
+	return gridSize;
+}

package/src/hooks/use-highlight-adjacency-matrix.ts

@@ -0,0 +1,48 @@
+import { useMemo } from '@wordpress/element';
+import type { GridPlan } from '../types';
+import type { PlanSlug } from '@automattic/calypso-products';
+
+type HighlightAdjacencyMatrix = {
+	[ planSlug in PlanSlug ]: {
+		leftOfHighlight: boolean;
+		rightOfHighlight: boolean;
+		isOnlyHighlight?: boolean;
+	};
+};
+
+interface Props {
+	renderedGridPlans: GridPlan[];
+}
+
+const useHighlightAdjacencyMatrix = ( { renderedGridPlans }: Props ) => {
+	return useMemo( () => {
+		const adjacencyMatrix = {} as HighlightAdjacencyMatrix;
+		const highlightIndices = renderedGridPlans.reduce( ( acc, gridPlan, index ) => {
+			if ( gridPlan.highlightLabel ) {
+				acc.push( index );
+			}
+			return acc;
+		}, [] as number[] );
+
+		renderedGridPlans.forEach( ( { planSlug }, index ) => {
+			adjacencyMatrix[ planSlug ] = { leftOfHighlight: false, rightOfHighlight: false };
+
+			highlightIndices.forEach( ( highlightIndex ) => {
+				if ( highlightIndex === index - 1 ) {
+					adjacencyMatrix[ planSlug ].rightOfHighlight = true;
+				}
+				if ( highlightIndex === index + 1 ) {
+					adjacencyMatrix[ planSlug ].leftOfHighlight = true;
+				}
+			} );
+		} );
+
+		if ( highlightIndices.length === 1 ) {
+			adjacencyMatrix[ renderedGridPlans[ highlightIndices[ 0 ] ].planSlug ].isOnlyHighlight = true;
+		}
+
+		return adjacencyMatrix;
+	}, [ renderedGridPlans ] );
+};
+
+export default useHighlightAdjacencyMatrix;

package/src/hooks/use-is-large-currency.ts

@@ -0,0 +1,91 @@
+import { useMemo } from '@wordpress/element';
+import { formatCurrency } from 'i18n-calypso';
+const LARGE_ADD_ON_CURRENCY_CHAR_THRESHOLD = 7;
+const LARGE_CURRENCY_CHAR_THRESHOLD = 6;
+const LARGE_CURRENCY_COMBINED_CHAR_THRESHOLD = 9;
+
+interface Props {
+	prices?: number[];
+	isAddOn?: boolean;
+	currencyCode: string;
+	ignoreWhitespace?: boolean;
+}
+
+function useDisplayPrices( currencyCode: string, prices?: number[], ignoreWhitespace = false ) {
+	/**
+	 * Prices are represented in smallest units for a currency, and not as prices that
+	 * are actually displayed. Ex. $20 is the integer 2000, and not 20. To determine if
+	 * the display price is too long, we convert the integer to a display string.
+	 */
+
+	return useMemo(
+		() =>
+			prices?.map( ( price ) => {
+				const displayPrice = formatCurrency( price, currencyCode, {
+					stripZeros: true,
+					isSmallestUnit: true,
+				} );
+
+				return ignoreWhitespace ? displayPrice.replace( /\s/g, '' ) : displayPrice;
+			} ),
+		[ currencyCode, prices, ignoreWhitespace ]
+	);
+}
+
+function hasExceededPriceThreshold( displayPrices?: string[], isAddOn = false ) {
+	const threshold = isAddOn ? LARGE_ADD_ON_CURRENCY_CHAR_THRESHOLD : LARGE_CURRENCY_CHAR_THRESHOLD;
+	return !! displayPrices?.some( ( price ) => price.length > threshold );
+}
+
+/**
+ * Returns true if the combined length of the display prices exceeds the threshold.
+ * Checks the adjacent pairs in the displayPrices array,
+ * which correspnd to the original-price and discounted-price for each plan.
+ */
+function hasExceededCombinedPriceThreshold( displayPrices?: string[] ) {
+	if ( ! displayPrices || displayPrices.length < 2 ) {
+		return false;
+	}
+
+	for ( let i = 0; i < displayPrices.length - 1; i++ ) {
+		const originalPrice = displayPrices[ i ];
+		const discountedPrice = displayPrices[ i + 1 ];
+
+		if ( originalPrice.length + discountedPrice.length > LARGE_CURRENCY_COMBINED_CHAR_THRESHOLD ) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
+/**
+ * Hook that returns true if the string representation of any price (discounted/undiscounted)
+ * of any of the plan slugs exceeds 6 characters. For example, $4,000 would be 6 characters.
+ * Additionally, also returns true if the combined discounted / undiscounted prices exceed
+ * 9 characters. For example, $4,000 undiscounted and $30 discounted would be 9 characters.
+ * This is primarily used for lowering the font-size of "large" display prices.
+ */
+export default function useIsLargeCurrency( {
+	prices,
+	isAddOn = false,
+	currencyCode,
+	ignoreWhitespace = false,
+}: Props ) {
+	/**
+	 * Because this hook is primarily used for lowering font-sizes of "large" display prices,
+	 * this implementation is non-ideal. It assumes that each character in the display price,
+	 * including currency symbols, comma separators, decimal points, etc. are all the same width.
+	 *
+	 * For the time being, however, this is a good enough approximation and works with our existing
+	 * currencies. We'll need to update this in the near future, especially to prevent issues with
+	 * newly introduced currencies.
+	 *
+	 * https://github.com/Automattic/wp-calypso/pull/81537#discussion_r1323182287
+	 */
+	const displayPrices = useDisplayPrices( currencyCode, prices, ignoreWhitespace );
+	const exceedsPriceThreshold = hasExceededPriceThreshold( displayPrices, isAddOn );
+	const exceedsCombinedPriceThreshold = hasExceededCombinedPriceThreshold( displayPrices );
+
+	return isAddOn ? exceedsPriceThreshold : exceedsPriceThreshold || exceedsCombinedPriceThreshold;
+}

package/src/hooks/use-manage-tooltip-toggle.ts

@@ -0,0 +1,30 @@
+import { useState, useEffect, Dispatch, SetStateAction } from 'react';
+import { hasTouch } from '../lib/touch-detect';
+
+export function useManageTooltipToggle(): [ string, Dispatch< SetStateAction< string > > ] {
+	const [ activeTooltipId, setActiveTooltipId ] = useState( '' );
+	const isTouch = hasTouch();
+
+	useEffect( () => {
+		if ( ! isTouch ) {
+			return;
+		}
+
+		// Close all tooltips if the user touches anywhere outside a tooltip container.
+		// Since the plan logos are an SVG, we are checking the event target's parent classes to determine the tooltip container.
+		const closeAllTooltips = ( event: TouchEvent ) => {
+			const eventTarget = event.target as Element;
+			if ( ! eventTarget.closest( '.plans-2023-tooltip__hover-area-container' ) ) {
+				setActiveTooltipId( '' );
+			}
+		};
+
+		document.addEventListener( 'touchstart', closeAllTooltips );
+
+		return () => {
+			document.removeEventListener( 'touchstart', closeAllTooltips );
+		};
+	}, [ isTouch ] );
+
+	return [ activeTooltipId, setActiveTooltipId ];
+}

package/src/hooks/use-plan-pricing-info-from-grid-plans.ts

@@ -0,0 +1,36 @@
+import { useMemo } from '@wordpress/element';
+import type { GridPlan } from '../types';
+
+type PricingInfo = {
+	prices: number[];
+	currencyCode?: string;
+};
+
+export function usePlanPricingInfoFromGridPlans( {
+	gridPlans,
+	returnMonthly = true,
+}: {
+	gridPlans: GridPlan[];
+	returnMonthly?: boolean;
+} ) {
+	return useMemo(
+		() =>
+			gridPlans.reduce(
+				( acc: PricingInfo, gridPlan ) => {
+					const {
+						pricing: { originalPrice, discountedPrice, currencyCode },
+					} = gridPlan;
+
+					const originalPriceForTerm = originalPrice[ returnMonthly ? 'monthly' : 'full' ] || 0;
+					const discountedPriceForTerm = discountedPrice[ returnMonthly ? 'monthly' : 'full' ] || 0;
+
+					return {
+						prices: [ ...acc.prices, originalPriceForTerm, discountedPriceForTerm ],
+						currencyCode: currencyCode ?? acc.currencyCode,
+					};
+				},
+				{ prices: [], currencyCode: 'USD' }
+			),
+		[ gridPlans, returnMonthly ]
+	);
+}

package/src/index.tsx

@@ -0,0 +1,46 @@
+import ComparisonGrid from './components/comparison-grid';
+import FeaturesGrid from './components/features-grid';
+import PlanButton from './components/plan-button';
+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, { 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';
+
+/**
+ * Types
+ */
+export type * from './types';
+
+/**
+ * Components
+ */
+export { ComparisonGrid, FeaturesGrid, PlanTypeSelector, PlanButton, Plans2023Tooltip };
+
+/**
+ * Hooks/helpers
+ */
+export {
+	useManageTooltipToggle,
+	useGridPlans,
+	useGridPlansForFeaturesGrid,
+	useGridPlansForComparisonGrid,
+	useGridPlanForSpotlight,
+	usePlanBillingDescription,
+	usePlanFeaturesForGridPlans,
+	usePlansFromTypes,
+	usePlanTypesWithIntent,
+	useRestructuredPlanFeaturesForComparisonGrid,
+};
+
+/**
+ * Constants
+ */
+export { EFFECTIVE_TERMS_LIST };

package/src/lib/filter-unused-features-object.ts

@@ -0,0 +1,31 @@
+import type { GridPlan } from '../types';
+import type { FeatureObject } from '@automattic/calypso-products';
+
+/**
+ * Removes features that are not available in any of the visible grid plans.
+ */
+const filterUnusedFeaturesObject = (
+	visibleGridPlans: GridPlan[],
+	features: FeatureObject[]
+): FeatureObject[] => {
+	if ( ! visibleGridPlans || ! features ) {
+		return [];
+	}
+
+	// Get all unique feature slugs in all gridPlans.
+	const uniqueFeaturesAvailable = new Set(
+		visibleGridPlans
+			.map( ( gridPlan ) =>
+				[ ...gridPlan.features.wpcomFeatures, ...gridPlan.features.jetpackFeatures ].map(
+					( feature ) => feature.getSlug()
+				)
+			)
+			.flat()
+	);
+
+	return features.filter( ( feature ) => {
+		return uniqueFeaturesAvailable.has( feature.getSlug() );
+	} );
+};
+
+export default filterUnusedFeaturesObject;

package/src/lib/get-plan-features-object.ts

@@ -0,0 +1,12 @@
+import { FeatureList } from '@automattic/calypso-products';
+
+// TODO: Temporary until feature definitions are ported to calypso-products package
+const getPlanFeaturesObject = ( featuresList: FeatureList, planFeatures?: Array< string > ) => {
+	if ( ! planFeatures ) {
+		return [];
+	}
+
+	return planFeatures.map( ( featuresConst ) => featuresList[ featuresConst ] );
+};
+
+export default getPlanFeaturesObject;

package/src/lib/get-plan-pricing-info-from-grid-plans.ts

@@ -0,0 +1,31 @@
+import type { GridPlan } from '../types';
+
+type PricingInfo = {
+	prices: number[];
+	currencyCode?: string;
+};
+
+export function getPlanPricingInfoFromGridPlans( {
+	gridPlans,
+	returnMonthly = true,
+}: {
+	gridPlans: GridPlan[];
+	returnMonthly?: boolean;
+} ) {
+	return gridPlans.reduce(
+		( acc: PricingInfo, gridPlan ) => {
+			const {
+				pricing: { originalPrice, discountedPrice, currencyCode },
+			} = gridPlan;
+
+			const originalPriceForTerm = originalPrice[ returnMonthly ? 'monthly' : 'full' ] || 0;
+			const discountedPriceForTerm = discountedPrice[ returnMonthly ? 'monthly' : 'full' ] || 0;
+
+			return {
+				prices: [ ...acc.prices, originalPriceForTerm, discountedPriceForTerm ],
+				...( currencyCode && { currencyCode } ),
+			};
+		},
+		{ prices: [], currencyCode: 'USD' }
+	);
+}

package/src/lib/is-same-plan.ts

@@ -0,0 +1,8 @@
+import { PLAN_FREE, isFreePlan, type PlanSlug } from '@automattic/calypso-products';
+
+export function isSamePlan( currentSitePlanSlug: string, planSlug: PlanSlug ): boolean {
+	// Handles matching variants of the free plan, like PLAN_P2_FREE and PLAN_JETPACK_FREE
+	return currentSitePlanSlug === PLAN_FREE
+		? isFreePlan( planSlug )
+		: currentSitePlanSlug === planSlug;
+}

package/src/lib/sort-plan-properties.ts

@@ -0,0 +1,46 @@
+import { isFreePlan } from '@automattic/calypso-products';
+import { isPopularPlan } from '../hooks/data-store/is-popular-plan';
+import type { GridPlan } from '../types';
+
+export function sortPlans(
+	gridPlans: GridPlan[],
+	currentSitePlanProductSlug?: string | null,
+	isMobile?: boolean
+): GridPlan[] {
+	let firstPlanIndex = -1;
+
+	// Try to find the current paid plan in the plans list
+	if ( currentSitePlanProductSlug && ! isFreePlan( currentSitePlanProductSlug ) ) {
+		firstPlanIndex = gridPlans.findIndex( ( gridPlan ) => {
+			return gridPlan.planSlug === currentSitePlanProductSlug;
+		} );
+	}
+
+	if ( firstPlanIndex < 0 ) {
+		// Site is on a free plan or the current plan is not in the list. Try to find the popular plan.
+		firstPlanIndex = gridPlans.findIndex( ( { planSlug } ) => {
+			return isPopularPlan( planSlug );
+		} );
+		// If the popular plan exists, on mobile, it will be second plan for comparison.
+		if ( firstPlanIndex > 0 && isMobile ) {
+			firstPlanIndex = firstPlanIndex - 1;
+		}
+	}
+
+	if ( firstPlanIndex < 0 ) {
+		return gridPlans;
+	}
+
+	return [
+		// The first plan
+		gridPlans[ firstPlanIndex ],
+		// Rest of the plans in default order
+		...gridPlans.slice( firstPlanIndex + 1 ),
+		// Leftover plans (before the first plan) in descending order of value
+		...gridPlans.slice( 0, firstPlanIndex ).sort( ( planA, planB ) => {
+			return (
+				( planB?.pricing.originalPrice.full || 0 ) - ( planA?.pricing.originalPrice.full || 0 )
+			);
+		} ),
+	].filter( ( gridPlan ) => Boolean( gridPlan ) );
+}