Translation provider

All Suite modules have translations support for different languages that we might want to make available. This is done via the TranslationProvider component.

Prerequisites

In order to add a particular language to any Suite module, there are a few things to consider:

Application configuration

First and formost it should be supported in EVA. That means making it available via the Cultures from GetAplicationConfiguration.

Translation files

Each languages needs a translation file where all the translations are kept in. Usually translations are managed externally.

Usage

Importing the translation file and passing it to the TranslationProvider component will make it available for use on the configured locale. The active locale is based on the current user's LanguageID and CurrentCountryID. These are matched against the available cultures, falling back to the first English culture when there is no match.

// ...import MessagesEN from './assets/i18n/en.json';
const tranlsationMessages = {  en: MessagesEN,};
const Index = () => {  const currentUser = useRecoilValue(state.currentUser.currentUserState.response);  const appConfig = useRecoilValue(    state.currentUser.currentUserApplicationConfigurationState.response,  );
  return (    <TranslationProvider      messages={tranlsationMessages}      localeInformation={{        applicationConfigurationResponse: appConfig,        userCurrentCountryID: currentUser?.User.CurrentCountryID,        userLanguageID: currentUser?.User.LanguageID,      }}    >      <App />    </TranslationProvider>  );};

Missing translation keys

We always make sure to add all translation keys for English, but the other languages are managed externally and may be missing translation keys. Therefore, to make sure that isn't the case, we can merge the English translation file with the other translation files to make sure that there are never missing translation keys in our modules.

// ...import MessagesEN from './assets/i18n/en.json';import MessagesDE from './assets/i18n/de.json';import MessagesNL from './assets/i18n/nl.json';
export const getTranslationMessagesForLanguage = (  englishTranslations: {    [key: string]: string;  },  targetLanguageTranslations: { [key: string]: string },) => {  // Filter any empty translations  const filteredTranslations = Object.keys(targetLanguageTranslations).reduce(    (result, translationKey) => {      if (translationKey && targetLanguageTranslations[translationKey]) {        return { ...result, [translationKey]: targetLanguageTranslations[translationKey] };      }      return { ...result };    },    {},  );
  return { ...englishTranslations, ...filteredTranslations };};
const tranlsationMessages = {  en: MessagesEN,  'en-GB': MessagesEN,  de: getTranslationMessagesForLanguage(MessagesEN, MessagesDE),  nl: getTranslationMessagesForLanguage(MessagesEN, MessagesNL),};