[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
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6661746_1731353635975.20241112_032620.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @Christinadobrzyn

[melvin-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]

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

[melvin-bot]

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

[github-actions]

👋 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.

App/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx

Lines 164 to 176 in 64cb4ee

	<ValidateCodeActionModal
	title={translate('contacts.validateAccount')}
	description={translate('contacts.featureRequiresValidate')}
	isVisible={!isUserValidated}
	hasMagicCodeBeenSent={hasMagicCodeBeenSent}
	validatePendingAction={loginData?.pendingFields?.validateCodeSent}
	sendValidateCode={() => User.requestValidateCodeAction()}
	handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode)}
	validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
	clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
	onModalHide={() => {}}
	onClose={() => TwoFactorAuthActions.quitAndNavigateBack(backTo)}
	/>

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.

App/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx

Line 167 in 64cb4ee

isVisible={!isUserValidated}

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

[bernhardoj]

PR is ready

cc: @hungvu193

[melvin-bot]

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

[melvin-bot]

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

• Fix no close animation of 2fa validate screen #52741

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

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]

@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]

Payment Summary

Upwork Job

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

BugZero Checklist (@Christinadobrzyn)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• 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
• 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.

[mountiny]

ok sounds like $250 to @hungvu193 too

[Christinadobrzyn]

Regression test - https://github.com/Expensify/Expensify/issues/450960

Payment summary here - #52339 (comment)

Feel free to submit a NewDot payment request @hungvu193 and @bernhardoj

[bernhardoj]

Requested in ND.

[Christinadobrzyn]

DMd @hungvu193 to request payment in ND. Going to close this out.

[hungvu193]

Thanks for reminding me. I've just requested on ND

[JmillsExpensify]

$250 approved for @bernhardoj via the summary

[garrettmknight]

$250 approved for @hungvu193