Merge pull request #5969 from topcoder-platform/jan-updates-1

Jan updates 1

Author: luizrrodrigues

.circleci/config.yml

@@ -363,7 +363,7 @@ workflows:
           filters:
             branches:
               only:
-                - mm-leaderboard-theme
+                - jan-updates-1
       # This is stage env for production QA releases
       - "build-prod-staging":
           context : org-global         

__tests__/shared/components/__snapshots__/TopcoderFooter.jsx.snap

@@ -163,15 +163,6 @@ exports[`Matches shallow shapshot 1`] = `
               Blog
             </a>
           </li>
-          <li
-            className="src-shared-components-TopcoderFooter-___style__link___3-nzm"
-          >
-            <a
-              href="https://www.topcoder-dev.com/community/pipeline"
-            >
-              Challenge Pipeline
-            </a>
-          </li>
           <li
             className="src-shared-components-TopcoderFooter-___style__link___3-nzm"
           >

src/shared/components/Looker/index.jsx

@@ -21,6 +21,7 @@ import PT from 'prop-types';
 import _ from 'lodash';
 import React, { Component } from 'react';
 import { fixStyle } from 'utils/contentful';
+import { getRatingColor } from 'utils/tc';
 import cn from 'classnames';
 import { Scrollbars } from 'react-custom-scrollbars';
 import './style.scss';
@@ -46,6 +47,7 @@ export default class Looker extends Component {
       tableHeight,
       tableWidth,
       headerIndexCol,
+      ratingProp,
     } = this.props;
 
     let {
@@ -166,7 +168,11 @@ export default class Looker extends Component {
                 }
                 return value ? (
                   <td key={record[prop]} style={fixStyle(styles)} title={value} styleName="body-row">
-                    {memberLinks ? (<a styleName="handle-link" href={`${window.origin}/members/${value}`} target={`${_.includes(window.origin, 'www') ? '_self' : '_blank'}`}>{value}</a>) : value}
+                    {memberLinks ? (
+                      <a styleName="handle-link" href={`${window.origin}/members/${value}`} target={`${_.includes(window.origin, 'www') ? '_self' : '_blank'}`} style={{ color: ratingProp ? getRatingColor(record[ratingProp]) : null }}>
+                        {value}
+                      </a>
+                    ) : value}
                   </td>
                 ) : null;
               })
@@ -232,6 +238,7 @@ Looker.defaultProps = {
   tableHeight: '100%',
   tableWidth: '100%',
   headerIndexCol: '',
+  ratingProp: null,
 };
 
 Looker.propTypes = {
@@ -253,4 +260,5 @@ Looker.propTypes = {
     PT.func,
   ]),
   headerIndexCol: PT.string,
+  ratingProp: PT.string,
 };

src/shared/components/Looker/style.scss

@@ -106,7 +106,7 @@ $light-gray: #d4d4d4;
   @include roboto-medium;
 
   font-weight: 500;
-  color: #0d61bf !important;
+  color: #0d61bf;
   text-decoration: underline;
 
   &:hover {

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

@@ -26,11 +26,6 @@ function toastrError(title, message) {
 const SAVE_DELAY = 1000;
 
 const newsletters = [
-  {
-    id: '9f950b43a1',
-    name: 'Challenge Pipeline',
-    desc: '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.',
-  },
   {
     id: 'd0c48e9da3',
     name: 'Gig Work',
@@ -61,6 +56,11 @@ const newsletters = [
     name: 'Rapid Development Match (RDM) Reminders',
     desc: 'Receive notifications of our brand new RDMs! These rated, development matches will be a fun new way to engage with us!',
   },
+  {
+    id: 'ee26600945',
+    name: 'NASA Community',
+    desc: 'Receive email notifications for all the latest news and announcements of our <a href="https://www.topcoder.com/community/nasa" style="color:#0d61bf;text-decoration:underline">NASA Member Program</a>.',
+  },
 ];
 const programs = [
   {

src/shared/components/TopcoderFooter/index.jsx

@@ -69,7 +69,6 @@ export default function TopcoderFooter() {
             <div styleName="sep-line" />
             <ul styleName="navi-col-links">
               <Link to={`${base}/blog`}>Blog</Link>
-              <Link to={`${base}/community/pipeline`}>Challenge Pipeline</Link>
               <Link to={`${base}/community/events`}>Events Calendar</Link>
               <Link to={`${config.URL.FORUMS_VANILLA}`}>Forums</Link>
               <Link to={`${base}/community/member-programs`}>Programs</Link>

src/shared/containers/NewsletterSignupForMembers.jsx

@@ -31,12 +31,16 @@ class NewsletterSignupForMembersContainer extends React.Component {
 
     // Get interestIds and interest request object for mailchimp api
     // to use in checkSubscription and subscribe function
-    const { groups } = props;
+    const { groups, tags } = props;
     this.groupsIds = null;
+    this.tagNames = null;
     if (groups !== '') {
       this.groupsIds = groups.split(/ *, */);
       this.groupsIds[this.groupsIds.length - 1] = this.groupsIds[this.groupsIds.length - 1].replace(/^\s+|\s+$/g, '');
     }
+    if (tags) {
+      this.tagNames = tags.split(',');
+    }
     this.isSubscribed = false;
 
     this.state = {
@@ -89,13 +93,25 @@ class NewsletterSignupForMembersContainer extends React.Component {
       .then((dataResponse) => {
         if (dataResponse.status === 'subscribed') {
           this.isSubscribed = true;
-          const subscribedTags = _.keys(_.pickBy(dataResponse.interests, v => v));
-          if (subscribedTags.length) {
-            if (_.intersection(subscribedTags, this.groupsIds).length) {
-              this.setState({ signupState: SIGNUP_NEWSLETTER.HIDDEN });
+          if (this.groupsIds) {
+            const subscribedGroups = _.keys(_.pickBy(dataResponse.interests, v => v));
+            if (subscribedGroups.length) {
+              if (_.intersection(subscribedGroups, this.groupsIds).length) {
+                this.setState({ signupState: SIGNUP_NEWSLETTER.HIDDEN });
+              }
+            } else {
+              this.setState({ signupState: SIGNUP_NEWSLETTER.DEFAULT });
+            }
+          }
+          if (!this.groupsIds && this.tagNames) {
+            const subscribedTags = _.map(dataResponse.tags, t => t.name);
+            if (subscribedTags.length) {
+              if (_.intersection(subscribedTags, this.tagNames).length) {
+                this.setState({ signupState: SIGNUP_NEWSLETTER.HIDDEN });
+              }
+            } else {
+              this.setState({ signupState: SIGNUP_NEWSLETTER.DEFAULT });
             }
-          } else {
-            this.setState({ signupState: SIGNUP_NEWSLETTER.DEFAULT });
           }
         } else {
           this.setState({ signupState: SIGNUP_NEWSLETTER.DEFAULT });
@@ -107,49 +123,75 @@ class NewsletterSignupForMembersContainer extends React.Component {
     const {
       listId, user,
     } = this.props;
-
-    const fetchUrl = `${PROXY_ENDPOINT}/${listId}/members/${this.emailHash}`;
-
-    let data = {};
-    if (!this.isSubscribed) {
-      data = {
-        email_address: user.email,
-        status: 'subscribed',
-        merge_fields: {
-          FNAME: user.FNAME,
-          LNAME: user.LNAME,
-        },
-      };
-    }
+    const isTagsUpdate = !!this.tagNames;
+    const fetchUrl = `${PROXY_ENDPOINT}/${listId}/members/${this.emailHash}${isTagsUpdate ? '/tags' : ''}`;
 
     if (this.groupsIds) {
+      let data = {};
+      if (!this.isSubscribed) {
+        data = {
+          email_address: user.email,
+          status: 'subscribed',
+          merge_fields: {
+            FNAME: user.FNAME,
+            LNAME: user.LNAME,
+          },
+        };
+      }
       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: 'PUT',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: formData,
-    }).then(result => result.json()).then((dataResponse) => {
-      if (dataResponse.status === 'subscribed') {
-        // regist success
-        this.setState({ signupState: SIGNUP_NEWSLETTER.SIGNEDUP });
-      } else {
-        // regist fail
-        this.setState({
-          signupState: SIGNUP_NEWSLETTER.ERROR,
-          message: dataResponse.detail,
-        });
-      }
-    });
+      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 => result.json()).then((dataResponse) => {
+        if (dataResponse.status === 'subscribed') {
+          // regist success
+          this.setState({ signupState: SIGNUP_NEWSLETTER.SIGNEDUP });
+        } else {
+          // regist fail
+          this.setState({
+            signupState: SIGNUP_NEWSLETTER.ERROR,
+            message: dataResponse.detail,
+          });
+        }
+      });
+    }
+    if (!this.groupsIds && this.tagNames) {
+      const formData = JSON.stringify({
+        tags: this.tagNames.map(tName => ({
+          name: tName,
+          status: 'active',
+        })),
+      });
+      // use proxy for avoid 'Access-Control-Allow-Origin' bug
+      await fetch(fetchUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: formData,
+      }).then(result => result.json()).then((dataResponse) => {
+        if (dataResponse.status === 204) {
+          // regist success
+          this.setState({ signupState: SIGNUP_NEWSLETTER.SIGNEDUP });
+        } else {
+          // regist fail
+          this.setState({
+            signupState: SIGNUP_NEWSLETTER.ERROR,
+            message: dataResponse.detail,
+          });
+        }
+      });
+    }
   }
 
   showSignupConfirmModal() {
@@ -194,6 +236,7 @@ NewsletterSignupForMembersContainer.defaultProps = {
   buttonTheme: 'primary-green-md',
   title: 'Sign up for the Topcoder Newsletter',
   desc: 'Do you want to subscribe to this newsletter?',
+  tags: null,
 };
 
 NewsletterSignupForMembersContainer.propTypes = {
@@ -206,6 +249,7 @@ NewsletterSignupForMembersContainer.propTypes = {
   buttonTheme: PT.string,
   title: PT.string,
   desc: PT.string,
+  tags: PT.string,
 };
 
 function mapStateToProps(state, ownProps) {