[Debug Mode] Add transaction and violation data to debug mode

src/CONST.ts

@@ -6299,10 +6299,17 @@ const CONST = {
     },
 
     DEBUG: {
+        FORMS: {
+            REPORT: 'report',
+            REPORT_ACTION: 'reportAction',
+            TRANSACTION: 'transaction',
+            TRANSACTION_VIOLATION: 'transactionViolation',
+        },
         DETAILS: 'details',
         JSON: 'json',
         REPORT_ACTIONS: 'actions',
         REPORT_ACTION_PREVIEW: 'preview',
+        TRANSACTION_VIOLATIONS: 'violations',
     },
 
     REPORT_IN_LHN_REASONS: {

src/ONYXKEYS.ts

@@ -716,10 +716,6 @@ const ONYXKEYS = {
         RULES_MAX_EXPENSE_AMOUNT_FORM_DRAFT: 'rulesMaxExpenseAmountFormDraft',
         RULES_MAX_EXPENSE_AGE_FORM: 'rulesMaxExpenseAgeForm',
         RULES_MAX_EXPENSE_AGE_FORM_DRAFT: 'rulesMaxExpenseAgeFormDraft',
-        DEBUG_REPORT_PAGE_FORM: 'debugReportPageForm',
-        DEBUG_REPORT_PAGE_FORM_DRAFT: 'debugReportPageFormDraft',
-        DEBUG_REPORT_ACTION_PAGE_FORM: 'debugReportActionPageForm',
-        DEBUG_REPORT_ACTION_PAGE_FORM_DRAFT: 'debugReportActionPageFormDraft',
         DEBUG_DETAILS_FORM: 'debugDetailsForm',
         DEBUG_DETAILS_FORM_DRAFT: 'debugDetailsFormDraft',
     },
@@ -814,9 +810,7 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.RULES_MAX_EXPENSE_AMOUNT_FORM]: FormTypes.RulesMaxExpenseAmountForm;
     [ONYXKEYS.FORMS.RULES_MAX_EXPENSE_AGE_FORM]: FormTypes.RulesMaxExpenseAgeForm;
     [ONYXKEYS.FORMS.SEARCH_SAVED_SEARCH_RENAME_FORM]: FormTypes.SearchSavedSearchRenameForm;
