Merge branch 'feature/BadDebt'

src/containers/Drawers/BillDrawer/BillDrawerDetails.js

@@ -38,6 +38,11 @@ export default function BillDrawerDetails() {
           id={'landed_cost'}
           panel={<LocatedLandedCostTable />}
         />
+        {/* <Tab
+          title={intl.get('payment_transactions')}
+          id={'payment_transactions'}
+          // panel={}
+        /> */}
       </DrawerMainTabs>
     </div>
   );

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js

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

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js

@@ -6,20 +6,33 @@ import {
   NavbarGroup,
   Classes,
   NavbarDivider,
+  Popover,
+  PopoverInteractionKind,
+  Position,
   Intent,
+  MenuItem,
+  Menu,
 } from '@blueprintjs/core';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
+import { moreVertOptions } from '../../../common/moreVertOptions';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { If, Icon, FormattedMessage as T } from 'components';
+import {
+  If,
+  Icon,
+  FormattedMessage as T,
+  // MoreVertMenutItems,
+} from 'components';
 
 import { compose } from 'utils';
 
+import { BadDebtMenuItem } from './utils';
+
 /**
  * Invoice details action bar.
  */
@@ -59,6 +72,16 @@ function InvoiceDetailActionsBar({
     openDialog('quick-payment-receive', { invoiceId });
   };
 
+  // Handle write-off invoice.
+  const handleBadDebtInvoice = () => {
+    openDialog('write-off-bad-debt', { invoiceId });
+  };
+
+  // Handle cancele write-off invoice.
+  const handleCancelBadDebtInvoice = () => {
+    openAlert('cancel-bad-debt', { invoiceId });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -91,6 +114,12 @@ function InvoiceDetailActionsBar({
           intent={Intent.DANGER}
           onClick={handleDeleteInvoice}
         />
+        <NavbarDivider />
+        <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,37 @@ 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={'bad_debt.dialog.bad_debt'} />}
+                onClick={onDialog}
+              />
+            </Choose.When>
+            <Choose.When condition={invoice.is_writtenoff}>
+              <MenuItem
+                onClick={onAlert}
+                text={<T id={'bad_debt.dialog.cancel_bad_debt'} />}
+              />
+            </Choose.When>
+          </Choose>
+        </Menu>
+      }
+      position={Position.BOTTOM}
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+};