@automattic/plans-grid-next 1.0.0

package/dist/esm/components/features.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getPlanClass, FEATURE_CUSTOM_DOMAIN, isFreePlan } from '@automattic/calypso-products';
+import { LoadingPlaceholder } from '@automattic/components';
+import styled from '@emotion/styled';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import { usePlansGridContext } from '../grid-context';
+import { PlanFeaturesItem } from './item';
+import { Plans2023Tooltip } from './plans-2023-tooltip';
+const SubdomainSuggestion = styled.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 = useTranslate();
+    const isLoading = generatedWPComSubdomain?.isLoading;
+    return (_jsxs(SubdomainSuggestion, { children: [isLoading && _jsx(LoadingPlaceholder, {}), !isLoading &&
+                (isCustomDomainAllowedOnFreePlan ? (_jsx("div", { children: translate('%s will be a redirect', {
+                        args: [paidDomainName],
+                        comment: '%s is a domain name.',
+                    }) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "is-domain-name", children: paidDomainName }), _jsx("div", { children: generatedWPComSubdomain?.result?.domain_name })] })))] }));
+};
+const PlanFeatures2023GridFeatures = ({ features, planSlug, paidDomainName, generatedWPComSubdomain, hideUnavailableFeatures, selectedFeature, isCustomDomainAllowedOnFreePlan, activeTooltipId, setActiveTooltipId, }) => {
+    const translate = useTranslate();
+    const { enableFeatureTooltips } = usePlansGridContext();
+    return (_jsx(_Fragment, { children: features.map((currentFeature, featureIndex) => {
+            if (hideUnavailableFeatures && !currentFeature.availableForCurrentPlan) {
+                return null;
+            }
+            const key = `${currentFeature.getSlug()}-${planSlug}-${featureIndex}`;
+            const isFreePlanAndCustomDomainFeature = currentFeature.getSlug() === FEATURE_CUSTOM_DOMAIN && isFreePlan(planSlug);
+            if (isFreePlanAndCustomDomainFeature && !paidDomainName) {
+                return null;
+            }
+            const isHighlightedFeature = selectedFeature
+                ? currentFeature.getSlug() === selectedFeature
+                : currentFeature?.isHighlighted ||
+                    (currentFeature.getSlug() === FEATURE_CUSTOM_DOMAIN && paidDomainName) ||
+                    !currentFeature.availableForCurrentPlan;
+            const divClasses = clsx('', getPlanClass(planSlug), {
+                'is-last-feature': featureIndex + 1 === features.length,
+            });
+            const spanClasses = clsx('plan-features-2023-grid__item-info', {
+                'is-annual-plan-feature': currentFeature.availableOnlyForAnnualPlans,
+                'is-available': isFreePlanAndCustomDomainFeature || currentFeature.availableForCurrentPlan,
+            });
+            const itemTitleClasses = clsx('plan-features-2023-grid__item-title', {
+                'is-bold': isHighlightedFeature,
+            });
+            return (_jsx("div", { className: divClasses, children: _jsx(PlanFeaturesItem, { children: _jsx("span", { className: spanClasses, children: _jsx("span", { className: itemTitleClasses, children: isFreePlanAndCustomDomainFeature ? (_jsx(Plans2023Tooltip, { text: enableFeatureTooltips
+                                    ? translate('%s is not included', {
+                                        args: [paidDomainName],
+                                        comment: '%s is a domain name.',
+                                    })
+                                    : undefined, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, id: key, children: _jsx(FreePlanCustomDomainFeature, { paidDomainName: paidDomainName, generatedWPComSubdomain: generatedWPComSubdomain, isCustomDomainAllowedOnFreePlan: isCustomDomainAllowedOnFreePlan }, key) })) : (_jsx(Plans2023Tooltip, { text: enableFeatureTooltips ? currentFeature.getDescription?.() : undefined, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, id: key, children: _jsxs(_Fragment, { children: [currentFeature.getTitle({
+                                            domainName: paidDomainName,
+                                        }), currentFeature?.getSubFeatureObjects?.()?.length ? (_jsx("ul", { className: "plan-features-2023-grid__item-sub-feature-list", children: currentFeature.getSubFeatureObjects().map((subFeature) => (_jsx("li", { children: subFeature?.getTitle() }))) })) : null] }) })) }) }, key) }) }, key));
+        }) }));
+};
+export default PlanFeatures2023GridFeatures;
+//# sourceMappingURL=features.js.map

