From 4d4179bc2fd409f119623e52479822ac5a578dec Mon Sep 17 00:00:00 2001 From: Francois Laithier Date: Tue, 22 Oct 2024 16:27:52 -0700 Subject: [PATCH] Merge pull request #51267 from getusha/reuse-validate-code-action-modal-wallet-section fix: reuse ValidateCodeActionModal in wallet settings page (cherry picked from commit c12fe3483924fee0cfda7ff95e4e76a47cf8219e) (CP triggered by yuwenmemon) --- src/ROUTES.ts | 5 +- src/components/SettlementButton/index.tsx | 2 +- src/components/ValidateAccountMessage.tsx | 4 -- .../ValidateCodeForm/BaseValidateCodeForm.tsx | 1 - src/libs/Navigation/types.ts | 1 + .../AddDelegate/ConfirmDelegatePage.tsx | 10 ++- .../AddDelegate/DelegateMagicCodeModal.tsx | 4 +- .../Security/SecuritySettingsPage.tsx | 3 + .../settings/Wallet/VerifyAccountPage.tsx | 71 +++++++++---------- 9 files changed, 54 insertions(+), 47 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index cf15013fed9b..5ed6afd3b034 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -148,7 +148,10 @@ const ROUTES = { }, SETTINGS_DELEGATE_CONFIRM: { route: 'settings/security/delegate/:login/role/:role/confirm', - getRoute: (login: string, role: string) => `settings/security/delegate/${encodeURIComponent(login)}/role/${role}/confirm` as const, + getRoute: (login: string, role: string, showValidateActionModal?: boolean) => { + const validateActionModalParam = showValidateActionModal ? `?showValidateActionModal=true` : ''; + return `settings/security/delegate/${encodeURIComponent(login)}/role/${role}/confirm${validateActionModalParam}` as const; + }, }, SETTINGS_ABOUT: 'settings/about', SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links', diff --git a/src/components/SettlementButton/index.tsx b/src/components/SettlementButton/index.tsx index d1d0ff8ccb71..4c3c9adf8ef1 100644 --- a/src/components/SettlementButton/index.tsx +++ b/src/components/SettlementButton/index.tsx @@ -191,7 +191,7 @@ function SettlementButton({ if (iouPaymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY || iouPaymentType === CONST.IOU.PAYMENT_TYPE.VBBA) { if (!isUserValidated) { - Navigation.navigate(ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute(ROUTES.SETTINGS_ADD_BANK_ACCOUNT)); + Navigation.navigate(ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.route); return; } triggerKYCFlow(event, iouPaymentType); diff --git a/src/components/ValidateAccountMessage.tsx b/src/components/ValidateAccountMessage.tsx index d9810e859bfa..d27e2704af3c 100644 --- a/src/components/ValidateAccountMessage.tsx +++ b/src/components/ValidateAccountMessage.tsx @@ -7,7 +7,6 @@ import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import variables from '@styles/variables'; import * as Session from '@userActions/Session'; -import * as User from '@userActions/User'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import Icon from './Icon'; @@ -44,9 +43,6 @@ function ValidateAccountMessage({backTo}: ValidateAccountMessageProps) { onPress={() => { const loginName = loginNames?.at(0); const login = loginList?.[loginName ?? ''] ?? {}; - if (!login?.validatedDate && !login?.validateCodeSent) { - User.requestContactMethodValidateCode(loginName ?? ''); - } Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHOD_DETAILS.getRoute(login?.partnerUserID ?? loginNames?.at(0) ?? '', backTo)); }} diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx index 9207b9158051..02121ce26906 100644 --- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -232,7 +232,6 @@ function BaseValidateCodeForm({ onPress={validateAndSubmitForm} style={[styles.mt4]} success - pressOnEnter large isLoading={account?.isLoading} /> diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 0aa6e7474329..db92328b7a51 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -752,6 +752,7 @@ type SettingsNavigatorParamList = { [SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM]: { login: string; role: string; + showValidateActionModal?: string; }; [SCREENS.SETTINGS.REPORT_CARD_LOST_OR_DAMAGED]: { /** cardID of selected card */ diff --git a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx index c769734688c6..ea9a1da690e8 100644 --- a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx +++ b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx @@ -27,9 +27,10 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) { const styles = useThemeStyles(); const login = route.params.login; const role = route.params.role as ValueOf; + const showValidateActionModal = route.params.showValidateActionModal === 'true'; const {isOffline} = useNetwork(); - const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false); + const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(showValidateActionModal ?? false); const personalDetails = PersonalDetailsUtils.getPersonalDetailByEmail(login); const avatarIcon = personalDetails?.avatar ?? FallbackAvatar; @@ -77,6 +78,13 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) { { + if (!showValidateActionModal) { + return; + } + + Navigation.navigate(ROUTES.SETTINGS_SECURITY); + }} /> )} diff --git a/src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx b/src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx index 64b8d27dfd73..dd54aa5b9404 100644 --- a/src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx +++ b/src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx @@ -14,9 +14,10 @@ import ROUTES from '@src/ROUTES'; type DelegateMagicCodeModalProps = { login: string; role: ValueOf; + onClose?: () => void; }; -function DelegateMagicCodeModal({login, role}: DelegateMagicCodeModalProps) { +function DelegateMagicCodeModal({login, role, onClose}: DelegateMagicCodeModalProps) { const {translate} = useLocalize(); const [account] = useOnyx(ONYXKEYS.ACCOUNT); const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(true); @@ -34,6 +35,7 @@ function DelegateMagicCodeModal({login, role}: DelegateMagicCodeModalProps) { }, [login, currentDelegate, role]); const onBackButtonPress = () => { + onClose?.(); setIsValidateCodeActionModalVisible(false); }; diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx index 88908dbdc1d6..42352594db7a 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.tsx +++ b/src/pages/settings/Security/SecuritySettingsPage.tsx @@ -151,7 +151,10 @@ function SecuritySettingsPage() { } if (pendingFields?.role && !pendingFields?.email) { Navigation.navigate(ROUTES.SETTINGS_UPDATE_DELEGATE_ROLE.getRoute(email, role)); + return; } + + Navigation.navigate(ROUTES.SETTINGS_DELEGATE_CONFIRM.getRoute(email, role, true)); }; const formattedEmail = formatPhoneNumber(email); diff --git a/src/pages/settings/Wallet/VerifyAccountPage.tsx b/src/pages/settings/Wallet/VerifyAccountPage.tsx index 0755ff3a932b..a3b51ef0de17 100644 --- a/src/pages/settings/Wallet/VerifyAccountPage.tsx +++ b/src/pages/settings/Wallet/VerifyAccountPage.tsx @@ -1,15 +1,8 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React, {useCallback, useEffect, useRef} from 'react'; -import {View} from 'react-native'; +import React, {useCallback, useEffect, useState} from 'react'; 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 ValidateCodeActionModal from '@components/ValidateCodeActionModal'; import useLocalize from '@hooks/useLocalize'; -import useSafePaddingBottomStyle from '@hooks/useSafePaddingBottomStyle'; -import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; @@ -24,18 +17,13 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { const [account] = useOnyx(ONYXKEYS.ACCOUNT); const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST); const contactMethod = account?.primaryLogin ?? ''; - const themeStyles = useThemeStyles(); const {translate} = useLocalize(); - const safePaddingBottomStyle = useSafePaddingBottomStyle(); - const loginInputRef = useRef(null); const loginData = loginList?.[contactMethod]; - const styles = useThemeStyles(); const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin'); const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated}); + const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(true); - const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE); - - const navigateBackTo = route?.params?.backTo ?? ROUTES.SETTINGS_WALLET; + const navigateBackTo = route?.params?.backTo; useEffect(() => () => User.clearUnvalidatedNewContactMethodAction(), []); @@ -54,32 +42,39 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) { if (!isUserValidated) { return; } + + setIsValidateCodeActionModalVisible(false); + + if (!navigateBackTo) { + return; + } + Navigation.navigate(navigateBackTo); }, [isUserValidated, navigateBackTo]); + useEffect(() => { + if (isValidateCodeActionModalVisible) { + return; + } + + if (!isUserValidated && navigateBackTo) { + Navigation.navigate(ROUTES.SETTINGS_WALLET); + } else if (!navigateBackTo) { + Navigation.goBack(); + } + }, [isValidateCodeActionModalVisible, isUserValidated, navigateBackTo]); + return ( - loginInputRef.current?.focus()} - includeSafeAreaPaddingBottom={false} - shouldEnableMaxHeight - testID={VerifyAccountPage.displayName} - > - Navigation.goBack(ROUTES.SETTINGS_WALLET)} - /> - - {translate('contacts.featureRequiresValidate')} - User.requestValidateCodeAction()} - validateCodeAction={validateCodeAction} - validateError={validateLoginError} - handleSubmitForm={handleSubmitForm} - clearError={clearError} - buttonStyles={[styles.justifyContentEnd, styles.flex1, safePaddingBottomStyle]} - /> - - + User.requestValidateCodeAction()} + handleSubmitForm={handleSubmitForm} + validateError={validateLoginError} + isVisible={isValidateCodeActionModalVisible} + title={translate('contacts.validateAccount')} + description={translate('contacts.featureRequiresValidate')} + onClose={() => setIsValidateCodeActionModalVisible(false)} + clearError={clearError} + /> ); }