Skip to content

Make WorkspaceSettlementAccountPage use new SelectionList #72989

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
grgia merged 7 commits into from
Nov 3, 2025
Merged

Make WorkspaceSettlementAccountPage use new SelectionList #72989

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3cfa7e3
Make WorkspaceSettlementAccountPage use new SelectionList
GCyganek Oct 20, 2025
d9095c8
Use type import for ListItem
GCyganek Oct 20, 2025
e76e1a6
Extract SelectionList header
GCyganek Oct 21, 2025
df46ef5
WorkspaceSettlementAccountPage auto-memoized by React Compiler
GCyganek Oct 21, 2025
43986df
Delete unused useMemo import
GCyganek Oct 21, 2025
eea775a
Extract fallbackBankAccountOption variable
GCyganek Oct 23, 2025
ded17c8
Move selection list header to WorkspaceSettlementAccountPage
GCyganek Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 70 additions & 71 deletions src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ import Icon from '@components/Icon';
import getBankIcon from '@components/Icon/BankIcons';
import RenderHTML from '@components/RenderHTML';
import ScreenWrapper from '@components/ScreenWrapper';
import SelectionList from '@components/SelectionListWithSections';
import RadioListItem from '@components/SelectionListWithSections/RadioListItem';
import SelectionList from '@components/SelectionList';
import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
import type {ListItem} from '@components/SelectionList/types';
import Text from '@components/Text';
import useDefaultFundID from '@hooks/useDefaultFundID';
import useEnvironment from '@hooks/useEnvironment';
Expand All @@ -31,8 +32,26 @@ import type SCREENS from '@src/SCREENS';
import type {BankName} from '@src/types/onyx/Bank';
import type {ConnectionName} from '@src/types/onyx/Policy';

type BankAccountListItem = ListItem & {value: number | undefined};

type WorkspaceSettlementAccountPageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_ACCOUNT>;

function BankAccountListItemLeftElement({bankName}: {bankName: BankName}) {
const styles = useThemeStyles();
const {icon, iconSize, iconStyles} = getBankIcon({bankName, styles});

return (
<View style={[styles.flexRow, styles.alignItemsCenter, styles.mr3]}>
<Icon
src={icon}
width={iconSize}
height={iconSize}
additionalStyles={iconStyles}
/>
</View>
);
}

