Updated wording on time remaining in phase

#6815

Author: jmgasper

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

@@ -145,7 +145,7 @@ export default function ChallengeHeader(props) {
   const deadlineEnd = moment(nextPhase && phaseEndDate(nextPhase));
   const currentTime = moment();
 
-  const timeDiff = getTimeLeft(currentPhases, 'to go');
+  const timeDiff = getTimeLeft(currentPhases, 'to go', true);
 
   if (!timeDiff.late) {
     timeDiff.text = timeDiff.text.replace('to go', '');
@@ -447,7 +447,7 @@ export default function ChallengeHeader(props) {
                   (status || '').toLowerCase() === 'active'
                   && (
                   <div styleName="current-phase">
-                    {currentPhases && `${currentPhases.name} Ends: `}
+                    {currentPhases && `${currentPhases.name} Ends In: `}
                     <span styleName="deadline-highlighted">
                       {timeDiff.text}
                     </span>

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

@@ -55,6 +55,7 @@ export function getEndDate(challenge) {
 export function getTimeLeft(
   phase,
   toGoText = 'to go',
+  fullText = false,
 ) {
   const STALLED_TIME_LEFT_MSG = 'Challenge is currently on hold';
   const FF_TIME_LEFT_MSG = 'Winner is working on fixes';
@@ -71,9 +72,9 @@ export function getTimeLeft(
   if (late) time = -time;
 
   let format;
-  if (time > DAY_MS) format = 'D[d] H[h]';
-  else if (time > HOUR_MS) format = 'H[h] m[min]';
-  else format = 'm[min] s[s]';
+  if (time > DAY_MS) format = fullText ? 'D [day] H [hour]' : 'D[d] H[h]';
+  else if (time > HOUR_MS) format = fullText ? 'H [hour] m [minute]' : 'H[h] m[min]';
+  else format = fullText ? 'm [minute] s [second]' : 'm[min] s[s]';
 
   time = moment.duration(time).format(format);
   time = late ? `${time} Past Due` : `${time} ${toGoText}`;