Localizing ESHOPMAN Admin: Ensuring Global Reach for Order Fulfillment Statuses

Unlocking Global Commerce: Localizing Order Fulfillment Statuses in ESHOPMAN Admin

As an e-commerce platform integrated deeply with HubSpot, ESHOPMAN empowers merchants to manage their storefronts and operations seamlessly. A critical aspect of serving a global customer base and supporting diverse merchant teams is robust internationalization (i18n). This means ensuring that all parts of the ESHOPMAN Admin dashboard, where merchants manage their day-to-day operations, are accurately translated into various languages.

Recently, our community identified an important oversight concerning the display of order fulfillment statuses within the ESHOPMAN Admin dashboard. While the ESHOPMAN platform, built on Node.js/TypeScript, provides a comprehensive i18n system, certain critical status indicators were found to be hardcoded in English, preventing proper localization for non-English speaking users.

The Challenge: Hardcoded Statuses Affecting Global Merchants

The issue specifically manifested in the order details page of the ESHOPMAN Admin dashboard. When viewing an order with a fulfillment, the status badges—such as "Awaiting shipping," "Delivered," or "Canceled"—would consistently appear in English, regardless of the language setting chosen for the admin interface. This creates a disjointed user experience for merchants operating in regions where English is not the primary language, potentially leading to confusion and reduced operational efficiency.

Upon investigation, the root cause was traced to a specific section within the ESHOPMAN Admin codebase responsible for rendering these fulfillment statuses. Instead of utilizing the platform's standard t() translation function, which dynamically fetches localized strings, these statuses were directly embedded as English text strings.

Affected Code Snippet (Before Fix)

The following TypeScript code snippet illustrates the original implementation where the fulfillment status strings were hardcoded:

let statusText = fulfillment.requires_shipping
  ? isPickUpFulfillment
    ? "Awaiting pickup"      // Hardcoded
    : "Awaiting shipping"    // Hardcoded
  : "Awaiting delivery"      // Hardcoded

if (fulfillment.canceled_at) {
  statusText = "Canceled"    // Hardcoded
} else if (fulfillment.delivered_at) {
  statusText = "Delivered"   // Hardcoded
} else if (fulfillment.shipped_at) {
  statusText = "Shipped"     // Hardcoded
}

This approach, while functional for English, bypasses the powerful i18n capabilities inherent in the ESHOPMAN platform, which are crucial for its global applicability and integration with HubSpot's international features.

The ESHOPMAN Solution: Embracing i18n Best Practices

The solution involves a straightforward but impactful change: replacing the hardcoded strings with calls to the t() function, referencing appropriate translation keys. This ensures that the ESHOPMAN Admin dashboard can dynamically display fulfillment statuses in the user's selected language, leveraging the platform's existing localization infrastructure.

Corrected Code Snippet (After Fix)

Here's how the code should be structured to correctly utilize ESHOPMAN's i18n system:

let statusText = fulfillment.requires_shipping
  ? isPickUpFulfillment
    ? t("orders.fulfillment.status.awaitingPickup")
    : t("orders.fulfillment.status.awaitingShipping")
  : t("orders.fulfillment.status.awaitingDelivery")

if (fulfillment.canceled_at) {
  statusText = t("orders.fulfillment.status.canceled")
} else if (fulfillment.delivered_at) {
  statusText = t("orders.fulfillment.status.delivered")
} else if (fulfillment.shipped_at) {
  statusText = t("orders.fulfillment.status.shipped")
}

By implementing this change, developers ensure that the ESHOPMAN Admin dashboard provides a fully localized experience, aligning with the platform's commitment to internationalization and enhancing usability for merchants worldwide. This fix also highlights a key best practice for ESHOPMAN developers: always use the t() function for any user-facing text to maintain consistency and support all configured languages.

Verifying the Fix

Merchants and developers can verify this fix by:

1. Setting the ESHOPMAN Admin dashboard language to any non-English language (e.g., French).
2. Navigating to the Orders section and selecting any order that includes a fulfillment.
3. Observing the fulfillment section status badge, which should now display in the selected language rather than English.

Conclusion

This community insight underscores the importance of meticulous attention to detail in platform development, especially concerning internationalization. The ESHOPMAN platform, as a powerful headless commerce solution built on Node.js/TypeScript and integrated with HubSpot CMS for storefront deployment, thrives on providing a robust and globally accessible experience. Addressing issues like hardcoded strings ensures that ESHOPMAN remains a truly international e-commerce solution, supporting merchants and their customers across all languages and regions.