fix(invoices): B2B-4553 Disable pay invoice button when selecting different currencies invoice

Author: bc-lulu-yang

apps/storefront/src/components/table/B3PaginationTable.tsx

@@ -295,7 +295,6 @@ function PaginationTable<GetRequestListParams, Row extends object>(
       getList,
       getCacheList,
       refresh,
-      setSelectCheckbox,
     }),
     [getList, getCacheList, getSelectedValue, refresh],
   );

apps/storefront/src/pages/Invoice/components/InvoiceFooter.tsx

@@ -8,7 +8,11 @@ import { BcCartData, BcCartDataLineItem, InvoiceListNode } from '@/types/invoice
 import { snackbar } from '@/utils/b3Tip';
 import { handleGetCorrespondingCurrencyToken } from '@/utils/currencyUtils';
 
-import { formattingNumericValues, gotoInvoiceCheckoutUrl } from '../utils/payment';
+import {
+  filterInvoicesBySameCurrency,
+  formattingNumericValues,
+  gotoInvoiceCheckoutUrl,
+} from '../utils/payment';
 
 interface InvoiceFooterProps {
   selectedPay: CustomFieldItems;
@@ -35,6 +39,8 @@ function InvoiceFooter(props: InvoiceFooterProps) {
 
   const { selectedPay, decimalPlaces } = props;
 
+  const { hasMixedCurrency } = filterInvoicesBySameCurrency(selectedPay as InvoiceListNode[]);
+
   const handlePay = async () => {
     const lineItems: BcCartDataLineItem[] = [];
     let currency = 'SGD';
@@ -173,12 +179,14 @@ function InvoiceFooter(props: InvoiceFooterProps) {
               sx={{
                 fontSize: '16px',
                 fontWeight: '700',
-                color: '#000000',
+                color: hasMixedCurrency ? 'error.main' : '#000000',
               }}
             >
-              {b3Lang('invoice.footer.totalPayment', {
-                total: `${currentToken}${selectedAccount}`,
-              })}
+              {hasMixedCurrency
+                ? b3Lang('invoice.footer.differentCurrencyError')
+                : b3Lang('invoice.footer.totalPayment', {
+                    total: `${currentToken}${selectedAccount}`,
+                  })}
             </Typography>
             <Box
               sx={{
@@ -190,6 +198,7 @@ function InvoiceFooter(props: InvoiceFooterProps) {
             >
               <Button
                 variant="contained"
+                disabled={hasMixedCurrency}
                 sx={{
                   marginLeft: isMobile ? 0 : '1rem',
                   width: isMobile ? '100%' : 'auto',

apps/storefront/src/pages/Invoice/index.test.tsx

@@ -21,7 +21,6 @@ import {
 import { when } from 'vitest-when';
 
 import { permissionLevels } from '@/constants';
-import { snackbar } from '@/utils/b3Tip';
 
 import { InvoiceStatusCode } from './components/InvoiceStatus';
 import { triggerPdfDownload } from './components/triggerPdfDownload';
@@ -30,9 +29,6 @@ import Invoice from '.';
 const { server } = startMockServer();
 
 vi.mock('./components/triggerPdfDownload');
-vi.mock('@/utils/b3Tip', () => ({
-  snackbar: { error: vi.fn() },
-}));
 
 const buildInvoiceWith = builder(() => ({
   node: {
@@ -353,7 +349,7 @@ it('can pay for multiple invoices', async () => {
   });
 });
 
-it('blocks selecting invoices that are in different currencies', async () => {
+it('disables the Pay invoices button when selected invoices are in different currencies', async () => {
   server.use(
     graphql.query('GetInvoices', () =>
       HttpResponse.json(
@@ -413,17 +409,27 @@ it('blocks selecting invoices that are in different currencies', async () => {
 
   expect(screen.getByText('1 invoices selected')).toBeInTheDocument();
   expect(screen.getByRole('heading', { name: 'Total payment: $433.00' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: 'Pay invoices' })).toBeEnabled();
 
-  // attempting to also select the EUR invoice should be blocked
+  // selecting the EUR invoice too is now allowed
   await userEvent.click(within(secondRowCells[0]).getByRole('checkbox'));
 
-  expect(within(secondRowCells[0]).getByRole('checkbox')).not.toBeChecked();
-  expect(screen.getByText('1 invoices selected')).toBeInTheDocument();
-  expect(screen.getByRole('heading', { name: 'Total payment: $433.00' })).toBeInTheDocument();
-  expect(snackbar.error).toHaveBeenCalled();
+  expect(within(secondRowCells[0]).getByRole('checkbox')).toBeChecked();
+  expect(screen.getByText('2 invoices selected')).toBeInTheDocument();
+
+  // the misleading flattened total is replaced with a warning...
+  expect(
+    screen.getByRole('heading', {
+      name: 'You cannot pay multiple invoices in different currencies',
+    }),
+  ).toBeInTheDocument();
+  expect(screen.queryByText(/Total payment:/)).not.toBeInTheDocument();
+
+  // ...and paying is blocked while the selection mixes currencies
+  expect(screen.getByRole('button', { name: 'Pay invoices' })).toBeDisabled();
 });
 
-it('blocks selecting all invoices when the page contains different currencies', async () => {
+it('disables the Pay invoices button when selecting all invoices with different currencies', async () => {
   server.use(
     graphql.query('GetInvoices', () =>
       HttpResponse.json(
@@ -477,15 +483,19 @@ it('blocks selecting all invoices when the page contains different currencies',
   const secondRow = within(table).getByRole('row', { name: /3325/ });
   const secondRowCells = within(secondRow).getAllByRole('cell');
 
-  // click the "select all" checkbox in the header, which would otherwise
-  // select both the USD and EUR invoices at once
+  // click the "select all" checkbox in the header
   await userEvent.click(within(columnHeaders[0]).getByRole('checkbox'));
 
-  // only the reference-currency invoice should end up selected
-  expect(screen.getByText('1 invoices selected')).toBeInTheDocument();
-  expect(screen.getByRole('heading', { name: 'Total payment: $433.00' })).toBeInTheDocument();
-  expect(within(secondRowCells[0]).getByRole('checkbox')).not.toBeChecked();
-  expect(snackbar.error).toHaveBeenCalled();
+  // both invoices get selected even though currencies differ
+  expect(within(secondRowCells[0]).getByRole('checkbox')).toBeChecked();
+  expect(screen.getByText('2 invoices selected')).toBeInTheDocument();
+
+  expect(
+    screen.getByRole('heading', {
+      name: 'You cannot pay multiple invoices in different currencies',
+    }),
+  ).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: 'Pay invoices' })).toBeDisabled();
 });
 
 it('can specify an amount to pay for the invoices', async () => {

apps/storefront/src/pages/Invoice/index.tsx

@@ -39,7 +39,7 @@ import InvoiceListType, {
   filterFormConfigsTranslationVariables,
   sortIdArr,
 } from './utils/config';
-import { filterInvoicesBySameCurrency, formattingNumericValues } from './utils/payment';
+import { formattingNumericValues } from './utils/payment';
 import { handlePrintPDF } from './utils/pdf';
 import { InvoiceItemCard } from './InvoiceItemCard';
 
@@ -53,11 +53,10 @@ interface FilterSearchProps {
 
 interface PaginationTableRefProps extends HTMLInputElement {
   getList: () => void;
-  getCacheList: () => InvoiceListNode[];
+  getCacheList: () => void;
   setCacheAllList: (items?: InvoiceList[]) => void;
   setList: (items?: InvoiceListNode[]) => void;
   getSelectedValue: () => void;
-  setSelectCheckbox: (ids: Array<string | number>) => void;
 }
 
 const initFilter = {
@@ -250,29 +249,20 @@ function Invoice() {
     if (selectCheckbox.length > 0) {
       const productList = paginationTableRef.current?.getCacheList() || [];
 
-      const checkedItems = selectCheckbox
-        .map((item: number | string) => {
-          const newItems = productList.find((product: InvoiceListNode) => {
-            const { node } = product;
+      const checkedItems = selectCheckbox.map((item: number | string) => {
+        const newItems = productList.find((product: InvoiceListNode) => {
+          const { node } = product;
 
-            return Number(node.id) === Number(item);
-          });
-
-          return newItems;
-        })
-        .filter((item): item is InvoiceListNode => !!item && !item.node.disableCurrentCheckbox);
-
-      const { validInvoices, hasMixedCurrency } = filterInvoicesBySameCurrency(checkedItems);
+          return Number(node.id) === Number(item);
+        });
 
-      if (hasMixedCurrency) {
-        snackbar.error(b3Lang('invoice.footer.differentCurrencyError'));
-        const validIds = validInvoices.map((item) => item.node.id);
-        paginationTableRef.current?.setSelectCheckbox(validIds);
-        setCheckedArr([...validInvoices]);
-        return;
-      }
+        return newItems;
+      });
 
-      setCheckedArr([...checkedItems]);
+      const newEnableItems = checkedItems.filter(
+        (item: InvoiceListNode | undefined) => item && !item.node.disableCurrentCheckbox,
+      );
+      setCheckedArr([...newEnableItems]);
     } else {
       setCheckedArr([]);
     }