@automattic/plans-grid-next 1.0.1 → 1.0.3

package/src/components/item.tsx

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

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

@@ -18,6 +18,7 @@ const PlanButton = ( {
 	disabled = false,
 	isStuck = false,
 	isLargeCurrency = false,
+	ariaLabel,
 }: {
 	planSlug?: PlanSlug;
 	children: React.ReactNode;
@@ -30,6 +31,7 @@ const PlanButton = ( {
 	disabled?: boolean;
 	isStuck?: boolean;
 	isLargeCurrency?: boolean;
+	ariaLabel?: string;
 } ) => {
 	const className = clsx(
 		classes,
@@ -39,7 +41,8 @@ const PlanButton = ( {
 			'is-current-plan': current,
 			'is-stuck': isStuck,
 			'is-large-currency': isLargeCurrency,
-		}
+		},
+		disabled && 'disabled'
 	);
 
 	return (
@@ -50,6 +53,9 @@ const PlanButton = ( {
 			borderless={ borderless }
 			disabled={ disabled }
 			href={ href }
+			aria-label={ ariaLabel }
+			// eslint-disable-next-line jsx-a11y/tabindex-no-positive
+			tabIndex={ 2 }
 		>
 			{ children }
 		</Button>

package/src/components/plan-button/style.scss

@@ -1,93 +1,106 @@
-@import "@automattic/onboarding/styles/mixins";
+@import '@automattic/onboarding/styles/mixins';
 
 .button.plan-features-2023-grid__actions-button {
 	line-height: 20px;
-	border-radius: 4px;
+	border-radius: 2px;
 	padding: 10px 12px;
 	border: unset;
 	text-align: center;
 	text-wrap: balance;
 	width: 100%;
-	color: var(--color-text-inverted);
+	color: var( --color-text-inverted );
 
 	&:hover {
-		color: var(--color-text-inverted);
+		color: var( --color-text-inverted );
 	}
 
-	&.is-free-plan {
-		background-color: var(--studio-wordpress-blue-50);
+	&.is-free-plan,
+	&.is-woo-hosted-basic-plan,
+	&.is-woo-hosted-pro-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);
+			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);
+			background-color: var( --studio-wordpress-blue-60 );
 		}
-
 	}
 
 	&.is-personal-plan {
-		background-color: var(--studio-wordpress-blue-60);
+		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);
+			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);
+			background-color: var( --studio-wordpress-blue-70 );
 		}
 	}
 
 	&.is-premium-plan {
-		background-color: var(--studio-wordpress-blue-70);
+		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);
+			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);
+			background-color: var( --studio-wordpress-blue-80 );
 		}
 	}
 
 	&.is-business-plan {
-		background-color: var(--studio-woocommerce-purple-60);
+		background-color: var( --studio-woocommerce-purple-60 );
 
 		&:focus {
-			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-60);
+			box-shadow:
+				0 0 0 2px var( --studio-white ),
+				0 0 0 4px var( --studio-woocommerce-purple-60 );
 		}
 
 		&:hover {
-			background-color: var(--studio-woocommerce-purple-70);
+			background-color: var( --studio-woocommerce-purple-70 );
 		}
 
 		+ .button.is-borderless {
 			background: transparent;
 			font-size: $font-body-small;
-			color: var(--studio-woocommerce-purple-60);
+			color: var( --studio-woocommerce-purple-60 );
 			text-decoration: none;
 
 			&:focus {
-				box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-60);
+				box-shadow:
+					0 0 0 2px var( --studio-white ),
+					0 0 0 4px var( --studio-woocommerce-purple-60 );
 			}
 		}
 	}
 
 	&.is-wooexpress-medium-plan {
-		background-color: var(--color-accent);
-		color: var(--color-text-inverted);
+		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);
+			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);
+		background-color: var( --color-surface );
+		color: var( --color-accent );
+		border: 1px solid var( --color-accent );
 		font-weight: 400;
 	}
 
@@ -95,42 +108,48 @@
 		display: inline-block;
 		width: 85%;
 		text-align: center;
