feat(webapp): edit bank rule

packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormBoot.tsx

@@ -7,6 +7,8 @@ interface RuleFormBootValues {
   bankRule?: null;
   bankRuleId?: null;
   isBankRuleLoading: boolean;
+  isEditMode: boolean;
+  isNewMode: boolean;
 }
 
 const RuleFormBootContext = createContext<RuleFormBootValues>(
@@ -27,11 +29,17 @@ function RuleFormBoot({ bankRuleId, ...props }: RuleFormBootProps) {
   );
   const { data: accounts, isLoading: isAccountsLoading } = useAccounts({}, {});
 
+  const isNewMode = !bankRuleId;
+  const isEditMode = !isNewMode;
+
   const provider = {
+    bankRuleId,
     bankRule,
     accounts,
     isBankRuleLoading,
     isAccountsLoading,
+    isEditMode,
+    isNewMode,
   } as RuleFormBootValues;
 
   const isLoading = isBankRuleLoading || isAccountsLoading;

packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContentForm.tsx

@@ -14,7 +14,7 @@ import {
   Group,
   Stack,
 } from '@/components';
-import { useCreateBankRule } from '@/hooks/query/bank-rules';
+import { useCreateBankRule, useEditBankRule } from '@/hooks/query/bank-rules';
 import {
   AssignTransactionTypeOptions,
   FieldCondition,
@@ -24,7 +24,11 @@ import {
   initialValues,
 } from './_utils';
 import { useRuleFormDialogBoot } from './RuleFormBoot';
-import { transfromToSnakeCase } from '@/utils';
+import {
+  transformToCamelCase,
+  transformToForm,
+  transfromToSnakeCase,
+} from '@/utils';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';
 
@@ -33,42 +37,53 @@ function RuleFormContentFormRoot({
   openDialog,
   closeDialog,
 }) {
-  const { accounts } = useRuleFormDialogBoot();
+  const { accounts, bankRule, isEditMode, bankRuleId } =
+    useRuleFormDialogBoot();
   const { mutateAsync: createBankRule } = useCreateBankRule();
+  const { mutateAsync: editBankRule } = useEditBankRule();
 
   const validationSchema = CreateRuleFormSchema;
 
+  const _initialValues = {
+    ...initialValues,
+    ...transformToForm(transformToCamelCase(bankRule), initialValues),
+  };
+
   // Handles the form submitting.
   const handleSubmit = (
     values: RuleFormValues,
     { setSubmitting }: FormikHelpers<RuleFormValues>,
   ) => {
-    const _value = transfromToSnakeCase(values);
+    const _values = transfromToSnakeCase(values);
-
     setSubmitting(true);
-    createBankRule(_value)
-      .then(() => {
-        setSubmitting(false);
-        closeDialog(DialogsName.BankRuleForm);
 
-        AppToaster.show({
+    const handleSuccess = () => {
-          intent: Intent.SUCCESS,
+      setSubmitting(false);
-          message: 'The bank rule has been created successfully.',
+      closeDialog(DialogsName.BankRuleForm);
-        });
+      AppToaster.show({
-      })
+        intent: Intent.SUCCESS,
-      .catch((error) => {
+        message: 'The bank rule has been created successfully.',
-        setSubmitting(false);
-
-        AppToaster.show({
-          intent: Intent.DANGER,
-          message: 'Something went wrong!',
-        });
       });
+    };
+    const handleError = (error) => {
+      setSubmitting(false);
+      AppToaster.show({
+        intent: Intent.DANGER,
+        message: 'Something went wrong!',
+      });
+    };
+    if (isEditMode) {
+      editBankRule([bankRuleId, _values])
+        .then(handleSuccess)
+        .catch(handleError);
+    } else {
+      createBankRule(_values).then(handleSuccess).catch(handleError);
+    }
   };
 
   return (
     <Formik<RuleFormValues>
-      initialValues={initialValues}
+      initialValues={_initialValues}
       validationSchema={validationSchema}
       onSubmit={handleSubmit}
     >

packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormDialog.tsx

@@ -16,8 +16,8 @@ function RuleFormDialogRoot({
 }) {
   return (
     <Dialog
-      name={dialogName}f
+      name={dialogName}
-      title={'New Bank Rule'}
+      title={bankRuleId ? 'Edit Bank Rule' : 'New Bank Rule'}
       isOpen={isOpen}
       canEscapeJeyClose={true}
       autoFocus={true}

packages/webapp/src/containers/Banking/Rules/RulesList/RulesTable.tsx

@@ -16,6 +16,7 @@ import { useBankRulesTableColumns } from './hooks';
 import { BankRulesTableActionsMenu } from './_components';
 import { BankRulesLandingEmptyState } from './BankRulesLandingEmptyState';
 import { useRulesListBoot } from './RulesListBoot';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Invoices datatable.
@@ -41,7 +42,9 @@ function RulesTable({
   };
 
   // Handle delete bank rule.
-  const handleEditBankRule = () => {};
+  const handleEditBankRule = ({ id }) => {
+    openDialog(DialogsName.BankRuleForm, { bankRuleId: id });
+  };
 
   const isEmptyState = false;
 

packages/webapp/src/hooks/query/bank-rules.ts

@@ -21,12 +21,15 @@ export function useEditBankRule(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
-  return useMutation((id: number) => apiRequest.post(`/bank-rules/${id}`), {
+  return useMutation(
-    onSuccess: (res, id) => {
+    ([id, values]) => apiRequest.post(`/banking/rules/${id}`, values),
-      // Invalidate queries.
+    {
+      onSuccess: (res, id) => {
+        // Invalidate queries.
+      },
+      ...props,
     },
-    ...props,
+  );
-  });
 }
 
 export function useDeleteBankRule(props) {