@asgardeo/react 0.6.22 → 0.6.24

package/dist/components/presentation/auth/AuthOptionFactory.d.ts

@@ -25,7 +25,7 @@ export declare const renderSignInComponents: (components: EmbeddedFlowComponent[
     buttonClassName?: string;
     inputClassName?: string;
     onInputBlur?: (name: string) => void;
-    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;
+    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;
     size?: "small" | "medium" | "large";
     variant?: any;
 }) => ReactElement[];
@@ -36,7 +36,7 @@ export declare const renderSignUpComponents: (components: EmbeddedFlowComponent[
     buttonClassName?: string;
     inputClassName?: string;
     onInputBlur?: (name: string) => void;
-    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;
+    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;
     size?: "small" | "medium" | "large";
     variant?: any;
 }) => ReactElement[];

package/dist/index.js

@@ -6879,7 +6879,9 @@ import React from "react";
 import {
   AsgardeoRuntimeError as AsgardeoRuntimeError7,
   FieldType as FieldType7,
-  EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType
+  EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType,
+  EmbeddedFlowActionVariantV2 as EmbeddedFlowActionVariant,
+  EmbeddedFlowEventTypeV2 as EmbeddedFlowEventType
 } from "@asgardeo/browser";
 
 // src/components/adapters/SmsOtpButton.tsx
@@ -6944,9 +6946,12 @@ var getTypographyVariant = (variant) => {
   };
   return variantMap[variant] || "h3";
 };
-var matchesSocialProvider = (actionId, eventType, buttonText, provider, authType) => {
+var matchesSocialProvider = (actionId, eventType, buttonText, provider, authType, componentVariant) => {
   const providerId = `${provider}_auth`;
   const providerMatches = actionId === providerId || eventType === providerId;
+  if (componentVariant?.toUpperCase() === EmbeddedFlowActionVariant.Social) {
+    return buttonText.toLowerCase().includes(provider);
+  }
   if (authType === "signup") {
     return providerMatches || buttonText.toLowerCase().includes(provider);
   }
@@ -6981,6 +6986,11 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
       return React.cloneElement(field, { key });
     }
     case EmbeddedFlowComponentType.Action: {
+      const actionId = component.id;
+      const eventType = component.eventType || "";
+      const buttonText = component.label || "";
+      const componentVariant = component.variant || "";
+      const shouldSkipValidation = eventType.toUpperCase() === EmbeddedFlowEventType.Trigger;
       const handleClick = () => {
         if (options.onSubmit) {
           const formData = {};
@@ -6989,28 +6999,25 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
               formData[field] = formValues[field];
             }
           });
-          options.onSubmit(component, formData);
+          options.onSubmit(component, formData, shouldSkipValidation);
         }
       };
