@automattic/plans-grid-next 1.0.0

package/dist/cjs/components/comparison-grid/index.js

@@ -0,0 +1,527 @@
+"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 react_1 = require("@emotion/react");
+const styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
+const element_1 = require("@wordpress/element");
+const icons_1 = require("@wordpress/icons");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const i18n_calypso_1 = require("i18n-calypso");
+const react_2 = require("react");
+const react_intersection_observer_1 = require("react-intersection-observer");
+const css_mixins_1 = require("../../css-mixins");
+const grid_context_1 = tslib_1.__importStar(require("../../grid-context"));
+const use_grid_size_1 = tslib_1.__importDefault(require("../../hooks/use-grid-size"));
+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 filter_unused_features_object_1 = tslib_1.__importDefault(require("../../lib/filter-unused-features-object"));
+const get_plan_features_object_1 = tslib_1.__importDefault(require("../../lib/get-plan-features-object"));
+const sort_plan_properties_1 = require("../../lib/sort-plan-properties");
+const plan_type_selector_1 = tslib_1.__importDefault(require("../plan-type-selector"));
+const plans_2023_tooltip_1 = require("../plans-2023-tooltip");
+const popular_badge_1 = tslib_1.__importDefault(require("../popular-badge"));
+const action_button_1 = tslib_1.__importDefault(require("../shared/action-button"));
+const billing_timeframe_1 = tslib_1.__importDefault(require("../shared/billing-timeframe"));
+const header_price_1 = tslib_1.__importDefault(require("../shared/header-price"));
+const header_price_context_1 = tslib_1.__importDefault(require("../shared/header-price/header-price-context"));
+const storage_1 = require("../shared/storage");
+const sticky_container_1 = require("../sticky-container");
+require("./style.scss");
+const featureGroupRowTitleCellMaxWidth = 450;
+const rowCellMaxWidth = 290;
+const JetpackIconContainer = styled_1.default.div `
+	padding-inline-start: 6px;
+	display: inline-block;
+	vertical-align: middle;
+	line-height: 1;
+`;
+const Title = styled_1.default.div `
+	font-weight: 500;
+	font-size: 20px;
+	padding: 14px;
+	flex: 1;
+	display: flex;
+	align-items: center;
+	column-gap: 5px;
+	border: solid 1px #e0e0e0;
+	border-left: none;
+	border-right: none;
+
+	.gridicon {
+		transform: ${(props) => props.isHiddenInMobile ? 'rotateZ( 180deg )' : 'rotateZ( 0deg )'};
+		flex-shrink: 0;
+	}
+
+	${(0, css_mixins_1.plansGridMediumLarge)((0, react_1.css) `
+		padding-inline-start: 0;
+		border: none;
+		padding: 0;
+		max-width: 290px;
+
+		.gridicon {
+			display: none;
+		}
+	`)}
+`;
+const Grid = styled_1.default.div `
+	display: grid;
+	margin: 0 auto;
+	background: #fff;
+	border: solid 1px #e0e0e0;
+	${(props) => props.visiblePlans &&
+    (0, react_1.css) `
+			max-width: ${rowCellMaxWidth * props.visiblePlans + featureGroupRowTitleCellMaxWidth}px;
+		`}
+
+	${(0, css_mixins_1.plansGridMediumLarge)((0, react_1.css) `
+		border-radius: 5px;
+	`)}
+
+	> .is-sticky-header-row {
+		border-bottom: solid 1px #e0e0e0;
+		background: #fff;
+	}
+`;
+const Row = styled_1.default.div `
+	justify-content: space-between;
+	margin-bottom: -1px;
+	align-items: stretch;
+	display: ${(props) => (props.isHiddenInMobile ? 'none' : 'flex')};
+
+	${(0, css_mixins_1.plansGridMediumLarge)((0, react_1.css) `
+		display: flex;
+		align-items: center;
+		margin: 0 20px;
+		padding: 12px 0;
+		border-bottom: 1px solid #eee;
+	`)}
+
+	${(props) => props.isHighlighted &&
+    (0, react_1.css) `
+			${(0, css_mixins_1.plansGridMediumLarge)((0, react_1.css) `
+				background-color: #fafafa;
+				border-top: 1px solid #eee;
+				font-weight: bold;
+				margin: -1px 0 0;
+				padding: 12px 20px;
+				color: #3a434a;
+			`)}
+		`};
+`;
+const PlanRow = (0, styled_1.default)(Row) `
+	&:last-of-type {
+		display: ${(props) => (props.isHiddenInMobile ? 'none' : 'flex')};
+	}
+
+	${(0, css_mixins_1.plansGridMediumLarge)((0, react_1.css) `
+		border-bottom: none;
+		align-items: stretch;
+
+		&:last-of-type {
+			display: flex;
+			padding-top: 0;
+			padding-bottom: 0;
+		}
+	`)}
+`;
+const TitleRow = (0, styled_1.default)(Row) `
+	cursor: pointer;
+	display: flex;
+
+	${(0, css_mixins_1.plansGridMediumLarge)((0, react_1.css) `
+		cursor: default;
+		border-bottom: none;
+		padding: 20px 0 10px;
+		pointer-events: none;
+	`)}
+`;
+const Cell = styled_1.default.div `
+	text-align: ${(props) => props.textAlign ?? 'start'};
+	display: flex;
+	flex: 1;
+	justify-content: flex-start;
+	flex-direction: column;
+	align-items: center;
+	padding: 33px 20px 0;
+	border-right: solid 1px #e0e0e0;
+	max-width: ${rowCellMaxWidth}px;
+
+	.gridicon {
+		fill: currentColor;
+	}
+
+	img {
+		max-width: 100%;
+	}
+
+	&.title-is-subtitle {
+		padding-top: 0;
+	}
+
+	&:last-of-type {
+		border-right: none;
+	}
+
+	${Row}:last-of-type & {
+		padding-bottom: 24px;
+
+		${(0, css_mixins_1.plansGridMediumLarge)((0, react_1.css) `
+			padding-bottom: 0px;
+		`)}
+	}
+
+	${(0, css_mixins_1.plansGridMediumLarge)((0, react_1.css) `
+		padding: 0 14px;
+		border-right: none;
+		justify-content: center;
+
+		&:first-of-type {
+			padding-inline-start: 0;
+		}
+		&:last-of-type {
+			padding-inline-end: 0;
+			border-right: none;
+		}
+
+		&.is-stuck {
+			padding-bottom: 16px;
+		}
+	`)}
+`;
+const RowTitleCell = styled_1.default.div `
+	display: none;
+	font-size: 14px;
+	padding-right: 10px;
+	${(0, css_mixins_1.plansGridMediumLarge)((0, react_1.css) `
+		display: block;
+		flex: 1;
+		min-width: 290px;
+	`)}
+	max-width: ${(props) => {
+    if (props.isPlaceholderHeaderCell || props.isFeatureGroupRowTitleCell) {
+        return `${featureGroupRowTitleCellMaxWidth}px`;
+    }
+    return `${rowCellMaxWidth}px`;
+}};
+`;
+const PlanSelector = styled_1.default.header `
+	position: relative;
+
+	.plan-comparison-grid__title {
+		&.is-select-trigger {
+			display: flex;
+		}
+	}
+
+	.plan-comparison-grid__title-select {
+		appearance: none;
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		background: 0 0;
+		border: none;
+		font-size: inherit;
+		color: inherit;
+		font-family: inherit;
+		opacity: 0;
+		width: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		cursor: pointer;
+		height: 30px;
+
+		&:focus ~ .plan-comparison-grid__title {
+			outline: thin dotted;
+		}
+	}
+
+	.plan-comparison-grid__title-icon {
+		position: relative;
+		top: -2px;
+		left: -2px;
+		width: 1px;
+		height: 1px;
+		overflow: visible;
+
+		svg {
+			fill: var( --color-link );
+			transform: rotate( 90deg );
+		}
+	}
+`;
+const FeatureFootnotes = styled_1.default.div `
+	ol {
+		margin: 2em 0 0 1em;
+	}
+
+	ol li {
+		font-size: 11px;
+		padding-left: 1em;
+	}
+`;
+const FeatureFootnote = styled_1.default.span `
+	position: relative;
+	font-size: 50%;
+	font-weight: 600;
+
+	sup {
+		position: absolute;
+		top: -10px;
+		left: 0;
+	}
+`;
+const ComparisonGridHeaderCell = ({ planSlug, allVisible, isLastInRow, isFooter, isInSignup, visibleGridPlans, onPlanChange, displayedGridPlans, currentSitePlanSlug, planActionOverrides, showRefundPeriod, isStuck, }) => {
+    const { gridPlansIndex } = (0, grid_context_1.usePlansGridContext)();
+    const gridPlan = gridPlansIndex[planSlug];
+    const highlightAdjacencyMatrix = (0, use_highlight_adjacency_matrix_1.default)({
+        renderedGridPlans: visibleGridPlans,
+    });
+    if (!gridPlan) {
+        return null;
+    }
+    const headerClasses = (0, clsx_1.default)('plan-comparison-grid__header-cell', (0, calypso_products_1.getPlanClass)(planSlug), {
+        'popular-plan-parent-class': gridPlan.highlightLabel,
+        'is-last-in-row': isLastInRow,
+        'plan-is-footer': isFooter,
+        'is-left-of-highlight': highlightAdjacencyMatrix[planSlug]?.leftOfHighlight,
+        'is-right-of-highlight': highlightAdjacencyMatrix[planSlug]?.rightOfHighlight,
+        'is-only-highlight': highlightAdjacencyMatrix[planSlug]?.isOnlyHighlight,
+        'is-current-plan': gridPlan.current,
+        'is-stuck': isStuck,
+    });
+    const popularBadgeClasses = (0, clsx_1.default)({
+        'is-current-plan': gridPlan.current,
+        'popular-badge-is-stuck': isStuck,
+    });
+    const showPlanSelect = !allVisible && !gridPlan.current;
+    return ((0, jsx_runtime_1.jsxs)(Cell, { className: headerClasses, textAlign: "start", children: [(0, jsx_runtime_1.jsx)(popular_badge_1.default, { isInSignup: isInSignup, planSlug: planSlug, additionalClassName: popularBadgeClasses }), (0, jsx_runtime_1.jsxs)(PlanSelector, { children: [(0, jsx_runtime_1.jsxs)("h4", { className: (0, clsx_1.default)('plan-comparison-grid__title', showPlanSelect && 'is-select-trigger'), children: [(0, jsx_runtime_1.jsx)("span", { className: "plan-comparison-grid__title-label", children: gridPlan.planTitle }), showPlanSelect && ((0, jsx_runtime_1.jsx)("span", { className: "plan-comparison-grid__title-icon", children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { icon: icons_1.chevronRightSmall, size: 30 }) }))] }), showPlanSelect && ((0, jsx_runtime_1.jsx)("select", { onChange: (event) => onPlanChange(planSlug, event), className: "plan-comparison-grid__title-select", value: planSlug, children: displayedGridPlans.map(({ planSlug: otherPlan, planTitle }) => {
+                            const isVisiblePlan = visibleGridPlans.find(({ planSlug }) => planSlug === otherPlan);
+                            if (isVisiblePlan && otherPlan !== planSlug) {
+                                return null;
+                            }
+                            return ((0, jsx_runtime_1.jsx)("option", { value: otherPlan, children: planTitle }, otherPlan));
+                        }) }))] }), (0, jsx_runtime_1.jsx)(header_price_1.default, { planSlug: planSlug, currentSitePlanSlug: currentSitePlanSlug, visibleGridPlans: visibleGridPlans }), (0, jsx_runtime_1.jsx)("div", { className: "plan-comparison-grid__billing-info", children: (0, jsx_runtime_1.jsx)(billing_timeframe_1.default, { planSlug: planSlug, showRefundPeriod: showRefundPeriod }) }), (0, jsx_runtime_1.jsx)(action_button_1.default, { currentSitePlanSlug: currentSitePlanSlug, availableForPurchase: gridPlan.availableForPurchase, isInSignup: isInSignup, planSlug: planSlug, planActionOverrides: planActionOverrides, showMonthlyPrice: false, isStuck: false, visibleGridPlans: visibleGridPlans })] }));
+};
+const PlanTypeSelectorWrapper = styled_1.default.div `
+	display: none;
+	${(0, css_mixins_1.plansGridMediumLarge)((0, react_1.css) `
+		display: block;
+	`)}
+`;
+const ComparisonGridHeader = (0, react_2.forwardRef)(({ displayedGridPlans, visibleGridPlans, isInSignup, isFooter, onPlanChange, currentSitePlanSlug, planActionOverrides, selectedPlan, isHiddenInMobile, showRefundPeriod, isStuck, planTypeSelectorProps, }, ref) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    const allVisible = visibleGridPlans.length === displayedGridPlans.length;
+    const { coupon } = (0, grid_context_1.usePlansGridContext)();
+    return ((0, jsx_runtime_1.jsxs)(PlanRow, { isHiddenInMobile: isHiddenInMobile, ref: ref, children: [(0, jsx_runtime_1.jsx)(RowTitleCell, { className: "plan-comparison-grid__header-cell is-placeholder-header-cell", isPlaceholderHeaderCell: true, children: isStuck && planTypeSelectorProps && ((0, jsx_runtime_1.jsx)(PlanTypeSelectorWrapper, { children: (0, jsx_runtime_1.jsx)(plan_type_selector_1.default, { ...planTypeSelectorProps, title: translate('Billing Cycle'), hideDiscount: true, coupon: coupon }) })) }, "feature-name"), (0, jsx_runtime_1.jsx)(header_price_context_1.default, { children: visibleGridPlans.map(({ planSlug }, index) => ((0, jsx_runtime_1.jsx)(ComparisonGridHeaderCell, { planSlug: planSlug, isLastInRow: index === visibleGridPlans.length - 1, isFooter: isFooter, allVisible: allVisible, isInSignup: isInSignup, visibleGridPlans: visibleGridPlans, onPlanChange: onPlanChange, displayedGridPlans: displayedGridPlans, currentSitePlanSlug: currentSitePlanSlug, planActionOverrides: planActionOverrides, selectedPlan: selectedPlan, showRefundPeriod: showRefundPeriod, isStuck: isStuck }, planSlug))) })] }));
+});
+const ComparisonGridFeatureGroupRowCell = ({ feature, visibleGridPlans, planSlug, isStorageFeature, intervalType, activeTooltipId, setActiveTooltipId, showUpgradeableStorage, onStorageAddOnClick, }) => {
+    const { gridPlansIndex, enableFeatureTooltips, hideUnsupportedFeatures } = (0, grid_context_1.usePlansGridContext)();
+    const gridPlan = gridPlansIndex[planSlug];
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    const highlightAdjacencyMatrix = (0, use_highlight_adjacency_matrix_1.default)({
+        renderedGridPlans: visibleGridPlans,
+    });
+    if (!gridPlan) {
+        return null;
+    }
+    const featureSlug = feature?.getSlug();
+    const hasFeature = isStorageFeature ||
+        (featureSlug
+            ? [...gridPlan.features.wpcomFeatures, ...gridPlan.features.jetpackFeatures]
+                .filter((feature) => 'monthly' === intervalType ? !feature.availableOnlyForAnnualPlans : true)
+                .some((feature) => feature.getSlug() === featureSlug)
+            : false);
+    const featureLabel = featureSlug
+        ? gridPlan?.features?.comparisonGridFeatureLabels?.[featureSlug]
+        : undefined;
+    const cellClasses = (0, clsx_1.default)('plan-comparison-grid__feature-group-row-cell', 'plan-comparison-grid__plan', (0, calypso_products_1.getPlanClass)(planSlug), {
+        'popular-plan-parent-class': gridPlan.highlightLabel,
+        'has-feature': hasFeature,
+        'has-feature-label': !!featureLabel,
+        'hide-unsupported-feature': hideUnsupportedFeatures && !hasFeature && !featureLabel,
+        'title-is-subtitle': 'live-chat-support' === featureSlug,
+        'is-left-of-highlight': highlightAdjacencyMatrix[planSlug]?.leftOfHighlight,
+        'is-right-of-highlight': highlightAdjacencyMatrix[planSlug]?.rightOfHighlight,
+        'is-only-highlight': highlightAdjacencyMatrix[planSlug]?.isOnlyHighlight,
+    });
+    const planPaymentTransactionFees = gridPlan.features.wpcomFeatures?.find((feature) => feature?.getFeatureGroup?.() === calypso_products_1.FEATURE_GROUP_PAYMENT_TRANSACTION_FEES);
+    return ((0, jsx_runtime_1.jsx)(Cell, { className: cellClasses, textAlign: "center", children: isStorageFeature ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "plan-comparison-grid__plan-title", children: translate('Storage') }), (0, jsx_runtime_1.jsx)(storage_1.PlanStorage, { planSlug: planSlug, onStorageAddOnClick: onStorageAddOnClick, showUpgradeableStorage: showUpgradeableStorage })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: calypso_products_1.FEATURE_GROUP_PAYMENT_TRANSACTION_FEES === featureSlug ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: planPaymentTransactionFees ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(plans_2023_tooltip_1.Plans2023Tooltip, { text: enableFeatureTooltips ? feature?.getDescription?.() : undefined, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: `${planSlug}-${featureSlug}`, children: (0, jsx_runtime_1.jsx)("span", { className: "plan-comparison-grid__plan-title", children: feature?.getAlternativeTitle?.() || feature?.getTitle() }) }), (0, jsx_runtime_1.jsx)("span", { className: "plan-comparison-grid__plan-conditional-title", children: planPaymentTransactionFees?.getAlternativeTitle?.() })] })) : ((0, jsx_runtime_1.jsx)(components_1.Gridicon, { icon: "minus-small", color: "#C3C4C7" })) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [feature?.getIcon && ((0, jsx_runtime_1.jsx)("span", { className: "plan-comparison-grid__plan-image", children: feature.getIcon() })), (0, jsx_runtime_1.jsx)(plans_2023_tooltip_1.Plans2023Tooltip, { text: enableFeatureTooltips ? feature?.getDescription?.() : undefined, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: `${planSlug}-${featureSlug}`, children: (0, jsx_runtime_1.jsx)("span", { className: "plan-comparison-grid__plan-title", children: feature?.getAlternativeTitle?.() || feature?.getTitle() }) }), feature?.getCompareTitle && ((0, jsx_runtime_1.jsx)("span", { className: "plan-comparison-grid__plan-subtitle", children: feature.getCompareTitle() })), featureLabel && ((0, jsx_runtime_1.jsx)("span", { className: "plan-comparison-grid__plan-conditional-title", children: featureLabel })), hasFeature && feature?.getCompareSubtitle && ((0, jsx_runtime_1.jsx)("span", { className: "plan-comparison-grid__plan-subtitle", children: feature.getCompareSubtitle() })), hasFeature && !featureLabel && ((0, jsx_runtime_1.jsx)(components_1.Gridicon, { icon: "checkmark", color: "var(--studio-wordpress-blue-50)" })), !hasFeature && !featureLabel && (0, jsx_runtime_1.jsx)(components_1.Gridicon, { icon: "minus-small", color: "#C3C4C7" })] })) })) }));
+};
+const ComparisonGridFeatureGroupRow = ({ feature, isHiddenInMobile, allJetpackFeatures, visibleGridPlans, planFeatureFootnotes, isStorageFeature, isHighlighted, intervalType, activeTooltipId, setActiveTooltipId, showUpgradeableStorage, onStorageAddOnClick, }) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    const rowClasses = (0, clsx_1.default)('plan-comparison-grid__feature-group-row', {
+        'is-storage-feature': isStorageFeature,
+    });
+    const featureSlug = feature?.getSlug() ?? '';
+    const footnote = planFeatureFootnotes?.footnotesByFeature?.[featureSlug];
+    const tooltipId = `${feature?.getSlug()}-comparison-grid`;
+    const { enableFeatureTooltips } = (0, grid_context_1.usePlansGridContext)();
+    return ((0, jsx_runtime_1.jsxs)(Row, { isHiddenInMobile: isHiddenInMobile, className: rowClasses, isHighlighted: isHighlighted, children: [(0, jsx_runtime_1.jsx)(RowTitleCell, { className: "is-feature-group-row-title-cell", isFeatureGroupRowTitleCell: true, children: isStorageFeature ? ((0, jsx_runtime_1.jsx)(plans_2023_tooltip_1.Plans2023Tooltip, { text: enableFeatureTooltips
+                        ? translate('Space to store your photos, media, and more.')
+                        : undefined, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: tooltipId, children: translate('Storage') })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: feature && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(plans_2023_tooltip_1.Plans2023Tooltip, { text: enableFeatureTooltips ? feature.getDescription?.() : undefined, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: tooltipId, children: [feature.getTitle(), footnote && ((0, jsx_runtime_1.jsx)(FeatureFootnote, { children: (0, jsx_runtime_1.jsx)("sup", { children: footnote }) }))] }), allJetpackFeatures.has(feature.getSlug()) ? ((0, jsx_runtime_1.jsx)(JetpackIconContainer, { children: (0, jsx_runtime_1.jsx)(plans_2023_tooltip_1.Plans2023Tooltip, { text: translate('Security, performance, and growth tools—powered by Jetpack.'), setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: `jp-${tooltipId}`, children: (0, jsx_runtime_1.jsx)(components_1.JetpackLogo, { size: 16 }) }) })) : null] })) })) }, "feature-name"), visibleGridPlans.map(({ planSlug }) => ((0, jsx_runtime_1.jsx)(ComparisonGridFeatureGroupRowCell, { feature: feature, allJetpackFeatures: allJetpackFeatures, visibleGridPlans: visibleGridPlans, planSlug: planSlug, isStorageFeature: isStorageFeature, intervalType: intervalType, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, showUpgradeableStorage: showUpgradeableStorage, onStorageAddOnClick: onStorageAddOnClick }, planSlug)))] }));
+};
+const FeatureGroup = ({ featureGroup, selectedFeature, intervalType, activeTooltipId, setActiveTooltipId, showUpgradeableStorage, onStorageAddOnClick, featureGroupMap, visibleGridPlans, planFeatureFootnotes, }) => {
+    const { allFeaturesList } = (0, grid_context_1.usePlansGridContext)();
+    const [firstSetOfFeatures] = Object.keys(featureGroupMap);
+    const [visibleFeatureGroups, setVisibleFeatureGroups] = (0, react_2.useState)([
+        firstSetOfFeatures,
+    ]);
+    const features = featureGroup.getFeatures();
+    const featureObjects = (0, filter_unused_features_object_1.default)(visibleGridPlans, (0, get_plan_features_object_1.default)(allFeaturesList, features));
+    const isHiddenInMobile = !visibleFeatureGroups.includes(featureGroup.slug);
+    const allJetpackFeatures = (0, element_1.useMemo)(() => {
+        const allPlans = (0, calypso_products_1.getPlans)();
+        const jetpackFeatures = new Set(Object.values(allPlans)
+            .map(({ get2023PricingGridSignupJetpackFeatures, get2023PlanComparisonJetpackFeatureOverride, }) => {
+            const jetpackFeatures = get2023PricingGridSignupJetpackFeatures?.();
+            const additionalJetpackFeatures = get2023PlanComparisonJetpackFeatureOverride?.();
+            return [
+                ...(jetpackFeatures ? jetpackFeatures : []),
+                ...(additionalJetpackFeatures ? additionalJetpackFeatures : []),
+            ];
+        })
+            .flat());
+        return jetpackFeatures;
+    }, []);
+    const handleFeatureGroupToggle = (0, react_2.useCallback)(() => {
+        const index = visibleFeatureGroups.indexOf(featureGroup.slug);
+        const newVisibleFeatureGroups = [...visibleFeatureGroups];
+        if (index === -1) {
+            newVisibleFeatureGroups.push(featureGroup.slug);
+        }
+        else {
+            newVisibleFeatureGroups.splice(index, 1);
+        }
+        setVisibleFeatureGroups(newVisibleFeatureGroups);
+    }, [featureGroup, setVisibleFeatureGroups, visibleFeatureGroups]);
+    // Skip non Jetpack feature groups without any available features.
+    if (featureGroup.slug !== calypso_products_1.FEATURE_GROUP_ESSENTIAL_FEATURES && !featureObjects.length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "plan-comparison-grid__feature-group", children: [(0, jsx_runtime_1.jsx)(TitleRow, { className: "plan-comparison-grid__feature-group-title-row", onClick: handleFeatureGroupToggle, children: (0, jsx_runtime_1.jsxs)(Title, { isHiddenInMobile: isHiddenInMobile, children: [(0, jsx_runtime_1.jsx)(components_1.Gridicon, { icon: "chevron-up", size: 12, color: "#1E1E1E" }), (0, jsx_runtime_1.jsx)("span", { children: featureGroup.getTitle() })] }) }), featureObjects.map((feature) => ((0, jsx_runtime_1.jsx)(ComparisonGridFeatureGroupRow, { feature: feature, isHiddenInMobile: isHiddenInMobile, allJetpackFeatures: allJetpackFeatures, visibleGridPlans: visibleGridPlans, planFeatureFootnotes: planFeatureFootnotes, isStorageFeature: false, isHighlighted: feature.getSlug() === selectedFeature, intervalType: intervalType, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, showUpgradeableStorage: showUpgradeableStorage, onStorageAddOnClick: onStorageAddOnClick }, feature.getSlug()))), featureGroup.slug === calypso_products_1.FEATURE_GROUP_ESSENTIAL_FEATURES ? ((0, jsx_runtime_1.jsx)(ComparisonGridFeatureGroupRow, { isHiddenInMobile: isHiddenInMobile, allJetpackFeatures: allJetpackFeatures, visibleGridPlans: visibleGridPlans, planFeatureFootnotes: planFeatureFootnotes, isStorageFeature: true, isHighlighted: false, intervalType: intervalType, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, showUpgradeableStorage: showUpgradeableStorage, onStorageAddOnClick: onStorageAddOnClick }, "feature-storage")) : null] }, featureGroup.slug));
+};
+const ComparisonGrid = ({ intervalType, isInSignup, currentSitePlanSlug, planActionOverrides, selectedPlan, selectedFeature, showUpgradeableStorage, stickyRowOffset, onStorageAddOnClick, showRefundPeriod, planTypeSelectorProps, gridSize, }) => {
+    const { gridPlans, gridPlansIndex, featureGroupMap } = (0, grid_context_1.usePlansGridContext)();
+    const [activeTooltipId, setActiveTooltipId] = (0, use_manage_tooltip_toggle_1.useManageTooltipToggle)();
+    const [visiblePlans, setVisiblePlans] = (0, react_2.useState)([]);
+    const displayedGridPlans = (0, element_1.useMemo)(() => {
+        return (0, sort_plan_properties_1.sortPlans)(gridPlans, currentSitePlanSlug, 'small' === gridSize);
+    }, [gridPlans, currentSitePlanSlug, gridSize]);
+    (0, react_2.useEffect)(() => {
+        setVisiblePlans((prev) => {
+            let visibleLength = displayedGridPlans.length;
+            switch (gridSize) {
+                case 'large':
+                    visibleLength = 4;
+                    break;
+                case 'medium':
+                    visibleLength = 3;
+                    break;
+                case 'smedium':
+                case 'small':
+                    visibleLength = 2;
+                    break;
+            }
+            // visible length changed, update with the current gridPlans
+            // - we don't care about previous order
+            if (prev.length !== visibleLength) {
+                return displayedGridPlans.slice(0, visibleLength).map(({ planSlug }) => planSlug);
+            }
+            // prev state out of sync with current gridPlans (e.g. gridPlans updated to a different term)
+            // - we care about previous order
+            const isPrevStale = prev.some((planSlug) => !gridPlansIndex[planSlug]);
+            if (isPrevStale) {
+                return prev.map((planSlug) => {
+                    const gridPlan = displayedGridPlans.find((gridPlan) => (0, calypso_products_1.getPlanClass)(gridPlan.planSlug) === (0, calypso_products_1.getPlanClass)(planSlug));
+                    return gridPlan?.planSlug ?? planSlug;
+                });
+            }
+            // nothing to update
+            return prev;
+        });
+    }, [gridSize, displayedGridPlans, gridPlansIndex]);
+    const visibleGridPlans = (0, element_1.useMemo)(() => visiblePlans.reduce((acc, planSlug) => {
+        const gridPlan = displayedGridPlans.find((gridPlan) => (0, calypso_products_1.getPlanClass)(gridPlan.planSlug) === (0, calypso_products_1.getPlanClass)(planSlug));
+        if (gridPlan) {
+            acc.push(gridPlan);
+        }
+        return acc;
+    }, []), [visiblePlans, displayedGridPlans]);
+    const onPlanChange = (0, react_2.useCallback)((currentPlan, event) => {
+        const newPlan = event.currentTarget.value;
+        const newVisiblePlans = visiblePlans.map((plan) => plan === currentPlan ? newPlan : plan);
+        setVisiblePlans(newVisiblePlans);
+    }, [visiblePlans]);
+    const planFeatureFootnotes = (0, element_1.useMemo)(() => {
+        // This is the main list of all footnotes. It is displayed at the bottom of the comparison grid.
+        const footnoteList = [];
+        // This is a map of features to the index of the footnote in the main list of footnotes.
+        const footnotesByFeature = {};
+        Object.values(featureGroupMap).map((featureGroup) => {
+            const footnotes = featureGroup?.getFootnotes?.();
+            if (!footnotes) {
+                return;
+            }
+            Object.keys(footnotes).map((footnote) => {
+                const footnoteFeatures = footnotes[footnote];
+                // First we add the footnote to the main list of footnotes.
+                footnoteList.push(footnote);
+                // Then we add each feature that has this footnote to the map of footnotes by feature.
+                const currentFootnoteIndex = footnoteList.length;
+                footnoteFeatures.map((feature) => {
+                    footnotesByFeature[feature] = currentFootnoteIndex;
+                });
+            });
+        });
+        return {
+            footnoteList,
+            footnotesByFeature,
+        };
+    }, [featureGroupMap]);
+    // 100px is the padding of the footer row
+    const [bottomHeaderRef, isBottomHeaderInView] = (0, react_intersection_observer_1.useInView)({ rootMargin: '-100px' });
+    /**
+     * Search for "any" plan with a highlight label, not just the visible ones.
+     * This will keep the grid static while user interacts (selects different plans to compare).
+     * Some padding is applied in the stylesheet to cover the badges/labels.
+     */
+    const hasHighlightedPlan = gridPlans.some(({ highlightLabel }) => !!highlightLabel);
+    const classes = (0, clsx_1.default)('plans-grid-next-comparison-grid', {
+        'has-highlighted-plan': hasHighlightedPlan,
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [(0, jsx_runtime_1.jsxs)(Grid, { visiblePlans: visiblePlans.length, children: [(0, jsx_runtime_1.jsx)(sticky_container_1.StickyContainer, { disabled: isBottomHeaderInView, stickyClass: "is-sticky-header-row", stickyOffset: stickyRowOffset, zIndex: 1, children: (isStuck) => ((0, jsx_runtime_1.jsx)(ComparisonGridHeader, { displayedGridPlans: displayedGridPlans, visibleGridPlans: visibleGridPlans, isInSignup: isInSignup, onPlanChange: onPlanChange, currentSitePlanSlug: currentSitePlanSlug, planActionOverrides: planActionOverrides, selectedPlan: selectedPlan, showRefundPeriod: showRefundPeriod, isStuck: isStuck, planTypeSelectorProps: planTypeSelectorProps })) }), Object.values(featureGroupMap).map((featureGroup) => ((0, jsx_runtime_1.jsx)(FeatureGroup, { featureGroup: featureGroup, visibleGridPlans: visibleGridPlans, featureGroupMap: featureGroupMap, selectedFeature: selectedFeature, intervalType: intervalType, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, showUpgradeableStorage: showUpgradeableStorage, onStorageAddOnClick: onStorageAddOnClick, planFeatureFootnotes: planFeatureFootnotes }, featureGroup.slug))), (0, jsx_runtime_1.jsx)(ComparisonGridHeader, { displayedGridPlans: displayedGridPlans, visibleGridPlans: visibleGridPlans, isInSignup: isInSignup, isFooter: true, onPlanChange: onPlanChange, currentSitePlanSlug: currentSitePlanSlug, planActionOverrides: planActionOverrides, selectedPlan: selectedPlan, showRefundPeriod: showRefundPeriod, isStuck: false, isHiddenInMobile: true, ref: bottomHeaderRef, planTypeSelectorProps: planTypeSelectorProps })] }), (0, jsx_runtime_1.jsx)("div", { className: "plan-comparison-grid__footer", children: planFeatureFootnotes?.footnoteList && ((0, jsx_runtime_1.jsx)(FeatureFootnotes, { children: (0, jsx_runtime_1.jsx)("ol", { children: planFeatureFootnotes?.footnoteList?.map((footnote, index) => {
+                            return (0, jsx_runtime_1.jsx)("li", { children: footnote }, `${footnote}-${index}`);
+                        }) }) })) })] }));
+};
+const GRID_BREAKPOINTS = new Map([
+    ['small', 0],
+    ['smedium', 686],
+    ['medium', 835], // enough to fit Enterpreneur plan. was 686
+    ['large', 1005], // enough to fit Enterpreneur plan. was 870
+    ['xlarge', 1180],
+]);
+// TODO
+// Now that everything under is functional component, we can deprecate this wrapper and only keep ComparisonGrid instead.
+// More details can be found in https://github.com/Automattic/wp-calypso/issues/87047
+const WrappedComparisonGrid = ({ siteId, intent, gridPlans, useCheckPlanAvailabilityForPurchase, useAction, recordTracksEvent, allFeaturesList, intervalType, isInSignup, currentSitePlanSlug, selectedPlan, selectedFeature, showUpgradeableStorage, onStorageAddOnClick, stickyRowOffset, coupon, className, hideUnsupportedFeatures, enableFeatureTooltips, featureGroupMap, enableTermSavingsPriceDisplay, reflectStorageSelectionInPlanPrices, ...otherProps }) => {
+    const gridContainerRef = (0, element_1.useRef)(null);
+    // TODO: this will be deprecated along side removing the wrapper component
+    const gridSize = (0, use_grid_size_1.default)({
+        containerRef: gridContainerRef,
+        containerBreakpoints: GRID_BREAKPOINTS,
+    });
+    const classNames = (0, clsx_1.default)('plans-grid-next', className, {
+        'is-small': 'small' === gridSize,
+        'is-smedium': 'smedium' === gridSize,
+        'is-medium': 'medium' === gridSize,
+        'is-large': 'large' === gridSize,
+        'is-xlarge': 'xlarge' === gridSize,
+        'is-visible': true,
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { ref: gridContainerRef, className: classNames, children: (0, jsx_runtime_1.jsx)(grid_context_1.default, { intent: intent, siteId: siteId, gridPlans: gridPlans, useCheckPlanAvailabilityForPurchase: useCheckPlanAvailabilityForPurchase, useAction: useAction, recordTracksEvent: recordTracksEvent, allFeaturesList: allFeaturesList, coupon: coupon, enableFeatureTooltips: enableFeatureTooltips, featureGroupMap: featureGroupMap, hideUnsupportedFeatures: hideUnsupportedFeatures, enableTermSavingsPriceDisplay: enableTermSavingsPriceDisplay, reflectStorageSelectionInPlanPrices: reflectStorageSelectionInPlanPrices, children: (0, jsx_runtime_1.jsx)(ComparisonGrid, { intervalType: intervalType, isInSignup: isInSignup, currentSitePlanSlug: currentSitePlanSlug, siteId: siteId, selectedPlan: selectedPlan, selectedFeature: selectedFeature, showUpgradeableStorage: showUpgradeableStorage, stickyRowOffset: stickyRowOffset, onStorageAddOnClick: onStorageAddOnClick, gridSize: gridSize ?? undefined, ...otherProps }) }) }));
+};
+exports.default = WrappedComparisonGrid;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/comparison-grid/index.js.map

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

