export function SignInBodyCopy()

in support-frontend/assets/components/thankYou/signIn/signInItems.tsx [75:147]
67 lines of code
6 McCabe index (conditional complexity)

export function SignInBodyCopy({
	isTierThree,
	observerPrint,
}: {
	isTierThree?: boolean;
	observerPrint?: ObserverPrint;
}): JSX.Element {
	const [isExpanded, setIsExpanded] = useState(false);

	const onReadMoreClick = () => {
		trackComponentClick(OPHAN_COMPONENT_ID_READ_MORE_SIGN_IN);
		setIsExpanded(true);
	};

	const isTierThreeOrObserver = Boolean(observerPrint ?? isTierThree);
	const upperCopy = `By signing in, you help us to recognise you as a valued supporter when you visit our website or app. This means we can:`;
	const upperCopyTier3 = `Make sure you sign in on all your devices when browsing our website and app. This helps us recognise you as a valued subscriber so you can enjoy all the benefits included in your subscription.`;
	const lowerCopy = `Make sure you sign in on each of the devices you use to read our journalism – either today or next time you use them.`;
	const observerCopy =
		'Make sure you’re signed in on all your devices when browsing our website and app. This will allow you to manage your subscription.';

	return (
		<>
			{isTierThreeOrObserver && (
				<p>{isTierThree ? upperCopyTier3 : observerCopy}</p>
			)}
			{!isTierThreeOrObserver && (
				<>
					<p>
						<span css={hideAfterTablet}>
							This means we can recognise you as a supporter and remove
							unnecessary messages asking for financial support.{' '}
							{!isExpanded && (
								<ButtonLink
									cssOverrides={bodyText}
									priority="secondary"
									onClick={onReadMoreClick}
								>
									Read more
								</ButtonLink>
							)}
						</span>

						<span css={hideBeforeTablet}>{upperCopy}</span>
					</p>
					<div css={hideAfterTablet}>
						<ExpandableContainer isExpanded={isExpanded} maxHeight={500}>
							<div css={expandableContainer}>
								<p>
									You will be able to easily manage your account in one place.
								</p>

								<p>{lowerCopy}</p>
							</div>
						</ExpandableContainer>
					</div>
					<div css={hideBeforeTablet}>
						<div css={expandableContainer}>
							<BulletPointedList
								items={[
									'Show you far fewer requests for financial support',
									'Offer you a simple way to manage your support payments and newsletter subscriptions',
								]}
							/>

							<p>{lowerCopy}</p>
						</div>
					</div>
				</>
			)}
		</>
	);
}