[$250] Improvement: Add Deep Link to Search for Transactions from Card Details Page

[m-natarajan]

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:
Reproducible in staging?:
Reproducible in production?:
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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: @quinthar
Slack conversation (hyperlinked to channel name): convert

Action Performed:

Currently, users cannot directly view transactions related to a specific card from the Workspace > Company Cards > Card Details page. To enhance usability and streamline the workflow, a deep link should be added to the Card Details page that directs users to a search results page showing transactions specific to the selected card.

Expected Result:

When a user navigates to the Workspace > Company Cards > Card Details page, a deep link is available that, when clicked, takes the user directly to the search page. The search page should automatically display transactions filtered by the selected card, ensuring users can quickly review all related transactions without manually applying filters.

Actual Result:

Describe what actually happened

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021876751997170063248
• Upwork Job ID: 1876751997170063248
• Last Price Increase: 2025-01-07

Issue Owner

Current Issue Owner: @allgandalf

[melvin-bot]

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

[parasharrajat]

Edited by proposal-police: This proposal was edited at 2025-01-06 08:05:14 UTC.

Proposal

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

Add A CTA to navigate to search page showing the card transactions.

What is the root cause of that problem?

New Feature

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

2. Modify the existing Canned search util to add support for the card filter. Add a new param called cardId. When present we will change the query as follows. We can also create a new utility function if needed.

   App/src/libs/SearchQueryUtils.ts

   Line 615 in b23c478

   function buildCannedSearchQuery({

function buildCannedSearchQuery({
    type = CONST.SEARCH.DATA_TYPES.EXPENSE,
    status = CONST.SEARCH.STATUS.EXPENSE.ALL,
    policyID,
    cardId,
}: {
    type?: SearchDataTypes;
    status?: SearchStatus;
    policyID?: string;
} = {}): SearchQueryString {
    let queryString = `type:${type} status:${Array.isArray(status) ? status.join(',') : status}`;

    if (policyID) {
        queryString = `type:${type} status:${Array.isArray(status) ? status.join(',') : status} policyID:${policyID}`;
    }

    if (cardId) {
        queryString = `type:${type} status:${Array.isArray(status) ? status.join(',') : status} expense-type:card card:${cardId}`;
    }

    // Parse the query to fill all default query fields with values
    const normalizedQueryJSON = buildSearchQueryJSON(queryString);
    return buildSearchQueryString(normalizedQueryJSON);
}

1. We need to add a new Menu item to WorkspaceCompanyCardDetailsPage at the bottom like other ctas.

<MenuItem
       icon={Expensicons.SomeIcon}
       iconFill={theme.success}
       title="View transactions"
       style={styles.mv1}
       onPress={() => {
              Navigation.navigate(
                     ROUTES.SEARCH_CENTRAL_PANE.getRoute({
                            query: SearchQueryUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.EXPENSE, CONST.SEARCH.STATUS.EXPENSE.ALL, '', cardID),
                     }),
              );
       }}
/>

Note: Cleanup like using translations and types will be done on PR.

What alternative solutions did you explore? (Optional)

[melvin-bot]

Current assignee @muttmuure is eligible for the NewFeature assigner, not assigning anyone new.

[joekaufmanexpensify]

Left thoughts here that it would also be solid to add a deep link to the wallet page on the card, so the employee can easily view the card's transactions on the search page too, as only the admin can access the card details page.

[mountiny]

Asking for who will be a c+ here

[melvin-bot]

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

[melvin-bot]

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

[mountiny]

Looking for proposals

[DylanDylann]

Proposal

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

Add a new button to navigate to search page with all transaction belongs the current detail card

What is the root cause of that problem?

New feature

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

We need to implement a new CTA button in both the Expensify Detail Card Page and the Company Detail Card Page

In WorkspaceExpensifyCardDetailsPage and WorkspaceCompanyCardDetailsPage, add new section

<MenuItem
    icon={Expensicons.UserCheck}
    iconFill={theme.success}
    title={'Transactions from Card'}
    style={styles.mv1}
    onPress={() => {
        const queryString = useMemo(
            () =>
                SearchQueryUtils.buildQueryStringFromFilterFormValues({
                    cardID: [cardID],
                    status: 'all',
                    type: 'expense',
                }),
            [cardID],
        );
        SearchActions.clearAllFilters();
        Navigation.dismissModal();
        Navigation.navigate(
            ROUTES.SEARCH_CENTRAL_PANE.getRoute({
                query: queryString,
            }),
        );
    }}
/>

This is my demo

Screen.Recording.2025-01-08.at.11.58.52.mov

The correct UI will be need confirmed by the design team

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

What alternative solutions did you explore? (Optional)

[mountiny]

@allgandalf can you please review?

[allgandalf]

sir yes sirr!

[allgandalf]

woahhhh this is a new feature, we need design mock first.

c.c. @Expensify/design can you guys please provide us the mocks for this issue, the expected result is:

When a user navigates to the Workspace > Company Cards > Card Details page, a deep link is available that, when clicked, takes the user directly to the search page. The search page should automatically display transactions filtered by the selected card, ensuring users can quickly review all related transactions without manually applying filters.

[shawnborton]

I think we'd just do something simple like this, where we add an option row to the list of existing option rows:

Cc @Expensify/design for feedback on the icon... a Search icon seemed to make sense but I could also see trying something that might look more like a list or even repeating the Reports icon:

[DylanDylann]

@allgandalf The UI mock up can easily address in the PR, It only be a icon and a text

[dannymcclain]

I kinda like the reports icon the best!

[dubielzyk-expensify]

I don't feel strongly. I think search or reports icon both work, but maybe reports is slightly more appropriate!?

[shawnborton]

Sweet, let's use reports icon then!

So this is the winner:

[allgandalf]

Lets go with @parasharrajat proposal here.

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @mountiny is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[parasharrajat]

This feature can be beneficial to Expensify cards too. Should I add a cta there as well? @shawnborton Changes are quite the same.

[parasharrajat]

So I have draft ready here #55095. Waiting on above to confirm and trying to get access to a company card to be able to add screen shots for that too.