@automattic/plans-grid-next 1.0.0 → 1.0.2

package/src/components/plan-button/style.scss

@@ -6,6 +6,7 @@
 	padding: 10px 12px;
 	border: unset;
 	text-align: center;
+	text-wrap: balance;
 	width: 100%;
 	color: var(--color-text-inverted);
 
@@ -20,7 +21,7 @@
 			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-wordpress-blue-50);
 		}
 
-		&:hover {
+		&:hover:not([disabled]) {
 			background-color: var(--studio-wordpress-blue-60);
 		}
 
@@ -33,7 +34,7 @@
 			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-wordpress-blue-60);
 		}
 
-		&:hover {
+		&:hover:not([disabled]) {
 			background-color: var(--studio-wordpress-blue-70);
 		}
 	}
@@ -45,30 +46,30 @@
 			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-wordpress-blue-70);
 		}
 
-		&:hover {
+		&:hover:not([disabled]) {
 			background-color: var(--studio-wordpress-blue-80);
 		}
 	}
 
 	&.is-business-plan {
-		background-color: var(--studio-woocommerce-purple-50);
+		background-color: var(--studio-woocommerce-purple-60);
 
 		&:focus {
-			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-50);
+			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-60);
 		}
 
-		&:hover {
+		&:hover:not([disabled]) {
 			background-color: var(--studio-woocommerce-purple-70);
 		}
 
 		+ .button.is-borderless {
 			background: transparent;
 			font-size: $font-body-small;
-			color: var(--studio-woocommerce-purple-50);
+			color: var(--studio-woocommerce-purple-60);
 			text-decoration: none;
 
 			&:focus {
-				box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-50);
+				box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-60);
 			}
 		}
 	}
@@ -101,14 +102,14 @@
 	}
 
 	&.is-ecommerce-plan {
-		background-color: var(--studio-woocommerce-purple-70);
+		background-color: var(--studio-woocommerce-purple-40);
 
 		&:focus {
-			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-70);
+			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-40);
 		}
 
 		&:hover {
-			background-color: var(--studio-woocommerce-purple-80);
+			background-color: var(--studio-woocommerce-purple-50);
 		}
 	}
 

package/src/components/plan-type-selector/style.scss

@@ -162,7 +162,9 @@
 				display: none;
 			}
 		}
-		.components-custom-select-control__label {
+
+		.components-custom-select-control__label,
+		.components-base-control__label {
 			display: none;
 		}
 	}

package/src/components/shared/billing-timeframe/index.tsx

@@ -5,7 +5,7 @@ import {
 	isFreePlan,
 } from '@automattic/calypso-products';
 import styled from '@emotion/styled';
-import { useTranslate, formatCurrency } from 'i18n-calypso';
+import { useTranslate, formatCurrency, fixMe } from 'i18n-calypso';
 import { usePlansGridContext } from '../../../grid-context';
 import usePlanBillingDescription from '../../../hooks/data-store/use-plan-billing-description';
 import type { GridPlan } from '../../../types';
