Implement subscription form

1 files changed, 87 insertions, 34 deletions

diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx
index 3a6d0901f..99686efce 100644
--- a/packages/website/ts/components/forms/subscribe_form.tsx
+++ b/packages/website/ts/components/forms/subscribe_form.tsx
@@ -1,7 +1,12 @@
 import { colors } from '@0xproject/react-shared';
 import * as React from 'react';
 
-import RaisedButton from 'material-ui/RaisedButton';
+import { Button } from 'ts/components/ui/button';
+import { Input } from 'ts/components/ui/input';
+import { Text } from 'ts/components/ui/text';
+import { logUtils } from '@0xproject/utils';
+import { Container } from 'ts/components/ui/container';
+import { styled } from 'ts/style/theme';
 import { backendClient } from 'ts/utils/backend_client';
 
 export interface SubscribeFormProps {}
@@ -15,54 +20,102 @@ export enum SubscribeFormStatus {
 
 export interface SubscribeFormState {
     emailText: string;
+    lastSubmittedEmail: string;
     status: SubscribeFormStatus;
 }
 
 export class SubscribeForm extends React.Component<SubscribeFormProps, SubscribeFormState> {
     public state = {
         emailText: '',
+        lastSubmittedEmail: '',
         status: SubscribeFormStatus.None,
     };
     public render(): React.ReactNode {
+        const formFontSize = '15px';
         return (
-            <div>
-                Subscribe to our newsletter for 0x relayer and dApp updates
-                <div>
-                    <input value={this.state.emailText} onChange={this._handleEmailInputChange.bind(this)} />
-                    <RaisedButton
-                        labelStyle={{
-                            textTransform: 'none',
-                            fontSize: 15,
-                            fontWeight: 400,
-                        }}
-                        buttonStyle={{
-                            borderRadius: 6,
-                        }}
-                        style={{
-                            boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.25)',
-                            borderRadius: 6,
-                            height: 48,
-                            width: 120,
-                        }}
-                        labelColor="white"
-                        backgroundColor="#252525"
-                        onClick={this._handleSubscribeClickAsync.bind(this)}
-                        label="Subscribe"
-                    />
-                </div>
-            </div>
+            <Container className="flex flex-column items-center justify-between md-mx2 sm-mx2">
+                <Container marginBottom="15px">
+                    <Text fontFamily="Roboto Mono" fontColor={colors.grey} center={true}>
+                        Subscribe to our newsletter for 0x relayer and dApp updates
+                    </Text>
+                </Container>
+                <form onSubmit={this._handleFormSubmitAsync.bind(this)}>
+                    <Container className="flex flex-wrap justify-center items-center">
+                        <Container marginTop="15px">
+                            <Input
+                                placeholder="you@email.com"
+                                value={this.state.emailText}
+                                fontColor={colors.white}
+                                fontSize={formFontSize}
+                                backgroundColor="#343333"
+                                width="275px"
+                                onChange={this._handleEmailInputChange.bind(this)}
+                            />
+                        </Container>
+                        <Container marginLeft="15px" marginTop="15px">
+                            <Button
+                                type="submit"
+                                backgroundColor="#252525"
+                                fontColor={colors.white}
+                                fontSize={formFontSize}
+                            >
+                                Subscribe
+                            </Button>
+                        </Container>
+                    </Container>
+                </form>
+                {this._renderMessage()}
+            </Container>
         );
     }
+    private _renderMessage(): React.ReactNode {
+        let message = null;
+        switch (this.state.status) {
+            case SubscribeFormStatus.Error:
+                message = 'Sorry, something went wrong. Try again later.';
+                break;
+            case SubscribeFormStatus.Loading:
+                message = 'One second...';
+                break;
+            case SubscribeFormStatus.Success:
+                message = `Thanks! ${this.state.lastSubmittedEmail} is now on the mailing list.`;
+                break;
+            case SubscribeFormStatus.None:
+                break;
+        }
+        return (
+            <Container isHidden={!message} marginTop="30px">
+                <Text center={true} fontFamily="Roboto Mono" fontColor={colors.grey}>
+                    {message || 'spacer text'}
+                </Text>
+            </Container>
+        );
+    }
+
     private _handleEmailInputChange(event: React.ChangeEvent<HTMLInputElement>): void {
         this.setState({ emailText: event.target.value });
     }
-    private async _handleSubscribeClickAsync(): Promise<void> {
-        this._setStatus(SubscribeFormStatus.Loading);
-        const isSuccess = await backendClient.subscribeToNewsletterAsync(this.state.emailText);
-        const status = isSuccess ? SubscribeFormStatus.Success : SubscribeFormStatus.Error;
-        this._setStatus(status);
+    private async _handleFormSubmitAsync(event: React.FormEvent<HTMLInputElement>): Promise<void> {
+        event.preventDefault();
+        if (!this.state.emailText) {
+            return;
+        }
+        this.setState({
+            status: SubscribeFormStatus.Loading,
+            lastSubmittedEmail: this.state.emailText,
+        });
+        try {
+            const response = await backendClient.subscribeToNewsletterAsync(this.state.emailText);
+            const status = response.status === 200 ? SubscribeFormStatus.Success : SubscribeFormStatus.Error;
+            this._setStatus(status);
+        } catch (error) {
+            logUtils.log(error);
+            this._setStatus(SubscribeFormStatus.Error);
+        } finally {
+            this.setState({ emailText: '' });
+        }
     }
-    private _setStatus(status: SubscribeFormStatus): void {
-        this.setState({ status });
+    private _setStatus(status: SubscribeFormStatus, then?: () => void): void {
+        this.setState({ status }, then);
     }
 }