Differential D7915 Diff 27302 landing/subscription-form.react.js

Changeset View

Standalone View

landing/subscription-form.react.js

// @flow		// @flow

		import classNames from 'classnames';
import * as React from 'react';		import * as React from 'react';

import { validEmailRegex } from 'lib/shared/account-utils.js';		import { validEmailRegex } from 'lib/shared/account-utils.js';

import css from './subscription-form.css';		import css from './subscription-form.css';
		import typography from './typography.css';

type SubscriptionFormStatus =		type SubscriptionFormStatus =
\| { +status: 'pending' }		\| { +status: 'pending' }
\| { +status: 'in_progress' }		\| { +status: 'in_progress' }
\| { +status: 'success' }		\| { +status: 'success' }
\| { +status: 'error', +error: string };		\| { +status: 'error', +error: string };

function SubscriptionForm(): React.Node {		function SubscriptionForm(): React.Node {
▲ Show 20 Lines • Show All 44 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 = 'Subscribe for updates';		let btnText = 'Request Access';
let btnStyle = css.button;		let btnStyle = css.button;
let inputStyle = css.email_input;		let inputStyle = css.email_input;
if (subscriptionFormStatus.status === 'error') {		if (subscriptionFormStatus.status === 'error') {
btnText = subscriptionFormStatus.error;		btnText = subscriptionFormStatus.error;
btnStyle = `${css.button} ${css.button_failure}`;		btnStyle = `${css.button} ${css.button_failure}`;
inputStyle = `${css.email_input} ${css.email_input_failure}`;		inputStyle = `${css.email_input} ${css.email_input_failure}`;
} else if (subscriptionFormStatus.status === 'success') {		} else if (subscriptionFormStatus.status === 'success') {
btnText = 'Subscribed!';		btnText = 'Requested!';
btnStyle = `${css.button} ${css.button_success}`;		btnStyle = `${css.button} ${css.button_success}`;
inputStyle = `${css.email_input} ${css.email_input_success}`;
}		}

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

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

return (		return (
<form>		<form>
<input		<input
type="text"		type="text"
id="subscription-form"		id="subscription-form"
value={email}		value={email}
onChange={onEmailChange}		onChange={onEmailChange}
className={inputStyle}		className={inputClassName}
placeholder="Enter your email"		placeholder="Enter your email"
/>		/>
<button className={btnStyle} onClick={onEmailSubmitted}>		<button className={buttonClassName} onClick={onEmailSubmitted}>
{btnText}		{btnText}
</button>		</button>
</form>		</form>
);		);
}		}
export default SubscriptionForm;		export default SubscriptionForm;