feat: add i18n helper and provider

packages/app-elements/package.json

@@ -45,6 +45,9 @@
     "@types/react-datepicker": "^7.0.0",
     "@types/react-dom": "^18.3.1",
     "classnames": "^2.5.1",
+    "i18next": "^24.0.5",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-http-backend": "^3.0.1",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
@@ -55,6 +58,7 @@
     "react-datepicker": "^7.5.0",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.2",
+    "react-i18next": "^15.1.3",
     "react-select": "^5.8.3",
     "react-tooltip": "^5.28.0",
     "swr": "^2.2.5",

packages/app-elements/src/helpers/i18n.ts

@@ -0,0 +1,28 @@
+import i18n, { type i18n as I18nInstance } from 'i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import HttpBackend from 'i18next-http-backend'
+import { initReactI18next } from 'react-i18next'
+
+export const initI18n = async (
+  localeUrl: string | undefined
+): Promise<I18nInstance> => {
+  await i18n
+    .use(HttpBackend)
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+      backend: {
+        loadPath:
+          // TODO: Define the path to the i18n public files
+          localeUrl ?? 'https://cdn.commercelayer.io/i18n/{{lng}}.json'
+      },
+      fallbackLng: 'en',
+      interpolation: {
+        escapeValue: false
+      },
+      react: {
+        useSuspense: true
+      }
+    })
+  return i18n
+}

packages/app-elements/src/main.ts

@@ -21,6 +21,7 @@ export {
   timeSeparator
 } from '#helpers/date'
 export { downloadJsonAsFile } from '#helpers/downloadJsonAsFile'
+export { initI18n } from '#helpers/i18n'
 export { computeFullname, formatDisplayName } from '#helpers/name'
 export {
   formatResourceName,
@@ -61,6 +62,7 @@ export {
 export { createApp, type ClAppKey, type ClAppProps } from '#providers/createApp'
 export { ErrorBoundary } from '#providers/ErrorBoundary'
 export { GTMProvider, useTagManager } from '#providers/GTMProvider'
+export { I18NProvider } from '#providers/I18NProvider'
 export {
   MetaTags,
   TokenProvider,

packages/app-elements/src/providers/I18NProvider.tsx

@@ -0,0 +1,35 @@
+import { initI18n } from '#helpers/i18n'
+import { type i18n as I18nInstance } from 'i18next'
+import React, { type ReactNode, useEffect, useState } from 'react'
+import { I18nextProvider } from 'react-i18next'
+
+interface I18NProviderProps {
+  localeUrl?: string
+  children: ReactNode
+}
+
+export const I18NProvider: React.FC<I18NProviderProps> = ({
+  localeUrl,
+  children
+}) => {
+  const [i18nInstance, setI18nInstance] = useState<I18nInstance | undefined>()
+
+  useEffect(() => {
+    const setupI18n = async (): Promise<void> => {
+      try {
+        const instance = await initI18n(localeUrl)
+        setI18nInstance(instance)
+      } catch (error) {
+        console.error('Error initializing i18n:', error)
+      }
+    }
+
+    void setupI18n()
+  }, [localeUrl])
+
+  if (i18nInstance == null) {
+    return <div>{children}</div>
+  }
+
+  return <I18nextProvider i18n={i18nInstance}>{children}</I18nextProvider>
+}