From 81c8c58687a01b43e711c989710fc0e6a1335e5f Mon Sep 17 00:00:00 2001 From: pradeepkumar Date: Thu, 19 Oct 2023 05:01:14 +0530 Subject: [PATCH 1/2] plaid modal opne --- src/ONYXKEYS.ts | 3 +++ src/components/AddPlaidBankAccount.js | 1 + src/components/PlaidLink/index.native.js | 7 ++++++- src/libs/actions/BankAccounts.ts | 7 ++++++- .../ReimbursementAccount/ReimbursementAccountPage.js | 9 +++++++-- 5 files changed, 23 insertions(+), 4 deletions(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index c3003699378c..8bf8ba0fc5c5 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -119,6 +119,9 @@ const ONYXKEYS = { /** Token needed to initialize Plaid link */ PLAID_LINK_TOKEN: 'plaidLinkToken', + /** Capture Plaid event */ + PLAID_CURRENT_EVENT: 'plaidCurrentEvent', + /** Token needed to initialize Onfido */ ONFIDO_TOKEN: 'onfidoToken', diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js index dbe7e46ff6aa..246514f3420a 100644 --- a/src/components/AddPlaidBankAccount.js +++ b/src/components/AddPlaidBankAccount.js @@ -203,6 +203,7 @@ function AddPlaidBankAccount({ 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); diff --git a/src/components/PlaidLink/index.native.js b/src/components/PlaidLink/index.native.js index 48cd41e283c3..71ed551af235 100644 --- a/src/components/PlaidLink/index.native.js +++ b/src/components/PlaidLink/index.native.js @@ -1,5 +1,5 @@ import {useEffect} from 'react'; -import {openLink, useDeepLinkRedirector, usePlaidEmitter} from 'react-native-plaid-link-sdk'; +import {openLink, useDeepLinkRedirector, usePlaidEmitter, dismissLink} from 'react-native-plaid-link-sdk'; import Log from '../../libs/Log'; import {plaidLinkPropTypes, plaidLinkDefaultProps} from './plaidLinkPropTypes'; @@ -10,6 +10,7 @@ function PlaidLink(props) { props.onEvent(event.eventName, event.metadata); }); useEffect(() => { + props.onEvent('OPEN', {}); openLink({ tokenConfig: { token: props.token, @@ -23,6 +24,10 @@ function PlaidLink(props) { }, }); + return () => { + dismissLink(); + }; + // We generally do not need to include the token as a dependency here as it is only provided once via props and should not change // eslint-disable-next-line react-hooks/exhaustive-deps }, []); diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts index 249d7de9293a..5b56e8321a3f 100644 --- a/src/libs/actions/BankAccounts.ts +++ b/src/libs/actions/BankAccounts.ts @@ -35,7 +35,7 @@ type ReimbursementAccountSubStep = BankAccountSubStep | ''; function clearPlaid(): Promise { Onyx.set(ONYXKEYS.PLAID_LINK_TOKEN, ''); - + Onyx.set(ONYXKEYS.PLAID_CURRENT_EVENT, null); return Onyx.set(ONYXKEYS.PLAID_DATA, PlaidDataProps.plaidDataDefaultProps); } @@ -43,6 +43,10 @@ function openPlaidView() { clearPlaid().then(() => ReimbursementAccount.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID)); } +function setPlaidEvent(eventName: string) { + Onyx.set(ONYXKEYS.PLAID_CURRENT_EVENT, eventName); +} + /** * Open the personal bank account setup flow, with an optional exitReportID to redirect to once the flow is finished. */ @@ -426,6 +430,7 @@ export { clearOnfidoToken, clearPersonalBankAccount, clearPlaid, + setPlaidEvent, openPlaidView, connectBankAccountManually, connectBankAccountWithPlaid, diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index a99e3d7332a0..e37058c2a21d 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -340,6 +340,7 @@ class ReimbursementAccountPage extends React.Component { } if (subStep) { BankAccounts.setBankAccountSubStep(null); + BankAccounts.setPlaidEvent(null); } else { Navigation.goBack(backTo); } @@ -396,8 +397,9 @@ class ReimbursementAccountPage extends React.Component { ); } - - const isLoading = this.props.isLoadingReportData || this.props.account.isLoading || this.props.reimbursementAccount.isLoading; + const isLoading = + (this.props.isLoadingReportData || this.props.account.isLoading || this.props.reimbursementAccount.isLoading) && + (!this.props.plaidCurrentEvent || this.props.plaidCurrentEvent === 'EXIT'); // Prevent the full-page blocking offline view from being displayed for these steps if the device goes offline. const shouldShowOfflineLoader = !( @@ -551,6 +553,9 @@ export default compose( plaidLinkToken: { key: ONYXKEYS.PLAID_LINK_TOKEN, }, + plaidCurrentEvent: { + key: ONYXKEYS.PLAID_CURRENT_EVENT, + }, onfidoToken: { key: ONYXKEYS.ONFIDO_TOKEN, }, From 60799d9b5c91a0ccefde0c747b1fde8649e64850 Mon Sep 17 00:00:00 2001 From: pradeepkumar Date: Fri, 20 Oct 2023 21:28:08 +0530 Subject: [PATCH 2/2] add const values --- src/CONST.ts | 4 ++++ src/components/PlaidLink/index.native.js | 3 ++- src/pages/ReimbursementAccount/ReimbursementAccountPage.js | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index e2f3fea08215..f50c435a9221 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -157,6 +157,10 @@ const CONST = { ERROR: { TOO_MANY_ATTEMPTS: 'Too many attempts', }, + EVENTS_NAME: { + OPEN: 'OPEN', + EXIT: 'EXIT', + }, }, ERROR: { MISSING_ROUTING_NUMBER: '402 Missing routingNumber', diff --git a/src/components/PlaidLink/index.native.js b/src/components/PlaidLink/index.native.js index 71ed551af235..53c513258ecf 100644 --- a/src/components/PlaidLink/index.native.js +++ b/src/components/PlaidLink/index.native.js @@ -2,6 +2,7 @@ import {useEffect} from 'react'; import {openLink, useDeepLinkRedirector, usePlaidEmitter, dismissLink} from 'react-native-plaid-link-sdk'; import Log from '../../libs/Log'; import {plaidLinkPropTypes, plaidLinkDefaultProps} from './plaidLinkPropTypes'; +import CONST from '../../CONST'; function PlaidLink(props) { useDeepLinkRedirector(); @@ -10,7 +11,7 @@ function PlaidLink(props) { props.onEvent(event.eventName, event.metadata); }); useEffect(() => { - props.onEvent('OPEN', {}); + props.onEvent(CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.OPEN, {}); openLink({ tokenConfig: { token: props.token, diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index e37058c2a21d..db2e062573ce 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -399,7 +399,7 @@ class ReimbursementAccountPage extends React.Component { } const isLoading = (this.props.isLoadingReportData || this.props.account.isLoading || this.props.reimbursementAccount.isLoading) && - (!this.props.plaidCurrentEvent || this.props.plaidCurrentEvent === 'EXIT'); + (!this.props.plaidCurrentEvent || this.props.plaidCurrentEvent === CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.EXIT); // Prevent the full-page blocking offline view from being displayed for these steps if the device goes offline. const shouldShowOfflineLoader = !(