UINV-553: Display selected version in Invoice line view

CHANGELOG.md

@@ -5,7 +5,8 @@
 * Open version history pane on click changelog icon. Refs UINV-468.
 * Display all invoice versions in change log in fourth pane. Refs UINV-469.
 * Add external number extention to the csv export. Refs UINV-566.
-* Invoices - Show in version history record view, which fields have been edited. Refs UINV-470.
+* Display selected version in Invoice view. Refs UINV-470.
+* Display selected version in Invoice line view. Refs UINV-553.
 
 ## [6.1.0](https://github.com/folio-org/ui-invoice/tree/v6.1.0) (2024-10-31)
 [Full Changelog](https://github.com/folio-org/ui-invoice/compare/v6.0.4...v6.1.0)

src/common/constants/api.js

@@ -1,4 +1,5 @@
 export const AUDIT_INVOICE_API = 'audit-data/acquisition/invoice';
+export const AUDIT_INVOICE_LINE_API = 'audit-data/acquisition/invoice-line';
 export const BATCH_GROUPS_API = 'batch-groups';
 export const BATCH_VOUCHERS_API = 'batch-voucher/batch-vouchers';
 export const BATCH_VOUCHER_EXPORTS_API = 'batch-voucher/batch-voucher-exports';

src/common/constants/routes.js

@@ -8,5 +8,6 @@ export const INVOICE_LINE_CREATE_ROUTE = `${INVOICE_LINE_ROUTE}/create`;
 export const INVOICE_LINE_EDIT_ROUTE = `${INVOICE_LINE_ROUTE}/:lineId/edit`;
 export const INVOICE_LINE_VIEW_ROUTE = `${INVOICE_LINE_ROUTE}/:lineId/view`;
 export const INVOICE_LINE_SEQUENCE_ROUTE = `${INVOICE_VIEW_ROUTE}/lines-sequence`;
+export const INVOICE_LINE_VERSION_HISTORY_ROUTE = `${INVOICE_LINE_ROUTE}/:lineId/view/versions/:versionId?`;
 export const INVOICE_VOUCHER_ROUTE = `${INVOICE_VIEW_ROUTE}/voucher`;
 export const INVOICE_VOUCHER_EXPORT_ROUTE = `${INVOICE_ROUTE}/voucher-export`;

src/common/hooks/index.js

@@ -9,11 +9,12 @@ export * from './useInvoice';
 export * from './useInvoiceMutation';
 export * from './useInvoiceLine';
 export * from './useInvoiceLineMutation';
+export * from './useInvoiceLineVersions';
 export * from './useInvoiceVersions';
-export * from './useOrderLine';
 export * from './useOrderLines';
 export * from './useOrders';
 export * from './usePayableFiscalYears';
+export * from './useSelectedInvoiceLineVersion';
 export * from './useSelectedInvoiceVersion';
 export * from './useVendors';
 export * from './useVoucherById';

src/common/hooks/useInvoice/useInvoice.js

@@ -4,17 +4,19 @@ import { useOkapiKy } from '@folio/stripes/core';
 
 import { INVOICES_API } from '@folio/stripes-acq-components';
 
+const DEFAULT_VALUE = {};
+
 export const useInvoice = (invoiceId) => {
   const ky = useOkapiKy();
 
-  const { isLoading: isInvoiceLoading, data: invoice = {} } = useQuery(
+  const { isLoading, data } = useQuery(
     [INVOICES_API, invoiceId],
     () => ky.get(`${INVOICES_API}/${invoiceId}`).json(),
     { enabled: Boolean(invoiceId) },
   );
 
   return ({
-    isInvoiceLoading,
-    invoice,
+    isLoading,
+    invoice: data || DEFAULT_VALUE,
   });
 };

src/common/hooks/useInvoiceLine/useInvoiceLine.js

@@ -7,18 +7,24 @@ import {
 
 import { INVOICE_LINE_API } from '../../constants';
 
+const DEFAULT_VALUE = {};
+
 export const useInvoiceLine = (invoiceLineId) => {
   const ky = useOkapiKy();
   const [namespace] = useNamespace({ key: 'invoice-line' });
 
-  const { data: invoiceLine, isLoading, refetch } = useQuery(
+  const {
+    data,
+    isLoading,
+    refetch,
+  } = useQuery(
     [namespace, invoiceLineId],
-    () => ky.get(`${INVOICE_LINE_API}/${invoiceLineId}`).json(),
+    ({ signal }) => ky.get(`${INVOICE_LINE_API}/${invoiceLineId}`, { signal }).json(),
     { enabled: Boolean(invoiceLineId) },
   );
 
   return ({
-    invoiceLine,
+    invoiceLine: data || DEFAULT_VALUE,
     isLoading,
     refetch,
   });

src/common/hooks/useInvoiceLineVersions/index.js

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

src/common/hooks/useInvoiceLineVersions/useInvoiceLineVersions.js

@@ -0,0 +1,34 @@
+import { useQuery } from 'react-query';
+
+import {
+  useNamespace,
+  useOkapiKy,
+} from '@folio/stripes/core';
+
+import { AUDIT_INVOICE_LINE_API } from '../../constants';
+
+const DEFAULT_VALUE = [];
+
+export const useInvoiceLineVersions = (invoiceLineId, options = {}) => {
+  const ky = useOkapiKy();
+  const [namespace] = useNamespace({ key: 'invoice-line-versions' });
+
+  const searchParams = {
+    sortBy: 'event_date',
+    sortOrder: 'desc',
+  };
+
+  const { isLoading, data } = useQuery(
+    [namespace, invoiceLineId],
+    ({ signal }) => ky.get(`${AUDIT_INVOICE_LINE_API}/${invoiceLineId}`, { signal, searchParams }).json(),
+    {
+      enabled: Boolean(invoiceLineId),
+      ...options,
+    },
+  );
+
+  return {
+    isLoading,
+    versions: data?.invoiceLineAuditEvents || DEFAULT_VALUE,
+  };
+};

src/common/hooks/useInvoiceLineVersions/useInvoiceVersions.test.js

@@ -0,0 +1,50 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+} from 'react-query';
+
+import {
+  renderHook,
+  waitFor,
+} from '@folio/jest-config-stripes/testing-library/react';
+import { useOkapiKy } from '@folio/stripes/core';
+
+import { useInvoiceLineVersions } from './useInvoiceLineVersions';
+
+const queryClient = new QueryClient();
+
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    {children}
+  </QueryClientProvider>
+);
+
+const invoiceId = 'invoiceId';
+const invoiceLineAuditEvents = [
+  {
+    id: '1',
+    invoiceId: 'invoiceId',
+    total: 100,
+  },
+  {
+    id: '2',
+    invoiceId: 'invoiceId',
+    total: 200,
+  },
+];
+
+describe('useInvoiceLineVersions', () => {
+  it('should return invoice versions', async () => {
+    useOkapiKy.mockClear().mockReturnValue({
+      get: () => ({
+        json: () => ({ invoiceLineAuditEvents }),
+      }),
+    });
+
+    const { result } = renderHook(() => useInvoiceLineVersions(invoiceId), { wrapper });
+
+    await waitFor(() => expect(result.current.isLoading).toBeFalsy());
+
+    expect(result.current.versions).toHaveLength(invoiceLineAuditEvents.length);
+  });
+});

src/common/hooks/useSelectedInvoiceLineVersion/index.js

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

src/common/hooks/useSelectedInvoiceLineVersion/useSelectedInvoiceLineVersion.js

@@ -0,0 +1,89 @@
+import get from 'lodash/get';
+import keyBy from 'lodash/keyBy';
+import uniq from 'lodash/uniq';
+import { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { useQuery } from 'react-query';
+
+import { useNamespace } from '@folio/stripes/core';
+import { getFullName } from '@folio/stripes/util';
+import {
+  getVersionMetadata,
+  useUsersBatch,
+} from '@folio/stripes-acq-components';
+
+import { useInvoice } from '../useInvoice';
+import { useInvoiceLine } from '../useInvoiceLine';
+
+const DEFAULT_VALUE = [];
+
+export const useSelectedInvoiceLineVersion = ({ versionId, versions, snapshotPath }, options = {}) => {
+  const intl = useIntl();
+  const [namespace] = useNamespace({ key: 'selected-invoice-line-version' });
+
+  const deletedRecordLabel = intl.formatMessage({ id: 'stripes-acq-components.versionHistory.deletedRecord' });
+  const currentVersion = useMemo(() => versions?.find(({ id }) => id === versionId), [versionId, versions]);
+  const versionSnapshot = useMemo(() => get(currentVersion, snapshotPath), [snapshotPath, currentVersion]);
+
+  const {
+    invoiceLine,
+    isLoading: isInvoiceLineLoading,
+  } = useInvoiceLine(currentVersion?.invoiceLineId);
+  const {
+    invoice,
+    isLoading: isInvoiceLoading,
+  } = useInvoice(currentVersion?.invoiceId);
+
+  const metadata = useMemo(() => getVersionMetadata(currentVersion, invoiceLine), [currentVersion, invoiceLine]);
+  const createdByUserId = metadata?.createdByUserId;
+  const updatedByUserId = metadata?.updatedByUserId;
+
+  const versionUserIds = useMemo(() => uniq([updatedByUserId, createdByUserId]), [updatedByUserId, createdByUserId]);
+  const {
+    users = DEFAULT_VALUE,
+    isLoading: isUsersLoading,
+  } = useUsersBatch(versionUserIds);
+
+  const versionUsersMap = keyBy(users, 'id');
+
+  const {
+    isLoading: isVersionDataLoading,
+    data: selectedVersion = {},
+  } = useQuery(
+    [namespace, versionId, versionSnapshot?.id],
+    async () => {
+      const createdByUser = versionUsersMap[createdByUserId]
+        ? getFullName(versionUsersMap[createdByUserId])
+        : deletedRecordLabel;
+
+      return {
+        ...versionSnapshot,
+        createdByUser: createdByUserId && createdByUser,
+        currency: invoice?.currency,
+        metadata,
+      };
+    },
+    {
+      enabled: Boolean(
+        versionId
+        && invoiceLine?.id
+        && !isInvoiceLoading
+        && !isInvoiceLineLoading
+        && !isUsersLoading,
+      ),
+      ...options,
+    },
+  );
+
+  const isLoading = (
+    isInvoiceLineLoading
+    || isVersionDataLoading
+    || isUsersLoading
+    || isInvoiceLoading
+  );
+
+  return {
+    selectedVersion,
+    isLoading,
+  };
+};