Fix tests and strong-type locales (#57)

* Add new event type

* Add state handling for locale change

* Add strongly typed language codes

* fix tests

src/app-bridge/app-bridge-provider.test.tsx

@@ -133,6 +133,7 @@ describe("useAppBridge hook", () => {
         path: "",
         ready: false,
         theme: "light",
+        locale: "en",
       });
     });
   });

src/app-bridge/app-bridge-state.ts

@@ -1,3 +1,4 @@
+import { LocaleCode } from "../locales";
 import { ThemeType } from "./events";
 
 export type AppBridgeState = {
@@ -7,11 +8,11 @@ export type AppBridgeState = {
   domain: string;
   path: string;
   theme: ThemeType;
-  locale: string;
+  locale: LocaleCode;
 };
 
 type Options = {
-  initialLocale?: string;
+  initialLocale?: LocaleCode;
 };
 
 export class AppBridgeStateContainer {

src/app-bridge/app-bridge.test.ts

@@ -1,6 +1,10 @@
 import { fireEvent } from "@testing-library/dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
+import { LocaleCode } from "../locales";
+// eslint-disable-next-line
+import { actions, AppBridge, DispatchResponseEvent, HandshakeEvent, ThemeEvent } from ".";
+
 // mock document.referrer
 const origin = "http://example.com";
 const domain = "saleor.domain.host";
@@ -17,9 +21,6 @@ Object.defineProperty(window, "location", {
   writable: true,
 });
 
-// eslint-disable-next-line
-import { actions, DispatchResponseEvent, HandshakeEvent, AppBridge, ThemeEvent } from ".";
-
 const handshakeEvent: HandshakeEvent = {
   payload: {
     token: "mock-token",
@@ -211,4 +212,12 @@ describe("AppBridge", () => {
 
     expect(appBridge.getState().domain).toEqual("https://foo.bar");
   });
+
+  it.each<LocaleCode>(["pl", "en", "it"])("sets initial locale \"%s\" from constructor", (locale) => {
+    const instance = new AppBridge({
+      initialLocale: locale,
+    });
+
+    expect(instance.getState().locale).toBe(locale);
+  });
 });

src/app-bridge/app-bridge.ts

@@ -1,5 +1,6 @@
 import debugPkg from "debug";
 
+import { LocaleCode } from "../locales";
 import { Actions } from "./actions";
 import { AppBridgeState, AppBridgeStateContainer } from "./app-bridge-state";
 import { SSR } from "./constants";
@@ -67,6 +68,7 @@ const createEmptySubscribeMap = (): SubscribeMap => ({
 
 export type AppBridgeOptions = {
   targetDomain?: string;
+  initialLocale?: LocaleCode;
 };
 
 const getDefaultOptions = (): AppBridgeOptions => ({
@@ -74,7 +76,7 @@ const getDefaultOptions = (): AppBridgeOptions => ({
 });
 
 export class AppBridge {
-  private state = new AppBridgeStateContainer();
+  private state: AppBridgeStateContainer;
 
   private refererOrigin = document.referrer ? new URL(document.referrer).origin : undefined;
 
@@ -91,6 +93,10 @@ export class AppBridge {
       );
     }
 
+    this.state = new AppBridgeStateContainer({
+      initialLocale: options.initialLocale,
+    });
+
     this.combinedOptions = {
       ...this.combinedOptions,
       ...options,

src/app-bridge/events.ts

@@ -1,3 +1,4 @@
+import { LocaleCode } from "../locales";
 import { Values } from "./helpers";
 
 export type Version = 1;
@@ -51,7 +52,7 @@ export type ThemeEvent = Event<
 export type LocaleChangedEvent = Event<
   "localeChanged",
   {
-    locale: string;
+    locale: LocaleCode;
   }
 >;
 

src/const.ts

@@ -2,3 +2,5 @@ export const SALEOR_DOMAIN_HEADER = "saleor-domain";
 export const SALEOR_EVENT_HEADER = "saleor-event";
 export const SALEOR_SIGNATURE_HEADER = "saleor-signature";
 export const SALEOR_AUTHORIZATION_BEARER_HEADER = "authorization-bearer";
+
+export * from "./locales";

src/index.ts

@@ -6,6 +6,9 @@ const capitalize = (value: string) => value.charAt(0).toUpperCase() + value.slic
 
 const dropFileExtension = (filename: string) => path.parse(filename).name;
 
+/**
+ * @deprecated remove magic
+ */
 export const inferWebhooks = async (
   baseURL: string,
   webhooksPath: string,

src/locales.ts

@@ -0,0 +1,47 @@
+/**
+ * Available locales in Saleor Dashboard.
+ * TODO: Extract to shared package between Dashboard and sdk, so this stay in sync?
+ */
+export type LocaleCode =
+  | "ar"
+  | "az"
+  | "bg"
+  | "bn"
+  | "ca"
+  | "cs"
+  | "da"
+  | "de"
+  | "el"
+  | "en"
+  | "es"
+  | "es-CO"
+  | "et"
+  | "fa"
+  | "fr"
+  | "hi"
+  | "hu"
+  | "hy"
+  | "id"
+  | "is"
+  | "it"
+  | "ja"
+  | "ko"
+  | "mn"
+  | "nb"
+  | "nl"
+  | "pl"
+  | "pt"
+  | "pt-BR"
+  | "ro"
+  | "ru"
+  | "sk"
+  | "sl"
+  | "sq"
+  | "sr"
+  | "sv"
+  | "th"
+  | "tr"
+  | "uk"
+  | "vi"
+  | "zh-Hans"
+  | "zh-Hant";