Merge pull request #158 from bigcapitalhq/abouhuolia/big-26-add-inven…

…tory-adjustment-option-to-the-item-drawer

feat(webapp): add Inventory Adjustment option to the item drawer

packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.tsx

@@ -21,6 +21,7 @@ import {
   FormattedMessage as T,
   Can,
 } from '@/components';
+import { ItemDetailActionsMoreBtn } from './ItemDetailActionsMoreBtn';
 
 import { compose } from '@/utils';
 import { DRAWERS } from '@/constants/drawers';
@@ -72,6 +73,7 @@ function ItemDetailActionsBar({
             onClick={handleDeleteItem}
           />
         </Can>
+        <ItemDetailActionsMoreBtn />
       </NavbarGroup>
     </DashboardActionsBar>
   );

packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsMoreBtn.tsx

@@ -0,0 +1,64 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import { Can, Icon, T } from '@/components';
+import {
+  Button,
+  Menu,
+  MenuItem,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import {
+  AbilitySubject,
+  InventoryAdjustmentAction,
+} from '@/constants/abilityOption';
+import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+/**
+ * Invoice details more actions menu.
+ * @returns {React.JSX}
+ */
+export const ItemDetailActionsMoreBtn = R.compose(withDialogActions)(
+  ({
+    //#withDialogActions,
+    openDialog,
+  }) => {
+    const { itemId, item } = useItemDetailDrawerContext();
+
+    // Cannot continue if the item type is not inventory.
+    if (item.type !== 'inventory') return null;
+
+    const handleInventoryAdjustment = () => {
+      openDialog('inventory-adjustment', { itemId });
+    };
+
+    return (
+      <Popover
+        minimal={true}
+        interactionKind={PopoverInteractionKind.CLICK}
+        position={Position.BOTTOM_LEFT}
+        modifiers={{
+          offset: { offset: '0, 4' },
+        }}
+        content={
+          <Menu>
+            <Can
+              I={InventoryAdjustmentAction.Edit}
+              a={AbilitySubject.InventoryAdjustment}
+            >
+              <MenuItem
+                text={<T id={'item.view_drawer.make_adjustment'} />}
+                onClick={handleInventoryAdjustment}
+              />
+            </Can>
+          </Menu>
+        }
+      >
+        <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+      </Popover>
+    );
+  },
+);