diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-06-02 08:25:50 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-06-02 08:25:50 +0800 |
commit | 073a96cf63a8b2e5639d15133d09545f7bde1388 (patch) | |
tree | 8c2250740101b6b26e3d48745e06bca46e59260d /packages/website/ts/components/forms/subscribe_form.tsx | |
parent | 817d9b0d3e1becdb2e8dbf51caa09edab8d14ab0 (diff) | |
download | dexon-sol-tools-073a96cf63a8b2e5639d15133d09545f7bde1388.tar dexon-sol-tools-073a96cf63a8b2e5639d15133d09545f7bde1388.tar.gz dexon-sol-tools-073a96cf63a8b2e5639d15133d09545f7bde1388.tar.bz2 dexon-sol-tools-073a96cf63a8b2e5639d15133d09545f7bde1388.tar.lz dexon-sol-tools-073a96cf63a8b2e5639d15133d09545f7bde1388.tar.xz dexon-sol-tools-073a96cf63a8b2e5639d15133d09545f7bde1388.tar.zst dexon-sol-tools-073a96cf63a8b2e5639d15133d09545f7bde1388.zip |
Implement subscription form
Diffstat (limited to 'packages/website/ts/components/forms/subscribe_form.tsx')
-rw-r--r-- | packages/website/ts/components/forms/subscribe_form.tsx | 121 |
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); } } |