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.

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

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?

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

Instead of using <ValidateCodeActionModal>, we can replace it with <ValidateCodeForm>

Then the fix code would look like:

                <View style={[themeStyles.ph5, themeStyles.mt3, themeStyles.mb7, 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>

What alternative solutions did you explore? (Optional)

N/A

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.

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

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

@hoangzinh
Do you want to take it ?

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

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:

• 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:

• 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)

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

Done, what do you think of the proposal above, @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.

@jacobkim9881 Thanks for posting a proposal. Can you share your recording result? It seems we lost the screen transition with that approach. Btw, we used to use ValidateCodeForm previously, but it has been replaced by ValidateCodeActionModal after this PR #49445

@daledah Thanks for posting a proposal. Can you also share your recording result? I think your solution would cause a regression bug after validating a contact, it would show a loading indicator forever. Btw, can you also elaborate the condition here is delayed to be true? (isValidateCodeActionModalVisible comes from useState and loginData comes from Onxy, however, we already show a loading indicator here when data is loading from Onyx)

I think your solution would cause a regression bug after validating a contact, it would show a loading indicator forever

I tried applying my solution and it works properly. After validating a contact, there is no loading indicator is shown since we will call:

onClose. And refer to my solution, we only display the loading indicator if the modal is showing:

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

Here is the video:

can you also elaborate the condition here is delayed to be true? (isValidateCodeActionModalVisible comes from useState and loginData comes from Onxy, however, we already show a loading indicator here when data is loading from Onyx)

What do you mean by "delayed to be true" here?

I mean it should be true when we render ValidateCodeActionModal component. Is there any case it could be false (given we're in the context of an unverified 2nd contact method)?

Thanks for posting a proposal. Can you share your recording result?

It seems the issue isn't reproducible from my side.

I am still able to reproduce it

I mean it should be true when we render ValidateCodeActionModal component. Is there any case it could be false (given we're in the context of an unverified 2nd contact method)?

I believe this occurs because, in React, state updates are asynchronous, and the rendering process doesn't happen immediately after the state or props change. React batches updates for performance optimization, which can sometimes cause a slight delay in reflecting the updated data in the UI.

@daledah can you share a recording with console.log of isValidateCodeActionModalVisible and loginData? I would like to check which data is asynchronous updated as you mentioned. Thank you.

Besides that, I think your solution isn't looking good. For example, after verifying the account, there is a redundant page behind when App goBack to the contacts page

can you share a recording with console.log of isValidateCodeActionModalVisible and loginData? I would like to check which data is asynchronous updated as you mentioned. Thank you.

• Here is the video:

Besides that, I think your solution isn't looking good. For example, after verifying the account, there is a redundant page behind when App goBack to the contacts page

• Thanks. I think this bug is not a regression from my solution but I am investigating the solution to address it.

It seems we lost the screen transition with that approach.

@hoangzinh This cause the transition issue

hasMagicCodeBeenSent={hasMagicCodeBeenSent}

of

of

But the code form's focus() is already used here

So I have deleted hasMagicCodeBeenSent.

Btw, we used to use ValidateCodeForm previously, but it has been replaced by ValidateCodeActionModal after this PR #49445
@hoangzinh Then reverting the details page of the PR would be better.

@daledah based on your recording, it seems isValidateCodeActionModalVisible is always true in this case, isn't it?

Then reverting the details page of the PR would be better.

@jacobkim9881 sorry, what would you like to revert?

@hoangzinh I meant reverting this:

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

@jacobkim9881 I'm unsure of that way. The reason why we changed to use ValidateCodeActionModal is because of

Let's use this new component and remove any other usages that could lead people to reintroduce the wrong usage/ component.

As described in the issues' description #49270

Let's use this new component and remove any other usages that could lead people to reintroduce the wrong usage/ component.

@hoangzinh I understood we can't revert.

It seems there are 2 <ValidateCodeForm> at @components/ValidateCodeActionModal and at src/pages/settings/Profile/Contacts each.

Issue not reproducible during KI retests. (First week)

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

Not overdue, trying to reproduce

@hoangzinh @MitchExpensify this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

I can still reproduce this bug by slow-playing recording