Clean up SettlementButton

[roryabraham]

Coming from #78915...

Problem

The SettlementButton component is quite complex (and important!), and I struggled to review changes made to part of it due to its complexity.

Solution

Let's clean up this important component! In order:

1. Add automated UI tests covering the business logic for this component. customText and secondLineText alone have many permutations of conditions and expected results. These can be captured and documented by automated tests, which will help developers understand this component and more confidently make changes.
2. Remove manual memoization to make it compile with React Compiler. There are 25 instances of this warning:

This component hasn't been memoized by React Compiler.
Reason: Existing memoization could not be preserved

This manual memoization is making the component more complex and longer.

1. (exploration needed) Break it down into smaller, distinct components (by report type?) (i.e: using composition). It looks like there's significant differences in behavior for invoices vs expense reports vs IOU reports. Rather than having all three wrapped up in one component, let's DRY the common parts into a shared hook and keep the other parts separate, using the correct component for each type.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @thesahindia (External)

[melvin-bot]

Triggered auto assignment to @stephanieelliott (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[roryabraham]

The primary goal/requirement of this issue is Test Coverage - the other refactorings are kind of a bonus and secondary to the tests.

[abbasifaizan70]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Primary Issue: There is insufficient test coverage for the payer selection background highlight functionality in the Workflows page. We need comprehensive tests to verify that selected items display the correct background highlight.

Secondary Issue: When selecting a payer in the Workflows page after completing the bank account setup flow, the selected item is missing its background highlight. Only the checkmark icon is visible, but no background color is applied to indicate which item is currently selected.

What is the root cause of that problem?

The root cause is in BaseListItem.tsx where the background color style (getItemBackgroundColorStyle) is only applied when the item is focused (isFocused), not when it's selected (item.isSelected).

File: App/src/components/SelectionListWithSections/BaseListItem.tsx

The problematic code is at lines 119-124:

style={[
    pressableStyle,
    isFocused &&
        shouldHighlightSelectedItem &&
        StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
]}

And again at lines 134-139:

style={[
    wrapperStyle,
    isFocused &&
        shouldHighlightSelectedItem &&
        StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
]}

The Issue:

The condition isFocused && means the getItemBackgroundColorStyle function is only called when the item is focused. This prevents selected items from showing their background highlight when they're not actively focused.

However, the getItemBackgroundColorStyle function itself is already designed to properly handle both selected and focused states with correct priority:

File: App/src/styles/utils/index.ts (lines 1232-1246)

function getItemBackgroundColorStyle(isSelected: boolean, isFocused: boolean, isDisabled: boolean, selectedBG: string, focusedBG: string): ViewStyle {
    if (isSelected) {
        return {backgroundColor: selectedBG};
    }
    
    if (isDisabled) {
        return {backgroundColor: undefined};
    }

    if (isFocused) {
        return {backgroundColor: focusedBG};
    }

    return {};
}

As you can see, the function returns:

• selectedBG when isSelected is true (highest priority)
• undefined for disabled items
• focusedBG when isFocused is true
• Empty object otherwise

The logic is correct, but it's never reached for selected items because the function isn't called unless isFocused is true. This means selected but unfocused items don't get their background color applied.

What changes do you think we should make in order to solve the problem?

PRIMARY: Add Comprehensive Test Coverage

We need to add tests for BaseListItem.tsx and WorkspaceWorkflowsPayerPage.tsx to ensure the background highlight behavior is properly tested.

Test File to Create: App/tests/unit/components/SelectionListWithSections/BaseListItemTest.tsx

Tests to Add:

1. Test: Selected item shows activeComponentBG background

   • Verify that when item.isSelected is true, the item displays theme.activeComponentBG
   • Verify this works even when isFocused is false

2. Test: Focused but not selected item shows hoverComponentBG

   • Verify that when isFocused is true but item.isSelected is false, the item displays theme.hoverComponentBG

3. Test: Selected AND focused item shows activeComponentBG

   • Verify that when both item.isSelected and isFocused are true, selection takes priority and displays theme.activeComponentBG

4. Test: Disabled item shows no background

   • Verify that when item.isDisabled is true, no background color is applied

5. Test: Checkmark icon displays for selected items

   • Verify that the checkmark icon is rendered when item.isSelected is true

6. Test: shouldHighlightSelectedItem prop controls background rendering

   • Verify that when shouldHighlightSelectedItem is false, no background is applied regardless of selection state

Test File to Create: App/tests/unit/pages/workspace/workflows/WorkspaceWorkflowsPayerPageTest.tsx

Tests to Add:

1. Test: Current payer is marked as selected

   • Verify that the authorized payer (matching policy.achAccount.reimburser) has isSelected: true

2. Test: Selected payer has background highlight

   • Verify that the selected payer item renders with the correct background color style

3. Test: Selecting a new payer updates the selection

   • Verify that calling setPolicyAuthorizedPayer updates the selection and applies the highlight to the new payer

4. Test: Only one payer can be selected at a time

   • Verify that when a new payer is selected, the previous selection is cleared

Example Test Implementation:

// App/tests/unit/components/SelectionListWithSections/BaseListItemTest.tsx
import React from 'react';
import {render} from '@testing-library/react-native';
import BaseListItem from '@components/SelectionListWithSections/BaseListItem';
import CONST from '@src/CONST';

describe('BaseListItem - Background Highlight', () => {
    const mockItem = {
        text: 'Test Item',
        keyForList: 'test-1',
        isSelected: false,
        isDisabled: false,
    };

    it('should apply activeComponentBG when item is selected', () => {
        const {getByTestId} = render(
            <BaseListItem
                item={{...mockItem, isSelected: true}}
                isFocused={false}
                shouldHighlightSelectedItem={true}
                onSelectRow={() => {}}
            />
        );
        
        const listItem = getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}test-1`);
        const styles = listItem.props.style;
        
        // Verify activeComponentBG is applied
        expect(styles).toContainEqual(
            expect.objectContaining({backgroundColor: expect.any(String)})
        );
    });

    it('should apply hoverComponentBG when item is focused but not selected', () => {
        const {getByTestId} = render(
            <BaseListItem
                item={{...mockItem, isSelected: false}}
                isFocused={true}
                shouldHighlightSelectedItem={true}
                onSelectRow={() => {}}
            />
        );
        
        const listItem = getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}test-1`);
        const styles = listItem.props.style;
        
        expect(styles).toContainEqual(
            expect.objectContaining({backgroundColor: expect.any(String)})
        );
    });

    it('should prioritize selected background over focused background', () => {
        const {getByTestId} = render(
            <BaseListItem
                item={{...mockItem, isSelected: true}}
                isFocused={true}
                shouldHighlightSelectedItem={true}
                onSelectRow={() => {}}
            />
        );
        
        const listItem = getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}test-1`);
        // Should apply activeComponentBG, not hoverComponentBG
        expect(listItem).toBeDefined();
    });

    it('should display checkmark icon when item is selected', () => {
        const {getByLabelText} = render(
            <BaseListItem
                item={{...mockItem, isSelected: true}}
                isFocused={false}
                shouldHighlightSelectedItem={true}
                shouldUseDefaultRightHandSideCheckmark={true}
                onSelectRow={() => {}}
            />
        );
        
        // Verify checkmark is rendered
        const checkmark = getByLabelText('Checkmark');
        expect(checkmark).toBeDefined();
    });

    it('should not apply background when shouldHighlightSelectedItem is false', () => {
        const {getByTestId} = render(
            <BaseListItem
                item={{...mockItem, isSelected: true}}
                isFocused={false}
                shouldHighlightSelectedItem={false}
                onSelectRow={() => {}}
            />
        );
        
        const listItem = getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}test-1`);
        const styles = listItem.props.style;
        
        // Should not have background color
        expect(styles).not.toContainEqual(
            expect.objectContaining({backgroundColor: expect.any(String)})
        );
    });
});

