Merge pull request #14557 from transcom/INT-B-21507_POD-POE_TOO_Valid…

…ation

Int b 21507 pod poe too validation

src/components/Office/PortTable/PortTable.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import DataTableWrapper from '../../DataTableWrapper/index';
+import DataTable from '../../DataTable/index';
+import styles from '../ShipmentAddresses/ShipmentAddresses.module.scss';
+
+import { formatPortInfo } from 'utils/formatters';
+
+const PortTable = ({ poeLocation, podLocation }) => {
+  return (
+    <DataTableWrapper className={classnames('maxw-tablet', 'table--data-point-group', styles.mtoShipmentAddresses)}>
+      <DataTable
+        columnHeaders={['Port of Embarkation', 'Port of Debarkation']}
+        dataRow={[formatPortInfo(poeLocation), formatPortInfo(podLocation)]}
+      />
+    </DataTableWrapper>
+  );
+};
+
+export default PortTable;

src/components/Office/PortTable/PortTable.stories.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import PortTable from './PortTable';
+
+const poeLocationSet = {
+  poeLocation: {
+    portCode: 'PDX',
+    portName: 'PORTLAND INTL',
+    city: 'PORTLAND',
+    state: 'OREGON',
+    zip: '97220',
+  },
+  podLocation: null,
+};
+
+const podLocationSet = {
+  poeLocation: null,
+  podLocation: {
+    portCode: 'SEA',
+    portName: 'SEATTLE TACOMA INTL',
+    city: 'SEATTLE',
+    state: 'WASHINGTON',
+    zip: '98158',
+  },
+};
+
+export default {
+  title: 'Office Components / PortTable',
+  component: PortTable,
+};
+
+export const standard = () => {
+  return (
+    <div className="officeApp">
+      <PortTable {...poeLocationSet} />
+    </div>
+  );
+};
+
+export const podLocationDisplay = () => {
+  return (
+    <div className="officeApp">
+      <PortTable {...podLocationSet} />
+    </div>
+  );
+};

src/components/Office/PortTable/PortTable.test.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import PortTable from './PortTable';
+
+const poeLocationSet = {
+  poeLocation: {
+    portCode: 'PDX',
+    portName: 'PORTLAND INTL',
+    city: 'PORTLAND',
+    state: 'OREGON',
+    zip: '97220',
+  },
+  podLocation: null,
+};
+
+const podLocationSet = {
+  poeLocation: null,
+  podLocation: {
+    portCode: 'SEA',
+    portName: 'SEATTLE TACOMA INTL',
+    city: 'SEATTLE',
+    state: 'WASHINGTON',
+    zip: '98158',
+  },
+};
+
+const nullPortLocation = {
+  poeLocation: null,
+  podLocation: null,
+};
+
+describe('PortTable', () => {
+  it('renders POE location if poeLocation is set', async () => {
+    render(<PortTable {...poeLocationSet} />);
+    expect(screen.getByText(/PDX - PORTLAND INTL/)).toBeInTheDocument();
+    expect(screen.getByText(/Portland, Oregon 97220/)).toBeInTheDocument();
+    expect(screen.queryByText(/SEA - SEATTLE TACOMA INTL/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Seattle, Washington 98158/)).not.toBeInTheDocument();
+  });
+
+  it('renders POD location if podLocation is set', async () => {
+    render(<PortTable {...podLocationSet} />);
+    expect(screen.queryByText(/PDX - PORTLAND INTL/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Portland, Oregon 97220/)).not.toBeInTheDocument();
+    expect(screen.getByText(/SEA - SEATTLE TACOMA INTL/)).toBeInTheDocument();
+    expect(screen.getByText(/Seattle, Washington 98158/)).toBeInTheDocument();
+  });
+
+  it('does not render port information if poeLocation and podLocation are null', async () => {
+    render(<PortTable {...nullPortLocation} />);
+    expect(screen.queryByText(/PDX - PORTLAND INTL/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Portland, Oregon 97220/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/SEA - SEATTLE TACOMA INTL/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Seattle, Washington 98158/)).not.toBeInTheDocument();
+  });
+});

src/components/Office/ShipmentAddresses/ShipmentAddresses.jsx

@@ -11,7 +11,6 @@ import DataTable from '../../DataTable/index';
 
 import styles from './ShipmentAddresses.module.scss';
 
-import { formatPortInfo } from 'utils/formatters';
 import { shipmentStatuses } from 'constants/shipments';
 import { ShipmentOptionsOneOf, ShipmentStatusesOneOf } from 'types/shipment';
 import { SHIPMENT_OPTIONS } from 'shared/constants';
@@ -26,8 +25,6 @@ const ShipmentAddresses = ({
   handleShowDiversionModal,
   shipmentInfo,
   isMoveLocked,
-  poeLocation,
-  podLocation,
 }) => {
   let pickupHeader;
   let destinationHeader;
@@ -88,12 +85,6 @@ const ShipmentAddresses = ({
         icon={<FontAwesomeIcon icon="arrow-right" />}
         data-testid="pickupDestinationAddress"
       />
-      {(poeLocation || podLocation) && (
-        <DataTable
-          columnHeaders={['Port of Embarkation', 'Port of Debarkation']}
-          dataRow={[formatPortInfo(poeLocation), formatPortInfo(podLocation)]}
-        />
-      )}
     </DataTableWrapper>
   );
 };

src/components/Office/ShipmentAddresses/ShipmentAddresses.test.jsx

@@ -42,8 +42,6 @@ const testProps = {
     shipmentLocator: 'ABCDEF-01',
   },
   diversionReason: '',
-  poeLocation: null,
-  podLocation: null,
 };
 
 const ppmShipment = {
@@ -119,17 +117,6 @@ const cancellationRequestedShipment = {
   },
 };
 
