Enable TCO flag filtering on challenge listings

https://www.topcoder.com/challenges/30279066

#6576

https://topcoder.atlassian.net/browse/PROD-2283

Author: jmgasper

__tests__/shared/components/challenge-listing/Filters/FiltersPanel.jsx

@@ -30,6 +30,7 @@ const mockDatas = [{
   selectedCommunityId: '1',
   setFilterState,
   setSearchText,
+  activeBucket: 'all',
   validKeywords: ['key', 'word'],
   validTypes: [{ name: 'sub', subTrack: 'sub' }, { name: 'track', subTrack: 'track' }],
   onClose,
@@ -47,6 +48,7 @@ const mockDatas = [{
   filterState: {
     groups: [],
   },
+  activeBucket: 'openForRegistration',
   hidden: false,
   onSaveFilter,
   selectCommunity,

__tests__/shared/components/challenge-listing/Filters/__snapshots__/FiltersPanel.jsx.snap

@@ -62,6 +62,7 @@ exports[`Matches shallow shapshot 2`] = `
         className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__bucket-selector-mobile___JbE2n"
       >
         <BucketSelector
+          activeBucket="openForRegistration"
           disabled={false}
           expanding={false}
           isAuth={false}
@@ -209,7 +210,79 @@ exports[`Matches shallow shapshot 2`] = `
     <hr
       className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__hr___1WvP7"
     />
+    <React.Fragment>
+      <div
+        className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter-row___2Vfd_ src-shared-components-challenge-listing-Filters-FiltersPanel-___style__tco-challenges-filter___3XG63"
+      >
+        <span
+          aria-checked={false}
+          aria-label="Tco eligible challenge toggle button pressed Off"
+          className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__tco-select-label___3ATak"
+          role="switch"
+        >
+          <ThemedSwitchWithLabel
+            composeAdhocTheme="deeply"
+            composeContextTheme="softly"
+            enabled={false}
+            labelAfter="TCO Eligible Challenges"
+            labelBefore=""
+            mapThemrProps={[Function]}
+            onSwitch={[Function]}
+            themePriority="adhoc-context-default"
+          />
+        </span>
+        <div
+          className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__tco-challenge-tooltip___17i7n"
+        >
+          <Tooltip
+            align={Object {}}
+            className=""
+            content={
+              <div
+                className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__tctooltiptext___2Lyji"
+              >
+                <p>
+                  Earn TCO points by participating in these 
+                  <br />
+                  challenges. 
+                  <a
+                    href="https://www.topcoder-dev.com/community/member-programs/topcoder-open"
+                    rel="noreferrer noopener"
+                    target="_blank"
+                  >
+                    Learn more about TCO
+                  </a>
+                </p>
+              </div>
+            }
+            defaultVisible={false}
+            id="tco-tip"
+            onTooltipHover={[Function]}
+            placeArrow={[Function]}
+            position="top"
+            suppressDiv={false}
+            trigger={
+              Array [
+                "hover",
+                "focus",
+              ]
+            }
+          >
+            <CircleIcon
+              fill="none"
+              height="14"
+              viewBox="0 0 14 14"
+              width="14"
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </Tooltip>
+        </div>
+      </div>
+    </React.Fragment>
   </div>
+  <hr
+    className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__hr___1WvP7"
+  />
   <div
     className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__buttons___2r3xW"
   >

config/default.js

@@ -103,7 +103,7 @@ module.exports = {
      * as a more verbose name for the param. */
     COMMUNITY_APP: 'https://community-app.topcoder-dev.com',
     CHALLENGES_URL: 'https://www.topcoder-dev.com/challenges',
-
+    TCO_OPEN_URL: 'https://www.topcoder-dev.com/community/member-programs/topcoder-open',
     ARENA: 'https://arena.topcoder-dev.com',
     AUTH: 'https://accounts-auth0.topcoder-dev.com',
     BASE: 'https://www.topcoder-dev.com',

config/production.js

@@ -26,6 +26,7 @@ module.exports = {
      * as a more verbose name for the param. */
     COMMUNITY_APP: 'https://community-app.topcoder.com',
     CHALLENGES_URL: 'https://www.topcoder.com/challenges',
+    TCO_OPEN_URL: 'https://www.topcoder.com/community/member-programs/topcoder-open',
 
     AUTH: 'https://accounts-auth0.topcoder.com',
     BASE: 'https://www.topcoder.com',

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

@@ -257,7 +257,9 @@ export default function FiltersPanel({
   const disableClearFilterButtons = isFilterEmpty(filterState, past ? 'past' : '', activeBucket);
 
   const isRecommendedChallengesVisible = (activeBucket === 'openForRegistration' && config.ENABLE_RECOMMENDER);
+  const isTcoChallengesVisible = (activeBucket === 'openForRegistration' || activeBucket === 'all' || activeBucket === 'allPast' || activeBucket === 'myPast');
   const [recommendedToggle, setRecommendedToggle] = useState(false);
+  const [tcoToggle, setTcoToggle] = useState(false);
 
   useEffect(() => {
     if (!isFilterEmpty(filterState, past ? 'past' : '', activeBucket)
@@ -270,11 +272,19 @@ export default function FiltersPanel({
       });
     }
 
+    if (filterState.tco) {
+      setTcoToggle(true);
+    }
     if (filterState.recommended) {
       setRecommendedToggle(true);
     }
   }, [filterState]);
 
+  const onSwitchTcoChallenge = (on) => {
+    setFilterState({ ..._.clone(filterState), tco: on ? on.toString() : on });
+    setTcoToggle(on);
+  };
+
   const onSwitchRecommendedChallenge = (on) => {
     setFilterState({ ..._.clone(filterState), recommended: on });
     selectBucket(BUCKETS.OPEN_FOR_REGISTRATION);
@@ -314,6 +324,14 @@ export default function FiltersPanel({
     </div>
   );
 
+  const tcoCheckboxTip = (
+    <div styleName="tctooltiptext">
+      <p>Earn TCO points by participating in these <br />
+        challenges. <a href={config.URL.TCO_OPEN_URL} target="_blank" rel="noreferrer noopener">Learn more about TCO</a>
+      </p>
+    </div>
+  );
+
   return (
     <div styleName="FiltersPanel">
       <div styleName="header">
@@ -648,10 +666,42 @@ export default function FiltersPanel({
             </React.Fragment>
           )
         }
+        {isTcoChallengesVisible
+            && (
+            <React.Fragment>
+              <div styleName="filter-row tco-challenges-filter">
+                <span
+                  styleName="tco-select-label"
+                  aria-label={`Tco eligible challenge toggle button pressed ${tcoToggle ? 'On' : 'Off'}`}
+                  role="switch"
+                  aria-checked={tcoToggle}
+                >
+                  <SwitchWithLabel
+                    enabled={tcoToggle}
+                    labelAfter="TCO Eligible Challenges"
+                    onSwitch={onSwitchTcoChallenge}
+                  />
+                </span>
+
+                <div styleName="tco-challenge-tooltip">
+                  <Tooltip
+                    id="tco-tip"
+                    content={tcoCheckboxTip}
+                    className={style['tooltip-overlay']}
+                    trigger={['hover', 'focus']}
+                  >
+                    <CircleIcon />
+                  </Tooltip>
+                </div>
+              </div>
+            </React.Fragment>
+            )
+        }
+
       </div>
 
       {
-        isRecommendedChallengesVisible && _.get(auth, 'user.userId')
+        ((isRecommendedChallengesVisible && _.get(auth, 'user.userId')) || isTcoChallengesVisible)
           && (<hr styleName="hr" />)
       }
 
@@ -661,6 +711,7 @@ export default function FiltersPanel({
           disabled={disableClearFilterButtons}
           onClick={() => {
             setRecommendedToggle(false);
+            setTcoToggle(false);
             setSort('openForRegistration', 'startDate');
             setFilterState({
               tracks: {

src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss

@@ -118,7 +118,8 @@ hr.hr {
   .filter-row {
     display: flex;
 
-    .recommended-select-label {
+    .recommended-select-label,
+    .tco-select-label {
       width: 45%;
       margin-bottom: 16px;
       display: flex;
@@ -606,7 +607,8 @@ hr.hr {
     }
   }
 
-  .recommended-challenges-filter {
+  .recommended-challenges-filter,
+  .tco-challenges-filter {
     display: flex;
     margin: 0;
     position: relative;
@@ -619,7 +621,8 @@ hr.hr {
       flex-direction: row;
     }
 
-    .recommended-challenge-tooltip {
+    .recommended-challenge-tooltip,
+    .tco-challenge-tooltip {
       position: absolute;
       left: 210px;
       display: flex;
@@ -639,6 +642,10 @@ hr.hr {
   color: $tc-white;
   border-radius: 8px;
   padding: 10px;
+
+  a {
+    font-weight: bold;
+  }
 }
 
 .tctooltiptext::after {

src/shared/reducers/challenge-listing/index.js

@@ -422,7 +422,7 @@ function onSetFilter(state, { payload }) {
    * do it very carefuly (many params are not validated). */
   const filter = _.pickBy(_.pick(
     payload,
-    ['tags', 'types', 'search', 'startDateEnd', 'endDateStart', 'groups', 'events', 'tracks'],
+    ['tags', 'types', 'search', 'startDateEnd', 'endDateStart', 'groups', 'events', 'tracks', 'tco'],
   ), value => (!_.isArray(value) && value && value !== '') || (_.isArray(value) && value.length > 0));
 
   const emptyArrayAllowedFields = ['types'];

src/shared/utils/challenge-listing/buckets.js

@@ -190,6 +190,7 @@ export function filterChanged(filter, prevFilter) {
   }
   return (!_.isEqual(filter.tracks, prevFilter.tracks))
   || (filter.search !== prevFilter.search)
+  || (filter.tco !== prevFilter.tco)
   || (filter.startDateEnd !== prevFilter.startDateEnd)
   || (filter.endDateStart !== prevFilter.endDateStart)
   // eslint-disable-next-line max-len