Merge pull request #361 from ANasouf/BIG-111-add-Convert-to-invoice-button-on-estimate-drawer-toolbar

Big 111 add convert to invoice button on estimate drawer toolbar

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx

@@ -14,14 +14,18 @@ import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
-import { SaleEstimateAction, AbilitySubject } from '@/constants/abilityOption';
+import {
+  SaleEstimateAction,
+  AbilitySubject,
+  SaleInvoiceAction,
+} from '@/constants/abilityOption';
 import { EstimateMoreMenuItems } from './components';
 import {
   DrawerActionsBar,
   Icon,
   FormattedMessage as T,
   Can,
-  Choose,
+  If,
 } from '@/components';
 
 import { compose } from '@/utils';
@@ -42,7 +46,7 @@ function EstimateDetailActionsBar({
   closeDrawer,
 }) {
   // Estimate details drawer context.
-  const { estimateId } = useEstimateDetailDrawerContext();
+  const { estimateId, estimate } = useEstimateDetailDrawerContext();
 
   // History.
   const history = useHistory();
@@ -52,6 +56,15 @@ function EstimateDetailActionsBar({
     history.push(`/estimates/${estimateId}/edit`);
     closeDrawer(DRAWERS.ESTIMATE_DETAILS);
   };
+
+  // Handle convert to invoice.
+  const handleConvertEstimate = () => {
+    history.push(`/invoices/new?from_estimate_id=${estimateId}`, {
+      action: estimateId,
+    });
+    closeDrawer(DRAWERS.ESTIMATE_DETAILS);
+  };
+
   // Handle delete sale estimate.
   const handleDeleteEstimate = () => {
     openAlert('estimate-delete', { estimateId });
@@ -82,7 +95,18 @@ function EstimateDetailActionsBar({
           />
           <NavbarDivider />
         </Can>
-
+        <Can I={SaleInvoiceAction.Create} a={AbilitySubject.Invoice}>
+          <If condition={!estimate.is_converted_to_invoice}>
+            <Button
+              className={Classes.MINIMAL}
+              intent={Intent.SUCCESS}
+              icon={<Icon icon="tick" />}
+              text={<T id={'convert_to_invoice'} />}
+              onClick={handleConvertEstimate}
+            />
+            <NavbarDivider />
+          </If>
+        </Can>
         <Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
           <Button
             className={Classes.MINIMAL}

packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.tsx

@@ -57,6 +57,11 @@ function InvoiceDetailActionsBar({
     closeDrawer(DRAWERS.INVOICE_DETAILS);
   };
 
+  // Hanlde deliver sale invoice.
+  const handleDeliverInvoice = ({ id }) => {
+    openAlert('invoice-deliver', { invoiceId });
+  };
+
   // Handle convert to invoice.
   const handleConvertToCreitNote = () => {
     history.push(`/credit-notes/new?from_invoice_id=${invoiceId}`, {
@@ -153,6 +158,7 @@ function InvoiceDetailActionsBar({
               onCancelBadDebt: handleCancelBadDebtInvoice,
               onNotifyViaSMS: handleNotifyViaSMS,
               onConvert: handleConvertToCreitNote,
+              onDeliver: handleDeliverInvoice,
             }}
           />
         </Can>

packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/utils.tsx

@@ -19,6 +19,7 @@ import {
   FormattedMessage as T,
   Choose,
   Can,
+  If,
   TextOverviewTooltipCell,
 } from '@/components';
 import { SaleInvoiceAction, AbilitySubject } from '@/constants/abilityOption';
@@ -94,7 +95,7 @@ export const useInvoiceReadonlyEntriesColumns = () => {
  * @returns {React.JSX}
  */
 export const BadDebtMenuItem = ({
-  payload: { onCancelBadDebt, onBadDebt, onNotifyViaSMS, onConvert },
+  payload: { onCancelBadDebt, onBadDebt, onNotifyViaSMS, onConvert, onDeliver },
 }) => {
   const { invoice } = useInvoiceDetailDrawerContext();
 
@@ -108,6 +109,12 @@ export const BadDebtMenuItem = ({
       }}
       content={
         <Menu>
+          <If condition={!invoice.is_delivered}>
+            <MenuItem
+              onClick={onDeliver}
+              text={<T id={'mark_as_delivered'} />}
+            />
+          </If>
           <Choose>
             <Choose.When condition={!invoice.is_writtenoff}>
               <MenuItem