function ThankYouModule()

in support-frontend/assets/components/thankYou/thankYouModule.tsx [259:366]
101 lines of code
16 McCabe index (conditional complexity)

function ThankYouModule({
	moduleType,
	isSignedIn,
	icon,
	header,
	bodyCopy,
	ctas,
	trackComponentLoadId,
	bodyCopySecond,
	ctasSecond,
}: ThankYouModuleProps): JSX.Element {
	useEffect(() => {
		trackComponentLoadId && trackComponentLoad(trackComponentLoadId);
	}, []);

	const isGuardianAdLite = [
		'whatNext',
		'reminderToSignIn',
		'reminderToActivateSubscription',
		'headlineReturn',
		'signInToActivate',
	].includes(moduleType);
	const hasQrCodes = moduleType === 'appDownload';
	const isDownloadModules = moduleType === 'appsDownload';
	const hasImagery = ['appDownload', 'newspaperArchiveBenefit'].includes(
		moduleType,
	);

	const gridContainer =
		hasImagery || hasQrCodes
			? imageryAndQrCodesGridContainer
			: icon
			? defaultGridContainer
			: defaultContainerNoIcon;

	const maybePaddingRight =
		!hasImagery && (isDownloadModules ? paddingRightApps : paddingRight);

	const isNewspaperArchiveBenefit = moduleType === 'newspaperArchiveBenefit';
	const resizeContainer = isNewspaperArchiveBenefit ? sizeContainer : css``;
	const resizeImgContainer = !isNewspaperArchiveBenefit
		? sizeImgContainer
		: css``;
	const resizeMarginTop = !isNewspaperArchiveBenefit
		? css`
				margin-top: ${space[6]}px;
		  `
		: css``;

	return (
		<section
			css={[container, maybePaddingRight, hasImagery && imageryPadding]}
			data-testid={moduleType}
		>
			<div css={gridContainer}>
				<div css={iconContainer}>{icon}</div>
				<div css={[headerContainer, resizeContainer]}>{header}</div>
				<div css={[bodyContainer, resizeContainer]}>
					{isDownloadModules ? (
						<>
							<div css={[bodyApps, bodyAppsTop]}>
								<div css={bodyStyle}>
									<p css={bodyCopyStyle(isGuardianAdLite)}>{bodyCopy}</p>
									<div css={[ctaContainerApps, ctaTop]}>{ctas}</div>
								</div>
								<span css={appContainer}>
									<AppImageGuardianNews></AppImageGuardianNews>
								</span>
							</div>
							<div css={bodyApps}>
								<div css={bodyStyle}>
									<p css={bodyCopyStyle(isGuardianAdLite)}>{bodyCopySecond}</p>
									<div css={[ctaContainerApps, ctaBottom]}>{ctasSecond}</div>
								</div>
								<span css={appContainer}>
									<AppImageFeast></AppImageFeast>
								</span>
							</div>
						</>
					) : (
						<>
							<p css={[bodyCopyStyle(isGuardianAdLite), bodyCopyMarginTop]}>
								{bodyCopy}
							</p>
							<div css={resizeMarginTop}>{ctas}</div>
						</>
					)}
				</div>

				{hasImagery ? (
					<div css={[imgContainer, resizeImgContainer]}>
						{isNewspaperArchiveBenefit ? (
							<NewspaperArchiveImage />
						) : (
							<AppDownloadImage />
						)}
					</div>
				) : null}

				{hasQrCodes && isSignedIn ? (
					<div css={[qrCodesContainer, hideBelowTablet]}>
						<AppDownloadQRCodes />
					</div>
				) : null}
			</div>
		</section>
	);
}