@automattic/plans-grid-next 1.0.0

package/dist/cjs/components/features.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const calypso_products_1 = require("@automattic/calypso-products");
+const components_1 = require("@automattic/components");
+const styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const i18n_calypso_1 = require("i18n-calypso");
+const grid_context_1 = require("../grid-context");
+const item_1 = require("./item");
+const plans_2023_tooltip_1 = require("./plans-2023-tooltip");
+const SubdomainSuggestion = styled_1.default.div `
+	.is-domain-name {
+		position: absolute;
+		top: -15px;
+		color: var( --studio-gray-50 );
+		text-decoration: line-through;
+		max-width: 80%;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+`;
+const FreePlanCustomDomainFeature = ({ paidDomainName, generatedWPComSubdomain, isCustomDomainAllowedOnFreePlan }) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    const isLoading = generatedWPComSubdomain?.isLoading;
+    return ((0, jsx_runtime_1.jsxs)(SubdomainSuggestion, { children: [isLoading && (0, jsx_runtime_1.jsx)(components_1.LoadingPlaceholder, {}), !isLoading &&
+                (isCustomDomainAllowedOnFreePlan ? ((0, jsx_runtime_1.jsx)("div", { children: translate('%s will be a redirect', {
+                        args: [paidDomainName],
+                        comment: '%s is a domain name.',
+                    }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "is-domain-name", children: paidDomainName }), (0, jsx_runtime_1.jsx)("div", { children: generatedWPComSubdomain?.result?.domain_name })] })))] }));
+};
+const PlanFeatures2023GridFeatures = ({ features, planSlug, paidDomainName, generatedWPComSubdomain, hideUnavailableFeatures, selectedFeature, isCustomDomainAllowedOnFreePlan, activeTooltipId, setActiveTooltipId, }) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    const { enableFeatureTooltips } = (0, grid_context_1.usePlansGridContext)();
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: features.map((currentFeature, featureIndex) => {
+            if (hideUnavailableFeatures && !currentFeature.availableForCurrentPlan) {
+                return null;
+            }
+            const key = `${currentFeature.getSlug()}-${planSlug}-${featureIndex}`;
+            const isFreePlanAndCustomDomainFeature = currentFeature.getSlug() === calypso_products_1.FEATURE_CUSTOM_DOMAIN && (0, calypso_products_1.isFreePlan)(planSlug);
+            if (isFreePlanAndCustomDomainFeature && !paidDomainName) {
+                return null;
+            }
+            const isHighlightedFeature = selectedFeature
+                ? currentFeature.getSlug() === selectedFeature
+                : currentFeature?.isHighlighted ||
+                    (currentFeature.getSlug() === calypso_products_1.FEATURE_CUSTOM_DOMAIN && paidDomainName) ||
+                    !currentFeature.availableForCurrentPlan;
+            const divClasses = (0, clsx_1.default)('', (0, calypso_products_1.getPlanClass)(planSlug), {
+                'is-last-feature': featureIndex + 1 === features.length,
+            });
+            const spanClasses = (0, clsx_1.default)('plan-features-2023-grid__item-info', {
+                'is-annual-plan-feature': currentFeature.availableOnlyForAnnualPlans,
+                'is-available': isFreePlanAndCustomDomainFeature || currentFeature.availableForCurrentPlan,
+            });
+            const itemTitleClasses = (0, clsx_1.default)('plan-features-2023-grid__item-title', {
+                'is-bold': isHighlightedFeature,
+            });
+            return ((0, jsx_runtime_1.jsx)("div", { className: divClasses, children: (0, jsx_runtime_1.jsx)(item_1.PlanFeaturesItem, { children: (0, jsx_runtime_1.jsx)("span", { className: spanClasses, children: (0, jsx_runtime_1.jsx)("span", { className: itemTitleClasses, children: isFreePlanAndCustomDomainFeature ? ((0, jsx_runtime_1.jsx)(plans_2023_tooltip_1.Plans2023Tooltip, { text: enableFeatureTooltips
+                                    ? translate('%s is not included', {
+                                        args: [paidDomainName],
+                                        comment: '%s is a domain name.',
+                                    })
+                                    : undefined, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, id: key, children: (0, jsx_runtime_1.jsx)(FreePlanCustomDomainFeature, { paidDomainName: paidDomainName, generatedWPComSubdomain: generatedWPComSubdomain, isCustomDomainAllowedOnFreePlan: isCustomDomainAllowedOnFreePlan }, key) })) : ((0, jsx_runtime_1.jsx)(plans_2023_tooltip_1.Plans2023Tooltip, { text: enableFeatureTooltips ? currentFeature.getDescription?.() : undefined, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, id: key, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [currentFeature.getTitle({
+                                            domainName: paidDomainName,
+                                        }), currentFeature?.getSubFeatureObjects?.()?.length ? ((0, jsx_runtime_1.jsx)("ul", { className: "plan-features-2023-grid__item-sub-feature-list", children: currentFeature.getSubFeatureObjects().map((subFeature) => ((0, jsx_runtime_1.jsx)("li", { children: subFeature?.getTitle() }))) })) : null] }) })) }) }, key) }) }, key));
+        }) }));
+};
+exports.default = PlanFeatures2023GridFeatures;
+//# sourceMappingURL=features.js.map

