UIREC-362 Hide 'Add piece' action when related order has 'Pending' st…

…atus and 'Synchronized' workflow (#623)

* UIREC-362 Hide 'Add piece' action when related order has 'Pending' status and 'Synchronized' workflow

* update tests

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 6.1.0 (IN PROGRESS)
 
 * Add "Mark late" action to the piece form action menu. Refs UIREC-413.
+* Hide "Add piece" action when related order has "Pending" status and "Synchronized" workflow. Refs UIREC-362.
 
 ## [6.0.5](https://github.com/folio-org/ui-receiving/tree/v6.0.5) (2024-12-13)
 [Full Changelog](https://github.com/folio-org/ui-receiving/compare/v6.0.4...v6.0.5)

src/Piece/constants.js

@@ -207,3 +207,8 @@ export const PIECE_ACTION_NAMES = {
   expect: 'expect',
   delete: 'delete',
 };
+
+export const EXPECTED_PIECES_ACTION_NAMES = {
+  addPiece: 'addPiece',
+  receive: 'receive',
+};

src/TitleDetails/TitleDetails.js

@@ -69,6 +69,7 @@ import {
 } from '../constants';
 import { useReceivingSearchContext } from '../contexts';
 import {
+  EXPECTED_PIECES_ACTION_NAMES,
   EXPECTED_PIECES_SEARCH_VALUE,
   EXPECTED_PIECE_COLUMN_MAPPING,
   MENU_FILTERS,
@@ -123,10 +124,11 @@ const TitleDetails = ({
   const titleId = title.id;
   const isAcknowledged = title.isAcknowledged;
   const isOrderClosed = order.workflowStatus === ORDER_STATUSES.closed;
+  const isOrderPending = order.workflowStatus === ORDER_STATUSES.pending;
   const showRoutingList = orderFormat === ORDER_FORMATS.PEMix || orderFormat === ORDER_FORMATS.physicalResource;
   const numberOfPhysicalUnits = useMemo(() => {
     return poLine?.locations?.reduce((acc, { quantityPhysical = 0 }) => acc + quantityPhysical, 0);
-  }, [poLine?.locations]);
+  }, [poLine.locations]);
   const vendor = vendorsMap[order?.vendor];
   const accessProvider = vendorsMap[poLine?.eresource?.accessProvider];
   const materialSupplier = vendorsMap[poLine?.physical?.materialSupplier];
@@ -141,7 +143,7 @@ const TitleDetails = ({
   );
 
   const isRestrictedByAcqUnit = isRestrictionsLoading || restrictions?.protectUpdate;
-  const isPiecesLock = !checkinItems && order.workflowStatus === ORDER_STATUSES.pending;
+  const isPiecesLock = !checkinItems && isOrderPending;
   const isBinderyActive = get(poLine, 'details.isBinderyActive', false);
 
   const acknowledgeNoteModalLabel = intl.formatMessage({ id: 'ui-receiving.piece.receivingNoteModal.title' });
@@ -293,34 +295,48 @@ const TitleDetails = ({
   } = useFilters(noop);
   const { filters: boundItemsFilters } = useFilters(noop, { [MENU_FILTERS.bound]: ['true'] });
 
-  const expectedPiecesActions = useMemo(
-    () => (
-      <TitleDetailsExpectedActions
-        applyFilters={applyExpectedPiecesFilters}
-        filters={expectedPiecesFilters}
-        hasReceive={hasReceive}
-        onPieceCreate={onPieceCreate}
-        openReceiveList={onReceivePieces}
-        titleId={titleId}
-        disabled={isPiecesLock || restrictions?.protectUpdate}
-        canAddPiece={!restrictions?.protectCreate}
-        toggleColumn={toggleExpectedPiecesColumn}
-        visibleColumns={expectedPiecesVisibleColumns}
-      />
+  const expectedPiecesProtectedActions = useMemo(() => ({
+    [EXPECTED_PIECES_ACTION_NAMES.addPiece]: (
+      restrictions?.protectCreate
+      || (isOrderPending && poLine.checkinItems === false)
     ),
-    [
-      applyExpectedPiecesFilters,
-      expectedPiecesFilters,
-      onPieceCreate,
-      hasReceive,
-      restrictions,
-      onReceivePieces,
-      titleId,
-      isPiecesLock,
-      toggleExpectedPiecesColumn,
-      expectedPiecesVisibleColumns,
-    ],
-  );
+    [EXPECTED_PIECES_ACTION_NAMES.receive]: (
+      !hasReceive
+      || isPiecesLock
+      || restrictions?.protectUpdate
+    ),
+  }), [
+    hasReceive,
+    isOrderPending,
+    isPiecesLock,
+    poLine.checkinItems,
+    restrictions.protectCreate,
+    restrictions.protectUpdate,
+  ]);
+
+  const expectedPiecesActions = useMemo(() => (
+    <TitleDetailsExpectedActions
+      actionsHidden={expectedPiecesProtectedActions}
+      applyFilters={applyExpectedPiecesFilters}
+      filters={expectedPiecesFilters}
+      hasReceive={hasReceive}
+      openReceiveList={onReceivePieces}
+      onPieceCreate={onPieceCreate}
+      titleId={titleId}
+      toggleColumn={toggleExpectedPiecesColumn}
+      visibleColumns={expectedPiecesVisibleColumns}
+    />
+  ), [
+    applyExpectedPiecesFilters,
+    expectedPiecesProtectedActions,
+    expectedPiecesFilters,
+    onPieceCreate,
+    hasReceive,
+    onReceivePieces,
+    titleId,
+    toggleExpectedPiecesColumn,
+    expectedPiecesVisibleColumns,
+  ]);
 
   const hasUnreceive = Boolean(piecesExistence?.[PIECE_STATUS.received]);
   const receivedPiecesActions = useMemo(

src/TitleDetails/TitleDetailsActions/TitleDetailsExpectedActions.js

@@ -16,18 +16,19 @@ import {
 
 import {
   EXPECTED_PIECE_COLUMN_MAPPING,
+  EXPECTED_PIECES_ACTION_NAMES,
   MENU_FILTERS,
   SUPPLEMENT_MENU_FILTER_OPTIONS,
 } from '../../Piece';
 
 export function TitleDetailsExpectedActions({
+  actionsDisabled,
+  actionsHidden,
   applyFilters,
   filters,
   onPieceCreate,
   openReceiveList,
   hasReceive,
-  disabled,
-  canAddPiece,
   toggleColumn,
   visibleColumns,
 }) {
@@ -47,25 +48,27 @@ export function TitleDetailsExpectedActions({
           label={intl.formatMessage({ id: 'stripes-components.paneMenuActionsToggleLabel' })}
           id="expected-pieces-menu-actions"
         >
-          <Button
-            data-testid="add-piece-button"
-            data-test-add-piece-button
-            buttonStyle="dropdownItem"
-            onClick={onPieceCreate}
-            disabled={!canAddPiece}
-          >
-            <Icon size="small" icon="plus-sign">
-              <FormattedMessage id="ui-receiving.piece.button.addPiece" />
-            </Icon>
-          </Button>
+          {(!actionsHidden?.[EXPECTED_PIECES_ACTION_NAMES.addPiece]) && (
+            <Button
+              data-testid="add-piece-button"
+              data-test-add-piece-button
+              buttonStyle="dropdownItem"
+              onClick={onPieceCreate}
+              disabled={actionsDisabled?.[EXPECTED_PIECES_ACTION_NAMES.addPiece]}
+            >
+              <Icon size="small" icon="plus-sign">
+                <FormattedMessage id="ui-receiving.piece.button.addPiece" />
+              </Icon>
+            </Button>
+          )}
 
-          {hasReceive && (
+          {(!actionsHidden?.[EXPECTED_PIECES_ACTION_NAMES.receive]) && (
             <Button
               data-testid="receive-button"
               data-test-title-receive-button
               buttonStyle="dropdownItem"
               onClick={openReceiveList}
-              disabled={disabled}
+              disabled={actionsDisabled?.[EXPECTED_PIECES_ACTION_NAMES.receive]}
             >
               <Icon size="small" icon="receive">
                 <FormattedMessage id="ui-receiving.title.details.button.receive" />
@@ -97,13 +100,13 @@ export function TitleDetailsExpectedActions({
 }
 
 TitleDetailsExpectedActions.propTypes = {
+  actionsDisabled: PropTypes.object,
+  actionsHidden: PropTypes.object,
   applyFilters: PropTypes.func.isRequired,
   filters: PropTypes.object.isRequired,
   hasReceive: PropTypes.bool.isRequired,
   onPieceCreate: PropTypes.func.isRequired,
   openReceiveList: PropTypes.func.isRequired,
   toggleColumn: PropTypes.func.isRequired,
   visibleColumns: PropTypes.arrayOf(PropTypes.string).isRequired,
-  disabled: PropTypes.bool,
-  canAddPiece: PropTypes.bool,
 };

src/TitleDetails/TitleDetailsActions/TitleDetailsExpectedActions.test.js

@@ -4,7 +4,10 @@ import {
 } from '@folio/jest-config-stripes/testing-library/react';
 import user from '@folio/jest-config-stripes/testing-library/user-event';
 
-import { EXPECTED_PIECE_VISIBLE_COLUMNS } from '../../Piece';
+import {
+  EXPECTED_PIECE_VISIBLE_COLUMNS,
+  EXPECTED_PIECES_ACTION_NAMES,
+} from '../../Piece';
 import { TitleDetailsExpectedActions } from './TitleDetailsExpectedActions';
 
 const defaultProps = {
@@ -57,23 +60,55 @@ describe('TitleDetailsExpectedActions', () => {
 
   it('should not call openReceiveList when receive button is pressed and actions are disabled', async () => {
     defaultProps.openReceiveList.mockClear();
-    renderTitleDetailsExpectedActions({ ...defaultProps, disabled: true });
+    renderTitleDetailsExpectedActions({
+      actionsDisabled: {
+        [EXPECTED_PIECES_ACTION_NAMES.receive]: true,
+      },
+    });
 
     await user.click(screen.getByTestId('expected-pieces-action-dropdown'));
     await user.click(screen.getByTestId('receive-button'));
 
     expect(defaultProps.openReceiveList).not.toHaveBeenCalled();
   });
 
+  it('should not render "Receive" button when the action is hidden', async () => {
+    renderTitleDetailsExpectedActions({
+      actionsHidden: {
+        [EXPECTED_PIECES_ACTION_NAMES.receive]: true,
+      },
+    });
+
+    await user.click(screen.getByTestId('expected-pieces-action-dropdown'));
+
+    expect(screen.queryByTestId('receive-button')).not.toBeInTheDocument();
+  });
+
   it('should not call onPieceCreate when add piece button is pressed and actions are disabled', async () => {
     defaultProps.onPieceCreate.mockClear();
-    renderTitleDetailsExpectedActions({ ...defaultProps, disabled: true });
+    renderTitleDetailsExpectedActions({
+      actionsDisabled: {
+        [EXPECTED_PIECES_ACTION_NAMES.addPiece]: true,
+      },
+    });
 
     await user.click(screen.getByTestId('expected-pieces-action-dropdown'));
     await user.click(screen.getByTestId('add-piece-button'));
 
     expect(defaultProps.onPieceCreate).not.toHaveBeenCalled();
   });
+
+  it('should not render "Add piece" button when the action is hidden', async () => {
+    renderTitleDetailsExpectedActions({
+      actionsHidden: {
+        [EXPECTED_PIECES_ACTION_NAMES.addPiece]: true,
+      },
+    });
+
+    await user.click(screen.getByTestId('expected-pieces-action-dropdown'));
+
+    expect(screen.queryByTestId('add-piece-button')).not.toBeInTheDocument();
+  });
 });
 
 describe('TitleDetailsExpectedActions filters', () => {