Plans: update grid for introductory offers (#86434)

* Fix introductory offer plan descriptions * Restore header file changes * Remove is-intro-offer class * Always display crossed-out price for introductory offers * Conditionally set is-large-currency * Remove mention of yearly price after intro offer * Revert "Remove mention of yearly price after intro offer" This reverts commit 2d2040d. --------- Co-authored-by: Payton Swick <[email protected]>
Automattic · Oct 8, 2024 · 580a744 · 580a744
1 parent 9be3e31
commit 580a744
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 66 deletions.
diff --git a/packages/plans-grid-next/src/components/shared/header-price/index.tsx b/packages/plans-grid-next/src/components/shared/header-price/index.tsx
@@ -57,41 +57,34 @@ const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
 		return (
 			<div className="plans-grid-next-header-price">
 				{ ! current && (
-					<div className="plans-grid-next-header-price__badge is-intro-offer">
+					<div className="plans-grid-next-header-price__badge">
 						{ translate( 'Limited Time Offer' ) }
 					</div>
 				) }
-				{ isLargeCurrency ? (
-					<div className="plans-grid-next-header-price__pricing-group is-large-currency">
-						<PlanPrice
-							currencyCode={ currencyCode }
-							rawPrice={ 0 }
-							displayPerMonthNotation={ false }
-							isLargeCurrency
-							isSmallestUnit
-							priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
-							className="is-placeholder-price" // This is a placeholder price to keep the layout consistent
-							original
-						/>
-						<PlanPrice
-							currencyCode={ currencyCode }
-							rawPrice={ introOfferPrice }
-							displayPerMonthNotation={ false }
-							isLargeCurrency
-							isSmallestUnit={ false }
-							priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
-							discounted
-						/>
-					</div>
-				) : (
+				<div
+					className={ clsx( 'plans-grid-next-header-price__pricing-group', {
+						'is-large-currency': isLargeCurrency,
+					} ) }
+				>
+					<PlanPrice
+						currencyCode={ currencyCode }
+						rawPrice={ originalPrice.monthly }
+						displayPerMonthNotation={ false }
+						isLargeCurrency
+						isSmallestUnit
+						priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
+						original
+					/>
 					<PlanPrice
 						currencyCode={ currencyCode }
 						rawPrice={ introOfferPrice }
 						displayPerMonthNotation={ false }
+						isLargeCurrency
 						isSmallestUnit={ false }
 						priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
+						discounted
 					/>
-				) }
+				</div>
 			</div>
 		);
 	}

diff --git a/packages/plans-grid-next/src/components/shared/header-price/style.scss b/packages/plans-grid-next/src/components/shared/header-price/style.scss
@@ -93,16 +93,6 @@
 	white-space: nowrap;
 	width: fit-content;
 
-	&.is-intro-offer {
-		background-color: inherit;
-		color: var(--studio-blue-50);
-		font-weight: 600;
-		letter-spacing: inherit;
-		padding: 0;
-		text-align: left;
-		text-transform: uppercase;
-	}
-
 	&.is-hidden {
 		visibility: hidden;
 	}

