@flonkid/kyc 1.7.0 → 1.8.1

package/dist/index.cjs

@@ -4,7 +4,7 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/shared/constants.ts
-var SDK_VERSION = "1.7.0";
+var SDK_VERSION = "1.8.1";
 var DEFAULT_WIDGET_URL = "https://widget.flonk.id";
 var DEFAULT_API_BASE = "https://api.flonk.id/v1";
 var WIDGET_EVENTS = {
@@ -90,37 +90,69 @@ async function fetchWithTimeout(url, init = {}, timeoutMs = DEFAULT_FETCH_TIMEOU
     clearTimeout(timer);
   }
 }
+var widgetTokenInflight = /* @__PURE__ */ new Map();
 async function fetchWidgetToken(pk, apiBase) {
-  const res = await fetchWithTimeout(`${apiBase}/public/widget-token`, {
-    headers: { "x-kyc-pk": pk },
-    credentials: "include"
-  });
-  if (!res.ok) {
-    let message = `Widget token request failed (${res.status})`;
-    try {
-      const b = await res.json();
-      message = b.error || b.message || message;
-    } catch {
+  const key = `${apiBase}|${pk}`;
+  const existing = widgetTokenInflight.get(key);
+  if (existing) return existing;
+  const promise = (async () => {
+    const res = await fetchWithTimeout(`${apiBase}/public/widget-token`, {
+      headers: { "x-kyc-pk": pk },
+      credentials: "include"
+    });
+    if (!res.ok) {
+      let message = `Widget token request failed (${res.status})`;
+      try {
+        const b = await res.json();
+        message = b.error || b.message || message;
+      } catch {
+      }
+      throw new Error(message);
     }
-    throw new Error(message);
-  }
-  return res.json();
+    return res.json();
+  })().finally(() => {
+    widgetTokenInflight.delete(key);
+  });
+  widgetTokenInflight.set(key, promise);
+  return promise;
 }
-async function fetchDesignTokens(apiBase, opts) {
+var BRANDING_CACHE_TTL_MS = 5 * 60 * 1e3;
+var brandingCache = /* @__PURE__ */ new Map();
+function brandingCacheKey(opts) {
+  if (opts.pk) return `pk:${opts.pk}`;
+  if (opts.sessionId) return `sid:${opts.sessionId}`;
+  if (opts.clientId) return `cid:${opts.clientId}`;
+  return null;
+}
+async function requestDesignTokens(apiBase, opts) {
   const params = [];
   if (opts.sessionId) params.push(`sessionId=${encodeURIComponent(opts.sessionId)}`);
   else if (opts.clientId) params.push(`clientId=${encodeURIComponent(opts.clientId)}`);
   const url = `${apiBase}/public/design-tokens${params.length ? "?" + params.join("&") : ""}`;
-  try {
-    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;
+  const res = await fetchWithTimeout(
+    url,
+    { headers: opts.pk ? { "x-kyc-pk": opts.pk } : {}, credentials: "omit" },
+    8e3
+  );
+  return res.ok ? res.json() : null;
+}
+async function fetchDesignTokens(apiBase, opts) {
+  const key = brandingCacheKey(opts);
+  if (!key) return null;
+  const now = Date.now();
+  const cached = brandingCache.get(key);
+  if (cached && cached.expiresAt > now) {
+    return cached.promise;
   }
+  const promise = requestDesignTokens(apiBase, opts).catch(() => null);
+  brandingCache.set(key, { promise, expiresAt: now + BRANDING_CACHE_TTL_MS });
+  promise.then((tokens) => {
+    if (tokens == null) brandingCache.delete(key);
+  });
+  return promise;
+}
+function preloadDesignTokens(apiBase, opts) {
+  return fetchDesignTokens(apiBase, opts);
 }
 function validateServerUrl(url) {
   if (url.startsWith("/")) return;
@@ -137,25 +169,35 @@ function validateServerUrl(url) {
     throw new Error(`Invalid serverUrl: ${url}`);
   }
 }
+var sessionCreateInflight = /* @__PURE__ */ new Map();
 async function fetchSessionFromServer(serverUrl, clientMetadata, requestHeaders) {
   validateServerUrl(serverUrl);
-  const res = await fetchWithTimeout(serverUrl, {
-    method: "POST",
-    headers: { "Content-Type": "application/json", ...requestHeaders },
-    credentials: "include",
-    body: JSON.stringify({ clientMetadata })
-  });
-  if (!res.ok) {
-    let message = `Session request failed (${res.status})`;
-    try {
-      const body = await res.json();
-      if (body.error) message = body.error;
-      else if (body.message) message = body.message;
-    } catch {
+  const key = `${serverUrl}|${JSON.stringify(clientMetadata ?? null)}`;
+  const existing = sessionCreateInflight.get(key);
+  if (existing) return existing;
+  const promise = (async () => {
+    const res = await fetchWithTimeout(serverUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...requestHeaders },
+      credentials: "include",
+      body: JSON.stringify({ clientMetadata })
+    });
+    if (!res.ok) {
+      let message = `Session request failed (${res.status})`;
+      try {
+        const body = await res.json();
+        if (body.error) message = body.error;
+        else if (body.message) message = body.message;
+      } catch {
+      }
+      throw new Error(message);
     }
-    throw new Error(message);
-  }
-  return res.json();
+    return res.json();
+  })().finally(() => {
+    sessionCreateInflight.delete(key);
+  });
+  sessionCreateInflight.set(key, promise);
+  return promise;
 }
 async function fetchPublicSession(apiBase, sessionId, embedToken) {
   const res = await fetchWithTimeout(`${apiBase}/public/session/${sessionId}`, {
@@ -705,6 +747,26 @@ var FlonkKYC = class {
     this.widgetUrl = (options.widgetUrl || DEFAULT_WIDGET_URL).replace(/\/$/, "");
     this.apiBase = (options.apiBase || DEFAULT_API_BASE).replace(/\/$/, "");
   }
+  /**
+   * Warm the project's branding (colors) ahead of time so the widget paints the
+   * brand color on the first frame, with no branding round-trip at click time.
+   *
+   * Call it early — on page mount, route enter, or hover of the "verify" button
+   * — well before `init()`. The result is cached (module-level, 5-min TTL) and
+   * every subsequent `init()`/`open()` for the same key reads from it. Safe to
+   * call repeatedly; concurrent calls dedupe. Never throws.
+   *
+   * @example
+   * // in a layout effect, long before the user clicks "Verify"
+   * FlonkKYC.preloadBranding({ publishableKey: 'pk_live_...' });
+   */
+  static preloadBranding(opts) {
+    const apiBase = (opts.apiBase || DEFAULT_API_BASE).replace(/\/$/, "");
+    return preloadDesignTokens(apiBase, {
+      pk: opts.publishableKey,
+      sessionId: opts.sessionId
+    }).then(() => void 0);
+  }
   // ── Public API ───────────────────────────────────────
   /**
    * Open the KYC verification widget.
@@ -972,6 +1034,11 @@ var FlonkKYC = class {
     if (session.mlAutoCaptureEnabled) params.mlAutoCaptureEnabled = "true";
     if (session.mlCropEnabled !== false) params.mlCropEnabled = "true";
     if (session.mlVerifyEnabled) params.mlVerifyEnabled = "true";
+    if (session.vaultReuseEnabled) params.vaultReuseEnabled = "true";
+    if (session.vaultReuseChallenge) params.vaultReuseChallenge = session.vaultReuseChallenge;
+    if (session.faceAutoCapture) params.faceAutoCapture = JSON.stringify(session.faceAutoCapture);
+    if (session.project) params.project = JSON.stringify(session.project);
+    params.policyReady = "1";
     if (designTokens?.colors) {
       params.designTokens = JSON.stringify(designTokens);
     }
@@ -1077,6 +1144,10 @@ function FlonkKYCWidget({
   const callbacksRef = react.useRef({ onSuccess, onError, onCancel, onReady });
   callbacksRef.current = { onSuccess, onError, onCancel, onReady };
   const sdk = react.useMemo(() => new FlonkKYC({ widgetUrl, apiBase }), [widgetUrl, apiBase]);
+  react.useEffect(() => {
+    if (!publishableKey && !sessionId) return;
+    void FlonkKYC.preloadBranding({ publishableKey, sessionId, apiBase });
+  }, [publishableKey, sessionId, apiBase]);
   const generationRef = react.useRef(0);
   react.useEffect(() => {
     if (!autoOpen) return;
@@ -1119,9 +1190,20 @@ function FlonkKYCWidget({
   }, [sdk, publishableKey, serverUrl, sessionId, embedToken, lang, overlayColor, allowManualUpload, autoOpen]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mountRef });
 }
+function FlonkKYCBrandingPreloader({
+  publishableKey,
+  sessionId,
+  apiBase
+}) {
+  react.useEffect(() => {
+    void FlonkKYC.preloadBranding({ publishableKey, sessionId, apiBase });
+  }, [publishableKey, sessionId, apiBase]);
+  return null;
+}
 
 exports.FlonkError = FlonkError;
 exports.FlonkKYC = FlonkKYC;
+exports.FlonkKYCBrandingPreloader = FlonkKYCBrandingPreloader;
 exports.FlonkKYCWidget = FlonkKYCWidget;
 exports.FlonkValidationError = FlonkValidationError;
 //# sourceMappingURL=index.cjs.map