feat: lists benefits in subscriptions digital editions

guardian · Jan 30, 2025 · 0dc4073 · 0dc4073
1 parent 3e10725
commit 0dc4073
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/...end/assets/components/subscriptionsProductDescription/subscriptionsProductDescription.tsx b/...end/assets/components/subscriptionsProductDescription/subscriptionsProductDescription.tsx
@@ -1,4 +1,5 @@
 import AnchorButton from 'components/button/anchorButton';
+import type { ProductBenefit } from 'helpers/productCatalog';
 import type { ProductButton } from 'pages/subscriptions-landing/copy/subscriptionCopy';
 
 type PropTypes = {
@@ -8,6 +9,7 @@ type PropTypes = {
 	isFeature?: boolean;
 	offer?: string;
 	buttons: ProductButton[];
+	benefits?: ProductBenefit[];
 };
 
 const getButtonAppearance = (
@@ -36,6 +38,7 @@ function SubscriptionsProductDescription({
 	offer,
 	isFeature,
 	buttons,
+	benefits,
 }: PropTypes): JSX.Element {
 	return (
 		<div>
@@ -47,7 +50,11 @@ function SubscriptionsProductDescription({
 			{!offer && (
 				<h3 className="subscriptions__product-subtitle--large">{subtitle}</h3>
 			)}
-			<p className="subscriptions__description">{description}</p>
+			{benefits ? (
+				<SubscriptionsProductBenefits benefits={benefits} />
+			) : (
+				<p className="subscriptions__description">{description}</p>
+			)}
 			<div
 				className={
 					isFeature
@@ -73,6 +80,20 @@ function SubscriptionsProductDescription({
 	);
 }
 
+function SubscriptionsProductBenefits({
+	benefits,
+}: {
+	benefits: ProductBenefit[];
+}): JSX.Element {
+	return (
+		<div className="subscriptions__description">
+			{benefits.map((benefit) => (
+				<section>{benefit.copy}</section>
+			))}
+		</div>
+	);
+}
+
 SubscriptionsProductDescription.defaultProps = {
 	offer: null,
 	buttons: {

diff --git a/...rt-frontend/assets/pages/subscriptions-landing/components/subscriptionsLandingContent.tsx b/...rt-frontend/assets/pages/subscriptions-landing/components/subscriptionsLandingContent.tsx
@@ -58,7 +58,7 @@ function SubscriptionsLandingContent({
 						}
 						isFeature={isFeature(index)}
 						classModifier={product.classModifier ?? []}
-						participations={participations}
+						benefits={product.benefits}
 					/>
 				))}
 			</div>

diff --git a/support-frontend/assets/pages/subscriptions-landing/components/subscriptionsProduct.tsx b/support-frontend/assets/pages/subscriptions-landing/components/subscriptionsProduct.tsx
@@ -1,8 +1,8 @@
 import cx from 'classnames';
 import type { ReactNode } from 'react';
 import SubscriptionsProductDescription from 'components/subscriptionsProductDescription/subscriptionsProductDescription';
-import type { Participations } from 'helpers/abTests/abtest';
 import 'helpers/types/option';
+import type { ProductBenefit } from 'helpers/productCatalog';
 import type { ProductButton } from 'pages/subscriptions-landing/copy/subscriptionCopy';
 
 type PropTypes = {
@@ -14,13 +14,14 @@ type PropTypes = {
 	offer?: string;
 	isFeature?: boolean;
 	classModifier: string[];
-	participations: Participations;
+	benefits?: ProductBenefit[];
 };
 
 function SubscriptionsProduct({
 	classModifier,
 	productImage,
 	isFeature,
+	benefits,
 	...props
 }: PropTypes): JSX.Element {
 	return (
@@ -55,7 +56,11 @@ function SubscriptionsProduct({
 				})}
 			>
 				<div className="subscriptions__copy-wrapper">
-					<SubscriptionsProductDescription {...props} isFeature={isFeature} />
+					<SubscriptionsProductDescription
+						{...props}
+						isFeature={isFeature}
+						benefits={benefits}
+					/>
 				</div>
 			</div>
 		</div>