feat: add style of payment made.

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js

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

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js

@@ -1,13 +1,19 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import clsx from 'classnames';
 import { defaultTo } from 'lodash';
 
-import { DetailsMenu, DetailItem, FormatDate } from 'components';
+import {
+  Row,
+  Col,
+  FormatDate,
+  DetailsMenu,
+  DetailItem,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  ButtonLink,
+} from 'components';
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
-import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
-
 /**
  * Payment made - detail panel - header.
  */
@@ -15,30 +21,42 @@ export default function PaymentMadeDetailHeader() {
   const { paymentMade } = usePaymentMadeDetailContext();
 
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel_header)}>
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
         <DetailsMenu>
           <DetailItem label={intl.get('amount')}>
-          <h3 class="big-number" children={paymentMade.formatted_amount} />
+            <h3 class="big-number">{paymentMade.formatted_amount}</h3>
           </DetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
             <DetailItem
               label={intl.get('payment_made.details.payment_number')}
               children={defaultTo(paymentMade.payment_number, '-')}
             />
-        <DetailItem
+            <DetailItem label={intl.get('vendor_name')}>
-          label={intl.get('customer_name')}
+              <ButtonLink>{paymentMade.vendor?.display_name}</ButtonLink>
-          children={paymentMade.vendor?.display_name}
+            </DetailItem>
-        />
             <DetailItem
               label={intl.get('payment_account')}
               children={paymentMade.payment_account?.name}
             />
+
             <DetailItem
               label={intl.get('payment_date')}
               children={<FormatDate value={paymentMade.payment_date} />}
             />
           </DetailsMenu>
-
+        </Col>
-      <DetailsMenu direction={'horizantal'} minLabelSize={'160px'}>
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
             <DetailItem
               label={intl.get('description')}
               children={defaultTo(paymentMade.statement, '-')}
@@ -48,6 +66,8 @@ export default function PaymentMadeDetailHeader() {
               children={<FormatDate value={paymentMade.created_at} />}
             />
           </DetailsMenu>
-    </div>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
   );
 }

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js

@@ -20,26 +20,14 @@ function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
       enabled: !!paymentMadeId,
     },
   );
-  // Handle fetch transaction by reference.
-  const {
-    data: { transactions },
-    isLoading: isTransactionLoading,
-  } = useTransactionsByReference(
-    {
-      reference_id: paymentMadeId,
-      reference_type: 'BillPayment',
-    },
-    { enabled: !!paymentMadeId },
-  );
 
   //provider.
   const provider = {
-    transactions,
     paymentMadeId,
     paymentMade,
   };
 
-  const loading = isTransactionLoading || isPaymentMadeLoading;
+  const loading = isPaymentMadeLoading;
 
   return (
     <DrawerLoading loading={loading}>

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js

@@ -1,28 +1,21 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { Card } from 'components';
+import { CommercialDocBox } from 'components';
 
-import PaymentMadeDetailActionsBar from './PaymentMadeDetailActionsBar';
 import PaymentMadeDetailHeader from './PaymentMadeDetailHeader';
 import PaymentMadeDetailTable from './PaymentMadeDetailTable';
 import PaymentMadeDetailFooter from './PaymentMadeDetailFooter';
 
-import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
-
 /**
  * Payment made detail tab.
+ * @returns {React.JSX}
  */
 export default function PaymentMadeDetailTab() {
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel)}>
+    <CommercialDocBox>
-      <PaymentMadeDetailActionsBar />
-
-      <Card>
       <PaymentMadeDetailHeader />
       <PaymentMadeDetailTable />
       <PaymentMadeDetailFooter />
-      </Card>
+    </CommercialDocBox>
-    </div>
   );
 }

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import clsx from 'classnames';
+
+import { CommercialDocEntriesTable } from 'components';
 
 import { usePaymentMadeEntriesColumns } from './utils';
-import { DataTable } from 'components';
-
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
-import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+import { TableStyle } from 'common';
 
 /**
  * Payment made read-only details table.
@@ -19,12 +18,10 @@ export default function PaymentMadeDetailTable() {
   const { paymentMade } = usePaymentMadeDetailContext();
 
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel_table)}>
+    <CommercialDocEntriesTable
-      <DataTable
       columns={columns}
       data={paymentMade.entries}
-        className={'table-constrant'}
+      styleName={TableStyle.Constrant}
     />
-    </div>
   );
 }

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js

@@ -1,23 +1,21 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
 import { DrawerMainTabs } from 'components';
-import PaymentMadeDetailTab from './PaymentMadeDetailTab';
-import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
-import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
-import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+import PaymentMadeDetailActionsBar from './PaymentMadeDetailActionsBar';
+import PaymentMadeDetailTab from './PaymentMadeDetailTab';
+import PaymentMadeGLEntriesPanel from './PaymentMadeGLEntriesPanel';
 
 /**
  * Payment made - view detail.
+ * @returns {React.JSX}
  */
-export default function PaymentMadeDetails() {
-  const { transactions } = usePaymentMadeDetailContext();
 
+function PaymentMadeDetailsTabs() {
   return (
-    <div className={clsx(PaymentDrawerCls.root)}>
     <DrawerMainTabs defaultSelectedTabId="details">
       <Tab
         id={'details'}
@@ -27,9 +25,23 @@ export default function PaymentMadeDetails() {
       <Tab
         id={'journal_entries'}
         title={intl.get('journal_entries')}
-          panel={<JournalEntriesTable transactions={transactions} />}
+        panel={<PaymentMadeGLEntriesPanel />}
       />
     </DrawerMainTabs>
-    </div>
   );
 }
+
+/**
+ * Payment made view detail.
+ * @returns {React.JSX}
+ */
+export default function PaymentMadeDetail() {
+  return (
+    <PaymentMadeDetailsRoot>
+      <PaymentMadeDetailActionsBar />
+      <PaymentMadeDetailsTabs />
+    </PaymentMadeDetailsRoot>
+  );
+}
+
+const PaymentMadeDetailsRoot = styled.div``;

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeGLEntriesPanel.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Card } from 'components';
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../JournalEntriesTable/JournalEntriesTable';
+
+import { useTransactionsByReference } from 'hooks/query';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+/**
+ * Payment made GL entries table panel.
+ * @returns {React.JSX}
+ */
+export default function PaymentMadeGLEntriesPanel() {
+  const { paymentMadeId } = usePaymentMadeDetailContext();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: paymentMadeId,
+      reference_type: 'BillPayment',
+    },
+    { enabled: !!paymentMadeId },
+  );
+
+  return (
+    <PaymentMadeGLEntriesRoot>
+      <AmountDisplayedBaseCurrencyMessage />
+      <JournalEntriesTable
+        loading={isTransactionLoading}
+        transactions={transactions}
+      />
+    </PaymentMadeGLEntriesRoot>
+  );
+}
+
+const PaymentMadeGLEntriesRoot = styled(Card)``;