UIREC-292: set claiming workflow statuses for single piece

CHANGELOG.md

@@ -5,6 +5,7 @@
 * Display and edit claiming active and interval fields in receiving title. Refs UIREC-288.
 * Optimize pieces query to improve performance. Refs UIREC-298.
 * Display claim actions for Piece. Refs UIREC-291.
+* Set claiming workflow statuses for single Piece. Refs UIREC-292.
 
 ## [4.0.0](https://github.com/folio-org/ui-receiving/tree/v4.0.0) (2023-10-12)
 [Full Changelog](https://github.com/folio-org/ui-receiving/compare/v3.0.0...v4.0.0)

src/TitleDetails/AddPieceModal/AddPieceModal.js

@@ -73,7 +73,7 @@
   const intl = useIntl();
   const modalLabel = intl.formatMessage({ id: labelId });
 
   const initialHoldingId = useMemo(() => getState().initialValues?.holdingId, []);
 
   const disabled = (initialValues.isCreateAnother && pristine) || hasValidationErrors;
 
@@ -138,6 +138,11 @@
     handleSubmit();
   }, [change, handleSubmit]);
 
+  const onStatusChange = useCallback((status) => {
+    change('receivingStatus', status);
+    onSave();
+  }, [change, onSave]);
+
   const start = (
     <Button
       data-test-add-piece-cancel
@@ -157,6 +162,7 @@
       onDelete={toggleDeleteConfirmation}
       onReceive={onReceive}
       onSave={onSave}
+      onStatusChange={onStatusChange}
       status={receivingStatus}
     />
   );

src/TitleDetails/AddPieceModal/AddPieceModal.test.js

@@ -203,4 +203,38 @@ describe('AddPieceModal', () => {
       expect(saveBtn).toBeInTheDocument();
     });
   });
+
+  it('should update piece status', async () => {
+    const onChange = jest.fn();
+
+    renderAddPieceModal({
+      ...defaultProps,
+      form: {
+        ...defaultProps.form,
+        change: onChange,
+      },
+      hasValidationErrors: false,
+      initialValues: {
+        'id': 'cd3fd1e7-c195-4d8e-af75-525e1039d643',
+        'format': 'Other',
+        'poLineId': 'a92ae36c-e093-4daf-b234-b4c6dc33a258',
+        'titleId': '03329fea-1b5d-43ab-b955-20bcd9ba530d',
+        'holdingId': '60c67dc5-b646-425e-bf08-a8bf2d0681fb',
+        'isCreateAnother': false,
+        'isCreateItem': false,
+        receivingStatus: PIECE_STATUS.expected,
+      },
+    });
+
+    const dropdownButton = screen.getByTestId('dropdown-trigger-button');
+
+    await user.click(dropdownButton);
+    await screen.findByRole('button', { expanded: true });
+
+    const unReceiveButton = screen.getByTestId('unReceivable-piece-button');
+
+    await user.click(unReceiveButton);
+
+    expect(defaultProps.onSubmit).toHaveBeenCalled();
+  });
 });

src/TitleDetails/AddPieceModal/ModalActionButtons/ModalActionButtons.css

@@ -31,7 +31,7 @@
     border-top-right-radius: 999px !important;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
-    margin-left: 1px;
+    margin-left: -1px;
     margin-right: 0;
   }
 }

src/TitleDetails/AddPieceModal/ModalActionButtons/ModalActionButtons.js

