diff --git a/packages/webapp/src/constants/cashflowOptions.tsx b/packages/webapp/src/constants/cashflowOptions.tsx
index aa9e477f8..110c8b8ac 100644
--- a/packages/webapp/src/constants/cashflowOptions.tsx
+++ b/packages/webapp/src/constants/cashflowOptions.tsx
@@ -39,3 +39,12 @@ export const TRANSACRIONS_TYPE = [
'OtherExpense',
'TransferToAccount',
];
+
+export const MoneyCategoryPerCreditAccountRootType = {
+ OwnerContribution: ['equity'],
+ OtherIncome: ['income'],
+ OwnerDrawing: ['equity'],
+ OtherExpense: ['expense'],
+ TransferToAccount: ['asset'],
+ TransferFromAccount: ['asset'],
+};
diff --git a/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContentForm.tsx b/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContentForm.tsx
index 0cf97da39..96b5f4364 100644
--- a/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContentForm.tsx
+++ b/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContentForm.tsx
@@ -1,4 +1,5 @@
// @ts-nocheck
+import { useCallback, useMemo } from 'react';
import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
import { Button, Classes, Intent, Radio, Tag } from '@blueprintjs/core';
import * as R from 'ramda';
@@ -16,11 +17,11 @@ import {
} from '@/components';
import { useCreateBankRule, useEditBankRule } from '@/hooks/query/bank-rules';
import {
- AssignTransactionTypeOptions,
FieldCondition,
Fields,
RuleFormValues,
TransactionTypeOptions,
+ getAccountRootFromMoneyCategory,
initialValues,
} from './_utils';
import { useRuleFormDialogBoot } from './RuleFormBoot';
@@ -31,6 +32,11 @@ import {
} from '@/utils';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { DialogsName } from '@/constants/dialogs';
+import { getAddMoneyInOptions, getAddMoneyOutOptions } from '@/constants';
+
+// Retrieves the add money in button options.
+const MoneyInOptions = getAddMoneyInOptions();
+const MoneyOutOptions = getAddMoneyOutOptions();
function RuleFormContentFormRoot({
// #withDialogActions
@@ -47,7 +53,6 @@ function RuleFormContentFormRoot({
...initialValues,
...transformToForm(transformToCamelCase(bankRule), initialValues),
};
-
// Handles the form submitting.
const handleSubmit = (
values: RuleFormValues,
@@ -92,8 +97,9 @@ function RuleFormContentFormRoot({
label={'Rule Name'}
labelInfo={Required}
style={{ maxWidth: 300 }}
+ fastField
>
-
+
Required}
style={{ maxWidth: 350 }}
+ fastField
>
-
-
-
+
@@ -139,34 +138,16 @@ function RuleFormContentFormRoot({
Then Assign
- Required}
- style={{ maxWidth: 300 }}
- >
-
-
-
- Required}
- style={{ maxWidth: 300 }}
- >
-
-
+
+
-
+
@@ -203,11 +184,13 @@ function RuleFormConditions() {
name={`conditions[${index}].field`}
label={'Field'}
style={{ marginBottom: 0, flex: '1 0' }}
+ fastField
>
@@ -215,11 +198,13 @@ function RuleFormConditions() {
name={`conditions[${index}].comparator`}
label={'Condition'}
style={{ marginBottom: 0, flex: '1 0' }}
+ fastField
>
@@ -227,8 +212,9 @@ function RuleFormConditions() {
name={`conditions[${index}].value`}
label={'Value'}
style={{ marginBottom: 0, flex: '1 0 ', width: '40%' }}
+ fastField
>
-
+
))}
@@ -284,3 +270,104 @@ function RuleFormActionsRoot({
}
const RuleFormActions = R.compose(withDialogActions)(RuleFormActionsRoot);
+
+function RuleApplyIfTransactionTypeField() {
+ const { setFieldValue } = useFormikContext();
+
+ const handleItemChange = useCallback(
+ (item: any) => {
+ setFieldValue('applyIfTransactionType', item.value);
+ setFieldValue('assignCategory', '');
+ setFieldValue('assignAccountId', '');
+ },
+ [setFieldValue],
+ );
+
+ return (
+
+
+
+ );
+}
+
+function RuleAssignCategoryField() {
+ const { values, setFieldValue } = useFormikContext();
+
+ // Retrieves the transaction types if it is deposit or withdrawal.
+ const transactionTypes = useMemo(
+ () =>
+ values?.applyIfTransactionType === 'deposit'
+ ? MoneyInOptions
+ : MoneyOutOptions,
+ [values?.applyIfTransactionType],
+ );
+
+ // Handles the select item change.
+ const handleItemChange = useCallback(
+ (item: any) => {
+ setFieldValue('assignCategory', item.value);
+ setFieldValue('assignAccountId', '');
+ },
+ [setFieldValue],
+ );
+
+ return (
+ Required}
+ style={{ maxWidth: 300 }}
+ fastField
+ >
+
+
+ );
+}
+
+function RuleAssignCategoryAccountField() {
+ const { values } = useFormikContext();
+ const { accounts } = useRuleFormDialogBoot();
+
+ const accountRoot = useMemo(
+ () => getAccountRootFromMoneyCategory(values.assignCategory),
+ [values.assignCategory],
+ );
+
+ return (
+ Required}
+ style={{ maxWidth: 300 }}
+ fastField
+ shouldUpdateDeps={{ accountRoot }}
+ >
+
+
+ );
+}
diff --git a/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/_utils.ts b/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/_utils.ts
index 696464b87..db77154e9 100644
--- a/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/_utils.ts
+++ b/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/_utils.ts
@@ -1,8 +1,11 @@
+import { camelCase, get, upperFirst } from 'lodash';
+import { MoneyCategoryPerCreditAccountRootType } from '@/constants/cashflowOptions';
+
export const initialValues = {
name: '',
order: 0,
applyIfAccountId: '',
- applyIfTransactionType: '',
+ applyIfTransactionType: 'deposit',
conditionsType: 'and',
conditions: [
{
@@ -47,3 +50,9 @@ export const FieldCondition = [
export const AssignTransactionTypeOptions = [
{ value: 'expense', text: 'Expense' },
];
+
+export const getAccountRootFromMoneyCategory = (category: string): string[] => {
+ const _category = upperFirst(camelCase(category));
+
+ return get(MoneyCategoryPerCreditAccountRootType, _category) || [];
+};