@automattic/plans-grid-next 1.0.0

package/dist/cjs/components/shared/billing-timeframe/index.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const calypso_products_1 = require("@automattic/calypso-products");
+const styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
+const i18n_calypso_1 = require("i18n-calypso");
+const grid_context_1 = require("../../../grid-context");
+const use_plan_billing_description_1 = tslib_1.__importDefault(require("../../../hooks/data-store/use-plan-billing-description"));
+const DiscountPromotion = styled_1.default.div `
+	text-transform: uppercase;
+	font-weight: 600;
+	color: #306e27;
+	font-size: $font-body-extra-small;
+	margin-top: 6px;
+`;
+const RefundNotice = ({ planSlug, showRefundPeriod, billingPeriod }) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    if (!showRefundPeriod || (0, calypso_products_1.isFreePlan)(planSlug)) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), translate('Refundable within %(dayCount)s days. No questions asked.', {
+                args: {
+                    dayCount: billingPeriod === 31 ? 7 : 14,
+                },
+            })] }));
+};
+const BillingTimeframe = ({ showRefundPeriod, planSlug }) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    const { helpers, gridPlansIndex, coupon, siteId } = (0, grid_context_1.usePlansGridContext)();
+    const { isMonthlyPlan, billingTimeframe, pricing } = gridPlansIndex[planSlug];
+    const { introOffer, billingPeriod } = pricing;
+    const planBillingDescription = (0, use_plan_billing_description_1.default)({
+        siteId,
+        planSlug,
+        pricing,
+        isMonthlyPlan,
+        coupon,
+        useCheckPlanAvailabilityForPurchase: helpers?.useCheckPlanAvailabilityForPurchase,
+    });
+    const description = planBillingDescription || billingTimeframe;
+    if ((0, calypso_products_1.isWooExpressPlan)(planSlug) &&
+        isMonthlyPlan &&
+        (!introOffer || introOffer.isOfferComplete)) {
+        return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: billingTimeframe }), (0, jsx_runtime_1.jsx)(DiscountPromotion, { children: planBillingDescription })] }));
+    }
+    if ((0, calypso_products_1.isWpcomEnterpriseGridPlan)(planSlug)) {
+        const price = (0, i18n_calypso_1.formatCurrency)(25000, 'USD');
+        return ((0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next__billing-timeframe-vip-price", children: translate('Starts at {{b}}%(price)s{{/b}} yearly', {
+                args: { price },
+                components: { b: (0, jsx_runtime_1.jsx)("b", {}) },
+                comment: 'Translators: the price is in US dollars for all users (US$25,000)',
+            }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [description, (0, jsx_runtime_1.jsx)(RefundNotice, { showRefundPeriod: showRefundPeriod, planSlug: planSlug, billingPeriod: billingPeriod })] }));
+};
+exports.default = BillingTimeframe;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/shared/billing-timeframe/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/shared/billing-timeframe/index.tsx"],"names":[],"mappings":";;;;AAAA,mEAKsC;AACtC,qEAAqC;AACrC,+CAA4D;AAC5D,wDAA4D;AAC5D,kIAA+F;AAG/F,MAAM,iBAAiB,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;CAMnC,CAAC;AAQF,MAAM,YAAY,GAAG,CAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,aAAa,EAAqB,EAAG,EAAE;IAC3F,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IAEjC,IAAK,CAAE,gBAAgB,IAAI,IAAA,6BAAU,EAAE,QAAQ,CAAE,EAAG,CAAC;QACpD,OAAO,IAAI,CAAC;IACb,CAAC;IAED,OAAO,CACN,6DACC,gCAAM,EACJ,SAAS,CAAE,0DAA0D,EAAE;gBACxE,IAAI,EAAE;oBACL,QAAQ,EAAE,aAAa,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;iBACvC;aACD,CAAE,IACD,CACH,CAAC;AACH,CAAC,CAAC;AAOF,MAAM,gBAAgB,GAAG,CAAE,EAAE,gBAAgB,EAAE,QAAQ,EAAS,EAAG,EAAE;IACpE,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IACjC,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,kCAAmB,GAAE,CAAC;IAC1E,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IAEhF,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,OAAO,CAAC;IAC9C,MAAM,sBAAsB,GAAG,IAAA,sCAAyB,EAAE;QACzD,MAAM;QACN,QAAQ;QACR,OAAO;QACP,aAAa;QACb,MAAM;QACN,mCAAmC,EAAE,OAAO,EAAE,mCAAmC;KACjF,CAAE,CAAC;IACJ,MAAM,WAAW,GAAG,sBAAsB,IAAI,gBAAgB,CAAC;IAE/D,IACC,IAAA,mCAAgB,EAAE,QAAQ,CAAE;QAC5B,aAAa;QACb,CAAE,CAAE,UAAU,IAAI,UAAU,CAAC,eAAe,CAAE,EAC7C,CAAC;QACF,OAAO,CACN,4CACC,0CAAO,gBAAgB,GAAQ,EAC/B,uBAAC,iBAAiB,cAAG,sBAAsB,GAAsB,IAC5D,CACN,CAAC;IACH,CAAC;IAED,IAAK,IAAA,4CAAyB,EAAE,QAAQ,CAAE,EAAG,CAAC;QAC7C,MAAM,KAAK,GAAG,IAAA,6BAAc,EAAE,KAAK,EAAE,KAAK,CAAE,CAAC;QAE7C,OAAO,CACN,gCAAK,SAAS,EAAC,8CAA8C,YAC1D,SAAS,CAAE,uCAAuC,EAAE;gBACrD,IAAI,EAAE,EAAE,KAAK,EAAE;gBACf,UAAU,EAAE,EAAE,CAAC,EAAE,+BAAK,EAAE;gBACxB,OAAO,EAAE,mEAAmE;aAC5E,CAAE,GACE,CACN,CAAC;IACH,CAAC;IAED,OAAO,CACN,4CACG,WAAW,EACb,uBAAC,YAAY,IACZ,gBAAgB,EAAG,gBAAgB,EACnC,QAAQ,EAAG,QAAQ,EACnB,aAAa,EAAG,aAAa,GAC5B,IACG,CACN,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,gBAAgB,CAAC"}