diff --git a/packages/plans-grid-next/src/hooks/data-store/use-plan-billing-description.tsx b/packages/plans-grid-next/src/hooks/data-store/use-plan-billing-description.tsx
@@ -109,23 +109,23 @@ export default function usePlanBillingDescription( {
 	 */
 	if ( introOffer?.intervalCount && introOffer.intervalUnit && ! introOffer.isOfferComplete ) {
 		if ( originalPriceFullTermText ) {
+			/* Introductory offers for monthly plans */
 			if ( isMonthlyPlan ) {
-				if ( 1 === introOffer.intervalCount ) {
-					return translate(
-						'per month, for your first %(introOfferIntervalUnit)s,{{br/}}' +
-							'then %(rawPrice)s billed monthly, excl. taxes',
-						{
-							args: {
-								rawPrice: originalPriceFullTermText,
-								introOfferIntervalUnit: introOffer.intervalUnit,
-							},
-							components: { br: <br /> },
-							comment: 'excl. taxes is short for excluding taxes',
-						}
-					);
-				}
-
+				/* If the offer is for X months */
 				if ( 'month' === introOffer.intervalUnit ) {
+					if ( 1 === introOffer.intervalCount ) {
+						return translate(
+							'for your first month,{{br/}}' + 'then %(rawPrice)s billed monthly, excl. taxes',
+							{
+								args: {
+									rawPrice: originalPriceFullTermText,
+								},
+								components: { br: <br /> },
+								comment: 'excl. taxes is short for excluding taxes',
+							}
+						);
+					}
+
 					return translate(
 						'for your first %(introOfferIntervalCount)s months,{{br/}}' +
 							'then %(rawPrice)s billed monthly, excl. taxes',
@@ -140,7 +140,21 @@ export default function usePlanBillingDescription( {
 					);
 				}
 
+				/* If the offer is for X years of monthly intervals */
 				if ( 'year' === introOffer.intervalUnit ) {
+					if ( 1 === introOffer.intervalCount ) {
+						return translate(
+							'for your first year,{{br/}}' + 'then %(rawPrice)s billed monthly, excl. taxes',
+							{
+								args: {
+									rawPrice: originalPriceFullTermText,
+								},
+								components: { br: <br /> },
+								comment: 'excl. taxes is short for excluding taxes',
+							}
+						);
+					}
+
 					return translate(
 						'per month, for your first %(introOfferIntervalCount)s years,{{br/}}' +
 							'then %(rawPrice)s billed monthly, excl. taxes',
@@ -156,23 +170,24 @@ export default function usePlanBillingDescription( {
 				}
 			}
 
+			/* Introductory offers for yearly plans */
 			if ( PLAN_ANNUAL_PERIOD === billingPeriod ) {
-				if ( 1 === introOffer.intervalCount ) {
-					return translate(
-						'per month, for your first %(introOfferIntervalUnit)s,{{br/}}' +
-							'then %(rawPrice)s billed annually, excl. taxes',
-						{
-							args: {
-								rawPrice: originalPriceFullTermText,
-								introOfferIntervalUnit: introOffer.intervalUnit,
-							},
-							components: { br: <br /> },
-							comment: 'excl. taxes is short for excluding taxes',
-						}
-					);
-				}
-
+				/* If the offer is for X months of a yearly plan */
 				if ( 'month' === introOffer.intervalUnit ) {
+					if ( 1 === introOffer.intervalCount ) {
+						return translate(
+							'for your first month,{{br/}}' + 'then %(rawPrice)s billed annually, excl. taxes',
+							{
+								args: {
+									rawPrice: originalPriceFullTermText,
+									introOfferIntervalUnit: introOffer.intervalUnit,
+								},
+								components: { br: <br /> },
+								comment: 'excl. taxes is short for excluding taxes',
+							}
+						);
+					}
+
 					return translate(
 						'for your first %(introOfferIntervalCount)s months,{{br/}}' +
 							'then %(rawPrice)s billed annually, excl. taxes',
@@ -187,12 +202,29 @@ export default function usePlanBillingDescription( {
 					);
 				}
 
+				/* If the offer is for X years of a yearly plan */
 				if ( 'year' === introOffer.intervalUnit ) {
+					if ( 1 === introOffer.intervalCount ) {
+						return translate(
+							'per month, %(introOfferFormattedPrice)s for your first year,{{br/}}' +
+								'then %(rawPrice)s billed annually, excl. taxes',
+							{
+								args: {
+									introOfferFormattedPrice: introOffer.formattedPrice,
+									rawPrice: originalPriceFullTermText,
+								},
+								components: { br: <br /> },
+								comment: 'excl. taxes is short for excluding taxes',
+							}
+						);
+					}
+
 					return translate(
-						'per month, for your first %(introOfferIntervalCount)s years,{{br/}}' +
+						'per month, %(introOfferFormattedPrice)s for your first %(introOfferIntervalCount)s years,{{br/}}' +
 							'then %(rawPrice)s billed annually, excl. taxes',
 						{
 							args: {
+								introOfferFormattedPrice: introOffer.formattedPrice,
 								rawPrice: originalPriceFullTermText,
 								introOfferIntervalCount: introOffer.intervalCount,
 							},