@automattic/plans-grid-next 1.0.0

package/src/components/features-grid/plan-logos.tsx

@@ -0,0 +1,27 @@
+import { GridPlan } from '../../types';
+import PlanLogo from '../plan-logo';
+
+type PlanLogosProps = {
+	isInSignup: boolean;
+	renderedGridPlans: GridPlan[];
+	options?: {
+		isTableCell?: boolean;
+	};
+};
+
+const PlanLogos = ( { isInSignup, options, renderedGridPlans }: PlanLogosProps ) => {
+	return renderedGridPlans.map( ( { planSlug }, index ) => {
+		return (
+			<PlanLogo
+				key={ planSlug }
+				planSlug={ planSlug }
+				planIndex={ index }
+				renderedGridPlans={ renderedGridPlans }
+				isInSignup={ isInSignup }
+				isTableCell={ options?.isTableCell }
+			/>
+		);
+	} );
+};
+
+export default PlanLogos;

package/src/components/features-grid/plan-prices.tsx

@@ -0,0 +1,37 @@
+import { GridPlan } from '../../types';
+import PlanDivOrTdContainer from '../plan-div-td-container';
+import HeaderPrice from '../shared/header-price';
+import HeaderPriceContextProvider from '../shared/header-price/header-price-context';
+
+type PlanPricesProps = {
+	currentSitePlanSlug?: string | null;
+	renderedGridPlans: GridPlan[];
+	options?: {
+		isTableCell?: boolean;
+	};
+};
+
+const PlanPrices = ( { currentSitePlanSlug, options, renderedGridPlans }: PlanPricesProps ) => {
+	return (
+		<HeaderPriceContextProvider>
+			{ renderedGridPlans.map( ( { planSlug } ) => {
+				return (
+					<PlanDivOrTdContainer
+						scope="col"
+						key={ planSlug }
+						className="plan-features-2023-grid__table-item plan-price"
+						isTableCell={ options?.isTableCell }
+					>
+						<HeaderPrice
+							planSlug={ planSlug }
+							currentSitePlanSlug={ currentSitePlanSlug }
+							visibleGridPlans={ renderedGridPlans }
+						/>
+					</PlanDivOrTdContainer>
+				);
+			} ) }
+		</HeaderPriceContextProvider>
+	);
+};
+
+export default PlanPrices;

package/src/components/features-grid/plan-tagline.tsx

@@ -0,0 +1,25 @@
+import { GridPlan } from '../../types';
+import PlanDivOrTdContainer from '../plan-div-td-container';
+
+type PlanTaglineProps = {
+	renderedGridPlans: GridPlan[];
+	options?: {
+		isTableCell?: boolean;
+	};
+};
+
+const PlanTagline = ( { options, renderedGridPlans }: PlanTaglineProps ) => {
+	return renderedGridPlans.map( ( { planSlug, tagline } ) => {
+		return (
+			<PlanDivOrTdContainer
+				key={ planSlug }
+				className="plan-features-2023-grid__table-item"
+				isTableCell={ options?.isTableCell }
+			>
+				<div className="plan-features-2023-grid__header-tagline">{ tagline }</div>
+			</PlanDivOrTdContainer>
+		);
+	} );
+};
+
+export default PlanTagline;

package/src/components/features-grid/previous-features-included-title.tsx

@@ -0,0 +1,66 @@
+import {
+	getPlanClass,
+	isWpComFreePlan,
+	isWpcomEnterpriseGridPlan,
+} from '@automattic/calypso-products';
+import { useMemo } from '@wordpress/element';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import { usePlansGridContext } from '../../grid-context';
+import { GridPlan } from '../../types';
+import PlanDivOrTdContainer from '../plan-div-td-container';
+
+type PreviousFeaturesIncludedTitleProps = {
+	renderedGridPlans: GridPlan[];
+	options?: {
+		isTableCell?: boolean;
+	};
+};
+
+const PreviousFeaturesIncludedTitle = ( {
+	renderedGridPlans,
+	options,
+}: PreviousFeaturesIncludedTitleProps ) => {
+	const translate = useTranslate();
+
+	/**
+	 * This is a pretty critical and fragile, as it filters out the enterprise plan.
+	 * If the plan sits anywhere else but the tail/end, it will most likely break the grid (render wrong parts at wrong places).
+	 */
+	const plansWithFeatures = useMemo( () => {
+		return renderedGridPlans.filter(
+			( gridPlan ) => ! isWpcomEnterpriseGridPlan( gridPlan.planSlug )
+		);
+	}, [ renderedGridPlans ] );
+
+	const { gridPlans } = usePlansGridContext();
+
+	return plansWithFeatures.map( ( { planSlug } ) => {
+		const shouldShowFeatureTitle = ! isWpComFreePlan( planSlug );
+		const indexInGridPlansForFeaturesGrid = gridPlans.findIndex(
+			( { planSlug: slug } ) => slug === planSlug
+		);
+		const previousProductName =
+			indexInGridPlansForFeaturesGrid > 0
+				? gridPlans[ indexInGridPlansForFeaturesGrid - 1 ].productNameShort
+				: null;
+		const title =
+			previousProductName &&
+			translate( 'Everything in %(planShortName)s, plus:', {
+				args: { planShortName: previousProductName },
+			} );
+		const classes = clsx( 'plan-features-2023-grid__common-title', getPlanClass( planSlug ) );
+
+		return (
+			<PlanDivOrTdContainer
+				key={ planSlug }
+				isTableCell={ options?.isTableCell }
+				className="plan-features-2023-grid__table-item"
+			>
+				{ shouldShowFeatureTitle && <div className={ classes }>{ title }</div> }
+			</PlanDivOrTdContainer>
+		);
+	} );
+};
+
+export default PreviousFeaturesIncludedTitle;

