Final fixes email revamp

Author: kkartunov

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

@@ -13,10 +13,10 @@ exports[`renders email preferences setting page correctly 1`] = `
     className="src-shared-components-Settings-Preferences-Email-___styles__unsubscribed-msg___3yh6s"
   >
     <h3>
-      You have unsubscribed from Topcoder Emails
+      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 and fill out the form.
+      If this was a mistake or if you would like to resubscribe, please click the button below.
     </p>
     <ThemedButton
       active={false}

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

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

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

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /**
  * Email Preferences component.
  */
@@ -66,7 +67,7 @@ const programs = [
   {
     id: 'cafe98d7a7',
     name: 'Beta Testers',
-    desc: '',
+    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.',
   },
 ];
 
@@ -120,10 +121,8 @@ export default class EmailPreferences extends React.Component {
         {
           status !== 'subscribed' ? (
             <div styleName="unsubscribed-msg">
-              <h3>You have unsubscribed from Topcoder Emails</h3>
-              <p>If this was a mistake or if you would like to resubscribe,
-                please click the button below.
-              </p>
+              <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>
               <PrimaryButton
                 onClick={() => resubscibeEmails(email)}
               >

src/shared/containers/NewsletterSignupForMembers.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,