package/dist/cjs/components/shared/header-price/header-price-context.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHeaderPriceContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_1 = require("@wordpress/element");
+const HeaderPriceContext = (0, element_1.createContext)({});
+const HeaderPriceContextProvider = ({ children }) => {
+    const [isAnyPlanPriceDiscounted, setIsAnyPlanPriceDiscounted] = (0, element_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)(HeaderPriceContext.Provider, { value: { isAnyPlanPriceDiscounted, setIsAnyPlanPriceDiscounted }, children: children }));
+};
+const useHeaderPriceContext = () => (0, element_1.useContext)(HeaderPriceContext);
+exports.useHeaderPriceContext = useHeaderPriceContext;
+exports.default = HeaderPriceContextProvider;
+//# sourceMappingURL=header-price-context.js.map

package/dist/cjs/components/shared/header-price/header-price-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-price-context.js","sourceRoot":"","sources":["../../../../../src/components/shared/header-price/header-price-context.tsx"],"names":[],"mappings":";;;;AAAA,gDAAyE;AAOzE,MAAM,kBAAkB,GAAG,IAAA,uBAAa,EAAwB,EAAwB,CAAE,CAAC;AAE3F,MAAM,0BAA0B,GAAG,CAAE,EAAE,QAAQ,EAAiC,EAAG,EAAE;IACpF,MAAM,CAAE,wBAAwB,EAAE,2BAA2B,CAAE,GAAG,IAAA,kBAAQ,EAAE,KAAK,CAAE,CAAC;IAEpF,OAAO,CACN,uBAAC,kBAAkB,CAAC,QAAQ,IAC3B,KAAK,EAAG,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,YAE/D,QAAQ,GACmB,CAC9B,CAAC;AACH,CAAC,CAAC;AAEK,MAAM,qBAAqB,GAAG,GAAuB,EAAE,CAAC,IAAA,oBAAU,EAAE,kBAAkB,CAAE,CAAC;AAAnF,QAAA,qBAAqB,yBAA8D;AAEhG,kBAAe,0BAA0B,CAAC"}

