Pricing grid redesign: implement variant4 (#112490)

* Add the bottom card for Variant 4

* Styling changes to match Figma design

* Adjust the styling for mobile card

* Fix the color for NASA logo

* Display the logos for A4A card in India

* Minor adjustments

Author: dlind1

client/my-sites/plans-features-main/index.tsx

@@ -29,6 +29,7 @@ import {
 	isWooHostedPlan,
 	isWooHostedFreePlan,
 	isWpcomEnterpriseGridPlan,
+	isEcommercePlan,
 } from '@automattic/calypso-products';
 import page from '@automattic/calypso-router';
 import { Button, Spinner } from '@automattic/components';
@@ -690,6 +691,8 @@ const PlansFeaturesMain = ( {
 	const {
 		isLoading: isPlansGridRedesignExperimentLoading,
 		showDifferentiatorHeader: showPlansGridRedesignDifferentiatorHeader,
+		showEnterpriseBottomCard,
+		showWooCommerceBottomCard,
 		usePlansGridRedesignFeatures,
 		usePlansGridRedesign,
 		usePlansGridRedesignNewDescription,
@@ -938,20 +941,74 @@ const PlansFeaturesMain = ( {
 		[ isIndiaA4A, translate ]
 	);
 
+	const gridPlansForFeaturesGridWithA4AIndiaCopy = useMemo(
+		() => applyA4AIndiaCopy( gridPlansForFeaturesGridRaw ?? null ),
+		[ gridPlansForFeaturesGridRaw, applyA4AIndiaCopy ]
+	);
+
+	const bottomGridPlanForFeaturesGrid = useMemo( () => {
+		if ( ! gridPlansForFeaturesGridWithA4AIndiaCopy ) {
+			return undefined;
+		}
+
+		let bottomGridPlan: GridPlan | undefined;
+
+		if ( showEnterpriseBottomCard ) {
+			bottomGridPlan = gridPlansForFeaturesGridWithA4AIndiaCopy.find( ( { planSlug } ) =>
+				isWpcomEnterpriseGridPlan( planSlug )
+			);
+		} else if ( showWooCommerceBottomCard ) {
+			bottomGridPlan = gridPlansForFeaturesGridWithA4AIndiaCopy.find( ( { planSlug } ) =>
+				isEcommercePlan( planSlug )
+			);
+		}
+
+		if (
+			bottomGridPlan &&
+			showWooCommerceBottomCard &&
+			isEcommercePlan( bottomGridPlan.planSlug )
+		) {
+			return {
+				...bottomGridPlan,
+				planTitle: translate( 'WooCommerce' ),
+			};
+		}
+
+		return bottomGridPlan;
+	}, [
+		gridPlansForFeaturesGridWithA4AIndiaCopy,
+		showEnterpriseBottomCard,
+		showWooCommerceBottomCard,
+		translate,
+	] );
+
 	// when `deemphasizeFreePlan` is enabled, the Free plan will be presented as a CTA link instead of a plan card in the features grid.
-	const gridPlansForFeaturesGrid = useMemo(
-		() =>
-			applyA4AIndiaCopy(
-				gridPlansForFeaturesGridRaw?.filter( ( { planSlug } ) => {
-					if ( deemphasizeFreePlan ) {
-						return planSlug !== PLAN_FREE;
-					}
+	const gridPlansForFeaturesGrid = useMemo( () => {
+		const bottomGridPlanSlug = bottomGridPlanForFeaturesGrid?.planSlug;
 
-					return true;
-				} ) ?? null // optional chaining can result in `undefined`; we don't want to introduce it here.
-			),
-		[ gridPlansForFeaturesGridRaw, deemphasizeFreePlan, applyA4AIndiaCopy ]
-	);
+		return (
+			gridPlansForFeaturesGridWithA4AIndiaCopy?.filter( ( { planSlug } ) => {
+				if ( planSlug === bottomGridPlanSlug ) {
+					return false;
+				}
+
+				if ( showWooCommerceBottomCard && isWpcomEnterpriseGridPlan( planSlug ) ) {
+					return false;
+				}
+
+				if ( deemphasizeFreePlan ) {
+					return planSlug !== PLAN_FREE;
+				}
+
+				return true;
+			} ) ?? null
+		);
+	}, [
+		bottomGridPlanForFeaturesGrid,
+		gridPlansForFeaturesGridWithA4AIndiaCopy,
+		deemphasizeFreePlan,
+		showWooCommerceBottomCard,
+	] );
 
 	const gridPlansForComparisonGridFinal = useMemo(
 		() => applyA4AIndiaCopy( gridPlansForComparisonGrid ),
@@ -1421,6 +1478,7 @@ const PlansFeaturesMain = ( {
 								{ gridPlansForFeaturesGrid && (
 									<FeaturesGrid
 										allFeaturesList={ getFeaturesList() }
+										bottomGridPlan={ bottomGridPlanForFeaturesGrid }
 										className={ clsx( 'plans-features-main__features-grid', {
 											'is-plan-differentiators-experiment': isExperimentVariant,
 											'is-plans-grid-redesign-experiment': usePlansGridRedesign,

packages/plans-grid-next/src/components/features-grid/bottom-plan-card.tsx

@@ -0,0 +1,90 @@
+import {
+	getPlanClass,
+	isEcommercePlan,
+	isWpcomEnterpriseGridPlan,
+} from '@automattic/calypso-products';
+import { WooLogo } from '@automattic/components';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import ActionButton from '../shared/action-button';
+import ClientLogoList from './client-logo-list';
+import type { GridPlan, PlanActionOverrides } from '../../types';
+
+const ENTERPRISE_BOTTOM_CARD_LOGO_SLUGS = [
+	'slack',
+	'usa-today',
+	'salesforce',
+	'meta',
+	'intuit',
+	'capgemini',
+	'news-corp',
+	'samsung',
+	'nasa',
+];
+
+type BottomPlanCardProps = {
+	currentSitePlanSlug?: string | null;
+	gridPlan: GridPlan;
+	isInSignup: boolean;
+	planActionOverrides?: PlanActionOverrides;
+};
+
+const BottomPlanCard = ( {
+	currentSitePlanSlug,
+	gridPlan,
+	isInSignup,
+	planActionOverrides,
+}: BottomPlanCardProps ) => {
+	const translate = useTranslate();
+	const isEnterprise = isWpcomEnterpriseGridPlan( gridPlan.planSlug );
+	const isWooCommerce = isEcommercePlan( gridPlan.planSlug );
+
+	return (
+		<div
+			className={ clsx(
+				'plans-grid-next-features-grid__bottom-plan-card',
+				getPlanClass( gridPlan.planSlug ),
+				{
+					'is-enterprise-bottom-card': isEnterprise,
+					'is-woocommerce-bottom-card': isWooCommerce,
+				}
+			) }
+		>
+			<div className="plans-grid-next-features-grid__bottom-plan-card-copy">
+				<h4 className="plans-grid-next-features-grid__bottom-plan-card-title">
+					{ gridPlan.planTitle }
+				</h4>
+				<p className="plans-grid-next-features-grid__bottom-plan-card-tagline">
+					{ gridPlan.tagline }
+				</p>
+				<div className="plans-grid-next-features-grid__bottom-plan-card-action">
+					<ActionButton
+						availableForPurchase={ gridPlan.availableForPurchase }
+						currentSitePlanSlug={ currentSitePlanSlug }
+						isInSignup={ isInSignup }
+						isMonthlyPlan={ gridPlan.isMonthlyPlan }
+						isStuck={ false }
+						planActionOverrides={ planActionOverrides }
+						planSlug={ gridPlan.planSlug }
+						showMonthlyPrice
+						showPostButtonText={ false }
+						visibleGridPlans={ [ gridPlan ] }
+					/>
+				</div>
+			</div>
+			<div
+				className="plans-grid-next-features-grid__bottom-plan-card-media"
+				aria-label={
+					isEnterprise ? translate( 'Enterprise customer logos' ).toString() : undefined
+				}
+			>
+				{ isEnterprise && <ClientLogoList slugs={ ENTERPRISE_BOTTOM_CARD_LOGO_SLUGS } /> }
+				{ isWooCommerce && (
+					<WooLogo className="plans-grid-next-features-grid__bottom-plan-card-woo-logo" />
+				) }
+			</div>
+		</div>
+	);
+};
+
+export default BottomPlanCard;

packages/plans-grid-next/src/components/features-grid/index.tsx

@@ -15,6 +15,7 @@ import useGridSize from '../../hooks/use-grid-size';
 import { PlanFeaturesItem } from '../item';
 import { PlanStorage } from '../shared/storage';
 import BillingTimeframes from './billing-timeframes';
+import BottomPlanCard from './bottom-plan-card';
 import EnterpriseFeatures from './enterprise-features';
 import PlanFeaturesList from './plan-features-list';
 import PlanHeaders from './plan-headers';
@@ -307,6 +308,7 @@ const TabletView = ( {
 // 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 FeaturesGrid = ( {
+	bottomGridPlan,
 	currentSitePlanSlug,
 	generatedWPComSubdomain,
 	gridPlanForSpotlight,
@@ -348,7 +350,11 @@ const FeaturesGrid = ( {
 		<div className="plans-grid-next-features-grid">
 			{ 'small' !== gridSize && <SpotlightPlan { ...spotlightPlanProps } /> }
 			<div className="plan-features">
-				<div className="plan-features-2023-grid__content">
+				<div
+					className={ clsx( 'plan-features-2023-grid__content', {
+						'has-bottom-plan-card': bottomGridPlan,
+					} ) }
+				>
 					<div>
 						{ 'large' === gridSize && (
 							<div className="plan-features-2023-grid__desktop-view">
@@ -369,6 +375,14 @@ const FeaturesGrid = ( {
 							</div>
 						) }
 					</div>
+					{ bottomGridPlan && (
+						<BottomPlanCard
+							currentSitePlanSlug={ currentSitePlanSlug }
+							gridPlan={ bottomGridPlan }
+							isInSignup={ isInSignup }
+							planActionOverrides={ planActionOverrides }
+						/>
+					) }
 				</div>
 			</div>
 		</div>
@@ -379,6 +393,7 @@ const WrappedFeaturesGrid = ( props: FeaturesGridExternalProps ) => {
 	const {
 		siteId,
 		intent,
+		bottomGridPlan,
 		gridPlans,
 		useCheckPlanAvailabilityForPurchase,
 		useAction,
@@ -439,12 +454,23 @@ const WrappedFeaturesGrid = ( props: FeaturesGridExternalProps ) => {
 		'is-large': 'large' === gridSize,
 	} );
 
+	const gridPlansForContext = useMemo( () => {
+		if (
+			! bottomGridPlan ||
+			gridPlans.some( ( gridPlan ) => gridPlan.planSlug === bottomGridPlan.planSlug )
+		) {
+			return gridPlans;
+		}
+
+		return [ ...gridPlans, bottomGridPlan ];
+	}, [ bottomGridPlan, gridPlans ] );
+
 	return (
 		<div ref={ gridContainerRef } className={ classNames }>
 			<PlansGridContextProvider
 				intent={ intent }
 				siteId={ siteId }
-				gridPlans={ gridPlans }
+				gridPlans={ gridPlansForContext }
 				coupon={ coupon }
 				useCheckPlanAvailabilityForPurchase={ useCheckPlanAvailabilityForPurchase }
 				useAction={ useAction }