chrone: sperate client and server to different repos.

src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { T, TotalLines, TotalLine } from 'components';
+
+import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss';
+import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
+
+import { FormatNumber } from '../../../components';
+
+/**
+ * Receipts read-only details footer.
+ */
+export function ReceiptDetailFooter() {
+  const { receipt } = useReceiptDetailDrawerContext();
+
+  return (
+    <div className={clsx(ReceiptDrawerCls.detail_panel_footer)}>
+      <TotalLines>
+        <TotalLine
+          title={<T id={'receipt.details.subtotal'} />}
+          value={<FormatNumber value={receipt.amount} />}
+          className={ReceiptDrawerCls.total_line_subtotal}
+        />
+        <TotalLine
+          title={<T id={'receipt.details.total'} />}
+          value={receipt.formatted_amount}
+          className={ReceiptDrawerCls.total_line_total}
+        />
+        <TotalLine
+          title={<T id={'receipt.details.payment_amount'} />}
+          value={receipt.formatted_amount}
+          className={ReceiptDrawerCls.total_line_payment}
+        />
+        <TotalLine
+          title={<T id={'receipt.details.due_amount'} />}
+          value={'0'}
+          className={ReceiptDrawerCls.total_line_dueAmount}
+        />
+      </TotalLines>
+    </div>
+  );
+}