@automattic/plans-grid-next 1.0.0

package/dist/cjs/components/plan-type-selector/hooks/use-interval-options.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const i18n_calypso_1 = require("i18n-calypso");
+const use_max_discounts_for_plan_terms_1 = tslib_1.__importDefault(require("./use-max-discounts-for-plan-terms"));
+const getDiscountText = (discountPercentage, translate) => {
+    if (!discountPercentage) {
+        return '';
+    }
+    return translate('up to %(discount)d%% off', {
+        args: { discount: discountPercentage },
+        comment: 'Discount percentage',
+    });
+};
+function useIntervalOptions(props) {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    const { displayedIntervals } = props;
+    const optionList = {
+        yearly: {
+            key: 'yearly',
+            name: translate('Pay yearly'),
+            discountText: '',
+            termInMonths: 12,
+        },
+        '2yearly': {
+            key: '2yearly',
+            name: translate('Pay every 2 years'),
+            discountText: '',
+            termInMonths: 24,
+        },
+        '3yearly': {
+            key: '3yearly',
+            name: translate('Pay every 3 years'),
+            discountText: '',
+            termInMonths: 36,
+        },
+        monthly: {
+            key: 'monthly',
+            name: translate('Pay monthly'),
+            discountText: '',
+            termInMonths: 1,
+        },
+    };
+    let displayedOptionList = Object.fromEntries(Object.entries(optionList).filter(([, value]) => displayedIntervals.includes(value.key)));
+    const termWiseMaxDiscount = (0, use_max_discounts_for_plan_terms_1.default)(props.plans, Object.keys(displayedOptionList), props.useCheckPlanAvailabilityForPurchase, props.siteId);
+    displayedOptionList = Object.fromEntries(Object.keys(displayedOptionList).map((key) => [
+        key,
+        {
+            ...displayedOptionList[key],
+            discountText: getDiscountText(termWiseMaxDiscount[key], translate),
+        },
+    ]));
+    return displayedOptionList;
+}
+exports.default = useIntervalOptions;
+//# sourceMappingURL=use-interval-options.js.map

package/dist/cjs/components/plan-type-selector/hooks/use-interval-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-interval-options.js","sourceRoot":"","sources":["../../../../../src/components/plan-type-selector/hooks/use-interval-options.tsx"],"names":[],"mappings":";;;AAAA,+CAAsF;AACtF,kHAA6E;AAG7E,MAAM,eAAe,GAAG,CAAE,kBAA0B,EAAE,SAAuC,EAAG,EAAE;IACjG,IAAK,CAAE,kBAAkB,EAAG,CAAC;QAC5B,OAAO,EAAE,CAAC;IACX,CAAC;IACD,OAAO,SAAS,CAAE,0BAA0B,EAAE;QAC7C,IAAI,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE;QACtC,OAAO,EAAE,qBAAqB;KAC9B,CAAE,CAAC;AACL,CAAC,CAAC;AAWF,SAAwB,kBAAkB,CAAE,KAAwB;IACnE,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IACjC,MAAM,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC;IACrC,MAAM,UAAU,GAQZ;QACH,MAAM,EAAE;YACP,GAAG,EAAE,QAAQ;YACb,IAAI,EAAE,SAAS,CAAE,YAAY,CAAE;YAC/B,YAAY,EAAE,EAAE;YAChB,YAAY,EAAE,EAAE;SAChB;QACD,SAAS,EAAE;YACV,GAAG,EAAE,SAAS;YACd,IAAI,EAAE,SAAS,CAAE,mBAAmB,CAAE;YACtC,YAAY,EAAE,EAAE;YAChB,YAAY,EAAE,EAAE;SAChB;QACD,SAAS,EAAE;YACV,GAAG,EAAE,SAAS;YACd,IAAI,EAAE,SAAS,CAAE,mBAAmB,CAAE;YACtC,YAAY,EAAE,EAAE;YAChB,YAAY,EAAE,EAAE;SAChB;QACD,OAAO,EAAE;YACR,GAAG,EAAE,SAAS;YACd,IAAI,EAAE,SAAS,CAAE,aAAa,CAAE;YAChC,YAAY,EAAE,EAAE;YAChB,YAAY,EAAE,CAAC;SACf;KACD,CAAC;IAEF,IAAI,mBAAmB,GAAG,MAAM,CAAC,WAAW,CAC3C,MAAM,CAAC,OAAO,CAAE,UAAU,CAAE,CAAC,MAAM,CAAE,CAAE,CAAE,AAAD,EAAG,KAAK,CAAE,EAAG,EAAE,CACtD,kBAAkB,CAAC,QAAQ,CAAE,KAAK,CAAC,GAAG,CAAE,CACxC,CAC2B,CAAC;IAE9B,MAAM,mBAAmB,GAAG,IAAA,0CAA2B,EACtD,KAAK,CAAC,KAAK,EACX,MAAM,CAAC,IAAI,CAAE,mBAAmB,CAA2C,EAC3E,KAAK,CAAC,mCAAmC,EACzC,KAAK,CAAC,MAAM,CACZ,CAAC;IAEF,mBAAmB,GAAG,MAAM,CAAC,WAAW,CACvC,MAAM,CAAC,IAAI,CAAE,mBAAmB,CAAE,CAAC,GAAG,CAAE,CAAE,GAAG,EAAG,EAAE,CAAC;QAClD,GAAmC;QACnC;YACC,GAAG,mBAAmB,CAAE,GAAmC,CAAE;YAC7D,YAAY,EAAE,eAAe,CAC5B,mBAAmB,CAAE,GAAmC,CAAE,EAC1D,SAAS,CACT;SACD;KACD,CAAE,CACyB,CAAC;IAE9B,OAAO,mBAAmB,CAAC;AAC5B,CAAC;AAjED,qCAiEC"}

