Merge pull request #5729 from topcoder-platform/develop

Release v1.13.1

Author: luizrrodrigues

.circleci/config.yml

@@ -349,21 +349,21 @@ workflows:
           filters:
             branches:
               only:                
-                - free
+                - gig-apply-new-options-dropdown
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global      
           filters:
             branches:
               only:
-                - gig-cache-layer
+                - member-path-component
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global
           filters:
             branches:
               only:
-                - slash-tc
+                - slash-home-hotfix
       # This is stage env for production QA releases
       - "build-prod-staging":
           context : org-global         

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

@@ -1075,6 +1075,16 @@ exports[`Matches shallow shapshot 1`] = `
        
       - Demo of Blog Feed component
     </li>
+    <li>
+      <Link
+        replace={false}
+        to="/examples/member-path-selector"
+      >
+        Member Path - Path Selector
+      </Link>
+       
+      — Demo for path selector component on member path page
+    </li>
   </ul>
 </div>
 `;

config/default.js

@@ -102,7 +102,7 @@ module.exports = {
     /* This is the same value as above, but it is used by topcoder-react-lib,
      * as a more verbose name for the param. */
     COMMUNITY_APP: 'https://community-app.topcoder-dev.com',
-    CHALLENGES_URL: 'https://platform.topcoder.com/earn/find/challenges',
+    CHALLENGES_URL: 'https://www.topcoder-dev.com/challenges',
 
     ARENA: 'https://arena.topcoder-dev.com',
     AUTH: 'https://accounts-auth0.topcoder-dev.com',

config/production.js

@@ -25,6 +25,7 @@ module.exports = {
     /* This is the same value as above, but it is used by topcoder-react-lib,
      * as a more verbose name for the param. */
     COMMUNITY_APP: 'https://community-app.topcoder.com',
+    CHALLENGES_URL: 'https://www.topcoder.com/challenges',
 
     AUTH: 'https://accounts-auth0.topcoder.com',
     BASE: 'https://www.topcoder.com',

src/assets/images/member-path/icon-left.svg

@@ -0,0 +1,40 @@
+{
+  "title": "WHAT DO YOU WANT TO DO TODAY?",
+  "items": [
+    {
+      "title": "COMPETE",
+      "iconURL": "https://media-bucket-s3.s3.eu-central-1.amazonaws.com/sx/icon-compete.svg",
+      "activeIconURL": "https://s3.eu-central-1.amazonaws.com/media-bucket-s3/sx/icon-compete-active.svg",
+      "contentText": "A competition based, gig economy, a typical 9-5 job for you",
+      "btnText": "Topcoder Challenges",
+      "btnURL": "https://www.topcoder.com/challenges",
+      "btnNewTab": true
+    }, {
+      "title": "BUILD SKILLS",
+      "iconURL": "https://media-bucket-s3.s3.eu-central-1.amazonaws.com/sx/icon-build-skills.svg",
+      "activeIconURL": "https://s3.eu-central-1.amazonaws.com/media-bucket-s3/sx/icon-build-skills-active.svg",
+      "contentText": "Get stronger with Skill Builder Competitions",
+      "btnText": "Find a Competition",
+      "btnURL": "https://www.topcoder.com/challenges?bucket=openForRegistration&search=Topcoder%20Skill%20Builder%20Competition&tracks[DS]=true&tracks[Des]=true&tracks[Dev]=true&tracks[QA]=true&types[]=CH&types[]=F2F&types[]=TSK",
+      "btnNewTab": true
+    },
+    {
+      "title": "LEARN",
+      "iconURL": "https://s3.eu-central-1.amazonaws.com/media-bucket-s3/sx/icon-learn.svg",
+      "activeIconURL": "https://s3.eu-central-1.amazonaws.com/media-bucket-s3/sx/icon-learn-active.svg",
+      "contentText": "Tutorials and workshops that matter",
+      "btnText": "Thrive",
+      "btnURL": "https://www.topcoder.com/thrive",
+      "btnNewTab": true
+    },
+    {
+      "title": "GET A GIG",
+      "iconURL": "https://s3.eu-central-1.amazonaws.com/media-bucket-s3/sx/icon-gig.svg",
+      "activeIconURL": "https://s3.eu-central-1.amazonaws.com/media-bucket-s3/sx/icon-get-a-gig-active.svg",
+      "contentText": "Find a freelance job with our help",
+      "btnText": "Gig Work",
+      "btnURL": "https://www.topcoder.com/gigs",
+      "btnNewTab": true
+    }
+  ]
+}

src/assets/images/member-path/icon-right.svg

@@ -861,6 +861,16 @@ export default function Content() {
           {' '}
           - Demo of Blog Feed component
         </li>
+        <li>
+          <Link
+            to="/examples/member-path-selector"
+          >
+            Member Path - Path Selector
+          </Link>
+          {' '}
+          &mdash;
+          Demo for path selector component on member path page
+        </li>
       </ul>
     </div>
   );

src/assets/mock-data/member-path-selector-data.json

@@ -12,6 +12,7 @@ import Leaderboard from 'containers/tco/Leaderboard';
 import RecruitCRMJobs from 'containers/Gigs/RecruitCRMJobs';
 import EmailSubscribeForm from 'containers/EmailSubscribeForm';
 import GSheet from 'containers/GSheet';
+import PathSelector from 'components/MemberPath/PathSelector';
 
 
 const { fireErrorMessage } = errors;
@@ -43,6 +44,14 @@ export function AppComponentSwitch(appComponent) {
   if (appComponent.fields.type === 'GSheet') {
     return <GSheet {...appComponent.fields.props} key={appComponent.sys.id} />;
   }
+  if (appComponent.fields.type === 'MemberPath') {
+    return (
+      <PathSelector
+        {...appComponent.fields.props}
+        key={appComponent.sys.id}
+      />
+    );
+  }
   fireErrorMessage(`Unsupported app component type ${appComponent.fields.type}`, '');
   return null;
 }

src/shared/components/Content/index.jsx

@@ -20,7 +20,7 @@ export default function GigsFeed({
         <span styleName="title">GIGS</span>
         <a
           styleName="allLink"
-          href={`${config.URL.COMMUNITY_APP}/gigs`}
+          href={`${config.URL.BASE}/gigs`}
           target="_blank"
           rel="noreferrer"
         >View all <span>gigs</span>
@@ -31,7 +31,7 @@ export default function GigsFeed({
           : gigs.message ? <span>{gigs.message}</span> : gigs.map(gig => (
             <div styleName="row" key={`dashboard-gigs-feed-${gig.externalId}`}>
               <a
-                href={`${config.URL.COMMUNITY_APP}/gigs/${gig.externalId}`}
+                href={`${config.URL.BASE}/gigs/${gig.externalId}`}
                 target="_blank"
                 rel="noreferrer"
               >{gig.title}

src/shared/components/Contentful/AppComponent/index.jsx

@@ -0,0 +1,133 @@
+import PT from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import cn from 'classnames';
+import ArrowLeftIcon from 'assets/images/member-path/icon-left.svg';
+import ArrowRightIcon from 'assets/images/member-path/icon-right.svg';
+import styles from './styles.scss';
+
+const colorStyles = [styles.purple, styles.blue, styles.teal, styles.orange];
+
+export default function PathSelector({
+  data,
+  animationTime,
+}) {
+  const [activeItemIndex, setActiveItemIndex] = useState(0);
+  const [timer, setTimer] = useState(null);
+
+  useEffect(
+    () => {
+      setTimer(setInterval(() => {
+        setActiveItemIndex(itemIndex => (itemIndex + 1) % data.items.length);
+      },
+      animationTime));
+      return () => {
+        if (timer) {
+          clearInterval(timer);
+        }
+      };
+    },
+    [],
+  );
+  const stopTimer = () => {
+    if (timer) {
+      clearInterval(timer);
+      setTimer(null);
+    }
+  };
+
+  const handleOptionSelect = index => () => {
+    setActiveItemIndex(index);
+    // Stop the animation if user selects an item
+    stopTimer();
+  };
+
+  const handlePrevButton = () => {
+    setActiveItemIndex(activeItemIndex - 1 < 0 ? data.items.length - 1 : activeItemIndex - 1);
+    // Stop the animation if user selects an item
+    stopTimer();
+  };
+
+  const handleNextButton = () => {
+    setActiveItemIndex((activeItemIndex + 1) % data.items.length);
+    // Stop the animation if user selects an item
+    stopTimer();
+  };
+
+  const items = data.items.map((item, index) => (
+    <button
+      key={`path-selector-${item.title}`}
+      type="button"
+      className={cn(
+        styles.option,
+        colorStyles[index % colorStyles.length],
+        { [styles.active]: activeItemIndex === index },
+      )
+      }
+      onClick={handleOptionSelect(index)}
+    >
+      <img
+        className={styles.icon}
+        src={item.iconURL}
+        alt={item.title}
+      />
+      <img
+        className={styles.activeIcon}
+        src={item.activeIconURL}
+        alt={item.title}
+      />
+      <span>{item.title}</span>
+    </button>
+  ));
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h2 className={styles.title}>{data.title}</h2>
+        <div className={styles.options}>
+          <ArrowLeftIcon
+            className={styles.arrowIcon}
+            onClick={handlePrevButton}
+          />
+          {items}
+          <ArrowRightIcon
+            className={styles.arrowIcon}
+            onClick={handleNextButton}
+          />
+        </div>
+      </div>
+      <div className={cn(styles.content, colorStyles[activeItemIndex % colorStyles.length])}>
+        <div className={styles.contentText}>
+          <span>{data.items[activeItemIndex].contentText}</span>
+        </div>
+        <a
+          href={data.items[activeItemIndex].btnURL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={styles.contentButton}
+        >
+          {data.items[activeItemIndex].btnText}
+        </a>
+      </div>
+    </div>
+  );
+}
+
+PathSelector.defaultProps = {
+  animationTime: 3000,
+};
+
+PathSelector.propTypes = {
+  data: PT.shape({
+    items: PT.arrayOf(PT.shape({
+      title: PT.string,
+      iconURL: PT.string,
+      activeIconURL: PT.string,
+      contentText: PT.string,
+      btnText: PT.string,
+      btnURL: PT.string,
+      btnNewTab: PT.bool,
+    })),
+    title: PT.string,
+  }).isRequired,
+  animationTime: PT.number,
+};