SECONDARY: Fix the Visual Bug

Update the condition in BaseListItem.tsx to call getItemBackgroundColorStyle when either the item is focused OR selected.

File: App/src/components/SelectionListWithSections/BaseListItem.tsx

Change 1: Lines 119-124 (Pressable style)

// Before
style={[
    pressableStyle,
    isFocused &&
        shouldHighlightSelectedItem &&
        StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
]}

// After
style={[
    pressableStyle,
    (isFocused || item.isSelected) &&
        shouldHighlightSelectedItem &&
        StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
]}

Change 2: Lines 134-139 (Wrapper style)

// Before
style={[
    wrapperStyle,
    isFocused &&
        shouldHighlightSelectedItem &&
        StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
]}

// After
style={[
    wrapperStyle,
    (isFocused || item.isSelected) &&
        shouldHighlightSelectedItem &&
        StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
]}

[roryabraham]

@abbasifaizan70 your proposal focuses too much on one specific aspect of this component (background highlight color). While I'm glad you found a bug, I'd suggest that you report it separately or incorporate it into a more comprehensive proposal to add test coverage and clean up the implementation of SettlementButton

[roryabraham]

Interestingly, your proposal doesn't actually even target the same component referenced in the issue description, so I'm going to mark it as off-topic

[TaduJR]

