[$250] Validate account - When validate page is opened twice, code error auto disappears

[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.75-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
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

Action Performed:

1. Go to staging.new.expensify.com
2. Sign up with a new Gmail account and do not validate it
3. Open DM with anyone
4. Click + > Pay
5. Enter amount and select currency in USD > Next
6. Change the payment method to Pay with Expensify
7. Click Pay with Expensify
8. On validate code page, click RHP back button
9. Click Pay with Expensify
10. Enter wrong magic code

Expected Result:

Incorrect code error and the code will not auto disappear

Actual Result:

Incorrect code error and the code appear very briefly and then auto disappears

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

Bug6692456_1734022590911.20241213_005134.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021867737514319581525
• Upwork Job ID: 1867737514319581525
• Last Price Increase: 2024-12-14

Issue Owner

Current Issue Owner: @

[melvin-bot]

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

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-12-12 19:03:28 UTC.

Proposal

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

Validate account - When validate page is opened twice, code error auto disappears

What is the root cause of that problem?

When the modal is open the first time the hasMagicCodeBeenSent will become true and when we open it for the second time b/c hasMagicCodeBeenSent is already true this effect will early return and firstRenderRef will not be set to true

App/src/components/ValidateCodeActionModal/index.tsx

Lines 46 to 51 in 50c1db8

	if (!firstRenderRef.current || !isVisible || hasMagicCodeBeenSent) {
	return;
	}
	firstRenderRef.current = false;
	sendValidateCode();

so the effect will run after the user inputs the code b/c now hasMagicCodeBeenSent will be false and firstRenderRef will not prevent the effect b/c it hasn't been set to true on initial render b/c hasMagicCodeBeenSent was set to true by the first opening of the modal

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

We only want to run the effect to sendValidateCode once on the firstRender of the component if the hasMagicCodeBeenSent is false. So the hasMagicCodeBeenSent should not be part of the dependency because we don't want to run the effect on it's change we only want it in the condition to avoid requesting code duplicate times

sendValidateCode();
    }, [isVisible, sendValidateCode]);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

we can make a test for ValidateCodeActionModal to assert that we are not sendValidateCode on hasMagicCodeBeenSent change after it is already rendered.

What alternative solutions did you explore? (Optional)

We can also remove sendValidateCode from the dependency

And on another note the current use of firstRenderRef will not allow sendValidateCode whenever the modal is visible because the ref is only reset on render and it doesn't re-render on isVisible change so for some use cases like in NewContactMethodPage where we display the validate modal on press of a button we might want to request code whenever modal is visible. In that case, we can avoid using a ref and only rely on isVisible and hasMagicCodeBeenSent to sendValidateCode

[truph01]

Proposal

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

• Incorrect code error and the code appears very briefly and then auto disappears

What is the root cause of that problem?

• When we open the validate modal for the first time, we call:

App/src/components/ValidateCodeActionModal/index.tsx

Line 51 in 4f76f84

sendValidateCode();

It will set the ONYXKEYS.VALIDATE_ACTION_CODE's validateCodeSent to true.

• Then we close the modal and open it again. Here, when we fulfill 6 digits by incorrect magic code, we call:

App/src/pages/settings/Wallet/VerifyAccountPage.tsx

Line 42 in 4f76f84

User.validateSecondaryLogin(loginList, contactMethod, validateCode, true);

Because the 4th param, shouldResetActionCode is true, so we set ONYXKEYS.VALIDATE_ACTION_CODE's validateCodeSent to false.

• Now, the condition:

App/src/components/ValidateCodeActionModal/index.tsx

Line 46 in 4f76f84

if (!firstRenderRef.current || !isVisible || hasMagicCodeBeenSent) {

will be false, so it calls:

App/src/components/ValidateCodeActionModal/index.tsx

Line 51 in 4f76f84

sendValidateCode();

again. Now ONYXKEYS.VALIDATE_ACTION_CODE's validateCodeSent to true.

• Because the validateCodeSent is changed from false to true, we call:

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

Line 151 in 4f76f84

inputValidateCodeRef.current?.clear();

in the useEffect in which validateCodeSent is dependence.

• Here is what the clear function do:

App/src/components/MagicCodeInput.tsx

Lines 160 to 165 in 4f76f84

	clear() {
	lastFocusedIndex.current = 0;
	setInputAndIndex(0);
	inputRefs.current?.focus();
	onChangeTextProp('');
	},

it calls:

App/src/components/MagicCodeInput.tsx

Line 164 in 4f76f84

onChangeTextProp('');

which calls clearError:

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

Line 183 in 4f76f84

clearError();

• As we can see, we are calling clearError after fulfilling the 6 digits, which leads to the behavior "code error auto disappears".

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

• We can remove logic:

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

Line 151 in 4f76f84

inputValidateCodeRef.current?.clear();

in this case. We already clear the input once we resend the validate code here:

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

Line 170 in 4f76f84

inputValidateCodeRef.current?.clear();

• So the useEffect can be removed safely or we can add the flag to only remove that useEffect if the flag value is true.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

Alternative solution 1:

• We can update the useEffect:

    useEffect(() => {
        if (!firstRenderRef.current || !isVisible) {
            return;
        }
        firstRenderRef.current = false;

        sendValidateCode();
    }, [isVisible, sendValidateCode]);

I removed the hasMagicCodeBeenSent since it is redundant. We already has firstRenderRef to make sure we only request the validate code one time each time open the modal based on comment:

I think that should be the expected behavior that each time you navigate into the modal a new validate code is sent to you

Alternative solution 2:

• We need to update the 4th param in:

App/src/pages/settings/Wallet/VerifyAccountPage.tsx

Line 42 in 4f76f84

User.validateSecondaryLogin(loginList, contactMethod, validateCode, true);

to false. It is not necessary to mark the validateCodeSent to null since we are still in the validate modal.

• Then, once we close the modal, we set the validateCodeSent to null later. So just need to add Onyx.merge(ONYXKEYS.VALIDATE_ACTION_CODE, {validateCodeSent: null}) to:

App/src/components/ValidateCodeActionModal/index.tsx

Line 39 in 4f76f84

const hide = useCallback(() => {

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[mallenexpensify]

Thanks @FitseTLT and @truph01 for the quick proposals. I'll review next week, need to get through other priority issues before EOW

[allroundexperts]

I was able to reproduce this.

[allroundexperts]

Screen.Recording.2024-12-14.at.5.27.53.AM.mov

The steps are same as in the OP.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021867737514319581525

[melvin-bot]

Current assignee @allroundexperts is eligible for the External assigner, not assigning anyone new.

[mallenexpensify]

Assigned @allroundexperts (note to self... I added 'Needs Reproduction' as a holder before adding to project. I forgot it auto-posted to #contributor-plus. This shouldn't be considered best practice because we (likely?) want to avoid BZ's NOT attempting reproduction. Need to think about more)