From 9ebf90bae9301970b1fdc1ebdf5a2ac9ef97c6a8 Mon Sep 17 00:00:00 2001
From: ginsuma <13113013+ginsuma@users.noreply.github.com>
Date: Mon, 18 Sep 2023 23:41:27 +0700
Subject: [PATCH] Fix #27673

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

diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index e2843ba7fae8..dbe7e46ff6aa 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -1,7 +1,6 @@
 import _ from 'underscore';
-import React, {useEffect, useRef, useCallback, useMemo} from 'react';
+import React, {useEffect, useRef, useCallback} 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';
@@ -39,9 +38,6 @@ 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,
 
@@ -65,7 +61,6 @@ const defaultProps = {
     selectedPlaidAccountID: '',
     plaidLinkToken: '',
     onExitPlaid: () => {},
-    onBlurPlaid: () => {},
     onSelect: () => {},
     text: '',
     receivedRedirectURI: null,
@@ -80,7 +75,6 @@ function AddPlaidBankAccount({
     selectedPlaidAccountID,
     plaidLinkToken,
     onExitPlaid,
-    onBlurPlaid,
     onSelect,
     text,
     receivedRedirectURI,
@@ -94,7 +88,6 @@ function AddPlaidBankAccount({
 
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
-    const isFocused = useIsFocused();
 
     /**
      * @returns {String}
@@ -109,11 +102,6 @@ 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.
@@ -163,13 +151,6 @@ function AddPlaidBankAccount({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    useEffect(() => {
-        if (isFocused || plaidBankAccounts.length) {
-            return;
-        }
-        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
         // previousNetworkState.current also makes sure that this doesn't run on the first render.
@@ -179,6 +160,7 @@ 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 80c9257d367a..70cf43fcfdc2 100644
--- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -1,4 +1,5 @@
-import React, {useCallback} from 'react';
+import React, {useCallback, useEffect} from 'react';
+import {useIsFocused} from '@react-navigation/native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
@@ -41,6 +42,7 @@ const defaultProps = {
 
 function BankAccountPlaidStep(props) {
     const {plaidData, receivedRedirectURI, plaidLinkOAuthToken, reimbursementAccount, reimbursementAccountDraft, onBackButtonPress, getDefaultStateForField, translate} = props;
+    const isFocused = useIsFocused();
 
     const validate = useCallback((values) => {
         const errorFields = {};
@@ -51,6 +53,14 @@ function BankAccountPlaidStep(props) {
         return errorFields;
     }, []);
 
+    useEffect(() => {
+        const plaidBankAccounts = lodashGet(plaidData, 'bankAccounts') || [];
+        if (isFocused || plaidBankAccounts.length) {
+            return;
+        }
+        BankAccounts.setBankAccountSubStep(null);
+    }, [isFocused, plaidData]);
+
     const submit = useCallback(() => {
         const selectedPlaidBankAccount = _.findWhere(lodashGet(plaidData, 'bankAccounts', []), {
             plaidAccountID: lodashGet(reimbursementAccountDraft, 'plaidAccountID', ''),
@@ -103,7 +113,6 @@ function BankAccountPlaidStep(props) {
                     }}
                     plaidData={plaidData}
                     onExitPlaid={() => BankAccounts.setBankAccountSubStep(null)}
-                    onBlurPlaid={() => BankAccounts.setBankAccountSubStep(null)}
                     receivedRedirectURI={receivedRedirectURI}
                     plaidLinkOAuthToken={plaidLinkOAuthToken}
                     allowDebit