[$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

Issue Owner

Current Issue Owner: @ZhenjaHorbach

[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-03 10:07:29 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?

Since <ValidateCodeActionModal> has required methods for functioning validate code form, we should move re-write the methods on ContactMethodDetailsPage and replace <ValidateCodeActionModal> with <ValidateCodeForm>. Details are like below.

setIsValidateCodeActionModalVisible of below makes getItem() show when closing the modal, so we delete this line. It is written for the modal to activate close animation.

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

Line 151 in 483d287

useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));

We bring these hide function into onBackButtonPress={hide} for preparing to send validate code only once and for hiding error message:

App/src/components/ValidateCodeActionModal/index.tsx

Lines 39 to 43 in 83aae80

	const hide = useCallback(() => {
	clearError();
	onClose?.();
	firstRenderRef.current = true;
	}, [onClose, clearError]);

We bring these from useEffect into details page to send validate code only once:

App/src/components/ValidateCodeActionModal/index.tsx

Lines 45 to 52 in 83aae80

	useEffect(() => {
	if (!firstRenderRef.current || !isVisible || hasMagicCodeBeenSent) {
	return;
	}
	firstRenderRef.current = false;
	sendValidateCode();
	// We only want to send validate code on first render not on change of hasMagicCodeBeenSent, so we don't add it as a dependency.

Then the code in details page would look like:

    const hide = useCallback(() => {
        User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')                                 
        Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
        firstRenderRef.current = true;  
    }, []) 
  
    const isVisible = isValidateCodeActionModalVisible && !loginData?.validatedDate && !!loginData;
  
    useEffect(() => {
        setIsValidateCodeActionModalVisible(!loginData?.validatedDate);
        if (!firstRenderRef.current || isVisible || loginData?.validateCodeSent) {  
            return;
        }
        User.requestContactMethodValidateCode(contactMethod)
        firstRenderRef.current = false;
      }, [loginData?.validatedDate, loginData?.errorFields?.addedLogin]);
  

<ScrollView> should wrap <ValidateCodeForm/> with themeStyles.flex1 for the validate button placed in bottom:

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

<ValidateCodeForm/> 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.

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

We should replace <ValidateCodeActionModal> with <ValidateCodeForm>

Then the fix code would look like:

                {!loginData?.validatedDate
                <View style={[themeStyles.ph5, themeStyles.mt3, themeStyles.mb5, themeStyles.flex1]}>
                    <Text style={[themeStyles.mb3]}>{translate('contacts.enterMagicCode', {contactMethod})}</Text>
                    <ValidateCodeForm
                        validateCodeAction={validateCodeAction}
                        validatePendingAction={loginData.pendingFields?.validateCodeSent}
                        validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
                        handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode)}
                        sendValidateCode={() => User.requestContactMethodValidateCode(contactMethod)}
                        clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
                        buttonStyles={[themeStyles.justifyContentEnd, themeStyles.flex1]}
                        ref={validateCodeFormRef}
                        hasMagicCodeBeenSent={hasMagicCodeBeenSent}
                    />
                </View>
                }

You can browse test code here.

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ZhenjaHorbach (External)

[ZhenjaHorbach]

@hoangzinh
Do you want to take it ?

[hoangzinh]

yes, I do @ZhenjaHorbach ❤️. @MitchExpensify can you assign this issue to me as a C+ as I was able to reproduce it? Thank you.

[daledah]

Proposal

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

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

What is the root cause of that problem?

• When navigating to the ContactMethodDetailsPage, it transitions with a right-to-left swipe animation. During this time, only the HeaderWithBackButton is visible, as shown in the video.

• While the screen transition animation is ongoing, a modal is displayed if the condition specified in the following logic is met:

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

Line 265 in f8f12c2

isVisible={isValidateCodeActionModalVisible && !loginData.validatedDate && !!loginData}

• This explains why a blank screen briefly appears before navigating to the code entry page.

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

• Instead of showing a blank screen, we should display a loading indicator to prevent user confusion. This way, users understand that the data and UI are loading and will be ready shortly. We can do it by using:

            {shouldShowModal ? (
                <FullScreenLoadingIndicator />
            ) : (
                <HeaderWithBackButton
                    title={formattedContactMethod}
                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo))}
                />
            )}

instead of:

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

Lines 243 to 246 in f8f12c2

	<HeaderWithBackButton
	title={formattedContactMethod}
	onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo))}
	/>

• Note that shouldShowModal = isValidateCodeActionModalVisible && !loginData.validatedDate && !!loginData

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

What alternative solutions did you explore? (Optional)

[melvin-bot]

@MitchExpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MitchExpensify]

Done, what do you think of the proposal above, @hoangzinh ?

[hoangzinh]

Ah I'm reviewing proposals. Btw, @MitchExpensify could you help to remove Needs Reproduction
retest-weekly and add back Help Wanted label? Thank you.

[melvin-bot]

@hoangzinh, @MitchExpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[hoangzinh]

Same as above. Awaiting for proposals

[melvin-bot]

@hoangzinh, @MitchExpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[hoangzinh]

Still awaiting for proposals

[jacobkim9881]

Proposal

Proposal updated

[jacobkim9881]

Can you share your recording result? It seems we lost the screen transition with that approach.

@hoangzinh Could you please to check? I have edited my proposal and here is recording result:

expensify-test5-bug-2025-01-03_19.12.58.mp4

[hoangzinh]

