Merge pull request #304 from ANasouf/BIG-53-Add-approve-reject-button…

…s-on-action-bar-of-the-estimate-details-drawer feat(webapp): add approve/reject to action bar of estimate details dr…
bigcapitalhq · Jan 9, 2024 · 66ba4d3 · 66ba4d3
2 parents 83e48cc + 46d25df
commit 66ba4d3
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 26 deletions.
diff --git a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx
@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import {
@@ -22,6 +21,7 @@ import {
   Icon,
   FormattedMessage as T,
   Can,
+  Choose,
 } from '@/components';
 
 import { compose } from '@/utils';
@@ -52,7 +52,6 @@ function EstimateDetailActionsBar({
     history.push(`/estimates/${estimateId}/edit`);
     closeDrawer(DRAWERS.ESTIMATE_DETAILS);
   };
-
   // Handle delete sale estimate.
   const handleDeleteEstimate = () => {
     openAlert('estimate-delete', { estimateId });
@@ -83,6 +82,7 @@ function EstimateDetailActionsBar({
           />
           <NavbarDivider />
         </Can>
+
         <Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
           <Button
             className={Classes.MINIMAL}

diff --git a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/components.tsx b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/components.tsx
@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import {
   Intent,
   Button,
@@ -9,9 +8,15 @@ import {
   MenuItem,
   Menu,
   Tag,
+  MenuDivider,
+  Classes,
 } from '@blueprintjs/core';
+import * as R from 'ramda';
 
-import { Icon, T, Choose } from '@/components';
+import { Icon, T, Choose, Can } from '@/components';
+import { AbilitySubject, SaleEstimateAction } from '@/constants/abilityOption';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 
 /**
  * Estimate details status.
@@ -49,25 +54,85 @@ export function EstimateDetailsStatus({ estimate }) {
   );
 }
 
-export function EstimateMoreMenuItems({ payload: { onNotifyViaSMS } }) {
-  return (
-    <Popover
-      minimal={true}
-      content={
-        <Menu>
-          <MenuItem
-            onClick={onNotifyViaSMS}
-            text={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
-          />
-        </Menu>
-      }
-      interactionKind={PopoverInteractionKind.CLICK}
-      position={Position.BOTTOM_LEFT}
-      modifiers={{
-        offset: { offset: '0, 4' },
-      }}
-    >
-      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
-    </Popover>
-  );
-}
+export const EstimateMoreMenuItems = R.compose(withAlertsActions)(
+  ({
+    // # withAlertsActions,
+    openAlert,
+
+    // # rest
+    payload: { onNotifyViaSMS },
+  }) => {
+    const { estimateId, estimate } = useEstimateDetailDrawerContext();
+
+    // Handle cancel/confirm estimate approve.
+    const handleApproveEstimate = () => {
+      openAlert('estimate-Approve', { estimateId });
+    };
+    // Handle cancel/confirm estimate reject.
+    const handleRejectEstimate = () => {
+      openAlert('estimate-reject', { estimateId });
+    };
+
+    return (
+      <Popover
+        minimal={true}
+        content={
+          <Menu>
+            <MenuItem
+              onClick={onNotifyViaSMS}
+              text={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
+            />
+            <MenuDivider />
+            <Choose>
+              <Choose.When
+                condition={estimate.is_delivered && estimate.is_rejected}
+              >
+                <Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
+                  <MenuItem
+                    className={Classes.MINIMAL}
+                    text={<T id={'mark_as_approved'} />}
+                    onClick={handleApproveEstimate}
+                  />
+                </Can>
+              </Choose.When>
+              <Choose.When
+                condition={estimate.is_delivered && estimate.is_approved}
+              >
+                <Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
+                  <MenuItem
+                    className={Classes.MINIMAL}
+                    text={<T id={'mark_as_rejected'} />}
+                    onClick={handleRejectEstimate}
+                  />
+                </Can>
+              </Choose.When>
+              <Choose.When condition={estimate.is_delivered}>
+                <Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
+                  <MenuItem
+                    className={Classes.MINIMAL}
+                    text={<T id={'mark_as_approved'} />}
+                    onClick={handleApproveEstimate}
+                  />
+                </Can>
+                <Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
+                  <MenuItem
+                    className={Classes.MINIMAL}
+                    text={<T id={'mark_as_rejected'} />}
+                    onClick={handleRejectEstimate}
+                  />
+                </Can>
+              </Choose.When>
+            </Choose>
+          </Menu>
+        }
+        interactionKind={PopoverInteractionKind.CLICK}
+        position={Position.BOTTOM_LEFT}
+        modifiers={{
+          offset: { offset: '0, 4' },
+        }}
+      >
+        <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+      </Popover>
+    );
+  },
+);