@@ -22,6 +22,7 @@ export const ModalActionButtons = ({
   onDelete,
   onReceive,
   onSave,
+  onStatusChange,
   status,
 }) => {
   const actionMenu = getPieceActionMenu({
@@ -31,6 +32,7 @@ export const ModalActionButtons = ({
     onCreateAnotherPiece,
     onDelete,
     onReceive,
+    onStatusChange,
     status,
   });
   const saveButtonLabelId = 'ui-receiving.piece.actions.saveAndClose';
@@ -66,6 +68,7 @@ export const ModalActionButtons = ({
           buttonStyle: 'primary',
           buttonClass: css.dropdownButton,
           marginBottom0: true,
+          'data-testid': 'dropdown-trigger-button',
         }}
       >
         <DropdownMenu data-role="menu">
@@ -84,6 +87,7 @@ ModalActionButtons.propTypes = {
   onDelete: PropTypes.func,
   onReceive: PropTypes.func,
   onSave: PropTypes.func.isRequired,
+  onStatusChange: PropTypes.func,
   status: PropTypes.string,
 };
 

src/TitleDetails/AddPieceModal/ModalActionButtons/constants.js

@@ -1,3 +1,4 @@
+import { noop } from 'lodash';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -11,7 +12,7 @@ export const PIECE_STATUS = {
   late: 'Late',
   claimDelayed: 'Claim delayed',
   claimSent: 'Claim sent',
-  unreceivable: 'Unreceivable',
+  unReceivable: 'Unreceivable',
 };
 
 export const PIECE_ACTION_NAMES = {
@@ -20,6 +21,7 @@ export const PIECE_ACTION_NAMES = {
   sendClaim: 'sendClaim',
   delayClaim: 'delayClaim',
   unReceivable: 'unReceivable',
+  unReceive: 'unReceive',
   expect: 'expect',
   delete: 'delete',
 };
@@ -35,10 +37,10 @@ export const PIECE_ACTIONS_BY_STATUS = {
   ],
   [PIECE_STATUS.received]: [
     PIECE_ACTION_NAMES.saveAndCreate,
-    PIECE_ACTION_NAMES.unReceivable,
+    PIECE_ACTION_NAMES.unReceive,
     PIECE_ACTION_NAMES.delete,
   ],
-  [PIECE_STATUS.unreceivable]: [
+  [PIECE_STATUS.unReceivable]: [
     PIECE_ACTION_NAMES.saveAndCreate,
     PIECE_ACTION_NAMES.expect,
     PIECE_ACTION_NAMES.delete,
@@ -50,11 +52,16 @@ export const PIECE_ACTIONS = ({
   disabled,
   isEditMode,
   onCreateAnotherPiece,
+  onStatusChange,
   onDelete,
   onReceive,
 }) => ({
   delayClaim: (
-    <Button disabled={disabled} buttonStyle="dropdownItem">
+    <Button
+      disabled={disabled}
+      buttonStyle="dropdownItem"
+      onClick={noop} // TODO UIOR-1160
+    >
       <Icon icon="calendar">
         <FormattedMessage id="ui-receiving.piece.action.button.delayClaim" />
       </Icon>
@@ -73,7 +80,12 @@ export const PIECE_ACTIONS = ({
     </Button>
   ) : null,
   expect: (
-    <Button disabled={disabled} buttonStyle="dropdownItem">
+    <Button
+      disabled={disabled}
+      buttonStyle="dropdownItem"
+      data-testid="expect-piece-button"
+      onClick={() => onStatusChange(PIECE_STATUS.expected)}
+    >
       <Icon icon="calendar">
         <FormattedMessage id="ui-receiving.piece.action.button.expect" />
       </Icon>
@@ -95,6 +107,7 @@ export const PIECE_ACTIONS = ({
     <Button
       disabled={disabled}
       buttonStyle="dropdownItem"
+      data-testid="create-another-piece-button"
       onClick={onCreateAnotherPiece}
     >
       <Icon icon="save">
@@ -103,14 +116,35 @@ export const PIECE_ACTIONS = ({
     </Button>
   ),
   sendClaim: (
-    <Button disabled={disabled} buttonStyle="dropdownItem">
+    <Button
+      disabled={disabled}
+      buttonStyle="dropdownItem"
+      onClick={noop} // TODO UIOR-1152
+    >
       <Icon icon="envelope">
         <FormattedMessage id="ui-receiving.piece.action.button.sendClaim" />
       </Icon>
     </Button>
   ),
+  unReceive: (
+    <Button
+      disabled={disabled}
+      buttonStyle="dropdownItem"
+      data-testid="unReceive-piece-button"
+      onClick={() => onStatusChange(PIECE_STATUS.expected)}
+    >
+      <Icon icon="cancel">
+        <FormattedMessage id="ui-receiving.piece.action.button.unReceive" />
+      </Icon>
+    </Button>
+  ),
   unReceivable: (
-    <Button disabled={disabled} buttonStyle="dropdownItem">
+    <Button
+      disabled={disabled}
+      buttonStyle="dropdownItem"
+      data-testid="unReceivable-piece-button"
+      onClick={() => onStatusChange(PIECE_STATUS.unReceivable)}
+    >
       <Icon icon="cancel">
         <FormattedMessage id="ui-receiving.piece.action.button.unReceivable" />
       </Icon>

src/TitleDetails/AddPieceModal/ModalActionButtons/utils.test.js

@@ -1,6 +1,8 @@
 import { PIECE_ACTIONS_BY_STATUS, PIECE_STATUS } from './constants';
 import { getPieceActionMenu } from './utils';
 
+const { expected, unReceivable, received } = PIECE_STATUS;
+
 describe('getPieceActionMenus', () => {
   it('should return empty array if status is not provided', () => {
     const result = getPieceActionMenu({});
@@ -15,9 +17,59 @@ describe('getPieceActionMenus', () => {
   });
 
   it('should return array of action menus', () => {
-    const { expected } = PIECE_STATUS;
     const result = getPieceActionMenu({ status: expected, disabled: false });
 
     expect(result).toHaveLength(PIECE_ACTIONS_BY_STATUS[expected].length);
   });
+
+  describe('delete action', () => {
+    it('should not return `delete` action menu if `isEditMode` is false', () => {
+      const result = getPieceActionMenu({ status: expected, disabled: false, isEditMode: false });
+
+      expect(result).toContain(null);
+    });
+
+    it('should `delete` button be disabled if `canDeletePiece` is false', () => {
+      const result = getPieceActionMenu({ status: expected, disabled: false, isEditMode: true, canDeletePiece: false });
+      const deleteButton = result.find(i => i.props['data-testid'] === 'delete-piece-button');
+
+      expect(deleteButton.props).toEqual(expect.objectContaining({ disabled: true }));
+    });
+  });
+
+  describe('expect action', () => {
+    it('should `onStatusChange` be called with `Expected` status value', () => {
+      const onStatusChange = jest.fn();
+      const result = getPieceActionMenu({ status: unReceivable, disabled: true, onStatusChange });
+      const expectButton = result.find(i => i.props['data-testid'] === 'expect-piece-button');
+
+      expectButton.props.onClick();
+
+      expect(onStatusChange).toHaveBeenCalledWith(PIECE_STATUS.expected);
+    });
+  });
+
+  describe('unReceive action', () => {
+    it('should `onStatusChange` be called with `Expected` status value', () => {
+      const onStatusChange = jest.fn();
+      const result = getPieceActionMenu({ status: received, disabled: false, onStatusChange });
+      const receiveButton = result.find(i => i.props['data-testid'] === 'unReceive-piece-button');
+
+      receiveButton.props.onClick();
+
+      expect(onStatusChange).toHaveBeenCalledWith(PIECE_STATUS.expected);
+    });
+  });
+
+  describe('unReceivable action', () => {
+    it('should `onStatusChange` be called with `Unreceivable` status value', () => {
+      const onStatusChange = jest.fn();
+      const result = getPieceActionMenu({ status: expected, disabled: false, onStatusChange });
+      const receiveButton = result.find(i => i.props['data-testid'] === 'unReceivable-piece-button');
+
+      receiveButton.props.onClick();
+
+      expect(onStatusChange).toHaveBeenCalledWith(PIECE_STATUS.unReceivable);
+    });
+  });
 });

translations/ui-receiving/en.json

@@ -170,6 +170,7 @@
   "piece.action.button.sendClaim": "Send claim",
   "piece.action.button.delayClaim": "Delay claim",
   "piece.action.button.unReceivable": "Unreceivable",
+  "piece.action.button.unReceive": "Unreceive",
   "piece.action.button.delete": "Delete",
   "piece.action.button.expect": "Expect",
   "piece.callNumber": "Call number",