feat: auto fill categorize form from recognized transaction

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionBoot.tsx

@@ -6,6 +6,8 @@ import { useAccounts, useBranches } from '@/hooks/query';
 import { useFeatureCan } from '@/hooks/state';
 import { Features } from '@/constants';
 import { Spinner } from '@blueprintjs/core';
+import { useGetRecognizedBankTransaction } from '@/hooks/query/bank-rules';
+import { useCategorizeTransactionTabsBoot } from '@/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabsBoot';
 
 interface CategorizeTransactionBootProps {
   children: React.ReactNode;
@@ -17,6 +19,8 @@ interface CategorizeTransactionBootValue {
   isBranchesLoading: boolean;
   isAccountsLoading: boolean;
   primaryBranch: any;
+  recognizedTranasction: any;
+  isRecognizedTransactionLoading: boolean;
 }
 
 const CategorizeTransactionBootContext =
@@ -30,6 +34,9 @@ const CategorizeTransactionBootContext =
 function CategorizeTransactionBoot({
   ...props
 }: CategorizeTransactionBootProps) {
+  const { uncategorizedTransaction, uncategorizedTransactionId } =
+    useCategorizeTransactionTabsBoot();
+
   // Detarmines whether the feature is enabled.
   const { featureCan } = useFeatureCan();
   const isBranchFeatureCan = featureCan(Features.Branches);
@@ -42,6 +49,14 @@ function CategorizeTransactionBoot({
     {},
     { enabled: isBranchFeatureCan },
   );
+  // Fetches the recognized transaction.
+  const {
+    data: recognizedTranasction,
+    isLoading: isRecognizedTransactionLoading,
+  } = useGetRecognizedBankTransaction(uncategorizedTransactionId, {
+    enabled: !!uncategorizedTransaction.is_recognized,
+  });
+
   // Retrieves the primary branch.
   const primaryBranch = useMemo(
     () => branches?.find((b) => b.primary) || first(branches),
@@ -54,6 +69,8 @@ function CategorizeTransactionBoot({
     isBranchesLoading,
     isAccountsLoading,
     primaryBranch,
+    recognizedTranasction,
+    isRecognizedTransactionLoading,
   };
   const isLoading = isBranchesLoading || isAccountsLoading;
 

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionForm.tsx

@@ -6,16 +6,14 @@ import { CreateCategorizeTransactionSchema } from './CategorizeTransactionForm.s
 import { CategorizeTransactionFormContent } from './CategorizeTransactionFormContent';
 import { CategorizeTransactionFormFooter } from './CategorizeTransactionFormFooter';
 import { useCategorizeTransaction } from '@/hooks/query';
-import { useCategorizeTransactionBoot } from './CategorizeTransactionBoot';
 import {
-  transformToCategorizeForm,
-  defaultInitialValues,
   tranformToRequest,
+  useCategorizeTransactionFormInitialValues,
 } from './_utils';
-import { compose } from '@/utils';
 import { withBankingActions } from '@/containers/CashFlow/withBankingActions';
 import { AppToaster } from '@/components';
 import { useCategorizeTransactionTabsBoot } from '@/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabsBoot';
+import { compose } from '@/utils';
 
 /**
  * Categorize cashflow transaction form dialog content.
@@ -24,11 +22,12 @@ function CategorizeTransactionFormRoot({
   // #withBankingActions
   closeMatchingTransactionAside,
 }) {
-  const { uncategorizedTransactionId, uncategorizedTransaction } =
-    useCategorizeTransactionTabsBoot();
-  const { primaryBranch } = useCategorizeTransactionBoot();
+  const { uncategorizedTransactionId } = useCategorizeTransactionTabsBoot();
   const { mutateAsync: categorizeTransaction } = useCategorizeTransaction();
 
+  // Form initial values in create and edit mode.
+  const initialValues = useCategorizeTransactionFormInitialValues();
+
   // Callbacks handles form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
     const transformedValues = tranformToRequest(values);
@@ -62,19 +61,6 @@ function CategorizeTransactionFormRoot({
         }
       });
   };
-  // Form initial values in create and edit mode.
-  const initialValues = {
-    ...defaultInitialValues,
-    /**
-     * We only care about the fields in the form. Previously unfilled optional
-     * values such as `notes` come back from the API as null, so remove those
-     * as well.
-     */
-    ...transformToCategorizeForm(uncategorizedTransaction),
-
-    /** Assign the primary branch id as default value. */
-    branchId: primaryBranch?.id || null,
-  };
 
   return (
     <DivRoot>

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/MoneyIn/CategorizeTransactionOtherIncome.tsx

@@ -58,7 +58,7 @@ export default function CategorizeTransactionOtherIncome() {
       </FFormGroup>
 
       <FFormGroup name={'referenceNo'} label={'Reference No.'} fastField inline>
-        <FInputGroup name={'reference_no'} fill />
+        <FInputGroup name={'referenceNo'} fill />
       </FFormGroup>
 
       <FFormGroup name={'description'} label={'Description'} fastField inline>

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/_utils.ts

@@ -1,5 +1,7 @@
-// @ts-nocheck
+import * as R from 'ramda';
 import { transformToForm, transfromToSnakeCase } from '@/utils';
+import { useCategorizeTransactionTabsBoot } from '@/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabsBoot';
+import { useCategorizeTransactionBoot } from './CategorizeTransactionBoot';
 
 // Default initial form values.
 export const defaultInitialValues = {
@@ -14,8 +16,11 @@ export const defaultInitialValues = {
   branchId: '',
 };
 
-export const transformToCategorizeForm = (uncategorizedTransaction) => {
-  const defaultValues = {
+export const transformToCategorizeForm = (
+  uncategorizedTransaction: any,
+  recognizedTransaction?: any,
+) => {
+  let defaultValues = {
     debitAccountId: uncategorizedTransaction.account_id,
     transactionType: uncategorizedTransaction.is_deposit_transaction
       ? 'other_income'
@@ -23,10 +28,51 @@ export const transformToCategorizeForm = (uncategorizedTransaction) => {
     amount: uncategorizedTransaction.amount,
     date: uncategorizedTransaction.date,
   };
+  if (recognizedTransaction) {
+    const recognizedDefaults = getRecognizedTransactionDefaultValues(
+      recognizedTransaction,
+    );
+    defaultValues = R.merge(defaultValues, recognizedDefaults);
+  }
   return transformToForm(defaultValues, defaultInitialValues);
 };
 
+export const getRecognizedTransactionDefaultValues = (
+  recognizedTransaction: any,
+) => {
+  return {
+    creditAccountId: recognizedTransaction.assignedAccountId || '',
+    // transactionType: recognizedTransaction.assignCategory,
+    referenceNo: recognizedTransaction.referenceNo || '',
+  };
+};
 
-export const tranformToRequest = (formValues) => {
+export const tranformToRequest = (formValues: Record<string, any>) => {
   return transfromToSnakeCase(formValues);
-};
+};
+
+/**
+ * Categorize transaction form initial values.
+ * @returns
+ */
+export const useCategorizeTransactionFormInitialValues = () => {
+  const { primaryBranch, recognizedTranasction } =
+    useCategorizeTransactionBoot();
+  const { uncategorizedTransaction } = useCategorizeTransactionTabsBoot();
+
+  return {
+    ...defaultInitialValues,
+    /**
+     * We only care about the fields in the form. Previously unfilled optional
+     * values such as `notes` come back from the API as null, so remove those
+     * as well.
+     */
+    ...transformToCategorizeForm(
+      uncategorizedTransaction,
+      recognizedTranasction,
+    ),
+
+    /** Assign the primary branch id as default value. */
+    branchId: primaryBranch?.id || null,
+  };
+};