fixes for #5341

kkartunov · kkartunov · commit c5ac5ccb8a73 · 2021-02-10T11:43:17.000+02:00
diff --git a/__tests__/shared/components/Settings/Preferences/Email/__snapshots__/index.jsx.snap b/__tests__/shared/components/Settings/Preferences/Email/__snapshots__/index.jsx.snap
@@ -37,78 +37,5 @@ exports[`renders email preferences setting page correctly 1`] = `
       Resubscribe
     </ThemedButton>
   </div>
-  <div
-    className="src-shared-components-Settings-Preferences-Email-___styles__sub-title___2Fh1W"
-  >
-    Newsletters
-  </div>
-  <div
-    className="src-shared-components-Settings-Preferences-Email-___styles__preferences-container___38AVF"
-  >
-    <ToggleableItem
-      disabled={true}
-      id="9f950b43a1"
-      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="9f950b43a1"
-    />
-    <ToggleableItem
-      disabled={true}
-      id="d0c48e9da3"
-      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="d0c48e9da3"
-    />
-    <ToggleableItem
-      disabled={true}
-      id="a8f858cdf1"
-      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="a8f858cdf1"
-    />
-    <ToggleableItem
-      disabled={true}
-      id="5e67dba327"
-      onToggle={[Function]}
-      primaryText="Marathon Match Reminders"
-      secondaryText="Receive updates whenever a new marathon match is scheduled."
-      value="5e67dba327"
-    />
-    <ToggleableItem
-      disabled={true}
-      id="9091b438cc"
-      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="9091b438cc"
-    />
-    <ToggleableItem
-      disabled={true}
-      id="603c900c32"
-      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="603c900c32"
-    />
-    <ToggleableItem
-      disabled={true}
-      id="3460574ddd"
-      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="3460574ddd"
-    />
-  </div>
-  <div
-    className="src-shared-components-Settings-Preferences-Email-___styles__sub-title-2___1GflT"
-  >
-    Programs
-  </div>
-  <div
-    className="src-shared-components-Settings-Preferences-Email-___styles__preferences-container___38AVF"
-  />
 </div>
 `;
diff --git a/src/server/routes/mailchimp.js b/src/server/routes/mailchimp.js
@@ -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)));
 
diff --git a/src/server/services/mailchimp.js b/src/server/services/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',
diff --git a/src/shared/actions/newsletterPreferences.js b/src/shared/actions/newsletterPreferences.js
@@ -93,11 +93,53 @@ async function updateSubscriptionsDone(
   }
 }
 
+/**
+ * Resubscribe member for TC emails/list
+ * @param {string} emailHash the email
+ */
+async function resubscribeDone(emailHash, listId = config.NEWSLETTER_SIGNUP.DEFAUL_LIST_ID) {
+  try {
+    let error = false;
+    const fetchUrl = `${PROXY_ENDPOINT}/${listId}/members/${emailHash}`;
+
+    const data = {
+      status: 'subscribed',
+    };
+
+    const formData = JSON.stringify(data);
+    // use proxy for avoid 'Access-Control-Allow-Origin' bug
+    await fetch(fetchUrl, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: formData,
+    })
+      .then((result) => {
+        if (!result.ok) error = true;
+        return result.json();
+      });
+
+    return {
+      email: emailHash,
+      resubscribe: true,
+      error,
+    };
+  } catch (error) {
+    return {
+      email: emailHash,
+      error,
+    };
+  }
+}
+
 export default createActions({
   NEWSLETTER_PREFERENCES: {
     FETCH_DATA_INIT: fetchDataInit,
     FETCH_DATA_DONE: fetchDataDone,
     UPDATE_TAG_INIT: _.identity,
     UPDATE_TAG_DONE: updateSubscriptionsDone,
+    RESUBSCRIBE_INIT: _.identity,
+    RESUBSCRIBE_DONE: resubscribeDone,
   },
 });
diff --git a/src/shared/components/Settings/Preferences/Email/index.jsx b/src/shared/components/Settings/Preferences/Email/index.jsx
@@ -91,13 +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;
       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.');
     }
@@ -110,6 +111,7 @@ export default class EmailPreferences extends React.Component {
 
   render() {
     const { emailPreferences, status } = this.state;
+    const { resubscibeEmails, email } = this.props;
     return (
       <div styleName="EmailPreferences">
         <h1 styleName="title">
@@ -123,54 +125,56 @@ export default class EmailPreferences extends React.Component {
                 please click the button below and fill out the form.
               </p>
               <PrimaryButton
-                // eslint-disable-next-line no-return-assign
-                onClick={() => window.location.href = 'https://topcoder.us13.list-manage.com/subscribe?u=65bd5a1857b73643aad556093&id=28bfd3c062'}
+                onClick={() => resubscibeEmails(email)}
               >
                 Resubscribe
               </PrimaryButton>
             </div>
-          ) : null
+          ) : (
+            <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 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 checked && (
-                <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>
       </div>
     );
   }
@@ -187,4 +191,5 @@ EmailPreferences.propTypes = {
   saveEmailPreferences: PT.func.isRequired,
   updated: PT.shape(),
   status: PT.string,
+  resubscibeEmails: PT.func.isRequired,
 };
diff --git a/src/shared/containers/EmailSubscribeForm/index.jsx b/src/shared/containers/EmailSubscribeForm/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,
diff --git a/src/shared/containers/NewsletterPreferences.jsx b/src/shared/containers/NewsletterPreferences.jsx
@@ -20,7 +20,7 @@ class NewsletterPreferencesContainer extends React.Component {
 
   render() {
     const {
-      loading, error, preferences, saveEmailPreferences, email, updated, status,
+      loading, error, preferences, saveEmailPreferences, email, updated, status, resubscibeEmails,
     } = this.props;
     if (loading || !preferences) return <LoadingIndicator />;
     if (error) {
@@ -33,6 +33,7 @@ class NewsletterPreferencesContainer extends React.Component {
         saveEmailPreferences={saveEmailPreferences}
         updated={updated}
         status={status}
+        resubscibeEmails={resubscibeEmails}
       />
     );
   }
@@ -55,6 +56,7 @@ NewsletterPreferencesContainer.propTypes = {
   email: PT.string.isRequired,
   updated: PT.shape(),
   status: PT.string,
+  resubscibeEmails: PT.func.isRequired,
 };
 
 function mapStateToProps(state) {
@@ -81,6 +83,10 @@ function mapDispatchToProps(dispatch) {
       dispatch(actions.newsletterPreferences.updateTagInit());
       dispatch(actions.newsletterPreferences.updateTagDone(email, id, checked));
     },
+    resubscibeEmails: (email) => {
+      dispatch(actions.newsletterPreferences.resubscribeInit());
+      dispatch(actions.newsletterPreferences.resubscribeDone(email));
+    },
   };
 }
 
diff --git a/src/shared/reducers/newsletterPreferences.js b/src/shared/reducers/newsletterPreferences.js

Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,7 @@ export default class MailchimpService {`
`51`	`51`	`return res.json();`
`52`	`52`	`}`
`53`	`53`
`54`		`- async subscribeInterests(req) {`
	`54`	`+ async updateMember(req) {`
`55`	`55`	`const formData = JSON.stringify(req.body);`
`56`	`56`	const res = await fetch(`${this.mailchimpBaseUrl}/lists/${req.params.listId}/members/${req.params.emailHash}`, {
`57`	`57`	`method: 'PUT',`