Move reusable claiming code from ui-receiving to the shared library (#…

…841)

* Move reusable claiming code from ui-receiving to the shared library

* move send and delay claims modals to shared lib

* add gutter for modal message

* ignore empty records for all selected display

* fix broken test

* add unit tests

* add tests

* move GH related files to .github folder

* update useRecordsSelect hook to add more functionality

* reset forms on cancel

* sonar warnings

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @folio-org/acquisitions-ui

PULL_REQUEST_TEMPLATE.md → .github/PULL_REQUEST_TEMPLATE.md

@@ -35,6 +35,19 @@
  [ ] Use GitHub checklists. When solved, check the box and explain the answer.
 -->
 
+## Screenshots
+<!-- OPTIONAL
+ One picture is literally worth a thousand words. When the feature is
+ an interaction, an animated GIF or video is best. Most of the time it helps to
+ include "before" and "after" screenshots to quickly demonstrate the
+ value of the feature.
+
+ Here are some great tools to help you record gifs:
+
+ Windows: https://getsharex.com/
+ Mac: https://gifox.io/
+-->
+
 <!-- OPTIONAL
 ## Learning
   Help out not only your reviewer, but also your fellow developer!

CHANGELOG.md

@@ -6,6 +6,7 @@
 * Move reusable version history components to the ACQ lib. Refs UISACQCOMP-230.
 * Move reusable helper function to support version history functionality. Refs UISACQCOMP-232.
 * Move reusable version history hook useVersionHistoryValueResolvers to the ACQ lib. Refs UISACQCOMP-235.
