Choice cards tracking (#14477)

* Track choice cards events

* fix type

Author: tomrf1

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

@@ -479,6 +479,7 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 									}
 									choices={choiceCards}
 									id={'banner'}
+									submitComponentEvent={submitComponentEvent}
 								/>
 							)}
 							<div css={styles.ctaContainer(isCollapsed)}>

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

@@ -55,6 +55,7 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 					setSelectedChoiceCard={setSelectedChoiceCard}
 					choices={choiceCards}
 					id={'epic'}
+					submitComponentEvent={submitComponentEvent}
 				/>
 			)}
 			<ContributionsEpicButtons

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

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import type { ComponentEvent } from '@guardian/ophan-tracker-js';
 import {
 	palette,
 	space,
@@ -19,7 +20,9 @@ import { hexColourToString } from '@guardian/support-dotcom-components';
 import type { HexColour } 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 } from 'react';
 import sanitise from 'sanitize-html';
+import { useIsInView } from '../../../lib/useIsInView';
 
 const supportTierChoiceCardStyles = (selected: boolean) => css`
 	display: block;
@@ -151,102 +154,144 @@ type ThreeTierChoiceCardsProps = {
 	selectedChoiceCard: ChoiceCard;
 	setSelectedChoiceCard: Dispatch<SetStateAction<ChoiceCard | undefined>>;
 	choices: ChoiceCard[];
-	id: string; // uniquely identify this choice cards component to avoid conflicting with others
+	id: 'epic' | 'banner'; // uniquely identify this choice cards component to avoid conflicting with others
+	submitComponentEvent?: (componentEvent: ComponentEvent) => void;
 };
 
 export const ThreeTierChoiceCards = ({
 	selectedChoiceCard,
 	setSelectedChoiceCard,
 	choices,
 	id,
+	submitComponentEvent,
 }: ThreeTierChoiceCardsProps) => {
+	const [hasBeenSeen, setNode] = useIsInView({
+		debounce: true,
+		threshold: 0,
+	});
+
+	useEffect(() => {
+		if (submitComponentEvent) {
+			void submitComponentEvent({
+				component: {
+					componentType: 'ACQUISITIONS_OTHER',
+					id: `${id}-choice-cards`,
+				},
+				action: 'INSERT',
+			});
+		}
+	}, [id, submitComponentEvent]);
+
+	useEffect(() => {
+		if (hasBeenSeen && submitComponentEvent) {
+			void submitComponentEvent({
+				component: {
+					componentType: 'ACQUISITIONS_OTHER',
+					id: `${id}-choice-cards`,
+				},
+				action: 'VIEW',
+			});
+		}
+	}, [hasBeenSeen, id, submitComponentEvent]);
+
 	return (
-		<RadioGroup
-			cssOverrides={css`
-				margin-top: ${space[6]}px;
-			`}
-		>
-			<Stack space={3}>
-				{choices.map((card) => {
-					const { product, label, benefitsLabel, benefits, pill } =
-						card;
-					const { supportTier } = product;
-
-					const isSelected = (): boolean => {
-						if (
-							product.supportTier ===
-							selectedChoiceCard.product.supportTier
-						) {
+		<div ref={setNode}>
+			<RadioGroup
+				cssOverrides={css`
+					margin-top: ${space[6]}px;
+				`}
+			>
+				<Stack space={3}>
+					{choices.map((card) => {
+						const {
+							product,
+							label,
+							benefitsLabel,
+							benefits,
+							pill,
+						} = card;
+						const { supportTier } = product;
+
+						const isSelected = (): boolean => {
 							if (
-								product.supportTier !== 'OneOff' &&
-								selectedChoiceCard.product.supportTier !==
-									'OneOff'
+								product.supportTier ===
+								selectedChoiceCard.product.supportTier
 							) {
-								return (
-									product.ratePlan ===
-									selectedChoiceCard.product.ratePlan
-								);
+								if (
+									product.supportTier !== 'OneOff' &&
+									selectedChoiceCard.product.supportTier !==
+										'OneOff'
+								) {
+									return (
+										product.ratePlan ===
+										selectedChoiceCard.product.ratePlan
+									);
+								} else {
+									return true;
+								}
 							} else {
-								return true;
+								return false;
 							}
-						} 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}
+						};
+						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;
+								`}
 							>
-								<Radio
-									label={
-										<span
-											dangerouslySetInnerHTML={{
-												__html: sanitise(label),
-											}}
-										/>
-									}
-									id={radioId}
-									value={radioId}
-									cssOverrides={labelOverrideStyles(selected)}
-									supporting={
-										selected && (
-											<SupportingBenefits
-												benefitsLabel={
-													benefitsLabel as
-														| string
-														| undefined
-												}
-												benefits={benefits}
+								{pill && <ChoiceCardPill pill={pill} />}
+								<label
+									css={supportTierChoiceCardStyles(selected)}
+									htmlFor={radioId}
+								>
+									<Radio
+										label={
+											<span
+												dangerouslySetInnerHTML={{
+													__html: sanitise(label),
+												}}
 											/>
-										)
-									}
-									checked={selected}
-									onChange={() => {
-										setSelectedChoiceCard(card);
-									}}
-									theme={customRadioTheme}
-								/>
-							</label>
-						</div>
-					);
-				})}
-			</Stack>
-		</RadioGroup>
+										}
+										id={radioId}
+										value={radioId}
+										cssOverrides={labelOverrideStyles(
+											selected,
+										)}
+										supporting={
+											selected && (
+												<SupportingBenefits
+													benefitsLabel={
+														benefitsLabel as
+															| string
+															| undefined
+													}
+													benefits={benefits}
+												/>
+											)
+										}
+										checked={selected}
+										onChange={() => {
+											setSelectedChoiceCard(card);
+										}}
+										theme={customRadioTheme}
+									/>
+								</label>
+							</div>
+						);
+					})}
+				</Stack>
+			</RadioGroup>
+		</div>
 	);
 };