Enhance flow response handling: add resolveTranslations option to normalizeFlowResponse and transformComponents

Author: brionmario

packages/react/src/components/presentation/auth/SignIn/v2/SignIn.tsx

@@ -396,7 +396,9 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError
         return;
       }
 
-      const {flowId, components} = normalizeFlowResponse(response, t);
+      const {flowId, components} = normalizeFlowResponse(response, t, {
+        resolveTranslations: !children,
+      });
 
       if (flowId && components) {
         setFlowId(flowId);
@@ -448,7 +450,9 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError
         return;
       }
 
-      const {flowId, components} = normalizeFlowResponse(response, t);
+      const {flowId, components} = normalizeFlowResponse(response, t, {
+        resolveTranslations: !children,
+      });
 
       // Handle Error flow status - flow has failed and is invalidated
       if (response.flowStatus === EmbeddedSignInFlowStatusV2.Error) {

packages/react/src/components/presentation/auth/SignUp/v2/BaseSignUp.tsx

@@ -302,6 +302,7 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
         try {
           const {components} = normalizeFlowResponse(response, t, {
             defaultErrorKey: 'components.signUp.errors.generic',
+            resolveTranslations: !children,
           });
 
           return {
@@ -320,7 +321,7 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
       // Return as-is if no transformation needed
       return response;
     },
-    [t],
+    [t, children],
   );
 
   /**

packages/react/src/utils/v2/flowTransformer.ts

@@ -72,25 +72,35 @@ export interface FlowTransformOptions {
    * @default 'errors.flow.generic'
    */
   defaultErrorKey?: string;
+  /**
+   * Whether to resolve translation strings or keep them as i18n keys
+   * @default true
+   */
+  resolveTranslations?: boolean;
 }
 
 /**
  * Transform and resolve translations in components from flow response.
- * This function extracts components from the response meta structure and resolves
+ * This function extracts components from the response meta structure and optionally resolves
  * any translation strings within them.
  *
  * @param response - The flow response object containing components in meta structure
  * @param t - Translation function from useTranslation hook
- * @returns Array of flow components with resolved translations
+ * @param resolveTranslations - Whether to resolve translation strings or keep them as i18n keys (default: true)
+ * @returns Array of flow components with resolved or unresolved translations
  */
-export const transformComponents = (response: any, t: UseTranslation['t']): EmbeddedFlowComponent[] => {
+export const transformComponents = (
+  response: any,
+  t: UseTranslation['t'],
+  resolveTranslations: boolean = true,
+): EmbeddedFlowComponent[] => {
   if (!response?.data?.meta?.components) {
     return [];
   }
 
   const components: EmbeddedFlowComponent[] = response.data.meta.components;
 
-  return resolveTranslationsInArray(components, t);
+  return resolveTranslations ? resolveTranslationsInArray(components, t) : components;
 };
 
 /**
@@ -154,7 +164,7 @@ export const normalizeFlowResponse = (
   flowId: string;
   components: EmbeddedFlowComponent[];
 } => {
-  const {throwOnError = true, defaultErrorKey = 'errors.flow.generic'} = options;
+  const {throwOnError = true, defaultErrorKey = 'errors.flow.generic', resolveTranslations = true} = options;
 
   // Check if this is an error response
   const errorMessage: string | null = checkForErrorResponse(response, t, defaultErrorKey);
@@ -166,6 +176,6 @@ export const normalizeFlowResponse = (
 
   return {
     flowId: response.flowId,
-    components: transformComponents(response, t),
+    components: transformComponents(response, t, resolveTranslations),
   };
 };