feat(customer): add customer opening balance dialog.

src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.js

@@ -19,9 +19,11 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { useCustomerDetailsDrawerContext } from './CustomerDetailsDrawerProvider';
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { Can, Icon, FormattedMessage as T } from 'components';
+import { CustomerMoreMenuItem } from './utils';
 import {
   AbilitySubject,
   SaleInvoiceAction,
@@ -36,6 +38,9 @@ import { compose } from 'utils';
  * Customer details actions bar.
  */
 function CustomerDetailsActionsBar({
+  // #withDialogActions
+  openDialog,
+
   // #withAlertsActions
   openAlert,
 
@@ -75,6 +80,10 @@ function CustomerDetailsActionsBar({
     closeDrawer('customer-details-drawer');
   };
 
+  const handleEditOpeningBalance = () => {
+    openDialog('customer-opening-balance', { customerId });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -141,6 +150,12 @@ function CustomerDetailsActionsBar({
             onClick={handleDeleteCustomer}
           />
         </Can>
+        <NavbarDivider />
+        <CustomerMoreMenuItem
+          payload={{
+            onEditOpeningBalance: handleEditOpeningBalance,
+          }}
+        />
       </NavbarGroup>
     </DashboardActionsBar>
   );
@@ -149,4 +164,5 @@ function CustomerDetailsActionsBar({
 export default compose(
   withDrawerActions,
   withAlertsActions,
+  withDialogActions,
 )(CustomerDetailsActionsBar);

src/containers/Drawers/CustomerDetailsDrawer/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';
+
+/**
+ *  Customer more actions menu items.
+ * @returns
+ */
+export function CustomerMoreMenuItem({ payload: { onEditOpeningBalance } }) {
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={
+        <Menu>
+          <MenuItem
+            text={<T id={'customer.drawer.action.edit_opending_balance'} />}
+            onClick={onEditOpeningBalance}
+          />
+        </Menu>
+      }
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+}