@automattic/plans-grid-next 1.0.0

package/src/components/features-grid/table.tsx

@@ -0,0 +1,185 @@
+import { type FeatureGroupSlug } from '@automattic/calypso-products';
+import { AddOns } from '@automattic/data-stores';
+import { useMemo } from '@wordpress/element';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import { usePlansGridContext } from '../../grid-context';
+import { DataResponse, GridPlan, PlanActionOverrides } from '../../types';
+import { StickyContainer } from '../sticky-container';
+import BillingTimeframes from './billing-timeframes';
+import EnterpriseFeatures from './enterprise-features';
+import PlanFeaturesList from './plan-features-list';
+import PlanHeaders from './plan-headers';
+import PlanLogos from './plan-logos';
+import PlanPrices from './plan-prices';
+import PlanTagline from './plan-tagline';
+import PreviousFeaturesIncludedTitle from './previous-features-included-title';
+import TopButtons from './top-buttons';
+
+type TableProps = {
+	currentSitePlanSlug?: string | null;
+	generatedWPComSubdomain: DataResponse< { domain_name: string } >;
+	gridPlanForSpotlight?: GridPlan;
+	hideUnavailableFeatures?: boolean;
+	isCustomDomainAllowedOnFreePlan: boolean;
+	isInSignup: boolean;
+	onStorageAddOnClick?: ( addOnSlug: AddOns.StorageAddOnSlug ) => void;
+	paidDomainName?: string;
+	planActionOverrides?: PlanActionOverrides;
+	renderedGridPlans: GridPlan[];
+	selectedFeature?: string;
+	showRefundPeriod?: boolean;
+	showUpgradeableStorage: boolean;
+	stickyRowOffset: number;
+	options?: {
+		isTableCell?: boolean;
+	};
+};
+
+const Table = ( {
+	currentSitePlanSlug,
+	generatedWPComSubdomain,
+	gridPlanForSpotlight,
+	hideUnavailableFeatures,
+	isCustomDomainAllowedOnFreePlan,
+	isInSignup,
+	onStorageAddOnClick,
+	paidDomainName,
+	planActionOverrides,
+	renderedGridPlans,
+	selectedFeature,
+	showRefundPeriod,
+	showUpgradeableStorage,
+	stickyRowOffset,
+}: TableProps ) => {
+	const translate = useTranslate();
+	const {
+		featureGroupMap,
+		enableCategorisedFeatures,
+		enableLogosOnlyForEnterprisePlan,
+		enableReducedFeatureGroupSpacing,
+	} = usePlansGridContext();
+	const featureGroups = useMemo(
+		() => Object.keys( featureGroupMap ) as FeatureGroupSlug[],
+		[ featureGroupMap ]
+	);
+
+	// Do not render the spotlight plan if it exists
+	const gridPlansWithoutSpotlight = useMemo(
+		() =>
+			! gridPlanForSpotlight
+				? renderedGridPlans
+				: renderedGridPlans.filter(
+						( { planSlug } ) => gridPlanForSpotlight.planSlug !== planSlug
+				  ),
+		[ renderedGridPlans, gridPlanForSpotlight ]
+	);
+	// Search for a plan with a highlight label. Some margin is applied in the stylesheet to cover the badges/labels
+	const hasHighlightedPlan = gridPlansWithoutSpotlight.some(
+		( { highlightLabel } ) => !! highlightLabel
+	);
+	const tableClasses = clsx(
+		'plan-features-2023-grid__table',
+		`has-${ gridPlansWithoutSpotlight.length }-cols`,
+		{
+			'has-highlighted-plan': hasHighlightedPlan,
+		}
+	);
+
+	return (
+		<table className={ tableClasses }>
+			<caption className="plan-features-2023-grid__screen-reader-text screen-reader-text">
+				{ translate( 'Available plans to choose from' ) }
+			</caption>
+			<tbody>
+				<tr>
+					<PlanLogos
+						renderedGridPlans={ gridPlansWithoutSpotlight }
+						isInSignup={ isInSignup }
+						options={ { isTableCell: true } }
+					/>
+				</tr>
+				<tr>
+					<PlanHeaders
+						renderedGridPlans={ gridPlansWithoutSpotlight }
+						options={ { isTableCell: true } }
+					/>
+				</tr>
+				<tr>
+					<PlanTagline
+						renderedGridPlans={ gridPlansWithoutSpotlight }
+						options={ { isTableCell: true } }
+					/>
+				</tr>
+				<tr>
+					<PlanPrices
+						renderedGridPlans={ gridPlansWithoutSpotlight }
+						options={ { isTableCell: true } }
+						currentSitePlanSlug={ currentSitePlanSlug }
+					/>
+				</tr>
+				<tr>
+					<BillingTimeframes
+						renderedGridPlans={ gridPlansWithoutSpotlight }
+						showRefundPeriod={ showRefundPeriod }
+						options={ { isTableCell: true } }
+					/>
+				</tr>
+				<StickyContainer
+					stickyClass="is-sticky-top-buttons-row"
+					element="tr"
+					stickyOffset={ stickyRowOffset }
+					zIndex={ 2 }
+				>
+					{ ( isStuck: boolean ) => (
+						<TopButtons
+							renderedGridPlans={ gridPlansWithoutSpotlight }
+							options={ { isTableCell: true, isStuck } }
+							isInSignup={ isInSignup }
+							currentSitePlanSlug={ currentSitePlanSlug }
+							planActionOverrides={ planActionOverrides }
+						/>
+					) }
+				</StickyContainer>
+				<tr>
+					<EnterpriseFeatures
+						renderedGridPlans={ gridPlansWithoutSpotlight }
+						options={ { isTableCell: true, isLogosOnly: enableLogosOnlyForEnterprisePlan } }
+					/>
+				</tr>
+				{ ! enableCategorisedFeatures && (
+					<tr>
+						<PreviousFeaturesIncludedTitle
+							renderedGridPlans={ gridPlansWithoutSpotlight }
+							options={ { isTableCell: true } }
+						/>
+					</tr>
+				) }
+				{ featureGroups.map( ( featureGroupSlug, featureGroupIndex ) => (
+					<tr
+						className={ clsx( 'plans-grid-next-features-grid__feature-group-row', {
+							'is-first-feature-group-row': featureGroupIndex === 0,
+							'is-reduced-feature-group-spacing': enableReducedFeatureGroupSpacing,
+						} ) }
+						key={ featureGroupSlug }
+					>
+						<PlanFeaturesList
+							renderedGridPlans={ gridPlansWithoutSpotlight }
+							options={ { isTableCell: true } }
+							paidDomainName={ paidDomainName }
+							hideUnavailableFeatures={ hideUnavailableFeatures }
+							selectedFeature={ selectedFeature }
+							generatedWPComSubdomain={ generatedWPComSubdomain }
+							isCustomDomainAllowedOnFreePlan={ isCustomDomainAllowedOnFreePlan }
+							featureGroupSlug={ featureGroupSlug }
+							onStorageAddOnClick={ onStorageAddOnClick }
+							showUpgradeableStorage={ showUpgradeableStorage }
+						/>
+					</tr>
+				) ) }
+			</tbody>
+		</table>
+	);
+};
+
+export default Table;