-		background-color: var(--color-surface);
-		color: var(--color-accent);
-		border: 1px solid  var(--color-accent);
+		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-40);
+		background-color: var( --studio-woocommerce-purple-40 );
 
 		&:focus {
-			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-40);
+			box-shadow:
+				0 0 0 2px var( --studio-white ),
+				0 0 0 4px var( --studio-woocommerce-purple-40 );
 		}
 
 		&:hover {
-			background-color: var(--studio-woocommerce-purple-50);
+			background-color: var( --studio-woocommerce-purple-50 );
 		}
 	}
 
 	&.is-wpcom-enterprise-grid-plan {
-		background-color: var(--studio-gray-80);
+		background-color: var( --studio-gray-80 );
 
 		&:focus {
-			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-gray-80);
+			box-shadow:
+				0 0 0 2px var( --studio-white ),
+				0 0 0 4px var( --studio-gray-80 );
 		}
 
 		&:hover {
-			background-color: var(--studio-gray-90);
+			background-color: var( --studio-gray-90 );
 		}
 	}
 
 	&.is-p2-plus-plan {
-		background-color: var(--color-accent);
-		color: var(--color-text-inverted);
+		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);
+			box-shadow:
+				0 0 0 2px var( --color-surface ),
+				0 0 0 4px var( --color-accent );
 		}
 	}
 
@@ -140,25 +159,30 @@
 	&.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);
+		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);
+			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);
+			background-color: var( --studio-white );
+			box-shadow: inset 0 0 0 1px var( --studio-gray-80 );
 		}
 	}
 
+	&:hover[disabled] {
+		background: none;
+		box-shadow: inset 0 0 0 1px #e0e0e0;
+	}
+
 	&.disabled,
 	&[disabled] {
-		background-color: var(--studio-white);
-		color: var(--color-neutral-light);
+		background-color: var( --studio-white );
+		color: var( --color-neutral-light );
 		box-shadow: inset 0 0 0 1px #e0e0e0;
 	}
 

package/src/components/plan-div-td-container.tsx

