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 (
-
-
- }
- value={}
- />
- }
- value={receipt.formatted_amount}
- borderStyle={TotalLineBorderStyle.DoubleDark}
- textStyle={TotalLineTextStyle.Bold}
- />
- }
- value={receipt.formatted_amount}
- borderStyle={TotalLineBorderStyle.DoubleDark}
- />
- }
- value={'0'}
- />
-
-
+
+
+
+ }>
+ {receipt.statement}
+
+
+
+ }>
+ {receipt.receipt_message}
+
+
+
+
);
}
-
-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() {
+
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 (
+
+
+ }
+ value={}
+ />
+ }
+ value={receipt.formatted_amount}
+ borderStyle={TotalLineBorderStyle.DoubleDark}
+ textStyle={TotalLineTextStyle.Bold}
+ />
+ }
+ value={receipt.formatted_amount}
+ borderStyle={TotalLineBorderStyle.DoubleDark}
+ />
+ }
+ value={'0'}
+ />
+
+
+ );
+}
+
+export const ReceiptDetailsFooterRoot = styled.div``;
+
+export const ReceiptTotalLines = styled(TotalLines)`
+ margin-left: auto;
+`;