@@ -78,14 +78,22 @@ const BillingTimeframe = ( { showRefundPeriod, planSlug }: Props ) => {
 	}
 
 	if ( isWpcomEnterpriseGridPlan( planSlug ) ) {
-		const price = formatCurrency( 25000, 'USD' );
+		const price = formatCurrency( 25000, 'USD', { stripZeros: true } );
 
 		return (
-			<div className="plans-grid-next__billing-timeframe-vip-price">
-				{ translate( 'Starts at {{b}}%(price)s{{/b}} yearly', {
-					args: { price },
-					components: { b: <b /> },
-					comment: 'Translators: the price is in US dollars for all users (US$25,000)',
+			<div>
+				{ fixMe( {
+					text: 'Starts at {{b}}%(price)s{{/b}} annually',
+					newCopy: translate( 'Starts at {{b}}%(price)s{{/b}} annually', {
+						args: { price },
+						components: { b: <b /> },
+						comment: 'Translators: the price is in US dollars for all users (US$25,000)',
+					} ),
+					oldCopy: translate( 'Starts at {{b}}%(price)s{{/b}} yearly', {
+						args: { price },
+						components: { b: <b /> },
+						comment: 'Translators: the price is in US dollars for all users (US$25,000)',
+					} ),
 				} ) }
 			</div>
 		);

package/src/components/shared/header-price/style.scss

@@ -1,3 +1,5 @@
+@import "@automattic/typography/styles/variables";
+
 .plans-grid-next-header-price {
 	padding: 0 20px;
 	margin: 0 0 4px 0;
@@ -76,9 +78,9 @@
 }
 
 .plans-grid-next-header-price__badge {
-	background-color: var(--studio-green-0);
+	background-color: var(--studio-green-5);
 	border-radius: 4px;
-	color: var(--studio-green-40);
+	color: var(--studio-green-80);
 	display: inline-block;
 	font-size: 0.75rem;
 	font-weight: 500;

package/src/components/sticky-container.tsx

@@ -1,7 +1,7 @@
 import { Global, css } from '@emotion/react';
 import styled from '@emotion/styled';
 import clsx from 'clsx';
-import { useRef, type ElementType, useState, useLayoutEffect, ReactNode } from 'react';
+import { useRef, type ElementType, useState, useLayoutEffect, ReactNode, useEffect } from 'react';
 
 type Props = {
 	/**
@@ -41,17 +41,19 @@ type Props = {
 const styles = ( {
 	disabled,
 	stickyOffset,
+	stickyPadding,
 	zIndex,
 }: {
 	disabled: boolean;
 	stickyOffset: number;
+	stickyPadding: number;
 	zIndex: number;
 } ) =>
 	disabled
 		? ''
 		: css`
 				position: sticky;
-				top: ${ stickyOffset + 'px' };
+				top: ${ stickyOffset - stickyPadding + 'px' };
 				z-index: ${ zIndex };
 		  `;
 
@@ -59,6 +61,28 @@ const Container = styled.div`
 	${ styles }
 `;
 
+/**
+ * Renders a sticky container.
+ *
+ * The following is an illustration on how the container's top property is calculated.
+ *
+ *                                    +~~~~~~~~ stickyParent (where the container scrolls)
+ * stickyOffset  ~~~~~~~~~~+          |
+ * (e.g. masterbar)        |          |
+ *                         v          v
+ *                  +------#-----------------+
+ *                  |      #        |<~~~~~~~+~~~~~ stickyPadding
+ *                  | +----#--------------+  |
+ *                  | |    #   @          |<~+~~~~~ stickyParent's content area
+ *                  | |    #   @          |  |
+ *                  | |    #   @ <~~~~~~~~+~~+~~~~~ the container's top
+ *                  | |    #   @          |  |      (= stickyOffset - stickyPadding)
+ *                  | |  =============    |  |
+ *                  | |     ^             |  |
+ *                  | |     |             |  |
+ *                  | |     +~~~~~~~~~~~~~+~~+~~~~~ the container
+ *                  | |                   |  |
+ */
 export function StickyContainer( props: Props ) {
 	const {
 		stickyOffset = 0,
@@ -70,8 +94,53 @@ export function StickyContainer( props: Props ) {
 	} = props;
 
 	const stickyRef = useRef( null );
+	const [ stickyParent, setStickyParent ] = useState< HTMLElement | null >( null );
+	const [ stickyPadding, setStickyPadding ] = useState( 0 );
 	const [ isStuck, setIsStuck ] = useState( false );
 
+	/**
+	 * Calculate the first scrollable parent and its padding-top.
+	 */
+	useEffect( () => {
+		if ( ! stickyRef.current || typeof getComputedStyle === 'undefined' ) {
+			return;
+		}
+
+		let scrollParent = stickyRef.current as HTMLElement | null;
+		while ( scrollParent ) {
+			const style = getComputedStyle( scrollParent );
+			const overflowY = style.overflowY;
+			if ( overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay' ) {
+				break;
+			}
+			scrollParent = scrollParent.parentElement;
+		}
+
+		const receiveScrollParent = ( el: HTMLElement ) => {
+			const styles = getComputedStyle( el );
+			const paddingTop = parseFloat( styles.paddingTop );
+			setStickyParent( scrollParent );
+			setStickyPadding( paddingTop );
+		};
+
+		if ( scrollParent ) {
+			scrollParent.style.position = 'relative';
+			receiveScrollParent( scrollParent );
+
+			if ( typeof ResizeObserver !== 'undefined' ) {
+				const observer = new ResizeObserver(
+					( [ parent ]: Parameters< ResizeObserverCallback >[ 0 ] ) => {
+						receiveScrollParent( parent.target as HTMLElement );
+					}
+				);
+				observer.observe( scrollParent );
+				return () => {
+					observer.disconnect();
+				};
+			}
+		}
+	}, [] );
+
 	/**
 	 * This effect sets the value of `isStuck` state when it detects that
 	 * the element is sticky.
@@ -102,6 +171,7 @@ export function StickyContainer( props: Props ) {
 				}
 			},
 			{
+				root: stickyParent,
 				rootMargin: `-${ stickyOffset + 1 }px 0px 0px 0px`,
 				threshold: [ 0, 1 ],
 			}
@@ -114,7 +184,7 @@ export function StickyContainer( props: Props ) {
 		return () => {
 			observer.disconnect();
 		};
-	}, [ disabled, stickyOffset ] );
+	}, [ disabled, stickyParent, stickyOffset, stickyPadding ] );
 
 	const isStuckFinalState = ! disabled && isStuck;
 	return (
@@ -135,6 +205,7 @@ export function StickyContainer( props: Props ) {
 				as={ element }
 				ref={ stickyRef }
 				stickyOffset={ stickyOffset }
+				stickyPadding={ stickyPadding }
 				disabled={ disabled }
 				className={ clsx( { [ stickyClass ]: isStuckFinalState } ) }
 				zIndex={ zIndex }

package/src/components/test/billing-timeframe.tsx

@@ -49,7 +49,7 @@ describe( 'BillingTimeframe', () => {
 		jest.clearAllMocks();
 	} );
 
-	test( `should show savings with yearly when plan is monthly`, () => {
+	test( 'should show savings with yearly when plan is monthly', () => {
 		const planMonthlyPricing = {
 			currencyCode: 'USD',
 			originalPrice: { full: 120, monthly: 10 },
@@ -309,7 +309,7 @@ describe( 'BillingTimeframe', () => {
 		expect( getByText( /Refundable within 7 days. No questions asked./ ) ).toBeInTheDocument();
 	} );
 
-	test( `refund period can't be shown for free plan`, () => {
+	test( "refund period can't be shown for free plan", () => {
 		const pricing = {
 			currencyCode: 'USD',
 			originalPrice: { full: 0, monthly: 0 },

package/src/hooks/data-store/types.ts

@@ -10,6 +10,7 @@ export interface UseGridPlansParams {
 	eligibleForFreeHostingTrial?: boolean;
 	hasRedeemedDomainCredit?: boolean;
 	hiddenPlans?: HiddenPlans;
+	hideCurrentPlan?: boolean;
 	intent?: PlansIntent;
 	isDisplayingPlansNeededForFeature?: boolean;
 	isInSignup?: boolean;

package/src/hooks/data-store/use-grid-plans-for-features-grid.ts

@@ -10,6 +10,7 @@ const useGridPlansForFeaturesGrid = ( {
 	eligibleForFreeHostingTrial,
 	hasRedeemedDomainCredit,
 	hiddenPlans,
+	hideCurrentPlan,
 	intent,
 	isDisplayingPlansNeededForFeature,
 	isInSignup,
@@ -62,18 +63,21 @@ const useGridPlansForFeaturesGrid = ( {
 		}
 
 		return gridPlans.reduce( ( acc, gridPlan ) => {
-			if ( gridPlan.isVisible ) {
-				return [
-					...acc,
-					{
-						...gridPlan,
-						features: planFeaturesForFeaturesGrid[ gridPlan.planSlug ],
-					},
-				];
+			if ( ! gridPlan.isVisible ) {
+				return acc;
 			}
-			return acc;
+			if ( hideCurrentPlan && gridPlan.current ) {
+				return acc;
+			}
+			return [
+				...acc,
+				{
+					...gridPlan,
+					features: planFeaturesForFeaturesGrid[ gridPlan.planSlug ],
+				},
+			];
 		}, [] as GridPlan[] );
-	}, [ gridPlans, planFeaturesForFeaturesGrid ] );
+	}, [ gridPlans, planFeaturesForFeaturesGrid, hideCurrentPlan ] );
 };
 
 export default useGridPlansForFeaturesGrid;

package/src/hooks/data-store/use-plan-billing-description.tsx

@@ -73,7 +73,7 @@ export default function usePlanBillingDescription( {
 			yearlyVariantMaybeDiscountedPrice &&
 			yearlyVariantMaybeDiscountedPrice < originalPrice.monthly
 		) {
-			return translate( `Save %(discountRate)s%% by paying annually`, {
+			return translate( 'Save %(discountRate)s%% by paying annually', {
 				args: {
 					discountRate: Math.floor(
 						( 100 * ( originalPrice.monthly - yearlyVariantMaybeDiscountedPrice ) ) /

package/src/hooks/data-store/use-plan-billing-period.tsx

@@ -0,0 +1,28 @@
+import {
+	TERMS_LIST,
+	TERM_ANNUALLY,
+	TERM_BIENNIALLY,
+	TERM_MONTHLY,
+	TERM_TRIENNIALLY,
+} from '@automattic/calypso-products';
+import { EFFECTIVE_TERMS_LIST } from '../../constants';
+import type { SupportedUrlFriendlyTermType } from '../../types';
+
+const usePlanBillingPeriod = ( {
+	intervalType,
+	defaultValue,
+}: {
+	intervalType: SupportedUrlFriendlyTermType;
+	defaultValue?: ( typeof TERMS_LIST )[ number ];
+} ) => {
+	const plans: Record< SupportedUrlFriendlyTermType, ( typeof EFFECTIVE_TERMS_LIST )[ number ] > = {
+		monthly: TERM_MONTHLY,
+		yearly: TERM_ANNUALLY,
+		'2yearly': TERM_BIENNIALLY,
+		'3yearly': TERM_TRIENNIALLY,
+	} as const;
+
+	return plans[ intervalType ] || defaultValue || TERM_ANNUALLY;
+};
+
+export default usePlanBillingPeriod;

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

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useState } from '@wordpress/element';
-import ResizeObserver from 'resize-observer-polyfill';
+import { GridSize } from '../types';
 
 interface Props {
 	containerRef: React.MutableRefObject< HTMLDivElement | null >;
@@ -9,7 +9,7 @@ interface Props {
 	 * 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 >;
+	containerBreakpoints: Map< GridSize, number >;
 }
 
 /**
@@ -17,7 +17,7 @@ interface Props {
  * and the breakpoints passed through as props.
  */
 export default function useGridSize( { containerRef, containerBreakpoints }: Props ) {
-	const [ gridSize, setGridSize ] = useState< string | null >( null );
+	const [ gridSize, setGridSize ] = useState< GridSize | null >( null );
 
 	useLayoutEffect( () => {
 		if ( ! containerRef.current ) {

package/src/index.tsx

@@ -9,6 +9,7 @@ import useGridPlans, { usePlanTypesWithIntent } from './hooks/data-store/use-gri
 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 usePlanBillingPeriod from './hooks/data-store/use-plan-billing-period';
 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';
@@ -33,6 +34,7 @@ export {
 	useGridPlansForFeaturesGrid,
 	useGridPlansForComparisonGrid,
 	useGridPlanForSpotlight,
+	usePlanBillingPeriod,
 	usePlanBillingDescription,
 	usePlanFeaturesForGridPlans,
 	usePlansFromTypes,

package/src/types.ts

@@ -51,7 +51,7 @@ export interface GridPlan {
  * Grid Component Types:
  ***********************/
 
-export type GridSize = 'small' | 'medium' | 'large';
+export type GridSize = 'small' | 'smedium' | 'medium' | 'large' | 'xlarge';
 
 export type PlansIntent =
 	| 'plans-affiliate'
@@ -104,8 +104,9 @@ export interface CommonGridProps {
 	siteId?: number | null;
 	isInSignup: boolean;
 	isInAdmin: boolean;
+	isInSiteDashboard: boolean;
 	onStorageAddOnClick?: ( addOnSlug: AddOns.StorageAddOnSlug ) => void;
-	currentSitePlanSlug?: string | null;
+	currentSitePlanSlug?: PlanSlug | null;
 	hideUnavailableFeatures?: boolean; // used to hide features that are not available, instead of strike-through as explained in #76206
 	planActionOverrides?: PlanActionOverrides;
 	// Value of the `?feature=` query param, so we can highlight a given feature and hide plans without it.
@@ -116,7 +117,7 @@ export interface CommonGridProps {
 	// only used for comparison grid
 	planTypeSelectorProps?: PlanTypeSelectorProps;
 	gridContainerRef?: React.MutableRefObject< HTMLDivElement | null >;
-	gridSize?: string;
+	gridSize?: GridSize;
 }
 
 export interface FeaturesGridProps extends CommonGridProps {
@@ -133,7 +134,7 @@ export interface FeaturesGridProps extends CommonGridProps {
 export interface ComparisonGridProps extends CommonGridProps {
 	// Value of the `?plan=` query param, so we can highlight a given plan.
 	selectedPlan?: string;
-	intervalType: string;
+	intervalType: SupportedUrlFriendlyTermType;
 }
 
 export type UseActionCallback = ( {

package/dist/cjs/lib/sort-plan-properties.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.sortPlans = void 0;
-const calypso_products_1 = require("@automattic/calypso-products");
-const is_popular_plan_1 = require("../hooks/data-store/is-popular-plan");
-function sortPlans(gridPlans, currentSitePlanProductSlug, isMobile) {
-    let firstPlanIndex = -1;
-    // Try to find the current paid plan in the plans list
-    if (currentSitePlanProductSlug && !(0, calypso_products_1.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 (0, is_popular_plan_1.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));
-}
-exports.sortPlans = sortPlans;
-//# sourceMappingURL=sort-plan-properties.js.map

package/dist/cjs/lib/sort-plan-properties.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sort-plan-properties.js","sourceRoot":"","sources":["../../../src/lib/sort-plan-properties.ts"],"names":[],"mappings":";;;AAAA,mEAA0D;AAC1D,yEAAoE;AAGpE,SAAgB,SAAS,CACxB,SAAqB,EACrB,0BAA0C,EAC1C,QAAkB;IAElB,IAAI,cAAc,GAAG,CAAC,CAAC,CAAC;IAExB,sDAAsD;IACtD,IAAK,0BAA0B,IAAI,CAAE,IAAA,6BAAU,EAAE,0BAA0B,CAAE,EAAG,CAAC;QAChF,cAAc,GAAG,SAAS,CAAC,SAAS,CAAE,CAAE,QAAQ,EAAG,EAAE;YACpD,OAAO,QAAQ,CAAC,QAAQ,KAAK,0BAA0B,CAAC;QACzD,CAAC,CAAE,CAAC;IACL,CAAC;IAED,IAAK,cAAc,GAAG,CAAC,EAAG,CAAC;QAC1B,+FAA+F;QAC/F,cAAc,GAAG,SAAS,CAAC,SAAS,CAAE,CAAE,EAAE,QAAQ,EAAE,EAAG,EAAE;YACxD,OAAO,IAAA,+BAAa,EAAE,QAAQ,CAAE,CAAC;QAClC,CAAC,CAAE,CAAC;QACJ,gFAAgF;QAChF,IAAK,cAAc,GAAG,CAAC,IAAI,QAAQ,EAAG,CAAC;YACtC,cAAc,GAAG,cAAc,GAAG,CAAC,CAAC;QACrC,CAAC;IACF,CAAC;IAED,IAAK,cAAc,GAAG,CAAC,EAAG,CAAC;QAC1B,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,OAAO;QACN,iBAAiB;QACjB,SAAS,CAAE,cAAc,CAAE;QAC3B,qCAAqC;QACrC,GAAG,SAAS,CAAC,KAAK,CAAE,cAAc,GAAG,CAAC,CAAE;QACxC,sEAAsE;QACtE,GAAG,SAAS,CAAC,KAAK,CAAE,CAAC,EAAE,cAAc,CAAE,CAAC,IAAI,CAAE,CAAE,KAAK,EAAE,KAAK,EAAG,EAAE;YAChE,OAAO,CACN,CAAE,KAAK,EAAE,OAAO,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAE,GAAG,CAAE,KAAK,EAAE,OAAO,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAE,CACvF,CAAC;QACH,CAAC,CAAE;KACH,CAAC,MAAM,CAAE,CAAE,QAAQ,EAAG,EAAE,CAAC,OAAO,CAAE,QAAQ,CAAE,CAAE,CAAC;AACjD,CAAC;AAzCD,8BAyCC"}

package/dist/esm/lib/sort-plan-properties.js

@@ -1,35 +0,0 @@
-import { isFreePlan } from '@automattic/calypso-products';
-import { isPopularPlan } from '../hooks/data-store/is-popular-plan';
-export function sortPlans(gridPlans, currentSitePlanProductSlug, isMobile) {
-    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));
-}
-//# sourceMappingURL=sort-plan-properties.js.map

package/dist/esm/lib/sort-plan-properties.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sort-plan-properties.js","sourceRoot":"","sources":["../../../src/lib/sort-plan-properties.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAGpE,MAAM,UAAU,SAAS,CACxB,SAAqB,EACrB,0BAA0C,EAC1C,QAAkB;IAElB,IAAI,cAAc,GAAG,CAAC,CAAC,CAAC;IAExB,sDAAsD;IACtD,IAAK,0BAA0B,IAAI,CAAE,UAAU,CAAE,0BAA0B,CAAE,EAAG,CAAC;QAChF,cAAc,GAAG,SAAS,CAAC,SAAS,CAAE,CAAE,QAAQ,EAAG,EAAE;YACpD,OAAO,QAAQ,CAAC,QAAQ,KAAK,0BAA0B,CAAC;QACzD,CAAC,CAAE,CAAC;IACL,CAAC;IAED,IAAK,cAAc,GAAG,CAAC,EAAG,CAAC;QAC1B,+FAA+F;QAC/F,cAAc,GAAG,SAAS,CAAC,SAAS,CAAE,CAAE,EAAE,QAAQ,EAAE,EAAG,EAAE;YACxD,OAAO,aAAa,CAAE,QAAQ,CAAE,CAAC;QAClC,CAAC,CAAE,CAAC;QACJ,gFAAgF;QAChF,IAAK,cAAc,GAAG,CAAC,IAAI,QAAQ,EAAG,CAAC;YACtC,cAAc,GAAG,cAAc,GAAG,CAAC,CAAC;QACrC,CAAC;IACF,CAAC;IAED,IAAK,cAAc,GAAG,CAAC,EAAG,CAAC;QAC1B,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,OAAO;QACN,iBAAiB;QACjB,SAAS,CAAE,cAAc,CAAE;QAC3B,qCAAqC;QACrC,GAAG,SAAS,CAAC,KAAK,CAAE,cAAc,GAAG,CAAC,CAAE;QACxC,sEAAsE;QACtE,GAAG,SAAS,CAAC,KAAK,CAAE,CAAC,EAAE,cAAc,CAAE,CAAC,IAAI,CAAE,CAAE,KAAK,EAAE,KAAK,EAAG,EAAE;YAChE,OAAO,CACN,CAAE,KAAK,EAAE,OAAO,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAE,GAAG,CAAE,KAAK,EAAE,OAAO,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAE,CACvF,CAAC;QACH,CAAC,CAAE;KACH,CAAC,MAAM,CAAE,CAAE,QAAQ,EAAG,EAAE,CAAC,OAAO,CAAE,QAAQ,CAAE,CAAE,CAAC;AACjD,CAAC"}

package/dist/types/lib/sort-plan-properties.d.ts

@@ -1,3 +0,0 @@
-import type { GridPlan } from '../types';
-export declare function sortPlans(gridPlans: GridPlan[], currentSitePlanProductSlug?: string | null, isMobile?: boolean): GridPlan[];
-//# sourceMappingURL=sort-plan-properties.d.ts.map

package/dist/types/lib/sort-plan-properties.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sort-plan-properties.d.ts","sourceRoot":"","sources":["../../../src/lib/sort-plan-properties.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzC,wBAAgB,SAAS,CACxB,SAAS,EAAE,QAAQ,EAAE,EACrB,0BAA0B,CAAC,EAAE,MAAM,GAAG,IAAI,EAC1C,QAAQ,CAAC,EAAE,OAAO,GAChB,QAAQ,EAAE,CAqCZ"}

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

@@ -1,46 +0,0 @@
-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 ) );
-}