package/dist/esm/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/esm/components/item.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function PlanFeaturesItem(props) {
+    return (_jsx("div", { className: "plan-features-2023-grid__item plan-features-2023-grid__item-available", children: _jsx("div", { className: "plan-features-2023-grid__item-info-container", children: props.children }) }));
+}
+//# sourceMappingURL=item.js.map

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

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

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getPlanClass } from '@automattic/calypso-products';
+import { Button } from '@automattic/components';
+import clsx from 'clsx';
+import './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 = clsx(classes, 'plan-features-2023-grid__actions-button', planSlug ? getPlanClass(planSlug) : 'is-default', {
+        'is-current-plan': current,
+        'is-stuck': isStuck,
+        'is-large-currency': isLargeCurrency,
+    });
+    return (_jsx(Button, { className: className, onClick: onClick, busy: busy, borderless: borderless, disabled: disabled, href: href, children: children }));
+};
+export default PlanButton;
+//# sourceMappingURL=index.js.map

package/dist/esm/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,OAAO,EAAE,YAAY,EAAiB,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,cAAc,CAAC;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,IAAI,CACrB,OAAO,EACP,yCAAyC,EACzC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAE,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,KAAC,MAAM,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,eAAe,UAAU,CAAC"}

package/dist/esm/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/esm/components/plan-div-td-container.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const PlanDivOrTdContainer = (props) => {
+    const { children, isTableCell, ...otherProps } = props;
+    return isTableCell ? (_jsx("td", { ...otherProps, children: children })) : (_jsx("div", { ...otherProps, children: children }));
+};
+export default PlanDivOrTdContainer;
+//# sourceMappingURL=plan-div-td-container.js.map

package/dist/esm/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,gBAAS,UAAU,YAAK,QAAQ,GAAO,CACvC,CAAC,CAAC,CAAC,CACH,iBAAU,UAAU,YAAK,QAAQ,GAAQ,CACzC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getPlanClass, isEcommercePlan, isBusinessPlan, isWooExpressPlan, isWpcomEnterpriseGridPlan, isPersonalPlan, isPremiumPlan, isFreePlan, } from '@automattic/calypso-products';
+import { CloudLogo, VIPLogo, WooLogo } from '@automattic/components';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import { usePlansGridContext } from '../grid-context';
+import useHighlightAdjacencyMatrix from '../hooks/use-highlight-adjacency-matrix';
+import { useManageTooltipToggle } from '../hooks/use-manage-tooltip-toggle';
+import PlanDivOrTdContainer from './plan-div-td-container';
+import { Plans2023Tooltip } from './plans-2023-tooltip';
+import PopularBadge from './popular-badge';
+const PlanLogo = ({ planSlug, isInSignup, renderedGridPlans, isTableCell, planIndex }) => {
+    const [activeTooltipId, setActiveTooltipId] = useManageTooltipToggle();
+    const translate = useTranslate();
+    const shouldShowWooLogo = isEcommercePlan(planSlug) && !isWooExpressPlan(planSlug);
+    const { gridPlansIndex } = usePlansGridContext();
+    const { current } = gridPlansIndex[planSlug];
+    const highlightAdjacencyMatrix = useHighlightAdjacencyMatrix({
+        renderedGridPlans,
+    });
+    const headerClasses = clsx('plan-features-2023-grid__header-logo', getPlanClass(planSlug));
+    const tableItemClasses = clsx('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 = clsx({
+        'with-plan-logo': !(isFreePlan(planSlug) ||
+            isPersonalPlan(planSlug) ||
+            isPremiumPlan(planSlug)),
+    });
+    return (_jsxs(PlanDivOrTdContainer, { className: tableItemClasses, isTableCell: isTableCell, children: [_jsx(PopularBadge, { isInSignup: isInSignup, planSlug: planSlug, additionalClassName: popularBadgeClasses }), _jsxs("header", { className: headerClasses, children: [isBusinessPlan(planSlug) && (_jsx(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: _jsx(CloudLogo, {}) })), shouldShowWooLogo && (_jsx(Plans2023Tooltip, { text: translate('Make your online store a reality with the power of WooCommerce.'), id: "woo-logo", setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, children: _jsx(WooLogo, {}) })), isWpcomEnterpriseGridPlan(planSlug) && (_jsx(Plans2023Tooltip, { text: translate('The trusted choice for enterprise WordPress hosting.'), id: "enterprise-logo", setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, children: _jsx(VIPLogo, {}) }))] })] }, planSlug));
+};
+export default PlanLogo;
+//# sourceMappingURL=plan-logo.js.map

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

