initial chnages

Author: kkartunov

src/shared/components/Contentful/AppComponent/index.jsx

@@ -10,6 +10,8 @@ import React from 'react';
 import { errors } from 'topcoder-react-lib';
 import Leaderboard from 'containers/tco/Leaderboard';
 import RecruitCRMJobs from 'containers/Gigs/RecruitCRMJobs';
+import EmailSubscribeForm from 'containers/EmailSubscribeForm';
+
 
 const { fireErrorMessage } = errors;
 
@@ -34,6 +36,9 @@ export function AppComponentSwitch(appComponent) {
   if (appComponent.fields.type === 'RecruitCRM-Jobs') {
     return <RecruitCRMJobs {...appComponent.fields.props} key={appComponent.sys.id} />;
   }
+  if (appComponent.fields.type === 'EmailSubscribeForm') {
+    return <EmailSubscribeForm {...appComponent.fields.props} key={appComponent.sys.id} />;
+  }
   fireErrorMessage('Unsupported app component type from contentful', '');
   return null;
 }

src/shared/containers/EmailSubscribeForm/index.jsx

@@ -0,0 +1,108 @@
+/**
+ * Genetic subscribe for MailChimp tags component
+ */
+import React from 'react';
+import PT from 'prop-types';
+import { isValidEmail } from 'utils/tc';
+import defaulTheme from './style.scss';
+
+/* Holds the base URL of Community App endpoints that proxy HTTP request to
+ * mailchimp APIs. */
+const PROXY_ENDPOINT = '/api/mailchimp';
+
+class SubscribeMailChimpTagContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: '',
+      subsribed: false,
+      disabled: true,
+      inputVal: '',
+    };
+    this.onSubscribeClick = this.onSubscribeClick.bind(this);
+    this.onInputChange = this.onInputChange.bind(this);
+  }
+
+  onSubscribeClick() {
+    const { inputVal } = this.state;
+    const { listId, tags } = this.props;
+    const fetchUrl = `${PROXY_ENDPOINT}/${listId}/members/${inputVal}/tags`;
+    const data = {
+      email_address: inputVal,
+      status: 'subscribed',
+      tags: tags.map(t => ({ name: t, status: 'active' })),
+    };
+    const formData = JSON.stringify(data);
+    fetch(fetchUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: formData,
+    }).then(result => result.json()).then((dataResponse) => {
+      if (dataResponse.status === 204) {
+        // regist success
+        return this.setState({
+          subsribed: true,
+          error: '',
+        });
+      }
+      if (dataResponse.status === 404) {
+        // new email register it for list and add tags
+        return fetch(`${PROXY_ENDPOINT}/${listId}/members`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            email_address: inputVal,
+            status: 'subscribed',
+            tags,
+          }),
+        })
+          .then(result => result.json()).then(() => {
+            this.setState({
+              subsribed: true,
+              error: '',
+            });
+          });
+      }
+      return this.setState({
+        subsribed: false,
+        error: `Error ${dataResponse.status} when assign to tags`,
+      });
+    })
+      .catch((e) => {
+        this.setState({
+          subsribed: false,
+          error: e.message,
+        });
+      });
+  }
+
+  onInputChange(event) {
+    this.setState({
+      inputVal: event.target.value,
+      disabled: !isValidEmail(event.target.value),
+    });
+  }
+
+  render() {
+    const {
+      disabled, inputVal, error, subsribed,
+    } = this.state;
+    return (
+      <div className={defaulTheme.wrapper}>
+        <input type="email" placeholder="Email" value={inputVal} onChange={this.onInputChange} />
+        <button type="button" onClick={this.onSubscribeClick} disabled={disabled} className={defaulTheme.button}>Subscribe</button>
+      </div>
+    );
+  }
+}
+
+SubscribeMailChimpTagContainer.propTypes = {
+  listId: PT.string.isRequired,
+  tags: PT.arrayOf(PT.string).isRequired,
+};
+
+export default SubscribeMailChimpTagContainer;