🚨 Edited by proposal-police: This proposal was edited at 2026-01-12 21:03:56 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

The SettlementButton component has 0% test coverage, 25 React Compiler warnings, and complex conditional logic that is difficult to review and maintain.

What is the root cause of that problem?

The customText and secondLineText props have complex conditional logic with many branches that lack test coverage. Additionally, paymentButtonOptions contains ~200 lines of business logic determining which payment options appear.

getCustomText() decision tree (3 branches):

App/src/components/SettlementButton/index.tsx

Lines 492 to 502 in 4947e55

	const getCustomText = () => {
	if (shouldUseShortForm) {
	return translate('iou.pay');
	}
	if (lastPaymentMethod === CONST.IOU.PAYMENT_TYPE.ELSEWHERE) {
	return translate('iou.payElsewhere', {formattedAmount});
	}
	return translate('iou.settlePayment', {formattedAmount});
	};

Condition	Result
shouldUseShortForm	'iou.pay'
lastPaymentMethod === ELSEWHERE	'iou.payElsewhere'
default	'iou.settlePayment'

getSecondaryText() decision tree:

App/src/components/SettlementButton/index.tsx

Lines 504 to 551 in 4947e55

	const getSecondaryText = (): string | undefined => {
	if (
	shouldUseShortForm ||
	lastPaymentMethod === CONST.IOU.PAYMENT_TYPE.ELSEWHERE ||
	(paymentButtonOptions.length === 1 && paymentButtonOptions.every((option) => option.value === CONST.IOU.PAYMENT_TYPE.ELSEWHERE)) ||
	(shouldHidePaymentOptions && (shouldShowApproveButton || onlyShowPayElsewhere))
	) {
	return undefined;
	}
	if (lastPaymentPolicy) {
	return lastPaymentPolicy.name;
	}
	const bankAccountToDisplay = hasIntentToPay
	? ((formattedPaymentMethods.find((method) => method.methodID === policy?.achAccount?.bankAccountID) ?? formattedPaymentMethods.at(0)) as BankAccount)
	: bankAccount;
	if (lastPaymentMethod === CONST.IOU.PAYMENT_TYPE.EXPENSIFY || (hasIntentToPay && (isExpenseReport || isInvoiceReport))) {
	if (isInvoiceReport) {
	const isBusinessBankAccount = bankAccountToDisplay?.accountData?.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS;
	return translate(isBusinessBankAccount ? 'iou.invoiceBusinessBank' : 'iou.invoicePersonalBank', bankAccountToDisplay?.accountData?.accountNumber?.slice(-4) ?? '');
	}
	if (!personalBankAccountList.length) {
	return;
	}
	return translate('common.wallet');
	}
	if ((lastPaymentMethod === CONST.IOU.PAYMENT_TYPE.VBBA || hasIntentToPay) && !!policy?.achAccount) {
	if (policy?.achAccount?.accountNumber) {
	return translate('paymentMethodList.bankAccountLastFour', policy?.achAccount?.accountNumber?.slice(-4));
	}
	if (!bankAccountToDisplay?.accountData?.accountNumber) {
	return;
	}
	return translate('paymentMethodList.bankAccountLastFour', bankAccountToDisplay?.accountData?.accountNumber?.slice(-4));
	}
	if (bankAccount?.accountData?.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS && bankAccount?.methodID === policy?.achAccount?.bankAccountID && isExpenseReportUtil(iouReport)) {
	return translate('paymentMethodList.bankAccountLastFour', bankAccount?.accountData?.accountNumber?.slice(-4) ?? '');
	}
	return undefined;
	};

