From 8ea92513fec800012c71a808b6ed0f0de7c5787a Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 26 Dec 2021 13:26:10 +0200
Subject: [PATCH] feat: receipt detail footer.

---
 .../ReceiptDetailFooter.js                    | 60 +++++++------------
 .../ReceiptDetailDrawer/ReceiptDetailTab.js   |  4 +-
 .../ReceiptDetailTableFooter.js               | 51 ++++++++++++++++
 3 files changed, 76 insertions(+), 39 deletions(-)
 create mode 100644 src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.js

diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js
index d721337af..31d214119 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js
@@ -1,51 +1,35 @@
 import React from 'react';
-import styled from 'styled-components';
-
 import {
+  CommercialDocFooter,
   T,
-  TotalLines,
-  TotalLine,
-  TotalLineBorderStyle,
-  TotalLineTextStyle,
-  FormatNumber,
+  If,
+  DetailsMenu,
+  DetailItem,
 } from 'components';
+
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
 
 /**
- * Receipts read-only details footer.
+ * Receipt details footer
+ * @returns {React.JSX}
  */
-export function ReceiptDetailFooter() {
+export default function ReceiptDetailFooter() {
   const { receipt } = useReceiptDetailDrawerContext();
 
   return (
-    <ReceiptDetailsFooterRoot>
-      <ReceiptTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
-        <TotalLine
-          title={<T id={'receipt.details.subtotal'} />}
-          value={<FormatNumber value={receipt.amount} />}
-        />
-        <TotalLine
-          title={<T id={'receipt.details.total'} />}
-          value={receipt.formatted_amount}
-          borderStyle={TotalLineBorderStyle.DoubleDark}
-          textStyle={TotalLineTextStyle.Bold}
-        />
-        <TotalLine
-          title={<T id={'receipt.details.payment_amount'} />}
-          value={receipt.formatted_amount}
-          borderStyle={TotalLineBorderStyle.DoubleDark}
-        />
-        <TotalLine
-          title={<T id={'receipt.details.due_amount'} />}
-          value={'0'}
-        />
-      </ReceiptTotalLines>
-    </ReceiptDetailsFooterRoot>
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <If condition={receipt.statement}>
+          <DetailItem label={<T id={'receipt.details.statement'} />}>
+            {receipt.statement}
+          </DetailItem>
+        </If>
+        <If condition={receipt.receipt_message}>
+          <DetailItem label={<T id={'receipt.details.receipt_message'} />}>
+            {receipt.receipt_message}
+          </DetailItem>
+        </If>
+      </DetailsMenu>
+    </CommercialDocFooter>
   );
 }
-
-export const ReceiptDetailsFooterRoot = styled.div``;
-
-export const ReceiptTotalLines = styled(TotalLines)`
-  margin-left: auto;
-`;
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTab.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTab.js
index 5529e89ed..c594f5285 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTab.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTab.js
@@ -5,7 +5,8 @@ import { CommercialDocBox } from 'components';
 
 import ReceiptDetailHeader from './ReceiptDetailHeader';
 import ReceiptDetailTable from './ReceiptDetailTable';
-import { ReceiptDetailFooter } from './ReceiptDetailFooter';
+import ReceiptDetailTableFooter from './ReceiptDetailTableFooter';
+import ReceiptDetailFooter from './ReceiptDetailFooter';
 
 export default function ReceiptDetailTab() {
   return (
@@ -13,6 +14,7 @@ export default function ReceiptDetailTab() {
       <CommercialDocBox>
         <ReceiptDetailHeader />
         <ReceiptDetailTable />
+        <ReceiptDetailTableFooter />
         <ReceiptDetailFooter />
       </CommercialDocBox>
     </ReceiptDetailsOverviewRoot>
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.js
new file mode 100644
index 000000000..370221e9a
--- /dev/null
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+  FormatNumber,
+} from 'components';
+import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
+
+/**
+ * Receipts read-only details table footer.
+ */
+export default function ReceiptDetailTableFooter() {
+  const { receipt } = useReceiptDetailDrawerContext();
+
+  return (
+    <ReceiptDetailsFooterRoot>
+      <ReceiptTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'receipt.details.subtotal'} />}
+          value={<FormatNumber value={receipt.amount} />}
+        />
+        <TotalLine
+          title={<T id={'receipt.details.total'} />}
+          value={receipt.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+        <TotalLine
+          title={<T id={'receipt.details.payment_amount'} />}
+          value={receipt.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+        />
+        <TotalLine
+          title={<T id={'receipt.details.due_amount'} />}
+          value={'0'}
+        />
+      </ReceiptTotalLines>
+    </ReceiptDetailsFooterRoot>
+  );
+}
+
+export const ReceiptDetailsFooterRoot = styled.div``;
+
+export const ReceiptTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;