+* Move reusable claiming code from `ui-receiving` to the shared library. Refs UISACQCOMP-236.
 
 ## [6.0.2](https://github.com/folio-org/stripes-acq-components/tree/v6.0.2) (2024-12-04)
 [Full Changelog](https://github.com/folio-org/stripes-acq-components/compare/v6.0.1...v6.0.2)

lib/FindRecords/hooks/useRecordsSelect/useRecordsSelect.js

@@ -1,5 +1,12 @@
-import { useState, useCallback, useEffect } from 'react';
-import { differenceBy, keyBy } from 'lodash';
+import differenceBy from 'lodash/differenceBy';
+import keyBy from 'lodash/keyBy';
+import omit from 'lodash/omit';
+import pick from 'lodash/pick';
+import {
+  useState,
+  useCallback,
+  useEffect,
+} from 'react';
 
 import { EVENT_EMITTER_EVENTS } from '../../../constants';
 import { useEventEmitter } from '../../../hooks';
@@ -55,7 +62,7 @@ export const useRecordsSelect = ({ records }) => {
   }, [emitChangeEvent, eventEmitter]);
 
   useEffect(() => {
-    setAllRecordsSelected(records.every(r => Boolean(selectedRecordsMap[r.id])));
+    setAllRecordsSelected(Boolean(records?.length) && records.every(r => Boolean(selectedRecordsMap[r.id])));
   }, [records, selectedRecordsMap]);
 
   const toggleSelectAll = useCallback(() => {
@@ -95,12 +102,49 @@ export const useRecordsSelect = ({ records }) => {
     [selectedRecordsMap],
   );
 
+  /*
+   * Clear all selected records.
+   */
+  const resetAllSelectedRecords = useCallback(() => {
+    setSelectedRecordsMap({});
+    emitChangeEvent({});
+  }, [emitChangeEvent]);
+
+  /*
+   * Clear selected records with provided ids.
+   */
+  const resetSelectedRecordsByIds = useCallback((ids) => {
+    setSelectedRecordsMap(prevMap => {
+      const newMap = omit(prevMap, ids);
+
+      emitChangeEvent(newMap);
+
+      return newMap;
+    });
+  }, [emitChangeEvent]);
+
+  /*
+   * Clear selected records except the ones with provided ids.
+   */
+  const resetOtherSelectedRecordsByIds = useCallback((ids) => {
+    setSelectedRecordsMap(prevMap => {
+      const newMap = pick(prevMap, ids);
+
+      emitChangeEvent(newMap);
+
+      return newMap;
+    });
+  }, [emitChangeEvent]);
+
   return {
     allRecordsSelected,
-    selectedRecordsMap,
+    isRecordSelected,
+    resetAllSelectedRecords,
+    resetOtherSelectedRecordsByIds,
+    resetSelectedRecordsByIds,
     selectedRecordsLength,
-    toggleSelectAll,
+    selectedRecordsMap,
     selectRecord,
-    isRecordSelected,
+    toggleSelectAll,
   };
 };

lib/FindRecords/index.js

@@ -1 +1,2 @@
 export * from './FindRecords';
+export { useRecordsSelect } from './hooks';

lib/claiming/components/FieldClaimingDate/FieldClaimingDate.js

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+
+import { FieldDatepickerFinal } from '../../../FieldDatepicker';
+import { validateRequired } from '../../../utils';
+import {
+  excludePreviousDays,
+  validateClaimingDate,
+} from './utils';
+
+export const FieldClaimingDate = ({
+  name,
+  required,
+  ...props
+}) => {
+  const validate = (value) => {
+    return (
+      (required && validateRequired(value))
+      || validateClaimingDate(value)
+    );
+  };
+
+  return (
+    <FieldDatepickerFinal
+      usePortal
+      name={name}
+      required={required}
+      validate={validate}
+      exclude={excludePreviousDays}
+      {...props}
+    />
+  );
+};
+
+FieldClaimingDate.propTypes = {
+  name: PropTypes.string,
+  required: PropTypes.bool,
+};
+
+FieldClaimingDate.defaultProps = {
+  name: 'claimingDate',
+  required: true,
+};

lib/claiming/components/FieldClaimingDate/FieldClaimingDate.test.js

@@ -0,0 +1,38 @@
+/* Developed collaboratively using AI (GitHub Copilot) */
+
+import {
+  render,
+  screen,
+} from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+import stripesFinalForm from '@folio/stripes/final-form';
+
+import { FieldClaimingDate } from './FieldClaimingDate';
+
+const defaultProps = {
+  label: 'Label',
+};
+
+const FormComponent = stripesFinalForm({})(({ children }) => <form>{children}</form>);
+
+const renderFieldClaimingDate = (props = {}, formProps = {}) => render(
+  <FormComponent
+    onSubmit={jest.fn}
+    {...formProps}
+  >
+    <FieldClaimingDate
+      {...defaultProps}
+      {...props}
+    />
+  </FormComponent>,
+  { wrapper: MemoryRouter },
+);
+
+describe('FieldClaimingDate', () => {
+  it('should render field', () => {
+    renderFieldClaimingDate();
+
+    expect(screen.getByText(defaultProps.label)).toBeInTheDocument();
+  });
+});

lib/claiming/components/FieldClaimingDate/index.js

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

lib/claiming/components/FieldClaimingDate/utils.js

@@ -0,0 +1,19 @@
+import { FormattedMessage } from 'react-intl';
+
+import { dayjs } from '@folio/stripes/components';
+
+const isSameOrBeforeDay = (day) => {
+  const today = dayjs().startOf('day');
+
+  return day.isSameOrBefore(today, 'day');
+};
+
+export const validateClaimingDate = (value) => {
+  return isSameOrBeforeDay(dayjs(value))
+    ? <FormattedMessage id="stripes-acq-components.validation.dateAfter" />
+    : undefined;
+};
+
+export const excludePreviousDays = (day) => {
+  return isSameOrBeforeDay(day);
+};

lib/claiming/components/index.js

@@ -0,0 +1,2 @@
+export * from './menu-items';
+export * from './modals';

lib/claiming/components/menu-items/DelayClaimActionMenuItem/DelayClaimActionMenuItem.js

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import {
+  Button,
+  Icon,
+} from '@folio/stripes/components';
+
+export const DelayClaimActionMenuItem = ({
+  disabled,
+  onClick,
+}) => {
+  return (
+    <Button
+      data-testid="delay-claim-button"
+      disabled={disabled}
+      buttonStyle="dropdownItem"
+      onClick={onClick}
+    >
+      <Icon icon="calendar">
+        <FormattedMessage id="stripes-acq-components.claiming.action.delayClaim" />
+      </Icon>
+    </Button>
+  );
+};
+
+DelayClaimActionMenuItem.propTypes = {
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+};

lib/claiming/components/menu-items/DelayClaimActionMenuItem/DelayClaimActionMenuItem.test.js

@@ -0,0 +1,48 @@
+/* Developed collaboratively using AI (GitHub Copilot) */
+
+import {
+  render,
+  screen,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { DelayClaimActionMenuItem } from './DelayClaimActionMenuItem';
+
+const defaultProps = {
+  onClick: jest.fn(),
+};
+
+const renderComponent = (props = {}) => render(
+  <DelayClaimActionMenuItem
+    {...defaultProps}
+    {...props}
+  />,
+);
+
+describe('DelayClaimActionMenuItem', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should call onClick when button is clicked', async () => {
+    renderComponent();
+
+    await userEvent.click(screen.getByTestId('delay-claim-button'));
+
+    expect(defaultProps.onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should be disabled when disabled prop is true', () => {
+    renderComponent({ disabled: true });
+
+    expect(screen.getByTestId('delay-claim-button')).toBeDisabled();
+  });
+
+  it('should not call onClick when button is disabled and clicked', async () => {
+    renderComponent({ disabled: true });
+
+    await userEvent.click(screen.getByTestId('delay-claim-button'));
+
+    expect(defaultProps.onClick).not.toHaveBeenCalled();
+  });
+});