package/dist/cjs/components/plan-type-selector/hooks/use-max-discount.js

@@ -0,0 +1,45 @@
+"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");
+function useMaxDiscount(plans, useCheckPlanAvailabilityForPurchase, siteId) {
+    const [maxDiscount, setMaxDiscount] = (0, element_1.useState)(0);
+    const wpcomMonthlyPlans = (plans || []).filter(calypso_products_1.isWpComPlan).filter(calypso_products_1.isMonthly);
+    const yearlyVariantPlanSlugs = wpcomMonthlyPlans
+        .map((planSlug) => (0, calypso_products_1.getPlanSlugForTermVariant)(planSlug, calypso_products_1.TERM_ANNUALLY))
+        .filter(Boolean);
+    const monthlyPlansPricing = data_stores_1.Plans.usePricingMetaForGridPlans({
+        planSlugs: wpcomMonthlyPlans,
+        siteId,
+        coupon: undefined,
+        useCheckPlanAvailabilityForPurchase,
+    });
+    const yearlyPlansPricing = data_stores_1.Plans.usePricingMetaForGridPlans({
+        planSlugs: yearlyVariantPlanSlugs,
+        siteId,
+        coupon: undefined,
+        useCheckPlanAvailabilityForPurchase,
+    });
+    const discounts = wpcomMonthlyPlans.map((planSlug) => {
+        const yearlyVariantPlanSlug = (0, calypso_products_1.getPlanSlugForTermVariant)(planSlug, calypso_products_1.TERM_ANNUALLY);
+        if (!yearlyVariantPlanSlug) {
+            return 0;
+        }
+        const monthlyPlanAnnualCost = (monthlyPlansPricing?.[planSlug]?.originalPrice.full ?? 0) * 12;
+        if (!monthlyPlanAnnualCost) {
+            return 0;
+        }
+        const yearlyPlanAnnualCost = yearlyPlansPricing?.[yearlyVariantPlanSlug]?.discountedPrice.full ||
+            yearlyPlansPricing?.[yearlyVariantPlanSlug]?.originalPrice.full ||
+            0;
+        return Math.floor(((monthlyPlanAnnualCost - yearlyPlanAnnualCost) / (monthlyPlanAnnualCost || 1)) * 100);
+    });
+    const currentMaxDiscount = discounts.length ? Math.max(...discounts) : 0;
+    if (currentMaxDiscount > 0 && currentMaxDiscount !== maxDiscount) {
+        setMaxDiscount(currentMaxDiscount);
+    }
+    return currentMaxDiscount || maxDiscount;
+}
+exports.default = useMaxDiscount;
+//# sourceMappingURL=use-max-discount.js.map

