UINV-469: Display all invoice versions in change log in fourth pane (#…

…825) * UINV-469: Display all invoice versions in change log in fourth pane * test: update snapshot * test: add test coverages * test: improve test coverage * refactor: improve `useInvoiceVersions` hook
folio-org · Nov 13, 2024 · 0fe2ff1 · 0fe2ff1
1 parent aefea48
commit 0fe2ff1
Show file tree

Hide file tree

Showing 16 changed files with 491 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## 6.2.0 (IN PROGRESS)
 
 * Open version history pane on click changelog icon. Refs UINV-468.
+* Display all invoice versions in change log in fourth pane. Refs UINV-469.
 
 ## [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)

diff --git a/src/common/constants/api.js b/src/common/constants/api.js
@@ -1,3 +1,4 @@
+export const AUDIT_INVOICE_API = 'audit-data/acquisition/invoice';
 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';

diff --git a/src/common/hooks/index.js b/src/common/hooks/index.js
@@ -9,6 +9,7 @@ export * from './useInvoice';
 export * from './useInvoiceMutation';
 export * from './useInvoiceLine';
 export * from './useInvoiceLineMutation';
+export * from './useInvoiceVersions';
 export * from './useOrderLine';
 export * from './useOrderLines';
 export * from './useOrders';

diff --git a/src/common/hooks/useInvoiceVersions/index.js b/src/common/hooks/useInvoiceVersions/index.js
@@ -0,0 +1 @@
+export { useInvoiceVersions } from './useInvoiceVersions';
diff --git a/src/common/hooks/useInvoiceVersions/useInvoiceVersions.js b/src/common/hooks/useInvoiceVersions/useInvoiceVersions.js
@@ -0,0 +1,34 @@
+import { useQuery } from 'react-query';
+
+import {
+  useNamespace,
+  useOkapiKy,
+} from '@folio/stripes/core';
+
+import { AUDIT_INVOICE_API } from '../../constants';
+
+const DEFAULT_VALUE = [];
+
+export const useInvoiceVersions = (invoiceId, options = {}) => {
+  const ky = useOkapiKy();
+  const [namespace] = useNamespace({ key: 'invoice-versions' });
+
+  const searchParams = {
+    sortBy: 'event_date',
+    sortOrder: 'desc',
+  };
+
+  const { isLoading, data } = useQuery(
+    [namespace, invoiceId],
+    ({ signal }) => ky.get(`${AUDIT_INVOICE_API}/${invoiceId}`, { signal, searchParams }).json(),
+    {
+      enabled: Boolean(invoiceId),
+      ...options,
+    },
+  );
+
+  return {
+    isLoading,
+    versions: data?.invoiceAuditEvents || DEFAULT_VALUE,
+  };
+};
diff --git a/src/common/hooks/useInvoiceVersions/useInvoiceVersions.test.js b/src/common/hooks/useInvoiceVersions/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 { useInvoiceVersions } from './useInvoiceVersions';
+
+const queryClient = new QueryClient();
+
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    {children}
+  </QueryClientProvider>
+);
+
+const invoiceId = 'invoiceId';
+const invoiceAuditEvents = [
+  {
+    id: '1',
+    invoiceId: 'invoiceId',
+    total: 100,
+  },
+  {
+    id: '2',
+    invoiceId: 'invoiceId',
+    total: 200,
+  },
+];
+
+describe('useInvoiceVersions', () => {
+  it('should return invoice versions', async () => {
+    useOkapiKy.mockClear().mockReturnValue({
+      get: () => ({
+        json: () => ({ invoiceAuditEvents }),
+      }),
+    });
+
+    const { result } = renderHook(() => useInvoiceVersions(invoiceId), { wrapper });
+
+    await waitFor(() => expect(result.current.isLoading).toBeFalsy());
+
+    expect(result.current.versions).toHaveLength(invoiceAuditEvents.length);
+  });
+});
diff --git a/src/invoices/AdjustmentsForm/__snapshots__/AdjustmentsForm.test.js.snap b/src/invoices/AdjustmentsForm/__snapshots__/AdjustmentsForm.test.js.snap
@@ -9,7 +9,9 @@ exports[`AdjustmentsForm should render correct structure with defined adjustment
       <div
         class="col-xs-12"
       >
-        <div>
+        <div
+          class="selectionOuter"
+        >
           <label
             class="label"
             for="downshift-:r1:-input"
@@ -505,7 +507,9 @@ exports[`AdjustmentsForm should render correct structure without adjustments 1`]
       <div
         class="col-xs-12"
       >
-        <div>
+        <div
+          class="selectionOuter"
+        >
           <label
             class="label"
             for="downshift-:r3:-input"

diff --git a/src/invoices/InvoiceForm/__snapshots__/InvoiceForm.test.js.snap b/src/invoices/InvoiceForm/__snapshots__/InvoiceForm.test.js.snap
@@ -249,7 +249,9 @@ exports[`InvoiceForm component should render correct structure 1`] = `
                           <div
                             class="col-xs-3"
                           >
-                            <div>
+                            <div
+                              class="selectionOuter"
+                            >
                               <label
                                 class="label"
                                 for="downshift-:r1:-input"
@@ -342,7 +344,9 @@ exports[`InvoiceForm component should render correct structure 1`] = `
                             class="col-xs-3"
                             data-test-col-status="true"
                           >
-                            <div>
+                            <div
+                              class="selectionOuter"
+                            >
                               <label
                                 class="label"
                                 for="downshift-:r3:-input"
@@ -611,7 +615,9 @@ exports[`InvoiceForm component should render correct structure 1`] = `
                             class="col-xs-3"
                             data-test-col-bill-to-name="true"
                           >
-                            <div>
+                            <div
+                              class="selectionOuter"
+                            >
                               <label
                                 class="label"
                                 for="downshift-:r5:-input"
@@ -725,7 +731,9 @@ exports[`InvoiceForm component should render correct structure 1`] = `
                             class="col-xs-3"
                             data-test-col-batch-group="true"
                           >
-                            <div>
+                            <div
+                              class="selectionOuter"
+                            >
                               <label
                                 class="label"
                                 for="downshift-:r7:-input"
@@ -1214,7 +1222,9 @@ exports[`InvoiceForm component should render correct structure 1`] = `
                             class="col-xs-3"
                             data-test-col-accounting-code="true"
                           >
-                            <div>
+                            <div
+                              class="selectionOuter"
+                            >
                               <label
                                 class="label"
                                 for="downshift-:r9:-input"
@@ -1661,7 +1671,9 @@ exports[`InvoiceForm component should render correct structure 1`] = `
                             class="col-xs-3"
                             data-test-col-currency="true"
                           >
-                            <div>
+                            <div
+                              class="selectionOuter"
+                            >
                               <label
                                 class="label"
                                 for="downshift-:rb:-input"

diff --git a/src/invoices/InvoiceLineForm/__snapshots__/InvoiceLineForm.test.js.snap b/src/invoices/InvoiceLineForm/__snapshots__/InvoiceLineForm.test.js.snap
@@ -710,7 +710,9 @@ exports[`InvoiceLineForm component should render correct structure 1`] = `
                             class="col-xs-3"
                             data-test-col-invoice-line-accounting-code="true"
                           >
-                            <div>
+                            <div
+                              class="selectionOuter"
+                            >
                               <label
                                 class="label"
                                 for="downshift-:r1:-input"

diff --git a/src/invoices/InvoicesList/InvoicesListFilters/__snapshots__/InvoicesListFilters.test.js.snap b/src/invoices/InvoicesList/InvoicesListFilters/__snapshots__/InvoicesListFilters.test.js.snap
@@ -658,7 +658,9 @@ exports[`InvoicesListFilters should render correct structure 1`] = `
           id="accordion4"
           role="region"
         >
-          <div>
+          <div
+            class="selectionOuter"
+          >
             <div
               class="selectionControlContainer"
             >
@@ -4246,7 +4248,9 @@ exports[`InvoicesListFilters should render correct structure when disabled 1`] =
           id="accordion80"
           role="region"
         >
-          <div>
+          <div
+            class="selectionOuter"
+          >
             <div
               class="selectionControlContainer"
             >

diff --git a/src/invoices/VersionHistory/VersionHistory.js b/src/invoices/VersionHistory/VersionHistory.js
@@ -1,51 +1,102 @@
+import get from 'lodash/get';
 import {
   memo,
   useCallback,
 } from 'react';
+import { FormattedMessage } from 'react-intl';
 import ReactRouterPropTypes from 'react-router-prop-types';
 
 import { TitleManager } from '@folio/stripes/core';
 import {
   VersionHistoryPane,
   VersionViewContextProvider,
 } from '@folio/stripes-acq-components';
+
 import { INVOICE_ROUTE } from '../../common/constants';
+import {
+  useInvoice,
+  useInvoiceVersions,
+} from '../../common/hooks';
+import {
+  HIDDEN_INVOICE_FIELDS,
+  INVOICE_FIELDS_LABEL_MAP,
+} from './constants';
+import VersionView from './VersionView';
 
-// TODO: UINV-469 Invoices - Display all versions in change log in fourth pane
 const VersionHistory = ({
   history,
   location,
   match,
 }) => {
-  const { id } = match.params;
-  const snapshotPath = 'orderLineSnapshot.map';
+  const { id, versionId } = match.params;
   const invoicePath = `${INVOICE_ROUTE}/view/${id}`;
+  const snapshotPath = 'invoiceSnapshot.map';
+
+  const { invoice, isInvoiceLoading } = useInvoice(id);
 
   const onHistoryClose = useCallback(() => history.push({
     pathname: invoicePath,
     search: location.search,
   }), [history, invoicePath, location.search]);
 
-  const onSelectVersion = () => {};
+  const onVersionClose = useCallback(() => history.push({
+    pathname: INVOICE_ROUTE,
+    search: location.search,
+  }), [history, location.search]);
+
+  const onSelectVersion = useCallback((_versionId) => {
+    history.push({
+      pathname: `${invoicePath}/versions/${_versionId}`,
+      search: location.search,
+    });
+  }, [history, location.search, invoicePath]);
+
+  const { versions, isLoading: isInvoiceVersionsLoading } = useInvoiceVersions(
+    id,
+    {
+      onSuccess: ({ invoiceAuditEvents }) => {
+        if (!versionId && invoiceAuditEvents[0]?.id) onSelectVersion(invoiceAuditEvents[0].id);
+      },
+    },
+  );
+
+  const isLoading = isInvoiceLoading || isInvoiceVersionsLoading;
 
   return (
     <VersionViewContextProvider
       snapshotPath={snapshotPath}
-      versions={[]}
+      versions={versions}
       versionId="versionId"
     >
-      <TitleManager record="Title" />
+      <TitleManager record={invoice?.vendorInvoiceNo} />
+      <VersionView
+        id="order"
+        dismissible
+        isLoading={isLoading}
+        onClose={onVersionClose}
+        paneTitle={(
+          <FormattedMessage
+            id="ui-invoice.invoice.details.paneTitle"
+            values={{ vendorInvoiceNo: invoice?.vendorInvoiceNo }}
+          />
+        )}
+        tags={get(invoice, 'tags.tagList', [])}
+      >
+        {
+          // TODO Implement displaying which fields have been edited UINV-470 - https://folio-org.atlassian.net/browse/UINV-470
+        }
+      </VersionView>
 
       <VersionHistoryPane
-        currentVersion="versionId"
+        currentVersion={versionId}
         id="order-line"
-        isLoading={false}
+        isLoading={isInvoiceVersionsLoading}
         onClose={onHistoryClose}
         onSelectVersion={onSelectVersion}
         snapshotPath={snapshotPath}
-        labelsMap={{}}
-        versions={[]}
-        hiddenFields={{}}
+        labelsMap={INVOICE_FIELDS_LABEL_MAP}
+        versions={versions}
+        hiddenFields={HIDDEN_INVOICE_FIELDS}
       />
     </VersionViewContextProvider>
   );
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { useInvoiceVersions } from './useInvoiceVersions';