package/src/components/features-grid/spotlight-plan.scss

@@ -0,0 +1,5 @@
+.plan-features-2023-grid__plan-spotlight {
+	.plans-grid-next-action-button {
+		width: 200px;
+	}
+}

package/src/components/features-grid/spotlight-plan.tsx

@@ -0,0 +1,77 @@
+import { FEATURE_GROUP_STORAGE, getPlanClass, isFreePlan } from '@automattic/calypso-products';
+import { AddOns } from '@automattic/data-stores';
+import clsx from 'clsx';
+import { GridPlan, PlanActionOverrides } from '../../types';
+import BillingTimeframes from './billing-timeframes';
+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 TopButtons from './top-buttons';
+import './spotlight-plan.scss';
+
+type SpotlightPlanProps = {
+	currentSitePlanSlug?: string | null;
+	gridPlanForSpotlight?: GridPlan;
+	isInSignup: boolean;
+	onStorageAddOnClick?: ( addOnSlug: AddOns.StorageAddOnSlug ) => void;
+	planActionOverrides?: PlanActionOverrides;
+	showUpgradeableStorage: boolean;
+	options?: {
+		isTableCell?: boolean;
+	};
+};
+
+const SpotlightPlan = ( {
+	currentSitePlanSlug,
+	gridPlanForSpotlight,
+	isInSignup,
+	onStorageAddOnClick,
+	planActionOverrides,
+	showUpgradeableStorage,
+}: SpotlightPlanProps ) => {
+	if ( ! gridPlanForSpotlight ) {
+		return null;
+	}
+
+	const spotlightPlanClasses = clsx(
+		'plan-features-2023-grid__plan-spotlight',
+		getPlanClass( gridPlanForSpotlight.planSlug )
+	);
+
+	const isNotFreePlan = ! isFreePlan( gridPlanForSpotlight.planSlug );
+
+	return (
+		<div className={ spotlightPlanClasses }>
+			<div>
+				<PlanLogos renderedGridPlans={ [ gridPlanForSpotlight ] } isInSignup={ false } />
+				<PlanHeaders renderedGridPlans={ [ gridPlanForSpotlight ] } />
+				{ isNotFreePlan && <PlanTagline renderedGridPlans={ [ gridPlanForSpotlight ] } /> }
+				{ isNotFreePlan && (
+					<PlanPrices
+						renderedGridPlans={ [ gridPlanForSpotlight ] }
+						currentSitePlanSlug={ currentSitePlanSlug }
+					/>
+				) }
+				{ isNotFreePlan && <BillingTimeframes renderedGridPlans={ [ gridPlanForSpotlight ] } /> }
+				<PlanFeaturesList
+					renderedGridPlans={ [ gridPlanForSpotlight ] }
+					featureGroupSlug={ FEATURE_GROUP_STORAGE }
+					onStorageAddOnClick={ onStorageAddOnClick }
+					showUpgradeableStorage={ showUpgradeableStorage }
+				/>
+			</div>
+			<div className="spotlight-plan__buttons">
+				<TopButtons
+					renderedGridPlans={ [ gridPlanForSpotlight ] }
+					isInSignup={ isInSignup }
+					currentSitePlanSlug={ currentSitePlanSlug }
+					planActionOverrides={ planActionOverrides }
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default SpotlightPlan;