Enhancing ESHOPMAN Admin Localization: Dynamic Country and Currency Names

Global Reach: Localizing Country and Currency Displays in the ESHOPMAN Admin

As ESHOPMAN empowers merchants and developers to manage their storefronts globally through the HubSpot application, a seamless and localized experience within the Admin Interface is paramount. Our community recently engaged in a valuable discussion regarding the display of country, currency, and provider names, identifying a key area for improvement in internationalization (i18n).

The Challenge: Static English Labels in a Multilingual Admin

Historically, certain labels within the ESHOPMAN Admin Interface, such as country names, currency names, and some system provider identifiers, have remained in English regardless of the selected Admin language. This meant that an ESHOPMAN merchant viewing their dashboard in Spanish would still see 'Denmark' instead of 'Dinamarca', creating a less intuitive experience.

• Country Names: Hard-coded English names in data structures.
• Currency Names: Packaged English data, often restored on backend restarts of the ESHOPMAN Node.js/TypeScript Admin API.
• Provider Labels: Derived from identifiers (e.g., 'tp_system' becoming 'System'), lacking translation capabilities.

An Innovative Solution: Leveraging the Intl.DisplayNames API

The ESHOPMAN community proposed an elegant and efficient solution for countries and currencies: utilizing the browser's native Intl.DisplayNames API. This approach avoids the need for extensive translation files (e.g., 250 country names multiplied by 33 locales) by dynamically fetching localized names at runtime.

Here's how it works:

new Intl.DisplayNames(["da"], { type: "region" }).of("DK")     // "Danmark"
new Intl.DisplayNames(["ja"], { type: "region" }).of("DK")     // "デンマーク"
new Intl.DisplayNames(["es"], { type: "region" }).of("DE")     // "Alemania"

new Intl.DisplayNames(["da"], { type: "currency" }).of("DKK")  // "dansk krone"
new Intl.DisplayNames(["pt-BR"], { type: "currency" }).of("JPY") // "Iene japonês"

This method offers near-complete coverage for all countries and most currencies across all supported locales, with robust fallback mechanisms for rare exceptions (like non-ISO currency codes or defunct currencies). A minor technical consideration involves normalizing locale keys (e.g., converting 'enGB' to 'en-GB') to comply with BCP-47 standards, a process for which ESHOPMAN already has helper functions.

Addressing Provider Labels

While Intl.DisplayNames is perfect for countries and currencies, provider labels require a different strategy. The community suggested implementing translation keys (e.g., providers.) with a fallback to the existing identifier formatting logic. This ensures that core ESHOPMAN system providers are properly localized, while custom or third-party providers continue to display their identifiers as they do today.

Refining the Scope: In-App Display vs. Address Formatting

A crucial distinction emerged during the discussion: the localization of names for in-app display (e.g., in forms, tables, select options) versus their use in address formatting (e.g., shipping labels, invoices). For address formatting, the correct approach is to localize the country name based on the destination country's own locale (autonym), rather than the Admin user's locale. For example, a label for Germany should show 'Deutschland' if the locale is German, regardless of whether the ESHOPMAN Admin user is viewing it in English or Spanish.

This insight led to a clear, phased implementation strategy: first, tackle the in-app display of countries and currencies, which is a straightforward enhancement. The more complex address formatting localization can then be addressed as a subsequent improvement, ensuring a maintainable and low-risk rollout.

Community-Driven Progress

This vibrant discussion underscores the power of the ESHOPMAN community. The detailed analysis and proposed solutions quickly translated into action, with a dedicated pull request already in progress to implement the Intl.DisplayNames approach for countries and currencies. This collaborative effort ensures that ESHOPMAN continues to evolve, offering a truly global and user-friendly experience for all its users managing their storefronts via the HubSpot application and deploying with HubSpot CMS.