Expense rules phase 2

src/CONST/index.ts

@@ -3702,6 +3702,24 @@ const CONST = {
             INVOICING: 'invoicing2018',
         },
     },
+    EXPENSE_RULES: {
+        FIELDS: {
+            BILLABLE: 'billable',
+            CATEGORY: 'category',
+            DESCRIPTION: 'comment',
+            CREATE_REPORT: 'createReport',
+            MERCHANT: 'merchantToMatch',
+            RENAME_MERCHANT: 'merchant',
+            REIMBURSABLE: 'reimbursable',
+            REPORT: 'report',
+            TAG: 'tag',
+            TAX: 'tax',
+        },
+        BULK_ACTION_TYPES: {
+            EDIT: 'edit',
+            DELETE: 'delete',
+        },
+    },
 
     get SUBSCRIPTION_PRICES() {
         return {

src/ONYXKEYS.ts

@@ -979,6 +979,8 @@ const ONYXKEYS = {
         CREATE_DOMAIN_FORM_DRAFT: 'createDomainFormDraft',
         SPLIT_EXPENSE_EDIT_DATES: 'splitExpenseEditDates',
         SPLIT_EXPENSE_EDIT_DATES_DRAFT: 'splitExpenseEditDatesDraft',
+        EXPENSE_RULE_FORM: 'expenseRuleForm',
+        EXPENSE_RULE_FORM_DRAFT: 'expenseRuleFormDraft',
     },
     DERIVED: {
         REPORT_ATTRIBUTES: 'reportAttributes',
@@ -1096,6 +1098,7 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.ENABLE_GLOBAL_REIMBURSEMENTS]: FormTypes.EnableGlobalReimbursementsForm;
     [ONYXKEYS.FORMS.CREATE_DOMAIN_FORM]: FormTypes.CreateDomainForm;
     [ONYXKEYS.FORMS.SPLIT_EXPENSE_EDIT_DATES]: FormTypes.SplitExpenseEditDateForm;
+    [ONYXKEYS.FORMS.EXPENSE_RULE_FORM]: FormTypes.ExpenseRuleForm;
 };
 
 type OnyxFormDraftValuesMapping = {

src/ROUTES.ts

@@ -13,6 +13,7 @@ import type {IOURequestType} from './libs/actions/IOU';
 import Log from './libs/Log';
 import type {RootNavigatorParamList} from './libs/Navigation/types';
 import type {ReimbursementAccountStepToOpen} from './libs/ReimbursementAccountUtils';
+import StringUtils from './libs/StringUtils';
 import {getUrlWithParams} from './libs/Url';
 import SCREENS from './SCREENS';
 import type {Screen} from './SCREENS';
@@ -387,6 +388,18 @@ const ROUTES = {
         getRoute: (cardID: string) => `settings/wallet/card/${cardID}/activate` as const,
     },
     SETTINGS_RULES: 'settings/rules',
+    SETTINGS_RULES_ADD: {
+        route: 'settings/rules/new/:field?',
+        getRoute: (field?: ValueOf<typeof CONST.EXPENSE_RULES.FIELDS>) => {
+            return `settings/rules/new/${field ? StringUtils.camelToHyphenCase(field) : ''}` as const;
+        },
+    },
+    SETTINGS_RULES_EDIT: {
+        route: 'settings/rules/edit/:hash/:field?',
+        getRoute: (hash?: string, field?: ValueOf<typeof CONST.EXPENSE_RULES.FIELDS>) => {
+            return `settings/rules/edit/${hash ?? ':hash'}/${field ? StringUtils.camelToHyphenCase(field) : ''}` as const;
+        },
+    },
     SETTINGS_LEGAL_NAME: 'settings/profile/legal-name',
     SETTINGS_DATE_OF_BIRTH: 'settings/profile/date-of-birth',
     SETTINGS_PHONE_NUMBER: 'settings/profile/phone',

src/SCREENS.ts

@@ -150,6 +150,26 @@ const SCREENS = {
 
         RULES: {
             ROOT: 'Settings_Rules',
+            ADD: 'Settings_Rules_Add',
+            ADD_MERCHANT: 'Settings_Rules_Add_Merchant',
+            ADD_RENAME_MERCHANT: 'Settings_Rules_Add_Rename_Merchant',
+            ADD_CATEGORY: 'Settings_Rules_Add_Category',
+            ADD_TAG: 'Settings_Rules_Add_Tag',
+            ADD_TAX: 'Settings_Rules_Add_Tax',
+            ADD_DESCRIPTION: 'Settings_Rules_Add_Description',
+            ADD_REIMBURSABLE: 'Settings_Rules_Add_Reimbursable',
+            ADD_BILLABLE: 'Settings_Rules_Add_Billable',
+            ADD_REPORT: 'Settings_Rules_Add_Report',
+            EDIT: 'Settings_Rules_Edit',
+            EDIT_MERCHANT: 'Settings_Rules_Edit_Merchant',
+            EDIT_RENAME_MERCHANT: 'Settings_Rules_Edit_Rename_Merchant',
+            EDIT_CATEGORY: 'Settings_Rules_Edit_Category',
+            EDIT_TAG: 'Settings_Rules_Edit_Tag',
+            EDIT_TAX: 'Settings_Rules_Edit_Tax',
+            EDIT_DESCRIPTION: 'Settings_Rules_Edit_Description',
+            EDIT_REIMBURSABLE: 'Settings_Rules_Edit_Reimbursable',
+            EDIT_BILLABLE: 'Settings_Rules_Edit_Billable',
+            EDIT_REPORT: 'Settings_Rules_Edit_Report',
         },
 
         WALLET: {

src/components/Rule/RuleBooleanBase.tsx

@@ -0,0 +1,120 @@
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {View} from 'react-native';
+import type {ValueOf} from 'type-fest';
+import FixedFooter from '@components/FixedFooter';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import SearchFilterPageFooterButtons from '@components/Search/SearchFilterPageFooterButtons';
+import SelectionList from '@components/SelectionList';
+import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
+import type {ListItem} from '@components/SelectionList/ListItem/types';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {updateDraftRule} from '@libs/actions/User';
+import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type {InputID} from '@src/types/form/ExpenseRuleForm';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
+
+type BooleanFilterItem = ListItem & {
+    value: ValueOf<typeof CONST.SEARCH.BOOLEAN>;
+};
+
+type RuleBooleanBasePageProps = {
+    /** The key from boolean-based InputID */
+    fieldID: InputID;
+
+    /** The translation key for the page title */
+    titleKey: TranslationPaths;
+
+    /** The rule identifier */
+    hash?: string;
+};
+
+const booleanValues = Object.values(CONST.SEARCH.BOOLEAN);
+
+function RuleBooleanBasePage({fieldID, titleKey, hash}: RuleBooleanBasePageProps) {
+    const {translate} = useLocalize();
+    const [form, formMetadata] = useOnyx(ONYXKEYS.FORMS.EXPENSE_RULE_FORM, {canBeMissing: true});
+    const styles = useThemeStyles();
+
+    const isLoading = isLoadingOnyxValue(formMetadata);
+    const prevIsLoading = usePrevious(isLoading);
+
+    // Called only first time when Onyx loading finished
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const getInitialValue = () =>
+        booleanValues.find((value) => {
+            if (!form?.[fieldID]) {
+                return false;
+            }
+            const booleanValue = form[fieldID] === 'true' ? CONST.SEARCH.BOOLEAN.YES : CONST.SEARCH.BOOLEAN.NO;
+            return booleanValue === value;
+        }) ?? null;
+
+    const [selectedItem, setSelectedItem] = useState<string | null>(getInitialValue);
+
+    useEffect(() => {
+        if (isLoading || !prevIsLoading) {
+            return;
+        }
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setSelectedItem(getInitialValue());
+    }, [isLoading, prevIsLoading, getInitialValue]);
+
+    const items = useMemo(() => {
+        return booleanValues.map((value) => ({
+            value,
+            keyForList: value,
+            text: translate(`common.${value}`),
+            isSelected: selectedItem === value,
+        }));
+    }, [selectedItem, translate]);
+
+    const onSelectItem = useCallback((selectedValue: BooleanFilterItem) => {
+        const newValue = selectedValue.isSelected ? null : selectedValue.value;
+        setSelectedItem(newValue);
+    }, []);
+
+    const goBack = () => {
+        Navigation.goBack(hash ? ROUTES.SETTINGS_RULES_EDIT.getRoute(hash) : ROUTES.SETTINGS_RULES_ADD.getRoute());
+    };
+
+    const applyChanges = () => {
+        updateDraftRule({[fieldID]: selectedItem === CONST.SEARCH.BOOLEAN.YES ? 'true' : 'false'});
+        goBack();
+    };
+
+    return (
+        <ScreenWrapper
+            testID="RuleBooleanBasePage"
+            shouldShowOfflineIndicatorInWideScreen
+            offlineIndicatorStyle={styles.mtAuto}
+            includeSafeAreaPaddingBottom
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton
+                title={translate(titleKey)}
+                onBackButtonPress={goBack}
+            />
+            <View style={[styles.flex1]}>
+                <SelectionList
+                    shouldSingleExecuteRowSelect
+                    data={items}
+                    ListItem={SingleSelectListItem}
+                    onSelectRow={onSelectItem}
+                />
+            </View>
+            <FixedFooter style={styles.mtAuto}>
+                <SearchFilterPageFooterButtons applyChanges={applyChanges} />
+            </FixedFooter>
+        </ScreenWrapper>
+    );
+}
+
+export default RuleBooleanBasePage;

src/components/Rule/RuleTextBase.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import type {FormOnyxValues} from '@components/Form/types';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {updateDraftRule} from '@libs/actions/User';
+import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
+import type ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type {InputID} from '@src/types/form/ExpenseRuleForm';
+import TextBase from './TextBase';
+
+// Text-based field IDs that accept string input
+type RuleTextBaseProps = {
+    /** The key from text-based InputID */
+    fieldID: InputID;
+
+    /** The translation key for the page title and input label if labelKey is missing */
+    titleKey: TranslationPaths;
+
+    /** The translation key for the input label */
+    labelKey?: TranslationPaths;
+
+    /** Test ID for the screen wrapper */
+    testID: string;
+
+    /** The translation key for the hint text to display below the TextInput */
+    hintKey?: TranslationPaths;
+
+    /** Whether this field is required */
+    isRequired?: boolean;
+
+    /** The character limit for the input */
+    characterLimit?: number;
+
+    /** The rule identifier */
+    hash?: string;
+};
+
+function RuleTextBase({fieldID, hintKey, isRequired, titleKey, labelKey, testID, hash, characterLimit = CONST.MERCHANT_NAME_MAX_BYTES}: RuleTextBaseProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    const goBack = () => {
+        Navigation.goBack(hash ? ROUTES.SETTINGS_RULES_EDIT.getRoute(hash) : ROUTES.SETTINGS_RULES_ADD.getRoute());
+    };
+
+    const onSave = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EXPENSE_RULE_FORM>) => {
+        updateDraftRule(values);
+        goBack();
+    };
+
+    return (
+        <ScreenWrapper
+            testID={testID}
+            shouldShowOfflineIndicatorInWideScreen
+            offlineIndicatorStyle={styles.mtAuto}
+            includeSafeAreaPaddingBottom
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton
+                title={translate(titleKey)}
+                onBackButtonPress={goBack}
+            />
+            <TextBase
+                fieldID={fieldID}
+                hint={hintKey ? translate(hintKey) : undefined}
+                isRequired={isRequired}
+                label={translate(labelKey ?? titleKey)}
+                onSubmit={onSave}
+                title={translate(titleKey)}
+                characterLimit={characterLimit}
+            />
+        </ScreenWrapper>
+    );
+}
+
+export default RuleTextBase;

src/components/Rule/TextBase.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import {View} from 'react-native';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
+import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
+import TextInput from '@components/TextInput';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {isRequiredFulfilled, isValidInputLength} from '@libs/ValidationUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {InputID} from '@src/types/form/ExpenseRuleForm';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
+
+type TextBaseProps = {
+    fieldID: InputID;
+    hint?: string;
+    isRequired?: boolean;
+    title: string;
+    label: string;
+    characterLimit?: number;
+    onSubmit: (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EXPENSE_RULE_FORM>) => void;
+};
+
+function TextBase({fieldID, hint, isRequired, title, label, onSubmit, characterLimit = CONST.MERCHANT_NAME_MAX_BYTES}: TextBaseProps) {
+    const {translate} = useLocalize();
+    const [form, formMetadata] = useOnyx(ONYXKEYS.FORMS.EXPENSE_RULE_FORM, {canBeMissing: true});
+    const styles = useThemeStyles();
+
+    const isLoading = isLoadingOnyxValue(formMetadata);
+
+    const currentValue = form?.[fieldID] ?? '';
+    const {inputCallbackRef} = useAutoFocusInput();
+
+    const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EXPENSE_RULE_FORM>) => {
+        const errors: FormInputErrors<typeof ONYXKEYS.FORMS.EXPENSE_RULE_FORM> = {};
+        const fieldValue = values[fieldID] ?? '';
+
+        if (typeof fieldValue !== 'string') {
+            return errors;
+        }
+
+        const trimmedValue = fieldValue.trim();
+
+        if (isRequired && !isRequiredFulfilled(fieldValue)) {
+            errors[fieldID] = translate('common.error.fieldRequired');
+        } else {
+            const {isValid, byteLength} = isValidInputLength(trimmedValue, characterLimit);
+
+            if (!isValid) {
+                errors[fieldID] = translate('common.error.characterLimitExceedCounter', byteLength, characterLimit);
+            }
+        }
+
+        return errors;
+    };
+
+    if (isLoading) {
+        return null;
+    }
+
+    return (
+        <FormProvider
+            style={[styles.flex1, styles.ph5]}
+            formID={ONYXKEYS.FORMS.EXPENSE_RULE_FORM}
+            validate={validate}
+            onSubmit={onSubmit}
+            submitButtonText={translate('common.save')}
+            enabledWhenOffline
+        >
+            <View style={styles.mb5}>
+                <InputWrapper
+                    hint={hint}
+                    InputComponent={TextInput}
+                    inputID={fieldID}
+                    name={fieldID}
+                    defaultValue={typeof currentValue === 'string' ? currentValue : undefined}
+                    label={label}
+                    accessibilityLabel={title}
+                    role={CONST.ROLE.PRESENTATION}
+                    ref={inputCallbackRef}
+                />
+            </View>
+        </FormProvider>
+    );
+}
+
+export default TextBase;