Self-service prod release

src/components/challenge-detail/Header/ChallengeTags.jsx

@@ -32,6 +32,7 @@ import "./style.module.scss";
 
 export default function ChallengeTags(props) {
   const {
+    selfService,
     challengeId,
     challengesUrl,
     track,
@@ -113,6 +114,13 @@ export default function ChallengeTags(props) {
       {matchSkills.map((item) => (
         <VerifiedTag item={item} challengesUrl={challengesUrl} />
       ))}
+      {
+        selfService && (
+          <DevelopmentTrackTag>
+            <span>On Demand</span>
+          </DevelopmentTrackTag>
+        )
+      }
       {tags.map(
         (tag) =>
           tag && (
@@ -133,6 +141,7 @@ export default function ChallengeTags(props) {
 ChallengeTags.defaultProps = {
   events: [],
   technPlatforms: [],
+  selfService: false,
 };
 
 ChallengeTags.propTypes = {
@@ -143,4 +152,5 @@ ChallengeTags.propTypes = {
   technPlatforms: PT.arrayOf(PT.string),
   challengeType: PT.shape().isRequired,
   openForRegistrationChallenges: PT.shape().isRequired,
+  selfService: PT.bool,
 };

src/components/challenge-detail/Header/index.jsx

@@ -75,8 +75,11 @@ export default function ChallengeHeader(props) {
     status,
     type,
     track,
+    legacy,
   } = challenge;
 
+  const { selfService } = legacy;
+
   const tags = challenge.tags || [];
 
   const allPhases = challenge.phases || [];
@@ -275,6 +278,7 @@ export default function ChallengeHeader(props) {
             <h1 styleName="challenge-header">{name}</h1>
             <div styleName="tag-container">
               <ChallengeTags
+                selfService={selfService}
                 challengeId={challengeId}
                 track={track}
                 challengeType={_.find(challengeTypesMap, { name: type }) || {}}
@@ -496,6 +500,9 @@ ChallengeHeader.propTypes = {
   checkpoints: PT.shape(),
   challenge: PT.shape({
     id: PT.string.isRequired,
+    legacy: PT.shape({
+      selfService: PT.bool,
+    }),
     type: PT.any,
     track: PT.string,
     drPoints: PT.any,

src/components/challenge-detail/Specification/index.jsx

@@ -52,7 +52,7 @@ export default function ChallengeDetailsView(props) {
   } = challenge;
 
   const roles = (userDetails || {}).roles || [];
-  const { reviewScorecardId, screeningScorecardId, forumId } = legacy;
+  const { reviewScorecardId, screeningScorecardId, forumId, selfService } = legacy;
 
   let stockArtValue = "";
   const allowStockArt = _.find(metadata, { name: "allowStockArt" });
@@ -163,7 +163,7 @@ export default function ChallengeDetailsView(props) {
       <div styleName="challenge-details-view">
         <div styleName="challenge-specifications">
           <div styleName={`challenge-specs-main ${accentedStyle}`}>
-            {track.toLowerCase() !== "design" ? (
+            {track.toLowerCase() !== "design" && !selfService ? (
               <div>
                 {description && (
                   <article>
@@ -390,6 +390,7 @@ ChallengeDetailsView.propTypes = {
       reviewScorecardId: PT.oneOfType([PT.string, PT.number]),
       screeningScorecardId: PT.string,
       forumId: PT.number,
+      selfService: PT.bool,
     }),
     track: PT.string.isRequired,
     legacyId: PT.oneOfType([PT.string, PT.number]),

src/containers/Challenges/Listing/ChallengeItem/Tags/index.jsx

@@ -1,12 +1,13 @@
 import React, { useState, useMemo } from "react";
 import PT from "prop-types";
+import _ from 'lodash';
 import Tag from "../../../../../components/Tag";
 import * as util from "../../../../../utils/tag";
 import { useTargetSize } from "../../../../../utils/hooks/useTargetSize";
 
 import "./styles.scss";
 
-const Tags = ({ tags, onClickTag, tooltip }) => {
+const Tags = ({ tags, onClickTag, tooltip, isSelfService }) => {
   const Tooltip = tooltip;
 
   const [size, ref] = useTargetSize();
@@ -41,6 +42,7 @@ const Tags = ({ tags, onClickTag, tooltip }) => {
 
   return (
     <div styleName="tags" ref={ref}>
+      {isSelfService && <Tag tag="On Demand" onClick={_.noop}/>}
       {visibleTags.map((tag) => (
         <Tag tag={tag} key={tag} onClick={onClickTag} />
       ))}
@@ -54,11 +56,13 @@ const Tags = ({ tags, onClickTag, tooltip }) => {
 };
 
 Tags.defaultProps = {
+  isSelfService: false,
   tags: [],
   tooltip: ({ children }) => <>{children}</>,
 };
 
 Tags.propTypes = {
+  isSelfService: PT.bool,
   tags: PT.arrayOf(PT.string),
   onClickTag: PT.func,
 };

src/containers/Challenges/Listing/ChallengeItem/index.jsx

@@ -64,6 +64,7 @@ const ChallengeItem = ({ challenge, onClickTag, onClickTrack, isLoggedIn }) => {
         </div>
         <div styleName="tags">
           <Tags
+            isSelfService={_.get(challenge, 'legacy.selfService')}
             tags={challenge.tags}
             onClickTag={onClickTag}
             tooltip={({ children, more }) => (