From ace3fdc5699f21de44a4372e8f6778d6c8eaaf21 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Mon, 20 Dec 2021 14:33:48 +0200
Subject: [PATCH] feat: optmize style of payment receive details.

---
 .../InvoiceGLEntriesTable.js                  |  6 +-
 .../PaymentReceiveActionsBar.js               | 19 ++--
 .../PaymentReceiveDetail.js                   | 52 ++++++----
 .../PaymentReceiveDetailHeader.js             | 96 +++++++++++--------
 .../PaymentReceiveDetailProvider.js           | 18 +---
 .../PaymentReceiveDetailTab.js                | 23 ++---
 .../PaymentReceiveDetailTable.js              | 19 ++--
 .../PaymentReceiveGLEntriesPanel.js           | 42 ++++++++
 8 files changed, 167 insertions(+), 108 deletions(-)
 create mode 100644 src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveGLEntriesPanel.js

diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.js
index b7d1f2572..aade4e656 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.js
@@ -40,10 +40,6 @@ export default function InvoiceGLEntriesTable() {
   );
 }
 
-const InvoiceGLEntriesDatatable = styled(JournalEntriesTable)`
-  .table .tbody .tr:last-child .td {
-    border-bottom: 0;
-  }
-`;
+const InvoiceGLEntriesDatatable = styled(JournalEntriesTable)``;
 
 const InvoiceGLEntriesRoot = styled(Card)``;
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
index f1c725c8e..5f2cad543 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-
 import {
   Button,
   NavbarGroup,
@@ -8,7 +7,6 @@ import {
   NavbarDivider,
   Intent,
 } from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
@@ -16,7 +14,13 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Can, Icon, FormattedMessage as T, MoreMenuItems } from 'components';
+import {
+  Can,
+  Icon,
+  FormattedMessage as T,
+  MoreMenuItems,
+  DrawerActionsBar,
+} from 'components';
 import {
   PaymentReceiveAction,
   AbilitySubject,
@@ -59,7 +63,7 @@ function PaymentReceiveActionsBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Can I={PaymentReceiveAction.Edit} a={AbilitySubject.PaymentReceive}>
           <Button
@@ -80,7 +84,10 @@ function PaymentReceiveActionsBar({
           />
           <NavbarDivider />
         </Can>
-        <Can I={PaymentReceiveAction.NotifyBySms} a={AbilitySubject.PaymentReceive}>
+        <Can
+          I={PaymentReceiveAction.NotifyBySms}
+          a={AbilitySubject.PaymentReceive}
+        >
           <MoreMenuItems
             payload={{
               onNotifyViaSMS: handleNotifyViaSMS,
@@ -88,7 +95,7 @@ function PaymentReceiveActionsBar({
           />
         </Can>
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js
index ce98e4ee0..2bf9a0b17 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js
@@ -1,36 +1,46 @@
 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 PaymentReceiveDetailTab from './PaymentReceiveDetailTab';
+import PaymentReceiveActionsBar from './PaymentReceiveActionsBar';
+import { PaymentReceiveGLEntriesPanel } from './PaymentReceiveGLEntriesPanel';
 
-import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
-import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
-
-import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
+/**
+ * Payment receive details tabs.
+ * @returns {React.JSX}
+ */
+function PaymentReceiveDetailsTabs() {
+  return (
+    <DrawerMainTabs defaultSelectedTabId="details">
+      <Tab
+        id={'details'}
+        title={intl.get('details')}
+        panel={<PaymentReceiveDetailTab />}
+      />
+      <Tab
+        id={'journal_entries'}
+        title={intl.get('journal_entries')}
+        panel={<PaymentReceiveGLEntriesPanel />}
+      />
+    </DrawerMainTabs>
+  );
+}
 
 /**
  * Payment receive view detail.
+ * @returns {React.JSX}
  */
 export default function PaymentReceiveDetail() {
-  const { transactions } = usePaymentReceiveDetailContext();
-
   return (
-    <div className={clsx(PaymentDrawerCls.root)}>
-      <DrawerMainTabs defaultSelectedTabId="details">
-        <Tab
-          id={'details'}
-          title={intl.get('details')}
-          panel={<PaymentReceiveDetailTab />}
-        />
-        <Tab
-          id={'journal_entries'}
-          title={intl.get('journal_entries')}
-          panel={<JournalEntriesTable transactions={transactions} />}
-        />
-      </DrawerMainTabs>
-    </div>
+    <PaymentReceiveDetailsRoot>
+      <PaymentReceiveActionsBar />
+      <PaymentReceiveDetailsTabs />
+    </PaymentReceiveDetailsRoot>
   );
 }
+
+const PaymentReceiveDetailsRoot = styled.div``;
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
index d57659edf..c8affc18a 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
@@ -1,13 +1,19 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import clsx from 'classnames';
 import { defaultTo } from 'lodash';
 
-import { FormatDate, DetailsMenu, DetailItem } from 'components';
+import {
+  Row,
+  Col,
+  FormatDate,
+  DetailsMenu,
+  DetailItem,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  ButtonLink,
+} from 'components';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
-import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
-
 /**
  * Payment receive detail header.
  */
@@ -15,42 +21,54 @@ export default function PaymentReceiveDetailHeader() {
   const { paymentReceive } = usePaymentReceiveDetailContext();
 
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel_header)}>
-      <DetailsMenu>
-        <DetailItem
-          label={intl.get('amount')}
-          children={
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <DetailItem label={intl.get('amount')}>
             <h3 class="big-number">{paymentReceive.formatted_amount}</h3>
-          }
-        />
-        <DetailItem
-          label={intl.get('payment_receive.details.payment_number')}
-          children={defaultTo(paymentReceive.payment_receive_no, '-')}
-        />
-        <DetailItem
-          label={intl.get('customer_name')}
-          children={paymentReceive.customer?.display_name}
-        />
-        <DetailItem
-          label={intl.get('deposit_account')}
-          children={paymentReceive.deposit_account?.name}
-        />
-        <DetailItem
-          label={intl.get('payment_date')}
-          children={<FormatDate value={paymentReceive.payment_date} />}
-        />
-      </DetailsMenu>
+          </DetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
 
-      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
-        <DetailItem
-          label={intl.get('description')}
-          children={defaultTo(paymentReceive.statement, '—')}
-        />
-        <DetailItem
-          label={intl.get('created_at')}
-          children={<FormatDate value={paymentReceive.created_at} />}
-        />
-      </DetailsMenu>
-    </div>
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('payment_receive.details.payment_number')}
+              children={defaultTo(paymentReceive.payment_receive_no, '-')}
+            />
+            <DetailItem label={intl.get('customer_name')}>
+              <ButtonLink>{paymentReceive.customer?.display_name}</ButtonLink>
+            </DetailItem>
+
+            <DetailItem
+              label={intl.get('deposit_account')}
+              children={paymentReceive.deposit_account?.name}
+            />
+            <DetailItem
+              label={intl.get('payment_date')}
+              children={<FormatDate value={paymentReceive.payment_date} />}
+            />
+          </DetailsMenu>
+        </Col>
+
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
+            <DetailItem
+              label={intl.get('description')}
+              children={defaultTo(paymentReceive.statement, '—')}
+            />
+            <DetailItem
+              label={intl.get('created_at')}
+              children={<FormatDate value={paymentReceive.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
   );
 }
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
index aa79010e1..04bb1902b 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
-import { useTransactionsByReference, usePaymentReceive } from 'hooks/query';
+import { usePaymentReceive } from 'hooks/query';
 
 const PaymentReceiveDetailContext = React.createContext();
 
@@ -9,6 +9,7 @@ const PaymentReceiveDetailContext = React.createContext();
  * Payment receive detail provider.
  */
 function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
+  // Fetches specific payment receive details.
   const {
     data: paymentReceive,
     isLoading: isPaymentLoading,
@@ -17,28 +18,15 @@ function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
     enabled: !!paymentReceiveId,
   });
 
-  // Handle fetch transaction by reference.
-  const {
-    data: { transactions },
-    isLoading: isTransactionLoading,
-  } = useTransactionsByReference(
-    {
-      reference_id: paymentReceiveId,
-      reference_type: 'paymentReceive',
-    },
-    { enabled: !!paymentReceiveId },
-  );
-
   // Provider.
   const provider = {
     isPaymentFetching,
-    transactions,
     paymentReceive,
     paymentReceiveId,
   };
 
   return (
-    <DrawerLoading loading={isTransactionLoading || isPaymentLoading}>
+    <DrawerLoading loading={isPaymentLoading}>
       <DrawerHeaderContent
         name="payment-receive-detail-drawer"
         title={intl.get('payment_receive_details')}
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js
index 33c627c14..edf48e1c7 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js
@@ -1,25 +1,26 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { Card } from 'components';
+import { CommercialDocBox } from 'components';
 
-import PaymentReceiveActionsBar from './PaymentReceiveActionsBar';
 import PaymentReceiveDetailHeader from './PaymentReceiveDetailHeader';
 import PaymentReceiveDetailTable from './PaymentReceiveDetailTable';
 import PaymentReceiveDetailFooter from './PaymentReceiveDetailFooter';
 
-import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
-
+/**
+ * Payment receive - overview panel.
+ * @returns {React.JSX}
+ */
 export default function PaymentReceiveDetailTab() {
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel)}>
-      <PaymentReceiveActionsBar />
-
-      <Card>
+    <PaymentReceiveDetailsTabPanelRoot>
+      <CommercialDocBox>
         <PaymentReceiveDetailHeader />
         <PaymentReceiveDetailTable />
         <PaymentReceiveDetailFooter />
-      </Card>
-    </div>
+      </CommercialDocBox>
+    </PaymentReceiveDetailsTabPanelRoot>
   );
 }
+
+const PaymentReceiveDetailsTabPanelRoot = styled.div``;
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTable.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTable.js
index b5b941c5a..c08736b3b 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTable.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTable.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import clsx from 'classnames';
+
+import { CommercialDocEntriesTable } from 'components';
 
 import { usePaymentReceiveEntriesColumns } from './utils';
-import { DataTable } from 'components';
-
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
-import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
+import { TableStyle } from 'common';
 
 /**
  * Payment receive readonly details table.
@@ -19,12 +18,10 @@ export default function PaymentReceiveDetailTable() {
   } = usePaymentReceiveDetailContext();
 
   return (
-    <div className={clsx(PaymentDrawerCls.detail_panel_table)}>
-      <DataTable
-        columns={columns}
-        data={entries}
-        className={'table-constrant'}
-      />
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={entries}
+      styleName={TableStyle.Constrant}
+    />
   );
 }
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveGLEntriesPanel.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveGLEntriesPanel.js
new file mode 100644
index 000000000..49105d8c0
--- /dev/null
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveGLEntriesPanel.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 { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+/**
+ * Payment receive GL entries table panel.
+ * @returns {React.JSX}
+ */
+export function PaymentReceiveGLEntriesPanel() {
+  const { paymentReceiveId } = usePaymentReceiveDetailContext();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionsLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: paymentReceiveId,
+      reference_type: 'paymentReceive',
+    },
+    { enabled: !!paymentReceiveId },
+  );
+
+  return (
+    <PaymentReceiveGLEntriesRoot>
+      <AmountDisplayedBaseCurrencyMessage />
+      <JournalEntriesTable
+        loading={isTransactionsLoading}
+        transactions={transactions}
+      />
+    </PaymentReceiveGLEntriesRoot>
+  );
+}
+
+const PaymentReceiveGLEntriesRoot = styled(Card)``;