1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { Button } from 'ts/components/ui/button';
import { Container } from 'ts/components/ui/container';
import { Input } from 'ts/components/ui/input';
import { Text } from 'ts/components/ui/text';
import { analytics } from 'ts/utils/analytics';
import { backendClient } from 'ts/utils/backend_client';
export interface SubscribeFormProps {}
export enum SubscribeFormStatus {
None,
Error,
Success,
Loading,
Other,
}
export interface SubscribeFormState {
emailText: string;
lastSubmittedEmail: string;
status: SubscribeFormStatus;
}
const FORM_FONT_SIZE = '15px';
// TODO: Translate visible strings. https://app.asana.com/0/628666249318202/697485674422001
export class SubscribeForm extends React.Component<SubscribeFormProps, SubscribeFormState> {
public state = {
emailText: '',
lastSubmittedEmail: '',
status: SubscribeFormStatus.None,
};
public render(): React.ReactNode {
return (
<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={FORM_FONT_SIZE}
backgroundColor={colors.projectsGrey}
width="300px"
onChange={this._handleEmailInputChange.bind(this)}
/>
</Container>
<Container marginLeft="15px" marginTop="15px">
<Button
type="submit"
backgroundColor={colors.darkestGrey}
fontColor={colors.white}
fontSize={FORM_FONT_SIZE}
>
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;
default:
throw new Error(
'The SubscribeFormStatus switch statement is not exhaustive when choosing an error message.',
);
}
return (
<Container isHidden={!message} marginTop="30px">
<Text center={true} fontFamily="Roboto Mono" fontColor={colors.grey}>
{message || 'spacer text (never shown to user)'}
</Text>
</Container>
);
}
private _handleEmailInputChange(event: React.ChangeEvent<HTMLInputElement>): void {
this.setState({ emailText: event.target.value });
}
private async _handleFormSubmitAsync(event: React.FormEvent<HTMLInputElement>): Promise<void> {
event.preventDefault();
if (_.isUndefined(this.state.emailText) || _.isEmpty(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;
if (status === SubscribeFormStatus.Success) {
// tslint:disable-next-line:no-floating-promises
analytics.indentifyAsync(this.state.emailText, 'email');
}
this.setState({ status, emailText: '' });
} catch (error) {
this._setStatus(SubscribeFormStatus.Error);
}
}
private _setStatus(status: SubscribeFormStatus): void {
this.setState({ status });
}
}
|
