@vtex/faststore-plugin-buyer-portal 2.0.13 → 2.0.14

package/src/features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout.tsx

@@ -6,6 +6,7 @@ import { OrgUnitDetailsNavbar } from "../../../org-units/components";
 import { HeaderInside } from "../../components";
 import Error from "../../components/Error/Error";
 import { useBuyerPortal } from "../../hooks";
+import { useLocalization } from "../../localization/LocalizationContext";
 import { getTabsLayoutConfigFromRoute } from "../../utils/routeLayoutMapping";
 import { ContractTabsLayout } from "../ContractTabsLayout/ContractTabsLayout";
 import { FinanceTabsLayout } from "../FinanceTabsLayout/FinanceTabsLayout";
@@ -50,6 +51,7 @@ export const ErrorTabsLayoutContent = ({
 );
 
 export const ErrorTabsLayout = ({ children, error }: ErrorTabsLayoutProps) => {
+  const { t } = useLocalization();
   const router = useRouter();
 
   const {
@@ -67,7 +69,8 @@ export const ErrorTabsLayout = ({ children, error }: ErrorTabsLayoutProps) => {
     return <>{children}</>;
   }
 
-  const pageTitle = layoutConfig.pageTitle;
+  const pageTitle = t(layoutConfig.pageTitle);
+  const pageName = t(layoutConfig.pageName);
 
   switch (layoutConfig.layout) {
     case "ContractTabsLayout":
@@ -77,7 +80,7 @@ export const ErrorTabsLayout = ({ children, error }: ErrorTabsLayoutProps) => {
           orgUnitId={orgUnitId}
           contractId={customerId}
           contractName={contract?.name ?? ""}
-          pageName="Contract"
+          pageName={pageName}
         >
           <ErrorTabsLayoutContent title={pageTitle} error={error} />
         </ContractTabsLayout>
@@ -85,14 +88,14 @@ export const ErrorTabsLayout = ({ children, error }: ErrorTabsLayoutProps) => {
 
     case "FinanceTabsLayout":
       return (
-        <FinanceTabsLayout pageName={layoutConfig.pageName}>
+        <FinanceTabsLayout pageName={pageName}>
           <ErrorTabsLayoutContent title={pageTitle} error={error} />
         </FinanceTabsLayout>
       );
 
     case "OrgUnitTabsLayout":
       return (
-        <OrgUnitTabsLayout pageName={layoutConfig.pageName}>
+        <OrgUnitTabsLayout pageName={pageName}>
           <ErrorTabsLayoutContent title={pageTitle} error={error} />
         </OrgUnitTabsLayout>
       );

package/src/features/shared/layouts/FinanceTabsLayout/FinanceTabsLayout.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 
 import { useBuyerPortal } from "../../hooks";
+import { useLocalization } from "../../localization/LocalizationContext";
 import { getFinanceSettingsLinks } from "../../utils";
 import { BaseTabsLayout } from "../BaseTabsLayout/BaseTabsLayout";
 
@@ -15,12 +16,16 @@ export const FinanceTabsLayout = ({
   children,
   loading = false,
 }: FinanceTabsLayoutProps) => {
+  const { t } = useLocalization();
   const { currentOrgUnit, currentUser, currentContract } = useBuyerPortal();
 
-  const verticalLinks = getFinanceSettingsLinks({
-    contractId: currentContract?.id ?? "",
-    orgUnitId: currentOrgUnit?.id ?? "",
-  });
+  const verticalLinks = getFinanceSettingsLinks(
+    {
+      contractId: currentContract?.id ?? "",
+      orgUnitId: currentOrgUnit?.id ?? "",
+    },
+    t
+  );
 
   return (
     <BaseTabsLayout data-fs-bp-finance-tabs-layout>

package/src/features/shared/layouts/LoadingTabsLayout/LoadingTabsLayout.tsx

@@ -5,6 +5,7 @@ import { Skeleton } from "@faststore/ui";
 import { OrgUnitsDetailsLayout } from "../../../org-units/layouts/OrgUnitDetailsLayout/OrgUnitDetailsLayout";
 import { HeaderInside } from "../../components";
 import { useRouterLoading } from "../../hooks";
+import { useLocalization } from "../../localization/LocalizationContext";
 import {
   getTabsLayoutConfigFromRoute,
   extractRouteParams,
@@ -33,6 +34,7 @@ export const LoadingTabsLayoutContent = ({
 );
 
 export const LoadingTabsLayout = ({ children }: LoadingTabsLayoutProps) => {
+  const { t } = useLocalization();
   const { routerLoading, nextRoute } = useRouterLoading();
   const [shouldShowLoading, setShouldShowLoading] = useState(false);
   const wasLoadingRef = useRef(false);
@@ -63,7 +65,8 @@ export const LoadingTabsLayout = ({ children }: LoadingTabsLayoutProps) => {
 
   const routeParams = extractRouteParams(nextRoute);
 
-  const pageTitle = layoutConfig.pageTitle;
+  const pageTitle = t(layoutConfig.pageTitle);
+  const pageName = t(layoutConfig.pageName);
 
   switch (layoutConfig.layout) {
     case "ContractTabsLayout":
@@ -73,7 +76,7 @@ export const LoadingTabsLayout = ({ children }: LoadingTabsLayoutProps) => {
           orgUnitId={routeParams.orgUnitId}
           contractName={""}
           contractId={routeParams.contractId}
-          pageName={layoutConfig.pageName}
+          pageName={pageName}
           loading={true}
         >
           <LoadingTabsLayoutContent title={pageTitle} />
@@ -82,14 +85,14 @@ export const LoadingTabsLayout = ({ children }: LoadingTabsLayoutProps) => {
 
     case "FinanceTabsLayout":
       return (
-        <FinanceTabsLayout pageName={layoutConfig.pageName} loading={true}>
+        <FinanceTabsLayout pageName={pageName} loading={true}>
           <LoadingTabsLayoutContent title={pageTitle} />
         </FinanceTabsLayout>
       );
 
     case "OrgUnitTabsLayout":
       return (
-        <OrgUnitTabsLayout pageName={layoutConfig.pageName} loading={true}>
+        <OrgUnitTabsLayout pageName={pageName} loading={true}>
           <LoadingTabsLayoutContent title={pageTitle} />
         </OrgUnitTabsLayout>
       );

package/src/features/shared/layouts/OrgUnitTabsLayout/OrgUnitTabLayout.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 
 import { useBuyerPortal } from "../../hooks";
+import { useLocalization } from "../../localization/LocalizationContext";
 import { getOrganizationSettingsLinks } from "../../utils";
 import { BaseTabsLayout } from "../BaseTabsLayout/BaseTabsLayout";
 
@@ -15,11 +16,13 @@ export const OrgUnitTabsLayout = ({
   children,
   loading = false,
 }: OrgUnitTabsLayoutProps) => {
+  const { t } = useLocalization();
   const { currentOrgUnit, currentUser, currentContract } = useBuyerPortal();
 
   const verticalLinks = getOrganizationSettingsLinks({
     orgUnitId: currentOrgUnit?.id ?? "",
     contractId: currentContract?.id ?? "",
+    t,
   });
 
   return (

package/src/features/shared/layouts/SumaPageLayout/FullSidebarNav.tsx

@@ -8,6 +8,7 @@ import { useListAccountingFields } from "../../../accounting-fields/hooks";
 import { checkAccountingFieldIsEmpty } from "../../../accounting-fields/utils";
 import { Icon, VerticalNav } from "../../components";
 import { useBuyerPortal, useDrawerProps } from "../../hooks";
+import { useLocalization } from "../../localization/LocalizationContext";
 import {
   getContractSettingsLinks,
   getFinanceSettingsLinks,
@@ -40,6 +41,7 @@ export const FullSidebarNav = ({
   loading = false,
 }: FullSidebarNavProps) => {
   const { currentOrgUnit, currentContract } = useBuyerPortal();
+  const { t } = useLocalization();
 
   const {
     open: openAccountingFieldDrawer,
@@ -70,11 +72,12 @@ export const FullSidebarNav = ({
     { lazy: loading }
   );
 
-  const contractMenu =
-    getContractSettingsLinks(linkParams).map(mapLinksHandler);
+  const contractMenu = getContractSettingsLinks(linkParams, t).map(
+    mapLinksHandler
+  );
 
   contractMenu.push({
-    name: "Accounting fields",
+    name: t("layouts.navigation.accountingFields"),
     loading: listAccountingFieldLoading,
     submenu: {
       items: (listAccountingFieldData ?? []).map((item) => ({
@@ -106,18 +109,21 @@ export const FullSidebarNav = ({
   const organizationMenu = getOrganizationSettingsLinks({
     orgUnitId: resolvedOrgUnitId,
     contractId: resolvedContractId,
+    t,
   });
-  const financeMenu = getFinanceSettingsLinks(linkParams);
+  const financeMenu = getFinanceSettingsLinks(linkParams, t);
 
   return (
     <>
-      <VerticalNav.Menu title={showContractTitle ? "Contract" : undefined}>
+      <VerticalNav.Menu
+        title={showContractTitle ? t("layouts.tabs.contract") : undefined}
+      >
         <VerticalNav.Tree items={contractMenu} />
       </VerticalNav.Menu>
-      <VerticalNav.Menu title="Organization">
+      <VerticalNav.Menu title={t("layouts.tabs.organization")}>
         <VerticalNav.Tree items={organizationMenu} />
       </VerticalNav.Menu>
-      <VerticalNav.Menu title="Finance and Compliance">
+      <VerticalNav.Menu title={t("layouts.tabs.financeAndCompliance")}>
         <VerticalNav.Tree items={financeMenu} />
       </VerticalNav.Menu>
 

package/src/features/shared/layouts/SumaPageLayout/SumaSidebar.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 
 import { Icon, LetterHighlight, VerticalNav } from "../../components";
 import { useBuyerPortal } from "../../hooks";
+import { useLocalization } from "../../localization/LocalizationContext";
 import { buyerPortalRoutes } from "../../utils/buyerPortalRoutes";
 import { getSumaListingSidebarLinks } from "../../utils/getSumaListingSidebarLinks";
 
@@ -23,6 +24,7 @@ export const SumaSidebar = ({
   loading = false,
 }: SumaSidebarProps) => {
   const { featureFlags, currentContract } = useBuyerPortal();
+  const { t } = useLocalization();
   const contractsUrl = buyerPortalRoutes.contracts({ orgUnitId });
 
   const contractName = currentContract?.name ?? currentContract?.email ?? "";
@@ -64,11 +66,13 @@ export const SumaSidebar = ({
 
       {variant === "listing" ? (
         <VerticalNav.Menu>
-          {getSumaListingSidebarLinks({ orgUnitId, contractId }).map((item) => (
-            <VerticalNav.Link key={item.link} link={item.link}>
-              {item.name}
-            </VerticalNav.Link>
-          ))}
+          {getSumaListingSidebarLinks({ orgUnitId, contractId }, t).map(
+            (item) => (
+              <VerticalNav.Link key={item.link} link={item.link}>
+                {item.name}
+              </VerticalNav.Link>
+            )
+          )}
         </VerticalNav.Menu>
       ) : (
         <FullSidebarNav

package/src/features/shared/localization/LocalizationContext.tsx

@@ -0,0 +1,35 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+import { createLocalize } from "./createLocalize";
+
+import type { LabelMap, LocalizeFn } from "./types";
+
+type LocalizationContextType = { t: LocalizeFn; labels: LabelMap };
+
+const LocalizationContext = createContext<LocalizationContextType | undefined>(
+  undefined
+);
+
+export const LocalizationProvider = ({
+  labels,
+  children,
+}: {
+  labels: LabelMap;
+  children: ReactNode;
+}) => {
+  const value = useMemo<LocalizationContextType>(
+    () => ({ labels, t: createLocalize(labels) }),
+    [labels]
+  );
+  return (
+    <LocalizationContext.Provider value={value}>
+      {children}
+    </LocalizationContext.Provider>
+  );
+};
+
+export const useLocalization = (): LocalizationContextType => {
+  const ctx = useContext(LocalizationContext);
+  // Defensive fallback: t() never crashes outside a provider.
+  return ctx ?? { labels: {}, t: createLocalize({}) };
+};

package/src/features/shared/localization/__tests__/createLocalize.test.ts

@@ -0,0 +1,166 @@
+import type { ReactNode } from "react";
+
+import { describe, expect, it } from "vitest";
+
+import { createLocalize } from "../createLocalize";
+
+describe("createLocalize", () => {
+  describe("US-1: static label lookup", () => {
+    it("returns the translated value when the key exists", () => {
+      const t = createLocalize({ "feature.group.name": "Group Name" });
+      expect(t("feature.group.name")).toBe("Group Name");
+    });
+
+    it("returns the key itself when the key is not found (fallback)", () => {
+      const t = createLocalize({});
+      expect(t("feature.group.name")).toBe("feature.group.name");
+    });
+
+    it("returns the key itself when labels map is empty", () => {
+      const t = createLocalize({});
+      expect(t("any.key")).toBe("any.key");
+    });
+  });
+
+  describe("US-2: index-based interpolation", () => {
+    it("substitutes all placeholders — happy path", () => {
+      const t = createLocalize({
+        "shared.pagination.label": "De {0} a {1} itens de {2}",
+      });
+      expect(t("shared.pagination.label", [1, 25, 100])).toBe(
+        "De 1 a 25 itens de 100"
+      );
+    });
+
+    it("leaves a placeholder untouched when the index has no interpolation value", () => {
+      const t = createLocalize({ msg: "Hello {0} {1}" });
+      expect(t("msg", ["world"])).toBe("Hello world {1}");
+    });
+
+    it("ignores extra interpolation values (no error thrown)", () => {
+      const t = createLocalize({ msg: "Hello {0}" });
+      expect(t("msg", ["world", "extra", "ignored"])).toBe("Hello world");
+    });
+
+    it("returns the template unchanged when interpolations array is empty", () => {
+      const t = createLocalize({ msg: "Hello {0}" });
+      expect(t("msg", [])).toBe("Hello {0}");
+    });
+
+    it("returns the template unchanged when no interpolations are passed", () => {
+      const t = createLocalize({ msg: "Static label" });
+      expect(t("msg")).toBe("Static label");
+    });
+
+    it("supports numeric interpolation values", () => {
+      const t = createLocalize({ count: "{0} items" });
+      expect(t("count", [42])).toBe("42 items");
+    });
+
+    it("falls back to the key even when interpolations are provided", () => {
+      const t = createLocalize({});
+      expect(t("missing.key", [1, 2])).toBe("missing.key");
+    });
+  });
+
+  describe("Key Scenarios coverage", () => {
+    it("Key scenario: error case — returns key for any.key when labels are empty", () => {
+      const t = createLocalize({});
+      expect(t("any.key")).toBe("any.key");
+    });
+
+    it("Key scenario: edge case — unknown.key returns itself", () => {
+      const t = createLocalize({ "other.key": "value" });
+      expect(t("unknown.key")).toBe("unknown.key");
+    });
+
+    it("Key scenario: placeholder without value leaves token intact", () => {
+      const t = createLocalize({ msg: "Hello {0} {1}" });
+      expect(t("msg", ["world"])).toBe("Hello world {1}");
+    });
+  });
+
+  describe("ReactNode interpolation", () => {
+    const node = {
+      type: "a",
+      props: { href: "/path" },
+      children: "link",
+    } as unknown as ReactNode;
+
+    it("returns an array when at least one interpolation is a ReactNode", () => {
+      const t = createLocalize({ msg: "Click {0} here" });
+      const result = t("msg", [node]);
+      expect(Array.isArray(result)).toBe(true);
+    });
+
+    it("interleaves text segments and nodes in order", () => {
+      const t = createLocalize({ msg: "Click {0} here" });
+      expect(t("msg", [node])).toEqual(["Click ", node, " here"]);
+    });
+
+    it("handles a node at the very start of the template", () => {
+      const t = createLocalize({ msg: "{0} was deleted" });
+      expect(t("msg", [node])).toEqual([node, " was deleted"]);
+    });
+
+    it("handles a node at the very end of the template", () => {
+      const t = createLocalize({ msg: "Delete {0}" });
+      expect(t("msg", [node])).toEqual(["Delete ", node]);
+    });
+
+    it("supports multiple ReactNode placeholders in one template", () => {
+      const node1 = {
+        type: "strong",
+        props: { key: "email" },
+        children: "email",
+      } as unknown as ReactNode;
+      const node2 = {
+        type: "strong",
+        props: { key: "user" },
+        children: "user",
+      } as unknown as ReactNode;
+      const t = createLocalize({
+        msg: "The email {0} belongs to {1}.",
+      });
+      expect(t("msg", [node1, node2])).toEqual([
+        "The email ",
+        node1,
+        " belongs to ",
+        node2,
+        ".",
+      ]);
+    });
+
+    it("allows mixing ReactNode and string interpolations", () => {
+      // String values in a mixed array are treated as individual ReactNode
+      // segments — each is its own array element, not concatenated.
+      const t = createLocalize({ msg: "Add {0} to {1} from {2}." });
+      expect(t("msg", [node, "OrgA", "OrgB"])).toEqual([
+        "Add ",
+        node,
+        " to ",
+        "OrgA",
+        " from ",
+        "OrgB",
+        ".",
+      ]);
+    });
+
+    it("leaves a placeholder token intact when the index has no value", () => {
+      // The text before the missing placeholder and the placeholder token
+      // itself become separate array elements.
+      const t = createLocalize({ msg: "Hello {0} and {1}" });
+      expect(t("msg", [node])).toEqual(["Hello ", node, " and ", "{1}"]);
+    });
+
+    it("falls back to key (string) even when ReactNode interpolations are provided", () => {
+      const t = createLocalize({});
+      expect(t("missing.key", [node])).toBe("missing.key");
+    });
+
+    it("returns the template string as a single-element array when no placeholders exist", () => {
+      const t = createLocalize({ msg: "Static label" });
+      expect(t("msg", [node])).toEqual(["Static label"]);
+    });
+  });
+});

package/src/features/shared/localization/__tests__/get-localization-labels.service.test.ts

@@ -0,0 +1,202 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// Mock LocalizationClient before any service import
+vi.mock("../clients/LocalizationClient", () => ({
+  localizationClient: { getEntry: vi.fn() },
+}));
+
+import * as loggerModule from "../../services/logger";
+import { localizationClient } from "../clients/LocalizationClient";
+import { LOCALIZATION_ENTRY_IDS } from "../constants";
+import {
+  _resetLocalizationCache,
+  getLocalizationLabelsService,
+} from "../services/get-localization-labels.service";
+
+const mockGetEntry = vi.mocked(localizationClient.getEntry);
+
+const makeApiResponse = (labels: Array<{ key: string; value: string }>) => ({
+  locale_metadata: {
+    code: "en",
+    locale: "en-US",
+    language: {
+      name: "English",
+      language_code: "en",
+      native_name: "English",
+      script: "Latin",
+      text_direction: "ltr",
+      utf_encoding: "UTF-8",
+    },
+    region: {
+      name: "United States",
+      flag: "🇺🇸",
+      country_code: "US",
+      continent: "North America",
+      date_format: "MM/DD/YYYY",
+      time_format: "12h",
+      time_format_mask: "hh:mm A",
+      unit_system: "imperial",
+      default_timezone: "America/New_York",
+    },
+  },
+  labels,
+});
+
+describe("getLocalizationLabelsService", () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let logErrorSpy: any;
+
+  beforeEach(() => {
+    _resetLocalizationCache();
+    vi.clearAllMocks();
+    logErrorSpy = vi
+      .spyOn(loggerModule, "logError")
+      .mockResolvedValue(undefined);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe("US-3: server-side label fetching", () => {
+    it("transforms the labels array into a flat key-value map (O(1) lookups)", async () => {
+      mockGetEntry.mockResolvedValue(
+        makeApiResponse([
+          { key: "org-units.title", value: "Org Units" },
+          { key: "org-units.empty", value: "No units found" },
+        ])
+      );
+
+      const result = await getLocalizationLabelsService({
+        entryIds: LOCALIZATION_ENTRY_IDS.orgUnits,
+      });
+
+      expect(result["org-units.title"]).toBe("Org Units");
+      expect(result["org-units.empty"]).toBe("No units found");
+    });
+
+    it("always merges the shared entry automatically", async () => {
+      mockGetEntry
+        .mockResolvedValueOnce(
+          makeApiResponse([{ key: "shared.save", value: "Save" }])
+        )
+        .mockResolvedValueOnce(
+          makeApiResponse([{ key: "org-units.title", value: "Org Units" }])
+        );
+
+      const result = await getLocalizationLabelsService({
+        entryIds: LOCALIZATION_ENTRY_IDS.orgUnits,
+      });
+
+      expect(result["shared.save"]).toBe("Save");
+      expect(result["org-units.title"]).toBe("Org Units");
+    });
+
+    it("does not call the endpoint twice for shared when it is explicitly passed too", async () => {
+      mockGetEntry.mockResolvedValue(
+        makeApiResponse([{ key: "shared.save", value: "Save" }])
+      );
+
+      await getLocalizationLabelsService({
+        entryIds: [
+          LOCALIZATION_ENTRY_IDS.shared,
+          LOCALIZATION_ENTRY_IDS.shared,
+        ],
+      });
+
+      // De-duplication: only one call despite passing shared twice
+      expect(mockGetEntry).toHaveBeenCalledTimes(1);
+    });
+
+    it("accepts an array of entry IDs and merges all maps", async () => {
+      mockGetEntry
+        .mockResolvedValueOnce(
+          makeApiResponse([{ key: "shared.save", value: "Save" }])
+        )
+        .mockResolvedValueOnce(
+          makeApiResponse([{ key: "users.title", value: "Users" }])
+        )
+        .mockResolvedValueOnce(
+          makeApiResponse([{ key: "org-units.title", value: "Org Units" }])
+        );
+
+      const result = await getLocalizationLabelsService({
+        entryIds: [
+          LOCALIZATION_ENTRY_IDS.users,
+          LOCALIZATION_ENTRY_IDS.orgUnits,
+        ],
+      });
+
+      expect(result["shared.save"]).toBe("Save");
+      expect(result["users.title"]).toBe("Users");
+      expect(result["org-units.title"]).toBe("Org Units");
+    });
+
+    it("returns an empty map and logs an error when the fetch fails (graceful fallback)", async () => {
+      const fetchError = new Error("Network error");
+      mockGetEntry.mockRejectedValue(fetchError);
+
+      const result = await getLocalizationLabelsService({
+        entryIds: LOCALIZATION_ENTRY_IDS.orgUnits,
+      });
+
+      expect(result).toEqual({});
+      expect(logErrorSpy).toHaveBeenCalledWith(
+        "Failed to fetch localization labels",
+        expect.objectContaining({
+          error_message: "Network error",
+        })
+      );
+    });
+
+    it("does not throw even when the fetch fails", async () => {
+      mockGetEntry.mockRejectedValue(new Error("5xx"));
+
+      await expect(
+        getLocalizationLabelsService({
+          entryIds: LOCALIZATION_ENTRY_IDS.orgUnits,
+        })
+      ).resolves.toEqual({});
+    });
+
+    it("returns an empty map and logs an error for non-Error rejections", async () => {
+      mockGetEntry.mockRejectedValue("string-error");
+
+      const result = await getLocalizationLabelsService({
+        entryIds: LOCALIZATION_ENTRY_IDS.orgUnits,
+      });
+
+      expect(result).toEqual({});
+      expect(logErrorSpy).toHaveBeenCalledWith(
+        "Failed to fetch localization labels",
+        expect.objectContaining({ error_message: "string-error" })
+      );
+    });
+
+    it("retries the fetch on the next call after a transient failure (no sticky empty cache)", async () => {
+      // First call: both entries (shared + orgUnits) fail
+      mockGetEntry
+        .mockRejectedValueOnce(new Error("transient error")) // shared
+        .mockRejectedValueOnce(new Error("transient error")); // orgUnits
+
+      const first = await getLocalizationLabelsService({
+        entryIds: LOCALIZATION_ENTRY_IDS.orgUnits,
+      });
+      expect(first).toEqual({});
+
+      // Second call: both entries succeed — must NOT return the cached empty fallback
+      mockGetEntry
+        .mockResolvedValueOnce(
+          makeApiResponse([{ key: "shared.save", value: "Save" }])
+        )
+        .mockResolvedValueOnce(
+          makeApiResponse([{ key: "org-units.title", value: "Org Units" }])
+        );
+
+      const second = await getLocalizationLabelsService({
+        entryIds: LOCALIZATION_ENTRY_IDS.orgUnits,
+      });
+      expect(second["org-units.title"]).toBe("Org Units");
+    });
+  });
+});

package/src/features/shared/localization/clients/LocalizationClient.ts

@@ -0,0 +1,19 @@
+import { Client } from "../../clients/Client";
+import { LOCALIZATION_BASE_URL } from "../constants";
+
+import type { LocalizationLocaleDataType } from "../types";
+
+export class LocalizationClient extends Client {
+  constructor() {
+    super(LOCALIZATION_BASE_URL);
+  }
+
+  getEntry(entryId: string, locale: string = "") {
+    return this.get<LocalizationLocaleDataType>(`/entries/${entryId}`, {
+      params: { locale },
+      componentName: "LocalizationClient",
+    });
+  }
+}
+
+export const localizationClient = new LocalizationClient();