Skip to content

Commit 4ff78cf

Browse files
kkartunovkkartunov
committed
Subscribe form app component
1 parent 7212bf2 commit 4ff78cf

File tree

2 files changed

+268
-57
lines changed

2 files changed

+268
-57
lines changed

‎src/shared/containers/EmailSubscribeForm/index.jsx

Lines changed: 170 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
import React from 'react';
55
import PT from 'prop-types';
66
import { isValidEmail } from 'utils/tc';
7+
import TextInput from 'components/GUIKit/TextInput';
8+
import _ from 'lodash';
9+
import LoadingIndicator from 'components/LoadingIndicator';
10+
import { Link } from 'topcoder-react-utils';
711
import defaulTheme from './style.scss';
812

913
/* Holds the base URL of Community App endpoints that proxy HTTP request to
@@ -14,95 +18,204 @@ class SubscribeMailChimpTagContainer extends React.Component {
1418
constructor(props) {
1519
super(props);
1620
this.state = {
17-
error: '',
18-
subsribed: false,
19-
disabled: true,
20-
inputVal: '',
21+
formErrors: {},
22+
formData: {},
2123
};
2224
this.onSubscribeClick = this.onSubscribeClick.bind(this);
23-
this.onInputChange = this.onInputChange.bind(this);
25+
this.onFormInputChange = this.onFormInputChange.bind(this);
26+
this.validateForm = this.validateForm.bind(this);
2427
}
2528

2629
onSubscribeClick() {
27-
const { inputVal } = this.state;
28-
const { listId, tags } = this.props;
29-
const fetchUrl = `${PROXY_ENDPOINT}/${listId}/members/${inputVal}/tags`;
30-
const data = {
31-
email_address: inputVal,
32-
status: 'subscribed',
33-
tags: tags.map(t => ({ name: t, status: 'active' })),
34-
};
35-
const formData = JSON.stringify(data);
36-
fetch(fetchUrl, {
37-
method: 'POST',
38-
headers: {
39-
'Content-Type': 'application/json',
40-
},
41-
body: formData,
42-
}).then(result => result.json()).then((dataResponse) => {
43-
if (dataResponse.status === 204) {
44-
// regist success
45-
return this.setState({
46-
subsribed: true,
47-
error: '',
48-
});
49-
}
50-
if (dataResponse.status === 404) {
51-
// new email register it for list and add tags
52-
return fetch(`${PROXY_ENDPOINT}/${listId}/members`, {
30+
this.validateForm();
31+
// eslint-disable-next-line consistent-return
32+
this.setState((state) => {
33+
const { formData, formErrors } = state;
34+
if (_.isEmpty(formErrors)) {
35+
const { listId, tags } = this.props;
36+
const fetchUrl = `${PROXY_ENDPOINT}/${listId}/members/${formData.email}/tags`;
37+
const data = {
38+
email_address: formData.email,
39+
status: 'subscribed',
40+
tags: tags.map(t => ({ name: t, status: 'active' })),
41+
merge_fields: {
42+
FNAME: formData.fname,
43+
LNAME: formData.lname,
44+
},
45+
};
46+
fetch(fetchUrl, {
5347
method: 'POST',
5448
headers: {
5549
'Content-Type': 'application/json',
5650
},
57-
body: JSON.stringify({
58-
email_address: inputVal,
59-
status: 'subscribed',
60-
tags,
61-
}),
62-
})
63-
.then(result => result.json()).then(() => {
64-
this.setState({
51+
body: JSON.stringify(data),
52+
}).then(result => result.json()).then((dataResponse) => {
53+
if (dataResponse.status === 204) {
54+
// regist success
55+
return this.setState({
56+
subscribing: false,
6557
subsribed: true,
6658
error: '',
6759
});
60+
}
61+
if (dataResponse.status === 404) {
62+
// new email register it for list and add tags
63+
data.tags = tags;
64+
return fetch(`${PROXY_ENDPOINT}/${listId}/members`, {
65+
method: 'POST',
66+
headers: {
67+
'Content-Type': 'application/json',
68+
},
69+
body: JSON.stringify(data),
70+
})
71+
.then(result => result.json()).then((rsp) => {
72+
this.setState({
73+
subscribing: false,
74+
subsribed: !rsp.detail,
75+
error: rsp.detail ? rsp.title : '',
76+
});
77+
});
78+
}
79+
return this.setState({
80+
subscribing: false,
81+
subsribed: false,
82+
error: `Error ${dataResponse.status} when assigning tags to ${formData.email}`,
83+
});
84+
})
85+
.catch((e) => {
86+
this.setState({
87+
subscribing: false,
88+
subsribed: false,
89+
error: e.message,
90+
});
6891
});
92+
return { subscribing: true };
6993
}
70-
return this.setState({
71-
subsribed: false,
72-
error: `Error ${dataResponse.status} when assign to tags`,
73-
});
74-
})
75-
.catch((e) => {
76-
this.setState({
77-
subsribed: false,
78-
error: e.message,
79-
});
80-
});
94+
});
95+
}
96+
97+
onFormInputChange(key, val) {
98+
this.setState((state) => {
99+
const { formData } = state;
100+
formData[key] = val;
101+
return {
102+
...state,
103+
formData,
104+
};
105+
});
106+
this.validateForm(key);
81107
}
82108

83-
onInputChange(event) {
84-
this.setState({
85-
inputVal: event.target.value,
86-
disabled: !isValidEmail(event.target.value),
109+
validateForm(key) {
110+
this.setState((state) => {
111+
const { formData, formErrors } = state;
112+
if (key) {
113+
// validate only the key
114+
if (!formData[key] || !_.trim(formData[key])) formErrors[key] = 'Required field';
115+
else if (key === 'email' && !(isValidEmail(formData.email))) formErrors.email = 'Invalid email';
116+
else delete formErrors[key];
117+
} else {
118+
_.each(['fname', 'lname', 'email'], (rkey) => {
119+
if (!formData[rkey] || !_.trim(formData[rkey])) formErrors[rkey] = 'Required field';
120+
else if (rkey === 'email' && !(isValidEmail(formData.email))) formErrors.email = 'Invalid email';
121+
else delete formErrors[key];
122+
});
123+
}
124+
// updated state
125+
return {
126+
...state,
127+
formErrors,
128+
};
87129
});
88130
}
89131

90132
render() {
91133
const {
92-
disabled, inputVal, error, subsribed,
134+
formData, formErrors, subscribing, subsribed, error,
93135
} = this.state;
136+
const {
137+
btnText, title, successTitle, successText, successLink, successLinkText,
138+
} = this.props;
94139
return (
95140
<div className={defaulTheme.wrapper}>
96-
<input type="email" placeholder="Email" value={inputVal} onChange={this.onInputChange} />
97-
<button type="button" onClick={this.onSubscribeClick} disabled={disabled} className={defaulTheme.button}>Subscribe</button>
141+
{
142+
subscribing ? (
143+
<div className={defaulTheme.loadingWrap}>
144+
<LoadingIndicator />
145+
<p className={defaulTheme.loadingText}>
146+
Processing your subscription...
147+
</p>
148+
</div>
149+
) : null
150+
}
151+
{
152+
subsribed || error ? (
153+
<div className={defaulTheme.subscribedWrap}>
154+
<h4>{error ? 'OOPS!' : successTitle}</h4>
155+
<p className={error ? defaulTheme.errorMsg : null}>{error || successText}</p>
156+
{
157+
error
158+
? <button type="button" onClick={() => { window.location.reload(); }} className={defaulTheme.button}>TRY AGAIN</button>
159+
: <Link to={successLink} className={defaulTheme.button}>{successLinkText}</Link>
160+
}
161+
</div>
162+
) : null
163+
}
164+
{
165+
!subscribing && !subsribed && !error ? (
166+
<React.Fragment>
167+
<h6>{title}</h6>
168+
<TextInput
169+
placeholder="First Name"
170+
label="First Name"
171+
onChange={val => this.onFormInputChange('fname', val)}
172+
errorMsg={formErrors.fname}
173+
value={formData.fname}
174+
required
175+
/>
176+
<TextInput
177+
placeholder="Last Name"
178+
label="Last Name"
179+
onChange={val => this.onFormInputChange('lname', val)}
180+
errorMsg={formErrors.lname}
181+
value={formData.lname}
182+
required
183+
/>
184+
<TextInput
185+
placeholder="Email Address"
186+
label="Email Address"
187+
onChange={val => this.onFormInputChange('email', val)}
188+
errorMsg={formErrors.email}
189+
value={formData.email}
190+
required
191+
/>
192+
<button type="button" onClick={this.onSubscribeClick} disabled={!_.isEmpty(formErrors) || subscribing} className={defaulTheme.button}>{btnText}</button>
193+
</React.Fragment>
194+
) : null
195+
}
98196
</div>
99197
);
100198
}
101199
}
102200

201+
SubscribeMailChimpTagContainer.defaultProps = {
202+
title: '',
203+
btnText: '',
204+
successTitle: 'Success!',
205+
successText: '',
206+
successLink: '',
207+
successLinkText: '',
208+
};
209+
103210
SubscribeMailChimpTagContainer.propTypes = {
104211
listId: PT.string.isRequired,
105212
tags: PT.arrayOf(PT.string).isRequired,
213+
title: PT.string,
214+
btnText: PT.string,
215+
successTitle: PT.string,
216+
successText: PT.string,
217+
successLink: PT.string,
218+
successLinkText: PT.string,
106219
};
107220

108221
export default SubscribeMailChimpTagContainer;

‎src/shared/containers/EmailSubscribeForm/style.scss

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
@import "~components/Contentful/default";
2+
3+
.loadingWrap {
4+
margin: 0;
5+
padding: 0 34px;
6+
7+
@include gui-kit-headers;
8+
@include gui-kit-content;
9+
@include roboto-regular;
10+
11+
.loadingText {
12+
font-family: Roboto, sans-serif;
13+
color: #2a2a2a;
14+
text-align: center;
15+
margin-top: 26px;
16+
}
17+
}
18+
19+
.subscribedWrap {
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
padding: 0 34px;
24+
25+
@include gui-kit-headers;
26+
@include gui-kit-content;
27+
@include roboto-regular;
28+
29+
> h4 {
30+
margin-bottom: 16px !important;
31+
}
32+
33+
> p {
34+
font-size: 24px !important;
35+
line-height: 36px !important;
36+
text-align: center;
37+
38+
&.errorMsg {
39+
color: #ef476f;
40+
}
41+
}
42+
}
43+
44+
.wrapper {
45+
display: flex;
46+
flex-direction: column;
47+
color: #2a2a2a;
48+
49+
@include gui-kit-headers;
50+
@include gui-kit-content;
51+
@include roboto-regular;
52+
53+
h6 {
54+
margin-top: 41px;
55+
56+
@include xs-to-sm {
57+
margin-top: 0;
58+
}
59+
}
60+
61+
> div {
62+
margin-bottom: 8px;
63+
}
64+
65+
.button {
66+
background-color: #137d60;
67+
border-radius: 20px;
68+
color: #fff !important;
69+
font-size: 14px;
70+
font-weight: bolder;
71+
text-decoration: none;
72+
text-transform: uppercase;
73+
line-height: 40px;
74+
padding: 0 20px;
75+
border: none;
76+
outline: none;
77+
margin-top: 13px;
78+
margin-bottom: 41px;
79+
max-width: 150px;
80+
81+
&:hover {
82+
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
83+
background-color: #0ab88a;
84+
}
85+
86+
@include xs-to-sm {
87+
margin-bottom: 20px;
88+
}
89+
90+
&:disabled {
91+
background-color: #e9e9e9 !important;
92+
border: none !important;
93+
text-decoration: none !important;
94+
color: #fafafb !important;
95+
box-shadow: none !important;
96+
}
97+
}
98+
}

0 commit comments

Comments
 (0)