@@ -0,0 +1,34 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { recordTracksEvent } from '@automattic/calypso-analytics';
+import { CustomSelectControl } from '@wordpress/components';
+import { useRef } from 'react';
+import DropdownOption from '../../dropdown-option';
+import useIntervalOptions from '../hooks/use-interval-options';
+export const IntervalTypeDropdown = (props) => {
+    const { hideDiscount, intent, intervalType, displayedIntervals, onPlanIntervalUpdate, isInSignup, } = props;
+    const supportedIntervalType = (displayedIntervals.includes(intervalType) ? intervalType : 'yearly');
+    const optionsList = useIntervalOptions(props);
+    const hasOpenedDropdown = useRef(false);
+    const selectOptionsList = Object.values(optionsList).map((option) => ({
+        key: option.key,
+        name: (_jsx(DropdownOption, { className: "plan-type-selector__interval-type-dropdown-option", title: option.name, children: option.discountText && !hideDiscount ? (_jsxs("span", { className: "discount", children: [" ", option.discountText, " "] })) : null })),
+    }));
+    return (_jsx("div", { className: "plan-type-selector__interval-type-dropdown-container", children: _jsx(CustomSelectControl, { __next40pxDefaultSize: true, onFocus: () => {
+                if (!hasOpenedDropdown.current) {
+                    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 }, }) => {
+                recordTracksEvent('calypso_plans_plan_type_selector_option_change', {
+                    interval_type: intervalType,
+                    plans_intent: intent,
+                    is_in_signup: isInSignup,
+                });
+                onPlanIntervalUpdate &&
+                    onPlanIntervalUpdate(intervalType);
+            } }) }));
+};
+//# sourceMappingURL=interval-type-dropdown.js.map

package/dist/esm/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,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,kBAAkB,MAAM,+BAA+B,CAAC;AAG/D,MAAM,CAAC,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,kBAAkB,CAAE,KAAK,CAAE,CAAC;IAChD,MAAM,iBAAiB,GAAG,MAAM,CAAE,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,KAAC,cAAc,IACd,SAAS,EAAC,mDAAmD,EAC7D,KAAK,EAAG,MAAM,CAAC,IAAI,YAEjB,MAAM,CAAC,YAAY,IAAI,CAAE,YAAY,CAAC,CAAC,CAAC,CACzC,gBAAM,SAAS,EAAC,UAAU,kBAAI,MAAM,CAAC,YAAY,SAAU,CAC3D,CAAC,CAAC,CAAC,IAAI,GACQ,CACK;KACvB,CAAE,CAAE,CAAC;IAEN,OAAO,CACN,cAAK,SAAS,EAAC,sDAAsD,YACpE,KAAC,mBAAmB,IACnB,qBAAqB,QACrB,OAAO,EAAG,GAAG,EAAE;gBACd,IAAK,CAAE,iBAAiB,CAAC,OAAO,EAAG,CAAC;oBACnC,iBAAiB,CAAE,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,iBAAiB,CAAE,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"}

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IntervalTypeDropdown } from './interval-type-dropdown';
+import { IntervalTypeToggle } from './interval-type-toggle';
+export const IntervalTypeSelector = (props) => {
+    const { showPlanTypeSelectorDropdown } = props;
+    return showPlanTypeSelectorDropdown ? (_jsx(IntervalTypeDropdown, { ...props })) : (_jsx(IntervalTypeToggle, { ...props }));
+};
+//# sourceMappingURL=interval-type-selector.js.map

