@automattic/plans-grid-next 1.0.1 → 1.0.3

package/src/components/shared/action-button/index.tsx

@@ -6,8 +6,10 @@ import {
 	isWpcomEnterpriseGridPlan,
 } from '@automattic/calypso-products';
 import { AddOns, WpcomPlansUI } from '@automattic/data-stores';
+import { formatCurrency } from '@automattic/number-formatters';
 import { useSelect } from '@wordpress/data';
-import { formatCurrency, useTranslate } from 'i18n-calypso';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
 import { usePlansGridContext } from '../../../grid-context';
 import useIsLargeCurrency from '../../../hooks/use-is-large-currency';
 import { usePlanPricingInfoFromGridPlans } from '../../../hooks/use-plan-pricing-info-from-grid-plans';
@@ -28,6 +30,7 @@ type ActionButtonProps = {
 	showMonthlyPrice: boolean;
 	isStuck: boolean;
 	visibleGridPlans: GridPlan[];
+	showPostButtonText?: boolean;
 };
 
 const ActionButton = ( {
@@ -38,12 +41,14 @@ const ActionButton = ( {
 	isStuck,
 	isInSignup,
 	isMonthlyPlan,
+	showPostButtonText = true,
 }: ActionButtonProps ) => {
 	const translate = useTranslate();
 	const {
 		gridPlansIndex,
 		siteId,
 		helpers: { useAction },
+		showBillingDescriptionForIncreasedRenewalPrice,
 	} = usePlansGridContext();
 	const {
 		current,
@@ -80,7 +85,7 @@ const ActionButton = ( {
 	);
 
 	const {
-		primary: { callback, text, status, variant },
+		primary: { callback, text, status, variant, ariaLabel },
 		postButtonText,
 	} = useAction( {
 		availableForPurchase,
@@ -93,6 +98,8 @@ const ActionButton = ( {
 		cartItemForPlan,
 		currentPlanBillingPeriod,
 		selectedStorageAddOn,
+		pricing: gridPlansIndex[ planSlug ]?.pricing,
+		isMonthlyPlan,
 	} );
 	const {
 		primary: { callback: freeTrialCallback, text: freeTrialText },
@@ -108,6 +115,8 @@ const ActionButton = ( {
 		cartItemForPlan: { product_slug: freeTrialPlanSlug ?? PLAN_FREE },
 		currentPlanBillingPeriod,
 		selectedStorageAddOn,
+		pricing: gridPlansIndex[ freeTrialPlanSlug ?? PLAN_FREE ]?.pricing,
+		isMonthlyPlan,
 	} );
 
 	const busy = status === 'blocked';
@@ -131,6 +140,7 @@ const ActionButton = ( {
 			busy={ busy }
 			disabled={ ! callback || 'disabled' === status }
 			classes={ variant === 'secondary' ? 'is-secondary' : '' }
+			ariaLabel={ String( ariaLabel || '' ) }
 		>
 			{ text }
 		</PlanButton>
@@ -159,6 +169,7 @@ const ActionButton = ( {
 					classes="is-storage-upgradeable"
 					href={ storageAddOnCheckoutHref }
 					busy={ busy }
+					ariaLabel={ translate( 'Upgrade storage for this plan' ).toString() }
 				>
 					{ translate( 'Upgrade' ) }
 				</PlanButton>
@@ -171,7 +182,13 @@ const ActionButton = ( {
 						{ freeTrialText }
 					</PlanButton>
 					{ ! isStuck && ( // along side with the free trial CTA, we also provide an option for purchasing the plan directly here
-						<PlanButton planSlug={ planSlug } onClick={ callback } busy={ busy } borderless>
+						<PlanButton
+							planSlug={ planSlug }
+							onClick={ callback }
+							busy={ busy }
+							borderless
+							ariaLabel={ String( ariaLabel || '' ) }
+						>
 							{ text }
 						</PlanButton>
 					) }
@@ -184,15 +201,39 @@ const ActionButton = ( {
 						busy={ busy }
 						onClick={ callback }
 						current={ current }
+						ariaLabel={ String( ariaLabel || '' ) }
 					>
 						{ text }
 					</PlanButton>
-					{ postButtonText && (
-						<span className="plans-grid-next-action-button__label">{ postButtonText }</span>
+					{ showPostButtonText && postButtonText && (
+						<span
+							className={ clsx( 'plans-grid-next-action-button__label', {
+								'is-left-aligned': showBillingDescriptionForIncreasedRenewalPrice,
+							} ) }
+						>
+							{ postButtonText }
+						</span>
 					) }
 				</>
 			);
 		}
+	} else if (
+		showPostButtonText &&
+		postButtonText &&
+		showBillingDescriptionForIncreasedRenewalPrice
+	) {
+		actionButton = (
+			<>
+				{ actionButton }
+				<span
+					className={ clsx( 'plans-grid-next-action-button__label', {
+						'is-left-aligned': showBillingDescriptionForIncreasedRenewalPrice,
+					} ) }
+				>
+					{ postButtonText }
+				</span>
+			</>
+		);
 	}
 
 	return (

package/src/components/shared/action-button/style.scss

@@ -3,6 +3,10 @@
 	font-size: 0.75rem;
 	display: block;
 	margin-top: 10px;
+
+	&.is-left-aligned {
+		text-align: left;
+	}
 }
 
 .plans-grid-next-action-button__multi {

package/src/components/shared/billing-timeframe/index.tsx

@@ -4,8 +4,9 @@ import {
 	isWooExpressPlan,
 	isFreePlan,
 } from '@automattic/calypso-products';
+import { formatCurrency } from '@automattic/number-formatters';
 import styled from '@emotion/styled';
-import { useTranslate, formatCurrency, fixMe } from 'i18n-calypso';
+import { useTranslate, fixMe } from 'i18n-calypso';
 import { usePlansGridContext } from '../../../grid-context';
 import usePlanBillingDescription from '../../../hooks/data-store/use-plan-billing-description';
 import type { GridPlan } from '../../../types';
@@ -18,6 +19,10 @@ const DiscountPromotion = styled.div`
 	margin-top: 6px;
 `;
 
+const BillingTimeframeContainer = styled.p`
+	margin-bottom: 0;
+`;
+
 interface RefundNoticeProps {
 	showRefundPeriod?: boolean;
 	planSlug: string;
@@ -70,10 +75,10 @@ const BillingTimeframe = ( { showRefundPeriod, planSlug }: Props ) => {
 		( ! introOffer || introOffer.isOfferComplete )
 	) {
 		return (
-			<div>
+			<BillingTimeframeContainer>
 				<div>{ billingTimeframe }</div>
 				<DiscountPromotion>{ planBillingDescription }</DiscountPromotion>
-			</div>
+			</BillingTimeframeContainer>
 		);
 	}
 
@@ -81,7 +86,7 @@ const BillingTimeframe = ( { showRefundPeriod, planSlug }: Props ) => {
 		const price = formatCurrency( 25000, 'USD', { stripZeros: true } );
 
 		return (
-			<div>
+			<BillingTimeframeContainer>
 				{ fixMe( {
 					text: 'Starts at {{b}}%(price)s{{/b}} annually',
 					newCopy: translate( 'Starts at {{b}}%(price)s{{/b}} annually', {
@@ -95,19 +100,19 @@ const BillingTimeframe = ( { showRefundPeriod, planSlug }: Props ) => {
 						comment: 'Translators: the price is in US dollars for all users (US$25,000)',
 					} ),
 				} ) }
-			</div>
+			</BillingTimeframeContainer>
 		);
 	}
 
 	return (
-		<div>
+		<BillingTimeframeContainer>
 			{ description }
 			<RefundNotice
 				showRefundPeriod={ showRefundPeriod }
 				planSlug={ planSlug }
 				billingPeriod={ billingPeriod }
 			/>
-		</div>
+		</BillingTimeframeContainer>
 	);
 };
 

package/src/components/shared/header-price/index.tsx

@@ -13,6 +13,11 @@ import { useTranslate } from 'i18n-calypso';
 import { usePlansGridContext } from '../../../grid-context';
 import useIsLargeCurrency from '../../../hooks/use-is-large-currency';
 import { usePlanPricingInfoFromGridPlans } from '../../../hooks/use-plan-pricing-info-from-grid-plans';
+import {
+	calculateDiscountPercentage,
+	fromPricingMetaForGridPlan,
+	getPlanPriceForDuration,
+} from '../../../lib/plan-pricing-utils';
 import { useHeaderPriceContext } from './header-price-context';
 import type { GridPlan } from '../../../types';
 import './style.scss';
@@ -51,11 +56,18 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 		siteId,
 		coupon,
 		helpers,
+		showBillingDescriptionForIncreasedRenewalPrice,
+		isExperimentVariant,
 	} = usePlansGridContext();
+
+	const pricingBadgeClassName = clsx( 'plans-grid-next-header-price__badge', {
+		'is-plan-differentiators-experiment-badge': isExperimentVariant,
+	} );
 	const { isAnyPlanPriceDiscounted, setIsAnyPlanPriceDiscounted } = useHeaderPriceContext();
 	const {
 		current,
 		pricing: { currencyCode, originalPrice, discountedPrice, introOffer, billingPeriod },
+		isMonthlyPlan,
 	} = gridPlansIndex[ planSlug ];
 	const isPricedPlan = null !== originalPrice.monthly;
 
@@ -68,11 +80,12 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 	const isGridPlanOnIntroOffer = introOffer && ! introOffer.isOfferComplete;
 
 	const { prices } = usePlanPricingInfoFromGridPlans( { gridPlans: visibleGridPlans } );
-	const isLargeCurrency = useIsLargeCurrency( {
-		prices,
-		currencyCode: currencyCode || 'USD',
-		ignoreWhitespace: true,
-	} );
+	const isLargeCurrency =
+		useIsLargeCurrency( {
+			prices,
+			currencyCode: currencyCode || 'USD',
+			ignoreWhitespace: true,
+		} ) && ! showBillingDescriptionForIncreasedRenewalPrice; // a temporary fix to handle an issue with isLargeCurrency logic for intro offers
 
 	const termVariantPlanSlug = useTermVariantPlanSlugForSavings( { planSlug, billingPeriod } );
 	const termVariantPricing = Plans.usePricingMetaForGridPlans( {
@@ -83,19 +96,24 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 		useCheckPlanAvailabilityForPurchase: helpers?.useCheckPlanAvailabilityForPurchase,
 	} )?.[ termVariantPlanSlug ?? '' ];
 
-	const termVariantPrice =
-		termVariantPricing?.discountedPrice.monthly ?? termVariantPricing?.originalPrice.monthly ?? 0;
-	const planPrice = discountedPrice.monthly ?? originalPrice.monthly ?? 0;
-	const savings =
-		termVariantPrice > planPrice
-			? Math.floor( ( ( termVariantPrice - planPrice ) / termVariantPrice ) * 100 )
+	const termVariantInfo = termVariantPricing
+		? fromPricingMetaForGridPlan( termVariantPricing )
+		: null;
+	const currentPlanInfo = fromPricingMetaForGridPlan( gridPlansIndex[ planSlug ].pricing );
+	let savings =
+		termVariantInfo && currentPlanInfo
+			? calculateDiscountPercentage(
+					getPlanPriceForDuration( termVariantInfo, currentPlanInfo.termMonths ),
+					getPlanPriceForDuration( currentPlanInfo, currentPlanInfo.termMonths )
+			  ) ?? 0
 			: 0;
 
 	useEffect( () => {
 		if (
 			isGridPlanOneTimeDiscounted ||
 			isGridPlanOnIntroOffer ||
-			( enableTermSavingsPriceDisplay && savings )
+			( enableTermSavingsPriceDisplay && savings ) ||
+			( showBillingDescriptionForIncreasedRenewalPrice && !! termVariantPricing )
 		) {
 			setIsAnyPlanPriceDiscounted( true );
 		}
@@ -105,6 +123,8 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 		isGridPlanOneTimeDiscounted,
 		savings,
 		setIsAnyPlanPriceDiscounted,
+		showBillingDescriptionForIncreasedRenewalPrice,
+		termVariantPricing,
 	] );
 
 	if ( isWpcomEnterpriseGridPlan( planSlug ) || ! isPricedPlan ) {
@@ -112,13 +132,41 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 	}
 
 	if ( isGridPlanOnIntroOffer ) {
+		// Use the monthly plan price for renewal pricing, instead of the intro offer renewal price
+		const compareToMonthlyPrice =
+			( showBillingDescriptionForIncreasedRenewalPrice && termVariantPricing
+				? termVariantPricing.originalPrice.monthly
+				: originalPrice.monthly ) ?? 0;
+		const monthlyPrice =
+			typeof discountedPrice.monthly === 'number'
+				? discountedPrice.monthly
+				: introOffer.rawPrice.monthly;
+		// Recalculate the savings for Monthly plans with introductory offers
+		// since we are comparing the introductory price with the same plan
+		// renewal price, instead of comparing yearly to monthly costs for
+		// the same period.
+		if (
+			showBillingDescriptionForIncreasedRenewalPrice &&
+			compareToMonthlyPrice > monthlyPrice &&
+			isMonthlyPlan
+		) {
+			savings = calculateDiscountPercentage( compareToMonthlyPrice, monthlyPrice ) ?? 0;
+		}
 		return (
 			<div className="plans-grid-next-header-price">
 				{ ! current && (
-					<div className="plans-grid-next-header-price__badge">
-						{ translate( 'Special Offer' ) }
+					<div className={ pricingBadgeClassName }>
+						{ showBillingDescriptionForIncreasedRenewalPrice
+							? translate( 'Save %(savings)d%%', {
+									args: { savings },
+									comment: 'Example: Save 35%',
+							  } )
+							: translate( 'Special Offer' ) }
 					</div>
 				) }
+				{ current && visibleGridPlans.length > 1 && (
+					<div className={ clsx( pricingBadgeClassName, 'is-hidden' ) }>' '</div>
+				) }
 				<div
 					className={ clsx( 'plans-grid-next-header-price__pricing-group', {
 						'is-large-currency': isLargeCurrency,
@@ -126,22 +174,18 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 				>
 					<PlanPrice
 						currencyCode={ currencyCode }
-						rawPrice={ originalPrice.monthly }
+						rawPrice={ compareToMonthlyPrice }
 						displayPerMonthNotation={ false }
-						isLargeCurrency
+						isLargeCurrency={ isLargeCurrency }
 						isSmallestUnit
 						priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
 						original
 					/>
 					<PlanPrice
 						currencyCode={ currencyCode }
-						rawPrice={
-							typeof discountedPrice.monthly === 'number'
-								? discountedPrice.monthly
-								: introOffer.rawPrice.monthly
-						}
+						rawPrice={ monthlyPrice }
 						displayPerMonthNotation={ false }
-						isLargeCurrency
+						isLargeCurrency={ isLargeCurrency }
 						isSmallestUnit
 						priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
 						discounted
@@ -151,12 +195,61 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 		);
 	}
 
-	if ( isGridPlanOneTimeDiscounted ) {
+	// Handle cases where a plan is ineligible for intro offer, but we still
+	// want to show the crossed-out monthly price.
+	if ( showBillingDescriptionForIncreasedRenewalPrice && termVariantPricing ) {
+		const compareToMonthlyPrice = termVariantPricing.originalPrice.monthly ?? 0;
+		const monthlyPrice =
+			typeof discountedPrice.monthly === 'number'
+				? discountedPrice.monthly
+				: originalPrice.monthly ?? 0;
 		return (
 			<div className="plans-grid-next-header-price">
-				<div className="plans-grid-next-header-price__badge">
-					{ translate( 'One time discount' ) }
+				{ ! current && savings > 0 && (
+					<div className={ pricingBadgeClassName }>
+						{ translate( 'Save %(savings)d%%', {
+							args: { savings },
+							comment: 'Example: Save 35%',
+						} ) }
+					</div>
+				) }
+				{ ( ( ! current && savings <= 0 ) || ( current && visibleGridPlans.length > 1 ) ) && (
+					<div className={ clsx( pricingBadgeClassName, 'is-hidden' ) }>' '</div>
+				) }
+				<div
+					className={ clsx( 'plans-grid-next-header-price__pricing-group', {
+						'is-large-currency': isLargeCurrency,
+					} ) }
+				>
+					{ compareToMonthlyPrice > monthlyPrice && (
+						<PlanPrice
+							currencyCode={ currencyCode }
+							rawPrice={ compareToMonthlyPrice }
+							displayPerMonthNotation={ false }
+							isLargeCurrency={ isLargeCurrency }
+							isSmallestUnit
+							priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
+							original
+						/>
+					) }
+					<PlanPrice
+						currencyCode={ currencyCode }
+						rawPrice={ monthlyPrice }
+						displayPerMonthNotation={ false }
+						isLargeCurrency={ isLargeCurrency }
+						isSmallestUnit
+						priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
+						discounted
+					/>
 				</div>
+			</div>
+		);
+	}
+
+	if ( isGridPlanOneTimeDiscounted ) {
+		return (
+			<div className="plans-grid-next-header-price">
+				<div className={ pricingBadgeClassName }>{ translate( 'One time discount' ) }</div>
 				<div
 					className={ clsx( 'plans-grid-next-header-price__pricing-group', {
 						'is-large-currency': isLargeCurrency,
@@ -188,7 +281,7 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 	if ( enableTermSavingsPriceDisplay && termVariantPricing && savings ) {
 		return (
 			<div className="plans-grid-next-header-price">
-				<div className="plans-grid-next-header-price__badge">
+				<div className={ pricingBadgeClassName }>
 					{ translate( 'Save %(savings)d%%', {
 						args: { savings },
 						comment: 'Example: Save 35%',
@@ -225,7 +318,16 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 	if ( isAnyPlanPriceDiscounted ) {
 		return (
 			<div className="plans-grid-next-header-price">
-				<div className="plans-grid-next-header-price__badge is-hidden">' '</div>
+				{ showBillingDescriptionForIncreasedRenewalPrice && savings ? (
+					<div className={ pricingBadgeClassName }>
+						{ translate( 'Save %(savings)d%%', {
+							args: { savings },
+							comment: 'Example: Save 35%',
+						} ) }
+					</div>
+				) : (
+					<div className={ clsx( pricingBadgeClassName, 'is-hidden' ) }>' '</div>
+				) }
 				{ isLargeCurrency ? (
 					<div className="plans-grid-next-header-price__pricing-group is-large-currency">
 						<PlanPrice

package/src/components/shared/header-price/style.scss

@@ -1,3 +1,5 @@
+@import "@automattic/typography/styles/fonts";
+
 .plans-grid-next-header-price {
 	padding: 0 20px;
 	margin: 0 0 4px 0;
@@ -23,7 +25,7 @@
 
 			.plan-price__currency-symbol,
 			.plan-price__tax-amount {
-				color: var(--color-text-subtle);
+				color: var(--studio-gray-20);
 			}
 
 			.plan-price__integer {
@@ -93,6 +95,12 @@
 	white-space: nowrap;
 	width: fit-content;
 
+	// Same colors as Badge type="info-green" (@automattic/components); only for pricing differentiators experiment (non-control).
+	&.is-plan-differentiators-experiment-badge {
+		background-color: rgba(184, 230, 191, 0.64);
+		color: var(--studio-green-80);
+	}
+
 	&.is-hidden {
 		visibility: hidden;
 	}
@@ -102,7 +110,7 @@
 	justify-content: flex-end;
 	display: flex;
 	flex-direction: row-reverse;
-	align-items: flex-end;
+	align-items: last baseline;
 	gap: 4px;
 
 	&.is-large-currency {

package/src/components/shared/storage/components/plan-storage.tsx

@@ -21,7 +21,7 @@ const PlanStorage = ( {
 	showUpgradeableStorage,
 }: Props ) => {
 	const { siteId, gridPlansIndex } = usePlansGridContext();
-	const { availableForPurchase, current } = gridPlansIndex[ planSlug ];
+	const { availableForPurchase, current, planTitle } = gridPlansIndex[ planSlug ];
 	const availableStorageAddOns = AddOns.useAvailableStorageAddOns( { siteId } );
 
 	if ( ! options?.isTableCell && isWpcomEnterpriseGridPlan( planSlug ) ) {
@@ -38,7 +38,7 @@ const PlanStorage = ( {
 		ELIGIBLE_PLANS_FOR_STORAGE_UPGRADE.includes( planSlug );
 
 	return (
-		<div className="plans-grid-next-plan-storage">
+		<div className="plans-grid-next-plan-storage" data-plan-title={ planTitle }>
 			{ canUpgradeStorageForPlan ? (
 				<StorageDropdown planSlug={ planSlug } onStorageAddOnClick={ onStorageAddOnClick } />
 			) : (

package/src/components/shared/storage/components/storage-dropdown.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/tabindex-no-positive */
 import { type AddOnMeta, AddOns, WpcomPlansUI } from '@automattic/data-stores';
 import { CustomSelectControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -40,14 +41,19 @@ const StorageDropdownOption = ( {
 	const addOnStorageString = useStorageString( addOnStorage || 0 );
 
 	const title = addOnStorage
-		? translate( '%(planStorageString)s + %(addOnStorageString)s', {
+		? translate( '%(planStorageString)s + %(addOnStorageString)s storage', {
 				args: {
 					planStorageString,
 					addOnStorageString,
 				},
+				comment: 'Storage option with add-on. Example: "50GB + 100GB storage"',
 		  } )
-		: planStorageString;
+		: translate( '%(planStorageString)s storage', {
+				args: { planStorageString },
+				comment: 'Storage option. Example: "50GB storage"',
+		  } );
 
+	// Only show price for add-on options, not for the base plan storage
 	const priceString =
 		price && addOnStorage
 			? translate( '%(price)s/month, billed yearly', {
@@ -55,13 +61,13 @@ const StorageDropdownOption = ( {
 					comment:
 						'The cost of a storage add on per month. Example reads as "$50/month, billed yearly"',
 			  } )
-			: translate( 'Included in plan' );
+			: null;
 
 	return priceOnSeparateLine ? (
 		<span className="plans-grid-next-storage-dropdown__option-title">{ title }</span>
 	) : (
 		<DropdownOption className="plans-grid-next-storage-dropdown__option" title={ title }>
-			<div>{ priceString }</div>
+			{ priceString && <div>{ priceString }</div> }
 		</DropdownOption>
 	);
 };
@@ -137,18 +143,30 @@ const StorageDropdown = ( { planSlug, onStorageAddOnClick }: StorageDropdownProp
 	);
 	const selectedStorageAddOnStorage = selectedStorageAddOn?.quantity ?? 0;
 
+	const planStorageString = useStorageString( planStorage );
+	const selectedAddOnStorageString = useStorageString( selectedStorageAddOnStorage );
+	const accessibleOptionName = selectedStorageAddOnStorage
+		? translate( '%(planStorageString)s + %(addOnStorageString)s storage', {
+				args: {
+					planStorageString,
+					addOnStorageString: selectedAddOnStorageString,
+				},
+				comment: 'Storage amount display with add-on. Example: "50GB + 100GB storage"',
+		  } )
+		: translate( '%(planStorageString)s storage', {
+				args: { planStorageString },
+				comment: 'Storage amount display. Example: "50GB storage"',
+		  } );
+
 	const selectedOption = {
 		key: selectedStorageOptionForPlan,
-		name: (
-			<StorageDropdownOption
-				price={ selectedStorageAddOn?.prices?.formattedMonthlyPrice }
-				planStorage={ planStorage }
-				addOnStorage={ selectedStorageAddOnStorage }
-				priceOnSeparateLine
-			/>
-		 ) as unknown as string,
+		name: accessibleOptionName as string,
 	};
 
+	const accessibleDescription = translate( 'Currently selected storage option: %(storageOption)s', {
+		args: { storageOption: accessibleOptionName },
+	} );
+
 	const handleOnChange = useCallback(
 		( { selectedItem }: { selectedItem: { key: string } } ) => {
 			const addOnSlug = selectedItem?.key as AddOns.StorageAddOnSlug;
@@ -162,15 +180,18 @@ const StorageDropdown = ( { planSlug, onStorageAddOnClick }: StorageDropdownProp
 	);
 
 	return (
-		<>
+		// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+		<div tabIndex={ 1 }>
 			<CustomSelectControl
 				__next40pxDefaultSize
 				hideLabelFromVision
 				options={ selectControlOptions || [] }
 				value={ selectedOption }
 				onChange={ handleOnChange }
-				label=""
+				label={ translate( 'Storage options for this plan' ) }
+				describedBy={ accessibleDescription as string }
 			/>
+
 			{ selectedStorageAddOn?.prices?.formattedMonthlyPrice && (
 				<div className="plans-grid-next-storage-dropdown__addon-offset-price-container">
 					<span className="plans-grid-next-storage-dropdown__addon-offset-price">
@@ -180,7 +201,7 @@ const StorageDropdown = ( { planSlug, onStorageAddOnClick }: StorageDropdownProp
 					</span>
 				</div>
 			) }
-		</>
+		</div>
 	);
 };
 

package/src/components/shared/storage/components/storage-feature-label.tsx

@@ -1,6 +1,7 @@
 import { PlanSlug } from '@automattic/calypso-products';
+import { formatCurrency } from '@automattic/number-formatters';
 import clsx from 'clsx';
-import { formatCurrency, useTranslate } from 'i18n-calypso';
+import { useTranslate } from 'i18n-calypso';
 import { usePlansGridContext } from '../../../../grid-context';
 import useIsLargeCurrency from '../../../../hooks/use-is-large-currency';
 import usePlanStorage from '../hooks/use-plan-storage';

package/src/components/shared/storage/hooks/use-plan-storage.ts

@@ -3,6 +3,7 @@ import {
 	FEATURE_6GB_STORAGE,
 	FEATURE_13GB_STORAGE,
 	FEATURE_50GB_STORAGE,
+	FEATURE_100GB_STORAGE,
 	FEATURE_200GB_STORAGE,
 	FEATURE_P2_3GB_STORAGE,
 	FEATURE_P2_13GB_STORAGE,
@@ -27,6 +28,8 @@ function usePlanStorage( planSlug: PlanSlug ) {
 			return 13;
 		case FEATURE_50GB_STORAGE:
 			return 50;
+		case FEATURE_100GB_STORAGE:
+			return 100;
 		case FEATURE_P2_3GB_STORAGE:
 			return 3;
 		case FEATURE_P2_13GB_STORAGE:

package/src/components/test/actions-button.tsx

@@ -10,6 +10,7 @@ jest.mock( '@wordpress/data', () => ( {
 	createReduxStore: jest.fn(),
 	createSelector: jest.fn(),
 	register: jest.fn(),
+	registerStore: jest.fn(),
 	useDispatch: jest.fn(),
 } ) );
 jest.mock( '@wordpress/element', () => ( {
@@ -26,6 +27,10 @@ jest.mock( '@automattic/data-stores', () => ( {
 	Purchases: {
 		useSitePurchasesByProductSlug: jest.fn(),
 	},
+	Plans: {
+		...jest.requireActual( '@automattic/data-stores' ).Plans,
+		usePricingMetaForGridPlans: jest.fn(),
+	},
 } ) );
 jest.mock( 'i18n-calypso', () => ( {
 	...jest.requireActual( 'i18n-calypso' ),

package/src/components/test/billing-timeframe.tsx

@@ -34,8 +34,8 @@ import {
 	PLAN_TRIENNIAL_PERIOD,
 } from '@automattic/calypso-products';
 import { Plans } from '@automattic/data-stores';
+import { formatCurrency } from '@automattic/number-formatters';
 import { render } from '@testing-library/react';
-import { formatCurrency } from 'i18n-calypso';
 import React from 'react';
 import { usePlansGridContext } from '../../grid-context';
 import BillingTimeframe from '../shared/billing-timeframe';