Merge pull request #37450 from dukenv0307/fix/37413

fix: Bank account icon is a green square
Expensify · Feb 28, 2024 · e728878 · e728878
2 parents d7d5630 + cfb1d61
commit e728878
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 10 deletions.
diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx
@@ -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 */
@@ -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 & {
@@ -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,

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx
@@ -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;
 };
@@ -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,
     ) => {
@@ -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 && (

diff --git a/src/pages/settings/Wallet/WalletPage/types.ts b/src/pages/settings/Wallet/WalletPage/types.ts
@@ -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 */
@@ -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};