diff --git a/landing/subscription-form.css b/landing/subscription-form.css index 69a083e52..a356b44a3 100644 --- a/landing/subscription-form.css +++ b/landing/subscription-form.css @@ -1,70 +1,97 @@ form { display: flex; } .button { cursor: pointer; border: none; - padding: 16px 32px; + padding: 17px 32px; /* We have 17 to compensate for no border */ border-radius: 4px; color: var(--white-100); background: var(--violet-dark-60); min-width: 184px; + display: flex; + justify-content: center; + align-items: center; } .buttonSuccess { background-color: var(--success-dark-90); } .buttonFailure { background-color: var(--error-dark-50); } .button:hover { background-color: var(--violet-dark-80); } .buttonSuccess:hover { background-color: var(--success-dark-90); } .buttonFailure:hover { background: var(--error-dark-50); } +div.inputContainer { + display: flex; + flex: 1; + flex-direction: column; +} + input.emailInput { flex: 1; padding: 16px 24px; background-color: transparent; color: var(--white-100); border: 1px solid var(--white-80); border-radius: 4px; outline: none; transition: 300ms; margin-right: 12px; } input.emailInput:focus { border: 1.5px solid var(--white-100); transition: 300ms; } input.emailInputFailure { border: 1px solid var(--error-dark-50); } +p.feedbackText { + margin-top: 8px; +} + +p.feedbackTextSuccess { + color: var(--success-dark-50); +} + +p.feedbackTextFailure { + color: var(--error-dark-50); +} + @media (max-width: 1099px) { form { display: block; } .button { width: 100%; height: 50px; + margin-top: 8px; } input.emailInput { width: 100%; height: 50px; - margin-bottom: 16px; + margin-bottom: 8px; + } + + p.feedbackText { + text-align: center; + margin-top: 0; } } diff --git a/landing/subscription-form.react.js b/landing/subscription-form.react.js index 67e814870..6323f72fb 100644 --- a/landing/subscription-form.react.js +++ b/landing/subscription-form.react.js @@ -1,105 +1,120 @@ // @flow import classNames from 'classnames'; import * as React from 'react'; import { validEmailRegex } from 'lib/shared/account-utils.js'; import css from './subscription-form.css'; import typography from './typography.css'; type SubscriptionFormStatus = | { +status: 'pending' } | { +status: 'in_progress' } | { +status: 'success' } | { +status: 'error', +error: string }; function SubscriptionForm(): React.Node { const [email, setEmail] = React.useState(''); const [subscriptionFormStatus, setSubscriptionFormStatus] = React.useState({ 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 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!'; 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 onEmailChange = React.useCallback(e => { setEmail(e.target.value); }, []); return (
- - +
+ +

{feedbackText}

+
+
+ +
); } export default SubscriptionForm;