Join button is unresponsive when signing up on mWeb

m-natarajan commented 1 week ago

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.40-0 Reproducible in staging?: Y Reproducible in production?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Expensify/Expensify Issue URL: Issue reported by: @stephanieelliott Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1727245288440149

Action Performed:

Go to staging.new.expensify.com
Enter a phone number not already associated with an account and press Continue
Click Join
Expected Result:

Join button should be responsive

Actual Result:

Join button reacts but does remains on the page and does not log into staging.new.expensify.com

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?
- [ ] Android: Native
- [x] Android: mWeb Chrome
- [ ] iOS: Native
- [x] iOS: mWeb Safari
- [ ] MacOS: Chrome / Safari
- [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/9f721e18-24f2-49f6-8ba8-fb02c722b313

https://github.com/user-attachments/assets/013fb7be-bf21-49a5-9ed1-c876a03b48d4

Add any screenshot/video evidence

View all open jobs on GitHub

melvin-bot[bot] commented 1 week ago

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

nyomanjyotisa commented 1 week ago

Proposal

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

When register using VoIP phone number nothing happen

What is the root cause of that problem?

the SignUpUser API call not success due to "The provided phone number belongs to a landline or VoIP, please use your email address instead."

And the error message not displayed on the screen

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

Show error message if SignUpUser API call not success

update this code to the following

API.makeRequestWithSideEffects(SIDE_EFFECT_REQUEST_COMMANDS.SIGN_UP_USER, params, {optimisticData, successData, failureData}).then((response) => {
        if (!response) {
            return;
        }

        if (response.jsonCode === 200) {
            return;
        }

        Onyx.merge(ONYXKEYS.ACCOUNT, {errors: ErrorUtils.getMicroSecondOnyxErrorWithMessage(response.message)});
    });

Show the error message here

    const [accountOnyxData] = useOnyx(ONYXKEYS.ACCOUNT);
    const signUpErrors = accountOnyxData?.errors;
    const signUpErrorMessage = !isEmptyObject(signUpErrors) ? (Object.values(signUpErrors)[0] as string) : '';
    ...
    <Text style={[styles.formError, styles.mh5]}>{signUpErrorMessage}</Text>

What alternative solutions did you explore? (Optional)

truph01 commented 1 week ago

Proposal

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

Join button reacts but does remains on the page and does not log into staging.new.expensify.com

What is the root cause of that problem?

After clicking on "Join", we call SignUpUser API. If encountered any error, BE returns:

{
    "code": 666,
    "jsonCode": 666,
    "type": "Expensify\\Libs\\Error\\ExpError",
    "message": "The provided phone number belongs to a landline or VoIP, please use your email address instead.",
}

We just return the raw message, so FE cannot handle it and display the error message.
What changes do you think we should make in order to solve the problem?
BE should return the data such as:

{
    "code": 666,
    "jsonCode": 666,
    "type": "Expensify\\Libs\\Error\\ExpError",
    "message": "The provided phone number belongs to a landline or VoIP, please use your email address instead.",
    "onyxData": [
        {
            "onyxMethod": "merge",
            "key": "account",
            "value": {
                "errors": {
                    "error": "The provided phone number belongs to a landline or VoIP, please use your email address instead."
                }
            }
        }
    ]
}

And then, we will display that message in this:

                {serverErrorText && (
                    <FormHelpMessage
                        isError
                        message={serverErrorText}
                    />
                )}

with:

    const [account] = useOnyx(ONYXKEYS.ACCOUNT)
    const serverErrorText = useMemo(() => (account ? ErrorUtils.getLatestErrorMessage(account) : ''), [account]);

All the styles can be improved in PR. This proposal just shares the main idea.
What alternative solutions did you explore? (Optional)
Instead of returning the error data under the account key, we can return it under the credentials key.

VictoriaExpensify commented 4 days ago

I need to get someone with an iPhone to recreate this issue; everyone is offline now so I'll do this tomorrow

truph01 commented 4 days ago

@VictoriaExpensify This issue can be reproduced on all platforms.

VictoriaExpensify commented 3 days ago

Thanks @truph01 - that should reflect in the issue body. I've updated that

VictoriaExpensify commented 3 days ago

@truph01 I'm still not able to recreate this and have tried on Android mweb. Have you been able to reproduce this issue with a different phone number?

VictoriaExpensify commented 2 days ago

Bump @truph01

MelvinBot commented 1 day ago

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

Expensify / App