[HOLD for payment 2024-08-07] [$250] Add deep links for CTA links

[marcochavezf]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

We want to add a couple of deep links for the following actions, where each link will open the corresponding views:

Action	Link	View
Track Expense	/track-expense
Submit Expense	/submit-expense

Potentially, we'd want to create something like a /concierge deep link, where we create a component that navigates to the Concierge chat. In this case, we would start the corresponding money request action using IOU.startMoneyRequest.

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01967a3704af99de82
• Upwork Job ID: 1811816585616897261
• Last Price Increase: 2024-07-12
• Automatic offers:
• ikevin127 | Reviewer | 103142789

Issue Owner

Current Issue Owner: @dylanexpensify

[melvin-bot]

Triggered auto assignment to @dylanexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dannymcclain (NewFeature)

[melvin-bot]

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

[marcochavezf]

This issue is frontend implementation for Harpoons for NewDot, specifically for this internal issue.

[dannymcclain]

Looks like nothing in the UI is actually changing for this right? I probably don't need to be assigned since this "new feature" basically has nothing to do with design—but I will wait for confirmation!

[nkdengineer]

Proposal

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

Add deep links for CTA links

What is the root cause of that problem?

This is a new feature

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

We can use the same implementation as we do on the concierge page. For each track-expense and submit expense create a navigation page with the corresponding route
. This page will be a RHP and we can display a loading page while waiting for the navigation or something like this (this can be confirmed by design team)

And then on this page create a useEffect to navigate to the money request flow by using IOU.startMoneyRequest

Here is an example for track-expense page

function TrackExpensePage({session}: TrackExpenseProps) {
    const styles = useThemeStyles();
    const isUnmounted = useRef(false);

    useFocusEffect(() => {
        if (session && 'authToken' in session) {
            App.confirmReadyToOpenApp();
            Navigation.isNavigationReady().then(() => {
                IOU.startMoneyRequest(CONST.IOU.TYPE.TRACK, ReportUtils.findSelfDMReportID() ?? '-1')
            });
        } else {
            Navigation.navigate();
        }
    });


    return (
        <FullScreenLoadingIndicator />;
    );
}

What alternative solutions did you explore? (Optional)

[kabeer95]

Proposal: Add Deep Links for CTA Links on Expensify

Problem Statement:

The current implementation of CTA links on Expensify does not provide deep links, resulting in a poor user experience. Users are not able to navigate directly to the relevant section of the report.

Root Cause:

The lack of deep links in the CTA links is due to the absence of a proper linking mechanism.

Proposed Solution:

To resolve this issue, we recommend adding deep links to the CTA links on Expensify. This can be achieved by:

Modifying the CTA link generation: Update the CTA link generation logic to include deep links that point to the relevant section of the report.
Using anchor tags: Utilize anchor tags () to create deep links that navigate to the desired section of the report.

Code:
import React from 'react';

interface CTALinkProps {
reportId: string;
sectionId: string;
children: React.ReactNode;
}

const CTALink: React.FC = ({ reportId, sectionId, children }) => {
const href = #${sectionId};

return (
<a href={href} onClick={() => console.log(Navigate to ${sectionId} section)}>
{children}

);
};

export default CTALink;

const Report = () => {
return (

Report

View Expenses
View Income

);
};

export default Report;

export default CtaLink;
Alternative Solutions:

We explored the following alternative solutions:

Using a URL parameter: Pass the section ID as a URL parameter, allowing the report to navigate to the desired section.
Implementing a custom linking mechanism: Develop a custom linking mechanism that uses a unique identifier to navigate to the relevant section of the report.

[ikevin127]

@nkdengineer Thanks for your proposal.

I implementing the solution you proposed locally for testing purposes and while the redirect part works, when submitting the track expense -> the API call fails (responding with Auth TrackExpense returned an error), and the track expense is not created, an empty avatar report appears in LHN which goes away after dismissing the errors.

Additionally, your TrackExpensePage provided code would keep the central pane loading indefinitely, so I had to remove the following block:

if (isUnmounted.current) {
    return;
}

in order to get the redirect working and open the routed RHP.

In order for me to move on with assignment here I need proof of at least one of the deep link routes working as expected, functionality wise as well - meaning the whole track expense flow working as it would when triggered from the FAB button.

[ikevin127]

@kabeer95 Thanks for your proposal. To be reviewed by Contributor+, please update your proposal comment using the proposal template.

[nyomanjyotisa]

Proposal

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

Add deep links for CTA links

What is the root cause of that problem?

new feature

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

Create a new route for track-expense and submit-expense and a utility page for each of them just like the ConciergePage

for submit-expense on navigation ready, start submit expense with generate report ID

IOU.startMoneyRequest(CONST.IOU.TYPE.SUBMIT, ReportUtils.generateReportID());

Then for track-expense on navigation ready, start track expense with self DM report ID

ReportUtils.getSelfDMReportID().then((reportID) => {
    IOU.startMoneyRequest(CONST.IOU.TYPE.TRACK, reportID ?? '-1');
});

we need to create new function ReportUtils.getSelfDMReportID() to make sure the self DM report ID retrieved after the allReports is not undefined. If we don't do this, we will get and error after submit track expense if we access track-expense deep link when user not logged in yet

function getSelfDMReportID(): Promise<string | undefined> {
    return new Promise((resolve) => {
        let interval = setInterval(function() {
            const allReports = ReportConnection.getAllReports();

            if (typeof allReports === 'undefined') return;
            clearInterval(interval);

            const selfDMReport = Object.values(allReports).find((report) => isSelfDM(report) && !isThread(report));
            resolve(selfDMReport?.reportID);
        }, 100);
    });
}