package/dist/cjs/components/plan-type-selector/hooks/use-max-discount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-max-discount.js","sourceRoot":"","sources":["../../../../../src/components/plan-type-selector/hooks/use-max-discount.ts"],"names":[],"mappings":";;AAAA,mEAMsC;AACtC,yDAAgD;AAChD,gDAA8C;AAE9C,SAAwB,cAAc,CACrC,KAAiB,EACjB,mCAA8E,EAC9E,MAAsB;IAEtB,MAAM,CAAE,WAAW,EAAE,cAAc,CAAE,GAAG,IAAA,kBAAQ,EAAE,CAAC,CAAE,CAAC;IACtD,MAAM,iBAAiB,GAAG,CAAE,KAAK,IAAI,EAAE,CAAE,CAAC,MAAM,CAAE,8BAAW,CAAE,CAAC,MAAM,CAAE,4BAAS,CAAE,CAAC;IACpF,MAAM,sBAAsB,GAAG,iBAAiB;SAC9C,GAAG,CAAE,CAAE,QAAQ,EAAG,EAAE,CAAC,IAAA,4CAAyB,EAAE,QAAQ,EAAE,gCAAa,CAAE,CAAE;SAC3E,MAAM,CAAE,OAAO,CAAgB,CAAC;IAClC,MAAM,mBAAmB,GAAG,mBAAK,CAAC,0BAA0B,CAAE;QAC7D,SAAS,EAAE,iBAAiB;QAC5B,MAAM;QACN,MAAM,EAAE,SAAS;QACjB,mCAAmC;KACnC,CAAE,CAAC;IACJ,MAAM,kBAAkB,GAAG,mBAAK,CAAC,0BAA0B,CAAE;QAC5D,SAAS,EAAE,sBAAsB;QACjC,MAAM;QACN,MAAM,EAAE,SAAS;QACjB,mCAAmC;KACnC,CAAE,CAAC;IAEJ,MAAM,SAAS,GAAG,iBAAiB,CAAC,GAAG,CAAE,CAAE,QAAQ,EAAG,EAAE;QACvD,MAAM,qBAAqB,GAAG,IAAA,4CAAyB,EAAE,QAAQ,EAAE,gCAAa,CAAE,CAAC;QAEnF,IAAK,CAAE,qBAAqB,EAAG,CAAC;YAC/B,OAAO,CAAC,CAAC;QACV,CAAC;QAED,MAAM,qBAAqB,GAC1B,CAAE,mBAAmB,EAAE,CAAE,QAAQ,CAAE,EAAE,aAAa,CAAC,IAAI,IAAI,CAAC,CAAE,GAAG,EAAE,CAAC;QAErE,IAAK,CAAE,qBAAqB,EAAG,CAAC;YAC/B,OAAO,CAAC,CAAC;QACV,CAAC;QAED,MAAM,oBAAoB,GACzB,kBAAkB,EAAE,CAAE,qBAAqB,CAAE,EAAE,eAAe,CAAC,IAAI;YACnE,kBAAkB,EAAE,CAAE,qBAAqB,CAAE,EAAE,aAAa,CAAC,IAAI;YACjE,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC,KAAK,CAChB,CAAE,CAAE,qBAAqB,GAAG,oBAAoB,CAAE,GAAG,CAAE,qBAAqB,IAAI,CAAC,CAAE,CAAE,GAAG,GAAG,CAC3F,CAAC;IACH,CAAC,CAAE,CAAC;IACJ,MAAM,kBAAkB,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAE,GAAG,SAAS,CAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAE3E,IAAK,kBAAkB,GAAG,CAAC,IAAI,kBAAkB,KAAK,WAAW,EAAG,CAAC;QACpE,cAAc,CAAE,kBAAkB,CAAE,CAAC;IACtC,CAAC;IAED,OAAO,kBAAkB,IAAI,WAAW,CAAC;AAC1C,CAAC;AArDD,iCAqDC"}

