function Signup()

in dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerReminderSignedOut.tsx [150:211]

57 lines of code
3 McCabe index (conditional complexity)


function Signup({
	reminderLabelWithPreposition,
	reminderStatus,
	onSubmit,
	setReminderCtaSettings,
}: SignupProps) {
	const { email, inputError, updateEmail, handleSubmit } =
		useContributionsReminderEmailForm();

	return (
		<>
			<header>
				<h3 css={styles.headerCopy}>
					Remind me to support {reminderLabelWithPreposition} please
				</h3>
			</header>

			<form
				css={styles.form}
				onSubmit={handleSubmit(() => onSubmit(email))}
			>
				<TextInput
					label="Email address"
					hideLabel={true}
					onChange={updateEmail}
					error={inputError}
					value={email}
					width={30}
					placeholder="Enter your email"
				/>

				<div css={styles.ctaContainer}>
					<Button
						type="submit"
						iconSide="right"
						priority="primary"
						disabled={reminderStatus === ReminderStatus.Submitting}
						cssOverrides={css`
							${styles.button}
							${setReminderCtaSettings &&
							buttonStyles(setReminderCtaSettings)}
						`}
					>
						Set reminder
					</Button>
				</div>

				{reminderStatus === ReminderStatus.Error && (
					<div css={styles.errorCopyContainer}>
						<ErrorCopy />
					</div>
				)}
			</form>

			<div css={styles.infoCopyContainer}>
				<InfoCopy
					reminderLabelWithPreposition={reminderLabelWithPreposition}
				/>
			</div>
		</>
	);
}