@automattic/plans-grid-next 1.0.0

package/dist/cjs/components/shared/storage/hooks/use-purchased-storage-add-on.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const calypso_products_1 = require("@automattic/calypso-products");
+const data_stores_1 = require("@automattic/data-stores");
+const element_1 = require("@wordpress/element");
+const grid_context_1 = require("../../../../grid-context");
+// TODO
+// how can we eliminate the need of mapping like this?
+// ideally, there shouldn't be additional add on slug, but only the consistent product slug being used
+// throughout the backend and the frontend.
+const quantityToAddOnSlug = (quantity) => {
+    switch (quantity) {
+        case 50:
+            return data_stores_1.AddOns.ADD_ON_50GB_STORAGE;
+        case 100:
+            return data_stores_1.AddOns.ADD_ON_100GB_STORAGE;
+        case 150:
+            return data_stores_1.AddOns.ADD_ON_150GB_STORAGE;
+        case 200:
+            return data_stores_1.AddOns.ADD_ON_200GB_STORAGE;
+        case 250:
+            return data_stores_1.AddOns.ADD_ON_250GB_STORAGE;
+        case 300:
+            return data_stores_1.AddOns.ADD_ON_300GB_STORAGE;
+        case 350:
+            return data_stores_1.AddOns.ADD_ON_350GB_STORAGE;
+        default:
+            return null;
+    }
+};
+function usePurchasedStorageAddOn() {
+    const { siteId } = (0, grid_context_1.usePlansGridContext)();
+    const spaceUpgradesPurchased = data_stores_1.Purchases.useSitePurchasesByProductSlug({
+        siteId,
+        productSlug: calypso_products_1.PRODUCT_1GB_SPACE,
+    });
+    const storageAddOns = data_stores_1.AddOns.useStorageAddOns({ siteId });
+    return (0, element_1.useMemo)(() => {
+        if (!spaceUpgradesPurchased) {
+            return null;
+        }
+        // storage add-on is a tiered product, so we can assume it contains only one product entry here.
+        const purchasedAddOnSlug = quantityToAddOnSlug(Object.values(spaceUpgradesPurchased)[0].purchaseRenewalQuantity);
+        const purchasedAddOn = storageAddOns
+            .filter((addOn) => addOn !== null) // TODO: fix the related hooks so this won't be needed
+            .find(({ addOnSlug }) => purchasedAddOnSlug === addOnSlug);
+        return purchasedAddOn ?? null;
+    }, [spaceUpgradesPurchased, storageAddOns]);
+}
+exports.default = usePurchasedStorageAddOn;
+//# sourceMappingURL=use-purchased-storage-add-on.js.map

package/dist/cjs/components/shared/storage/hooks/use-purchased-storage-add-on.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-purchased-storage-add-on.js","sourceRoot":"","sources":["../../../../../../src/components/shared/storage/hooks/use-purchased-storage-add-on.ts"],"names":[],"mappings":";;AAAA,mEAAiE;AACjE,yDAA4D;AAC5D,gDAA6C;AAC7C,2DAA+D;AAE/D,OAAO;AACP,sDAAsD;AACtD,sGAAsG;AACtG,2CAA2C;AAC3C,MAAM,mBAAmB,GAAG,CAAE,QAAgB,EAAmC,EAAE;IAClF,QAAS,QAAQ,EAAG,CAAC;QACpB,KAAK,EAAE;YACN,OAAO,oBAAM,CAAC,mBAAmB,CAAC;QACnC,KAAK,GAAG;YACP,OAAO,oBAAM,CAAC,oBAAoB,CAAC;QACpC,KAAK,GAAG;YACP,OAAO,oBAAM,CAAC,oBAAoB,CAAC;QACpC,KAAK,GAAG;YACP,OAAO,oBAAM,CAAC,oBAAoB,CAAC;QACpC,KAAK,GAAG;YACP,OAAO,oBAAM,CAAC,oBAAoB,CAAC;QACpC,KAAK,GAAG;YACP,OAAO,oBAAM,CAAC,oBAAoB,CAAC;QACpC,KAAK,GAAG;YACP,OAAO,oBAAM,CAAC,oBAAoB,CAAC;QACpC;YACC,OAAO,IAAI,CAAC;IACd,CAAC;AACF,CAAC,CAAC;AAEF,SAAwB,wBAAwB;IAC/C,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,kCAAmB,GAAE,CAAC;IACzC,MAAM,sBAAsB,GAAG,uBAAS,CAAC,6BAA6B,CAAE;QACvE,MAAM;QACN,WAAW,EAAE,oCAAiB;KAC9B,CAAE,CAAC;IACJ,MAAM,aAAa,GAAG,oBAAM,CAAC,gBAAgB,CAAE,EAAE,MAAM,EAAE,CAAE,CAAC;IAE5D,OAAO,IAAA,iBAAO,EAAE,GAAG,EAAE;QACpB,IAAK,CAAE,sBAAsB,EAAG,CAAC;YAChC,OAAO,IAAI,CAAC;QACb,CAAC;QAED,gGAAgG;QAChG,MAAM,kBAAkB,GAAG,mBAAmB,CAC7C,MAAM,CAAC,MAAM,CAAE,sBAAsB,CAAE,CAAE,CAAC,CAAE,CAAC,uBAAuB,CACpE,CAAC;QACF,MAAM,cAAc,GAAG,aAAa;aAClC,MAAM,CAAE,CAAE,KAAK,EAA8B,EAAE,CAAC,KAAK,KAAK,IAAI,CAAE,CAAC,sDAAsD;aACvH,IAAI,CAAE,CAAE,EAAE,SAAS,EAAE,EAAG,EAAE,CAAC,kBAAkB,KAAK,SAAS,CAAE,CAAC;QAChE,OAAO,cAAc,IAAI,IAAI,CAAC;IAC/B,CAAC,EAAE,CAAE,sBAAsB,EAAE,aAAa,CAAE,CAAE,CAAC;AAChD,CAAC;AAtBD,2CAsBC"}

