Merge pull request #6753 from topcoder-platform/PROD-3059

fix: mailchimp subscribe issues

Author: luizrrodrigues

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

@@ -7,11 +7,14 @@ exports[`renders email preferences setting page correctly 1`] = `
   <Item
     description="If this was a mistake or if you would like to resubscribe, please click the “Subscribe” button."
     email="[email protected]"
-    id="email"
-    isSubscribeForm={true}
+    formLink="https://topcoder.us13.list-manage.com/subscribe/post?u=65bd5a1857b73643aad556093&id=28bfd3c062"
+    icon="email"
+    isForm={true}
     link=""
     linkTitle="SUBSCRIBE"
+    status={null}
     title="You are not subscribed to receive topcoder emails"
+    value="subscribe"
   />
 </div>
 `;

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

@@ -1,11 +1,20 @@
-import email from 'assets/images/preferences/email.svg';
 
-const data = {
-  id: 'email',
-  icon: email,
+export const subscribe = {
+  id: 'subscribe',
+  icon: 'email',
   name: 'You are not subscribed to receive topcoder emails',
   description: 'If this was a mistake or if you would like to resubscribe, please click the “Subscribe” button.',
   linkTitle: 'SUBSCRIBE',
+  formLink: 'https://topcoder.us13.list-manage.com/subscribe/post?u=65bd5a1857b73643aad556093&id=28bfd3c062',
+  value: 'subscribe',
 };
 
-export default data;
+export const unsubscribe = {
+  id: 'unsubscribe',
+  icon: 'email',
+  name: 'You are currently subscribed to receive topcoder emails',
+  description: 'If this was a mistake or if you would like to unsubscribe, please click the “Unsubscribe” button.',
+  linkTitle: 'UNSUBSCRIBE',
+  formLink: 'https://topcoder.us13.list-manage.com/unsubscribe?u=65bd5a1857b73643aad556093&id=28bfd3c062',
+  value: 'unsubscribe',
+};

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

@@ -8,7 +8,7 @@ import PT from 'prop-types';
 import { toastr } from 'react-redux-toastr';
 import ToggleableItem from 'components/Settings/ToggleableItem';
 import Item from '../List/Item';
-import subscribe from './data';
+import { subscribe, unsubscribe } from './data';
 
 import './styles.scss';
 
@@ -128,16 +128,31 @@ export default class EmailPreferences extends React.Component {
         {
           status !== 'subscribed' ? (
             <Item
-              isSubscribeForm
+              status={status}
               email={email}
               key={subscribe.id}
-              id={subscribe.id}
+              icon={subscribe.icon}
               title={subscribe.name}
               description={subscribe.description}
               linkTitle={subscribe.linkTitle}
+              formLink={subscribe.formLink}
+              value={subscribe.value}
+              isForm
             />
           ) : (
             <React.Fragment>
+              <Item
+                status={status}
+                email={email}
+                key={unsubscribe.id}
+                icon={unsubscribe.icon}
+                title={unsubscribe.name}
+                description={unsubscribe.description}
+                linkTitle={unsubscribe.linkTitle}
+                formLink={unsubscribe.formLink}
+                value={unsubscribe.value}
+                isForm
+              />
               {
                   map(newsletters, (newsletter) => {
                     const checked = emailPreferences[newsletter.id];

src/shared/components/Settings/Preferences/List/Item/index.jsx

@@ -4,6 +4,7 @@
 import React from 'react';
 import PT from 'prop-types';
 import ReactSVG from 'react-svg';
+import cn from 'classnames';
 import { isomorphy } from 'topcoder-react-utils';
 
 import './styles.scss';
@@ -14,19 +15,22 @@ if (isomorphy.isClientSide()) {
 }
 
 export default function Item({
-  id,
+  icon,
   title,
   description,
   link,
+  status,
   linkTitle,
   email,
-  isSubscribeForm,
+  formLink,
+  value,
+  isForm,
 }) {
   return (
-    <div styleName="item-container">
+    <div styleName={cn('item-container', status === 'subscribed' && 'subscribed')}>
       <div styleName="body">
         <div styleName="icon-wrapper">
-          { assets && assets.keys().includes(`./${id.toLowerCase()}.svg`) ? <ReactSVG path={assets(`./${id.toLowerCase()}.svg`)} /> : '' }
+          { assets && assets.keys().includes(`./${icon.toLowerCase()}.svg`) ? <ReactSVG path={assets(`./${icon.toLowerCase()}.svg`)} /> : '' }
         </div>
         <div styleName="info">
           <div styleName="info-first-line">
@@ -37,34 +41,40 @@ export default function Item({
           </div>
         </div>
         {
-          !isSubscribeForm ? (
-            <a href={link} target="_blank" rel="noopener noreferrer" styleName="link-btn"><span>{ linkTitle }</span></a>
-          ) : (
-            <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>
+          status && isForm && (
+            <form action={formLink} 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" />
+              <input type="submit" value={value} name={value} id="mc-embedded-subscribe" className="submit-button" />
             </form>
           )
         }
+
+        { !isForm && <a href={link} target="_blank" rel="noopener noreferrer" styleName="link-btn"><span>{ linkTitle }</span></a>}
       </div>
     </div>
   );
 }
 
 Item.defaultProps = {
   link: '',
-  isSubscribeForm: false,
   email: '',
+  status: '',
+  value: '',
+  formLink: '',
+  isForm: false,
 };
 
 Item.propTypes = {
   linkTitle: PT.string.isRequired,
   title: PT.string.isRequired,
   description: PT.string.isRequired,
+  status: PT.string,
   link: PT.string,
-  isSubscribeForm: PT.bool,
+  isForm: PT.bool,
+  formLink: PT.string,
+  value: PT.string,
   email: PT.string,
-  id: PT.string.isRequired,
+  icon: PT.string.isRequired,
 };

src/shared/components/Settings/Preferences/List/Item/styles.scss

@@ -11,6 +11,10 @@
   background: $tc-white;
   border: 1px solid $listing-light-gray;
   border-radius: 8px;
+
+  &.subscribed {
+    margin-bottom: 0 !important;
+  }
 }
 
 .item-container:not(:last-child) {

src/shared/components/Settings/Preferences/List/data.jsx

@@ -1,11 +1,10 @@
-import forum from 'assets/images/preferences/forum.svg';
 
 import { config } from 'topcoder-react-utils';
 
 const data = [
   {
     id: 'forum',
-    icon: forum,
+    icon: 'forum',
     name: 'Forum',
     description: 'To setup your forum preferences, please click the “Go To Forum” button.',
     link: `${config.URL.FORUMS_VANILLA}/profile/preferences`,