feat: implement i18n

.gitignore

@@ -6,3 +6,6 @@ node_modules
 .editorconfig
 .npmrc
 .idea
+.vscode
+dist
+lib

package.json

@@ -58,6 +58,7 @@
     "webpack-cli": "^5.1.1"
   },
   "dependencies": {
+    "i18next": "^22.5.0",
     "tsyringe": "^4.7.0"
   }
 }

src/core/i18n/dictionary.interface.ts

@@ -0,0 +1,9 @@
+import { Lang } from './lang.enum';
+
+export type Dictionary = {
+  [key in Lang]?: {
+    translation: {
+      [key: string]: string;
+    };
+  };
+};

src/core/i18n/dirctionary-loader.function.ts

@@ -0,0 +1,46 @@
+import { Dictionary } from './dictionary.interface';
+import ar from '../../translations/ar.json';
+import bg from '../../translations/bg.json';
+import cs from '../../translations/cs.json';
+import de from '../../translations/de.json';
+import en from '../../translations/en.json';
+import es from '../../translations/es.json';
+import fr from '../../translations/fr.json';
+import he from '../../translations/he.json';
+import it from '../../translations/it.json';
+import ja from '../../translations/ja.json';
+import ko from '../../translations/ko.json';
+import pl from '../../translations/pl.json';
+import pt from '../../translations/pt.json';
+import ro from '../../translations/ro.json';
+import ru from '../../translations/ru.json';
+import th from '../../translations/th.json';
+import tr from '../../translations/tr.json';
+import vi from '../../translations/vi.json';
+import zhHans from '../../translations/zh_HANS.json';
+import zhHant from '../../translations/zh_HANT.json';
+
+export const loadDictionaries = (): Dictionary => {
+  return {
+    ...ar,
+    ...bg,
+    ...cs,
+    ...de,
+    ...en,
+    ...es,
+    ...fr,
+    ...he,
+    ...it,
+    ...ja,
+    ...ko,
+    ...pl,
+    ...pt,
+    ...ro,
+    ...ru,
+    ...th,
+    ...tr,
+    ...vi,
+    ...zhHans,
+    ...zhHant,
+  };
+};

src/core/i18n/lang.enum.ts

@@ -0,0 +1,23 @@
+export enum Lang {
+  AR = 'ar',
+  BG = 'bg',
+  CS = 'cs',
+  CN = 'cn',
+  DE = 'de',
+  EN = 'en',
+  ES = 'es',
+  FR = 'fr',
+  HE = 'he',
+  IT = 'it',
+  JA = 'ja',
+  KO = 'ko',
+  PL = 'pl',
+  PT = 'pt',
+  RO = 'ro',
+  RU = 'ru',
+  TH = 'th',
+  TR = 'tr',
+  VI = 'vi',
+  ZH_HANS = 'zh_HANS',
+  ZH_HANT = 'zh_HANT',
+}

src/core/i18n/localize.ts

@@ -0,0 +1,30 @@
+import i18next from 'i18next';
+import { injectable } from 'tsyringe';
+import { loadDictionaries } from './dirctionary-loader.function';
+import { Lang } from './lang.enum';
+
+@injectable()
+export class Localize {
+  public async initDictionaries(): Promise<void> {
+    await i18next.init({
+      lng: Lang.EN,
+      fallbackLng: Lang.EN,
+      supportedLngs: Object.values(Lang),
+      debug: false,
+      resources: loadDictionaries(),
+    });
+  }
+
+  public translate(key: string): string {
+    return i18next.t(key);
+  }
+
+  public async changeLang(lang: Lang): Promise<void> {
+    // fallback for legacy locale
+    if (lang === Lang.CN) {
+      lang = Lang.ZH_HANS;
+    }
+
+    await i18next.changeLanguage(lang);
+  }
+}

src/features/headless-checkout/headless-checkout.ts