function WorkspaceSettlementAccountPage({route}: WorkspaceSettlementAccountPageProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
Expand All @@ -46,8 +65,6 @@ function WorkspaceSettlementAccountPage({route}: WorkspaceSettlementAccountPageP
const [isUsingContinuousReconciliation] = useOnyx(`${ONYXKEYS.COLLECTION.EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION}${defaultFundID}`, {canBeMissing: true});
const [reconciliationConnection] = useOnyx(`${ONYXKEYS.COLLECTION.EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION}${defaultFundID}`, {canBeMissing: true});
const isUkEuCurrencySupported = useExpensifyCardUkEuSupported(policyID);
const connectionName = reconciliationConnection ?? '';
const connectionParam = getRouteParamForConnection(connectionName as ConnectionName);

const paymentBankAccountID = cardSettings?.paymentBankAccountID;
const paymentBankAccountNumberFromCardSettings = cardSettings?.paymentBankAccountNumber;
Expand All @@ -74,62 +91,58 @@ function WorkspaceSettlementAccountPage({route}: WorkspaceSettlementAccountPageP
fetchPolicyAccountingData();
}, [cardSettings, hasActiveAccountingConnection, isUsingContinuousReconciliation, reconciliationConnection, fetchPolicyAccountingData]);

const data = useMemo(() => {
const options = eligibleBankAccounts.map((bankAccount) => {
const bankName = (bankAccount.accountData?.addressName ?? '') as BankName;
const bankAccountNumber = bankAccount.accountData?.accountNumber ?? '';
const bankAccountID = bankAccount.accountData?.bankAccountID ?? bankAccount.methodID;

const {icon, iconSize, iconStyles} = getBankIcon({bankName, styles});

return {
value: bankAccountID,
text: bankAccount.title,
leftElement: !!icon && (
<View style={[styles.flexRow, styles.alignItemsCenter, styles.mr3]}>
<Icon
src={icon}
width={iconSize}
height={iconSize}
additionalStyles={iconStyles}
/>
</View>
),
alternateText: `${translate('workspace.expensifyCard.accountEndingIn')} ${getLastFourDigits(bankAccountNumber)}`,
keyForList: bankAccountID?.toString(),
isSelected: bankAccountID === paymentBankAccountID,
};
});
if (options.length === 0) {
const bankName = (paymentBankAccountAddressName ?? '') as BankName;
const bankAccountNumber = paymentBankAccountNumberFromCardSettings ?? '';
const {icon, iconSize, iconStyles} = getBankIcon({bankName, styles});
options.push({
value: paymentBankAccountID,
text: paymentBankAccountAddressName,
leftElement: (
<View style={[styles.flexRow, styles.alignItemsCenter, styles.mr3]}>
<Icon
src={icon}
width={iconSize}
height={iconSize}
additionalStyles={iconStyles}
/>
</View>
),
alternateText: `${translate('workspace.expensifyCard.accountEndingIn')} ${getLastFourDigits(bankAccountNumber)}`,
keyForList: paymentBankAccountID?.toString(),
isSelected: true,
});
}
return options;
}, [eligibleBankAccounts, paymentBankAccountAddressName, paymentBankAccountID, paymentBankAccountNumberFromCardSettings, styles, translate]);
const eligibleBankAccountsOptions: BankAccountListItem[] = eligibleBankAccounts.map((bankAccount) => {
const bankName = (bankAccount.accountData?.addressName ?? '') as BankName;
const bankAccountNumber = bankAccount.accountData?.accountNumber ?? '';
const bankAccountID = bankAccount.accountData?.bankAccountID ?? bankAccount.methodID;

return {
value: bankAccountID,
text: bankAccount.title,
leftElement: <BankAccountListItemLeftElement bankName={bankName} />,
alternateText: `${translate('workspace.expensifyCard.accountEndingIn')} ${getLastFourDigits(bankAccountNumber)}`,
keyForList: bankAccountID?.toString() ?? '',
isSelected: bankAccountID === paymentBankAccountID,
};
});

const fallbackBankAccountOption = {
value: paymentBankAccountID,
text: paymentBankAccountAddressName,
leftElement: <BankAccountListItemLeftElement bankName={(paymentBankAccountAddressName ?? '') as BankName} />,
alternateText: `${translate('workspace.expensifyCard.accountEndingIn')} ${getLastFourDigits(paymentBankAccountNumberFromCardSettings ?? '')}`,
keyForList: paymentBankAccountID?.toString() ?? '',
isSelected: true,
};

const listOptions: BankAccountListItem[] = eligibleBankAccountsOptions.length > 0 ? eligibleBankAccountsOptions : [fallbackBankAccountOption];

const updateSettlementAccount = (value: number) => {
updateSettlementAccountCard(domainName, defaultFundID, policyID, value, paymentBankAccountID);
Navigation.goBack();
};

const customListHeaderContent = useMemo(() => {
const connectionName = reconciliationConnection ?? '';
const connectionParam = getRouteParamForConnection(connectionName as ConnectionName);

return (
<>
<Text style={[styles.mh5, styles.mv4]}>{translate('workspace.expensifyCard.settlementAccountDescription')}</Text>
{!!isUsingContinuousReconciliation && !!connectionParam && hasActiveAccountingConnection && (
<View style={[styles.renderHTML, styles.mh5, styles.mb6]}>
<RenderHTML
html={translate('workspace.expensifyCard.settlementAccountInfo', {
reconciliationAccountSettingsLink: `${environmentURL}/${ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.getRoute(policyID, connectionParam, Navigation.getActiveRoute())}`,
accountNumber: `${CONST.MASKED_PAN_PREFIX}${getLastFourDigits(paymentBankAccountNumber)}`,
})}
/>
</View>
)}
</>
);
}, [isUsingContinuousReconciliation, reconciliationConnection, environmentURL, paymentBankAccountNumber, translate, hasActiveAccountingConnection, policyID, styles]);

return (
<AccessOrNotFoundWrapper
accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
Expand All @@ -153,26 +166,12 @@ function WorkspaceSettlementAccountPage({route}: WorkspaceSettlementAccountPageP
/>
<SelectionList
addBottomSafeAreaPadding
sections={[{data}]}
data={listOptions}
ListItem={RadioListItem}
onSelectRow={({value}) => updateSettlementAccount(value ?? 0)}
shouldSingleExecuteRowSelect
initiallyFocusedOptionKey={paymentBankAccountID?.toString()}
listHeaderContent={
<>
<Text style={[styles.mh5, styles.mv4]}>{translate('workspace.expensifyCard.settlementAccountDescription')}</Text>
{!!isUsingContinuousReconciliation && !!connectionParam && hasActiveAccountingConnection && (
<View style={[styles.renderHTML, styles.mh5, styles.mb6]}>
<RenderHTML
html={translate('workspace.expensifyCard.settlementAccountInfo', {
reconciliationAccountSettingsLink: `${environmentURL}/${ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.getRoute(policyID, connectionParam, Navigation.getActiveRoute())}`,
accountNumber: `${CONST.MASKED_PAN_PREFIX}${getLastFourDigits(paymentBankAccountNumber)}`,
})}
/>
</View>
)}
</>
}
initiallyFocusedItemKey={paymentBankAccountID?.toString()}
customListHeaderContent={customListHeaderContent}
/>
</ScreenWrapper>
</AccessOrNotFoundWrapper>
Expand Down
Loading