feat: optimize style of invoice details.

feat: optimize style of credit note details.
feat: optimize global style checkbox  of the application.

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js

@@ -1,38 +1,51 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
+import styled from 'styled-components';
 import intl from 'react-intl-universal';
-import { DrawerMainTabs } from 'components';
 
+import { DrawerMainTabs } from 'components';
+import CreditNoteDetailActionsBar from './CreditNoteDetailActionsBar';
 import CreditNoteDetailPanel from './CreditNoteDetailPanel';
 import RefundCreditNoteTransactionsTable from './RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable';
 import ReconcileCreditNoteTransactionsTable from './ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable';
-import clsx from 'classnames';
-
-import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
 
 /**
  * Credit Note view detail.
+ * @returns {React.JSX}
  */
 export default function CreditNoteDetail() {
   return (
-    <div className={clsx(CreditNoteDetailCls.root)}>
-      <DrawerMainTabs>
-        <Tab
-          title={intl.get('details')}
-          id={'details'}
-          panel={<CreditNoteDetailPanel />}
-        />
-        <Tab
-          title={intl.get('credit_note.drawer.label_refund_transactions')}
-          id={'refund_transactions'}
-          panel={<RefundCreditNoteTransactionsTable />}
-        />
-        <Tab
-          title={intl.get('credit_note.drawer.label_invoices_reconciled')}
-          id={'reconcile_transactions'}
-          panel={<ReconcileCreditNoteTransactionsTable />}
-        />
-      </DrawerMainTabs>
-    </div>
+    <CreditNoteRoot>
+      <CreditNoteDetailActionsBar />
+      <CreditNoteDetailsTabs />
+    </CreditNoteRoot>
   );
 }
+
+/**
+ * Credit note details tabs.
+ * @returns {React.JSX}
+ */
+function CreditNoteDetailsTabs() {
+  return (
+    <DrawerMainTabs>
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<CreditNoteDetailPanel />}
+      />
+      <Tab
+        title={intl.get('credit_note.drawer.label_refund_transactions')}
+        id={'refund_transactions'}
+        panel={<RefundCreditNoteTransactionsTable />}
+      />
+      <Tab
+        title={intl.get('credit_note.drawer.label_invoices_reconciled')}
+        id={'reconcile_transactions'}
+        panel={<ReconcileCreditNoteTransactionsTable />}
+      />
+    </DrawerMainTabs>
+  );
+}
+
+const CreditNoteRoot = styled.div``;

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-
 import {
   Button,
   NavbarGroup,
@@ -8,17 +7,17 @@ import {
   NavbarDivider,
   Intent,
 } from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
 import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
-import { CreditNoteMenuItem } from './utils';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T, If, Can } from 'components';
+import { DrawerActionsBar, Icon, FormattedMessage as T, If } from 'components';
 
 import { compose } from 'utils';