@jacobkim9881 looks promise. Btw, the reason why we want to use ValidateCodeActionModal is that we would like to centralize the way we use CodeForm. If we move/dup some logic of ValidateCodeActionModal to ContactMethodDetailsPage, we are probably in the wrong way. Is it possible to do somehow we can either use CodeForm with modal (ValidateCodeActionModal) or CodeForm without modal?

[jacobkim9881]

@hoangzinh I haven't even imagined that logics from modal could make issues. Let me check if any logic bothers the details page.

[melvin-bot]

@hoangzinh @MitchExpensify this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[hoangzinh]

I haven't even imagined that logics from modal could make issues. Let me check if any logic bothers the details page.

@jacobkim9881 no, I mean if we copy some logic of ValidateCodeActionModal to ContactMethodDetailsPage, then if we update anything in ValidateCodeActionModal, it won't affect ContactMethodDetailsPage or we're not aware there is a clone/same logic in ContactMethodDetailsPage that need to be updated too.

[jacobkim9881]

it won't affect ContactMethodDetailsPage

@hoangzinh I understood. Then I think we can make the logic as a hook and put it into src/hooks. Then makes other modal use the hook too for the logic.

[hoangzinh]

Another option is we can somehow make another version of ValidateCodeActionModal without Modal wrapper, and somehow share logic of

App/src/components/ValidateCodeActionModal/index.tsx

Lines 33 to 55 in a530d9f

	const themeStyles = useThemeStyles();
	const firstRenderRef = useRef(true);
	const validateCodeFormRef = useRef<ValidateCodeFormHandle>(null);
	const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
	const hide = useCallback(() => {
	clearError();
	onClose?.();
	firstRenderRef.current = true;
	}, [onClose, clearError]);
	useEffect(() => {
	if (!firstRenderRef.current || !isVisible || hasMagicCodeBeenSent) {
	return;
	}
	firstRenderRef.current = false;
	sendValidateCode();
	// We only want to send validate code on first render not on change of hasMagicCodeBeenSent, so we don't add it as a dependency.
	// eslint-disable-next-line react-compiler/react-compiler
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [isVisible, sendValidateCode]);

among them. Then other pages have same issue can just plug&play this new version of ValidateCodeActionModal

[jacobkim9881]

@hoangzinh So a component to be used w/o modal? It will share validate code form and will be placed in details page. If I understood then let me try to code.

[hoangzinh]

Yeah, what do you think? The main point is we can reuse in other pages if they have same issue

[jacobkim9881]

@hoangzinh Then the new component will have back button and validate form. It should be switchable in details page with menu items.

[hoangzinh]

or it can be a pure component that can be inject into any existing page/screen

[jacobkim9881]

Yes. A pure component can be placed in any page. In the other hand, Modal or header with back button component bothers to be placed in any page/screen.

[hoangzinh]

@jacobkim9881 yeah. LMK when you have a working solution for those approaches, also update your proposal with either of them.

[jacobkim9881]

If we move/dup some logic of ValidateCodeActionModal to ContactMethodDetailsPage, we are probably in the wrong way.

About this comment,

We bring these hide function into onBackButtonPress={hide} for preparing to send validate code only once and for hiding error message:

I think I should write my proposal better. The methods in hide are the processes written in details page. These code

    const hide = useCallback(() => {
        User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')
        Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
        firstRenderRef.current = true;
    }, [backTo, contactMethod, validateLoginError])

are necessary for details page but I don't think it will be needed in the modal page. So it should be written in details page only.

[hoangzinh]

Yeah @jacobkim9881. So your current approach is moving "hide" and "sendCode" from ValidateCodeActionModal to ContactMethodDetailsPage, don't you? If yes, then I mean if we can somehow, in ContactMethodDetailsPage, we just need to plug&play without the need of worrying "hide" and "sendCode" logic, let's say the new component is ValidateCodeActionWithoutModal,

                <ValidateCodeActionWithoutModal
                    ...
                    clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
                    onClose={() => {
                        Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
                        setIsValidateCodeActionModalVisible(false);
                    }}
                    sendValidateCode={() => User.requestContactMethodValidateCode(contactMethod)}
                    ...
                />

[jacobkim9881]

ContactMethodDetailsPage(updated 2025-01-15)
ValidateCodeActionWithoutModal(updated 2025-01-15)

While fixing I have this issue again. As a fix I have setHasMagicCodeBeenSent to true on onEntryTransitionEnd. While transitioning relative functions should be executed. Let me investigate.

Hiding trigger is added. When closing the modal hide logic should be activated in the core component:

It could be redundant for setIsValidateCodeActionModalVisible. However setIsValidateCodeActionModalVisible could be bothered by useEffect. In the other hand, setIsCloseModal only be set when useBeforeRemove.

[melvin-bot]

@hoangzinh, @MitchExpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[jacobkim9881]

@hoangzinh About the transition freezed I found one could be alternative. It is adding a option into <FocusTrap>. Whole modals are wrapped with <ScreenWrapper>. It has <FocusTrap> inside which usually lets focusing fastly set for modals. The problem we have is that <ValidateCodeForm> takes focus too fast to stop transition animation. However according to "animated dialog" in focus-trap-react, internal components get focus w/o losing transition. So I have put the focus trap options into <FocusTrap> from this:

                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);
                },

It would look like this.

As I have tested, it could let putting numbers a bit slow in the code form. Here is how to test:

1. Open the modal.
2. As soon the modal open, type number as fast.
3. Do this test in d53884-4 and main branch both.
4. Check the difference of performance.