From 4e0037d1c0518a455d567f5cf63252c575e3bc69 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Wed, 28 Jun 2023 01:00:27 +0200
Subject: [PATCH] fix(server): showing transaction statement on cash flow
 transactions details drawer

---
 .../OtherIncome/OtherIncomeFormFields.tsx     |  2 +
 .../CashflowTransactionDrawerDetails.tsx      | 10 +++--
 .../CashflowTransactionDrawerFooter.tsx       | 37 +++++--------------
 .../CashflowTransactionDrawerTableFooter.tsx  | 35 ++++++++++++++++++
 .../InvoiceDetailFooter.tsx                   |  1 -
 packages/webapp/src/lang/en/index.json        |  1 +
 6 files changed, 54 insertions(+), 32 deletions(-)
 create mode 100644 packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTableFooter.tsx

diff --git a/packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx
index 06ccffea0..11d371cac 100644
--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx
@@ -106,11 +106,13 @@ export default function OtherIncomeFormFields() {
             )}
           </FastField>
         </Col>
+
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
           <MoneyInOutTransactionNoField />
         </Col>
       </Row>
+
       {/*------------ amount -----------*/}
       <FastField name={'amount'}>
         {({
diff --git a/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.tsx b/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.tsx
index 4dec0dae4..22544b57b 100644
--- a/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.tsx
+++ b/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.tsx
@@ -1,12 +1,13 @@
 // @ts-nocheck
 import React from 'react';
 
-import { Card } from '@/components';
+import { Card, CommercialDocBox } from '@/components';
 
 import CashflowTransactionDrawerActionBar from './CashflowTransactionDrawerActionBar';
 import CashflowTransactionDrawerHeader from './CashflowTransactionDrawerHeader';
 import CashflowTransactionDrawerTable from './CashflowTransactionDrawerTable';
-import CashflowTransactionDrawerFooter from './CashflowTransactionDrawerFooter';
+import CashflowTransactionDrawerTableFooter from './CashflowTransactionDrawerTableFooter';
+import { CashflowTransactionDrawerFooter } from './CashflowTransactionDrawerFooter';
 /**
  * Cashflow transaction view details.
  */
@@ -16,11 +17,12 @@ export default function CashflowTransactionDrawerDetails() {
       <CashflowTransactionDrawerActionBar />
 
       <div className="cashflow-drawer__content">
-        <Card>
+        <CommercialDocBox>
           <CashflowTransactionDrawerHeader />
           <CashflowTransactionDrawerTable />
+          <CashflowTransactionDrawerTableFooter />
           <CashflowTransactionDrawerFooter />
-        </Card>
+        </CommercialDocBox>
       </div>
     </div>
   );
diff --git a/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.tsx b/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.tsx
index 79c6a0706..b3a7ea58f 100644
--- a/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.tsx
@@ -1,35 +1,18 @@
 // @ts-nocheck
 import React from 'react';
+import { CommercialDocFooter, DetailsMenu, DetailItem, T } from '@/components';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
-import { T, FormatNumber } from '@/components';
 
-export default function CashflowTransactionDrawerFooter() {
-  const {
-    cashflowTransaction: { formatted_amount },
-  } = useCashflowTransactionDrawerContext();
+export function CashflowTransactionDrawerFooter() {
+  const { cashflowTransaction } = useCashflowTransactionDrawerContext();
 
   return (
-    <div className="cashflow-drawer__content-footer">
-      <div class="total-lines">
-        <div class="total-lines__line total-lines__line--subtotal">
-          <div class="title">
-            <T id={'manual_journal.details.subtotal'} />
-          </div>
-          <div class="debit">
-            <FormatNumber value={formatted_amount} />
-          </div>
-          <div class="credit">
-            <FormatNumber value={formatted_amount} />
-          </div>
-        </div>
-        <div class="total-lines__line total-lines__line--total">
-          <div class="title">
-            <T id={'manual_journal.details.total'} />
-          </div>
-          <div class="debit">{formatted_amount}</div>
-          <div class="credit">{formatted_amount}</div>
-        </div>
-      </div>
-    </div>
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <DetailItem label={<T id={'cash_flow.drawer.label.statement'} />}>
+          {cashflowTransaction.description}
+        </DetailItem>
+      </DetailsMenu>
+    </CommercialDocFooter>
   );
 }
diff --git a/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTableFooter.tsx b/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTableFooter.tsx
new file mode 100644
index 000000000..b46f6c0fe
--- /dev/null
+++ b/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTableFooter.tsx
@@ -0,0 +1,35 @@
+// @ts-nocheck
+import React from 'react';
+import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
+import { T, FormatNumber } from '@/components';
+
+export default function CashflowTransactionDrawerTableFooter() {
+  const {
+    cashflowTransaction: { formatted_amount },
+  } = useCashflowTransactionDrawerContext();
+
+  return (
+    <div className="cashflow-drawer__content-footer">
+      <div class="total-lines">
+        <div class="total-lines__line total-lines__line--subtotal">
+          <div class="title">
+            <T id={'manual_journal.details.subtotal'} />
+          </div>
+          <div class="debit">
+            <FormatNumber value={formatted_amount} />
+          </div>
+          <div class="credit">
+            <FormatNumber value={formatted_amount} />
+          </div>
+        </div>
+        <div class="total-lines__line total-lines__line--total">
+          <div class="title">
+            <T id={'manual_journal.details.total'} />
+          </div>
+          <div class="debit">{formatted_amount}</div>
+          <div class="credit">{formatted_amount}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.tsx b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.tsx
index fb1360c6d..237254652 100644
--- a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.tsx
@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-
 import {
   CommercialDocFooter,
   T,
diff --git a/packages/webapp/src/lang/en/index.json b/packages/webapp/src/lang/en/index.json
index a329faa9b..ed0537d77 100644
--- a/packages/webapp/src/lang/en/index.json
+++ b/packages/webapp/src/lang/en/index.json
@@ -1452,6 +1452,7 @@
   "cash_flow.setting_your_auto_generated_transaction_number": "Setting your auto-generated transaction number",
   "cash_flow_drawer.label_transaction_type": "Transaction type",
   "cash_flow.drawer.label_transaction_no": "Transaction number",
+  "cash_flow.drawer.label.statement": "Statement",
   "cash_flow.drawer.label_transaction": "Cash flow Transaction {number}",
   "cash_flow.account_transactions.no_results": "There are no deposit/withdrawal transactions on the current account.",
   "cash_flow_balance_in": "Balance in {name}",