From b22ee06a512bde99904076fc6823cea8bd1ac2b8 Mon Sep 17 00:00:00 2001
From: Ragnar Laud <ragnar.laud@hotmail.com>
Date: Sat, 20 Jan 2024 22:55:32 +0200
Subject: [PATCH] Fix Expense Details drawer

Add currency prop to useExpenseReadEntriesColumns
Add missing currency field to FormatNumber
---
 .../Drawers/ExpenseDrawer/ExpenseDrawerFooter.tsx  | 14 ++++++++++++--
 .../Drawers/ExpenseDrawer/ExpenseDrawerTable.tsx   |  8 +++++---
 .../src/containers/Drawers/ExpenseDrawer/utils.tsx |  5 +++--
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.tsx b/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.tsx
index c1acea3f2a..baffd95125 100644
--- a/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.tsx
@@ -22,12 +22,22 @@ export default function ExpenseDrawerFooter() {
       <ExpenseTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'expense.details.subtotal'} />}
-          value={<FormatNumber value={expense.total_amount} />}
+          value={
+            <FormatNumber
+              value={expense.total_amount}
+              currency={expense.currency_code}
+            />
+          }
           borderStyle={TotalLineBorderStyle.SingleDark}
         />
         <TotalLine
           title={<T id={'expense.details.total'} />}
-          value={<FormatNumber value={expense.formatted_amount} />}
+          value={
+            <FormatNumber
+              value={expense.formatted_amount}
+              currency={expense.currency_code}
+            />
+          }
           borderStyle={TotalLineBorderStyle.DoubleDark}
           textStyle={TotalLineTextStyle.Bold}
         />
diff --git a/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.tsx b/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.tsx
index dd0d4ccb66..2448e72474 100644
--- a/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.tsx
+++ b/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.tsx
@@ -12,12 +12,14 @@ import { TableStyle } from '@/constants';
  * Expense details table.
  */
 export default function ExpenseDrawerTable() {
-  // Expense readonly entries columns.
-  const columns = useExpenseReadEntriesColumns();
-
   // Expense drawer context.
   const { expense } = useExpenseDrawerContext();
 
+  // Expense readonly entries columns.
+  const columns = useExpenseReadEntriesColumns({
+    currency: expense.currency_code,
+  });
+
   return (
     <CommercialDocEntriesTable
       columns={columns}
diff --git a/packages/webapp/src/containers/Drawers/ExpenseDrawer/utils.tsx b/packages/webapp/src/containers/Drawers/ExpenseDrawer/utils.tsx
index 276923cceb..0d6cb8c31d 100644
--- a/packages/webapp/src/containers/Drawers/ExpenseDrawer/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/ExpenseDrawer/utils.tsx
@@ -9,7 +9,7 @@ import { getColumnWidth } from '@/utils';
 /**
  * Retrieve expense readonly details entries table columns.
  */
-export const useExpenseReadEntriesColumns = () => {
+export const useExpenseReadEntriesColumns = ({ currency }) => {
   // Expense drawer context.
   const {
     expense: { categories },
@@ -38,6 +38,7 @@ export const useExpenseReadEntriesColumns = () => {
         Header: intl.get('amount'),
         accessor: 'amount',
         Cell: FormatNumberCell,
+        formatNumber: { currency },
         width: getColumnWidth(categories, 'amount', {
           minWidth: 60,
           magicSpacing: 5,
@@ -47,6 +48,6 @@ export const useExpenseReadEntriesColumns = () => {
         align: 'right',
       },
     ],
-    [],
+    [currency],
   );
 };