export default function PersonalDetails()

in support-frontend/assets/components/subscriptionCheckouts/personalDetails.tsx [79:162]
82 lines of code
4 McCabe index (conditional complexity)

export default function PersonalDetails(props: PropTypes): JSX.Element {
	const handleSignOut = (e: React.MouseEvent<HTMLButtonElement>) => {
		e.preventDefault();
		props.signOut();
	};

	const maybeSetConfirmEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
		if (props.setConfirmEmail) {
			props.setConfirmEmail(e.target.value);
		}
	};

	const emailFooter = props.isSignedIn ? (
		<SignedInEmailFooter handleSignOut={handleSignOut} />
	) : (
		<SignedOutEmailFooter />
	);
	const confirmEmailInput = props.isSignedIn ? null : (
		<TextInput
			id="confirm-email"
			data-testid="confirm-email"
			data-qm-masking="blocklist"
			label="Confirm email"
			type="email"
			value={props.confirmEmail}
			onChange={maybeSetConfirmEmail}
			error={firstError('confirmEmail', props.formErrors)}
			pattern={emailRegexPattern}
		/>
	);
	return (
		<div id="qa-personal-details">
			<TextInput
				cssOverrides={marginBottom}
				id="first-name"
				data-testid="first-name"
				data-qm-masking="blocklist"
				label="First name"
				type="text"
				value={props.firstName}
				onChange={(e) => props.setFirstName(e.target.value)}
				error={firstError('firstName', props.formErrors)}
			/>
			<TextInput
				cssOverrides={marginBottom}
				id="last-name"
				data-testid="last-name"
				data-qm-masking="blocklist"
				label="Last name"
				type="text"
				value={props.lastName}
				onChange={(e) => props.setLastName(e.target.value)}
				error={firstError('lastName', props.formErrors)}
			/>
			<TextInput
				cssOverrides={marginBottom}
				id="email"
				data-testid="email"
				data-qm-masking="blocklist"
				label="Email"
				type="email"
				value={props.email}
				onChange={(e) => props.setEmail(e.target.value)}
				error={firstError('email', props.formErrors)}
				pattern={emailRegexPattern}
				disabled={props.isSignedIn}
			/>
			{confirmEmailInput}
			{emailFooter}
			<TextInput
				id="telephone"
				data-testid="telephone"
				data-qm-masking="blocklist"
				label="Telephone"
				optional
				type="tel"
				value={props.telephone}
				onChange={(e) => props.setTelephone(e.target.value)}
				supporting="We may use this to get in touch with you about your subscription."
				error={firstError('telephone', props.formErrors)}
			/>
		</div>
	);
}