package/dist/cjs/components/plan-type-selector/hooks/use-max-discounts-for-plan-terms.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const calypso_products_1 = require("@automattic/calypso-products");
+const data_stores_1 = require("@automattic/data-stores");
+/**
+ * Calculate the maximum discount for each term for a given set of plans
+ * @param plans plans considered
+ * @param urlFriendlyTerms terms calculated for
+ * @returns A map of term to maximum discount
+ */
+function useMaxDiscountsForPlanTerms(plans, urlFriendlyTerms = [], useCheckPlanAvailabilityForPurchase, siteId) {
+    const termDefinitionsMapping = urlFriendlyTerms.map((urlFriendlyTerm) => ({
+        urlFriendlyTerm,
+        term: calypso_products_1.URL_FRIENDLY_TERMS_MAPPING[urlFriendlyTerm],
+    }));
+    const terms = termDefinitionsMapping.map(({ term }) => term);
+    const allRelatedPlanSlugs = plans
+        .filter((planSlug) => !(0, calypso_products_1.isWpcomEnterpriseGridPlan)(planSlug))
+        .map((plan) => (0, calypso_products_1.getPlanMultipleTermsVariantSlugs)(plan, terms))
+        .flat()
+        .filter(Boolean)
+        .filter(calypso_products_1.isWpComPlan);
+    const lowestTerm = terms.reduce((currentLowestTerm, term) => {
+        return (0, calypso_products_1.getBillingMonthsForTerm)(currentLowestTerm) <= (0, calypso_products_1.getBillingMonthsForTerm)(term)
+            ? currentLowestTerm
+            : term;
+    }, terms[0]);
+    const lowestTermInMonths = (0, calypso_products_1.getBillingMonthsForTerm)(lowestTerm);
+    const lowestTermPlanSlugs = allRelatedPlanSlugs.filter((planSlug) => (0, calypso_products_1.getPlan)(planSlug)?.term === lowestTerm);
+    const plansPricing = data_stores_1.Plans.usePricingMetaForGridPlans({
+        planSlugs: allRelatedPlanSlugs,
+        siteId,
+        coupon: undefined,
+        useCheckPlanAvailabilityForPurchase,
+    });
+    const termWiseMaxDiscount = {};
+    termDefinitionsMapping.forEach((termMapping) => {
+        if (termMapping.term === lowestTerm) {
+            return 0;
+        }
+        const termDiscounts = lowestTermPlanSlugs.map((lowestTermPlanSlug) => {
+            const lowestTermPlanPricing = plansPricing?.[lowestTermPlanSlug];
+            const lowestTermPlanCost = lowestTermPlanPricing?.originalPrice.full;
+            if (!lowestTermPlanCost) {
+                return 0;
+            }
+            const lowestTermMonthlyCost = lowestTermPlanCost / lowestTermInMonths;
+            /**
+             * Calculate the monthly cost of the term price
+             */
+            const variantPlanSlug = (0, calypso_products_1.getPlanSlugForTermVariant)(lowestTermPlanSlug, termMapping.term) ?? '';
+            const variantPlanPricing = plansPricing?.[variantPlanSlug];
+            const variantTermPrice = variantPlanPricing?.discountedPrice?.full || variantPlanPricing?.originalPrice?.full || 0;
+            if (!variantTermPrice) {
+                return 0;
+            }
+            const variantTermInMonths = (0, calypso_products_1.getBillingMonthsForTerm)(calypso_products_1.URL_FRIENDLY_TERMS_MAPPING[termMapping.urlFriendlyTerm]);
+            const variantTermMonthlyCost = variantTermPrice / variantTermInMonths;
+            return Math.floor(((lowestTermMonthlyCost - variantTermMonthlyCost) * 100) / lowestTermMonthlyCost);
+        });
+        termWiseMaxDiscount[termMapping.urlFriendlyTerm] = termDiscounts.length
+            ? Math.max(...termDiscounts)
+            : 0;
+    });
+    return termWiseMaxDiscount;
+}
+exports.default = useMaxDiscountsForPlanTerms;
+//# sourceMappingURL=use-max-discounts-for-plan-terms.js.map

package/dist/cjs/components/plan-type-selector/hooks/use-max-discounts-for-plan-terms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-max-discounts-for-plan-terms.js","sourceRoot":"","sources":["../../../../../src/components/plan-type-selector/hooks/use-max-discounts-for-plan-terms.ts"],"names":[],"mappings":"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"}

package/dist/cjs/components/plan-type-selector/index.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_1 = require("@wordpress/element");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const sticky_container_1 = require("../sticky-container");
+const interval_type_selector_1 = require("./components/interval-type-selector");
+require("./style.scss");
+const PlanTypeSelector = ({ kind, enableStickyBehavior = false, layoutClassName, stickyPlanTypeSelectorOffset = 0, ...props }) => {
+    (0, element_1.useEffect)(() => {
+        props.recordTracksEvent?.('calypso_plans_plan_type_selector_view', {
+            kind,
+        });
+    }, []);
+    if (kind === 'interval') {
+        return ((0, jsx_runtime_1.jsx)(sticky_container_1.StickyContainer, { stickyClass: "is-sticky-plan-type-selector", disabled: !enableStickyBehavior, stickyOffset: stickyPlanTypeSelectorOffset, zIndex: 2, children: () => ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)(layoutClassName), children: (0, jsx_runtime_1.jsx)("div", { className: "plan-type-selector", children: (0, jsx_runtime_1.jsx)(interval_type_selector_1.IntervalTypeSelector, { ...props }) }) })) }));
+    }
+    /**
+     * Allowance for other types of toggles that maybe based on other plan attributes such as customer types
+     * Eg: Customer type toggle https://github.com/Automattic/wp-calypso/pull/27125
+     * Potential for a cleanup if such a dynamic is not required and plan type selector will always be based on time intervals, i.e. YAGNI.
+     */
+    return null;
+};
+exports.default = PlanTypeSelector;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/plan-type-selector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/plan-type-selector/index.tsx"],"names":[],"mappings":";;;;AAAA,gDAA+C;AAC/C,wDAAwB;AAExB,0DAAsD;AACtD,gFAA2E;AAG3E,wBAAsB;AAEtB,MAAM,gBAAgB,GAAqD,CAAE,EAC5E,IAAI,EACJ,oBAAoB,GAAG,KAAK,EAC5B,eAAe,EACf,4BAA4B,GAAG,CAAC,EAChC,GAAG,KAAK,EACR,EAAG,EAAE;IACL,IAAA,mBAAS,EAAE,GAAG,EAAE;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAE,uCAAuC,EAAE;YACnE,IAAI;SACJ,CAAE,CAAC;IACL,CAAC,EAAE,EAAE,CAAE,CAAC;IAER,IAAK,IAAI,KAAK,UAAU,EAAG,CAAC;QAC3B,OAAO,CACN,uBAAC,kCAAe,IACf,WAAW,EAAC,8BAA8B,EAC1C,QAAQ,EAAG,CAAE,oBAAoB,EACjC,YAAY,EAAG,4BAA4B,EAC3C,MAAM,EAAG,CAAC,YAER,GAAG,EAAE,CAAC,CACP,gCAAK,SAAS,EAAG,IAAA,cAAI,EAAE,eAAe,CAAE,YACvC,gCAAK,SAAS,EAAC,oBAAoB,YAClC,uBAAC,6CAAoB,OAAM,KAAK,GAAK,GAChC,GACD,CACN,GACgB,CAClB,CAAC;IACH,CAAC;IACD;;;;OAIG;IAEH,OAAO,IAAI,CAAC;AACb,CAAC,CAAC;AAEF,kBAAe,gBAAgB,CAAC"}

