Search - Search history does not show the last 4 card digits

[lanitochka17]

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: 9.0.59-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+khcategory18@applause.expensifail.com
Issue reported by: Applause - Internal Team

Issue found when executing PR #51633

Action Performed:

Precondition:

• User has assigned themselves some virtual cards

1. Go to staging.new.expensify.com
2. Open any report
3. Open search router
4. Enter cardID
5. Select a virtual card
6. Note that it shows last 4 card digits in the search field
7. Hit Enter
8. Go back to report
9. Open search router

Expected Result:

The search history should show the last 4 card digits, as it will cause confusion if user searches for more than one virtual card

Actual Result:

The search history does not show the last 4 card digits

Workaround:

Unknown

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

Bug6657686_1730989900879.20241107_222310.mp4

View all open jobs on GitHub

[melvin-bot]

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

[u-2234]

Proposal

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

Search - Search history does not show the last 4 card digits

What is the root cause of that problem?

The root cause of this problem is that the application is not formatting or storing the card ID properly when updating the search history. Specifically, the application does not extract the last four digits of the card ID for display purposes, which leads to confusion when the search history is revisited.

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

Modify the getFilterCardDisplayTitle function to display only the last 4 digits of the card ID.

function getFilterCardDisplayTitle(filters, cards) {
    const filterValue = filters[CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID];
    
    if (filterValue) {
        const filteredCards = Object.values(cards).filter((card) => filterValue.includes(card.cardID.toString()));
        return filteredCards.map((card) => `**** **** **** ${card.cardID.toString().slice(-4)}`).join(', ');
    }

    return undefined;
}

Update the searchAdvancedFilters state to store the card ID properly, ensuring the last 4 digits are displayed in the search history.

const updatedFilters = {
    ...searchAdvancedFilters,
    [CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID]: cardID, // Store full cardID or last 4 digits
};

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[u-2234]

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

[melvin-bot]

⚠️ Unable to store contributor details.

[u-2234]

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

[melvin-bot]

⚠️ Unable to store contributor details.

[u-2234]

Proposal

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

Search - Search history does not show the last 4 card digits

What is the root cause of that problem?

The root cause of this problem is that the application is not formatting or storing the card ID properly when updating the search history. Specifically, the application does not extract the last four digits of the card ID for display purposes, which leads to confusion when the search history is revisited.

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

Modify the getFilterCardDisplayTitle function to display only the last 4 digits of the card ID.

function getFilterCardDisplayTitle(filters, cards) {
    const filterValue = filters[CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID];
    
    if (filterValue) {
        const filteredCards = Object.values(cards).filter((card) => filterValue.includes(card.cardID.toString()));
        return filteredCards.map((card) => `**** **** **** ${card.cardID.toString().slice(-4)}`).join(', ');
    }

    return undefined;
}

Update the searchAdvancedFilters state to store the card ID properly, ensuring the last 4 digits are displayed in the search history.

const updatedFilters = {
    ...searchAdvancedFilters,
    [CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID]: cardID, // Store full cardID or last 4 digits
};

What alternative solutions did you explore? (Optional)

[truph01]

Edited by proposal-police: This proposal was edited at 2024-11-07 20:59:19 UTC.

Proposal

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

• The search history does not show the last 4 card digits

What is the root cause of that problem?

• In the function to get the display card in case the query string is type:expense status:all sortBy:date sortOrder:desc cardID:21472605, we are using:

App/src/libs/SearchQueryUtils.ts

Lines 531 to 533 in aedbbde

	if (filterName === CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID) {
	return cardList[filter]?.bank || filter;
	}

It only display the bank name. If the bank name data is not available, we revert to the card ID. In case of this bug, it only displays "Expensify Card".

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

App/src/libs/SearchQueryUtils.ts

Line 532 in aedbbde

return cardList[filter]?.bank || filter;

should be updated to:

        return filter || cardList[filter]?.bank;

or

    if (filterName === CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID) {
        if (cardList[filter]?.bank && cardList[filter]?.lastFourPAN) {
            return `${cardList[filter]?.bank}-${cardList[filter]?.lastFourPAN}`;
        }
        return filter || cardList[filter]?.bank;
    }

or

    if (filterName === CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID) {
        if (cardList[filter]?.bank && filter) {
            return `${cardList[filter]?.bank}-${filter}`;
        }
        return filter || cardList[filter]?.bank;
    }

• The details about the format to display can be improved in PR.

What alternative solutions did you explore? (Optional)

• We can also use:

        return getCardDescription(filter) || filter || cardList[filter]?.bank;

[truph01]

Proposal updated

[trjExpensify]

I can reproduce this. @luacmartins just want a hip check from you on whether this is known? I agree it gets confusing to not show the card you've selected to filter on.