package/dist/cjs/components/shared/header-price/index.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const calypso_products_1 = require("@automattic/calypso-products");
+const components_1 = require("@automattic/components");
+const data_stores_1 = require("@automattic/data-stores");
+const element_1 = require("@wordpress/element");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const i18n_calypso_1 = require("i18n-calypso");
+const grid_context_1 = require("../../../grid-context");
+const use_is_large_currency_1 = tslib_1.__importDefault(require("../../../hooks/use-is-large-currency"));
+const use_plan_pricing_info_from_grid_plans_1 = require("../../../hooks/use-plan-pricing-info-from-grid-plans");
+const header_price_context_1 = require("./header-price-context");
+require("./style.scss");
+/**
+ * Returns the term variant plan slug for savings calculation.
+ * This currently resolves to the monthly plan slug for annual/biennial/triennial plans.
+ */
+const useTermVariantPlanSlugForSavings = ({ planSlug, billingPeriod, }) => {
+    // If the billing period is yearly or above, we return the monthly variant's plan slug
+    if (billingPeriod && 365 <= billingPeriod) {
+        return (0, calypso_products_1.getPlanSlugForTermVariant)(planSlug, calypso_products_1.TERM_MONTHLY);
+    }
+    return null;
+};
+const HeaderPrice = ({ planSlug, visibleGridPlans }) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    const { gridPlansIndex, enableTermSavingsPriceDisplay, reflectStorageSelectionInPlanPrices, siteId, coupon, helpers, } = (0, grid_context_1.usePlansGridContext)();
+    const { isAnyPlanPriceDiscounted, setIsAnyPlanPriceDiscounted } = (0, header_price_context_1.useHeaderPriceContext)();
+    const { current, pricing: { currencyCode, originalPrice, discountedPrice, introOffer, billingPeriod }, } = gridPlansIndex[planSlug];
+    const isPricedPlan = null !== originalPrice.monthly;
+    /**
+     * If this discount is related to a `Plan upgrade credit`
+     * then we do not show any discount messaging as per Automattic/martech#1927
+     * We currently only support the `One time discount` in some currencies
+     */
+    const isGridPlanOneTimeDiscounted = Number.isFinite(discountedPrice.monthly);
+    const isGridPlanOnIntroOffer = introOffer && !introOffer.isOfferComplete;
+    const { prices } = (0, use_plan_pricing_info_from_grid_plans_1.usePlanPricingInfoFromGridPlans)({ gridPlans: visibleGridPlans });
+    const isLargeCurrency = (0, use_is_large_currency_1.default)({
+        prices,
+        currencyCode: currencyCode || 'USD',
+        ignoreWhitespace: true,
+    });
+    const termVariantPlanSlug = useTermVariantPlanSlugForSavings({ planSlug, billingPeriod });
+    const termVariantPricing = data_stores_1.Plans.usePricingMetaForGridPlans({
+        planSlugs: termVariantPlanSlug ? [termVariantPlanSlug] : [],
+        reflectStorageSelectionInPlanPrices,
+        coupon,
+        siteId,
+        useCheckPlanAvailabilityForPurchase: helpers?.useCheckPlanAvailabilityForPurchase,
+    })?.[termVariantPlanSlug ?? ''];
+    const termVariantPrice = termVariantPricing?.discountedPrice.monthly ?? termVariantPricing?.originalPrice.monthly ?? 0;
+    const planPrice = discountedPrice.monthly ?? originalPrice.monthly ?? 0;
+    const savings = termVariantPrice > planPrice
+        ? Math.floor(((termVariantPrice - planPrice) / termVariantPrice) * 100)
+        : 0;
+    (0, element_1.useEffect)(() => {
+        if (isGridPlanOneTimeDiscounted ||
+            isGridPlanOnIntroOffer ||
+            (enableTermSavingsPriceDisplay && savings)) {
+            setIsAnyPlanPriceDiscounted(true);
+        }
+    }, [
+        enableTermSavingsPriceDisplay,
+        isGridPlanOnIntroOffer,
+        isGridPlanOneTimeDiscounted,
+        savings,
+        setIsAnyPlanPriceDiscounted,
+    ]);
+    if ((0, calypso_products_1.isWpcomEnterpriseGridPlan)(planSlug) || !isPricedPlan) {
+        return null;
+    }
+    if (isGridPlanOnIntroOffer) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-header-price", children: [!current && ((0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-header-price__badge", children: translate('Special Offer') })), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('plans-grid-next-header-price__pricing-group', {
+                        'is-large-currency': isLargeCurrency,
+                    }), children: [(0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: originalPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: true, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", original: true }), (0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: typeof discountedPrice.monthly === 'number'
+                                ? discountedPrice.monthly
+                                : introOffer.rawPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: true, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", discounted: true })] })] }));
+    }
+    if (isGridPlanOneTimeDiscounted) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-header-price", children: [(0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-header-price__badge", children: translate('One time discount') }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('plans-grid-next-header-price__pricing-group', {
+                        'is-large-currency': isLargeCurrency,
+                    }), children: [(0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: originalPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: isLargeCurrency, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", original: true }), (0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: discountedPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: isLargeCurrency, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", discounted: true })] })] }));
+    }
+    if (enableTermSavingsPriceDisplay && termVariantPricing && savings) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-header-price", children: [(0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-header-price__badge", children: translate('Save %(savings)d%%', {
+                        args: { savings },
+                        comment: 'Example: Save 35%',
+                    }) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('plans-grid-next-header-price__pricing-group', {
+                        'is-large-currency': isLargeCurrency,
+                    }), children: [(0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: termVariantPricing.originalPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: isLargeCurrency, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", original: true }), (0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: discountedPrice.monthly ?? originalPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: isLargeCurrency, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", discounted: true })] })] }));
+    }
+    if (isAnyPlanPriceDiscounted) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-header-price", children: [(0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-header-price__badge is-hidden", children: "' '" }), isLargeCurrency ? ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-header-price__pricing-group is-large-currency", children: [(0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: 0, displayPerMonthNotation: false, isLargeCurrency: true, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", className: "is-placeholder-price" // This is a placeholder price to keep the layout consistent
+                            , original: true }), (0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: originalPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: true, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", discounted: true })] })) : ((0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: originalPrice.monthly, displayPerMonthNotation: false, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper" }))] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-header-price", children: (0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: originalPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: isLargeCurrency, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper" }) }));
+};
+exports.default = HeaderPrice;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/shared/header-price/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/shared/header-price/index.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/shared/header-price/style.scss

