// @flow

import * as React from 'react';

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

function SubscriptionForm(): React.Node {
  return (
    <form>
      <input className={css.email_input} placeholder="Enter your email" />
      <button className={css.button}>Subscribe for updates</button>
    </form>
  );
}
export default SubscriptionForm;

@@ -36,16 +36,77 @@
 eact';%0A%0A
+import %7B validEmailRegex %7D from 'lib/shared/account-utils';%0A%0A
 import c
@@ -189,40 +189,1430 @@
 %7B%0A  
-return (%0A    %3Cform%3E%0A      %3Cinput
+const %5Bemail, setEmail%5D = React.useState('');%0A  // eslint-disable-next-line%0A  const %5Bsuccess, setSuccess%5D = React.useState(null);%0A  // eslint-disable-next-line%0A  const %5BerrorMsg, setErrorMsg%5D = React.useState(null);%0A%0A  const onEmailSubmitted = React.useCallback(%0A    async (e: Event) =%3E %7B%0A      e.preventDefault();%0A      if (email.search(validEmailRegex) === -1) %7B%0A        setSuccess(false);%0A        setErrorMsg('Please enter a valid email address!');%0A        return;%0A      %7D%0A%0A      try %7B%0A        const response = await fetch('subscribe_email', %7B%0A          method: 'POST',%0A          credentials: 'same-origin',%0A          body: JSON.stringify(%7B email %7D),%0A          headers: %7B%0A            'Accept': 'application/json',%0A            'Content-Type': 'application/json',%0A          %7D,%0A        %7D);%0A%0A        const respJson = await response.json();%0A        setSuccess(respJson.success);%0A%0A        if (!respJson.success) %7B%0A          setErrorMsg('Could not add to email list, please try again later!');%0A        %7D%0A      %7D catch %7B%0A        setSuccess(false);%0A        setErrorMsg('Network request failed, please try again later!');%0A      %7D%0A    %7D,%0A    %5Bemail%5D,%0A  );%0A%0A  React.useEffect(() =%3E %7B%0A    setSuccess(null);%0A  %7D, %5Bemail%5D);%0A%0A  const onEmailChange = React.useCallback((e) =%3E %7B%0A    setEmail(e.target.value);%0A  %7D, %5B%5D);%0A%0A  return (%0A    %3Cform%3E%0A      %3Cinput%0A        type=%22text%22%0A        value=%7Bemail%7D%0A        onChange=%7BonEmailChange%7D%0A       
  cla
@@ -1635,16 +1635,24 @@
 l_input%7D
+%0A       
  placeho
@@ -1674,16 +1674,22 @@
 r email%22
+%0A     
  /%3E%0A    
@@ -1720,17 +1720,53 @@
 .button%7D
-%3E
+ onClick=%7BonEmailSubmitted%7D%3E%0A        
 Subscrib
@@ -1778,16 +1778,23 @@
  updates
+%0A      
 %3C/button

Call `subscribe_email` endpoint on form submission