[OldDot Rules Migration] Expense report rules

src/CONST.ts

@@ -1188,6 +1188,7 @@ const CONST = {
         VISIBLE_PASSWORD: 'visible-password',
         ASCII_CAPABLE: 'ascii-capable',
         NUMBER_PAD: 'number-pad',
+        DECIMAL_PAD: 'decimal-pad',
     },
 
     INPUT_MODE: {
@@ -2025,11 +2026,16 @@ const CONST = {
             // Often referred to as "collect" workspaces
             TEAM: 'team',
         },
+        FIELD_LIST_TITLE_FIELD_ID: 'text_title',
+        DEFAULT_REPORT_NAME_PATTERN: '{report:type} {report:startdate}',
         ROLE: {
             ADMIN: 'admin',
             AUDITOR: 'auditor',
             USER: 'user',
         },
+        AUTO_REIMBURSEMENT_MAX_LIMIT_CENTS: 2000000,
+        AUTO_REIMBURSEMENT_DEFAULT_LIMIT_CENTS: 10000,
+
         AUTO_REPORTING_FREQUENCIES: {
             INSTANT: 'instant',
             IMMEDIATE: 'immediate',
@@ -2082,6 +2088,7 @@ const CONST = {
             ARE_EXPENSIFY_CARDS_ENABLED: 'areExpensifyCardsEnabled',
             ARE_INVOICES_ENABLED: 'areInvoicesEnabled',
             ARE_TAXES_ENABLED: 'tax',
+            ARE_RULES_ENABLED: 'areRulesEnabled',
         },
         DEFAULT_CATEGORIES: [
             'Advertising',
@@ -5471,6 +5478,14 @@ const CONST = {
                 description: 'workspace.upgrade.taxCodes.description' as const,
                 icon: 'Coins',
             },
+            rules: {
+                id: 'rules' as const,
+                alias: 'rules',
+                name: 'Rules',
+                title: 'workspace.upgrade.rules.title' as const,
+                description: 'workspace.upgrade.rules.description' as const,
+                icon: 'Rules',
+            },
         };
     },
     REPORT_FIELD_TYPES: {

src/ONYXKEYS.ts

@@ -623,6 +623,14 @@ const ONYXKEYS = {
         SEARCH_ADVANCED_FILTERS_FORM_DRAFT: 'searchAdvancedFiltersFormDraft',
         TEXT_PICKER_MODAL_FORM: 'textPickerModalForm',
         TEXT_PICKER_MODAL_FORM_DRAFT: 'textPickerModalFormDraft',
+        RULES_CUSTOM_NAME_MODAL_FORM: 'rulesCustomNameModalForm',
+        RULES_CUSTOM_NAME_MODAL_FORM_DRAFT: 'rulesCustomNameModalFormDraft',
+        RULES_AUTO_APPROVE_REPORTS_UNDER_MODAL_FORM: 'rulesAutoApproveReportsUnderModalForm',
+        RULES_AUTO_APPROVE_REPORTS_UNDER_MODAL_FORM_DRAFT: 'rulesAutoApproveReportsUnderModalFormDraft',
+        RULES_RANDOM_REPORT_AUDIT_MODAL_FORM: 'rulesRandomReportAuditModalForm',
+        RULES_RANDOM_REPORT_AUDIT_MODAL_FORM_DRAFT: 'rulesRandomReportAuditModalFormDraft',
+        RULES_AUTO_PAY_REPORTS_UNDER_MODAL_FORM: 'rulesAutoPayReportsUnderModalForm',
+        RULES_AUTO_PAY_REPORTS_UNDER_MODAL_FORM_DRAFT: 'rulesAutoPayReportsUnderModalFormDraft',
     },
 } as const;
 
@@ -702,6 +710,10 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.SAGE_INTACCT_DIMENSION_TYPE_FORM]: FormTypes.SageIntacctDimensionForm;
     [ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM]: FormTypes.SearchAdvancedFiltersForm;
     [ONYXKEYS.FORMS.TEXT_PICKER_MODAL_FORM]: FormTypes.TextPickerModalForm;