#	Condition	Result
1	shouldUseShortForm	undefined
2	lastPaymentMethod === ELSEWHERE	undefined
3	Only ELSEWHERE options available	undefined
4	shouldHidePaymentOptions && (shouldShowApproveButton || onlyShowPayElsewhere)	undefined
5	lastPaymentPolicy exists	lastPaymentPolicy.name
6	(EXPENSIFY || hasIntentToPay) && isInvoiceReport + Business bank	'iou.invoiceBusinessBank'
7	(EXPENSIFY || hasIntentToPay) && isInvoiceReport + Personal bank	'iou.invoicePersonalBank'
8	(EXPENSIFY || hasIntentToPay) && (isExpenseReport || isInvoiceReport) + no personal banks	undefined
9	(EXPENSIFY || hasIntentToPay) && (isExpenseReport || isInvoiceReport) + has personal banks	'common.wallet'
10	lastPaymentMethod === EXPENSIFY + IOU report + has personal banks	'common.wallet'
11	(VBBA || hasIntentToPay) && policy.achAccount.accountNumber	'bankAccountLastFour' (policy)
12	(VBBA || hasIntentToPay) && policy.achAccount + no display account	undefined
13	(VBBA || hasIntentToPay) && policy.achAccount + has display account	'bankAccountLastFour' (display)
14	Business bank + matches policy + isExpenseReport	'bankAccountLastFour'
15	default	undefined

paymentButtonOptions key conditions:

App/src/components/SettlementButton/index.tsx

