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

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 4 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
27 changes: 23 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,24 @@ 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,
},
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
14 changes: 8 additions & 6 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 @@ -344,7 +343,6 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi
const isPopoverBottomMount = anchorPosition.anchorPositionTop === 0 || isSmallScreenWidth;
const alertTextStyle = [styles.inlineSystemMessage, styles.flexShrink1];
const alertViewStyle = [styles.flexRow, styles.alignItemsCenter, styles.w100, styles.ph5];

return (
<>
{shouldShowEmptyState ? (
Expand Down Expand Up @@ -538,10 +536,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}
Copy link
Contributor

Choose a reason for hiding this comment

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

@dukenv0307 Why are we passing iconHeight and iconWidth separately? Its already part of paymentMethod.formattedSelectedPaymentMethod.icon right? Why are we splitting the params and passing?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@abdulrahuman5196

Its already part of paymentMethod.formattedSelectedPaymentMethod.icon right

Yes.

Why are we splitting the params and passing?

Do you mean like this?

{icon, iconWidth, iconHeight, iconStyles} = paymentMethod.formattedSelectedPaymentMethod.icon

and then use this to pass into MenuItem

Copy link
Contributor

Choose a reason for hiding this comment

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

Sorry, nevermind. Its under conditional rendering. Wouldn't be helpful

iconWidth={paymentMethod.formattedSelectedPaymentMethod.icon?.iconWidth}
iconStyles={paymentMethod.formattedSelectedPaymentMethod.icon?.iconStyles}
description={paymentMethod.formattedSelectedPaymentMethod.description}
wrapperStyle={[styles.mb4, styles.ph5, styles.pv0]}
interactive={false}
displayInDefaultIconColor
/>
)}
{shouldShowMakeDefaultButton && (
Expand Down
11 changes: 10 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,11 @@ type WalletPageProps = WalletPageOnyxProps & {
shouldListenForResize?: boolean;
};

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

export type {WalletPageOnyxProps, WalletPageProps, FormattedSelectedPaymentMethodIcon};
Loading