[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 contributors@expensify.com 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): yonghongkok2+diwdwdoiijoj2o@gmail.com
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

[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