[HOLD for payment 2024-09-25] [$250] Contact Method - Magic code doesn't arrive unless user requests again

[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: 1.4.81-1 Reproducible in staging?: Y Reproducible in production?: N 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): berhanesarah.testing+ftu@gmail.com Issue reported by: Applause - Internal Team

Action Performed:

1. Login to staging as a new user
2. Go to profile settings-->Contact Methods
3. Wait for the magic code to arrive

Expected Result:

Magic code is sent to the email

Actual Result:

Magic code is not sent to the email unless the user clicks "Didn't receive a magic code?"

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/78819774/1c0ede88-1b11-4337-9c35-90ff0eab2fcc

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0107ec935581e086f0
• Upwork Job ID: 1800154329461508272
• Last Price Increase: 2024-08-22
• Automatic offers:
• wildan-m | Contributor | 103693808

Issue Owner

Current Issue Owner: @allroundexperts

[melvin-bot[bot]]

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

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

[lanitochka17]

@grgia FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @allroundexperts (External)

[mountiny]

Marking as external so we might get help from contributors sooner

[TheGithubDev]

Proposal to Fix the Issue: "Contact Method - Magic Code Doesn't Arrive Unless User Requests Again"

Problem Description: When a new user logs into the staging environment and navigates to profile settings to add a contact method, the magic code intended for verification does not arrive in their email unless the user manually clicks "Didn't receive a magic code?".

Steps to Reproduce:

1. Login to the staging environment as a new user.
2. Go to profile settings and then to "Contact Methods".
3. Wait for the magic code to arrive.
4. Observe that the magic code is not sent to the email.

Expected Result: The magic code should be automatically sent to the user's email without requiring the user to click "Didn't receive a magic code?".

Actual Result:

The magic code is only sent after the user clicks "Didn't receive a magic code?".

Technical Explanation and Proposed Solution:

1. Identify the Function Responsible for Sending the Magic Code:

   • Locate the function within the React Native codebase that handles the generation and dispatch of the magic code email. This is typically part of the user authentication or profile management modules.

2. Review and Modify the Trigger Mechanism:

   • The current implementation likely triggers the magic code dispatch only when the user manually requests it. We will adjust this to ensure the code is sent automatically upon accessing the "Contact Methods" section.

3. Implement Automatic Dispatch of the Magic Code:

   • Modify the logic to automatically call the magic code dispatch function when the "Contact Methods" component is rendered.

   Current Implementation:

   // Function triggered by button click
   const resendMagicCode = () => {
      // Logic to send the magic code
   };

   Proposed Implementation:

   useEffect(() => {
      // Automatically send the magic code when the component mounts
      sendMagicCode();
   }, []);
   
   const sendMagicCode = () => {
      // Logic to send the magic code
   };

4. Ensure Robust State Management:

   • Verify that state management around the magic code dispatch is handled to prevent duplicate triggers and ensure only one code is sent per user action.

I came across this project on Upwork and would like to offer the above solution. I have outlined a technical explanation to address this issue as mentioned.

I can't wait to dive into this amazing project and see how I can help out with other tasks too.

Looking forward to making a positive impact! Regards.

[melvin-bot[bot]]

📣 @TheGithubDev! 📣 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>

[TheGithubDev]

Contributor details Your Expensify account email: thecoolrayyan@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~0184d64a438e2e09d2

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[luacmartins]

I wasn't able to reproduce this in staging. Adding a new contact method sent me the email.

[luacmartins]

Gonna demote to NAB

[allroundexperts]

@lanitochka17 Is this still happening? Seems to be fixed for me as well.

[lanitochka17]

Issue is still reproducible

https://github.com/Expensify/App/assets/78819774/93e2a4ca-8f00-49aa-8c26-2757af1f0d3b

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot[bot]]

@allroundexperts, @grgia Huh... This is 4 days overdue. Who can take care of this?

[grgia]

@lanitochka17 is this still occurring on staging?

[grgia]

Closing for now as I cannot reproduce

[lanitochka17]

Issue is still reproducible on the latest build 9.0.23-0

https://github.com/user-attachments/assets/07120aa2-f4c2-4e98-81ec-3a283c2878bf

[wildan-m]

Edited by proposal-police: This proposal was edited at 2023-10-02T14:22:00Z.

Proposal

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

Magic code will not be sent unless the user requests it again.

What is the root cause of that problem?

We are not sending any request code unless it's manually pressed

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

Modify this useEffect to call User.requestContactMethodValidateCode when validatedDate empty and validateCodeSent is false.

