@automattic/plans-grid-next 1.0.0 → 1.0.1

package/dist/esm/components/sticky-container.js

@@ -2,21 +2,81 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Global, css } from '@emotion/react';
 import styled from '@emotion/styled';
 import clsx from 'clsx';
-import { useRef, useState, useLayoutEffect } from 'react';
-const styles = ({ disabled, stickyOffset, zIndex, }) => disabled
+import { useRef, useState, useLayoutEffect, useEffect } from 'react';
+const styles = ({ disabled, stickyOffset, stickyPadding, zIndex, }) => disabled
     ? ''
     : css `
 				position: sticky;
-				top: ${stickyOffset + 'px'};
+				top: ${stickyOffset - stickyPadding + 'px'};
 				z-index: ${zIndex};
 		  `;
 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) {
     const { stickyOffset = 0, zIndex = 2, stickyClass = '', element = 'div', disabled = false, children, } = props;
     const stickyRef = useRef(null);
+    const [stickyParent, setStickyParent] = useState(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;
+        while (scrollParent) {
+            const style = getComputedStyle(scrollParent);
+            const overflowY = style.overflowY;
+            if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {
+                break;
+            }
+            scrollParent = scrollParent.parentElement;
+        }
+        const receiveScrollParent = (el) => {
+            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]) => {
+                    receiveScrollParent(parent.target);
+                });
+                observer.observe(scrollParent);
+                return () => {
+                    observer.disconnect();
+                };
+            }
+        }
+    }, []);
     /**
      * This effect sets the value of `isStuck` state when it detects that
      * the element is sticky.
@@ -45,6 +105,7 @@ export function StickyContainer(props) {
                 setIsStuck(entry.intersectionRatio < 1);
             }
         }, {
+            root: stickyParent,
             rootMargin: `-${stickyOffset + 1}px 0px 0px 0px`,
             threshold: [0, 1],
         });
@@ -54,7 +115,7 @@ export function StickyContainer(props) {
         return () => {
             observer.disconnect();
         };
-    }, [disabled, stickyOffset]);
+    }, [disabled, stickyParent, stickyOffset, stickyPadding]);
     const isStuckFinalState = !disabled && isStuck;
     return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: css `
 					/**
@@ -64,6 +125,6 @@ export function StickyContainer(props) {
 					.layout__content {
 						overflow: unset;
 					}
-				` }), _jsx(Container, { ...props, as: element, ref: stickyRef, stickyOffset: stickyOffset, disabled: disabled, className: clsx({ [stickyClass]: isStuckFinalState }), zIndex: zIndex, children: children(isStuckFinalState) })] }));
+				` }), _jsx(Container, { ...props, as: element, ref: stickyRef, stickyOffset: stickyOffset, stickyPadding: stickyPadding, disabled: disabled, className: clsx({ [stickyClass]: isStuckFinalState }), zIndex: zIndex, children: children(isStuckFinalState) })] }));
 }
 //# sourceMappingURL=sticky-container.js.map

package/dist/esm/components/sticky-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-container.js","sourceRoot":"","sources":["../../../src/components/sticky-container.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,EAAoB,QAAQ,EAAE,eAAe,EAAa,MAAM,OAAO,CAAC;AAqCvF,MAAM,MAAM,GAAG,CAAE,EAChB,QAAQ,EACR,YAAY,EACZ,MAAM,GAKN,EAAG,EAAE,CACL,QAAQ;IACP,CAAC,CAAC,EAAE;IACJ,CAAC,CAAC,GAAG,CAAA;;WAEK,YAAY,GAAG,IAAK;eAChB,MAAO;KAClB,CAAC;AAEN,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;GACxB,MAAO;CACV,CAAC;AAEF,MAAM,UAAU,eAAe,CAAE,KAAY;IAC5C,MAAM,EACL,YAAY,GAAG,CAAC,EAChB,MAAM,GAAG,CAAC,EACV,WAAW,GAAG,EAAE,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,QAAQ,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,MAAM,CAAE,IAAI,CAAE,CAAC;IACjC,MAAM,CAAE,OAAO,EAAE,UAAU,CAAE,GAAG,QAAQ,CAAE,KAAK,CAAE,CAAC;IAElD;;;;;OAKG;IACH,eAAe,CAAE,GAAG,EAAE;QACrB,IAAK,OAAO,oBAAoB,KAAK,WAAW,EAAG,CAAC;YACnD,OAAO;QACR,CAAC;QACD,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACxC,CAAE,CAAE,KAAK,CAAE,EAAG,EAAE;YACf,IAAK,QAAQ,EAAG,CAAC;gBAChB,OAAO;YACR,CAAC;YACD,IAAK,KAAK,CAAC,iBAAiB,KAAK,CAAC,EAAG,CAAC;gBACrC,6BAA6B;gBAC7B,UAAU,CAAE,KAAK,CAAE,CAAC;YACrB,CAAC;iBAAM,IACN,KAAK,CAAC,UAAU,EAAE,MAAM,KAAK,SAAS;gBACtC,KAAK,CAAC,kBAAkB,CAAC,MAAM,IAAI,KAAK,CAAC,UAAU,EAAE,MAAM,EAC1D,CAAC;gBACF,qEAAqE;gBACrE,UAAU,CAAE,KAAK,CAAE,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACP,sCAAsC;gBACtC,UAAU,CAAE,KAAK,CAAC,iBAAiB,GAAG,CAAC,CAAE,CAAC;YAC3C,CAAC;QACF,CAAC,EACD;YACC,UAAU,EAAE,IAAK,YAAY,GAAG,CAAE,gBAAgB;YAClD,SAAS,EAAE,CAAE,CAAC,EAAE,CAAC,CAAE;SACnB,CACD,CAAC;QAEF,IAAK,SAAS,CAAC,OAAO,EAAG,CAAC;YACzB,QAAQ,CAAC,OAAO,CAAE,SAAS,CAAC,OAAO,CAAE,CAAC;QACvC,CAAC;QAED,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,UAAU,EAAE,CAAC;QACvB,CAAC,CAAC;IACH,CAAC,EAAE,CAAE,QAAQ,EAAE,YAAY,CAAE,CAAE,CAAC;IAEhC,MAAM,iBAAiB,GAAG,CAAE,QAAQ,IAAI,OAAO,CAAC;IAChD,OAAO,CACN,8BACC,KAAC,MAAM,IACN,MAAM,EAAG,GAAG,CAAA;;;;;;;;KAQX,GACA,EACF,KAAC,SAAS,OACJ,KAAK,EACV,EAAE,EAAG,OAAO,EACZ,GAAG,EAAG,SAAS,EACf,YAAY,EAAG,YAAY,EAC3B,QAAQ,EAAG,QAAQ,EACnB,SAAS,EAAG,IAAI,CAAE,EAAE,CAAE,WAAW,CAAE,EAAE,iBAAiB,EAAE,CAAE,EAC1D,MAAM,EAAG,MAAM,YAEb,QAAQ,CAAE,iBAAiB,CAAE,GACpB,IACV,CACH,CAAC;AACH,CAAC"}
+{"version":3,"file":"sticky-container.js","sourceRoot":"","sources":["../../../src/components/sticky-container.tsx"],"names":[],"mappings":"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"}

package/dist/esm/hooks/data-store/use-grid-plans-for-features-grid.js

@@ -1,7 +1,7 @@
 import { useMemo } from '@wordpress/element';
 import useGridPlans from './use-grid-plans';
 import usePlanFeaturesForGridPlans from './use-plan-features-for-grid-plans';
-const useGridPlansForFeaturesGrid = ({ allFeaturesList, coupon, eligibleForFreeHostingTrial, hasRedeemedDomainCredit, hiddenPlans, intent, isDisplayingPlansNeededForFeature, isInSignup, isSubdomainNotGenerated, selectedFeature, selectedPlan, showLegacyStorageFeature, siteId, term, useCheckPlanAvailabilityForPurchase, useFreeTrialPlanSlugs, highlightLabelOverrides, isDomainOnlySite, reflectStorageSelectionInPlanPrices, }) => {
+const useGridPlansForFeaturesGrid = ({ allFeaturesList, coupon, eligibleForFreeHostingTrial, hasRedeemedDomainCredit, hiddenPlans, hideCurrentPlan, intent, isDisplayingPlansNeededForFeature, isInSignup, isSubdomainNotGenerated, selectedFeature, selectedPlan, showLegacyStorageFeature, siteId, term, useCheckPlanAvailabilityForPurchase, useFreeTrialPlanSlugs, highlightLabelOverrides, isDomainOnlySite, reflectStorageSelectionInPlanPrices, }) => {
     const gridPlans = useGridPlans({
         allFeaturesList,
         coupon,
@@ -36,18 +36,21 @@ const useGridPlansForFeaturesGrid = ({ allFeaturesList, coupon, eligibleForFreeH
             return null;
         }
         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],
+                },
+            ];
         }, []);
-    }, [gridPlans, planFeaturesForFeaturesGrid]);
+    }, [gridPlans, planFeaturesForFeaturesGrid, hideCurrentPlan]);
 };
 export default useGridPlansForFeaturesGrid;
 //# sourceMappingURL=use-grid-plans-for-features-grid.js.map

package/dist/esm/hooks/data-store/use-grid-plans-for-features-grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-grid-plans-for-features-grid.js","sourceRoot":"","sources":["../../../../src/hooks/data-store/use-grid-plans-for-features-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,2BAA2B,MAAM,oCAAoC,CAAC;AAI7E,MAAM,2BAA2B,GAAG,CAAE,EACrC,eAAe,EACf,MAAM,EACN,2BAA2B,EAC3B,uBAAuB,EACvB,WAAW,EACX,MAAM,EACN,iCAAiC,EACjC,UAAU,EACV,uBAAuB,EACvB,eAAe,EACf,YAAY,EACZ,wBAAwB,EACxB,MAAM,EACN,IAAI,EACJ,mCAAmC,EACnC,qBAAqB,EACrB,uBAAuB,EACvB,gBAAgB,EAChB,mCAAmC,GACf,EAAsB,EAAE;IAC5C,MAAM,SAAS,GAAG,YAAY,CAAE;QAC/B,eAAe;QACf,MAAM;QACN,2BAA2B;QAC3B,uBAAuB;QACvB,WAAW;QACX,MAAM;QACN,iCAAiC;QACjC,uBAAuB;QACvB,eAAe;QACf,YAAY;QACZ,wBAAwB;QACxB,MAAM;QACN,IAAI;QACJ,mCAAmC;QACnC,qBAAqB;QACrB,uBAAuB;QACvB,gBAAgB;QAChB,mCAAmC;KACnC,CAAE,CAAC;IAEJ,MAAM,2BAA2B,GAAG,2BAA2B,CAAE;QAChE,eAAe;QACf,SAAS,EAAE,SAAS,IAAI,EAAE;QAC1B,uBAAuB;QACvB,MAAM;QACN,UAAU;QACV,eAAe;QACf,wBAAwB;KACxB,CAAE,CAAC;IAEJ,OAAO,OAAO,CAAE,GAAG,EAAE;QACpB,IAAK,CAAE,SAAS,EAAG,CAAC;YACnB,OAAO,IAAI,CAAC;QACb,CAAC;QAED,OAAO,SAAS,CAAC,MAAM,CAAE,CAAE,GAAG,EAAE,QAAQ,EAAG,EAAE;YAC5C,IAAK,QAAQ,CAAC,SAAS,EAAG,CAAC;gBAC1B,OAAO;oBACN,GAAG,GAAG;oBACN;wBACC,GAAG,QAAQ;wBACX,QAAQ,EAAE,2BAA2B,CAAE,QAAQ,CAAC,QAAQ,CAAE;qBAC1D;iBACD,CAAC;YACH,CAAC;YACD,OAAO,GAAG,CAAC;QACZ,CAAC,EAAE,EAAgB,CAAE,CAAC;IACvB,CAAC,EAAE,CAAE,SAAS,EAAE,2BAA2B,CAAE,CAAE,CAAC;AACjD,CAAC,CAAC;AAEF,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"use-grid-plans-for-features-grid.js","sourceRoot":"","sources":["../../../../src/hooks/data-store/use-grid-plans-for-features-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,2BAA2B,MAAM,oCAAoC,CAAC;AAI7E,MAAM,2BAA2B,GAAG,CAAE,EACrC,eAAe,EACf,MAAM,EACN,2BAA2B,EAC3B,uBAAuB,EACvB,WAAW,EACX,eAAe,EACf,MAAM,EACN,iCAAiC,EACjC,UAAU,EACV,uBAAuB,EACvB,eAAe,EACf,YAAY,EACZ,wBAAwB,EACxB,MAAM,EACN,IAAI,EACJ,mCAAmC,EACnC,qBAAqB,EACrB,uBAAuB,EACvB,gBAAgB,EAChB,mCAAmC,GACf,EAAsB,EAAE;IAC5C,MAAM,SAAS,GAAG,YAAY,CAAE;QAC/B,eAAe;QACf,MAAM;QACN,2BAA2B;QAC3B,uBAAuB;QACvB,WAAW;QACX,MAAM;QACN,iCAAiC;QACjC,uBAAuB;QACvB,eAAe;QACf,YAAY;QACZ,wBAAwB;QACxB,MAAM;QACN,IAAI;QACJ,mCAAmC;QACnC,qBAAqB;QACrB,uBAAuB;QACvB,gBAAgB;QAChB,mCAAmC;KACnC,CAAE,CAAC;IAEJ,MAAM,2BAA2B,GAAG,2BAA2B,CAAE;QAChE,eAAe;QACf,SAAS,EAAE,SAAS,IAAI,EAAE;QAC1B,uBAAuB;QACvB,MAAM;QACN,UAAU;QACV,eAAe;QACf,wBAAwB;KACxB,CAAE,CAAC;IAEJ,OAAO,OAAO,CAAE,GAAG,EAAE;QACpB,IAAK,CAAE,SAAS,EAAG,CAAC;YACnB,OAAO,IAAI,CAAC;QACb,CAAC;QAED,OAAO,SAAS,CAAC,MAAM,CAAE,CAAE,GAAG,EAAE,QAAQ,EAAG,EAAE;YAC5C,IAAK,CAAE,QAAQ,CAAC,SAAS,EAAG,CAAC;gBAC5B,OAAO,GAAG,CAAC;YACZ,CAAC;YACD,IAAK,eAAe,IAAI,QAAQ,CAAC,OAAO,EAAG,CAAC;gBAC3C,OAAO,GAAG,CAAC;YACZ,CAAC;YACD,OAAO;gBACN,GAAG,GAAG;gBACN;oBACC,GAAG,QAAQ;oBACX,QAAQ,EAAE,2BAA2B,CAAE,QAAQ,CAAC,QAAQ,CAAE;iBAC1D;aACD,CAAC;QACH,CAAC,EAAE,EAAgB,CAAE,CAAC;IACvB,CAAC,EAAE,CAAE,SAAS,EAAE,2BAA2B,EAAE,eAAe,CAAE,CAAE,CAAC;AAClE,CAAC,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/dist/esm/hooks/data-store/use-plan-billing-description.js

@@ -32,7 +32,7 @@ export default function usePlanBillingDescription({ siteId, planSlug, pricing, i
             : yearlyVariantPricing.originalPrice?.monthly;
         if (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)) /
                         originalPrice.monthly),

package/dist/esm/hooks/use-grid-size.js

@@ -1,5 +1,4 @@
 import { useLayoutEffect, useState } from '@wordpress/element';
-import ResizeObserver from 'resize-observer-polyfill';
 /**
  * useGridSize returns the current grid size based on the width of the container
  * and the breakpoints passed through as props.

package/dist/esm/hooks/use-grid-size.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-grid-size.js","sourceRoot":"","sources":["../../../src/hooks/use-grid-size.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,cAAc,MAAM,0BAA0B,CAAC;AAatD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EAAE,YAAY,EAAE,oBAAoB,EAAS;IACjF,MAAM,CAAE,QAAQ,EAAE,WAAW,CAAE,GAAG,QAAQ,CAAmB,IAAI,CAAE,CAAC;IAEpE,eAAe,CAAE,GAAG,EAAE;QACrB,IAAK,CAAE,YAAY,CAAC,OAAO,EAAG,CAAC;YAC9B,OAAO;QACR,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAE,CAAE,CAAE,KAAK,CAAE,EAAG,EAAE;YACpD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC;YAEpC,IAAK,KAAK,EAAG,CAAC;gBACb,KAAM,MAAM,CAAE,GAAG,EAAE,KAAK,CAAE,IAAI,CAAE,GAAG,oBAAoB,CAAE,CAAC,OAAO,EAAE,EAAG,CAAC;oBACtE,IAAK,KAAK,IAAI,KAAK,EAAG,CAAC;wBACtB,WAAW,CAAE,GAAG,CAAE,CAAC;wBACnB,MAAM;oBACP,CAAC;gBACF,CAAC;YACF,CAAC;QACF,CAAC,CAAE,CAAC;QAEJ,QAAQ,CAAC,OAAO,CAAE,YAAY,CAAC,OAAO,CAAE,CAAC;QAEzC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACpC,CAAC,EAAE,CAAE,YAAY,EAAE,oBAAoB,CAAE,CAAE,CAAC;IAE5C,OAAO,QAAQ,CAAC;AACjB,CAAC"}
+{"version":3,"file":"use-grid-size.js","sourceRoot":"","sources":["../../../src/hooks/use-grid-size.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAa/D;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EAAE,YAAY,EAAE,oBAAoB,EAAS;IACjF,MAAM,CAAE,QAAQ,EAAE,WAAW,CAAE,GAAG,QAAQ,CAAmB,IAAI,CAAE,CAAC;IAEpE,eAAe,CAAE,GAAG,EAAE;QACrB,IAAK,CAAE,YAAY,CAAC,OAAO,EAAG,CAAC;YAC9B,OAAO;QACR,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAE,CAAE,CAAE,KAAK,CAAE,EAAG,EAAE;YACpD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC;YAEpC,IAAK,KAAK,EAAG,CAAC;gBACb,KAAM,MAAM,CAAE,GAAG,EAAE,KAAK,CAAE,IAAI,CAAE,GAAG,oBAAoB,CAAE,CAAC,OAAO,EAAE,EAAG,CAAC;oBACtE,IAAK,KAAK,IAAI,KAAK,EAAG,CAAC;wBACtB,WAAW,CAAE,GAAG,CAAE,CAAC;wBACnB,MAAM;oBACP,CAAC;gBACF,CAAC;YACF,CAAC;QACF,CAAC,CAAE,CAAC;QAEJ,QAAQ,CAAC,OAAO,CAAE,YAAY,CAAC,OAAO,CAAE,CAAC;QAEzC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACpC,CAAC,EAAE,CAAE,YAAY,EAAE,oBAAoB,CAAE,CAAE,CAAC;IAE5C,OAAO,QAAQ,CAAC;AACjB,CAAC"}

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

@@ -1,35 +1,23 @@
-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;
-        });
+export function sortPlans(gridPlans, currentSitePlanProductSlug) {
+    // If we don't have plans to sort, return empty array
+    if (!gridPlans.length) {
+        return [];
     }
-    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 we have a current site plan and we're on mobile, sort to prioritize it
+    if (currentSitePlanProductSlug) {
+        return [...gridPlans].sort((planA, planB) => {
+            // If planA is the current plan, it should come first (-1 moves it up)
+            if (planA.planSlug === currentSitePlanProductSlug) {
+                return -1;
+            }
+            // If planB is the current plan, it should come first (1 moves planA down)
+            if (planB.planSlug === currentSitePlanProductSlug) {
+                return 1;
+            }
+            // Otherwise, maintain original order
+            return 0;
         });
-        // 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));
+    return [...gridPlans];
 }
 //# sourceMappingURL=sort-plan-properties.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"sort-plan-properties.js","sourceRoot":"","sources":["../../../src/lib/sort-plan-properties.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,SAAS,CACxB,SAAqB,EACrB,0BAA0C;IAE1C,qDAAqD;IACrD,IAAK,CAAE,SAAS,CAAC,MAAM,EAAG,CAAC;QAC1B,OAAO,EAAE,CAAC;IACX,CAAC;IACD,4EAA4E;IAC5E,IAAK,0BAA0B,EAAG,CAAC;QAClC,OAAO,CAAE,GAAG,SAAS,CAAE,CAAC,IAAI,CAAE,CAAE,KAAK,EAAE,KAAK,EAAG,EAAE;YAChD,sEAAsE;YACtE,IAAK,KAAK,CAAC,QAAQ,KAAK,0BAA0B,EAAG,CAAC;gBACrD,OAAO,CAAC,CAAC,CAAC;YACX,CAAC;YACD,0EAA0E;YAC1E,IAAK,KAAK,CAAC,QAAQ,KAAK,0BAA0B,EAAG,CAAC;gBACrD,OAAO,CAAC,CAAC;YACV,CAAC;YACD,qCAAqC;YACrC,OAAO,CAAC,CAAC;QACV,CAAC,CAAE,CAAC;IACL,CAAC;IACD,OAAO,CAAE,GAAG,SAAS,CAAE,CAAC;AACzB,CAAC"}