From 3dc4373a234cc9644b41f238adc8aef7ae5f571d Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Fri, 22 Dec 2023 11:49:13 +0100 Subject: [PATCH] Refactor BankIcons nad PaymentMethodList --- src/components/Icon/BankIcons/index.native.ts | 34 ++++++ src/components/Icon/BankIcons/index.ts | 42 +++++++ .../Icon/{BankIcons.ts => BankIconsUtils.ts} | 114 +++++++----------- .../settings/Wallet/PaymentMethodList.js | 3 +- 4 files changed, 118 insertions(+), 75 deletions(-) create mode 100644 src/components/Icon/BankIcons/index.native.ts create mode 100644 src/components/Icon/BankIcons/index.ts rename src/components/Icon/{BankIcons.ts => BankIconsUtils.ts} (51%) diff --git a/src/components/Icon/BankIcons/index.native.ts b/src/components/Icon/BankIcons/index.native.ts new file mode 100644 index 000000000000..2011b71588af --- /dev/null +++ b/src/components/Icon/BankIcons/index.native.ts @@ -0,0 +1,34 @@ +import GenericBank from '@assets/images/bankicons/generic-bank-account.svg'; +import GenericBankCard from '@assets/images/cardicons/generic-bank-card.svg'; +import {BankIconParams, getBankIconAsset, getBankNameKey} from '@components/Icon/BankIconsUtils'; +import variables from '@styles/variables'; +import CONST from '@src/CONST'; +import {BankIcon} from '@src/types/onyx/Bank'; + +/** + * Returns Bank Icon Object that matches to existing bank icons or default icons + */ +export default function getBankIcon({styles, bankName, isCard = false}: BankIconParams): BankIcon { + const bankIcon: BankIcon = { + icon: isCard ? GenericBankCard : GenericBank, + }; + if (bankName) { + const bankNameKey = getBankNameKey(bankName.toLowerCase()); + + if (bankNameKey && Object.keys(CONST.BANK_NAMES).includes(bankNameKey)) { + bankIcon.icon = getBankIconAsset(bankNameKey, isCard); + } + } + + // For default Credit Card icon the icon size should not be set. + if (!isCard) { + bankIcon.iconSize = variables.iconSizeExtraLarge; + bankIcon.iconStyles = [styles.bankIconContainer]; + } else { + bankIcon.iconHeight = variables.bankCardHeight; + bankIcon.iconWidth = variables.bankCardWidth; + bankIcon.iconStyles = [styles.assignedCardsIconContainer]; + } + + return bankIcon; +} diff --git a/src/components/Icon/BankIcons/index.ts b/src/components/Icon/BankIcons/index.ts new file mode 100644 index 000000000000..0e0935b103e4 --- /dev/null +++ b/src/components/Icon/BankIcons/index.ts @@ -0,0 +1,42 @@ +import GenericBank from '@assets/images/bankicons/generic-bank-account.svg'; +import GenericBankCard from '@assets/images/cardicons/generic-bank-card.svg'; +import {BankIconParams, getBankIconAsset, getBankNameKey} from '@components/Icon/BankIconsUtils'; +import variables from '@styles/variables'; +import CONST from '@src/CONST'; +import {BankIcon} from '@src/types/onyx/Bank'; +import IconAsset from '@src/types/utils/IconAsset'; + +/** + * It's a wrapper type for a bank icon asset. Bank icons are imported using require(), on the web platform after importing in this way it's necessary to use the property "default" + */ +type BankIconAsset = { + default: IconAsset; +}; + +/** + * Returns Bank Icon Object that matches to existing bank icons or default icons + */ +export default function getBankIcon({styles, bankName, isCard = false}: BankIconParams): BankIcon { + const bankIcon: BankIcon = { + icon: isCard ? GenericBankCard : GenericBank, + }; + if (bankName) { + const bankNameKey = getBankNameKey(bankName.toLowerCase()); + + if (bankNameKey && Object.keys(CONST.BANK_NAMES).includes(bankNameKey)) { + bankIcon.icon = (getBankIconAsset(bankNameKey, isCard) as BankIconAsset).default; + } + } + + // For default Credit Card icon the icon size should not be set. + if (!isCard) { + bankIcon.iconSize = variables.iconSizeExtraLarge; + bankIcon.iconStyles = [styles.bankIconContainer]; + } else { + bankIcon.iconHeight = variables.bankCardHeight; + bankIcon.iconWidth = variables.bankCardWidth; + bankIcon.iconStyles = [styles.assignedCardsIconContainer]; + } + + return bankIcon; +} diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIconsUtils.ts similarity index 51% rename from src/components/Icon/BankIcons.ts rename to src/components/Icon/BankIconsUtils.ts index 213a44577177..b0574f2881d7 100644 --- a/src/components/Icon/BankIcons.ts +++ b/src/components/Icon/BankIconsUtils.ts @@ -1,9 +1,6 @@ -import GenericBank from '@assets/images/bankicons/generic-bank-account.svg'; -import GenericBankCard from '@assets/images/cardicons/generic-bank-card.svg'; import {type ThemeStyles} from '@styles/index'; -import variables from '@styles/variables'; import CONST from '@src/CONST'; -import {BankIcon, BankName, BankNameKey} from '@src/types/onyx/Bank'; +import {BankName, BankNameKey} from '@src/types/onyx/Bank'; import IconAsset from '@src/types/utils/IconAsset'; type BankIconParams = { @@ -15,8 +12,7 @@ type BankIconParams = { /** * Returns matching asset icon for bankName */ - -function getIcon(bankNameKey: BankNameKey, isCard: boolean): IconAsset { +function getBankIconAsset(bankNameKey: BankNameKey, isCard: boolean): IconAsset { const bankValue = CONST.BANK_NAMES[bankNameKey]; // This maps bank names to their respective icon paths. @@ -24,62 +20,62 @@ function getIcon(bankNameKey: BankNameKey, isCard: boolean): IconAsset { // Depending on whether 'isCard' is true, it selects either a card icon or a bank icon. const iconMappings = { [CONST.BANK_NAMES.EXPENSIFY]: isCard - ? (require('@assets/images/cardicons/expensify-card-dark.svg').default as IconAsset) - : (require('@assets/images/bankicons/expensify.svg').default as IconAsset), + ? (require('@assets/images/cardicons/expensify-card-dark.svg') as IconAsset) + : (require('@assets/images/bankicons/expensify.svg') as IconAsset), [CONST.BANK_NAMES.AMERICAN_EXPRESS]: isCard - ? (require('@assets/images/cardicons/american-express.svg').default as IconAsset) - : (require('@assets/images/bankicons/american-express.svg').default as IconAsset), + ? (require('@assets/images/cardicons/american-express.svg') as IconAsset) + : (require('@assets/images/bankicons/american-express.svg') as IconAsset), [CONST.BANK_NAMES.BANK_OF_AMERICA]: isCard - ? (require('@assets/images/cardicons/bank-of-america.svg').default as IconAsset) - : (require('@assets/images/bankicons/bank-of-america.svg').default as IconAsset), - [CONST.BANK_NAMES.BB_T]: isCard ? (require('@assets/images/cardicons/bb-t.svg').default as IconAsset) : (require('@assets/images/bankicons/bb-t.svg').default as IconAsset), + ? (require('@assets/images/cardicons/bank-of-america.svg') as IconAsset) + : (require('@assets/images/bankicons/bank-of-america.svg') as IconAsset), + [CONST.BANK_NAMES.BB_T]: isCard ? (require('@assets/images/cardicons/bb-t.svg') as IconAsset) : (require('@assets/images/bankicons/bb-t.svg') as IconAsset), [CONST.BANK_NAMES.CAPITAL_ONE]: isCard - ? (require('@assets/images/cardicons/capital-one.svg').default as IconAsset) - : (require('@assets/images/bankicons/capital-one.svg').default as IconAsset), - [CONST.BANK_NAMES.CHASE]: isCard ? (require('@assets/images/cardicons/chase.svg').default as IconAsset) : (require('@assets/images/bankicons/chase.svg').default as IconAsset), + ? (require('@assets/images/cardicons/capital-one.svg') as IconAsset) + : (require('@assets/images/bankicons/capital-one.svg') as IconAsset), + [CONST.BANK_NAMES.CHASE]: isCard ? (require('@assets/images/cardicons/chase.svg') as IconAsset) : (require('@assets/images/bankicons/chase.svg') as IconAsset), [CONST.BANK_NAMES.CHARLES_SCHWAB]: isCard - ? (require('@assets/images/cardicons/charles-schwab.svg').default as IconAsset) - : (require('@assets/images/bankicons/charles-schwab.svg').default as IconAsset), + ? (require('@assets/images/cardicons/charles-schwab.svg') as IconAsset) + : (require('@assets/images/bankicons/charles-schwab.svg') as IconAsset), [CONST.BANK_NAMES.CITIBANK]: isCard - ? (require('@assets/images/cardicons/citibank.svg').default as IconAsset) - : (require('@assets/images/bankicons/citibank.svg').default as IconAsset), + ? (require('@assets/images/cardicons/citibank.svg') as IconAsset) + : (require('@assets/images/bankicons/citibank.svg') as IconAsset), [CONST.BANK_NAMES.CITIZENS_BANK]: isCard - ? (require('@assets/images/cardicons/citizens.svg').default as IconAsset) - : (require('@assets/images/bankicons/citizens-bank.svg').default as IconAsset), + ? (require('@assets/images/cardicons/citizens.svg') as IconAsset) + : (require('@assets/images/bankicons/citizens-bank.svg') as IconAsset), [CONST.BANK_NAMES.DISCOVER]: isCard - ? (require('@assets/images/cardicons/discover.svg').default as IconAsset) - : (require('@assets/images/bankicons/discover.svg').default as IconAsset), + ? (require('@assets/images/cardicons/discover.svg') as IconAsset) + : (require('@assets/images/bankicons/discover.svg') as IconAsset), [CONST.BANK_NAMES.FIDELITY]: isCard - ? (require('@assets/images/cardicons/fidelity.svg').default as IconAsset) - : (require('@assets/images/bankicons/fidelity.svg').default as IconAsset), + ? (require('@assets/images/cardicons/fidelity.svg') as IconAsset) + : (require('@assets/images/bankicons/fidelity.svg') as IconAsset), [CONST.BANK_NAMES.GENERIC_BANK]: isCard - ? (require('@assets/images/cardicons/generic-bank-card.svg').default as IconAsset) - : (require('@assets/images/bankicons/generic-bank-account.svg').default as IconAsset), + ? (require('@assets/images/cardicons/generic-bank-card.svg') as IconAsset) + : (require('@assets/images/bankicons/generic-bank-account.svg') as IconAsset), [CONST.BANK_NAMES.HUNTINGTON_BANK]: isCard - ? (require('@assets/images/cardicons/huntington-bank.svg').default as IconAsset) - : (require('@assets/images/bankicons/huntington-bank.svg').default as IconAsset), + ? (require('@assets/images/cardicons/huntington-bank.svg') as IconAsset) + : (require('@assets/images/bankicons/huntington-bank.svg') as IconAsset), [CONST.BANK_NAMES.HUNTINGTON_NATIONAL]: isCard - ? (require('@assets/images/cardicons/huntington-bank.svg').default as IconAsset) - : (require('@assets/images/bankicons/huntington-bank.svg').default as IconAsset), + ? (require('@assets/images/cardicons/huntington-bank.svg') as IconAsset) + : (require('@assets/images/bankicons/huntington-bank.svg') as IconAsset), [CONST.BANK_NAMES.NAVY_FEDERAL_CREDIT_UNION]: isCard - ? (require('@assets/images/cardicons/navy-federal-credit-union.svg').default as IconAsset) - : (require('@assets/images/bankicons/navy-federal-credit-union.svg').default as IconAsset), - [CONST.BANK_NAMES.PNC]: isCard ? (require('@assets/images/cardicons/pnc.svg').default as IconAsset) : (require('@assets/images/bankicons/pnc.svg').default as IconAsset), + ? (require('@assets/images/cardicons/navy-federal-credit-union.svg') as IconAsset) + : (require('@assets/images/bankicons/navy-federal-credit-union.svg') as IconAsset), + [CONST.BANK_NAMES.PNC]: isCard ? (require('@assets/images/cardicons/pnc.svg') as IconAsset) : (require('@assets/images/bankicons/pnc.svg') as IconAsset), [CONST.BANK_NAMES.REGIONS_BANK]: isCard - ? (require('@assets/images/cardicons/regions-bank.svg').default as IconAsset) - : (require('@assets/images/bankicons/regions-bank.svg').default as IconAsset), + ? (require('@assets/images/cardicons/regions-bank.svg') as IconAsset) + : (require('@assets/images/bankicons/regions-bank.svg') as IconAsset), [CONST.BANK_NAMES.SUNTRUST]: isCard - ? (require('@assets/images/cardicons/suntrust.svg').default as IconAsset) - : (require('@assets/images/bankicons/suntrust.svg').default as IconAsset), - [CONST.BANK_NAMES.TD_BANK]: isCard ? (require('@assets/images/cardicons/td-bank.svg').default as IconAsset) : (require('@assets/images/bankicons/td-bank.svg').default as IconAsset), - [CONST.BANK_NAMES.US_BANK]: isCard ? (require('@assets/images/cardicons/us-bank.svg').default as IconAsset) : (require('@assets/images/bankicons/us-bank.svg').default as IconAsset), - [CONST.BANK_NAMES.USAA]: isCard ? (require('@assets/images/cardicons/usaa.svg').default as IconAsset) : (require('@assets/images/bankicons/usaa.svg').default as IconAsset), + ? (require('@assets/images/cardicons/suntrust.svg') as IconAsset) + : (require('@assets/images/bankicons/suntrust.svg') as IconAsset), + [CONST.BANK_NAMES.TD_BANK]: isCard ? (require('@assets/images/cardicons/td-bank.svg') as IconAsset) : (require('@assets/images/bankicons/td-bank.svg') as IconAsset), + [CONST.BANK_NAMES.US_BANK]: isCard ? (require('@assets/images/cardicons/us-bank.svg') as IconAsset) : (require('@assets/images/bankicons/us-bank.svg') as IconAsset), + [CONST.BANK_NAMES.USAA]: isCard ? (require('@assets/images/cardicons/usaa.svg') as IconAsset) : (require('@assets/images/bankicons/usaa.svg') as IconAsset), } as const; // Fallback to generic bank/card icon const iconModule = iconMappings[bankValue] || - (isCard ? (require('@assets/images/cardicons/generic-bank-card.svg').default as IconAsset) : (require('@assets/images/bankicons/generic-bank-account.svg').default as IconAsset)); + (isCard ? (require('@assets/images/cardicons/generic-bank-card.svg') as IconAsset) : (require('@assets/images/bankicons/generic-bank-account.svg') as IconAsset)); return iconModule; } @@ -98,33 +94,5 @@ function getBankNameKey(bankName: string): BankNameKey { return (bank?.[0] as BankNameKey) ?? ''; } -/** - * Returns Bank Icon Object that matches to existing bank icons or default icons - */ - -export default function getBankIcon({styles, bankName, isCard = false}: BankIconParams): BankIcon { - const bankIcon: BankIcon = { - icon: isCard ? GenericBankCard : GenericBank, - }; - if (bankName) { - const bankNameKey = getBankNameKey(bankName.toLowerCase()); - - if (bankNameKey && Object.keys(CONST.BANK_NAMES).includes(bankNameKey)) { - bankIcon.icon = getIcon(bankNameKey, isCard); - } - } - - // For default Credit Card icon the icon size should not be set. - if (!isCard) { - bankIcon.iconSize = variables.iconSizeExtraLarge; - bankIcon.iconStyles = [styles.bankIconContainer]; - } else { - bankIcon.iconHeight = variables.bankCardHeight; - bankIcon.iconWidth = variables.bankCardWidth; - bankIcon.iconStyles = [styles.assignedCardsIconContainer]; - } - - return bankIcon; -} - -export type {BankName}; +export {getBankIconAsset, getBankNameKey}; +export type {BankName, BankIconParams}; diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js index 6e424a918b7e..245a224c55dd 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.js +++ b/src/pages/settings/Wallet/PaymentMethodList.js @@ -265,7 +265,6 @@ function PaymentMethodList({ return { ...paymentMethod, onPress: (e) => onPress(e, paymentMethod.accountType, paymentMethod.accountData, paymentMethod.isDefault, paymentMethod.methodID), - iconFill: isMethodActive ? StyleUtils.getIconFillColor(CONST.BUTTON_STATES.PRESSED) : null, wrapperStyle: isMethodActive ? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)] : null, disabled: paymentMethod.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE, }; @@ -317,7 +316,7 @@ function PaymentMethodList({ description={item.description} icon={item.icon} disabled={item.disabled} - iconFill={item.iconFill} + displayInDefaultIconColor iconHeight={item.iconHeight || item.iconSize} iconWidth={item.iconWidth || item.iconSize} iconStyles={item.iconStyles}