+    [ONYXKEYS.FORMS.RULES_CUSTOM_NAME_MODAL_FORM]: FormTypes.RulesCustomNameModalForm;
+    [ONYXKEYS.FORMS.RULES_AUTO_APPROVE_REPORTS_UNDER_MODAL_FORM]: FormTypes.RulesAutoApproveReportsUnderModalForm;
+    [ONYXKEYS.FORMS.RULES_RANDOM_REPORT_AUDIT_MODAL_FORM]: FormTypes.RulesRandomReportAuditModalForm;
+    [ONYXKEYS.FORMS.RULES_AUTO_PAY_REPORTS_UNDER_MODAL_FORM]: FormTypes.RulesAutoPayReportsUnderModalForm;
 };
 
 type OnyxFormDraftValuesMapping = {

src/ROUTES.ts

@@ -927,6 +927,10 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/expensify-card/settings/frequency',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card/settings/frequency` as const,
     },
+    WORKSPACE_RULES: {
+        route: 'settings/workspaces/:policyID/rules',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/rules` as const,
+    },
     WORKSPACE_DISTANCE_RATES: {
         route: 'settings/workspaces/:policyID/distance-rates',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/distance-rates` as const,
@@ -955,6 +959,22 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/distance-rates/:rateID/tax-rate/edit',
         getRoute: (policyID: string, rateID: string) => `settings/workspaces/${policyID}/distance-rates/${rateID}/tax-rate/edit` as const,
     },
