Merge pull request #6661 from topcoder-platform/PROD-2944

Prod 2944

Author: luizrrodrigues

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

@@ -35,7 +35,6 @@ export default function DeadlinesPanel({ deadlines }) {
       }
     }
     if (index === deadlines.length - 1) {
-      name = 'Winners Announced';
       showRange = false;
     }
 

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

@@ -17,6 +17,9 @@ import { PrimaryButton } from 'topcoder-react-ui-kit';
 import { Link } from 'topcoder-react-utils';
 import { COMPETITION_TRACKS } from 'utils/tc';
 import { phaseEndDate } from 'utils/challenge-listing/helper';
+import {
+  getTimeLeft,
+} from 'utils/challenge-detail/helper';
 
 import LeftArrow from 'assets/images/arrow-prev.svg';
 
@@ -30,6 +33,10 @@ import TabSelector from './TabSelector';
 
 import style from './style.scss';
 
+/* Holds day and hour range in ms. */
+const HOUR_MS = 60 * 60 * 1000;
+const DAY_MS = 24 * HOUR_MS;
+
 export default function ChallengeHeader(props) {
   const {
     isLoggedIn,
@@ -108,6 +115,10 @@ export default function ChallengeHeader(props) {
     registrationEnded = !regPhase.isOpen;
   }
 
+  const currentPhases = challenge.phases
+    .filter(p => p.name !== 'Registration' && p.isOpen)
+    .sort((a, b) => moment(a.scheduledEndDate).diff(b.scheduledEndDate))[0];
+
   const trackLower = track ? track.replace(' ', '-').toLowerCase() : 'design';
 
   const eventNames = (events || []).map((event => (event.eventName || '').toUpperCase()));
@@ -128,6 +139,31 @@ export default function ChallengeHeader(props) {
     */
   const hasSubmissions = !_.isEmpty(mySubmissions);
 
+  const openPhases = sortedAllPhases.filter(p => p.isOpen);
+  let nextPhase = openPhases[0];
+  if (hasRegistered && openPhases[0] && openPhases[0].name === 'Registration') {
+    nextPhase = openPhases[1] || {};
+  }
+
+  const deadlineEnd = moment(nextPhase && phaseEndDate(nextPhase));
+  const currentTime = moment();
+
+  const timeDiff = getTimeLeft(currentPhases, 'to go');
+
+  if (!timeDiff.late) {
+    timeDiff.text = timeDiff.text.replace('to go', '');
+  }
+
+  let timeLeft = deadlineEnd.isAfter(currentTime)
+    ? deadlineEnd.diff(currentTime) : 0;
+
+  let format;
+  if (timeLeft > DAY_MS) format = 'D[d] H[h]';
+  else if (timeLeft > HOUR_MS) format = 'H[h] m[min]';
+  else format = 'm[min] s[s]';
+
+  timeLeft = moment.duration(timeLeft).format(format);
+
   let relevantPhases = [];
 
   if (showDeadlineDetail) {
@@ -177,31 +213,57 @@ export default function ChallengeHeader(props) {
           || phaseEndDate(p).getTime() < endPhaseDate));
       relevantPhases.push({
         id: -1,
-        name: 'Winners',
+        name: 'Winners Announced',
         isOpen: false,
         actualEndDate: endPhaseDate,
         scheduledEndDate: endPhaseDate,
       });
     } else if (relevantPhases.length > 1) {
-      const lastPhase = relevantPhases[relevantPhases.length - 1];
-      const lastPhaseTime = phaseEndDate(lastPhase).getTime();
-
+      // const lastPhase = relevantPhases[relevantPhases.length - 1];
+      // const lastPhaseTime = phaseEndDate(lastPhase).getTime();
       const appealsEndDate = phaseEndDate(sortedAllPhases[sortedAllPhases.length - 1]);
-      const appealsEnd = appealsEndDate.getTime();
-      if (lastPhaseTime < appealsEnd) {
-        relevantPhases.push({
-          id: -1,
-          name: 'Winners',
-          isOpen: false,
-          actualEndDate: appealsEndDate,
-          scheduledEndDate: appealsEndDate,
-        });
-      }
+      // const appealsEnd = appealsEndDate.getTime();
+      relevantPhases.push({
+        id: -1,
+        name: 'Winners Announced',
+        isOpen: false,
+        actualEndDate: appealsEndDate,
+        scheduledEndDate: appealsEndDate,
+      });
     }
   }
 
   const checkpointCount = checkpoints && checkpoints.numberOfPassedScreeningSubmissions;
 
+  let nextDeadlineMsg;
+  switch ((status || '').toLowerCase()) {
+    case 'completed':
+      nextDeadlineMsg = (
+        <div styleName="completed">
+          The challenge is finished.
+        </div>
+      );
+      break;
+    case 'draft':
+      nextDeadlineMsg = (
+        <div styleName="draft">
+          In Draft
+        </div>
+      );
+      break;
+    default:
+      // nextDeadlineMsg = (
+      //   <div>
+      //     Status:
+      //     &zwnj;
+      //     <span styleName="deadline-highlighted">
+      //       {_.upperFirst(_.lowerCase(status))}
+      //     </span>
+      //   </div>
+      // );
+      break;
+  }
+
   // Legacy MMs have a roundId field, but new MMs do not.
   // This is used to disable registration/submission for legacy MMs.
   const isLegacyMM = isMM(challenge) && Boolean(challenge.roundId);
@@ -382,7 +444,18 @@ export default function ChallengeHeader(props) {
         <div styleName="deadlines-view">
           <div styleName={`deadlines-overview ${showDeadlineDetail ? 'opened' : ''}`}>
             <div styleName="deadlines-overview-text">
-              Competition Timeline
+              {nextDeadlineMsg}
+              {
+                  (status || '').toLowerCase() === 'active'
+                  && (
+                  <div styleName="current-phase">
+                    {currentPhases && `${currentPhases.name} Ends: `}
+                    <span styleName="deadline-highlighted">
+                      {timeDiff.text}
+                    </span>
+                  </div>
+                  )
+                }
             </div>
             <a
               onClick={onToggleDeadlines}
@@ -462,7 +535,6 @@ ChallengeHeader.propTypes = {
     timelineTemplateId: PT.string,
     reliabilityBonus: PT.any,
     userDetails: PT.any,
-    currentPhases: PT.any,
     numOfRegistrants: PT.any,
     numOfCheckpointSubmissions: PT.any,
     numOfSubmissions: PT.any,

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

@@ -555,10 +555,9 @@
 
       .deadlines-overview {
         background-color: #555;
-        display: none;
         align-items: center;
         justify-content: space-between;
-        height: 56px;
+        height: 60px;
         border-bottom-left-radius: 8px;
         border-bottom-right-radius: 8px;
 
@@ -572,12 +571,49 @@
         }
 
         .deadlines-overview-text {
-          @include barlow-semi-bold;
+          @include roboto-regular;
 
+          display: flex;
+          justify-content: flex-start;
           color: $tc-white;
-          font-size: 16px;
-          line-height: 18px;
-          text-transform: uppercase;
+          line-height: 20px;
+          padding: 24px 23px;
+          font-size: 15px;
+
+          @include xs-to-md {
+            flex-direction: column;
+            padding: 0;
+          }
+
+          .next-deadline {
+            word-wrap: normal;
+            border-right: $tc-gray-50 solid 1px;
+            padding-right: 10px;
+            display: inline;
+
+            @include xs-to-md {
+              border-right: none;
+            }
+          }
+
+          .completed,
+          .draft {
+            border-right: none;
+          }
+
+          .current-phase {
+            overflow-wrap: normal;
+
+            @include xs-to-md {
+              padding-left: 0;
+              margin-top: 4px;
+            }
+          }
+
+          .deadline-highlighted {
+            color: $tc-white;
+            font-weight: 700;
+          }
         }
 
         .deadlines-collapser {