Unsubscribe via mc form

Author: kkartunov

.circleci/config.yml

@@ -282,7 +282,7 @@ workflows:
           filters:
             branches:
               only:                
-                - email-pref-revamp-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

@@ -18,24 +18,40 @@ exports[`renders email preferences setting page correctly 1`] = `
     <p>
       If this was a mistake or if you would like to resubscribe, please click the button below.
     </p>
-    <ThemedButton
-      active={false}
-      composeAdhocTheme="deeply"
-      composeContextTheme="softly"
-      disabled={false}
-      enforceA={false}
-      mapThemrProps={[Function]}
-      onClick={[Function]}
-      onMouseDown={null}
-      openNewTab={false}
-      replace={false}
-      size={null}
-      themePriority="adhoc-context-default"
-      to={null}
-      type="button"
+    <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}
     >
-      Resubscribe
-    </ThemedButton>
+      <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>
 `;

src/shared/actions/newsletterPreferences.js

@@ -93,53 +93,11 @@ 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,
   },
 });

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

@@ -6,7 +6,6 @@ import { debounce, map } from 'lodash';
 import React from 'react';
 import PT from 'prop-types';
 import { toastr } from 'react-redux-toastr';
-import { PrimaryButton } from 'topcoder-react-ui-kit';
 
 import ToggleableItem from 'components/Settings/ToggleableItem';
 
@@ -112,7 +111,7 @@ export default class EmailPreferences extends React.Component {
 
   render() {
     const { emailPreferences, status } = this.state;
-    const { resubscibeEmails, email } = this.props;
+    const { email } = this.props;
     return (
       <div styleName="EmailPreferences">
         <h1 styleName="title">
@@ -123,53 +122,54 @@ export default class EmailPreferences extends React.Component {
             <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>
-              <PrimaryButton
-                onClick={() => resubscibeEmails(email)}
-              >
-                Resubscribe
-              </PrimaryButton>
+              <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'}
-                        />
-                      );
-                    })
-                  }
+                  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'}
-                        />
-                      );
-                    })
-                  }
+                  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>
           )
@@ -190,5 +190,4 @@ EmailPreferences.propTypes = {
   saveEmailPreferences: PT.func.isRequired,
   updated: PT.shape(),
   status: PT.string,
-  resubscibeEmails: PT.func.isRequired,
 };

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

@@ -57,3 +57,32 @@
     }
   }
 }
+
+: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/containers/NewsletterPreferences.jsx

@@ -20,7 +20,7 @@ class NewsletterPreferencesContainer extends React.Component {
 
   render() {
     const {
-      loading, error, preferences, saveEmailPreferences, email, updated, status, resubscibeEmails,
+      loading, error, preferences, saveEmailPreferences, email, updated, status,
     } = this.props;
     if (loading || !preferences) return <LoadingIndicator />;
     if (error) {
@@ -33,7 +33,6 @@ class NewsletterPreferencesContainer extends React.Component {
         saveEmailPreferences={saveEmailPreferences}
         updated={updated}
         status={status}
-        resubscibeEmails={resubscibeEmails}
       />
     );
   }
@@ -56,7 +55,6 @@ NewsletterPreferencesContainer.propTypes = {
   email: PT.string.isRequired,
   updated: PT.shape(),
   status: PT.string,
-  resubscibeEmails: PT.func.isRequired,
 };
 
 function mapStateToProps(state) {
@@ -83,10 +81,6 @@ 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));
-    },
   };
 }
 

src/shared/reducers/newsletterPreferences.js

@@ -51,22 +51,6 @@ function onUpdateTagDone(state, { payload }) {
   };
 }
 
-function onResubscribeInit(state) {
-  return {
-    ...state,
-    updated: null,
-  };
-}
-
-function onResubscribeDone(state, { payload }) {
-  // eslint-disable-next-line no-param-reassign
-  state.preferences[payload.id] = payload.checked;
-  return {
-    ...state,
-    updated: payload,
-  };
-}
-
 /**
  * Creates newsletterPreferences reducer with the specified initial state.
  * @param {Object} state Optional. If not given, the default one is
@@ -79,8 +63,6 @@ function create(state = {}) {
     [actions.newsletterPreferences.fetchDataDone]: onDone,
     [actions.newsletterPreferences.updateTagInit]: onUpdateTagInit,
     [actions.newsletterPreferences.updateTagDone]: onUpdateTagDone,
-    [actions.newsletterPreferences.resubscribeInit]: onResubscribeInit,
-    [actions.newsletterPreferences.resubscribeDone]: onResubscribeDone,
   }, state);
 }