Skip to content

[Internal QA]: Refactor ChooseTransferAccountPage to use Selection List #49339

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
mountiny merged 11 commits into from
Sep 18, 2024
Merged

[Internal QA]: Refactor ChooseTransferAccountPage to use Selection List #49339

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0439b29
refactor wallet bank transfer page to use SelectionList
allgandalf Sep 17, 2024
88fc164
fix lint
allgandalf Sep 17, 2024
bcc3c95
use useOnyx
allgandalf Sep 17, 2024
7e1ad70
fix initial focus
allgandalf Sep 17, 2024
d6a368a
fix useOnyx
allgandalf Sep 17, 2024
a7ce9d9
hopefully fixed the compiler
allgandalf Sep 17, 2024
a570c6d
try fix
allgandalf Sep 17, 2024
ec32225
fix compiler error
allgandalf Sep 17, 2024
b596737
use scrollView
allgandalf Sep 17, 2024
3102125
implement suggestions
allgandalf Sep 18, 2024
1260999
fix lint
allgandalf Sep 18, 2024
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
110 changes: 72 additions & 38 deletions src/pages/settings/Wallet/ChooseTransferAccountPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,32 @@
import React from 'react';
import type {GestureResponderEvent} from 'react-native';
import React, {useMemo} from 'react';
import {View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import {useOnyx} from 'react-native-onyx';
import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import Icon from '@components/Icon';
import getBankIcon from '@components/Icon/BankIcons';
import * as Expensicons from '@components/Icon/Expensicons';
import MenuItem from '@components/MenuItem';
import ScreenWrapper from '@components/ScreenWrapper';
import ScrollView from '@components/ScrollView';
import SelectionList from '@components/SelectionList';
import RadioListItem from '@components/SelectionList/RadioListItem';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import {getLastFourDigits} from '@libs/BankAccountUtils';
import Navigation from '@libs/Navigation/Navigation';
import * as BankAccounts from '@userActions/BankAccounts';
import * as PaymentMethods from '@userActions/PaymentMethods';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type {AccountData, WalletTransfer} from '@src/types/onyx';
import PaymentMethodList from './PaymentMethodList';
import type {AccountData} from '@src/types/onyx';
import type {BankName} from '@src/types/onyx/Bank';
import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';

type ChooseTransferAccountPageOnyxProps = {
/** Wallet transfer propTypes */
walletTransfer: OnyxEntry<WalletTransfer>;
};
function ChooseTransferAccountPage() {
const [walletTransfer, walletTransferResult] = useOnyx(ONYXKEYS.WALLET_TRANSFER);
Comment thread
allgandalf marked this conversation as resolved.

type ChooseTransferAccountPageProps = ChooseTransferAccountPageOnyxProps;

function ChooseTransferAccountPage({walletTransfer = {}}: ChooseTransferAccountPageProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
/**
Expand All @@ -34,7 +35,7 @@ function ChooseTransferAccountPage({walletTransfer = {}}: ChooseTransferAccountP
* @param accountType of the selected account type
* @param account of the selected account data
*/
const selectAccountAndNavigateBack = (event?: GestureResponderEvent | KeyboardEvent, accountType?: string, account?: AccountData) => {
const selectAccountAndNavigateBack = (accountType?: string, account?: AccountData) => {
PaymentMethods.saveWalletTransferAccountTypeAndID(
accountType ?? '',
(accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT ? account?.bankAccountID?.toString() : account?.fundID?.toString()) ?? '',
Expand All @@ -50,40 +51,73 @@ function ChooseTransferAccountPage({walletTransfer = {}}: ChooseTransferAccountP
BankAccounts.openPersonalBankAccountSetupView();
};

const [bankAccountsList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
const selectedAccountID = walletTransfer?.selectedAccountID;
const data = useMemo(() => {
const options = Object.values(bankAccountsList ?? {}).map((bankAccount) => {
Comment thread
allgandalf marked this conversation as resolved.
const bankName = (bankAccount.accountData?.additionalData?.bankName ?? '') 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>
) : null,
alternateText: `${translate('workspace.expensifyCard.accountEndingIn')} ${getLastFourDigits(bankAccountNumber)}`,
keyForList: bankAccountID?.toString(),
isSelected: bankAccountID?.toString() === selectedAccountID,
bankAccount,
};
});
return options;
}, [bankAccountsList, selectedAccountID, styles, translate]);

if (isLoadingOnyxValue(walletTransferResult)) {
Comment thread
allgandalf marked this conversation as resolved.
return <FullscreenLoadingIndicator />;
}

return (
<ScreenWrapper testID={ChooseTransferAccountPage.displayName}>
<HeaderWithBackButton
title={translate('chooseTransferAccountPage.chooseAccount')}
onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_TRANSFER_BALANCE)}
/>
<View style={[styles.mt3, styles.flexShrink1, styles.flexBasisAuto]}>
<PaymentMethodList
onPress={selectAccountAndNavigateBack}
shouldShowSelectedState
filterType={walletTransfer?.filterPaymentMethodType}
selectedMethodID={walletTransfer?.selectedAccountID}
shouldShowAddPaymentMethodButton={false}
shouldShowAddBankAccount={false}
shouldShowRightIcon={false}
<ScrollView>

@DylanDylann DylanDylann Sep 18, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to add ScrollView wrapper?

@allgandalf allgandalf Sep 18, 2024

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Otherwise the add bank account button would be at the bottom of the screen, do you have any other idea ? I tried a few but only with scrollview I was able to put the button after the list ends

<SelectionList
sections={[{data}]}
ListItem={RadioListItem}
onSelectRow={(value) => {
const accountType = value?.bankAccount?.accountType;
const accountData = value?.bankAccount?.accountData;
selectAccountAndNavigateBack(accountType, accountData);
}}
shouldSingleExecuteRowSelect
shouldUpdateFocusedIndex
initiallyFocusedOptionKey={walletTransfer?.selectedAccountID?.toString()}
/>
</View>
<MenuItem
onPress={navigateToAddPaymentMethodPage}
title={
walletTransfer?.filterPaymentMethodType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT
? translate('paymentMethodList.addNewBankAccount')
: translate('paymentMethodList.addNewDebitCard')
}
icon={Expensicons.Plus}
/>
<MenuItem
onPress={navigateToAddPaymentMethodPage}
title={
walletTransfer?.filterPaymentMethodType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT
? translate('paymentMethodList.addNewBankAccount')
: translate('paymentMethodList.addNewDebitCard')
}
icon={Expensicons.Plus}
/>
</ScrollView>
</ScreenWrapper>
);
}

ChooseTransferAccountPage.displayName = 'ChooseTransferAccountPage';

export default withOnyx<ChooseTransferAccountPageProps, ChooseTransferAccountPageOnyxProps>({
walletTransfer: {
key: ONYXKEYS.WALLET_TRANSFER,
},
})(ChooseTransferAccountPage);
export default ChooseTransferAccountPage;