Differential D8039 Diff 29748 landing/subscription-form.react.js

Changeset View

Standalone View

landing/subscription-form.react.js

Show First 20 Lines • Show All 62 Lines • ▼ Show 20 Lines	const onEmailSubmitted = React.useCallback(
[email, subscriptionFormStatus],		[email, subscriptionFormStatus],
);		);

React.useEffect(() => {		React.useEffect(() => {
setSubscriptionFormStatus({ status: 'pending' });		setSubscriptionFormStatus({ status: 'pending' });
}, [email]);		}, [email]);

let btnText = 'Request Access';		let btnText = 'Request Access';
		let feedbackText = '';
let btnStyle = css.button;		let btnStyle = css.button;
let inputStyle = css.emailInput;		let inputStyle = css.emailInput;
		let feedbackTextStyle = css.feedbackText;
if (subscriptionFormStatus.status === 'error') {		if (subscriptionFormStatus.status === 'error') {
btnText = subscriptionFormStatus.error;		btnText = subscriptionFormStatus.error;
		feedbackText = `${subscriptionFormStatus.error}, please try again`;
btnStyle = `${css.button} ${css.buttonFailure}`;		btnStyle = `${css.button} ${css.buttonFailure}`;
inputStyle = `${css.emailInput} ${css.emailInputFailure}`;		inputStyle = `${css.emailInput} ${css.emailInputFailure}`;
		feedbackTextStyle = `${css.feedbackText} ${css.feedbackTextFailure}`;
} else if (subscriptionFormStatus.status === 'success') {		} else if (subscriptionFormStatus.status === 'success') {
btnText = 'Requested!';		btnText = 'Requested!';
		feedbackText = 'We will be in touch with next steps!';
btnStyle = `${css.button} ${css.buttonSuccess}`;		btnStyle = `${css.button} ${css.buttonSuccess}`;
		feedbackTextStyle = `${css.feedbackText} ${css.feedbackTextSuccess}`;
}		}

const inputClassName = classNames([typography.paragraph2, inputStyle]);		const inputClassName = classNames([typography.paragraph2, inputStyle]);
const buttonClassName = classNames([typography.paragraph2, btnStyle]);		const buttonClassName = classNames([typography.paragraph2, btnStyle]);
		const feedbackTextClassName = classNames([
		typography.paragraph2,
		feedbackTextStyle,
		]);

const onEmailChange = React.useCallback(e => {		const onEmailChange = React.useCallback(e => {
setEmail(e.target.value);		setEmail(e.target.value);
}, []);		}, []);

return (		return (
<form>		<form>
		<div className={css.inputContainer}>
<input		<input
type="text"		type="text"
id="subscription-form"		id="subscription-form"
value={email}		value={email}
onChange={onEmailChange}		onChange={onEmailChange}
className={inputClassName}		className={inputClassName}
placeholder="Enter your email"		placeholder="Enter your email"
/>		/>
		<p className={feedbackTextClassName}>{feedbackText}</p>
		</div>
		<div>
<button className={buttonClassName} onClick={onEmailSubmitted}>		<button className={buttonClassName} onClick={onEmailSubmitted}>
{btnText}		{btnText}
</button>		</button>
		</div>
</form>		</form>
);		);
}		}
export default SubscriptionForm;		export default SubscriptionForm;