fix(webapp): cancel the written-off invoice

packages/webapp/src/containers/Dialogs/BadDebtDialog/BadDebtForm.tsx

@@ -32,13 +32,12 @@ function BadDebtForm({
   // #withCurrentOrganization
   organization: { base_currency },
 }) {
-  const { invoice, dialogName, createBadDebtMutate, cancelBadDebtMutate } =
+  const { invoice, dialogName, createBadDebtMutate } = useBadDebtContext();
-    useBadDebtContext();
 
   // Initial form values
   const initialValues = {
     ...defaultInitialValues,
-    amount: invoice.due_amount,
+    amount: invoice?.due_amount || '',
   };
 
   // Handles the form submit.
@@ -67,7 +66,7 @@ function BadDebtForm({
       }
       setSubmitting(false);
     };
-    createBadDebtMutate([invoice.id, form]).then(onSuccess).catch(onError);
+    createBadDebtMutate([invoice?.id, form]).then(onSuccess).catch(onError);
   };
 
   return (

packages/webapp/src/containers/Dialogs/BadDebtDialog/BadDebtFormFields.tsx

@@ -5,6 +5,7 @@ import {
   FMoneyInputGroup,
   FTextArea,
   FormattedMessage as T,
+  FFormGroup,
 } from '@/components';
 
 import { useAutofocus } from '@/hooks';
@@ -53,7 +54,7 @@ function BadDebtFormFields() {
         fill
       >
         <ControlGroup>
-          <InputPrependText text={invoice.currency_code} />
+          <InputPrependText text={invoice?.currency_code || ''} />
           <FMoneyInputGroup
             name={'amount'}
             minimal={true}
@@ -73,6 +74,7 @@ function BadDebtFormFields() {
           name={'expense_account_id'}
           items={accounts}
           filterByTypes={[ACCOUNT_TYPE.EXPENSE]}
+          fill
         />
       </FFormGroup>
 

packages/webapp/src/containers/Dialogs/BadDebtDialog/index.tsx

@@ -16,7 +16,7 @@ function BadDebtDialog({ dialogName, payload: { invoiceId = null }, isOpen }) {
       name={dialogName}
       title={<T id={'bad_debt.dialog.bad_debt'} />}
       isOpen={isOpen}
-      canEscapeJeyClose={true}
+      canEscapeKeyClose={true}
       autoFocus={true}
       className={'dialog--bad-debt'}
     >

packages/webapp/src/hooks/query/invoices.tsx

@@ -341,7 +341,7 @@ export function useCancelBadDebt(props) {
   const apiRequest = useApiRequest();
 
   return useMutation(
-    (id) => apiRequest.post(`sale-invoices/${id}/writeoff/cancel`),
+    (id) => apiRequest.post(`sale-invoices/${id}/cancel-writeoff`),
     {
       onSuccess: (res, id) => {
         // Invalidate