[Due for payment 2025-03-13] [$250] DEV : When clicking to send the magic code to verify the secondary email, a blank page appears briefly before the page to enter the code.

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number:
Reproducible in staging?: dev
Reproducible in production?: dev
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @brunovjk
Slack conversation (hyperlinked to channel name): ts_external_expensify_bugs

Action Performed:

1. Log into the account.
2. Navigate to Account settings > Profile > Contact methods.
3. Add a secondary login.
4. Enter the magic code for the existing account to allow the secondary email to be added.
5. Click to send the magic code to verify the secondary email.

Expected Result:

The user is taken directly to the page to enter the code.

Actual Result:

A blank page appears briefly before navigating to the page to enter the code.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

393837072-0b45c58f-ce4e-4e94-bad7-f7f0057d5916.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021867385191571001621
• Upwork Job ID: 1867385191571001621
• Last Price Increase: 2024-12-13
• Automatic offers:
• jacobkim9881 | Contributor | 105808625

Issue Owner

Current Issue Owner: @MitchExpensify

Issue Owner

Current Issue Owner: @MitchExpensify

[melvin-bot]

Triggered auto assignment to @MitchExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[jacobkim9881]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-20 09:38:28 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

When entering one of contacts, RHP modal opens twice.

What is the root cause of that problem?

App/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx

Lines 239 to 276 in f8f12c2

	<ScreenWrapper
	onEntryTransitionEnd={() => validateCodeFormRef.current?.focus?.()}
	testID={ContactMethodDetailsPage.displayName}
	>
	<HeaderWithBackButton
	title={formattedContactMethod}
	onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo))}
	/>
	<ScrollView keyboardShouldPersistTaps="handled">
	{isFailedAddContactMethod && (
	<ErrorMessageRow
	errors={ErrorUtils.getLatestErrorField(loginData, 'addedLogin')}
	errorRowStyles={[themeStyles.mh5, themeStyles.mv3]}
	onClose={() => {
	User.clearContactMethod(contactMethod);
	User.clearUnvalidatedNewContactMethodAction();
	Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
	}}
	canDismissError
	/>
	)}
	<ValidateCodeActionModal
	title={formattedContactMethod}
	onModalHide={() => {}}
	hasMagicCodeBeenSent={hasMagicCodeBeenSent}
	isVisible={isValidateCodeActionModalVisible && !loginData.validatedDate && !!loginData}
	validatePendingAction={loginData.pendingFields?.validateCodeSent}
	handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode)}
	validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
	clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
	onClose={() => {
	Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
	setIsValidateCodeActionModalVisible(false);
	}}
	sendValidateCode={() => User.requestContactMethodValidateCode(contactMethod)}
	descriptionPrimary={translate('contacts.enterMagicCode', {contactMethod})}
	/>

Though this details page is opened as a modal already, <ValidateCodeActionModal> forces to open another modal in the modal.

What changes do you think we should make in order to solve the problem?

We should create a core component without modal and should place in ContactMethodDetailsPage. So we don't use <ValidateCodeActionModal> since it has <Modal> and <HeaderWithBackButton> components inside already.

We create a new component called <ValidateCodeActionWithoutModal> which only have <ValidateCodeForm> component and have logics for closing and sending validate code.

Since we use <ValidateCodeForm> in <ValidateCodeActionWithoutModal>, we should fix the transition freezing issue. It's because the input tag gets focus() to bother transition animation. The focusing lets the user type as soon as modal open but it takes focusing from the animation. By FocusTrap repo, it can trap focus to let animation work. To fix we add a option at <ScreenWrapper> of <FocusTrap>'s parent. <ScreenWrapper> is used here:

App/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx

Line 239 in f8f12c2

<ScreenWrapper

