Merge branch 'main' into ashishpuliyel-patch-1

Author: ashishpuliyel

dotcom-rendering/src/client/userFeatures/user-features.ts

@@ -35,6 +35,16 @@ const requestNewData = async () => {
 	return syncDataFromUserBenefitsApi(authStatus).then(persistResponse);
 };
 
+/**
+ * Persist the user benefits response to cookies
+ *
+ * If new cookies are added/removed/edited, update the persistUserBenefitsCookie function in Gateway
+ * https://github.com/guardian/gateway/blob/252b2b2f24be826da42c6e7c1b1e202594184023/src/server/lib/user-features.ts#L88
+ *
+ * In gateway, the cookies are set after authentication.
+ *
+ * @param {UserBenefits} userBenefitsResponse
+ */
 const persistResponse = (userBenefitsResponse: UserBenefits) => {
 	createOrRenewCookie(USER_BENEFITS_EXPIRY_COOKIE);
 	if (userBenefitsResponse.hideSupportMessaging) {

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