-    [ONYXKEYS.FORMS.DEBUG_REPORT_PAGE_FORM]: FormTypes.DebugReportForm;
-    [ONYXKEYS.FORMS.DEBUG_REPORT_ACTION_PAGE_FORM]: FormTypes.DebugReportActionForm;
-    [ONYXKEYS.FORMS.DEBUG_DETAILS_FORM]: FormTypes.DebugReportForm | FormTypes.DebugReportActionForm;
+    [ONYXKEYS.FORMS.DEBUG_DETAILS_FORM]: FormTypes.DebugReportForm | FormTypes.DebugReportActionForm | FormTypes.DebugTransactionForm | FormTypes.DebugTransactionViolationForm;
 };
 
 type OnyxFormDraftValuesMapping = {

src/ROUTES.ts

@@ -1777,13 +1777,46 @@ const ROUTES = {
         getRoute: (reportID: string, reportActionID: string) => `debug/report/${reportID}/actions/${reportActionID}/preview` as const,
     },
     DETAILS_CONSTANT_PICKER_PAGE: {
-        route: 'debug/details/constant/:fieldName',
-        getRoute: (fieldName: string, fieldValue?: string, backTo?: string) => getUrlWithBackToParam(`debug/details/constant/${fieldName}?fieldValue=${fieldValue}`, backTo),
+        route: 'debug/:formType/details/constant/:fieldName',
+        getRoute: (formType: string, fieldName: string, fieldValue?: string, policyID?: string, backTo?: string) =>
+            getUrlWithBackToParam(`debug/${formType}/details/constant/${fieldName}?fieldValue=${fieldValue}&policyID=${policyID}`, backTo),
     },
     DETAILS_DATE_TIME_PICKER_PAGE: {
         route: 'debug/details/datetime/:fieldName',
         getRoute: (fieldName: string, fieldValue?: string, backTo?: string) => getUrlWithBackToParam(`debug/details/datetime/${fieldName}?fieldValue=${fieldValue}`, backTo),
     },
+    DEBUG_TRANSACTION: {
+        route: 'debug/transaction/:transactionID',
+        getRoute: (transactionID: string) => `debug/transaction/${transactionID}` as const,
+    },
+    DEBUG_TRANSACTION_TAB_DETAILS: {
+        route: 'debug/transaction/:transactionID/details',
+        getRoute: (transactionID: string) => `debug/transaction/${transactionID}/details` as const,
+    },
+    DEBUG_TRANSACTION_TAB_JSON: {
+        route: 'debug/transaction/:transactionID/json',
+        getRoute: (transactionID: string) => `debug/transaction/${transactionID}/json` as const,
+    },
+    DEBUG_TRANSACTION_TAB_VIOLATIONS: {
+        route: 'debug/transaction/:transactionID/violations',
+        getRoute: (transactionID: string) => `debug/transaction/${transactionID}/violations` as const,
+    },
+    DEBUG_TRANSACTION_VIOLATION_CREATE: {
+        route: 'debug/transaction/:transactionID/violations/create',
+        getRoute: (transactionID: string) => `debug/transaction/${transactionID}/violations/create` as const,
+    },
+    DEBUG_TRANSACTION_VIOLATION: {
+        route: 'debug/transaction/:transactionID/violations/:index',
+        getRoute: (transactionID: string, index: string) => `debug/transaction/${transactionID}/violations/${index}` as const,
+    },
+    DEBUG_TRANSACTION_VIOLATION_TAB_DETAILS: {
+        route: 'debug/transaction/:transactionID/violations/:index/details',
+        getRoute: (transactionID: string, index: string) => `debug/transaction/${transactionID}/violations/${index}/details` as const,
+    },
+    DEBUG_TRANSACTION_VIOLATION_TAB_JSON: {
+        route: 'debug/transaction/:transactionID/violations/:index/json',
+        getRoute: (transactionID: string, index: string) => `debug/transaction/${transactionID}/violations/${index}/json` as const,
+    },
 } as const;
 
 /**

src/SCREENS.ts

@@ -620,6 +620,9 @@ const SCREENS = {
         REPORT_ACTION_CREATE: 'Debug_Report_Action_Create',
         DETAILS_CONSTANT_PICKER_PAGE: 'Debug_Details_Constant_Picker_Page',
         DETAILS_DATE_TIME_PICKER_PAGE: 'Debug_Details_Date_Time_Picker_Page',
+        TRANSACTION: 'Debug_Transaction',
+        TRANSACTION_VIOLATION_CREATE: 'Debug_Transaction_Violation_Create',
+        TRANSACTION_VIOLATION: 'Debug_Transaction_Violation',
     },
 } as const;
 

src/components/CurrencySelectionList/index.tsx

@@ -1,24 +1,24 @@
 import {Str} from 'expensify-common';
 import React, {useCallback, useMemo, useState} from 'react';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
 import SelectableListItem from '@components/SelectionList/SelectableListItem';
 import useLocalize from '@hooks/useLocalize';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import type {CurrencyListItem, CurrencySelectionListOnyxProps, CurrencySelectionListProps} from './types';
+import type {CurrencyListItem, CurrencySelectionListProps} from './types';
 
 function CurrencySelectionList({
     searchInputLabel,
     initiallySelectedCurrencyCode,
     onSelect,
-    currencyList,
     selectedCurrencies = [],
     canSelectMultiple = false,
     recentlyUsedCurrencies,
 }: CurrencySelectionListProps) {
+    const [currencyList] = useOnyx(ONYXKEYS.CURRENCY_LIST);
     const [searchValue, setSearchValue] = useState('');
     const {translate} = useLocalize();
     const getUnselectedOptions = useCallback((options: CurrencyListItem[]) => options.filter((option) => !option.isSelected), []);
@@ -107,8 +107,4 @@ function CurrencySelectionList({
 
 CurrencySelectionList.displayName = 'CurrencySelectionList';
 
-const CurrencySelectionListWithOnyx = withOnyx<CurrencySelectionListProps, CurrencySelectionListOnyxProps>({
-    currencyList: {key: ONYXKEYS.CURRENCY_LIST},
-})(CurrencySelectionList);
-
-export default CurrencySelectionListWithOnyx;
+export default CurrencySelectionList;

src/components/CurrencySelectionList/types.ts

@@ -1,18 +1,11 @@
-import type {OnyxEntry} from 'react-native-onyx';
 import type {ListItem} from '@components/SelectionList/types';
-import type {CurrencyList} from '@src/types/onyx';
 
 type CurrencyListItem = ListItem & {
     currencyName: string;
     currencyCode: string;
 };
 
-type CurrencySelectionListOnyxProps = {
-    /** List of available currencies */
-    currencyList: OnyxEntry<CurrencyList>;
-};
-
-type CurrencySelectionListProps = CurrencySelectionListOnyxProps & {
+type CurrencySelectionListProps = {
     /** Label for the search text input */
     searchInputLabel: string;
 
@@ -32,4 +25,4 @@ type CurrencySelectionListProps = CurrencySelectionListOnyxProps & {
     canSelectMultiple?: boolean;
 };
 
-export type {CurrencyListItem, CurrencySelectionListProps, CurrencySelectionListOnyxProps};
+export type {CurrencyListItem, CurrencySelectionListProps};

src/components/ReportActionItem/MoneyReportView.tsx

@@ -122,7 +122,7 @@ function MoneyReportView({report, policy, isCombinedReport = false, shouldShowTo
                                 return (
                                     <OfflineWithFeedback
                                         // Need to return undefined when we have pendingAction to avoid the duplicate pending action
-                                        pendingAction={pendingAction ? undefined : report.pendingFields?.[fieldKey]}
+                                        pendingAction={pendingAction ? undefined : report.pendingFields?.[fieldKey as keyof typeof report.pendingFields]}
                                         errors={report.errorFields?.[fieldKey]}
                                         errorRowStyles={styles.ph5}
                                         key={`menuItem-${fieldKey}`}

src/components/TabSelector/TabSelector.tsx

@@ -36,6 +36,8 @@ function getIconAndTitle(route: string, translate: LocaleContextProps['translate
             return {icon: Expensicons.Document, title: translate('debug.reportActions')};
         case CONST.DEBUG.REPORT_ACTION_PREVIEW:
             return {icon: Expensicons.Document, title: translate('debug.reportActionPreview')};
+        case CONST.DEBUG.TRANSACTION_VIOLATIONS:
+            return {icon: Expensicons.Exclamation, title: translate('debug.violations')};
         case CONST.TAB_REQUEST.MANUAL:
             return {icon: Expensicons.Pencil, title: translate('tabSelector.manual')};
         case CONST.TAB_REQUEST.SCAN:

src/components/TagPicker/index.tsx

@@ -31,11 +31,14 @@ type TagPickerProps = {
     /** Should show the selected option that is disabled? */
     shouldShowDisabledAndSelectedOption?: boolean;
 
+    /** Whether the list should be sorted by tag name. default is false */
+    shouldOrderListByTagName?: boolean;
+
     /** Indicates which tag list index was selected */
     tagListIndex: number;
 };
 
-function TagPicker({selectedTag, tagListName, policyID, tagListIndex, shouldShowDisabledAndSelectedOption = false, onSubmit}: TagPickerProps) {
+function TagPicker({selectedTag, tagListName, policyID, tagListIndex, shouldShowDisabledAndSelectedOption = false, shouldOrderListByTagName = false, onSubmit}: TagPickerProps) {
     const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`);
     const [policyRecentlyUsedTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`);
     const styles = useThemeStyles();
@@ -72,16 +75,20 @@ function TagPicker({selectedTag, tagListName, policyID, tagListIndex, shouldShow
         return [...selectedOptions, ...Object.values(policyTagList.tags).filter((policyTag) => policyTag.enabled && !selectedNames.includes(policyTag.name))];
     }, [selectedOptions, policyTagList, shouldShowDisabledAndSelectedOption]);
 
-    const sections = useMemo(
-        () =>
-            TagOptionListUtils.getTagListSections({
-                searchValue,
-                selectedOptions,
-                tags: enabledTags,
-                recentlyUsedTags: policyRecentlyUsedTagsList,
-            }),
-        [searchValue, enabledTags, selectedOptions, policyRecentlyUsedTagsList],
-    );
+    const sections = useMemo(() => {
+        const tagSections = TagOptionListUtils.getTagListSections({
+            searchValue,
+            selectedOptions,
+            tags: enabledTags,
+            recentlyUsedTags: policyRecentlyUsedTagsList,
+        });
+        return shouldOrderListByTagName
+            ? tagSections.map((option) => ({
+                  ...option,
+                  data: option.data.sort((a, b) => a.text?.localeCompare(b.text ?? '') ?? 0),
+              }))
+            : tagSections;
+    }, [searchValue, selectedOptions, enabledTags, policyRecentlyUsedTagsList, shouldOrderListByTagName]);
 
     const headerMessage = OptionsListUtils.getHeaderMessageForNonUserList((sections?.at(0)?.data?.length ?? 0) > 0, searchValue);
 

src/languages/en.ts

@@ -5328,6 +5328,9 @@ const translations = {
         createReportAction: 'Create Report Action',
         reportAction: 'Report Action',
         report: 'Report',
+        transaction: 'Transaction',
+        violations: 'Violations',
+        transactionViolation: 'Transaction Violation',
         hint: "Data changes won't be sent to the backend",
         textFields: 'Text fields',
         numberFields: 'Number fields',
@@ -5343,6 +5346,8 @@ const translations = {
         true: 'true',
         false: 'false',
         viewReport: 'View Report',
+        viewTransaction: 'View transaction',
+        createTransactionViolation: 'Create transaction violation',
         reasonVisibleInLHN: {
             hasDraftComment: 'Has draft comment',
             hasGBR: 'Has GBR',

src/languages/es.ts

@@ -5847,6 +5847,9 @@ const translations = {
         createReportAction: 'Crear Report Action',
         reportAction: 'Report Action',
         report: 'Report',
+        transaction: 'Transacción',
+        violations: 'Violaciones',
+        transactionViolation: 'Violación de transacción',
         hint: 'Los cambios de datos no se enviarán al backend',
         textFields: 'Campos de texto',
         numberFields: 'Campos numéricos',
@@ -5862,6 +5865,8 @@ const translations = {
         true: 'verdadero',
         false: 'falso',
         viewReport: 'Ver Informe',
+        viewTransaction: 'Ver transacción',
+        createTransactionViolation: 'Crear infracción de transacción',
         reasonVisibleInLHN: {
             hasDraftComment: 'Tiene comentario en borrador',
             hasGBR: 'Tiene GBR',