[HOLD for payment 2024-11-13] [HOLD for payment 2024-11-11] Validate account - Need to click "Didn't receive a magic code?" twice to restart timer

[lanitochka17]

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.56-0
Reproducible in staging?: Y
Reproducible in production?: No, New feature
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause - Internal Team

Issue found when executing PR #51663

Action Performed:

1. Go to staging.new.expensify.com
2. Sign up with a new Gmail account
3. Go to Account settings > Profile
4. Go to Contact method
5. Click on the email
6. Wait 30 seconds
7. Click "Didn't receive a magic code?" link one time

Expected Result:

Timer will restart after clicking "Didn't receive a magic code?" for the first time

Actual Result:

Timer only restarts after clicking "Didn't receive a magic code?" for the second time

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

Bug6651149_1730381279823.20241031_212358.mp4

View all open jobs on GitHub

[melvin-bot]

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

[lanitochka17]

Production:

bandicam.2024-10-31.16-45-48-403.mp4

[MuaazArshad]

Proposal

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

Validate account - Need to click "Didn't receive a magic code?" twice to restart timer

What is the root cause of that problem?

We are adding this check

 if (hasMagicCodeBeenSent && !isResent) {
            return;
        }

where hasMagicCodeBeenSent and !isResent are not being before updated with the first click.
They update after the first click, so the timer resets on the second click.

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

This should be removed from

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Lines 158 to 160 in 6c33bba

	if (hasMagicCodeBeenSent && !isResent) {
	return;
	}

since we aren’t including it on the sign-in page.

App/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx

Lines 155 to 160 in 6c33bba

	const resendValidateCode = () => {
	User.resendValidateCode(credentials?.login ?? '');
	inputValidateCodeRef.current?.clear();
	// Give feedback to the user to let them know the email was sent so that they don't spam the button.
	setTimeRemaining(CONST.REQUEST_CODE_DELAY);
	};

The function should run without the condition since there’s no button to click after the code is resent.

What alternative solutions did you explore? (Optional)

[ShridharGoel]

Edited by proposal-police: This proposal was edited at 2024-11-01 03:15:39 UTC.

Proposal

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

Validate account - Need to click "Didn't receive a magic code?" twice to restart timer.

What is the root cause of that problem?

In the below condition, we check for hasMagicCodeBeenSent and !isResent.

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Lines 158 to 160 in 6763f1a

	if (hasMagicCodeBeenSent && !isResent) {
	return;
	}

This is faulty because isResent will become true on using the resend option for the first time, which will eventually lead to no resending on the first click. But the second time, hasMagicCodeBeenSent is false which makes the whole condition false and the code gets sent.

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

To fix this, we need to change the condition to this:

if (hasMagicCodeBeenSent && isResent) {
    return;
}

We also need to update isResent value here, when the timer completes:

useEffect(() => {
    if (timeRemaining > 0) {
        timerRef.current = setTimeout(() => {
            setTimeRemaining(timeRemaining - 1);
        }, 1000);
+    } else {
+       setIsResent(false);
+    }
    return () => {
        clearTimeout(timerRef.current);
    };
}, [timeRemaining]);

We can also evaluate if we need to implement some changes in the way this system works on the sign in page.

[daledah]

Proposal

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

Timer only restarts after clicking "Didn't receive a magic code?" for the second time

What is the root cause of that problem?

In resentValidateCode, we check the following condition:

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Lines 158 to 160 in 6763f1a

	if (hasMagicCodeBeenSent && !isResent) {
	return;
	}

However, resentValidateCode is called before isResent becomes true:

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Lines 233 to 234 in 6763f1a

	resendValidateCode();
	setIsResent(true);

Results in the resend logic not being called the first time.

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

Instead of state, make isResent a ref:

const isResentRef = useRef(false)

And update related logics:

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Lines 158 to 161 in 6763f1a

	if (hasMagicCodeBeenSent && !isResent) {
	return;
	}

        if (hasMagicCodeBeenSent && !isResentRef.current) {
            return;
        }
        isResentRef.current = false;

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Lines 232 to 235 in 6763f1a

	onPress={() => {
	resendValidateCode();
	setIsResent(true);
	}}

    onPress={() => {
        isResentRef.current = true;
        resendValidateCode();
    }}

What alternative solutions did you explore? (Optional)

[Beamanator]

Thanks your proposals so far, everyone! Can anyone find which PR may have caused this?

[ShridharGoel]

#51663

[hungvu193]

cc @getusha

[ShridharGoel]

Any plans to make this external?

[hungvu193]

It's still in the regression period so I think @getusha will handle it.

@Beamanator Please assign me and @getusha.

[ShridharGoel]

You can have a look at my proposal: #51797 (comment)

It might help.

[mountiny]

Thanks! @getusha and @hungvu193 should handle this one

[Beamanator]

thanks @vitHoracek :D

[mountiny]

NoProblem @alexBeaman

[Beamanator]

Merged & CPing

[Beamanator]

Seems to be working in staging! Checking it off!

[melvin-bot]

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

• [CP Staging] fix: remove unnecessary condition #51848

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

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

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

[melvin-bot]

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

• [CP Staging] fix: remove unnecessary condition #51848

If no regressions arise, payment will be issued on 2024-11-13. 🎊

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

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

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @twisterdotcom you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[melvin-bot]

Payment Summary

Upwork Job

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

BugZero Checklist (@twisterdotcom)

• 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