feat: wip invoice customizer

packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx

@@ -0,0 +1,3 @@
+export default function EstimateCustomizeContent() {
+  return <h1>Hello World</h1>;
+}

packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawer.tsx

@@ -0,0 +1,33 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import { Drawer, DrawerSuspense } from '@/components';
+import withDrawers from '@/containers/Drawer/withDrawers';
+
+const EstimateCustomizeContent = React.lazy(
+  () => import('./EstimateCustomizeContent'),
+);
+
+/**
+ * Estimate customize drawer.
+ * @returns {React.ReactNode}
+ */
+function EstimateCustomizeDrawerRoot({
+  name,
+
+  // #withDrawer
+  isOpen,
+  payload: {},
+}) {
+  return (
+    <Drawer isOpen={isOpen} name={name} size={'100%'}>
+      <DrawerSuspense>
+        <EstimateCustomizeContent />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export const EstimateCustomizeDrawer = R.compose(withDrawers())(
+  EstimateCustomizeDrawerRoot,
+);

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.tsx

@@ -7,6 +7,11 @@ import {
   NavbarGroup,
   Intent,
   Alignment,
+  Menu,
+  MenuItem,
+  Popover,
+  PopoverInteractionKind,
+  Position,
 } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 
@@ -35,6 +40,8 @@ import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-
 import { SaleEstimateAction, AbilitySubject } from '@/constants/abilityOption';
 import { compose } from '@/utils';
 import { DialogsName } from '@/constants/dialogs';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Estimates list actions bar.
@@ -52,6 +59,9 @@ function EstimateActionsBar({
   // #withDialogActions
   openDialog,
 
+  // #withDrawerActions
+  openDrawer,
+
   // #withSettingsActions
   addSetting,
 }) {
@@ -96,6 +106,10 @@ function EstimateActionsBar({
   const handlePrintBtnClick = () => {
     downloadExportPdf({ resource: 'SaleEstimate' });
   };
+  // Handle customize button clicl.
+  const handleCustomizeBtnClick = () => {
+    openDrawer(DRAWERS.ESTIMATE_CUSTOMIZE);
+  };
 
   return (
     <DashboardActionsBar>
@@ -167,6 +181,25 @@ function EstimateActionsBar({
       </NavbarGroup>
 
       <NavbarGroup align={Alignment.RIGHT}>
+        <Popover
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_RIGHT}
+          modifiers={{
+            offset: { offset: '0, 4' },
+          }}
+          content={
+            <Menu>
+              <MenuItem
+                onClick={handleCustomizeBtnClick}
+                text={'Customize Estimate'}
+              />
+            </Menu>
+          }
+        >
+          <Button icon={<Icon icon="cog-16" iconSize={16} />} minimal={true} />
+        </Popover>
+        <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="refresh-16" iconSize={14} />}
@@ -187,4 +220,5 @@ export default compose(
     estimatesTableSize: estimatesSettings?.tableSize,
   })),
   withDialogActions,
+  withDrawerActions,
 )(EstimateActionsBar);