@@ -1,10 +1,14 @@
+import type { JSX } from 'react';
 const PlanDivOrTdContainer = (
 	props: (
 		| React.HTMLAttributes< HTMLDivElement >
 		| React.HTMLAttributes< HTMLTableCellElement >
-	) & { isTableCell?: boolean; scope?: string }
+	) & { isTableCell?: boolean; scope?: string; isHeader?: boolean }
 ): JSX.Element => {
-	const { children, isTableCell, ...otherProps } = props;
+	const { children, isTableCell, isHeader, ...otherProps } = props;
+	if ( isHeader ) {
+		return <th { ...otherProps }>{ children }</th>;
+	}
 	return isTableCell ? (
 		<td { ...otherProps }>{ children }</td>
 	) : (

package/src/components/plan-logo.tsx

@@ -8,6 +8,7 @@ import {
 	isPremiumPlan,
 	isFreePlan,
 	PlanSlug,
+	isPartnerBundleOnboarding,
 } from '@automattic/calypso-products';
 import { CloudLogo, VIPLogo, WooLogo } from '@automattic/components';
 import clsx from 'clsx';
@@ -29,8 +30,12 @@ const PlanLogo: React.FunctionComponent< {
 } > = ( { planSlug, isInSignup, renderedGridPlans, isTableCell, planIndex } ) => {
 	const [ activeTooltipId, setActiveTooltipId ] = useManageTooltipToggle();
 	const translate = useTranslate();
-	const shouldShowWooLogo = isEcommercePlan( planSlug ) && ! isWooExpressPlan( planSlug );
-	const { gridPlansIndex } = usePlansGridContext();
+	const { gridPlansIndex, intent } = usePlansGridContext();
+	const isWooHostingSolutionsIntent = intent === 'plans-woo-hosting-solutions';
+	const shouldShowWooLogo =
+		isWooHostingSolutionsIntent ||
+		( isEcommercePlan( planSlug ) && ! isWooExpressPlan( planSlug ) );
+	const shouldShowPopularBadge = ! isPartnerBundleOnboarding();
 	const { current } = gridPlansIndex[ planSlug ];
 	const highlightAdjacencyMatrix = useHighlightAdjacencyMatrix( {
 		renderedGridPlans,
@@ -65,13 +70,15 @@ const PlanLogo: React.FunctionComponent< {
 			className={ tableItemClasses }
 			isTableCell={ isTableCell }
 		>
-			<PopularBadge
-				isInSignup={ isInSignup }
-				planSlug={ planSlug }
-				additionalClassName={ popularBadgeClasses }
-			/>
+			{ shouldShowPopularBadge && (
+				<PopularBadge
+					isInSignup={ isInSignup }
+					planSlug={ planSlug }
+					additionalClassName={ popularBadgeClasses }
+				/>
+			) }
 			<header className={ headerClasses }>
-				{ isBusinessPlan( planSlug ) && (
+				{ ! isWooHostingSolutionsIntent && isBusinessPlan( planSlug ) && (
 					<Plans2023Tooltip
 						text={ translate(
 							'WP Cloud gives you the tools you need to add scalable, highly available, extremely fast WordPress hosting.'
@@ -93,7 +100,7 @@ const PlanLogo: React.FunctionComponent< {
 						<WooLogo />
 					</Plans2023Tooltip>
 				) }
-				{ isWpcomEnterpriseGridPlan( planSlug ) && (
+				{ ! isWooHostingSolutionsIntent && isWpcomEnterpriseGridPlan( planSlug ) && (
 					<Plans2023Tooltip
 						text={ translate( 'The trusted choice for enterprise WordPress hosting.' ) }
 						id="enterprise-logo"

package/src/components/plan-type-selector/components/interval-type-dropdown.tsx

@@ -1,5 +1,6 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { CustomSelectControl } from '@wordpress/components';
+import { useTranslate } from 'i18n-calypso';
 import { useRef } from 'react';
 import DropdownOption from '../../dropdown-option';
 import useIntervalOptions from '../hooks/use-interval-options';
@@ -19,6 +20,7 @@ export const IntervalTypeDropdown: React.FunctionComponent< IntervalTypeProps >
 	) as SupportedUrlFriendlyTermType;
 	const optionsList = useIntervalOptions( props );
 	const hasOpenedDropdown = useRef( false );
+	const translate = useTranslate();
 
 	const selectOptionsList = Object.values( optionsList ).map( ( option ) => ( {
 		key: option.key,
@@ -32,8 +34,18 @@ export const IntervalTypeDropdown: React.FunctionComponent< IntervalTypeProps >
 				) : null }
 			</DropdownOption>
 		 ) as unknown as string,
+		accessibleName: option.name as string,
 	} ) );
 
+	const selectedOption = selectOptionsList.find( ( { key } ) => key === supportedIntervalType );
+	// Translators: This is a description of the currently selected billing period for accessibility.
+	// billingPeriod is the name of the billing period and it's translated.
+	const describedByText = selectedOption?.accessibleName
+		? translate( 'Currently selected billing period: %(billingPeriod)s', {
+				args: { billingPeriod: selectedOption.accessibleName },
+		  } )
+		: undefined;
+
 	return (
 		<div className="plan-type-selector__interval-type-dropdown-container">
 			<CustomSelectControl
@@ -49,8 +61,9 @@ export const IntervalTypeDropdown: React.FunctionComponent< IntervalTypeProps >
 				} }
 				className="plan-type-selector__interval-type-dropdown"
 				label=""
+				describedBy={ describedByText as string }
 				options={ selectOptionsList }
-				value={ selectOptionsList.find( ( { key } ) => key === supportedIntervalType ) }
+				value={ selectedOption }
 				onChange={ ( {
 					selectedItem: { key: intervalType },
 				}: {

package/src/components/plan-type-selector/hooks/use-max-discount.ts

@@ -1,12 +1,7 @@
-import {
-	type PlanSlug,
-	TERM_ANNUALLY,
-	getPlanSlugForTermVariant,
-	isMonthly,
-	isWpComPlan,
-} from '@automattic/calypso-products';
+import { type PlanSlug } from '@automattic/calypso-products';
 import { Plans } from '@automattic/data-stores';
 import { useState } from '@wordpress/element';
+import useMaxDiscountsForPlanTerms from './use-max-discounts-for-plan-terms';
 
 export default function useMaxDiscount(
 	plans: PlanSlug[],
@@ -14,47 +9,13 @@ export default function useMaxDiscount(
 	siteId?: number | null
 ): number {
 	const [ maxDiscount, setMaxDiscount ] = useState( 0 );
-	const wpcomMonthlyPlans = ( plans || [] ).filter( isWpComPlan ).filter( isMonthly );
-	const yearlyVariantPlanSlugs = wpcomMonthlyPlans
-		.map( ( planSlug ) => getPlanSlugForTermVariant( planSlug, TERM_ANNUALLY ) )
-		.filter( Boolean ) as PlanSlug[];
-	const monthlyPlansPricing = Plans.usePricingMetaForGridPlans( {
-		planSlugs: wpcomMonthlyPlans,
-		siteId,
-		coupon: undefined,
+	const discounts = useMaxDiscountsForPlanTerms(
+		plans,
+		[ 'monthly', 'yearly' ],
 		useCheckPlanAvailabilityForPurchase,
-	} );
-	const yearlyPlansPricing = Plans.usePricingMetaForGridPlans( {
-		planSlugs: yearlyVariantPlanSlugs,
-		siteId,
-		coupon: undefined,
-		useCheckPlanAvailabilityForPurchase,
-	} );
-
-	const discounts = wpcomMonthlyPlans.map( ( planSlug ) => {
-		const yearlyVariantPlanSlug = getPlanSlugForTermVariant( planSlug, TERM_ANNUALLY );
-
-		if ( ! yearlyVariantPlanSlug ) {
-			return 0;
-		}
-
-		const monthlyPlanAnnualCost =
-			( monthlyPlansPricing?.[ planSlug ]?.originalPrice.full ?? 0 ) * 12;
-
-		if ( ! monthlyPlanAnnualCost ) {
-			return 0;
-		}
-
-		const yearlyPlanAnnualCost =
-			yearlyPlansPricing?.[ yearlyVariantPlanSlug ]?.discountedPrice.full ||
-			yearlyPlansPricing?.[ yearlyVariantPlanSlug ]?.originalPrice.full ||
-			0;
-
-		return Math.floor(
-			( ( monthlyPlanAnnualCost - yearlyPlanAnnualCost ) / ( monthlyPlanAnnualCost || 1 ) ) * 100
-		);
-	} );
-	const currentMaxDiscount = discounts.length ? Math.max( ...discounts ) : 0;
+		siteId
+	);
+	const currentMaxDiscount = discounts[ 'yearly' ] ?? 0;
 
 	if ( currentMaxDiscount > 0 && currentMaxDiscount !== maxDiscount ) {
 		setMaxDiscount( currentMaxDiscount );

package/src/components/plan-type-selector/hooks/use-max-discounts-for-plan-terms.ts

@@ -10,6 +10,11 @@ import {
 	isWpcomEnterpriseGridPlan,
 } from '@automattic/calypso-products';
 import { Plans } from '@automattic/data-stores';
+import {
+	calculateDiscountPercentage,
+	fromPricingMetaForGridPlan,
+	getPlanPriceForDuration,
+} from '../../../lib/plan-pricing-utils';
 
 /**
  * Calculate the maximum discount for each term for a given set of plans
@@ -41,7 +46,6 @@ export default function useMaxDiscountsForPlanTerms(
 			? currentLowestTerm
 			: term;
 	}, terms[ 0 ] );
-	const lowestTermInMonths = getBillingMonthsForTerm( lowestTerm );
 
 	const lowestTermPlanSlugs = allRelatedPlanSlugs.filter(
 		( planSlug ) => getPlan( planSlug )?.term === lowestTerm
@@ -60,34 +64,32 @@ export default function useMaxDiscountsForPlanTerms(
 	>;
 	termDefinitionsMapping.forEach( ( termMapping ) => {
 		if ( termMapping.term === lowestTerm ) {
-			return 0;
+			return;
 		}
 		const termDiscounts = lowestTermPlanSlugs.map( ( lowestTermPlanSlug ) => {
 			const lowestTermPlanPricing = plansPricing?.[ lowestTermPlanSlug ];
-			const lowestTermPlanCost = lowestTermPlanPricing?.originalPrice.full;
-			if ( ! lowestTermPlanCost ) {
+			const lowestTermInfo = lowestTermPlanPricing
+				? fromPricingMetaForGridPlan( lowestTermPlanPricing )
+				: null;
+			if ( ! lowestTermInfo ) {
 				return 0;
 			}
-			const lowestTermMonthlyCost = lowestTermPlanCost / lowestTermInMonths;
 
-			/**
-			 * Calculate the monthly cost of the term price
-			 */
 			const variantPlanSlug =
 				getPlanSlugForTermVariant( lowestTermPlanSlug, termMapping.term ) ?? '';
 			const variantPlanPricing = plansPricing?.[ variantPlanSlug ];
-			const variantTermPrice =
-				variantPlanPricing?.discountedPrice?.full || variantPlanPricing?.originalPrice?.full || 0;
-			if ( ! variantTermPrice ) {
+			const variantInfo = variantPlanPricing
+				? fromPricingMetaForGridPlan( variantPlanPricing )
+				: null;
+			if ( ! variantInfo ) {
 				return 0;
 			}
-			const variantTermInMonths = getBillingMonthsForTerm(
-				URL_FRIENDLY_TERMS_MAPPING[ termMapping.urlFriendlyTerm ]
-			);
-			const variantTermMonthlyCost = variantTermPrice / variantTermInMonths;
 
-			return Math.floor(
-				( ( lowestTermMonthlyCost - variantTermMonthlyCost ) * 100 ) / lowestTermMonthlyCost
+			return (
+				calculateDiscountPercentage(
+					getPlanPriceForDuration( lowestTermInfo, variantInfo.termMonths ),
+					getPlanPriceForDuration( variantInfo, variantInfo.termMonths )
+				) ?? 0
 			);
 		} );
 		termWiseMaxDiscount[ termMapping.urlFriendlyTerm ] = termDiscounts.length

package/src/components/plans-2023-tooltip.tsx

@@ -4,16 +4,27 @@ import { TranslateResult } from 'i18n-calypso';
 import { Dispatch, PropsWithChildren, SetStateAction, useRef } from 'react';
 import { hasTouch } from '../lib/touch-detect';
 
-const HoverAreaContainer = styled.span`
-	max-width: 220px;
-`;
+/**
+ * Prevents widows by replacing the last space with a non-breaking space.
+ * @param text - The text to process
+ * @returns The text with the last space replaced with a non-breaking space
+ */
+const preventWidows = ( text: TranslateResult ): TranslateResult => {
+	if ( typeof text !== 'string' ) {
+		return text;
+	}
+	// Replace the last space with a non-breaking space to prevent widows
+	return text.replace( /\s+(\S+)$/, '\u00A0$1' );
+};
+
+const HoverAreaContainer = styled.span``;
 
 const StyledTooltip = styled( Tooltip )`
 	&.tooltip.popover .popover__inner {
 		background: var( --color-masterbar-background );
 		text-align: start;
 		border-radius: 4px;
-		min-height: 32px;
+		min-height: 16px;
 		width: 210px;
 		align-items: center;
 		font-style: normal;
@@ -58,6 +69,7 @@ export const Plans2023Tooltip = ( {
 	};
 
 	const isVisible = activeTooltipId === id;
+	const processedText = preventWidows( text );
 
 	return (
 		<>
@@ -78,7 +90,7 @@ export const Plans2023Tooltip = ( {
 				hideArrow
 				showOnMobile={ showOnMobile }
 			>
-				{ text }
+				{ processedText }
 			</StyledTooltip>
 		</>
 	);