@incodetech/web 2.0.0-alpha.4 → 2.0.0-alpha.6

package/dist/flow/flow.es.js

@@ -1,9 +1,557 @@
-import "../button-DeMZ_34N.js";
-import "@incodetech/core/flow";
-import "../vendor-preact-CK0WeTOR.js";
-import "../title-ng7q7YDh.js";
-import { I as i, p as a } from "../flow-ZK6OBsa3.js";
+import { b as K, u as i, L as W, S as R, B as q, c as _, a as V } from "../preact-custom-element.esm-BGQkPkOv.js";
+import { getRequiredWasmPipelines as N, createOrchestratedFlowManager as Y } from "@incodetech/core/flow";
+import { k as $, A as U, d as k, y as v } from "../vendor-preact-CK0WeTOR.js";
+import "../instance-B-q0ZREN.js";
+import { T as Z, u as A } from "../title-XSxhaBDx.js";
+import { api as D, warmupWasm as G } from "@incodetech/core";
+import { emailMachine as J } from "@incodetech/core/email";
+import { phoneMachine as Q } from "@incodetech/core/phone";
+import { selfieMachine as X } from "@incodetech/core/selfie";
+import { s as ee } from "../setup-wNL83jmW.js";
+import { s as F } from "../uiConfig-CQ1W9cUD.js";
+const te = {
+  small: 24,
+  medium: 48,
+  large: 64
+}, E = ({
+  title: t,
+  subtitle: e,
+  size: o = "medium",
+  fullScreen: s = !0,
+  className: l
+}) => {
+  const c = te[o], r = K(
+    "IncodeSpinner",
+    s && "IncodeSpinnerFullScreen",
+    l
+  );
+  return /* @__PURE__ */ i("div", { class: r, children: /* @__PURE__ */ i("div", { class: "IncodeSpinnerContent", children: [
+    /* @__PURE__ */ i(W, { size: c }),
+    (t || e) && /* @__PURE__ */ i($, { children: [
+      /* @__PURE__ */ i(R, { size: 16 }),
+      /* @__PURE__ */ i("div", { class: "IncodeSpinnerText", children: [
+        t && /* @__PURE__ */ i(Z, { className: "IncodeSpinnerTitle", children: t }),
+        e && /* @__PURE__ */ i($, { children: [
+          t && /* @__PURE__ */ i(R, { size: 12 }),
+          /* @__PURE__ */ i("p", { class: "IncodeSpinnerSubtitle", children: e })
+        ] })
+      ] })
+    ] })
+  ] }) });
+};
+function re(t) {
+  let e = t.replace("#", "");
+  e.length === 3 && (e = e.split("").map((d) => d + d).join(""));
+  const o = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
+  if (!o) return null;
+  const s = Number.parseInt(o[1], 16) / 255, l = Number.parseInt(o[2], 16) / 255, c = Number.parseInt(o[3], 16) / 255, r = Math.max(s, l, c), u = Math.min(s, l, c);
+  let f = 0, m = 0;
+  const a = (r + u) / 2;
+  if (r !== u) {
+    const d = r - u;
+    switch (m = a > 0.5 ? d / (2 - r - u) : d / (r + u), r) {
+      case s:
+        f = ((l - c) / d + (l < c ? 6 : 0)) / 6;
+        break;
+      case l:
+        f = ((c - s) / d + 2) / 6;
+        break;
+      case c:
+        f = ((s - l) / d + 4) / 6;
+        break;
+    }
+  }
+  return { h: f * 360, s: m * 100, l: a * 100 };
+}
+function I(t, e, o) {
+  const s = t / 360, l = e / 100, c = o / 100;
+  let r, u, f;
+  if (l === 0)
+    r = u = f = c;
+  else {
+    const a = (n, g, p) => (p < 0 && (p += 1), p > 1 && (p -= 1), p < 0.16666666666666666 ? n + (g - n) * 6 * p : p < 0.5 ? g : p < 0.6666666666666666 ? n + (g - n) * (0.6666666666666666 - p) * 6 : n), d = c < 0.5 ? c * (1 + l) : c + l - c * l, h = 2 * c - d;
+    r = a(h, d, s + 1 / 3), u = a(h, d, s), f = a(h, d, s - 1 / 3);
+  }
+  const m = (a) => {
+    const d = Math.round(a * 255).toString(16);
+    return d.length === 1 ? `0${d}` : d;
+  };
+  return `#${m(r)}${m(u)}${m(f)}`;
+}
+function oe(t) {
+  const e = re(t);
+  if (!e)
+    throw new Error(`Invalid color format: ${t}`);
+  return {
+    50: I(e.h, e.s, 95),
+    200: I(e.h, e.s, 80),
+    300: I(e.h, e.s, 65),
+    400: I(e.h, e.s, Math.min(100, e.l + 10)),
+    500: t,
+    600: I(e.h, e.s, Math.max(0, e.l - 10)),
+    900: I(e.h, e.s, 20)
+  };
+}
+function ne(t, e) {
+  if (typeof document > "u")
+    return;
+  const o = oe(t);
+  let s = document.getElementById(
+    "incode-theme"
+  );
+  s || (s = document.createElement("style"), s.id = "incode-theme", document.head.appendChild(s));
+  const l = e || "#ffffff", c = `
+    :root,
+    :host {
+      --primitive-color-brand-50: ${o[50]};
+      --primitive-color-brand-200: ${o[200]};
+      --primitive-color-brand-300: ${o[300]};
+      --primitive-color-brand-400: ${o[400]};
+      --primitive-color-brand-500: ${o[500]};
+      --primitive-color-brand-600: ${o[600]};
+      --primitive-color-brand-900: ${o[900]};
+      --button-primary-text-default: ${l};
+    }
+  `;
+  s.textContent = c;
+}
+async function se() {
+  return (await D.get("/omni/asset/fetch-all")).data;
+}
+const z = /* @__PURE__ */ new Map();
+async function ae(t) {
+  if (t.startsWith("data:"))
+    return t;
+  const e = z.get(t);
+  if (e)
+    return e;
+  const s = await (await fetch(t)).blob(), l = await new Promise((c, r) => {
+    const u = new FileReader();
+    u.onloadend = () => c(u.result), u.onerror = r, u.readAsDataURL(s);
+  });
+  return z.set(t, l), l;
+}
+async function ie() {
+  const t = await se();
+  if (!t.theme)
+    throw new Error("Theme URL not found in assets response");
+  const e = t.theme, o = e.startsWith("http://") || e.startsWith("https://");
+  let s;
+  if (o) {
+    const r = await fetch(e);
+    if (!r.ok)
+      throw new Error(`Failed to fetch theme: ${r.statusText}`);
+    s = await r.json();
+  } else
+    s = (await D.get(e)).data;
+  const l = t["logo.png"] || t["logo.svg"] || t["logo.jpg"] || t["logo.jpeg"] || t["logo.webp"] || s.logo;
+  let c = l;
+  return l && (c = await ae(l)), {
+    ...s,
+    logo: c
+  };
+}
+async function le() {
+  const t = await ie();
+  return t.main && ne(t.main, t.buttonColor), t;
+}
+const L = {
+  PHONE: () => import("../phone/phone.es.js").then((t) => t.Phone),
+  EMAIL: () => import("../email/email.es.js").then((t) => t.Email),
+  SELFIE: () => import("../selfie/selfie.es.js").then((t) => t.Selfie)
+};
+function j() {
+  return Y({
+    modules: {
+      PHONE: Q,
+      EMAIL: J,
+      SELFIE: X
+    }
+  });
+}
+async function H(t) {
+  await ee({
+    apiURL: t.apiURL,
+    token: t.token,
+    i18n: { lang: t.lang ?? "en" }
+  });
+}
+async function B() {
+  try {
+    const t = await le(), e = {
+      logoSrc: t.logo,
+      hideFooterBranding: t.hideFooterBranding
+    };
+    return F(e), { theme: t, uiConfig: e };
+  } catch (t) {
+    return console.warn("Failed to fetch dashboard theme:", t), {};
+  }
+}
+function O(t, e) {
+  const o = N(t.flow);
+  o.length > 0 && G({
+    ...e,
+    pipelines: o
+  }).catch((s) => {
+    console.error("WASM warmup failed:", s);
+  });
+}
+function ce(t) {
+  const e = t.currentStep;
+  if (e) {
+    const o = L[e];
+    o && o().catch(() => {
+    });
+  }
+}
+const de = ({
+  moduleKey: t,
+  onNext: e
+}) => {
+  const { t: o } = A();
+  return /* @__PURE__ */ i("section", { class: "IncodeUnsupportedModule", "aria-live": "polite", children: /* @__PURE__ */ i("div", { class: "IncodeUnsupportedModuleContent", children: [
+    /* @__PURE__ */ i("h2", { class: "IncodeUnsupportedModuleTitle", children: o("unsupportedModule.title", "Module not available") }),
+    /* @__PURE__ */ i("p", { class: "IncodeUnsupportedModuleMessage", children: o(
+      "unsupportedModule.message",
+      `The "${t}" module is not yet supported in this version.`
+    ) }),
+    /* @__PURE__ */ i(
+      q,
+      {
+        onClick: e,
+        class: "IncodeUnsupportedModuleButton",
+        "data-testid": "unsupported-module-next-button",
+        children: o("unsupportedModule.next", "Next")
+      }
+    )
+  ] }) });
+}, y = /* @__PURE__ */ new Map();
+function C(t) {
+  const e = y.get(t);
+  if (!e)
+    throw new Error("Preload state not found");
+  return {
+    get isReady() {
+      return e.status === "ready";
+    },
+    get error() {
+      return e.status === "error" ? e.error ?? null : null;
+    },
+    async waitUntilReady() {
+      if (e.status !== "ready") {
+        if (e.status === "error")
+          throw new Error(e.error ?? "Preload failed");
+        return e.readyPromise;
+      }
+    },
+    cancel() {
+      e.status === "loading" && (e.unsubscribe && e.unsubscribe(), e.flowManager.stop(), e.readyReject(new Error("Preload cancelled")), y.delete(t));
+    }
+  };
+}
+function Ue(t) {
+  const { token: e } = t;
+  if (y.has(e))
+    return C(e);
+  let o, s;
+  const l = new Promise((f, m) => {
+    o = f, s = m;
+  }), c = j(), r = {
+    status: "loading",
+    flowManager: c,
+    config: t,
+    readyPromise: l,
+    readyResolve: o,
+    readyReject: s
+  };
+  return y.set(e, r), (async () => {
+    try {
+      await H({
+        apiURL: t.apiURL,
+        token: t.token,
+        lang: t.lang
+      });
+      const f = t.disableDashboardTheme ? Promise.resolve({}) : B().then((a) => {
+        r.theme = a.theme, r.uiConfig = a.uiConfig;
+      }), m = c.subscribe((a) => {
+        if (a.status === "ready") {
+          const d = a;
+          t.wasmConfig && O(d, t.wasmConfig), ce(d), r.unsubscribe?.(), r.unsubscribe = void 0, r.status = "ready", r.readyResolve();
+        } else a.status === "error" && (r.unsubscribe?.(), r.unsubscribe = void 0, r.status = "error", r.error = a.error, r.readyReject(new Error(a.error)));
+      });
+      r.unsubscribe = m, c.load(), await f;
+    } catch (f) {
+      r.status = "error", r.error = f instanceof Error ? f.message : "Failed to preload", r.readyReject(
+        f instanceof Error ? f : new Error("Failed to preload")
+      ), y.delete(e);
+    }
+  })(), C(e);
+}
+function x(t) {
+  return y.get(t) ?? null;
+}
+function T(t) {
+  const e = x(t);
+  return e && y.delete(t), e;
+}
+function ue(t) {
+  const { apiURL: e, token: o, lang: s, disableDashboardTheme: l, onError: c } = t, r = U(null), [u, f] = k(() => {
+    const a = x(o);
+    if (a?.status === "ready") {
+      const h = T(o);
+      if (h)
+        return r.current = h.flowManager, h.uiConfig && F(h.uiConfig), { status: "ready", flowManager: h.flowManager };
+    }
+    const d = j();
+    return r.current = d, a?.status === "error" ? {
+      status: "error",
+      error: a.error ?? "Preload failed",
+      flowManager: d
+    } : { status: "initializing", flowManager: d };
+  }), m = U(!1);
+  return v(() => {
+    if (u.status !== "initializing")
+      return;
+    const a = x(o);
+    if (a?.status === "loading") {
+      a.readyPromise.then(() => {
+        const h = T(o);
+        h && (r.current = h.flowManager, h.uiConfig && F(h.uiConfig), f({ status: "ready", flowManager: h.flowManager }));
+      }).catch((h) => {
+        const n = h instanceof Error ? h.message : "Preload failed";
+        f({
+          status: "error",
+          error: n,
+          flowManager: u.flowManager
+        }), c?.(n);
+      });
+      return;
+    }
+    if (m.current)
+      return;
+    m.current = !0, (async () => {
+      try {
+        await H({ apiURL: e, token: o, lang: s });
+        const h = l ? Promise.resolve() : B().then((n) => {
+          n.uiConfig && F(n.uiConfig);
+        });
+        u.flowManager.load(), await h, f({ status: "ready", flowManager: u.flowManager });
+      } catch (h) {
+        const n = h instanceof Error ? h.message : "Failed to initialize SDK";
+        f({
+          status: "error",
+          error: n,
+          flowManager: u.flowManager
+        }), c?.(n);
+      }
+    })();
+  }, [e, o, s, l, c, u]), u;
+}
+function fe(t) {
+  const { moduleKey: e, onModuleLoading: o, onModuleLoaded: s, onError: l } = t, [c, r] = k({ status: "idle" });
+  return v(() => {
+    if (!e) {
+      r({ status: "idle" });
+      return;
+    }
+    const u = L[e];
+    if (!u) {
+      r({ status: "unsupported", moduleKey: e });
+      return;
+    }
+    r({ status: "loading", moduleKey: e }), o?.(e);
+    let f = !1;
+    return u().then((m) => {
+      f || (r({ status: "loaded", moduleKey: e, Component: m }), s?.(e));
+    }).catch((m) => {
+      if (!f) {
+        const a = m instanceof Error ? m.message : "Failed to load module";
+        r({ status: "error", moduleKey: e, error: a }), l?.(`Failed to load ${e}: ${a}`);
+      }
+    }), () => {
+      f = !0;
+    };
+  }, [e, o, s, l]), c;
+}
+function he(t, e) {
+  const o = U(/* @__PURE__ */ new Set());
+  v(() => {
+    if (e < t.length - 1) {
+      const s = t[e + 1];
+      if (s && !o.current.has(s)) {
+        o.current.add(s);
+        const l = L[s];
+        l && l().catch(() => {
+          o.current.delete(s);
+        });
+      }
+    }
+  }, [t, e]);
+}
+const me = ({
+  apiURL: t,
+  token: e,
+  wasmConfig: o,
+  lang: s,
+  disableDashboardTheme: l,
+  onComplete: c,
+  onError: r,
+  onModuleLoading: u,
+  onModuleLoaded: f,
+  onWasmWarmup: m,
+  spinnerConfig: a
+}) => {
+  const { t: d } = A(), h = ue({
+    apiURL: t,
+    token: e,
+    lang: s,
+    disableDashboardTheme: l,
+    onError: r
+  }), [n, g] = V(() => h.flowManager, {
+    autoLoad: !1
+  }), p = fe({
+    moduleKey: n?.status === "ready" ? n.currentStep : void 0,
+    onModuleLoading: u,
+    onModuleLoaded: f,
+    onError: r
+  });
+  if (he(
+    n?.status === "ready" ? n.steps : [],
+    n?.status === "ready" ? n.currentStepIndex : -1
+  ), v(() => {
+    if (n?.status === "ready" && o) {
+      const w = n, b = N(w.flow);
+      b.length > 0 && (m?.(b), O(w, o));
+    }
+  }, [n?.status, o, n, m]), v(() => {
+    n?.status === "finished" && c(n.finishStatus);
+  }, [n?.status, c, n]), v(() => {
+    n?.status === "error" && r && r(n.error);
+  }, [n?.status, r, n]), h.status === "error")
+    return /* @__PURE__ */ i("div", { class: "IncodeFlow", children: /* @__PURE__ */ i("div", { children: [
+      "Error: ",
+      h.error
+    ] }) });
+  if (h.status === "initializing")
+    return /* @__PURE__ */ i("div", { class: "IncodeFlow", children: /* @__PURE__ */ i(
+      E,
+      {
+        title: a?.title ?? d("home.settingUp"),
+        subtitle: a?.subtitle,
+        size: a?.size,
+        fullScreen: !0
+      }
+    ) });
+  if (!n || n.status === "idle" || n.status === "loading")
+    return /* @__PURE__ */ i("div", { class: "IncodeFlow", children: /* @__PURE__ */ i(
+      E,
+      {
+        title: a?.title ?? d("home.settingUp"),
+        subtitle: a?.subtitle,
+        size: a?.size,
+        fullScreen: !0
+      }
+    ) });
+  if (n.status === "error")
+    return /* @__PURE__ */ i("div", { class: "IncodeFlow", children: /* @__PURE__ */ i("div", { children: [
+      "Error: ",
+      n.error
+    ] }) });
+  if (n.status === "finished")
+    return null;
+  if (n.status === "ready") {
+    const { currentStep: w, config: b } = n;
+    if (!w || !b)
+      return /* @__PURE__ */ i("div", { class: "IncodeFlow", children: /* @__PURE__ */ i(
+        E,
+        {
+          title: a?.title ?? d("loadingCircle.hangOn"),
+          subtitle: a?.subtitle ?? d("loadingCircle.validating"),
+          size: a?.size,
+          fullScreen: !0
+        }
+      ) });
+    if (p.status === "unsupported")
+      return /* @__PURE__ */ i("div", { class: "IncodeFlow", children: /* @__PURE__ */ i(
+        de,
+        {
+          moduleKey: w,
+          onNext: () => g.completeModule()
+        }
+      ) });
+    if (p.status === "idle" || p.status === "loading" || p.status === "error")
+      return /* @__PURE__ */ i("div", { class: "IncodeFlow", children: /* @__PURE__ */ i(
+        E,
+        {
+          title: a?.title ?? d("loadingCircle.hangOn"),
+          subtitle: a?.subtitle ?? d("loadingCircle.validating"),
+          size: a?.size,
+          fullScreen: !0
+        }
+      ) });
+    const { Component: P } = p;
+    if (w === "SELFIE")
+      return /* @__PURE__ */ i("div", { class: "IncodeFlow", children: /* @__PURE__ */ i(
+        P,
+        {
+          config: b,
+          onFinish: () => g.completeModule(),
+          onError: (S) => {
+            r?.(S ?? "Selfie verification error");
+          }
+        },
+        `selfie-${n.currentStepIndex}`
+      ) });
+    if (w === "PHONE")
+      return /* @__PURE__ */ i("div", { class: "IncodeFlow", children: /* @__PURE__ */ i(
+        P,
+        {
+          config: b,
+          onFinish: () => g.completeModule(),
+          onError: (S) => {
+            r?.(S ?? "Phone verification error");
+          }
+        },
+        `phone-${n.currentStepIndex}`
+      ) });
+    if (w === "EMAIL") {
+      const M = b;
+      return !M || typeof M.otpVerification != "boolean" || typeof M.otpExpirationInMinutes != "number" ? /* @__PURE__ */ i("div", { class: "IncodeFlow", children: /* @__PURE__ */ i("div", { children: "Error: Invalid email configuration" }) }) : /* @__PURE__ */ i("div", { class: "IncodeFlow", children: /* @__PURE__ */ i(
+        P,
+        {
+          config: {
+            ...M,
+            prefill: M.prefill ?? !1
+          },
+          onFinish: () => g.completeModule(),
+          onError: (S) => {
+            r?.(S ?? "Email verification error");
+          }
+        },
+        `email-${n.currentStepIndex}`
+      ) });
+    }
+  }
+  return null;
+}, pe = (t) => /* @__PURE__ */ i("div", { class: "IncodeComponent", children: /* @__PURE__ */ i(me, { ...t }) });
+_(
+  pe,
+  "incode-flow",
+  [
+    "apiURL",
+    "token",
+    "wasmConfig",
+    "lang",
+    "disableDashboardTheme",
+    "spinnerConfig",
+    "onComplete",
+    "onError"
+  ],
+  {
+    shadow: !1
+  }
+);
 export {
-  i as IncodeFlow,
-  a as preloadIncodeFlow
+  pe as IncodeFlow,
+  Ue as preloadIncodeFlow
 };