"Filter" string shows in English when language preference is Spanish for Card Page

[IuliiaHerets]

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: v9.0.25-11
Reproducible in staging?: Y
Reproducible in production?: Y
Issue was found when executing this PR: #47773
Email or phone of affected tester (no customers): applausetester+en@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Access staging.new.expensify.com
2. Sign into a valid account
3. In the URL bar navigate to /search/filters/card (add this after domain eg. https://staging.new.expensify.com/
4. Select a card and then proceed to use the search feature
5. Observe the Filter details at the top of the page

Expected Result:

User expects all aspects of the app to show in Spanish

Actual Result:

The filter strings at the top are in English

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6585565_1724864375270.Filters_are_not_translated_to_Spanish.mp4

View all open jobs on GitHub

[melvin-bot]

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

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[IuliiaHerets]

@miljakljajic FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-08-28 21:35:59 UTC.

Proposal

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

"Filter" string shows in English when language preference is Spanish for Card Page

What is the root cause of that problem?

In getSearchHeaderTitle, we aren't trasnlating the search params keys.

App/src/libs/SearchUtils.ts

Lines 554 to 566 in de6a214

	function getSearchHeaderTitle(queryJSON: SearchQueryJSON) {
	const {type, status} = queryJSON;
	const filters = getFilters(queryJSON) ?? {};
	let title = `type:${type} status:${status}`;
	Object.keys(filters).forEach((key) => {
	const queryFilter = filters[key as ValueOf<typeof CONST.SEARCH.SYNTAX_FILTER_KEYS>] ?? [];
	title += buildFilterString(key, queryFilter);
	});
	return title;
	}

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

• Use transalteLocale for the search params keys.
• We have to create the translation for the types and for the filter title, I believe we already have the translation.
• We have already have most of the translations but I think we can create separate translations for SearchStatus & SearchDataTypes.
• Most of the SYNTAX_FILTER_KEYS are present as common translation, only few needs to be added if we want to access that from common translation object.
• We can create functions to getting SearchDataType & SYNTAX_FILTER_KEYS

function getTranslationForSearchDataType(searchDataType: ValueOf<typeof CONST.SEARCH.DATA_TYPES>): TranslationPaths {
    switch (searchDataType) {
        case CONST.SEARCH.DATA_TYPES.EXPENSE:
            return 'common.expense';
        case CONST.SEARCH.DATA_TYPES.INVOICE:
            return 'workspace.moreFeatures.invoices.title';
        case CONST.SEARCH.DATA_TYPES.TRIP:
            return 'travel.trips';
        default:
            return 'common.expense';
    }
}

function getTranslationForSyntaxFilterKeys(syntaxFilterKey: ValueOf<typeof CONST.SEARCH.SYNTAX_FILTER_KEYS>): TranslationPaths {
    switch (syntaxFilterKey) {
        case CONST.SEARCH.SYNTAX_FILTER_KEYS.AMOUNT:
            return 'iou.amount';
        case CONST.SEARCH.SYNTAX_FILTER_KEYS.CATEGORY:
            return 'common.category';
        case CONST.SEARCH.SYNTAX_FILTER_KEYS.CURRENCY:
            return 'common.currency';
        case CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD:
            return 'search.filters.hasKeywords';
        // Add all the keys here
        default:
            return 'common.expense';
    }
}

function getSearchHeaderTitle(queryJSON: SearchQueryJSON) {
    const {type, status} = queryJSON;
    const filters = getFilters(queryJSON) ?? {};

    let title = `${translateLocal('common.type')}:${translateLocal(getTranslationForSearchDataType(type))} ${translateLocal('common.status')}:${status}`;

    Object.keys(filters).forEach((key) => {
        const queryFilter = filters[key as ValueOf<typeof CONST.SEARCH.SYNTAX_FILTER_KEYS>] ?? [];
        title += buildFilterString(translateLocal(getTranslationForSyntaxFilterKeys(key)), queryFilter);
    });

    return title;
}

What alternative solutions did you explore? (Optional)



Result

Monosnap.screencast.2024-08-29.02-04-47.mp4

[ikevin127]

cc @luacmartins Looks like we omitted the translations for the actual filter type labels / static filter values. How much of these do you think should actually be translated given that over a certain point the filtering functionality might be impacted ?

[luacmartins]

I don't think this is an issue for a few reasons. We're getting rid of the top bar soon and it's a representation of the search query syntax, which as of now only supports English, so we shouldn't be translating that. Closing this issue.