add: donors information history view

src/components/POLine/POLineVersionView/DonorsVersionView/DonorsVersionView.js

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+import {
+  useCallback,
+  useContext,
+  useMemo,
+} from 'react';
+
+import {
+  DonorsListContainer,
+  VersionViewContext,
+} from '@folio/stripes-acq-components';
+import { TextLink } from '@folio/stripes/components';
+
+import { getDonorUrl } from './utils';
+
+export const DonorsVersionView = ({ version }) => {
+  const donorOrganizationIds = version?.donorOrganizationIds;
+  const versionContext = useContext(VersionViewContext);
+
+  const changedDonorIds = useMemo(() => {
+    const changedDonors = versionContext?.changes?.filter((change) => {
+      return change.path.startsWith('donorOrganizationIds');
+    });
+    const donorIds = changedDonors.map(({ values }) => values.filter(Boolean));
+
+    return donorIds.flat();
+  }, [versionContext?.changes]);
+
+  const renderKeyValueComponent = useCallback(({ value, id, asLink = false }) => {
+    const content = asLink ? <TextLink to={getDonorUrl(id)}>{value}</TextLink> : value;
+    const isUpdated = changedDonorIds?.includes(id);
+
+    const displayValue = isUpdated ? <mark>{content}</mark> : content;
+
+    return displayValue;
+  }, [changedDonorIds]);
+
+  const formatter = {
+    name: ({ name, id }) => renderKeyValueComponent({ value: name, id, asLink: true }),
+    code: ({ code, id }) => renderKeyValueComponent({ value: code, id }),
+  };
+
+  return (
+    <DonorsListContainer
+      donorOrganizationIds={donorOrganizationIds}
+      formatter={formatter}
+    />
+  );
+};
+
+DonorsVersionView.propTypes = {
+  version: PropTypes.object.isRequired,
+};

src/components/POLine/POLineVersionView/DonorsVersionView/index.js

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

src/components/POLine/POLineVersionView/DonorsVersionView/utils.js

@@ -0,0 +1,7 @@
+export const getDonorUrl = (orgId) => {
+  if (orgId) {
+    return `/organizations/view/${orgId}`;
+  }
+
+  return undefined;
+};

src/components/POLine/POLineVersionView/POLineVersion.js

@@ -24,6 +24,7 @@ import {
   PHRESOURCES,
 } from '../const';
 import { CostVersionView } from './CostVersionView';
+import { DonorsVersionView } from './DonorsVersionView';
 import { EresourcesVersionView } from './EresourcesVersionView';
 import { FundDistributionVersionView } from './FundDistributionVersionView';
 import { ItemVersionView } from './ItemVersionView';
@@ -97,6 +98,13 @@ const POLineVersion = ({ version }) => {
             </Row>
           </Accordion>
 
+          <Accordion
+            label={<FormattedMessage id="ui-orders.line.accordion.donorInformation" />}
+            id={ACCORDION_ID.donorsInformation}
+          >
+            <DonorsVersionView version={version} />
+          </Accordion>
+
           <Accordion
             label={<FormattedMessage id="ui-orders.line.accordion.vendor" />}
             id="Vendor"