Merge pull request #34338 from Swor71/marcin/migrate-verify-identity-…

…to-ts

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<T = void> = {
     bodyContent: Array<ComponentType<SubStepProps & T>>;
 
     /** called on last sub step  */
-    onFinished: () => void;
+    onFinished: (data?: OnfidoData) => void;
 
     /** index of initial sub step to display */
     startFrom?: number;

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}});

src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.js → 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<ReimbursementAccount>;
+};
 
+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<React.ComponentType<SubStepProps>> = [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 (
         <ScreenWrapper testID={VerifyIdentity.displayName}>
@@ -71,11 +73,9 @@ function VerifyIdentity({reimbursementAccount, onBackButtonPress, onCloseButtonP
     );
 }
 
-VerifyIdentity.propTypes = propTypes;
-VerifyIdentity.defaultProps = defaultProps;
 VerifyIdentity.displayName = 'VerifyIdentity';
 
-export default withOnyx({
+export default withOnyx<VerifyIdentityProps, VerifyIdentityOnyxProps>({
     reimbursementAccount: {
         key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
     },

src/pages/ReimbursementAccount/VerifyIdentity/substeps/OnfidoInitialize.js → 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<string>;
 };
 
-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<OnfidoInitializeProps, OnfidoInitializeOnyxProps>({
     onfidoToken: {
         key: ONYXKEYS.ONFIDO_TOKEN,
     },