@flonkid/kyc 1.6.0 → 1.7.0

package/dist/index.js

@@ -2,7 +2,7 @@ import { useRef, useMemo, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 // src/shared/constants.ts
-var SDK_VERSION = "1.6.0";
+var SDK_VERSION = "1.7.0";
 var DEFAULT_WIDGET_URL = "https://widget.flonk.id";
 var DEFAULT_API_BASE = "https://api.flonk.id/v1";
 var WIDGET_EVENTS = {
@@ -33,7 +33,7 @@ function getOrigin(url) {
   try {
     return new URL(url).origin;
   } catch {
-    return window.location.origin;
+    return "null";
   }
 }
 function isDesktop() {
@@ -73,8 +73,23 @@ function generateSecondaryColor(hex) {
     return "#93c5fd";
   }
 }
+var DEFAULT_FETCH_TIMEOUT_MS = 2e4;
+async function fetchWithTimeout(url, init = {}, timeoutMs = DEFAULT_FETCH_TIMEOUT_MS) {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), timeoutMs);
+  try {
+    return await fetch(url, { ...init, signal: controller.signal });
+  } catch (err) {
+    if (err?.name === "AbortError") {
+      throw new Error(`Request timed out after ${timeoutMs}ms: ${url}`);
+    }
+    throw err;
+  } finally {
+    clearTimeout(timer);
+  }
+}
 async function fetchWidgetToken(pk, apiBase) {
-  const res = await fetch(`${apiBase}/public/widget-token`, {
+  const res = await fetchWithTimeout(`${apiBase}/public/widget-token`, {
     headers: { "x-kyc-pk": pk },
     credentials: "include"
   });
@@ -95,10 +110,11 @@ async function fetchDesignTokens(apiBase, opts) {
   else if (opts.clientId) params.push(`clientId=${encodeURIComponent(opts.clientId)}`);
   const url = `${apiBase}/public/design-tokens${params.length ? "?" + params.join("&") : ""}`;
   try {
-    const res = await fetch(url, {
-      headers: opts.pk ? { "x-kyc-pk": opts.pk } : {},
-      credentials: "omit"
-    });
+    const res = await fetchWithTimeout(
+      url,
+      { headers: opts.pk ? { "x-kyc-pk": opts.pk } : {}, credentials: "omit" },
+      8e3
+    );
     return res.ok ? res.json() : null;
   } catch {
     return null;
@@ -121,7 +137,7 @@ function validateServerUrl(url) {
 }
 async function fetchSessionFromServer(serverUrl, clientMetadata, requestHeaders) {
   validateServerUrl(serverUrl);
-  const res = await fetch(serverUrl, {
+  const res = await fetchWithTimeout(serverUrl, {
     method: "POST",
     headers: { "Content-Type": "application/json", ...requestHeaders },
     credentials: "include",
@@ -140,7 +156,7 @@ async function fetchSessionFromServer(serverUrl, clientMetadata, requestHeaders)
   return res.json();
 }
 async function fetchPublicSession(apiBase, sessionId, embedToken) {
-  const res = await fetch(`${apiBase}/public/session/${sessionId}`, {
+  const res = await fetchWithTimeout(`${apiBase}/public/session/${sessionId}`, {
     headers: {
       "Content-Type": "application/json",
       "Authorization": `Bearer ${embedToken}`
@@ -158,7 +174,7 @@ async function fetchPublicSession(apiBase, sessionId, embedToken) {
   return res.json();
 }
 async function exchangeSessionForToken(apiBase, sessionId) {
-  const res = await fetch(`${apiBase}/public/session/${sessionId}/token`, {
+  const res = await fetchWithTimeout(`${apiBase}/public/session/${sessionId}/token`, {
     method: "POST",
     headers: { "Content-Type": "application/json" }
   });
@@ -381,6 +397,18 @@ var Loader = class {
   get element() {
     return this.overlay;
   }
+  updateColor(primaryColor) {
+    if (!this.overlay) return;
+    const color = primaryColor || "#15BA68";
+    const bgCircle = this.overlay.querySelector("circle:first-child");
+    const fgCircle = this.overlay.querySelector("circle:last-child");
+    const bar = this.overlay.querySelector('[style*="kycprogress"]');
+    if (bgCircle) bgCircle.setAttribute("stroke", color + "33");
+    if (fgCircle) fgCircle.setAttribute("stroke", color);
+    if (bar) bar.style.backgroundColor = color;
+    const track = bar?.parentElement;
+    if (track) track.style.backgroundColor = color + "1A";
+  }
   showError(message, lang) {
     if (!this.overlay) return;
     const strings = LOADER_I18N[lang || ""] || LOADER_I18N.en;
@@ -502,23 +530,20 @@ var MessageHandler = class {
       if (e.source !== this.iframe.contentWindow) return;
       const data = e.data || {};
       const type = data.type;
-      if (type === WIDGET_EVENTS.COMPLETE && this.callbacks.onSuccess) {
+      if (type === WIDGET_EVENTS.COMPLETE) {
         if (this.completionHandled) return;
         this.completionHandled = true;
-        this.callbacks.onSuccess(data.result);
-        setTimeout(() => this.iframe.remove(), 1e3);
-      } else if (type === WIDGET_EVENTS.CANCEL && this.callbacks.onCancel) {
+        this.callbacks.onSuccess?.(data.result);
+      } else if (type === WIDGET_EVENTS.CANCEL) {
         if (this.completionHandled) return;
         this.completionHandled = true;
-        this.callbacks.onCancel();
-        setTimeout(() => this.iframe.remove(), 500);
-      } else if (type === WIDGET_EVENTS.ERROR && this.callbacks.onError) {
+        this.callbacks.onCancel?.();
+      } else if (type === WIDGET_EVENTS.ERROR) {
         if (this.completionHandled) return;
         this.completionHandled = true;
-        this.callbacks.onError(data.error || "Unknown error");
-        setTimeout(() => this.iframe.remove(), 500);
-      } else if (type === WIDGET_EVENTS.READY && this.callbacks.onReady) {
-        this.callbacks.onReady();
+        this.callbacks.onError?.(data.error || "Unknown error");
+      } else if (type === WIDGET_EVENTS.READY) {
+        this.callbacks.onReady?.();
       }
     };
     window.addEventListener("message", this.listener);
@@ -529,7 +554,9 @@ var MessageHandler = class {
   onReadyOnce(callback) {
     const origin = getOrigin(this.iframeSrc);
     this.readyListener = (e) => {
-      if (e.origin !== origin || e.data?.type !== WIDGET_EVENTS.READY) return;
+      if (e.origin !== origin || e.source !== this.iframe.contentWindow || e.data?.type !== WIDGET_EVENTS.READY) {
+        return;
+      }
       window.removeEventListener("message", this.readyListener);
       this.readyListener = null;
       callback();
@@ -658,6 +685,19 @@ function setupViewportSizing(overlay, iframe) {
 }
 
 // src/browser/index.ts
+var FALLBACK_PRIMARY = "#15BA68";
+var EARLY_COLOR_BUDGET_MS = 800;
+var primaryFrom = (tokens) => tokens?.colors?.primary?.cannabis || FALLBACK_PRIMARY;
+async function showLoaderWithEarlyColor(tokensPromise, lang) {
+  const earlyTokens = await Promise.race([
+    tokensPromise,
+    new Promise((resolve) => setTimeout(() => resolve(null), EARLY_COLOR_BUDGET_MS))
+  ]);
+  const primaryColor = primaryFrom(earlyTokens);
+  const loader = new Loader();
+  loader.show(primaryColor, lang);
+  return { loader, primaryColor };
+}
 var FlonkKYC = class {
   constructor(options = {}) {
     this.widgetUrl = (options.widgetUrl || DEFAULT_WIDGET_URL).replace(/\/$/, "");
@@ -667,11 +707,13 @@ var FlonkKYC = class {
   /**
    * Open the KYC verification widget.
    *
-   * Flows (pick one):
-   *  1. `{ serverUrl, publishableKey }` — auto-create session via your backend (recommended).
-   *     `publishableKey` enables instant branded loader (~200-500ms faster).
-   *  2. `{ sessionId, embedToken }` — server-to-server with pre-created session
-   *  3. `{ publishableKey }` — client-side only (legacy)
+   * Flows (pick one; add `publishableKey` to any for an instant branded loader):
+   *  1. `{ serverUrl }` — SDK auto-creates the session via your backend (recommended).
+   *  2. `{ sessionId, embedToken }` — you created the session; pass its credentials.
+   *  3. `{ sessionId }` — **deprecated**: exchanges the sessionId for an embedToken
+   *     via an extra round-trip. Prefer flow 2 by returning `embedToken` from your
+   *     backend alongside `sessionId`.
+   *  4. `{ publishableKey }` — client-only; SDK mints a short-lived widget token.
    */
   async init(config) {
     if (!config) throw new FlonkValidationError("config is required");
@@ -776,27 +818,20 @@ var FlonkKYC = class {
   async initWithServerUrl(config) {
     const pk = config.publishableKey;
     const designTokensPromise = pk ? fetchDesignTokens(this.apiBase, { pk }) : Promise.resolve(null);
-    let loader;
-    if (pk) {
-      const earlyTokens = await Promise.race([
-        designTokensPromise,
-        new Promise((resolve) => setTimeout(() => resolve(null), 150))
-      ]);
-      const primaryColor = earlyTokens?.colors?.primary?.cannabis || "#15BA68";
-      loader = new Loader();
-      loader.show(primaryColor, config.lang);
-    }
+    const sessionPromise = fetchSessionFromServer(
+      config.serverUrl,
+      config.clientMetadata,
+      config.requestHeaders
+    );
+    const { loader, primaryColor } = await showLoaderWithEarlyColor(designTokensPromise, config.lang);
     try {
       const [{ sessionId, embedToken }, designTokens] = await Promise.all([
-        fetchSessionFromServer(config.serverUrl, config.clientMetadata, config.requestHeaders),
+        sessionPromise,
         designTokensPromise
       ]);
       const finalTokens = designTokens ?? await fetchDesignTokens(this.apiBase, { sessionId });
-      const primaryColor = finalTokens?.colors?.primary?.cannabis || "#15BA68";
-      if (!loader) {
-        loader = new Loader();
-        loader.show(primaryColor, config.lang);
-      }
+      const finalColor = primaryFrom(finalTokens);
+      if (finalColor !== primaryColor) loader.updateColor(finalColor);
       const sessionData = await fetchPublicSession(this.apiBase, sessionId, embedToken);
       const session = {
         id: sessionData.id,
@@ -805,15 +840,14 @@ var FlonkKYC = class {
         qrCodeUrl: sessionData.qrCodeUrl,
         testMode: sessionData.testMode || false,
         poaEnabled: sessionData.poaEnabled || false,
-        poaRequired: sessionData.poaRequired || false
+        poaRequired: sessionData.poaRequired || false,
+        mlAutoCaptureEnabled: sessionData.mlAutoCaptureEnabled || false,
+        mlCropEnabled: sessionData.mlCropEnabled ?? true,
+        mlVerifyEnabled: sessionData.mlVerifyEnabled || false
       };
       return this.buildWidget(embedToken, session, config, loader, finalTokens);
     } catch (err) {
       const msg = err.message || "Failed to create session";
-      if (!loader) {
-        loader = new Loader();
-        loader.show("#15BA68", config.lang);
-      }
       loader.showError(msg, config.lang);
       config.onError?.(msg);
       throw err;
@@ -823,18 +857,21 @@ var FlonkKYC = class {
    * Flow 2: sessionId + embedToken — fetch session data, open widget.
    */
   async initWithEmbedToken(config) {
-    const designTokens = await fetchDesignTokens(this.apiBase, {
-      sessionId: config.sessionId
-    });
-    const primaryColor = designTokens?.colors?.primary?.cannabis || "#15BA68";
-    const loader = new Loader();
-    loader.show(primaryColor, config.lang);
+    const pk = config.publishableKey;
+    const designTokensPromise = pk ? fetchDesignTokens(this.apiBase, { pk }) : fetchDesignTokens(this.apiBase, { sessionId: config.sessionId });
+    const sessionPromise = fetchPublicSession(
+      this.apiBase,
+      config.sessionId,
+      config.embedToken
+    );
+    const { loader, primaryColor } = await showLoaderWithEarlyColor(designTokensPromise, config.lang);
     try {
-      const sessionData = await fetchPublicSession(
-        this.apiBase,
-        config.sessionId,
-        config.embedToken
-      );
+      const [sessionData, designTokens] = await Promise.all([
+        sessionPromise,
+        designTokensPromise
+      ]);
+      const finalColor = primaryFrom(designTokens);
+      if (finalColor !== primaryColor) loader.updateColor(finalColor);
       const session = {
         id: sessionData.id,
         allowManualUpload: sessionData.allowManualUpload ?? config.allowManualUpload ?? true,
@@ -842,7 +879,10 @@ var FlonkKYC = class {
         qrCodeUrl: sessionData.qrCodeUrl,
         testMode: sessionData.testMode || false,
         poaEnabled: sessionData.poaEnabled || false,
-        poaRequired: sessionData.poaRequired || false
+        poaRequired: sessionData.poaRequired || false,
+        mlAutoCaptureEnabled: sessionData.mlAutoCaptureEnabled || false,
+        mlCropEnabled: sessionData.mlCropEnabled ?? true,
+        mlVerifyEnabled: sessionData.mlVerifyEnabled || false
       };
       return this.buildWidget(config.embedToken, session, config, loader, designTokens);
     } catch (err) {
@@ -854,19 +894,22 @@ var FlonkKYC = class {
   }
   /**
    * Flow 3: sessionId only — exchange for embedToken, then init.
+   *
+   * @deprecated Prefer flow 2 (`sessionId` + `embedToken`). Return the
+   * `embedToken` from your backend together with the `sessionId` to skip this
+   * extra token-exchange round-trip.
    */
   async initWithSession(config) {
-    const designTokens = await fetchDesignTokens(this.apiBase, {
+    const designTokensPromise = fetchDesignTokens(this.apiBase, {
       sessionId: config.sessionId
     });
-    const primaryColor = designTokens?.colors?.primary?.cannabis || "#15BA68";
-    const loader = new Loader();
-    loader.show(primaryColor, config.lang);
+    const exchangePromise = exchangeSessionForToken(this.apiBase, config.sessionId);
+    const { loader } = await showLoaderWithEarlyColor(designTokensPromise, config.lang);
     try {
-      const { embedToken, session } = await exchangeSessionForToken(
-        this.apiBase,
-        config.sessionId
-      );
+      const [{ embedToken, session }, designTokens] = await Promise.all([
+        exchangePromise,
+        designTokensPromise
+      ]);
       return this.buildWidget(embedToken, session, config, loader, designTokens);
     } catch (err) {
       const msg = err.message || "Failed to initialize verification";
@@ -880,12 +923,11 @@ var FlonkKYC = class {
    */
   async initWithPublishableKey(config) {
     const pk = config.publishableKey;
-    const designTokens = await fetchDesignTokens(this.apiBase, { pk });
-    const primaryColor = designTokens?.colors?.primary?.cannabis || "#15BA68";
-    const loader = new Loader();
-    loader.show(primaryColor, config.lang);
+    const designTokensPromise = fetchDesignTokens(this.apiBase, { pk });
+    const widgetTokenPromise = fetchWidgetToken(pk, this.apiBase);
+    const { loader, primaryColor } = await showLoaderWithEarlyColor(designTokensPromise, config.lang);
     try {
-      const data = await fetchWidgetToken(pk, this.apiBase);
+      const data = await widgetTokenPromise;
       const params = {
         mode: "embedded",
         publishableKey: pk,
@@ -925,6 +967,9 @@ var FlonkKYC = class {
     if (session.testMode) params.testMode = "true";
     if (session.poaEnabled) params.poaEnabled = "true";
     if (session.poaRequired) params.poaRequired = "true";
+    if (session.mlAutoCaptureEnabled) params.mlAutoCaptureEnabled = "true";
+    if (session.mlCropEnabled !== false) params.mlCropEnabled = "true";
+    if (session.mlVerifyEnabled) params.mlVerifyEnabled = "true";
     if (designTokens?.colors) {
       params.designTokens = JSON.stringify(designTokens);
     }
@@ -937,7 +982,7 @@ var FlonkKYC = class {
     if (config.lang) params.lang = config.lang;
     if (config.overlayColor) params.overlayColor = config.overlayColor;
     return this.openWidget(params, {
-      primaryColor: designTokens?.colors?.primary?.cannabis || "#15BA68",
+      primaryColor: primaryFrom(designTokens),
       lang: config.lang,
       loader,
       onSuccess: config.onSuccess,
@@ -978,25 +1023,27 @@ var FlonkKYC = class {
       } catch {
       }
     };
-    const afterCleanup = (delayMs) => () => setTimeout(cleanupAll, delayMs);
+    const afterCleanup = (delayMs) => setTimeout(cleanupAll, delayMs);
     const handler = new MessageHandler(src, iframe, {
-      onSuccess: opts.onSuccess ? (r) => {
+      onSuccess: (r) => {
         opts.onSuccess?.(r);
-        afterCleanup(1e3)();
-      } : void 0,
-      onError: opts.onError ? (e) => {
+        afterCleanup(1e3);
+      },
+      onError: (e) => {
         opts.onError?.(e);
-        afterCleanup(500)();
-      } : void 0,
-      onCancel: opts.onCancel ? () => {
+        afterCleanup(500);
+      },
+      onCancel: () => {
         opts.onCancel?.();
-        afterCleanup(500)();
-      } : void 0,
+        afterCleanup(500);
+      },
       onReady: opts.onReady
     });
     handler.listen();
     handler.onReadyOnce(() => {
-      transitionLoaderToIframe(loader.element, iframe, () => loader.destroy());
+      if (loader.element) {
+        transitionLoaderToIframe(loader.element, iframe, () => loader.destroy());
+      }
     });
     return {
       iframe,
@@ -1067,7 +1114,7 @@ function FlonkKYCWidget({
       widgetRef.current?.destroy();
       widgetRef.current = null;
     };
-  }, [sdk, publishableKey, serverUrl, sessionId, autoOpen]);
+  }, [sdk, publishableKey, serverUrl, sessionId, embedToken, lang, overlayColor, allowManualUpload, autoOpen]);
   return /* @__PURE__ */ jsx("div", { ref: mountRef });
 }