package/dist/cjs/components/features.js.map

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

package/dist/cjs/components/item.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlanFeaturesItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function PlanFeaturesItem(props) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "plan-features-2023-grid__item plan-features-2023-grid__item-available", children: (0, jsx_runtime_1.jsx)("div", { className: "plan-features-2023-grid__item-info-container", children: props.children }) }));
+}
+exports.PlanFeaturesItem = PlanFeaturesItem;
+//# sourceMappingURL=item.js.map

package/dist/cjs/components/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../src/components/item.tsx"],"names":[],"mappings":";;;;AAEA,SAAgB,gBAAgB,CAAE,KAA+B;IAChE,OAAO,CACN,gCAAK,SAAS,EAAC,uEAAuE,YACrF,gCAAK,SAAS,EAAC,8CAA8C,YAAG,KAAK,CAAC,QAAQ,GAAQ,GACjF,CACN,CAAC;AACH,CAAC;AAND,4CAMC"}

package/dist/cjs/components/plan-button/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const calypso_products_1 = require("@automattic/calypso-products");
+const components_1 = require("@automattic/components");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+require("./style.scss");
+// TODO:
+// The prop should simply be declared by extending the
+// props of Button, instead of listing everything needed like this.
+const PlanButton = ({ planSlug, children, classes, href, onClick = () => { }, busy = false, borderless = false, current = false, disabled = false, isStuck = false, isLargeCurrency = false, }) => {
+    const className = (0, clsx_1.default)(classes, 'plan-features-2023-grid__actions-button', planSlug ? (0, calypso_products_1.getPlanClass)(planSlug) : 'is-default', {
+        'is-current-plan': current,
+        'is-stuck': isStuck,
+        'is-large-currency': isLargeCurrency,
+    });
+    return ((0, jsx_runtime_1.jsx)(components_1.Button, { className: className, onClick: onClick, busy: busy, borderless: borderless, disabled: disabled, href: href, children: children }));
+};
+exports.default = PlanButton;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/plan-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/plan-button/index.tsx"],"names":[],"mappings":";;;;AAAA,mEAA2E;AAC3E,uDAAgD;AAChD,wDAAwB;AACxB,wBAAsB;AAEtB,QAAQ;AACR,sDAAsD;AACtD,mEAAmE;AACnE,MAAM,UAAU,GAAG,CAAE,EACpB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,IAAI,GAAG,KAAK,EACZ,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,eAAe,GAAG,KAAK,GAavB,EAAG,EAAE;IACL,MAAM,SAAS,GAAG,IAAA,cAAI,EACrB,OAAO,EACP,yCAAyC,EACzC,QAAQ,CAAC,CAAC,CAAC,IAAA,+BAAY,EAAE,QAAQ,CAAE,CAAC,CAAC,CAAC,YAAY,EAClD;QACC,iBAAiB,EAAE,OAAO;QAC1B,UAAU,EAAE,OAAO;QACnB,mBAAmB,EAAE,eAAe;KACpC,CACD,CAAC;IAEF,OAAO,CACN,uBAAC,mBAAM,IACN,SAAS,EAAG,SAAS,EACrB,OAAO,EAAG,OAAO,EACjB,IAAI,EAAG,IAAI,EACX,UAAU,EAAG,UAAU,EACvB,QAAQ,EAAG,QAAQ,EACnB,IAAI,EAAG,IAAI,YAET,QAAQ,GACF,CACT,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC"}