Lines 248 to 444 in 4947e55

	const paymentButtonOptions = useMemo(() => {
	const buttonOptions: Array<DropdownOption<string>> = [];
	const shortFormPayElsewhereButton = {
	text: translate('iou.pay'),
	icon: icons.CheckCircle,
	value: CONST.IOU.PAYMENT_TYPE.ELSEWHERE,
	shouldUpdateSelectedIndex: false,
	};
	const approveButtonOption = {
	text: translate('iou.approve', {formattedAmount}),
	icon: icons.ThumbsUp,
	value: CONST.IOU.REPORT_ACTION_TYPE.APPROVE,
	disabled: !!shouldDisableApproveButton,
	};
	const canUseWallet = !isExpenseReport && !isInvoiceReport && isCurrencySupportedForGlobalReimbursement(currency as CurrencyType);
	const canUseBusinessBankAccount = isExpenseReport || (isIOUReport(iouReport) && reportID && !hasRequestFromCurrentAccount(reportID, accountID ?? CONST.DEFAULT_NUMBER_ID));
	const canUsePersonalBankAccount = shouldShowPersonalBankAccountOption || isIOUReport(iouReport);
	const isPersonalOnlyOption = canUsePersonalBankAccount && !canUseBusinessBankAccount;
	// Only show the Approve button if the user cannot pay the expense
	if (shouldHidePaymentOptions && shouldShowApproveButton) {
	return [approveButtonOption];
	}
	if (onlyShowPayElsewhere) {
	return [shouldUseShortForm ? shortFormPayElsewhereButton : paymentMethods[CONST.IOU.PAYMENT_TYPE.ELSEWHERE]];
	}
	// To achieve the one tap pay experience we need to choose the correct payment type as default.
	if (canUseWallet) {
	if (personalBankAccountList.length && canUsePersonalBankAccount) {
	buttonOptions.push({
	text: translate('iou.settleWallet', {formattedAmount: ''}),
	value: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT,
	icon: icons.Wallet,
	});
	} else if (canUsePersonalBankAccount) {
	buttonOptions.push(paymentMethods[CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT]);
	}
	if (activeAdminPolicies.length === 0 && !isPersonalOnlyOption) {
	buttonOptions.push(paymentMethods[CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT]);
	}
	}
	const shouldShowBusinessBankAccountOptions = isExpenseReport && shouldShowPayWithExpensifyOption && !isPersonalOnlyOption;
	if (shouldShowBusinessBankAccountOptions) {
	if (!isEmpty(latestBankItem) && latestBankItem) {
	buttonOptions.push({
	text: latestBankItem.at(0)?.text ?? '',
	icon: latestBankItem.at(0)?.icon,
	additionalIconStyles: latestBankItem.at(0)?.iconStyles,
	iconWidth: latestBankItem.at(0)?.iconSize,
	iconHeight: latestBankItem.at(0)?.iconSize,
	value: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT,
	description: latestBankItem.at(0)?.description,
	});
	} else {
	buttonOptions.push(paymentMethods[CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT]);
	}
	}
	if ((hasMultiplePolicies || hasSinglePolicy) && canUseWallet && !isPersonalOnlyOption) {
	for (const p of activeAdminPolicies) {
	const policyName = p.name;
	buttonOptions.push({
	text: translate('iou.payWithPolicy', {policyName: truncate(policyName, {length: CONST.ADDITIONAL_ALLOWED_CHARACTERS}), formattedAmount: ''}),
	icon: icons.Building,
	value: p.id,
	shouldUpdateSelectedIndex: false,
	});
	}
	}
	if (shouldShowPayElsewhereOption) {
	buttonOptions.push({
	...paymentMethods[CONST.IOU.PAYMENT_TYPE.ELSEWHERE],
	...(!buttonOptions.length && shouldUseShortForm ? {text: translate('iou.pay')} : {}),
	});
	}
	if (isInvoiceReport) {
	const isCurrencySupported = isCurrencySupportedForGlobalReimbursement(currency as CurrencyType);
	const hasActivePolicyAsAdmin = !!activePolicy && isPolicyAdmin(activePolicy) && isPaidGroupPolicy(activePolicy);
	const isActivePolicyCurrencySupported = isCurrencySupportedForDirectReimbursement(activePolicy?.outputCurrency ?? '');
	const isUserCurrencySupported = isCurrencySupportedForDirectReimbursement(personalPolicy?.outputCurrency ?? CONST.CURRENCY.USD);
	const isInvoiceReceiverPolicyCurrencySupported = isCurrencySupportedForDirectReimbursement(invoiceReceiverPolicy?.outputCurrency ?? '');
	const canUseActivePolicy = hasActivePolicyAsAdmin && isActivePolicyCurrencySupported;
	// For business invoice receivers, we use the receiver policy to pay, so validate the receiver policy's currency
	// For individual receivers, allow if user has an active admin policy with supported currency OR user's local currency is supported
	const isPolicyCurrencySupported = invoiceReceiverPolicy ? isInvoiceReceiverPolicyCurrencySupported : canUseActivePolicy || isUserCurrencySupported;
	const getInvoicesOptions = (payAsBusiness: boolean) => {
	const getPolicyID = () => {
	if (chatReport?.invoiceReceiver?.type === CONST.REPORT.INVOICE_RECEIVER_TYPE.BUSINESS) {
	return chatReport?.invoiceReceiver?.policyID;
	}
	if (canUseActivePolicy) {
	return activePolicy.id;
	}
	return createWorkspace({
	introSelected,
	activePolicyID,
	currentUserAccountIDParam: currentUserPersonalDetails.accountID,
	currentUserEmailParam: currentUserPersonalDetails.email ?? '',
	}).policyID;
	};
	const addBankAccountItem = {
	text: translate('bankAccount.addBankAccount'),
	icon: icons.Bank,
	onSelected: () => {
	if (payAsBusiness) {
	navigateToBankAccountRoute(getPolicyID());
	} else {
	Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT.route);
	}
	},
	value: CONST.IOU.PAYMENT_TYPE.ELSEWHERE,
	};
	return [
	...(isCurrencySupported ? getPaymentSubitems(payAsBusiness) : []),
	...(isCurrencySupported && isPolicyCurrencySupported ? [addBankAccountItem] : []),
	{
	text: translate('iou.payElsewhere', {formattedAmount: ''}),
	icon: icons.Cash,
	value: CONST.IOU.PAYMENT_TYPE.ELSEWHERE,
	shouldUpdateSelectedIndex: true,
	onSelected: () => {
	if (checkForNecessaryAction()) {
	return;
	}
	onPress(CONST.IOU.PAYMENT_TYPE.ELSEWHERE, payAsBusiness, undefined);
	},
	},
	];
	};
	if (isIndividualInvoiceRoomUtil(chatReport)) {
	buttonOptions.push({
	text: translate('iou.settlePersonal', {formattedAmount}),
	icon: icons.User,
	value: hasIntentToPay ? CONST.IOU.PAYMENT_TYPE.EXPENSIFY : (lastPaymentMethod ?? CONST.IOU.PAYMENT_TYPE.ELSEWHERE),
	backButtonText: translate('iou.individual'),
	subMenuItems: getInvoicesOptions(false),
	});
	buttonOptions.push({
	text: translate('iou.settleBusiness', {formattedAmount}),
	icon: icons.Building,
	value: hasIntentToPay ? CONST.IOU.PAYMENT_TYPE.EXPENSIFY : (lastPaymentMethod ?? CONST.IOU.PAYMENT_TYPE.ELSEWHERE),
	backButtonText: translate('iou.business'),
	subMenuItems: getInvoicesOptions(true),
	});
	} else {
	// If there is pay as business option, we should show the submenu items instead.
	buttonOptions.push(...getInvoicesOptions(true));
	}
	}
	if (shouldShowApproveButton) {
	buttonOptions.push(approveButtonOption);
	}
	return buttonOptions;
	// We don't want to reorder the options when the preferred payment method changes while the button is still visible except for component initialization when the last payment method is not initialized yet.
	// We need to be sure that onPress should be wrapped in an useCallback to prevent unnecessary updates.
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [
	paymentMethods,
	isLoadingLastPaymentMethod,
	iouReport,
	translate,
	formattedAmount,
	shouldDisableApproveButton,
	isInvoiceReport,
	currency,
	shouldHidePaymentOptions,
	shouldShowApproveButton,
	shouldShowPayWithExpensifyOption,
	shouldShowPayElsewhereOption,
	chatReport,
	onPress,
	onlyShowPayElsewhere,
	latestBankItem,
	activeAdminPolicies,
	checkForNecessaryAction,
	icons,
	]);

