UIF-473: add list of donors component

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## 5.1.0 (IN PROGRESS)
 
+* Add donor info to Fund. Refs UIF-473.
+
 ## [5.0.0](https://github.com/folio-org/ui-finance/tree/v5.0.0) (2023-10-12)
 [Full Changelog](https://github.com/folio-org/ui-finance/compare/v4.0.4...v5.0.0)
 

src/Funds/FundForm/FundForm.js

@@ -1,15 +1,27 @@
 import React, { useCallback, useMemo, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { Field } from 'react-final-form';
-import { useHistory } from 'react-router';
 import {
   find,
   get,
 } from 'lodash';
+import PropTypes from 'prop-types';
+import { Field } from 'react-final-form';
+import {
+  FormattedMessage,
+  useIntl,
+} from 'react-intl';
+import { useHistory } from 'react-router';
 
-import stripesFinalForm from '@folio/stripes/final-form';
-import { useOkapiKy } from '@folio/stripes/core';
+import {
+  AcqUnitsField,
+  Donors,
+  FieldMultiSelectionFinal as FieldMultiSelection,
+  FieldSelectionFinal as FieldSelection,
+  FormFooter,
+  FUNDS_API,
+  handleKeyCommand,
+  OptimisticLockingBanner,
+  validateRequired,
+} from '@folio/stripes-acq-components';
 import {
   Accordion,
   AccordionSet,
@@ -27,19 +39,10 @@ import {
   TextArea,
   TextField,
 } from '@folio/stripes/components';
+import { useOkapiKy } from '@folio/stripes/core';
+import stripesFinalForm from '@folio/stripes/final-form';
 import { ViewMetaData } from '@folio/stripes/smart-components';
-import {
-  AcqUnitsField,
-  FieldMultiSelectionFinal as FieldMultiSelection,
-  FieldSelectionFinal as FieldSelection,
-  FormFooter,
-  FUNDS_API,
-  handleKeyCommand,
-  OptimisticLockingBanner,
-  validateRequired,
-} from '@folio/stripes-acq-components';
 
-import { FieldFundGroups } from '../FundGroups';
 import {
   CREATE_UNITS_PERM,
   FUNDS_ROUTE,
@@ -53,6 +56,7 @@ import {
   FUND_STATUSES_OPTIONS,
   SECTIONS_FUND,
 } from '../constants';
+import { FieldFundGroups } from '../FundGroups';
 
 const parseMultiSelectionValue = (items) => items.map(({ value }) => value);
 
@@ -85,6 +89,7 @@ const FundForm = ({
   });
   const fundId = initialValues.fund.id;
   const fundLedgerId = get(formValues, 'fund.ledgerId');
+  const donorOrganizationIds = get(initialValues, 'fund.donorOrganizationIds', []);
 
   const closeForm = useCallback(() => onCancel(), [onCancel]);
 
@@ -279,7 +284,6 @@ const FundForm = ({
                             validateFields={[]}
                           />
                         </Col>
-
                         <Col
                           data-test-col-ledger
                           xs={3}
@@ -410,6 +414,16 @@ const FundForm = ({
                         </Col>
                       </Row>
                     </Accordion>
+                    <Accordion
+                      closedByDefault
+                      id={SECTIONS_FUND.DONOR_INFORMATION}
+                      label={<FormattedMessage id="ui-finance.fund.information.donorInformation" />}
+                    >
+                      <Donors
+                        name="fund.donorOrganizationIds"
+                        donorOrganizationIds={donorOrganizationIds}
+                      />
+                    </Accordion>
                   </AccordionSet>
                 </AccordionStatus>
               </Col>

src/Funds/FundForm/FundForm.test.js

@@ -17,6 +17,10 @@ import FundForm from './FundForm';
 jest.mock('@folio/stripes-acq-components/lib/AcqUnits/AcqUnitsField', () => {
   return () => <span>AcqUnitsField</span>;
 });
+jest.mock('@folio/stripes-acq-components', () => ({
+  ...jest.requireActual('@folio/stripes-acq-components'),
+  Donors: jest.fn(() => 'Donors'),
+}));
 jest.mock('@folio/stripes-components/lib/Commander', () => ({
   HasCommand: jest.fn(({ children }) => <div>{children}</div>),
   expandAllSections: jest.fn(),
@@ -69,6 +73,12 @@ describe('FundForm component', () => {
     expect(getByText('ui-finance.saveAndClose')).toBeDefined();
   });
 
+  it('should display Donors', () => {
+    renderFundForm();
+
+    expect(screen.getByText('Donors')).toBeInTheDocument();
+  });
+
   describe('Close form', () => {
     it('should close the fund form', async () => {
       const { getByText } = renderFundForm();

src/Funds/constants.js

@@ -6,6 +6,7 @@ export const SECTIONS_FUND = {
   PLANNED_BUDGET: 'plannedBudget',
   PREVIOUS_BUDGETS: 'previousBudgets',
   currentExpenseClasses: 'currentExpenseClasses',
+  DONOR_INFORMATION: 'donorInformation',
 };
 
 export const FUND_STATUSES = {

translations/ui-finance/en.json

@@ -266,6 +266,7 @@
   "fund.information.name": "Name",
   "fund.information.status": "Status",
   "fund.information.title": "Fund information",
+  "fund.information.donorInformation": "Donor information",
   "fund.information.transferFrom": "Transfer from",
   "fund.information.transferTo": "Transfer to",
   "fund.information.type": "Type",