@digiform/wizard 0.2.9 → 0.2.11

package/wizard/src/features/api-integration/services/ActionExecutor.js

@@ -0,0 +1,339 @@
+"use client";
+/* empty css                               */
+import { isTemplateDialogConfig as m } from "../../../../../ui/src/lib/types/guards.js";
+import { ActionValidator as v, ActionValidationError as C } from "../../validation-system/validation/ActionValidation.js";
+import { memo as A, useCallback as E, useEffect as D } from "react";
+import { ApiCallService as S } from "./ApiCallService.js";
+import { resolveTemplateDialog as T } from "../../../../../ui/src/lib/utils/templateDialogResolver.js";
+const I = A(
+  ({
+    actions: s,
+    trigger: e,
+    formData: t,
+    onComplete: i,
+    onError: n,
+    onFieldUpdate: l,
+    onShowDialog: a,
+    onNavigate: f,
+    machineRef: r
+  }) => {
+    const y = E(async () => {
+      console.log("ActionExecutor: Starting action execution", {
+        actions: s,
+        trigger: e
+      });
+      const u = s.filter(
+        (o) => o.trigger === e
+      );
+      if (console.log("ActionExecutor: Filtered actions", {
+        triggeredActions: u,
+        trigger: e
+      }), u.length === 0) {
+        console.log("ActionExecutor: No actions to execute"), r?.send({
+          type: "ACTIONS_COMPLETED",
+          results: {}
+        }), i({});
+        return;
+      }
+      const d = [];
+      for (const o of u) {
+        const c = v.validateAction(o);
+        c.isValid || d.push(
+          `Action '${o.id}': ${c.errors.join(", ")}`
+        );
+      }
+      if (d.length > 0) {
+        const o = new C(
+          "validation-error",
+          "validation",
+          `Action validation failed: ${d.join("; ")}`,
+          { validationErrors: d }
+        );
+        r?.send({
+          type: "ACTIONS_COMPLETED",
+          results: {}
+        }), n(o);
+        return;
+      }
+      const x = [...u].sort(
+        (o, c) => o.order - c.order
+      ), g = {};
+      try {
+        for (const o of x)
+          r?.send({ type: "ACTION_START", actionId: o.id });
+        for (const o of x)
+          try {
+            let c = null;
+            switch (o.type) {
+              case "apiCall": {
+                console.log("ActionExecutor: Executing API call", {
+                  action: o,
+                  config: o.config
+                }), c = await new S({ onFieldUpdate: l }).executeApiCall(
+                  o.config,
+                  t
+                ), console.log("ActionExecutor: API call completed", { result: c });
+                break;
+              }
+              case "showDialog": {
+                console.log("🎯 ActionExecutor: Executing showDialog", {
+                  action: o,
+                  config: o.config
+                }), console.log(
+                  "🔧 ActionExecutor: Creating DialogExecutorService"
+                );
+                const p = new b();
+                console.log("🚀 ActionExecutor: Calling executor.execute"), c = await p.execute(
+                  o.config,
+                  t,
+                  a
+                ), console.log("✅ ActionExecutor: showDialog completed", {
+                  result: c
+                });
+                break;
+              }
+              case "navigate": {
+                c = await new w().execute(
+                  o.config,
+                  f
+                );
+                break;
+              }
+              case "executeVerifyDialog": {
+                console.log(
+                  "🔧 ActionExecutor: Executing executeVerifyDialog",
+                  {
+                    action: o,
+                    config: o.config
+                  }
+                ), c = await new O().execute(
+                  o.config,
+                  t,
+                  a
+                ), console.log(
+                  "✅ ActionExecutor: executeVerifyDialog completed",
+                  {
+                    result: c
+                  }
+                );
+                break;
+              }
+              default:
+                throw new Error(`Unknown action type: ${o.type}`);
+            }
+            g[o.id] = c, r?.send({
+              type: "ACTION_SUCCESS",
+              actionId: o.id,
+              result: c
+            });
+          } catch (c) {
+            r?.send({
+              type: "ACTION_ERROR",
+              actionId: o.id,
+              error: c
+            }), g[o.id] = { error: c.message };
+          }
+        r?.send({
+          type: "ACTIONS_COMPLETED",
+          results: g
+        }), i(g);
+      } catch (o) {
+        r?.send({
+          type: "ACTIONS_COMPLETED",
+          results: g
+        }), n(o);
+      }
+    }, [
+      s,
+      e,
+      t,
+      i,
+      n,
+      l,
+      a,
+      f,
+      r
+    ]);
+    return D(() => {
+      y();
+    }, [y]), null;
+  }
+);
+I.displayName = "ActionExecutor";
+class b {
+  async execute(e, t, i) {
+    console.log("🚀 DialogExecutorService.execute STARTED", {
+      config: e,
+      formData: t
+    });
+    const n = this.resolveDialogConfig(e, t);
+    return console.log("🔄 DialogExecutorService: Config resolved", {
+      resolvedConfig: n
+    }), console.log("📞 DialogExecutorService: Calling onShowDialog", {
+      resolvedConfig: n
+    }), i(n), console.log("✅ DialogExecutorService.execute COMPLETED", {
+      resolvedConfig: n
+    }), n;
+  }
+  resolveDialogConfig(e, t) {
+    if (console.log("🔍 DialogExecutorService.resolveDialogConfig input:", {
+      config: e,
+      formData: t
+    }), m(e)) {
+      console.log("✅ Detected as TemplateDialogConfig");
+      const n = this.resolveTemplateDialogWithActions(e);
+      console.log("🔄 Resolved template config:", { baseConfig: n });
+      const l = this.interpolateDialogConfig(n, t);
+      return console.log("✨ Final interpolated config:", { finalConfig: l }), l;
+    }
+    console.log("✅ Treating as direct DialogConfig");
+    const i = this.interpolateDialogConfig(
+      e,
+      t
+    );
+    return console.log("✨ Final direct config:", { finalConfig: i }), i;
+  }
+  interpolateDialogConfig(e, t) {
+    return {
+      ...e,
+      content: this.interpolateTemplate(e.content, t),
+      title: this.interpolateTemplate(e.title, t)
+    };
+  }
+  resolveTemplateDialogWithActions(e) {
+    console.log("🔄 Resolving template with actions:", e);
+    const t = e.template, i = t.config;
+    if (t.typeId === "confirmation-dialog") {
+      console.log(
+        "✅ Processing confirmation-dialog template:",
+        i
+      );
+      const n = {
+        title: i.title || "Confirm Action",
+        content: i.message || i.content || "Are you sure you want to proceed?",
+        type: "modal",
+        size: "medium",
+        dismissible: !0,
+        buttons: [
+          {
+            id: "cancel-btn",
+            label: i.cancelButtonLabel || "Cancel",
+            variant: "secondary",
+            action: i.onCancelAction || { type: "close" }
+          },
+          {
+            id: "confirm-btn",
+            label: i.confirmButtonLabel || "Confirm",
+            variant: i.confirmButtonVariant || "primary",
+            action: i.onConfirmAction || {
+              type: "navigate",
+              direction: "next"
+            }
+          }
+        ],
+        // Add template metadata for runtime behavior
+        templateMetadata: {
+          typeId: "confirmation-dialog",
+          showIcon: i.showIcon,
+          iconType: i.iconType
+        }
+      };
+      return console.log("✨ Resolved confirmation dialog config:", n), n;
+    }
+    return console.log(
+      "🔄 Falling back to resolveTemplateDialog for typeId:",
+      t.typeId
+    ), T(e);
+  }
+  interpolateTemplate(e, t) {
+    return e.replace(/\$\{data\.([^}]+)\}/g, (i, n) => {
+      const l = t[n];
+      return l != null ? String(l) : i;
+    });
+  }
+}
+class w {
+  async execute(e, t) {
+    return t(e), e;
+  }
+}
+class O {
+  async execute(e, t, i) {
+    console.log("🚀 GenericVerifyDialogService.execute STARTED", {
+      config: e,
+      formData: t
+    });
+    const n = e.postAction || { type: "close" };
+    let l;
+    switch (n.type) {
+      case "close":
+      case "saveSection":
+        l = {
+          type: "updateOriginalValue",
+          componentId: e.componentId
+        };
+        break;
+      case "nextStep":
+        l = {
+          type: "navigate",
+          direction: "next",
+          updateOriginalValue: !0,
+          componentId: e.componentId
+        };
+        break;
+      case "navigate":
+        l = {
+          type: "navigate",
+          direction: n.direction,
+          targetStep: n.targetStep,
+          updateOriginalValue: !0,
+          componentId: e.componentId
+        };
+        break;
+      default:
+        l = {
+          type: "updateOriginalValue",
+          componentId: e.componentId
+        };
+    }
+    const a = {
+      title: "Verify Changes",
+      content: "Please verify your changes before continuing.",
+      type: "modal",
+      size: "medium",
+      dismissible: !0,
+      buttons: [
+        {
+          id: "cancel-btn",
+          label: "Cancel",
+          variant: "secondary",
+          action: { type: "close" }
+        },
+        {
+          id: "verify-btn",
+          label: "Verify",
+          variant: "primary",
+          action: { type: "close" }
+          // This will be overridden by templateMetadata.onVerifiedAction
+        }
+      ],
+      // Add template metadata to identify this as a verification dialog
+      templateMetadata: {
+        typeId: "verify-dialog",
+        isGeneric: !0,
+        componentId: e.componentId,
+        onVerifiedAction: l
+        // This will be used by EmailVerificationDialog
+      }
+    };
+    return console.log("📞 GenericVerifyDialogService: Calling onShowDialog", {
+      defaultDialogConfig: a
+    }), i(a), console.log("✅ GenericVerifyDialogService.execute COMPLETED", {
+      defaultDialogConfig: a
+    }), a;
+  }
+}
+export {
+  I as ActionExecutor,
+  I as default
+};

