[$500] Compose-Profile in header is shown when tapping on deep link

[izarutskaya]

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.11
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: Applause-Internal Team
Slack conversation: @

Action Performed:

1. Launch app
2. From slack tap on this deep link
   https://staging.new.expensify.com/a/hello

Expected Result:

When user taps on this deep link, "profile" must not be shown as title in header.

Actual Result:

When user taps on this deep link, "profile" is shown as title in header.

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6310018_1702360305937.pro_ile_header.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e3a5ca00ba4560c8
• Upwork Job ID: 1734517364121460736
• Last Price Increase: 2023-12-12

[melvin-bot]

Triggered auto assignment to @sonialiap (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[ZhenjaHorbach]

Why shouldn't the Profile be shown here?)
All profile pages begin with /a/.......

But if we need to change the title if the profile is not valid, then ...

Proposal

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

Compose-Profile in header is shown when tapping on deep link

What is the root cause of that problem?

We show profile text by default

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

Since instead of the NoteFound wrapper we use a separate component we can update the title and add the same condition using shouldShowBlockingView (Also we can use ValidationUtils.isValidAccountRoute(accountID). Because if we don’t have a valid ID, then we wait NotFound anyway )

App/src/pages/ProfilePage.js

Line 131 in 2165e74

const shouldShowBlockingView = !hasMinimumDetails && !isLoading;

For example (instead '' we can use another text)

title={!shouldShowBlockingView ? props.translate('common.profile') : ''}

App/src/pages/ProfilePage.js

Line 152 in 2165e74

title={props.translate('common.profile')}

What alternative solutions did you explore? (Optional)

NA

[apps-ferreiro]

Proposal

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

Compose-Profile in header is shown when tapping on deep link

What is the root cause of that problem?

The root problem of the issue is that the link used in the example is used for opening a user profile in the Right modal:

App/src/ROUTES.ts

Lines 28 to 31 in 83bd22f

	PROFILE: {
	route: 'a/:accountID',
	getRoute: (accountID: string | number, backTo?: string) => getUrlWithBackToParam(`a/${accountID}`, backTo),
	},

Since the userId is not found we are shown the error screen.

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

We could validate userIds before navigation. We have the helper function isValidAccountRoute that we could use.

App/src/libs/ValidationUtils.ts

Lines 360 to 362 in 83bd22f

	function isValidAccountRoute(accountID: number): boolean {
	return CONST.REGEX.NUMBER.test(String(accountID)) && accountID > 0;
	}

What alternative solutions did you explore? (Optional)

[melvin-bot]

📣 @apps-ferreiro! 📣
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>

[dukenv0307]

Proposal

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

When user taps on this deep link, "profile" is shown as title in header.

What is the root cause of that problem?

We're using inconsistent pattern in ProfilePage from other page by using BlockingView directly here

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

Use FullPageNotFoundView similar to the DetailsPage (and many other RHN pages) here, the FullPageNotFoundView will wrap the HeaderWithBackButton and it will not show the header title correctly if it's not found page.

This also makes the RHN not found behavior consistent everywhere since in all other LHN not found page, it has the subtitle, only the Profile page "NotFound" state does not have subtitle.

What alternative solutions did you explore? (Optional)

If instead we want the Profile page "NotFound" state not to have subtitle, we can modify FullPageNotFoundView a bit so that it allows empty subtitle.

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[apps-ferreiro]

Contributor details
Your Expensify account email: isidoro.ferreiro@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~018bd6ae4efe8f4b52

[melvin-bot]

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

[samilabud]

Proposal

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

Compose-Profile in header is shown when tapping on deep link

What is the root cause of that problem?

Currently when the profile page loads we validate only if the account ID in the URL is a number, and if so we add the default data to Onyx (this also causes another issue, showing the profile as hidden when the profile does not exist). Also, the bug reported only happens when the account ID has text or the ID is very large. See the video:

Staging.test.mp4

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

We should look into props.personalDetails in ProfilePage.js and verify if AccountID is in the list, with this we can determinate if the user exists in our DB, something like:

const [profileExists, setProfileExists] = useState(null);
    // eslint-disable-next-line es/no-optional-chaining
    const shouldShowProfileError = props.personalDetails[accountID]?.shouldShowProfileError;
    useEffect(() => {
        const setProfileStatus = () => {
            // The props.personalDetails has all the valids accountIDs
            const validAccountIds = _.keys(props.personalDetails);
            const profileFound = _.filter(validAccountIds, (id) => id === accountID.toString()) >= 1;
            setProfileExists(profileFound);
        };
        setProfileStatus();
    }, [accountID, props.personalDetails]);

Then we can determine better if we should openPublicProfilePage and if not we'll need to set the isLoading variable in Onyx as false like:

useEffect(() => {
        if (profileExists && ValidationUtils.isValidAccountRoute(accountID) && !hasMinimumDetails) {
            PersonalDetails.openPublicProfilePage(accountID);
        } else if (profileExists !== null && !profileExists) {
            // eslint-disable-next-line rulesdir/prefer-actions-set-data
            Onyx.set(ONYXKEYS.PERSONAL_DETAILS_LIST, {
                ...props.personalDetails,
                [accountID]: {
                    ...props.personalDetails[accountID],
                    shouldShowProfileError: true,
                },
            });
        }
    }, [accountID, hasMinimumDetails, profileExists, props.personalDetails]);

Finally, we should show the warning in this way:

{shouldShowProfileError && (
                    <BlockingView
                        icon={Illustrations.ToddBehindCloud}
                        iconWidth={variables.modalTopIconWidth}
                        iconHeight={variables.modalTopIconHeight}
                        title="The user profile does not exist"
                        shouldShowLink
                        link={props.translate('notFound.goBackHome')}
                    />
                )}

If shouldShowProfileError is true, we should hide the other components like:

{!shouldShowProfileError && shouldShowBlockingView && (
                    <BlockingView
                        icon={Illustrations.ToddBehindCloud}
                        iconWidth={variables.modalTopIconWidth}
                        iconHeight={variables.modalTopIconHeight}
                        title={props.translate('notFound.notHere')}
                        shouldShowLink
                        link={props.translate('notFound.goBackHome')}
                    />
                )}

See the final result:

Fixed.bug.mp4

[sonialiap]

@getusha what do you think of the above proposals?

[getusha]

Reviewing

[getusha]

Raised a discussion https://expensify.slack.com/archives/C01GTK53T8Q/p1702639941065949, to determine if this is worth fixing.

[sonialiap]

This doesn't fit into any of the waves. I agree with the votes to :donothing:. Closing out

[cartersteinhoff]

@sonialiap, just curious, if the issue is closed out as completed and "donothing" is the course of action taken, is there a bounty awarded to any of the proposals?

[melvin-bot]

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

[cartersteinhoff]

Contributor details
Your Expensify account email: cartersteinhoff@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~011e73a62e9be4d45c

[melvin-bot]

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

[KevinBlakeLopez]

@sonialiap I am interested in contributing proposals to issues that are raised for this app, but when I see instances such as these it is discouraging because as contributors we can do everything right on our end and propose good solutions, but as it turns out there is no real potential for payout. This kind of situation decreases the expected value of answering these issues with proposals. Hopefully, these kinds of situations are kept to minimum with plans to reduce their occurrences in the future?