feat(webapp): add mark as delivered to action bar of invoice details drawer

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