fix: replace translation merge with custom function

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>
+`;

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()
+  })
+})

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