package/dist/cjs/components/plan-type-selector/style.scss

@@ -0,0 +1,196 @@
+@import "../../media-queries";
+
+.plan-type-selector {
+	width: fit-content;
+	min-width: 275px;
+	background-color: var(--studio-white);
+	z-index: 2;
+}
+
+.is-sticky-plan-type-selector {
+	.plan-type-selector {
+		@include plan-type-selector-custom-mobile-breakpoint {
+			width: 100%;
+		}
+	}
+}
+
+.plan-type-selector__title {
+	margin-bottom: 20px;
+}
+
+.plan-type-selector .plan-type-selector__interval-type {
+	width: fit-content;
+	margin: 0 auto;
+	.is-sticky-header-row & {
+		margin: unset;
+	}
+
+	.segmented-control.price-toggle {
+		background-color: #f2f2f2;
+		border-radius: 6px; /* stylelint-disable-line scales/radii */
+		margin-top: 16px;
+		margin-top: 0;
+
+		.segmented-control__item {
+			border: 6px;
+			padding: 2px;
+
+			&.is-selected + .segmented-control__item .segmented-control__link {
+				border-left-color: #f2f2f2;
+				&:hover {
+					border-left-color: var(--studio-gray-10);
+				}
+			}
+
+			.segmented-control__link {
+				color: var(--studio-gray-90);
+				font-weight: 500;
+				padding: 6px 11px;
+				border: 1px solid #f2f2f2;
+				border-radius: 5px; /* stylelint-disable-line scales/radii */
+				&:hover {
+					border: 1px solid var(--studio-gray-10);
+					background-color: unset;
+					border-radius: 5px; /* stylelint-disable-line scales/radii */
+				}
+				&:focus {
+					box-shadow: 0 0 0 1px var(--studio-gray-90);
+					outline: none;
+				}
+			}
+
+			&.is-selected .segmented-control__link {
+				color: var(--studio-gray-80);
+				font-weight: 400;
+				border: 0.5px solid rgba(0, 0, 0, 0.04);
+				box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
+				border-radius: 5px; /* stylelint-disable-line scales/radii */
+				background-color: var(--studio-white);
+				&:hover {
+					background-color: var(--studio-white);
+					border-color: rgba(0, 0, 0, 0.04);
+				}
+			}
+
+			.segmented-control__text {
+				white-space: initial;
+			}
+		}
+	}
+}
+
+.plan-type-selector .plan-type-selector__interval-type-dropdown-container {
+	margin: 0 auto;
+	.is-sticky-plan-type-selector & {
+		width: 100%;
+		margin: unset;
+	}
+	.plan-type-selector__interval-type-dropdown {
+		&,
+		&:visited,
+		&:hover span.name {
+			color: var(--color-text);
+		}
+
+		button {
+			height: auto;
+		}
+
+		button .plan-type-selector__interval-type-dropdown-option {
+			padding-right: 32px;
+		}
+
+		.plan-type-selector__interval-type-dropdown-option {
+			display: flex;
+			padding: 13px 13px 13px 16px;
+			font-size: 0.875rem;
+			text-wrap: nowrap;
+
+			.discount {
+				display: flex;
+				border-radius: 3px;
+				line-height: 20px;
+			}
+		}
+
+		.components-flex {
+			width: 100%;
+			.components-input-control__container {
+				.components-custom-select-control__button {
+					min-width: 225px;
+					padding: 0;
+					height: auto;
+					.is-sticky-plan-type-selector & {
+						height: 64px;
+					}
+				}
+				.components-input-control__backdrop {
+					border-color: var(--studio-gray-10);
+				}
+
+				.components-input-control__suffix > div {
+					padding-right: 13px;
+				}
+			}
+		}
+		.components-custom-select-control__menu {
+			margin: 0;
+			border-radius: 0;
+			border-bottom-right-radius: 2px;
+			border-bottom-left-radius: 2px;
+			box-sizing: border-box;
+			border: 1px solid var(--studio-gray-10);
+			margin-top: -2px;
+
+			.is-sticky-plan-type-selector & {
+				border-bottom-right-radius: 0;
+				border-bottom-left-radius: 0;
+			}
+		}
+		.components-custom-select-control__item {
+			grid-template-columns: auto min-content;
+			padding: 0;
+			.is-highlighted {
+				background-color: var(--studio-gray-0);
+			}
+			.a {
+				padding: 11.5px 16px;
+			}
+
+			.components-custom-select-control__item-icon {
+				display: none;
+			}
+		}
+		.components-custom-select-control__label {
+			display: none;
+		}
+	}
+}
+
+div.is-sticky-plan-type-selector .plan-type-selector__interval-type-dropdown {
+	width: 100%;
+	@include plan-type-selector-custom-mobile-breakpoint {
+		// Display above sticky feature and comparison grid plan headers
+		.components-flex {
+			width: 100vw;
+			padding: 0;
+			border-bottom: 1px solid #e0e0e0;
+			border-bottom-right-radius: 0;
+			border-bottom-left-radius: 0;
+		}
+
+		.components-custom-select-control__menu {
+			width: 100%;
+			border: 1px solid #e0e0e0;
+			/*
+			* Override the default popup menu z index so that it does not appear above other sticky elements.
+			* The default z-index is 1_000_000 which is too high
+			*/
+			z-index: 3;
+		}
+		.components-input-control__backdrop.components-input-control__backdrop {
+			border: none;
+		}
+	}
+}

