Be able to translate all hard-coded labels and descriptions

[jbanety]

Is your feature request related to a problem? Please describe.

We are developing e-commerce apps with Vendure (great start!) for French customers. At the moment, we had to create a FrTranslationPlugin to override all the default logic in Vendure (e.g. defaultCollectionFilters) and provide these to VendureConfig.

This is as stupid as :

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck

import { 
    LanguageCode,
    combineWithAndArg as coreCombineWithAndArg,
    facetValueCollectionFilter as coreFacetValueCollectionFilter,
} from '@vendure/core';

// combineWithAndArg
export const combineWithAndArg = coreCombineWithAndArg;
combineWithAndArg.label = [
    { languageCode: LanguageCode.en, value: 'Combination mode' }, 
    { languageCode: LanguageCode.fr, value: 'Mode de combinaison' }
];
combineWithAndArg.description = [
    { languageCode: LanguageCode.en, value: 'If this filter is being combined with other filters, do all conditions need to be satisfied (AND), or just one or the other (OR)?', },
    { languageCode: LanguageCode.fr, value: 'Si ce filtre est utilisé avec d\'autres filtres, toutes les conditions doivent elles être satisfaites (ET), ou seulement une parmi toutes (OU) ?', },
];

// facetValueCollectionFilter
export const facetValueCollectionFilter = coreFacetValueCollectionFilter;
facetValueCollectionFilter.options.description = [
    { languageCode: LanguageCode.en, value: 'Filter by facet values' },
    { languageCode: LanguageCode.fr, value: 'Filtre par valeurs de composant' }
];
facetValueCollectionFilter.options.args.combineWithAnd = combineWithAndArg;
facetValueCollectionFilter.options.args.facetValueIds.label = [
    { languageCode: LanguageCode.en, value: 'Facet values' },  
    { languageCode: LanguageCode.fr, value: 'Valeurs de composant' }
];
facetValueCollectionFilter.options.args.containsAny.label = [
    { languageCode: LanguageCode.en, value: 'Contains any' },
    { languageCode: LanguageCode.fr, value: 'Contient au moins une' }
];
facetValueCollectionFilter.options.args.containsAny.description = [
    { languageCode: LanguageCode.en, value: 'If checked, product variants must have at least one of the selected facet values. If not checked, the variant must have all selected values.' },
    { languageCode: LanguageCode.fr, value: 'Si coché, les variations de produit doivent avoir au moins une des valeurs de composant sélectionnées. Si non coché, les variations doivent avoir toutes les valeurs sélectionnées.' }
];
facetValueCollectionFilter.options.description = [
    { languageCode: LanguageCode.en, value: 'Filter by facet values' },
    { languageCode: LanguageCode.fr, value: 'Filtre par valeurs de composant' }
];

Describe the solution you'd like

All the translations should be modular and overridable.

Describe alternatives you've considered

• Extract all translations into files that can be overriden or merged with plugins
• Translations in DB ?

Additional context

This is very important to able to launch Vendure from dev geeks world to real French (who doestn't like English 😄 at all) / worldwide customers

I'm OK to submit a PR when we agree to a solution 👌

Related to #1724

[michaelbromley]

Thanks for the report. Indeed, this is an area that needs to be handled better.

My initial thought is to pass the default (English) string through the existing i18n system in the Admin UI, and treat the English text as a translation token.

This would then make it possible to provide translations in other languages using the existing json-files based approach described here. You could then provide any missing translations to the Admin UI in a relatively easier manner: https://www.vendure.io/docs/plugins/extending-the-admin-ui/adding-ui-translations/

Translations in the DB would be a breaking change so not something for now.