The option we should add at ScreenWrapper:

        focusTrapSettings={{
            focusTrapOptions: {    
                checkCanFocusTrap: (trapContainers) => {
                    const results = trapContainers.map((trapContainer) => {
                        return new Promise((resolve) => {
                            const interval = setInterval(() => {
                                if (getComputedStyle(trapContainer).visibility !== 'hidden') {
                                    resolve();
                                    clearInterval(interval);
                                }
                            }, 5);
                        });
                    });
                    // Return a promise that resolves when all the trap containers are able to receive focus
                    return Promise.all(results);
                }
            }
        }

We bring three dot menu in the <ValidateCodeActionModal> back to the ContactMethodDetailsPage.
onBackButtonPress should be deleted too since it bothers transition animation but w/o it, navigating and animation works.

Details:

                <HeaderWithBackButton
                    //onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo))}
                    title={formattedContactMethod}
                    threeDotsMenuItems={getThreeDotsMenuItems()}
                    shouldShowThreeDotsButton={getThreeDotsMenuItems().length > 0}
                    shouldOverlayDots
                    threeDotsAnchorPosition={themeStyles.threeDotsPopoverOffset(windowWidth)}
                    onThreeDotsButtonPress={() => {
                        // Hide the keyboard when the user clicks the three-dot menu.
                        // Use blurActiveElement() for mWeb and KeyboardUtils.dismiss() for native apps.
                        blurActiveElement();
                        KeyboardUtils.dismiss();
                    }}

<ScrollView> should be with themeStyles.flex1 for the validate button placed in bottom

Details:

            <ScrollView
                contentContainerStyle={themeStyles.flex1} 
                keyboardShouldPersistTaps="handled"
            >
  

<ValidateCodeActionWithoutModal/> should be hidden or visible by !loginData?.validatedDate. So when it doesn't have validateDate(it isn't validated) then it will show the validate code form.

Details:

  {!loginData?.validatedDate && <ValidateCodeActionWithoutModal/>}

getMenuItems() should be hidden/visible by {!isValidateCodeActionModalVisible && loginData?.validatedDate && getMenuItems()}. So when it is valdated and when validate code form isn't visible then getMenuItems() will show the menu items.

Details:

  {!isValidateCodeActionModalVisible && loginData?.validatedDate && getMenuItems()}  

We add validateCodeFormRef={validateCodeFormRef} in <ValidateCodeActionWithoutModal> because we only use 1 modal. We delete onClose action in <ValidateCodeActionWithoutModal> because onClose logic will be activated in useBeforeRemove(). Delete title, footer, onModalHide prop too.

Details:

<ValidateCodeActionWithoutModal
    //title={formattedContactMethod}
    //onModalHide={() => {}}
    validateCodeFormRef={validateCodeFormRef} 
    /*
    onClose={() => {
                        Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
                        setIsValidateCodeActionModalVisible(false);
                    }}
    */
    //footer={getDeleteConfirmationModal}
    

We should replace <ValidateCodeActionModal> with <ValidateCodeActionWithoutModal>.

In <ValidateCodeActionWithoutModal> we add useEffect for the closing logic. onClose is not needed since it's not modal. windowWidth, <Modal>, <ScreenWrapper> and <HeaderWithBackButton> is not needed as it doesn't have modal.

Details:

//const {windowWidth} = useWindowDimensions();

useEffect(() => () => {
    clearError();    
    //onClose?.();     
    firstRenderRef.current = true;  
}, [clearError]);   

<!-- delete these 
<Modal
    <ScreenWrapper
        <HeaderWithBackButton
            title={title}
 delete these -->
<!-- only use these --> 
    ..
    <ValidateCodeForm
    ..
<!-- only use these -->

The new component should share type with the modal's.

Details:

import type {ValidateCodeActionModalProps} from '@components/ValidateCodeActionModal/type';

We should forwardRef for <ValidateCodeActionWithoutModal> because it passes ref through <ValidateCodeForm>.

Details:

export default forwardRef((props, ref) => (  
    <ValidateCodeAction 
        {...props} 
        forwardedRef={ref} 
/>
));

You can browse test code:
ContactMethodDetailsPage.tsx
ValidateCodeActionWithoutModal.tsx

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

N/A

[hoangzinh]

I can reproduce it. Actually, it's hard to see the blank page on my end because the blank page will be hidden almost immediately when navigating to the secondary email. However, it's easy to reproduce if we record it and then watch it closely.

Click here to view recordings

Screen.Recording.2024-12-11.at.17.22.21.mov

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021867385191571001621