@jobber/components-native 0.109.1 → 0.111.0

package/src/hooks/useAtlantisI18n/useAtlantisI18n.test.ts

@@ -2,6 +2,7 @@ import { renderHook } from "@testing-library/react-native";
 import { useAtlantisI18n } from ".";
 import en from "./locales/en.json";
 import es from "./locales/es.json";
+import * as releasedLanguages from "./releasedLanguages";
 import * as context from "../../AtlantisContext";
 
 jest.mock("../../AtlantisContext", () => ({
@@ -10,6 +11,14 @@ jest.mock("../../AtlantisContext", () => ({
   ...jest.requireActual("../../AtlantisContext"),
 }));
 
+// Mock releasedLanguages so that jest.spyOn can reliably intercept calls from
+// inside the hook. Without this, Babel may resolve the named import as a local
+// binding at module load time, bypassing any spy set up afterwards.
+jest.mock("./releasedLanguages", () => ({
+  __esModule: true,
+  ...jest.requireActual("./releasedLanguages"),
+}));
+
 const spy = jest.spyOn(context, "useAtlantisContext");
 const testDate = new Date("2020-01-01T00:00:00.000Z");
 const dateAfterSpringForward = new Date("2020-04-10T00:00:00.000Z");
@@ -34,7 +43,21 @@ describe("useAtlantisI18n", () => {
     );
   });
 
+  // These tests bypass the release gate via a spy so we can validate Spanish
+  // string correctness as the feature is built, independently of RELEASED_LANGUAGES.
   describe("Español", () => {
+    let getReleasedLocaleSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      getReleasedLocaleSpy = jest
+        .spyOn(releasedLanguages, "getReleasedLocale")
+        .mockImplementation(locale => locale);
+    });
+
+    afterEach(() => {
+      getReleasedLocaleSpy.mockRestore();
+    });
+
     it("should return español", () => {
       spy.mockReturnValueOnce({
         ...context.atlantisContextDefaultValues,
@@ -44,17 +67,191 @@ describe("useAtlantisI18n", () => {
 
       expect(result.current.t("cancel")).toBe("Cancelar");
     });
-  });
 
-  describe("Unsupported language", () => {
-    it("should return the english translation", () => {
+    it("should return español for regional variant es-US", () => {
       spy.mockReturnValueOnce({
         ...context.atlantisContextDefaultValues,
-        locale: "fr",
+        locale: "es-US",
       });
       const { result } = renderHook(useAtlantisI18n);
 
-      expect(result.current.t("cancel")).toBe("Cancel");
+      expect(result.current.t("cancel")).toBe("Cancelar");
+    });
+
+    describe("formatDate", () => {
+      it("should return the date formatted for es", () => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          locale: "es",
+        });
+
+        const { result } = renderHook(useAtlantisI18n);
+        expect(result.current.formatDate(testDate)).toBe("1 ene 2020");
+      });
+    });
+
+    describe("formatTime", () => {
+      it("should return the time formatted for es", () => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          locale: "es",
+        });
+
+        const { result } = renderHook(useAtlantisI18n);
+        expect(result.current.formatTime(testDate)).toBe("00:00");
+      });
+    });
+  });
+
+  describe("RELEASED_LANGUAGES fallback", () => {
+    describe("unsupported language (fr)", () => {
+      it("should return 'en' as the locale", () => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          locale: "fr",
+        });
+        const { result } = renderHook(useAtlantisI18n);
+
+        expect(result.current.locale).toBe("en");
+      });
+
+      it("should return english translations", () => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          locale: "fr",
+        });
+        const { result } = renderHook(useAtlantisI18n);
+
+        expect(result.current.t("cancel")).toBe("Cancel");
+      });
+    });
+
+    describe("es-US (unreleased locale variant)", () => {
+      it("should return 'en' as the locale", () => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          locale: "es-US",
+        });
+        const { result } = renderHook(useAtlantisI18n);
+
+        expect(result.current.locale).toBe("en");
+      });
+
+      it("should return english translations", () => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          locale: "es-US",
+        });
+        const { result } = renderHook(useAtlantisI18n);
+
+        expect(result.current.t("cancel")).toBe("Cancel");
+      });
+
+      it("should format date using english locale", () => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          locale: "es-US",
+        });
+        const { result } = renderHook(useAtlantisI18n);
+
+        expect(result.current.formatDate(testDate)).toBe("Jan 1, 2020");
+      });
+
+      it("should format time using english locale", () => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          locale: "es-US",
+        });
+        const { result } = renderHook(useAtlantisI18n);
+
+        expect(result.current.formatTime(testDate)).toBe("12:00 AM");
+      });
+    });
+
+    describe("es (not yet released)", () => {
+      it("should return 'en' as the locale", () => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          locale: "es",
+        });
+        const { result } = renderHook(useAtlantisI18n);
+
+        expect(result.current.locale).toBe("en");
+      });
+
+      it("should return english translations", () => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          locale: "es",
+        });
+        const { result } = renderHook(useAtlantisI18n);
+
+        expect(result.current.t("cancel")).toBe("Cancel");
+      });
+
+      it("should format date using english locale", () => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          locale: "es",
+        });
+        const { result } = renderHook(useAtlantisI18n);
+
+        expect(result.current.formatDate(testDate)).toBe("Jan 1, 2020");
+      });
+
+      it("should format time using english locale", () => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          locale: "es",
+        });
+        const { result } = renderHook(useAtlantisI18n);
+
+        expect(result.current.formatTime(testDate)).toBe("12:00 AM");
+      });
+    });
+
+    describe("en-CA (released language, regional variant)", () => {
+      it("should preserve the full locale for date formatting", () => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          locale: "en-CA",
+        });
+        const { result } = renderHook(useAtlantisI18n);
+
+        expect(result.current.locale).toBe("en-CA");
+      });
+
+      it("should return english translations", () => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          locale: "en-CA",
+        });
+        const { result } = renderHook(useAtlantisI18n);
+
+        expect(result.current.t("cancel")).toBe("Cancel");
+      });
+    });
+
+    describe("en-GB (released language, regional variant)", () => {
+      it("should preserve the full locale for date formatting", () => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          locale: "en-GB",
+        });
+        const { result } = renderHook(useAtlantisI18n);
+
+        expect(result.current.locale).toBe("en-GB");
+      });
+
+      it("should return english translations", () => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          locale: "en-GB",
+        });
+        const { result } = renderHook(useAtlantisI18n);
+
+        expect(result.current.t("cancel")).toBe("Cancel");
+      });
     });
   });
 