Condition	Options Shown
canUseWallet (IOU only, currency supported)	Wallet option
canUseBusinessBankAccount (expense/IOU)	Business bank options
canUsePersonalBankAccount	Personal bank options
shouldShowApproveButton && shouldHidePaymentOptions	Approve only
onlyShowPayElsewhere	Pay elsewhere only
isInvoiceReport	Invoice-specific options

What changes do you think we should make in order to solve the problem?

1. Add UI Tests with @testing-library/react-native (Primary)

Create tests/ui/components/SettlementButtonTest.tsx following the existing pattern in IOURequestStepConfirmationPageTest.tsx:

https://github.com/Expensify/App/blob/4947e55428f663a0d7e00bbfced3da4e985e2989/tests/ui/components/IOURequestStepConfirmationPageTest.tsx

Test setup with Onyx mocking:

import {render, screen} from '@testing-library/react-native';
import Onyx from 'react-native-onyx';
import SettlementButton from '@components/SettlementButton';
import ONYXKEYS from '@src/ONYXKEYS';
import CONST from '@src/CONST';
import {translateLocal} from '../../utils/TestHelper';
import waitForBatchedUpdatesWithAct from '../../utils/waitForBatchedUpdatesWithAct';

// Mock Navigation
jest.mock('@libs/Navigation/Navigation', () => ({
    navigate: jest.fn(),
    goBack: jest.fn(),
}));

