@automattic/plans-grid-next 1.0.0

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

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getPlanSlugForTermVariant, isWpcomEnterpriseGridPlan, TERM_MONTHLY, } from '@automattic/calypso-products';
+import { PlanPrice } from '@automattic/components';
+import { Plans } from '@automattic/data-stores';
+import { useEffect } from '@wordpress/element';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import { usePlansGridContext } from '../../../grid-context';
+import useIsLargeCurrency from '../../../hooks/use-is-large-currency';
+import { usePlanPricingInfoFromGridPlans } from '../../../hooks/use-plan-pricing-info-from-grid-plans';
+import { useHeaderPriceContext } from './header-price-context';
+import './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 getPlanSlugForTermVariant(planSlug, TERM_MONTHLY);
+    }
+    return null;
+};
+const HeaderPrice = ({ planSlug, visibleGridPlans }) => {
+    const translate = useTranslate();
+    const { gridPlansIndex, enableTermSavingsPriceDisplay, reflectStorageSelectionInPlanPrices, siteId, coupon, helpers, } = usePlansGridContext();
+    const { isAnyPlanPriceDiscounted, setIsAnyPlanPriceDiscounted } = 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 } = usePlanPricingInfoFromGridPlans({ gridPlans: visibleGridPlans });
+    const isLargeCurrency = useIsLargeCurrency({
+        prices,
+        currencyCode: currencyCode || 'USD',
+        ignoreWhitespace: true,
+    });
+    const termVariantPlanSlug = useTermVariantPlanSlugForSavings({ planSlug, billingPeriod });
+    const termVariantPricing = 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;
+    useEffect(() => {
+        if (isGridPlanOneTimeDiscounted ||
+            isGridPlanOnIntroOffer ||
+            (enableTermSavingsPriceDisplay && savings)) {
+            setIsAnyPlanPriceDiscounted(true);
+        }
+    }, [
+        enableTermSavingsPriceDisplay,
+        isGridPlanOnIntroOffer,
+        isGridPlanOneTimeDiscounted,
+        savings,
+        setIsAnyPlanPriceDiscounted,
+    ]);
+    if (isWpcomEnterpriseGridPlan(planSlug) || !isPricedPlan) {
+        return null;
+    }
+    if (isGridPlanOnIntroOffer) {
+        return (_jsxs("div", { className: "plans-grid-next-header-price", children: [!current && (_jsx("div", { className: "plans-grid-next-header-price__badge", children: translate('Special Offer') })), _jsxs("div", { className: clsx('plans-grid-next-header-price__pricing-group', {
+                        'is-large-currency': isLargeCurrency,
+                    }), children: [_jsx(PlanPrice, { currencyCode: currencyCode, rawPrice: originalPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: true, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", original: true }), _jsx(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 (_jsxs("div", { className: "plans-grid-next-header-price", children: [_jsx("div", { className: "plans-grid-next-header-price__badge", children: translate('One time discount') }), _jsxs("div", { className: clsx('plans-grid-next-header-price__pricing-group', {
+                        'is-large-currency': isLargeCurrency,
+                    }), children: [_jsx(PlanPrice, { currencyCode: currencyCode, rawPrice: originalPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: isLargeCurrency, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", original: true }), _jsx(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 (_jsxs("div", { className: "plans-grid-next-header-price", children: [_jsx("div", { className: "plans-grid-next-header-price__badge", children: translate('Save %(savings)d%%', {
+                        args: { savings },
+                        comment: 'Example: Save 35%',
+                    }) }), _jsxs("div", { className: clsx('plans-grid-next-header-price__pricing-group', {
+                        'is-large-currency': isLargeCurrency,
+                    }), children: [_jsx(PlanPrice, { currencyCode: currencyCode, rawPrice: termVariantPricing.originalPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: isLargeCurrency, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", original: true }), _jsx(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 (_jsxs("div", { className: "plans-grid-next-header-price", children: [_jsx("div", { className: "plans-grid-next-header-price__badge is-hidden", children: "' '" }), isLargeCurrency ? (_jsxs("div", { className: "plans-grid-next-header-price__pricing-group is-large-currency", children: [_jsx(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 }), _jsx(PlanPrice, { currencyCode: currencyCode, rawPrice: originalPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: true, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", discounted: true })] })) : (_jsx(PlanPrice, { currencyCode: currencyCode, rawPrice: originalPrice.monthly, displayPerMonthNotation: false, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper" }))] }));
+    }
+    return (_jsx("div", { className: "plans-grid-next-header-price", children: _jsx(PlanPrice, { currencyCode: currencyCode, rawPrice: originalPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: isLargeCurrency, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper" }) }));
+};
+export default HeaderPrice;
+//# sourceMappingURL=index.js.map

package/dist/esm/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/esm/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/esm/components/shared/plan-pill/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './style.scss';
+export default (props) => (_jsx("div", { className: `plans-grid__plan-pill${props.isInSignup ? ' is-in-signup' : ''}`, children: props.children }));
+//# sourceMappingURL=index.js.map

package/dist/esm/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,OAAO,cAAc,CAAC;AAEtB,eAAe,CAAE,KAAK,EAAG,EAAE,CAAC,CAC3B,cAAK,SAAS,EAAG,wBAAyB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAG,EAAE,YACjF,KAAK,CAAC,QAAQ,GACX,CACN,CAAC"}

package/dist/esm/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/esm/components/shared/storage/components/plan-storage.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isWpcomEnterpriseGridPlan } from '@automattic/calypso-products';
+import { AddOns } from '@automattic/data-stores';
+import { usePlansGridContext } from '../../../../grid-context';
+import { ELIGIBLE_PLANS_FOR_STORAGE_UPGRADE } from '../constants';
+import StorageDropdown from './storage-dropdown';
+import StorageFeatureLabel from './storage-feature-label';
+const PlanStorage = ({ onStorageAddOnClick, planSlug, options, showUpgradeableStorage, }) => {
+    const { siteId, gridPlansIndex } = usePlansGridContext();
+    const { availableForPurchase, current } = gridPlansIndex[planSlug];
+    const availableStorageAddOns = AddOns.useAvailableStorageAddOns({ siteId });
+    if (!options?.isTableCell && isWpcomEnterpriseGridPlan(planSlug)) {
+        return null;
+    }
+    /**
+     * The current plan is not marked as `availableForPurchase`, hence check on `current`.
+     */
+    const canUpgradeStorageForPlan = (current || availableForPurchase) &&
+        showUpgradeableStorage &&
+        availableStorageAddOns.length &&
+        ELIGIBLE_PLANS_FOR_STORAGE_UPGRADE.includes(planSlug);
+    return (_jsx("div", { className: "plans-grid-next-plan-storage", children: canUpgradeStorageForPlan ? (_jsx(StorageDropdown, { planSlug: planSlug, onStorageAddOnClick: onStorageAddOnClick })) : (_jsx(StorageFeatureLabel, { planSlug: planSlug })) }));
+};
+export default PlanStorage;
+//# sourceMappingURL=plan-storage.js.map

package/dist/esm/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,OAAO,EAAiB,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AACxF,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,kCAAkC,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,eAAe,MAAM,oBAAoB,CAAC;AACjD,OAAO,mBAAmB,MAAM,yBAAyB,CAAC;AAW1D,MAAM,WAAW,GAAG,CAAE,EACrB,mBAAmB,EACnB,QAAQ,EACR,OAAO,EACP,sBAAsB,GACf,EAAG,EAAE;IACZ,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACzD,MAAM,EAAE,oBAAoB,EAAE,OAAO,EAAE,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IACrE,MAAM,sBAAsB,GAAG,MAAM,CAAC,yBAAyB,CAAE,EAAE,MAAM,EAAE,CAAE,CAAC;IAE9E,IAAK,CAAE,OAAO,EAAE,WAAW,IAAI,yBAAyB,CAAE,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,kCAAkC,CAAC,QAAQ,CAAE,QAAQ,CAAE,CAAC;IAEzD,OAAO,CACN,cAAK,SAAS,EAAC,8BAA8B,YAC1C,wBAAwB,CAAC,CAAC,CAAC,CAC5B,KAAC,eAAe,IAAC,QAAQ,EAAG,QAAQ,EAAG,mBAAmB,EAAG,mBAAmB,GAAK,CACrF,CAAC,CAAC,CAAC,CACH,KAAC,mBAAmB,IAAC,QAAQ,EAAG,QAAQ,GAAK,CAC7C,GACI,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,93 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AddOns, WpcomPlansUI } from '@automattic/data-stores';
+import { CustomSelectControl } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback, useEffect, useMemo } from '@wordpress/element';
+import { useTranslate } from 'i18n-calypso';
+import { usePlansGridContext } from '../../../../grid-context';
+import DropdownOption from '../../../dropdown-option';
+import useDefaultStorageOption from '../hooks/use-default-storage-option';
+import usePlanStorage from '../hooks/use-plan-storage';
+import useStorageString from '../hooks/use-storage-string';
+const getSelectedStorageAddOn = (storageAddOnsForPlan, storageOptionSlug) => {
+    return storageAddOnsForPlan?.find((addOn) => addOn?.addOnSlug === storageOptionSlug);
+};
+const StorageDropdownOption = ({ price, planStorage, addOnStorage, priceOnSeparateLine, }) => {
+    const translate = useTranslate();
+    const planStorageString = useStorageString(planStorage);
+    const addOnStorageString = useStorageString(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 ? (_jsx("span", { className: "plans-grid-next-storage-dropdown__option-title", children: title })) : (_jsx(DropdownOption, { className: "plans-grid-next-storage-dropdown__option", title: title, children: _jsx("div", { children: priceString }) }));
+};
+const StorageDropdown = ({ planSlug, onStorageAddOnClick }) => {
+    const translate = useTranslate();
+    const { siteId } = usePlansGridContext();
+    const { setSelectedStorageOptionForPlan } = useDispatch(WpcomPlansUI.store);
+    const storageAddOns = AddOns.useStorageAddOns({ siteId });
+    const selectedStorageOptionForPlan = useSelect((select) => select(WpcomPlansUI.store).getSelectedStorageOptionForPlan(planSlug, siteId), [planSlug, siteId]);
+    const defaultStorageOptionSlug = useDefaultStorageOption({ planSlug });
+    const availableStorageAddOns = AddOns.useAvailableStorageAddOns({ siteId });
+    const planStorage = usePlanStorage(planSlug);
+    useEffect(() => {
+        if (!selectedStorageOptionForPlan) {
+            defaultStorageOptionSlug &&
+                setSelectedStorageOptionForPlan({
+                    addOnSlug: defaultStorageOptionSlug,
+                    planSlug,
+                    siteId,
+                });
+        }
+    }, [
+        defaultStorageOptionSlug,
+        planSlug,
+        selectedStorageOptionForPlan,
+        setSelectedStorageOptionForPlan,
+        siteId,
+    ]);
+    const selectControlOptions = 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: (_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: (_jsx(StorageDropdownOption, { price: selectedStorageAddOn?.prices?.formattedMonthlyPrice, planStorage: planStorage, addOnStorage: selectedStorageAddOnStorage, priceOnSeparateLine: true })),
+    };
+    const handleOnChange = useCallback(({ selectedItem }) => {
+        const addOnSlug = selectedItem?.key;
+        if (addOnSlug) {
+            onStorageAddOnClick && onStorageAddOnClick(addOnSlug);
+            setSelectedStorageOptionForPlan({ addOnSlug, planSlug, siteId });
+        }
+    }, [onStorageAddOnClick, planSlug, setSelectedStorageOptionForPlan, siteId]);
+    return (_jsxs(_Fragment, { children: [_jsx(CustomSelectControl, { __next40pxDefaultSize: true, hideLabelFromVision: true, options: selectControlOptions || [], value: selectedOption, onChange: handleOnChange, label: "" }), selectedStorageAddOn?.prices?.formattedMonthlyPrice && (_jsx("div", { className: "plans-grid-next-storage-dropdown__addon-offset-price-container", children: _jsx("span", { className: "plans-grid-next-storage-dropdown__addon-offset-price", children: translate('+ %(selectedOptionPrice)s/month', {
+                        args: { selectedOptionPrice: selectedStorageAddOn?.prices?.formattedMonthlyPrice },
+                    }) }) }))] }));
+};
+export default StorageDropdown;
+//# sourceMappingURL=storage-dropdown.js.map

package/dist/esm/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/esm/components/shared/storage/components/storage-feature-label.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { formatCurrency, useTranslate } from 'i18n-calypso';
+import { usePlansGridContext } from '../../../../grid-context';
+import useIsLargeCurrency from '../../../../hooks/use-is-large-currency';
+import usePlanStorage from '../hooks/use-plan-storage';
+import usePurchasedStorageAddOn from '../hooks/use-purchased-storage-add-on';
+import useStorageString from '../hooks/use-storage-string';
+const StorageFeatureLabel = ({ planSlug }) => {
+    const translate = useTranslate();
+    const { gridPlansIndex, enableStorageAsBadge = true } = usePlansGridContext();
+    const { pricing: { currencyCode }, } = gridPlansIndex[planSlug];
+    const planStorage = usePlanStorage(planSlug);
+    const purchasedStorageAddOn = usePurchasedStorageAddOn();
+    const monthlyAddedCost = purchasedStorageAddOn?.prices?.monthlyPrice ?? 0;
+    const formattedMonthlyAddedCost = monthlyAddedCost &&
+        currencyCode &&
+        formatCurrency(monthlyAddedCost, currencyCode, { isSmallestUnit: true });
+    const isLargeCurrency = useIsLargeCurrency({
+        prices: [monthlyAddedCost],
+        isAddOn: true,
+        currencyCode: currencyCode ?? 'USD',
+    });
+    const totalStorageString = useStorageString(planStorage + (purchasedStorageAddOn?.quantity ?? 0));
+    const containerClasses = clsx('plans-grid-next-storage-feature-label__container', {
+        'is-row': !isLargeCurrency,
+    });
+    const volumeJSX = enableStorageAsBadge ? (_jsx("div", { className: "plans-grid-next-storage-feature-label__volume is-badge", children: totalStorageString })) : (_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 ? (_jsxs("div", { className: containerClasses, children: [volumeJSX, _jsx("div", { className: "plans-grid-next-storage-feature-label__offset-price", children: translate('+ %(formattedMonthlyAddedCost)s/month', {
+                    args: { formattedMonthlyAddedCost },
+                }) })] })) : (volumeJSX);
+};
+export default StorageFeatureLabel;
+//# sourceMappingURL=storage-feature-label.js.map

package/dist/esm/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,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,kBAAkB,MAAM,yCAAyC,CAAC;AACzE,OAAO,cAAc,MAAM,2BAA2B,CAAC;AACvD,OAAO,wBAAwB,MAAM,uCAAuC,CAAC;AAC7E,OAAO,gBAAgB,MAAM,6BAA6B,CAAC;AAM3D,MAAM,mBAAmB,GAAG,CAAE,EAAE,QAAQ,EAAS,EAAG,EAAE;IACrD,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,EAAE,cAAc,EAAE,oBAAoB,GAAG,IAAI,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAC9E,MAAM,EACL,OAAO,EAAE,EAAE,YAAY,EAAE,GACzB,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IAC/B,MAAM,WAAW,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IAC/C,MAAM,qBAAqB,GAAG,wBAAwB,EAAE,CAAC;IAEzD,MAAM,gBAAgB,GAAG,qBAAqB,EAAE,MAAM,EAAE,YAAY,IAAI,CAAC,CAAC;IAC1E,MAAM,yBAAyB,GAC9B,gBAAgB;QAChB,YAAY;QACZ,cAAc,CAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAE,CAAC;IAC5E,MAAM,eAAe,GAAG,kBAAkB,CAAE;QAC3C,MAAM,EAAE,CAAE,gBAAgB,CAAE;QAC5B,OAAO,EAAE,IAAI;QACb,YAAY,EAAE,YAAY,IAAI,KAAK;KACnC,CAAE,CAAC;IACJ,MAAM,kBAAkB,GAAG,gBAAgB,CAC1C,WAAW,GAAG,CAAE,qBAAqB,EAAE,QAAQ,IAAI,CAAC,CAAE,CACtD,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAI,CAAE,kDAAkD,EAAE;QAClF,QAAQ,EAAE,CAAE,eAAe;KAC3B,CAAE,CAAC;IAEJ,MAAM,SAAS,GAAG,oBAAoB,CAAC,CAAC,CAAC,CACxC,cAAK,SAAS,EAAC,wDAAwD,YACpE,kBAAkB,GACf,CACN,CAAC,CAAC,CAAC,CACH,cAAK,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,eAAK,SAAS,EAAG,gBAAgB,aAC9B,SAAS,EACX,cAAK,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,eAAe,mBAAmB,CAAC"}

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

@@ -0,0 +1,3 @@
+import { PLAN_BUSINESS, PLAN_ECOMMERCE } from '@automattic/calypso-products';
+export const ELIGIBLE_PLANS_FOR_STORAGE_UPGRADE = [PLAN_BUSINESS, PLAN_ECOMMERCE];
+//# sourceMappingURL=constants.js.map

package/dist/esm/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,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE7E,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAE,aAAa,EAAE,cAAc,CAAE,CAAC"}

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

@@ -0,0 +1,22 @@
+import { usePlansGridContext } from '../../../../grid-context';
+import { ELIGIBLE_PLANS_FOR_STORAGE_UPGRADE } from '../constants';
+import usePurchasedStorageAddOn from './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.
+ */
+export default function useDefaultStorageOption({ planSlug, }) {
+    const { gridPlansIndex } = usePlansGridContext();
+    const { features: { storageFeature }, } = gridPlansIndex[planSlug];
+    const purchasedStorageAddOn = usePurchasedStorageAddOn();
+    const planStorageFeatureSlug = storageFeature?.getSlug();
+    if (!purchasedStorageAddOn) {
+        return planStorageFeatureSlug;
+    }
+    return ELIGIBLE_PLANS_FOR_STORAGE_UPGRADE.includes(planSlug)
+        ? purchasedStorageAddOn.addOnSlug
+        : planStorageFeatureSlug;
+}
+//# sourceMappingURL=use-default-storage-option.js.map

package/dist/esm/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,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,kCAAkC,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,wBAAwB,MAAM,gCAAgC,CAAC;AAMtE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAE,EAChD,QAAQ,GACD;IACP,MAAM,EAAE,cAAc,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACjD,MAAM,EACL,QAAQ,EAAE,EAAE,cAAc,EAAE,GAC5B,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IAC/B,MAAM,qBAAqB,GAAG,wBAAwB,EAAE,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,kCAAkC,CAAC,QAAQ,CAAE,QAAQ,CAAE;QAC7D,CAAC,CAAG,qBAAqB,CAAC,SAAsC;QAChE,CAAC,CAAC,sBAAsB,CAAC;AAC3B,CAAC"}

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

@@ -0,0 +1,27 @@
+import { FEATURE_1GB_STORAGE, FEATURE_6GB_STORAGE, FEATURE_13GB_STORAGE, FEATURE_50GB_STORAGE, FEATURE_200GB_STORAGE, FEATURE_P2_3GB_STORAGE, FEATURE_P2_13GB_STORAGE, } from '@automattic/calypso-products';
+import { usePlansGridContext } from '../../../../grid-context';
+function usePlanStorage(planSlug) {
+    const { gridPlansIndex } = usePlansGridContext();
+    const { features: { storageFeature }, } = gridPlansIndex[planSlug];
+    const storageFeatureSlug = storageFeature?.getSlug();
+    switch (storageFeatureSlug) {
+        case FEATURE_1GB_STORAGE:
+            return 1;
+        case FEATURE_6GB_STORAGE:
+            return 6;
+        case FEATURE_13GB_STORAGE:
+            return 13;
+        case FEATURE_50GB_STORAGE:
+            return 50;
+        case FEATURE_P2_3GB_STORAGE:
+            return 3;
+        case FEATURE_P2_13GB_STORAGE:
+            return 13;
+        case FEATURE_200GB_STORAGE:
+            return 200;
+        default:
+            return 0;
+    }
+}
+export default usePlanStorage;
+//# sourceMappingURL=use-plan-storage.js.map

package/dist/esm/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,OAAO,EACN,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,EACtB,uBAAuB,GAGvB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,SAAS,cAAc,CAAE,QAAkB;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,mBAAmB,EAAE,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,mBAAmB;YACvB,OAAO,CAAC,CAAC;QACV,KAAK,mBAAmB;YACvB,OAAO,CAAC,CAAC;QACV,KAAK,oBAAoB;YACxB,OAAO,EAAE,CAAC;QACX,KAAK,oBAAoB;YACxB,OAAO,EAAE,CAAC;QACX,KAAK,sBAAsB;YAC1B,OAAO,CAAC,CAAC;QACV,KAAK,uBAAuB;YAC3B,OAAO,EAAE,CAAC;QACX,KAAK,qBAAqB;YACzB,OAAO,GAAG,CAAC;QACZ;YACC,OAAO,CAAC,CAAC;IACX,CAAC;AACF,CAAC;AAED,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,48 @@
+import { PRODUCT_1GB_SPACE } from '@automattic/calypso-products';
+import { Purchases, AddOns } from '@automattic/data-stores';
+import { useMemo } from '@wordpress/element';
+import { usePlansGridContext } from '../../../../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 AddOns.ADD_ON_50GB_STORAGE;
+        case 100:
+            return AddOns.ADD_ON_100GB_STORAGE;
+        case 150:
+            return AddOns.ADD_ON_150GB_STORAGE;
+        case 200:
+            return AddOns.ADD_ON_200GB_STORAGE;
+        case 250:
+            return AddOns.ADD_ON_250GB_STORAGE;
+        case 300:
+            return AddOns.ADD_ON_300GB_STORAGE;
+        case 350:
+            return AddOns.ADD_ON_350GB_STORAGE;
+        default:
+            return null;
+    }
+};
+export default function usePurchasedStorageAddOn() {
+    const { siteId } = usePlansGridContext();
+    const spaceUpgradesPurchased = Purchases.useSitePurchasesByProductSlug({
+        siteId,
+        productSlug: PRODUCT_1GB_SPACE,
+    });
+    const storageAddOns = AddOns.useStorageAddOns({ siteId });
+    return 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]);
+}
+//# sourceMappingURL=use-purchased-storage-add-on.js.map

package/dist/esm/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,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;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,MAAM,CAAC,mBAAmB,CAAC;QACnC,KAAK,GAAG;YACP,OAAO,MAAM,CAAC,oBAAoB,CAAC;QACpC,KAAK,GAAG;YACP,OAAO,MAAM,CAAC,oBAAoB,CAAC;QACpC,KAAK,GAAG;YACP,OAAO,MAAM,CAAC,oBAAoB,CAAC;QACpC,KAAK,GAAG;YACP,OAAO,MAAM,CAAC,oBAAoB,CAAC;QACpC,KAAK,GAAG;YACP,OAAO,MAAM,CAAC,oBAAoB,CAAC;QACpC,KAAK,GAAG;YACP,OAAO,MAAM,CAAC,oBAAoB,CAAC;QACpC;YACC,OAAO,IAAI,CAAC;IACd,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,MAAM,EAAE,MAAM,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACzC,MAAM,sBAAsB,GAAG,SAAS,CAAC,6BAA6B,CAAE;QACvE,MAAM;QACN,WAAW,EAAE,iBAAiB;KAC9B,CAAE,CAAC;IACJ,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAE,EAAE,MAAM,EAAE,CAAE,CAAC;IAE5D,OAAO,OAAO,CAAE,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"}

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

@@ -0,0 +1,11 @@
+import { useTranslate } from 'i18n-calypso';
+function useStorageString(quantity) {
+    const translate = useTranslate();
+    return translate('%(quantity)d GB', {
+        args: {
+            quantity,
+        },
+    });
+}
+export default useStorageString;
+//# sourceMappingURL=use-storage-string.js.map

package/dist/esm/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,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,SAAS,gBAAgB,CAAE,QAAgB;IAC1C,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,SAAS,CAAE,iBAAiB,EAAE;QACpC,IAAI,EAAE;YACL,QAAQ;SACR;KACD,CAAE,CAAC;AACL,CAAC;AAED,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,9 @@
+/**
+ * Hooks
+ */
+export { default as useDefaultStorageOption } from './hooks/use-default-storage-option';
+/**
+ * Components
+ */
+export { default as PlanStorage } from './components/plan-storage';
+//# sourceMappingURL=index.js.map

package/dist/esm/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,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAExF;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}