package/dist/cjs/components/comparison-grid/index.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HideUnsupportedFeatures = exports.DefaultComparisonGrid = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const calypso_products_1 = require("@automattic/calypso-products");
+const __1 = require("../..");
+const ComponentWrapper = (props) => {
+    const gridPlans = (0, __1.useGridPlansForComparisonGrid)({
+        eligibleForFreeHostingTrial: true,
+        hasRedeemedDomainCredit: undefined,
+        hiddenPlans: undefined,
+        isDisplayingPlansNeededForFeature: false,
+        isInSignup: false,
+        isSubdomainNotGenerated: false,
+        selectedFeature: undefined,
+        selectedPlan: undefined,
+        showLegacyStorageFeature: false,
+        reflectStorageSelectionInPlanPrices: false,
+        term: 'TERM_ANNUALLY',
+        useFreeTrialPlanSlugs: undefined,
+        // Mirror values from props
+        siteId: props.siteId,
+        intent: props.intent,
+        coupon: props.coupon,
+        allFeaturesList: props.allFeaturesList,
+        useCheckPlanAvailabilityForPurchase: props.useCheckPlanAvailabilityForPurchase,
+    });
+    return (gridPlans && ((0, jsx_runtime_1.jsx)(__1.ComparisonGrid, { ...props, gridPlans: gridPlans, featureGroupMap: (0, calypso_products_1.getPlanFeaturesGroupedForComparisonGrid)() })));
+};
+const defaultProps = {
+    allFeaturesList: (0, calypso_products_1.getFeaturesList)(),
+    coupon: undefined,
+    currentSitePlanSlug: undefined,
+    featureGroupMap: (0, calypso_products_1.getPlanFeaturesGroupedForComparisonGrid)(),
+    hideUnavailableFeatures: false,
+    intervalType: 'yearly',
+    isInAdmin: false,
+    isInSignup: true,
+    onStorageAddOnClick: () => { },
+    planActionOverrides: undefined,
+    recordTracksEvent: () => { },
+    showRefundPeriod: false,
+    showUpgradeableStorage: true,
+    siteId: undefined,
+    stickyRowOffset: 0,
+    useCheckPlanAvailabilityForPurchase: () => ({}),
+    useAction: () => ({
+        primary: {
+            text: 'test',
+            callback: () => { },
+            status: 'enabled',
+        },
+        postButtonText: '',
+    }),
+};
+const meta = {
+    title: 'ComparisonGrid',
+    component: ComponentWrapper,
+};
+exports.default = meta;
+exports.DefaultComparisonGrid = {
+    name: 'Default',
+    args: {
+        ...defaultProps,
+    },
+};
+exports.HideUnsupportedFeatures = {
+    name: 'Hide unsupported features',
+    args: {
+        ...defaultProps,
+        hideUnsupportedFeatures: true,
+    },
+};
+//# sourceMappingURL=index.stories.js.map