@automattic/plans-grid-next 1.0.0

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

@@ -0,0 +1,524 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getPlanClass, FEATURE_GROUP_ESSENTIAL_FEATURES, FEATURE_GROUP_PAYMENT_TRANSACTION_FEES, getPlans, } from '@automattic/calypso-products';
+import { Gridicon, JetpackLogo } from '@automattic/components';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useRef, useMemo } from '@wordpress/element';
+import { Icon, chevronRightSmall } from '@wordpress/icons';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import { useState, useCallback, useEffect, forwardRef, } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { plansGridMediumLarge } from '../../css-mixins';
+import PlansGridContextProvider, { usePlansGridContext } from '../../grid-context';
+import useGridSize from '../../hooks/use-grid-size';
+import useHighlightAdjacencyMatrix from '../../hooks/use-highlight-adjacency-matrix';
+import { useManageTooltipToggle } from '../../hooks/use-manage-tooltip-toggle';
+import filterUnusedFeaturesObject from '../../lib/filter-unused-features-object';
+import getPlanFeaturesObject from '../../lib/get-plan-features-object';
+import { sortPlans } from '../../lib/sort-plan-properties';
+import PlanTypeSelector from '../plan-type-selector';
+import { Plans2023Tooltip } from '../plans-2023-tooltip';
+import PopularBadge from '../popular-badge';
+import ActionButton from '../shared/action-button';
+import BillingTimeframe from '../shared/billing-timeframe';
+import HeaderPrice from '../shared/header-price';
+import HeaderPriceContextProvider from '../shared/header-price/header-price-context';
+import { PlanStorage } from '../shared/storage';
+import { StickyContainer } from '../sticky-container';
+import './style.scss';
+const featureGroupRowTitleCellMaxWidth = 450;
+const rowCellMaxWidth = 290;
+const JetpackIconContainer = styled.div `
+	padding-inline-start: 6px;
+	display: inline-block;
+	vertical-align: middle;
+	line-height: 1;
+`;
+const Title = styled.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;
+	}
+
+	${plansGridMediumLarge(css `
+		padding-inline-start: 0;
+		border: none;
+		padding: 0;
+		max-width: 290px;
+
+		.gridicon {
+			display: none;
+		}
+	`)}
+`;
+const Grid = styled.div `
+	display: grid;
+	margin: 0 auto;
+	background: #fff;
+	border: solid 1px #e0e0e0;
+	${(props) => props.visiblePlans &&
+    css `
+			max-width: ${rowCellMaxWidth * props.visiblePlans + featureGroupRowTitleCellMaxWidth}px;
+		`}
+
+	${plansGridMediumLarge(css `
+		border-radius: 5px;
+	`)}
+
+	> .is-sticky-header-row {
+		border-bottom: solid 1px #e0e0e0;
+		background: #fff;
+	}
+`;
+const Row = styled.div `
+	justify-content: space-between;
+	margin-bottom: -1px;
+	align-items: stretch;
+	display: ${(props) => (props.isHiddenInMobile ? 'none' : 'flex')};
+
+	${plansGridMediumLarge(css `
+		display: flex;
+		align-items: center;
+		margin: 0 20px;
+		padding: 12px 0;
+		border-bottom: 1px solid #eee;
+	`)}
+
+	${(props) => props.isHighlighted &&
+    css `
+			${plansGridMediumLarge(css `
+				background-color: #fafafa;
+				border-top: 1px solid #eee;
+				font-weight: bold;
+				margin: -1px 0 0;
+				padding: 12px 20px;
+				color: #3a434a;
+			`)}
+		`};
+`;
+const PlanRow = styled(Row) `
+	&:last-of-type {
+		display: ${(props) => (props.isHiddenInMobile ? 'none' : 'flex')};
+	}
+
+	${plansGridMediumLarge(css `
+		border-bottom: none;
+		align-items: stretch;
+
+		&:last-of-type {
+			display: flex;
+			padding-top: 0;
+			padding-bottom: 0;
+		}
+	`)}
+`;
+const TitleRow = styled(Row) `
+	cursor: pointer;
+	display: flex;
+
+	${plansGridMediumLarge(css `
+		cursor: default;
+		border-bottom: none;
+		padding: 20px 0 10px;
+		pointer-events: none;
+	`)}
+`;
+const Cell = styled.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;
+
+		${plansGridMediumLarge(css `
+			padding-bottom: 0px;
+		`)}
+	}
+
+	${plansGridMediumLarge(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.div `
+	display: none;
+	font-size: 14px;
+	padding-right: 10px;
+	${plansGridMediumLarge(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.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.div `
+	ol {
+		margin: 2em 0 0 1em;
+	}
+
+	ol li {
+		font-size: 11px;
+		padding-left: 1em;
+	}
+`;
+const FeatureFootnote = styled.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 } = usePlansGridContext();
+    const gridPlan = gridPlansIndex[planSlug];
+    const highlightAdjacencyMatrix = useHighlightAdjacencyMatrix({
+        renderedGridPlans: visibleGridPlans,
+    });
+    if (!gridPlan) {
+        return null;
+    }
+    const headerClasses = clsx('plan-comparison-grid__header-cell', 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 = clsx({
+        'is-current-plan': gridPlan.current,
+        'popular-badge-is-stuck': isStuck,
+    });
+    const showPlanSelect = !allVisible && !gridPlan.current;
+    return (_jsxs(Cell, { className: headerClasses, textAlign: "start", children: [_jsx(PopularBadge, { isInSignup: isInSignup, planSlug: planSlug, additionalClassName: popularBadgeClasses }), _jsxs(PlanSelector, { children: [_jsxs("h4", { className: clsx('plan-comparison-grid__title', showPlanSelect && 'is-select-trigger'), children: [_jsx("span", { className: "plan-comparison-grid__title-label", children: gridPlan.planTitle }), showPlanSelect && (_jsx("span", { className: "plan-comparison-grid__title-icon", children: _jsx(Icon, { icon: chevronRightSmall, size: 30 }) }))] }), showPlanSelect && (_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 (_jsx("option", { value: otherPlan, children: planTitle }, otherPlan));
+                        }) }))] }), _jsx(HeaderPrice, { planSlug: planSlug, currentSitePlanSlug: currentSitePlanSlug, visibleGridPlans: visibleGridPlans }), _jsx("div", { className: "plan-comparison-grid__billing-info", children: _jsx(BillingTimeframe, { planSlug: planSlug, showRefundPeriod: showRefundPeriod }) }), _jsx(ActionButton, { currentSitePlanSlug: currentSitePlanSlug, availableForPurchase: gridPlan.availableForPurchase, isInSignup: isInSignup, planSlug: planSlug, planActionOverrides: planActionOverrides, showMonthlyPrice: false, isStuck: false, visibleGridPlans: visibleGridPlans })] }));
+};
+const PlanTypeSelectorWrapper = styled.div `
+	display: none;
+	${plansGridMediumLarge(css `
+		display: block;
+	`)}
+`;
+const ComparisonGridHeader = forwardRef(({ displayedGridPlans, visibleGridPlans, isInSignup, isFooter, onPlanChange, currentSitePlanSlug, planActionOverrides, selectedPlan, isHiddenInMobile, showRefundPeriod, isStuck, planTypeSelectorProps, }, ref) => {
+    const translate = useTranslate();
+    const allVisible = visibleGridPlans.length === displayedGridPlans.length;
+    const { coupon } = usePlansGridContext();
+    return (_jsxs(PlanRow, { isHiddenInMobile: isHiddenInMobile, ref: ref, children: [_jsx(RowTitleCell, { className: "plan-comparison-grid__header-cell is-placeholder-header-cell", isPlaceholderHeaderCell: true, children: isStuck && planTypeSelectorProps && (_jsx(PlanTypeSelectorWrapper, { children: _jsx(PlanTypeSelector, { ...planTypeSelectorProps, title: translate('Billing Cycle'), hideDiscount: true, coupon: coupon }) })) }, "feature-name"), _jsx(HeaderPriceContextProvider, { children: visibleGridPlans.map(({ planSlug }, index) => (_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 } = usePlansGridContext();
+    const gridPlan = gridPlansIndex[planSlug];
+    const translate = useTranslate();
+    const highlightAdjacencyMatrix = useHighlightAdjacencyMatrix({
+        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 = clsx('plan-comparison-grid__feature-group-row-cell', 'plan-comparison-grid__plan', 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?.() === FEATURE_GROUP_PAYMENT_TRANSACTION_FEES);
+    return (_jsx(Cell, { className: cellClasses, textAlign: "center", children: isStorageFeature ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "plan-comparison-grid__plan-title", children: translate('Storage') }), _jsx(PlanStorage, { planSlug: planSlug, onStorageAddOnClick: onStorageAddOnClick, showUpgradeableStorage: showUpgradeableStorage })] })) : (_jsx(_Fragment, { children: FEATURE_GROUP_PAYMENT_TRANSACTION_FEES === featureSlug ? (_jsx(_Fragment, { children: planPaymentTransactionFees ? (_jsxs(_Fragment, { children: [_jsx(Plans2023Tooltip, { text: enableFeatureTooltips ? feature?.getDescription?.() : undefined, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: `${planSlug}-${featureSlug}`, children: _jsx("span", { className: "plan-comparison-grid__plan-title", children: feature?.getAlternativeTitle?.() || feature?.getTitle() }) }), _jsx("span", { className: "plan-comparison-grid__plan-conditional-title", children: planPaymentTransactionFees?.getAlternativeTitle?.() })] })) : (_jsx(Gridicon, { icon: "minus-small", color: "#C3C4C7" })) })) : (_jsxs(_Fragment, { children: [feature?.getIcon && (_jsx("span", { className: "plan-comparison-grid__plan-image", children: feature.getIcon() })), _jsx(Plans2023Tooltip, { text: enableFeatureTooltips ? feature?.getDescription?.() : undefined, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: `${planSlug}-${featureSlug}`, children: _jsx("span", { className: "plan-comparison-grid__plan-title", children: feature?.getAlternativeTitle?.() || feature?.getTitle() }) }), feature?.getCompareTitle && (_jsx("span", { className: "plan-comparison-grid__plan-subtitle", children: feature.getCompareTitle() })), featureLabel && (_jsx("span", { className: "plan-comparison-grid__plan-conditional-title", children: featureLabel })), hasFeature && feature?.getCompareSubtitle && (_jsx("span", { className: "plan-comparison-grid__plan-subtitle", children: feature.getCompareSubtitle() })), hasFeature && !featureLabel && (_jsx(Gridicon, { icon: "checkmark", color: "var(--studio-wordpress-blue-50)" })), !hasFeature && !featureLabel && _jsx(Gridicon, { icon: "minus-small", color: "#C3C4C7" })] })) })) }));
+};
+const ComparisonGridFeatureGroupRow = ({ feature, isHiddenInMobile, allJetpackFeatures, visibleGridPlans, planFeatureFootnotes, isStorageFeature, isHighlighted, intervalType, activeTooltipId, setActiveTooltipId, showUpgradeableStorage, onStorageAddOnClick, }) => {
+    const translate = useTranslate();
+    const rowClasses = clsx('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 } = usePlansGridContext();
+    return (_jsxs(Row, { isHiddenInMobile: isHiddenInMobile, className: rowClasses, isHighlighted: isHighlighted, children: [_jsx(RowTitleCell, { className: "is-feature-group-row-title-cell", isFeatureGroupRowTitleCell: true, children: isStorageFeature ? (_jsx(Plans2023Tooltip, { text: enableFeatureTooltips
+                        ? translate('Space to store your photos, media, and more.')
+                        : undefined, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: tooltipId, children: translate('Storage') })) : (_jsx(_Fragment, { children: feature && (_jsxs(_Fragment, { children: [_jsxs(Plans2023Tooltip, { text: enableFeatureTooltips ? feature.getDescription?.() : undefined, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: tooltipId, children: [feature.getTitle(), footnote && (_jsx(FeatureFootnote, { children: _jsx("sup", { children: footnote }) }))] }), allJetpackFeatures.has(feature.getSlug()) ? (_jsx(JetpackIconContainer, { children: _jsx(Plans2023Tooltip, { text: translate('Security, performance, and growth tools—powered by Jetpack.'), setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: `jp-${tooltipId}`, children: _jsx(JetpackLogo, { size: 16 }) }) })) : null] })) })) }, "feature-name"), visibleGridPlans.map(({ planSlug }) => (_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 } = usePlansGridContext();
+    const [firstSetOfFeatures] = Object.keys(featureGroupMap);
+    const [visibleFeatureGroups, setVisibleFeatureGroups] = useState([
+        firstSetOfFeatures,
+    ]);
+    const features = featureGroup.getFeatures();
+    const featureObjects = filterUnusedFeaturesObject(visibleGridPlans, getPlanFeaturesObject(allFeaturesList, features));
+    const isHiddenInMobile = !visibleFeatureGroups.includes(featureGroup.slug);
+    const allJetpackFeatures = useMemo(() => {
+        const allPlans = 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 = 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 !== FEATURE_GROUP_ESSENTIAL_FEATURES && !featureObjects.length) {
+        return null;
+    }
+    return (_jsxs("div", { className: "plan-comparison-grid__feature-group", children: [_jsx(TitleRow, { className: "plan-comparison-grid__feature-group-title-row", onClick: handleFeatureGroupToggle, children: _jsxs(Title, { isHiddenInMobile: isHiddenInMobile, children: [_jsx(Gridicon, { icon: "chevron-up", size: 12, color: "#1E1E1E" }), _jsx("span", { children: featureGroup.getTitle() })] }) }), featureObjects.map((feature) => (_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 === FEATURE_GROUP_ESSENTIAL_FEATURES ? (_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 } = usePlansGridContext();
+    const [activeTooltipId, setActiveTooltipId] = useManageTooltipToggle();
+    const [visiblePlans, setVisiblePlans] = useState([]);
+    const displayedGridPlans = useMemo(() => {
+        return sortPlans(gridPlans, currentSitePlanSlug, 'small' === gridSize);
+    }, [gridPlans, currentSitePlanSlug, gridSize]);
+    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) => getPlanClass(gridPlan.planSlug) === getPlanClass(planSlug));
+                    return gridPlan?.planSlug ?? planSlug;
+                });
+            }
+            // nothing to update
+            return prev;
+        });
+    }, [gridSize, displayedGridPlans, gridPlansIndex]);
+    const visibleGridPlans = useMemo(() => visiblePlans.reduce((acc, planSlug) => {
+        const gridPlan = displayedGridPlans.find((gridPlan) => getPlanClass(gridPlan.planSlug) === getPlanClass(planSlug));
+        if (gridPlan) {
+            acc.push(gridPlan);
+        }
+        return acc;
+    }, []), [visiblePlans, displayedGridPlans]);
+    const onPlanChange = useCallback((currentPlan, event) => {
+        const newPlan = event.currentTarget.value;
+        const newVisiblePlans = visiblePlans.map((plan) => plan === currentPlan ? newPlan : plan);
+        setVisiblePlans(newVisiblePlans);
+    }, [visiblePlans]);
+    const planFeatureFootnotes = 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] = 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 = clsx('plans-grid-next-comparison-grid', {
+        'has-highlighted-plan': hasHighlightedPlan,
+    });
+    return (_jsxs("div", { className: classes, children: [_jsxs(Grid, { visiblePlans: visiblePlans.length, children: [_jsx(StickyContainer, { disabled: isBottomHeaderInView, stickyClass: "is-sticky-header-row", stickyOffset: stickyRowOffset, zIndex: 1, children: (isStuck) => (_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) => (_jsx(FeatureGroup, { featureGroup: featureGroup, visibleGridPlans: visibleGridPlans, featureGroupMap: featureGroupMap, selectedFeature: selectedFeature, intervalType: intervalType, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, showUpgradeableStorage: showUpgradeableStorage, onStorageAddOnClick: onStorageAddOnClick, planFeatureFootnotes: planFeatureFootnotes }, featureGroup.slug))), _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 })] }), _jsx("div", { className: "plan-comparison-grid__footer", children: planFeatureFootnotes?.footnoteList && (_jsx(FeatureFootnotes, { children: _jsx("ol", { children: planFeatureFootnotes?.footnoteList?.map((footnote, index) => {
+                            return _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 = useRef(null);
+    // TODO: this will be deprecated along side removing the wrapper component
+    const gridSize = useGridSize({
+        containerRef: gridContainerRef,
+        containerBreakpoints: GRID_BREAKPOINTS,
+    });
+    const classNames = clsx('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 (_jsx("div", { ref: gridContainerRef, className: classNames, children: _jsx(PlansGridContextProvider, { 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: _jsx(ComparisonGrid, { intervalType: intervalType, isInSignup: isInSignup, currentSitePlanSlug: currentSitePlanSlug, siteId: siteId, selectedPlan: selectedPlan, selectedFeature: selectedFeature, showUpgradeableStorage: showUpgradeableStorage, stickyRowOffset: stickyRowOffset, onStorageAddOnClick: onStorageAddOnClick, gridSize: gridSize ?? undefined, ...otherProps }) }) }));
+};
+export default WrappedComparisonGrid;
+//# sourceMappingURL=index.js.map

package/dist/esm/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/esm/components/comparison-grid/index.stories.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getFeaturesList, getPlanFeaturesGroupedForComparisonGrid, } from '@automattic/calypso-products';
+import { ComparisonGrid, useGridPlansForComparisonGrid } from '../..';
+const ComponentWrapper = (props) => {
+    const gridPlans = 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 && (_jsx(ComparisonGrid, { ...props, gridPlans: gridPlans, featureGroupMap: getPlanFeaturesGroupedForComparisonGrid() })));
+};
+const defaultProps = {
+    allFeaturesList: getFeaturesList(),
+    coupon: undefined,
+    currentSitePlanSlug: undefined,
+    featureGroupMap: 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,
+};
+export default meta;
+export const DefaultComparisonGrid = {
+    name: 'Default',
+    args: {
+        ...defaultProps,
+    },
+};
+export const HideUnsupportedFeatures = {
+    name: 'Hide unsupported features',
+    args: {
+        ...defaultProps,
+        hideUnsupportedFeatures: true,
+    },
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/esm/components/comparison-grid/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/comparison-grid/index.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EACN,eAAe,EACf,uCAAuC,GACvC,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,cAAc,EAA+B,6BAA6B,EAAE,MAAM,OAAO,CAAC;AAGnG,MAAM,gBAAgB,GAAG,CAAE,KAAuD,EAAG,EAAE;IACtF,MAAM,SAAS,GAAG,6BAA6B,CAAE;QAChD,2BAA2B,EAAE,IAAI;QACjC,uBAAuB,EAAE,SAAS;QAClC,WAAW,EAAE,SAAS;QACtB,iCAAiC,EAAE,KAAK;QACxC,UAAU,EAAE,KAAK;QACjB,uBAAuB,EAAE,KAAK;QAC9B,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,SAAS;QACvB,wBAAwB,EAAE,KAAK;QAC/B,mCAAmC,EAAE,KAAK;QAC1C,IAAI,EAAE,eAAe;QACrB,qBAAqB,EAAE,SAAS;QAEhC,2BAA2B;QAC3B,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,eAAe,EAAE,KAAK,CAAC,eAAe;QACtC,mCAAmC,EAAE,KAAK,CAAC,mCAAmC;KAC9E,CAAE,CAAC;IAEJ,OAAO,CACN,SAAS,IAAI,CACZ,KAAC,cAAc,OACT,KAAK,EACV,SAAS,EAAG,SAAS,EACrB,eAAe,EAAG,uCAAuC,EAAE,GAC1D,CACF,CACD,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG;IACpB,eAAe,EAAE,eAAe,EAAE;IAClC,MAAM,EAAE,SAAS;IACjB,mBAAmB,EAAE,SAAS;IAC9B,eAAe,EAAE,uCAAuC,EAAE;IAC1D,uBAAuB,EAAE,KAAK;IAC9B,YAAY,EAAE,QAAQ;IACtB,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,IAAI;IAChB,mBAAmB,EAAE,GAAG,EAAE,GAAE,CAAC;IAC7B,mBAAmB,EAAE,SAAS;IAC9B,iBAAiB,EAAE,GAAG,EAAE,GAAE,CAAC;IAC3B,gBAAgB,EAAE,KAAK;IACvB,sBAAsB,EAAE,IAAI;IAC5B,MAAM,EAAE,SAAS;IACjB,eAAe,EAAE,CAAC;IAClB,mCAAmC,EAAE,GAAG,EAAE,CAAC,CAAE,EAAE,CAAE;IACjD,SAAS,EAAE,GAAG,EAAE,CAAC,CAAE;QAClB,OAAO,EAAE;YACR,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;YAClB,MAAM,EAAE,SAAkB;SAC1B;QACD,cAAc,EAAE,EAAE;KAClB,CAAE;CACH,CAAC;AAEF,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;CACe,CAAC;AAE5C,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACpC,IAAI,EAAE,SAAS;IACf,IAAI,EAAE;QACL,GAAG,YAAY;KACf;CACe,CAAC;AAElB,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACtC,IAAI,EAAE,2BAA2B;IACjC,IAAI,EAAE;QACL,GAAG,YAAY;QACf,uBAAuB,EAAE,IAAI;KAC7B;CACe,CAAC"}