From 4e7f09ad359d492937cfa9598985ae5758485808 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Thu, 23 Nov 2023 09:41:00 +0100 Subject: [PATCH 01/19] add lazy imports for AuthScreens --- src/libs/Navigation/AppNavigator/AuthScreens.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index aedb2fa8d741..0fc78f0cb324 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -14,7 +14,6 @@ import PusherConnectionManager from '@libs/PusherConnectionManager'; import * as SessionUtils from '@libs/SessionUtils'; import DemoSetupPage from '@pages/DemoSetupPage'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; -import DesktopSignInRedirectPage from '@pages/signin/DesktopSignInRedirectPage'; import useThemeStyles from '@styles/useThemeStyles'; import * as App from '@userActions/App'; import * as Download from '@userActions/Download'; @@ -34,13 +33,14 @@ import createCustomStackNavigator from './createCustomStackNavigator'; import defaultScreenOptions from './defaultScreenOptions'; import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions'; import CentralPaneNavigator from './Navigators/CentralPaneNavigator'; -import RightModalNavigator from './Navigators/RightModalNavigator'; const loadReportAttachments = () => require('../../../pages/home/report/ReportAttachments').default; +const loadRightModalNavigator = () => require('./Navigators/RightModalNavigator').default; const loadSidebarScreen = () => require('../../../pages/home/sidebar/SidebarScreen').default; const loadValidateLoginPage = () => require('../../../pages/ValidateLoginPage').default; const loadLogOutPreviousUserPage = () => require('../../../pages/LogOutPreviousUserPage').default; const loadConciergePage = () => require('../../../pages/ConciergePage').default; +const loadDesktopSignInRedirectPage = () => require('../../../pages/signin/DesktopSignInRedirectPage').default; let timezone; let currentAccountID; @@ -332,13 +332,13 @@ function AuthScreens({isUsingMemoryOnlyKeys, lastUpdateIDAppliedToClient, sessio From 9a958eb812bf006aa185bc2062e4b1beb9f39dff Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Thu, 23 Nov 2023 11:32:13 +0100 Subject: [PATCH 02/19] return RightModalNavigator --- src/libs/Navigation/AppNavigator/AuthScreens.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 0fc78f0cb324..1a4873db0a42 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -33,9 +33,9 @@ import createCustomStackNavigator from './createCustomStackNavigator'; import defaultScreenOptions from './defaultScreenOptions'; import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions'; import CentralPaneNavigator from './Navigators/CentralPaneNavigator'; +import RightModalNavigator from './Navigators/RightModalNavigator'; const loadReportAttachments = () => require('../../../pages/home/report/ReportAttachments').default; -const loadRightModalNavigator = () => require('./Navigators/RightModalNavigator').default; const loadSidebarScreen = () => require('../../../pages/home/sidebar/SidebarScreen').default; const loadValidateLoginPage = () => require('../../../pages/ValidateLoginPage').default; const loadLogOutPreviousUserPage = () => require('../../../pages/LogOutPreviousUserPage').default; @@ -332,7 +332,7 @@ function AuthScreens({isUsingMemoryOnlyKeys, lastUpdateIDAppliedToClient, sessio Date: Thu, 23 Nov 2023 12:00:51 +0100 Subject: [PATCH 03/19] export SupportedLanguage --- src/libs/EmojiTrie.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/EmojiTrie.ts b/src/libs/EmojiTrie.ts index a45d1bc45b33..100d24a01546 100644 --- a/src/libs/EmojiTrie.ts +++ b/src/libs/EmojiTrie.ts @@ -128,4 +128,4 @@ const emojiTrie: EmojiTrie = supportedLanguages.reduce((prev, cur) => ({...prev, Timing.end(CONST.TIMING.TRIE_INITIALIZATION); export default emojiTrie; -export type {SimpleEmoji}; +export type {SimpleEmoji, SupportedLanguage}; From dad435b6c607376c3efc138dced1fdfd40c4ce84 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Thu, 23 Nov 2023 12:01:31 +0100 Subject: [PATCH 04/19] lazy import of emojisTrie --- src/libs/EmojiUtils.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/libs/EmojiUtils.ts b/src/libs/EmojiUtils.ts index 22e84921b1ee..db515f7d7703 100644 --- a/src/libs/EmojiUtils.ts +++ b/src/libs/EmojiUtils.ts @@ -8,7 +8,7 @@ import {Emoji, HeaderEmoji, PickerEmojis} from '@assets/emojis/types'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {FrequentlyUsedEmoji} from '@src/types/onyx'; -import emojisTrie from './EmojiTrie'; +import {SupportedLanguage} from './EmojiTrie'; type HeaderIndice = {code: string; index: number; icon: React.FC}; type EmojiSpacer = {code: string; spacer: boolean}; @@ -322,6 +322,9 @@ function getAddedEmojis(currentEmojis: Emoji[], formerEmojis: Emoji[]): Emoji[] * If we're on mobile, we also add a space after the emoji granted there's no text after it. */ function replaceEmojis(text: string, preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE, lang: 'en' | 'es' = CONST.LOCALES.DEFAULT): ReplacedEmoji { + // emojisTrie importing the emoji json file on app starting and we want to avoid it + const emojisTrie = require('./EmojiTrie').default; + const trie = emojisTrie[lang]; if (!trie) { return {text, emojis: []}; @@ -396,7 +399,10 @@ function replaceAndExtractEmojis(text: string, preferredSkinTone = CONST.EMOJI_D * Suggest emojis when typing emojis prefix after colon * @param [limit] - matching emojis limit */ -function suggestEmojis(text: string, lang: keyof typeof emojisTrie, limit = CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_SUGGESTIONS): Emoji[] | undefined { +function suggestEmojis(text: string, lang: keyof SupportedLanguage, limit = CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_SUGGESTIONS): Emoji[] | undefined { + // emojisTrie importing the emoji json file on app starting and we want to avoid it + const emojisTrie = require('./EmojiTrie').default; + const trie = emojisTrie[lang]; if (!trie) { return []; From fa945daa32f38ac9631c2343c3f27c37fc7b4f39 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Thu, 23 Nov 2023 14:25:05 +0100 Subject: [PATCH 05/19] lazy BankIcons --- src/components/Icon/BankIcons.ts | 179 +++++++++++-------------------- 1 file changed, 62 insertions(+), 117 deletions(-) diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts index 5d17e7f0c991..eaf08b93ddd1 100644 --- a/src/components/Icon/BankIcons.ts +++ b/src/components/Icon/BankIcons.ts @@ -1,46 +1,8 @@ import {CSSProperties} from 'react'; import {ViewStyle} from 'react-native'; import {SvgProps} from 'react-native-svg'; -import AmericanExpress from '@assets/images/bankicons/american-express.svg'; -import BankOfAmerica from '@assets/images/bankicons/bank-of-america.svg'; -import BB_T from '@assets/images/bankicons/bb-t.svg'; -import CapitalOne from '@assets/images/bankicons/capital-one.svg'; -import CharlesSchwab from '@assets/images/bankicons/charles-schwab.svg'; -import Chase from '@assets/images/bankicons/chase.svg'; -import CitiBank from '@assets/images/bankicons/citibank.svg'; -import CitizensBank from '@assets/images/bankicons/citizens-bank.svg'; -import Discover from '@assets/images/bankicons/discover.svg'; -import Fidelity from '@assets/images/bankicons/fidelity.svg'; import GenericBank from '@assets/images/bankicons/generic-bank-account.svg'; -import HuntingtonBank from '@assets/images/bankicons/huntington-bank.svg'; -import NavyFederalCreditUnion from '@assets/images/bankicons/navy-federal-credit-union.svg'; -import PNC from '@assets/images/bankicons/pnc.svg'; -import RegionsBank from '@assets/images/bankicons/regions-bank.svg'; -import SunTrust from '@assets/images/bankicons/suntrust.svg'; -import TdBank from '@assets/images/bankicons/td-bank.svg'; -import USBank from '@assets/images/bankicons/us-bank.svg'; -import USAA from '@assets/images/bankicons/usaa.svg'; -// Card Icons -import AmericanExpressCard from '@assets/images/cardicons/american-express.svg'; -import BankOfAmericaCard from '@assets/images/cardicons/bank-of-america.svg'; -import BB_TCard from '@assets/images/cardicons/bb-t.svg'; -import CapitalOneCard from '@assets/images/cardicons/capital-one.svg'; -import CharlesSchwabCard from '@assets/images/cardicons/charles-schwab.svg'; -import ChaseCard from '@assets/images/cardicons/chase.svg'; -import CitiBankCard from '@assets/images/cardicons/citibank.svg'; -import CitizensBankCard from '@assets/images/cardicons/citizens.svg'; -import DiscoverCard from '@assets/images/cardicons/discover.svg'; -import ExpensifyCardImage from '@assets/images/cardicons/expensify-card-dark.svg'; -import FidelityCard from '@assets/images/cardicons/fidelity.svg'; import GenericBankCard from '@assets/images/cardicons/generic-bank-card.svg'; -import HuntingtonBankCard from '@assets/images/cardicons/huntington-bank.svg'; -import NavyFederalCreditUnionCard from '@assets/images/cardicons/navy-federal-credit-union.svg'; -import PNCCard from '@assets/images/cardicons/pnc.svg'; -import RegionsBankCard from '@assets/images/cardicons/regions-bank.svg'; -import SunTrustCard from '@assets/images/cardicons/suntrust.svg'; -import TdBankCard from '@assets/images/cardicons/td-bank.svg'; -import USBankCard from '@assets/images/cardicons/us-bank.svg'; -import USAACard from '@assets/images/cardicons/usaa.svg'; import styles from '@styles/styles'; import variables from '@styles/variables'; @@ -52,101 +14,84 @@ type BankIcon = { iconStyles?: Array; }; +const BANK_NAMES = { + EXPENSIFY: 'expensify', + AMERICAN_EXPRESS: 'americanexpress', + BANK_OF_AMERICA: 'bank of america', + BB_T: 'bbt', + CAPITAL_ONE: 'capital one', + CHASE: 'chase', + CHARLES_SCHWAB: 'charles schwab', + CITIBANK: 'citibank', + CITIZENS_BANK: 'citizens bank', + DISCOVER: 'discover', + FIDELITY: 'fidelity', + GENERIC_BANK: 'generic bank', + HUNTINGTON_BANK: 'huntington bank', + NAVY_FEDERAL_CREDIT_UNION: 'navy federal credit union', + PNC: 'pnc', + REGIONS_BANK: 'regions bank', + SUNTRUST: 'suntrust', + TD_BANK: 'td bank', + US_BANK: 'us bank', + USAA: 'usaa', +}; + +type BankName = keyof typeof BANK_NAMES; + /** * Returns matching asset icon for bankName */ -function getAssetIcon(bankName: string, isCard: boolean): React.FC { - if (bankName.includes('expensify')) { - return ExpensifyCardImage; - } - - if (bankName.includes('americanexpress')) { - return isCard ? AmericanExpressCard : AmericanExpress; - } - - if (bankName.includes('bank of america') || bankName.includes('bankofamerica')) { - return isCard ? BankOfAmericaCard : BankOfAmerica; - } - - if (bankName.startsWith('bbt')) { - return isCard ? BB_TCard : BB_T; - } - - if (bankName.startsWith('capital one') || bankName.includes('capitalone')) { - return isCard ? CapitalOneCard : CapitalOne; - } - - if (bankName.startsWith('chase') || bankName.includes('chase')) { - return isCard ? ChaseCard : Chase; - } - - if (bankName.includes('charles schwab') || bankName.includes('charlesschwab')) { - return isCard ? CharlesSchwabCard : CharlesSchwab; - } - - if (bankName.startsWith('citibank') || bankName.includes('citibank')) { - return isCard ? CitiBankCard : CitiBank; - } - - if (bankName.startsWith('citizens bank') || bankName.includes('citizensbank')) { - return isCard ? CitizensBankCard : CitizensBank; - } - - if (bankName.startsWith('discover ') || bankName.includes('discover.') || bankName === 'discover') { - return isCard ? DiscoverCard : Discover; - } - - if (bankName.startsWith('fidelity')) { - return isCard ? FidelityCard : Fidelity; - } - - if (bankName.startsWith('huntington bank') || bankName.includes('huntingtonnational') || bankName.includes('huntington national')) { - return isCard ? HuntingtonBankCard : HuntingtonBank; - } - - if (bankName.startsWith('navy federal credit union') || bankName.includes('navy federal credit union')) { - return isCard ? NavyFederalCreditUnionCard : NavyFederalCreditUnion; - } - - if (bankName.startsWith('pnc') || bankName.includes('pnc')) { - return isCard ? PNCCard : PNC; - } - - if (bankName.startsWith('regions bank') || bankName.includes('regionsbank')) { - return isCard ? RegionsBankCard : RegionsBank; - } - - if (bankName.startsWith('suntrust') || bankName.includes('suntrust')) { - return isCard ? SunTrustCard : SunTrust; - } - - if (bankName.startsWith('td bank') || bankName.startsWith('tdbank') || bankName.includes('tdbank')) { - return isCard ? TdBankCard : TdBank; - } - - if (bankName.startsWith('us bank') || bankName.startsWith('usbank')) { - return isCard ? USBankCard : USBank; - } +function getAssetIcon(bankName: BankName, isCard: boolean): React.FC { + // Mapping bank names to their respective icon paths + const iconMappings = { + [BANK_NAMES.EXPENSIFY]: isCard ? require('@assets/images/cardicons/expensify-card-dark.svg') : require('@assets/images/bankicons/expensify.svg'), + [BANK_NAMES.AMERICAN_EXPRESS]: isCard ? require('@assets/images/cardicons/american-express.svg') : require('@assets/images/bankicons/american-express.svg'), + [BANK_NAMES.BANK_OF_AMERICA]: isCard ? require('@assets/images/cardicons/bank-of-america.svg') : require('@assets/images/bankicons/bank-of-america.svg'), + [BANK_NAMES.BB_T]: isCard ? require('@assets/images/cardicons/bb-t.svg') : require('@assets/images/bankicons/bb-t.svg'), + [BANK_NAMES.CAPITAL_ONE]: isCard ? require('@assets/images/cardicons/capital-one.svg') : require('@assets/images/bankicons/capital-one.svg'), + [BANK_NAMES.CHASE]: isCard ? require('@assets/images/cardicons/chase.svg') : require('@assets/images/bankicons/chase.svg'), + [BANK_NAMES.CHARLES_SCHWAB]: isCard ? require('@assets/images/cardicons/charles-schwab.svg') : require('@assets/images/bankicons/charles-schwab.svg'), + [BANK_NAMES.CITIBANK]: isCard ? require('@assets/images/cardicons/citibank.svg') : require('@assets/images/bankicons/citibank.svg'), + [BANK_NAMES.CITIZENS_BANK]: isCard ? require('@assets/images/cardicons/citizens.svg') : require('@assets/images/bankicons/citizens-bank.svg'), + [BANK_NAMES.DISCOVER]: isCard ? require('@assets/images/cardicons/discover.svg') : require('@assets/images/bankicons/discover.svg'), + [BANK_NAMES.FIDELITY]: isCard ? require('@assets/images/cardicons/fidelity.svg') : require('@assets/images/bankicons/fidelity.svg'), + [BANK_NAMES.GENERIC_BANK]: isCard ? require('@assets/images/cardicons/generic-bank-card.svg') : require('@assets/images/bankicons/generic-bank-account.svg'), + [BANK_NAMES.HUNTINGTON_BANK]: isCard ? require('@assets/images/cardicons/huntington-bank.svg') : require('@assets/images/bankicons/huntington-bank.svg'), + [BANK_NAMES.NAVY_FEDERAL_CREDIT_UNION]: isCard + ? require('@assets/images/cardicons/navy-federal-credit-union.svg') + : require('@assets/images/bankicons/navy-federal-credit-union.svg'), + [BANK_NAMES.PNC]: isCard ? require('@assets/images/cardicons/pnc.svg') : require('@assets/images/bankicons/pnc.svg'), + [BANK_NAMES.REGIONS_BANK]: isCard ? require('@assets/images/cardicons/regions-bank.svg') : require('@assets/images/bankicons/regions-bank.svg'), + [BANK_NAMES.SUNTRUST]: isCard ? require('@assets/images/cardicons/suntrust.svg') : require('@assets/images/bankicons/suntrust.svg'), + [BANK_NAMES.TD_BANK]: isCard ? require('@assets/images/cardicons/td-bank.svg') : require('@assets/images/bankicons/td-bank.svg'), + [BANK_NAMES.US_BANK]: isCard ? require('@assets/images/cardicons/us-bank.svg') : require('@assets/images/bankicons/us-bank.svg'), + [BANK_NAMES.USAA]: isCard ? require('@assets/images/cardicons/usaa.svg') : require('@assets/images/bankicons/usaa.svg'), + }; - if (bankName.includes('usaa')) { - return isCard ? USAACard : USAA; - } + // Fallback to generic bank/card icon + const iconModule = iconMappings[bankName] || (isCard ? '@assets/images/cardicons/generic-bank-card.svg' : '@assets/images/bankicons/generic-bank-account.svg'); + return iconModule as React.FC; +} - return isCard ? GenericBankCard : GenericBank; +function getBankNameKey(bankName: string): BankName | undefined { + return Object.keys(BANK_NAMES).find((key) => BANK_NAMES[key as BankName].toLowerCase() === bankName) as BankName | undefined; } /** * 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(bankName: BankName, isCard = false): BankIcon { + const bankNameKey = getBankNameKey(bankName.toLowerCase()); + const bankIcon: BankIcon = { icon: isCard ? GenericBankCard : GenericBank, }; - if (bankName) { - bankIcon.icon = getAssetIcon(bankName.toLowerCase(), isCard); + if (bankNameKey && Object.keys(BANK_NAMES).includes(bankNameKey)) { + bankIcon.icon = getAssetIcon(bankNameKey, isCard); } // For default Credit Card icon the icon size should not be set. From a83117b9b407cd4cc2d6ec9a710d8efcfa22ea7e Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Thu, 23 Nov 2023 16:11:04 +0100 Subject: [PATCH 06/19] add BankName type --- src/components/Icon/BankIcons.ts | 11 +++++++---- src/types/onyx/AccountData.ts | 3 ++- src/types/onyx/Fund.ts | 3 ++- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts index eaf08b93ddd1..9087582b3997 100644 --- a/src/components/Icon/BankIcons.ts +++ b/src/components/Icon/BankIcons.ts @@ -37,13 +37,14 @@ const BANK_NAMES = { USAA: 'usaa', }; +type BankNameAndEmptyString = keyof typeof BANK_NAMES | ''; type BankName = keyof typeof BANK_NAMES; /** * Returns matching asset icon for bankName */ -function getAssetIcon(bankName: BankName, isCard: boolean): React.FC { +function getAssetIcon(bankName: BankNameAndEmptyString, isCard: boolean): React.FC { // Mapping bank names to their respective icon paths const iconMappings = { [BANK_NAMES.EXPENSIFY]: isCard ? require('@assets/images/cardicons/expensify-card-dark.svg') : require('@assets/images/bankicons/expensify.svg'), @@ -75,15 +76,15 @@ function getAssetIcon(bankName: BankName, isCard: boolean): React.FC { return iconModule as React.FC; } -function getBankNameKey(bankName: string): BankName | undefined { - return Object.keys(BANK_NAMES).find((key) => BANK_NAMES[key as BankName].toLowerCase() === bankName) as BankName | undefined; +function getBankNameKey(bankName: string): BankNameAndEmptyString | undefined { + return Object.keys(BANK_NAMES).find((key) => BANK_NAMES[key as BankName].toLowerCase() === bankName) as BankNameAndEmptyString | undefined; } /** * Returns Bank Icon Object that matches to existing bank icons or default icons */ -export default function getBankIcon(bankName: BankName, isCard = false): BankIcon { +export default function getBankIcon(bankName: BankNameAndEmptyString, isCard = false): BankIcon { const bankNameKey = getBankNameKey(bankName.toLowerCase()); const bankIcon: BankIcon = { @@ -106,3 +107,5 @@ export default function getBankIcon(bankName: BankName, isCard = false): BankIco return bankIcon; } + +export type {BankName}; diff --git a/src/types/onyx/AccountData.ts b/src/types/onyx/AccountData.ts index 79484e7886af..c9ffcc34c659 100644 --- a/src/types/onyx/AccountData.ts +++ b/src/types/onyx/AccountData.ts @@ -1,10 +1,11 @@ +import {BankName} from '@components/Icon/BankIcons'; import * as OnyxCommon from './OnyxCommon'; type AdditionalData = { isP2PDebitCard?: boolean; beneficialOwners?: string[]; currency?: string; - bankName?: string; + bankName?: BankName; fieldsType?: string; country?: string; }; diff --git a/src/types/onyx/Fund.ts b/src/types/onyx/Fund.ts index 4e6cbc695a8d..d1d27cce5d71 100644 --- a/src/types/onyx/Fund.ts +++ b/src/types/onyx/Fund.ts @@ -1,3 +1,4 @@ +import {BankName} from '@components/Icon/BankIcons'; import CONST from '@src/CONST'; import * as OnyxCommon from './OnyxCommon'; @@ -21,7 +22,7 @@ type AccountData = { created?: string; currency?: string; fundID?: number; - bank?: string; + bank?: BankName; }; type Fund = { From e962db8fee674697d8291804fe16de8503c0b1f7 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Thu, 23 Nov 2023 16:43:16 +0100 Subject: [PATCH 07/19] fix warning --- src/libs/Navigation/AppNavigator/AuthScreens.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 1a4873db0a42..50a70cd70c56 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -40,7 +40,7 @@ const loadSidebarScreen = () => require('../../../pages/home/sidebar/SidebarScre const loadValidateLoginPage = () => require('../../../pages/ValidateLoginPage').default; const loadLogOutPreviousUserPage = () => require('../../../pages/LogOutPreviousUserPage').default; const loadConciergePage = () => require('../../../pages/ConciergePage').default; -const loadDesktopSignInRedirectPage = () => require('../../../pages/signin/DesktopSignInRedirectPage').default; +const LoadDesktopSignInRedirectPage = () => require('../../../pages/signin/DesktopSignInRedirectPage').default; let timezone; let currentAccountID; @@ -338,7 +338,7 @@ function AuthScreens({isUsingMemoryOnlyKeys, lastUpdateIDAppliedToClient, sessio From 1e9d3af2b81437d7458f6f3a19524351602e4017 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Thu, 23 Nov 2023 17:11:50 +0100 Subject: [PATCH 08/19] clean --- src/libs/EmojiUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/EmojiUtils.ts b/src/libs/EmojiUtils.ts index db515f7d7703..49d08fcc1b2c 100644 --- a/src/libs/EmojiUtils.ts +++ b/src/libs/EmojiUtils.ts @@ -322,7 +322,7 @@ function getAddedEmojis(currentEmojis: Emoji[], formerEmojis: Emoji[]): Emoji[] * If we're on mobile, we also add a space after the emoji granted there's no text after it. */ function replaceEmojis(text: string, preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE, lang: 'en' | 'es' = CONST.LOCALES.DEFAULT): ReplacedEmoji { - // emojisTrie importing the emoji json file on app starting and we want to avoid it + // emojisTrie importing the emoji JSON file on the app starting and we want to avoid it const emojisTrie = require('./EmojiTrie').default; const trie = emojisTrie[lang]; @@ -400,7 +400,7 @@ function replaceAndExtractEmojis(text: string, preferredSkinTone = CONST.EMOJI_D * @param [limit] - matching emojis limit */ function suggestEmojis(text: string, lang: keyof SupportedLanguage, limit = CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_SUGGESTIONS): Emoji[] | undefined { - // emojisTrie importing the emoji json file on app starting and we want to avoid it + // emojisTrie importing the emoji JSON file on the app starting and we want to avoid it const emojisTrie = require('./EmojiTrie').default; const trie = emojisTrie[lang]; From 33c787d5e260c12d0eab65aea52a94e89148bc75 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Fri, 24 Nov 2023 11:43:03 +0100 Subject: [PATCH 09/19] update types --- src/components/Icon/BankIcons.ts | 83 +++++++++++++++++++++----------- 1 file changed, 54 insertions(+), 29 deletions(-) diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts index 9087582b3997..a1711ac24955 100644 --- a/src/components/Icon/BankIcons.ts +++ b/src/components/Icon/BankIcons.ts @@ -1,6 +1,7 @@ import {CSSProperties} from 'react'; import {ViewStyle} from 'react-native'; import {SvgProps} from 'react-native-svg'; +import {ValueOf} from 'type-fest'; import GenericBank from '@assets/images/bankicons/generic-bank-account.svg'; import GenericBankCard from '@assets/images/cardicons/generic-bank-card.svg'; import styles from '@styles/styles'; @@ -35,49 +36,73 @@ const BANK_NAMES = { TD_BANK: 'td bank', US_BANK: 'us bank', USAA: 'usaa', -}; +} as const; type BankNameAndEmptyString = keyof typeof BANK_NAMES | ''; -type BankName = keyof typeof BANK_NAMES; +type BankName = ValueOf; +type BankNameKey = keyof typeof BANK_NAMES; /** * Returns matching asset icon for bankName */ -function getAssetIcon(bankName: BankNameAndEmptyString, isCard: boolean): React.FC { +function getAssetIcon(bankNameKey: BankNameKey, isCard: boolean): React.FC { + const bankValue = BANK_NAMES[bankNameKey]; + // Mapping bank names to their respective icon paths const iconMappings = { - [BANK_NAMES.EXPENSIFY]: isCard ? require('@assets/images/cardicons/expensify-card-dark.svg') : require('@assets/images/bankicons/expensify.svg'), - [BANK_NAMES.AMERICAN_EXPRESS]: isCard ? require('@assets/images/cardicons/american-express.svg') : require('@assets/images/bankicons/american-express.svg'), - [BANK_NAMES.BANK_OF_AMERICA]: isCard ? require('@assets/images/cardicons/bank-of-america.svg') : require('@assets/images/bankicons/bank-of-america.svg'), - [BANK_NAMES.BB_T]: isCard ? require('@assets/images/cardicons/bb-t.svg') : require('@assets/images/bankicons/bb-t.svg'), - [BANK_NAMES.CAPITAL_ONE]: isCard ? require('@assets/images/cardicons/capital-one.svg') : require('@assets/images/bankicons/capital-one.svg'), - [BANK_NAMES.CHASE]: isCard ? require('@assets/images/cardicons/chase.svg') : require('@assets/images/bankicons/chase.svg'), - [BANK_NAMES.CHARLES_SCHWAB]: isCard ? require('@assets/images/cardicons/charles-schwab.svg') : require('@assets/images/bankicons/charles-schwab.svg'), - [BANK_NAMES.CITIBANK]: isCard ? require('@assets/images/cardicons/citibank.svg') : require('@assets/images/bankicons/citibank.svg'), - [BANK_NAMES.CITIZENS_BANK]: isCard ? require('@assets/images/cardicons/citizens.svg') : require('@assets/images/bankicons/citizens-bank.svg'), - [BANK_NAMES.DISCOVER]: isCard ? require('@assets/images/cardicons/discover.svg') : require('@assets/images/bankicons/discover.svg'), - [BANK_NAMES.FIDELITY]: isCard ? require('@assets/images/cardicons/fidelity.svg') : require('@assets/images/bankicons/fidelity.svg'), - [BANK_NAMES.GENERIC_BANK]: isCard ? require('@assets/images/cardicons/generic-bank-card.svg') : require('@assets/images/bankicons/generic-bank-account.svg'), - [BANK_NAMES.HUNTINGTON_BANK]: isCard ? require('@assets/images/cardicons/huntington-bank.svg') : require('@assets/images/bankicons/huntington-bank.svg'), + [BANK_NAMES.EXPENSIFY]: isCard + ? (require('@assets/images/cardicons/expensify-card-dark.svg') as React.FC) + : (require('@assets/images/bankicons/expensify.svg') as React.FC), + [BANK_NAMES.AMERICAN_EXPRESS]: isCard + ? (require('@assets/images/cardicons/american-express.svg') as React.FC) + : (require('@assets/images/bankicons/american-express.svg') as React.FC), + [BANK_NAMES.BANK_OF_AMERICA]: isCard + ? (require('@assets/images/cardicons/bank-of-america.svg') as React.FC) + : (require('@assets/images/bankicons/bank-of-america.svg') as React.FC), + [BANK_NAMES.BB_T]: isCard ? (require('@assets/images/cardicons/bb-t.svg') as React.FC) : (require('@assets/images/bankicons/bb-t.svg') as React.FC), + [BANK_NAMES.CAPITAL_ONE]: isCard + ? (require('@assets/images/cardicons/capital-one.svg') as React.FC) + : (require('@assets/images/bankicons/capital-one.svg') as React.FC), + [BANK_NAMES.CHASE]: isCard ? (require('@assets/images/cardicons/chase.svg') as React.FC) : (require('@assets/images/bankicons/chase.svg') as React.FC), + [BANK_NAMES.CHARLES_SCHWAB]: isCard + ? (require('@assets/images/cardicons/charles-schwab.svg') as React.FC) + : (require('@assets/images/bankicons/charles-schwab.svg') as React.FC), + [BANK_NAMES.CITIBANK]: isCard ? (require('@assets/images/cardicons/citibank.svg') as React.FC) : (require('@assets/images/bankicons/citibank.svg') as React.FC), + [BANK_NAMES.CITIZENS_BANK]: isCard + ? (require('@assets/images/cardicons/citizens.svg') as React.FC) + : (require('@assets/images/bankicons/citizens-bank.svg') as React.FC), + [BANK_NAMES.DISCOVER]: isCard ? (require('@assets/images/cardicons/discover.svg') as React.FC) : (require('@assets/images/bankicons/discover.svg') as React.FC), + [BANK_NAMES.FIDELITY]: isCard ? (require('@assets/images/cardicons/fidelity.svg') as React.FC) : (require('@assets/images/bankicons/fidelity.svg') as React.FC), + [BANK_NAMES.GENERIC_BANK]: isCard + ? (require('@assets/images/cardicons/generic-bank-card.svg') as React.FC) + : (require('@assets/images/bankicons/generic-bank-account.svg') as React.FC), + [BANK_NAMES.HUNTINGTON_BANK]: isCard + ? (require('@assets/images/cardicons/huntington-bank.svg') as React.FC) + : (require('@assets/images/bankicons/huntington-bank.svg') as React.FC), [BANK_NAMES.NAVY_FEDERAL_CREDIT_UNION]: isCard - ? require('@assets/images/cardicons/navy-federal-credit-union.svg') - : require('@assets/images/bankicons/navy-federal-credit-union.svg'), - [BANK_NAMES.PNC]: isCard ? require('@assets/images/cardicons/pnc.svg') : require('@assets/images/bankicons/pnc.svg'), - [BANK_NAMES.REGIONS_BANK]: isCard ? require('@assets/images/cardicons/regions-bank.svg') : require('@assets/images/bankicons/regions-bank.svg'), - [BANK_NAMES.SUNTRUST]: isCard ? require('@assets/images/cardicons/suntrust.svg') : require('@assets/images/bankicons/suntrust.svg'), - [BANK_NAMES.TD_BANK]: isCard ? require('@assets/images/cardicons/td-bank.svg') : require('@assets/images/bankicons/td-bank.svg'), - [BANK_NAMES.US_BANK]: isCard ? require('@assets/images/cardicons/us-bank.svg') : require('@assets/images/bankicons/us-bank.svg'), - [BANK_NAMES.USAA]: isCard ? require('@assets/images/cardicons/usaa.svg') : require('@assets/images/bankicons/usaa.svg'), - }; + ? (require('@assets/images/cardicons/navy-federal-credit-union.svg') as React.FC) + : (require('@assets/images/bankicons/navy-federal-credit-union.svg') as React.FC), + [BANK_NAMES.PNC]: isCard ? (require('@assets/images/cardicons/pnc.svg') as React.FC) : (require('@assets/images/bankicons/pnc.svg') as React.FC), + [BANK_NAMES.REGIONS_BANK]: isCard + ? (require('@assets/images/cardicons/regions-bank.svg') as React.FC) + : (require('@assets/images/bankicons/regions-bank.svg') as React.FC), + [BANK_NAMES.SUNTRUST]: isCard ? (require('@assets/images/cardicons/suntrust.svg') as React.FC) : (require('@assets/images/bankicons/suntrust.svg') as React.FC), + [BANK_NAMES.TD_BANK]: isCard ? (require('@assets/images/cardicons/td-bank.svg') as React.FC) : (require('@assets/images/bankicons/td-bank.svg') as React.FC), + [BANK_NAMES.US_BANK]: isCard ? (require('@assets/images/cardicons/us-bank.svg') as React.FC) : (require('@assets/images/bankicons/us-bank.svg') as React.FC), + [BANK_NAMES.USAA]: isCard ? (require('@assets/images/cardicons/usaa.svg') as React.FC) : (require('@assets/images/bankicons/usaa.svg') as React.FC), + } as const; // Fallback to generic bank/card icon - const iconModule = iconMappings[bankName] || (isCard ? '@assets/images/cardicons/generic-bank-card.svg' : '@assets/images/bankicons/generic-bank-account.svg'); - return iconModule as React.FC; + const iconModule = + iconMappings[bankValue] || + (isCard ? (require('@assets/images/cardicons/generic-bank-card.svg') as React.FC) : (require('@assets/images/bankicons/generic-bank-account.svg') as React.FC)); + return iconModule; } -function getBankNameKey(bankName: string): BankNameAndEmptyString | undefined { - return Object.keys(BANK_NAMES).find((key) => BANK_NAMES[key as BankName].toLowerCase() === bankName) as BankNameAndEmptyString | undefined; +function getBankNameKey(bankName: string): BankNameKey | '' { + const bank = Object.entries(BANK_NAMES).find(([, value]) => value?.toLowerCase() === bankName); + return (bank?.[0] as BankNameKey) ?? ''; } /** From f72c49c2432d362ec9a96e3183fda5350dae3de0 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Fri, 24 Nov 2023 11:47:57 +0100 Subject: [PATCH 10/19] create Bank type --- src/types/onyx/Bank.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/types/onyx/Bank.ts diff --git a/src/types/onyx/Bank.ts b/src/types/onyx/Bank.ts new file mode 100644 index 000000000000..a490198f2650 --- /dev/null +++ b/src/types/onyx/Bank.ts @@ -0,0 +1,19 @@ +import {CSSProperties} from 'react'; +import {ViewStyle} from 'react-native'; +import {SvgProps} from 'react-native-svg'; +import {ValueOf} from 'type-fest'; +import CONST from '@src/CONST'; + +type BankIcon = { + icon: React.FC; + iconSize?: number; + iconHeight?: number; + iconWidth?: number; + iconStyles?: Array; +}; + +type BankNameAndEmptyString = keyof typeof CONST.BANK_NAMES | ''; +type BankName = ValueOf; +type BankNameKey = keyof typeof CONST.BANK_NAMES; + +export type {BankIcon, BankNameAndEmptyString, BankName, BankNameKey}; From 61a67018d1066a8fa8480e25942e6efc9fc020a2 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Fri, 24 Nov 2023 11:48:17 +0100 Subject: [PATCH 11/19] clean BankIcon component --- src/components/Icon/BankIcons.ts | 98 ++++++++++++-------------------- 1 file changed, 37 insertions(+), 61 deletions(-) diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts index a1711ac24955..9d843856c4d1 100644 --- a/src/components/Icon/BankIcons.ts +++ b/src/components/Icon/BankIcons.ts @@ -1,96 +1,72 @@ -import {CSSProperties} from 'react'; -import {ViewStyle} from 'react-native'; import {SvgProps} from 'react-native-svg'; -import {ValueOf} from 'type-fest'; import GenericBank from '@assets/images/bankicons/generic-bank-account.svg'; import GenericBankCard from '@assets/images/cardicons/generic-bank-card.svg'; import styles from '@styles/styles'; import variables from '@styles/variables'; - -type BankIcon = { - icon: React.FC; - iconSize?: number; - iconHeight?: number; - iconWidth?: number; - iconStyles?: Array; -}; - -const BANK_NAMES = { - EXPENSIFY: 'expensify', - AMERICAN_EXPRESS: 'americanexpress', - BANK_OF_AMERICA: 'bank of america', - BB_T: 'bbt', - CAPITAL_ONE: 'capital one', - CHASE: 'chase', - CHARLES_SCHWAB: 'charles schwab', - CITIBANK: 'citibank', - CITIZENS_BANK: 'citizens bank', - DISCOVER: 'discover', - FIDELITY: 'fidelity', - GENERIC_BANK: 'generic bank', - HUNTINGTON_BANK: 'huntington bank', - NAVY_FEDERAL_CREDIT_UNION: 'navy federal credit union', - PNC: 'pnc', - REGIONS_BANK: 'regions bank', - SUNTRUST: 'suntrust', - TD_BANK: 'td bank', - US_BANK: 'us bank', - USAA: 'usaa', -} as const; - -type BankNameAndEmptyString = keyof typeof BANK_NAMES | ''; -type BankName = ValueOf; -type BankNameKey = keyof typeof BANK_NAMES; +import CONST from '@src/CONST'; +import {BankIcon, BankName, BankNameAndEmptyString, BankNameKey} from '@src/types/onyx/Bank'; /** * Returns matching asset icon for bankName */ function getAssetIcon(bankNameKey: BankNameKey, isCard: boolean): React.FC { - const bankValue = BANK_NAMES[bankNameKey]; + const bankValue = CONST.BANK_NAMES[bankNameKey]; // Mapping bank names to their respective icon paths const iconMappings = { - [BANK_NAMES.EXPENSIFY]: isCard + [CONST.BANK_NAMES.EXPENSIFY]: isCard ? (require('@assets/images/cardicons/expensify-card-dark.svg') as React.FC) : (require('@assets/images/bankicons/expensify.svg') as React.FC), - [BANK_NAMES.AMERICAN_EXPRESS]: isCard + [CONST.BANK_NAMES.AMERICAN_EXPRESS]: isCard ? (require('@assets/images/cardicons/american-express.svg') as React.FC) : (require('@assets/images/bankicons/american-express.svg') as React.FC), - [BANK_NAMES.BANK_OF_AMERICA]: isCard + [CONST.BANK_NAMES.BANK_OF_AMERICA]: isCard ? (require('@assets/images/cardicons/bank-of-america.svg') as React.FC) : (require('@assets/images/bankicons/bank-of-america.svg') as React.FC), - [BANK_NAMES.BB_T]: isCard ? (require('@assets/images/cardicons/bb-t.svg') as React.FC) : (require('@assets/images/bankicons/bb-t.svg') as React.FC), - [BANK_NAMES.CAPITAL_ONE]: isCard + [CONST.BANK_NAMES.BB_T]: isCard ? (require('@assets/images/cardicons/bb-t.svg') as React.FC) : (require('@assets/images/bankicons/bb-t.svg') as React.FC), + [CONST.BANK_NAMES.CAPITAL_ONE]: isCard ? (require('@assets/images/cardicons/capital-one.svg') as React.FC) : (require('@assets/images/bankicons/capital-one.svg') as React.FC), - [BANK_NAMES.CHASE]: isCard ? (require('@assets/images/cardicons/chase.svg') as React.FC) : (require('@assets/images/bankicons/chase.svg') as React.FC), - [BANK_NAMES.CHARLES_SCHWAB]: isCard + [CONST.BANK_NAMES.CHASE]: isCard ? (require('@assets/images/cardicons/chase.svg') as React.FC) : (require('@assets/images/bankicons/chase.svg') as React.FC), + [CONST.BANK_NAMES.CHARLES_SCHWAB]: isCard ? (require('@assets/images/cardicons/charles-schwab.svg') as React.FC) : (require('@assets/images/bankicons/charles-schwab.svg') as React.FC), - [BANK_NAMES.CITIBANK]: isCard ? (require('@assets/images/cardicons/citibank.svg') as React.FC) : (require('@assets/images/bankicons/citibank.svg') as React.FC), - [BANK_NAMES.CITIZENS_BANK]: isCard + [CONST.BANK_NAMES.CITIBANK]: isCard + ? (require('@assets/images/cardicons/citibank.svg') as React.FC) + : (require('@assets/images/bankicons/citibank.svg') as React.FC), + [CONST.BANK_NAMES.CITIZENS_BANK]: isCard ? (require('@assets/images/cardicons/citizens.svg') as React.FC) : (require('@assets/images/bankicons/citizens-bank.svg') as React.FC), - [BANK_NAMES.DISCOVER]: isCard ? (require('@assets/images/cardicons/discover.svg') as React.FC) : (require('@assets/images/bankicons/discover.svg') as React.FC), - [BANK_NAMES.FIDELITY]: isCard ? (require('@assets/images/cardicons/fidelity.svg') as React.FC) : (require('@assets/images/bankicons/fidelity.svg') as React.FC), - [BANK_NAMES.GENERIC_BANK]: isCard + [CONST.BANK_NAMES.DISCOVER]: isCard + ? (require('@assets/images/cardicons/discover.svg') as React.FC) + : (require('@assets/images/bankicons/discover.svg') as React.FC), + [CONST.BANK_NAMES.FIDELITY]: isCard + ? (require('@assets/images/cardicons/fidelity.svg') as React.FC) + : (require('@assets/images/bankicons/fidelity.svg') as React.FC), + [CONST.BANK_NAMES.GENERIC_BANK]: isCard ? (require('@assets/images/cardicons/generic-bank-card.svg') as React.FC) : (require('@assets/images/bankicons/generic-bank-account.svg') as React.FC), - [BANK_NAMES.HUNTINGTON_BANK]: isCard + [CONST.BANK_NAMES.HUNTINGTON_BANK]: isCard ? (require('@assets/images/cardicons/huntington-bank.svg') as React.FC) : (require('@assets/images/bankicons/huntington-bank.svg') as React.FC), - [BANK_NAMES.NAVY_FEDERAL_CREDIT_UNION]: isCard + [CONST.BANK_NAMES.NAVY_FEDERAL_CREDIT_UNION]: isCard ? (require('@assets/images/cardicons/navy-federal-credit-union.svg') as React.FC) : (require('@assets/images/bankicons/navy-federal-credit-union.svg') as React.FC), - [BANK_NAMES.PNC]: isCard ? (require('@assets/images/cardicons/pnc.svg') as React.FC) : (require('@assets/images/bankicons/pnc.svg') as React.FC), - [BANK_NAMES.REGIONS_BANK]: isCard + [CONST.BANK_NAMES.PNC]: isCard ? (require('@assets/images/cardicons/pnc.svg') as React.FC) : (require('@assets/images/bankicons/pnc.svg') as React.FC), + [CONST.BANK_NAMES.REGIONS_BANK]: isCard ? (require('@assets/images/cardicons/regions-bank.svg') as React.FC) : (require('@assets/images/bankicons/regions-bank.svg') as React.FC), - [BANK_NAMES.SUNTRUST]: isCard ? (require('@assets/images/cardicons/suntrust.svg') as React.FC) : (require('@assets/images/bankicons/suntrust.svg') as React.FC), - [BANK_NAMES.TD_BANK]: isCard ? (require('@assets/images/cardicons/td-bank.svg') as React.FC) : (require('@assets/images/bankicons/td-bank.svg') as React.FC), - [BANK_NAMES.US_BANK]: isCard ? (require('@assets/images/cardicons/us-bank.svg') as React.FC) : (require('@assets/images/bankicons/us-bank.svg') as React.FC), - [BANK_NAMES.USAA]: isCard ? (require('@assets/images/cardicons/usaa.svg') as React.FC) : (require('@assets/images/bankicons/usaa.svg') as React.FC), + [CONST.BANK_NAMES.SUNTRUST]: isCard + ? (require('@assets/images/cardicons/suntrust.svg') as React.FC) + : (require('@assets/images/bankicons/suntrust.svg') as React.FC), + [CONST.BANK_NAMES.TD_BANK]: isCard + ? (require('@assets/images/cardicons/td-bank.svg') as React.FC) + : (require('@assets/images/bankicons/td-bank.svg') as React.FC), + [CONST.BANK_NAMES.US_BANK]: isCard + ? (require('@assets/images/cardicons/us-bank.svg') as React.FC) + : (require('@assets/images/bankicons/us-bank.svg') as React.FC), + [CONST.BANK_NAMES.USAA]: isCard ? (require('@assets/images/cardicons/usaa.svg') as React.FC) : (require('@assets/images/bankicons/usaa.svg') as React.FC), } as const; // Fallback to generic bank/card icon @@ -101,7 +77,7 @@ function getAssetIcon(bankNameKey: BankNameKey, isCard: boolean): React.FC value?.toLowerCase() === bankName); + const bank = Object.entries(CONST.BANK_NAMES).find(([, value]) => value?.toLowerCase() === bankName); return (bank?.[0] as BankNameKey) ?? ''; } @@ -116,7 +92,7 @@ export default function getBankIcon(bankName: BankNameAndEmptyString, isCard = f icon: isCard ? GenericBankCard : GenericBank, }; - if (bankNameKey && Object.keys(BANK_NAMES).includes(bankNameKey)) { + if (bankNameKey && Object.keys(CONST.BANK_NAMES).includes(bankNameKey)) { bankIcon.icon = getAssetIcon(bankNameKey, isCard); } From b87507a4a40562e00b8d8af3d0dd339f3efc6afd Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Fri, 24 Nov 2023 11:48:32 +0100 Subject: [PATCH 12/19] add BANK_NAMES const --- src/CONST.ts | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/CONST.ts b/src/CONST.ts index 436ac4ebbc31..599fabaeac9f 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2914,6 +2914,29 @@ const CONST = { PERFORMANCE_TESTS: { RUNS: 20, }, + + BANK_NAMES: { + EXPENSIFY: 'expensify', + AMERICAN_EXPRESS: 'americanexpress', + BANK_OF_AMERICA: 'bank of america', + BB_T: 'bbt', + CAPITAL_ONE: 'capital one', + CHASE: 'chase', + CHARLES_SCHWAB: 'charles schwab', + CITIBANK: 'citibank', + CITIZENS_BANK: 'citizens bank', + DISCOVER: 'discover', + FIDELITY: 'fidelity', + GENERIC_BANK: 'generic bank', + HUNTINGTON_BANK: 'huntington bank', + NAVY_FEDERAL_CREDIT_UNION: 'navy federal credit union', + PNC: 'pnc', + REGIONS_BANK: 'regions bank', + SUNTRUST: 'suntrust', + TD_BANK: 'td bank', + US_BANK: 'us bank', + USAA: 'usaa', + } } as const; export default CONST; From 9f2c4efaf12be8e9652eeb48cc39738a784ff360 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Fri, 24 Nov 2023 12:03:01 +0100 Subject: [PATCH 13/19] spaces --- src/CONST.ts | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 599fabaeac9f..4913869af838 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2916,27 +2916,27 @@ const CONST = { }, BANK_NAMES: { - EXPENSIFY: 'expensify', - AMERICAN_EXPRESS: 'americanexpress', - BANK_OF_AMERICA: 'bank of america', - BB_T: 'bbt', - CAPITAL_ONE: 'capital one', - CHASE: 'chase', - CHARLES_SCHWAB: 'charles schwab', - CITIBANK: 'citibank', - CITIZENS_BANK: 'citizens bank', - DISCOVER: 'discover', - FIDELITY: 'fidelity', - GENERIC_BANK: 'generic bank', - HUNTINGTON_BANK: 'huntington bank', - NAVY_FEDERAL_CREDIT_UNION: 'navy federal credit union', - PNC: 'pnc', - REGIONS_BANK: 'regions bank', - SUNTRUST: 'suntrust', - TD_BANK: 'td bank', - US_BANK: 'us bank', - USAA: 'usaa', - } + EXPENSIFY: 'expensify', + AMERICAN_EXPRESS: 'americanexpress', + BANK_OF_AMERICA: 'bank of america', + BB_T: 'bbt', + CAPITAL_ONE: 'capital one', + CHASE: 'chase', + CHARLES_SCHWAB: 'charles schwab', + CITIBANK: 'citibank', + CITIZENS_BANK: 'citizens bank', + DISCOVER: 'discover', + FIDELITY: 'fidelity', + GENERIC_BANK: 'generic bank', + HUNTINGTON_BANK: 'huntington bank', + NAVY_FEDERAL_CREDIT_UNION: 'navy federal credit union', + PNC: 'pnc', + REGIONS_BANK: 'regions bank', + SUNTRUST: 'suntrust', + TD_BANK: 'td bank', + US_BANK: 'us bank', + USAA: 'usaa', + }, } as const; export default CONST; From 11083015f4abd1574846c44b49a1385c50946c81 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Fri, 24 Nov 2023 12:38:11 +0100 Subject: [PATCH 14/19] prettier --- src/components/Icon/BankIcons.ts | 4 ++-- src/types/onyx/AccountData.ts | 2 +- src/types/onyx/Bank.ts | 3 +-- src/types/onyx/Fund.ts | 2 +- 4 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts index 9d843856c4d1..0afd4e304680 100644 --- a/src/components/Icon/BankIcons.ts +++ b/src/components/Icon/BankIcons.ts @@ -4,7 +4,7 @@ import GenericBankCard from '@assets/images/cardicons/generic-bank-card.svg'; import styles from '@styles/styles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; -import {BankIcon, BankName, BankNameAndEmptyString, BankNameKey} from '@src/types/onyx/Bank'; +import {BankIcon, BankName, BankNameKey} from '@src/types/onyx/Bank'; /** * Returns matching asset icon for bankName @@ -85,7 +85,7 @@ function getBankNameKey(bankName: string): BankNameKey | '' { * Returns Bank Icon Object that matches to existing bank icons or default icons */ -export default function getBankIcon(bankName: BankNameAndEmptyString, isCard = false): BankIcon { +export default function getBankIcon(bankName: BankName | '', isCard = false): BankIcon { const bankNameKey = getBankNameKey(bankName.toLowerCase()); const bankIcon: BankIcon = { diff --git a/src/types/onyx/AccountData.ts b/src/types/onyx/AccountData.ts index c9ffcc34c659..601e82cde836 100644 --- a/src/types/onyx/AccountData.ts +++ b/src/types/onyx/AccountData.ts @@ -1,4 +1,4 @@ -import {BankName} from '@components/Icon/BankIcons'; +import {BankName} from './Bank'; import * as OnyxCommon from './OnyxCommon'; type AdditionalData = { diff --git a/src/types/onyx/Bank.ts b/src/types/onyx/Bank.ts index a490198f2650..b6312e039079 100644 --- a/src/types/onyx/Bank.ts +++ b/src/types/onyx/Bank.ts @@ -12,8 +12,7 @@ type BankIcon = { iconStyles?: Array; }; -type BankNameAndEmptyString = keyof typeof CONST.BANK_NAMES | ''; type BankName = ValueOf; type BankNameKey = keyof typeof CONST.BANK_NAMES; -export type {BankIcon, BankNameAndEmptyString, BankName, BankNameKey}; +export type {BankIcon, BankName, BankNameKey}; diff --git a/src/types/onyx/Fund.ts b/src/types/onyx/Fund.ts index d1d27cce5d71..82c15c5089d7 100644 --- a/src/types/onyx/Fund.ts +++ b/src/types/onyx/Fund.ts @@ -1,5 +1,5 @@ -import {BankName} from '@components/Icon/BankIcons'; import CONST from '@src/CONST'; +import {BankName} from './Bank'; import * as OnyxCommon from './OnyxCommon'; type AdditionalData = { From 706dd0087b484c5d92e2622d5bb8a13dd6c1d340 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Mon, 27 Nov 2023 15:40:01 +0100 Subject: [PATCH 15/19] fix typo --- src/libs/EmojiUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/EmojiUtils.ts b/src/libs/EmojiUtils.ts index 49d08fcc1b2c..22bfc83218ac 100644 --- a/src/libs/EmojiUtils.ts +++ b/src/libs/EmojiUtils.ts @@ -322,7 +322,7 @@ function getAddedEmojis(currentEmojis: Emoji[], formerEmojis: Emoji[]): Emoji[] * If we're on mobile, we also add a space after the emoji granted there's no text after it. */ function replaceEmojis(text: string, preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE, lang: 'en' | 'es' = CONST.LOCALES.DEFAULT): ReplacedEmoji { - // emojisTrie importing the emoji JSON file on the app starting and we want to avoid it + // emojisTrie is importing the emoji JSON file on the app starting and we want to avoid it const emojisTrie = require('./EmojiTrie').default; const trie = emojisTrie[lang]; @@ -400,7 +400,7 @@ function replaceAndExtractEmojis(text: string, preferredSkinTone = CONST.EMOJI_D * @param [limit] - matching emojis limit */ function suggestEmojis(text: string, lang: keyof SupportedLanguage, limit = CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_SUGGESTIONS): Emoji[] | undefined { - // emojisTrie importing the emoji JSON file on the app starting and we want to avoid it + // emojisTrie is importing the emoji JSON file on the app starting and we want to avoid it const emojisTrie = require('./EmojiTrie').default; const trie = emojisTrie[lang]; From 8141e5097b92590d9132cf3c64831b6b6727e90a Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Mon, 27 Nov 2023 15:40:15 +0100 Subject: [PATCH 16/19] add comments --- src/components/Icon/BankIcons.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts index 0afd4e304680..cc9730b5232b 100644 --- a/src/components/Icon/BankIcons.ts +++ b/src/components/Icon/BankIcons.ts @@ -13,7 +13,9 @@ import {BankIcon, BankName, BankNameKey} from '@src/types/onyx/Bank'; function getAssetIcon(bankNameKey: BankNameKey, isCard: boolean): React.FC { const bankValue = CONST.BANK_NAMES[bankNameKey]; - // Mapping bank names to their respective icon paths + // This maps bank names to their respective icon paths. + // The purpose is to avoid importing these at the app startup stage. + // 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') as React.FC) From c034e71d795c5a02f7d02286d2d2ba60f0fad5ad Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Thu, 30 Nov 2023 11:39:50 +0100 Subject: [PATCH 17/19] fix getBankIcon type after merge --- src/components/Icon/BankIcons.ts | 12 +++++++----- src/libs/PaymentUtils.ts | 4 ++-- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts index 94d7d52a41cd..b34df6bafd37 100644 --- a/src/components/Icon/BankIcons.ts +++ b/src/components/Icon/BankIcons.ts @@ -8,8 +8,8 @@ import {BankIcon, BankName, BankNameKey} from '@src/types/onyx/Bank'; type BankIconParams = { themeStyles: typeof styles; - bankName: BankName; - isCard: boolean; + bankName?: BankName; + isCard?: boolean; }; /** @@ -93,13 +93,15 @@ function getBankNameKey(bankName: string): BankNameKey { * Returns Bank Icon Object that matches to existing bank icons or default icons */ export default function getBankIcon({themeStyles, bankName, isCard = false}: BankIconParams): BankIcon { - const bankNameKey = getBankNameKey(bankName.toLowerCase()); 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 = getAssetIcon(bankNameKey, isCard); + if (bankNameKey && Object.keys(CONST.BANK_NAMES).includes(bankNameKey)) { + bankIcon.icon = getAssetIcon(bankNameKey, isCard); + } } // For default Credit Card icon the icon size should not be set. diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts index cbeb44eb6bbc..550393a43db5 100644 --- a/src/libs/PaymentUtils.ts +++ b/src/libs/PaymentUtils.ts @@ -50,7 +50,7 @@ function formatPaymentMethods(bankAccountList: Record, fund } const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon({ - bankName: bankAccount?.accountData?.additionalData?.bankName ?? '', + bankName: bankAccount?.accountData?.additionalData?.bankName, isCard: false, themeStyles, }); @@ -66,7 +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), From a0ab476cef73757d4d57ed97e7f23ab3dd346188 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Thu, 30 Nov 2023 17:17:51 +0100 Subject: [PATCH 18/19] fix imports --- src/components/Icon/BankIcons.ts | 84 +++++++++++-------- .../Navigation/AppNavigator/AuthScreens.js | 4 +- 2 files changed, 49 insertions(+), 39 deletions(-) diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts index b34df6bafd37..074bf9676ae3 100644 --- a/src/components/Icon/BankIcons.ts +++ b/src/components/Icon/BankIcons.ts @@ -24,63 +24,73 @@ function getAssetIcon(bankNameKey: BankNameKey, isCard: boolean): React.FC) - : (require('@assets/images/bankicons/expensify.svg') as React.FC), + ? (require('@assets/images/cardicons/expensify-card-dark.svg').default as React.FC) + : (require('@assets/images/bankicons/expensify.svg').default as React.FC), [CONST.BANK_NAMES.AMERICAN_EXPRESS]: isCard - ? (require('@assets/images/cardicons/american-express.svg') as React.FC) - : (require('@assets/images/bankicons/american-express.svg') as React.FC), + ? (require('@assets/images/cardicons/american-express.svg').default as React.FC) + : (require('@assets/images/bankicons/american-express.svg').default as React.FC), [CONST.BANK_NAMES.BANK_OF_AMERICA]: isCard - ? (require('@assets/images/cardicons/bank-of-america.svg') as React.FC) - : (require('@assets/images/bankicons/bank-of-america.svg') as React.FC), - [CONST.BANK_NAMES.BB_T]: isCard ? (require('@assets/images/cardicons/bb-t.svg') as React.FC) : (require('@assets/images/bankicons/bb-t.svg') as React.FC), + ? (require('@assets/images/cardicons/bank-of-america.svg').default as React.FC) + : (require('@assets/images/bankicons/bank-of-america.svg').default as React.FC), + [CONST.BANK_NAMES.BB_T]: isCard + ? (require('@assets/images/cardicons/bb-t.svg').default as React.FC) + : (require('@assets/images/bankicons/bb-t.svg').default as React.FC), [CONST.BANK_NAMES.CAPITAL_ONE]: isCard - ? (require('@assets/images/cardicons/capital-one.svg') as React.FC) - : (require('@assets/images/bankicons/capital-one.svg') as React.FC), - [CONST.BANK_NAMES.CHASE]: isCard ? (require('@assets/images/cardicons/chase.svg') as React.FC) : (require('@assets/images/bankicons/chase.svg') as React.FC), + ? (require('@assets/images/cardicons/capital-one.svg').default as React.FC) + : (require('@assets/images/bankicons/capital-one.svg').default as React.FC), + [CONST.BANK_NAMES.CHASE]: isCard + ? (require('@assets/images/cardicons/chase.svg').default as React.FC) + : (require('@assets/images/bankicons/chase.svg').default as React.FC), [CONST.BANK_NAMES.CHARLES_SCHWAB]: isCard - ? (require('@assets/images/cardicons/charles-schwab.svg') as React.FC) - : (require('@assets/images/bankicons/charles-schwab.svg') as React.FC), + ? (require('@assets/images/cardicons/charles-schwab.svg').default as React.FC) + : (require('@assets/images/bankicons/charles-schwab.svg').default as React.FC), [CONST.BANK_NAMES.CITIBANK]: isCard - ? (require('@assets/images/cardicons/citibank.svg') as React.FC) - : (require('@assets/images/bankicons/citibank.svg') as React.FC), + ? (require('@assets/images/cardicons/citibank.svg').default as React.FC) + : (require('@assets/images/bankicons/citibank.svg').default as React.FC), [CONST.BANK_NAMES.CITIZENS_BANK]: isCard - ? (require('@assets/images/cardicons/citizens.svg') as React.FC) - : (require('@assets/images/bankicons/citizens-bank.svg') as React.FC), + ? (require('@assets/images/cardicons/citizens.svg').default as React.FC) + : (require('@assets/images/bankicons/citizens-bank.svg').default as React.FC), [CONST.BANK_NAMES.DISCOVER]: isCard - ? (require('@assets/images/cardicons/discover.svg') as React.FC) - : (require('@assets/images/bankicons/discover.svg') as React.FC), + ? (require('@assets/images/cardicons/discover.svg').default as React.FC) + : (require('@assets/images/bankicons/discover.svg').default as React.FC), [CONST.BANK_NAMES.FIDELITY]: isCard - ? (require('@assets/images/cardicons/fidelity.svg') as React.FC) - : (require('@assets/images/bankicons/fidelity.svg') as React.FC), + ? (require('@assets/images/cardicons/fidelity.svg').default as React.FC) + : (require('@assets/images/bankicons/fidelity.svg').default as React.FC), [CONST.BANK_NAMES.GENERIC_BANK]: isCard - ? (require('@assets/images/cardicons/generic-bank-card.svg') as React.FC) - : (require('@assets/images/bankicons/generic-bank-account.svg') as React.FC), + ? (require('@assets/images/cardicons/generic-bank-card.svg').default as React.FC) + : (require('@assets/images/bankicons/generic-bank-account.svg').default as React.FC), [CONST.BANK_NAMES.HUNTINGTON_BANK]: isCard - ? (require('@assets/images/cardicons/huntington-bank.svg') as React.FC) - : (require('@assets/images/bankicons/huntington-bank.svg') as React.FC), + ? (require('@assets/images/cardicons/huntington-bank.svg').default as React.FC) + : (require('@assets/images/bankicons/huntington-bank.svg').default as React.FC), [CONST.BANK_NAMES.NAVY_FEDERAL_CREDIT_UNION]: isCard - ? (require('@assets/images/cardicons/navy-federal-credit-union.svg') as React.FC) - : (require('@assets/images/bankicons/navy-federal-credit-union.svg') as React.FC), - [CONST.BANK_NAMES.PNC]: isCard ? (require('@assets/images/cardicons/pnc.svg') as React.FC) : (require('@assets/images/bankicons/pnc.svg') as React.FC), + ? (require('@assets/images/cardicons/navy-federal-credit-union.svg').default as React.FC) + : (require('@assets/images/bankicons/navy-federal-credit-union.svg').default as React.FC), + [CONST.BANK_NAMES.PNC]: isCard + ? (require('@assets/images/cardicons/pnc.svg').default as React.FC) + : (require('@assets/images/bankicons/pnc.svg').default as React.FC), [CONST.BANK_NAMES.REGIONS_BANK]: isCard - ? (require('@assets/images/cardicons/regions-bank.svg') as React.FC) - : (require('@assets/images/bankicons/regions-bank.svg') as React.FC), + ? (require('@assets/images/cardicons/regions-bank.svg').default as React.FC) + : (require('@assets/images/bankicons/regions-bank.svg').default as React.FC), [CONST.BANK_NAMES.SUNTRUST]: isCard - ? (require('@assets/images/cardicons/suntrust.svg') as React.FC) - : (require('@assets/images/bankicons/suntrust.svg') as React.FC), + ? (require('@assets/images/cardicons/suntrust.svg').default as React.FC) + : (require('@assets/images/bankicons/suntrust.svg').default as React.FC), [CONST.BANK_NAMES.TD_BANK]: isCard - ? (require('@assets/images/cardicons/td-bank.svg') as React.FC) - : (require('@assets/images/bankicons/td-bank.svg') as React.FC), + ? (require('@assets/images/cardicons/td-bank.svg').default as React.FC) + : (require('@assets/images/bankicons/td-bank.svg').default as React.FC), [CONST.BANK_NAMES.US_BANK]: isCard - ? (require('@assets/images/cardicons/us-bank.svg') as React.FC) - : (require('@assets/images/bankicons/us-bank.svg') as React.FC), - [CONST.BANK_NAMES.USAA]: isCard ? (require('@assets/images/cardicons/usaa.svg') as React.FC) : (require('@assets/images/bankicons/usaa.svg') as React.FC), + ? (require('@assets/images/cardicons/us-bank.svg').default as React.FC) + : (require('@assets/images/bankicons/us-bank.svg').default as React.FC), + [CONST.BANK_NAMES.USAA]: isCard + ? (require('@assets/images/cardicons/usaa.svg').default as React.FC) + : (require('@assets/images/bankicons/usaa.svg').default as React.FC), } as const; // Fallback to generic bank/card icon const iconModule = iconMappings[bankValue] || - (isCard ? (require('@assets/images/cardicons/generic-bank-card.svg') as React.FC) : (require('@assets/images/bankicons/generic-bank-account.svg') as React.FC)); + (isCard + ? (require('@assets/images/cardicons/generic-bank-card.svg').default as React.FC) + : (require('@assets/images/bankicons/generic-bank-account.svg').default as React.FC)); return iconModule; } diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index a9007a1a4fb8..57f072aa5e8f 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -29,6 +29,7 @@ import NAVIGATORS from '@src/NAVIGATORS'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; +import DesktopSignInRedirectPage from '@pages/signin/DesktopSignInRedirectPage'; import createCustomStackNavigator from './createCustomStackNavigator'; import defaultScreenOptions from './defaultScreenOptions'; import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions'; @@ -40,7 +41,6 @@ const loadSidebarScreen = () => require('../../../pages/home/sidebar/SidebarScre const loadValidateLoginPage = () => require('../../../pages/ValidateLoginPage').default; const loadLogOutPreviousUserPage = () => require('../../../pages/LogOutPreviousUserPage').default; const loadConciergePage = () => require('../../../pages/ConciergePage').default; -const LoadDesktopSignInRedirectPage = () => require('../../../pages/signin/DesktopSignInRedirectPage').default; let timezone; let currentAccountID; @@ -338,7 +338,7 @@ function AuthScreens({isUsingMemoryOnlyKeys, lastUpdateIDAppliedToClient, sessio From cdfb6d76d785643affac46afbb0410057bb7da2d Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Thu, 30 Nov 2023 17:35:16 +0100 Subject: [PATCH 19/19] change the order of imports --- src/libs/Navigation/AppNavigator/AuthScreens.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 57f072aa5e8f..4c610bc12099 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -14,6 +14,7 @@ import PusherConnectionManager from '@libs/PusherConnectionManager'; import * as SessionUtils from '@libs/SessionUtils'; import DemoSetupPage from '@pages/DemoSetupPage'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; +import DesktopSignInRedirectPage from '@pages/signin/DesktopSignInRedirectPage'; import useThemeStyles from '@styles/useThemeStyles'; import * as App from '@userActions/App'; import * as Download from '@userActions/Download'; @@ -29,7 +30,6 @@ import NAVIGATORS from '@src/NAVIGATORS'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; -import DesktopSignInRedirectPage from '@pages/signin/DesktopSignInRedirectPage'; import createCustomStackNavigator from './createCustomStackNavigator'; import defaultScreenOptions from './defaultScreenOptions'; import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions';