From 45b5b9182a052faf92b1b48c9f4ee3b2918739f0 Mon Sep 17 00:00:00 2001
From: ginsuma <13113013+ginsuma@users.noreply.github.com>
Date: Wed, 6 Sep 2023 00:43:22 +0700
Subject: [PATCH 1/2] Reset Plaid steps if the screen is blurred

---
 src/components/AddPlaidBankAccount.js         | 22 +++++++++++++++++--
 .../BankAccountPlaidStep.js                   |  1 +
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index dbe7e46ff6aa..239c764205d9 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -1,6 +1,7 @@
 import _ from 'underscore';
-import React, {useEffect, useRef, useCallback} from 'react';
+import React, {useEffect, useRef, useCallback, useMemo} from 'react';
 import {ActivityIndicator, View} from 'react-native';
+import {useIsFocused} from '@react-navigation/native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
@@ -41,6 +42,9 @@ const propTypes = {
     /** Fired when the user selects an account */
     onSelect: PropTypes.func,
 
+    /** Whether we should reset the step when the screen is blurred */
+    shouldResetStepOnBlur: PropTypes.bool,
+
     /** Additional text to display */
     text: PropTypes.string,
 
@@ -62,6 +66,7 @@ const defaultProps = {
     plaidLinkToken: '',
     onExitPlaid: () => {},
     onSelect: () => {},
+    shouldResetStepOnBlur: false,
     text: '',
     receivedRedirectURI: null,
     plaidLinkOAuthToken: '',
@@ -76,6 +81,7 @@ function AddPlaidBankAccount({
     plaidLinkToken,
     onExitPlaid,
     onSelect,
+    shouldResetStepOnBlur,
     text,
     receivedRedirectURI,
     plaidLinkOAuthToken,
@@ -88,6 +94,7 @@ function AddPlaidBankAccount({
 
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
+    const isFocused = useIsFocused();
 
     /**
      * @returns {String}
@@ -102,6 +109,11 @@ function AddPlaidBankAccount({
         }
     };
 
+    /**
+     * @returns {Array}
+     */
+    const plaidBankAccounts = useMemo(() => lodashGet(plaidData, 'bankAccounts') || [], [plaidData]);
+
     /**
      * @returns {Boolean}
      * I'm using useCallback so the useEffect which uses this function doesn't run on every render.
@@ -151,6 +163,13 @@ function AddPlaidBankAccount({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    useEffect(() => {
+        if (isFocused || plaidBankAccounts.length || !shouldResetStepOnBlur) {
+            return;
+        }
+        onExitPlaid();
+    }, [isFocused, onExitPlaid, plaidBankAccounts.length, shouldResetStepOnBlur]);
+
     useEffect(() => {
         // If we are coming back from offline and we haven't authenticated with Plaid yet, we need to re-run our call to kick off Plaid
         // previousNetworkState.current also makes sure that this doesn't run on the first render.
@@ -160,7 +179,6 @@ function AddPlaidBankAccount({
         previousNetworkState.current = isOffline;
     }, [allowDebit, bankAccountID, isAuthenticatedWithPlaid, isOffline]);
 
-    const plaidBankAccounts = lodashGet(plaidData, 'bankAccounts') || [];
     const token = getPlaidLinkToken();
     const options = _.map(plaidBankAccounts, (account) => ({
         value: account.plaidAccountID,
diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
index 1168a3ed271d..63ae0d0a1501 100644
--- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -103,6 +103,7 @@ function BankAccountPlaidStep(props) {
                     }}
                     plaidData={plaidData}
                     onExitPlaid={() => BankAccounts.setBankAccountSubStep(null)}
+                    shouldResetStepOnBlur
                     receivedRedirectURI={receivedRedirectURI}
                     plaidLinkOAuthToken={plaidLinkOAuthToken}
                     allowDebit

From ac42f614a07f07e49b99fe7f00a551f9aeeaa664 Mon Sep 17 00:00:00 2001
From: ginsuma <13113013+ginsuma@users.noreply.github.com>
Date: Tue, 12 Sep 2023 01:38:35 +0700
Subject: [PATCH 2/2] Add onBlurPlaid

---
 src/components/AddPlaidBankAccount.js            | 16 ++++++++--------
 .../ReimbursementAccount/BankAccountPlaidStep.js |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index 239c764205d9..e2843ba7fae8 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -39,12 +39,12 @@ const propTypes = {
     /** Fired when the user exits the Plaid flow */
     onExitPlaid: PropTypes.func,
 
+    /** Fired when the screen is blurred */
+    onBlurPlaid: PropTypes.func,
+
     /** Fired when the user selects an account */
     onSelect: PropTypes.func,
 
-    /** Whether we should reset the step when the screen is blurred */
-    shouldResetStepOnBlur: PropTypes.bool,
-
     /** Additional text to display */
     text: PropTypes.string,
 
@@ -65,8 +65,8 @@ const defaultProps = {
     selectedPlaidAccountID: '',
     plaidLinkToken: '',
     onExitPlaid: () => {},
+    onBlurPlaid: () => {},
     onSelect: () => {},
-    shouldResetStepOnBlur: false,
     text: '',
     receivedRedirectURI: null,
     plaidLinkOAuthToken: '',
@@ -80,8 +80,8 @@ function AddPlaidBankAccount({
     selectedPlaidAccountID,
     plaidLinkToken,
     onExitPlaid,
+    onBlurPlaid,
     onSelect,
-    shouldResetStepOnBlur,
     text,
     receivedRedirectURI,
     plaidLinkOAuthToken,
@@ -164,11 +164,11 @@ function AddPlaidBankAccount({
     }, []);
 
     useEffect(() => {
-        if (isFocused || plaidBankAccounts.length || !shouldResetStepOnBlur) {
+        if (isFocused || plaidBankAccounts.length) {
             return;
         }
-        onExitPlaid();
-    }, [isFocused, onExitPlaid, plaidBankAccounts.length, shouldResetStepOnBlur]);
+        onBlurPlaid();
+    }, [isFocused, onBlurPlaid, plaidBankAccounts.length]);
 
     useEffect(() => {
         // If we are coming back from offline and we haven't authenticated with Plaid yet, we need to re-run our call to kick off Plaid
diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
index 63ae0d0a1501..80c9257d367a 100644
--- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -103,7 +103,7 @@ function BankAccountPlaidStep(props) {
                     }}
                     plaidData={plaidData}
                     onExitPlaid={() => BankAccounts.setBankAccountSubStep(null)}
-                    shouldResetStepOnBlur
+                    onBlurPlaid={() => BankAccounts.setBankAccountSubStep(null)}
                     receivedRedirectURI={receivedRedirectURI}
                     plaidLinkOAuthToken={plaidLinkOAuthToken}
                     allowDebit