({ status: 'pending' });
const onEmailSubmitted = React.useCallback(
async (e: Event) => {
e.preventDefault();
if (
subscriptionFormStatus.status === 'in_progress' ||
subscriptionFormStatus.status === 'success'
) {
return;
}
if (email.search(validEmailRegex) === -1) {
setSubscriptionFormStatus({ status: 'error', error: 'Invalid email' });
return;
}
setSubscriptionFormStatus({ status: 'in_progress' });
try {
const response = await fetch('subscribe_email', {
method: 'POST',
credentials: 'same-origin',
body: JSON.stringify({ email }),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
});
const respJson = await response.json();
if (!respJson.success) {
setSubscriptionFormStatus({
status: 'error',
error: 'Request failed',
});
return;
}
setSubscriptionFormStatus({ status: 'success' });
document.activeElement?.blur();
} catch {
setSubscriptionFormStatus({ status: 'error', error: 'Network failed' });
}
},
[email, subscriptionFormStatus],
);
React.useEffect(() => {
setSubscriptionFormStatus({ status: 'pending' });
}, [email]);
- let btnText = 'Request Access';
- let feedbackText = '';
+ let btnText = 'Subscribe for updates';
let btnStyle = css.button;
let inputStyle = css.emailInput;
- let feedbackTextStyle = css.feedbackText;
if (subscriptionFormStatus.status === 'error') {
btnText = subscriptionFormStatus.error;
- feedbackText = `${subscriptionFormStatus.error}, please try again`;
btnStyle = `${css.button} ${css.buttonFailure}`;
inputStyle = `${css.emailInput} ${css.emailInputFailure}`;
- feedbackTextStyle = `${css.feedbackText} ${css.feedbackTextFailure}`;
} else if (subscriptionFormStatus.status === 'success') {
- btnText = 'Requested!';
- feedbackText = 'We will be in touch with next steps!';
+ btnText = 'Subscribed!';
btnStyle = `${css.button} ${css.buttonSuccess}`;
- feedbackTextStyle = `${css.feedbackText} ${css.feedbackTextSuccess}`;
}
const inputClassName = classNames([typography.paragraph2, inputStyle]);
const buttonClassName = classNames([typography.paragraph2, btnStyle]);
- const feedbackTextClassName = classNames([
- typography.paragraph2,
- feedbackTextStyle,
- ]);
+ const errorTextClassName = classNames([typography.paragraph2, css.errorText]);
const onEmailChange = React.useCallback(e => {
setEmail(e.target.value);
}, []);
+ let errorText;
+ if (subscriptionFormStatus.status === 'error') {
+ errorText = (
+
+ {subscriptionFormStatus.error}, please try again
+
+ );
+ }
+
return (
);
}
export default SubscriptionForm;