INT B-21549

src/components/PrimeUI/Shipment/Shipment.test.jsx

@@ -585,3 +585,148 @@ describe('PPM shipments are handled', () => {
     expect(deleteShipmentButton).not.toBeInTheDocument();
   });
 });
+
+const boatShipment = {
+  actualPickupDate: null,
+  approvedDate: null,
+  counselorRemarks: 'These are counselor remarks for a PPM.',
+  createdAt: '2022-07-01T13:41:33.261Z',
+  destinationAddress: {
+    city: null,
+    postalCode: null,
+    state: null,
+    streetAddress1: null,
+  },
+  eTag: 'MjAyMi0wNy0wMVQxNDoyMzoxOS43MzgzODla',
+  firstAvailableDeliveryDate: null,
+  id: '1b695b60-c3ed-401b-b2e3-808d095eb8cc',
+  moveTaskOrderID: '7024c8c5-52ca-4639-bf69-dd8238308c98',
+  pickupAddress: {
+    city: null,
+    postalCode: null,
+    state: null,
+    streetAddress1: null,
+  },
+  boatShipment: {
+    type: 'HAUL_AWAY',
+    year: '2022',
+    make: 'Yamaha',
+    model: '242X',
+    lengthInInches: 288, // 24 feet
+    widthInInches: 102, // 8 feet 6 inches
+    heightInInches: 84, // 7 feet
+    hasTrailer: true,
+    isRoadworthy: true,
+  },
+  primeEstimatedWeightRecordedDate: null,
+  requestedPickupDate: null,
+  requiredDeliveryDate: null,
+  scheduledPickupDate: null,
+  secondaryDeliveryAddress: {
+    city: null,
+    postalCode: null,
+    state: null,
+    streetAddress1: null,
+  },
+  secondaryPickupAddress: {
+    city: null,
+    postalCode: null,
+    state: null,
+    streetAddress1: null,
+  },
+  shipmentType: 'PPM',
+  status: 'APPROVED',
+  updatedAt: '2022-07-01T14:23:19.738Z',
+  mtoServiceItems: [],
+};
+
+const boatShipmentWaitingOnCustomer = {
+  ...boatShipment,
+  boatShipment: {
+    ...boatShipment.ppmShipment,
+    status: 'WAITING_ON_CUSTOMER',
+  },
+};
+
+const boatShipmentMissingObject = {
+  ...boatShipment,
+  boatShipment: null,
+};
+
+const boatShipmentFields = boatShipment.boatShipment;
+
+describe('Boat Shipments are handled', () => {
+  it('Boat Shipment fields header is present', () => {
+    render(
+      <MockProviders>
+        <Shipment shipment={boatShipment} moveId={moveId} />
+      </MockProviders>,
+    );
+
+    const ppmFieldsHeader = screen.getByRole('heading', { name: 'Boat-Shipment Specific Fields', level: 4 });
+    expect(ppmFieldsHeader).toBeInTheDocument();
+  });
+
+  it.each([
+    ['Shipment Type:', boatShipmentFields.type],
+    ['Year:', boatShipmentFields.year],
+    ['Make:', boatShipmentFields.make],
+    ['Model:', boatShipmentFields.model],
+    ['Length:', `Length: ${boatShipmentFields.lengthInInches}`],
+    ['Width:', `Width: ${boatShipmentFields.widthInInches}`],
+    ['Height:', `Height: ${boatShipmentFields.heightInInches}`],
+    ['Has Trailer:', 'Yes'],
+    ['Trailer is Roadworthy:', 'Yes'],
+  ])('Boat shipment field %s with value %s is present', async (boatShipmentField, boatShipmentFieldValue) => {
+    render(
+      <MockProviders>
+        <Shipment shipment={boatShipment} moveId={moveId} />
+      </MockProviders>,
+    );
+    const dimensionValues = ['Length:', 'Width:', 'Height:'];
+    const field = screen.getByText(boatShipmentField, { exact: false });
+    await expect(field).toBeInTheDocument();
+
+    // Don't skip to nextElementSibling if getting a dimension value (different HTML markup)
+    if (dimensionValues.includes(boatShipmentField)) await expect(field.textContent).toBe(boatShipmentFieldValue);
+    else await expect(field.nextElementSibling.textContent).toBe(boatShipmentFieldValue);
+  });
+
+  it("Trailer field does not show up if Boat Shipment doesn't have a trailer", () => {
+    const boatShipmentWithoutTrailer = boatShipment;
+    boatShipmentWithoutTrailer.boatShipment.hasTrailer = false;
+    render(
+      <MockProviders>
+        <Shipment shipment={boatShipment} moveId={moveId} />
+      </MockProviders>,
+    );
+
+    const boatTrailerField = screen.getByText('Has Trailer:');
+    expect(boatTrailerField).toBeInTheDocument();
+    expect(boatTrailerField.nextElementSibling.textContent).toBe('No');
+
+    expect(screen.queryByText('Trailer is Roadworthy:')).not.toBeInTheDocument();
+  });
+
+  it('Boat status does not allow deletion', () => {
+    render(
+      <MockProviders>
+        <Shipment shipment={boatShipmentWaitingOnCustomer} moveId={moveId} />
+      </MockProviders>,
+    );
+
+    const deleteShipmentButton = screen.queryByText(/Delete Shipment/, { selector: 'button' });
+    expect(deleteShipmentButton).not.toBeInTheDocument();
+  });
+
+  it('Boat shipment is missing boatShipment object', () => {
+    render(
+      <MockProviders>
+        <Shipment shipment={boatShipmentMissingObject} moveId={moveId} />
+      </MockProviders>,
+    );
+
+    const deleteShipmentButton = screen.queryByText(/Delete Shipment/, { selector: 'button' });
+    expect(deleteShipmentButton).not.toBeInTheDocument();
+  });
+});

