refactor: add config properties for plugin to implement donors

lib/DonorsList/AddDonorButton.js

@@ -0,0 +1,60 @@
+import { map } from 'lodash';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import { Pluggable } from '@folio/stripes/core';
+
+import {
+  initialFilters,
+  modalLabel,
+  pluginVisibleColumns,
+  resultsPaneTitle,
+  searchableIndexes,
+  visibleFilters,
+} from './constants';
+
+const AddDonorButton = ({ fetchDonors, fields, stripes, name }) => {
+  const addDonors = (donors = []) => {
+    const addedDonorIds = new Set(fields.value);
+    const newDonorsIds = map(donors.filter(({ id }) => !addedDonorIds.has(id)), 'id');
+
+    if (newDonorsIds.length) {
+      fetchDonors([...addedDonorIds, ...newDonorsIds]);
+      newDonorsIds.forEach(contactId => fields.push(contactId));
+    }
+  };
+
+  return (
+    <Pluggable
+      id={`${name}-plugin`}
+      aria-haspopup="true"
+      type="find-organization"
+      dataKey="organization"
+      searchLabel={<FormattedMessage id="stripes-acq-components.donors.button.addDonor" />}
+      searchButtonStyle="default"
+      disableRecordCreation
+      stripes={stripes}
+      selectVendor={addDonors}
+      modalLabel={modalLabel}
+      resultsPaneTitle={resultsPaneTitle}
+      visibleColumns={pluginVisibleColumns}
+      initialFilters={initialFilters}
+      searchableIndexes={searchableIndexes}
+      visibleFilters={visibleFilters}
+      isMultiSelect
+    >
+      <span data-test-add-donor>
+        <FormattedMessage id="stripes-acq-components.donors.noFindOrganizationPlugin" />
+      </span>
+    </Pluggable>
+  );
+};
+
+AddDonorButton.propTypes = {
+  fetchDonors: PropTypes.func.isRequired,
+  fields: PropTypes.object,
+  stripes: PropTypes.object,
+  name: PropTypes.string.isRequired,
+};
+
+export default AddDonorButton;

lib/DonorsList/DonorsList.js

@@ -1,37 +1,18 @@
 import React, { useMemo } from 'react';
-import {
-  map,
-  sortBy,
-} from 'lodash';
+import { sortBy } from 'lodash';
 import PropTypes from 'prop-types';
-import {
-  FormattedMessage,
-  useIntl,
-} from 'react-intl';
+import { useIntl } from 'react-intl';
 
 import {
   Button,
   Icon,
   MultiColumnList,
 } from '@folio/stripes/components';
-import {
-  Pluggable,
-  useStripes,
-} from '@folio/stripes/core';
+import { useStripes } from '@folio/stripes/core';
 
 import { acqRowFormatter } from '../utils';
-
-const columnMapping = {
-  name: <FormattedMessage id="stripes-acq-components.donors.column.name" />,
-  code: <FormattedMessage id="stripes-acq-components.donors.column.code" />,
-  unassignDonor: null,
-};
-
-const visibleColumns = [
-  'name',
-  'code',
-  'unassignDonor',
-];
+import AddDonorButton from './AddDonorButton';
+import { alignRowProps, columnMapping, columnWidths, visibleColumns } from './constants';
 
 const getResultsFormatter = ({
   intl,
@@ -64,50 +45,6 @@ const getDonorUrl = (orgId) => {
   return undefined;
 };
 
-const AddDonorButton = ({ fetchDonors, fields, stripes, name }) => {
-  const addDonors = (contacts = []) => {
-    const addedContactIds = new Set(fields.value);
-    const newContactsIds = map(contacts.filter(({ id }) => !addedContactIds.has(id)), 'id');
-
-    if (newContactsIds.length) {
-      fetchDonors([...addedContactIds, ...newContactsIds]);
-      newContactsIds.forEach(contactId => fields.push(contactId));
-    }
-  };
-
-  return (
-    <Pluggable
-      id={`${name}-plugin`}
-      aria-haspopup="true"
-      type="find-organization"
-      dataKey="organization"
-      searchLabel={<FormattedMessage id="stripes-acq-components.donors.button.addDonor" />}
-      searchButtonStyle="default"
-      disableRecordCreation
-      stripes={stripes}
-      selectVendor={addDonors}
-      isDonorsEnabled
-    >
-      <span data-test-add-donor>
-        <FormattedMessage id="stripes-acq-components.donors.noFindDonorPlugin" />
-      </span>
-    </Pluggable>
-  );
-};
-
-AddDonorButton.propTypes = {
-  fetchDonors: PropTypes.func.isRequired,
-  fields: PropTypes.object,
-  stripes: PropTypes.object,
-  name: PropTypes.string.isRequired,
-};
-
-const alignRowProps = { alignLastColToEnd: true };
-const columnWidths = {
-  name: '45%',
-  code: '45%',
-  unassignDonor: '10%',
-};
 const DonorsList = ({ fetchDonors, fields, donorsMap, id }) => {
   const intl = useIntl();
   const stripes = useStripes();

lib/DonorsList/constants.js

@@ -0,0 +1,60 @@
+import { FormattedMessage } from 'react-intl';
+
+export const columnMapping = {
+  name: <FormattedMessage id="stripes-acq-components.donors.column.name" />,
+  code: <FormattedMessage id="stripes-acq-components.donors.column.code" />,
+  unassignDonor: null,
+};
+
+export const visibleColumns = [
+  'name',
+  'code',
+  'unassignDonor',
+];
+
+export const alignRowProps = { alignLastColToEnd: true };
+
+export const columnWidths = {
+  name: '45%',
+  code: '45%',
+  unassignDonor: '10%',
+};
+
+export const modalLabel = <FormattedMessage id="stripes-acq-components.donors.modal.title" />;
+export const resultsPaneTitle = <FormattedMessage id="stripes-acq-components.donors.modal.resultsTitle" />;
+
+export const pluginVisibleColumns = ['name', 'code'];
+
+export const DONORS_SORT_MAP = {
+  name: 'name',
+  code: 'code',
+};
+
+const ORGANIZATION_STATUS = {
+  active: 'Active',
+  inactive: 'Inactive',
+  pending: 'Pending',
+};
+
+const FILTERS = {
+  IS_VENDOR: 'isVendor',
+  STATUS: 'status',
+  TAGS: 'tags',
+  TYPES: 'organizationTypes',
+};
+
+export const visibleFilters = [
+  FILTERS.IS_VENDOR,
+  FILTERS.TAGS,
+  FILTERS.TYPES,
+];
+
+export const initialFilters = {
+  [FILTERS.IS_DONOR]: ['true'],
+  [FILTERS.STATUS]: [ORGANIZATION_STATUS.active],
+};
+
+export const searchableIndexes = pluginVisibleColumns.map(column => ({
+  labelId: `ui-organizations.search.${column}`,
+  value: column,
+}));

translations/stripes-acq-components/en.json

@@ -190,5 +190,8 @@
   "acquisition_method.technical": "Technical",
   "donors.button.addDonor": "Add donor",
   "donors.column.code": "Code",
-  "donors.column.name": "Name"
+  "donors.column.name": "Name",
+  "donors.modal.title": "Add donors",
+  "donors.modal.resultsTitle": "Donors",
+  "donors.noFindOrganizationPlugin": "no find-organization plugin"
 }