Draft

src/TitleDetails/AddPieceModal/AddPieceModal.js

@@ -1,4 +1,5 @@
-import { includes } from 'lodash';
+import includes from 'lodash/includes';
+import noop from 'lodash/noop';
 import PropTypes from 'prop-types';
 import {
   useCallback,
@@ -60,6 +61,8 @@ const AddPieceModal = ({
   locationIds,
   locations,
   onCheckIn,
+  onClaimDelay: onClaimDelayProp,
+  onClaimSend,
   pieceFormatOptions,
   values: formValues,
   poLine,
@@ -147,6 +150,11 @@ const AddPieceModal = ({
     onSave();
   }, [change, onSave]);
 
+  const onClaimDelay = useCallback(() => {
+    onSave();
+    onClaimDelayProp();
+  }, [onClaimDelayProp, onSave]);
+
   const start = (
     <Button
       data-test-add-piece-cancel
@@ -163,6 +171,8 @@ const AddPieceModal = ({
       isCreateAnother={isCreateAnother}
       isEditMode={Boolean(id)}
       onCreateAnotherPiece={onCreateAnotherPiece}
+      onClaimDelay={onClaimDelay}
+      onClaimSend={onClaimSend}
       onDelete={toggleDeleteConfirmation}
       onReceive={onReceive}
       onSave={onSave}
@@ -407,6 +417,8 @@ AddPieceModal.propTypes = {
   values: PropTypes.object.isRequired,
   instanceId: PropTypes.string,
   onCheckIn: PropTypes.func.isRequired,
+  onClaimDelay: PropTypes.func.isRequired,
+  onClaimSend: PropTypes.func.isRequired,
   pieceFormatOptions: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
     value: PropTypes.string,

src/TitleDetails/AddPieceModal/AddPieceModalContainer.js

@@ -1,6 +1,6 @@
-import React, { useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { omit } from 'lodash';
+import omit from 'lodash/omit';
 
 import {
   ORDER_FORMATS,
@@ -19,6 +19,8 @@ const AddPieceModalContainer = ({
   locations,
   locationIds,
   onCheckIn,
+  onClaimDelay,
+  onClaimSend,
   onSubmit,
   poLine,
   getHoldingsItemsAndPieces,
@@ -68,6 +70,8 @@ const AddPieceModalContainer = ({
       locationIds={locationIds}
       locations={locations}
       onCheckIn={onQuickReceive}
+      onClaimDelay={onClaimDelay}
+      onClaimSend={onClaimSend}
       onSubmit={onSavePiece}
       pieceFormatOptions={pieceFormatOptions}
       poLine={poLine}
@@ -85,6 +89,8 @@ AddPieceModalContainer.propTypes = {
   locations: PropTypes.arrayOf(PropTypes.object),
   locationIds: PropTypes.arrayOf(PropTypes.string),
   onCheckIn: PropTypes.func.isRequired,
+  onClaimDelay: PropTypes.func.isRequired,
+  onClaimSend: PropTypes.func.isRequired,
   onSubmit: PropTypes.func.isRequired,
   poLine: PropTypes.object.isRequired,
   getHoldingsItemsAndPieces: PropTypes.func.isRequired,

src/TitleDetails/AddPieceModal/ModalActionButtons/ModalActionButtons.js

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -18,6 +17,8 @@ export const ModalActionButtons = ({
   canDeletePiece,
   disabled,
   isEditMode,
+  onClaimDelay,
+  onClaimSend,
   onCreateAnotherPiece,
   onDelete,
   onReceive,
@@ -29,6 +30,8 @@ export const ModalActionButtons = ({
     canDeletePiece,
     disabled,
     isEditMode,
+    onClaimDelay,
+    onClaimSend,
     onCreateAnotherPiece,
     onDelete,
     onReceive,
@@ -83,11 +86,13 @@ ModalActionButtons.propTypes = {
   canDeletePiece: PropTypes.bool,
   disabled: PropTypes.bool,
   isEditMode: PropTypes.bool.isRequired,
-  onCreateAnotherPiece: PropTypes.func,
-  onDelete: PropTypes.func,
-  onReceive: PropTypes.func,
+  onClaimDelay: PropTypes.func.isRequired,
+  onClaimSend: PropTypes.func.isRequired,
+  onCreateAnotherPiece: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onReceive: PropTypes.func.isRequired,
   onSave: PropTypes.func.isRequired,
-  onStatusChange: PropTypes.func,
+  onStatusChange: PropTypes.func.isRequired,
   status: PropTypes.string,
 };
 

src/TitleDetails/AddPieceModal/ModalActionButtons/constants.js

@@ -1,4 +1,3 @@
-import { noop } from 'lodash';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -51,6 +50,8 @@ export const PIECE_ACTIONS = ({
   canDeletePiece,
   disabled,
   isEditMode,
+  onClaimDelay,
+  onClaimSend,
   onCreateAnotherPiece,
   onStatusChange,
   onDelete,
@@ -60,7 +61,7 @@ export const PIECE_ACTIONS = ({
     <Button
       disabled={disabled}
       buttonStyle="dropdownItem"
-      onClick={noop} // TODO UIOR-1160
+      onClick={onClaimDelay}
     >
       <Icon icon="calendar">
         <FormattedMessage id="ui-receiving.piece.action.button.delayClaim" />
@@ -119,7 +120,7 @@ export const PIECE_ACTIONS = ({
     <Button
       disabled={disabled}
       buttonStyle="dropdownItem"
-      onClick={noop} // TODO UIOR-1152
+      onClick={onClaimSend}
     >
       <Icon icon="envelope">
         <FormattedMessage id="ui-receiving.piece.action.button.sendClaim" />

src/TitleDetails/DelayClaimModal/DelayClaimModal.js

@@ -0,0 +1,64 @@
+import PropTypes from 'prop-types';
+import {
+  FormattedMessage,
+  useIntl,
+} from 'react-intl';
+
+import {
+  Button,
+  Modal,
+} from '@folio/stripes/components';
+import { ModalFooter } from '@folio/stripes-acq-components';
+
+export const DelayClaimModal = ({
+  onCancel,
+  onConfirm,
+}) => {
+  const intl = useIntl();
+  const modalLabel = intl.formatMessage({ id: 'ui-receiving.modal.delayClaim.heading' });
+
+  const start = (
+    <Button
+      marginBottom0
+      onClick={onCancel}
+    >
+      <FormattedMessage id="stripes-acq-components.FormFooter.cancel" />
+    </Button>
+  );
+  const end = (
+    <>
+      <Button
+        buttonStyle="primary"
+        marginBottom0
+        onClick={onConfirm}
+      >
+        <FormattedMessage id="stripes-acq-components.FormFooter.save" />
+      </Button>
+    </>
+  );
+
+  const footer = (
+    <ModalFooter
+      renderStart={start}
+      renderEnd={end}
+    />
+  );
+
+  return (
+    <Modal
+      open
+      id="delay-claim-modal"
+      size="small"
+      footer={footer}
+      label={modalLabel}
+      aria-label={modalLabel}
+    >
+      Hello
+    </Modal>
+  );
+};
+
+DelayClaimModal.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+};

src/TitleDetails/DelayClaimModal/index.js

@@ -0,0 +1 @@
+export { DelayClaimModal } from './DelayClaimModal';

src/TitleDetails/TitleDetails.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState, useRef } from 'react';
+import { useCallback, useMemo, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import ReactRouterPropTypes from 'react-router-prop-types';
@@ -58,6 +58,7 @@ import {
   TITLE_ACCORDION_LABELS,
   UNRECEIVABLE_PIECE_COLUMN_MAPPING,
 } from './constants';
+import { DelayClaimModal } from './DelayClaimModal';
 import {
   TitleDetailsExpectedActions,
   TitleDetailsReceivedActions,
@@ -108,11 +109,14 @@ const TitleDetails = ({
 }) => {
   const intl = useIntl();
   const stripes = useStripes();
+
   const [isAcknowledgeNote, toggleAcknowledgeNote] = useModalToggle();
   const [isAddPieceModalOpened, toggleAddPieceModal] = useModalToggle();
   const [pieceValues, setPieceValues] = useState({});
-  const [confirmAcknowledgeNote, setConfirmAcknowledgeNote] = useState();
   const [isConfirmReceiving, toggleConfirmReceiving] = useModalToggle();
+  const [isClaimDelayModalOpen, toggleClaimDelayModal] = useModalToggle();
+
+  const [confirmAcknowledgeNote, setConfirmAcknowledgeNote] = useState();
   const confirmReceivingPromise = useRef({});
   const accordionStatusRef = useRef();
   const receivingNote = get(poLine, 'details.receivingNote');
@@ -284,6 +288,18 @@ const TitleDetails = ({
       : onReceive(values);
   }, [isOrderClosed, confirmReceiving, onCheckIn, getPieceValues, onCreateAnotherPiece]);
 
+  const delayClaim = useCallback(() => {
+    console.log('delay claim', pieceValues.id);
+    toggleClaimDelayModal();
+  }, [pieceValues.id, toggleClaimDelayModal]);
+
+  console.log('pieceValues', pieceValues);
+
+  const cancelClaimDelay = useCallback(() => {
+    toggleClaimDelayModal();
+    openAddPieceModal(null, pieceValues);
+  }, [openAddPieceModal, pieceValues, toggleClaimDelayModal]);
+
   const hasReceive = Boolean(piecesExistance?.[EXPECTED_PIECES_SEARCH_VALUE]);
 
   const [isExpectedPiecesLoading, setExpectedPiecesLoading] = useState(false);
@@ -597,6 +613,8 @@ const TitleDetails = ({
             locations={locations}
             locationIds={locationIds}
             onCheckIn={onQuickReceive}
+            onClaimDelay={toggleClaimDelayModal}
+            onClaimSend={noop} // TODO: UIOR-1152
             onSubmit={onSave}
             poLine={poLine}
             getHoldingsItemsAndPieces={getHoldingsItemsAndPieces}
@@ -615,6 +633,13 @@ const TitleDetails = ({
             open
           />
         )}
+
+        {isClaimDelayModalOpen && (
+          <DelayClaimModal
+            onCancel={cancelClaimDelay}
+            onConfirm={delayClaim}
+          />
+        )}
       </Pane>
     </HasCommand>
   );

translations/ui-receiving/en.json

@@ -223,6 +223,9 @@
   "requests.message.itemId": "Item ({itemId})",
   "requests.footer.close": "Close",
 
+  "modal.delayClaim.heading": "Delay piece",
+  "modal.delayClaim.field.delayTo": "Delay to",
+
   "shortcut.receive": "Receive pieces/Quick receive",
   "shortcut.piece.saveAndCreateAnother": "Save a piece and create another",