Or we can modify findSelfDMReportID function with this code, and update usage of findSelfDMReportID in other place

Have created a branch for the proof, please check and test this branch

RESULT

track-expense, the user already logged in

New-Expensify.9.mp4

track-expense, the user not logged in

New-Expensify.11.mp4

Additionally, if we want to display track-training on the track-expense deep link, we can add the following code after startMoneyRequest

                if (!hasSeenTrackTraining && !isOffline) {
                    setTimeout(() => {
                        Navigation.navigate(ROUTES.TRACK_TRAINING_MODAL);
                    }, CONST.ANIMATED_TRANSITION);
                }

What alternative solutions did you explore? (Optional)

[nyomanjyotisa]

Proposal updated

[nkdengineer]

@ikevin127 I created a test branch here.

[nkdengineer]

I implementing the solution you proposed locally for testing purposes and while the redirect part works, when submitting the track expense -> the API call fails (responding with Auth TrackExpense returned an error), and the track expense is not created, an empty avatar report appears in LHN which goes away after dismissing the errors.

For track-expense we should find the self DM instead of generating a new reportID because only selft can create track-expense. I updated proposal #45350 (comment).

[nyomanjyotisa]

Proposal updated

[marcochavezf]

Hi @nyomanjyotisa, is the issue still happening?

[nyomanjyotisa]

Hi @marcochavezf

The latest main on desktop Chrome works perfectly, but the issue persists on mWeb Chrome. Got not found page after login

Expensify-magic-sign-in-code-138578---jyotisa1616-gmail-com---Gmail.mp4

[ikevin127]

@nyomanjyotisa That's fine - you can safely open the PR if that's the only issue - as it's expected to get the Not Found page when using ngrok and this happens regardless of your changes, happens to everybody that uses tunneling - including on adhoc build since we're not using the dev / staging / prod domains when we tunnel.

To test this without ngrok (on iOS only) you can setup the iPhone Simulator by running npm run setupNewDotWebForEmulators and once this is successful on iOS you will be able to connect to web on Simulator using https://dev.new.expensify.com:8082 directly in the simulator.

Note

On your PR author checklist, for Android: mWeb just post the video even if it's showing the Not Found page as reviewers know that's not a bug and just a tunneling issue.

[dylanexpensify]

Ongoing

[dylanexpensify]

@marcochavezf mind giving us a quick update when you have a free moment 🙇‍♂️ ❤️

[nyomanjyotisa]

PR opened @ikevin127

And for this problem I believe we should handle it in another issue, since it gives the same error when we create an expense from the FAB button. It only works without error if we submit expense to user or workspace that are in the Recents list, or user that we never start a chat:

-1-New-Expensify.8.mp4

[ikevin127]

@marcochavezf I think it's safe to move forward with the PR review despite this issue mentioned in #45350 (comment) (above) as to me this seems like a BE issue as the error message details - issue which is already happening currently via the FAB submit expense flow, therefore I think it's out of scope for this issue and should be fixed for both FAB / deep link flows once addressed in another issue.

What do you think ?

Update:

After additional testing, turns out the issue is only happening locally due to StrictMode. I figured this out by testing the submit expense flow on staging and noticed that it's not happening there. Next, I went on local dev and set CONFIG.USE_REACT_STRICT_MODE to false and the issue doesn't happen anymore, regardless on submitting to Recents workspaces / users or non-Recents.

Therefore this shouldn't be a concern since it's only happening on local dev due to StrictMode, and the flow would work without any issues once deployed on staging / production.

[marcochavezf]

@marcochavezf mind giving us a quick update when you have a free moment 🙇‍♂️ ❤️

Apologies for the delay here. The PR has been merged!

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.14-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• track-expense and submit-expense deep links #45603

If no regressions arise, payment will be issued on 2024-08-07. 🎊

For reference, here are some details about the assignees on this issue:

• @ikevin127 requires payment automatic offer (Reviewer)
• @nyomanjyotisa requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@ikevin127] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@dylanexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[ikevin127]

Regression Test Proposal

A. Track expense deep link

1. Once logged-in, append /track-expense after the expensify domain (e.g. https://staging.new.expensify.com).
2. Verify that the Track Training is displayed if the conditions match (first time Tracking an expense / never clicked Don't show me this again on Track Training before).
3. Click Got It.
4. Verify that the Track Expense page is displayed.
5. Enter amount on manual track expense.
6. Click Next.
7. Click Track Expense.
8. Verify that the Track Expense request is created successfully and the Track Expense related Concierge whisper is displayed.

B. Submit expense deep link

1. Once logged-in, append /submit-expense after the expensify domain (e.g. https://staging.new.expensify.com).
2. Verify that the Submit Expense page is displayed.
3. Enter amount on manual submit expense.
4. Click Next.
5. Select any user or workspace.
6. (Optional) Enter Merchant (for workspace).
7. Click Submit.
8. Verify that the Submit Expense request is created successfully.

Do we agree 👍 or 👎.

[dylanexpensify]

Payment coming up!

[dylanexpensify]

Payment summary:

• Contributor: @nyomanjyotisa $250
• Contributor+: @ikevin127 $250

Please apply or request!

[dylanexpensify]

@ikevin127 payment sent, @nyomanjyotisa offer sent!

[nyomanjyotisa]

offer accepted

[dylanexpensify]

Done!