Merge pull request #5900 from topcoder-platform/feature/recommended-challenges-update

recommended challenge bucket update

Author: luizrrodrigues

.circleci/config.yml

@@ -343,6 +343,7 @@ workflows:
             branches:
               only:
                 - develop
+                - feature/recommended-challenges-update
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      
@@ -371,6 +372,7 @@ workflows:
             branches:
               only:
                 - develop
+                - feature/recommended-challenges-update
       # Production builds are exectuted 
       # when PR is merged to the master
       # Don't change anything in this configuration

package.json

@@ -150,7 +150,7 @@
     "supertest": "^3.1.0",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
     "tc-ui": "^1.0.12",
-    "topcoder-react-lib": "1.2.1",
+    "topcoder-react-lib": "1000.28.3",
     "topcoder-react-ui-kit": "2.0.1",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",

src/assets/images/icon-not-found.svg

@@ -24,7 +24,7 @@ $down-arrow-size: $base-unit;
     font-size: 13px;
     line-height: 13px;
     margin: 0;
-    padding: 0 0 0 10px;
+    padding: 4.5px 0 4.5px 10px;
     border: none;
     text-transform: none;
   }

src/shared/components/SortingSelectBar/style.scss

@@ -49,7 +49,7 @@ function ChallengeCard({
 
   const registrationPhase = (challenge.phases || []).filter(phase => phase.name === 'Registration')[0];
   const isRegistrationOpen = registrationPhase ? registrationPhase.isOpen : false;
-  const isRecommendedChallenge = challenge.jaccard_index;
+  const isRecommendedChallenge = !!challenge.jaccard_index;
 
   return (
     <div ref={domRef} styleName="challengeCard">

src/shared/components/challenge-listing/ChallengeCard/index.jsx

@@ -306,7 +306,7 @@ export default function FiltersPanel({
 
   const recommendedCheckboxTip = (
     <div styleName="tctooltiptext">
-      <p>Shows available challenges <br /> that match your skills</p>
+      <p>Show the best challenges for you.</p>
     </div>
   );
 

src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx

@@ -9,7 +9,7 @@ import PT from 'prop-types';
 // import qs from 'qs';
 import React, { useRef } from 'react';
 // import { config } from 'topcoder-react-utils';
-import Sort, { SORTS } from 'utils/challenge-listing/sort';
+import Sort from 'utils/challenge-listing/sort';
 import {
   NO_LIVE_CHALLENGES_CONFIG, BUCKETS, BUCKET_DATA, isRecommendedChallengeType,
 } from 'utils/challenge-listing/buckets';
@@ -18,6 +18,7 @@ import Waypoint from 'react-waypoint';
 // import { challenge as challengeUtils } from 'topcoder-react-lib';
 import CardPlaceholder from '../../placeholders/ChallengeCard';
 import ChallengeCard from '../../ChallengeCard';
+import NoRecommenderChallengeCard from '../../NoRecommenderChallengeCard';
 import './style.scss';
 
 // const COLLAPSED_SIZE = 10;
@@ -53,9 +54,6 @@ export default function Bucket({
   isLoggedIn,
   setSearchText,
 }) {
-  const activeBucketData = isRecommendedChallengeType(bucket, filterState)
-    ? [SORTS.BEST_MATCH] : BUCKET_DATA[bucket].sorts.filter(item => item !== 'bestMatch');
-
   const refs = useRef([]);
   refs.current = [];
   const addToRefs = (el) => {
@@ -180,33 +178,50 @@ export default function Bucket({
   //   // instead of waiting for scrolling to hit the react-waypoint to do the loadMore
   //   loadMore();
   // }
-
+  const isRecommended = isRecommendedChallengeType(bucket, filterState);
+  const isHighestPaying = isRecommended && _.sumBy(filteredChallenges, 'jaccard_index') === 0;
+  const sectionTile = isHighestPaying ? 'HIGHEST PAYING OPEN CHALLENGES' : 'Recommended Open Challenges';
   return (
     // challenges.length !== 0
     // && (
-    <div styleName="bucket">
-      <SortingSelectBar
-        onSelect={setSort}
-        options={
-          activeBucketData.map(item => ({
-            label: Sort[item].name,
-            value: item,
-          }))
-        }
-        title={BUCKET_DATA[bucket].name}
-        value={{
-          label: Sort[activeSort].name,
-          value: activeSort,
-        }}
-      />
-      {cards}
+    <div>
       {
-        !expanding && !expandable && loadMore && !loading && activeBucket === bucket ? (
-          <Waypoint onEnter={loadMore} />
-        ) : null
+        isHighestPaying && (!loading || filteredChallenges.length > 0)
+          && <NoRecommenderChallengeCard />
       }
-      {placeholders}
-      {
+      <div styleName="bucket">
+        {
+          isRecommended
+            ? filteredChallenges.length > 0 && (
+              <SortingSelectBar
+                title={sectionTile}
+              />
+            )
+            : (
+              <SortingSelectBar
+                onSelect={setSort}
+                options={
+                  BUCKET_DATA[bucket].sorts.map(item => ({
+                    label: Sort[item].name,
+                    value: item,
+                  }))
+                }
+                title={BUCKET_DATA[bucket].name}
+                value={{
+                  label: Sort[activeSort].name,
+                  value: activeSort,
+                }}
+              />
+            )
+        }
+        {cards}
+        {
+          !expanding && !expandable && loadMore && !loading && activeBucket === bucket ? (
+            <Waypoint onEnter={loadMore} />
+          ) : null
+        }
+        {placeholders}
+        {
       // (expandable || loadMore) && (expandable || !keepPlaceholders) && !loading && !expanded ? (
         (expanding || expandable) && !loading && loadMore && (expandable ? expanded : !expanded) ? (
           <a
@@ -225,7 +240,8 @@ export default function Bucket({
             View more challenges
           </a>
         ) : null
-      }
+        }
+      </div>
     </div>
     // )
   );

src/shared/components/challenge-listing/Listing/Bucket/index.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Link, config } from 'topcoder-react-utils';
+import './style.scss';
+import NotFoundIcon from 'assets/images/icon-not-found.svg';
+
+const base = config.URL.BASE;
+
+function NoRecommenderChallengeCard() {
+  return (
+    <div styleName="container">
+      <div styleName="icon">
+        <NotFoundIcon />
+      </div>
+      <span styleName="text-header">
+        NO VERIFIED SKILLS ON YOUR PROFILE
+      </span>
+      <span styleName="text">
+        Your recommended challenges are based on your Verified Skills.
+        Competing in <Link styleName="challenge-link" to={`${base}/challenges`}>challenges</Link> is a great way to earn them.
+      </span>
+    </div>
+  );
+}
+
+export default NoRecommenderChallengeCard;

src/shared/components/challenge-listing/NoChallengeCard/index.jsx

@@ -0,0 +1,62 @@
+@import '~styles/mixins';
+
+.container {
+  min-height: 178px;
+  background-color: #fff;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin-top: 20px;
+}
+
+.icon {
+  display: flex;
+  justify-content: center;
+
+  @include xs-to-sm {
+    padding-top: 37.61px;
+  }
+
+  @include sm-to-xl {
+    padding-top: 46.25px;
+  }
+}
+
+.text-header {
+  @include xs-to-lg {
+    margin: 17.92px 10px 0 10px;
+  }
+
+  @include lg-to-xl {
+    margin: 26.68px 10px 0 10px;
+  }
+
+  @include barlow-semi-bold;
+
+  font-size: 16px;
+  text-align: center;
+  line-height: 16px;
+  color: #2a2a2a;
+}
+
+.text {
+  @include roboto-regular;
+
+  padding: 8px 10px 24px;
+  font-size: 16px;
+  text-align: center;
+  line-height: 26px;
+  color: #2a2a2a;
+}
+
+.challenge-link {
+  color: #2862b9;
+  text-decoration: underline;
+
+  &:hover,
+  &:active,
+  &:visited {
+    color: #2862b9;
+  }
+}

src/shared/components/challenge-listing/NoChallengeCard/style.scss

@@ -15,7 +15,6 @@ import Sidebar from 'containers/challenge-listing/Sidebar';
 // import { config } from 'topcoder-react-utils';
 import { useMediaQuery } from 'react-responsive';
 
-import NoChallengeCard from './NoChallengeCard';
 import Listing from './Listing';
 // import ChallengeCardPlaceholder from './placeholders/ChallengeCard';
 import Banner from './Banner';
@@ -51,7 +50,6 @@ export default function ChallengeListing(props) {
     // isBucketSwitching,
     isLoggedIn,
     setSearchText,
-    loadingOpenForRegistrationChallenges,
   } = props;
 
   // const { challenges } = props;
@@ -151,10 +149,6 @@ export default function ChallengeListing(props) {
   );
 
   const desktop = useMediaQuery({ minWidth: 1024 });
-  const isRecommendedOn = filterState.recommended
-                          && !loadingOpenForRegistrationChallenges
-                          && activeBucket === 'openForRegistration'
-                          && !openForRegistrationChallenges.length;
 
   return (
     <div styleName="ChallengeFiltersExample" id="challengeFilterContainer">
@@ -186,11 +180,7 @@ export default function ChallengeListing(props) {
           />
         </div>
 
-        {
-          isRecommendedOn
-            ? <NoChallengeCard />
-            : challengeCardContainer
-        }
+        { challengeCardContainer }
 
       </div>
     </div>

src/shared/components/challenge-listing/NoRecommenderChallengeCard/index.jsx

@@ -58,7 +58,7 @@ export const BUCKET_DATA = {
     // hideCount: false,
     name: 'Open for registration',
     sorts: [
-      SORTS.BEST_MATCH,
+      // SORTS.BEST_MATCH,
       SORTS.MOST_RECENT_START_DATE,
       // SORTS.TIME_TO_REGISTER,
       // SORTS.TIME_TO_SUBMIT,