[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 contributors@expensify.com 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): wjiojdoowjojwodj@gmail.com 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: @Christinadobrzyn

[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: isha.kakkad.invest@gmail.com 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]