package/src/components/features-grid/top-buttons.tsx

@@ -0,0 +1,49 @@
+import clsx from 'clsx';
+import { GridPlan, PlanActionOverrides } from '../../types';
+import PlanDivOrTdContainer from '../plan-div-td-container';
+import ActionButton from '../shared/action-button';
+
+type TopButtonsProps = {
+	currentSitePlanSlug?: string | null;
+	isInSignup: boolean;
+	planActionOverrides?: PlanActionOverrides;
+	renderedGridPlans: GridPlan[];
+	options?: {
+		isTableCell?: boolean;
+		isStuck?: boolean;
+	};
+};
+
+const TopButtons = ( {
+	currentSitePlanSlug,
+	isInSignup,
+	options,
+	planActionOverrides,
+	renderedGridPlans,
+}: TopButtonsProps ) => {
+	return renderedGridPlans.map( ( { planSlug, availableForPurchase, isMonthlyPlan } ) => {
+		const classes = clsx( 'plan-features-2023-grid__table-item', 'is-top-buttons' );
+
+		return (
+			<PlanDivOrTdContainer
+				key={ planSlug }
+				className={ classes }
+				isTableCell={ options?.isTableCell }
+			>
+				<ActionButton
+					availableForPurchase={ availableForPurchase }
+					isInSignup={ isInSignup }
+					isMonthlyPlan={ isMonthlyPlan }
+					planSlug={ planSlug }
+					currentSitePlanSlug={ currentSitePlanSlug }
+					planActionOverrides={ planActionOverrides }
+					showMonthlyPrice
+					isStuck={ options?.isStuck || false }
+					visibleGridPlans={ renderedGridPlans }
+				/>
+			</PlanDivOrTdContainer>
+		);
+	} );
+};
+
+export default TopButtons;

package/src/components/features.tsx