-const shipmentWithPort = {
-  ...testProps,
-  poeLocation: {
-    portCode: 'PDX',
-    portName: 'PORTLAND INTL',
-    city: 'PORTLAND',
-    state: 'OREGON',
-    zip: '97220',
-  },
-};
-
 describe('ShipmentAddresses', () => {
   it('calls props.handleShowDiversionModal on request diversion button click', async () => {
     render(
@@ -246,10 +233,4 @@ describe('ShipmentAddresses', () => {
     const requestDiversionBtn = screen.getByRole('button', { name: 'Request Diversion' });
     expect(requestDiversionBtn).toBeDisabled();
   });
-
-  it('renders port of embarkation and debarkation if one is set', async () => {
-    render(<ShipmentAddresses {...shipmentWithPort} />);
-    expect(screen.getByText('Port of Embarkation')).toBeInTheDocument();
-    expect(screen.getByText('Port of Debarkation')).toBeInTheDocument();
-  });
 });

src/components/Office/ShipmentDetails/ShipmentDetailsMain.jsx

@@ -15,6 +15,7 @@ import ConvertSITToCustomerExpenseModal from 'components/Office/ConvertSITToCust
 import ShipmentSITDisplay from 'components/Office/ShipmentSITDisplay/ShipmentSITDisplay';
 import ImportantShipmentDates from 'components/Office/ImportantShipmentDates/ImportantShipmentDates';
 import ShipmentAddresses from 'components/Office/ShipmentAddresses/ShipmentAddresses';
+import PortTable from 'components/Office/PortTable/PortTable';
 import ShipmentWeightDetails from 'components/Office/ShipmentWeightDetails/ShipmentWeightDetails';
 import ShipmentRemarks from 'components/Office/ShipmentRemarks/ShipmentRemarks';
 import Restricted from 'components/Restricted/Restricted';
@@ -268,9 +269,10 @@ const ShipmentDetailsMain = ({
         }}
         handleShowDiversionModal={handleShowDiversionModal}
         isMoveLocked={isMoveLocked}
-        poeLocation={displayPoeLocation}
-        podLocation={displayPodLocation}
       />
+      {(displayPoeLocation || displayPodLocation) && (
+        <PortTable poeLocation={displayPoeLocation} podLocation={displayPodLocation} />
+      )}
       <ShipmentWeightDetails
         estimatedWeight={weightResult}
         initialWeight={primeActualWeight}

src/components/Office/ShipmentDetails/ShipmentDetailsMain.test.jsx

@@ -116,3 +116,72 @@ it('does display PPM shipment', () => {
 
   expect(screen.queryByText(formatDateWithUTC('2024-01-01'))).toBeInTheDocument();
 });
+
+describe('Shipment Details Main - PortTable', () => {
+  const poeLocation = {
+    portCode: 'PDX',
+    portName: 'PORTLAND INTL',
+    city: 'PORTLAND',
+    state: 'OREGON',
+    zip: '97220',
+  };
+
+  const podLocation = {
+    portCode: 'SEA',
+    portName: 'SEATTLE TACOMA INTL',
+    city: 'SEATTLE',
+    state: 'WASHINGTON',
+    zip: '98158',
+  };
+
+  it('displays PortTable when poeLocation is provided', () => {
+    const shipmentWithPOELocation = {
+      ...noSITShipment,
+      poeLocation,
+      podLocation: null,
+    };
+
+    render(
+      <MockProviders>
+        <ShipmentDetailsMain {...shipmentDetailsMainParams} shipment={shipmentWithPOELocation} />
+      </MockProviders>,
+    );
+
+    expect(screen.getByText('Port of Embarkation')).toBeInTheDocument();
+    expect(screen.getByText('Port of Debarkation')).toBeInTheDocument();
+  });
+
+  it('displays PortTable when podLocation is provided', () => {
+    const shipmentWithPODLocation = {
+      ...noSITShipment,
+      poeLocation: null,
+      podLocation,
+    };
+
+    render(
+      <MockProviders>
+        <ShipmentDetailsMain {...shipmentDetailsMainParams} shipment={shipmentWithPODLocation} />
+      </MockProviders>,
+    );
+
+    expect(screen.getByText('Port of Embarkation')).toBeInTheDocument();
+    expect(screen.getByText('Port of Debarkation')).toBeInTheDocument();
+  });
+
+  it('does not display PortTable when poeLocation and podLocation are not provided', () => {
+    const shipmentWithNoPortLocation = {
+      ...noSITShipment,
+      poeLocation: null,
+      podLocation: null,
+    };
+
+    render(
+      <MockProviders>
+        <ShipmentDetailsMain {...shipmentDetailsMainParams} shipment={shipmentWithNoPortLocation} />
+      </MockProviders>,
+    );
+
+    expect(screen.queryByText('Port of Embarkation')).not.toBeInTheDocument();
+    expect(screen.queryByText('Port of Debarkation')).not.toBeInTheDocument();
+  });
+});