package/dist/esm/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,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,CAAC,MAAM,oBAAoB,GAAiD,CAAE,KAAK,EAAG,EAAE;IAC7F,MAAM,EAAE,4BAA4B,EAAE,GAAG,KAAK,CAAC;IAE/C,OAAO,4BAA4B,CAAC,CAAC,CAAC,CACrC,KAAC,oBAAoB,OAAM,KAAK,GAAK,CACrC,CAAC,CAAC,CAAC,CACH,KAAC,kBAAkB,OAAM,KAAK,GAAK,CACnC,CAAC;AACH,CAAC,CAAC"}

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PLAN_ANNUAL_PERIOD } from '@automattic/calypso-products';
+import { SegmentedControl } from '@automattic/components';
+import { Plans } from '@automattic/data-stores';
+import { useState } from '@wordpress/element';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import useMaxDiscount from '../hooks/use-max-discount';
+import PopupMessages from './popup-messages';
+export const IntervalTypeToggle = (props) => {
+    const translate = useTranslate();
+    const { intervalType, isInSignup, eligibleForWpcomMonthlyPlans, hideDiscount, currentSitePlanSlug, displayedIntervals, useCheckPlanAvailabilityForPurchase, title, coupon, siteId, onPlanIntervalUpdate, } = props;
+    const showBiennialToggle = displayedIntervals.includes('2yearly');
+    const [spanRef, setSpanRef] = useState();
+    const segmentClasses = clsx('price-toggle', {
+        'is-signup': isInSignup,
+    });
+    const popupIsVisible = Boolean(intervalType === 'monthly' && props.plans.length);
+    const maxDiscount = useMaxDiscount(props.plans, useCheckPlanAvailabilityForPurchase, siteId);
+    const pricingMeta = 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 && PLAN_ANNUAL_PERIOD < currentPlanBillingPeriod) {
+            return null;
+        }
+    }
+    if (!showBiennialToggle) {
+        if (!eligibleForWpcomMonthlyPlans) {
+            return null;
+        }
+    }
+    const intervalTabs = showBiennialToggle
+        ? ['yearly', '2yearly']
+        : ['monthly', 'yearly'];
+    return (_jsxs(_Fragment, { children: [title && _jsx("div", { className: "plan-type-selector__title", children: title }), _jsx("div", { className: "plan-type-selector__interval-type", ref: intervalType === 'monthly' ? (ref) => ref && !spanRef && setSpanRef(ref) : null, children: _jsx(SegmentedControl, { compact: true, className: segmentClasses, primary: true, children: intervalTabs.map((interval) => (_jsxs(SegmentedControl.Item, { selected: intervalType === interval, onClick: () => onPlanIntervalUpdate(interval), children: [_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 : (_jsx(PopupMessages, { 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))) }) })] }));
+};
+//# sourceMappingURL=interval-type-toggle.js.map

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

@@ -0,0 +1,105 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Popover } from '@automattic/components';
+import styled from '@emotion/styled';
+import CSSTransition from 'react-transition-group/CSSTransition';
+const StyledPopover = styled(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 (_jsx(_Fragment, { children: ['right', 'bottom'].map((pos) => (_jsx(CSSTransition, { in: inProp, timeout: timeout, classNames: "popover", children: _jsx(StyledPopover, { position: pos, context: context, isVisible: true, autoPosition: false, children: children }) }, pos))) }));
+};
+export default PopupMessages;
+//# sourceMappingURL=popup-messages.js.map

package/dist/esm/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,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,aAAa,MAAM,sCAAsC,CAAC;AAEjE,MAAM,aAAa,GAAG,MAAM,CAAE,OAAO,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,4BACG,CAAE,OAAO,EAAE,QAAQ,CAAE,CAAC,GAAG,CAAE,CAAE,GAAG,EAAG,EAAE,CAAC,CACvC,KAAC,aAAa,IAAa,EAAE,EAAG,MAAM,EAAG,OAAO,EAAG,OAAO,EAAG,UAAU,EAAC,SAAS,YAChF,KAAC,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,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,52 @@
+import { useTranslate } from 'i18n-calypso';
+import useMaxDiscountsForPlanTerms from './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',
+    });
+};
+export default function useIntervalOptions(props) {
+    const translate = 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 = useMaxDiscountsForPlanTerms(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;
+}
+//# sourceMappingURL=use-interval-options.js.map

package/dist/esm/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,OAAO,EAA4C,YAAY,EAAE,MAAM,cAAc,CAAC;AACtF,OAAO,2BAA2B,MAAM,oCAAoC,CAAC;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,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAE,KAAwB;IACnE,MAAM,SAAS,GAAG,YAAY,EAAE,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,2BAA2B,CACtD,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"}