Cover previously unhandled route case in SettlementButtonUtils

src/components/SettlementButton/index.tsx

@@ -6,10 +6,6 @@ import type {GestureResponderEvent} from 'react-native';
 import type {TupleToUnion} from 'type-fest';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
 import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
-// eslint-disable-next-line no-restricted-imports
-import * as Expensicons from '@components/Icon/Expensicons';
-// eslint-disable-next-line no-restricted-imports
-import {Bank} from '@components/Icon/Expensicons';
 import KYCWall from '@components/KYCWall';
 import {KYCWallContext} from '@components/KYCWall/KYCWallContext';
 import type {ContinueActionParams, PaymentMethod} from '@components/KYCWall/types';
@@ -38,7 +34,7 @@ import {
     isInvoiceReport as isInvoiceReportUtil,
     isIOUReport,
 } from '@libs/ReportUtils';
-import {getSettlementButtonPaymentMethods, handleUnvalidatedUserNavigation} from '@libs/SettlementButtonUtils';
+import {handleUnvalidatedUserNavigation, useSettlementButtonPaymentMethods} from '@libs/SettlementButtonUtils';
 import {shouldRestrictUserBillableActions} from '@libs/SubscriptionUtils';
 import {setPersonalBankAccountContinueKYCOnSuccess} from '@userActions/BankAccounts';
 import {approveMoneyRequest} from '@userActions/IOU';