package/dist/cjs/components/plans-2023-tooltip.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Plans2023Tooltip = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@automattic/components");
+const styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
+const react_1 = require("react");
+const touch_detect_1 = require("../lib/touch-detect");
+const HoverAreaContainer = styled_1.default.span `
+	max-width: 220px;
+`;
+const StyledTooltip = (0, styled_1.default)(components_1.Tooltip) `
+	&.tooltip.popover .popover__inner {
+		background: var( --color-masterbar-background );
+		text-align: start;
+		border-radius: 4px;
+		min-height: 32px;
+		width: 210px;
+		align-items: center;
+		font-style: normal;
+		font-weight: 400;
+		font-size: 1em;
+		padding: 8px 10px;
+		top: -8px;
+		overflow-wrap: break-word;
+	}
+`;
+const Plans2023Tooltip = ({ showOnMobile = true, activeTooltipId, setActiveTooltipId, id, text, children, }) => {
+    const tooltipRef = (0, react_1.useRef)(null);
+    const isTouch = (0, touch_detect_1.hasTouch)();
+    if (!text) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    }
+    const getMobileActiveTooltip = () => {
+        // Close tooltip if the user clicks on an open tooltip.
+        if (activeTooltipId === id) {
+            return '';
+        }
+        return id;
+    };
+    const isVisible = activeTooltipId === id;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HoverAreaContainer, { className: "plans-2023-tooltip__hover-area-container", ref: tooltipRef, onMouseEnter: () => !isTouch && setActiveTooltipId(id), onMouseLeave: () => !isTouch && setActiveTooltipId(''), onTouchStart: () => isTouch && setActiveTooltipId(getMobileActiveTooltip()), id: id, children: children }), (0, jsx_runtime_1.jsx)(StyledTooltip, { isVisible: isVisible, position: "top", context: tooltipRef.current, hideArrow: true, showOnMobile: showOnMobile, children: text })] }));
+};
+exports.Plans2023Tooltip = Plans2023Tooltip;
+//# sourceMappingURL=plans-2023-tooltip.js.map

