refactor: Total lines of commercial documents.

src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js

@@ -59,11 +59,11 @@ function ReceiptDetailActionBar({
   const onPrintReceipt = () => {
     openDialog('receipt-pdf-preview', { receiptId });
   };
-
   // Handle notify via SMS.
   const handleNotifyViaSMS = () => {
     openDialog('notify-receipt-via-sms', { receiptId });
   };
+
   return (
     <DrawerActionsBar>
       <NavbarGroup>

src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import { DrawerBody } from 'components';
 
-import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
-
 import ReceiptDetail from './ReceiptDetail';
 import { ReceiptDetailDrawerProvider } from './ReceiptDetailDrawerProvider';
 

src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js

@@ -1,13 +1,16 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { T, TotalLines, TotalLine } from 'components';
-
-import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss';
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+  FormatNumber,
+} from 'components';
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
 
-import { FormatNumber } from '../../../components';
-
 /**
  * Receipts read-only details footer.
  */
@@ -15,29 +18,34 @@ export function ReceiptDetailFooter() {
   const { receipt } = useReceiptDetailDrawerContext();
 
   return (
-    <div className={clsx(ReceiptDrawerCls.detail_panel_footer)}>
-      <TotalLines>
+    <ReceiptDetailsFooterRoot>
+      <ReceiptTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <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}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
         />
         <TotalLine
           title={<T id={'receipt.details.payment_amount'} />}
           value={receipt.formatted_amount}
-          className={ReceiptDrawerCls.total_line_payment}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
         />
         <TotalLine
           title={<T id={'receipt.details.due_amount'} />}
           value={'0'}
-          className={ReceiptDrawerCls.total_line_dueAmount}
         />
-      </TotalLines>
-    </div>
+      </ReceiptTotalLines>
+    </ReceiptDetailsFooterRoot>
   );
 }
+
+export const ReceiptDetailsFooterRoot = styled.div``;
+
+export const ReceiptTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;