From de99c1a369582c4502634e9a7b15f5118eaacfa4 Mon Sep 17 00:00:00 2001 From: Yauheni Date: Thu, 7 Dec 2023 11:32:11 +0100 Subject: [PATCH 1/3] Refactor AddPlaidBankAccount --- src/components/AddPlaidBankAccount.js | 96 +++++++++++++++------------ src/components/PlaidLink/index.tsx | 20 +++++- 2 files changed, 71 insertions(+), 45 deletions(-) diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js index 68d529c4a78d..85c88faa6d3f 100644 --- a/src/components/AddPlaidBankAccount.js +++ b/src/components/AddPlaidBankAccount.js @@ -181,52 +181,62 @@ function AddPlaidBankAccount({ ); } - // Plaid Link view - if (!plaidBankAccounts.length) { - return ( - - {lodashGet(plaidData, 'isLoading') && ( - - - - )} - {Boolean(plaidDataErrorMessage) && {plaidDataErrorMessage}} - {Boolean(token) && !bankName && ( - { - Log.info('[PlaidLink] Success!'); - BankAccounts.openPlaidBankAccountSelector(publicToken, metadata.institution.name, allowDebit, bankAccountID); - }} - onError={(error) => { - 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); - if (bankAccountID && metadata && metadata.error_code) { - BankAccounts.handlePlaidError(bankAccountID, metadata.error_code, metadata.error_message, metadata.request_id); - } + const renderPlaidLink = () => { + if (Boolean(token) && !bankName) { + return ( + { + Log.info('[PlaidLink] Success!'); + BankAccounts.openPlaidBankAccountSelector(publicToken, metadata.institution.name, allowDebit, bankAccountID); + }} + onError={(error) => { + 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); + if (bankAccountID && metadata && metadata.error_code) { + BankAccounts.handlePlaidError(bankAccountID, metadata.error_code, metadata.error_message, metadata.request_id); } + } - // Limit the number of times a user can submit Plaid credentials - if (event === 'SUBMIT_CREDENTIALS') { - App.handleRestrictedEvent(event); - } - }} - // User prematurely exited the Plaid flow - // eslint-disable-next-line react/jsx-props-no-multi-spaces - onExit={onExitPlaid} - receivedRedirectURI={receivedRedirectURI} + // Limit the number of times a user can submit Plaid credentials + if (event === 'SUBMIT_CREDENTIALS') { + App.handleRestrictedEvent(event); + } + }} + // User prematurely exited the Plaid flow + // eslint-disable-next-line react/jsx-props-no-multi-spaces + onExit={onExitPlaid} + receivedRedirectURI={receivedRedirectURI} + /> + ); + } + + if (plaidDataErrorMessage) { + return {plaidDataErrorMessage}; + } + + if (lodashGet(plaidData, 'isLoading')) { + return ( + + - )} - - ); + + ); + } + + return ; + }; + + // Plaid Link view + if (!plaidBankAccounts.length) { + return {renderPlaidLink()}; } // Plaid bank accounts view diff --git a/src/components/PlaidLink/index.tsx b/src/components/PlaidLink/index.tsx index 2109771473aa..be8556a8c81c 100644 --- a/src/components/PlaidLink/index.tsx +++ b/src/components/PlaidLink/index.tsx @@ -1,10 +1,15 @@ -import {useCallback, useEffect, useState} from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; +import {ActivityIndicator, View} from 'react-native'; import {PlaidLinkOnSuccessMetadata, usePlaidLink} from 'react-plaid-link'; import Log from '@libs/Log'; +import useTheme from '@styles/themes/useTheme'; +import useThemeStyles from '@styles/useThemeStyles'; import PlaidLinkProps from './types'; function PlaidLink({token, onSuccess = () => {}, onError = () => {}, onExit = () => {}, onEvent, receivedRedirectURI}: PlaidLinkProps) { const [isPlaidLoaded, setIsPlaidLoaded] = useState(false); + const theme = useTheme(); + const styles = useThemeStyles(); const successCallback = useCallback( (publicToken: string, metadata: PlaidLinkOnSuccessMetadata) => { onSuccess({publicToken, metadata}); @@ -47,7 +52,18 @@ function PlaidLink({token, onSuccess = () => {}, onError = () => {}, onExit = () open(); }, [ready, error, isPlaidLoaded, open, onError]); - return null; + if (isPlaidLoaded) { + return null; + } + + return ( + + + + ); } PlaidLink.displayName = 'PlaidLink'; From 0cb834c6d148b32e708b4b523eba12a50f02d3c3 Mon Sep 17 00:00:00 2001 From: Yauheni Date: Thu, 7 Dec 2023 11:56:33 +0100 Subject: [PATCH 2/3] Update PlaidLink --- src/components/PlaidLink/index.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/PlaidLink/index.tsx b/src/components/PlaidLink/index.tsx index be8556a8c81c..ead575bc6e02 100644 --- a/src/components/PlaidLink/index.tsx +++ b/src/components/PlaidLink/index.tsx @@ -52,10 +52,6 @@ function PlaidLink({token, onSuccess = () => {}, onError = () => {}, onExit = () open(); }, [ready, error, isPlaidLoaded, open, onError]); - if (isPlaidLoaded) { - return null; - } - return ( Date: Tue, 19 Dec 2023 17:07:09 +0100 Subject: [PATCH 3/3] Fix TS issues --- src/components/PlaidLink/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/PlaidLink/index.tsx b/src/components/PlaidLink/index.tsx index ead575bc6e02..08655458d12e 100644 --- a/src/components/PlaidLink/index.tsx +++ b/src/components/PlaidLink/index.tsx @@ -1,9 +1,9 @@ import React, {useCallback, useEffect, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; import {PlaidLinkOnSuccessMetadata, usePlaidLink} from 'react-plaid-link'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import Log from '@libs/Log'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import PlaidLinkProps from './types'; function PlaidLink({token, onSuccess = () => {}, onError = () => {}, onExit = () => {}, onEvent, receivedRedirectURI}: PlaidLinkProps) {