diff --git a/src/components/SettlementButton/index.tsx b/src/components/SettlementButton/index.tsx index eade455555a7..5b4a4840ba6d 100644 --- a/src/components/SettlementButton/index.tsx +++ b/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> = []; - 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, diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx index fbaf616fb96c..62fa9a1e17d2 100644 --- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/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(); diff --git a/src/hooks/useBulkPayOptions.ts b/src/hooks/useBulkPayOptions.ts index 38cbe6d1096c..82ad2e3cfa3e 100644 --- a/src/hooks/useBulkPayOptions.ts +++ b/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, diff --git a/src/libs/SettlementButtonUtils.ts b/src/libs/SettlementButtonUtils.ts index 60427444ea45..246f9d985676 100644 --- a/src/libs/SettlementButtonUtils.ts +++ b/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}; diff --git a/tests/unit/SettlementButtonUtilsTest.ts b/tests/unit/SettlementButtonUtilsTest.ts index f85d7cb9e021..6c7f6b06b8f5 100644 --- a/tests/unit/SettlementButtonUtilsTest.ts +++ b/tests/unit/SettlementButtonUtilsTest.ts @@ -1,10 +1,8 @@ import {renderHook} from '@testing-library/react-native'; -// eslint-disable-next-line no-restricted-imports -import * as Expensicons from '@components/Icon/Expensicons'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; import Navigation from '@libs/Navigation/Navigation'; -import {getSettlementButtonPaymentMethods, handleUnvalidatedUserNavigation} from '@libs/SettlementButtonUtils'; +import {handleUnvalidatedUserNavigation, useSettlementButtonPaymentMethods} from '@libs/SettlementButtonUtils'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; @@ -36,10 +34,15 @@ describe('handleUnvalidatedUserNavigation', () => { expectedRouteToNavigate: ROUTES.SEARCH_ROOT_VERIFY_ACCOUNT, }, { - description: 'navigate to ROUTES.SEARCH_REPORT_VERIFY_ACCOUNT when active route is ROUTES.SEARCH_REPORT', + description: 'navigate to ROUTES.SEARCH_REPORT_VERIFY_ACCOUNT.getRoute(reportID) when active route is ROUTES.SEARCH_REPORT.getRoute(reportID)', mockActiveRoute: ROUTES.SEARCH_REPORT.getRoute({reportID: mockReportID}), expectedRouteToNavigate: ROUTES.SEARCH_REPORT_VERIFY_ACCOUNT.getRoute(mockReportID), }, + { + description: 'navigate to ROUTES.SEARCH_REPORT_VERIFY_ACCOUNT.getRoute(chatReportID) when active route is ROUTES.SEARCH_REPORT.getRoute({reportID: chatReportID})', + mockActiveRoute: ROUTES.SEARCH_REPORT.getRoute({reportID: mockChatReportID}), + expectedRouteToNavigate: ROUTES.SEARCH_REPORT_VERIFY_ACCOUNT.getRoute(mockChatReportID), + }, { description: 'navigate to ROUTES.SEARCH_MONEY_REQUEST_REPORT_VERIFY_ACCOUNT when active route is ROUTES.SEARCH_MONEY_REQUEST_REPORT', mockActiveRoute: ROUTES.SEARCH_MONEY_REQUEST_REPORT.getRoute({reportID: mockReportID}), @@ -110,17 +113,17 @@ describe('handleUnvalidatedUserNavigation', () => { }); }); -describe('getSettlementButtonPaymentMethods', () => { +describe('useSettlementButtonPaymentMethods', () => { const {translate} = useLocalize(); + const {result: icons} = renderHook(() => useMemoizedLazyExpensifyIcons(['User', 'Building', 'CheckCircle'] as const)); beforeEach(() => { jest.clearAllMocks(); }); it('should return payment method with wallet for PERSONAL_BANK_ACCOUNT when hasActivatedWallet is true', () => { - const {result: icons} = renderHook(() => useMemoizedLazyExpensifyIcons(['Building', 'User'])); - const result = getSettlementButtonPaymentMethods(icons.current, true, translate); - expect(result[CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT]).toEqual({ + const {result} = renderHook(() => useSettlementButtonPaymentMethods(true, translate)); + expect(result.current[CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT]).toEqual({ text: translate('iou.settleWallet', {formattedAmount: ''}), icon: icons.current.User, value: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT, @@ -129,9 +132,8 @@ describe('getSettlementButtonPaymentMethods', () => { }); it('should return payment method with personal bank account for PERSONAL_BANK_ACCOUNT when hasActivatedWallet is false', () => { - const {result: icons} = renderHook(() => useMemoizedLazyExpensifyIcons(['Building', 'User'])); - const result = getSettlementButtonPaymentMethods(icons.current, false, translate); - expect(result[CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT]).toEqual({ + const {result} = renderHook(() => useSettlementButtonPaymentMethods(false, translate)); + expect(result.current[CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT]).toEqual({ text: translate('iou.settlePersonal', {formattedAmount: ''}), icon: icons.current.User, value: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT, @@ -140,9 +142,8 @@ describe('getSettlementButtonPaymentMethods', () => { }); it('should return payment method with business bank account for BUSINESS_BANK_ACCOUNT', () => { - const {result: icons} = renderHook(() => useMemoizedLazyExpensifyIcons(['Building', 'User'])); - const result = getSettlementButtonPaymentMethods(icons.current, true, translate); - expect(result[CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT]).toEqual({ + const {result} = renderHook(() => useSettlementButtonPaymentMethods(true, translate)); + expect(result.current[CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT]).toEqual({ text: translate('iou.settleBusiness', {formattedAmount: ''}), icon: icons.current.Building, value: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT, @@ -151,11 +152,10 @@ describe('getSettlementButtonPaymentMethods', () => { }); it('should return payment method elsewhere for ELSEWHERE', () => { - const {result: icons} = renderHook(() => useMemoizedLazyExpensifyIcons(['Building', 'User'])); - const result = getSettlementButtonPaymentMethods(icons.current, true, translate); - expect(result[CONST.IOU.PAYMENT_TYPE.ELSEWHERE]).toEqual({ + const {result} = renderHook(() => useSettlementButtonPaymentMethods(true, translate)); + expect(result.current[CONST.IOU.PAYMENT_TYPE.ELSEWHERE]).toEqual({ text: translate('iou.payElsewhere', {formattedAmount: ''}), - icon: Expensicons.CheckCircle, + icon: icons.current.CheckCircle, value: CONST.IOU.PAYMENT_TYPE.ELSEWHERE, shouldUpdateSelectedIndex: false, key: CONST.IOU.PAYMENT_TYPE.ELSEWHERE, @@ -163,66 +163,60 @@ describe('getSettlementButtonPaymentMethods', () => { }); it('should return all three payment methods', () => { - const {result: icons} = renderHook(() => useMemoizedLazyExpensifyIcons(['Building', 'User'])); - const result = getSettlementButtonPaymentMethods(icons.current, true, translate); - expect(Object.keys(result)).toHaveLength(3); - expect(result).toHaveProperty(CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT); - expect(result).toHaveProperty(CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT); - expect(result).toHaveProperty(CONST.IOU.PAYMENT_TYPE.ELSEWHERE); + const {result} = renderHook(() => useSettlementButtonPaymentMethods(true, translate)); + expect(Object.keys(result.current)).toHaveLength(3); + expect(result.current).toHaveProperty(CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT); + expect(result.current).toHaveProperty(CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT); + expect(result.current).toHaveProperty(CONST.IOU.PAYMENT_TYPE.ELSEWHERE); }); it.each([ {hasActivatedWallet: true, expectedPersonalKey: 'iou.settleWallet'}, {hasActivatedWallet: false, expectedPersonalKey: 'iou.settlePersonal'}, ])('should use correct texts for each payment method when hasActivatedWallet is $hasActivatedWallet', ({hasActivatedWallet, expectedPersonalKey}) => { - const {result: icons} = renderHook(() => useMemoizedLazyExpensifyIcons(['Building', 'User'])); - const result = getSettlementButtonPaymentMethods(icons.current, hasActivatedWallet, translate); + const {result} = renderHook(() => useSettlementButtonPaymentMethods(hasActivatedWallet, translate)); expect(translate).toHaveBeenCalledTimes(3); expect(translate).toHaveBeenCalledWith(expectedPersonalKey, {formattedAmount: ''}); expect(translate).toHaveBeenCalledWith('iou.settleBusiness', {formattedAmount: ''}); expect(translate).toHaveBeenCalledWith('iou.payElsewhere', {formattedAmount: ''}); - expect(result[CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT].text).toBe(expectedPersonalKey); - expect(result[CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT].text).toBe('iou.settleBusiness'); - expect(result[CONST.IOU.PAYMENT_TYPE.ELSEWHERE].text).toBe('iou.payElsewhere'); + expect(result.current[CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT].text).toBe(expectedPersonalKey); + expect(result.current[CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT].text).toBe('iou.settleBusiness'); + expect(result.current[CONST.IOU.PAYMENT_TYPE.ELSEWHERE].text).toBe('iou.payElsewhere'); }); it.each([ { method: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT, + expectedIcon: icons.current.User, expectedValue: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT, description: 'PERSONAL_BANK_ACCOUNT', }, { method: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT, + expectedIcon: icons.current.Building, expectedValue: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT, description: 'BUSINESS_BANK_ACCOUNT', }, { method: CONST.IOU.PAYMENT_TYPE.ELSEWHERE, + expectedIcon: icons.current.CheckCircle, expectedValue: CONST.IOU.PAYMENT_TYPE.ELSEWHERE, description: 'ELSEWHERE', }, - ])('should use correct icon and value for $description regardless of hasActivatedWallet', ({method, expectedValue}) => { - const {result: icons} = renderHook(() => useMemoizedLazyExpensifyIcons(['Building', 'User'])); - const expectedIcons = { - [CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT]: icons.current.User, - [CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT]: icons.current.Building, - [CONST.IOU.PAYMENT_TYPE.ELSEWHERE]: Expensicons.CheckCircle, - }; - const resultWithWallet = getSettlementButtonPaymentMethods(icons.current, true, translate); - const resultWithoutWallet = getSettlementButtonPaymentMethods(icons.current, false, translate); - for (const result of [resultWithWallet, resultWithoutWallet]) { + ])('should use correct icon and value for $description regardless of hasActivatedWallet', ({method, expectedIcon, expectedValue}) => { + const {result: resultWithWallet} = renderHook(() => useSettlementButtonPaymentMethods(true, translate)); + const {result: resultWithoutWallet} = renderHook(() => useSettlementButtonPaymentMethods(false, translate)); + for (const result of [resultWithWallet.current, resultWithoutWallet.current]) { const paymentMethod = result[method]; - expect(paymentMethod.icon).toBe(expectedIcons[expectedValue]); - expect(paymentMethod.value).toBe(expectedValue); + expect(paymentMethod.icon).toStrictEqual(expectedIcon); + expect(paymentMethod.value).toStrictEqual(expectedValue); } }); it('should only set shouldUpdateSelectedIndex for elsewhere payment type', () => { - const {result: icons} = renderHook(() => useMemoizedLazyExpensifyIcons(['Building', 'User'])); - const result = getSettlementButtonPaymentMethods(icons.current, true, translate); - expect(result[CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT]).not.toHaveProperty('shouldUpdateSelectedIndex'); - expect(result[CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT]).not.toHaveProperty('shouldUpdateSelectedIndex'); - expect(result[CONST.IOU.PAYMENT_TYPE.ELSEWHERE].shouldUpdateSelectedIndex).toBe(false); + const {result} = renderHook(() => useSettlementButtonPaymentMethods(true, translate)); + expect(result.current[CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT]).not.toHaveProperty('shouldUpdateSelectedIndex'); + expect(result.current[CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT]).not.toHaveProperty('shouldUpdateSelectedIndex'); + expect(result.current[CONST.IOU.PAYMENT_TYPE.ELSEWHERE].shouldUpdateSelectedIndex).toBe(false); }); });