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

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

[melvin-bot]

📣 @allgandalf 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[mountiny]

assigned, thanks!

[allgandalf]

@parasharrajat when should we expect the PR to be out of draft ?

[parasharrajat]

Trying to get access to company card first. But I think that is no possible at the moment. I will have it ready today.

[allgandalf]

I can add you to one of my policy as admin, that has custom feed added, mind sharing your email?

(not sure if admins can access company cards, but still)

[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.89-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Add view transactions cta to Expensify card and company cards page #55095

If no regressions arise, payment will be issued on 2025-02-04. 🎊

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

• @parasharrajat requires payment through NewDot Manual Requests
• @allgandalf requires payment automatic offer (Reviewer)

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

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

[melvin-bot]

@shawnborton, @parasharrajat, @mountiny, @muttmuure, @allgandalf Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[allgandalf]

Regression Test Proposal

Prerequisite:

• Enabled Expensify Card and Company Card
• You have some assigned cards to your account from different workspaces and a assigned company card.

---

Test 1: Expensify Card

1. Go to Expensify card in workspace menu on LHN.
2. Issue a new Expensify Card if not already.
3. Click on the card to view details.
4. Notice the View transactions button.
5. Click to navigate to the search page with transactions filtered to that card.

Verify that: you can see the card transactions if they exist

---

Test 2: Company Card

1. Go to Company card in workspace menu on LHN.
2. Add a new Company Card if not already.
3. Click on the card to view details.
4. Notice the View transactions button.
5. Click to navigate to the search page with transactions filtered to that card.

Verify that: you can see the card transactions if they exist

---

Test 3: Assigned Cards

1. Go to Settings > Wallet page.
2. Click on any assigned cards(Physical or virtual).
3. Check that it has a View Transactions button.
4. Click to navigate to the search page with transactions filtered to that card.
5. Click on any Assigned Company card.
6. Note that a popup opens with the view transactions button.
7. Click to navigate to the search page with transactions filtered to that card.

Verify that: you can see the card transactions if they exist

Do we agree 👍 or 👎

[melvin-bot]

@shawnborton, @parasharrajat, @mountiny, @muttmuure, @allgandalf 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

@shawnborton, @parasharrajat, @mountiny, @muttmuure, @allgandalf 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[muttmuure]

$250 @parasharrajat C+
$250 @allgandalf C

[JmillsExpensify]

$250 approved for @parasharrajat