// Wrapper with required providers
function SettlementButtonWrapper({children}: {children: React.ReactNode}) {
    return (
        <LocaleContextProvider>
            {children}
        </LocaleContextProvider>
    );
}

describe('SettlementButton', () => {
    beforeEach(() => {
        Onyx.init({keys: ONYXKEYS});
    });

    afterEach(() => {
        Onyx.clear();
        jest.clearAllMocks();
    });
});

Test cases for button text (customText):

describe('customText', () => {
    it('displays "Pay" when shouldUseShortForm is true', async () => {
        render(
            <SettlementButtonWrapper>
                <SettlementButton
                    shouldUseShortForm
                    onPress={jest.fn()}
                    // ... required props
                />
            </SettlementButtonWrapper>
        );
        await waitForBatchedUpdatesWithAct();
        expect(screen.getByText(translateLocal('iou.pay'))).toBeTruthy();
    });

    it('displays "Pay elsewhere" for ELSEWHERE payment method', async () => {
        await act(async () => {
            await Onyx.merge(ONYXKEYS.NVP_LAST_PAYMENT_METHOD, {
                [policyID]: {[reportType]: CONST.IOU.PAYMENT_TYPE.ELSEWHERE}
            });
        });
        render(<SettlementButtonWrapper><SettlementButton {...props} /></SettlementButtonWrapper>);
        await waitForBatchedUpdatesWithAct();
        expect(screen.getByText(translateLocal('iou.payElsewhere', {formattedAmount: '$100'}))).toBeTruthy();
    });
});

Test cases for subtitle (secondLineText) by report type:

