refactor: Total lines of commercial documents.

src/containers/Drawers/BillDrawer/BillDetailFooter.js

@@ -1,11 +1,16 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { FormatNumber, T, TotalLines, TotalLine } from '../../../components';
+import {
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+  FormatNumber,
+  T,
+  TotalLines,
+  TotalLine,
+} from '../../../components';
 import { useBillDrawerContext } from './BillDrawerProvider';
 
-import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
-
 /**
  * Bill read-only details footer.
  */
@@ -13,29 +18,34 @@ export function BillDetailFooter() {
   const { bill } = useBillDrawerContext();
 
   return (
-    <div className={clsx(BillDrawerCls.detail_panel_footer)}>
-      <TotalLines>
+    <BillDetailsFooterRoot>
+      <BillTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'bill.details.subtotal'} />}
-          value={<FormatNumber value={bill.amount} />}
-          className={BillDrawerCls.total_line_subtotal}
+          value={<FormatNumber value={bill.amont} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
         />
         <TotalLine
           title={<T id={'bill.details.total'} />}
           value={bill.formatted_amount}
-          className={BillDrawerCls.total_line_total}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
         />
         <TotalLine
           title={<T id={'bill.details.payment_amount'} />}
           value={bill.formatted_payment_amount}
-          className={BillDrawerCls.total_line_payment}
         />
         <TotalLine
           title={<T id={'bill.details.due_amount'} />}
           value={bill.formatted_due_amount}
-          className={BillDrawerCls.total_line_dueAmount}
         />
-      </TotalLines>
-    </div>
+      </BillTotalLines>
+    </BillDetailsFooterRoot>
   );
 }
+
+export const BillDetailsFooterRoot = styled.div``;
+
+export const BillTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;