@automattic/plans-grid-next 1.0.0

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

@@ -0,0 +1,42 @@
+import { TERM_ANNUALLY, getPlanSlugForTermVariant, isMonthly, isWpComPlan, } from '@automattic/calypso-products';
+import { Plans } from '@automattic/data-stores';
+import { useState } from '@wordpress/element';
+export default function useMaxDiscount(plans, useCheckPlanAvailabilityForPurchase, siteId) {
+    const [maxDiscount, setMaxDiscount] = useState(0);
+    const wpcomMonthlyPlans = (plans || []).filter(isWpComPlan).filter(isMonthly);
+    const yearlyVariantPlanSlugs = wpcomMonthlyPlans
+        .map((planSlug) => getPlanSlugForTermVariant(planSlug, TERM_ANNUALLY))
+        .filter(Boolean);
+    const monthlyPlansPricing = Plans.usePricingMetaForGridPlans({
+        planSlugs: wpcomMonthlyPlans,
+        siteId,
+        coupon: undefined,
+        useCheckPlanAvailabilityForPurchase,
+    });
+    const yearlyPlansPricing = Plans.usePricingMetaForGridPlans({
+        planSlugs: yearlyVariantPlanSlugs,
+        siteId,
+        coupon: undefined,
+        useCheckPlanAvailabilityForPurchase,
+    });
+    const discounts = wpcomMonthlyPlans.map((planSlug) => {
+        const yearlyVariantPlanSlug = getPlanSlugForTermVariant(planSlug, 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;
+}
+//# sourceMappingURL=use-max-discount.js.map

package/dist/esm/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,OAAO,EAEN,aAAa,EACb,yBAAyB,EACzB,SAAS,EACT,WAAW,GACX,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,CAAC,OAAO,UAAU,cAAc,CACrC,KAAiB,EACjB,mCAA8E,EAC9E,MAAsB;IAEtB,MAAM,CAAE,WAAW,EAAE,cAAc,CAAE,GAAG,QAAQ,CAAE,CAAC,CAAE,CAAC;IACtD,MAAM,iBAAiB,GAAG,CAAE,KAAK,IAAI,EAAE,CAAE,CAAC,MAAM,CAAE,WAAW,CAAE,CAAC,MAAM,CAAE,SAAS,CAAE,CAAC;IACpF,MAAM,sBAAsB,GAAG,iBAAiB;SAC9C,GAAG,CAAE,CAAE,QAAQ,EAAG,EAAE,CAAC,yBAAyB,CAAE,QAAQ,EAAE,aAAa,CAAE,CAAE;SAC3E,MAAM,CAAE,OAAO,CAAgB,CAAC;IAClC,MAAM,mBAAmB,GAAG,KAAK,CAAC,0BAA0B,CAAE;QAC7D,SAAS,EAAE,iBAAiB;QAC5B,MAAM;QACN,MAAM,EAAE,SAAS;QACjB,mCAAmC;KACnC,CAAE,CAAC;IACJ,MAAM,kBAAkB,GAAG,KAAK,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,yBAAyB,CAAE,QAAQ,EAAE,aAAa,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"}

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

@@ -0,0 +1,65 @@
+import { URL_FRIENDLY_TERMS_MAPPING, getBillingMonthsForTerm, getPlan, getPlanMultipleTermsVariantSlugs, getPlanSlugForTermVariant, isWpComPlan, isWpcomEnterpriseGridPlan, } from '@automattic/calypso-products';
+import { Plans } from '@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
+ */
+export default function useMaxDiscountsForPlanTerms(plans, urlFriendlyTerms = [], useCheckPlanAvailabilityForPurchase, siteId) {
+    const termDefinitionsMapping = urlFriendlyTerms.map((urlFriendlyTerm) => ({
+        urlFriendlyTerm,
+        term: URL_FRIENDLY_TERMS_MAPPING[urlFriendlyTerm],
+    }));
+    const terms = termDefinitionsMapping.map(({ term }) => term);
+    const allRelatedPlanSlugs = plans
+        .filter((planSlug) => !isWpcomEnterpriseGridPlan(planSlug))
+        .map((plan) => getPlanMultipleTermsVariantSlugs(plan, terms))
+        .flat()
+        .filter(Boolean)
+        .filter(isWpComPlan);
+    const lowestTerm = terms.reduce((currentLowestTerm, term) => {
+        return getBillingMonthsForTerm(currentLowestTerm) <= getBillingMonthsForTerm(term)
+            ? currentLowestTerm
+            : term;
+    }, terms[0]);
+    const lowestTermInMonths = getBillingMonthsForTerm(lowestTerm);
+    const lowestTermPlanSlugs = allRelatedPlanSlugs.filter((planSlug) => getPlan(planSlug)?.term === lowestTerm);
+    const plansPricing = 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 = getPlanSlugForTermVariant(lowestTermPlanSlug, termMapping.term) ?? '';
+            const variantPlanPricing = plansPricing?.[variantPlanSlug];
+            const variantTermPrice = variantPlanPricing?.discountedPrice?.full || variantPlanPricing?.originalPrice?.full || 0;
+            if (!variantTermPrice) {
+                return 0;
+            }
+            const variantTermInMonths = getBillingMonthsForTerm(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;
+}
+//# sourceMappingURL=use-max-discounts-for-plan-terms.js.map

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from '@wordpress/element';
+import clsx from 'clsx';
+import { StickyContainer } from '../sticky-container';
+import { IntervalTypeSelector } from './components/interval-type-selector';
+import './style.scss';
+const PlanTypeSelector = ({ kind, enableStickyBehavior = false, layoutClassName, stickyPlanTypeSelectorOffset = 0, ...props }) => {
+    useEffect(() => {
+        props.recordTracksEvent?.('calypso_plans_plan_type_selector_view', {
+            kind,
+        });
+    }, []);
+    if (kind === 'interval') {
+        return (_jsx(StickyContainer, { stickyClass: "is-sticky-plan-type-selector", disabled: !enableStickyBehavior, stickyOffset: stickyPlanTypeSelectorOffset, zIndex: 2, children: () => (_jsx("div", { className: clsx(layoutClassName), children: _jsx("div", { className: "plan-type-selector", children: _jsx(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;
+};
+export default PlanTypeSelector;
+//# sourceMappingURL=index.js.map

package/dist/esm/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,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAG3E,OAAO,cAAc,CAAC;AAEtB,MAAM,gBAAgB,GAAqD,CAAE,EAC5E,IAAI,EACJ,oBAAoB,GAAG,KAAK,EAC5B,eAAe,EACf,4BAA4B,GAAG,CAAC,EAChC,GAAG,KAAK,EACR,EAAG,EAAE;IACL,SAAS,CAAE,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,KAAC,eAAe,IACf,WAAW,EAAC,8BAA8B,EAC1C,QAAQ,EAAG,CAAE,oBAAoB,EACjC,YAAY,EAAG,4BAA4B,EAC3C,MAAM,EAAG,CAAC,YAER,GAAG,EAAE,CAAC,CACP,cAAK,SAAS,EAAG,IAAI,CAAE,eAAe,CAAE,YACvC,cAAK,SAAS,EAAC,oBAAoB,YAClC,KAAC,oBAAoB,OAAM,KAAK,GAAK,GAChC,GACD,CACN,GACgB,CAClB,CAAC;IACH,CAAC;IACD;;;;OAIG;IAEH,OAAO,IAAI,CAAC;AACb,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/esm/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/esm/components/plans-2023-tooltip.js

@@ -0,0 +1,41 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from '@automattic/components';
+import styled from '@emotion/styled';
+import { useRef } from 'react';
+import { hasTouch } from '../lib/touch-detect';
+const HoverAreaContainer = styled.span `
+	max-width: 220px;
+`;
+const StyledTooltip = styled(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;
+	}
+`;
+export const Plans2023Tooltip = ({ showOnMobile = true, activeTooltipId, setActiveTooltipId, id, text, children, }) => {
+    const tooltipRef = useRef(null);
+    const isTouch = hasTouch();
+    if (!text) {
+        return _jsx(_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 (_jsxs(_Fragment, { children: [_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 }), _jsx(StyledTooltip, { isVisible: isVisible, position: "top", context: tooltipRef.current, hideArrow: true, showOnMobile: showOnMobile, children: text })] }));
+};
+//# sourceMappingURL=plans-2023-tooltip.js.map

package/dist/esm/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,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAA+C,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAA;;CAErC,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAE,OAAO,CAAE,CAAA;;;;;;;;;;;;;;;CAetC,CAAC;AAUF,MAAM,CAAC,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,MAAM,CAAoB,IAAI,CAAE,CAAC;IACpD,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC;IAE3B,IAAK,CAAE,IAAI,EAAG,CAAC;QACd,OAAO,4BAAI,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,8BACC,KAAC,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,KAAC,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"}

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { getPlanClass } from '@automattic/calypso-products';
+import clsx from 'clsx';
+import { usePlansGridContext } from '../grid-context';
+import PlanPill from './shared/plan-pill';
+const PopularBadge = ({ isInSignup, planSlug, additionalClassName }) => {
+    const { gridPlansIndex } = usePlansGridContext();
+    const classes = clsx('plan-features-2023-grid__popular-badge', getPlanClass(planSlug), additionalClassName);
+    const highlightLabel = gridPlansIndex[planSlug]?.highlightLabel;
+    return (_jsx(_Fragment, { children: highlightLabel && (_jsx("div", { className: classes, children: _jsx(PlanPill, { isInSignup: isInSignup, children: highlightLabel }) })) }));
+};
+export default PopularBadge;
+//# sourceMappingURL=popular-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popular-badge.js","sourceRoot":"","sources":["../../../src/components/popular-badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAY,MAAM,8BAA8B,CAAC;AACtE,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,QAAQ,MAAM,oBAAoB,CAAC;AAE1C,MAAM,YAAY,GAIZ,CAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,mBAAmB,EAAE,EAAG,EAAE;IACzD,MAAM,EAAE,cAAc,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACjD,MAAM,OAAO,GAAG,IAAI,CACnB,wCAAwC,EACxC,YAAY,CAAE,QAAQ,CAAE,EACxB,mBAAmB,CACnB,CAAC;IACF,MAAM,cAAc,GAAG,cAAc,CAAE,QAAQ,CAAE,EAAE,cAAc,CAAC;IAElE,OAAO,CACN,4BACG,cAAc,IAAI,CACnB,cAAK,SAAS,EAAG,OAAO,YACvB,KAAC,QAAQ,IAAC,UAAU,EAAG,UAAU,YAAK,cAAc,GAAa,GAC5D,CACN,GACC,CACH,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isP2FreePlan, isFreePlan, PLAN_FREE, isWpcomEnterpriseGridPlan, } from '@automattic/calypso-products';
+import { AddOns, WpcomPlansUI } from '@automattic/data-stores';
+import { useSelect } from '@wordpress/data';
+import { formatCurrency, 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 PlanButton from '../../plan-button';
+import { useDefaultStorageOption } from '../../shared/storage';
+import './style.scss';
+const ActionButton = ({ planSlug, currentSitePlanSlug, visibleGridPlans, availableForPurchase, isStuck, isInSignup, isMonthlyPlan, }) => {
+    const translate = useTranslate();
+    const { gridPlansIndex, siteId, helpers: { useAction }, } = usePlansGridContext();
+    const { current, planTitle, pricing: { billingPeriod, currencyCode, originalPrice, discountedPrice }, freeTrialPlanSlug, cartItemForPlan, } = gridPlansIndex[planSlug];
+    const currentPlanBillingPeriod = currentSitePlanSlug
+        ? gridPlansIndex[currentSitePlanSlug]?.pricing.billingPeriod
+        : undefined;
+    const { prices } = usePlanPricingInfoFromGridPlans({
+        gridPlans: visibleGridPlans,
+    });
+    const isLargeCurrency = useIsLargeCurrency({ prices, currencyCode: currencyCode || 'USD' });
+    const storageAddOns = AddOns.useStorageAddOns({ siteId });
+    const selectedStorageOptionForPlan = useSelect((select) => select(WpcomPlansUI.store).getSelectedStorageOptionForPlan(planSlug, siteId), [planSlug, siteId]);
+    const selectedStorageAddOn = storageAddOns?.find((addOn) => {
+        return selectedStorageOptionForPlan && addOn
+            ? addOn.addOnSlug === selectedStorageOptionForPlan
+            : false;
+    });
+    const priceString = 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 ?? PLAN_FREE,
+        planTitle,
+        priceString,
+        cartItemForPlan: { product_slug: freeTrialPlanSlug ?? PLAN_FREE },
+        currentPlanBillingPeriod,
+        selectedStorageAddOn,
+    });
+    const busy = status === 'blocked';
+    const defaultStorageOption = 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 = (_jsx(PlanButton, { planSlug: planSlug, onClick: callback, busy: busy, disabled: !callback || 'disabled' === status, classes: variant === 'secondary' ? 'is-secondary' : '', children: text }));
+    if ((isFreePlan(planSlug) ||
+        (storageAddOns && !canPurchaseStorageAddOns && nonDefaultStorageOptionSelected)) &&
+        isP2FreePlan(planSlug) &&
+        current) {
+        return null;
+    }
+    if (availableForPurchase || current || isWpcomEnterpriseGridPlan(planSlug)) {
+        // TODO: Move the condition below into the useAction hook
+        if (current &&
+            canPurchaseStorageAddOns &&
+            nonDefaultStorageOptionSelected &&
+            !isMonthlyPlan) {
+            actionButton = (_jsx(PlanButton, { planSlug: planSlug, classes: "is-storage-upgradeable", href: storageAddOnCheckoutHref, busy: busy, children: translate('Upgrade') }));
+        }
+        else {
+            const hasFreeTrialPlan = isInSignup ? !!freeTrialPlanSlug : false;
+            actionButton = hasFreeTrialPlan ? (_jsxs("div", { className: "plans-grid-next-action-button__multi", children: [_jsx(PlanButton, { 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
+                    _jsx(PlanButton, { planSlug: planSlug, onClick: callback, busy: busy, borderless: true, children: text }))] })) : (_jsxs(_Fragment, { children: [_jsx(PlanButton, { planSlug: planSlug, disabled: !callback || 'disabled' === status, busy: busy, onClick: callback, current: current, children: text }), postButtonText && (_jsx("span", { className: "plans-grid-next-action-button__label", children: postButtonText }))] }));
+        }
+    }
+    return (_jsx("div", { className: "plans-grid-next-action-button", children: _jsx("div", { className: "plans-grid-next-action-button__content", children: actionButton }) }));
+};
+export default ActionButton;
+//# sourceMappingURL=index.js.map

package/dist/esm/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/esm/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;
+}

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isWpcomEnterpriseGridPlan, isWooExpressPlan, isFreePlan, } from '@automattic/calypso-products';
+import styled from '@emotion/styled';
+import { useTranslate, formatCurrency } from 'i18n-calypso';
+import { usePlansGridContext } from '../../../grid-context';
+import usePlanBillingDescription from '../../../hooks/data-store/use-plan-billing-description';
+const DiscountPromotion = styled.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 = useTranslate();
+    if (!showRefundPeriod || isFreePlan(planSlug)) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("br", {}), translate('Refundable within %(dayCount)s days. No questions asked.', {
+                args: {
+                    dayCount: billingPeriod === 31 ? 7 : 14,
+                },
+            })] }));
+};
+const BillingTimeframe = ({ showRefundPeriod, planSlug }) => {
+    const translate = useTranslate();
+    const { helpers, gridPlansIndex, coupon, siteId } = usePlansGridContext();
+    const { isMonthlyPlan, billingTimeframe, pricing } = gridPlansIndex[planSlug];
+    const { introOffer, billingPeriod } = pricing;
+    const planBillingDescription = usePlanBillingDescription({
+        siteId,
+        planSlug,
+        pricing,
+        isMonthlyPlan,
+        coupon,
+        useCheckPlanAvailabilityForPurchase: helpers?.useCheckPlanAvailabilityForPurchase,
+    });
+    const description = planBillingDescription || billingTimeframe;
+    if (isWooExpressPlan(planSlug) &&
+        isMonthlyPlan &&
+        (!introOffer || introOffer.isOfferComplete)) {
+        return (_jsxs("div", { children: [_jsx("div", { children: billingTimeframe }), _jsx(DiscountPromotion, { children: planBillingDescription })] }));
+    }
+    if (isWpcomEnterpriseGridPlan(planSlug)) {
+        const price = formatCurrency(25000, 'USD');
+        return (_jsx("div", { className: "plans-grid-next__billing-timeframe-vip-price", children: translate('Starts at {{b}}%(price)s{{/b}} yearly', {
+                args: { price },
+                components: { b: _jsx("b", {}) },
+                comment: 'Translators: the price is in US dollars for all users (US$25,000)',
+            }) }));
+    }
+    return (_jsxs("div", { children: [description, _jsx(RefundNotice, { showRefundPeriod: showRefundPeriod, planSlug: planSlug, billingPeriod: billingPeriod })] }));
+};
+export default BillingTimeframe;
+//# sourceMappingURL=index.js.map

package/dist/esm/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,OAAO,EACN,yBAAyB,EAEzB,gBAAgB,EAChB,UAAU,GACV,MAAM,8BAA8B,CAAC;AACtC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,yBAAyB,MAAM,wDAAwD,CAAC;AAG/F,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMnC,CAAC;AAQF,MAAM,YAAY,GAAG,CAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,aAAa,EAAqB,EAAG,EAAE;IAC3F,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,IAAK,CAAE,gBAAgB,IAAI,UAAU,CAAE,QAAQ,CAAE,EAAG,CAAC;QACpD,OAAO,IAAI,CAAC;IACb,CAAC;IAED,OAAO,CACN,8BACC,cAAM,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,YAAY,EAAE,CAAC;IACjC,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,mBAAmB,EAAE,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,yBAAyB,CAAE;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,gBAAgB,CAAE,QAAQ,CAAE;QAC5B,aAAa;QACb,CAAE,CAAE,UAAU,IAAI,UAAU,CAAC,eAAe,CAAE,EAC7C,CAAC;QACF,OAAO,CACN,0BACC,wBAAO,gBAAgB,GAAQ,EAC/B,KAAC,iBAAiB,cAAG,sBAAsB,GAAsB,IAC5D,CACN,CAAC;IACH,CAAC;IAED,IAAK,yBAAyB,CAAE,QAAQ,CAAE,EAAG,CAAC;QAC7C,MAAM,KAAK,GAAG,cAAc,CAAE,KAAK,EAAE,KAAK,CAAE,CAAC;QAE7C,OAAO,CACN,cAAK,SAAS,EAAC,8CAA8C,YAC1D,SAAS,CAAE,uCAAuC,EAAE;gBACrD,IAAI,EAAE,EAAE,KAAK,EAAE;gBACf,UAAU,EAAE,EAAE,CAAC,EAAE,aAAK,EAAE;gBACxB,OAAO,EAAE,mEAAmE;aAC5E,CAAE,GACE,CACN,CAAC;IACH,CAAC;IAED,OAAO,CACN,0BACG,WAAW,EACb,KAAC,YAAY,IACZ,gBAAgB,EAAG,gBAAgB,EACnC,QAAQ,EAAG,QAAQ,EACnB,aAAa,EAAG,aAAa,GAC5B,IACG,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from '@wordpress/element';
+const HeaderPriceContext = createContext({});
+const HeaderPriceContextProvider = ({ children }) => {
+    const [isAnyPlanPriceDiscounted, setIsAnyPlanPriceDiscounted] = useState(false);
+    return (_jsx(HeaderPriceContext.Provider, { value: { isAnyPlanPriceDiscounted, setIsAnyPlanPriceDiscounted }, children: children }));
+};
+export const useHeaderPriceContext = () => useContext(HeaderPriceContext);
+export default HeaderPriceContextProvider;
+//# sourceMappingURL=header-price-context.js.map

package/dist/esm/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,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAOzE,MAAM,kBAAkB,GAAG,aAAa,CAAwB,EAAwB,CAAE,CAAC;AAE3F,MAAM,0BAA0B,GAAG,CAAE,EAAE,QAAQ,EAAiC,EAAG,EAAE;IACpF,MAAM,CAAE,wBAAwB,EAAE,2BAA2B,CAAE,GAAG,QAAQ,CAAE,KAAK,CAAE,CAAC;IAEpF,OAAO,CACN,KAAC,kBAAkB,CAAC,QAAQ,IAC3B,KAAK,EAAG,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,YAE/D,QAAQ,GACmB,CAC9B,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAuB,EAAE,CAAC,UAAU,CAAE,kBAAkB,CAAE,CAAC;AAEhG,eAAe,0BAA0B,CAAC"}