From 9e641bd545df9472e55f8b612561c3bc7e23c598 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Wed, 21 Feb 2024 16:30:05 +0000 Subject: [PATCH 1/7] refactor(typescript): migrate addplaidbankaccount --- ...BankAccount.js => AddPlaidBankAccount.tsx} | 155 ++++++++---------- src/components/PlaidLink/types.ts | 2 +- src/libs/KeyboardShortcut/index.ts | 4 +- 3 files changed, 68 insertions(+), 93 deletions(-) rename src/components/{AddPlaidBankAccount.js => AddPlaidBankAccount.tsx} (71%) diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.tsx similarity index 71% rename from src/components/AddPlaidBankAccount.js rename to src/components/AddPlaidBankAccount.tsx index b6fc639546a8..c1c4fc122f9f 100644 --- a/src/components/AddPlaidBankAccount.js +++ b/src/components/AddPlaidBankAccount.tsx @@ -1,20 +1,19 @@ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; import React, {useCallback, useEffect, useRef, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; +import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; -import _ from 'underscore'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import KeyboardShortcut from '@libs/KeyboardShortcut'; import Log from '@libs/Log'; -import {plaidDataPropTypes} from '@pages/ReimbursementAccount/plaidDataPropTypes'; import * as App from '@userActions/App'; import * as BankAccounts from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import type {PlaidData} from '@src/types/onyx'; +import {isEmptyObject} from '@src/types/utils/EmptyObject'; import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView'; import FormHelpMessage from './FormHelpMessage'; import Icon from './Icon'; @@ -24,103 +23,82 @@ import PlaidLink from './PlaidLink'; import RadioButtons from './RadioButtons'; import Text from './Text'; -const propTypes = { +type AddPlaidBankAccountOnyxProps = { /** If the user has been throttled from Plaid */ - isPlaidDisabled: PropTypes.bool, + isPlaidDisabled: OnyxEntry; + /** Plaid SDK token to use to initialize the widget */ + plaidLinkToken: OnyxEntry; +}; + +type AddPlaidBankAccountProps = AddPlaidBankAccountOnyxProps & { /** Contains plaid data */ - plaidData: plaidDataPropTypes.isRequired, + plaidData: OnyxEntry; /** Selected account ID from the Picker associated with the end of the Plaid flow */ - selectedPlaidAccountID: PropTypes.string, - - /** Plaid SDK token to use to initialize the widget */ - plaidLinkToken: PropTypes.string, + selectedPlaidAccountID?: string; /** Fired when the user exits the Plaid flow */ - onExitPlaid: PropTypes.func, + onExitPlaid?: () => void; /** Fired when the user selects an account */ - onSelect: PropTypes.func, + onSelect?: (plaidAccountID: string) => void; /** Additional text to display */ - text: PropTypes.string, + text?: string; /** The OAuth URI + stateID needed to re-initialize the PlaidLink after the user logs into their bank */ - receivedRedirectURI: PropTypes.string, + receivedRedirectURI: string | null; /** During the OAuth flow we need to use the plaidLink token that we initially connected with */ - plaidLinkOAuthToken: PropTypes.string, + plaidLinkOAuthToken?: string; /** If we're updating an existing bank account, what's its bank account ID? */ - bankAccountID: PropTypes.number, + bankAccountID?: number; /** Are we adding a withdrawal account? */ - allowDebit: PropTypes.bool, + allowDebit?: boolean; /** Is displayed in new VBBA */ - isDisplayedInNewVBBA: PropTypes.bool, + isDisplayedInNewVBBA?: boolean; /** Text to display on error message */ - errorText: PropTypes.string, + errorText?: string; /** Function called whenever radio button value changes */ - onInputChange: PropTypes.func, -}; - -const defaultProps = { - selectedPlaidAccountID: '', - plaidLinkToken: '', - onExitPlaid: () => {}, - onSelect: () => {}, - text: '', - receivedRedirectURI: null, - plaidLinkOAuthToken: '', - allowDebit: false, - bankAccountID: 0, - isPlaidDisabled: false, - isDisplayedInNewVBBA: false, - errorText: '', - onInputChange: () => {}, + onInputChange?: (plaidAccountID: string) => void; }; function AddPlaidBankAccount({ plaidData, - selectedPlaidAccountID, + selectedPlaidAccountID = '', plaidLinkToken, - onExitPlaid, - onSelect, - text, - receivedRedirectURI, - plaidLinkOAuthToken, - bankAccountID, - allowDebit, + onExitPlaid = () => {}, + onSelect = () => {}, + text = '', + receivedRedirectURI = null, + plaidLinkOAuthToken = '', + bankAccountID = 0, + allowDebit = false, isPlaidDisabled, - isDisplayedInNewVBBA, - errorText, - onInputChange, -}) { + isDisplayedInNewVBBA = false, + errorText = '', + onInputChange = () => {}, +}: AddPlaidBankAccountProps) { const theme = useTheme(); const styles = useThemeStyles(); - const plaidBankAccounts = lodashGet(plaidData, 'bankAccounts', []); - const defaultSelectedPlaidAccount = _.find(plaidBankAccounts, (account) => account.plaidAccountID === selectedPlaidAccountID); - const defaultSelectedPlaidAccountID = lodashGet(defaultSelectedPlaidAccount, 'plaidAccountID', ''); - const defaultSelectedPlaidAccountMask = lodashGet( - _.find(plaidBankAccounts, (account) => account.plaidAccountID === selectedPlaidAccountID), - 'mask', - '', - ); - const subscribedKeyboardShortcuts = useRef([]); - const previousNetworkState = useRef(); - const [selectedPlaidAccountMask, setSelectedPlaidAccountMask] = useState(defaultSelectedPlaidAccountMask); + const plaidBankAccounts = plaidData?.bankAccounts ?? []; + const defaultSelectedPlaidAccount = plaidBankAccounts.find((account) => account.plaidAccountID === selectedPlaidAccountID); + const defaultSelectedPlaidAccountID = defaultSelectedPlaidAccount?.plaidAccountID ?? ''; + const defaultSelectedPlaidAccountMask = plaidBankAccounts.find((account) => account.plaidAccountID === selectedPlaidAccountID)?.mask ?? ''; + const subscribedKeyboardShortcuts = useRef void>>([]); + const previousNetworkState = useRef(); + const [selectedPlaidAccountMask, setSelectedPlaidAccountMask] = useState(defaultSelectedPlaidAccountMask); const {translate} = useLocalize(); const {isOffline} = useNetwork(); - /** - * @returns {String} - */ - const getPlaidLinkToken = () => { + const getPlaidLinkToken = (): string | undefined => { if (plaidLinkToken) { return plaidLinkToken; } @@ -135,7 +113,7 @@ function AddPlaidBankAccount({ * I'm using useCallback so the useEffect which uses this function doesn't run on every render. */ const isAuthenticatedWithPlaid = useCallback( - () => (receivedRedirectURI && plaidLinkOAuthToken) || !_.isEmpty(lodashGet(plaidData, 'bankAccounts')) || !_.isEmpty(lodashGet(plaidData, 'errors')), + () => (!!receivedRedirectURI && !!plaidLinkOAuthToken) || !plaidData?.bankAccounts?.length || !isEmptyObject(plaidData?.errors), [plaidData, plaidLinkOAuthToken, receivedRedirectURI], ); @@ -144,15 +122,15 @@ function AddPlaidBankAccount({ */ const subscribeToNavigationShortcuts = () => { // find and block the shortcuts - const shortcutsToBlock = _.filter(CONST.KEYBOARD_SHORTCUTS, (x) => x.type === CONST.KEYBOARD_SHORTCUTS_TYPES.NAVIGATION_SHORTCUT); - subscribedKeyboardShortcuts.current = _.map(shortcutsToBlock, (shortcut) => + const shortcutsToBlock = Object.values(CONST.KEYBOARD_SHORTCUTS).filter((x) => 'type' in x && x.type === CONST.KEYBOARD_SHORTCUTS_TYPES.NAVIGATION_SHORTCUT); + subscribedKeyboardShortcuts.current = shortcutsToBlock.map((shortcut) => KeyboardShortcut.subscribe( shortcut.shortcutKey, () => {}, // do nothing shortcut.descriptionKey, shortcut.modifiers, false, - () => lodashGet(plaidData, 'bankAccounts', []).length > 0, // start bubbling when there are bank accounts + () => (plaidData?.bankAccounts ?? []).length > 0, // start bubbling when there are bank accounts ), ); }; @@ -161,7 +139,7 @@ function AddPlaidBankAccount({ * Unblocks the keyboard shortcuts that can navigate */ const unsubscribeToNavigationShortcuts = () => { - _.each(subscribedKeyboardShortcuts.current, (unsubscribe) => unsubscribe()); + subscribedKeyboardShortcuts.current.forEach((unsubscribe) => unsubscribe()); subscribedKeyboardShortcuts.current = []; }; @@ -188,23 +166,22 @@ function AddPlaidBankAccount({ previousNetworkState.current = isOffline; }, [allowDebit, bankAccountID, isAuthenticatedWithPlaid, isOffline]); - const token = getPlaidLinkToken(); - const options = _.map(plaidBankAccounts, (account) => ({ + const token = getPlaidLinkToken() ?? ''; + const options = plaidBankAccounts.map((account) => ({ value: account.plaidAccountID, - label: account.addressName, + label: account.addressName ?? '', })); const {icon, iconSize, iconStyles} = getBankIcon({styles}); - const plaidErrors = lodashGet(plaidData, 'errors'); - const plaidDataErrorMessage = !_.isEmpty(plaidErrors) ? _.chain(plaidErrors).values().first().value() : ''; - const bankName = lodashGet(plaidData, 'bankName'); + const plaidErrors = plaidData?.errors; + const plaidDataErrorMessage = !isEmptyObject(plaidErrors) ? (Object.values(plaidErrors)[0] as string) : ''; + const bankName = plaidData?.bankName; /** - * @param {String} plaidAccountID * * When user selects one of plaid accounts we need to set the mask in order to display it on UI */ - const handleSelectingPlaidAccount = (plaidAccountID) => { - const mask = _.find(plaidBankAccounts, (account) => account.plaidAccountID === plaidAccountID).mask; + const handleSelectingPlaidAccount = (plaidAccountID: string) => { + const mask = plaidBankAccounts.find((account) => account.plaidAccountID === plaidAccountID)?.mask ?? ''; setSelectedPlaidAccountMask(mask); onSelect(plaidAccountID); onInputChange(plaidAccountID); @@ -219,24 +196,24 @@ function AddPlaidBankAccount({ } const renderPlaidLink = () => { - if (Boolean(token) && !bankName) { + if (!!token && !bankName) { return ( { Log.info('[PlaidLink] Success!'); - BankAccounts.openPlaidBankAccountSelector(publicToken, metadata.institution.name, allowDebit, bankAccountID); + BankAccounts.openPlaidBankAccountSelector(publicToken, metadata?.institution?.name ?? '', allowDebit, bankAccountID); }} onError={(error) => { - Log.hmmm('[PlaidLink] Error: ', error.message); + Log.hmmm('[PlaidLink] Error: ', error?.message); }} onEvent={(event, metadata) => { BankAccounts.setPlaidEvent(event); // Handle Plaid login errors (will potentially reset plaid token and item depending on the error) if (event === 'ERROR') { - Log.hmmm('[PlaidLink] Error: ', metadata); - if (bankAccountID && metadata && metadata.error_code) { - BankAccounts.handlePlaidError(bankAccountID, metadata.error_code, metadata.error_message, metadata.request_id); + Log.hmmm('[PlaidLink] Error: ', metadata as Record | undefined); + if (bankAccountID && metadata && 'error_code' in metadata) { + BankAccounts.handlePlaidError(bankAccountID, metadata.error_code ?? '', metadata.error_message ?? '', metadata.request_id); } } @@ -257,7 +234,7 @@ function AddPlaidBankAccount({ return {plaidDataErrorMessage}; } - if (lodashGet(plaidData, 'isLoading')) { + if (plaidData?.isLoading) { return ( {translate('bankAccount.chooseAnAccount')} - {!_.isEmpty(text) && {text}} + {!!text && {text}} - {!_.isEmpty(text) && {text}} + {!!text && {text}} ({ plaidLinkToken: { key: ONYXKEYS.PLAID_LINK_TOKEN, initWithStoredValues: false, diff --git a/src/components/PlaidLink/types.ts b/src/components/PlaidLink/types.ts index 48526520c736..06dc38bbf5fb 100644 --- a/src/components/PlaidLink/types.ts +++ b/src/components/PlaidLink/types.ts @@ -19,7 +19,7 @@ type PlaidLinkProps = { // The redirect URI with an OAuth state ID. Needed to re-initialize the PlaidLink after directing the // user to their respective bank platform - receivedRedirectURI?: string; + receivedRedirectURI?: string | null; }; export default PlaidLinkProps; diff --git a/src/libs/KeyboardShortcut/index.ts b/src/libs/KeyboardShortcut/index.ts index 44ba54953c40..999725598e86 100644 --- a/src/libs/KeyboardShortcut/index.ts +++ b/src/libs/KeyboardShortcut/index.ts @@ -131,10 +131,10 @@ function getPlatformEquivalentForKeys(keys: ShortcutModifiers): string[] { function subscribe( key: string, callback: (event?: KeyboardEvent) => void, - descriptionKey: string, + descriptionKey: string | null, modifiers: ShortcutModifiers = ['CTRL'], captureOnInputs = false, - shouldBubble = false, + shouldBubble: boolean | (() => boolean) = false, priority = 0, shouldPreventDefault = true, excludedNodes: string[] = [], From cbd59bfff1e8b05b162e6132e51ed91834417500 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Wed, 28 Feb 2024 15:31:21 +0000 Subject: [PATCH 2/7] refactor(typescript): remove expect error and unused props --- src/components/Form/types.ts | 4 +++- src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx | 3 --- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/Form/types.ts b/src/components/Form/types.ts index ba147dfa81a2..355776d55586 100644 --- a/src/components/Form/types.ts +++ b/src/components/Form/types.ts @@ -1,6 +1,7 @@ import type {ComponentType, FocusEvent, Key, MutableRefObject, ReactNode, Ref} from 'react'; import type {GestureResponderEvent, NativeSyntheticEvent, StyleProp, TextInputFocusEventData, TextInputSubmitEditingEventData, ViewStyle} from 'react-native'; import type {ValueOf} from 'type-fest'; +import AddPlaidBankAccount from '@components/AddPlaidBankAccount'; import type AddressSearch from '@components/AddressSearch'; import type AmountForm from '@components/AmountForm'; import type AmountTextInput from '@components/AmountTextInput'; @@ -38,7 +39,8 @@ type ValidInputs = | typeof StatePicker | typeof RoomNameInput | typeof ValuePicker - | typeof RadioButtons; + | typeof RadioButtons + | typeof AddPlaidBankAccount; type ValueTypeKey = 'string' | 'boolean' | 'date'; type ValueTypeMap = { diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx index a1a609f13734..d3d54af58581 100644 --- a/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx +++ b/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx @@ -88,7 +88,6 @@ function Plaid({reimbursementAccount, reimbursementAccountDraft, onNext, plaidDa isSubmitButtonVisible={(plaidData?.bankAccounts ?? []).length > 0} > { @@ -101,8 +100,6 @@ function Plaid({reimbursementAccount, reimbursementAccountDraft, onNext, plaidDa selectedPlaidAccountID={selectedPlaidAccountID} isDisplayedInNewVBBA inputID={BANK_INFO_STEP_KEYS.SELECTED_PLAID_ACCOUNT_ID} - inputMode={CONST.INPUT_MODE.TEXT} - style={[styles.mt5]} defaultValue={selectedPlaidAccountID} /> From 4d4e6d73405098e74003eea2f46b0298771954e6 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Wed, 28 Feb 2024 15:38:42 +0000 Subject: [PATCH 3/7] refactor(typescript): receivedRedirectURI prop type --- src/components/AddPlaidBankAccount.tsx | 4 ++-- src/components/PlaidLink/types.ts | 2 +- src/libs/getPlaidOAuthReceivedRedirectURI/index.native.ts | 2 +- src/libs/getPlaidOAuthReceivedRedirectURI/index.ts | 2 +- src/libs/getPlaidOAuthReceivedRedirectURI/types.ts | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/AddPlaidBankAccount.tsx b/src/components/AddPlaidBankAccount.tsx index c1c4fc122f9f..3ec1ee13ffd9 100644 --- a/src/components/AddPlaidBankAccount.tsx +++ b/src/components/AddPlaidBankAccount.tsx @@ -48,7 +48,7 @@ type AddPlaidBankAccountProps = AddPlaidBankAccountOnyxProps & { text?: string; /** The OAuth URI + stateID needed to re-initialize the PlaidLink after the user logs into their bank */ - receivedRedirectURI: string | null; + receivedRedirectURI?: string; /** During the OAuth flow we need to use the plaidLink token that we initially connected with */ plaidLinkOAuthToken?: string; @@ -76,7 +76,7 @@ function AddPlaidBankAccount({ onExitPlaid = () => {}, onSelect = () => {}, text = '', - receivedRedirectURI = null, + receivedRedirectURI, plaidLinkOAuthToken = '', bankAccountID = 0, allowDebit = false, diff --git a/src/components/PlaidLink/types.ts b/src/components/PlaidLink/types.ts index 06dc38bbf5fb..48526520c736 100644 --- a/src/components/PlaidLink/types.ts +++ b/src/components/PlaidLink/types.ts @@ -19,7 +19,7 @@ type PlaidLinkProps = { // The redirect URI with an OAuth state ID. Needed to re-initialize the PlaidLink after directing the // user to their respective bank platform - receivedRedirectURI?: string | null; + receivedRedirectURI?: string; }; export default PlaidLinkProps; diff --git a/src/libs/getPlaidOAuthReceivedRedirectURI/index.native.ts b/src/libs/getPlaidOAuthReceivedRedirectURI/index.native.ts index 49660dd6f077..1b1b8256db1e 100644 --- a/src/libs/getPlaidOAuthReceivedRedirectURI/index.native.ts +++ b/src/libs/getPlaidOAuthReceivedRedirectURI/index.native.ts @@ -1,5 +1,5 @@ import type GetPlaidOAuthReceivedRedirectURI from './types'; -const getPlaidOAuthReceivedRedirectURI: GetPlaidOAuthReceivedRedirectURI = () => null; +const getPlaidOAuthReceivedRedirectURI: GetPlaidOAuthReceivedRedirectURI = () => undefined; export default getPlaidOAuthReceivedRedirectURI; diff --git a/src/libs/getPlaidOAuthReceivedRedirectURI/index.ts b/src/libs/getPlaidOAuthReceivedRedirectURI/index.ts index c140d1c3339f..38be1e39d2f1 100644 --- a/src/libs/getPlaidOAuthReceivedRedirectURI/index.ts +++ b/src/libs/getPlaidOAuthReceivedRedirectURI/index.ts @@ -12,7 +12,7 @@ const getPlaidOAuthReceivedRedirectURI: GetPlaidOAuthReceivedRedirectURI = () => // If no stateID passed in then we are either not in OAuth flow or flow is broken if (!oauthStateID) { - return null; + return undefined; } return receivedRedirectURI; }; diff --git a/src/libs/getPlaidOAuthReceivedRedirectURI/types.ts b/src/libs/getPlaidOAuthReceivedRedirectURI/types.ts index b89f023e05d3..fd4790c38caf 100644 --- a/src/libs/getPlaidOAuthReceivedRedirectURI/types.ts +++ b/src/libs/getPlaidOAuthReceivedRedirectURI/types.ts @@ -1,3 +1,3 @@ -type GetPlaidOAuthReceivedRedirectURI = () => null | string; +type GetPlaidOAuthReceivedRedirectURI = () => undefined | string; export default GetPlaidOAuthReceivedRedirectURI; From c07a624687276214377aab74ae59daa336596e87 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Wed, 28 Feb 2024 15:40:49 +0000 Subject: [PATCH 4/7] refactor(typescript): apply pull request suggestions --- src/components/AddPlaidBankAccount.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/AddPlaidBankAccount.tsx b/src/components/AddPlaidBankAccount.tsx index 3ec1ee13ffd9..c80a81289788 100644 --- a/src/components/AddPlaidBankAccount.tsx +++ b/src/components/AddPlaidBankAccount.tsx @@ -93,7 +93,7 @@ function AddPlaidBankAccount({ const defaultSelectedPlaidAccountMask = plaidBankAccounts.find((account) => account.plaidAccountID === selectedPlaidAccountID)?.mask ?? ''; const subscribedKeyboardShortcuts = useRef void>>([]); const previousNetworkState = useRef(); - const [selectedPlaidAccountMask, setSelectedPlaidAccountMask] = useState(defaultSelectedPlaidAccountMask); + const [selectedPlaidAccountMask, setSelectedPlaidAccountMask] = useState(defaultSelectedPlaidAccountMask); const {translate} = useLocalize(); const {isOffline} = useNetwork(); @@ -122,7 +122,7 @@ function AddPlaidBankAccount({ */ const subscribeToNavigationShortcuts = () => { // find and block the shortcuts - const shortcutsToBlock = Object.values(CONST.KEYBOARD_SHORTCUTS).filter((x) => 'type' in x && x.type === CONST.KEYBOARD_SHORTCUTS_TYPES.NAVIGATION_SHORTCUT); + const shortcutsToBlock = Object.values(CONST.KEYBOARD_SHORTCUTS).filter((shortcut) => 'type' in shortcut && shortcut.type === CONST.KEYBOARD_SHORTCUTS_TYPES.NAVIGATION_SHORTCUT); subscribedKeyboardShortcuts.current = shortcutsToBlock.map((shortcut) => KeyboardShortcut.subscribe( shortcut.shortcutKey, @@ -166,7 +166,7 @@ function AddPlaidBankAccount({ previousNetworkState.current = isOffline; }, [allowDebit, bankAccountID, isAuthenticatedWithPlaid, isOffline]); - const token = getPlaidLinkToken() ?? ''; + const token = getPlaidLinkToken(); const options = plaidBankAccounts.map((account) => ({ value: account.plaidAccountID, label: account.addressName ?? '', @@ -211,7 +211,7 @@ function AddPlaidBankAccount({ BankAccounts.setPlaidEvent(event); // Handle Plaid login errors (will potentially reset plaid token and item depending on the error) if (event === 'ERROR') { - Log.hmmm('[PlaidLink] Error: ', metadata as Record | undefined); + Log.hmmm('[PlaidLink] Error: ', {...metadata}); if (bankAccountID && metadata && 'error_code' in metadata) { BankAccounts.handlePlaidError(bankAccountID, metadata.error_code ?? '', metadata.error_message ?? '', metadata.request_id); } From 2bdb2fa60b166f6a2deec835b4046d42fcac3acc Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Wed, 28 Feb 2024 16:10:16 +0000 Subject: [PATCH 5/7] chore: fix linter issues --- src/components/Form/types.ts | 2 +- src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Form/types.ts b/src/components/Form/types.ts index 355776d55586..526490f45919 100644 --- a/src/components/Form/types.ts +++ b/src/components/Form/types.ts @@ -1,7 +1,7 @@ import type {ComponentType, FocusEvent, Key, MutableRefObject, ReactNode, Ref} from 'react'; import type {GestureResponderEvent, NativeSyntheticEvent, StyleProp, TextInputFocusEventData, TextInputSubmitEditingEventData, ViewStyle} from 'react-native'; import type {ValueOf} from 'type-fest'; -import AddPlaidBankAccount from '@components/AddPlaidBankAccount'; +import type AddPlaidBankAccount from '@components/AddPlaidBankAccount'; import type AddressSearch from '@components/AddressSearch'; import type AmountForm from '@components/AmountForm'; import type AmountTextInput from '@components/AmountTextInput'; diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx index d3d54af58581..224afd8c9344 100644 --- a/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx +++ b/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx @@ -11,7 +11,6 @@ import type {SubStepProps} from '@hooks/useSubStep/types'; import useThemeStyles from '@hooks/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; import * as ReimbursementAccountActions from '@userActions/ReimbursementAccount'; -import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {ReimbursementAccountForm} from '@src/types/form'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; @@ -94,7 +93,9 @@ function Plaid({reimbursementAccount, reimbursementAccountDraft, onNext, plaidDa ReimbursementAccountActions.updateReimbursementAccountDraft({plaidAccountID}); }} plaidData={plaidData} - onExitPlaid={() => BankAccounts.setBankAccountSubStep(null)} + onExitPlaid={() => { + BankAccounts.setBankAccountSubStep(null); + }} allowDebit bankAccountID={bankAccountID} selectedPlaidAccountID={selectedPlaidAccountID} From ba011b9d15e1426a22eca0392a0b6710a385e9f3 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Tue, 12 Mar 2024 10:08:27 +0000 Subject: [PATCH 6/7] fix: wrong conversion of condition into typescript --- src/components/AddPlaidBankAccount.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AddPlaidBankAccount.tsx b/src/components/AddPlaidBankAccount.tsx index c80a81289788..eb2d825c09cd 100644 --- a/src/components/AddPlaidBankAccount.tsx +++ b/src/components/AddPlaidBankAccount.tsx @@ -113,7 +113,7 @@ function AddPlaidBankAccount({ * I'm using useCallback so the useEffect which uses this function doesn't run on every render. */ const isAuthenticatedWithPlaid = useCallback( - () => (!!receivedRedirectURI && !!plaidLinkOAuthToken) || !plaidData?.bankAccounts?.length || !isEmptyObject(plaidData?.errors), + () => (!!receivedRedirectURI && !!plaidLinkOAuthToken) || plaidData?.bankAccounts?.length || !isEmptyObject(plaidData?.errors), [plaidData, plaidLinkOAuthToken, receivedRedirectURI], ); From a3addf2abe2c4121357ff1f0ffcbcd231c494b03 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro <48553277+pac-guerreiro@users.noreply.github.com> Date: Tue, 12 Mar 2024 10:30:25 +0000 Subject: [PATCH 7/7] refactor(typescript): apply pull request suggestion Co-authored-by: Viktoryia Kliushun --- src/components/AddPlaidBankAccount.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AddPlaidBankAccount.tsx b/src/components/AddPlaidBankAccount.tsx index eb2d825c09cd..e64c95325fae 100644 --- a/src/components/AddPlaidBankAccount.tsx +++ b/src/components/AddPlaidBankAccount.tsx @@ -113,7 +113,7 @@ function AddPlaidBankAccount({ * I'm using useCallback so the useEffect which uses this function doesn't run on every render. */ const isAuthenticatedWithPlaid = useCallback( - () => (!!receivedRedirectURI && !!plaidLinkOAuthToken) || plaidData?.bankAccounts?.length || !isEmptyObject(plaidData?.errors), + () => (!!receivedRedirectURI && !!plaidLinkOAuthToken) || !!plaidData?.bankAccounts?.length || !isEmptyObject(plaidData?.errors), [plaidData, plaidLinkOAuthToken, receivedRedirectURI], );