Skip to content

Commit

Permalink
Merge pull request #31913 from koko57/feat/31681-theme-switching-migr…
Browse files Browse the repository at this point in the history 
…ation-enablepayments-batch

Feat/31681 theme switching migration enablepayments batch
  • Loading branch information
@grgia
grgia authored Nov 29, 2023
2 parents dca1716 + e2b630c commit 2095b2c
Show file tree
Hide file tree
Showing 12 changed files with 99 additions and 63 deletions.
2 changes: 1 addition & 1 deletion src/components/AddPlaidBankAccount.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
3 changes: 2 additions & 1 deletion src/components/CollapsibleSection/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -15,6 +15,7 @@ type CollapsibleSectionProps = ChildrenProps & {
};

function CollapsibleSection({title, children}: CollapsibleSectionProps) {
const styles = useThemeStyles();
const [isExpanded, setIsExpanded] = useState(false);

/**
Expand Down
12 changes: 9 additions & 3 deletions src/components/Icon/BankIcons.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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,
};
Expand All @@ -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;
Expand Down
62 changes: 32 additions & 30 deletions src/components/Onfido/BaseOnfidoWeb.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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: [
{
Expand Down Expand Up @@ -120,6 +120,7 @@ function logOnFidoEvent(event) {

const Onfido = forwardRef((props, ref) => {
const {preferredLocale, translate} = useLocalize();
const theme = useTheme();

useEffect(() => {
initializeOnfido({
Expand All @@ -129,6 +130,7 @@ const Onfido = forwardRef((props, ref) => {
onUserExit: props.onUserExit,
preferredLocale,
translate,
theme,
});

window.addEventListener('userAnalyticsEvent', logOnFidoEvent);
Expand Down
47 changes: 33 additions & 14 deletions src/components/Picker/BasePicker.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 */
Expand Down Expand Up @@ -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
Expand All @@ -124,7 +121,7 @@ function BasePicker(props) {
? {}
: {
...props.placeholder,
color: themeColors.pickerOptionsTextColor,
color: theme.pickerOptionsTextColor,
};

useEffect(() => {
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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}
Expand Down
11 changes: 8 additions & 3 deletions src/libs/PaymentUtils.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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) => {
Expand All @@ -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),
Expand All @@ -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),
Expand Down
7 changes: 4 additions & 3 deletions src/pages/EnablePayments/TermsPage/LongTermsForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -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}>
Expand All @@ -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}{' '}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/ReimbursementAccount/EnableStep.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
3 changes: 2 additions & 1 deletion src/pages/ReimbursementAccount/RequestorStep.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -85,6 +85,7 @@ const validate = (values) => {
*/
const RequestorStep = React.forwardRef(({reimbursementAccount, shouldShowOnfido, onBackButtonPress, getDefaultStateForField}, ref) => {
const {translate} = useLocalize();
const styles = useThemeStyles();

const defaultValues = useMemo(
() => ({
Expand Down
6 changes: 3 additions & 3 deletions src/pages/settings/Wallet/PaymentMethodList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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);
Expand All @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/pages/settings/Wallet/TransferBalancePage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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) {
Expand Down
Loading

0 comments on commit 2095b2c

Please sign in to comment.