feat: add Bad-debt & cancel bad-bebt.

src/containers/Drawers/InvoiceDetailDrawer/BadDebtMenuItem.js

@@ -1,70 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  NavbarGroup,
-  Classes,
-  NavbarDivider,
-  Popover,
-  PopoverInteractionKind,
-  Position,
-  Intent,
-  MenuItem,
-  Menu,
-} from '@blueprintjs/core';
-import { If, Icon, FormattedMessage as T } from 'components';
-import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withAlertsActions from 'containers/Alert/withAlertActions';
-
-import { compose } from 'utils';
-
-function BadDebtMenuItem({
-  // #withDialogActions
-  openDialog,
-
-  // #withAlertsActions
-  openAlert,
-}) {
-  // Invoice detail drawer context.
-  const { invoiceId, invoice } = useInvoiceDetailDrawerContext();
-
-  const handleBadDebtInvoiceDialog = () => {
-    openDialog('invoice-bad-debt', { invoiceId });
-  };
-
-  const handleBadDebtInvoiceAlert = () => {
-    openAlert('bad-debt', { invoiceId });
-  };
-
-  return (
-    <Popover
-      content={
-        <Menu>
-          <If condition={invoice.is_writtenoff}>
-            <MenuItem
-              text={<T id={'badDebt.label_cancel_bad_debt'} />}
-              onClick={handleBadDebtInvoiceAlert}
-            />
-          </If>
-          <MenuItem
-            text={
-              <T id={'badDebt.label'} onClick={handleBadDebtInvoiceDialog} />
-            }
-          />
-        </Menu>
-      }
-      minimal={true}
-      interactionKind={PopoverInteractionKind.CLICK}
-      position={Position.BOTTOM_LEFT}
-      canOutsideClickClose={false}
-      usePortal={false}
-      modifiers={{
-        offset: { offset: '0, 4' },
-      }}
-    >
-      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
-    </Popover>
-  );
-}
-export default compose(withDialogActions, withAlertsActions)(BadDebtMenuItem);

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js

@@ -30,11 +30,11 @@ export default function InvoiceDetail() {
           id={'journal_entries'}
           panel={<JournalEntriesTable transactions={transactions} />}
         />
-        <Tab
+        {/* <Tab
           title={intl.get('payment_transactions')}
           id={'payment_transactions'}
           // panel={}
-        />
+        /> */}
       </DrawerMainTabs>
     </div>
   );

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js

@@ -31,7 +31,7 @@ import {
 
 import { compose } from 'utils';
 
-import BadDebtMenuItem from './BadDebtMenuItem';
+import { BadDebtMenuItem } from './utils';
 
 /**
  * Invoice details action bar.
@@ -71,12 +71,15 @@ function InvoiceDetailActionsBar({
   const handleQuickPaymentInvoice = () => {
     openDialog('quick-payment-receive', { invoiceId });
   };
-  const handleBadDebtInvoiceDialog = () => () => {
-    openDialog('invoice-bad-debt', { invoiceId });
+
+  // Handle write-off invoice.
+  const handleBadDebtInvoice = () => {
+    openDialog('write-off-bad-debt', { invoiceId });
   };
 
-  const handleBadDebtInvoiceAlert = () => {
-    openAlert('bad-debt', { invoiceId });
+  // Handle cancele write-off invoice.
+  const handleCancelBadDebtInvoice = () => {
+    openAlert('cancel-bad-debt', { invoiceId });
   };
 
   return (
@@ -112,7 +115,11 @@ function InvoiceDetailActionsBar({
           onClick={handleDeleteInvoice}
         />
         <NavbarDivider />
-        <BadDebtMenuItem />
+        <BadDebtMenuItem
+          invoice={invoice}
+          onAlert={handleCancelBadDebtInvoice}
+          onDialog={handleBadDebtInvoice}
+        />
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/InvoiceDetailDrawer/utils.js

@@ -1,5 +1,15 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+
+import {
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  MenuItem,
+  Menu,
+} from '@blueprintjs/core';
+import { If, Icon, FormattedMessage as T, Choose } from 'components';
 import { FormatNumberCell } from '../../../components';
 
 /**
@@ -48,3 +58,34 @@ export const useInvoiceReadonlyEntriesColumns = () =>
     ],
     [],
   );
+
+export const BadDebtMenuItem = ({ invoice, onDialog, onAlert }) => {
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={
+        <Menu>
+          <Choose>
+            <Choose.When condition={!invoice.is_writtenoff}>
+              <MenuItem text={<T id={'badDebt.label'} />} onClick={onDialog} />
+            </Choose.When>
+            <Choose.When condition={invoice.is_writtenoff}>
+              <MenuItem
+                onClick={onAlert}
+                text={<T id={'badDebt.label_cancel_bad_debt'} />}
+              />
+            </Choose.When>
+          </Choose>
+        </Menu>
+      }
+      position={Position.BOTTOM}
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+};