@@ -1,11 +1,12 @@
+import { injectable } from 'tsyringe';
 import { PaymentMethod } from '../../core/payment-method.interface';
 import { EventName } from '../../core/post-messages-client/event-name.enum';
 import { Message } from '../../core/post-messages-client/message.interface';
 import { PostMessagesClient } from '../../core/post-messages-client/post-messages-client';
+import { Localize } from '../../core/i18n/localize';
 import { getQuickMethodsHandler } from './post-messages-handlers/get-quick-methods.handler';
 import { getRegularMethodsHandler } from './post-messages-handlers/get-regular-methods.handler';
 import { setTokenHandler } from './post-messages-handlers/set-token.handler';
-import { injectable } from 'tsyringe';
 import { headlessCheckoutAppUrl } from './variables';
 
 @injectable()
@@ -16,12 +17,17 @@ export class HeadlessCheckout {
 
   public constructor(
     private readonly window: Window,
-    private readonly postMessagesClient: PostMessagesClient
+    private readonly postMessagesClient: PostMessagesClient,
+    private readonly localize: Localize
   ) {}
 
   public async init(environment: { isWebview: boolean }): Promise<void> {
     this.isWebView = environment.isWebview;
+
     await this.setupCoreIframe();
+
+    await this.localize.initDictionaries();
+
     this.postMessagesClient.init(this.coreIframe, this.headlessAppUrl);
   }
 

src/translations/ar.json

@@ -0,0 +1,5 @@
+{
+  "ar": {
+    "translation": {}
+  }
+}

src/translations/bg.json

@@ -0,0 +1,5 @@
+{
+  "bg": {
+    "translation": {}
+  }
+}

src/translations/cs.json

@@ -0,0 +1,5 @@
+{
+  "cs": {
+    "translation": {}
+  }
+}

src/translations/de.json

@@ -0,0 +1,5 @@
+{
+  "de": {
+    "translation": {}
+  }
+}

src/translations/en.json

@@ -0,0 +1,7 @@
+{
+  "en": {
+    "translation": {
+      "hello": "Hello world!"
+    }
+  }
+}

src/translations/es.json

@@ -0,0 +1,5 @@
+{
+  "es": {
+    "translation": {}
+  }
+}

src/translations/fr.json

@@ -0,0 +1,5 @@
+{
+  "fr": {
+    "translation": {}
+  }
+}

src/translations/he.json

@@ -0,0 +1,5 @@
+{
+  "he": {
+    "translation": {}
+  }
+}

src/translations/it.json

@@ -0,0 +1,5 @@
+{
+  "it": {
+    "translation": {}
+  }
+}

src/translations/ja.json

@@ -0,0 +1,5 @@
+{
+  "ja": {
+    "translation": {}
+  }
+}

src/translations/ko.json

@@ -0,0 +1,5 @@
+{
+  "ko": {
+    "translation": {}
+  }
+}

src/translations/pl.json

@@ -0,0 +1,5 @@
+{
+  "pl": {
+    "translation": {}
+  }
+}

src/translations/pt.json

@@ -0,0 +1,5 @@
+{
+  "pt": {
+    "translation": {}
+  }
+}

src/translations/ro.json

@@ -0,0 +1,5 @@
+{
+  "ro": {
+    "translation": {}
+  }
+}

src/translations/ru.json

@@ -0,0 +1,7 @@
+{
+  "ru": {
+    "translation": {
+      "hello": "Привет мир!"
+    }
+  }
+}

src/translations/th.json

@@ -0,0 +1,5 @@
+{
+  "th": {
+    "translation": {}
+  }
+}

src/translations/tr.json

@@ -0,0 +1,5 @@
+{
+  "tr": {
+    "translation": {}
+  }
+}

src/translations/vi.json

@@ -0,0 +1,5 @@
+{
+  "vi": {
+    "translation": {}
+  }
+}

src/translations/zh_HANS.json

@@ -0,0 +1,5 @@
+{
+  "zh_HANS": {
+    "translation": {}
+  }
+}

src/translations/zh_HANT.json

@@ -0,0 +1,5 @@
+{
+  "zh_HANT": {
+    "translation": {}
+  }
+}