Merge pull request #51267 from getusha/reuse-validate-code-action-mod…

…al-wallet-section fix: reuse ValidateCodeActionModal in wallet settings page (cherry picked from commit c12fe34) (CP triggered by yuwenmemon)
Expensify · Oct 22, 2024 · 4d4179b · 4d4179b
1 parent dee808a
commit 4d4179b
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 47 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -27,9 +27,10 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
     const styles = useThemeStyles();
     const login = route.params.login;
     const role = route.params.role as ValueOf<typeof CONST.DELEGATE_ROLE>;
+    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) {
                 <DelegateMagicCodeModal
                     login={login}
                     role={role}
+                    onClose={() => {
+                        if (!showValidateActionModal) {
+                            return;
+                        }
+
+                        Navigation.navigate(ROUTES.SETTINGS_SECURITY);
+                    }}
                 />
             )}
         </HeaderPageLayout>

diff --git 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<typeof CONST.DELEGATE_ROLE>;
+    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
@@ -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
@@ -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<AnimatedTextInputRef>(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 (
-        <ScreenWrapper
-            onEntryTransitionEnd={() => loginInputRef.current?.focus()}
-            includeSafeAreaPaddingBottom={false}
-            shouldEnableMaxHeight
-            testID={VerifyAccountPage.displayName}
-        >
-            <HeaderWithBackButton
-                title={translate('contacts.validateAccount')}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)}
-            />
-            <View style={[themeStyles.ph5, themeStyles.mt3, themeStyles.mb7, styles.flex1]}>
-                <Text style={[themeStyles.mb3]}>{translate('contacts.featureRequiresValidate')}</Text>
-                <ValidateCodeForm
-                    sendValidateCode={() => User.requestValidateCodeAction()}
-                    validateCodeAction={validateCodeAction}
-                    validateError={validateLoginError}
-                    handleSubmitForm={handleSubmitForm}
-                    clearError={clearError}
-                    buttonStyles={[styles.justifyContentEnd, styles.flex1, safePaddingBottomStyle]}
-                />
-            </View>
-        </ScreenWrapper>
+        <ValidateCodeActionModal
+            sendValidateCode={() => User.requestValidateCodeAction()}
+            handleSubmitForm={handleSubmitForm}
+            validateError={validateLoginError}
+            isVisible={isValidateCodeActionModalVisible}
+            title={translate('contacts.validateAccount')}
+            description={translate('contacts.featureRequiresValidate')}
+            onClose={() => setIsValidateCodeActionModalVisible(false)}
+            clearError={clearError}
+        />
     );
 }