From 10166866618989763b29c791e4a25e6b536c55de Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Mon, 16 Aug 2021 21:13:53 +0800
Subject: [PATCH] fix: add status mapping

---
 .../MilestoneChallengeRow.jsx                 | 21 ++-----------------
 .../MilestoneChallengeRow.scss                | 14 ++++---------
 2 files changed, 6 insertions(+), 29 deletions(-)

diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.jsx
index 17671da7b..4b2513126 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.jsx
@@ -10,9 +10,6 @@ import {
 
 import './MilestoneChallengeRow.scss'
 
-const STALLED_MSG = 'Stalled'
-const DRAFT_MSG = 'Draft'
-
 function MilestoneChallengeRow({challenge, isEmpty, isLoading, isUpdatable}) {
 
   if (isEmpty) {
@@ -43,32 +40,18 @@ function MilestoneChallengeRow({challenge, isEmpty, isLoading, isUpdatable}) {
     name,
     status,
     track,
-    type,
     startDate,
-    phases: allPhases,
     endDate
   } = challenge
 
-  let statusPhase = allPhases
-    .filter(p => p.name !== 'Registration' && p.isOpen)
-    .sort((a, b) => moment(a.scheduledEndDate).diff(b.scheduledEndDate))[0]
-
-  if (!statusPhase && type === 'First2Finish' && allPhases.length) {
-    statusPhase = _.clone(allPhases[0])
-    statusPhase.name = 'Submission'
-  }
-
-  let phaseMessage = STALLED_MSG
-  if (statusPhase) phaseMessage = statusPhase.name
-  else if (status === 'Draft') phaseMessage = DRAFT_MSG
-
+  const statusLabel = status.indexOf('Cancelled') === 0 ? 'Cancelled': status
 
   return (
     <tr styleName="challenge-table-row-wrap">
       <td colSpan={isUpdatable? '9': '8'}>
         <div styleName="challenge-table-row">
           <div styleName="title"><a href={`${CHALLENGE_DETAIL_APP}/${id}`}>{name}</a></div>
-          <div styleName="status"><div styleName={phaseMessage.split(' ').join('')}>{phaseMessage}</div></div>
+          <div styleName="status"><div styleName={statusLabel}>{statusLabel}</div></div>
           <div styleName="type"><div styleName={track.split(' ').join('')}>{track}</div></div>
           <div styleName="start-date">{moment(startDate).format('MM-DD-YYYY')}</div>
           <div styleName="end-date">{moment(endDate).format('MM-DD-YYYY')}</div>
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss
index 5e7462dfa..1bb3e912d 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss
@@ -29,17 +29,11 @@
       padding: 4px 0;
       text-align: center;
       color: #fff;
-      &.Submission { background-color: $tc-light-blue-100; }
-      &.IterativeReview { background-color: $tc-green-100; }
-      &.Registration { background-color: $tc-orange-100; }
-      &.Appeals { background-color: $tc-orange-100; }
-      &.AppealsResponse { background-color: $tc-orange-100; }
-      &.Post-Mortem { background-color: $tc-orange-100; }
+      &.New { background-color: $tc-yellow-100; }
+      &.Active { background-color: $tc-green-100; }
       &.Draft { background-color: $tc-gray-20; }
-      &.Stalled { background-color: $tc-gray-20; }
-      &.Completed { background-color: $tc-green-100; }
-      &.Review { background-color: $tc-orange-100; }
-      &.CheckpointReview { background-color: $tc-orange-100; }
+      &.Completed { background-color: $tc-dark-blue-100; }
+      &.Cancelled { background-color: $tc-gray-100; }
     }
 
   }