@@ -95,7 +91,7 @@ function SettlementButton({
     shouldUseShortForm = false,
     hasOnlyHeldExpenses = false,
 }: SettlementButtonProps) {
-    const icons = useMemoizedLazyExpensifyIcons(['Building', 'User', 'ThumbsUp']);
+    const icons = useMemoizedLazyExpensifyIcons(['CheckCircle', 'ThumbsUp', 'Bank', 'Cash', 'Wallet', 'Building', 'User'] as const);
     const styles = useThemeStyles();
     const {translate, localeCompare} = useLocalize();
     const {isOffline} = useNetwork();
@@ -113,6 +109,7 @@ function SettlementButton({
     const policyIDKey = reportBelongsToWorkspace ? policyID : (iouReport?.policyID ?? CONST.POLICY.ID_FAKE);
     const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET, {canBeMissing: true});
     const hasActivatedWallet = ([CONST.WALLET.TIER_NAME.GOLD, CONST.WALLET.TIER_NAME.PLATINUM] as string[]).includes(userWallet?.tierName ?? '');
+    const paymentMethods = useSettlementButtonPaymentMethods(hasActivatedWallet, translate);
     const [lastPaymentMethods, lastPaymentMethodResult] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD, {canBeMissing: true});
 
     const lastPaymentMethod = useMemo(() => {
@@ -172,7 +169,7 @@ function SettlementButton({
             return {
                 text: title ?? '',
                 description: description ?? '',
-                icon: typeof icon === 'number' ? Bank : icon,
+                icon: typeof icon === 'number' ? icons.Bank : icon,
                 iconStyles: typeof icon === 'number' ? undefined : iconStyles,
                 iconSize: typeof icon === 'number' ? undefined : iconSize,
                 onSelected: () => onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY, true, undefined),
@@ -239,11 +236,10 @@ function SettlementButton({
 
     const paymentButtonOptions = useMemo(() => {
         const buttonOptions: Array<DropdownOption<string>> = [];
-        const paymentMethods = getSettlementButtonPaymentMethods(icons, hasActivatedWallet, translate);
 
         const shortFormPayElsewhereButton = {
             text: translate('iou.pay'),
-            icon: Expensicons.CheckCircle,
+            icon: icons.CheckCircle,
             value: CONST.IOU.PAYMENT_TYPE.ELSEWHERE,
             shouldUpdateSelectedIndex: false,
         };
@@ -277,7 +273,7 @@ function SettlementButton({
                 buttonOptions.push({
                     text: translate('iou.settleWallet', {formattedAmount: ''}),
                     value: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT,
-                    icon: Expensicons.Wallet,
+                    icon: icons.Wallet,
                 });
             } else if (canUsePersonalBankAccount) {
                 buttonOptions.push(paymentMethods[CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT]);
@@ -357,7 +353,7 @@ function SettlementButton({
                 };
                 const addBankAccountItem = {
                     text: translate('bankAccount.addBankAccount'),
-                    icon: Expensicons.Bank,
+                    icon: icons.Bank,
                     onSelected: () => {
                         if (payAsBusiness) {
                             navigateToBankAccountRoute(getPolicyID());
@@ -372,7 +368,7 @@ function SettlementButton({
                     ...(isCurrencySupported && isPolicyCurrencySupported ? [addBankAccountItem] : []),
                     {
                         text: translate('iou.payElsewhere', {formattedAmount: ''}),
-                        icon: Expensicons.Cash,
+                        icon: icons.Cash,
                         value: CONST.IOU.PAYMENT_TYPE.ELSEWHERE,
                         shouldUpdateSelectedIndex: true,
                         onSelected: () => {
@@ -415,6 +411,7 @@ function SettlementButton({
         // We need to be sure that onPress should be wrapped in an useCallback to prevent unnecessary updates.
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [
+        paymentMethods,
         isLoadingLastPaymentMethod,
         iouReport,
         translate,

src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

@@ -202,8 +202,8 @@ function BaseValidateCodeForm({
         if (!validateCodeSent) {
             return;
         }
-        // Delay prevents the input from gaining focus before the RHP slide out animation finishes,
-        // which would cause the wide RHP to flicker in the background.
+        // Delay prevents the input from gaining focus before the RHP slide-out animation finishes,
+        // which would cause issues with the RHP sliding out smoothly and flickering of the wide RHP in the background.
         if ((wideRHPRouteKeys.length > 0 && !isMobileSafari()) || isInPageModal) {
             focusTimeoutRef.current = setTimeout(() => {
                 inputValidateCodeRef.current?.clear();

src/hooks/useBulkPayOptions.ts

@@ -16,7 +16,7 @@ import {
     isInvoiceReport as isInvoiceReportUtil,
     isIOUReport as isIOUReportUtil,
 } from '@libs/ReportUtils';
-import {getSettlementButtonPaymentMethods} from '@libs/SettlementButtonUtils';
+import {useSettlementButtonPaymentMethods} from '@libs/SettlementButtonUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {AccountData, Policy} from '@src/types/onyx';
@@ -61,6 +61,7 @@ function useBulkPayOptions({
     const {accountID} = useCurrentUserPersonalDetails();
     const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET, {canBeMissing: true});
     const hasActivatedWallet = ([CONST.WALLET.TIER_NAME.GOLD, CONST.WALLET.TIER_NAME.PLATINUM] as string[]).includes(userWallet?.tierName ?? '');
+    const paymentMethods = useSettlementButtonPaymentMethods(hasActivatedWallet, translate);
     const [fundList] = useOnyx(ONYXKEYS.FUND_LIST, {canBeMissing: true});
     const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST, {canBeMissing: true});
     const policy = usePolicy(selectedPolicyID);
@@ -131,7 +132,6 @@ function useBulkPayOptions({
 
     const bulkPayButtonOptions = useMemo(() => {
         const buttonOptions = [];
-        const paymentMethods = getSettlementButtonPaymentMethods(icons, hasActivatedWallet, translate);
 
         if (!selectedReportID || !selectedPolicyID) {
             return undefined;
@@ -219,9 +219,9 @@ function useBulkPayOptions({
 
         return buttonOptions;
     }, [
-        hasActivatedWallet,
-        icons,
         translate,
+        icons.Building,
+        icons.User,
         selectedReportID,
         selectedPolicyID,
         shouldShowBusinessBankAccountOptions,
@@ -231,6 +231,7 @@ function useBulkPayOptions({
         isPersonalOnlyOption,
         shouldShowPayElsewhereOption,
         isInvoiceReport,
+        paymentMethods,
         personalBankAccountList.length,
         canUsePersonalBankAccount,
         activeAdminPolicies,

src/libs/SettlementButtonUtils.ts

@@ -1,8 +1,8 @@
-import * as Expensicons from '@components/Icon/Expensicons';
+import {useMemo} from 'react';
 import type {LocaleContextProps} from '@components/LocaleContextProvider';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
-import type IconAsset from '@src/types/utils/IconAsset';
 import Log from './Log';
 import Navigation from './Navigation/Navigation';
 
@@ -39,6 +39,10 @@ const getRouteMappings = (chatReportID: string, reportID?: string): RouteMapping
             check: (activeRoute: string) => activeRoute.includes(ROUTES.REPORT_WITH_ID.getRoute(chatReportID)),
             navigate: () => Navigation.navigate(ROUTES.REPORT_VERIFY_ACCOUNT.getRoute(chatReportID)),
         },
+        {
+            check: (activeRoute: string) => activeRoute.includes(ROUTES.SEARCH_REPORT.getRoute({reportID: chatReportID})),
+            navigate: () => Navigation.navigate(ROUTES.SEARCH_REPORT_VERIFY_ACCOUNT.getRoute(chatReportID)),
+        },
     ];
 
     if (reportID === undefined) {
@@ -80,28 +84,34 @@ const handleUnvalidatedUserNavigation = (chatReportID: string, reportID?: string
 /**
  * Retrieves SettlementButton payment methods.
  */
-const getSettlementButtonPaymentMethods = (icons: Record<'Building' | 'User', IconAsset>, hasActivatedWallet: boolean, translate: LocaleContextProps['translate']) => {
-    return {
-        [CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT]: {
-            text: hasActivatedWallet ? translate('iou.settleWallet', {formattedAmount: ''}) : translate('iou.settlePersonal', {formattedAmount: ''}),
-            icon: icons.User,
-            value: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT,
-            key: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT,
-        },
-        [CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT]: {
-            text: translate('iou.settleBusiness', {formattedAmount: ''}),
-            icon: icons.Building,
-            value: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT,
-            key: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT,
-        },
-        [CONST.IOU.PAYMENT_TYPE.ELSEWHERE]: {
-            text: translate('iou.payElsewhere', {formattedAmount: ''}),
-            icon: Expensicons.CheckCircle,
-            shouldUpdateSelectedIndex: false,
-            value: CONST.IOU.PAYMENT_TYPE.ELSEWHERE,
-            key: CONST.IOU.PAYMENT_TYPE.ELSEWHERE,
-        },
-    };
+const useSettlementButtonPaymentMethods = (hasActivatedWallet: boolean, translate: LocaleContextProps['translate']) => {
+    const icons = useMemoizedLazyExpensifyIcons(['User', 'Building', 'CheckCircle'] as const);
+
+    const paymentMethods = useMemo(() => {
+        return {
+            [CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT]: {
+                text: hasActivatedWallet ? translate('iou.settleWallet', {formattedAmount: ''}) : translate('iou.settlePersonal', {formattedAmount: ''}),
+                icon: icons.User,
+                value: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT,
+                key: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT,
+            },
+            [CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT]: {
+                text: translate('iou.settleBusiness', {formattedAmount: ''}),
+                icon: icons.Building,
+                value: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT,
+                key: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT,
+            },
+            [CONST.IOU.PAYMENT_TYPE.ELSEWHERE]: {
+                text: translate('iou.payElsewhere', {formattedAmount: ''}),
+                icon: icons.CheckCircle,
+                value: CONST.IOU.PAYMENT_TYPE.ELSEWHERE,
+                shouldUpdateSelectedIndex: false,
+                key: CONST.IOU.PAYMENT_TYPE.ELSEWHERE,
+            },
+        };
+    }, [hasActivatedWallet, translate, icons]);
+
+    return paymentMethods;
 };
 
-export {handleUnvalidatedUserNavigation, getSettlementButtonPaymentMethods};
+export {handleUnvalidatedUserNavigation, useSettlementButtonPaymentMethods};