package/dist/cjs/components/plans-2023-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plans-2023-tooltip.js","sourceRoot":"","sources":["../../../src/components/plans-2023-tooltip.tsx"],"names":[],"mappings":";;;;;AAAA,uDAAiD;AACjD,qEAAqC;AAErC,iCAA4E;AAC5E,sDAA+C;AAE/C,MAAM,kBAAkB,GAAG,gBAAM,CAAC,IAAI,CAAA;;CAErC,CAAC;AAEF,MAAM,aAAa,GAAG,IAAA,gBAAM,EAAE,oBAAO,CAAE,CAAA;;;;;;;;;;;;;;;CAetC,CAAC;AAUK,MAAM,gBAAgB,GAAG,CAAE,EACjC,YAAY,GAAG,IAAI,EACnB,eAAe,EACf,kBAAkB,EAClB,EAAE,EACF,IAAI,EACJ,QAAQ,GACe,EAAG,EAAE;IAC5B,MAAM,UAAU,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAE,CAAC;IACpD,MAAM,OAAO,GAAG,IAAA,uBAAQ,GAAE,CAAC;IAE3B,IAAK,CAAE,IAAI,EAAG,CAAC;QACd,OAAO,2DAAI,QAAQ,GAAK,CAAC;IAC1B,CAAC;IAED,MAAM,sBAAsB,GAAG,GAAG,EAAE;QACnC,uDAAuD;QACvD,IAAK,eAAe,KAAK,EAAE,EAAG,CAAC;YAC9B,OAAO,EAAE,CAAC;QACX,CAAC;QAED,OAAO,EAAE,CAAC;IACX,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,eAAe,KAAK,EAAE,CAAC;IAEzC,OAAO,CACN,6DACC,uBAAC,kBAAkB,IAClB,SAAS,EAAC,0CAA0C,EACpD,GAAG,EAAG,UAAU,EAChB,YAAY,EAAG,GAAG,EAAE,CAAC,CAAE,OAAO,IAAI,kBAAkB,CAAE,EAAE,CAAE,EAC1D,YAAY,EAAG,GAAG,EAAE,CAAC,CAAE,OAAO,IAAI,kBAAkB,CAAE,EAAE,CAAE,EAC1D,YAAY,EAAG,GAAG,EAAE,CAAC,OAAO,IAAI,kBAAkB,CAAE,sBAAsB,EAAE,CAAE,EAC9E,EAAE,EAAG,EAAE,YAEL,QAAQ,GACU,EACrB,uBAAC,aAAa,IACb,SAAS,EAAG,SAAS,EACrB,QAAQ,EAAC,KAAK,EACd,OAAO,EAAG,UAAU,CAAC,OAAO,EAC5B,SAAS,QACT,YAAY,EAAG,YAAY,YAEzB,IAAI,GACS,IACd,CACH,CAAC;AACH,CAAC,CAAC;AAjDW,QAAA,gBAAgB,oBAiD3B"}

package/dist/cjs/components/popular-badge.js

@@ -0,0 +1,16 @@
+"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 clsx_1 = tslib_1.__importDefault(require("clsx"));
+const grid_context_1 = require("../grid-context");
+const plan_pill_1 = tslib_1.__importDefault(require("./shared/plan-pill"));
+const PopularBadge = ({ isInSignup, planSlug, additionalClassName }) => {
+    const { gridPlansIndex } = (0, grid_context_1.usePlansGridContext)();
+    const classes = (0, clsx_1.default)('plan-features-2023-grid__popular-badge', (0, calypso_products_1.getPlanClass)(planSlug), additionalClassName);
+    const highlightLabel = gridPlansIndex[planSlug]?.highlightLabel;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: highlightLabel && ((0, jsx_runtime_1.jsx)("div", { className: classes, children: (0, jsx_runtime_1.jsx)(plan_pill_1.default, { isInSignup: isInSignup, children: highlightLabel }) })) }));
+};
+exports.default = PopularBadge;
+//# sourceMappingURL=popular-badge.js.map

package/dist/cjs/components/popular-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popular-badge.js","sourceRoot":"","sources":["../../../src/components/popular-badge.tsx"],"names":[],"mappings":";;;;AAAA,mEAAsE;AACtE,wDAAwB;AACxB,kDAAsD;AACtD,2EAA0C;AAE1C,MAAM,YAAY,GAIZ,CAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,mBAAmB,EAAE,EAAG,EAAE;IACzD,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,kCAAmB,GAAE,CAAC;IACjD,MAAM,OAAO,GAAG,IAAA,cAAI,EACnB,wCAAwC,EACxC,IAAA,+BAAY,EAAE,QAAQ,CAAE,EACxB,mBAAmB,CACnB,CAAC;IACF,MAAM,cAAc,GAAG,cAAc,CAAE,QAAQ,CAAE,EAAE,cAAc,CAAC;IAElE,OAAO,CACN,2DACG,cAAc,IAAI,CACnB,gCAAK,SAAS,EAAG,OAAO,YACvB,uBAAC,mBAAQ,IAAC,UAAU,EAAG,UAAU,YAAK,cAAc,GAAa,GAC5D,CACN,GACC,CACH,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC"}

package/dist/cjs/components/shared/action-button/index.js