lib/claiming/components/menu-items/DelayClaimActionMenuItem/index.js

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

lib/claiming/components/menu-items/MarkUnreceivableActionMenuItem/MarkUnreceivableActionMenuItem.js

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import {
+  Button,
+  Icon,
+} from '@folio/stripes/components';
+
+export const MarkUnreceivableActionMenuItem = ({
+  disabled,
+  onClick,
+}) => {
+  return (
+    <Button
+      data-testid="unreceivable-button"
+      disabled={disabled}
+      buttonStyle="dropdownItem"
+      onClick={onClick}
+    >
+      <Icon icon="cancel">
+        <FormattedMessage id="stripes-acq-components.claiming.action.unreceivable" />
+      </Icon>
+    </Button>
+  );
+};
+
+MarkUnreceivableActionMenuItem.propTypes = {
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+};

lib/claiming/components/menu-items/MarkUnreceivableActionMenuItem/MarkUnreceivableActionMenuItem.test.js

@@ -0,0 +1,53 @@
+/* Developed collaboratively using AI (GitHub Copilot) */
+
+import {
+  render,
+  screen,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { MarkUnreceivableActionMenuItem } from './MarkUnreceivableActionMenuItem';
+
+const defaultProps = {
+  onClick: jest.fn(),
+  disabled: false,
+};
+
+const renderComponent = (props = {}) => render(
+  <MarkUnreceivableActionMenuItem
+    {...defaultProps}
+    {...props}
+  />,
+);
+
+describe('MarkUnreceivableActionMenuItem', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the button', () => {
+    renderComponent();
+
+    expect(screen.getByTestId('unreceivable-button')).toBeInTheDocument();
+  });
+
+  it('should call onClick when button is clicked', async () => {
+    renderComponent();
+
+    await userEvent.click(screen.getByTestId('unreceivable-button'));
+
+    expect(defaultProps.onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should disable the button when disabled prop is true', () => {
+    renderComponent({ disabled: true });
+
+    expect(screen.getByTestId('unreceivable-button')).toBeDisabled();
+  });
+
+  it('should enable the button when disabled prop is false', () => {
+    renderComponent({ disabled: false });
+
+    expect(screen.getByTestId('unreceivable-button')).toBeEnabled();
+  });
+});

lib/claiming/components/menu-items/MarkUnreceivableActionMenuItem/index.js

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