-      const actionId = component.id;
-      const eventType = component.eventType || "";
-      const buttonText = component.label || "";
-      if (matchesSocialProvider(actionId, eventType, buttonText, "google", authType)) {
+      if (matchesSocialProvider(actionId, eventType, buttonText, "google", authType, componentVariant)) {
         return /* @__PURE__ */ jsx55(GoogleButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
       }
-      if (matchesSocialProvider(actionId, eventType, buttonText, "github", authType)) {
+      if (matchesSocialProvider(actionId, eventType, buttonText, "github", authType, componentVariant)) {
         return /* @__PURE__ */ jsx55(GitHubButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
       }
-      if (matchesSocialProvider(actionId, eventType, buttonText, "facebook", authType)) {
+      if (matchesSocialProvider(actionId, eventType, buttonText, "facebook", authType, componentVariant)) {
         return /* @__PURE__ */ jsx55(FacebookButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
       }
-      if (matchesSocialProvider(actionId, eventType, buttonText, "microsoft", authType)) {
+      if (matchesSocialProvider(actionId, eventType, buttonText, "microsoft", authType, componentVariant)) {
         return /* @__PURE__ */ jsx55(MicrosoftButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
       }
-      if (matchesSocialProvider(actionId, eventType, buttonText, "linkedin", authType)) {
+      if (matchesSocialProvider(actionId, eventType, buttonText, "linkedin", authType, componentVariant)) {
         return /* @__PURE__ */ jsx55(LinkedInButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
       }
-      if (matchesSocialProvider(actionId, eventType, buttonText, "ethereum", authType)) {
+      if (matchesSocialProvider(actionId, eventType, buttonText, "ethereum", authType, componentVariant)) {
         return /* @__PURE__ */ jsx55(SignInWithEthereumButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
       }
       if (actionId === "prompt_mobile" || eventType === "prompt_mobile") {
@@ -7034,6 +7041,9 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
       const variant = getTypographyVariant(component.variant);
       return /* @__PURE__ */ jsx55(Typography_default, { variant, children: component.label || "" }, key);
     }
+    case EmbeddedFlowComponentType.Divider: {
+      return /* @__PURE__ */ jsx55(Divider_default, { children: component.label || "" }, key);
+    }
     case EmbeddedFlowComponentType.Block: {
       if (component.components && component.components.length > 0) {
         const blockComponents = component.components.map(
@@ -7052,7 +7062,7 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
             }
           )
         ).filter(Boolean);
-        return /* @__PURE__ */ jsx55("div", { children: blockComponents }, key);
+        return /* @__PURE__ */ jsx55("form", { id: component.id, children: blockComponents }, key);
       }
       return null;
     }
@@ -7159,12 +7169,12 @@ var resolveTranslationsInArray = (items, t, properties) => {
 var resolveTranslationsInArray_default = resolveTranslationsInArray;
 
 // src/utils/v2/flowTransformer.ts
-var transformComponents = (response, t) => {
+var transformComponents = (response, t, resolveTranslations = true) => {
   if (!response?.data?.meta?.components) {
     return [];
   }
   const components = response.data.meta.components;
-  return resolveTranslationsInArray_default(components, t);
+  return resolveTranslations ? resolveTranslationsInArray_default(components, t) : components;
 };
 var extractErrorMessage = (error, t, defaultErrorKey = "errors.flow.generic") => {
   if (error && typeof error === "object" && error.failureReason) {
@@ -7179,14 +7189,14 @@ var checkForErrorResponse = (response, t, defaultErrorKey = "errors.flow.generic
   return null;
 };
 var normalizeFlowResponse = (response, t, options = {}) => {
-  const { throwOnError = true, defaultErrorKey = "errors.flow.generic" } = options;
+  const { throwOnError = true, defaultErrorKey = "errors.flow.generic", resolveTranslations = true } = options;
   const errorMessage = checkForErrorResponse(response, t, defaultErrorKey);
   if (errorMessage && throwOnError) {
     throw response;
   }
   return {
     flowId: response.flowId,
-    components: transformComponents(response, t)
+    components: transformComponents(response, t, resolveTranslations)
   };
 };
 
@@ -7348,11 +7358,13 @@ var BaseSignInContent2 = ({
   const handleInputBlur = (name) => {
     setFormTouched(name, true);
   };
-  const handleSubmit = async (component, data) => {
-    touchAllFields();
-    const validation = validateForm();
-    if (!validation.isValid) {
-      return;
+  const handleSubmit = async (component, data, skipValidation) => {
+    if (!skipValidation) {
+      touchAllFields();
+      const validation = validateForm();
+      if (!validation.isValid) {
+        return;
+      }
     }
     setIsSubmitting(true);
     clearMessages();
@@ -7654,7 +7666,9 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
       if (handleRedirection(response)) {
         return;
       }
-      const { flowId, components: components2 } = normalizeFlowResponse(response, t);
+      const { flowId, components: components2 } = normalizeFlowResponse(response, t, {
+        resolveTranslations: !children
+      });
       if (flowId && components2) {
         setFlowId(flowId);
         setComponents(components2);
@@ -7690,7 +7704,9 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
       if (handleRedirection(response)) {
         return;
       }
-      const { flowId, components: components2 } = normalizeFlowResponse(response, t);
+      const { flowId, components: components2 } = normalizeFlowResponse(response, t, {
+        resolveTranslations: !children
+      });
       if (response.flowStatus === EmbeddedSignInFlowStatusV2.Error) {
         console.error("[SignIn] Flow returned Error status, clearing flow state");
         clearFlowState();
@@ -9055,7 +9071,8 @@ var BaseSignUpContent2 = ({
       if (response?.data) {
         try {
           const { components } = normalizeFlowResponse(response, t, {
-            defaultErrorKey: "components.signUp.errors.generic"
+            defaultErrorKey: "components.signUp.errors.generic",
+            resolveTranslations: !children
           });
           return {
             ...response,
@@ -9070,7 +9087,7 @@ var BaseSignUpContent2 = ({
       }
       return response;
     },
-    [t]
+    [t, children]
   );
   const extractFormFields = useCallback12(
     (components) => {
@@ -9145,10 +9162,17 @@ var BaseSignUpContent2 = ({
     setFormValue(name, value);
     setFormTouched(name, true);
   };
-  const handleSubmit = async (component, data) => {
+  const handleSubmit = async (component, data, skipValidation) => {
     if (!currentFlow) {
       return;
     }
+    if (!skipValidation) {
+      touchAllFields();
+      const validation = validateForm();
+      if (!validation.isValid) {
+        return;
+      }
+    }
     setIsLoading(true);
     clearMessages();
     try {