@@ -0,0 +1,91 @@
+"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 data_1 = require("@wordpress/data");
+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 plan_button_1 = tslib_1.__importDefault(require("../../plan-button"));
+const storage_1 = require("../../shared/storage");
+require("./style.scss");
+const ActionButton = ({ planSlug, currentSitePlanSlug, visibleGridPlans, availableForPurchase, isStuck, isInSignup, isMonthlyPlan, }) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    const { gridPlansIndex, siteId, helpers: { useAction }, } = (0, grid_context_1.usePlansGridContext)();
+    const { current, planTitle, pricing: { billingPeriod, currencyCode, originalPrice, discountedPrice }, freeTrialPlanSlug, cartItemForPlan, } = gridPlansIndex[planSlug];
+    const currentPlanBillingPeriod = currentSitePlanSlug
+        ? gridPlansIndex[currentSitePlanSlug]?.pricing.billingPeriod
+        : undefined;
+    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' });
+    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 selectedStorageAddOn = storageAddOns?.find((addOn) => {
+        return selectedStorageOptionForPlan && addOn
+            ? addOn.addOnSlug === selectedStorageOptionForPlan
+            : false;
+    });
+    const priceString = (0, i18n_calypso_1.formatCurrency)((discountedPrice.monthly || originalPrice.monthly) ?? 0, currencyCode || 'USD', {
+        stripZeros: true,
+        isSmallestUnit: true,
+    });
+    const { primary: { callback, text, status, variant }, postButtonText, } = useAction({
+        availableForPurchase,
+        billingPeriod,
+        isLargeCurrency,
+        isStuck,
+        planSlug,
+        planTitle,
+        priceString,
+        cartItemForPlan,
+        currentPlanBillingPeriod,
+        selectedStorageAddOn,
+    });
+    const { primary: { callback: freeTrialCallback, text: freeTrialText }, } = useAction({
+        billingPeriod,
+        isFreeTrialAction: true,
+        isLargeCurrency,
+        isStuck,
+        // TODO: Unsure about using free plan as a fallback. We should revisit.
+        planSlug: freeTrialPlanSlug ?? calypso_products_1.PLAN_FREE,
+        planTitle,
+        priceString,
+        cartItemForPlan: { product_slug: freeTrialPlanSlug ?? calypso_products_1.PLAN_FREE },
+        currentPlanBillingPeriod,
+        selectedStorageAddOn,
+    });
+    const busy = status === 'blocked';
+    const defaultStorageOption = (0, storage_1.useDefaultStorageOption)({ planSlug });
+    const canPurchaseStorageAddOns = storageAddOns?.some((storageAddOn) => !storageAddOn?.purchased);
+    const storageAddOnCheckoutHref = storageAddOns?.find((addOn) => selectedStorageOptionForPlan && addOn?.addOnSlug === selectedStorageOptionForPlan)?.checkoutLink;
+    const nonDefaultStorageOptionSelected = selectedStorageOptionForPlan && defaultStorageOption !== selectedStorageOptionForPlan;
+    let actionButton = ((0, jsx_runtime_1.jsx)(plan_button_1.default, { planSlug: planSlug, onClick: callback, busy: busy, disabled: !callback || 'disabled' === status, classes: variant === 'secondary' ? 'is-secondary' : '', children: text }));
+    if (((0, calypso_products_1.isFreePlan)(planSlug) ||
+        (storageAddOns && !canPurchaseStorageAddOns && nonDefaultStorageOptionSelected)) &&
+        (0, calypso_products_1.isP2FreePlan)(planSlug) &&
+        current) {
+        return null;
+    }
+    if (availableForPurchase || current || (0, calypso_products_1.isWpcomEnterpriseGridPlan)(planSlug)) {
+        // TODO: Move the condition below into the useAction hook
+        if (current &&
+            canPurchaseStorageAddOns &&
+            nonDefaultStorageOptionSelected &&
+            !isMonthlyPlan) {
+            actionButton = ((0, jsx_runtime_1.jsx)(plan_button_1.default, { planSlug: planSlug, classes: "is-storage-upgradeable", href: storageAddOnCheckoutHref, busy: busy, children: translate('Upgrade') }));
+        }
+        else {
+            const hasFreeTrialPlan = isInSignup ? !!freeTrialPlanSlug : false;
+            actionButton = hasFreeTrialPlan ? ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-action-button__multi", children: [(0, jsx_runtime_1.jsx)(plan_button_1.default, { planSlug: planSlug, onClick: () => freeTrialCallback(), busy: busy, children: freeTrialText }), !isStuck && ( // along side with the free trial CTA, we also provide an option for purchasing the plan directly here
+                    (0, jsx_runtime_1.jsx)(plan_button_1.default, { planSlug: planSlug, onClick: callback, busy: busy, borderless: true, children: text }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(plan_button_1.default, { planSlug: planSlug, disabled: !callback || 'disabled' === status, busy: busy, onClick: callback, current: current, children: text }), postButtonText && ((0, jsx_runtime_1.jsx)("span", { className: "plans-grid-next-action-button__label", children: postButtonText }))] }));
+        }
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-action-button", children: (0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-action-button__content", children: actionButton }) }));
+};
+exports.default = ActionButton;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/shared/action-button/index.js.map

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

package/dist/cjs/components/shared/action-button/style.scss

@@ -0,0 +1,12 @@
+.plans-grid-next-action-button__label {
+	text-align: center;
+	font-size: 0.75rem;
+	display: block;
+	margin-top: 10px;
+}
+
+.plans-grid-next-action-button__multi {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}