Merge pull request #52523 from wildan-m/wildan/fix/51189-fix-magic-co…

…de-modal-gone-reconnect Fix ValidateCodeActionModal dismissed when re-connect
Expensify · Nov 15, 2024 · 88713ab · 88713ab
2 parents 4964af5 + a0f382b
commit 88713ab
Showing 1 changed file with 67 additions and 65 deletions.
diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx b/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx
@@ -21,7 +21,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import {addSMSDomainIfPhoneNumber} from '@libs/PhoneNumber';
 import * as UserUtils from '@libs/UserUtils';
-import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -109,72 +109,74 @@ function NewContactMethodPage({route}: NewContactMethodPageProps) {
         Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(navigateBackTo));
     }, [navigateBackTo]);
 
+    if (isActingAsDelegate) {
+        return <NotFoundPage onBackButtonPress={onBackButtonPress} />;
+    }
+
     return (
-        <AccessOrNotFoundWrapper shouldBeBlocked={isActingAsDelegate}>
-            <ScreenWrapper
-                onEntryTransitionEnd={() => loginInputRef.current?.focus()}
-                includeSafeAreaPaddingBottom={false}
-                shouldEnableMaxHeight
-                testID={NewContactMethodPage.displayName}
+        <ScreenWrapper
+            onEntryTransitionEnd={() => loginInputRef.current?.focus()}
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+            testID={NewContactMethodPage.displayName}
+        >
+            <HeaderWithBackButton
+                title={translate('contacts.newContactMethod')}
+                onBackButtonPress={onBackButtonPress}
+            />
+            <FormProvider
+                formID={ONYXKEYS.FORMS.NEW_CONTACT_METHOD_FORM}
+                validate={validate}
+                onSubmit={handleValidateMagicCode}
+                submitButtonText={translate('common.add')}
+                style={[styles.flexGrow1, styles.mh5]}
             >
-                <HeaderWithBackButton
-                    title={translate('contacts.newContactMethod')}
-                    onBackButtonPress={onBackButtonPress}
-                />
-                <FormProvider
-                    formID={ONYXKEYS.FORMS.NEW_CONTACT_METHOD_FORM}
-                    validate={validate}
-                    onSubmit={handleValidateMagicCode}
-                    submitButtonText={translate('common.add')}
-                    style={[styles.flexGrow1, styles.mh5]}
-                >
-                    <Text style={styles.mb5}>{translate('common.pleaseEnterEmailOrPhoneNumber')}</Text>
-                    <View style={styles.mb6}>
-                        <InputWrapper
-                            InputComponent={TextInput}
-                            label={`${translate('common.email')}/${translate('common.phoneNumber')}`}
-                            aria-label={`${translate('common.email')}/${translate('common.phoneNumber')}`}
-                            role={CONST.ROLE.PRESENTATION}
-                            inputMode={CONST.INPUT_MODE.EMAIL}
-                            ref={loginInputRef}
-                            inputID={INPUT_IDS.PHONE_OR_EMAIL}
-                            autoCapitalize="none"
-                            enterKeyHint="done"
-                            maxLength={CONST.LOGIN_CHARACTER_LIMIT}
-                        />
-                    </View>
-                    {hasFailedToSendVerificationCode && (
-                        <DotIndicatorMessage
-                            messages={ErrorUtils.getLatestErrorField(pendingContactAction, 'actionVerified')}
-                            type="error"
-                        />
-                    )}
-                </FormProvider>
-                <ValidateCodeActionModal
-                    validatePendingAction={pendingContactAction?.pendingFields?.actionVerified}
-                    validateError={validateLoginError}
-                    handleSubmitForm={addNewContactMethod}
-                    clearError={() => {
-                        if (!loginData) {
-                            return;
-                        }
-                        User.clearContactMethodErrors(addSMSDomainIfPhoneNumber(pendingContactAction?.contactMethod ?? contactMethod), 'addedLogin');
-                    }}
-                    onClose={() => {
-                        if (loginData?.errorFields && pendingContactAction?.contactMethod) {
-                            User.clearContactMethod(pendingContactAction?.contactMethod);
-                            User.clearUnvalidatedNewContactMethodAction();
-                        }
-                        setIsValidateCodeActionModalVisible(false);
-                    }}
-                    isVisible={isValidateCodeActionModalVisible}
-                    hasMagicCodeBeenSent={!!loginData?.validateCodeSent}
-                    title={translate('delegate.makeSureItIsYou')}
-                    sendValidateCode={() => User.requestValidateCodeAction()}
-                    descriptionPrimary={translate('contacts.enterMagicCode', {contactMethod})}
-                />
-            </ScreenWrapper>
-        </AccessOrNotFoundWrapper>
+                <Text style={styles.mb5}>{translate('common.pleaseEnterEmailOrPhoneNumber')}</Text>
+                <View style={styles.mb6}>
+                    <InputWrapper
+                        InputComponent={TextInput}
+                        label={`${translate('common.email')}/${translate('common.phoneNumber')}`}
+                        aria-label={`${translate('common.email')}/${translate('common.phoneNumber')}`}
+                        role={CONST.ROLE.PRESENTATION}
+                        inputMode={CONST.INPUT_MODE.EMAIL}
+                        ref={loginInputRef}
+                        inputID={INPUT_IDS.PHONE_OR_EMAIL}
+                        autoCapitalize="none"
+                        enterKeyHint="done"
+                        maxLength={CONST.LOGIN_CHARACTER_LIMIT}
+                    />
+                </View>
+                {hasFailedToSendVerificationCode && (
+                    <DotIndicatorMessage
+                        messages={ErrorUtils.getLatestErrorField(pendingContactAction, 'actionVerified')}
+                        type="error"
+                    />
+                )}
+            </FormProvider>
+            <ValidateCodeActionModal
+                validatePendingAction={pendingContactAction?.pendingFields?.actionVerified}
+                validateError={validateLoginError}
+                handleSubmitForm={addNewContactMethod}
+                clearError={() => {
+                    if (!loginData) {
+                        return;
+                    }
+                    User.clearContactMethodErrors(addSMSDomainIfPhoneNumber(pendingContactAction?.contactMethod ?? contactMethod), 'addedLogin');
+                }}
+                onClose={() => {
+                    if (loginData?.errorFields && pendingContactAction?.contactMethod) {
+                        User.clearContactMethod(pendingContactAction?.contactMethod);
+                        User.clearUnvalidatedNewContactMethodAction();
+                    }
+                    setIsValidateCodeActionModalVisible(false);
+                }}
+                isVisible={isValidateCodeActionModalVisible}
+                hasMagicCodeBeenSent={!!loginData?.validateCodeSent}
+                title={translate('delegate.makeSureItIsYou')}
+                sendValidateCode={() => User.requestValidateCodeAction()}
+                descriptionPrimary={translate('contacts.enterMagicCode', {contactMethod})}
+            />
+        </ScreenWrapper>
     );
 }