package/dist/cjs/components/plan-button/style.scss

@@ -0,0 +1,179 @@
+@import "@automattic/onboarding/styles/mixins";
+
+.button.plan-features-2023-grid__actions-button {
+	line-height: 20px;
+	border-radius: 4px;
+	padding: 10px 12px;
+	border: unset;
+	text-align: center;
+	width: 100%;
+	color: var(--color-text-inverted);
+
+	&:hover {
+		color: var(--color-text-inverted);
+	}
+
+	&.is-free-plan {
+		background-color: var(--studio-wordpress-blue-50);
+
+		&:focus {
+			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-wordpress-blue-50);
+		}
+
+		&:hover {
+			background-color: var(--studio-wordpress-blue-60);
+		}
+
+	}
+
+	&.is-personal-plan {
+		background-color: var(--studio-wordpress-blue-60);
+
+		&:focus {
+			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-wordpress-blue-60);
+		}
+
+		&:hover {
+			background-color: var(--studio-wordpress-blue-70);
+		}
+	}
+
+	&.is-premium-plan {
+		background-color: var(--studio-wordpress-blue-70);
+
+		&:focus {
+			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-wordpress-blue-70);
+		}
+
+		&:hover {
+			background-color: var(--studio-wordpress-blue-80);
+		}
+	}
+
+	&.is-business-plan {
+		background-color: var(--studio-woocommerce-purple-50);
+
+		&:focus {
+			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-50);
+		}
+
+		&:hover {
+			background-color: var(--studio-woocommerce-purple-70);
+		}
+
+		+ .button.is-borderless {
+			background: transparent;
+			font-size: $font-body-small;
+			color: var(--studio-woocommerce-purple-50);
+			text-decoration: none;
+
+			&:focus {
+				box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-50);
+			}
+		}
+	}
+
+	&.is-wooexpress-medium-plan {
+		background-color: var(--color-accent);
+		color: var(--color-text-inverted);
+		font-weight: 400;
+
+		&:focus {
+			box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
+		}
+	}
+
+	&.is-wooexpress-small-plan {
+		background-color: var(--color-surface);
+		color: var(--color-accent);
+		border: 1px solid var(--color-accent);
+		font-weight: 400;
+	}
+
+	&.is-wooexpress-plus-plan {
+		display: inline-block;
+		width: 85%;
+		text-align: center;
+		background-color: var(--color-surface);
+		color: var(--color-accent);
+		border: 1px solid  var(--color-accent);
+		font-weight: 400;
+	}
+
+	&.is-ecommerce-plan {
+		background-color: var(--studio-woocommerce-purple-70);
+
+		&:focus {
+			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-70);
+		}
+
+		&:hover {
+			background-color: var(--studio-woocommerce-purple-80);
+		}
+	}
+
+	&.is-wpcom-enterprise-grid-plan {
+		background-color: var(--studio-gray-80);
+
+		&:focus {
+			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-gray-80);
+		}
+
+		&:hover {
+			background-color: var(--studio-gray-90);
+		}
+	}
+
+	&.is-p2-plus-plan {
+		background-color: var(--color-accent);
+		color: var(--color-text-inverted);
+
+		&:focus {
+			box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
+		}
+	}
+
+	// Currently these two are identical, but the both are kept
+	// since it's too early to say the current plan button will always
+	// be the default style, i.e. the secondary CTA button style
+	&.is-secondary,
+	&.is-current-plan,
+	&.is-default {
+		background-color: var(--studio-white);
+		color: var(--studio-gray-100);
+		box-shadow: inset 0 0 0 1px var(--studio-gray-10);
+
+		&.is-storage-upgradeable {
+			background-color: var(--color-accent);
+			color: var(--color-text-inverted);
+		}
+
+		&:hover {
+			box-shadow: inset 0 0 0 1px var(--studio-gray-80);
+			background-color: var(--studio-white);
+		}
+	}
+
+	&.disabled,
+	&[disabled] {
+		background-color: var(--studio-white);
+		color: var(--color-neutral-light);
+		box-shadow: inset 0 0 0 1px #e0e0e0;
+	}
+
+	&.is-stuck.is-large-currency {
+		height: 48px;
+		line-height: 15px;
+		padding: 9px 12px;
+	}
+
+	&.is-borderless {
+		box-shadow: unset;
+		text-decoration: underline;
+		font-weight: 600;
+
+		&:hover {
+			box-shadow: unset;
+		}
+	}
+}

