From 31ed26f141598a1ade00717425205cba787f3f00 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 29 Feb 2024 01:05:49 +0700 Subject: [PATCH 1/6] fix: Bank account icon is a green square --- src/pages/settings/Wallet/PaymentMethodList.tsx | 17 +++++++++++++++-- .../settings/Wallet/WalletPage/WalletPage.tsx | 8 ++++++-- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 9193074f96c8..0af2748a2d76 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -236,12 +236,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, + iconSize: paymentMethod.iconSize, + 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, diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx index 13e2877d3ec7..c20a0d053998 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx @@ -344,7 +344,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 ? ( @@ -538,10 +537,15 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi {isPopoverBottomMount && ( )} {shouldShowMakeDefaultButton && ( From 3d32ca3fa229788e5bf50d62c15140ba919a69b6 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 29 Feb 2024 01:14:53 +0700 Subject: [PATCH 2/6] fix ts check --- src/pages/settings/Wallet/WalletPage/WalletPage.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx index c20a0d053998..e42caa93f54c 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx @@ -1,7 +1,7 @@ import _ from 'lodash'; import type {ForwardedRef, RefObject} from 'react'; import React, {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react'; -import type {GestureResponderEvent} from 'react-native'; +import type {GestureResponderEvent, ViewStyle} from 'react-native'; import {ActivityIndicator, Dimensions, ScrollView, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu'; @@ -42,7 +42,13 @@ import type {WalletPageOnyxProps, WalletPageProps} from './types'; type FormattedSelectedPaymentMethod = { title: string; - icon?: IconAsset; + icon?: { + icon: IconAsset; + iconSize?: number; + iconHeight?: number; + iconWidth?: number; + iconStyles?: ViewStyle[]; + }; description?: string; type?: string; }; From c652ab5e9cb0f569cdd8e1507c5679467d990aa2 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 29 Feb 2024 01:28:59 +0700 Subject: [PATCH 3/6] fix ts check --- src/pages/settings/Wallet/PaymentMethodList.tsx | 11 +++++++++-- .../settings/Wallet/WalletPage/WalletPage.tsx | 16 ++++------------ src/pages/settings/Wallet/WalletPage/types.ts | 11 ++++++++++- 3 files changed, 23 insertions(+), 15 deletions(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 0af2748a2d76..f76ea34bc424 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -37,6 +37,7 @@ 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 {FormattedSelectedPaymentMethodIcon} from './WalletPage/types'; type PaymentMethodListOnyxProps = { /** List of bank accounts */ @@ -99,7 +100,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 & { @@ -247,7 +255,6 @@ function PaymentMethodList({ paymentMethod.accountData, { icon: paymentMethod.icon, - iconSize: paymentMethod.iconSize, iconHeight: paymentMethod.iconHeight, iconWidth: paymentMethod.iconWidth, iconStyles: paymentMethod.iconStyles, diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx index e42caa93f54c..c73dcf941d26 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx @@ -1,7 +1,7 @@ import _ from 'lodash'; import type {ForwardedRef, RefObject} from 'react'; import React, {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react'; -import type {GestureResponderEvent, ViewStyle} from 'react-native'; +import type {GestureResponderEvent} from 'react-native'; import {ActivityIndicator, Dimensions, ScrollView, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu'; @@ -37,18 +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?: { - icon: IconAsset; - iconSize?: number; - iconHeight?: number; - iconWidth?: number; - iconStyles?: ViewStyle[]; - }; + icon?: FormattedSelectedPaymentMethodIcon; description?: string; type?: string; }; @@ -157,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, ) => { @@ -547,7 +540,6 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi iconHeight={paymentMethod.formattedSelectedPaymentMethod.icon?.iconHeight} iconWidth={paymentMethod.formattedSelectedPaymentMethod.icon?.iconWidth} iconStyles={paymentMethod.formattedSelectedPaymentMethod.icon?.iconStyles} - iconSize={paymentMethod.formattedSelectedPaymentMethod.icon?.iconSize} description={paymentMethod.formattedSelectedPaymentMethod.description} wrapperStyle={[styles.mb4, styles.ph5, styles.pv0]} interactive={false} diff --git a/src/pages/settings/Wallet/WalletPage/types.ts b/src/pages/settings/Wallet/WalletPage/types.ts index 0c3db1a2df65..937353b92759 100644 --- a/src/pages/settings/Wallet/WalletPage/types.ts +++ b/src/pages/settings/Wallet/WalletPage/types.ts @@ -1,5 +1,7 @@ +import {ViewStyle} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import type {BankAccountList, CardList, FundList, UserWallet, WalletTerms, WalletTransfer} from '@src/types/onyx'; +import IconAsset from '@src/types/utils/IconAsset'; type WalletPageOnyxProps = { /** Wallet balance transfer props */ @@ -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}; From 056bc1d76a4daf3062911f0f9f22a8ff30dae1ac Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 29 Feb 2024 01:38:28 +0700 Subject: [PATCH 4/6] fix lint --- src/pages/settings/Wallet/PaymentMethodList.tsx | 3 +-- src/pages/settings/Wallet/WalletPage/types.ts | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index f76ea34bc424..ea399677898e 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -36,8 +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 {FormattedSelectedPaymentMethodIcon} from './WalletPage/types'; +import type {FormattedSelectedPaymentMethodIcon} from './WalletPage/types'; type PaymentMethodListOnyxProps = { /** List of bank accounts */ diff --git a/src/pages/settings/Wallet/WalletPage/types.ts b/src/pages/settings/Wallet/WalletPage/types.ts index 937353b92759..7ad46a6b348f 100644 --- a/src/pages/settings/Wallet/WalletPage/types.ts +++ b/src/pages/settings/Wallet/WalletPage/types.ts @@ -1,7 +1,7 @@ -import {ViewStyle} from 'react-native'; +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 IconAsset from '@src/types/utils/IconAsset'; +import type IconAsset from '@src/types/utils/IconAsset'; type WalletPageOnyxProps = { /** Wallet balance transfer props */ From afac4f45b5790da4af173f4a6a0d8de09465e173 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 29 Feb 2024 03:06:37 +0700 Subject: [PATCH 5/6] fallback iconSize --- src/pages/settings/Wallet/PaymentMethodList.tsx | 7 ++++--- src/pages/settings/Wallet/WalletPage/WalletPage.tsx | 7 +++++-- src/pages/settings/Wallet/WalletPage/types.ts | 1 + 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index ea399677898e..556634269f5c 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -254,9 +254,10 @@ function PaymentMethodList({ paymentMethod.accountData, { icon: paymentMethod.icon, - iconHeight: paymentMethod.iconHeight, - iconWidth: paymentMethod.iconWidth, - iconStyles: paymentMethod.iconStyles, + iconHeight: paymentMethod?.iconHeight, + iconWidth: paymentMethod?.iconWidth, + iconStyles: paymentMethod?.iconStyles, + iconSize: paymentMethod?.iconSize, }, paymentMethod.isDefault, paymentMethod.methodID, diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx index c73dcf941d26..c9e11b31c7d6 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx @@ -154,6 +154,7 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi isDefault?: boolean, methodID?: string | number, ) => { + console.log(icon); if (shouldShowAddPaymentMenu) { setShouldShowAddPaymentMenu(false); return; @@ -343,6 +344,8 @@ 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]; + + console.log(paymentMethod.formattedSelectedPaymentMethod.icon); return ( <> {shouldShowEmptyState ? ( @@ -537,8 +540,8 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi Date: Thu, 29 Feb 2024 03:13:20 +0700 Subject: [PATCH 6/6] remove console.log --- src/pages/settings/Wallet/WalletPage/WalletPage.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx index c9e11b31c7d6..b9f49049d51a 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx @@ -154,7 +154,6 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi isDefault?: boolean, methodID?: string | number, ) => { - console.log(icon); if (shouldShowAddPaymentMenu) { setShouldShowAddPaymentMenu(false); return; @@ -345,7 +344,6 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi const alertTextStyle = [styles.inlineSystemMessage, styles.flexShrink1]; const alertViewStyle = [styles.flexRow, styles.alignItemsCenter, styles.w100, styles.ph5]; - console.log(paymentMethod.formattedSelectedPaymentMethod.icon); return ( <> {shouldShowEmptyState ? (