fix: incorrect page is displayed when refreshing the page

src/components/ValidateCodeActionModal/index.tsx

@@ -30,6 +30,7 @@ function ValidateCodeActionModal({
     hasMagicCodeBeenSent,
     isLoading,
     shouldHandleNavigationBack,
+    disableAnimation,
     threeDotsMenuItems = [],
     onThreeDotsButtonPress = () => {},
 }: ValidateCodeActionModalProps) {
@@ -70,6 +71,7 @@ function ValidateCodeActionModal({
             hideModalContentWhileAnimating
             useNativeDriver
             shouldUseModalPaddingStyle={false}
+            animationInTiming={disableAnimation ? 1 : undefined}
         >
             <ScreenWrapper
                 includeSafeAreaPaddingBottom

src/components/ValidateCodeActionModal/type.ts

@@ -48,6 +48,9 @@ type ValidateCodeActionModalProps = {
     /** Whether handle navigation back when modal show. */
     shouldHandleNavigationBack?: boolean;
 
+    /** Whether disable the animations */
+    disableAnimation?: boolean;
+
     /** List of menu items for more(three dots) menu */
     threeDotsMenuItems?: PopoverMenuItem[];
 

src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import type {ValueOf} from 'type-fest';
 import Button from '@components/Button';
 import DelegateNoAccessWrapper from '@components/DelegateNoAccessWrapper';
@@ -15,26 +15,30 @@ import {formatPhoneNumber} from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
-import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
+import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import DelegateMagicCodeModal from './DelegateMagicCodeModal';
 
 type ConfirmDelegatePageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM>;
 
-function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
+function ConfirmDelegatePage({route, navigation}: ConfirmDelegatePageProps) {
     const {translate} = useLocalize();
 
     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 [shouldDisableModalAnimation, setShouldDisableModalAnimation] = useState(true);
 
     const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(showValidateActionModal ?? false);
+    useEffect(() => {
+        navigation.setParams({showValidateActionModal: String(isValidateCodeActionModalVisible)});
+    }, [isValidateCodeActionModalVisible, navigation]);
 
-    const personalDetails = PersonalDetailsUtils.getPersonalDetailByEmail(login);
+    const personalDetails = getPersonalDetailByEmail(login);
     const avatarIcon = personalDetails?.avatar ?? FallbackAvatar;
     const formattedLogin = formatPhoneNumber(login ?? '');
     const displayName = personalDetails?.displayName ?? formattedLogin;
@@ -49,7 +53,10 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
             text={translate('delegate.addCopilot')}
             style={styles.mt6}
             pressOnEnter
-            onPress={() => setIsValidateCodeActionModalVisible(true)}
+            onPress={() => {
+                setShouldDisableModalAnimation(false);
+                setIsValidateCodeActionModalVisible(true);
+            }}
         />
     );
 
@@ -65,7 +72,7 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
             <DelegateNoAccessWrapper accessDeniedVariants={[CONST.DELEGATE.DENIED_ACCESS_VARIANTS.DELEGATE]}>
                 <Text style={[styles.ph5]}>{translate('delegate.confirmCopilot')}</Text>
                 <MenuItem
-                    avatarID={personalDetails?.accountID ?? -1}
+                    avatarID={personalDetails?.accountID ?? CONST.DEFAULT_NUMBER_ID}
                     iconType={CONST.ICON_TYPE_AVATAR}
                     icon={avatarIcon}
                     title={displayName}
@@ -80,6 +87,9 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
                     shouldShowRightIcon
                 />
                 <DelegateMagicCodeModal
+                    // We should disable the animation initially and only enable it when the user manually opens the modal
+                    // to ensure it appears immediately when refreshing the page.
+                    disableAnimation={shouldDisableModalAnimation}
                     shouldHandleNavigationBack
                     login={login}
                     role={role}

src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx

@@ -3,10 +3,10 @@ import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
 import useLocalize from '@hooks/useLocalize';
-import * as User from '@libs/actions/User';
-import * as ErrorUtils from '@libs/ErrorUtils';
+import {requestValidateCodeAction} from '@libs/actions/User';
+import {getLatestError} from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import * as Delegate from '@userActions/Delegate';
+import {addDelegate, clearDelegateErrorsByField} from '@userActions/Delegate';
 import type CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -17,15 +17,16 @@ type DelegateMagicCodeModalProps = {
     isValidateCodeActionModalVisible: boolean;
     onClose?: () => void;
     shouldHandleNavigationBack?: boolean;
+    disableAnimation?: boolean;
 };
 
-function DelegateMagicCodeModal({login, role, onClose, isValidateCodeActionModalVisible, shouldHandleNavigationBack}: DelegateMagicCodeModalProps) {
+function DelegateMagicCodeModal({login, role, onClose, isValidateCodeActionModalVisible, shouldHandleNavigationBack, disableAnimation}: DelegateMagicCodeModalProps) {
     const {translate} = useLocalize();
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
     const currentDelegate = account?.delegatedAccess?.delegates?.find((d) => d.email === login);
     const addDelegateErrors = account?.delegatedAccess?.errorFields?.addDelegate?.[login];
-    const validateLoginError = ErrorUtils.getLatestError(addDelegateErrors);
+    const validateLoginError = getLatestError(addDelegateErrors);
 
     useEffect(() => {
         if (!currentDelegate || !!currentDelegate.pendingFields?.email || !!addDelegateErrors) {
@@ -44,20 +45,21 @@ function DelegateMagicCodeModal({login, role, onClose, isValidateCodeActionModal
         if (!validateLoginError) {
             return;
         }
-        Delegate.clearDelegateErrorsByField(currentDelegate?.email ?? '', 'addDelegate');
+        clearDelegateErrorsByField(currentDelegate?.email ?? '', 'addDelegate');
     };
 
     return (
         <ValidateCodeActionModal
+            disableAnimation={disableAnimation}
             shouldHandleNavigationBack={shouldHandleNavigationBack}
             clearError={clearError}
             onClose={onBackButtonPress}
             validateError={validateLoginError}
             isVisible={isValidateCodeActionModalVisible}
             title={translate('delegate.makeSureItIsYou')}
-            sendValidateCode={() => User.requestValidateCodeAction()}
+            sendValidateCode={() => requestValidateCodeAction()}
             hasMagicCodeBeenSent={validateCodeAction?.validateCodeSent}
-            handleSubmitForm={(validateCode) => Delegate.addDelegate(login, role, validateCode)}
+            handleSubmitForm={(validateCode) => addDelegate(login, role, validateCode)}
             descriptionPrimary={translate('delegate.enterMagicCode', {contactMethod: account?.primaryLogin ?? ''})}
         />
     );