@@ -0,0 +1,112 @@
+.plans-grid-next-header-price {
+	padding: 0 20px;
+	margin: 0 0 4px 0;
+
+	.plan-price {
+		color: var(--studio-gray-100);
+		margin: 0;
+		line-height: 1;
+		display: flex;
+		font-family: Recoleta, sans-serif;
+
+		&.is-original {
+			color: var(--studio-gray-20);
+			text-decoration: line-through;
+			text-decoration-thickness: 1px;
+			font-family: "SF Pro Text", sans-serif;
+			margin-bottom: 5px;
+			font-size: rem(18px);
+
+			&::before {
+				display: none;
+			}
+
+			.plan-price__currency-symbol,
+			.plan-price__tax-amount {
+				color: var(--color-text-subtle);
+			}
+
+			.plan-price__integer {
+				font-size: rem(18px);
+			}
+			.plan-price__currency-symbol {
+				font-size: rem(8px);
+			}
+		}
+
+		&.is-placeholder-price {
+			visibility: hidden;
+		}
+
+		&.is-discounted {
+			color: var(--color-neutral-70);
+
+			.plans-grid-next-header-price__display-wrapper {
+				color: inherit;
+			}
+		}
+
+		&.is-large-currency {
+			.plan-price__integer {
+				font-size: rem(28px);
+			}
+			&.is-original {
+				.plan-price__integer {
+					font-size: rem(16px);
+				}
+			}
+		}
+	}
+
+	.plan-price__currency-symbol,
+	.plan-price.is-discounted .plan-price__currency-symbol {
+		font-size: rem(14px);
+		color: var(--studio-gray-100);
+		margin-top: 2px;
+	}
+
+	.plan-price__integer {
+		font-size: rem(44px);
+	}
+
+	.plan-price__term {
+		font-size: rem(12px);
+		font-weight: 400;
+	}
+}
+
+.plans-grid-next-header-price__badge {
+	background-color: var(--studio-green-0);
+	border-radius: 4px;
+	color: var(--studio-green-40);
+	display: inline-block;
+	font-size: 0.75rem;
+	font-weight: 500;
+	height: 21px;
+	letter-spacing: 0.2px;
+	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
+	line-height: 1.25rem;
+	margin-bottom: 10px;
+	padding: 0 12px;
+	text-align: center;
+	text-transform: none;
+	white-space: nowrap;
+	width: fit-content;
+
+	&.is-hidden {
+		visibility: hidden;
+	}
+}
+
+.plans-grid-next-header-price__pricing-group {
+	justify-content: flex-end;
+	display: flex;
+	flex-direction: row-reverse;
+	align-items: flex-end;
+	gap: 4px;
+
+	&.is-large-currency {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+}

package/dist/cjs/components/shared/plan-pill/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./style.scss");
+exports.default = (props) => ((0, jsx_runtime_1.jsx)("div", { className: `plans-grid__plan-pill${props.isInSignup ? ' is-in-signup' : ''}`, children: props.children }));
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/shared/plan-pill/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/shared/plan-pill/index.jsx"],"names":[],"mappings":";;;AAAA,wBAAsB;AAEtB,kBAAe,CAAE,KAAK,EAAG,EAAE,CAAC,CAC3B,gCAAK,SAAS,EAAG,wBAAyB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAG,EAAE,YACjF,KAAK,CAAC,QAAQ,GACX,CACN,CAAC"}

package/dist/cjs/components/shared/plan-pill/style.scss

@@ -0,0 +1,30 @@
+@import "@automattic/typography/styles/variables";
+
+.plans-grid__plan-pill {
+	position: absolute;
+	bottom: -10px;
+	left: 14px;
+
+	padding: 4px;
+	border-radius: 2px;
+	background: var(--color-accent);
+
+	font-size: $font-body-extra-small;
+	text-align: center;
+	line-height: 1;
+	color: var(--color-text-inverted);
+	text-transform: uppercase;
+
+	white-space: nowrap;
+}
+
+.plans-grid__plan-pill.is-in-signup {
+	top: 10px;
+	bottom: unset;
+	right: 14px;
+	left: unset;
+	text-transform: none;
+	padding: 4px 10px;
+	border-radius: 10px; /* stylelint-disable-line scales/radii */
+	background-color: var(--color-neutral-100);
+}

package/dist/cjs/components/shared/storage/components/plan-storage.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const calypso_products_1 = require("@automattic/calypso-products");
+const data_stores_1 = require("@automattic/data-stores");
+const grid_context_1 = require("../../../../grid-context");
+const constants_1 = require("../constants");
+const storage_dropdown_1 = tslib_1.__importDefault(require("./storage-dropdown"));
+const storage_feature_label_1 = tslib_1.__importDefault(require("./storage-feature-label"));
+const PlanStorage = ({ onStorageAddOnClick, planSlug, options, showUpgradeableStorage, }) => {
+    const { siteId, gridPlansIndex } = (0, grid_context_1.usePlansGridContext)();
+    const { availableForPurchase, current } = gridPlansIndex[planSlug];
+    const availableStorageAddOns = data_stores_1.AddOns.useAvailableStorageAddOns({ siteId });
+    if (!options?.isTableCell && (0, calypso_products_1.isWpcomEnterpriseGridPlan)(planSlug)) {
+        return null;
+    }
+    /**
+     * The current plan is not marked as `availableForPurchase`, hence check on `current`.
+     */
+    const canUpgradeStorageForPlan = (current || availableForPurchase) &&
+        showUpgradeableStorage &&
+        availableStorageAddOns.length &&
+        constants_1.ELIGIBLE_PLANS_FOR_STORAGE_UPGRADE.includes(planSlug);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-plan-storage", children: canUpgradeStorageForPlan ? ((0, jsx_runtime_1.jsx)(storage_dropdown_1.default, { planSlug: planSlug, onStorageAddOnClick: onStorageAddOnClick })) : ((0, jsx_runtime_1.jsx)(storage_feature_label_1.default, { planSlug: planSlug })) }));
+};
+exports.default = PlanStorage;
+//# sourceMappingURL=plan-storage.js.map

package/dist/cjs/components/shared/storage/components/plan-storage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plan-storage.js","sourceRoot":"","sources":["../../../../../../src/components/shared/storage/components/plan-storage.tsx"],"names":[],"mappings":";;;;AAAA,mEAAwF;AACxF,yDAAiD;AACjD,2DAA+D;AAC/D,4CAAkE;AAClE,kFAAiD;AACjD,4FAA0D;AAW1D,MAAM,WAAW,GAAG,CAAE,EACrB,mBAAmB,EACnB,QAAQ,EACR,OAAO,EACP,sBAAsB,GACf,EAAG,EAAE;IACZ,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,kCAAmB,GAAE,CAAC;IACzD,MAAM,EAAE,oBAAoB,EAAE,OAAO,EAAE,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IACrE,MAAM,sBAAsB,GAAG,oBAAM,CAAC,yBAAyB,CAAE,EAAE,MAAM,EAAE,CAAE,CAAC;IAE9E,IAAK,CAAE,OAAO,EAAE,WAAW,IAAI,IAAA,4CAAyB,EAAE,QAAQ,CAAE,EAAG,CAAC;QACvE,OAAO,IAAI,CAAC;IACb,CAAC;IAED;;OAEG;IACH,MAAM,wBAAwB,GAC7B,CAAE,OAAO,IAAI,oBAAoB,CAAE;QACnC,sBAAsB;QACtB,sBAAsB,CAAC,MAAM;QAC7B,8CAAkC,CAAC,QAAQ,CAAE,QAAQ,CAAE,CAAC;IAEzD,OAAO,CACN,gCAAK,SAAS,EAAC,8BAA8B,YAC1C,wBAAwB,CAAC,CAAC,CAAC,CAC5B,uBAAC,0BAAe,IAAC,QAAQ,EAAG,QAAQ,EAAG,mBAAmB,EAAG,mBAAmB,GAAK,CACrF,CAAC,CAAC,CAAC,CACH,uBAAC,+BAAmB,IAAC,QAAQ,EAAG,QAAQ,GAAK,CAC7C,GACI,CACN,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC"}

package/dist/cjs/components/shared/storage/components/storage-dropdown.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const data_stores_1 = require("@automattic/data-stores");
+const components_1 = require("@wordpress/components");
+const data_1 = require("@wordpress/data");
+const element_1 = require("@wordpress/element");
+const i18n_calypso_1 = require("i18n-calypso");
+const grid_context_1 = require("../../../../grid-context");
+const dropdown_option_1 = tslib_1.__importDefault(require("../../../dropdown-option"));
+const use_default_storage_option_1 = tslib_1.__importDefault(require("../hooks/use-default-storage-option"));
+const use_plan_storage_1 = tslib_1.__importDefault(require("../hooks/use-plan-storage"));
+const use_storage_string_1 = tslib_1.__importDefault(require("../hooks/use-storage-string"));
+const getSelectedStorageAddOn = (storageAddOnsForPlan, storageOptionSlug) => {
+    return storageAddOnsForPlan?.find((addOn) => addOn?.addOnSlug === storageOptionSlug);
+};
+const StorageDropdownOption = ({ price, planStorage, addOnStorage, priceOnSeparateLine, }) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    const planStorageString = (0, use_storage_string_1.default)(planStorage);
+    const addOnStorageString = (0, use_storage_string_1.default)(addOnStorage || 0);
+    const title = addOnStorage
+        ? translate('%(planStorageString)s + %(addOnStorageString)s', {
+            args: {
+                planStorageString,
+                addOnStorageString,
+            },
+        })
+        : planStorageString;
+    const priceString = price && addOnStorage
+        ? translate('%(price)s/month, billed yearly', {
+            args: { price },
+            comment: 'The cost of a storage add on per month. Example reads as "$50/month, billed yearly"',
+        })
+        : translate('Included in plan');
+    return priceOnSeparateLine ? ((0, jsx_runtime_1.jsx)("span", { className: "plans-grid-next-storage-dropdown__option-title", children: title })) : ((0, jsx_runtime_1.jsx)(dropdown_option_1.default, { className: "plans-grid-next-storage-dropdown__option", title: title, children: (0, jsx_runtime_1.jsx)("div", { children: priceString }) }));
+};
+const StorageDropdown = ({ planSlug, onStorageAddOnClick }) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    const { siteId } = (0, grid_context_1.usePlansGridContext)();
+    const { setSelectedStorageOptionForPlan } = (0, data_1.useDispatch)(data_stores_1.WpcomPlansUI.store);
+    const storageAddOns = data_stores_1.AddOns.useStorageAddOns({ siteId });
+    const selectedStorageOptionForPlan = (0, data_1.useSelect)((select) => select(data_stores_1.WpcomPlansUI.store).getSelectedStorageOptionForPlan(planSlug, siteId), [planSlug, siteId]);
+    const defaultStorageOptionSlug = (0, use_default_storage_option_1.default)({ planSlug });
+    const availableStorageAddOns = data_stores_1.AddOns.useAvailableStorageAddOns({ siteId });
+    const planStorage = (0, use_plan_storage_1.default)(planSlug);
+    (0, element_1.useEffect)(() => {
+        if (!selectedStorageOptionForPlan) {
+            defaultStorageOptionSlug &&
+                setSelectedStorageOptionForPlan({
+                    addOnSlug: defaultStorageOptionSlug,
+                    planSlug,
+                    siteId,
+                });
+        }
+    }, [
+        defaultStorageOptionSlug,
+        planSlug,
+        selectedStorageOptionForPlan,
+        setSelectedStorageOptionForPlan,
+        siteId,
+    ]);
+    const selectControlOptions = (0, element_1.useMemo)(() => {
+        // Get the default storage add-on meta or the storage included with the plan
+        let defaultStorageAddOnMeta = getSelectedStorageAddOn(storageAddOns, defaultStorageOptionSlug || '');
+        // If the default storage add-on is not available, create a new object with the default storage option slug
+        if (!defaultStorageAddOnMeta && defaultStorageOptionSlug) {
+            defaultStorageAddOnMeta = { addOnSlug: defaultStorageOptionSlug, prices: null, quantity: 0 };
+        }
+        return [defaultStorageAddOnMeta, ...availableStorageAddOns]?.map((addOn) => {
+            const addOnStorage = addOn?.quantity ?? 0;
+            return {
+                key: addOn?.addOnSlug || '',
+                name: ((0, jsx_runtime_1.jsx)(StorageDropdownOption, { price: addOn?.prices?.formattedMonthlyPrice, planStorage: planStorage, addOnStorage: addOnStorage })),
+            };
+        });
+    }, [availableStorageAddOns, defaultStorageOptionSlug, planStorage, storageAddOns]);
+    const selectedStorageAddOn = getSelectedStorageAddOn(storageAddOns, selectedStorageOptionForPlan);
+    const selectedStorageAddOnStorage = selectedStorageAddOn?.quantity ?? 0;
+    const selectedOption = {
+        key: selectedStorageOptionForPlan,
+        name: ((0, jsx_runtime_1.jsx)(StorageDropdownOption, { price: selectedStorageAddOn?.prices?.formattedMonthlyPrice, planStorage: planStorage, addOnStorage: selectedStorageAddOnStorage, priceOnSeparateLine: true })),
+    };
+    const handleOnChange = (0, element_1.useCallback)(({ selectedItem }) => {
+        const addOnSlug = selectedItem?.key;
+        if (addOnSlug) {
+            onStorageAddOnClick && onStorageAddOnClick(addOnSlug);
+            setSelectedStorageOptionForPlan({ addOnSlug, planSlug, siteId });
+        }
+    }, [onStorageAddOnClick, planSlug, setSelectedStorageOptionForPlan, siteId]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.CustomSelectControl, { __next40pxDefaultSize: true, hideLabelFromVision: true, options: selectControlOptions || [], value: selectedOption, onChange: handleOnChange, label: "" }), selectedStorageAddOn?.prices?.formattedMonthlyPrice && ((0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-storage-dropdown__addon-offset-price-container", children: (0, jsx_runtime_1.jsx)("span", { className: "plans-grid-next-storage-dropdown__addon-offset-price", children: translate('+ %(selectedOptionPrice)s/month', {
+                        args: { selectedOptionPrice: selectedStorageAddOn?.prices?.formattedMonthlyPrice },
+                    }) }) }))] }));
+};
+exports.default = StorageDropdown;
+//# sourceMappingURL=storage-dropdown.js.map

