UISACQCOMP-169: add donor filters component (#732)

* UISACQCOMP-169: add donor filters component

* handle clear all functionality

* test: add test coverage

* tests: add test coverage

* update donors list behavior

* fix: export names

Author: alisher-epam

CHANGELOG.md

@@ -7,6 +7,7 @@
 * View the list of donors. Refs UISACQCOMP-166.
 * Added `indexRef` and `inputRef` props to `<SingleSearchForm>`. Refs UISACQCOMP-167.
 * Extend Donors component functionality. Refs UISACQCOMP-168.
+* Add Donors Filter component. Refs UISACQCOMP-169.
 
 ## [5.0.0](https://github.com/folio-org/stripes-acq-components/tree/v5.0.0) (2023-10-12)
 [Full Changelog](https://github.com/folio-org/stripes-acq-components/compare/v4.0.2...v5.0.0)

lib/Donors/DonorsLookup.js

@@ -22,6 +22,7 @@ export const DonorsLookup = ({
   onAddDonors,
   searchLabel,
   visibleColumns,
+  searchButtonStyle,
 }) => {
   const stripes = useStripes();
 
@@ -32,7 +33,7 @@ export const DonorsLookup = ({
       type="find-organization"
       dataKey="organization"
       searchLabel={searchLabel}
-      searchButtonStyle="default"
+      searchButtonStyle={searchButtonStyle}
       disableRecordCreation
       stripes={stripes}
       selectVendor={onAddDonors}
@@ -59,9 +60,11 @@ DonorsLookup.propTypes = {
   searchLabel: PropTypes.node,
   visibleColumns: PropTypes.arrayOf(PropTypes.string),
   columnWidths: PropTypes.object,
+  searchButtonStyle: PropTypes.string,
 };
 
 DonorsLookup.defaultProps = {
   searchLabel: <FormattedMessage id="stripes-acq-components.donors.button.addDonor" />,
   visibleColumns: pluginVisibleColumns,
+  searchButtonStyle: 'default',
 };

lib/Donors/DonorsLookup.test.js

@@ -41,6 +41,7 @@ describe('DonorsLookup', () => {
     const addDonorsButton = screen.getByText('Add donor');
 
     expect(addDonorsButton).toBeDefined();
+
     await user.click(addDonorsButton);
     expect(mockOnAddDonors).toHaveBeenCalledWith([mockVendorData]);
   });

lib/DonorsFilter/PluggableDonorsFilter.js

@@ -0,0 +1,112 @@
+import { map, sortBy, uniqBy } from 'lodash';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { MultiSelection } from '@folio/stripes/components';
+
+import {
+  DonorsLookup,
+  useFetchDonors,
+} from '../Donors';
+import { FilterAccordion } from '../FilterAccordion';
+
+export const PluggableDonorsFilter = ({
+  id,
+  activeFilters,
+  closedByDefault,
+  disabled,
+  labelId,
+  name,
+  onChange,
+}) => {
+  const { donors } = useFetchDonors(activeFilters);
+  const [selectedDonors, setSelectedDonors] = useState([]);
+
+  useEffect(() => {
+    // set initial selected donors from active filters prop
+    if (activeFilters?.length && !selectedDonors?.length) {
+      setSelectedDonors(donors);
+    }
+  }, [activeFilters, donors, selectedDonors]);
+
+  const onSelectDonor = useCallback((values) => {
+    const updatedDonorIds = uniqBy([...donors, ...values], 'id');
+
+    setSelectedDonors(updatedDonorIds);
+    onChange({
+      name,
+      values: map(updatedDonorIds, 'id'),
+    });
+  }, [donors, name, onChange]);
+
+  const onRemove = useCallback((donor) => {
+    const updatedDonorIds = selectedDonors.filter(({ id: donorId }) => donorId !== donor.value);
+
+    setSelectedDonors(updatedDonorIds);
+    onChange({
+      name,
+      values: map(updatedDonorIds, 'id'),
+    });
+  }, [name, onChange, selectedDonors]);
+
+  const intl = useIntl();
+  const label = intl.formatMessage({ id: labelId });
+  const dataOptions = useMemo(() => {
+    return selectedDonors.map(donor => ({ value: donor.id, label: donor.name }));
+  }, [selectedDonors]);
+
+  const onClearAll = () => {
+    onChange({
+      name,
+      values: [],
+    });
+    setSelectedDonors([]);
+  };
+
+  return (
+    <FilterAccordion
+      activeFilters={activeFilters}
+      closedByDefault={closedByDefault}
+      disabled={disabled}
+      id={id}
+      labelId={labelId}
+      name={name}
+      onChange={onClearAll}
+    >
+      <MultiSelection
+        id="input-tag"
+        aria-label={label}
+        disabled
+        dataOptions={sortBy(dataOptions, ['value'])}
+        value={sortBy(dataOptions, ['value'])}
+        onRemove={onRemove}
+      />
+      <DonorsLookup
+        searchButtonStyle="link"
+        onAddDonors={onSelectDonor}
+        searchLabel={<FormattedMessage id="stripes-acq-components.filter.donor.lookup" />}
+      />
+    </FilterAccordion>
+  );
+};
+
+PluggableDonorsFilter.propTypes = {
+  activeFilters: PropTypes.arrayOf(PropTypes.string),
+  closedByDefault: PropTypes.bool,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  labelId: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+PluggableDonorsFilter.defaultProps = {
+  closedByDefault: true,
+  disabled: false,
+};

lib/DonorsFilter/PluggableDonorsFilter.test.js

@@ -0,0 +1,90 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { render } from '@testing-library/react';
+import user from '@testing-library/user-event';
+
+import { PluggableDonorsFilter } from './PluggableDonorsFilter';
+
+const mockVendorData = { id: '1', name: 'Amazon' };
+
+jest.mock('../Donors', () => ({
+  ...jest.requireActual('../Donors'),
+  useFetchDonors: jest.fn(() => ({
+    isLoading: false,
+    donors: [{ id: '1', name: 'Amazon' }],
+  })),
+  DonorsLookup: jest.fn(({ children, ...rest }) => {
+    return (
+      <div>
+        {children}
+        <button
+          type="button"
+          id={rest?.name}
+          onClick={() => rest?.onAddDonors([mockVendorData])}
+        >
+          Add donor
+        </button>
+      </div>
+    );
+  }),
+}));
+
+const labelId = 'ui-orders.orderDetails.assignedTo';
+
+const queryClient = new QueryClient();
+
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    {children}
+  </QueryClientProvider>
+);
+
+const renderFilter = (props) => (render(
+  <PluggableDonorsFilter
+    id="donor"
+    activeFilters={[]}
+    labelId={labelId}
+    name={mockVendorData.name}
+    onChange={() => {}}
+    {...props}
+  />,
+  { wrapper },
+));
+
+describe('PluggableDonorsFilter', () => {
+  it('should render component', () => {
+    const { getAllByText } = renderFilter();
+
+    expect(getAllByText(labelId)).toHaveLength(2);
+  });
+
+  it('should add donor', () => {
+    const mockOnAddDonors = jest.fn();
+    const { getByText } = renderFilter({ onChange: mockOnAddDonors });
+
+    const addDonorsButton = getByText('Add donor');
+
+    expect(addDonorsButton).toBeInTheDocument();
+    user.click(addDonorsButton);
+    expect(mockOnAddDonors).toHaveBeenCalledWith({
+      name: mockVendorData.name,
+      values: [mockVendorData.id],
+    });
+  });
+
+  it('should clear all donors', () => {
+    const mockOnAddDonors = jest.fn();
+    const { getAllByRole } = renderFilter({
+      onChange: mockOnAddDonors,
+      activeFilters: [mockVendorData.id],
+    });
+
+    const clearAllButton = getAllByRole('button')[1];
+
+    expect(clearAllButton).toBeInTheDocument();
+    user.click(clearAllButton);
+    expect(mockOnAddDonors).toHaveBeenCalledWith({
+      name: mockVendorData.name,
+      values: [],
+    });
+  });
+});

lib/DonorsFilter/index.js

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

lib/index.js

@@ -17,6 +17,7 @@ export * from './CurrencyExchangeRateFields';
 export * from './CurrencySymbol';
 export * from './DeleteHoldingsModal';
 export * from './Donors';
+export * from './DonorsFilter';
 export * from './DragDropMCL';
 export * from './DynamicSelection';
 export * from './DynamicSelectionFilter';

translations/stripes-acq-components/en.json

@@ -107,6 +107,8 @@
   "organization": "Organization",
   "filter.organization.lookup": "Organization look-up",
   "filter.organization.lookupNoSupport": "Organization look-up is not supported",
+  "filter.donor.lookup": "Donor look-up",
+  "filter.donor.lookupNoSupport": "Donor look-up is not supported",
   "filter.user.lookup": "User look-up",
   "filter.user.lookupNoSupport": "user look-up is not supported",
   "filter.expenseClass": "Expense class",