[HOLD for payment 2024-12-05] Verify account - No right side window animation when 2FA setup is dismissed

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.60-0 Reproducible in staging?: Y Reproducible in production?: N/A - new feature, doesn't exist in prod Email or phone of affected tester (no customers): [email protected] Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with a new Gmail account.
3. Go to Settings > Security > Two-factor authentication.
4. Dismiss the RHP.

Expected Result:

There will be animation when Validate your account RHP from 2FA setup is dismissed.

Actual Result:

There is no animation (side window doesn't slide close like on other pages) when Validate your account RHP from 2FA setup is dismissed.

Workaround:

Гтлтщцт

Platforms:

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

Screenshots/Videos

https://github.com/user-attachments/assets/fb7d41ec-7ad3-4b76-86a5-47706005d2ac

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @hungvu193

[melvin-bot[bot]]

Triggered auto assignment to @Christinadobrzyn (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.

[melvin-bot[bot]]

Triggered auto assignment to @deetergp (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot[bot]]

💬 A slack conversation has been started in #expensify-open-source

[github-actions[bot]]

:wave: Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[deetergp]

I don't think this is a blocker since it is a new feature and isn't breaking any existing functionality.

[Christinadobrzyn]

The steps in the OP verify the issue but I'm not sure if this should be a priority. Asking the team. https://expensify.slack.com/archives/C05LX9D6E07/p1731385484769539

[bernhardoj]

Edited by proposal-police: This proposal was edited at 2024-11-12 04:57:55 UTC.

Proposal

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

No animation when closing the 2fa validate code page.

What is the root cause of that problem?

The validate code itself is a modal and it will be visible as long as the user is not validated. https://github.com/Expensify/App/blob/64cb4ee92b1f4c66e5deb96e23caf47e25423c00/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx#L164-L176

When we close the page, the modal stays visible until the 2FA page is closed (by TwoFactorAuthActions.quitAndNavigateBack).

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

We need to store the modal visibility state to a state.

const [isModalVisible, setIsModalVisible] = useState(!isUserValidated);

Then use it as the isVisible prop. https://github.com/Expensify/App/blob/64cb4ee92b1f4c66e5deb96e23caf47e25423c00/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx#L167

isVisible={isModalVisible}

And we can update it whenever isUserValidated is updated.

useEffect(() => {
    setIsModalVisible(!isUserValidated);
}, [isUserValidated]);

Then, we can set it to false when closing the modal.

onClose={() => {
    setIsModalVisible(false)
    TwoFactorAuthActions.quitAndNavigateBack(backTo)
}}

[mountiny]

@deetergp feel free to assign me if you want as I reviewed the offending PR, happy to take over

[mountiny]

@hungvu193 as a C+ on the offending PR, can you please review the proposal here?

[hungvu193]

Yeah surre

[ishakakkad]

Proposal

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

Animation is not showing when closing two factor authentication modal.

What is the root cause of that problem?

2FA modal only shows when isUserValidated = false. In case we close the modal without authenticate isUserValidated is always false so it does not animate it. https://github.com/Expensify/App/blob/64cb4ee92b1f4c66e5deb96e23caf47e25423c00/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx#L164-L167

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

To fix this problem we need to make sure as long as close event is fire modal will hidden. To fix this we need to introduce new state variable.

const [showValidateCodeModal, setShowValidateCodeModal] = useState(false);

And pass state value as props in ValidateCodeActionModal, so once state value set to false modal will be closed. https://github.com/Expensify/App/blob/64cb4ee92b1f4c66e5deb96e23caf47e25423c00/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx#L167 Replace with

isVisible={showValidateCodeModal}

Set showValidateCodeModal to false when we close modal. To make it cleaner extract modal close logic into handler. https://github.com/Expensify/App/blob/64cb4ee92b1f4c66e5deb96e23caf47e25423c00/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx#L175 Replace with

onClose={handleValidateCodeModalClose}

const handleValidateCodeModalClose = () => {
    setShowValidateCodeModal(false);
    TwoFactorAuthActions.quitAndNavigateBack(backTo);
};

Update showValidateCodeModal value whenever isUserValidated is changed. We already have useEffect which runs when isUserValidated value changed. So we can use same effect. https://github.com/Expensify/App/blob/64cb4ee92b1f4c66e5deb96e23caf47e25423c00/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx#L55-L62 Replace with

useEffect(() => {
    setShowValidateCodeModal(!isUserValidated);
    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
    if (account?.requiresTwoFactorAuth || account?.recoveryCodes || !isUserValidated) {
        return;
    }
    Session.toggleTwoFactorAuth(true);
    // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- We want to run this when component mounts
}, [isUserValidated]);

What alternative solutions did you explore? (Optional)

NA

[melvin-bot[bot]]

📣 @ishakakkad! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[ishakakkad]

Contributor details Your Expensify account email: [email protected] Upwork Profile Link: https://www.upwork.com/freelancers/~018e905fce69c8896f

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[Christinadobrzyn]

Just checking in on this, @hungvu193 is there a proposal we're already going with for this fix or are you reviewing these new proposals?

[hungvu193]

Just checking in on this, @hungvu193 is there a proposal we're already going with for this fix or are you reviewing these new proposals?

I'm still reviewing proposals

[mountiny]

@hungvu193 any updates?

[hungvu193]

Sorry not yet. I've been a bit under the water today. I'll try to review this weekend

[hungvu193]

@ishakakkad Your proposal is a dupe of @bernhardoj proposal. Please checkout our contributing guides here before posting proposal. Ty.

Let's go with @bernhardoj 's proposal.

🎀 👀 🎀 C+ reviewed.

[melvin-bot[bot]]

Current assignee @mountiny is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[bernhardoj]

PR is ready

cc: @hungvu193

[melvin-bot[bot]]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot[bot]]

The solution for this issue has been :rocket: deployed to production :rocket: in version 9.0.67-9 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pull/52741

If no regressions arise, payment will be issued on 2024-12-05. :confetti_ball:

For reference, here are some details about the assignees on this issue:

• @hungvu193 requires payment through NewDot Manual Requests
• @bernhardoj requires payment through NewDot Manual Requests

[melvin-bot[bot]]

@hungvu193 @Christinadobrzyn @hungvu193 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[Christinadobrzyn]

@hungvu193 can you let us know about a regression test? TY!

[hungvu193]

Regression Tests:

2FA Flow on Web:

1. Login with a brand new account.
2. Go to Settings => Security => Two factor authentication.
3. Click outside to dismiss the modal.
4. Verify that the modal is dismissed with animation.

Other flows using ValidateCodeActionModal: Prerequisite: Using your Android Chrome browser

1. Login with a brand-new account.
2. Go to any flow that needs validate code (VerifyContactMethod or 2FA or Add Bank Account etc...)
3. Once the ValidateCode modal appears, press the ack button.
4. Verify that the modal is closed with animation.

Do we 👍 or 👎 ?

[hungvu193]

@mountiny I'm not sure if I'm eligible to be paid for this issue. During PR process we realized this issue also happened every where on mWeb Chrome and we fixed it as well.

[mountiny]

@hungvu193 to confirm, you have been a c+ on the offending PR, right? then I think we should not really issue a payment here. Or am I misunderstanding your question?

[melvin-bot[bot]]

Payment Summary

Upwork Job

• Reviewer: @hungvu193 owed $250 via NewDot
• Reviewer: @bernhardoj owed $250 via NewDot

BugZero Checklist (@Christinadobrzyn)

• [x] I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• [x] I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants//hired)
• [ ] I have paid out the Upwork contracts or cancelled the ones that are incorrect
• [x] I have verified the payment summary above is correct

[hungvu193]

@hungvu193 to confirm, you have been a c+ on the offending PR, right? then I think we should not really issue a payment here. Or am I misunderstanding your question?

Ah I mean, while working on the PR, we found out the the right side animation didn't work on mWeb (which is not a regression from the PR that I reviewed) and we fixed it as well.