Merge pull request #13878 from transcom/B-21365-INT

B-21365 Customer UB Shipment Card - INT

src/components/Customer/Home/Step/Step.stories.jsx

@@ -119,6 +119,7 @@ Shipments.args = {
             weightTickets: [],
           },
         },
+        { id: '0004', shipmentType: SHIPMENT_OPTIONS.UNACCOMPANIED_BAGGAGE },
       ]}
       onShipmentClick={action('shipment edit icon clicked')}
       moveSubmitted={false}

src/components/Customer/MtoShipmentForm/MtoShipmentForm.jsx

@@ -190,8 +190,9 @@ class MtoShipmentForm extends Component {
     const isNTSR = shipmentType === SHIPMENT_OPTIONS.NTSR;
     const isBoat = shipmentType === SHIPMENT_TYPES.BOAT_HAUL_AWAY || shipmentType === SHIPMENT_TYPES.BOAT_TOW_AWAY;
     const isMobileHome = shipmentType === SHIPMENT_TYPES.MOBILE_HOME;
+    const isUB = shipmentType === SHIPMENT_OPTIONS.UNACCOMPANIED_BAGGAGE;
     const shipmentNumber =
-      shipmentType === SHIPMENT_OPTIONS.HHG || isBoat || isMobileHome ? this.getShipmentNumber() : null;
+      shipmentType === SHIPMENT_OPTIONS.HHG || isBoat || isMobileHome || isUB ? this.getShipmentNumber() : null;
     const isRetireeSeparatee =
       orders.orders_type === ORDERS_TYPE.RETIREMENT || orders.orders_type === ORDERS_TYPE.SEPARATION;
 
@@ -311,14 +312,14 @@ class MtoShipmentForm extends Component {
 
                   <div className={styles.MTOShipmentForm}>
                     <ShipmentTag shipmentType={shipmentType} shipmentNumber={shipmentNumber} />
-
                     <h1>{shipmentForm.header[`${shipmentType}`]}</h1>
-
                     <Alert headingLevel="h4" type="info" noIcon>
-                      Remember: You can move {formatWeight(orders.authorizedWeight)} total. You’ll be billed for any
-                      excess weight you move.
+                      Remember: You can move
+                      {isUB
+                        ? ` up to your UB allowance for this move`
+                        : ` ${formatWeight(orders.authorizedWeight)} total`}
+                      . You’ll be billed for any excess weight you move.
                     </Alert>
-
                     <Form className={formStyles.form}>
                       {showPickupFields && (
                         <SectionWrapper className={formStyles.formSection}>

src/components/Customer/MtoShipmentForm/MtoShipmentForm.stories.jsx

@@ -95,6 +95,7 @@ export const HHGShipmentRetiree = () =>
   renderStory({ shipmentType: SHIPMENT_OPTIONS.HHG, orders: { orders_type: 'RETIREMENT', authorizedWeight: 5000 } });
 export const NTSReleaseShipment = () => renderStory({ shipmentType: SHIPMENT_OPTIONS.NTSR });
 export const NTSShipment = () => renderStory({ shipmentType: SHIPMENT_OPTIONS.NTS });
+export const UBShipment = () => renderStory({ shipmentType: SHIPMENT_OPTIONS.UNACCOMPANIED_BAGGAGE });
 
 // edit shipment stories (form should prefill)
 export const EditHHGShipment = () =>
@@ -115,6 +116,12 @@ export const EditNTSShipment = () =>
     isCreatePage: false,
     mtoShipment: mockMtoShipment,
   });
+export const EditUBShipment = () =>
+  renderStory({
+    shipmentType: SHIPMENT_OPTIONS.UNACCOMPANIED_BAGGAGE,
+    isCreatePage: false,
+    mtoShipment: mockMtoShipment,
+  });
 
 export const EditShipmentAsSeparatee = () =>
   renderStory({

src/components/Customer/MtoShipmentForm/getShipmentOptions.js

@@ -163,6 +163,13 @@ function getShipmentOptions(shipmentType, userRole) {
         }
       }
 
+    case SHIPMENT_OPTIONS.UNACCOMPANIED_BAGGAGE:
+      return {
+        schema: hhgShipmentSchema,
+        showPickupFields: true,
+        showDeliveryFields: true,
+      };
+
     default:
       throw new Error('unrecognized shipment type');
   }

src/components/Customer/Review/ShipmentCard/HHGShipmentCard/HHGShipmentCard.test.jsx

@@ -7,6 +7,7 @@ import userEvent from '@testing-library/user-event';
 import HHGShipmentCard from 'components/Customer/Review/ShipmentCard/HHGShipmentCard/HHGShipmentCard';
 import { formatCustomerDate } from 'utils/formatters';
 import { shipmentStatuses } from 'constants/shipments';
+import { SHIPMENT_OPTIONS } from 'shared/constants';
 
 const defaultProps = {
   moveId: 'testMove123',
@@ -205,3 +206,187 @@ describe('HHGShipmentCard component', () => {
     expect(mockedOnIncompleteClickFunction).toHaveBeenCalledWith('HHG 1', 'ABC123K-01', 'HHG');
   });
 });
+
+const ubProps = {
+  moveId: 'testMove123',
+  editPath: '',
+  onEditClick: jest.fn(),
+  onDeleteClick: jest.fn(),
+  shipmentNumber: 1,
+  shipmentId: '#ABC123K',
+  shipmentLocator: '#ABC123K-01',
+  shipmentType: SHIPMENT_OPTIONS.UNACCOMPANIED_BAGGAGE,
+  showEditAndDeleteBtn: false,
+  requestedPickupDate: new Date('01/01/2020').toISOString(),
+  pickupLocation: {
+    streetAddress1: '17 8th St',
+    city: 'New York',
+    state: 'NY',
+    postalCode: '11111',
+  },
+  releasingAgent: {
+    firstName: 'Jo',
+    lastName: 'Xi',
+    phone: '(555) 555-5555',
+    email: '[email protected]',
+  },
+  requestedDeliveryDate: new Date('03/01/2020').toISOString(),
+  destinationZIP: '73523',
+  receivingAgent: {
+    firstName: 'Dorothy',
+    lastName: 'Lagomarsino',
+    phone: '(999) 999-9999',
+    email: '[email protected]',
+  },
+  remarks:
+    'This is 500 characters of customer remarks right here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+};
+
+const incompleteUBProps = {
+  moveId: 'testMove123',
+  editPath: '',
+  onEditClick: jest.fn(),
+  onDeleteClick: jest.fn(),
+  onIncompleteClick: mockedOnIncompleteClickFunction,
+  shipmentNumber: 1,
+  shipmentId: 'ABC123K',
+  shipmentLocator: 'ABC123K-01',
+  shipmentType: SHIPMENT_OPTIONS.UNACCOMPANIED_BAGGAGE,
+  showEditAndDeleteBtn: false,
+  requestedPickupDate: new Date('01/01/2020').toISOString(),
+  status: shipmentStatuses.DRAFT,
+};
+
+const completeUBProps = {
+  moveId: 'testMove123',
+  editPath: '',
+  onEditClick: jest.fn(),
+  onDeleteClick: jest.fn(),
+  shipmentNumber: 1,
+  shipmentId: 'ABC123K',
+  shipmentLocator: 'ABC123K-01',
+  shipmentType: SHIPMENT_OPTIONS.UNACCOMPANIED_BAGGAGE,
+  showEditAndDeleteBtn: false,
+  requestedPickupDate: new Date('01/01/2020').toISOString(),
+  status: shipmentStatuses.SUBMITTED,
+};
+
+function mountHHGShipmentCardForUBShipment(props) {
+  return mount(<HHGShipmentCard {...ubProps} {...props} />);
+}
+
+describe('HHGShipmentCard component can be reused for UB shipment card', () => {
+  it('renders component with all fields', () => {
+    const wrapper = mountHHGShipmentCardForUBShipment();
+    const tableHeaders = [
+      'Requested pickup date',
+      'Pickup location',
+      'Releasing agent',
+      'Requested delivery date',
+      'Destination',
+      'Receiving agent',
+      'Remarks',
+    ];
+    const { streetAddress1, city, state, postalCode } = ubProps.pickupLocation;
+    const {
+      firstName: releasingFirstName,
+      lastName: releasingLastName,
+      phone: releasingTelephone,
+      email: releasingEmail,
+    } = ubProps.releasingAgent;
+    const {
+      firstName: receivingFirstName,
+      lastName: receivingLastName,
+      phone: receivingTelephone,
+      email: receivingEmail,
+    } = ubProps.receivingAgent;
+    const tableData = [
+      formatCustomerDate(ubProps.requestedPickupDate),
+      `${streetAddress1} ${city}, ${state} ${postalCode}`,
+      `${releasingFirstName} ${releasingLastName} ${releasingTelephone} ${releasingEmail}`,
+      formatCustomerDate(ubProps.requestedDeliveryDate),
+      ubProps.destinationZIP,
+      `${receivingFirstName} ${receivingLastName} ${receivingTelephone} ${receivingEmail}`,
+    ];
+
+    tableHeaders.forEach((label, index) => expect(wrapper.find('dt').at(index).text()).toBe(label));
+    tableData.forEach((label, index) => expect(wrapper.find('dd').at(index).text()).toBe(label));
+    expect(wrapper.find('.remarksCell').text()).toBe(ubProps.remarks);
+  });
+
+  it('should render UB shipment card without releasing/receiving agents and remarks', () => {
+    const wrapper = mountHHGShipmentCardForUBShipment({
+      ...ubProps,
+      releasingAgent: null,
+      receivingAgent: null,
+      remarks: '',
+    });
+    const tableHeaders = ['Requested pickup date', 'Pickup location', 'Requested delivery date', 'Destination'];
+    const { streetAddress1, city, state, postalCode } = ubProps.pickupLocation;
+    const tableData = [
+      formatCustomerDate(ubProps.requestedPickupDate),
+      `${streetAddress1} ${city}, ${state} ${postalCode}`,
+      formatCustomerDate(ubProps.requestedDeliveryDate),
+      ubProps.destinationZIP,
+    ];
+    tableHeaders.forEach((label, index) => expect(wrapper.find('dt').at(index).text()).toBe(label));
+    tableData.forEach((label, index) => expect(wrapper.find('dd').at(index).text()).toBe(label));
+    expect(wrapper.find('.remarksCell').length).toBe(0);
+  });
+
+  it('should not render a secondary pickup location on UB shipment card if not provided one', async () => {
+    render(<HHGShipmentCard {...ubProps} />);
+
+    const secondPickupLocation = await screen.queryByText('Second pickup location');
+    expect(secondPickupLocation).not.toBeInTheDocument();
+  });
+
+  it('should not render a secondary destination location on UB shipment card if not provided one', async () => {
+    render(<HHGShipmentCard {...ubProps} />);
+
+    const secondDestination = await screen.queryByText('Second Destination');
+    expect(secondDestination).not.toBeInTheDocument();
+  });
+
+  it('should render a UB shipment card secondary pickup location if provided one', async () => {
+    render(<HHGShipmentCard {...ubProps} {...secondaryPickupAddress} />);
+
+    const secondPickupLocation = await screen.getByText('Second pickup location');
+    expect(secondPickupLocation).toBeInTheDocument();
+    const secondPickupLocationInformation = await screen.getByText(/Some Other Street Name/);
+    expect(secondPickupLocationInformation).toBeInTheDocument();
+  });
+
+  it('should render a UB shipment card secondary destination location if provided one', async () => {
+    render(<HHGShipmentCard {...ubProps} {...secondaryDeliveryAddress} />);
+
+    const secondDestination = await screen.getByText('Second Destination');
+    expect(secondDestination).toBeInTheDocument();
+    const secondDesintationInformation = await screen.getByText(/Some Street Name/);
+    expect(secondDesintationInformation).toBeInTheDocument();
+  });
+
+  it('does not render UB shipment card incomplete label and tooltip icon for completed UB shipment with SUBMITTED status', async () => {
+    render(<HHGShipmentCard {...completeUBProps} />);
+
+    expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('UB 1');
+    expect(screen.getByText(/^#ABC123K-01$/, { selector: 'p' })).toBeInTheDocument();
+
+    expect(screen.queryByText('Incomplete')).toBeNull();
+  });
+
+  it('renders incomplete label and tooltip icon for incomplete UB shipment with DRAFT status', async () => {
+    render(<HHGShipmentCard {...incompleteUBProps} />);
+
+    expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('UB 1');
+    expect(screen.getByText(/^#ABC123K-01$/, { selector: 'p' })).toBeInTheDocument();
+
+    expect(screen.getByText(/^Incomplete$/, { selector: 'span' })).toBeInTheDocument();
+
+    expect(screen.getByTitle('Help about incomplete shipment')).toBeInTheDocument();
+    await userEvent.click(screen.getByTitle('Help about incomplete shipment'));
+
+    // verify onclick is getting json string as parameter
+    expect(mockedOnIncompleteClickFunction).toHaveBeenCalledWith('UB 1', 'ABC123K-01', 'UNACCOMPANIED_BAGGAGE');
+  });
+});

src/components/Customer/Review/Summary/Summary.jsx

@@ -58,6 +58,7 @@ export class Summary extends Component {
       enableNTSR: true,
       enableBoat: true,
       enableMobileHome: true,
+      enableUB: true,
     };
   }
 
@@ -97,6 +98,11 @@ export class Summary extends Component {
         enableMobileHome: enabled,
       });
     });
+    isBooleanFlagEnabled(FEATURE_FLAG_KEYS.UNACCOMPANIED_BAGGAGE).then((enabled) => {
+      this.setState({
+        enableUB: enabled,
+      });
+    });
   }
 
   handleEditClick = (path) => {
@@ -172,6 +178,7 @@ export class Summary extends Component {
     let ppmShipmentNumber = 0;
     let boatShipmentNumber = 0;
     let mobileHomeShipmentNumber = 0;
+    let ubShipmentNumber = 0;
     return sortedShipments.map((shipment) => {
       let receivingAgent;
       let releasingAgent;
@@ -302,6 +309,36 @@ export class Summary extends Component {
           />
         );
       }
+      if (shipment.shipmentType === SHIPMENT_TYPES.UNACCOMPANIED_BAGGAGE) {
+        ubShipmentNumber += 1;
+        return (
+          <HHGShipmentCard
+            key={shipment.id}
+            destinationZIP={currentOrders.new_duty_location.address.postalCode}
+            secondaryDeliveryAddress={shipment?.secondaryDeliveryAddress}
+            tertiaryDeliveryAddress={shipment?.tertiaryDeliveryAddress}
+            secondaryPickupAddress={shipment?.secondaryPickupAddress}
+            tertiaryPickupAddress={shipment?.tertiaryPickupAddress}
+            destinationLocation={shipment?.destinationAddress}
+            moveId={moveId}
+            onEditClick={this.handleEditClick}
+            onDeleteClick={this.handleDeleteClick}
+            pickupLocation={shipment.pickupAddress}
+            receivingAgent={receivingAgent}
+            releasingAgent={releasingAgent}
+            remarks={shipment.customerRemarks}
+            requestedDeliveryDate={shipment.requestedDeliveryDate}
+            requestedPickupDate={shipment.requestedPickupDate}
+            shipmentId={shipment.id}
+            shipmentLocator={shipment.shipmentLocator}
+            shipmentNumber={ubShipmentNumber}
+            shipmentType={shipment.shipmentType}
+            showEditAndDeleteBtn={showEditAndDeleteBtn}
+            status={shipment.status}
+            onIncompleteClick={this.toggleIncompleteShipmentModal}
+          />
+        );
+      }
       hhgShipmentNumber += 1;
       return (
         <HHGShipmentCard

src/components/Customer/Review/Summary/Summary.test.jsx

@@ -667,6 +667,7 @@ describe('Summary page', () => {
       expect(isBooleanFlagEnabled).toBeCalledWith(FEATURE_FLAG_KEYS.NTSR);
       expect(isBooleanFlagEnabled).toBeCalledWith(FEATURE_FLAG_KEYS.BOAT);
       expect(isBooleanFlagEnabled).toBeCalledWith(FEATURE_FLAG_KEYS.MOBILE_HOME);
+      expect(isBooleanFlagEnabled).toBeCalledWith(FEATURE_FLAG_KEYS.UNACCOMPANIED_BAGGAGE);
     });
 
     it('add shipment modal displays still in dev mode', async () => {
@@ -699,6 +700,7 @@ describe('Summary page', () => {
       expect(isBooleanFlagEnabled).toBeCalledWith(FEATURE_FLAG_KEYS.NTSR);
       expect(isBooleanFlagEnabled).toBeCalledWith(FEATURE_FLAG_KEYS.BOAT);
       expect(isBooleanFlagEnabled).toBeCalledWith(FEATURE_FLAG_KEYS.MOBILE_HOME);
+      expect(isBooleanFlagEnabled).toBeCalledWith(FEATURE_FLAG_KEYS.UNACCOMPANIED_BAGGAGE);
     });
   });
   afterEach(jest.clearAllMocks);

src/components/Office/ShipmentContainer/ShipmentContainer.jsx

@@ -22,6 +22,7 @@ const ShipmentContainer = ({ id, className, children, shipmentType }) => {
       'container--accent--ppm': shipmentType === SHIPMENT_OPTIONS.PPM,
       'container--accent--boat': isBoat,
       'container--accent--mobilehome': shipmentType === SHIPMENT_OPTIONS.MOBILE_HOME,
+      'container--accent--ub': shipmentType === SHIPMENT_OPTIONS.UNACCOMPANIED_BAGGAGE,
     },
     className,
   );

src/components/Office/ShipmentContainer/ShipmentContainer.test.jsx

@@ -59,6 +59,7 @@ describe('Shipment Container', () => {
     [SHIPMENT_OPTIONS.HHG, 'container--accent--hhg'],
     [SHIPMENT_OPTIONS.NTS, 'container--accent--nts'],
     [SHIPMENT_OPTIONS.NTSR, 'container--accent--ntsr'],
+    [SHIPMENT_OPTIONS.UNACCOMPANIED_BAGGAGE, 'container--accent--ub'],
   ])('renders a container for a shipment (%s) with className %s ', async (shipmentType, expectedClass) => {
     const newHeadingInfo = {
       ...headingInfo,

src/components/ShipmentList/ShipmentList.jsx

@@ -39,6 +39,7 @@ export const ShipmentListItem = ({
     [styles[`shipment-list-item-PPM`]]: isPPM,
     [styles[`shipment-list-item-Boat`]]: isBoat,
     [styles[`shipment-list-item-MobileHome`]]: isMobileHome,
+    [styles[`shipment-list-item-UB`]]: shipment.shipmentType === SHIPMENT_OPTIONS.UNACCOMPANIED_BAGGAGE,
   });
   const estimated = 'Estimated';
   const actual = 'Actual';

src/components/ShipmentList/ShipmentList.module.scss

@@ -103,6 +103,10 @@
   border-left: 5px solid $accent-mobile-home;
 }
 
+.shipment-list-item-UB {
+  border-left: 5px solid $accent-ub;
+}
+
 .spaceBetween {
   display: flex;
   justify-content: center;