[HOLD for payment 2025-02-04] [$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 contributors@expensify.com 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
• Automatic offers:
• allgandalf | Reviewer | 105674089

Issue Owner

Current Issue Owner: @muttmuure

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