src/components/ShipmentList/ShipmentList.jsx

@@ -60,11 +60,11 @@ export const ShipmentListItem = ({
       }`}
       data-testid="shipment-list-item-container"
     >
-      <div>
+      <div className={styles['shipment-info']}>
         <strong>
           {getShipmentTypeLabel(shipment.shipmentType)}
           {showNumber && ` ${shipmentNumber}`}
-        </strong>{' '}
+        </strong>
         <br />
         {showShipmentTooltip &&
           (shipment.shipmentType === SHIPMENT_OPTIONS.HHG ||
@@ -85,7 +85,9 @@ export const ShipmentListItem = ({
       </div>
       {/* use substring of the UUID until actual shipment code is available */}
       {!showShipmentWeight && !showIncomplete && (
-        <span className={styles['shipment-code']}>#{shipment.shipmentLocator}</span>
+        <div className={styles['shipment-locator']}>
+          <span>#{shipment.shipmentLocator}</span>
+        </div>
       )}
       {showIncomplete && <Tag>Incomplete</Tag>}
       {showShipmentWeight && (
@@ -116,7 +118,7 @@ export const ShipmentListItem = ({
         </div>
       )}
       {canEditOrDelete ? (
-        <div className={styles['shipment-btns']}>
+        <div className={styles['shipment-buttons']}>
           <Button className={styles['edit-btn']} onClick={onDeleteClick} type="button">
             Delete
           </Button>

src/components/ShipmentList/ShipmentList.module.scss

@@ -8,30 +8,33 @@
   align-items: center;
   border-radius: 0 5px 5px 0;
   border: 1px solid $base-lighter;
-  padding-left: 6px;
-  padding-right: 13px;
-  padding-top: 12px;
-  padding-bottom: 12px;
+  padding: 12px 12px;
   height: 52px;
   @include u-margin-bottom(1);
 
-  strong {
-    white-space: nowrap;
-    @media (min-width: $tablet) {
-      @include u-minw(15);
-    }
-    @include u-minw(7);
-    text-align: left;
+  .shipment-info {
+    flex: 1;
   }
 
-  &:last-child {
-    margin-bottom: 0px;
+  .shipment-buttons {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin: 0;
   }
 
   &.shipment-display {
     cursor: default;
     justify-content: start;
   }
+
+  @media (max-width: 768px) {
+    .shipment-buttons {
+      margin-left: 3vw;
+      margin-right: -3vw;
+    }
+  }
 }
 
 .shipment-btns {

src/pages/PrimeUI/Shipment/PrimeUIShipmentCreateForm.test.jsx

@@ -486,5 +486,11 @@ describe('PrimeUIShipmentCreateForm', () => {
 
     // now the text input should be visible
     expect(await screen.findByTestId('divertedFromShipmentIdInput')).toBeInTheDocument();
+
+    // Uncheck
+    await userEvent.click(diversionCheckbox);
+
+    // now the text input should be invisible
+    expect(await screen.queryByTestId('divertedFromShipmentIdInput')).toBeNull();
   });
 });