+import { CreditNoteMenuItem } from './utils';
 
 /**
  * Credit note detail actions bar.
@@ -57,7 +56,7 @@ function CreditNoteDetailActionsBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Button
           className={Classes.MINIMAL}
@@ -69,7 +68,7 @@ function CreditNoteDetailActionsBar({
         <If condition={!creditNote.is_closed && !creditNote.is_draft}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon="quick-payment-16" iconSize={16} />}
+            icon={<Icon icon="arrow-upward" iconSize={18} />}
             text={<T id={'refund'} />}
             onClick={handleRefundCreditNote}
           />
@@ -82,13 +81,7 @@ function CreditNoteDetailActionsBar({
           intent={Intent.DANGER}
           onClick={handleDeleteCreditNote}
         />
-        <If
-          condition={
-            !creditNote.is_draft &&
-            !creditNote.is_closed
-            // creditNote.is_published
-          }
-        >
+        <If condition={creditNote.is_published && !creditNote.is_closed}>
           <NavbarDivider />
           <CreditNoteMenuItem
             payload={{
@@ -97,7 +90,7 @@ function CreditNoteDetailActionsBar({
           />
         </If>
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js

@@ -67,7 +67,9 @@ function CreditNoteDetailDrawerProvider({ creditNoteId, ...props }) {
     >
       <DrawerHeaderContent
         name="credit-note-detail-drawer"
-        title={intl.get('credit_note.drawer_credit_note_detail')}
+        title={intl.get('credit_note.drawer_credit_note_detail', {
+          creditNumber: creditNote.credit_note_number,
+        })}
       />
       <CreditNoteDetailDrawerContext.Provider value={provider} {...props} />
     </DrawerLoading>

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js

@@ -1,12 +1,22 @@
 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 { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
 
-import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
+import { CreditNoteDetailsStatus } from './utils';
 
 /**
  * Credit note details drawer header.
@@ -15,46 +25,76 @@ export default function CreditNoteDetailHeader() {
   const { creditNote } = useCreditNoteDetailDrawerContext();
 
   return (
-    <div className={clsx(CreditNoteDetailCls.detail_panel_header)}>
-      <DetailsMenu>
-        <DetailItem label={intl.get('amount')}>
-          <span class="big-number">{creditNote.formatted_amount}</span>
-        </DetailItem>
-        <DetailItem
-          label={intl.get('credit_note.drawer.label_credit_note_no')}
-          children={defaultTo(creditNote.credit_note_number, '-')}
-        />
-        <DetailItem
-          label={intl.get('customer_name')}
-          children={creditNote.customer?.display_name}
-        />
-        <DetailItem
-          label={intl.get('credit_note.drawer.label_credit_note_date')}
-          children={
-            <FormatDate value={creditNote.formatted_credit_note_date} />
-          }
-        />
-        <DetailItem
-          label={intl.get('credit_note.drawer.label_credits_remaining')}
-          children={creditNote.formatted_credits_remaining}
-        />
-      </DetailsMenu>
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <AmountItem label={intl.get('amount')}>
+            <span class="big-number">{creditNote.formatted_amount}</span>
+          </AmountItem>
 
-      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
-        <DetailItem
-          label={intl.get('reference')}
-          children={creditNote.reference_no}
-        />
-        <DetailItem
-          label={intl.get('note')}
-          children={defaultTo(creditNote.note, '-')}
-        />
+          <StatusItem>
+            <CreditNoteDetailsStatus creditNote={creditNote} />
+          </StatusItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
 
-        <DetailItem
-          label={<T id={'credit_note.drawer.label_created_at'} />}
-          children={<FormatDate value={creditNote.created_at} />}
-        />
-      </DetailsMenu>
-    </div>
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('credit_note.drawer.label_credit_note_no')}
+            >
+              {defaultTo(creditNote.credit_note_number, '-')}
+            </DetailItem>
+
+            <DetailItem label={intl.get('customer_name')}>
+              <ButtonLink>{creditNote.customer?.display_name}</ButtonLink>
+            </DetailItem>
+
+            <DetailItem
+              label={intl.get('credit_note.drawer.label_credit_note_date')}
+            >
+              <FormatDate value={creditNote.formatted_credit_note_date} />
+            </DetailItem>
+          </DetailsMenu>
+        </Col>
+
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
+            <DetailItem
+              label={intl.get('credit_note.drawer.label_credits_remaining')}
+            >
+              <strong>{creditNote.formatted_credits_remaining}</strong>
+            </DetailItem>
+            <DetailItem
+              label={intl.get('reference')}
+              children={defaultTo(creditNote.reference_no, '-')}
+            />
+            <DetailItem
+              label={intl.get('note')}
+              children={defaultTo(creditNote.note, '-')}
+            />
+
+            <DetailItem
+              label={<T id={'credit_note.drawer.label_created_at'} />}
+              children={<FormatDate value={creditNote.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
   );
 }
+
+const StatusItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+`;
+
+const AmountItem = styled(DetailItem)`
+  width: 50%;
+`;

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js

@@ -1,24 +1,20 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { Card } from 'components';
+import { CommercialDocBox } from 'components';
 
-import CreditNoteDetailActionsBar from './CreditNoteDetailActionsBar';
 import CreditNoteDetailHeader from './CreditNoteDetailHeader';
 import CreditNoteDetailTable from './CreditNoteDetailTable';
-import CreditNoteDetailDrawerFooter from './CreditNoteDetailDrawerFooter';
-
-import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
+// import CreditNoteDetailDrawerFooter from './CreditNoteDetailDrawerFooter';
 
+/**
+ * Credit note details panel.
+ */
 export default function CreditNoteDetailPanel() {
   return (
-    <div className={clsx(CreditNoteDetailCls.detail_panel)}>
-      <CreditNoteDetailActionsBar />
-      <Card>
-        <CreditNoteDetailHeader />
-        <CreditNoteDetailTable />
-        <CreditNoteDetailDrawerFooter />
-      </Card>
-    </div>
+    <CommercialDocBox>
+      <CreditNoteDetailHeader />
+      <CreditNoteDetailTable />
+      {/* <CreditNoteDetailDrawerFooter /> */}
+    </CommercialDocBox>
   );
 }

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTable.js

