From 33afa3af6408c988a9afec1eabdb637e780a4ae8 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Mon, 4 Dec 2023 08:31:18 +0200
Subject: [PATCH] fix(webapp): use the server formatted value

---
 .../webapp/src/containers/Drawers/BillDrawer/utils.tsx |  8 +++-----
 .../Drawers/CreditNoteDetailDrawer/utils.tsx           | 10 ++++------
 .../containers/Drawers/EstimateDetailDrawer/utils.tsx  |  9 ++++-----
 .../InvoiceDetailDrawer/InvoiceDetailTableFooter.tsx   |  2 +-
 .../containers/Drawers/InvoiceDetailDrawer/utils.tsx   | 10 ++++------
 .../Drawers/PaymentMadeDetailDrawer/utils.tsx          |  5 ++---
 .../Drawers/PaymentReceiveDetailDrawer/utils.tsx       |  5 ++---
 .../ReceiptDetailDrawerProvider.tsx                    |  9 +++------
 .../ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx   |  2 +-
 .../containers/Drawers/ReceiptDetailDrawer/utils.tsx   |  6 ++----
 .../VendorCreditDetailDrawerFooter.tsx                 |  2 +-
 .../Drawers/VendorCreditDetailDrawer/utils.tsx         | 10 ++++------
 12 files changed, 31 insertions(+), 47 deletions(-)

