Merge pull request #14229 from guardian/tf-choice-cards-refactor

refactor choice cards

Author: juabara

dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx

@@ -23,7 +23,6 @@ import type {
 	Image,
 } from '@guardian/support-dotcom-components/dist/shared/types';
 import type { ChoiceCard } from '@guardian/support-dotcom-components/dist/shared/types/props/choiceCards';
-import type { Dispatch, SetStateAction } from 'react';
 import { useEffect, useState } from 'react';
 import {
 	removeMediaRulePrefix,
@@ -111,16 +110,16 @@ const buildChoiceCardSettings = (
 
 const buildUrlForThreeTierChoiceCards = (
 	baseUrl: string,
-	selectedProduct: ChoiceCard['product'],
-	destinationUrl?: string | null,
+	selectedChoiceCard: ChoiceCard,
 ) => {
+	const { destinationUrl, product } = selectedChoiceCard;
 	const url = destinationUrl?.trim() ?? baseUrl;
-	return selectedProduct.supportTier === 'OneOff'
+	return product.supportTier === 'OneOff'
 		? url
 		: addChoiceCardsProductParams(
 				url,
-				selectedProduct.supportTier,
-				selectedProduct.ratePlan,
+				product.supportTier,
+				product.ratePlan,
 		  );
 };
 
@@ -164,27 +163,10 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 
 	const choiceCards = getChoiceCards(isTabletOrAbove, choiceCardsSettings);
 	const defaultChoiceCard = choiceCards?.find((cc) => cc.isDefault);
-	const defaultProduct = defaultChoiceCard?.product;
-	const [destinationUrl, setDestinationUrl] = useState<string | null>(
-		defaultChoiceCard?.destinationUrl ?? null,
-	);
-	const [
-		threeTierChoiceCardSelectedProduct,
-		setThreeTierChoiceCardSelectedProduct,
-	] = useState<ChoiceCard['product'] | undefined>(defaultProduct);
-
-	const setSelectedProduct: Dispatch<
-		SetStateAction<ChoiceCard['product'] | undefined>
-	> = (product) => {
-		setThreeTierChoiceCardSelectedProduct(product);
-		const choiceCard = choiceCards?.find(
-			(choiceCardItem) =>
-				typeof product === 'object' &&
-				'supportTier' in product &&
-				choiceCardItem.product.supportTier === product.supportTier,
-		);
-		setDestinationUrl(choiceCard?.destinationUrl ?? null);
-	};
+
+	const [selectedChoiceCard, setSelectedChoiceCard] = useState<
+		ChoiceCard | undefined
+	>(defaultChoiceCard);
 
 	// We can't render anything without a design
 	if (!design) {
@@ -399,7 +381,7 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 					</div>
 				)}
 
-				{!threeTierChoiceCardSelectedProduct && (
+				{!selectedChoiceCard && (
 					<div css={styles.outerImageCtaContainer}>
 						<div css={styles.innerImageCtaContainer}>
 							<DesignableBannerCtas
@@ -425,14 +407,12 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 				</div>
 
 				{choiceCards &&
-					threeTierChoiceCardSelectedProduct &&
+					selectedChoiceCard &&
 					mainOrMobileContent.primaryCta && (
 						<div css={styles.threeTierChoiceCardsContainer}>
 							<ThreeTierChoiceCards
-								selectedProduct={
-									threeTierChoiceCardSelectedProduct
-								}
-								setSelectedProduct={setSelectedProduct}
+								selectedChoiceCard={selectedChoiceCard}
+								setSelectedChoiceCard={setSelectedChoiceCard}
 								choices={choiceCards}
 								id={'banner'}
 							/>
@@ -441,8 +421,7 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 								<LinkButton
 									href={buildUrlForThreeTierChoiceCards(
 										mainOrMobileContent.primaryCta.ctaUrl,
-										threeTierChoiceCardSelectedProduct,
-										destinationUrl,
+										selectedChoiceCard,
 									)}
 									onClick={onCtaClick}
 									priority="tertiary"

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

@@ -148,17 +148,15 @@ const ChoiceCardPill = ({
 };
 
 type ThreeTierChoiceCardsProps = {
-	selectedProduct: ChoiceCard['product'];
-	setSelectedProduct: Dispatch<
-		SetStateAction<ChoiceCard['product'] | undefined>
-	>;
+	selectedChoiceCard: ChoiceCard;
+	setSelectedChoiceCard: Dispatch<SetStateAction<ChoiceCard | undefined>>;
 	choices: ChoiceCard[];
 	id: string; // uniquely identify this choice cards component to avoid conflicting with others
 };
 
 export const ThreeTierChoiceCards = ({
-	selectedProduct,
-	setSelectedProduct,
+	selectedChoiceCard,
+	setSelectedChoiceCard,
 	choices,
 	id,
 }: ThreeTierChoiceCardsProps) => {
@@ -169,88 +167,85 @@ export const ThreeTierChoiceCards = ({
 			`}
 		>
 			<Stack space={3}>
-				{choices.map(
-					({ product, label, benefitsLabel, benefits, pill }) => {
-						const { supportTier } = product;
-
-						const isSelected = (): boolean => {
+				{choices.map((card) => {
+					const { product, label, benefitsLabel, benefits, pill } =
+						card;
+					const { supportTier } = product;
+
+					const isSelected = (): boolean => {
+						if (
+							product.supportTier ===
+							selectedChoiceCard.product.supportTier
+						) {
 							if (
-								product.supportTier ===
-								selectedProduct.supportTier
+								product.supportTier !== 'OneOff' &&
+								selectedChoiceCard.product.supportTier !==
+									'OneOff'
 							) {
-								if (
-									product.supportTier !== 'OneOff' &&
-									selectedProduct.supportTier !== 'OneOff'
-								) {
-									return (
-										product.ratePlan ===
-										selectedProduct.ratePlan
-									);
-								} else {
-									return true;
-								}
+								return (
+									product.ratePlan ===
+									selectedChoiceCard.product.ratePlan
+								);
 							} else {
-								return false;
+								return true;
 							}
-						};
-						const selected = isSelected();
-
-						// Each radioId must be unique to the component and choice, e.g. "choicecard-epic-Contribution-Monthly"
-						const radioId = `choicecard-${id}-${supportTier}${
-							supportTier !== 'OneOff'
-								? `-${product.ratePlan}`
-								: ''
-						}`;
-
-						return (
-							<div
-								key={supportTier}
-								css={css`
-									position: relative;
-									background-color: inherit;
-								`}
+						} else {
+							return false;
+						}
+					};
+					const selected = isSelected();
+
+					// Each radioId must be unique to the component and choice, e.g. "choicecard-epic-Contribution-Monthly"
+					const radioId = `choicecard-${id}-${supportTier}${
+						supportTier !== 'OneOff' ? `-${product.ratePlan}` : ''
+					}`;
+
+					return (
+						<div
+							key={supportTier}
+							css={css`
+								position: relative;
+								background-color: inherit;
+							`}
+						>
+							{pill && <ChoiceCardPill pill={pill} />}
+							<label
+								css={supportTierChoiceCardStyles(selected)}
+								htmlFor={radioId}
 							>
-								{pill && <ChoiceCardPill pill={pill} />}
-								<label
-									css={supportTierChoiceCardStyles(selected)}
-									htmlFor={radioId}
-								>
-									<Radio
-										label={
-											<span
-												dangerouslySetInnerHTML={{
-													__html: sanitise(label),
-												}}
+								<Radio
+									label={
+										<span
+											dangerouslySetInnerHTML={{
+												__html: sanitise(label),
+											}}
+										/>
+									}
+									id={radioId}
+									value={radioId}
+									cssOverrides={labelOverrideStyles(selected)}
+									supporting={
+										selected ? (
+											<SupportingBenefits
+												benefitsLabel={
+													benefitsLabel as
+														| string
+														| undefined
+												}
+												benefits={benefits}
 											/>
-										}
-										id={radioId}
-										value={radioId}
-										cssOverrides={labelOverrideStyles(
-											selected,
-										)}
-										supporting={
-											selected ? (
-												<SupportingBenefits
-													benefitsLabel={
-														benefitsLabel as
-															| string
-															| undefined
-													}
-													benefits={benefits}
-												/>
-											) : undefined
-										}
-										checked={selected}
-										onChange={() => {
-											setSelectedProduct(product);
-										}}
-										theme={customRadioTheme}
-									/>
-								</label>
-							</div>
-						);
-					},
-				)}
+										) : undefined
+									}
+									checked={selected}
+									onChange={() => {
+										setSelectedChoiceCard(card);
+									}}
+									theme={customRadioTheme}
+								/>
+							</label>
+						</div>
+					);
+				})}
 			</Stack>
 		</RadioGroup>
 	);