Merge pull request #5363 from topcoder-platform/email-pref-revamp-develop

Email pref revamp develop

Author: luizrrodrigues

.circleci/config.yml

@@ -282,7 +282,7 @@ workflows:
           filters:
             branches:
               only:                
-                - gsheet-contentful-develop
+                - free
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global      
@@ -303,7 +303,7 @@ workflows:
           filters:
             branches:
               only:
-                - develop
+                - email-pref-revamp-develop
       - "approve-smoke-test-on-staging":
           type: approval
           requires:

__tests__/shared/components/Settings/Preferences/Email/__snapshots__/index.jsx.snap

@@ -10,69 +10,48 @@ exports[`renders email preferences setting page correctly 1`] = `
     E-Mail Preferences
   </h1>
   <div
-    className="src-shared-components-Settings-Preferences-Email-___styles__sub-title___2Fh1W"
+    className="src-shared-components-Settings-Preferences-Email-___styles__unsubscribed-msg___3yh6s"
   >
-    Your preferences
-  </div>
-  <div
-    className="src-shared-components-Settings-Preferences-Email-___styles__preferences-container___38AVF"
-  >
-    <ToggleableItem
-      checked={false}
-      id="Pipeline"
-      onToggle={[Function]}
-      primaryText="Challenge Pipeline"
-      secondaryText="Subscribe to this newsletter if you want to get updates on the types of challenges coming up in the future. To view these challenges at your leisure you can always visit the <a href=\\"https://www.topcoder.com/community/pipeline\\" style=\\"color:#0d61bf;text-decoration:underline\\">Challenge Pipeline</a> page."
-      value="Pipeline"
-    />
-    <ToggleableItem
-      checked={false}
-      id="Gig Work"
-      onToggle={[Function]}
-      primaryText="Gig Work"
-      secondaryText="This newsletter gets sent out at various times, specifically when we have an opportunity of mass appeal. For more information you can visit the <a href=\\"https://www.topcoder.com/community/taas\\" style=\\"color:#0d61bf;text-decoration:underline\\">Gig Work</a> page."
-      value="Gig Work"
-    />
-    <ToggleableItem
-      checked={false}
-      id="Monthly Newsletter"
-      onToggle={[Function]}
-      primaryText="Monthly Newsletter"
-      secondaryText="This newsletter gets sent out at the end of every month and contains a variety of important information across all of our tracks."
-      value="Monthly Newsletter"
-    />
-    <ToggleableItem
-      checked={false}
-      id="Marathon Match Reminders"
-      onToggle={[Function]}
-      primaryText="Marathon Match Reminders"
-      secondaryText="Receive updates whenever a new marathon match is scheduled."
-      value="Marathon Match Reminders"
-    />
-    <ToggleableItem
-      checked={false}
-      id="Single Round Match Reminders"
-      onToggle={[Function]}
-      primaryText="Single Round Match (SRM) Reminders"
-      secondaryText="Attention Competitive Programmers! If there is any newsletter you are subscribing too, it better be this one. Receive updates when a new SRM event is scheduled."
-      value="Single Round Match Reminders"
-    />
-    <ToggleableItem
-      checked={false}
-      id="TCO Tuesdays"
-      onToggle={[Function]}
-      primaryText="TCO Newsletter"
-      secondaryText="For all the latest updates surrounding the <a href=\\"https://www.topcoder.com/community/member-programs/topcoder-open\\" style=\\"color:#0d61bf;text-decoration:underline\\">Topcoder Open</a> you should definitely be subscribing to this one. Expect an update in your mailbox every Tuesday!"
-      value="TCO Tuesdays"
-    />
-    <ToggleableItem
-      checked={false}
-      id="RDM"
-      onToggle={[Function]}
-      primaryText="Rapid Development Match (RDM) Reminders"
-      secondaryText="Receive notifications of our brand new RDMs! These rated, development matches will be a fun new way to engage with us!"
-      value="RDM"
-    />
+    <h3>
+      You are not subscribed to receive Topcoder emails
+    </h3>
+    <p>
+      If this was a mistake or if you would like to resubscribe, please click the button below.
+    </p>
+    <form
+      action="https://topcoder.us13.list-manage.com/subscribe/post?u=65bd5a1857b73643aad556093&id=28bfd3c062"
+      id="mc-embedded-subscribe-form"
+      method="post"
+      name="mc-embedded-subscribe-form"
+      noValidate={true}
+    >
+      <input
+        id="mce-EMAIL"
+        name="EMAIL"
+        readOnly={true}
+        type="email"
+        value="test@test.com"
+      />
+      <input
+        id="gdpr_11101"
+        name="gdpr[11101]"
+        type="checkbox"
+        value="Y"
+      />
+      <input
+        name="b_65bd5a1857b73643aad556093_28bfd3c062"
+        tabIndex="-1"
+        type="text"
+        value=""
+      />
+      <input
+        className="submit-button"
+        id="mc-embedded-subscribe"
+        name="subscribe"
+        type="submit"
+        value="Subscribe"
+      />
+    </form>
   </div>
 </div>
 `;