@@ -0,0 +1,168 @@
+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 { Dispatch, SetStateAction } from 'react';
+import { usePlansGridContext } from '../grid-context';
+import { PlanFeaturesItem } from './item';
+import { Plans2023Tooltip } from './plans-2023-tooltip';
+import type { TransformedFeatureObject, DataResponse } from '../types';
+
+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: React.FC< {
+	paidDomainName: string;
+	generatedWPComSubdomain?: DataResponse< { domain_name: string } >;
+	isCustomDomainAllowedOnFreePlan?: boolean;
+} > = ( { paidDomainName, generatedWPComSubdomain, isCustomDomainAllowedOnFreePlan } ) => {
+	const translate = useTranslate();
+	const isLoading = generatedWPComSubdomain?.isLoading;
+	return (
+		<SubdomainSuggestion>
+			{ isLoading && <LoadingPlaceholder /> }
+			{ ! isLoading &&
+				( isCustomDomainAllowedOnFreePlan ? (
+					<div>
+						{ translate( '%s will be a redirect', {
+							args: [ paidDomainName ],
+							comment: '%s is a domain name.',
+						} ) }
+					</div>
+				) : (
+					<>
+						<div className="is-domain-name">{ paidDomainName }</div>
+						<div>{ generatedWPComSubdomain?.result?.domain_name }</div>
+					</>
+				) ) }
+		</SubdomainSuggestion>
+	);
+};
+
+const PlanFeatures2023GridFeatures: React.FC< {
+	features: Array< TransformedFeatureObject >;
+	planSlug: string;
+	paidDomainName?: string;
+	generatedWPComSubdomain?: DataResponse< { domain_name: string } >;
+	hideUnavailableFeatures?: boolean;
+	selectedFeature?: string;
+	isCustomDomainAllowedOnFreePlan?: boolean;
+	activeTooltipId: string;
+	setActiveTooltipId: Dispatch< SetStateAction< string > >;
+} > = ( {
+	features,
+	planSlug,
+	paidDomainName,
+	generatedWPComSubdomain,
+	hideUnavailableFeatures,
+	selectedFeature,
+	isCustomDomainAllowedOnFreePlan,
+	activeTooltipId,
+	setActiveTooltipId,
+} ) => {
+	const translate = useTranslate();
+	const { enableFeatureTooltips } = usePlansGridContext();
+
+	return (
+		<>
+			{ 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 (
+					<div key={ key } className={ divClasses }>
+						<PlanFeaturesItem>
+							<span className={ spanClasses } key={ key }>
+								<span className={ itemTitleClasses }>
+									{ isFreePlanAndCustomDomainFeature ? (
+										<Plans2023Tooltip
+											text={
+												enableFeatureTooltips
+													? translate( '%s is not included', {
+															args: [ paidDomainName as string ],
+															comment: '%s is a domain name.',
+													  } )
+													: undefined
+											}
+											activeTooltipId={ activeTooltipId }
+											setActiveTooltipId={ setActiveTooltipId }
+											id={ key }
+										>
+											<FreePlanCustomDomainFeature
+												key={ key }
+												paidDomainName={ paidDomainName as string }
+												generatedWPComSubdomain={ generatedWPComSubdomain }
+												isCustomDomainAllowedOnFreePlan={ isCustomDomainAllowedOnFreePlan }
+											/>
+										</Plans2023Tooltip>
+									) : (
+										<Plans2023Tooltip
+											text={ enableFeatureTooltips ? currentFeature.getDescription?.() : undefined }
+											activeTooltipId={ activeTooltipId }
+											setActiveTooltipId={ setActiveTooltipId }
+											id={ key }
+										>
+											<>
+												{ currentFeature.getTitle( {
+													domainName: paidDomainName,
+												} ) }
+												{ currentFeature?.getSubFeatureObjects?.()?.length ? (
+													<ul className="plan-features-2023-grid__item-sub-feature-list">
+														{ currentFeature.getSubFeatureObjects().map( ( subFeature ) => (
+															<li>{ subFeature?.getTitle() }</li>
+														) ) }
+													</ul>
+												) : null }
+											</>
+										</Plans2023Tooltip>
+									) }
+								</span>
+							</span>
+						</PlanFeaturesItem>
+					</div>
+				);
+			} ) }
+		</>
+	);
+};
+
+export default PlanFeatures2023GridFeatures;

package/src/components/item.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+
+export function PlanFeaturesItem( props: { children?: ReactNode } ) {
+	return (
+		<div className="plan-features-2023-grid__item plan-features-2023-grid__item-available">
+			<div className="plan-features-2023-grid__item-info-container">{ props.children }</div>
+		</div>
+	);
+}

package/src/components/plan-button/index.tsx

@@ -0,0 +1,59 @@
+import { getPlanClass, type PlanSlug } 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,
+}: {
+	planSlug?: PlanSlug;
+	children: React.ReactNode;
+	classes?: string;
+	href?: string;
+	onClick?: () => void;
+	busy?: boolean;
+	borderless?: boolean;
+	current?: boolean;
+	disabled?: boolean;
+	isStuck?: boolean;
+	isLargeCurrency?: boolean;
+} ) => {
+	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 (
+		<Button
+			className={ className }
+			onClick={ onClick }
+			busy={ busy }
+			borderless={ borderless }
+			disabled={ disabled }
+			href={ href }
+		>
+			{ children }
+		</Button>
+	);
+};
+
+export default PlanButton;

package/src/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/src/components/plan-div-td-container.tsx

@@ -0,0 +1,15 @@
+const PlanDivOrTdContainer = (
+	props: (
+		| React.HTMLAttributes< HTMLDivElement >
+		| React.HTMLAttributes< HTMLTableCellElement >
+	) & { isTableCell?: boolean; scope?: string }
+): JSX.Element => {
+	const { children, isTableCell, ...otherProps } = props;
+	return isTableCell ? (
+		<td { ...otherProps }>{ children }</td>
+	) : (
+		<div { ...otherProps }>{ children }</div>
+	);
+};
+
+export default PlanDivOrTdContainer;