Merge pull request #13762 from guardian/tf-fix-choice-cards

Fix clashing choice cards

Author: tomrf1

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

@@ -452,6 +452,7 @@ const DesignableBannerV2: ReactComponent<BannerRenderProps> = ({
 								isTabletOrAbove,
 								countryCode,
 							)}
+							id={'banner'}
 						/>
 
 						<div css={styles.ctaContainer}>

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

@@ -183,6 +183,7 @@ type ThreeTierChoiceCardsProps = {
 	countryCode?: string;
 	choices: ChoiceInfo[];
 	supporterPlusDiscount?: number;
+	id: string; // uniquely identify this choice cards component to avoid conflicting with others
 };
 
 export const ThreeTierChoiceCards = ({
@@ -191,6 +192,7 @@ export const ThreeTierChoiceCards = ({
 	setSelectedProduct,
 	choices,
 	supporterPlusDiscount,
+	id,
 }: ThreeTierChoiceCardsProps) => {
 	const currencySymbol = getLocalCurrencySymbol(countryCode);
 	const countryGroupId = countryCodeToCountryGroupId(countryCode);
@@ -221,7 +223,7 @@ export const ThreeTierChoiceCards = ({
 							!isUndefined(supporterPlusDiscount) &&
 							supportTier === 'SupporterPlus';
 
-						const radioId = `choicecard-${supportTier}`;
+						const radioId = `choicecard-${id}-${supportTier}`;
 
 						return (
 							<div

dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicCtasContainer.tsx

@@ -67,6 +67,7 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 					supporterPlusDiscount={
 						hasSupporterPlusPromoCode ? 0.5 : undefined
 					}
+					id={'epic'}
 				/>
 			)}
 			<ContributionsEpicButtons