src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx

    useEffect(() => {
        if (isEmptyObject(loginData)) {
            return;
        }

        User.resetContactMethodValidateCodeSentState(contactMethod);

        // initialCodeValidateRequestedRef is required to prevent duplicate calls in React strict mode 
        if (!loginData?.validatedDate && !loginData?.validateCodeSent && !initialCodeValidateRequestedRef.current) {
            User.requestContactMethodValidateCode(contactMethod);
            initialCodeValidateRequestedRef.current = true;
            return;
        }
        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
    }, []);

To prevent the "linkHasBeenResent" text from appearing on the initial page load, we can add a new state called "validateCodeSentIsPressed" to display the message only after the resent link has been pressed at least once.

src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.tsx

                        <Text style={[StyleUtils.getDisabledLinkStyles(shouldDisableResendValidateCode)]}>{translate('validateCodeForm.magicCodeNotReceived')}</Text>
                    </PressableWithFeedback>
                    {hasMagicCodeBeenSent && validateCodeSentIsPressed && (
                        <DotIndicatorMessage
                            type="success"
                            style={[styles.mt6, styles.flex0]}

Branch for this solution.

What alternative solutions did you explore? (Optional)

Alternative 1

If we want to keep the user to trigger the validationCode manually, we can add new screen that contain the send validation button or at least change Didn't receive a magic code? to something Send magic code and replace the text to Didn't receive a magic code? when the button pressed at least once

Alternative 2

Call requestContactMethodValidateCode when we navigate to ROUTES.SETTINGS_CONTACT_METHOD_DETAILS.getRoute

src/components/ValidateAccountMessage.tsx

                <TextLink
                    fontSize={variables.fontSizeLabel}
                    onPress={() => {
                        const loginName = loginNames?.[0]
                        const login = loginList?.[loginName] ?? {};
                        if (!login?.validatedDate && !login?.validateCodeSent) {
                            User.requestContactMethodValidateCode(loginName);
                        }

src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx

                <MenuItem
                    title={menuItemTitle}
                    description={description}
                    onPress={() => {
                        const login = loginList?.[loginName] ?? {};
                        if (!login?.validatedDate && !login?.validateCodeSent) {
                            User.requestContactMethodValidateCode(loginName);
                        }

Ensure re-sent message only shown when pressed at least once src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.tsx

   const [validateCodeSentIsPressed, setValidateCodeSentIsPressed] = useState(false);

...
    const resendValidateCode = () => {
        User.requestContactMethodValidateCode(contactMethod);
        inputValidateCodeRef.current?.clear();
        setValidateCodeSentIsPressed(true);
    };

...
                    {hasMagicCodeBeenSent && validateCodeSentIsPressed && (
                        <DotIndicatorMessage
                            type="success"

Branch for this solution

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[allroundexperts]

@wildan-m's proposal looks good to me. The RCA is straightforward, and the solution makes sense as well.

🎀 👀 🎀 C+ reviewed

[melvin-bot[bot]]

Triggered auto assignment to @mountiny, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[mountiny]

@allroundexperts @wildan-m Why can we not make the api request when user clicks the button that navigates them? it feels like a better spot for this api call than the useEffect. But both work

[melvin-bot[bot]]

📣 @wildan-m 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[wildan-m]

@mountiny I think that's better approach. We don't need to handle useEffect strict mode with that approach.

My proposal updated I've added it as my 2nd alternative

@allroundexperts I will create the PR with that solution. Let me know if we still want to use the useEffect approach.

[wildan-m]

@allroundexperts The PR is ready for review. https://github.com/Expensify/App/pull/48047

[melvin-bot[bot]]

This issue has not been updated in over 15 days. @wildan-m, @allroundexperts, @mountiny, @grgia eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[mountiny]

$250 to @wildan-m and to @allroundexperts

[melvin-bot[bot]]

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

[mountiny]

cc @greg-schroeder

[greg-schroeder]

Payment summary:

Contributor: @wildan-m - $250 - will be paid via Upwork on 9/25 C+: @allroundexperts - $250 - can make a manual request via ND on 9/25

[melvin-bot[bot]]

@wildan-m, @greg-schroeder, @allroundexperts, @mountiny, @grgia Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[greg-schroeder]

This isn't overdue

[mountiny]

@wildan-m @allroundexperts have you been paid? Can we close?

[allroundexperts]

I have noted it down. We can close it out.

[wildan-m]

@mountiny not yet

[greg-schroeder]

Well, payment date is today, so I'm doing it now. :)

[greg-schroeder]

Paid

[JmillsExpensify]

$250 approved for @allroundexperts