Merge branch 'main' into dependabot/npm_and_yarn/webpack-c6d235ecac

Author: arelra

dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCardData.tsx

@@ -11,7 +11,7 @@ export const ChoiceCardTestData_REGULAR = (
 			isDiscountActive
 				? `Support ${currencySymbol}${amount}/year`
 				: `Support ${currencySymbol}${amount}/month`,
-		benefitsLabel: 'Support',
+		benefitsLabel: longerBenefits ? 'Support' : undefined,
 		benefits: () => [
 			'Exclusive newsletter for supporters, sent every week from the Guardian newsroom',
 		],
@@ -40,7 +40,7 @@ export const ChoiceCardTestData_REGULAR = (
 				return `Support ${currencySymbol}${amount}/month`;
 			}
 		},
-		benefitsLabel: 'All-access digital',
+		benefitsLabel: longerBenefits ? 'All-access digital' : undefined,
 		benefits: () =>
 			longerBenefits
 				? fullSupporterPlusBenefits
@@ -66,7 +66,7 @@ export const ChoiceCardTestData_US = (
 			isDiscountActive
 				? `Support ${currencySymbol}${amount}/year`
 				: `Support ${currencySymbol}${amount}/month`,
-		benefitsLabel: 'Support',
+		benefitsLabel: longerBenefits ? 'Support' : undefined,
 		benefits: () => [
 			'Exclusive newsletter for supporters, sent every week from the Guardian newsroom',
 		],
@@ -95,7 +95,7 @@ export const ChoiceCardTestData_US = (
 				return `Support ${currencySymbol}${amount}/month`;
 			}
 		},
-		benefitsLabel: 'All-access digital',
+		benefitsLabel: longerBenefits ? 'All-access digital' : undefined,
 		benefits: () =>
 			longerBenefits
 				? fullSupporterPlusBenefits
@@ -125,5 +125,4 @@ const fullSupporterPlusBenefits = [
 const shorterSupporterPlusBenefits = [
 	'Unlimited access to the Guardian app and Feast app',
 	'Ad-free reading on all your devices',
-	'Exclusive supporter newsletter',
 ];

dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCards.tsx

@@ -145,11 +145,12 @@ function getChoiceAmount(
 const SupportingBenefits = ({
 	benefitsLabel,
 	benefits,
+	showTicks,
 }: {
 	benefitsLabel: string | undefined;
 	benefits: string[];
+	showTicks: boolean;
 }) => {
-	const isBenefit = !!benefitsLabel;
 	return (
 		<div css={supportingTextStyles}>
 			{!!benefitsLabel && (
@@ -160,7 +161,7 @@ const SupportingBenefits = ({
 			<ul css={benefitsStyles}>
 				{benefits.map((benefit) => (
 					<li key={benefit}>
-						{isBenefit && <SvgTickRound size="xsmall" />}
+						{showTicks && <SvgTickRound size="xsmall" />}
 						{benefit}
 					</li>
 				))}
@@ -276,6 +277,9 @@ export const ThreeTierChoiceCards = ({
 													benefits={benefits(
 														currencySymbol,
 													)}
+													showTicks={
+														supportTier !== 'OneOff'
+													}
 												/>
 											) : undefined
 										}