Fixes for #5341

Author: kkartunov

src/shared/actions/newsletterPreferences.js

@@ -36,6 +36,7 @@ async function fetchDataDone(emailHash, listId = config.NEWSLETTER_SIGNUP.DEFAUL
     return {
       email: emailHash,
       preferences: subs.interests,
+      status: subs.status,
       error,
     };
   } catch (error) {

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

@@ -5,6 +5,7 @@ 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';
 
@@ -79,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);
   }
@@ -107,12 +109,28 @@ export default class EmailPreferences extends React.Component {
   }
 
   render() {
-    const { emailPreferences } = this.state;
+    const { emailPreferences, status } = this.state;
     return (
       <div styleName="EmailPreferences">
         <h1 styleName="title">
           E-Mail Preferences
         </h1>
+        {
+          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 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'}
+              >
+                Resubscribe
+              </PrimaryButton>
+            </div>
+          ) : null
+        }
         <div styleName="sub-title">Newsletters</div>
         <div styleName="preferences-container">
           {
@@ -127,6 +145,7 @@ export default class EmailPreferences extends React.Component {
                   primaryText={newsletter.name}
                   secondaryText={newsletter.desc}
                   onToggle={e => this.onChange(newsletter.id, e.target.checked)}
+                  disabled={status !== 'subscribed'}
                 />
               );
             })
@@ -146,6 +165,7 @@ export default class EmailPreferences extends React.Component {
                   primaryText={program.name}
                   secondaryText={program.desc}
                   onToggle={e => this.onChange(program.id, e.target.checked)}
+                  disabled={status !== 'subscribed'}
                 />
               );
             })
@@ -158,11 +178,13 @@ export default class EmailPreferences extends React.Component {
 
 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/styles.scss

@@ -36,4 +36,24 @@
   .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;
+    }
+  }
 }

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

@@ -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/containers/NewsletterPreferences.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/reducers/newsletterPreferences.js

@@ -15,6 +15,7 @@ function onInit(state, { payload }) {
     ...state,
     email: payload,
     preferences: {},
+    status: null,
     loading: true,
   };
 }
@@ -28,6 +29,7 @@ function onDone(state, { payload }) {
   return {
     ...state,
     preferences: payload.error ? null : payload.preferences,
+    status: payload.error ? null : payload.status,
     error: payload.error,
     loading: false,
   };