diff --git a/src/hooks/useSubStep/types.ts b/src/hooks/useSubStep/types.ts index c0c24ba0bfe80..8097aec75a36d 100644 --- a/src/hooks/useSubStep/types.ts +++ b/src/hooks/useSubStep/types.ts @@ -1,4 +1,5 @@ import type {ComponentType} from 'react'; +import type {OnfidoData} from '@src/types/onyx/ReimbursementAccountDraft'; type SubStepProps = { /** value indicating whether user is editing one of the sub steps */ @@ -22,7 +23,7 @@ type UseSubStep = { bodyContent: Array>; /** called on last sub step */ - onFinished: () => void; + onFinished: (data?: OnfidoData) => void; /** index of initial sub step to display */ startFrom?: number; diff --git a/src/libs/actions/ReimbursementAccount/navigation.js b/src/libs/actions/ReimbursementAccount/navigation.js index ebc1862e9c74b..28ad60747904f 100644 --- a/src/libs/actions/ReimbursementAccount/navigation.js +++ b/src/libs/actions/ReimbursementAccount/navigation.js @@ -7,7 +7,7 @@ import ROUTES from '@src/ROUTES'; * Navigate to a specific step in the VBA flow * * @param {String} stepID - * @param {Object} newAchData + * @param {Object} [newAchData] */ function goToWithdrawalAccountSetupStep(stepID, newAchData) { Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {achData: {...newAchData, currentStep: stepID}}); diff --git a/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.js b/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.tsx similarity index 64% rename from src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.js rename to src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.tsx index 96dde089225df..a1645512a5ab3 100644 --- a/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.js +++ b/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.tsx @@ -1,51 +1,53 @@ -import PropTypes from 'prop-types'; import React, {useCallback} from 'react'; import {View} from 'react-native'; +import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useSubStep from '@hooks/useSubStep'; +import type {SubStepProps} from '@hooks/useSubStep/types'; import useThemeStyles from '@hooks/useThemeStyles'; -import {reimbursementAccountPropTypes} from '@pages/ReimbursementAccount/reimbursementAccountPropTypes'; -import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes'; -import getDefaultValueForReimbursementAccountField from '@pages/ReimbursementAccount/utils/getDefaultValueForReimbursementAccountField'; import * as BankAccounts from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import type {ReimbursementAccount} from '@src/types/onyx'; +import type {OnfidoData} from '@src/types/onyx/ReimbursementAccountDraft'; import OnfidoInitialize from './substeps/OnfidoInitialize'; -const propTypes = { +type VerifyIdentityOnyxProps = { /** Reimbursement account from ONYX */ - reimbursementAccount: reimbursementAccountPropTypes, + reimbursementAccount: OnyxEntry; +}; +type VerifyIdentityProps = VerifyIdentityOnyxProps & { /** Goes to the previous step */ - onBackButtonPress: PropTypes.func.isRequired, + onBackButtonPress: () => void; /** Exits flow and goes back to the workspace initial page */ - onCloseButtonPress: PropTypes.func.isRequired, -}; - -const defaultProps = { - reimbursementAccount: ReimbursementAccountProps.reimbursementAccountDefaultProps, + onCloseButtonPress: () => void; }; -const bodyContent = [OnfidoInitialize]; +const bodyContent: Array> = [OnfidoInitialize]; -function VerifyIdentity({reimbursementAccount, onBackButtonPress, onCloseButtonPress}) { +function VerifyIdentity({reimbursementAccount, onBackButtonPress, onCloseButtonPress}: VerifyIdentityProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const submit = useCallback( - (onfidoData) => { - BankAccounts.verifyIdentityForBankAccount(getDefaultValueForReimbursementAccountField(reimbursementAccount, 'bankAccountID', 0), onfidoData); + (onfidoData?: OnfidoData) => { + if (!onfidoData) { + return; + } + + BankAccounts.verifyIdentityForBankAccount(reimbursementAccount?.achData?.bankAccountID ?? 0, onfidoData); BankAccounts.updateReimbursementAccountDraft({isOnfidoSetupComplete: true}); }, [reimbursementAccount], ); - const {componentToRender: SubStep, isEditing, nextScreen, moveTo} = useSubStep({bodyContent, startFrom: 0, onFinished: submit}); + const {componentToRender: SubStep, isEditing, moveTo, nextScreen} = useSubStep({bodyContent, startFrom: 0, onFinished: submit}); return ( @@ -71,11 +73,9 @@ function VerifyIdentity({reimbursementAccount, onBackButtonPress, onCloseButtonP ); } -VerifyIdentity.propTypes = propTypes; -VerifyIdentity.defaultProps = defaultProps; VerifyIdentity.displayName = 'VerifyIdentity'; -export default withOnyx({ +export default withOnyx({ reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, diff --git a/src/pages/ReimbursementAccount/VerifyIdentity/substeps/OnfidoInitialize.js b/src/pages/ReimbursementAccount/VerifyIdentity/substeps/OnfidoInitialize.tsx similarity index 77% rename from src/pages/ReimbursementAccount/VerifyIdentity/substeps/OnfidoInitialize.js rename to src/pages/ReimbursementAccount/VerifyIdentity/substeps/OnfidoInitialize.tsx index 50ce4fba81e90..75e38086e3ada 100644 --- a/src/pages/ReimbursementAccount/VerifyIdentity/substeps/OnfidoInitialize.js +++ b/src/pages/ReimbursementAccount/VerifyIdentity/substeps/OnfidoInitialize.tsx @@ -1,31 +1,28 @@ -import PropTypes from 'prop-types'; import React from 'react'; import {ScrollView} from 'react-native'; +import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView'; +// @ts-expect-error TODO: Remove this once Onfido (https://github.com/Expensify/App/issues/25136) is migrated to TypeScript. import Onfido from '@components/Onfido'; import useLocalize from '@hooks/useLocalize'; +import type {SubStepProps} from '@hooks/useSubStep/types'; import useThemeStyles from '@hooks/useThemeStyles'; import Growl from '@libs/Growl'; -import subStepPropTypes from '@pages/ReimbursementAccount/subStepPropTypes'; import * as BankAccounts from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -const propTypes = { +type OnfidoInitializeOnyxProps = { /** The token required to initialize the Onfido SDK */ - onfidoToken: PropTypes.string, - - ...subStepPropTypes, + onfidoToken: OnyxEntry; }; -const defaultProps = { - onfidoToken: null, -}; +type OnfidoInitializeProps = SubStepProps & OnfidoInitializeOnyxProps; const ONFIDO_ERROR_DISPLAY_DURATION = 10000; -function OnfidoInitialize({onfidoToken, onNext}) { +function OnfidoInitialize({onfidoToken, onNext}: OnfidoInitializeProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -55,11 +52,9 @@ function OnfidoInitialize({onfidoToken, onNext}) { ); } -OnfidoInitialize.propTypes = propTypes; -OnfidoInitialize.defaultProps = defaultProps; OnfidoInitialize.displayName = 'OnfidoInitialize'; -export default withOnyx({ +export default withOnyx({ onfidoToken: { key: ONYXKEYS.ONFIDO_TOKEN, },