package/dist/cjs/components/plan-div-td-container.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PlanDivOrTdContainer = (props) => {
+    const { children, isTableCell, ...otherProps } = props;
+    return isTableCell ? ((0, jsx_runtime_1.jsx)("td", { ...otherProps, children: children })) : ((0, jsx_runtime_1.jsx)("div", { ...otherProps, children: children }));
+};
+exports.default = PlanDivOrTdContainer;
+//# sourceMappingURL=plan-div-td-container.js.map

package/dist/cjs/components/plan-div-td-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plan-div-td-container.js","sourceRoot":"","sources":["../../../src/components/plan-div-td-container.tsx"],"names":[],"mappings":";;;AAAA,MAAM,oBAAoB,GAAG,CAC5B,KAG6C,EAC/B,EAAE;IAChB,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACvD,OAAO,WAAW,CAAC,CAAC,CAAC,CACpB,kCAAS,UAAU,YAAK,QAAQ,GAAO,CACvC,CAAC,CAAC,CAAC,CACH,mCAAU,UAAU,YAAK,QAAQ,GAAQ,CACzC,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,oBAAoB,CAAC"}

package/dist/cjs/components/plan-logo.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const calypso_products_1 = require("@automattic/calypso-products");
+const components_1 = require("@automattic/components");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const i18n_calypso_1 = require("i18n-calypso");
+const grid_context_1 = require("../grid-context");
+const use_highlight_adjacency_matrix_1 = tslib_1.__importDefault(require("../hooks/use-highlight-adjacency-matrix"));
+const use_manage_tooltip_toggle_1 = require("../hooks/use-manage-tooltip-toggle");
+const plan_div_td_container_1 = tslib_1.__importDefault(require("./plan-div-td-container"));
+const plans_2023_tooltip_1 = require("./plans-2023-tooltip");
+const popular_badge_1 = tslib_1.__importDefault(require("./popular-badge"));
+const PlanLogo = ({ planSlug, isInSignup, renderedGridPlans, isTableCell, planIndex }) => {
+    const [activeTooltipId, setActiveTooltipId] = (0, use_manage_tooltip_toggle_1.useManageTooltipToggle)();
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    const shouldShowWooLogo = (0, calypso_products_1.isEcommercePlan)(planSlug) && !(0, calypso_products_1.isWooExpressPlan)(planSlug);
+    const { gridPlansIndex } = (0, grid_context_1.usePlansGridContext)();
+    const { current } = gridPlansIndex[planSlug];
+    const highlightAdjacencyMatrix = (0, use_highlight_adjacency_matrix_1.default)({
+        renderedGridPlans,
+    });
+    const headerClasses = (0, clsx_1.default)('plan-features-2023-grid__header-logo', (0, calypso_products_1.getPlanClass)(planSlug));
+    const tableItemClasses = (0, clsx_1.default)('plan-features-2023-grid__table-item', {
+        'popular-plan-parent-class': gridPlansIndex[planSlug]?.highlightLabel,
+        'is-left-of-highlight': highlightAdjacencyMatrix[planSlug]
+            ?.leftOfHighlight,
+        'is-right-of-highlight': highlightAdjacencyMatrix[planSlug]
+            ?.rightOfHighlight,
+        'is-only-highlight': highlightAdjacencyMatrix[planSlug]
+            ?.isOnlyHighlight,
+        'is-current-plan': current,
+        'is-first-in-row': planIndex === 0,
+        'is-last-in-row': planIndex === renderedGridPlans.length - 1,
+    });
+    const popularBadgeClasses = (0, clsx_1.default)({
+        'with-plan-logo': !((0, calypso_products_1.isFreePlan)(planSlug) ||
+            (0, calypso_products_1.isPersonalPlan)(planSlug) ||
+            (0, calypso_products_1.isPremiumPlan)(planSlug)),
+    });
+    return ((0, jsx_runtime_1.jsxs)(plan_div_td_container_1.default, { className: tableItemClasses, isTableCell: isTableCell, children: [(0, jsx_runtime_1.jsx)(popular_badge_1.default, { isInSignup: isInSignup, planSlug: planSlug, additionalClassName: popularBadgeClasses }), (0, jsx_runtime_1.jsxs)("header", { className: headerClasses, children: [(0, calypso_products_1.isBusinessPlan)(planSlug) && ((0, jsx_runtime_1.jsx)(plans_2023_tooltip_1.Plans2023Tooltip, { text: translate('WP Cloud gives you the tools you need to add scalable, highly available, extremely fast WordPress hosting.'), id: "wp-cloud-logo", setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, children: (0, jsx_runtime_1.jsx)(components_1.CloudLogo, {}) })), shouldShowWooLogo && ((0, jsx_runtime_1.jsx)(plans_2023_tooltip_1.Plans2023Tooltip, { text: translate('Make your online store a reality with the power of WooCommerce.'), id: "woo-logo", setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, children: (0, jsx_runtime_1.jsx)(components_1.WooLogo, {}) })), (0, calypso_products_1.isWpcomEnterpriseGridPlan)(planSlug) && ((0, jsx_runtime_1.jsx)(plans_2023_tooltip_1.Plans2023Tooltip, { text: translate('The trusted choice for enterprise WordPress hosting.'), id: "enterprise-logo", setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, children: (0, jsx_runtime_1.jsx)(components_1.VIPLogo, {}) }))] })] }, planSlug));
+};
+exports.default = PlanLogo;
+//# sourceMappingURL=plan-logo.js.map

