From 85c7680df409f5ea15a4dce8d636666fbb2e68b4 Mon Sep 17 00:00:00 2001 From: daledah Date: Mon, 16 Sep 2024 03:47:51 +0700 Subject: [PATCH 01/12] fix: requires validate when opening bank account --- src/languages/en.ts | 2 + src/languages/es.ts | 2 + src/pages/AddPersonalBankAccountPage.tsx | 104 ++++++++++++------ .../settings/Wallet/PaymentMethodList.tsx | 6 +- 4 files changed, 75 insertions(+), 39 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index f36db113a2aa..d60558eb0b6c 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -995,6 +995,8 @@ export default { contacts: { contactMethod: 'Contact method', contactMethods: 'Contact methods', + featureRequiresValidate: 'This feature requires you to validate your account.', + validateAccount: 'Validate your account', helpTextBeforeEmail: 'Add more ways for people to find you, and forward receipts to ', helpTextAfterEmail: ' from multiple email addresses.', pleaseVerify: 'Please verify this contact method', diff --git a/src/languages/es.ts b/src/languages/es.ts index 8a18c6c002e0..24a39b526d75 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -997,6 +997,8 @@ export default { contacts: { contactMethod: 'Método de contacto', contactMethods: 'Métodos de contacto', + featureRequiresValidate: 'Esta función requiere que valides tu cuenta.', + validateAccount: 'Valida tu cuenta', helpTextBeforeEmail: 'Añade más formas de que la gente te encuentre y reenvía los recibos a ', helpTextAfterEmail: ' desde varias direcciones de correo electrónico.', pleaseVerify: 'Por favor, verifica este método de contacto', diff --git a/src/pages/AddPersonalBankAccountPage.tsx b/src/pages/AddPersonalBankAccountPage.tsx index 04cce885bd07..4f0edb630f59 100644 --- a/src/pages/AddPersonalBankAccountPage.tsx +++ b/src/pages/AddPersonalBankAccountPage.tsx @@ -8,13 +8,17 @@ import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; +import ValidateCodeActionModal from '@components/ValidateCodeActionModal'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as ErrorUtils from '@libs/ErrorUtils'; import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI'; import Navigation from '@libs/Navigation/Navigation'; import * as BankAccounts from '@userActions/BankAccounts'; import * as PaymentMethods from '@userActions/PaymentMethods'; +import * as User from '@userActions/User'; import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; import type {PersonalBankAccount, PlaidData} from '@src/types/onyx'; @@ -31,8 +35,23 @@ function AddPersonalBankAccountPage({personalBankAccount, plaidData}: AddPersona const {translate} = useLocalize(); const [selectedPlaidAccountId, setSelectedPlaidAccountId] = useState(''); const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated}); + const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(!isUserValidated); const shouldShowSuccess = personalBankAccount?.shouldShowSuccess ?? false; + const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST); + const [account] = useOnyx(ONYXKEYS.ACCOUNT); + const primaryLogin = account?.primaryLogin; + const loginData = loginList?.[primaryLogin ?? '']; + const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin'); + + const handleSubmitForm = useCallback( + (submitCode: string) => { + User.validateSecondaryLogin(loginList, primaryLogin ?? '', submitCode); + Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT); + }, + [loginList, primaryLogin], + ); + const submitBankAccountForm = useCallback(() => { const bankAccounts = plaidData?.bankAccounts ?? []; const selectedPlaidBankAccount = bankAccounts.find((bankAccount) => bankAccount.plaidAccountID === selectedPlaidAccountId); @@ -67,43 +86,58 @@ function AddPersonalBankAccountPage({personalBankAccount, plaidData}: AddPersona shouldShowOfflineIndicator={false} testID={AddPersonalBankAccountPage.displayName} > - - - {shouldShowSuccess ? ( - exitFlow(true)} + {isUserValidated && ( + + - ) : ( - 0} - submitButtonText={translate('common.saveAndContinue')} - scrollContextEnabled - onSubmit={submitBankAccountForm} - validate={BankAccounts.validatePlaidSelection} - style={[styles.mh5, styles.flex1]} - > - Navigation.goBack()} - receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()} - selectedPlaidAccountID={selectedPlaidAccountId} + {shouldShowSuccess ? ( + exitFlow(true)} /> - - )} - + ) : ( + 0} + submitButtonText={translate('common.saveAndContinue')} + scrollContextEnabled + onSubmit={submitBankAccountForm} + validate={BankAccounts.validatePlaidSelection} + style={[styles.mh5, styles.flex1]} + > + Navigation.goBack()} + receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()} + selectedPlaidAccountID={selectedPlaidAccountId} + /> + + )} + + )} + { + setIsValidateCodeActionModalVisible(false); + exitFlow(); + }} + handleSubmitForm={handleSubmitForm} + clearError={() => {}} + /> ); } diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 5f77ac33becf..0206c368d0c0 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -4,7 +4,7 @@ import React, {useCallback, useMemo} from 'react'; import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native'; import {FlatList, View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; import type {SvgProps} from 'react-native-svg/lib/typescript/ReactNativeSVG'; import type {ValueOf} from 'type-fest'; import type {RenderSuggestionMenuItemProps} from '@components/AutoCompleteSuggestions/types'; @@ -198,7 +198,6 @@ function PaymentMethodList({ const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); const {isOffline} = useNetwork(); - const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated}); const getDescriptionForPolicyDomainCard = (domainName: string): string => { // A domain name containing a policyID indicates that this is a workspace feed @@ -332,11 +331,10 @@ function PaymentMethodList({ wrapperStyle={[styles.paymentMethod, listItemStyle]} hoverAndPressStyle={styles.hoveredComponentBG} ref={buttonRef} - disabled={!isUserValidated} /> ), - [onPress, translate, styles.paymentMethod, styles.hoveredComponentBG, listItemStyle, buttonRef, isUserValidated], + [onPress, translate, styles.paymentMethod, styles.hoveredComponentBG, listItemStyle, buttonRef], ); /** From f7310b12002725990f130ebd597f41d13bf1d7aa Mon Sep 17 00:00:00 2001 From: daledah Date: Wed, 18 Sep 2024 00:28:27 +0700 Subject: [PATCH 02/12] fix: add Verify account page --- src/ROUTES.ts | 1 + src/SCREENS.ts | 1 + .../ModalStackNavigators/index.tsx | 1 + .../CENTRAL_PANE_TO_RHP_MAPPING.ts | 1 + src/libs/Navigation/linkingConfig/config.ts | 4 + src/pages/AddPersonalBankAccountPage.tsx | 104 ++++++------------ .../AddBankAccount/SetupMethod.tsx | 11 +- .../settings/Wallet/PaymentMethodList.tsx | 16 ++- .../settings/Wallet/VerifyAccountPage.tsx | 73 ++++++++++++ 9 files changed, 131 insertions(+), 81 deletions(-) create mode 100644 src/pages/settings/Wallet/VerifyAccountPage.tsx diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 27504998c49c..6c3491117b46 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -151,6 +151,7 @@ const ROUTES = { SETTINGS_ABOUT: 'settings/about', SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links', SETTINGS_WALLET: 'settings/wallet', + SETTINGS_WALLET_VERIFY_ACCOUNT: {route: 'settings/wallet/verify', getRoute: (backTo?: string) => getUrlWithBackToParam('settings/wallet/verify', backTo)}, SETTINGS_WALLET_DOMAINCARD: { route: 'settings/wallet/card/:cardID?', getRoute: (cardID: string) => `settings/wallet/card/${cardID}` as const, diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 8168afba89ab..05bccc82079e 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -112,6 +112,7 @@ const SCREENS = { CARD_ACTIVATE: 'Settings_Wallet_Card_Activate', REPORT_VIRTUAL_CARD_FRAUD: 'Settings_Wallet_ReportVirtualCardFraud', CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS: 'Settings_Wallet_Cards_Digital_Details_Update_Address', + VERIFY_ACCOUNT: 'Settings_Wallet_Verify_Account', }, EXIT_SURVEY: { diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index b41b58530a6b..5e125f30c9ce 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -211,6 +211,7 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../../pages/settings/Wallet/TransferBalancePage').default, [SCREENS.SETTINGS.WALLET.CHOOSE_TRANSFER_ACCOUNT]: () => require('../../../../pages/settings/Wallet/ChooseTransferAccountPage').default, [SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS]: () => require('../../../../pages/EnablePayments/EnablePayments').default, + [SCREENS.SETTINGS.WALLET.VERIFY_ACCOUNT]: () => require('../../../../pages/settings/Wallet/VerifyAccountPage').default, [SCREENS.SETTINGS.ADD_DEBIT_CARD]: () => require('../../../../pages/settings/Wallet/AddDebitCardPage').default, [SCREENS.SETTINGS.ADD_BANK_ACCOUNT]: () => require('../../../../pages/AddPersonalBankAccountPage').default, [SCREENS.SETTINGS.PROFILE.STATUS]: () => require('../../../../pages/settings/Profile/CustomStatus/StatusPage').default, diff --git a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts index 609162bedd13..495554dae58f 100755 --- a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts +++ b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts @@ -37,6 +37,7 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial> = SCREENS.SETTINGS.WALLET.CARD_ACTIVATE, SCREENS.SETTINGS.WALLET.REPORT_VIRTUAL_CARD_FRAUD, SCREENS.SETTINGS.WALLET.CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS, + SCREENS.SETTINGS.WALLET.VERIFY_ACCOUNT, ], [SCREENS.SETTINGS.SECURITY]: [ SCREENS.SETTINGS.TWO_FACTOR_AUTH, diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 2ca2db10a1a7..44db290fc3e5 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -161,6 +161,10 @@ const config: LinkingOptions['config'] = { path: ROUTES.SETTINGS_CLOSE, exact: true, }, + [SCREENS.SETTINGS.WALLET.VERIFY_ACCOUNT]: { + path: ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.route, + exact: true, + }, [SCREENS.SETTINGS.WALLET.DOMAIN_CARD]: { path: ROUTES.SETTINGS_WALLET_DOMAINCARD.route, exact: true, diff --git a/src/pages/AddPersonalBankAccountPage.tsx b/src/pages/AddPersonalBankAccountPage.tsx index 4f0edb630f59..04cce885bd07 100644 --- a/src/pages/AddPersonalBankAccountPage.tsx +++ b/src/pages/AddPersonalBankAccountPage.tsx @@ -8,17 +8,13 @@ import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; -import ValidateCodeActionModal from '@components/ValidateCodeActionModal'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as ErrorUtils from '@libs/ErrorUtils'; import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI'; import Navigation from '@libs/Navigation/Navigation'; import * as BankAccounts from '@userActions/BankAccounts'; import * as PaymentMethods from '@userActions/PaymentMethods'; -import * as User from '@userActions/User'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; import type {PersonalBankAccount, PlaidData} from '@src/types/onyx'; @@ -35,23 +31,8 @@ function AddPersonalBankAccountPage({personalBankAccount, plaidData}: AddPersona const {translate} = useLocalize(); const [selectedPlaidAccountId, setSelectedPlaidAccountId] = useState(''); const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated}); - const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(!isUserValidated); const shouldShowSuccess = personalBankAccount?.shouldShowSuccess ?? false; - const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST); - const [account] = useOnyx(ONYXKEYS.ACCOUNT); - const primaryLogin = account?.primaryLogin; - const loginData = loginList?.[primaryLogin ?? '']; - const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin'); - - const handleSubmitForm = useCallback( - (submitCode: string) => { - User.validateSecondaryLogin(loginList, primaryLogin ?? '', submitCode); - Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT); - }, - [loginList, primaryLogin], - ); - const submitBankAccountForm = useCallback(() => { const bankAccounts = plaidData?.bankAccounts ?? []; const selectedPlaidBankAccount = bankAccounts.find((bankAccount) => bankAccount.plaidAccountID === selectedPlaidAccountId); @@ -86,58 +67,43 @@ function AddPersonalBankAccountPage({personalBankAccount, plaidData}: AddPersona shouldShowOfflineIndicator={false} testID={AddPersonalBankAccountPage.displayName} > - {isUserValidated && ( - - + + {shouldShowSuccess ? ( + exitFlow(true)} /> - {shouldShowSuccess ? ( - exitFlow(true)} + ) : ( + 0} + submitButtonText={translate('common.saveAndContinue')} + scrollContextEnabled + onSubmit={submitBankAccountForm} + validate={BankAccounts.validatePlaidSelection} + style={[styles.mh5, styles.flex1]} + > + Navigation.goBack()} + receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()} + selectedPlaidAccountID={selectedPlaidAccountId} /> - ) : ( - 0} - submitButtonText={translate('common.saveAndContinue')} - scrollContextEnabled - onSubmit={submitBankAccountForm} - validate={BankAccounts.validatePlaidSelection} - style={[styles.mh5, styles.flex1]} - > - Navigation.goBack()} - receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()} - selectedPlaidAccountID={selectedPlaidAccountId} - /> - - )} - - )} - { - setIsValidateCodeActionModalVisible(false); - exitFlow(); - }} - handleSubmitForm={handleSubmitForm} - clearError={() => {}} - /> + + )} + ); } diff --git a/src/pages/EnablePayments/AddBankAccount/SetupMethod.tsx b/src/pages/EnablePayments/AddBankAccount/SetupMethod.tsx index ed06d1aa1ed6..1f477998f4f4 100644 --- a/src/pages/EnablePayments/AddBankAccount/SetupMethod.tsx +++ b/src/pages/EnablePayments/AddBankAccount/SetupMethod.tsx @@ -15,12 +15,8 @@ import * as BankAccounts from '@userActions/BankAccounts'; import * as Link from '@userActions/Link'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {User} from '@src/types/onyx'; type SetupMethodOnyxProps = { - /** The user's data */ - user: OnyxEntry; - /** Whether Plaid is disabled */ isPlaidDisabled: OnyxEntry; }; @@ -29,7 +25,7 @@ type SetupMethodProps = SetupMethodOnyxProps; const plaidDesktopMessage = getPlaidDesktopMessage(); -function SetupMethod({isPlaidDisabled, user}: SetupMethodProps) { +function SetupMethod({isPlaidDisabled}: SetupMethodProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -52,7 +48,7 @@ function SetupMethod({isPlaidDisabled, user}: SetupMethodProps) { icon={Expensicons.Bank} text={translate('bankAccount.addBankAccount')} onPress={() => BankAccounts.openPersonalBankAccountSetupWithPlaid()} - isDisabled={!!isPlaidDisabled || !user?.validated} + isDisabled={!!isPlaidDisabled} style={[styles.mt4, styles.mb2]} iconStyles={styles.buttonCTAIcon} shouldShowRightIcon @@ -70,7 +66,4 @@ export default withOnyx({ isPlaidDisabled: { key: ONYXKEYS.IS_PLAID_DISABLED, }, - user: { - key: ONYXKEYS.USER, - }, })(SetupMethod); diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 790157f5c3eb..56b8abf4c062 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -4,7 +4,7 @@ import React, {useCallback, useMemo} from 'react'; import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native'; import {FlatList, View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import type {SvgProps} from 'react-native-svg/lib/typescript/ReactNativeSVG'; import type {ValueOf} from 'type-fest'; import type {RenderSuggestionMenuItemProps} from '@components/AutoCompleteSuggestions/types'; @@ -199,6 +199,8 @@ function PaymentMethodList({ const {translate} = useLocalize(); const {isOffline} = useNetwork(); + const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated}); + const getDescriptionForPolicyDomainCard = (domainName: string): string => { // A domain name containing a policyID indicates that this is a workspace feed const policyID = domainName.match(CONST.REGEX.EXPENSIFY_POLICY_DOMAIN_NAME)?.[1]; @@ -322,17 +324,25 @@ function PaymentMethodList({ */ const renderListEmptyComponent = () => {translate('paymentMethodList.addFirstPaymentMethod')}; + const onPressItem = useCallback(() => { + if (!isUserValidated) { + Navigation.navigate(ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute(ROUTES.SETTINGS_ADD_BANK_ACCOUNT)); + return; + } + onPress(); + }, [isUserValidated, onPress]); + const renderListFooterComponent = useCallback( () => ( ), - [onPress, translate, styles.paymentMethod, listItemStyle, buttonRef], + [translate, styles.paymentMethod, listItemStyle, buttonRef, onPressItem], ); /** diff --git a/src/pages/settings/Wallet/VerifyAccountPage.tsx b/src/pages/settings/Wallet/VerifyAccountPage.tsx new file mode 100644 index 000000000000..03ac87af8bc0 --- /dev/null +++ b/src/pages/settings/Wallet/VerifyAccountPage.tsx @@ -0,0 +1,73 @@ +import type {StackScreenProps} from '@react-navigation/stack'; +import React, {useCallback, useEffect, useRef} from 'react'; +import {View} from 'react-native'; +import {useOnyx} from 'react-native-onyx'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import type {AnimatedTextInputRef} from '@components/RNTextInput'; +import ScreenWrapper from '@components/ScreenWrapper'; +import Text from '@components/Text'; +import ValidateCodeForm from '@components/ValidateCodeActionModal/ValidateCodeForm'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import * as ErrorUtils from '@libs/ErrorUtils'; +import Navigation from '@libs/Navigation/Navigation'; +import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; +import * as User from '@userActions/User'; +import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; +import type SCREENS from '@src/SCREENS'; + +type VerifyAccountPageProps = StackScreenProps; + +function VerifyAccountPage({route}: VerifyAccountPageProps) { + const [account] = useOnyx(ONYXKEYS.ACCOUNT); + const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST); + const [pendingContactAction] = useOnyx(ONYXKEYS.PENDING_CONTACT_ACTION); + const contactMethod = account?.primaryLogin ?? ''; + const themeStyles = useThemeStyles(); + const {translate} = useLocalize(); + const loginInputRef = useRef(null); + const loginData = loginList?.[pendingContactAction?.contactMethod ?? contactMethod]; + const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin'); + + const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE); + + const navigateBackTo = route?.params?.backTo ?? ROUTES.SETTINGS_WALLET; + + useEffect(() => () => User.clearUnvalidatedNewContactMethodAction(), []); + + const handleSubmitForm = useCallback( + (submitCode: string) => { + User.validateSecondaryLogin(loginList, contactMethod ?? '', submitCode); + Navigation.navigate(navigateBackTo); + }, + [loginList, contactMethod, navigateBackTo], + ); + + return ( + loginInputRef.current?.focus()} + includeSafeAreaPaddingBottom={false} + shouldEnableMaxHeight + testID={VerifyAccountPage.displayName} + > + Navigation.goBack(ROUTES.SETTINGS_ADD_BANK_ACCOUNT)} + /> + + {translate('contacts.featureRequiresValidate')} + {}} + /> + + + ); +} + +VerifyAccountPage.displayName = 'VerifyAccountPage'; + +export default VerifyAccountPage; From a5b24fee747c3a67b7b0ef164c8a253656abc14f Mon Sep 17 00:00:00 2001 From: daledah Date: Wed, 18 Sep 2024 15:51:02 +0700 Subject: [PATCH 03/12] fix: navigate when add bank account --- src/pages/AddPersonalBankAccountPage.tsx | 5 +++-- src/pages/settings/Wallet/VerifyAccountPage.tsx | 11 +++++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/pages/AddPersonalBankAccountPage.tsx b/src/pages/AddPersonalBankAccountPage.tsx index 04cce885bd07..1aef2f3be99a 100644 --- a/src/pages/AddPersonalBankAccountPage.tsx +++ b/src/pages/AddPersonalBankAccountPage.tsx @@ -15,6 +15,7 @@ import Navigation from '@libs/Navigation/Navigation'; import * as BankAccounts from '@userActions/BankAccounts'; import * as PaymentMethods from '@userActions/PaymentMethods'; import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; import type {PersonalBankAccount, PlaidData} from '@src/types/onyx'; @@ -52,7 +53,7 @@ function AddPersonalBankAccountPage({personalBankAccount, plaidData}: AddPersona } else if (shouldContinue && onSuccessFallbackRoute) { PaymentMethods.continueSetup(onSuccessFallbackRoute); } else { - Navigation.goBack(); + Navigation.navigate(ROUTES.SETTINGS_WALLET); } }, [personalBankAccount], @@ -97,7 +98,7 @@ function AddPersonalBankAccountPage({personalBankAccount, plaidData}: AddPersona text={translate('walletPage.chooseAccountBody')} plaidData={plaidData} isDisplayedInWalletFlow - onExitPlaid={() => Navigation.goBack()} + onExitPlaid={() => Navigation.navigate(ROUTES.SETTINGS_WALLET)} receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()} selectedPlaidAccountID={selectedPlaidAccountId} /> diff --git a/src/pages/settings/Wallet/VerifyAccountPage.tsx b/src/pages/settings/Wallet/VerifyAccountPage.tsx index 03ac87af8bc0..8d6e2246d935 100644 --- a/src/pages/settings/Wallet/VerifyAccountPage.tsx +++ b/src/pages/settings/Wallet/VerifyAccountPage.tsx @@ -29,6 +29,7 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { const loginInputRef = useRef(null); const loginData = loginList?.[pendingContactAction?.contactMethod ?? contactMethod]; const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin'); + const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated}); const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE); @@ -39,11 +40,17 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { const handleSubmitForm = useCallback( (submitCode: string) => { User.validateSecondaryLogin(loginList, contactMethod ?? '', submitCode); - Navigation.navigate(navigateBackTo); }, - [loginList, contactMethod, navigateBackTo], + [loginList, contactMethod], ); + useEffect(() => { + if (!isUserValidated) { + return; + } + Navigation.navigate(navigateBackTo); + }, [isUserValidated, navigateBackTo]); + return ( loginInputRef.current?.focus()} From 56327f6697f21c8ca20f8ffed826b363b7be058d Mon Sep 17 00:00:00 2001 From: daledah Date: Wed, 18 Sep 2024 16:19:53 +0700 Subject: [PATCH 04/12] fix: request code on open page --- .../EnablePayments/AddBankAccount/SetupMethod.tsx | 12 ++++++++++-- src/pages/settings/Wallet/VerifyAccountPage.tsx | 9 ++++++++- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/pages/EnablePayments/AddBankAccount/SetupMethod.tsx b/src/pages/EnablePayments/AddBankAccount/SetupMethod.tsx index 1f477998f4f4..ca1c41925369 100644 --- a/src/pages/EnablePayments/AddBankAccount/SetupMethod.tsx +++ b/src/pages/EnablePayments/AddBankAccount/SetupMethod.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import Button from '@components/Button'; import * as Expensicons from '@components/Icon/Expensicons'; @@ -11,6 +11,7 @@ import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import getPlaidDesktopMessage from '@libs/getPlaidDesktopMessage'; +import Navigation from '@libs/Navigation/Navigation'; import * as BankAccounts from '@userActions/BankAccounts'; import * as Link from '@userActions/Link'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -28,6 +29,7 @@ const plaidDesktopMessage = getPlaidDesktopMessage(); function SetupMethod({isPlaidDisabled}: SetupMethodProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); + const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated}); return ( @@ -47,7 +49,13 @@ function SetupMethod({isPlaidDisabled}: SetupMethodProps) {