Merge pull request #6953 from topcoder-platform/CORE-107

Core 107

.circleci/config.yml

@@ -349,14 +349,8 @@ workflows:
           filters:
             branches:
               only:
-                - TSJR-118
-                - PROD-4183
-                - changelog
                 - remove_submission_review
-                - standardised_skills
-                - TSJR-275
-                - skills_updates
-                - IC-15
+                - CORE-107
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global

__tests__/shared/components/challenge-detail/Winners/Winner/__snapshots__/index.jsx.snap

@@ -49,8 +49,7 @@ exports[`Matches shallow shapshot shapshot 1 1`] = `
     <div
       className="src-shared-components-challenge-detail-Winners-Winner-___style__prize___1snZ8"
     >
-      $
-      200
+      $200
     </div>
   </div>
   <div

src/shared/components/challenge-detail/Header/Prizes.jsx

@@ -23,8 +23,19 @@ export default function Prizes({ pointPrizes, prizes }) {
           const pair = [];
           const isPrizeIndexNotUndefined = !_.isUndefined(prizes[index])
             && !_.isUndefined(prizes[index].value);
-          if (isPrizeIndexNotUndefined) pair.push(prizes[index].value.toLocaleString());
-          if (!_.isUndefined(pointPrizes[index])) pair.push(`${pointPrizes[index]}pts`);
+
+          // Deal with point based prize displays, in addition to monetary prizes
+          if (isPrizeIndexNotUndefined && prizes[index].type === 'USD') {
+            pair.push(`$${prizes[index].value.toLocaleString()}`);
+          } else if (isPrizeIndexNotUndefined && prizes[index].type === 'POINT') {
+            // Handle a single prize point, so the display isn't plural
+            if (prizes[index].value === 1) {
+              pair.push(`${prizes[index].value}pt`);
+            } else {
+              pair.push(`${prizes[index].value}pts`);
+            }
+          }
+
           return (
             <div
               styleName="prize-fill"
@@ -40,13 +51,6 @@ export default function Prizes({ pointPrizes, prizes }) {
                 </p>
               </div>
               <p styleName="prize-money" aria-hidden="true">
-                {
-                  isPrizeIndexNotUndefined && (
-                  <span styleName="prize-currency">
-                    $
-                  </span>
-                  )
-                }
                 {pair.join(' + ')}
               </p>
             </div>

src/shared/components/challenge-detail/Winners/Winner/index.jsx

@@ -44,8 +44,21 @@ export default function Winner({
   }
 
   let prize = 'N/A';
+  // Default to USD for the prize type for now
+  let prizeType = 'USD';
   const prizeIndex = parseInt(winner.placement, 10) - 1;
-  if (prizes[prizeIndex]) prize = prizes[prizeIndex].value;
+  if (prizes[prizeIndex]) {
+    prize = prizes[prizeIndex].value;
+    prizeType = prizes[prizeIndex].type;
+  }
+
+  // Handle point prizes on the winners display
+  let prizeText = '';
+  if (prizeType === 'POINT') {
+    prizeText = numberWithCommas(prize);
+  } else {
+    prizeText = `$${numberWithCommas(prize)}`;
+  }
 
   return (
     <div styleName="winner">
@@ -86,8 +99,7 @@ export default function Winner({
 
       <div styleName="right">
         <div styleName="prize">
-          $
-          {numberWithCommas(prize)}
+          {prizeText}
         </div>
       </div>
       <div styleName="download-container">

src/shared/components/challenge-detail/Winners/index.jsx

@@ -30,6 +30,7 @@ export default function Winners({
   // todo: hide download button until update submissions API
   const hideDownloadForMMRDM = true;
   const [downloadingAll, setDownloadingAll] = useState(false);
+  const showWinnerHeader = prizes.length > 0 && prizes[0].type && (prizes[0].type === 'POINT');
   return (
     <div styleName="container">
       {
@@ -79,6 +80,12 @@ export default function Winners({
           </div>
         )
       }
+      {
+        // Show the new "Points" header when we have a points challenge
+        showWinnerHeader && (
+          <span styleName="winner-title">Points</span>
+        )
+      }
       {
         winners.map(w => (
           <Winner

src/shared/components/challenge-detail/Winners/style.scss

@@ -22,6 +22,20 @@
   width: 100%;
 }
 
+.winner-title {
+  @include roboto-regular;
+
+  display: block;
+  padding-bottom: 15px;
+  padding-right: 60px;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 16px;
+  text-align: right;
+  width: 100%;
+  color: black;
+}
+
 .block-download-all {
   display: flex;
   justify-content: flex-end;

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

@@ -31,11 +31,17 @@ export default function Tip({
     />
   ));
 
+  // Show a different header on the tooltip for points vs. prizes
+  let prizesHeader = 'Points';
+  if (prizeUnitSymbol === '$') {
+    prizesHeader = 'Prizes';
+  }
+
   return (
     <div styleName="prizes-tooltip">
       <div style={{ overflow: 'auto' }}>
         <h1>
-          Prizes
+          {prizesHeader}
         </h1>
         {prizesRender}
       </div>

src/shared/containers/challenge-detail/index.jsx

@@ -426,12 +426,19 @@ class ChallengeDetailPageContainer extends React.Component {
       challengePrizes = _.filter(placementPrizes.prizes, p => p.value > 0);
     }
 
-    /* Generation of data for SEO meta-tags. */
+    /* Generation of data for SEO meta-tags. Default to use $ if no prizes are accessible */
     let prizesStr = '';
-    if (!_.isEmpty(challengePrizes)) {
+    if (!_.isEmpty(challengePrizes) && challengePrizes[0].type && challengePrizes[0].type === 'USD') {
+      prizesStr = challengePrizes.map(p => `$${p.value}`).join('/');
+      prizesStr = `[${prizesStr}] - `;
+    } else if (!_.isEmpty(challengePrizes) && challengePrizes[0].type && challengePrizes[0].type === 'POINT') {
+      prizesStr = challengePrizes.map(p => `${p.value}pts`).join('/');
+      prizesStr = `[${prizesStr}] - `;
+    } else {
       prizesStr = challengePrizes.map(p => `$${p.value}`).join('/');
       prizesStr = `[${prizesStr}] - `;
     }
+
     const title = 'Topcoder Challenge | Topcoder Community | Topcoder';
     const description = 'Browse the challenges currently available on Topcoder. Search by type of challenge, then find those of interest to register for and compete in today.';
 

src/shared/utils/challenge-detail/helper.jsx

@@ -160,13 +160,21 @@ export function getPrizePurseUI(
  */
 export function getPrizePointsUI(challenge) {
   const placementPrizes = _.find(challenge.prizeSets, { type: 'placement' });
+
   if (placementPrizes) {
     const { prizes } = placementPrizes || [];
+    let prizeUnitSymbol = '$';
+    let purseLabel = 'Purse';
+    // Handle a points based prize (CORE-107)
+    if (prizes.length > 0 && prizes[0].type && prizes[0].type === 'POINT') {
+      prizeUnitSymbol = '';
+      purseLabel = 'Points';
+    }
     return (
       <Prize
-        label="Purse"
+        label={purseLabel}
         prizes={prizes}
-        prizeUnitSymbol="$"
+        prizeUnitSymbol={prizeUnitSymbol}
         totalPrize={prizes.reduce((acc, prize) => acc + prize.value, 0)}
       />
     );