package/dist/cjs/components/plan-logo.js.map

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

package/dist/cjs/components/plan-type-selector/components/interval-type-dropdown.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntervalTypeDropdown = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const calypso_analytics_1 = require("@automattic/calypso-analytics");
+const components_1 = require("@wordpress/components");
+const react_1 = require("react");
+const dropdown_option_1 = tslib_1.__importDefault(require("../../dropdown-option"));
+const use_interval_options_1 = tslib_1.__importDefault(require("../hooks/use-interval-options"));
+const IntervalTypeDropdown = (props) => {
+    const { hideDiscount, intent, intervalType, displayedIntervals, onPlanIntervalUpdate, isInSignup, } = props;
+    const supportedIntervalType = (displayedIntervals.includes(intervalType) ? intervalType : 'yearly');
+    const optionsList = (0, use_interval_options_1.default)(props);
+    const hasOpenedDropdown = (0, react_1.useRef)(false);
+    const selectOptionsList = Object.values(optionsList).map((option) => ({
+        key: option.key,
+        name: ((0, jsx_runtime_1.jsx)(dropdown_option_1.default, { className: "plan-type-selector__interval-type-dropdown-option", title: option.name, children: option.discountText && !hideDiscount ? ((0, jsx_runtime_1.jsxs)("span", { className: "discount", children: [" ", option.discountText, " "] })) : null })),
+    }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "plan-type-selector__interval-type-dropdown-container", children: (0, jsx_runtime_1.jsx)(components_1.CustomSelectControl, { __next40pxDefaultSize: true, onFocus: () => {
+                if (!hasOpenedDropdown.current) {
+                    (0, calypso_analytics_1.recordTracksEvent)('calypso_plans_plan_type_selector_open', {
+                        plans_intent: intent,
+                        is_in_signup: isInSignup,
+                    });
+                    hasOpenedDropdown.current = true;
+                }
+            }, className: "plan-type-selector__interval-type-dropdown", label: "", options: selectOptionsList, value: selectOptionsList.find(({ key }) => key === supportedIntervalType), onChange: ({ selectedItem: { key: intervalType }, }) => {
+                (0, calypso_analytics_1.recordTracksEvent)('calypso_plans_plan_type_selector_option_change', {
+                    interval_type: intervalType,
+                    plans_intent: intent,
+                    is_in_signup: isInSignup,
+                });
+                onPlanIntervalUpdate &&
+                    onPlanIntervalUpdate(intervalType);
+            } }) }));
+};
+exports.IntervalTypeDropdown = IntervalTypeDropdown;
+//# sourceMappingURL=interval-type-dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"interval-type-dropdown.js","sourceRoot":"","sources":["../../../../../src/components/plan-type-selector/components/interval-type-dropdown.tsx"],"names":[],"mappings":";;;;;AAAA,qEAAkE;AAClE,sDAA4D;AAC5D,iCAA+B;AAC/B,oFAAmD;AACnD,iGAA+D;AAGxD,MAAM,oBAAoB,GAAiD,CAAE,KAAK,EAAG,EAAE;IAC7F,MAAM,EACL,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,kBAAkB,EAClB,oBAAoB,EACpB,UAAU,GACV,GAAG,KAAK,CAAC;IACV,MAAM,qBAAqB,GAAG,CAC7B,kBAAkB,CAAC,QAAQ,CAAE,YAAY,CAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CACrC,CAAC;IAClC,MAAM,WAAW,GAAG,IAAA,8BAAkB,EAAE,KAAK,CAAE,CAAC;IAChD,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAE,KAAK,CAAE,CAAC;IAE1C,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAE,WAAW,CAAE,CAAC,GAAG,CAAE,CAAE,MAAM,EAAG,EAAE,CAAC,CAAE;QAC3E,GAAG,EAAE,MAAM,CAAC,GAAG;QACf,IAAI,EAAE,CACL,uBAAC,yBAAc,IACd,SAAS,EAAC,mDAAmD,EAC7D,KAAK,EAAG,MAAM,CAAC,IAAI,YAEjB,MAAM,CAAC,YAAY,IAAI,CAAE,YAAY,CAAC,CAAC,CAAC,CACzC,kCAAM,SAAS,EAAC,UAAU,kBAAI,MAAM,CAAC,YAAY,SAAU,CAC3D,CAAC,CAAC,CAAC,IAAI,GACQ,CACK;KACvB,CAAE,CAAE,CAAC;IAEN,OAAO,CACN,gCAAK,SAAS,EAAC,sDAAsD,YACpE,uBAAC,gCAAmB,IACnB,qBAAqB,QACrB,OAAO,EAAG,GAAG,EAAE;gBACd,IAAK,CAAE,iBAAiB,CAAC,OAAO,EAAG,CAAC;oBACnC,IAAA,qCAAiB,EAAE,uCAAuC,EAAE;wBAC3D,YAAY,EAAE,MAAM;wBACpB,YAAY,EAAE,UAAU;qBACxB,CAAE,CAAC;oBACJ,iBAAiB,CAAC,OAAO,GAAG,IAAI,CAAC;gBAClC,CAAC;YACF,CAAC,EACD,SAAS,EAAC,4CAA4C,EACtD,KAAK,EAAC,EAAE,EACR,OAAO,EAAG,iBAAiB,EAC3B,KAAK,EAAG,iBAAiB,CAAC,IAAI,CAAE,CAAE,EAAE,GAAG,EAAE,EAAG,EAAE,CAAC,GAAG,KAAK,qBAAqB,CAAE,EAC9E,QAAQ,EAAG,CAAE,EACZ,YAAY,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,GAGnC,EAAG,EAAE;gBACL,IAAA,qCAAiB,EAAE,gDAAgD,EAAE;oBACpE,aAAa,EAAE,YAAY;oBAC3B,YAAY,EAAE,MAAM;oBACpB,YAAY,EAAE,UAAU;iBACxB,CAAE,CAAC;gBACJ,oBAAoB;oBACnB,oBAAoB,CAAE,YAA4C,CAAE,CAAC;YACvE,CAAC,GACA,GACG,CACN,CAAC;AACH,CAAC,CAAC;AA9DW,QAAA,oBAAoB,wBA8D/B"}

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntervalTypeSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const interval_type_dropdown_1 = require("./interval-type-dropdown");
+const interval_type_toggle_1 = require("./interval-type-toggle");
+const IntervalTypeSelector = (props) => {
+    const { showPlanTypeSelectorDropdown } = props;
+    return showPlanTypeSelectorDropdown ? ((0, jsx_runtime_1.jsx)(interval_type_dropdown_1.IntervalTypeDropdown, { ...props })) : ((0, jsx_runtime_1.jsx)(interval_type_toggle_1.IntervalTypeToggle, { ...props }));
+};
+exports.IntervalTypeSelector = IntervalTypeSelector;
+//# sourceMappingURL=interval-type-selector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"interval-type-selector.js","sourceRoot":"","sources":["../../../../../src/components/plan-type-selector/components/interval-type-selector.tsx"],"names":[],"mappings":";;;;AACA,qEAAgE;AAChE,iEAA4D;AAErD,MAAM,oBAAoB,GAAiD,CAAE,KAAK,EAAG,EAAE;IAC7F,MAAM,EAAE,4BAA4B,EAAE,GAAG,KAAK,CAAC;IAE/C,OAAO,4BAA4B,CAAC,CAAC,CAAC,CACrC,uBAAC,6CAAoB,OAAM,KAAK,GAAK,CACrC,CAAC,CAAC,CAAC,CACH,uBAAC,yCAAkB,OAAM,KAAK,GAAK,CACnC,CAAC;AACH,CAAC,CAAC;AARW,QAAA,oBAAoB,wBAQ/B"}

