From b28bffa9afcc69d6b42f21f603948aebfd188473 Mon Sep 17 00:00:00 2001
From: Jonas Hungershausen <jonas.hungershausen@ory.sh>
Date: Tue, 5 Nov 2024 18:07:28 +0100
Subject: [PATCH] fix: replace translation merge with custom function (#264)

---
 .../__snapshots__/intl-context.spec.tsx.snap  | 19 ++++++++
 .../src/context/intl-context.spec.tsx         | 46 +++++++++++++++++++
 .../src/context/intl-context.tsx              | 10 +++-
 3 files changed, 73 insertions(+), 2 deletions(-)
 create mode 100644 packages/elements-react/src/context/__snapshots__/intl-context.spec.tsx.snap
 create mode 100644 packages/elements-react/src/context/intl-context.spec.tsx

diff --git a/packages/elements-react/src/context/__snapshots__/intl-context.spec.tsx.snap b/packages/elements-react/src/context/__snapshots__/intl-context.spec.tsx.snap
new file mode 100644
index 00000000..d63a09d1
--- /dev/null
+++ b/packages/elements-react/src/context/__snapshots__/intl-context.spec.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`intl-context can override individual strings 1`] = `
+<div>
+  custom navigation title
+</div>
+`;
+
+exports[`intl-context uses default messages 1`] = `
+<div>
+  Account Settings
+</div>
+`;
+
+exports[`intl-context uses default messages in different language 1`] = `
+<div>
+  Kontoeinstellungen
+</div>
+`;
diff --git a/packages/elements-react/src/context/intl-context.spec.tsx b/packages/elements-react/src/context/intl-context.spec.tsx
new file mode 100644
index 00000000..646bb317
--- /dev/null
+++ b/packages/elements-react/src/context/intl-context.spec.tsx
@@ -0,0 +1,46 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import { render } from "@testing-library/react"
+import { IntlProvider } from "./intl-context"
+import { useIntl } from "react-intl"
+
+function Render({ messageId }: { messageId: string }) {
+  const intl = useIntl()
+  return intl.formatMessage({ id: messageId })
+}
+
+describe("intl-context", () => {
+  test("uses default messages", () => {
+    const { container } = render(
+      <IntlProvider locale="en">
+        <Render messageId="settings.navigation.title" />
+      </IntlProvider>,
+    )
+    expect(container).toMatchSnapshot()
+  })
+  test("can override individual strings", () => {
+    const { container } = render(
+      <IntlProvider
+        locale="en"
+        customTranslations={{
+          en: {
+            "settings.navigation.title": "custom navigation title",
+          },
+        }}
+      >
+        <Render messageId="settings.navigation.title" />
+      </IntlProvider>,
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  test("uses default messages in different language", () => {
+    const { container } = render(
+      <IntlProvider locale="de">
+        <Render messageId="settings.navigation.title" />
+      </IntlProvider>,
+    )
+    expect(container).toMatchSnapshot()
+  })
+})
diff --git a/packages/elements-react/src/context/intl-context.tsx b/packages/elements-react/src/context/intl-context.tsx
index 9ffc23c5..1e5174c5 100644
--- a/packages/elements-react/src/context/intl-context.tsx
+++ b/packages/elements-react/src/context/intl-context.tsx
@@ -1,7 +1,6 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { merge } from "lodash"
 import { PropsWithChildren } from "react"
 import { IntlProvider as OriginalIntlProvider } from "react-intl"
 import { LocaleMap, locales } from "../locales"
@@ -154,12 +153,19 @@ export type IntlContextProps = {
   customTranslations?: Partial<LocaleMap>
 }
 
+function mergeTranslations(customTranslations: Partial<LocaleMap>) {
+  return Object.keys(customTranslations).reduce((acc, key) => {
+    acc[key] = { ...locales[key], ...customTranslations[key] }
+    return acc
+  }, locales)
+}
+
 export const IntlProvider = ({
   children,
   locale,
   customTranslations,
 }: PropsWithChildren<IntlContextProps>) => {
-  const messages = merge({}, locales, customTranslations)
+  const messages = mergeTranslations(customTranslations ?? {})
 
   return (
     <OriginalIntlProvider