Skip to content
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

Jump to bottom

fix: Bank account icon is a green square #37450

Merged
merged 6 commits into from
Feb 28, 2024
Merged

fix: Bank account icon is a green square #37450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
31ed26f
fix: Bank account icon is a green square
dukenv0307 Feb 28, 2024
3d32ca3
fix ts check
dukenv0307 Feb 28, 2024
c652ab5
fix ts check
dukenv0307 Feb 28, 2024
056bc1d
fix lint
dukenv0307 Feb 28, 2024
afac4f4
fallback iconSize
dukenv0307 Feb 28, 2024
cfb1d61
remove console.log
dukenv0307 Feb 28, 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
28 changes: 24 additions & 4 deletions src/pages/settings/Wallet/PaymentMethodList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import type {Errors} from '@src/types/onyx/OnyxCommon';
import type PaymentMethod from '@src/types/onyx/PaymentMethod';
import type {FilterMethodPaymentType} from '@src/types/onyx/WalletTransfer';
import {isEmptyObject} from '@src/types/utils/EmptyObject';
import type IconAsset from '@src/types/utils/IconAsset';
import type {FormattedSelectedPaymentMethodIcon} from './WalletPage/types';

type PaymentMethodListOnyxProps = {
/** List of bank accounts */
Expand Down Expand Up @@ -99,7 +99,14 @@ type PaymentMethodListProps = PaymentMethodListOnyxProps & {
shouldShowEmptyListMessage?: boolean;

/** What to do when a menu item is pressed */
onPress: (event?: GestureResponderEvent | KeyboardEvent, accountType?: string, accountData?: AccountData, icon?: IconAsset, isDefault?: boolean, methodID?: number) => void;
onPress: (
event?: GestureResponderEvent | KeyboardEvent,
accountType?: string,
accountData?: AccountData,
icon?: FormattedSelectedPaymentMethodIcon,
isDefault?: boolean,
methodID?: number,
) => void;
};

type PaymentMethodItem = PaymentMethod & {
Expand Down Expand Up @@ -236,12 +243,25 @@ function PaymentMethodList({
(paymentMethod) => paymentMethod.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || !isEmptyObject(paymentMethod.errors),
);
}

combinedPaymentMethods = combinedPaymentMethods.map((paymentMethod) => {
const isMethodActive = isPaymentMethodActive(actionPaymentMethodType, activePaymentMethodID, paymentMethod);
return {
...paymentMethod,
onPress: (e: GestureResponderEvent) => onPress(e, paymentMethod.accountType, paymentMethod.accountData, paymentMethod.icon, paymentMethod.isDefault, paymentMethod.methodID),
onPress: (e: GestureResponderEvent) =>
onPress(
e,
paymentMethod.accountType,
paymentMethod.accountData,
{
icon: paymentMethod.icon,
iconHeight: paymentMethod?.iconHeight,
iconWidth: paymentMethod?.iconWidth,
iconStyles: paymentMethod?.iconStyles,
iconSize: paymentMethod?.iconSize,
},
paymentMethod.isDefault,
paymentMethod.methodID,
),
wrapperStyle: isMethodActive ? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)] : null,
disabled: paymentMethod.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
isMethodActive,
Expand Down
13 changes: 8 additions & 5 deletions src/pages/settings/Wallet/WalletPage/WalletPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,11 @@ import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type {AccountData} from '@src/types/onyx';
import type IconAsset from '@src/types/utils/IconAsset';
import type {WalletPageOnyxProps, WalletPageProps} from './types';
import type {FormattedSelectedPaymentMethodIcon, WalletPageOnyxProps, WalletPageProps} from './types';

type FormattedSelectedPaymentMethod = {
title: string;
icon?: IconAsset;
icon?: FormattedSelectedPaymentMethodIcon;
description?: string;
type?: string;
};
Expand Down Expand Up @@ -151,7 +150,7 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi
nativeEvent?: GestureResponderEvent | KeyboardEvent,
accountType?: string,
account?: AccountData,
icon?: IconAsset,
icon?: FormattedSelectedPaymentMethodIcon,
isDefault?: boolean,
methodID?: string | number,
) => {
Expand Down Expand Up @@ -538,10 +537,14 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi
{isPopoverBottomMount && (
<MenuItem
title={paymentMethod.formattedSelectedPaymentMethod.title}
icon={paymentMethod.formattedSelectedPaymentMethod.icon}
icon={paymentMethod.formattedSelectedPaymentMethod.icon?.icon}
iconHeight={paymentMethod.formattedSelectedPaymentMethod.icon?.iconHeight ?? paymentMethod.formattedSelectedPaymentMethod.icon?.iconSize}
iconWidth={paymentMethod.formattedSelectedPaymentMethod.icon?.iconWidth ?? paymentMethod.formattedSelectedPaymentMethod.icon?.iconSize}
iconStyles={paymentMethod.formattedSelectedPaymentMethod.icon?.iconStyles}
description={paymentMethod.formattedSelectedPaymentMethod.description}
wrapperStyle={[styles.mb4, styles.ph5, styles.pv0]}
interactive={false}
displayInDefaultIconColor
/>
)}
{shouldShowMakeDefaultButton && (
Expand Down
12 changes: 11 additions & 1 deletion src/pages/settings/Wallet/WalletPage/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import type {ViewStyle} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import type {BankAccountList, CardList, FundList, UserWallet, WalletTerms, WalletTransfer} from '@src/types/onyx';
import type IconAsset from '@src/types/utils/IconAsset';

type WalletPageOnyxProps = {
/** Wallet balance transfer props */
Expand Down Expand Up @@ -28,4 +30,12 @@ type WalletPageProps = WalletPageOnyxProps & {
shouldListenForResize?: boolean;
};

export type {WalletPageOnyxProps, WalletPageProps};
type FormattedSelectedPaymentMethodIcon = {
icon: IconAsset;
iconHeight?: number;
iconWidth?: number;
iconStyles?: ViewStyle[];
iconSize?: number;
};

export type {WalletPageOnyxProps, WalletPageProps, FormattedSelectedPaymentMethodIcon};
Loading