package/dist/cjs/components/plan-type-selector/components/interval-type-toggle.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntervalTypeToggle = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const calypso_products_1 = require("@automattic/calypso-products");
+const components_1 = require("@automattic/components");
+const data_stores_1 = require("@automattic/data-stores");
+const element_1 = require("@wordpress/element");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const i18n_calypso_1 = require("i18n-calypso");
+const use_max_discount_1 = tslib_1.__importDefault(require("../hooks/use-max-discount"));
+const popup_messages_1 = tslib_1.__importDefault(require("./popup-messages"));
+const IntervalTypeToggle = (props) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    const { intervalType, isInSignup, eligibleForWpcomMonthlyPlans, hideDiscount, currentSitePlanSlug, displayedIntervals, useCheckPlanAvailabilityForPurchase, title, coupon, siteId, onPlanIntervalUpdate, } = props;
+    const showBiennialToggle = displayedIntervals.includes('2yearly');
+    const [spanRef, setSpanRef] = (0, element_1.useState)();
+    const segmentClasses = (0, clsx_1.default)('price-toggle', {
+        'is-signup': isInSignup,
+    });
+    const popupIsVisible = Boolean(intervalType === 'monthly' && props.plans.length);
+    const maxDiscount = (0, use_max_discount_1.default)(props.plans, useCheckPlanAvailabilityForPurchase, siteId);
+    const pricingMeta = data_stores_1.Plans.usePricingMetaForGridPlans({
+        planSlugs: currentSitePlanSlug ? [currentSitePlanSlug] : [],
+        coupon,
+        siteId,
+        useCheckPlanAvailabilityForPurchase,
+    });
+    const currentPlanBillingPeriod = currentSitePlanSlug
+        ? pricingMeta?.[currentSitePlanSlug]?.billingPeriod
+        : null;
+    if (showBiennialToggle) {
+        // skip showing toggle if current plan's term is higher than 1 year
+        if (currentPlanBillingPeriod && calypso_products_1.PLAN_ANNUAL_PERIOD < currentPlanBillingPeriod) {
+            return null;
+        }
+    }
+    if (!showBiennialToggle) {
+        if (!eligibleForWpcomMonthlyPlans) {
+            return null;
+        }
+    }
+    const intervalTabs = showBiennialToggle
+        ? ['yearly', '2yearly']
+        : ['monthly', 'yearly'];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && (0, jsx_runtime_1.jsx)("div", { className: "plan-type-selector__title", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "plan-type-selector__interval-type", ref: intervalType === 'monthly' ? (ref) => ref && !spanRef && setSpanRef(ref) : null, children: (0, jsx_runtime_1.jsx)(components_1.SegmentedControl, { compact: true, className: segmentClasses, primary: true, children: intervalTabs.map((interval) => ((0, jsx_runtime_1.jsxs)(components_1.SegmentedControl.Item, { selected: intervalType === interval, onClick: () => onPlanIntervalUpdate(interval), children: [(0, jsx_runtime_1.jsxs)("span", { children: [interval === 'monthly' ? translate('Pay monthly') : null, interval === 'yearly' && !showBiennialToggle
+                                        ? translate('Pay annually')
+                                        : null, interval === 'yearly' && showBiennialToggle ? translate('Pay 1 year') : null, interval === '2yearly' ? translate('Pay 2 years') : null] }), !showBiennialToggle && hideDiscount ? null : ((0, jsx_runtime_1.jsx)(popup_messages_1.default, { context: spanRef, isVisible: popupIsVisible, children: translate('Save up to %(maxDiscount)d%% by paying annually and get a free domain for one year', {
+                                    args: { maxDiscount },
+                                    comment: 'Will be like "Save up to 30% by paying annually..."',
+                                }) }))] }, interval))) }) })] }));
+};
+exports.IntervalTypeToggle = IntervalTypeToggle;
+//# sourceMappingURL=interval-type-toggle.js.map

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

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

