UIREC-303 UIREC-304 Implementation of the claim send and claim delay …

…actions

CHANGELOG.md

@@ -11,6 +11,8 @@
 * View piece status change log. Refs UIREC-305.
 * Add CSV export options for new piece statuses. Refs UIREC-306.
 * Add the "Acquisition units" protected field to the receiving title form. Refs UIREC-295.
+* Delay claim action for piece record. Refs UIREC-303.
+* Send claim action for piece record. Refs UIREC-304.
 
 ## [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

@@ -49,12 +49,15 @@ import {
   LineLocationsView,
 } from '../../common/components';
 import { HOLDINGS_API } from '../../common/constants';
+import { getClaimingIntervalFromDate } from '../../common/utils';
 import {
   PIECE_MODAL_ACCORDION,
   PIECE_MODAL_ACCORDION_LABELS,
 } from '../constants';
+import { DelayClaimModal } from '../DelayClaimModal';
 import { DeletePieceModal } from '../DeletePieceModal';
 import { DeleteHoldingsModal } from '../DeleteHoldingsModal';
+import { SendClaimModal } from '../SendClaimModal';
 import { ModalActionButtons } from './ModalActionButtons';
 import { ReceivingStatusChangeLog } from './ReceivingStatusChangeLog';
 
@@ -63,7 +66,7 @@ const AddPieceModal = ({
   createInventoryValues,
   deletePiece,
   canDeletePiece,
-  form: { mutators, change, getState },
+  form,
   initialValues,
   handleSubmit,
   hasValidationErrors,
@@ -77,10 +80,18 @@ const AddPieceModal = ({
   poLine,
   getHoldingsItemsAndPieces,
 }) => {
+  const {
+    batch,
+    change,
+    getState,
+    mutators,
+  } = form;
   const {
     enumeration,
+    externalNote,
     format,
     id,
+    internalNote,
     itemId,
     isCreateAnother,
     metadata,
@@ -90,8 +101,11 @@ const AddPieceModal = ({
   const isLocationRequired = includes(createInventoryValues[format], INVENTORY_RECORDS_TYPE.instanceAndHolding);
   const isNotReceived = receivingStatus !== PIECE_STATUS.received;
   const labelId = id ? 'ui-receiving.piece.addPieceModal.editTitle' : 'ui-receiving.piece.addPieceModal.title';
+
   const [isDeleteConfirmation, toggleDeleteConfirmation] = useModalToggle();
   const [isDeleteHoldingsConfirmation, toggleDeleteHoldingsConfirmation] = useModalToggle();
+  const [isClaimDelayModalOpen, toggleClaimDelayModal] = useModalToggle();
+  const [isClaimSendModalOpen, toggleClaimSendModal] = useModalToggle();
 
   const stripes = useStripes();
   const ky = useOkapiKy();
@@ -169,6 +183,19 @@ const AddPieceModal = ({
     onSave();
   }, [change, onSave]);
 
+  const onClaimDelay = useCallback(({ claimingDate }) => {
+    change('claimingInterval', getClaimingIntervalFromDate(claimingDate));
+    onStatusChange(PIECE_STATUS.claimDelayed);
+  }, [change, onStatusChange]);
+
+  const onClaimSend = useCallback(({ claimingDate, ...rest }) => {
+    batch(() => {
+      change('claimingInterval', getClaimingIntervalFromDate(claimingDate));
+      Object.entries(rest).forEach(([field, value]) => change(field, value));
+    });
+    onStatusChange(PIECE_STATUS.claimSent);
+  }, [batch, change, onStatusChange]);
+
   const start = (
     <Button
       data-test-add-piece-cancel
@@ -185,6 +212,8 @@ const AddPieceModal = ({
       isCreateAnother={isCreateAnother}
       isEditMode={Boolean(id)}
       onCreateAnotherPiece={onCreateAnotherPiece}
+      onClaimDelay={toggleClaimDelayModal}
+      onClaimSend={toggleClaimSendModal}
       onDelete={toggleDeleteConfirmation}
       onReceive={onReceive}
       onSave={onSave}
@@ -334,6 +363,24 @@ const AddPieceModal = ({
                     />
                   </Col>
                 </Row>
+                <Row>
+                  <Col xs>
+                    <Field
+                      component={TextArea}
+                      fullWidth
+                      label={<FormattedMessage id="ui-receiving.piece.internalNote" />}
+                      name="internalNote"
+                    />
+                  </Col>
+                  <Col xs>
+                    <Field
+                      component={TextArea}
+                      fullWidth
+                      label={<FormattedMessage id="ui-receiving.piece.externalNote" />}
+                      name="externalNote"
+                    />
+                  </Col>
+                </Row>
                 <Row>
                   <Col xs={6}>
                     <LineLocationsView
@@ -449,6 +496,19 @@ const AddPieceModal = ({
           />
         )
       }
+
+      <DelayClaimModal
+        open={isClaimDelayModalOpen}
+        onCancel={toggleClaimDelayModal}
+        onSubmit={onClaimDelay}
+      />
+
+      <SendClaimModal
+        open={isClaimSendModalOpen}
+        onCancel={toggleClaimSendModal}
+        onSubmit={onClaimSend}
+        initialValues={{ internalNote, externalNote }}
+      />
     </Modal>
   );
 };

src/TitleDetails/AddPieceModal/ModalActionButtons/ModalActionButtons.js

@@ -17,6 +17,8 @@ export const ModalActionButtons = ({
   canDeletePiece,
   disabled,
   isEditMode,
+  onClaimDelay,
+  onClaimSend,
   onCreateAnotherPiece,
   onDelete,
   onReceive,
@@ -28,6 +30,8 @@ export const ModalActionButtons = ({
     canDeletePiece,
     disabled,
     isEditMode,
+    onClaimDelay,
+    onClaimSend,
     onCreateAnotherPiece,
     onDelete,
     onReceive,
@@ -82,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 {
@@ -43,6 +42,8 @@ export const PIECE_ACTIONS = ({
   canDeletePiece,
   disabled,
   isEditMode,
+  onClaimDelay,
+  onClaimSend,
   onCreateAnotherPiece,
   onStatusChange,
   onDelete,
@@ -52,7 +53,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" />
@@ -111,7 +112,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,82 @@
+import PropTypes from 'prop-types';
+import {
+  FormattedMessage,
+  useIntl,
+} from 'react-intl';
+
+import {
+  Button,
+  Col,
+  Modal,
+  Row,
+} from '@folio/stripes/components';
+import stripesFinalForm from '@folio/stripes/final-form';
+import { ModalFooter } from '@folio/stripes-acq-components';
+
+import { FieldClaimingDate } from '../../common/components';
+
+export const DelayClaimModal = ({
+  onCancel,
+  handleSubmit,
+  open,
+}) => {
+  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"
+        onClick={handleSubmit}
+        marginBottom0
+      >
+        <FormattedMessage id="stripes-acq-components.FormFooter.save" />
+      </Button>
+    </>
+  );
+
+  const footer = (
+    <ModalFooter
+      renderStart={start}
+      renderEnd={end}
+    />
+  );
+
+  return (
+    <Modal
+      open={open}
+      id="delay-claim-modal"
+      size="small"
+      footer={footer}
+      label={modalLabel}
+      aria-label={modalLabel}
+    >
+      <form onSubmit={handleSubmit}>
+        <Row>
+          <Col xs>
+            <FieldClaimingDate label={<FormattedMessage id="ui-receiving.modal.delayClaim.field.delayTo" />} />
+          </Col>
+        </Row>
+      </form>
+    </Modal>
+  );
+};
+
+DelayClaimModal.propTypes = {
+  handleSubmit: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  open: PropTypes.bool,
+};
+
+export default stripesFinalForm({
+  navigationCheck: true,
+  subscription: { values: true },
+})(DelayClaimModal);

src/TitleDetails/DelayClaimModal/index.js

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

src/TitleDetails/SendClaimModal/SendClaimModal.js

@@ -0,0 +1,102 @@
+import PropTypes from 'prop-types';
+import { Field } from 'react-final-form';
+import {
+  FormattedMessage,
+  useIntl,
+} from 'react-intl';
+
+import {
+  Button,
+  Col,
+  Modal,
+  Row,
+  TextArea,
+} from '@folio/stripes/components';
+import stripesFinalForm from '@folio/stripes/final-form';
+import { ModalFooter } from '@folio/stripes-acq-components';
+
+import { FieldClaimingDate } from '../../common/components';
+
+const SendClaimModal = ({
+  handleSubmit,
+  onCancel,
+  open,
+}) => {
+  const intl = useIntl();
+  const modalLabel = intl.formatMessage({ id: 'ui-receiving.modal.sendClaim.heading' });
+
+  const start = (
+    <Button
+      marginBottom0
+      onClick={onCancel}
+    >
+      <FormattedMessage id="stripes-acq-components.FormFooter.cancel" />
+    </Button>
+  );
+  const end = (
+    <>
+      <Button
+        buttonStyle="primary"
+        marginBottom0
+        onClick={handleSubmit}
+      >
+        <FormattedMessage id="stripes-acq-components.FormFooter.save" />
+      </Button>
+    </>
+  );
+
+  const footer = (
+    <ModalFooter
+      renderStart={start}
+      renderEnd={end}
+    />
+  );
+
+  return (
+    <Modal
+      open={open}
+      id="send-claim-modal"
+      footer={footer}
+      label={modalLabel}
+      aria-label={modalLabel}
+    >
+      <form onSubmit={handleSubmit}>
+        <Row>
+          <Col xs>
+            <FieldClaimingDate label={<FormattedMessage id="ui-receiving.modal.sendClaim.field.claimExpiryDate" />} />
+          </Col>
+        </Row>
+
+        <Row>
+          <Col xs>
+            <Field
+              component={TextArea}
+              fullWidth
+              label={<FormattedMessage id="ui-receiving.piece.internalNote" />}
+              name="internalNote"
+            />
+          </Col>
+          <Col xs>
+            <Field
+              component={TextArea}
+              fullWidth
+              label={<FormattedMessage id="ui-receiving.piece.externalNote" />}
+              name="externalNote"
+            />
+          </Col>
+        </Row>
+      </form>
+    </Modal>
+  );
+};
+
+SendClaimModal.propTypes = {
+  handleSubmit: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  open: PropTypes.bool,
+};
+
+export default stripesFinalForm({
+  navigationCheck: true,
+  subscription: { values: true },
+})(SendClaimModal);

src/TitleDetails/SendClaimModal/index.js

@@ -0,0 +1 @@
+export { default as SendClaimModal } from './SendClaimModal';