@@ -70,16 +267,6 @@ describe("useAtlantisI18n", () => {
       expect(result.current.formatDate(testDate)).toBe("Jan 1, 2020");
     });
 
-    it("should return the date formatted for es", () => {
-      spy.mockReturnValueOnce({
-        ...context.atlantisContextDefaultValues,
-        locale: "es",
-      });
-
-      const { result } = renderHook(useAtlantisI18n);
-      expect(result.current.formatDate(testDate)).toBe("1 ene 2020");
-    });
-
     describe("Timezone", () => {
       it.each([
         ["America/New_York", "Dec 31, 2019"],
@@ -105,16 +292,6 @@ describe("useAtlantisI18n", () => {
       expect(result.current.formatTime(testDate)).toBe("12:00 AM");
     });
 
-    it("should return the date formatted for es", () => {
-      spy.mockReturnValueOnce({
-        ...context.atlantisContextDefaultValues,
-        locale: "es",
-      });
-
-      const { result } = renderHook(useAtlantisI18n);
-      expect(result.current.formatTime(testDate)).toBe("00:00");
-    });
-
     describe("Timezone", () => {
       it.each([
         ["America/New_York", "7:00 PM"],

package/src/hooks/useAtlantisI18n/useAtlantisI18n.ts

@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import en from "./locales/en.json";
 import es from "./locales/es.json";
+import { getReleasedLocale } from "./releasedLanguages";
 import { dateFormatter } from "./utils/dateFormatter";
 import { useAtlantisContext } from "../../AtlantisContext";
 
@@ -8,7 +9,9 @@ export type I18nKeys = keyof typeof en;
 
 export interface useAtlantisI18nValue {
   /**
-   * The set locale based on the AtlantisContext.
+   * The effective locale, resolved from the AtlantisContext locale against the
+   * list of released languages. Regional variants (e.g. "en-CA") are preserved
+   * when their language is released. Unreleased locales fall back to "en".
    */
   readonly locale: string;
 
@@ -32,7 +35,14 @@ export interface useAtlantisI18nValue {
 }
 
 export function useAtlantisI18n(): useAtlantisI18nValue {
-  const { locale, dateFormat, timeFormat, timeZone } = useAtlantisContext();
+  const {
+    locale: contextLocale,
+    dateFormat,
+    timeFormat,
+    timeZone,
+  } = useAtlantisContext();
+
+  const locale = getReleasedLocale(contextLocale);
 
   const t = useCallback(
     (messageKey: keyof typeof en, values?: Record<string, string>) =>
@@ -54,7 +64,7 @@ export function useAtlantisI18n(): useAtlantisI18nValue {
 }
 
 function getLocalizedStrings(locale: string): typeof en {
-  switch (locale) {
+  switch (locale.split("-")[0]) {
     case "es":
       return es;
     default:

package/src/index.ts

@@ -37,6 +37,7 @@ export * from "./InputSearch";
 export * from "./InputText";
 export * from "./InputTime";
 export * from "./ProgressBar";
+export * from "./ProgressIndicator";
 export * from "./Select";
 export * from "./StatusLabel";
 export * from "./Switch";

package/src/utils/meta/meta.json

@@ -59,6 +59,7 @@
     "InputTime",
     "Option",
     "ProgressBar",
+    "ProgressIndicator",
     "Select",
     "Select.Content",
     "Select.Group",