From dd2603fbeeb2985fcebc872b012ee8c4014ba4b2 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Fri, 24 Nov 2023 13:08:08 +0100 Subject: [PATCH 1/8] feat: migrate CollapsibleSection and LongTermsForm --- src/components/CollapsibleSection/index.tsx | 4 ++-- src/pages/EnablePayments/TermsPage/LongTermsForm.js | 7 ++++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/CollapsibleSection/index.tsx b/src/components/CollapsibleSection/index.tsx index 434017f2a547..d3a351402964 100644 --- a/src/components/CollapsibleSection/index.tsx +++ b/src/components/CollapsibleSection/index.tsx @@ -4,7 +4,7 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Text from '@components/Text'; -import styles from '@styles/styles'; +import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ChildrenProps from '@src/types/utils/ChildrenProps'; import Collapsible from './Collapsible'; @@ -15,8 +15,8 @@ type CollapsibleSectionProps = ChildrenProps & { }; function CollapsibleSection({title, children}: CollapsibleSectionProps) { + const styles = useThemeStyles(); const [isExpanded, setIsExpanded] = useState(false); - /** * Expands/collapses the section */ diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index 5a925ad4e7c3..2ed7854ee6ba 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -7,7 +7,7 @@ import * as Expensicons from '@components/Icon/Expensicons'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import * as Localize from '@libs/Localize'; -import styles from '@styles/styles'; +import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; const termsData = [ @@ -58,7 +58,7 @@ const termsData = [ }, ]; -const getLongTermsSections = () => +const getLongTermsSections = (styles) => _.map(termsData, (section, index) => ( // eslint-disable-next-line react/no-array-index-key @@ -77,9 +77,10 @@ const getLongTermsSections = () => )); function LongTermsForm() { + const styles = useThemeStyles(); return ( <> - {getLongTermsSections()} + {getLongTermsSections(styles)} {Localize.translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp')} {CONST.TERMS.FDIC_PREPAID}{' '} From 6b8b3ace711d43761d0d07799d96e5f974ca3bc3 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Fri, 24 Nov 2023 13:44:33 +0100 Subject: [PATCH 2/8] feat: migrate RequestorStep and BasePicker --- src/components/Picker/BasePicker.js | 42 +++++++++++++------ .../ReimbursementAccount/RequestorStep.js | 3 +- 2 files changed, 31 insertions(+), 14 deletions(-) diff --git a/src/components/Picker/BasePicker.js b/src/components/Picker/BasePicker.js index 1cd3fe89112a..96a14acc25d1 100644 --- a/src/components/Picker/BasePicker.js +++ b/src/components/Picker/BasePicker.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import React, {useContext, useEffect, useImperativeHandle, useRef, useState} from 'react'; +import React, {useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; import RNPickerSelect from 'react-native-picker-select'; import _ from 'underscore'; @@ -9,8 +9,8 @@ import * as Expensicons from '@components/Icon/Expensicons'; import refPropTypes from '@components/refPropTypes'; import {ScrollContext} from '@components/ScrollViewWithContext'; import Text from '@components/Text'; -import styles from '@styles/styles'; -import themeColors from '@styles/themes/default'; +import useTheme from '@styles/themes/useTheme'; +import useThemeStyles from '@styles/useThemeStyles'; const propTypes = { /** A forwarded ref */ @@ -97,19 +97,16 @@ const defaultProps = { value: undefined, placeholder: {}, size: 'normal', - icon: (size) => ( - - ), + icon: undefined, shouldFocusPicker: false, onBlur: () => {}, additionalPickerEvents: () => {}, }; function BasePicker(props) { + const styles = useThemeStyles(); + const theme = useTheme(); + const [isHighlighted, setIsHighlighted] = useState(false); // reference to the root View @@ -124,7 +121,7 @@ function BasePicker(props) { ? {} : { ...props.placeholder, - color: themeColors.pickerOptionsTextColor, + color: theme.pickerOptionsTextColor, }; useEffect(() => { @@ -164,6 +161,25 @@ function BasePicker(props) { setIsHighlighted(false); }; + const iconToRender = useMemo( + () => + props.icon + ? () => props.icon(props.size) + : () => ( + + ), + [props.icon, props.size, styles], + ); + useImperativeHandle(props.forwardedRef, () => ({ /** * Focuses the picker (if configured to do so) @@ -236,12 +252,12 @@ function BasePicker(props) { ({...item, color: themeColors.pickerOptionsTextColor}))} + items={_.map(props.items, (item) => ({...item, color: theme.pickerOptionsTextColor}))} style={props.size === 'normal' ? styles.picker(props.isDisabled, props.backgroundColor) : styles.pickerSmall(props.backgroundColor)} useNativeAndroidPickerStyle={false} placeholder={placeholder} value={props.value} - Icon={() => props.icon(props.size)} + Icon={iconToRender} disabled={props.isDisabled} fixAndroidTouchableBug onOpen={enableHighlight} diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index d894753d6025..ca51ae530937 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -11,7 +11,7 @@ import Text from '@components/Text'; import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; import * as ValidationUtils from '@libs/ValidationUtils'; -import styles from '@styles/styles'; +import useThemeStyles from '@styles/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -77,6 +77,7 @@ const validate = (values) => { */ const RequestorStep = React.forwardRef(({reimbursementAccount, shouldShowOnfido, onBackButtonPress, getDefaultStateForField}, ref) => { const {translate} = useLocalize(); + const styles = useThemeStyles(); const defaultValues = useMemo( () => ({ From 79b47965852a3f76c685c8ef83581e850f06d09d Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Mon, 27 Nov 2023 09:58:09 +0100 Subject: [PATCH 3/8] feat: migrate BaseOnfidoWeb --- src/components/Onfido/BaseOnfidoWeb.js | 62 +++++++++++++------------- 1 file changed, 32 insertions(+), 30 deletions(-) diff --git a/src/components/Onfido/BaseOnfidoWeb.js b/src/components/Onfido/BaseOnfidoWeb.js index 5c0f83902e55..03ee799dc742 100644 --- a/src/components/Onfido/BaseOnfidoWeb.js +++ b/src/components/Onfido/BaseOnfidoWeb.js @@ -6,13 +6,13 @@ import useLocalize from '@hooks/useLocalize'; import Log from '@libs/Log'; import fontFamily from '@styles/fontFamily'; import fontWeightBold from '@styles/fontWeight/bold'; -import themeColors from '@styles/themes/default'; import variables from '@styles/variables'; +import useTheme from "@styles/themes/useTheme"; import CONST from '@src/CONST'; import './index.css'; import onfidoPropTypes from './onfidoPropTypes'; -function initializeOnfido({sdkToken, onSuccess, onError, onUserExit, preferredLocale, translate}) { +function initializeOnfido({sdkToken, onSuccess, onError, onUserExit, preferredLocale, translate, theme}) { OnfidoSDK.init({ token: sdkToken, containerId: CONST.ONFIDO.CONTAINER_ID, @@ -25,35 +25,35 @@ function initializeOnfido({sdkToken, onSuccess, onError, onUserExit, preferredLo fontWeightTitle: fontWeightBold, fontWeightSubtitle: 400, fontSizeSubtitle: `${variables.fontSizeNormal}px`, - colorContentTitle: themeColors.text, - colorContentSubtitle: themeColors.text, - colorContentBody: themeColors.text, + colorContentTitle: theme.text, + colorContentSubtitle: theme.text, + colorContentBody: theme.text, borderRadiusButton: `${variables.buttonBorderRadius}px`, - colorBackgroundSurfaceModal: themeColors.appBG, - colorBorderDocTypeButton: themeColors.border, - colorBorderDocTypeButtonHover: themeColors.transparent, - colorBorderButtonPrimaryHover: themeColors.transparent, - colorBackgroundButtonPrimary: themeColors.success, - colorBackgroundButtonPrimaryHover: themeColors.successHover, - colorBackgroundButtonPrimaryActive: themeColors.successHover, - colorBorderButtonPrimary: themeColors.success, - colorContentButtonSecondaryText: themeColors.text, - colorBackgroundButtonSecondary: themeColors.border, - colorBackgroundButtonSecondaryHover: themeColors.icon, - colorBackgroundButtonSecondaryActive: themeColors.icon, - colorBorderButtonSecondary: themeColors.border, - colorBackgroundIcon: themeColors.transparent, - colorContentLinkTextHover: themeColors.appBG, - colorBorderLinkUnderline: themeColors.link, - colorBackgroundLinkHover: themeColors.link, - colorBackgroundLinkActive: themeColors.link, - authAccentColor: themeColors.link, - colorBackgroundInfoPill: themeColors.link, - colorBackgroundSelector: themeColors.appBG, - colorBackgroundDocTypeButton: themeColors.success, - colorBackgroundDocTypeButtonHover: themeColors.successHover, - colorBackgroundButtonIconHover: themeColors.transparent, - colorBackgroundButtonIconActive: themeColors.transparent, + colorBackgroundSurfaceModal: theme.appBG, + colorBorderDocTypeButton: theme.border, + colorBorderDocTypeButtonHover: theme.transparent, + colorBorderButtonPrimaryHover: theme.transparent, + colorBackgroundButtonPrimary: theme.success, + colorBackgroundButtonPrimaryHover: theme.successHover, + colorBackgroundButtonPrimaryActive: theme.successHover, + colorBorderButtonPrimary: theme.success, + colorContentButtonSecondaryText: theme.text, + colorBackgroundButtonSecondary: theme.border, + colorBackgroundButtonSecondaryHover: theme.icon, + colorBackgroundButtonSecondaryActive: theme.icon, + colorBorderButtonSecondary: theme.border, + colorBackgroundIcon: theme.transparent, + colorContentLinkTextHover: theme.appBG, + colorBorderLinkUnderline: theme.link, + colorBackgroundLinkHover: theme.link, + colorBackgroundLinkActive: theme.link, + authAccentColor: theme.link, + colorBackgroundInfoPill: theme.link, + colorBackgroundSelector: theme.appBG, + colorBackgroundDocTypeButton: theme.success, + colorBackgroundDocTypeButtonHover: theme.successHover, + colorBackgroundButtonIconHover: theme.transparent, + colorBackgroundButtonIconActive: theme.transparent, }, steps: [ { @@ -120,6 +120,7 @@ function logOnFidoEvent(event) { const Onfido = forwardRef((props, ref) => { const {preferredLocale, translate} = useLocalize(); + const theme = useTheme(); useEffect(() => { initializeOnfido({ @@ -129,6 +130,7 @@ const Onfido = forwardRef((props, ref) => { onUserExit: props.onUserExit, preferredLocale, translate, + theme, }); window.addEventListener('userAnalyticsEvent', logOnFidoEvent); From a777f432088e2508f442c1e1016cef0e143b1a10 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Mon, 27 Nov 2023 15:28:52 +0100 Subject: [PATCH 4/8] fix: run prettier --- src/components/Onfido/BaseOnfidoWeb.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Onfido/BaseOnfidoWeb.js b/src/components/Onfido/BaseOnfidoWeb.js index 03ee799dc742..7a3b90945a5c 100644 --- a/src/components/Onfido/BaseOnfidoWeb.js +++ b/src/components/Onfido/BaseOnfidoWeb.js @@ -6,8 +6,8 @@ import useLocalize from '@hooks/useLocalize'; import Log from '@libs/Log'; import fontFamily from '@styles/fontFamily'; import fontWeightBold from '@styles/fontWeight/bold'; +import useTheme from '@styles/themes/useTheme'; import variables from '@styles/variables'; -import useTheme from "@styles/themes/useTheme"; import CONST from '@src/CONST'; import './index.css'; import onfidoPropTypes from './onfidoPropTypes'; From 74a7028ecf8143b0182cba49039bef10e5bbfe26 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Mon, 27 Nov 2023 15:38:10 +0100 Subject: [PATCH 5/8] fix: minor fix --- src/components/CollapsibleSection/index.tsx | 1 + src/components/Picker/BasePicker.js | 12 +++++++----- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/CollapsibleSection/index.tsx b/src/components/CollapsibleSection/index.tsx index d3a351402964..570d00559af8 100644 --- a/src/components/CollapsibleSection/index.tsx +++ b/src/components/CollapsibleSection/index.tsx @@ -17,6 +17,7 @@ type CollapsibleSectionProps = ChildrenProps & { function CollapsibleSection({title, children}: CollapsibleSectionProps) { const styles = useThemeStyles(); const [isExpanded, setIsExpanded] = useState(false); + /** * Expands/collapses the section */ diff --git a/src/components/Picker/BasePicker.js b/src/components/Picker/BasePicker.js index 96a14acc25d1..e897eddaeec9 100644 --- a/src/components/Picker/BasePicker.js +++ b/src/components/Picker/BasePicker.js @@ -161,15 +161,17 @@ function BasePicker(props) { setIsHighlighted(false); }; + const {icon, size} = props; + const iconToRender = useMemo( () => - props.icon - ? () => props.icon(props.size) + icon + ? () => icon(size) : () => ( ), - [props.icon, props.size, styles], + [icon, size, styles], ); useImperativeHandle(props.forwardedRef, () => ({ @@ -253,7 +255,7 @@ function BasePicker(props) { onValueChange={onInputChange} // We add a text color to prevent white text on white background dropdown items on Windows items={_.map(props.items, (item) => ({...item, color: theme.pickerOptionsTextColor}))} - style={props.size === 'normal' ? styles.picker(props.isDisabled, props.backgroundColor) : styles.pickerSmall(props.backgroundColor)} + style={size === 'normal' ? styles.picker(props.isDisabled, props.backgroundColor) : styles.pickerSmall(props.backgroundColor)} useNativeAndroidPickerStyle={false} placeholder={placeholder} value={props.value} From 9a0ba4b35af3c15d02e26740e8babeca0a9b6ae3 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Mon, 27 Nov 2023 16:01:22 +0100 Subject: [PATCH 6/8] fix: apply requested changes --- src/components/Picker/BasePicker.js | 37 +++++++++++++++-------------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/src/components/Picker/BasePicker.js b/src/components/Picker/BasePicker.js index e897eddaeec9..084cabc02234 100644 --- a/src/components/Picker/BasePicker.js +++ b/src/components/Picker/BasePicker.js @@ -163,24 +163,25 @@ function BasePicker(props) { const {icon, size} = props; - const iconToRender = useMemo( - () => - icon - ? () => icon(size) - : () => ( - - ), - [icon, size, styles], - ); + const iconToRender = useMemo(() => { + if (icon) { + return () => icon(size); + } + + // eslint-disable-next-line react/display-name + return () => ( + + ); + }, [icon, size, styles]); useImperativeHandle(props.forwardedRef, () => ({ /** From 7e2c9e73c7000dd481199a87700d93951ea13389 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Tue, 28 Nov 2023 09:12:31 +0100 Subject: [PATCH 7/8] feat: add themeStyles param --- src/components/AddPlaidBankAccount.js | 5 +++-- src/components/Icon/BankIcons.ts | 14 ++++++++---- src/libs/PaymentUtils.ts | 22 +++++++++++++++---- src/pages/ReimbursementAccount/EnableStep.js | 2 +- .../settings/Wallet/PaymentMethodList.js | 4 ++-- .../settings/Wallet/TransferBalancePage.js | 4 ++-- .../settings/Wallet/WalletPage/WalletPage.js | 2 +- 7 files changed, 37 insertions(+), 16 deletions(-) diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js index ec4ddd623929..d6c00629f870 100644 --- a/src/components/AddPlaidBankAccount.js +++ b/src/components/AddPlaidBankAccount.js @@ -168,7 +168,7 @@ function AddPlaidBankAccount({ value: account.plaidAccountID, label: `${account.addressName} ${account.mask}`, })); - const {icon, iconSize, iconStyles} = getBankIcon(); + const {icon, iconSize, iconStyles} = getBankIcon({themeStyles: styles}); const plaidErrors = lodashGet(plaidData, 'errors'); const plaidDataErrorMessage = !_.isEmpty(plaidErrors) ? _.chain(plaidErrors).values().first().value() : ''; const bankName = lodashGet(plaidData, 'bankName'); @@ -193,7 +193,8 @@ function AddPlaidBankAccount({ /> )} - {Boolean(plaidDataErrorMessage) && {plaidDataErrorMessage}} + {Boolean(plaidDataErrorMessage) && + {plaidDataErrorMessage}} {Boolean(token) && !bankName && ( ; @@ -52,6 +52,12 @@ type BankIcon = { iconStyles?: Array; }; +type BankIconParams = { + themeStyles: typeof styles; + bankName?: string; + isCard?: boolean; +} + /** * Returns matching asset icon for bankName */ @@ -140,7 +146,7 @@ function getAssetIcon(bankName: string, isCard: boolean): React.FC { * Returns Bank Icon Object that matches to existing bank icons or default icons */ -export default function getBankIcon(bankName: string, isCard = false): BankIcon { +export default function getBankIcon({themeStyles, bankName, isCard = false}: BankIconParams): BankIcon { const bankIcon: BankIcon = { icon: isCard ? GenericBankCard : GenericBank, }; @@ -152,11 +158,11 @@ export default function getBankIcon(bankName: string, isCard = false): BankIcon // For default Credit Card icon the icon size should not be set. if (!isCard) { bankIcon.iconSize = variables.iconSizeExtraLarge; - bankIcon.iconStyles = [styles.bankIconContainer]; + bankIcon.iconStyles = [themeStyles.bankIconContainer]; } else { bankIcon.iconHeight = variables.bankCardHeight; bankIcon.iconWidth = variables.bankCardWidth; - bankIcon.iconStyles = [styles.assignedCardsIconContainer]; + bankIcon.iconStyles = [themeStyles.assignedCardsIconContainer]; } return bankIcon; diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts index 5bd70fee4d83..9e710cf2e895 100644 --- a/src/libs/PaymentUtils.ts +++ b/src/libs/PaymentUtils.ts @@ -3,6 +3,7 @@ import CONST from '@src/CONST'; import BankAccount from '@src/types/onyx/BankAccount'; import Fund from '@src/types/onyx/Fund'; import PaymentMethod from '@src/types/onyx/PaymentMethod'; +import styles from '@styles/styles'; import * as Localize from './Localize'; import BankAccountModel from './models/BankAccount'; @@ -39,7 +40,7 @@ function getPaymentMethodDescription(accountType: AccountType, account: BankAcco /** * Get the PaymentMethods list */ -function formatPaymentMethods(bankAccountList: Record, fundList: Record): PaymentMethod[] { +function formatPaymentMethods(bankAccountList: Record, fundList: Record, themeStyles: typeof styles): PaymentMethod[] { const combinedPaymentMethods: PaymentMethod[] = []; Object.values(bankAccountList).forEach((bankAccount) => { @@ -48,7 +49,9 @@ function formatPaymentMethods(bankAccountList: Record, fund return; } - const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon(bankAccount?.accountData?.additionalData?.bankName ?? '', false); + const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon({ + bankName: bankAccount?.accountData?.additionalData?.bankName ?? '', isCard: false, themeStyles + }); combinedPaymentMethods.push({ ...bankAccount, description: getPaymentMethodDescription(bankAccount?.accountType, bankAccount.accountData), @@ -61,7 +64,13 @@ function formatPaymentMethods(bankAccountList: Record, fund }); Object.values(fundList).forEach((card) => { - const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon(card?.accountData?.bank ?? '', true); + const { + icon, + iconSize, + iconHeight, + iconWidth, + iconStyles + } = getBankIcon({bankName: card?.accountData?.bank ?? '', isCard: true, themeStyles}); combinedPaymentMethods.push({ ...card, description: getPaymentMethodDescription(card?.accountType, card.accountData), @@ -83,4 +92,9 @@ function calculateWalletTransferBalanceFee(currentBalance: number, methodType: s return Math.max(calculateFee, transferMethodTypeFeeStructure.MINIMUM_FEE); } -export {hasExpensifyPaymentMethod, getPaymentMethodDescription, formatPaymentMethods, calculateWalletTransferBalanceFee}; +export { + hasExpensifyPaymentMethod, + getPaymentMethodDescription, + formatPaymentMethods, + calculateWalletTransferBalanceFee +}; diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js index 4f4285d1a62b..13ab2794ea09 100644 --- a/src/pages/ReimbursementAccount/EnableStep.js +++ b/src/pages/ReimbursementAccount/EnableStep.js @@ -50,7 +50,7 @@ function EnableStep(props) { const styles = useThemeStyles(); const isUsingExpensifyCard = props.user.isUsingExpensifyCard; const achData = lodashGet(props.reimbursementAccount, 'achData') || {}; - const {icon, iconSize} = getBankIcon(achData.bankName); + const {icon, iconSize} = getBankIcon({bankName: achData.bankName, themeStyles: styles}); const formattedBankAccountNumber = achData.accountNumber ? `${props.translate('paymentMethodList.accountLastFour')} ${achData.accountNumber.slice(-4)}` : ''; const bankName = achData.addressName; diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js index ef11f8c7dc6e..8949d64550f3 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.js +++ b/src/pages/settings/Wallet/PaymentMethodList.js @@ -222,7 +222,7 @@ function PaymentMethodList({ return _.map(assignedCards, (card) => { const isExpensifyCard = CardUtils.isExpensifyCard(card.cardID); - const icon = getBankIcon(card.bank, true); + const icon = getBankIcon({bankName: card.bank, isCard: true, themeStyles: styles}); // In the case a user has been assigned multiple physical Expensify Cards under one domain, display the Card with PAN const expensifyCardDescription = numberPhysicalExpensifyCards > 1 ? CardUtils.getCardDescription(card.cardID) : translate('walletPage.expensifyCard'); @@ -245,7 +245,7 @@ function PaymentMethodList({ // Hide any billing cards that are not P2P debit cards for now because you cannot make them your default method, or delete them const filteredCardList = _.filter(paymentCardList, (card) => card.accountData.additionalData.isP2PDebitCard); - let combinedPaymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList, filteredCardList); + let combinedPaymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList, filteredCardList, styles); if (!_.isEmpty(filterType)) { combinedPaymentMethods = _.filter(combinedPaymentMethods, (paymentMethod) => paymentMethod.accountType === filterType); diff --git a/src/pages/settings/Wallet/TransferBalancePage.js b/src/pages/settings/Wallet/TransferBalancePage.js index 59704e323eb6..2414edb29087 100644 --- a/src/pages/settings/Wallet/TransferBalancePage.js +++ b/src/pages/settings/Wallet/TransferBalancePage.js @@ -94,7 +94,7 @@ function TransferBalancePage(props) { * @returns {Object|undefined} */ function getSelectedPaymentMethodAccount() { - const paymentMethods = PaymentUtils.formatPaymentMethods(props.bankAccountList, paymentCardList); + const paymentMethods = PaymentUtils.formatPaymentMethods(props.bankAccountList, paymentCardList, styles); const defaultAccount = _.find(paymentMethods, (method) => method.isDefault); const selectedAccount = _.find( @@ -111,7 +111,7 @@ function TransferBalancePage(props) { PaymentMethods.saveWalletTransferMethodType(filterPaymentMethodType); // If we only have a single option for the given paymentMethodType do not force the user to make a selection - const combinedPaymentMethods = PaymentUtils.formatPaymentMethods(props.bankAccountList, paymentCardList); + const combinedPaymentMethods = PaymentUtils.formatPaymentMethods(props.bankAccountList, paymentCardList, styles); const filteredMethods = _.filter(combinedPaymentMethods, (paymentMethod) => paymentMethod.accountType === filterPaymentMethodType); if (filteredMethods.length === 1) { diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js index ecff9af83dbf..c7d69b4fb1e7 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.js +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js @@ -223,7 +223,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod const makeDefaultPaymentMethod = useCallback(() => { const paymentCardList = fundList || {}; // Find the previous default payment method so we can revert if the MakeDefaultPaymentMethod command errors - const paymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList, paymentCardList); + const paymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList, paymentCardList, styles); const previousPaymentMethod = _.find(paymentMethods, (method) => method.isDefault); const currentPaymentMethod = _.find(paymentMethods, (method) => method.methodID === paymentMethod.methodID); From e2b630cd7e182c3d74fa68fbc63df1670656984d Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Tue, 28 Nov 2023 09:27:14 +0100 Subject: [PATCH 8/8] fix: lint and prettier --- src/components/AddPlaidBankAccount.js | 3 +-- src/components/Icon/BankIcons.ts | 4 ++-- src/libs/PaymentUtils.ts | 21 ++++++------------- .../settings/Wallet/PaymentMethodList.js | 2 +- .../settings/Wallet/WalletPage/WalletPage.js | 1 + 5 files changed, 11 insertions(+), 20 deletions(-) diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js index d6c00629f870..dfadde56cf7f 100644 --- a/src/components/AddPlaidBankAccount.js +++ b/src/components/AddPlaidBankAccount.js @@ -193,8 +193,7 @@ function AddPlaidBankAccount({ /> )} - {Boolean(plaidDataErrorMessage) && - {plaidDataErrorMessage}} + {Boolean(plaidDataErrorMessage) && {plaidDataErrorMessage}} {Boolean(token) && !bankName && ( ; @@ -56,7 +56,7 @@ type BankIconParams = { themeStyles: typeof styles; bankName?: string; isCard?: boolean; -} +}; /** * Returns matching asset icon for bankName diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts index 9e710cf2e895..cbeb44eb6bbc 100644 --- a/src/libs/PaymentUtils.ts +++ b/src/libs/PaymentUtils.ts @@ -1,9 +1,9 @@ import getBankIcon from '@components/Icon/BankIcons'; +import styles from '@styles/styles'; import CONST from '@src/CONST'; import BankAccount from '@src/types/onyx/BankAccount'; import Fund from '@src/types/onyx/Fund'; import PaymentMethod from '@src/types/onyx/PaymentMethod'; -import styles from '@styles/styles'; import * as Localize from './Localize'; import BankAccountModel from './models/BankAccount'; @@ -50,7 +50,9 @@ function formatPaymentMethods(bankAccountList: Record, fund } const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon({ - bankName: bankAccount?.accountData?.additionalData?.bankName ?? '', isCard: false, themeStyles + bankName: bankAccount?.accountData?.additionalData?.bankName ?? '', + isCard: false, + themeStyles, }); combinedPaymentMethods.push({ ...bankAccount, @@ -64,13 +66,7 @@ function formatPaymentMethods(bankAccountList: Record, fund }); Object.values(fundList).forEach((card) => { - const { - icon, - iconSize, - iconHeight, - iconWidth, - iconStyles - } = getBankIcon({bankName: card?.accountData?.bank ?? '', isCard: true, themeStyles}); + const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon({bankName: card?.accountData?.bank ?? '', isCard: true, themeStyles}); combinedPaymentMethods.push({ ...card, description: getPaymentMethodDescription(card?.accountType, card.accountData), @@ -92,9 +88,4 @@ function calculateWalletTransferBalanceFee(currentBalance: number, methodType: s return Math.max(calculateFee, transferMethodTypeFeeStructure.MINIMUM_FEE); } -export { - hasExpensifyPaymentMethod, - getPaymentMethodDescription, - formatPaymentMethods, - calculateWalletTransferBalanceFee -}; +export {hasExpensifyPaymentMethod, getPaymentMethodDescription, formatPaymentMethods, calculateWalletTransferBalanceFee}; diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js index 8949d64550f3..79a7c5480954 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.js +++ b/src/pages/settings/Wallet/PaymentMethodList.js @@ -271,7 +271,7 @@ function PaymentMethodList({ }); return combinedPaymentMethods; - }, [shouldShowAssignedCards, fundList, bankAccountList, filterType, isOffline, cardList, translate, actionPaymentMethodType, activePaymentMethodID, onPress]); + }, [shouldShowAssignedCards, fundList, bankAccountList, filterType, isOffline, cardList, translate, actionPaymentMethodType, activePaymentMethodID, onPress, styles]); /** * Render placeholder when there are no payments methods diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js index c7d69b4fb1e7..6f452eed3629 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.js +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js @@ -239,6 +239,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod paymentMethod.selectedPaymentMethodType, bankAccountList, fundList, + styles, ]); const deletePaymentMethod = useCallback(() => {