Have basic newsletter subscribe form working

packages/website/ts/components/forms/subscribe_form.tsx

@@ -0,0 +1,68 @@
+import { colors } from '@0xproject/react-shared';
+import * as React from 'react';
+
+import RaisedButton from 'material-ui/RaisedButton';
+import { backendClient } from 'ts/utils/backend_client';
+
+export interface SubscribeFormProps {}
+
+export enum SubscribeFormStatus {
+    None,
+    Error,
+    Success,
+    Loading,
+}
+
+export interface SubscribeFormState {
+    emailText: string;
+    status: SubscribeFormStatus;
+}
+
+export class SubscribeForm extends React.Component<SubscribeFormProps, SubscribeFormState> {
+    public state = {
+        emailText: '',
+        status: SubscribeFormStatus.None,
+    };
+    public render(): React.ReactNode {
+        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>
+        );
+    }
+    private _handleEmailInputChange(event: React.ChangeEvent<HTMLInputElement>): void {
+        this.setState({ emailText: event.target.value });
+    }
+    private async _handleSubscribeClickAsync(): Promise<void> {
+        this._setStatus(SubscribeFormStatus.Loading);
+        const success = await backendClient.subscribeToNewsletterAsync(this.state.emailText);
+        const status = success ? SubscribeFormStatus.Success : SubscribeFormStatus.Error;
+        this._setStatus(status);
+    }
+    private _setStatus(status: SubscribeFormStatus): void {
+        this.setState({ status });
+    }
+}

packages/website/ts/components/token_balances.tsx

@@ -77,11 +77,11 @@ interface TokenBalancesProps {
 
 interface TokenBalancesState {
     errorType: BalanceErrs;
+    trackedTokenStateByAddress: TokenStateByAddress;
     isBalanceSpinnerVisible: boolean;
     isZRXSpinnerVisible: boolean;
     isTokenPickerOpen: boolean;
     isAddingToken: boolean;
-    trackedTokenStateByAddress: TokenStateByAddress;
 }
 
 export class TokenBalances extends React.Component<TokenBalancesProps, TokenBalancesState> {

packages/website/ts/pages/landing/landing.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 import DocumentTitle = require('react-document-title');
 import { Link } from 'react-router-dom';
 import { Footer } from 'ts/components/footer';
+import { SubscribeForm } from 'ts/components/forms/subscribe_form';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types';
@@ -298,6 +299,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                         </a>
                                     </div>
                                 </div>
+                                <SubscribeForm />
                             </div>
                         </div>
                     </div>

packages/website/ts/utils/backend_client.ts

@@ -8,6 +8,7 @@ const ETH_GAS_STATION_ENDPOINT = '/eth_gas_station';
 const PRICES_ENDPOINT = '/prices';
 const RELAYERS_ENDPOINT = '/relayers';
 const WIKI_ENDPOINT = '/wiki';
+const SUBSCRIBE_SUBSTACK_NEWSLETTER_ENDPOINT = '/newsletter_subscriber/substack';
 
 export const backendClient = {
     async getGasInfoAsync(): Promise<WebsiteBackendGasInfo> {
@@ -33,4 +34,11 @@ export const backendClient = {
         const result = await fetchUtils.requestAsync(utils.getBackendBaseUrl(), WIKI_ENDPOINT);
         return result;
     },
+    async subscribeToNewsletterAsync(email: string): Promise<boolean> {
+        const result = await fetchUtils.postAsync(utils.getBackendBaseUrl(), SUBSCRIBE_SUBSTACK_NEWSLETTER_ENDPOINT, {
+            email,
+            referrer: window.location.href,
+        });
+        return result.status === 200;
+    },
 };

packages/website/ts/utils/fetch_utils.ts

@@ -20,6 +20,18 @@ export const fetchUtils = {
         const result = await response.json();
         return result;
     },
+
+    async postAsync(baseUrl: string, path: string, body: object): Promise<Response> {
+        const url = `${baseUrl}${path}`;
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+        });
+        return response;
+    },
 };
 
 function queryStringFromQueryParams(queryParams?: object): string {

packages/website/ts/utils/utils.ts

@@ -306,7 +306,8 @@ export const utils = {
         return parsedProviderName;
     },
     getBackendBaseUrl(): string {
-        return isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL;
+        return 'http://localhost:3000';
+        // return isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL;
     },
     isDevelopment(): boolean {
         return configs.ENVIRONMENT === Environments.DEVELOPMENT;