@incodetech/web 2.0.0-alpha.1 → 2.0.0-alpha.2

package/dist/flow-ZK6OBsa3.js

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