diff --git a/packages/webapp/src/containers/Drawers/BillDrawer/utils.tsx b/packages/webapp/src/containers/Drawers/BillDrawer/utils.tsx
index 39cf8052d..9b9691ddf 100644
--- a/packages/webapp/src/containers/Drawers/BillDrawer/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/BillDrawer/utils.tsx
@@ -63,8 +63,7 @@ export const useBillReadonlyEntriesTableColumns = () => {
       },
       {
         Header: intl.get('rate'),
-        accessor: 'rate',
-        Cell: FormatNumberCell,
+        accessor: 'rate_formatted',
         width: getColumnWidth(entries, 'rate', {
           minWidth: 60,
           magicSpacing: 5,
@@ -75,9 +74,8 @@ export const useBillReadonlyEntriesTableColumns = () => {
       },
       {
         Header: intl.get('amount'),
-        accessor: 'amount',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'amount', {
+        accessor: 'total_formatted',
+        width: getColumnWidth(entries, 'total_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
diff --git a/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/utils.tsx b/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/utils.tsx
index b9bb3a1e8..85e57c5ee 100644
--- a/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/utils.tsx
@@ -60,9 +60,8 @@ export const useCreditNoteReadOnlyEntriesColumns = () => {
       },
       {
         Header: intl.get('rate'),
-        accessor: 'rate',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'rate', {
+        accessor: 'rate_formatted',
+        width: getColumnWidth(entries, 'rate_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
@@ -72,9 +71,8 @@ export const useCreditNoteReadOnlyEntriesColumns = () => {
       },
       {
         Header: intl.get('amount'),
-        accessor: 'amount',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'amount', {
+        accessor: 'total_formatted',
+        width: getColumnWidth(entries, 'total_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
diff --git a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/utils.tsx b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/utils.tsx
index 3172feae4..71c869c7e 100644
--- a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/utils.tsx
@@ -47,9 +47,8 @@ export const useEstimateReadonlyEntriesColumns = () => {
       },
       {
         Header: intl.get('rate'),
-        accessor: 'rate',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'rate', {
+        accessor: 'rate_formatted',
+        width: getColumnWidth(entries, 'rate_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
@@ -59,9 +58,9 @@ export const useEstimateReadonlyEntriesColumns = () => {
       },
       {
         Header: intl.get('amount'),
-        accessor: 'amount',
+        accessor: 'total_formatted',
         Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'amount', {
+        width: getColumnWidth(entries, 'total_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
diff --git a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTableFooter.tsx b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTableFooter.tsx
index 899f2bb7b..dd225739c 100644
--- a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTableFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTableFooter.tsx
@@ -23,7 +23,7 @@ export function InvoiceDetailTableFooter() {
       <InvoiceTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'invoice.details.subtotal'} />}
-          value={<FormatNumber value={invoice.subtotal_formatted} />}
+          value={invoice.subtotal_formatted}
           borderStyle={TotalLineBorderStyle.SingleDark}
         />
         {invoice.taxes.map((taxRate) => (
diff --git a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/utils.tsx b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/utils.tsx
index 063c335eb..fc2d3d1b4 100644
--- a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/utils.tsx
@@ -64,24 +64,22 @@ export const useInvoiceReadonlyEntriesColumns = () => {
       },
       {
         Header: intl.get('rate'),
-        accessor: 'rate',
-        Cell: FormatNumberCell,
+        accessor: 'rate_formatted',
         align: 'right',
         disableSortBy: true,
         textOverview: true,
-        width: getColumnWidth(entries, 'rate', {
+        width: getColumnWidth(entries, 'rate_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
       },
       {
         Header: intl.get('amount'),
-        accessor: 'amount',
-        Cell: FormatNumberCell,
+        accessor: 'total_formatted',
         align: 'right',
         disableSortBy: true,
         textOverview: true,
-        width: getColumnWidth(entries, 'amount', {
+        width: getColumnWidth(entries, 'total_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
diff --git a/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/utils.tsx b/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/utils.tsx
index 4721e88c4..939778772 100644
--- a/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/utils.tsx
@@ -52,9 +52,8 @@ export const usePaymentMadeEntriesColumns = () => {
       },
       {
         Header: intl.get('payment_amount'),
-        accessor: 'payment_amount',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'payment_amount', {
+        accessor: 'payment_amount_formatted',
+        width: getColumnWidth(entries, 'payment_amount_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
diff --git a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.tsx b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.tsx
index c0fda5844..8971f3ec6 100644
--- a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.tsx
@@ -63,10 +63,9 @@ export const usePaymentReceiveEntriesColumns = () => {
       },
       {
         Header: intl.get('payment_amount'),
-        accessor: 'invoice.payment_amount',
-        Cell: FormatNumberCell,
+        accessor: 'payment_amount_formatted',
         align: 'right',
-        width: getColumnWidth(entries, 'invoice.payment_amount', {
+        width: getColumnWidth(entries, 'payment_amount_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
diff --git a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.tsx b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.tsx
index 577ef092e..ae87dfe02 100644
--- a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.tsx
@@ -18,12 +18,9 @@ function ReceiptDetailDrawerProvider({ receiptId, ...props }) {
   const { featureCan } = useFeatureCan();
 
   // Fetch sale receipt details.
-  const { data: receipt, isFetching: isReceiptLoading } = useReceipt(
-    receiptId,
-    {
-      enabled: !!receiptId,
-    },
-  );
+  const { data: receipt, isLoading: isReceiptLoading } = useReceipt(receiptId, {
+    enabled: !!receiptId,
+  });
 
   // Provider.
   const provider = {
diff --git a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx
index 56ee5c87b..657606f17 100644
--- a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx
@@ -23,7 +23,7 @@ export default function ReceiptDetailTableFooter() {
       <ReceiptTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'receipt.details.subtotal'} />}
-          value={<FormatNumber value={receipt.amount} />}
+          value={receipt.formatted_amount}
         />
         <TotalLine
           title={<T id={'receipt.details.total'} />}
diff --git a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/utils.tsx b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/utils.tsx
index cf48f1d9a..0241d3e76 100644
--- a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/utils.tsx
@@ -43,8 +43,7 @@ export const useReceiptReadonlyEntriesTableColumns = () => {
       {
         Header: intl.get('rate'),
         accessor: 'rate',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'rate', {
+        width: getColumnWidth(entries, 'rate_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
@@ -55,8 +54,7 @@ export const useReceiptReadonlyEntriesTableColumns = () => {
       {
         Header: intl.get('amount'),
         accessor: 'amount',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'amount', {
+        width: getColumnWidth(entries, 'total_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
diff --git a/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.tsx b/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.tsx
index 42fd4eb60..e11cbce67 100644
--- a/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.tsx
@@ -23,7 +23,7 @@ export default function VendorCreditDetailDrawerFooter() {
       <VendorCreditTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'vendor_credit.drawer.label_subtotal'} />}
-          value={<FormatNumber value={vendorCredit.formatted_amount} />}
+          value={vendorCredit.formatted_amount}
           borderStyle={TotalLineBorderStyle.SingleDark}
         />
         <TotalLine
diff --git a/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/utils.tsx b/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/utils.tsx
index 70c8ae735..95d7bba67 100644
--- a/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/utils.tsx
@@ -61,9 +61,8 @@ export const useVendorCreditReadonlyEntriesTableColumns = () => {
       },
       {
         Header: intl.get('rate'),
-        accessor: 'rate',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'rate', {
+        accessor: 'rate_formatted',
+        width: getColumnWidth(entries, 'rate_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
@@ -73,9 +72,8 @@ export const useVendorCreditReadonlyEntriesTableColumns = () => {
       },
       {
         Header: intl.get('amount'),
-        accessor: 'amount',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'amount', {
+        accessor: 'total_formatted',
+        width: getColumnWidth(entries, 'total_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),