Merge pull request #304 from ANasouf/BIG-53-Add-approve-reject-buttons-on-action-bar-of-the-estimate-details-drawer

feat(webapp): add approve/reject to action bar of estimate details dr…

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}

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,7 +54,25 @@ export function EstimateDetailsStatus({ estimate }) {
   );
 }
 
-export function EstimateMoreMenuItems({ payload: { onNotifyViaSMS } }) {
+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}
@@ -59,6 +82,47 @@ export function EstimateMoreMenuItems({ payload: { onNotifyViaSMS } }) {
               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}
@@ -70,4 +134,5 @@ export function EstimateMoreMenuItems({ payload: { onNotifyViaSMS } }) {
         <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
       </Popover>
     );
-}
+  },
+);