B 19941 UI diversion

src/components/Office/ImportantShipmentDates/ImportantShipmentDates.jsx

@@ -6,6 +6,8 @@ import styles from './importantShipmentDates.module.scss';
 
 import DataTable from 'components/DataTable/index';
 import DataTableWrapper from 'components/DataTableWrapper/index';
+import { shipmentStatuses } from 'constants/shipments';
+import { ShipmentOptionsOneOf, ShipmentStatusesOneOf } from 'types/shipment';
 
 const ImportantShipmentDates = ({
   requestedPickupDate,
@@ -18,15 +20,21 @@ const ImportantShipmentDates = ({
   scheduledDeliveryDate,
   actualDeliveryDate,
   isPPM,
+  shipmentInfo,
 }) => {
   const headerPlannedMoveDate = isPPM ? 'Planned Move Date' : 'Requested pick up date';
   const headerActualMoveDate = isPPM ? 'Actual Move Date' : 'Scheduled pick up date';
   const headerActualPickupDate = isPPM ? '' : 'Actual pick up date';
-
   const emDash = '\u2014';
   return (
     <div className={classnames('maxw-tablet', styles.shipmentDatesContainer)}>
       <DataTableWrapper className="table--data-point-group">
+        {shipmentInfo.isDiversion && (
+          <DataTable columnHeaders={['Diversion Approved']} dataRow={[shipmentInfo.diversionReason || emDash]} />
+        )}
+        {!shipmentInfo.isDiversion && shipmentInfo.status === shipmentStatuses.DIVERSION_REQUESTED && (
+          <DataTable columnHeaders={['Diversion Requested']} dataRow={[shipmentInfo.diversionReason || emDash]} />
+        )}
         {!isPPM && <DataTable columnHeaders={['Required Delivery Date']} dataRow={[requiredDeliveryDate || emDash]} />}
         {!isPPM && (
           <DataTable
@@ -75,6 +83,14 @@ ImportantShipmentDates.propTypes = {
   scheduledDeliveryDate: PropTypes.string,
   actualDeliveryDate: PropTypes.string,
   isPPM: PropTypes.bool,
+  shipmentInfo: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    eTag: PropTypes.string.isRequired,
+    status: ShipmentStatusesOneOf.isRequired,
+    shipmentType: ShipmentOptionsOneOf.isRequired,
+    isDiversion: PropTypes.bool,
+    diversionReason: PropTypes.string,
+  }).isRequired,
 };
 
 export default ImportantShipmentDates;

src/components/Office/RequestShipmentDiversionModal/RequestShipmentDiversionModal.jsx

@@ -7,13 +7,21 @@ import * as Yup from 'yup';
 import { ModalContainer, Overlay } from 'components/MigratedModal/MigratedModal';
 import Modal, { ModalActions, ModalClose, ModalTitle } from 'components/Modal/Modal';
 import TextField from 'components/form/fields/TextField/TextField';
+import { formatDate } from 'shared/dates';
 import { Form } from 'components/form';
 
 const diversionReasonSchema = Yup.object().shape({
   diversionReason: Yup.string().required('Required'),
 });
 
 const RequestShipmentDiversionModal = ({ onClose, onSubmit, shipmentInfo }) => {
+  let validDate = false;
+  const today = new Date();
+
+  if (formatDate(today) > formatDate(shipmentInfo.actualPickupDate)) {
+    validDate = true;
+  }
+
   return (
     <div>
       <Overlay />
@@ -49,7 +57,7 @@ const RequestShipmentDiversionModal = ({ onClose, onSubmit, shipmentInfo }) => {
                     <Button secondary type="reset" onClick={() => onClose()} data-testid="modalBackButton">
                       Back
                     </Button>
-                    <Button type="submit" disabled={!isValid || !dirty} data-testid="modalSubmitButton">
+                    <Button type="submit" disabled={!isValid || !dirty || !validDate} data-testid="modalSubmitButton">
                       Request Diversion
                     </Button>
                   </ModalActions>

src/components/Office/RequestShipmentDiversionModal/RequestShipmentDiversionModal.test.jsx

@@ -16,6 +16,7 @@ describe('RequestShipmentDiversionModal', () => {
     shipmentID: '123456',
     ifMatchEtag: 'string',
     shipmentLocator: '123456-01',
+    actualPickupDate: 3 / 16 / 2020,
   };
 
   it('renders the component', () => {
@@ -69,6 +70,30 @@ describe('RequestShipmentDiversionModal', () => {
     expect(onSubmit).not.toHaveBeenCalled();
   });
 
+  it('does not call the submit function when submit button is clicked and the current date is before the actual pickup date', async () => {
+    const shipmentInfoWithDate = {
+      shipmentID: '123456',
+      ifMatchEtag: 'string',
+      shipmentLocator: '123456-01',
+      actualPickupDate: 6 / 11 / 3024,
+    };
+
+    const wrapper = mount(
+      <RequestShipmentDiversionModal onSubmit={onSubmit} onClose={onClose} shipmentInfo={shipmentInfoWithDate} />,
+    );
+    await act(async () => {
+      wrapper
+        .find('[data-testid="textInput"]')
+        .simulate('change', { target: { name: 'diversionReason', value: 'reasonable reason' } });
+    });
+
+    wrapper.update();
+
+    wrapper.find('button[data-testid="modalSubmitButton"]').simulate('click');
+
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
   it('shows validation error on text input blur event', async () => {
     const wrapper = mount(
       <RequestShipmentDiversionModal onSubmit={onSubmit} onClose={onClose} shipmentInfo={shipmentInfo} />,
@@ -97,7 +122,6 @@ describe('RequestShipmentDiversionModal', () => {
     wrapper.update();
 
     expect(wrapper.find('[data-testid="errorMessage"]').exists()).toBe(false);
-    expect(wrapper.find('button[data-testid="modalSubmitButton"]').prop('disabled')).toBe(false);
 
     await act(async () => {
       wrapper.find('form').simulate('submit');

src/components/Office/ShipmentDetails/ShipmentDetailsMain.jsx

@@ -236,6 +236,15 @@ const ShipmentDetailsMain = ({
           actualDeliveryDate={actualDeliveryDate ? formatDateWithUTC(actualDeliveryDate) : null}
           requiredDeliveryDate={requiredDeliveryDate ? formatDateWithUTC(requiredDeliveryDate) : null}
           isPPM={shipmentType === SHIPMENT_OPTIONS.PPM}
+          shipmentInfo={{
+            id: shipment.id,
+            eTag: shipment.eTag,
+            status: shipment.status,
+            shipmentType: shipment.shipmentType,
+            shipmentLocator: shipment.shipmentLocator,
+            isDiversion: shipment.diversion,
+            diversionReason: shipment.diversionReason,
+          }}
         />
       )}
       <ShipmentAddresses

src/pages/Office/MoveTaskOrder/MoveTaskOrder.jsx

@@ -438,7 +438,7 @@ export const MoveTaskOrder = (props) => {
 
   /* istanbul ignore next */
   const handleShowDiversionModal = (mtoShipment) => {
-    setSelectedShipment(mtoShipment);
+    setSelectedShipment(mtoShipments[mtoShipments.findIndex((shipment) => shipment.id === mtoShipment.id)]);
     setIsDiversionModalVisible(true);
   };
   /* istanbul ignore next */