Style the shipment status as in the wireframes

cypress/integration/tsp/checkHeader.js

@@ -1,3 +1,5 @@
+import { tspUserVerifiesShipmentStatus } from '../../support/testTspStatus';
+
 /* global cy */
 describe('TSP User Checks Shipment Info Header', function() {
   beforeEach(() => {
@@ -28,7 +30,10 @@ function tspUserViewsHeaderInfo() {
   cy.contains('MOVE INFO — HHG CODE D');
 
   // Check the name is correct
-  cy.get('h1').contains('Submitted, HHG');
+  cy.get('div').contains('Submitted, HHG');
+
+  // Check the status
+  tspUserVerifiesShipmentStatus('Shipment awarded');
 
   // Check the info bar
   cy
@@ -41,7 +46,5 @@ function tspUserViewsHeaderInfo() {
     .parentsUntil('div')
     .contains('li', 'DoD ID# 4444567890')
     .parentsUntil('div')
-    .contains('li', 'Status: Awarded')
-    .parentsUntil('div')
     .contains('li', '555-555-5555');
 }

cypress/integration/tsp/generateGBL.js

@@ -1,3 +1,5 @@
+import { tspUserVerifiesShipmentStatus } from '../../support/testTspStatus';
+
 /* global cy */
 describe('TSP User generates GBL', function() {
   beforeEach(() => {
@@ -6,6 +8,7 @@ describe('TSP User generates GBL', function() {
 
   it('tsp user generates GBL from shipment info page', function() {
     tspUserGeneratesGBL();
+    tspUserVerifiesShipmentStatus('Outbound');
   });
 
   it('tsp user can open a GBL from the shipment info page', function() {

cypress/integration/tsp/premoveSurvey.js

@@ -1,3 +1,5 @@
+import { tspUserVerifiesShipmentStatus } from '../../support/testTspStatus';
+
 /* global cy */
 describe('TSP User Completes Premove Survey', function() {
   beforeEach(() => {
@@ -8,6 +10,7 @@ describe('TSP User Completes Premove Survey', function() {
     tspUserClicksEnterPreMoveSurvey();
     tspUserFillsInPreMoveSurveyWizard();
     tspUserVerifiesPreMoveSurveyEntered();
+    tspUserVerifiesShipmentStatus('Pre-move survey complete');
   });
 });
 
@@ -26,10 +29,7 @@ function tspUserClicksEnterPreMoveSurvey() {
   });
 
   // Status should be Approved for "Enter pre-move survey" button to exist
-  cy
-    .get('li')
-    .get('b')
-    .contains('Approved');
+  tspUserVerifiesShipmentStatus('Awaiting pre-move survey');
 
   cy
     .get('button')

cypress/integration/tsp/queues.js

@@ -1,3 +1,5 @@
+import { tspUserVerifiesShipmentStatus } from '../../support/testTspStatus';
+
 /* global cy */
 describe('TSP User Views Shipment', function() {
   beforeEach(() => {
@@ -80,11 +82,8 @@ function tspUserViewsInTransitShipments() {
     expect(loc.pathname).to.match(/^\/shipments\/[^/]+/);
   });
 
-  // Status should be In Transit
-  cy
-    .get('li')
-    .get('b')
-    .contains('In_transit');
+  // Status
+  tspUserVerifiesShipmentStatus('Inbound');
 
   cy.get('a').contains('In Transit Shipments Queue');
 }
@@ -109,11 +108,8 @@ function tspUserViewsDeliveredShipments() {
     expect(loc.pathname).to.match(/^\/shipments\/[^/]+/);
   });
 
-  // Status should be Delivered
-  cy
-    .get('li')
-    .get('b')
-    .contains('Delivered');
+  // Status
+  tspUserVerifiesShipmentStatus('Delivered');
 
   cy.get('a').contains('Delivered Shipments Queue');
 }
@@ -138,11 +134,8 @@ function tspUserViewsAcceptedShipments() {
     .contains('BACON3')
     .dblclick();
 
-  // Status should be Delivered
-  cy
-    .get('li')
-    .get('b')
-    .contains('Accepted');
+  // Status
+  tspUserVerifiesShipmentStatus('Shipment accepted');
 
   cy.get('a').contains('Accepted Shipments Queue');
 }
@@ -171,11 +164,8 @@ function tspUserViewsApprovedShipments() {
     .contains('APPRVD')
     .dblclick();
 
-  // Status should be Delivered
-  cy
-    .get('li')
-    .get('b')
-    .contains('Approved');
+  // Status
+  tspUserVerifiesShipmentStatus('Awaiting pre-move survey');
 
   cy.get('a').contains('Approved Shipments Queue');
 }
@@ -200,11 +190,8 @@ function tspUserViewsCompletedShipments() {
     .contains('NOCHKA')
     .dblclick();
 
-  // Status should be Delivered
-  cy
-    .get('li')
-    .get('b')
-    .contains('Completed');
+  // Status
+  tspUserVerifiesShipmentStatus('Delivered');
 
   cy.get('a').contains('Completed Shipments Queue');
 }

cypress/integration/tsp/serviceAgents.js

@@ -5,6 +5,7 @@ import {
   userInputsServiceAgent,
   userSavesServiceAgent,
 } from '../../support/testTspServiceAgents';
+import { tspUserVerifiesShipmentStatus } from '../../support/testTspStatus';
 
 /* global cy */
 describe('TSP User enters and updates Service Agents', function() {
@@ -120,10 +121,7 @@ function tspUserAcceptsShipment() {
   });
 
   // Status should be Awarded
-  cy
-    .get('li')
-    .get('b')
-    .contains('Awarded');
+  tspUserVerifiesShipmentStatus('Shipment awarded');
 
   cy.get('a').contains('New Shipments Queue');
 
@@ -138,10 +136,7 @@ function tspUserAcceptsShipment() {
     .click();
 
   // Status should be Accepted
-  cy
-    .get('li')
-    .get('b')
-    .contains('Accepted');
+  tspUserVerifiesShipmentStatus('Shipment accepted');
 
   cy.get('a').contains('Accepted Shipments Queue');
 }
@@ -160,10 +155,7 @@ function tspUserClicksAssignServiceAgent(locator) {
   });
 
   // Status should be Accepted or Approved for "Assign servicing agents" button to exist
-  cy
-    .get('li')
-    .get('b')
-    .contains('Accepted');
+  tspUserVerifiesShipmentStatus('Shipment accepted');
 
   cy
     .get('button')

cypress/integration/tsp/shipShipment.js

@@ -1,4 +1,5 @@
 import { testPremoveSurvey } from '../../support/testPremoveSurvey';
+import { tspUserVerifiesShipmentStatus } from '../../support/testTspStatus';
 
 /* global cy */
 describe('TSP User Ships a Shipment', function() {
@@ -12,17 +13,13 @@ describe('TSP User Ships a Shipment', function() {
 
   it('tsp user enters a delivery date', function() {
     tspUserVisitsAnInTransitShipment('ENTDEL');
-    tspUserVerifiesShipmentStatus('In_transit');
+    tspUserVerifiesShipmentStatus('Inbound');
     tspUserCancelsEnteringADeliveryDate();
     tspUserEntersADeliveryDate();
     tspUserVerifiesShipmentStatus('Delivered');
   });
 });
 
-function tspUserVerifiesShipmentStatus(status) {
-  cy.get('.move-info-header-meta > li').contains(`Status: ${status}`);
-}
-
 function tspUserCancelsEnteringADeliveryDate() {
   cy
     .get('button')
@@ -283,7 +280,7 @@ function tspUserEntersPackAndPickUpInfo() {
   });
 
   // New status
-  cy.get('li').contains('In_transit');
+  tspUserVerifiesShipmentStatus('Inbound');
 }
 
 function tspUserDeliversShipment() {
@@ -352,5 +349,5 @@ function tspUserDeliversShipment() {
     .click();
 
   // New status
-  cy.get('li').contains('Delivered');
+  tspUserVerifiesShipmentStatus('Delivered');
 }

cypress/support/testTspStatus.js

@@ -0,0 +1,3 @@
+export function tspUserVerifiesShipmentStatus(status) {
+  cy.get('.shipment-status').contains(`Status: ${status}`);
+}

src/scenes/TransportationServiceProvider/ShipmentInfo.jsx

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
-import { get, capitalize } from 'lodash';
+import { get } from 'lodash';
 import { NavLink, Link } from 'react-router-dom';
 import { reduxForm } from 'redux-form';
 import faPlusCircle from '@fortawesome/fontawesome-free-solid/faPlusCircle';
@@ -212,6 +212,24 @@ class ShipmentInfo extends Component {
     const canEnterPreMoveSurvey = approved && hasOriginServiceAgent(serviceAgents) && !hasPreMoveSurvey(shipment);
     const canEnterPackAndPickup = approved && gblGenerated;
 
+    // Some statuses are directly related to the shipment status and some to combo states
+    var statusText = 'Unknown status';
+    if (awarded) {
+      statusText = 'Shipment awarded';
+    } else if (accepted) {
+      statusText = 'Shipment accepted';
+    } else if (approved && !pmSurveyComplete) {
+      statusText = 'Awaiting pre-move survey';
+    } else if (approved && pmSurveyComplete && !gblGenerated) {
+      statusText = 'Pre-move survey complete';
+    } else if (approved && pmSurveyComplete && gblGenerated) {
+      statusText = 'Outbound';
+    } else if (inTransit) {
+      statusText = 'Inbound';
+    } else if (delivered || completed) {
+      statusText = 'Delivered';
+    }
+
     if (this.state.redirectToHome) {
       return <Redirect to="/" />;
     }
@@ -223,11 +241,16 @@ class ShipmentInfo extends Component {
     return (
       <div>
         <div className="usa-grid grid-wide">
-          <div className="usa-width-two-thirds">
-            MOVE INFO &mdash; {move.selected_move_type} CODE {shipment.traffic_distribution_list.code_of_service}
-            <h1>
-              {serviceMember.last_name}, {serviceMember.first_name}
-            </h1>
+          <div className="usa-width-two-thirds page-title">
+            <div className="move-info">
+              <div className="move-info-code">
+                MOVE INFO &mdash; {move.selected_move_type} CODE {shipment.traffic_distribution_list.code_of_service}
+              </div>
+              <div className="service-member-name">
+                {serviceMember.last_name}, {serviceMember.first_name}
+              </div>
+            </div>
+            <div className="shipment-status">Status: {statusText}</div>
           </div>
           <div className="usa-width-one-third nav-controls">
             {awarded && (
@@ -300,10 +323,6 @@ class ShipmentInfo extends Component {
                 {serviceMember.email_is_preferred && <FontAwesomeIcon className="icon" icon={faEmail} />}
                 &nbsp;
               </li>
-              <li>
-                Status: <b>{capitalize(this.props.shipment.status)}</b>
-                &nbsp;
-              </li>
             </ul>
           </div>
         </div>

src/scenes/TransportationServiceProvider/tsp.css

@@ -203,3 +203,57 @@
 .infoPanel-wizard .infoPanel-wizard-help {
   margin-bottom: 0px;
 }
+
+.page-title {
+  display: flex;
+  align-items: flex-end;
+  margin-top: 24px;
+  margin-bottom: 8px;
+}
+
+.move-info {
+  display: block;
+}
+
+.move-info-code {
+  text-transform: uppercase;
+  display: block;
+}
+
+.service-member-name {
+  font-size: 4rem;
+  font-weight: 700;
+  line-height: 4rem;
+}
+
+@keyframes shipmentStatusFade {
+  from {
+    background-color: rgb(231, 244, 228);
+    color: rgb(46, 133, 64);
+  }
+
+  to {
+    background-color: rgb(241, 241, 241);
+    color: #212121;
+  }
+}
+
+.shipment-status {
+  display: inline-block;
+  font-weight: bold;
+  margin-left: 24px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 12px;
+  padding-right: 12px;
+  position: relative;
+
+  /* Fall back color if animation doesn't work */
+  background-color: rgb(241, 241, 241);
+  color: #212121;
+
+  /* Animation to fade from green to black/grey */
+  animation: shipmentStatusFade ease-in 1;
+  animation-fill-mode: forwards;
+  animation-duration: 2s;
+}