Feat/31681 theme switching migration enablepayments batch

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');

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,6 +15,7 @@ type CollapsibleSectionProps = ChildrenProps & {
 };
 
 function CollapsibleSection({title, children}: CollapsibleSectionProps) {
+    const styles = useThemeStyles();
     const [isExpanded, setIsExpanded] = useState(false);
 
     /**

src/components/Icon/BankIcons.ts

@@ -52,6 +52,12 @@ type BankIcon = {
     iconStyles?: Array<ViewStyle | CSSProperties>;
 };
 
+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<SvgProps> {
  * 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;

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 useTheme from '@styles/themes/useTheme';
 import variables from '@styles/variables';
 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);

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
-            src={Expensicons.DownArrow}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...(size === 'small' ? {width: styles.pickerSmall().icon.width, height: styles.pickerSmall().icon.height} : {})}
-        />
-    ),
+    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,28 @@ function BasePicker(props) {
         setIsHighlighted(false);
     };
 
+    const {icon, size} = props;
+
+    const iconToRender = useMemo(() => {
+        if (icon) {
+            return () => icon(size);
+        }
+
+        // eslint-disable-next-line react/display-name
+        return () => (
+            <Icon
+                src={Expensicons.DownArrow}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...(size === 'small'
+                    ? {
+                          width: styles.pickerSmall().icon.width,
+                          height: styles.pickerSmall().icon.height,
+                      }
+                    : {})}
+            />
+        );
+    }, [icon, size, styles]);
+
     useImperativeHandle(props.forwardedRef, () => ({
         /**
          * Focuses the picker (if configured to do so)
@@ -236,12 +255,12 @@ function BasePicker(props) {
                 <RNPickerSelect
                     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: themeColors.pickerOptionsTextColor}))}
-                    style={props.size === 'normal' ? styles.picker(props.isDisabled, props.backgroundColor) : styles.pickerSmall(props.backgroundColor)}
+                    items={_.map(props.items, (item) => ({...item, color: theme.pickerOptionsTextColor}))}
+                    style={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}

src/libs/PaymentUtils.ts

@@ -1,4 +1,5 @@
 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';
@@ -39,7 +40,7 @@ function getPaymentMethodDescription(accountType: AccountType, account: BankAcco
 /**
  * Get the PaymentMethods list
  */
-function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fundList: Record<string, Fund>): PaymentMethod[] {
+function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fundList: Record<string, Fund>, themeStyles: typeof styles): PaymentMethod[] {
     const combinedPaymentMethods: PaymentMethod[] = [];
 
     Object.values(bankAccountList).forEach((bankAccount) => {
@@ -48,7 +49,11 @@ function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, 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 +66,7 @@ function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, 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),

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
         <View key={section.title + index}>
@@ -77,9 +77,10 @@ const getLongTermsSections = () =>
     ));
 
 function LongTermsForm() {
+    const styles = useThemeStyles();
     return (
         <>
-            <CollapsibleSection title={Localize.translateLocal('termsStep.longTermsForm.listOfAllFees')}>{getLongTermsSections()}</CollapsibleSection>
+            <CollapsibleSection title={Localize.translateLocal('termsStep.longTermsForm.listOfAllFees')}>{getLongTermsSections(styles)}</CollapsibleSection>
 
             <Text style={[styles.mb4, styles.mt6, styles.textMicroSupporting]}>
                 {Localize.translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp')} {CONST.TERMS.FDIC_PREPAID}{' '}

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;
 

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(
         () => ({

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);
@@ -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

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) {