@@ -1,15 +1,13 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { DataTable } from 'components';
+import { CommercialDocEntriesTable } from 'components';
+
 import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
-
 import { useCreditNoteReadOnlyEntriesColumns } from './utils';
 
-import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
-
 /**
  * Credit note detail table.
+ * @returns {React.JSX}
  */
 export default function CreditNoteDetailTable() {
   const {
@@ -20,12 +18,10 @@ export default function CreditNoteDetailTable() {
   const columns = useCreditNoteReadOnlyEntriesColumns();
 
   return (
-    <div className={clsx(CreditNoteDetailCls.detail_panel_table)}>
-      <DataTable
-        columns={columns}
-        data={entries}
-        className={'table-constrant'}
-      />
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={entries}
+      className={'table-constrant'}
+    />
   );
 }

src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable.js

@@ -1,12 +1,10 @@
 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 { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
-
 import {
   useReconcileCreditTransactionsTableColumns,
   ActionsMenu,
@@ -21,8 +19,10 @@ function RefundCreditNoteTransactionsTable({
   // #withAlertsActions
   openAlert,
 }) {
+  // Credit note drawer context.
   const { reconcileCreditNotes } = useCreditNoteDetailDrawerContext();
 
+  // Reconcile credit transactions table columns.
   const columns = useReconcileCreditTransactionsTableColumns();
 
   // Handle delete reconile credit.
@@ -39,6 +39,7 @@ function RefundCreditNoteTransactionsTable({
         payload={{
           onDelete: handleDeleteReconcileCreditNote,
         }}
+        styleName={TableStyle.Constrant}
         className={'datatable--refund-transactions'}
       />
     </Card>

src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/components.js

@@ -20,6 +20,9 @@ export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
   );
 }
 
+/**
+ * Credit note reconcilation with invoices table columns.
+ */
 export function useReconcileCreditTransactionsTableColumns() {
   return React.useMemo(
     () => [

src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable.js

@@ -1,8 +1,7 @@
 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 { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
@@ -22,10 +21,10 @@ function RefundCreditNoteTransactionsTable({
 }) {
   const { refundCreditNote } = useCreditNoteDetailDrawerContext();
 
+  // Refund credit transactions table columns.
   const columns = useRefundCreditTransactionsTableColumns();
 
   // Handle delete refund credit.
-
   const handleDeleteRefundCreditNote = ({ id }) => {
     openAlert('refund-credit-delete', { creditNoteId: id });
   };
@@ -36,10 +35,10 @@ function RefundCreditNoteTransactionsTable({
         columns={columns}
         data={refundCreditNote}
         ContextMenu={ActionsMenu}
+        styleName={TableStyle.Constrant}
         payload={{
           onDelete: handleDeleteRefundCreditNote,
         }}
-        className={'datatable--refund-transactions'}
       />
     </Card>
   );

src/containers/Drawers/CreditNoteDetailDrawer/utils.js

@@ -7,11 +7,14 @@ import {
   Position,
   MenuItem,
   Menu,
+  Tag,
+  Intent,
 } from '@blueprintjs/core';
 import {
   Icon,
   FormattedMessage as T,
   FormatNumberCell,
+  Choose,
 } from '../../../components';
 
 export const useCreditNoteReadOnlyEntriesColumns = () =>
@@ -58,7 +61,11 @@ export const useCreditNoteReadOnlyEntriesColumns = () =>
     [],
   );
 
-export const CreditNoteMenuItem = ({ payload: { onReconcile } }) => {
+/**
+ * Credit note more actions mneu.
+ * @returns {React.JSX}
+ */
+export function CreditNoteMenuItem({ payload: { onReconcile } }) {
   return (
     <Popover
       minimal={true}
@@ -79,4 +86,32 @@ export const CreditNoteMenuItem = ({ payload: { onReconcile } }) => {
       <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
     </Popover>
   );
-};
+}
+
+/**
+ * Credit note details status.
+ * @returns {React.JSX}
+ */
+export function CreditNoteDetailsStatus({ creditNote }) {
+  return (
+    <Choose>
+      <Choose.When condition={creditNote.is_open}>
+        <Tag intent={Intent.WARNING} round={true}>
+          <T id={'open'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.When condition={creditNote.is_closed}>
+        <Tag intent={Intent.SUCCESS} round={true}>
+          <T id={'closed'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.When condition={creditNote.is_draft}>
+        <Tag intent={Intent.NONE} round={true} minimal={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.When>
+    </Choose>
+  );
+}