feat(vendor): add vendor opening balance dialog.

src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.js

@@ -19,8 +19,10 @@ import { useVendorDetailsDrawerContext } from './VendorDetailsDrawerProvider';
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { Can, Icon, FormattedMessage as T } from 'components';
+import { VendorMoreMenuItem } from './utils';
 import {
   AbilitySubject,
   SaleInvoiceAction,
@@ -33,13 +35,16 @@ import { safeCallback, compose } from 'utils';
  * Vendor details actions bar.
  */
 function VendorDetailsActionsBar({
+  // #withDialogActions
+  openDialog,
+
   // #withAlertsActions
   openAlert,
 
   // #withDrawerActions
   closeDrawer,
 }) {
-  const { vendor, vendorId } = useVendorDetailsDrawerContext();
+  const { vendorId } = useVendorDetailsDrawerContext();
   const history = useHistory();
 
   // Handle edit vendor.
@@ -63,6 +68,10 @@ function VendorDetailsActionsBar({
     closeDrawer('vendor-details-drawer');
   };
 
+  const handleEditOpeningBalance = () => {
+    openDialog('vendor-opening-balance', { vendorId });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -112,6 +121,12 @@ function VendorDetailsActionsBar({
             onClick={safeCallback(onDeleteContact)}
           />
         </Can>
+        <NavbarDivider />
+        <VendorMoreMenuItem
+          payload={{
+            onEditOpeningBalance: handleEditOpeningBalance,
+          }}
+        />
       </NavbarGroup>
     </DashboardActionsBar>
   );
@@ -120,4 +135,5 @@ function VendorDetailsActionsBar({
 export default compose(
   withDrawerActions,
   withAlertsActions,
+  withDialogActions,
 )(VendorDetailsActionsBar);

src/containers/Drawers/VendorDetailsDrawer/utils.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  MenuItem,
+  Menu,
+} from '@blueprintjs/core';
+import { Icon, FormattedMessage as T } from 'components';
+
+/**
+ * Vendor more actions menu items.
+ * @param {*} param0
+ */
+export function VendorMoreMenuItem({ payload: { onEditOpeningBalance } }) {
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={
+        <Menu>
+          <MenuItem
+            text={<T id={'vendor.drawer.action.edit_opending_balance'} />}
+            onClick={onEditOpeningBalance}
+          />
+        </Menu>
+      }
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+}