feat: add style of vendor credit.

src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js

@@ -5,10 +5,14 @@ import { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerP
 import { useTransactionsByReference } from 'hooks/query';
 import { useJournalEntriesTransactionsColumns } from './components';
 
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../../JournalEntriesTable/JournalEntriesTable';
+
 /**
  * Journal entries vendor credit transactions table.
  */
-export default function JournalEntriesTransactionsTable() {
+export function VendorCreditGLEntriesTable() {
   const { vendorCreditId } = useVendorCreditDetailDrawerContext();
 
   const columns = useJournalEntriesTransactionsColumns();
@@ -27,11 +31,11 @@ export default function JournalEntriesTransactionsTable() {
 
   return (
     <Card>
-      <DataTable
+      <AmountDisplayedBaseCurrencyMessage />
+      <JournalEntriesTable
         columns={columns}
         data={transactions}
         loading={isTransactionLoading}
-        className={'datatable--journal-entries'}
       />
     </Card>
   );

src/containers/Drawers/VendorCreditDetailDrawer/ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { DataTable, Card } from 'components';
 
-import '../../../../style/pages/RefundCreditNote/List.scss';
-
+import { TableStyle } from 'common';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+
 import { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerProvider';
 import {
   useReconcileVendorCreditTransactionsTableColumns,
@@ -33,10 +33,10 @@ function ReconcileVendorCreditTransactionsTable({
         columns={columns}
         data={reconcileVendorCredits}
         ContextMenu={ActionsMenu}
+        styleName={TableStyle.Constrant}
         payload={{
           onDelete: handleDeleteReconcileVendorCredit,
         }}
-        className={'datatable--refund-transactions'}
       />
     </Card>
   );

src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { DataTable, Card } from 'components';
 
-import 'style/pages/RefundVendorCredit/List.scss';
+import { TableStyle } from 'common';
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerProvider';
@@ -34,10 +34,10 @@ function RefundVendorCreditTransactionsTable({
         columns={columns}
         data={refundVendorCredit}
         ContextMenu={ActionsMenu}
+        styleName={TableStyle.Constrant}
         payload={{
           onDelete: handleDeleteRefundVendorCredit,
         }}
-        className={'datatable--refund-transactions'}
       />
     </Card>
   );

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js

@@ -1,44 +1,57 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import { DrawerMainTabs } from 'components';
+import styled from 'styled-components';
 
+import { DrawerMainTabs } from 'components';
+import VendorCreditDetailActionsBar from './VendorCreditDetailActionsBar';
 import VendorCreditDetailPanel from './VendorCreditDetailPanel';
 import RefundVendorCreditTransactionsTable from './RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable';
 import ReconcileVendorCreditTransactionsTable from './ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable';
-import JournalEntriesTransactionsTable from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
-import clsx from 'classnames';
-
-import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
+import { VendorCreditGLEntriesTable } from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
 
 /**
  * Vendor credit view detail.
+ *
  */
 export default function VendorCreditDetail() {
   return (
-    <div className={clsx(VendorCreditDetailCls.root)}>
-      <DrawerMainTabs renderActiveTabPanelOnly={true}>
-        <Tab
-          title={intl.get('details')}
-          id={'details'}
-          panel={<VendorCreditDetailPanel />}
-        />
-        <Tab
-          title={intl.get('journal_entries')}
-          id={'journal_entries'}
-          panel={<JournalEntriesTransactionsTable />}
-        />
-        <Tab
-          title={intl.get('vendor_credit.drawer.label_refund_transactions')}
-          id={'refund_transactions'}
-          panel={<RefundVendorCreditTransactionsTable />}
-        />
-        <Tab
-          title={intl.get('vendor_credit.drawer.label_bills_reconciled')}
-          id={'reconcile_transactions'}
-          panel={<ReconcileVendorCreditTransactionsTable />}
-        />
-      </DrawerMainTabs>
-    </div>
+    <VendorCreditRoot>
+      <VendorCreditDetailActionsBar />
+      <VendorCreditDetailsTabs />
+    </VendorCreditRoot>
   );
 }
+
+/**
+ * Vendor Credit details tabs.
+ * @returns {React.JSX}
+ */
+function VendorCreditDetailsTabs() {
+  return (
+    <DrawerMainTabs renderActiveTabPanelOnly={true}>
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<VendorCreditDetailPanel />}
+      />
+      <Tab
+        title={intl.get('journal_entries')}
+        id={'journal_entries'}
+        panel={<VendorCreditGLEntriesTable />}
+      />
+      <Tab
+        title={intl.get('vendor_credit.drawer.label_refund_transactions')}
+        id={'refund_transactions'}
+        panel={<RefundVendorCreditTransactionsTable />}
+      />
+      <Tab
+        title={intl.get('vendor_credit.drawer.label_bills_reconciled')}
+        id={'reconcile_transactions'}
+        panel={<ReconcileVendorCreditTransactionsTable />}
+      />
+    </DrawerMainTabs>
+  );
+}
+
+const VendorCreditRoot = styled.div``;

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js

@@ -1,12 +1,21 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { FormatDate, T, DetailsMenu, DetailItem } from 'components';
+import {
+  FormatDate,
+  T,
+  Row,
+  Col,
+  DetailsMenu,
+  DetailItem,
+  ButtonLink,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+} from 'components';
 import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
-
-import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
+import { VendorCreditDetailsStatus } from './utils';
 
 /**
  * Vendor credit detail drawer header.
@@ -14,47 +23,72 @@ import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCredi
 export default function VendorCreditDetailHeader() {
   const { vendorCredit } = useVendorCreditDetailDrawerContext();
   return (
-    <div className={clsx(VendorCreditDetailCls.detail_panel_header)}>
-      <DetailsMenu>
-        <DetailItem label={intl.get('amount')}>
-          <span class="big-number">{vendorCredit.formatted_amount}</span>
-        </DetailItem>
-        <DetailItem
-          label={intl.get('vendor_credit.drawer.label_vendor_credit_no')}
-          children={defaultTo(vendorCredit.vendor_credit_number, '-')}
-        />
-        <DetailItem
-          label={intl.get('vendor_name')}
-          children={vendorCredit.vendor?.display_name}
-        />
-        <DetailItem
-          label={intl.get('vendor_credit.drawer.label_vendor_credit_date')}
-          children={
-            <FormatDate value={vendorCredit.formatted_vendor_credit_date} />
-          }
-        />
-        <DetailItem
-          label={intl.get('vendor_credit.drawer.label_credits_remaining')}
-          children={vendorCredit.formatted_credits_remaining}
-        />
-      </DetailsMenu>
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <AmountItem label={intl.get('amount')}>
+            <span class="big-number">{vendorCredit.formatted_amount}</span>
+          </AmountItem>
+          <StatusItem>
+            <VendorCreditDetailsStatus vendorCredit={vendorCredit} />
+          </StatusItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('vendor_credit.drawer.label_vendor_credit_no')}
+            >
+              {defaultTo(vendorCredit.vendor_credit_number, '-')}
+            </DetailItem>
 
-      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
-        <DetailItem
-          label={intl.get('reference')}
-          children={vendorCredit.reference_no}
-        />
+            <DetailItem label={intl.get('vendor_name')}>
+              <ButtonLink>{vendorCredit.vendor?.display_name}</ButtonLink>
+            </DetailItem>
 
-        <DetailItem
-          label={intl.get('note')}
-          children={defaultTo(vendorCredit.note, '-')}
-        />
-
-        <DetailItem
-          label={<T id={'vendor_credit.drawer.label_created_at'} />}
-          children={<FormatDate value={vendorCredit.created_at} />}
-        />
-      </DetailsMenu>
-    </div>
+            <DetailItem
+              label={intl.get('vendor_credit.drawer.label_vendor_credit_date')}
+            >
+              <FormatDate value={vendorCredit.formatted_vendor_credit_date} />
+            </DetailItem>
+          </DetailsMenu>
+        </Col>
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
+            <DetailItem
+              label={intl.get('vendor_credit.drawer.label_credits_remaining')}
+            >
+              <strong>{vendorCredit.formatted_credits_remaining}</strong>
+            </DetailItem>
+            <DetailItem
+              label={intl.get('reference')}
+              children={defaultTo(vendorCredit.reference_no, '-')}
+            />
+            <DetailItem
+              label={intl.get('note')}
+              children={defaultTo(vendorCredit.note, '-')}
+            />
+            <DetailItem
+              label={<T id={'vendor_credit.drawer.label_created_at'} />}
+              children={<FormatDate value={vendorCredit.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
   );
 }
+
+const StatusItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+`;
+
+const AmountItem = styled(DetailItem)`
+  width: 50%;
+`;

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js

@@ -1,24 +1,17 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { Card } from 'components';
+import { CommercialDocBox } from 'components';
 
-import VendorCreditDetailActionsBar from './VendorCreditDetailActionsBar';
 import VendorCreditDetailHeader from './VendorCreditDetailHeader';
 import VendorCreditDetailTable from './VendorCreditDetailTable';
 import VendorCreditDetailDrawerFooter from './VendorCreditDetailDrawerFooter';
 
-import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
-
 export default function VendorCreditDetailPanel() {
   return (
-    <div className={clsx(VendorCreditDetailCls.detail_panel)}>
-      <VendorCreditDetailActionsBar />
-      <Card>
-        <VendorCreditDetailHeader />
-        <VendorCreditDetailTable />
-        <VendorCreditDetailDrawerFooter />
-      </Card>
-    </div>
+    <CommercialDocBox>
+      <VendorCreditDetailHeader />
+      <VendorCreditDetailTable />
+      {/* <VendorCreditDetailDrawerFooter /> */}
+    </CommercialDocBox>
   );
 }

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailTable.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { DataTable } from 'components';
+import { CommercialDocEntriesTable } from 'components';
+
 import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
-
 import { useVendorCreditReadonlyEntriesTableColumns } from './utils';
 
-import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
+import { TableStyle } from '../../../common';
 
 /**
  * Vendor Credit detail table.
@@ -20,12 +19,10 @@ export default function VendorCreditDetailTable() {
   const columns = useVendorCreditReadonlyEntriesTableColumns();
 
   return (
-    <div className={clsx(VendorCreditDetailCls.detail_panel_table)}>
-      <DataTable
-        columns={columns}
-        data={entries}
-        className={'table-constrant'}
-      />
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={entries}
+      styleName={TableStyle.Constrant}
+    />
   );
 }

src/containers/Drawers/VendorCreditDetailDrawer/utils.js

@@ -7,11 +7,14 @@ import {
   Position,
   MenuItem,
   Menu,
+  Tag,
+  Intent,
 } from '@blueprintjs/core';
 import {
-  FormatNumberCell,
   Icon,
   FormattedMessage as T,
+  FormatNumberCell,
+  Choose,
 } from '../../../components';
 
 /**
@@ -61,6 +64,10 @@ export const useVendorCreditReadonlyEntriesTableColumns = () =>
     [],
   );
 
+/**
+ * Vendor note more actions menu.
+ * @returns {React.JSX}
+ */
 export const VendorCreditMenuItem = ({ payload: { onReconcile } }) => {
   return (
     <Popover
@@ -83,3 +90,31 @@ export const VendorCreditMenuItem = ({ payload: { onReconcile } }) => {
     </Popover>
   );
 };
+
+/**
+ * Vendor Credit details status.
+ * @returns {React.JSX}
+ */
+export function VendorCreditDetailsStatus({ vendorCredit }) {
+  return (
+    <Choose>
+      <Choose.When condition={vendorCredit.is_open}>
+        <Tag intent={Intent.WARNING} round={true}>
+          <T id={'open'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.When condition={vendorCredit.is_closed}>
+        <Tag intent={Intent.SUCCESS} round={true}>
+          <T id={'closed'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.When condition={vendorCredit.is_draft}>
+        <Tag intent={Intent.NONE} round={true} minimal={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.When>
+    </Choose>
+  );
+}