package/wizard/src/features/api-integration/services/ApiCallExecutor.js

@@ -0,0 +1,6 @@
+"use client";
+const l = () => null;
+export {
+  l as ApiCallExecutor,
+  l as default
+};

package/wizard/src/features/api-integration/services/ApiCallService.js

@@ -0,0 +1,309 @@
+"use client";
+import { compileApiRequestBody as h } from "../../../../../core/src/utils/apiBodyUtils.js";
+import { ActionValidationError as c } from "../../validation-system/validation/ActionValidation.js";
+import "@tanstack/react-query";
+function y(l) {
+  return l !== null && typeof l == "object" && !Array.isArray(l);
+}
+function d(l) {
+  return typeof l == "object" && l !== null && "message" in l && typeof l.message == "string";
+}
+class C {
+  options;
+  constructor(e = {}) {
+    this.options = e;
+  }
+  // Generate cache key for API call
+  generateCacheKey(e, r) {
+    if (e.cacheKey)
+      return this.interpolateTemplate(e.cacheKey, r);
+    const t = this.interpolateTemplate(e.url, r), i = e.method;
+    let s = "";
+    if (i === "POST" || i === "PUT")
+      try {
+        const n = h(e, r);
+        s = n ? `:${JSON.stringify(n)}` : "";
+      } catch {
+        s = "";
+      }
+    return `api-call:${i}:${t}${s}`;
+  }
+  // Create query options for React Query
+  createQueryOptions(e, r) {
+    return {
+      queryKey: [this.generateCacheKey(e, r)],
+      queryFn: () => this.executeApiCall(e, r),
+      gcTime: e.cacheTTL || 300 * 1e3,
+      // 5 minutes default
+      staleTime: e.staleTime || 30 * 1e3,
+      // 30 seconds default
+      retry: e.retryCount || 0,
+      throwOnError: !e.cacheOnError
+    };
+  }
+  // Execute API call with automatic response mapping
+  async executeApiCall(e, r) {
+    const t = await this.makeApiCall(e, r);
+    return e.method === "GET" && e.fieldMappings && this.options.onFieldUpdate && this.applyFlattenedResponseMappings(
+      t,
+      e.fieldMappings,
+      this.options.onFieldUpdate
+    ), t;
+  }
+  // private extractRequestData(
+  // 	_config: ApiCallConfig,
+  // 	_formData: FormData
+  // ): Record<string, unknown> {
+  // 	// For now, just return empty object since we're focusing on response mappings
+  // 	// Request mappings can be added later if needed
+  // 	return {};
+  // }
+  async makeApiCall(e, r) {
+    let t = this.interpolateTemplate(e.url, r);
+    const i = this.buildQueryParams(e, r);
+    if (i.size > 0) {
+      const o = new URL(t, window.location.origin);
+      i.forEach((p, m) => {
+        o.searchParams.set(m, p);
+      }), t = o.toString();
+    }
+    const s = this.buildHeaders(e, r);
+    try {
+      new URL(t, window.location.origin);
+    } catch {
+      throw new c(
+        "api-call-error",
+        "apiCall",
+        `Invalid URL: ${t}`,
+        { url: t, originalUrl: e.url }
+      );
+    }
+    const n = {
+      method: e.method,
+      headers: s
+    };
+    if (e.method === "POST" || e.method === "PUT")
+      try {
+        const o = h(e, r);
+        o && (n.body = o, s["Content-Type"] = s["Content-Type"] || "application/json");
+      } catch (o) {
+        throw new c(
+          "api-call-error",
+          "apiCall",
+          `Failed to compile request body: ${o.message}`,
+          { config: e, formData: r }
+        );
+      }
+    const a = new AbortController(), u = setTimeout(
+      () => a.abort(),
+      e.timeout || 1e4
+    );
+    try {
+      const o = await fetch(t, {
+        ...n,
+        signal: a.signal
+      });
+      if (clearTimeout(u), !o.ok) {
+        const p = await o.text().catch(() => "Unknown error");
+        throw new c(
+          "api-call-error",
+          "apiCall",
+          `API call failed: ${o.status} ${o.statusText}`,
+          {
+            status: o.status,
+            statusText: o.statusText,
+            errorText: p,
+            url: t
+          }
+        );
+      }
+      try {
+        return await o.json();
+      } catch {
+        return await o.text();
+      }
+    } catch (o) {
+      throw clearTimeout(u), o instanceof c ? o : o instanceof DOMException && o.name === "AbortError" ? new c(
+        "api-call-error",
+        "apiCall",
+        `API call timed out after ${e.timeout || 1e4}ms`,
+        { url: t, timeout: e.timeout || 1e4 }
+      ) : this.isCorsError(o, t) ? new c(
+        "api-cors-error",
+        "apiCall",
+        "Unable to connect to the external service due to security restrictions. This typically happens when the target server doesn't allow cross-origin requests from this website.",
+        {
+          url: t,
+          originalError: o.message,
+          errorType: "CORS",
+          userFriendlyMessage: "The external service is not accessible from this application due to security policies.",
+          suggestedActions: [
+            "Contact the API provider to enable CORS for this domain",
+            "Use a server-side proxy to make the API call",
+            "Check if the API endpoint URL is correct"
+          ]
+        }
+      ) : this.isNetworkError(o) ? new c(
+        "api-network-error",
+        "apiCall",
+        "Failed to connect to the external service. Please check your internet connection or try again later.",
+        {
+          url: t,
+          originalError: o.message,
+          errorType: "NETWORK",
+          userFriendlyMessage: "Unable to connect to the external service. This could be due to network issues or the service being unavailable.",
+          suggestedActions: [
+            "Check your internet connection",
+            "Try again in a few moments",
+            "Verify the API endpoint is accessible"
+          ]
+        }
+      ) : new c(
+        "api-call-error",
+        "apiCall",
+        `Network error: ${o.message}`,
+        {
+          url: t,
+          originalError: o.message,
+          userFriendlyMessage: "An unexpected error occurred while calling the external service."
+        }
+      );
+    }
+  }
+  /**
+   * Detects if an error is likely a CORS error
+   */
+  isCorsError(e, r) {
+    const t = d(e) ? e.message.toLowerCase() : "", s = [
+      "cors",
+      "cross-origin",
+      "access to fetch",
+      "blocked by cors policy",
+      "no 'access-control-allow-origin'",
+      "preflight",
+      "cors error"
+    ].some(
+      (u) => t.includes(u)
+    ), n = r.startsWith("http") && !r.includes(window.location.hostname), a = e instanceof TypeError && t.includes("failed to fetch") && n;
+    return s || a;
+  }
+  /**
+   * Detects if an error is a network-related error (but not CORS)
+   */
+  isNetworkError(e) {
+    if (this.isCorsError(e, "")) return !1;
+    const r = d(e) ? e.message.toLowerCase() : "", t = [
+      "network error",
+      "connection refused",
+      "connection timeout",
+      "connection reset",
+      "dns",
+      "name resolution failed",
+      "unreachable",
+      "connection failed"
+    ], i = e instanceof TypeError && r.includes("failed to fetch");
+    return t.some((s) => r.includes(s)) || i;
+  }
+  applyFlattenedResponseMappings(e, r, t) {
+    console.log("🔄 Applying response mappings:", {
+      response: e,
+      mappings: r
+    });
+    for (const [i, s] of Object.entries(r)) {
+      const n = this.getValueFromPath(e, i), a = this.extractFieldNameFromTemplate(s);
+      console.log("📝 Field mapping:", {
+        apiField: i,
+        formFieldTemplate: s,
+        actualFieldName: a,
+        rawValue: n
+      }), t(a, n);
+    }
+  }
+  /**
+   * Extract the actual field name from a template string
+   * E.g., "${step-1.username}" -> "username"
+   */
+  extractFieldNameFromTemplate(e) {
+    if (e.startsWith("${") && e.endsWith("}")) {
+      const t = e.slice(2, -1).split(".");
+      return t[t.length - 1];
+    }
+    return e;
+  }
+  getValueFromPath(e, r) {
+    return r.split(".").reduce((t, i) => {
+      if (y(t))
+        return t[i];
+    }, e);
+  }
+  // private _setValueAtPath(obj: UnknownRecord, path: string, value: unknown): void {
+  // 	const keys = path.split(".");
+  // 	const lastKey = keys.pop()!;
+  // 	const target = keys.reduce((current: UnknownRecord, key: string): UnknownRecord => {
+  // 		if (!isRecord(current[key])) {
+  // 			current[key] = {};
+  // 		}
+  // 		return current[key] as UnknownRecord;
+  // 	}, obj);
+  // 	target[lastKey] = value;
+  // }
+  // private _transformValue(value: unknown, transform?: string): unknown {
+  // 	if (!transform || transform === "none" || value == null) return value;
+  // 	switch (transform) {
+  // 		case "uppercase":
+  // 			return String(value).toUpperCase();
+  // 		case "lowercase":
+  // 			return String(value).toLowerCase();
+  // 		case "trim":
+  // 			return String(value).trim();
+  // 		default:
+  // 			return value;
+  // 	}
+  // }
+  buildHeaders(e, r) {
+    const t = {}, i = e.headers || e.headersConfig || [];
+    for (const s of i)
+      if (s.key.trim() && s.value.trim()) {
+        const n = this.interpolateTemplate(
+          s.value,
+          r
+        );
+        t[s.key] = n;
+      }
+    return t;
+  }
+  buildQueryParams(e, r) {
+    const t = new URLSearchParams(), i = e.params || e.paramsConfig || [];
+    for (const s of i)
+      if (s.key.trim() && s.value.trim()) {
+        const n = this.interpolateTemplate(
+          s.value,
+          r
+        );
+        t.set(s.key, n);
+      }
+    return t;
+  }
+  interpolateTemplate(e, r) {
+    let t = e.replace(
+      /\$\{data\.([^}]+)\}/g,
+      (i, s) => {
+        const n = this.getValueFromPath(r, s);
+        return n != null ? String(n) : i;
+      }
+    );
+    return t = t.replace(/\$\{([^}]+)\}/g, (i, s) => {
+      if (i.includes("data.")) return i;
+      if (s.includes(".")) {
+        const a = s.split("."), u = a[a.length - 1], o = r[u];
+        return o != null ? String(o) : i;
+      }
+      const n = this.getValueFromPath(r, s);
+      return n != null ? String(n) : i;
+    }), t;
+  }
+}
+export {
+  C as ApiCallService,
+  C as default
+};

package/wizard/src/features/api-integration/services/DialogExecutor.js

@@ -0,0 +1,6 @@
+"use client";
+const e = () => null;
+export {
+  e as DialogExecutor,
+  e as default
+};