fix: global error message translations

ory · Sep 6, 2023 · 718fe0a · 718fe0a
1 parent 3889c95
commit 718fe0a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 22 deletions.
diff --git a/src/react-components/ory/helpers/error-messages.tsx b/src/react-components/ory/helpers/error-messages.tsx
@@ -1,8 +1,10 @@
 import { UiNode, UiText } from "@ory/client"
 import { JSX } from "react"
+import { useIntl } from "react-intl"
 
 import { GridStyle, gridStyle, Severity } from "../../../theme"
 import { Message, MessageStyleProps } from "../../message"
+import { uiTextToFormattedMessage } from "./node"
 
 export type NodeMessagesProps = {
   nodes?: UiNode[]
@@ -11,22 +13,23 @@ export type NodeMessagesProps = {
   MessageStyleProps
 
 type nodeMessageProps = {
-  text: string
-  id: number
+  message: UiText
   key: string
-  type: string
 } & MessageStyleProps
 
-const nodeMessage = ({ text, id, type, key, ...props }: nodeMessageProps) => (
-  <Message
-    key={key}
-    data-testid={`ui/message/${id}`}
-    severity={type as Severity}
-    {...props}
-  >
-    {text}
-  </Message>
-)
+const nodeMessage = ({ key, message, ...props }: nodeMessageProps) => {
+  const intl = useIntl()
+  return (
+    <Message
+      key={key}
+      data-testid={`ui/message/${message.id}`}
+      severity={message.type as Severity}
+      {...props}
+    >
+      {uiTextToFormattedMessage(message, intl)}
+    </Message>
+  )
+}
 
 export const NodeMessages = ({
   nodes,
@@ -38,12 +41,10 @@ export const NodeMessages = ({
     (groups, { messages }) => {
       groups.push(
         ...messages
-          .map(({ text, id, type }, key) => {
+          .map((message, key) => {
             return nodeMessage({
-              text,
-              id,
-              type,
-              key: `node-group-message-${id}-${key}`,
+              message,
+              key: `node-group-message-${message.id}-${key}`,
               ...messageProps,
             })
           })
@@ -54,8 +55,8 @@ export const NodeMessages = ({
     [],
   )
 
-  const $messages = uiMessages?.map(({ text, id, type }, key) =>
-    nodeMessage({ text, id, type, key: `ui-messsage-${id}-${key}` }),
+  const $messages = uiMessages?.map((message, key) =>
+    nodeMessage({ message, key: `ui-messsage-${message.id}-${key}` }),
   )
 
   const $allMessages = [...($groupMessages || []), ...($messages || [])]

diff --git a/src/react-components/ory/helpers/node.tsx b/src/react-components/ory/helpers/node.tsx
@@ -56,8 +56,8 @@ export const getNodeLabel = (node: UiNode): UiText | undefined => {
   return node.meta.label
 }
 
-const uiTextToFormattedMessage = (
-  { id, context = {}, text }: UiText,
+export const uiTextToFormattedMessage = (
+  { id, context = {}, text }: Omit<UiText, "type">,
   intl: IntlShape,
 ) =>
   intl.formatMessage(