package/dist/cjs/components/shared/storage/components/storage-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storage-dropdown.js","sourceRoot":"","sources":["../../../../../../src/components/shared/storage/components/storage-dropdown.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/shared/storage/components/storage-feature-label.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const i18n_calypso_1 = require("i18n-calypso");
+const grid_context_1 = require("../../../../grid-context");
+const use_is_large_currency_1 = tslib_1.__importDefault(require("../../../../hooks/use-is-large-currency"));
+const use_plan_storage_1 = tslib_1.__importDefault(require("../hooks/use-plan-storage"));
+const use_purchased_storage_add_on_1 = tslib_1.__importDefault(require("../hooks/use-purchased-storage-add-on"));
+const use_storage_string_1 = tslib_1.__importDefault(require("../hooks/use-storage-string"));
+const StorageFeatureLabel = ({ planSlug }) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    const { gridPlansIndex, enableStorageAsBadge = true } = (0, grid_context_1.usePlansGridContext)();
+    const { pricing: { currencyCode }, } = gridPlansIndex[planSlug];
+    const planStorage = (0, use_plan_storage_1.default)(planSlug);
+    const purchasedStorageAddOn = (0, use_purchased_storage_add_on_1.default)();
+    const monthlyAddedCost = purchasedStorageAddOn?.prices?.monthlyPrice ?? 0;
+    const formattedMonthlyAddedCost = monthlyAddedCost &&
+        currencyCode &&
+        (0, i18n_calypso_1.formatCurrency)(monthlyAddedCost, currencyCode, { isSmallestUnit: true });
+    const isLargeCurrency = (0, use_is_large_currency_1.default)({
+        prices: [monthlyAddedCost],
+        isAddOn: true,
+        currencyCode: currencyCode ?? 'USD',
+    });
+    const totalStorageString = (0, use_storage_string_1.default)(planStorage + (purchasedStorageAddOn?.quantity ?? 0));
+    const containerClasses = (0, clsx_1.default)('plans-grid-next-storage-feature-label__container', {
+        'is-row': !isLargeCurrency,
+    });
+    const volumeJSX = enableStorageAsBadge ? ((0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-storage-feature-label__volume is-badge", children: totalStorageString })) : ((0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-storage-feature-label__volume", children: translate('%s storage', {
+            args: [totalStorageString],
+            comment: '%s is the amount of storage, including the unit. For example "10 GB"',
+        }) }));
+    return formattedMonthlyAddedCost ? ((0, jsx_runtime_1.jsxs)("div", { className: containerClasses, children: [volumeJSX, (0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-storage-feature-label__offset-price", children: translate('+ %(formattedMonthlyAddedCost)s/month', {
+                    args: { formattedMonthlyAddedCost },
+                }) })] })) : (volumeJSX);
+};
+exports.default = StorageFeatureLabel;
+//# sourceMappingURL=storage-feature-label.js.map