package/dist/cjs/components/shared/storage/hooks/use-storage-string.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const i18n_calypso_1 = require("i18n-calypso");
+function useStorageString(quantity) {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    return translate('%(quantity)d GB', {
+        args: {
+            quantity,
+        },
+    });
+}
+exports.default = useStorageString;
+//# sourceMappingURL=use-storage-string.js.map

package/dist/cjs/components/shared/storage/hooks/use-storage-string.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-storage-string.js","sourceRoot":"","sources":["../../../../../../src/components/shared/storage/hooks/use-storage-string.ts"],"names":[],"mappings":";;AAAA,+CAA4C;AAE5C,SAAS,gBAAgB,CAAE,QAAgB;IAC1C,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IAEjC,OAAO,SAAS,CAAE,iBAAiB,EAAE;QACpC,IAAI,EAAE;YACL,QAAQ;SACR;KACD,CAAE,CAAC;AACL,CAAC;AAED,kBAAe,gBAAgB,CAAC"}

package/dist/cjs/components/shared/storage/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlanStorage = exports.useDefaultStorageOption = void 0;
+/**
+ * Hooks
+ */
+var use_default_storage_option_1 = require("./hooks/use-default-storage-option");
+Object.defineProperty(exports, "useDefaultStorageOption", { enumerable: true, get: function () { return __importDefault(use_default_storage_option_1).default; } });
+/**
+ * Components
+ */
+var plan_storage_1 = require("./components/plan-storage");
+Object.defineProperty(exports, "PlanStorage", { enumerable: true, get: function () { return __importDefault(plan_storage_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/shared/storage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/shared/storage/index.ts"],"names":[],"mappings":";;;AAAA;;GAEG;AACH,iFAAwF;AAA/E,sJAAA,OAAO,OAA2B;AAE3C;;GAEG;AACH,0DAAmE;AAA1D,4HAAA,OAAO,OAAe"}

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

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StickyContainer = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const react_2 = require("react");
+const styles = ({ disabled, stickyOffset, zIndex, }) => disabled
+    ? ''
+    : (0, react_1.css) `
+				position: sticky;
+				top: ${stickyOffset + 'px'};
+				z-index: ${zIndex};
+		  `;
+const Container = styled_1.default.div `
+	${styles}
+`;
+function StickyContainer(props) {
+    const { stickyOffset = 0, zIndex = 2, stickyClass = '', element = 'div', disabled = false, children, } = props;
+    const stickyRef = (0, react_2.useRef)(null);
+    const [isStuck, setIsStuck] = (0, react_2.useState)(false);
+    /**
+     * This effect sets the value of `isStuck` state when it detects that
+     * the element is sticky.
+     * The top property of the root margin is set at -1px (plus optional offset).
+     * So when position:sticky takes effect, the intersection ratio will always be ~99%
+     */
+    (0, react_2.useLayoutEffect)(() => {
+        if (typeof IntersectionObserver === 'undefined') {
+            return;
+        }
+        const observer = new IntersectionObserver(([entry]) => {
+            if (disabled) {
+                return;
+            }
+            if (entry.intersectionRatio === 0) {
+                // The element is out of view
+                setIsStuck(false);
+            }
+            else if (entry.rootBounds?.bottom !== undefined &&
+                entry.boundingClientRect.bottom >= entry.rootBounds?.bottom) {
+                // The element is intersecting, but it is at the bottom of the screen
+                setIsStuck(false);
+            }
+            else {
+                // The element is in the "stuck" state
+                setIsStuck(entry.intersectionRatio < 1);
+            }
+        }, {
+            rootMargin: `-${stickyOffset + 1}px 0px 0px 0px`,
+            threshold: [0, 1],
+        });
+        if (stickyRef.current) {
+            observer.observe(stickyRef.current);
+        }
+        return () => {
+            observer.disconnect();
+        };
+    }, [disabled, stickyOffset]);
+    const isStuckFinalState = !disabled && isStuck;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Global, { styles: (0, react_1.css) `
+					/**
+				 * .layout__content has overflow set to hidden, which prevents position: sticky from working.
+				 * Instead of removing it globally, this CSS only unsets the property when this component is rendered.
+				 */
+					.layout__content {
+						overflow: unset;
+					}
+				` }), (0, jsx_runtime_1.jsx)(Container, { ...props, as: element, ref: stickyRef, stickyOffset: stickyOffset, disabled: disabled, className: (0, clsx_1.default)({ [stickyClass]: isStuckFinalState }), zIndex: zIndex, children: children(isStuckFinalState) })] }));
+}
+exports.StickyContainer = StickyContainer;
+//# sourceMappingURL=sticky-container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sticky-container.js","sourceRoot":"","sources":["../../../src/components/sticky-container.tsx"],"names":[],"mappings":";;;;;AAAA,0CAA6C;AAC7C,qEAAqC;AACrC,wDAAwB;AACxB,iCAAuF;AAqCvF,MAAM,MAAM,GAAG,CAAE,EAChB,QAAQ,EACR,YAAY,EACZ,MAAM,GAKN,EAAG,EAAE,CACL,QAAQ;IACP,CAAC,CAAC,EAAE;IACJ,CAAC,CAAC,IAAA,WAAG,EAAA;;WAEK,YAAY,GAAG,IAAK;eAChB,MAAO;KAClB,CAAC;AAEN,MAAM,SAAS,GAAG,gBAAM,CAAC,GAAG,CAAA;GACxB,MAAO;CACV,CAAC;AAEF,SAAgB,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,IAAA,cAAM,EAAE,IAAI,CAAE,CAAC;IACjC,MAAM,CAAE,OAAO,EAAE,UAAU,CAAE,GAAG,IAAA,gBAAQ,EAAE,KAAK,CAAE,CAAC;IAElD;;;;;OAKG;IACH,IAAA,uBAAe,EAAE,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,6DACC,uBAAC,cAAM,IACN,MAAM,EAAG,IAAA,WAAG,EAAA;;;;;;;;KAQX,GACA,EACF,uBAAC,SAAS,OACJ,KAAK,EACV,EAAE,EAAG,OAAO,EACZ,GAAG,EAAG,SAAS,EACf,YAAY,EAAG,YAAY,EAC3B,QAAQ,EAAG,QAAQ,EACnB,SAAS,EAAG,IAAA,cAAI,EAAE,EAAE,CAAE,WAAW,CAAE,EAAE,iBAAiB,EAAE,CAAE,EAC1D,MAAM,EAAG,MAAM,YAEb,QAAQ,CAAE,iBAAiB,CAAE,GACpB,IACV,CACH,CAAC;AACH,CAAC;AApFD,0CAoFC"}

