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) || []; +};