package/dist/cjs/components/shared/storage/components/storage-feature-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storage-feature-label.js","sourceRoot":"","sources":["../../../../../../src/components/shared/storage/components/storage-feature-label.tsx"],"names":[],"mappings":";;;;AACA,wDAAwB;AACxB,+CAA4D;AAC5D,2DAA+D;AAC/D,4GAAyE;AACzE,yFAAuD;AACvD,iHAA6E;AAC7E,6FAA2D;AAM3D,MAAM,mBAAmB,GAAG,CAAE,EAAE,QAAQ,EAAS,EAAG,EAAE;IACrD,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IACjC,MAAM,EAAE,cAAc,EAAE,oBAAoB,GAAG,IAAI,EAAE,GAAG,IAAA,kCAAmB,GAAE,CAAC;IAC9E,MAAM,EACL,OAAO,EAAE,EAAE,YAAY,EAAE,GACzB,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IAC/B,MAAM,WAAW,GAAG,IAAA,0BAAc,EAAE,QAAQ,CAAE,CAAC;IAC/C,MAAM,qBAAqB,GAAG,IAAA,sCAAwB,GAAE,CAAC;IAEzD,MAAM,gBAAgB,GAAG,qBAAqB,EAAE,MAAM,EAAE,YAAY,IAAI,CAAC,CAAC;IAC1E,MAAM,yBAAyB,GAC9B,gBAAgB;QAChB,YAAY;QACZ,IAAA,6BAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAE,CAAC;IAC5E,MAAM,eAAe,GAAG,IAAA,+BAAkB,EAAE;QAC3C,MAAM,EAAE,CAAE,gBAAgB,CAAE;QAC5B,OAAO,EAAE,IAAI;QACb,YAAY,EAAE,YAAY,IAAI,KAAK;KACnC,CAAE,CAAC;IACJ,MAAM,kBAAkB,GAAG,IAAA,4BAAgB,EAC1C,WAAW,GAAG,CAAE,qBAAqB,EAAE,QAAQ,IAAI,CAAC,CAAE,CACtD,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAA,cAAI,EAAE,kDAAkD,EAAE;QAClF,QAAQ,EAAE,CAAE,eAAe;KAC3B,CAAE,CAAC;IAEJ,MAAM,SAAS,GAAG,oBAAoB,CAAC,CAAC,CAAC,CACxC,gCAAK,SAAS,EAAC,wDAAwD,YACpE,kBAAkB,GACf,CACN,CAAC,CAAC,CAAC,CACH,gCAAK,SAAS,EAAC,+CAA+C,YAC3D,SAAS,CAAE,YAAY,EAAE;YAC1B,IAAI,EAAE,CAAE,kBAAkB,CAAE;YAC5B,OAAO,EAAE,sEAAsE;SAC/E,CAAE,GACE,CACN,CAAC;IAEF,OAAO,yBAAyB,CAAC,CAAC,CAAC,CAClC,iCAAK,SAAS,EAAG,gBAAgB,aAC9B,SAAS,EACX,gCAAK,SAAS,EAAC,qDAAqD,YACjE,SAAS,CAAE,uCAAuC,EAAE;oBACrD,IAAI,EAAE,EAAE,yBAAyB,EAAE;iBACnC,CAAE,GACE,IACD,CACN,CAAC,CAAC,CAAC,CACH,SAAS,CACT,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,mBAAmB,CAAC"}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ELIGIBLE_PLANS_FOR_STORAGE_UPGRADE = void 0;
+const calypso_products_1 = require("@automattic/calypso-products");
+exports.ELIGIBLE_PLANS_FOR_STORAGE_UPGRADE = [calypso_products_1.PLAN_BUSINESS, calypso_products_1.PLAN_ECOMMERCE];
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../src/components/shared/storage/constants.ts"],"names":[],"mappings":";;;AAAA,mEAA6E;AAEhE,QAAA,kCAAkC,GAAG,CAAE,gCAAa,EAAE,iCAAc,CAAE,CAAC"}

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const grid_context_1 = require("../../../../grid-context");
+const constants_1 = require("../constants");
+const use_purchased_storage_add_on_1 = tslib_1.__importDefault(require("./use-purchased-storage-add-on"));
+/**
+ * Returns the storage add-on upsell option to display to
+ * the user on initial load. If the user has purchased a
+ * storage add-on, that will be the default. Otherwise,
+ * the storage included with any given plan will be used.
+ */
+function useDefaultStorageOption({ planSlug, }) {
+    const { gridPlansIndex } = (0, grid_context_1.usePlansGridContext)();
+    const { features: { storageFeature }, } = gridPlansIndex[planSlug];
+    const purchasedStorageAddOn = (0, use_purchased_storage_add_on_1.default)();
+    const planStorageFeatureSlug = storageFeature?.getSlug();
+    if (!purchasedStorageAddOn) {
+        return planStorageFeatureSlug;
+    }
+    return constants_1.ELIGIBLE_PLANS_FOR_STORAGE_UPGRADE.includes(planSlug)
+        ? purchasedStorageAddOn.addOnSlug
+        : planStorageFeatureSlug;
+}
+exports.default = useDefaultStorageOption;
+//# sourceMappingURL=use-default-storage-option.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-default-storage-option.js","sourceRoot":"","sources":["../../../../../../src/components/shared/storage/hooks/use-default-storage-option.ts"],"names":[],"mappings":";;;AAEA,2DAA+D;AAC/D,4CAAkE;AAClE,0GAAsE;AAMtE;;;;;GAKG;AACH,SAAwB,uBAAuB,CAAE,EAChD,QAAQ,GACD;IACP,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,kCAAmB,GAAE,CAAC;IACjD,MAAM,EACL,QAAQ,EAAE,EAAE,cAAc,EAAE,GAC5B,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IAC/B,MAAM,qBAAqB,GAAG,IAAA,sCAAwB,GAAE,CAAC;IACzD,MAAM,sBAAsB,GAAG,cAAc,EAAE,OAAO,EAAiC,CAAC;IAExF,IAAK,CAAE,qBAAqB,EAAG,CAAC;QAC/B,OAAO,sBAAsB,CAAC;IAC/B,CAAC;IAED,OAAO,8CAAkC,CAAC,QAAQ,CAAE,QAAQ,CAAE;QAC7D,CAAC,CAAG,qBAAqB,CAAC,SAAsC;QAChE,CAAC,CAAC,sBAAsB,CAAC;AAC3B,CAAC;AAjBD,0CAiBC"}

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const calypso_products_1 = require("@automattic/calypso-products");
+const grid_context_1 = require("../../../../grid-context");
+function usePlanStorage(planSlug) {
+    const { gridPlansIndex } = (0, grid_context_1.usePlansGridContext)();
+    const { features: { storageFeature }, } = gridPlansIndex[planSlug];
+    const storageFeatureSlug = storageFeature?.getSlug();
+    switch (storageFeatureSlug) {
+        case calypso_products_1.FEATURE_1GB_STORAGE:
+            return 1;
+        case calypso_products_1.FEATURE_6GB_STORAGE:
+            return 6;
+        case calypso_products_1.FEATURE_13GB_STORAGE:
+            return 13;
+        case calypso_products_1.FEATURE_50GB_STORAGE:
+            return 50;
+        case calypso_products_1.FEATURE_P2_3GB_STORAGE:
+            return 3;
+        case calypso_products_1.FEATURE_P2_13GB_STORAGE:
+            return 13;
+        case calypso_products_1.FEATURE_200GB_STORAGE:
+            return 200;
+        default:
+            return 0;
+    }
+}
+exports.default = usePlanStorage;
+//# sourceMappingURL=use-plan-storage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-plan-storage.js","sourceRoot":"","sources":["../../../../../../src/components/shared/storage/hooks/use-plan-storage.ts"],"names":[],"mappings":";;AAAA,mEAUsC;AACtC,2DAA+D;AAE/D,SAAS,cAAc,CAAE,QAAkB;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,kCAAmB,GAAE,CAAC;IACjD,MAAM,EACL,QAAQ,EAAE,EAAE,cAAc,EAAE,GAC5B,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IAC/B,MAAM,kBAAkB,GAAG,cAAc,EAAE,OAAO,EAA6C,CAAC;IAEhG,QAAS,kBAAkB,EAAG,CAAC;QAC9B,KAAK,sCAAmB;YACvB,OAAO,CAAC,CAAC;QACV,KAAK,sCAAmB;YACvB,OAAO,CAAC,CAAC;QACV,KAAK,uCAAoB;YACxB,OAAO,EAAE,CAAC;QACX,KAAK,uCAAoB;YACxB,OAAO,EAAE,CAAC;QACX,KAAK,yCAAsB;YAC1B,OAAO,CAAC,CAAC;QACV,KAAK,0CAAuB;YAC3B,OAAO,EAAE,CAAC;QACX,KAAK,wCAAqB;YACzB,OAAO,GAAG,CAAC;QACZ;YACC,OAAO,CAAC,CAAC;IACX,CAAC;AACF,CAAC;AAED,kBAAe,cAAc,CAAC"}