describe('secondLineText', () => {
    describe('Expense Reports', () => {
        it('shows bank account for expense report with policy achAccount', async () => {
            await act(async () => {
                await Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${POLICY_ID}`, {
                    achAccount: {accountNumber: '1234', bankAccountID: 1}
                });
                await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${REPORT_ID}`, {
                    type: CONST.REPORT.TYPE.EXPENSE, policyID: POLICY_ID
                });
            });
            render(<SettlementButtonWrapper><SettlementButton {...expenseReportProps} /></SettlementButtonWrapper>);
            await waitForBatchedUpdatesWithAct();
            expect(screen.getByText(/1234/)).toBeTruthy(); // Bank account last 4
        });
    });

    describe('Invoice Reports', () => {
        it('shows business bank label for invoice with business account', async () => {
            await act(async () => {
                await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${REPORT_ID}`, {
                    type: CONST.REPORT.TYPE.INVOICE
                });
                // Set up business bank account
            });
            render(<SettlementButtonWrapper><SettlementButton {...invoiceProps} /></SettlementButtonWrapper>);
            await waitForBatchedUpdatesWithAct();
            expect(screen.getByText(translateLocal('iou.invoiceBusinessBank', '5678'))).toBeTruthy();
        });
    });

    describe('IOU Reports', () => {
        it('shows Wallet for IOU with EXPENSIFY payment method', async () => {
            await act(async () => {
                await Onyx.merge(ONYXKEYS.NVP_LAST_PAYMENT_METHOD, {
                    [CONST.POLICY.ID_FAKE]: {iou: CONST.IOU.PAYMENT_TYPE.EXPENSIFY}
                });
                await Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT_LIST, [{bankAccountID: 1}]);
            });
            render(<SettlementButtonWrapper><SettlementButton {...iouProps} /></SettlementButtonWrapper>);
            await waitForBatchedUpdatesWithAct();
            expect(screen.getByText(translateLocal('common.wallet'))).toBeTruthy();
        });
    });
});

Test cases for payment options dropdown:

describe('paymentButtonOptions', () => {
    it('shows wallet option for IOU with supported currency', async () => {
        await act(async () => {
            await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${REPORT_ID}`, {
                type: CONST.REPORT.TYPE.IOU, currency: 'USD'
            });
        });
        render(<SettlementButtonWrapper><SettlementButton {...iouProps} /></SettlementButtonWrapper>);
        await waitForBatchedUpdatesWithAct();
        // Open dropdown and verify wallet option exists
        fireEvent.press(screen.getByTestId('settlement-button-dropdown'));
        expect(screen.getByText(translateLocal('iou.settleWallet', {formattedAmount: ''}))).toBeTruthy();
    });

    it('does NOT show wallet option for expense reports', async () => {
        await act(async () => {
            await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${REPORT_ID}`, {
                type: CONST.REPORT.TYPE.EXPENSE
            });
        });
        render(<SettlementButtonWrapper><SettlementButton {...expenseProps} /></SettlementButtonWrapper>);
        await waitForBatchedUpdatesWithAct();
        fireEvent.press(screen.getByTestId('settlement-button-dropdown'));
        expect(screen.queryByText(translateLocal('iou.settleWallet', {formattedAmount: ''}))).toBeNull();
    });

    it('shows only Approve button when shouldHidePaymentOptions and shouldShowApproveButton', async () => {
        render(
            <SettlementButtonWrapper>
                <SettlementButton
                    shouldHidePaymentOptions
                    shouldShowApproveButton
                    {...props}
                />
            </SettlementButtonWrapper>
        );
        await waitForBatchedUpdatesWithAct();
        expect(screen.getByText(translateLocal('iou.approve', {formattedAmount: '$100'}))).toBeTruthy();
    });
});

2. Remove Manual Memoization (25 instances)

Strategy for each memoization type:

Hook	Count	Action
Simple derived values (lastPaymentMethod)	~5	Remove useMemo, use direct expression
Callbacks passed to children (checkForNecessaryAction)	~8	Keep useCallback, React Compiler will optimize
Complex computations (paymentButtonOptions)	~12	Keep useMemo with simplified deps

Example - simple derived value:

// Remove useMemo for simple derivations
const lastPaymentMethod = iouReport?.type
    ? getLastPolicyPaymentMethod(policyIDKey, personalPolicyID, lastPaymentMethods, iouReport.type, isIOUReport(iouReport))
    : undefined;

Example - complex computation with stable deps:

// Keep useMemo but extract stable primitive deps
const paymentButtonOptions = useMemo(
    () => buildPaymentOptions({isExpenseReport, isInvoiceReport, currency, ...}),
    [isExpenseReport, isInvoiceReport, currency, ...]
);

3. Optional: Extract Helper for Complex Logic

If the UI tests reveal that getSecondaryText logic is particularly hard to test through the UI, we can optionally extract it to SettlementButtonUtils.ts for supplementary unit tests:

https://github.com/Expensify/App/blob/4947e55428f663a0d7e00bbfced3da4e985e2989/src/libs/SettlementButtonUtils.ts

This would be in addition to (not instead of) the UI tests.