From dd7b44eb290854e84711166d28ae31894a7611e4 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Tue, 21 Dec 2021 18:36:45 +0200
Subject: [PATCH] feat: display expense formatted amount.

---
 .../Drawers/BillDrawer/BillDetailActionsBar.js   |  1 -
 .../Drawers/ExpenseDrawer/ExpenseDrawerHeader.js | 16 ++++++----------
 .../VendorCreditDetailActionsBar.js              |  2 +-
 .../Expenses/ExpensesLanding/components.js       | 14 +++++---------
 4 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js b/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
index ab58d45a1..3a5aecb96 100644
--- a/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
+++ b/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
@@ -8,7 +8,6 @@ import {
   NavbarDivider,
   Intent,
 } from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { useBillDrawerContext } from './BillDrawerProvider';
 
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
index e73f60261..c01cb292c 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
+++ b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
@@ -27,12 +27,7 @@ export default function ExpenseDrawerHeader() {
       <CommercialDocTopHeader>
         <DetailsMenu>
           <DetailItem name={'amount'} label={<T id={'full_amount'} />}>
-            <h3 class="big-number">
-              <Money
-                amount={expense.total_amount}
-                currency={expense.currency_code}
-              />
-            </h3>
+            <h3 class="big-number">{expense.formatted_amount}</h3>
           </DetailItem>
 
           <StatusDetailItem>
@@ -52,8 +47,8 @@ export default function ExpenseDrawerHeader() {
               {defaultTo(expense.reference_no, '-')}
             </DetailItem>
 
-            <DetailItem label={<T id={'published_at'} />}>
-              {moment(expense.published_at).format('YYYY MMM DD')}
+            <DetailItem label={<T id={'description'} />}>
+              {defaultTo(expense.description, '—')}
             </DetailItem>
           </DetailsMenu>
         </Col>
@@ -64,9 +59,10 @@ export default function ExpenseDrawerHeader() {
             direction={'horizantal'}
             minLabelSize={'180px'}
           >
-            <DetailItem label={<T id={'description'} />}>
-              {defaultTo(expense.description, '—')}
+            <DetailItem label={<T id={'published_at'} />}>
+              {moment(expense.published_at).format('YYYY MMM DD')}
             </DetailItem>
+
             <DetailItem label={<T id={'created_at'} />}>2021 Aug 24</DetailItem>
           </DetailsMenu>
         </Col>
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
index a2cd68f01..fcefb9273 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
@@ -69,7 +69,7 @@ function VendorCreditDetailActionsBar({
         <If condition={!vendorCredit.is_closed && !vendorCredit.is_draft}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon="quick-payment-16" iconSize={16} />}
+            icon={<Icon icon="arrow-downward" iconSize={18} />}
             text={<T id={'refund'} />}
             onClick={handleRefundVendorCredit}
           />
diff --git a/src/containers/Expenses/ExpensesLanding/components.js b/src/containers/Expenses/ExpensesLanding/components.js
index fa4dfd11a..da7bf993f 100644
--- a/src/containers/Expenses/ExpensesLanding/components.js
+++ b/src/containers/Expenses/ExpensesLanding/components.js
@@ -12,11 +12,13 @@ import {
   MenuDivider,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
+import clsx from 'classnames';
+
+import { CLASSES } from 'common/classes';
 import { ExpenseAction, AbilitySubject } from '../../../common/abilityOption';
 import {
   FormatDateCell,
   FormattedMessage as T,
-  Money,
   Icon,
   If,
   Can,
@@ -98,13 +100,6 @@ export function ActionsCell(props) {
   );
 }
 
-/**
- * Total amount accessor.
- */
-export function TotalAmountAccessor(row) {
-  return <Money amount={row.total_amount} currency={row.currency_code} />;
-}
-
 /**
  * Publish accessor.
  */
@@ -149,11 +144,12 @@ export function useExpensesTableColumns() {
       {
         id: 'amount',
         Header: intl.get('full_amount'),
-        accessor: TotalAmountAccessor,
+        accessor: 'formatted_amount',
         className: 'amount',
         align: 'right',
         width: 150,
         clickable: true,
+        className: clsx(CLASSES.FONT_BOLD),
       },
       {
         id: 'payment_account',