package/dist/cjs/components/plan-type-selector/components/popup-messages.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 CSSTransition_1 = tslib_1.__importDefault(require("react-transition-group/CSSTransition"));
+const StyledPopover = (0, styled_1.default)(components_1.Popover) `
+	&.popover {
+		display: none;
+		opacity: 0;
+		transition-property: opacity, transform;
+		transition-timing-function: ease-in;
+
+		&.popover-enter-active {
+			opacity: 1;
+			transition-duration: 0.3s;
+		}
+
+		&.popover-exit,
+		&.popover-enter-done {
+			opacity: 1;
+			transition-duration: 0.01s;
+		}
+
+		&.is-right,
+		.rtl &.is-left {
+			@media ( min-width: 960px ) {
+				display: block;
+			}
+
+			&.popover-enter {
+				transform: translate( 10px, 0 );
+			}
+
+			&.popover-enter-active,
+			&.popover-enter-done {
+				transform: translate( 0, 0 );
+			}
+
+			.popover__arrow {
+				border-right-color: var( --color-neutral-100 );
+				&::before {
+					border-right-color: var( --color-neutral-100 );
+				}
+			}
+		}
+
+		.rtl &.is-left {
+			.popover__arrow {
+				right: 40px;
+				border-left-color: var( --color-neutral-100 );
+				&::before {
+					border-left-color: var( --color-neutral-100 );
+				}
+			}
+
+			.popover__inner {
+				left: -50px;
+			}
+		}
+
+		&.is-bottom {
+			@media ( max-width: 960px ) {
+				display: block;
+			}
+
+			&.popover-enter {
+				transform: translate( 0, 22px );
+			}
+
+			&.popover-enter-active,
+			&.popover-enter-done {
+				transform: translate( 0, 12px );
+			}
+
+			.popover__arrow {
+				border-bottom-color: var( --color-neutral-100 );
+				&::before {
+					border-bottom-color: var( --color-neutral-100 );
+				}
+			}
+		}
+
+		.rtl &.is-bottom {
+			.popover__arrow {
+				border-right-color: transparent;
+			}
+		}
+
+		.popover__inner {
+			padding: 8px 10px;
+			max-width: 210px;
+			background-color: var( --color-neutral-100 );
+			border-color: var( --color-neutral-100 );
+			color: var( --color-neutral-0 );
+			border-radius: 2px;
+			text-align: left;
+		}
+	}
+`;
+const PopupMessages = ({ context, children, isVisible, }) => {
+    const timeout = { enter: 300, exit: 10 };
+    const inProp = Boolean(isVisible && context);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ['right', 'bottom'].map((pos) => ((0, jsx_runtime_1.jsx)(CSSTransition_1.default, { in: inProp, timeout: timeout, classNames: "popover", children: (0, jsx_runtime_1.jsx)(StyledPopover, { position: pos, context: context, isVisible: true, autoPosition: false, children: children }) }, pos))) }));
+};
+exports.default = PopupMessages;
+//# sourceMappingURL=popup-messages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popup-messages.js","sourceRoot":"","sources":["../../../../../src/components/plan-type-selector/components/popup-messages.tsx"],"names":[],"mappings":";;;;AAAA,uDAAiD;AACjD,qEAAqC;AAErC,iGAAiE;AAEjE,MAAM,aAAa,GAAG,IAAA,gBAAM,EAAE,oBAAO,CAAE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FtC,CAAC;AAQF,MAAM,aAAa,GAAiD,CAAE,EACrE,OAAO,EACP,QAAQ,EACR,SAAS,GACT,EAAG,EAAE;IACL,MAAM,OAAO,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;IACzC,MAAM,MAAM,GAAG,OAAO,CAAE,SAAS,IAAI,OAAO,CAAE,CAAC;IAE/C,OAAO,CACN,2DACG,CAAE,OAAO,EAAE,QAAQ,CAAE,CAAC,GAAG,CAAE,CAAE,GAAG,EAAG,EAAE,CAAC,CACvC,uBAAC,uBAAa,IAAa,EAAE,EAAG,MAAM,EAAG,OAAO,EAAG,OAAO,EAAG,UAAU,EAAC,SAAS,YAChF,uBAAC,aAAa,IAAC,QAAQ,EAAG,GAAG,EAAG,OAAO,EAAG,OAAO,EAAG,SAAS,QAAC,YAAY,EAAG,KAAK,YAC/E,QAAQ,GACK,IAHI,GAAG,CAIR,CAChB,CAAE,GACD,CACH,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,aAAa,CAAC"}