package/dist/cjs/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EFFECTIVE_TERMS_LIST = void 0;
+const calypso_products_1 = require("@automattic/calypso-products");
+exports.EFFECTIVE_TERMS_LIST = [
+    calypso_products_1.TERM_MONTHLY,
+    calypso_products_1.TERM_ANNUALLY,
+    calypso_products_1.TERM_BIENNIALLY,
+    calypso_products_1.TERM_TRIENNIALLY,
+];
+//# sourceMappingURL=constants.js.map

package/dist/cjs/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":";;;AAAA,mEAKsC;AAEzB,QAAA,oBAAoB,GAAY;IAC5C,+BAAY;IACZ,gCAAa;IACb,kCAAe;IACf,mCAAgB;CAChB,CAAC"}

package/dist/cjs/css-mixins.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.plansGridMediumLarge = void 0;
+const react_1 = require("@emotion/react");
+const plansGridMediumLarge = (styles) => (0, react_1.css) `
+	.plans-grid-next.is-smedium &,
+	.plans-grid-next.is-medium &,
+	.plans-grid-next.is-large &,
+	.plans-grid-next.is-xlarge & {
+		${styles}
+	}
+`;
+exports.plansGridMediumLarge = plansGridMediumLarge;
+//# sourceMappingURL=css-mixins.js.map

package/dist/cjs/css-mixins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-mixins.js","sourceRoot":"","sources":["../../src/css-mixins.tsx"],"names":[],"mappings":";;;AAAA,0CAAqC;AAG9B,MAAM,oBAAoB,GAAG,CAAE,MAAwB,EAAG,EAAE,CAAC,IAAA,WAAG,EAAA;;;;;IAKlE,MAAO;;CAEX,CAAC;AAPW,QAAA,oBAAoB,wBAO/B"}