Merge pull request #6673 from guardian/ahe/no-unchecked-index

Remove noUncheckedIndexedAccess override and fix all cases

support-frontend/assets/components/forms/customFields/options.tsx

@@ -6,7 +6,7 @@ const options = (optionsForMapping: Record<string, string>): JSX.Element => {
 	return (
 		<>
 			{Object.keys(optionsForMapping).map((key) => (
-				<Option value={key}>{optionsForMapping[key]}</Option>
+				<Option value={key}>{optionsForMapping[key] ?? ''}</Option>
 			))}
 		</>
 	);

support-frontend/assets/components/forms/customFields/sortedOptions.tsx

@@ -7,11 +7,13 @@ function sortedOptions(optionsForSorting: Record<string, string>): JSX.Element {
 		<>
 			{Object.keys(optionsForSorting)
 				.sort((a, b) =>
-					optionsForSorting[a].localeCompare(optionsForSorting[b]),
+					(optionsForSorting[a] ?? '').localeCompare(
+						optionsForSorting[b] ?? '',
+					),
 				)
 				.map((key) => (
 					<Option value={key} key={key}>
-						{optionsForSorting[key]}
+						{optionsForSorting[key] ?? ''}
 					</Option>
 				))}
 		</>

support-frontend/assets/components/gridImage/gridImage.tsx

@@ -30,6 +30,11 @@ export default function GridImage(props: PropTypes): JSX.Element | null {
 	const sorted = props.srcSizes.sort(ascending);
 	const srcSet = gridSrcset(props.gridId, sorted, props.imgType);
 	const fallbackSize = sorted.find((_) => _ > MIN_IMG_WIDTH) ?? sorted[0];
+
+	if (fallbackSize === undefined) {
+		return null;
+	}
+
 	const fallbackSrc = gridUrl(props.gridId, fallbackSize, props.imgType);
 	return (
 		<img

support-frontend/assets/components/paymentMethodSelector/PaymentMethodSelectorContainer.tsx

@@ -61,6 +61,7 @@ function PaymentMethodSelectorContainer({
 
 	useEffect(() => {
 		availablePaymentMethods.length === 1 &&
+			availablePaymentMethods[0] &&
 			dispatch(setPaymentMethod({ paymentMethod: availablePaymentMethods[0] }));
 	}, []);
 

support-frontend/assets/components/paymentRequestButton/hooks/payerDetails.ts

@@ -24,7 +24,7 @@ function setPayerName(
 	const nameParts = payerName.trim().replace(/\s+/g, ' ').split(' ');
 
 	if (nameParts.length > 1) {
-		dispatch(setFirstName(nameParts[0]));
+		dispatch(setFirstName(nameParts[0] ?? ''));
 		dispatch(setLastName(nameParts.slice(1).join(' ')));
 	} else if (nameParts.length === 1) {
 		logException(

support-frontend/assets/components/subscriptionCheckouts/address/addressFields.tsx

@@ -202,7 +202,8 @@ export function AddressFields({ scope, countryGroupId, ...props }: PropTypes) {
 
 						if (countryGroupId !== selectedCountryGroup) {
 							const pathname = window.location.pathname;
-							const currentInternationalisationId = pathname.split('/')[1];
+							const currentInternationalisationId =
+								pathname.split('/')[1] ?? '';
 							const selectedInternationalisationId =
 								countryGroups[selectedCountryGroup as CountryGroupId]
 									.supportInternationalisationId;

support-frontend/assets/components/subscriptionCheckouts/address/postcodeFinder.tsx

@@ -101,8 +101,9 @@ interface AddressSelectorProps {
 function AddressSelector({ results, onAddressSelected }: AddressSelectorProps) {
 	function handleAddressSelected(e: React.ChangeEvent<HTMLSelectElement>) {
 		const resultIndex = Number.parseInt(e.currentTarget.value);
-		if (results[resultIndex]) {
-			onAddressSelected(results[resultIndex]);
+		const result = results[resultIndex];
+		if (result) {
+			onAddressSelected(result);
 		}
 	}
 

support-frontend/assets/components/subscriptionCheckouts/paymentMethodSelector.tsx

@@ -104,6 +104,7 @@ function PaymentMethodSelector({
 }: PropTypes): JSX.Element {
 	useEffect(() => {
 		availablePaymentMethods.length === 1 &&
+			availablePaymentMethods[0] &&
 			setPaymentMethod(availablePaymentMethods[0]);
 	}, []);
 

support-frontend/assets/components/thankYou/supportReminder/supportReminderItems.tsx

@@ -191,6 +191,11 @@ export function SupportReminderCTAandPrivacy({
 } & SupportReminderState): JSX.Element {
 	const setReminder = () => {
 		const choice = reminderChoices[supportReminderState.selectedChoiceIndex];
+
+		if (!choice) {
+			return;
+		}
+
 		const url = getReminderUrl(choice);
 
 		if (!isCodeOrProd()) {

support-frontend/assets/components/thankYou/thankYouModuleData.tsx

@@ -250,7 +250,11 @@ export const getThankYouModuleData = (
 			bodyCopy: (
 				<>
 					<SubscriptionStartBodyCopy
-						startDateGW={formatUserDate(publicationStartDays[0])}
+						startDateGW={
+							publicationStartDays[0]
+								? formatUserDate(publicationStartDays[0])
+								: ''
+						}
 					/>
 				</>
 			),

support-frontend/assets/helpers/abTests/abtest.ts

@@ -1,7 +1,3 @@
-/* eslint "@typescript-eslint/no-unnecessary-condition": "off" -- this is while we are fixing `noUncheckedIndexedAccess` errors */
-
-// ----- Imports ----- //
-
 import seedrandom from 'seedrandom';
 import { contributionsOnlyAmountsTestName } from 'helpers/contributions';
 import type { Settings } from 'helpers/globalsAndSwitches/settings';
@@ -427,16 +423,10 @@ function getAmountsTestVariant(
 
 	const { testName, liveTestName, seed, variants, isLive } = targetedTest;
 
-	if (!variants.length) {
-		return {
-			selectedAmountsVariant: getFallbackAmounts(countryGroupId),
-		};
-	}
-
 	const selectVariant = (
 		isLive: boolean,
 		variants: AmountsVariant[],
-	): AmountsVariant => {
+	): AmountsVariant | undefined => {
 		if (isLive && variants.length > 1) {
 			const assignmentIndex = randomNumber(mvt, seed) % variants.length;
 
@@ -453,9 +443,15 @@ function getAmountsTestVariant(
 	const amountsParticipation = buildParticipation(
 		targetedTest,
 		currentTestName,
-		variant.variantName,
+		variant?.variantName ?? '',
 	);
 
+	if (!variant) {
+		return {
+			selectedAmountsVariant: getFallbackAmounts(countryGroupId),
+		};
+	}
+
 	return {
 		selectedAmountsVariant: {
 			...variant,

support-frontend/assets/helpers/abTests/helpers.ts

@@ -1,10 +1,20 @@
 import type {
 	AmountsTest,
+	AmountsVariant,
 	SelectedAmountsVariant,
 } from 'helpers/contributions';
 import type { CountryGroupId } from 'helpers/internationalisation/countryGroup';
 
-export const FALLBACK_AMOUNTS: AmountsTest[] = [
+type AmountsTestWithVariants = AmountsTest & {
+	variants: [AmountsVariant, ...AmountsVariant[]];
+};
+
+type NonEmptyAmountsTestArray = [
+	AmountsTestWithVariants,
+	...AmountsTestWithVariants[],
+];
+
+export const FALLBACK_AMOUNTS: NonEmptyAmountsTestArray = [
 	{
 		testName: 'FALLBACK_AMOUNTS__GBPCountries',
 		liveTestName: '',

support-frontend/assets/helpers/campaigns/campaigns.tsx

@@ -175,11 +175,14 @@ export function getCampaignSettings(
 	promoCode?: string | null,
 ): CampaignSettings | null {
 	for (const campaignId in campaigns) {
-		const isEligible =
-			isCampaignEnabled(campaignId) &&
-			campaigns[campaignId].isEligible(countryGroupId, promoCode);
-		if (isEligible || forceCampaign(campaignId)) {
-			return campaigns[campaignId];
+		const campaign = campaigns[campaignId];
+		if (campaign) {
+			const isEligible =
+				isCampaignEnabled(campaignId) &&
+				campaign.isEligible(countryGroupId, promoCode);
+			if (isEligible || forceCampaign(campaignId)) {
+				return campaign;
+			}
 		}
 	}
 	return null;

support-frontend/assets/helpers/customHooks/useHasBeenSeen.ts

@@ -16,7 +16,7 @@ const useHasBeenSeen = (
 	// Enabling debouncing ensures the target element intersects for at least
 	// 200ms before the callback is executed
 	const intersectionFn: IntersectionObserverCallback = ([entry]) => {
-		if (entry.isIntersecting) {
+		if (entry?.isIntersecting) {
 			setHasBeenSeen(true);
 		}
 	};

support-frontend/assets/helpers/globalsAndSwitches/globals.test.ts

@@ -17,7 +17,7 @@ const getSpecifiedRegionAmountsFromGlobal = (
 		(t) =>
 			t.targeting.targetingType === 'Region' && t.targeting.region === target,
 	);
-	if (!testArray.length) {
+	if (!testArray.length || !testArray[0]) {
 		return {};
 	}
 	return testArray[0];

support-frontend/assets/helpers/images/theGrid.ts

@@ -19,6 +19,11 @@ export function gridUrl(
 	imgType: ImageType = 'jpg',
 ): string {
 	const gridReference = imageCatalogue[gridId];
+
+	if (!gridReference) {
+		return '';
+	}
+
 	const originalWidth = gridReference.split('_')[2];
 	const path = `/img/media/${imageCatalogue[gridId]}/master/${originalWidth}.${imgType}?dpr=1&s=none&width=${size}`;
 	const url = new URL(path, GRID_DOMAIN);

support-frontend/assets/helpers/internationalisation/classes/country.ts

@@ -44,7 +44,7 @@ export class Country {
 			? searchUppercase
 			: Object.keys(states).find(
 					(key) =>
-						states[key].toUpperCase() === searchUppercase ||
+						states[key]?.toUpperCase() === searchUppercase ||
 						(searchUppercase.length === 3 && searchUppercase.startsWith(key)),
 			  );
 	}
@@ -223,7 +223,7 @@ export class Country {
 
 		if (
 			path !== paths[targetCountryGroup][0] &&
-			!path.startsWith(paths[targetCountryGroup][1]) &&
+			!path.startsWith(paths[targetCountryGroup][1] ?? '') &&
 			countryGroupId !== targetCountryGroup
 		) {
 			return null;

support-frontend/assets/helpers/redux/checkout/addressMeta/reducer.ts

@@ -32,7 +32,7 @@ export const addressMetaSlice = createSlice({
 				state.deliveryAgent.isLoading = false;
 				state.deliveryAgent.response = action.payload;
 				if (action.payload.agents?.length === 1) {
-					state.deliveryAgent.chosenAgent = action.payload.agents[0].agentId;
+					state.deliveryAgent.chosenAgent = action.payload.agents[0]?.agentId;
 				}
 			},
 		);

support-frontend/assets/helpers/redux/checkout/product/selectors/productType.ts

@@ -45,7 +45,10 @@ function getSubscriptionTypeFromURL(): SubscriptionProduct {
 	};
 	const [, match] = urlPathRegex.exec(window.location.pathname) ?? [];
 	if (match) {
-		return productsToUrlPath[match];
+		const product = productsToUrlPath[match];
+		if (product) {
+			return product;
+		}
 	}
 	return DigitalPack;
 }

support-frontend/assets/helpers/redux/user/reducer.ts

@@ -11,8 +11,9 @@ export const userSlice = createSlice({
 			state.isSignedIn = action.payload;
 		},
 		setTestUserStatus(state, action: PayloadAction<Record<string, boolean>>) {
-			state.isTestUser = action.payload.isTestUser;
-			state.isPostDeploymentTestUser = action.payload.isPostDeploymentTestUser;
+			state.isTestUser = action.payload.isTestUser ?? false;
+			state.isPostDeploymentTestUser =
+				action.payload.isPostDeploymentTestUser ?? false;
 		},
 		setIsReturningContributor(state, action: PayloadAction<boolean>) {
 			state.isReturningContributor = action.payload;

support-frontend/assets/helpers/storage/cookie.ts

@@ -15,8 +15,9 @@ export function get(name: string): string | null | undefined {
 	const cookies = document.cookie.split('; ');
 
 	for (let i = cookies.length - 1; i >= 0; i -= 1) {
-		if (cookies[i].startsWith(name)) {
-			return cookies[i].substr(cookies[i].indexOf('=') + 1);
+		const cookie = cookies[i];
+		if (cookie && cookie.startsWith(name)) {
+			return cookie.substr(cookie.indexOf('=') + 1);
 		}
 	}
 

support-frontend/assets/helpers/subscriptionsForms/deliveryDays.ts

@@ -34,7 +34,10 @@ const getDeliveryDays = (
 	const deliveryDays = [initial];
 
 	for (let i = 1; i <= length; i += 1) {
-		deliveryDays.push(getNextDeliveryDay(deliveryDays[i - 1]));
+		const previousDay = deliveryDays[i - 1];
+		if (previousDay) {
+			deliveryDays.push(getNextDeliveryDay(previousDay));
+		}
 	}
 
 	return deliveryDays;

support-frontend/assets/helpers/supporterPlus/benefitsThreshold.ts

@@ -27,9 +27,11 @@ export function getLowerBenefitThreshold(
 ): number {
 	const supporterPlusRatePlan =
 		contributionType === 'ANNUAL' ? 'Annual' : 'Monthly';
-	return productCatalog.SupporterPlus.ratePlans[supporterPlusRatePlan].pricing[
-		currencyId
-	];
+	return (
+		productCatalog.SupporterPlus?.ratePlans[supporterPlusRatePlan]?.pricing[
+			currencyId
+		] ?? 0
+	);
 }
 
 export function getLowerProductBenefitThreshold(
@@ -49,9 +51,11 @@ export function getLowerProductBenefitThreshold(
 	const ratePlanSupporterPlus =
 		contributionType === 'ANNUAL' ? 'Annual' : 'Monthly';
 
-	return productCatalog[product].ratePlans[
-		product === 'SupporterPlus' ? ratePlanSupporterPlus : ratePlanTier3
-	].pricing[currencyId];
+	return (
+		productCatalog[product]?.ratePlans[
+			product === 'SupporterPlus' ? ratePlanSupporterPlus : ratePlanTier3
+		]?.pricing[currencyId] ?? 0
+	);
 }
 
 // This is a function overload that means if the caller has already determined that contributionType is recurring

support-frontend/assets/helpers/tracking/acquisitions.ts

@@ -102,7 +102,7 @@ function getCampaign(
 
 	return (
 		Object.keys(campaigns).find((campaign) =>
-			campaigns[campaign].includes(campaignCode),
+			campaigns[campaign]?.includes(campaignCode),
 		) ?? null
 	);
 }
@@ -270,30 +270,30 @@ function getReferrerAcquisitionDataFromSessionStorage():
 
 function getAcquisitionDataFromUtmParams():
 	| Record<string, string | AcquisitionABTest | AcquisitionQueryParameters>
-	| null
 	| undefined {
 	// Same order of fields as https://reader-revenue-lynx.s3.eu-west-1.amazonaws.com/v3.html
-	const utmParamNames = [
-		'utm_campaign',
-		'utm_content',
-		'utm_term',
-		'utm_source',
-		'utm_medium',
-	];
-	const utmParameters = Object.fromEntries(
-		utmParamNames.map((paramName) => [paramName, getQueryParameter(paramName)]),
-	);
+	const utmCampaign = getQueryParameter('utm_campaign');
+	const utmContent = getQueryParameter('utm_content');
+	const utmTerm = getQueryParameter('utm_term');
+	const utmSource = getQueryParameter('utm_source');
+	const utmMedium = getQueryParameter('utm_medium');
 
 	// All must be present in the URL for them to be accepted
-	if (utmParamNames.every((paramName) => utmParameters[paramName].length > 0)) {
+	if (
+		utmCampaign !== '' &&
+		utmContent !== '' &&
+		utmTerm !== '' &&
+		utmSource !== '' &&
+		utmMedium !== ''
+	) {
 		return {
-			campaignCode: utmParameters.utm_campaign,
+			campaignCode: utmCampaign,
 			abTest: {
-				name: utmParameters.utm_content,
-				variant: utmParameters.utm_term,
+				name: utmContent,
+				variant: utmTerm,
 			},
-			source: utmParameters.utm_source,
-			componentType: utmParameters.utm_medium,
+			source: utmSource,
+			componentType: utmMedium,
 			queryParameters: toAcquisitionQueryParameters(getAllQueryParams()),
 		};
 	}