Merge pull request #2 from xsolla/PAYMENTS-18897

feat(PAYMENTS-18897): infrastructure for translations

.eslintrc.cjs

@@ -14,6 +14,9 @@ module.exports = {
     tsconfigRootDir: __dirname,
   },
   settings: {
+    react: {
+      version: "18",
+    },
     'import/resolver': {
       alias: {
         // Resolve Vite public path like: import logo from "/brand-logo_xsolla.png"
@@ -27,6 +30,7 @@ module.exports = {
   },
   rules: {
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    'react/react-in-jsx-scope': ['off'],
   },
   overrides: [
     {

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-intl": "^6.6.5",
     "react-router-dom": "^6.20.0",
     "styled-components": "^5.2.0",
     "zod": "^3.22.4"

src/App.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import Layout from './layout.tsx';
 import { NoMatch } from './routes/not-found';
 import { Home } from './routes/home';
+import { LocalizationContextProvider } from './app/contexts/localization-context/localization-context-provider.tsx';
 
 const router = createBrowserRouter([
   {
@@ -22,5 +22,9 @@ const router = createBrowserRouter([
 ]);
 
 export default function App() {
-  return <RouterProvider router={router} />;
+  return (
+    <LocalizationContextProvider>
+      <RouterProvider router={router} />
+    </LocalizationContextProvider>
+  );
 }

src/app/contexts/localization-context/localization-context-provider.tsx

@@ -0,0 +1,22 @@
+import React, { FC, ReactNode, useEffect, useState } from 'react';
+import { LocalizationContext } from './localization-context.ts';
+import { Languages } from '../../localization/languages.enum.ts';
+import { loadMessages } from '../../localization/load-localization.ts';
+import { IntlProvider } from 'react-intl';
+
+export const LocalizationContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const [currentLocale, setCurrentLocale] = useState<Languages>(Languages.EN);
+  const [messages, setMessages] = useState(null);
+
+  useEffect(() => {
+    loadMessages(currentLocale).then((data) => setMessages(data.default));
+  }, [currentLocale]);
+
+  return (
+    <LocalizationContext.Provider value={{ currentLocale, setCurrentLocale }}>
+      <IntlProvider locale={currentLocale} messages={messages}>
+        {messages && children}
+      </IntlProvider>
+    </LocalizationContext.Provider>
+  );
+};

src/app/contexts/localization-context/localization-context.interface.ts

@@ -0,0 +1,7 @@
+import { Languages } from '../../localization/languages.enum.ts';
+import { Dispatch, SetStateAction } from 'react';
+
+export interface ILocalizationContext {
+  currentLocale: Languages;
+  setCurrentLocale: Dispatch<SetStateAction<Languages>>;
+}

src/app/contexts/localization-context/localization-context.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ILocalizationContext } from './localization-context.interface.ts';
+
+export const LocalizationContext = React.createContext<ILocalizationContext>(
+  {} as ILocalizationContext,
+);

src/app/localization/languages.enum.ts

@@ -0,0 +1,11 @@
+export enum Languages {
+  CN = 'cn',
+  DE = 'de',
+  EN = 'en',
+  ES = 'es',
+  FR = 'fr',
+  JA = 'ja',
+  KO = 'ko',
+  PT = 'pt',
+  RU = 'ru',
+}

src/app/localization/load-localization.ts

@@ -0,0 +1,28 @@
+import { Languages } from './languages.enum.ts';
+
+export async function loadMessages(
+  locale: Languages,
+): Promise<{ default: Record<string, string> }> {
+  switch (locale) {
+    case Languages.CN:
+      return import(`@translations/cn.json`);
+    case Languages.DE:
+      return import(`@translations/de.json`);
+    case Languages.EN:
+      return import(`@translations/en.json`);
+    case Languages.ES:
+      return import(`@translations/es.json`);
+    case Languages.FR:
+      return import(`@translations/fr.json`);
+    case Languages.JA:
+      return import(`@translations/ja.json`);
+    case Languages.KO:
+      return import(`@translations/ko.json`);
+    case Languages.PT:
+      return import(`@translations/pt.json`);
+    case Languages.RU:
+      return import(`@translations/ru.json`);
+    default:
+      return import(`@translations/en.json`);
+  }
+}

src/layout.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link, Outlet } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
 
 export default function Layout() {
   return (
@@ -8,6 +9,7 @@ export default function Layout() {
         <ul>
           <li>
             <Link to='/'>Home</Link>
+            <FormattedMessage id={'hello-world'} defaultMessage={'Hello world'}></FormattedMessage>
           </li>
         </ul>
       </nav>

src/translations/cn.json

@@ -0,0 +1,3 @@
+{
+  "hello-world": "Hello world"
+}

src/translations/de.json

@@ -0,0 +1,3 @@
+{
+  "hello-world": "Hello world"
+}

src/translations/en.json

@@ -0,0 +1,3 @@
+{
+  "hello-world": "Hello world"
+}

src/translations/es.json

@@ -0,0 +1,3 @@
+{
+  "hello-world": "Hello world"
+}

src/translations/fr.json

@@ -0,0 +1,3 @@
+{
+  "hello-world": "Hello world"
+}

src/translations/ja.json

@@ -0,0 +1,3 @@
+{
+  "hello-world": "Hello world"
+}

src/translations/ko.json

@@ -0,0 +1,3 @@
+{
+  "hello-world": "Hello world"
+}

src/translations/pt.json

@@ -0,0 +1,3 @@
+{
+  "hello-world": "Hello world"
+}

src/translations/ru.json

@@ -0,0 +1,3 @@
+{
+  "hello-world": "Привет мир"
+}