+    RULES_CUSTOM_NAME: {
+        route: 'settings/workspaces/:policyID/rules/name',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/rules/name` as const,
+    },
+    RULES_AUTO_APPROVE_REPORTS_UNDER: {
+        route: 'settings/workspaces/:policyID/rules/auto-approve',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/rules/auto-approve` as const,
+    },
+    RULES_RANDOM_REPORT_AUDIT: {
+        route: 'settings/workspaces/:policyID/rules/audit',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/rules/audit` as const,
+    },
+    RULES_AUTO_PAY_REPORTS_UNDER: {
+        route: 'settings/workspaces/:policyID/rules/auto-pay',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/rules/auto-pay` as const,
+    },
     // Referral program promotion
     REFERRAL_DETAILS_MODAL: {
         route: 'referral/:contentType',

src/SCREENS.ts

@@ -440,6 +440,11 @@ const SCREENS = {
         DISTANCE_RATE_TAX_RECLAIMABLE_ON_EDIT: 'Distance_Rate_Tax_Reclaimable_On_Edit',
         DISTANCE_RATE_TAX_RATE_EDIT: 'Distance_Rate_Tax_Rate_Edit',
         UPGRADE: 'Workspace_Upgrade',
+        RULES: 'Policy_Rules',
+        RULES_CUSTOM_NAME: 'Rules_Custom_Name',
+        RULES_AUTO_APPROVE_REPORTS_UNDER: 'Rules_Auto_Approve_Reports_Under',
+        RULES_RANDOM_REPORT_AUDIT: 'Rules_Random_Report_Audit',
+        RULES_AUTO_PAY_REPORTS_UNDER: 'Rules_AutoPay_Reports_Under',
     },
 
     EDIT_REQUEST: {

src/components/AmountForm.tsx

@@ -12,6 +12,7 @@ import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import CONST from '@src/CONST';
 import BigNumberPad from './BigNumberPad';
 import FormHelpMessage from './FormHelpMessage';
+import TextInput from './TextInput';
 import isTextInputFocused from './TextInput/BaseTextInput/isTextInputFocused';
 import type {BaseTextInputProps, BaseTextInputRef} from './TextInput/BaseTextInput/types';
 import TextInputWithCurrencySymbol from './TextInputWithCurrencySymbol';
@@ -41,8 +42,12 @@ type AmountFormProps = {
 
     /** Custom max amount length. It defaults to CONST.IOU.AMOUNT_MAX_LENGTH */
     amountMaxLength?: number;
+
+    label?: string;
+
+    displayAsTextInput?: boolean;
 } & Pick<TextInputWithCurrencySymbolProps, 'hideCurrencySymbol' | 'extraSymbol'> &
-    Pick<BaseTextInputProps, 'autoFocus'>;
+    Pick<BaseTextInputProps, 'autoFocus' | 'hasError'>;
 
 /**
  * Returns the new selection object based on the updated amount's length
@@ -57,7 +62,18 @@ const NUM_PAD_CONTAINER_VIEW_ID = 'numPadContainerView';
 const NUM_PAD_VIEW_ID = 'numPadView';
 
 function AmountForm(
-    {value: amount, currency = CONST.CURRENCY.USD, extraDecimals = 0, amountMaxLength, errorText, onInputChange, onCurrencyButtonPress, isCurrencyPressable = true, ...rest}: AmountFormProps,
+    {
+        value: amount,
+        currency = CONST.CURRENCY.USD,
+        extraDecimals = 0,
+        amountMaxLength,
+        onInputChange,
+        onCurrencyButtonPress,
+        displayAsTextInput = false,
+        isCurrencyPressable = true,
+        label,
+        ...rest
+    }: AmountFormProps,
     forwardedRef: ForwardedRef<BaseTextInputRef>,
 ) {
     const styles = useThemeStyles();
@@ -195,6 +211,38 @@ function AmountForm(
     const formattedAmount = MoneyRequestUtils.replaceAllDigits(currentAmount, toLocaleDigit);
     const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
 
+    if (displayAsTextInput) {
+        return (
+            <TextInput
+                label={label}
+                value={formattedAmount}
+                onChangeText={setNewAmount}
+                placeholder={numberFormat(0)}
+                ref={(ref: BaseTextInputRef) => {
+                    if (typeof forwardedRef === 'function') {
+                        forwardedRef(ref);
+                    } else if (forwardedRef && 'current' in forwardedRef) {
+                        // eslint-disable-next-line no-param-reassign
+                        forwardedRef.current = ref;
+                    }
+                    textInput.current = ref;
+                }}
+                selection={selection}
+                onSelectionChange={(e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+                    if (!shouldUpdateSelection) {
+                        return;
+                    }
+                    setSelection(e.nativeEvent.selection);
+                }}
+                prefixCharacter={currency}
+                prefixStyle={styles.colorMuted}
+                keyboardType={CONST.KEYBOARD_TYPE.DECIMAL_PAD}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...rest}
+            />
+        );
+    }
+
     return (
         <>
             <View
@@ -231,11 +279,11 @@ function AmountForm(
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...rest}
                 />
-                {!!errorText && (
+                {!!rest.errorText && (
                     <FormHelpMessage
                         style={[styles.pAbsolute, styles.b0, canUseTouchScreen ? styles.mb0 : styles.mb3, styles.ph5, styles.w100]}
                         isError
-                        message={errorText}
+                        message={rest.errorText}
                     />
                 )}
             </View>

src/components/BulletList.tsx

@@ -0,0 +1,52 @@
+import type {ReactNode} from 'react';
+import React from 'react';
+import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Text from './Text';
+
+type BulletListItem = string;
+
+type BulletListProps = {
+    /** List of items for the list. Eeach item will be rendered as a sepearte point.  */
+    items: BulletListItem[];
+
+    /** Header section of the list */
+    header: string | ReactNode;
+};
+
+function BulletList({items, header}: BulletListProps) {
+    const styles = useThemeStyles();
+
+    const baseTextStyles = [styles.mutedNormalTextLabel];
+
+    const renderBulletListHeader = () => {
+        if (typeof header === 'string') {
+            return <Text style={baseTextStyles}>{header}</Text>;
+        }
+        return header;
+    };
+
+    const renderBulletPoint = (item: string) => {
+        return (
+            <Text
+                style={baseTextStyles}
+                key={item}
+            >
+                <Text style={[styles.ph2, baseTextStyles]}>•</Text>
+                {item}
+            </Text>
+        );
+    };
+
+    return (
+        <View style={[styles.w100, styles.mt2]}>
+            {renderBulletListHeader()}
+            <View>{items.map((item) => renderBulletPoint(item))}</View>
+        </View>
+    );
+}
+
+BulletList.displayName = 'BulletList';
+
+export type {BulletListProps};
+export default BulletList;

src/components/Form/types.ts

@@ -11,6 +11,7 @@ import type CountrySelector from '@components/CountrySelector';
 import type CurrencySelector from '@components/CurrencySelector';
 import type DatePicker from '@components/DatePicker';
 import type EmojiPickerButtonDropdown from '@components/EmojiPicker/EmojiPickerButtonDropdown';
+import type PercentageForm from '@components/PercentageForm';
 import type Picker from '@components/Picker';
 import type RadioButtons from '@components/RadioButtons';
 import type RoomNameInput from '@components/RoomNameInput';
@@ -42,6 +43,7 @@ type ValidInputs =
     | typeof CountrySelector
     | typeof CurrencySelector
     | typeof AmountForm
+    | typeof PercentageForm
     | typeof BusinessTypePicker
     | typeof DimensionTypeSelector
     | typeof StateSelector

src/components/Icon/Expensicons.ts

@@ -82,6 +82,7 @@ import ExpensifyLogoNew from '@assets/images/expensify-logo-new.svg';
 import ExpensifyWordmark from '@assets/images/expensify-wordmark.svg';
 import EyeDisabled from '@assets/images/eye-disabled.svg';
 import Eye from '@assets/images/eye.svg';
+import Feed from '@assets/images/feed.svg';
 import Filter from '@assets/images/filter.svg';
 import Filters from '@assets/images/filters.svg';
 import Flag from '@assets/images/flag.svg';
@@ -386,4 +387,5 @@ export {
     Filters,
     CalendarSolid,
     Filter,
+    Feed,
 };

src/components/Icon/Illustrations.ts

@@ -87,6 +87,7 @@ import ReceiptEnvelope from '@assets/images/simple-illustrations/simple-illustra
 import ReceiptLocationMarker from '@assets/images/simple-illustrations/simple-illustration__receipt-location-marker.svg';
 import ReceiptWrangler from '@assets/images/simple-illustrations/simple-illustration__receipt-wrangler.svg';
 import ReceiptUpload from '@assets/images/simple-illustrations/simple-illustration__receiptupload.svg';
+import Rules from '@assets/images/simple-illustrations/simple-illustration__rules.svg';
 import SanFrancisco from '@assets/images/simple-illustrations/simple-illustration__sanfrancisco.svg';
 import SendMoney from '@assets/images/simple-illustrations/simple-illustration__sendmoney.svg';
 import ShieldYellow from '@assets/images/simple-illustrations/simple-illustration__shield.svg';
@@ -216,4 +217,5 @@ export {
     Tire,
     BigVault,
     Filters,
+    Rules,
 };

src/components/MenuItem.tsx

@@ -711,6 +711,7 @@ function MenuItem(
                                                                 )}
                                                             </View>
                                                         )}
+                                                        {titleComponent}
                                                         {!!description && !shouldShowDescriptionOnTop && (
                                                             <Text
                                                                 style={descriptionTextStyles}
@@ -738,7 +739,6 @@ function MenuItem(
                                                             </View>
                                                         )}
                                                         {!!furtherDetailsComponent && <View style={[styles.flexRow, styles.alignItemsCenter]}>{furtherDetailsComponent}</View>}
-                                                        {titleComponent}
                                                     </View>
                                                 </View>
                                             </View>