feat: style payment receive and made details drawers.

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js

@@ -1,24 +1,32 @@
 import React from 'react';
+import clsx from 'classnames';
+
+import { TotalLines, TotalLine } from 'components';
 
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
+import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+
+/**
+ * Payment made - Details panel - Footer.
+ */
 export default function PaymentMadeDetailFooter() {
-  const {
-    paymentEntries: { total_payment_amount },
-  } = usePaymentMadeDetailContext();
+  const { } = usePaymentMadeDetailContext();
 
   return (
-    <div className="payment-drawer__content-footer">
-      <div class="total-lines">
-        <div class="total-lines__line total-lines__line--subtotal">
-          <div class="title">Subtotal</div>
-          <div class="amount">{total_payment_amount}</div>
-        </div>
-        <div class="total-lines__line total-lines__line--total">
-          <div class="title">TOTAL</div>
-          <div class="amount">{total_payment_amount}</div>
-        </div>
-      </div>
+    <div className={clsx(PaymentDrawerCls.detail_panel_footer)}>
+      <TotalLines>
+        <TotalLine
+          title={'Subtotal'}
+          value={1000}
+          className={clsx(PaymentDrawerCls.total_line_subtotal)}
+        />
+        <TotalLine
+          title={'TOTAL'}
+          value={1000}
+          className={clsx(PaymentDrawerCls.total_line_total)}
+        />
+      </TotalLines>
     </div>
   );
 }