B 20473 int

pkg/handlers/authentication/permissions.go

@@ -40,6 +40,7 @@ var TOO = RolePermissions{
 		"update.closeoutOffice",
 		"update.MTOPage",
 		"create.TXOShipment",
+		"update.cancelMoveFlag",
 	},
 }
 
@@ -86,6 +87,7 @@ var ServicesCounselor = RolePermissions{
 		"update.customer",
 		"update.closeoutOffice",
 		"view.closeoutOffice",
+		"update.cancelMoveFlag",
 	},
 }
 

pkg/services/move/move_canceler.go

@@ -39,7 +39,7 @@ func (f *moveCanceler) CancelMove(appCtx appcontext.AppContext, moveID uuid.UUID
 
 			if shipment.PPMShipment != nil {
 				if shipment.PPMShipment.Status == models.PPMShipmentStatusCloseoutComplete {
-					return apperror.NewConflictError(move.ID, " cannot cancel move with approved shipment.")
+					return apperror.NewConflictError(move.ID, " cannot cancel move with a closeout complete shipment.")
 				}
 				var ppmshipment models.PPMShipment
 				qerr := appCtx.DB().Where("id = ?", shipment.PPMShipment.ID).First(&ppmshipment)
@@ -55,9 +55,7 @@ func (f *moveCanceler) CancelMove(appCtx appcontext.AppContext, moveID uuid.UUID
 				} else if err != nil {
 					return apperror.NewQueryError("PPM Shipment", err, "Failed to update status for ppm shipment")
 				}
-			}
-
-			if shipment.Status != models.MTOShipmentStatusApproved {
+			} else if shipment.Status != models.MTOShipmentStatusApproved {
 				verrs, err := txnAppCtx.DB().ValidateAndUpdate(&shipmentDelta)
 				if verrs != nil && verrs.HasAny() {
 					return apperror.NewInvalidInputError(shipment.ID, err, verrs, "Validation errors found while setting shipment status")

src/components/ConfirmationModals/CancelMoveConfirmationModal.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@trussworks/react-uswds';
+
+import Modal, { ModalTitle, ModalClose, ModalActions, connectModal } from 'components/Modal/Modal';
+
+export const CancelMoveConfirmationModal = ({ onClose, onSubmit, moveID, title, content, submitText, closeText }) => (
+  <Modal>
+    <ModalClose handleClick={() => onClose()} />
+    <ModalTitle>
+      <h3>{title}</h3>
+    </ModalTitle>
+    <p>{content}</p>
+    <ModalActions autofocus="true">
+      <Button data-focus="true" className="usa-button--destructive" type="submit" onClick={() => onSubmit(moveID)}>
+        {submitText}
+      </Button>
+      <Button className="usa-button--secondary" type="button" onClick={() => onClose()} data-testid="modalBackButton">
+        {closeText}
+      </Button>
+    </ModalActions>
+  </Modal>
+);
+
+CancelMoveConfirmationModal.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+
+  title: PropTypes.string,
+  content: PropTypes.string,
+  submitText: PropTypes.string,
+  closeText: PropTypes.string,
+};
+
+CancelMoveConfirmationModal.defaultProps = {
+  title: 'Are you sure?',
+  content:
+    'You’ll lose all the information in this move. If you want it back later, you’ll have to request a new move.',
+  submitText: 'Cancel move',
+  closeText: 'Keep move',
+};
+
+CancelMoveConfirmationModal.displayName = 'CancelMoveConfirmationModal';
+
+export default connectModal(CancelMoveConfirmationModal);

src/components/ConfirmationModals/CancelMoveConfirmationModal.stories.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import CancelMoveConfirmationModal from './CancelMoveConfirmationModal';
+
+export default {
+  title: 'Components/CancelMoveConfirmationModal',
+  component: CancelMoveConfirmationModal,
+  args: {
+    moveID: '111',
+  },
+  argTypes: {
+    onClose: { action: 'close button clicked' },
+    onSubmit: { action: 'submit button clicked' },
+  },
+};
+
+const Template = (args) => <CancelMoveConfirmationModal {...args} />;
+
+export const Basic = Template.bind({});
+
+export const WithOverrides = Template.bind({});
+WithOverrides.args = {
+  title: 'This is a sample title',
+  content: 'Some sample description',
+  submitText: 'YES!',
+  closeText: 'NO',
+};
+
+const ConnectedTemplate = (args) => <CancelMoveConfirmationModal {...args} />;
+export const ConnectedModal = ConnectedTemplate.bind({});
+ConnectedModal.args = {
+  isOpen: true,
+};

src/components/ConfirmationModals/CancelMoveConfirmationModal.test.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { CancelMoveConfirmationModal } from 'components/ConfirmationModals/CancelMoveConfirmationModal';
+
+let onClose;
+let onSubmit;
+beforeEach(() => {
+  onClose = jest.fn();
+  onSubmit = jest.fn();
+});
+
+describe('CancelMoveConfirmationModal', () => {
+  const moveID = '123456';
+
+  it('renders the component', async () => {
+    render(<CancelMoveConfirmationModal onSubmit={onSubmit} onClose={onClose} moveID={moveID} />);
+
+    expect(await screen.findByRole('heading', { level: 3, name: 'Are you sure?' })).toBeInTheDocument();
+  });
+
+  it('closes the modal when close icon is clicked', async () => {
+    render(<CancelMoveConfirmationModal onSubmit={onSubmit} onClose={onClose} shipmentID={moveID} />);
+
+    const closeButton = await screen.findByTestId('modalCloseButton');
+
+    await userEvent.click(closeButton);
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('closes the modal when the keep button is clicked', async () => {
+    render(<CancelMoveConfirmationModal onSubmit={onSubmit} onClose={onClose} moveID={moveID} />);
+
+    const keepButton = await screen.findByRole('button', { name: 'Keep move' });
+
+    await userEvent.click(keepButton);
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls the submit function when cancel button is clicked', async () => {
+    render(<CancelMoveConfirmationModal onSubmit={onSubmit} onClose={onClose} moveID={moveID} />);
+
+    const cancelButton = await screen.findByRole('button', { name: 'Cancel move' });
+
+    await userEvent.click(cancelButton);
+
+    expect(onSubmit).toHaveBeenCalledWith(moveID);
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+});

src/components/Office/EvaluationReportShipmentDisplay/EvaluationReportShipmentDisplay.jsx

@@ -54,7 +54,7 @@ const EvaluationReportShipmentDisplay = ({
               <label id={`shipment-display-label-${shipmentId}`}>{displayInfo.heading}</label>
             </h5>
             {displayInfo.isDiversion && <Tag>diversion</Tag>}
-            {displayInfo.shipmentStatus === shipmentStatuses.CANCELED && <Tag className="usa-tag--red">cancelled</Tag>}
+            {displayInfo.shipmentStatus === shipmentStatuses.CANCELED && <Tag className="usa-tag--red">canceled</Tag>}
             {displayInfo.shipmentStatus === shipmentStatuses.DIVERSION_REQUESTED && <Tag>diversion requested</Tag>}
             {displayInfo.shipmentStatus === shipmentStatuses.CANCELLATION_REQUESTED && (
               <Tag>cancellation requested</Tag>

src/components/Office/ShipmentDisplay/ShipmentDisplay.jsx

@@ -97,8 +97,10 @@ const ShipmentDisplay = ({
               </h3>
               <div>
                 {displayInfo.isDiversion && <Tag>diversion</Tag>}
-                {displayInfo.shipmentStatus === shipmentStatuses.CANCELED && (
-                  <Tag className="usa-tag--red">cancelled</Tag>
+                {(displayInfo.shipmentStatus === shipmentStatuses.CANCELED ||
+                  displayInfo.status === shipmentStatuses.CANCELED ||
+                  displayInfo.ppmShipment?.status === ppmShipmentStatuses.CANCELED) && (
+                  <Tag className="usa-tag--red">canceled</Tag>
                 )}
                 {displayInfo.shipmentStatus === shipmentStatuses.DIVERSION_REQUESTED && <Tag>diversion requested</Tag>}
                 {displayInfo.shipmentStatus === shipmentStatuses.CANCELLATION_REQUESTED && (

src/components/Office/ShipmentDisplay/ShipmentDisplay.stories.jsx

@@ -9,7 +9,7 @@ import {
   ntsReleaseMissingInfo,
   postalOnlyInfo,
   diversionInfo,
-  cancelledInfo,
+  canceledInfo,
   ppmInfo,
   ppmInfoApprovedOrExcluded,
   ppmInfoRejected,
@@ -250,11 +250,11 @@ export const DivertedShipment = () => (
   </div>
 );
 
-export const CancelledShipment = () => (
+export const CanceledShipment = () => (
   <div style={{ padding: '20px' }}>
     <ShipmentDisplay
       shipmentId="1"
-      displayInfo={cancelledInfo}
+      displayInfo={canceledInfo}
       ordersLOA={ordersLOA}
       shipmentType={SHIPMENT_OPTIONS.HHG}
       isSubmitted
@@ -533,11 +533,11 @@ export const DivertedShipmentReadOnly = () => (
   </div>
 );
 
-export const CancelledShipmentReadOnly = () => (
+export const CanceledShipmentReadOnly = () => (
   <div style={{ padding: '20px' }}>
     <ShipmentDisplay
       shipmentId="1"
-      displayInfo={cancelledInfo}
+      displayInfo={canceledInfo}
       ordersLOA={ordersLOA}
       shipmentType={SHIPMENT_OPTIONS.HHG}
       isSubmitted

src/components/Office/ShipmentDisplay/ShipmentDisplay.test.jsx

@@ -8,7 +8,7 @@ import {
   ntsMissingInfo,
   postalOnlyInfo,
   diversionInfo,
-  cancelledInfo,
+  canceledInfo,
   ntsReleaseInfo,
   ntsReleaseMissingInfo,
   ordersLOA,
@@ -91,9 +91,9 @@ describe('Shipment Container', () => {
       render(<ShipmentDisplay shipmentId="1" displayInfo={diversionInfo} onChange={jest.fn()} isSubmitted={false} />);
       expect(screen.getByText('diversion')).toBeInTheDocument();
     });
-    it('renders with cancelled tag', () => {
-      render(<ShipmentDisplay shipmentId="1" displayInfo={cancelledInfo} onChange={jest.fn()} isSubmitted={false} />);
-      expect(screen.getByText('cancelled')).toBeInTheDocument();
+    it('renders with canceled tag', () => {
+      render(<ShipmentDisplay shipmentId="1" displayInfo={canceledInfo} onChange={jest.fn()} isSubmitted={false} />);
+      expect(screen.getByText('canceled')).toBeInTheDocument();
     });
     it('renders a disabled button when move is locked', () => {
       render(

src/components/Office/ShipmentDisplay/ShipmentDisplayTestData.js

@@ -128,7 +128,7 @@ export const diversionInfo = {
   counselorRemarks: 'counselor approved',
 };
 
-export const cancelledInfo = {
+export const canceledInfo = {
   heading: 'HHG',
   shipmentId: 'testShipmentId394',
   isDiversion: false,

src/components/Office/ShipmentHeading/ShipmentHeading.jsx

@@ -25,7 +25,7 @@ function ShipmentHeading({ shipmentInfo, handleShowCancellationModal, isMoveLock
           <span className={styles.marketCodeIndicator}>{shipmentInfo.marketCode}</span>
           {shipmentInfo.shipmentType}
         </h2>
-        {shipmentStatus === shipmentStatuses.CANCELED && <Tag className="usa-tag--red">cancelled</Tag>}
+        {shipmentStatus === shipmentStatuses.CANCELED && <Tag className="usa-tag--red">canceled</Tag>}
         {shipmentInfo.isDiversion && <Tag>diversion</Tag>}
         {!shipmentInfo.isDiversion && shipmentStatus === shipmentStatuses.DIVERSION_REQUESTED && (
           <Tag>diversion requested</Tag>