package-lock.json

@@ -20,7 +20,7 @@ routes.post('/:listId/members', (req, res, next) => new MailchimpService().doReg
 
 routes.get('/:listId/members/:emailHash', (req, res) => new MailchimpService().checkSubscription(req).then(res.send.bind(res)));
 
-routes.put('/:listId/members/:emailHash', (req, res) => new MailchimpService().subscribeInterests(req).then(res.send.bind(res)));
+routes.put('/:listId/members/:emailHash', (req, res) => new MailchimpService().updateMember(req).then(res.send.bind(res)));
 
 routes.post('/:listId/members/:emailHash/tags', (req, res) => new MailchimpService().subscribeTags(req).then(res.send.bind(res)));
 

src/server/routes/mailchimp.js

@@ -51,7 +51,7 @@ export default class MailchimpService {
     return res.json();
   }
 
-  async subscribeInterests(req) {
+  async updateMember(req) {
     const formData = JSON.stringify(req.body);
     const res = await fetch(`${this.mailchimpBaseUrl}/lists/${req.params.listId}/members/${req.params.emailHash}`, {
       method: 'PUT',

src/server/services/mailchimp.js

@@ -35,7 +35,8 @@ async function fetchDataDone(emailHash, listId = config.NEWSLETTER_SIGNUP.DEFAUL
 
     return {
       email: emailHash,
-      preferences: subs.tags,
+      preferences: subs.interests,
+      status: subs.status,
       error,
     };
   } catch (error) {
@@ -48,26 +49,24 @@ async function fetchDataDone(emailHash, listId = config.NEWSLETTER_SIGNUP.DEFAUL
 
 // Updates member newsletter subscription
 async function updateSubscriptionsDone(
-  emailHash, tagId, status, listId = config.NEWSLETTER_SIGNUP.DEFAUL_LIST_ID,
+  emailHash, groupId, status, listId = config.NEWSLETTER_SIGNUP.DEFAUL_LIST_ID,
 ) {
   /* NOTE: In the real life in most cases you don't want to use fetch() directly
    * in an action. You want to create a service for your calls and use it here.
    * However, in this example, to keep it a bit more compact, we use fetch()
    * directly here. */
   try {
     let error = false;
-    const fetchUrl = `${PROXY_ENDPOINT}/${listId}/members/${emailHash}/tags`;
+    const fetchUrl = `${PROXY_ENDPOINT}/${listId}/members/${emailHash}`;
 
     const data = {
-      tags: [
-        { name: tagId, status: status ? 'active' : 'inactive' },
-      ],
+      interests: { [groupId]: !!status },
     };
 
     const formData = JSON.stringify(data);
     // use proxy for avoid 'Access-Control-Allow-Origin' bug
     await fetch(fetchUrl, {
-      method: 'POST',
+      method: 'PUT',
       headers: {
         'Content-Type': 'application/json',
       },
@@ -79,14 +78,14 @@ async function updateSubscriptionsDone(
       });
 
     return {
-      id: tagId,
+      id: groupId,
       checked: status,
       email: emailHash,
       error,
     };
   } catch (error) {
     return {
-      id: tagId,
+      id: groupId,
       checked: status,
       email: emailHash,
       error,

src/shared/actions/newsletterPreferences.js

@@ -33,5 +33,9 @@
 
   button {
     margin: 24px 12px 0;
+
+    &:first-child {
+      margin-right: 12px !important;
+    }
   }
 }

src/shared/components/NewsletterSignupForMembers/ConfirmModal/style.scss

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /**
  * Email Preferences component.
  */
@@ -26,41 +27,48 @@ const SAVE_DELAY = 1000;
 
 const newsletters = [
   {
-    id: 'Pipeline',
+    id: '9f950b43a1',
     name: 'Challenge Pipeline',
     desc: 'Subscribe to this newsletter if you want to get updates on the types of challenges coming up in the future. To view these challenges at your leisure you can always visit the <a href="https://www.topcoder.com/community/pipeline" style="color:#0d61bf;text-decoration:underline">Challenge Pipeline</a> page.',
   },
   {
-    id: 'Gig Work',
+    id: 'd0c48e9da3',
     name: 'Gig Work',
     desc: 'This newsletter gets sent out at various times, specifically when we have an opportunity of mass appeal. For more information you can visit the <a href="https://www.topcoder.com/community/taas" style="color:#0d61bf;text-decoration:underline">Gig Work</a> page.',
   },
   {
-    id: 'Monthly Newsletter',
+    id: 'a8f858cdf1',
     name: 'Monthly Newsletter',
     desc: 'This newsletter gets sent out at the end of every month and contains a variety of important information across all of our tracks.',
   },
   {
-    id: 'Marathon Match Reminders',
+    id: '5e67dba327',
     name: 'Marathon Match Reminders',
     desc: 'Receive updates whenever a new marathon match is scheduled.',
   },
   {
-    id: 'Single Round Match Reminders',
+    id: '9091b438cc',
     name: 'Single Round Match (SRM) Reminders',
     desc: 'Attention Competitive Programmers! If there is any newsletter you are subscribing too, it better be this one. Receive updates when a new SRM event is scheduled.',
   },
   {
-    id: 'TCO Tuesdays',
+    id: '603c900c32',
     name: 'TCO Newsletter',
     desc: 'For all the latest updates surrounding the <a href="https://www.topcoder.com/community/member-programs/topcoder-open" style="color:#0d61bf;text-decoration:underline">Topcoder Open</a> you should definitely be subscribing to this one. Expect an update in your mailbox every Tuesday!',
   },
   {
-    id: 'RDM',
+    id: '3460574ddd',
     name: 'Rapid Development Match (RDM) Reminders',
     desc: 'Receive notifications of our brand new RDMs! These rated, development matches will be a fun new way to engage with us!',
   },
 ];
+const programs = [
+  {
+    id: 'cafe98d7a7',
+    name: 'Beta Testers',
+    desc: 'If you have applied and been approved as a <a href="https://www.topcoder.com/community/member-programs/beta-testers" style="color:#0d61bf;text-decoration:underline">Beta Tester</a>, you may control the emails you receive here.',
+  },
+];
 
 export default class EmailPreferences extends React.Component {
   saveEmailPreferences = debounce((id, checked) => {
@@ -72,6 +80,7 @@ export default class EmailPreferences extends React.Component {
     super(props);
     this.state = {
       emailPreferences: { ...props.preferences },
+      status: props.status,
     };
     this.onChange = this.onChange.bind(this);
   }
@@ -82,14 +91,14 @@ export default class EmailPreferences extends React.Component {
       if (updated.error) {
         toastrError('Error! ', 'Failed to update Your email preferences :-(');
       }
-      const { emailPreferences } = this.state;
+      const { emailPreferences, status } = this.state;
       const { id, checked } = updated;
-      if (!emailPreferences[id]) emailPreferences[id] = { id, checked };
-      else emailPreferences[id].checked = checked;
+      emailPreferences[id] = checked;
 
       // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
         emailPreferences,
+        status: updated.resubscribe ? 'subscribed' : status,
       });
       toastrSuccess('Success! ', 'Your email preferences were updated.');
     }
@@ -101,46 +110,84 @@ export default class EmailPreferences extends React.Component {
   }
 
   render() {
-    const { emailPreferences } = this.state;
+    const { emailPreferences, status } = this.state;
+    const { email } = this.props;
     return (
       <div styleName="EmailPreferences">
         <h1 styleName="title">
           E-Mail Preferences
         </h1>
-        <div styleName="sub-title">
-          Your preferences
-        </div>
-        <div styleName="preferences-container">
-          {
-            map(newsletters, (newsletter) => {
-              const checked = emailPreferences[newsletter.id]
-                ? emailPreferences[newsletter.id].checked : false;
-              return (
-                <ToggleableItem
-                  key={newsletter.id}
-                  id={newsletter.id}
-                  value={newsletter.id}
-                  checked={checked}
-                  primaryText={newsletter.name}
-                  secondaryText={newsletter.desc}
-                  onToggle={e => this.onChange(newsletter.id, e.target.checked)}
-                />
-              );
-            })
-          }
-        </div>
+        {
+          status !== 'subscribed' ? (
+            <div styleName="unsubscribed-msg">
+              <h3>You are not subscribed to receive Topcoder emails</h3>
+              <p>If this was a mistake or if you would like to resubscribe, please click the button below.</p>
+              <form action="https://topcoder.us13.list-manage.com/subscribe/post?u=65bd5a1857b73643aad556093&amp;id=28bfd3c062" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" noValidate>
+                <input type="email" value={email} readOnly name="EMAIL" id="mce-EMAIL" />
+                <input type="checkbox" id="gdpr_11101" name="gdpr[11101]" value="Y" />
+                <input type="text" name="b_65bd5a1857b73643aad556093_28bfd3c062" tabIndex="-1" value="" />
+                <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" className="submit-button" />
+              </form>
+            </div>
+          ) : (
+            <React.Fragment>
+              <div styleName="sub-title">Newsletters</div>
+              <div styleName="preferences-container">
+                {
+                  map(newsletters, (newsletter) => {
+                    const checked = emailPreferences[newsletter.id];
+                    return (
+                      <ToggleableItem
+                        key={newsletter.id}
+                        id={newsletter.id}
+                        value={newsletter.id}
+                        checked={checked}
+                        primaryText={newsletter.name}
+                        secondaryText={newsletter.desc}
+                        onToggle={e => this.onChange(newsletter.id, e.target.checked)}
+                        disabled={status !== 'subscribed'}
+                      />
+                    );
+                  })
+                }
+              </div>
+              <div styleName="sub-title-2">Programs</div>
+              <div styleName="preferences-container">
+                {
+                  map(programs, (program) => {
+                    const checked = emailPreferences[program.id];
+                    return (
+                      <ToggleableItem
+                        key={program.id}
+                        id={program.id}
+                        value={program.id}
+                        checked={checked}
+                        primaryText={program.name}
+                        secondaryText={program.desc}
+                        onToggle={e => this.onChange(program.id, e.target.checked)}
+                        disabled={status !== 'subscribed'}
+                      />
+                    );
+                  })
+                }
+              </div>
+            </React.Fragment>
+          )
+        }
       </div>
     );
   }
 }
 
 EmailPreferences.defaultProps = {
   updated: null,
+  status: null,
 };
 
 EmailPreferences.propTypes = {
   email: PT.string.isRequired,
   preferences: PT.shape().isRequired,
   saveEmailPreferences: PT.func.isRequired,
   updated: PT.shape(),
+  status: PT.string,
 };

src/shared/components/Settings/Preferences/Email/index.jsx

@@ -13,7 +13,8 @@
     }
   }
 
-  .sub-title {
+  .sub-title,
+  .sub-title-2 {
     @include roboto-light;
 
     color: #888894;
@@ -28,7 +29,60 @@
     }
   }
 
+  .sub-title-2 {
+    margin-top: 30px;
+  }
+
   .preferences-container {
     border-top: 1px solid $tc-gray-neutral-dark;
   }
+
+  .unsubscribed-msg {
+    @include sofia-pro-regular;
+
+    display: flex;
+    flex-direction: column;
+    background-color: $tc-red-10;
+    border: 1px solid $tc-red-30;
+    color: $tc-red;
+    line-height: 20px;
+    margin-bottom: 25px;
+    padding: 10px;
+    text-align: left;
+    font-size: 13px;
+    align-items: flex-start;
+
+    button {
+      margin: 20px 0 0 0;
+    }
+  }
+}
+
+:global {
+  #mc-embedded-subscribe-form {
+    input {
+      display: none;
+    }
+
+    #mc-embedded-subscribe {
+      @include roboto-medium;
+
+      display: inline-block;
+      margin-top: 20px;
+      cursor: pointer;
+      height: 40px;
+      font-size: 15px;
+      font-weight: 500;
+      padding: 0;
+      width: 170px;
+      white-space: nowrap;
+      background-color: #006ad7;
+      color: white;
+      border-radius: 4px;
+
+      &:hover {
+        background-image: linear-gradient(180deg, #3996ff, #127bf3);
+      }
+    }
+  }
 }

src/shared/components/Settings/Preferences/Email/styles.scss

@@ -18,6 +18,7 @@ export default function ToggleableItem({
   primaryText,
   secondaryText,
   value,
+  disabled,
 }) {
   return (
     <div styleName="ToggleableItem">
@@ -38,6 +39,7 @@ export default function ToggleableItem({
           checked={checked}
           onChange={onToggle}
           className="onoffswitch-checkbox"
+          disabled={disabled}
         />
         <label htmlFor={`pre-onoffswitch-${id}`} className="onoffswitch-label">
           <span className="onoffswitch-inner" />
@@ -54,6 +56,7 @@ export default function ToggleableItem({
           checked={checked}
           onChange={onToggle}
           className="onoffswitch-checkbox"
+          disabled={disabled}
         />
         <label htmlFor={`pre-onoffswitch-${id}`} className="onoffswitch-label">
           <span className="onoffswitch-inner" />
@@ -65,11 +68,16 @@ export default function ToggleableItem({
   );
 }
 
+ToggleableItem.defaultProps = {
+  disabled: false,
+};
+
 ToggleableItem.propTypes = {
   id: PT.string.isRequired,
   value: PT.string.isRequired,
   checked: PT.bool.isRequired,
   primaryText: PT.string.isRequired,
   secondaryText: PT.string.isRequired,
   onToggle: PT.func.isRequired,
+  disabled: PT.bool,
 };

src/shared/components/Settings/ToggleableItem/index.jsx

@@ -32,41 +32,42 @@ class SubscribeMailChimpTagContainer extends React.Component {
     this.setState((state) => {
       const { formData, formErrors } = state;
       if (_.isEmpty(formErrors)) {
-        const { listId, tags } = this.props;
-        const fetchUrl = `${PROXY_ENDPOINT}/${listId}/members/${formData.email}/tags`;
+        const { listId, interests } = this.props;
+        const fetchUrl = `${PROXY_ENDPOINT}/${listId}/members/${formData.email}`;
         const data = {
-          email_address: formData.email,
           status: 'subscribed',
-          tags: tags.map(t => ({ name: t, status: 'active' })),
-          merge_fields: {
-            FNAME: formData.fname,
-            LNAME: formData.lname,
-          },
+          interests,
         };
         fetch(fetchUrl, {
-          method: 'POST',
+          method: 'PUT',
           headers: {
             'Content-Type': 'application/json',
           },
           body: JSON.stringify(data),
         }).then(result => result.json()).then((dataResponse) => {
-          if (dataResponse.status === 204) {
+          if (dataResponse.status === 'subscribed') {
             // regist success
             return this.setState({
               subscribing: false,
               subsribed: true,
               error: '',
             });
           }
-          if (dataResponse.status === 404) {
+          if (dataResponse.status === 400) {
             // new email register it for list and add tags
-            data.tags = tags;
             return fetch(`${PROXY_ENDPOINT}/${listId}/members`, {
               method: 'POST',
               headers: {
                 'Content-Type': 'application/json',
               },
-              body: JSON.stringify(data),
+              body: JSON.stringify({
+                ...data,
+                email_address: formData.email,
+                merge_fields: {
+                  FNAME: formData.fname,
+                  LNAME: formData.lname,
+                },
+              }),
             })
               .then(result => result.json()).then((rsp) => {
                 this.setState({
@@ -79,7 +80,7 @@ class SubscribeMailChimpTagContainer extends React.Component {
           return this.setState({
             subscribing: false,
             subsribed: false,
-            error: `Error ${dataResponse.status} when assigning tags to ${formData.email}`,
+            error: `Error ${dataResponse.status} when subscribing ${formData.email}`,
           });
         })
           .catch((e) => {
@@ -209,7 +210,7 @@ SubscribeMailChimpTagContainer.defaultProps = {
 
 SubscribeMailChimpTagContainer.propTypes = {
   listId: PT.string.isRequired,
-  tags: PT.arrayOf(PT.string).isRequired,
+  interests: PT.shape().isRequired,
   title: PT.string,
   btnText: PT.string,
   successTitle: PT.string,

src/shared/containers/EmailSubscribeForm/index.jsx

@@ -20,7 +20,7 @@ class NewsletterPreferencesContainer extends React.Component {
 
   render() {
     const {
-      loading, error, preferences, saveEmailPreferences, email, updated,
+      loading, error, preferences, saveEmailPreferences, email, updated, status,
     } = this.props;
     if (loading || !preferences) return <LoadingIndicator />;
     if (error) {
@@ -32,6 +32,7 @@ class NewsletterPreferencesContainer extends React.Component {
         preferences={preferences}
         saveEmailPreferences={saveEmailPreferences}
         updated={updated}
+        status={status}
       />
     );
   }
@@ -42,6 +43,7 @@ NewsletterPreferencesContainer.defaultProps = {
   error: null,
   preferences: null,
   updated: null,
+  status: null,
 };
 
 NewsletterPreferencesContainer.propTypes = {
@@ -52,6 +54,7 @@ NewsletterPreferencesContainer.propTypes = {
   preferences: PT.shape(),
   email: PT.string.isRequired,
   updated: PT.shape(),
+  status: PT.string,
 };
 
 function mapStateToProps(state) {
@@ -61,6 +64,7 @@ function mapStateToProps(state) {
       loading: newsletterPreferences.loading,
       error: newsletterPreferences.error,
       preferences: newsletterPreferences.preferences,
+      status: newsletterPreferences.status,
       updated: newsletterPreferences.updated,
     };
   }

src/shared/containers/NewsletterPreferences.jsx

@@ -31,11 +31,11 @@ class NewsletterSignupForMembersContainer extends React.Component {
 
     // Get interestIds and interest request object for mailchimp api
     // to use in checkSubscription and subscribe function
-    const { tags } = props;
-    this.tagsIds = null;
-    if (tags !== '') {
-      this.tagsIds = tags.split(/ *, */);
-      this.tagsIds[this.tagsIds.length - 1] = this.tagsIds[this.tagsIds.length - 1].replace(/^\s+|\s+$/g, '');
+    const { groups } = props;
+    this.groupsIds = null;
+    if (groups !== '') {
+      this.groupsIds = groups.split(/ *, */);
+      this.groupsIds[this.groupsIds.length - 1] = this.groupsIds[this.groupsIds.length - 1].replace(/^\s+|\s+$/g, '');
     }
     this.isSubscribed = false;
 
@@ -89,9 +89,9 @@ class NewsletterSignupForMembersContainer extends React.Component {
       .then((dataResponse) => {
         if (dataResponse.status === 'subscribed') {
           this.isSubscribed = true;
-          const subscribedTags = dataResponse.tags.map(t => t.name);
+          const subscribedTags = _.keys(_.pickBy(dataResponse.interests, v => v));
           if (subscribedTags.length) {
-            if (_.intersection(subscribedTags, this.tagsIds).length) {
+            if (_.intersection(subscribedTags, this.groupsIds).length) {
               this.setState({ signupState: SIGNUP_NEWSLETTER.HIDDEN });
             }
           } else {
@@ -108,7 +108,7 @@ class NewsletterSignupForMembersContainer extends React.Component {
       listId, user,
     } = this.props;
 
-    const fetchUrl = `${PROXY_ENDPOINT}/${listId}/members/${this.emailHash}/tags`;
+    const fetchUrl = `${PROXY_ENDPOINT}/${listId}/members/${this.emailHash}`;
 
     let data = {};
     if (!this.isSubscribed) {
@@ -122,18 +122,24 @@ class NewsletterSignupForMembersContainer extends React.Component {
       };
     }
 
-    if (this.tagsIds) data.tags = this.tagsIds.map(t => ({ name: t, status: 'active' }));
+    if (this.groupsIds) {
+      data.interests = {};
+      // eslint-disable-next-line array-callback-return
+      this.groupsIds.map((group) => {
+        data.interests[group] = true;
+      });
+    }
 
     const formData = JSON.stringify(data);
     // use proxy for avoid 'Access-Control-Allow-Origin' bug
     await fetch(fetchUrl, {
-      method: 'POST',
+      method: 'PUT',
       headers: {
         'Content-Type': 'application/json',
       },
       body: formData,
     }).then(result => result.json()).then((dataResponse) => {
-      if (dataResponse.status === 204) {
+      if (dataResponse.status === 'subscribed') {
         // regist success
         this.setState({ signupState: SIGNUP_NEWSLETTER.SIGNEDUP });
       } else {
@@ -183,7 +189,7 @@ class NewsletterSignupForMembersContainer extends React.Component {
 NewsletterSignupForMembersContainer.defaultProps = {
   token: '',
   label: 'Subscribe for Newsletter',
-  tags: '',
+  groups: '',
   user: null,
   buttonTheme: 'primary-green-md',
   title: 'Sign up for the Topcoder Newsletter',
@@ -194,7 +200,7 @@ NewsletterSignupForMembersContainer.propTypes = {
   authenticating: PT.bool.isRequired,
   token: PT.string,
   label: PT.string,
-  tags: PT.string,
+  groups: PT.string,
   listId: PT.string.isRequired,
   user: PT.shape(),
   buttonTheme: PT.string,

src/shared/containers/NewsletterSignupForMembers.jsx

@@ -14,7 +14,8 @@ function onInit(state, { payload }) {
   return {
     ...state,
     email: payload,
-    preferences: [],
+    preferences: {},
+    status: null,
     loading: true,
   };
 }
@@ -25,15 +26,10 @@ function onInit(state, { payload }) {
  * @param {Object} action The action.
  */
 function onDone(state, { payload }) {
-  const preferences = {};
-  if (payload.preferences) {
-    payload.preferences.forEach((record) => {
-      preferences[record.name] = { ...record, checked: true };
-    });
-  }
   return {
     ...state,
-    preferences: payload.error ? null : preferences,
+    preferences: payload.error ? null : payload.preferences,
+    status: payload.error ? null : payload.status,
     error: payload.error,
     loading: false,
   };
@@ -48,7 +44,7 @@ function onUpdateTagInit(state) {
 
 function onUpdateTagDone(state, { payload }) {
   // eslint-disable-next-line no-param-reassign
-  state.preferences[payload.id] = { name: payload.id, checked: payload.checked };
+  state.preferences[payload.id] = payload.checked;
   return {
     ...state,
     updated: payload,