astra-sdk-web 1.1.0 → 1.1.2

package/dist/components.es.js

@@ -0,0 +1,1467 @@
+import React, { createContext, useState, useEffect, useRef, useContext, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { MemoryRouter, Routes, Route, Navigate, useSearchParams, useNavigate } from 'react-router-dom';
+import { FACEMESH_TESSELATION, FACEMESH_FACE_OVAL, FACEMESH_LEFT_EYE, FACEMESH_RIGHT_EYE, FACEMESH_LIPS, FaceMesh } from '@mediapipe/face_mesh';
+import { drawConnectors, drawLandmarks } from '@mediapipe/drawing_utils';
+import { QRCodeSVG } from 'qrcode.react';
+
+// src/components/KycFlow.tsx
+
+// src/services/kycApiService.ts
+var KycApiService = class {
+  config;
+  constructor(config) {
+    this.config = config;
+  }
+  /**
+   * Detect device type
+   */
+  detectDeviceType() {
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+    if (/android/i.test(userAgent)) return "android";
+    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) return "ios";
+    if (/Mac|Windows|Linux/.test(userAgent)) return "desktop";
+    return "unknown";
+  }
+  /**
+   * Get session status
+   */
+  async getSessionStatus() {
+    const deviceType = this.config.deviceType || this.detectDeviceType();
+    try {
+      const response = await fetch(
+        `${this.config.apiBaseUrl}/api/v2/dashboard/merchant/onsite/session/${this.config.sessionId}/status`,
+        {
+          method: "GET",
+          headers: {
+            "x-server-key": this.config.serverKey,
+            "device-type": deviceType,
+            "Content-Type": "application/json"
+          },
+          credentials: "include"
+        }
+      );
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        const message = errorData?.message || `Status fetch failed with status ${response.status}`;
+        throw new Error(message);
+      }
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      const message = error?.message || "Status fetch failed";
+      throw new Error(`Status fetch failed: ${message}`);
+    }
+  }
+  /**
+   * Upload face scan image
+   */
+  async uploadFaceScan(faceBlob) {
+    await this.checkSessionActive();
+    const deviceType = this.config.deviceType || this.detectDeviceType();
+    const formData = new FormData();
+    const faceFileName = faceBlob?.name || `face-${Date.now()}.jpg`;
+    formData.append("face_scan_img", faceBlob, faceFileName);
+    try {
+      const response = await fetch(
+        `${this.config.apiBaseUrl}/api/v2/dashboard/merchant/onsite/session/${this.config.sessionId}/face`,
+        {
+          method: "POST",
+          headers: {
+            "x-server-key": this.config.serverKey,
+            "device-type": deviceType
+          },
+          credentials: "include",
+          body: formData
+        }
+      );
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        const message = errorData?.message || `Face upload failed with status ${response.status}`;
+        throw new Error(message);
+      }
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      const message = error?.message || "Face upload failed";
+      throw new Error(`Face upload failed: ${message}`);
+    }
+  }
+  /**
+   * Upload document scan image
+   */
+  async uploadDocument(docBlob, docType) {
+    await this.checkSessionActive();
+    const deviceType = this.config.deviceType || this.detectDeviceType();
+    const formData = new FormData();
+    const docFileName = docBlob?.name || `document-${Date.now()}.jpg`;
+    formData.append("docs_scan_img", docBlob, docFileName);
+    formData.append("docType", docType);
+    try {
+      const response = await fetch(
+        `${this.config.apiBaseUrl}/api/v2/dashboard/merchant/onsite/session/${this.config.sessionId}/docs`,
+        {
+          method: "POST",
+          headers: {
+            "x-server-key": this.config.serverKey,
+            "device-type": deviceType
+          },
+          credentials: "include",
+          body: formData
+        }
+      );
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        const message = errorData?.message || `Document upload failed with status ${response.status}`;
+        throw new Error(message);
+      }
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      const message = error?.message || "Document upload failed";
+      throw new Error(`Document upload failed: ${message}`);
+    }
+  }
+  /**
+   * Check if session is active, throw error if not
+   */
+  async checkSessionActive() {
+    const status = await this.getSessionStatus();
+    if (status.data.status !== "ACTIVE") {
+      throw new Error("Session expired or inactive. Please start a new session.");
+    }
+  }
+  /**
+   * Update configuration
+   */
+  updateConfig(config) {
+    this.config = { ...this.config, ...config };
+  }
+  /**
+   * Get current configuration
+   */
+  getConfig() {
+    return { ...this.config };
+  }
+};
+var KycContext = createContext({
+  apiService: null,
+  setApiConfig: () => {
+  }
+});
+var useKycContext = () => {
+  const context = useContext(KycContext);
+  if (!context) {
+    throw new Error("useKycContext must be used within KycProvider");
+  }
+  return context;
+};
+var KycProvider = ({
+  children,
+  apiBaseUrl,
+  sessionId,
+  serverKey,
+  deviceType
+}) => {
+  const [apiService, setApiService] = React.useState(null);
+  React.useEffect(() => {
+    if (apiBaseUrl && sessionId && serverKey) {
+      const service = new KycApiService({
+        apiBaseUrl,
+        sessionId,
+        serverKey,
+        deviceType
+      });
+      setApiService(service);
+    }
+  }, [apiBaseUrl, sessionId, serverKey, deviceType]);
+  const setApiConfig = React.useCallback((config) => {
+    if (apiService) {
+      apiService.updateConfig(config);
+    } else {
+      const service = new KycApiService(config);
+      setApiService(service);
+    }
+  }, [apiService]);
+  return /* @__PURE__ */ jsx(KycContext.Provider, { value: { apiService, setApiConfig }, children });
+};
+
+// src/utils/deviceDetection.ts
+function isMobileDevice() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+  const mobileRegex = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i;
+  const isSmallScreen = window.innerWidth <= 768;
+  const hasTouchScreen = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+  return mobileRegex.test(userAgent) || isSmallScreen && hasTouchScreen;
+}
+function useDocumentUpload(callbacks) {
+  const [state, setState] = useState({
+    docType: "CNIC",
+    isDocScanMode: false,
+    docPreviewUrl: null,
+    docFileName: "",
+    loading: false
+  });
+  const fileInputRef = useRef(null);
+  const docVideoRef = useRef(null);
+  const docStreamRef = useRef(null);
+  const docPendingBlobRef = useRef(null);
+  const getRearStream = async () => {
+    const attempts = [
+      { video: { facingMode: { exact: "environment" }, width: { ideal: 1280 }, height: { ideal: 1920 } }, audio: false },
+      { video: { facingMode: "environment", width: { ideal: 1280 }, height: { ideal: 1920 } }, audio: false },
+      { video: { facingMode: { exact: "environment" }, width: { ideal: 720 }, height: { ideal: 1280 } }, audio: false },
+      { video: { facingMode: "environment", width: { ideal: 720 }, height: { ideal: 1280 } }, audio: false }
+    ];
+    for (const c of attempts) {
+      try {
+        return await navigator.mediaDevices.getUserMedia(c);
+      } catch {
+      }
+    }
+    let temp = null;
+    try {
+      temp = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+    } catch (e) {
+      throw e;
+    } finally {
+      try {
+        temp?.getTracks().forEach((t) => t.stop());
+      } catch {
+      }
+    }
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    const videoInputs = devices.filter((d) => d.kind === "videoinput");
+    const rear = videoInputs.find((d) => /back|rear|environment/i.test(d.label));
+    const chosen = rear || videoInputs.find((d) => !/front|user|face/i.test(d.label)) || videoInputs[0];
+    if (!chosen) throw new Error("No video input devices found");
+    const byDeviceAttempts = [
+      { video: { deviceId: { exact: chosen.deviceId }, width: { ideal: 1280 }, height: { ideal: 1920 } }, audio: false },
+      { video: { deviceId: { exact: chosen.deviceId }, width: { ideal: 720 }, height: { ideal: 1280 } }, audio: false },
+      { video: { deviceId: { exact: chosen.deviceId } }, audio: false }
+    ];
+    for (const c of byDeviceAttempts) {
+      try {
+        return await navigator.mediaDevices.getUserMedia(c);
+      } catch {
+      }
+    }
+    return await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+  };
+  const startDocCamera = async () => {
+    try {
+      if (docStreamRef.current) {
+        try {
+          docStreamRef.current.getTracks().forEach((t) => t.stop());
+        } catch {
+        }
+        docStreamRef.current = null;
+      }
+      const stream = await getRearStream();
+      if (docVideoRef.current) {
+        docVideoRef.current.srcObject = stream;
+        await docVideoRef.current.play().catch(() => {
+        });
+      }
+      docStreamRef.current = stream;
+    } catch (e) {
+      console.error("Could not start document camera:", e);
+      setState((prev) => ({ ...prev, isDocScanMode: false }));
+      if (callbacks?.onError) {
+        callbacks.onError(e);
+      }
+    }
+  };
+  const handleDocumentUpload = (event) => {
+    if (state.loading) return;
+    const file = event.target.files?.[0];
+    if (!file) return;
+    setState((prev) => ({ ...prev, docFileName: file.name || "" }));
+    try {
+      const objectUrl = URL.createObjectURL(file);
+      setState((prev) => ({ ...prev, docPreviewUrl: objectUrl }));
+      docPendingBlobRef.current = file;
+    } catch (err) {
+      console.error("Could not preview document:", err);
+      if (callbacks?.onError) {
+        callbacks.onError(err);
+      }
+    }
+  };
+  const handleConfirmDocumentUpload = async () => {
+    if (state.loading || !docPendingBlobRef.current) return;
+    setState((prev) => ({ ...prev, loading: true }));
+    try {
+      const file = docPendingBlobRef.current;
+      if (callbacks?.onDocumentUpload) {
+        try {
+          await callbacks.onDocumentUpload(file, state.docType);
+        } catch (uploadError) {
+          throw new Error(uploadError.message || "Failed to upload document");
+        }
+      }
+      if (callbacks?.onUpload) {
+        callbacks.onUpload(file, state.docType);
+      }
+      setState((prev) => ({
+        ...prev,
+        docPreviewUrl: null,
+        docFileName: "",
+        loading: false
+      }));
+      docPendingBlobRef.current = null;
+    } catch (err) {
+      console.error("Document upload failed:", err);
+      setState((prev) => ({ ...prev, loading: false }));
+      if (callbacks?.onError) {
+        callbacks.onError(err);
+      }
+    }
+  };
+  const handleManualCapture = async () => {
+    if (!docVideoRef.current || state.loading) return;
+    setState((prev) => ({ ...prev, loading: true }));
+    try {
+      const video = docVideoRef.current;
+      const canvas = document.createElement("canvas");
+      const width = video.videoWidth || 1280;
+      const height = video.videoHeight || 720;
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) throw new Error("Canvas not supported");
+      ctx.drawImage(video, 0, 0, width, height);
+      const blob = await new Promise((resolve) => {
+        canvas.toBlob((blob2) => {
+          resolve(blob2 || new Blob());
+        }, "image/jpeg", 0.92);
+      });
+      const file = new File([blob], "document.jpg", { type: "image/jpeg" });
+      if (callbacks?.onDocumentUpload) {
+        try {
+          await callbacks.onDocumentUpload(file, state.docType);
+        } catch (uploadError) {
+          throw new Error(uploadError.message || "Failed to upload document");
+        }
+      }
+      const objectUrl = URL.createObjectURL(file);
+      setState((prev) => ({
+        ...prev,
+        docPreviewUrl: objectUrl,
+        isDocScanMode: false,
+        loading: false
+      }));
+      docPendingBlobRef.current = file;
+      if (docStreamRef.current) {
+        docStreamRef.current.getTracks().forEach((t) => t.stop());
+        docStreamRef.current = null;
+      }
+      if (callbacks?.onScan) {
+        callbacks.onScan(file, state.docType);
+      }
+    } catch (err) {
+      console.error("Capture failed:", err);
+      setState((prev) => ({ ...prev, loading: false }));
+      if (callbacks?.onError) {
+        callbacks.onError(err);
+      }
+    }
+  };
+  useEffect(() => {
+    if (state.isDocScanMode) {
+      startDocCamera();
+    }
+    return () => {
+      if (docStreamRef.current) {
+        docStreamRef.current.getTracks().forEach((t) => t.stop());
+        docStreamRef.current = null;
+      }
+    };
+  }, [state.isDocScanMode]);
+  return {
+    state,
+    setState,
+    fileInputRef,
+    docVideoRef,
+    handleDocumentUpload,
+    handleConfirmDocumentUpload,
+    handleManualCapture,
+    startDocCamera
+  };
+}
+function DocumentUploadModal({ onComplete }) {
+  const navigate = useNavigate();
+  const { apiService } = useKycContext();
+  const [sessionError, setSessionError] = useState(null);
+  const {
+    state,
+    setState,
+    fileInputRef,
+    docVideoRef,
+    handleDocumentUpload,
+    handleConfirmDocumentUpload,
+    handleManualCapture,
+    startDocCamera
+  } = useDocumentUpload({
+    onDocumentUpload: async (blob, docType) => {
+      if (!apiService) {
+        throw new Error("API service not initialized");
+      }
+      await apiService.uploadDocument(blob, docType);
+    },
+    onUpload: (file, docType) => {
+      if (onComplete) {
+        onComplete(file, docType);
+      }
+    },
+    onScan: (file, docType) => {
+      if (onComplete) {
+        onComplete(file, docType);
+      }
+    }
+  });
+  useEffect(() => {
+    const checkSession = async () => {
+      if (!apiService) return;
+      try {
+        await apiService.checkSessionActive();
+        setSessionError(null);
+      } catch (error) {
+        const message = error.message || "Session expired or inactive";
+        setSessionError(message);
+        setTimeout(() => {
+          navigate("/qr", { replace: true });
+        }, 2e3);
+      }
+    };
+    checkSession();
+  }, [apiService, navigate]);
+  if (sessionError) {
+    return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black p-4 z-[1000] flex items-center justify-center font-sans overflow-y-auto custom__scrollbar", children: /* @__PURE__ */ jsx("div", { className: "max-w-[400px] w-full mx-auto bg-[#0b0f17] rounded-2xl p-6 shadow-xl", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("h2", { className: "m-0 mb-4 text-[26px] font-bold text-red-500", children: "Session Expired" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[#e5e7eb] mb-4", children: sessionError }),
+      /* @__PURE__ */ jsx("p", { className: "text-[#9ca3af] text-sm", children: "Redirecting to QR code page..." })
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black p-5 z-[1000] flex items-center justify-center font-sans overflow-y-auto custom__scrollbar", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "max-w-[400px] w-full mx-auto bg-[#0b0f17] rounded-2xl p-6 shadow-xl",
+      style: {
+        marginTop: state.docPreviewUrl && !state.isDocScanMode ? "192px" : "0"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "relative mb-4", children: /* @__PURE__ */ jsx("h2", { className: "m-0 mb-4 text-xl font-bold text-white", children: "Document" }) }),
+        !state.isDocScanMode && /* @__PURE__ */ jsxs("div", { className: "grid gap-2 mb-3", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => fileInputRef.current?.click(),
+              className: "w-full py-3 px-4 rounded-lg border-2 border-dashed border-[#374151] bg-[#0f172a] text-[#e5e7eb] text-base cursor-pointer hover:border-[#4b5563] transition-colors",
+              children: "Upload Document"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setState((prev) => ({ ...prev, isDocScanMode: true }));
+                startDocCamera();
+              },
+              className: "w-full py-3 px-4 rounded-lg text-white border-none text-base cursor-pointer transition-opacity hover:opacity-90",
+              style: {
+                background: "linear-gradient(90deg, #FF8A00 0%, #FF3D77 100%)"
+              },
+              children: "Scan Document (Back Camera)"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-3 mb-4", children: [
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-[#e5e7eb] cursor-pointer", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                name: "doc-type",
+                value: "CNIC",
+                checked: state.docType === "CNIC",
+                defaultChecked: true,
+                onChange: () => setState((prev) => ({ ...prev, docType: "CNIC" })),
+                className: "cursor-pointer w-4 h-4",
+                style: {
+                  accentColor: state.docType === "CNIC" ? "#ef4444" : "#6b7280"
+                }
+              }
+            ),
+            "NIC"
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-[#e5e7eb] cursor-pointer", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                name: "doc-type",
+                value: "Passport",
+                checked: state.docType === "Passport",
+                onChange: () => setState((prev) => ({ ...prev, docType: "Passport" })),
+                className: "cursor-pointer w-4 h-4",
+                style: {
+                  accentColor: state.docType === "Passport" ? "#ef4444" : "#6b7280"
+                }
+              }
+            ),
+            "Passport"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept: "image/*,.pdf",
+            onChange: handleDocumentUpload,
+            className: "hidden"
+          }
+        ),
+        state.isDocScanMode && /* @__PURE__ */ jsxs("div", { className: "grid gap-3 mt-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "relative w-full aspect-[3/4] rounded-lg overflow-hidden bg-black", children: /* @__PURE__ */ jsx(
+            "video",
+            {
+              ref: docVideoRef,
+              playsInline: true,
+              muted: true,
+              autoPlay: true,
+              className: "w-full h-full object-cover"
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleManualCapture,
+                disabled: state.loading,
+                className: "flex-1 py-3 px-4 rounded-lg text-white border-none text-base cursor-pointer transition-opacity disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-90",
+                style: {
+                  background: "linear-gradient(90deg, #FF8A00 0%, #FF3D77 100%)"
+                },
+                children: state.loading ? "Capturing..." : "Capture Document"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setState((prev) => ({ ...prev, isDocScanMode: false }));
+                },
+                disabled: state.loading,
+                className: "py-3 px-4 rounded-lg bg-[#111827] text-[#e5e7eb] border-none text-base cursor-pointer hover:bg-[#1f2937] transition-colors disabled:opacity-50",
+                children: "Cancel"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "m-0 text-[#9ca3af] text-xs text-center", children: state.loading ? "Processing document..." : "Position your document in the frame and tap 'Capture Document' when ready." })
+        ] }),
+        state.docFileName && !state.isDocScanMode && /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2 py-2 px-3 rounded-full bg-[#1f2937] text-[#e5e7eb] text-sm mb-3", children: [
+          /* @__PURE__ */ jsx("span", { children: "\u2714" }),
+          /* @__PURE__ */ jsx("span", { children: "File selected" })
+        ] }),
+        state.loading && !state.isDocScanMode && /* @__PURE__ */ jsx("p", { className: "m-3 mt-0 text-[#60a5fa] text-center", children: "Processing..." }),
+        !state.isDocScanMode && state.docPreviewUrl && /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "font-semibold mb-1.5 text-[#e5e7eb]", children: "Preview" }),
+          /* @__PURE__ */ jsx("img", { src: state.docPreviewUrl, alt: "Document preview", className: "w-full rounded-lg border border-[#374151]" }),
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-2 grid-cols-2 mt-2", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleConfirmDocumentUpload,
+                disabled: state.loading,
+                className: "py-3 px-4 rounded-lg text-white border-none text-base cursor-pointer w-full transition-opacity disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-90",
+                style: {
+                  background: "linear-gradient(90deg, #10b981 0%, #059669 100%)"
+                },
+                children: state.loading ? "Uploading..." : "Looks good, continue"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setState((prev) => ({
+                    ...prev,
+                    docPreviewUrl: null,
+                    docFileName: ""
+                  }));
+                },
+                disabled: state.loading,
+                className: "py-3 px-4 rounded-lg bg-[#111827] text-[#e5e7eb] border-none text-base cursor-pointer w-full hover:bg-[#1f2937] transition-colors disabled:opacity-50",
+                children: "Retake / Choose again"
+              }
+            )
+          ] })
+        ] }),
+        !state.isDocScanMode && !state.docFileName && !state.docPreviewUrl && /* @__PURE__ */ jsx("p", { className: "m-0 text-[#9ca3af] text-xs text-center", children: "After uploading or scanning, return to your desktop to check status." })
+      ]
+    }
+  ) });
+}
+var DocumentUploadModal_default = DocumentUploadModal;
+function useCamera() {
+  const videoRef = useRef(null);
+  const streamRef = useRef(null);
+  const [cameraReady, setCameraReady] = useState(false);
+  const startCamera = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          facingMode: "user",
+          width: { ideal: 1280 },
+          height: { ideal: 720 }
+        },
+        audio: false
+      });
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+        await videoRef.current.play().catch(() => {
+        });
+        requestAnimationFrame(() => {
+          try {
+            const v = videoRef.current;
+          } catch {
+          }
+        });
+      }
+      streamRef.current = stream;
+      setCameraReady(true);
+    } catch (e) {
+      console.error("Camera access error:", e);
+      setCameraReady(false);
+      throw e;
+    }
+  };
+  const stopCamera = () => {
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((t) => t.stop());
+      streamRef.current = null;
+    }
+    if (videoRef.current) {
+      videoRef.current.srcObject = null;
+    }
+    setCameraReady(false);
+  };
+  useEffect(() => {
+    startCamera();
+    return () => {
+      stopCamera();
+    };
+  }, []);
+  return {
+    videoRef,
+    cameraReady,
+    startCamera,
+    stopCamera
+  };
+}
+var FaceMeshService = class {
+  faceMesh = null;
+  videoRef;
+  canvasRef;
+  callbacks;
+  cameraDriverRef;
+  livenessStateRef;
+  cancelled = false;
+  constructor(videoRef, canvasRef, cameraDriverRef, livenessStateRef, callbacks) {
+    this.videoRef = videoRef;
+    this.canvasRef = canvasRef;
+    this.cameraDriverRef = cameraDriverRef;
+    this.livenessStateRef = livenessStateRef;
+    this.callbacks = callbacks;
+  }
+  drawOverlays(ctx, normalized) {
+    drawConnectors(ctx, normalized, FACEMESH_TESSELATION, { color: "#60a5fa", lineWidth: 0.5 });
+    drawConnectors(ctx, normalized, FACEMESH_FACE_OVAL, { color: "#f59e0b", lineWidth: 2 });
+    drawConnectors(ctx, normalized, FACEMESH_LEFT_EYE, { color: "#10b981", lineWidth: 1.5 });
+    drawConnectors(ctx, normalized, FACEMESH_RIGHT_EYE, { color: "#ef4444", lineWidth: 1.5 });
+    drawConnectors(ctx, normalized, FACEMESH_LIPS, { color: "#a855f7", lineWidth: 1.5 });
+    drawLandmarks(ctx, normalized, { color: "#2563eb", lineWidth: 0, radius: 1.5 });
+  }
+  processResults(results) {
+    const canvas = this.canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const dpr = Math.max(1, Math.min(3, window.devicePixelRatio || 1));
+    const displayW = canvas.parentElement?.clientWidth || canvas.width;
+    const displayH = canvas.parentElement?.clientHeight || canvas.height;
+    if (canvas.width !== Math.round(displayW * dpr) || canvas.height !== Math.round(displayH * dpr)) {
+      canvas.width = Math.round(displayW * dpr);
+      canvas.height = Math.round(displayH * dpr);
+    }
+    const w = canvas.width, h = canvas.height;
+    ctx.fillStyle = "rgb(0, 0, 0)";
+    ctx.fillRect(0, 0, w, h);
+    const faces = results.multiFaceLandmarks;
+    const face = faces && faces[0];
+    if (face) {
+      const vid = this.videoRef.current;
+      const vidW = Math.max(1, vid?.videoWidth || displayW);
+      const vidH = Math.max(1, vid?.videoHeight || displayH);
+      const scale = Math.max(w / vidW, h / vidH);
+      const offsetX = (w - vidW * scale) / 2;
+      const offsetY = (h - vidH * scale) / 2;
+      const faceOnCanvas = face.map((p) => {
+        const mappedX = (p.x * vidW * scale + offsetX) / w;
+        return {
+          x: 1 - mappedX,
+          y: (p.y * vidH * scale + offsetY) / h
+        };
+      });
+      const guideCX = w / 2;
+      const guideCY = h / 2;
+      const guideR = Math.min(w, h) * 0.45;
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(guideCX, guideCY, guideR, 0, Math.PI * 2);
+      ctx.clip();
+      ctx.drawImage(vid, offsetX, offsetY, vidW * scale, vidH * scale);
+      ctx.restore();
+      this.drawOverlays(ctx, faceOnCanvas);
+      this.livenessStateRef.current.lastResultsAt = Date.now();
+      if (this.callbacks.onFaceDetected) {
+        this.callbacks.onFaceDetected(faceOnCanvas);
+      }
+      this.processLiveness(faceOnCanvas, w, h);
+    } else {
+      const vid = this.videoRef.current;
+      if (vid) {
+        const vidW = Math.max(1, vid?.videoWidth || displayW);
+        const vidH = Math.max(1, vid?.videoHeight || displayH);
+        const scale = Math.max(w / vidW, h / vidH);
+        const offsetX = (w - vidW * scale) / 2;
+        const offsetY = (h - vidH * scale) / 2;
+        const guideCX = w / 2;
+        const guideCY = h / 2;
+        const guideR = Math.min(w, h) * 0.45;
+        ctx.save();
+        ctx.beginPath();
+        ctx.arc(guideCX, guideCY, guideR, 0, Math.PI * 2);
+        ctx.clip();
+        ctx.drawImage(vid, offsetX, offsetY, vidW * scale, vidH * scale);
+        ctx.restore();
+      }
+      if (Date.now() - this.livenessStateRef.current.lastResultsAt > 2e3) {
+        if (this.callbacks.onLivenessUpdate) {
+          this.callbacks.onLivenessUpdate(
+            this.livenessStateRef.current.stage,
+            "No face detected. Center your face in frame with good lighting."
+          );
+        }
+      }
+    }
+  }
+  processLiveness(faceOnCanvas, w, h) {
+    const eyeA = faceOnCanvas[33];
+    const eyeB = faceOnCanvas[263];
+    const flipX = (p) => ({ x: 1 - p.x, y: p.y });
+    const eA = flipX(eyeA);
+    const eB = flipX(eyeB);
+    const n1 = faceOnCanvas[1];
+    const n4 = faceOnCanvas[4];
+    const nT = flipX(n1 && n4 ? { x: (n1.x + n4.x) / 2, y: (n1.y + n4.y) / 2 } : n1 || n4 || faceOnCanvas[197]);
+    const leftEyeOuter = eA.x < eB.x ? eA : eB;
+    const rightEyeOuter = eA.x < eB.x ? eB : eA;
+    if (leftEyeOuter && rightEyeOuter && nT) {
+      const faceWidth = Math.abs(rightEyeOuter.x - leftEyeOuter.x);
+      const midX = (leftEyeOuter.x + rightEyeOuter.x) / 2;
+      const yaw = (nT.x - midX) / Math.max(1e-6, faceWidth);
+      const absYaw = Math.abs(yaw);
+      const xs = faceOnCanvas.map((p) => p.x), ys = faceOnCanvas.map((p) => p.y);
+      const minX = Math.min(...xs) * w, maxX = Math.max(...xs) * w;
+      const minY = Math.min(...ys) * h, maxY = Math.max(...ys) * h;
+      const boxCX = (minX + maxX) / 2, boxCY = (minY + maxY) / 2;
+      const guideCX = w / 2;
+      const guideCY = h / 2;
+      const guideR = Math.min(w, h) * 0.45;
+      const dx = boxCX - guideCX;
+      const dy = boxCY - guideCY;
+      const insideGuide = dx * dx + dy * dy <= guideR * guideR && maxX - minX <= guideR * 2 * 1.05 && maxY - minY <= guideR * 2 * 1.05;
+      if (!this.livenessStateRef.current.livenessReady) {
+        this.livenessStateRef.current.livenessReady = true;
+      }
+      const centerThreshold = 0.05;
+      const rightThreshold = 0.08;
+      const holdFramesCenter = 12;
+      const holdFramesTurn = 12;
+      const state = this.livenessStateRef.current;
+      if (state.stage === "CENTER") {
+        if (!insideGuide) {
+          if (this.callbacks.onLivenessUpdate) {
+            this.callbacks.onLivenessUpdate(state.stage, "Center your face inside the circle");
+          }
+        } else if (absYaw < centerThreshold) {
+          state.centerHold += 1;
+          if (state.centerHold >= holdFramesCenter) {
+            const newStage = "LEFT";
+            state.stage = newStage;
+            state.centerHold = 0;
+            if (this.callbacks.onLivenessUpdate) {
+              this.callbacks.onLivenessUpdate(newStage, "Turn your face LEFT");
+            }
+          }
+        } else {
+          state.centerHold = 0;
+          if (this.callbacks.onLivenessUpdate) {
+            this.callbacks.onLivenessUpdate(state.stage, yaw > 0 ? "Move your face slightly LEFT" : "Move your face slightly RIGHT");
+          }
+        }
+      } else if (state.stage === "LEFT") {
+        if (faceWidth < 0.08) {
+          if (this.callbacks.onLivenessUpdate) {
+            this.callbacks.onLivenessUpdate(state.stage, "Move closer to the camera");
+          }
+        } else if (yaw < -0.08) {
+          state.leftHold += 1;
+          if (state.leftHold >= holdFramesTurn) {
+            const newStage = "RIGHT";
+            state.stage = newStage;
+            state.leftHold = 0;
+            if (this.callbacks.onLivenessUpdate) {
+              this.callbacks.onLivenessUpdate(newStage, "Great! Now turn your face RIGHT");
+            }
+          }
+        } else {
+          state.leftHold = 0;
+          if (this.callbacks.onLivenessUpdate) {
+            this.callbacks.onLivenessUpdate(state.stage, yaw > rightThreshold ? "You're facing right. Turn LEFT" : "Turn a bit more LEFT");
+          }
+        }
+      } else if (state.stage === "RIGHT") {
+        if (faceWidth < 0.08) {
+          if (this.callbacks.onLivenessUpdate) {
+            this.callbacks.onLivenessUpdate(state.stage, "Move closer to the camera");
+          }
+        } else if (yaw > rightThreshold) {
+          state.rightHold += 1;
+          if (state.rightHold >= holdFramesTurn) {
+            state.rightHold = 0;
+            if (!state.snapTriggered) {
+              state.snapTriggered = true;
+              const newStage = "DONE";
+              state.stage = newStage;
+              if (this.callbacks.onLivenessUpdate) {
+                this.callbacks.onLivenessUpdate(newStage, "Capturing...");
+              }
+              if (this.callbacks.onCaptureTrigger) {
+                this.callbacks.onCaptureTrigger();
+              }
+            }
+          }
+        } else {
+          state.rightHold = 0;
+          if (this.callbacks.onLivenessUpdate) {
+            this.callbacks.onLivenessUpdate(state.stage, yaw < -0.08 ? "You're facing left. Turn RIGHT" : "Turn a bit more RIGHT");
+          }
+        }
+      }
+    }
+  }
+  waitForVideoReady() {
+    return new Promise((resolve, reject) => {
+      let attempts = 0;
+      const maxAttempts = 100;
+      const checkReady = () => {
+        if (this.cancelled) {
+          reject(new Error("Cancelled"));
+          return;
+        }
+        const video = this.videoRef.current;
+        if (video && video.readyState >= 2 && video.videoWidth > 0 && video.videoHeight > 0 && !isNaN(video.videoWidth) && !isNaN(video.videoHeight)) {
+          resolve();
+        } else if (attempts >= maxAttempts) {
+          if (video) {
+            resolve();
+          } else {
+            reject(new Error("Video not ready"));
+          }
+        } else {
+          attempts++;
+          requestAnimationFrame(checkReady);
+        }
+      };
+      checkReady();
+    });
+  }
+  async initialize() {
+    try {
+      const fm = new FaceMesh({
+        locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4.1633559619/${file}`
+      });
+      fm.setOptions({
+        selfieMode: true,
+        maxNumFaces: 1,
+        refineLandmarks: true,
+        minDetectionConfidence: 0.5,
+        minTrackingConfidence: 0.5
+      });
+      this.faceMesh = fm;
+      if (this.cancelled) return;
+      if (this.callbacks.onModelLoaded) {
+        this.callbacks.onModelLoaded();
+      }
+      fm.onResults((results) => {
+        if (!this.cancelled) {
+          this.processResults(results);
+        }
+      });
+      if (this.videoRef.current) {
+        try {
+          await this.waitForVideoReady();
+        } catch (error) {
+          if (!this.cancelled) {
+            console.debug("Video ready check failed, continuing anyway:", error);
+          }
+        }
+        const tick = async () => {
+          if (this.cancelled) return;
+          if (!this.videoRef.current || !this.faceMesh) return;
+          const video = this.videoRef.current;
+          if (video.readyState >= 2 && video.videoWidth > 0 && video.videoHeight > 0 && !isNaN(video.videoWidth) && !isNaN(video.videoHeight)) {
+            try {
+              await this.faceMesh.send({ image: video });
+            } catch (error) {
+              if (!this.cancelled) {
+                console.debug("MediaPipe send error (non-critical):", error);
+              }
+            }
+          }
+          if (!this.cancelled) {
+            this.cameraDriverRef.current = requestAnimationFrame(tick);
+          }
+        };
+        this.cameraDriverRef.current = requestAnimationFrame(tick);
+      }
+    } catch (e) {
+      if (!this.cancelled && this.callbacks.onModelFailed) {
+        this.callbacks.onModelFailed(e);
+      }
+      throw e;
+    }
+  }
+  cleanup() {
+    this.cancelled = true;
+    if (this.cameraDriverRef.current) {
+      cancelAnimationFrame(this.cameraDriverRef.current);
+      this.cameraDriverRef.current = null;
+    }
+    if (this.faceMesh) {
+      try {
+        this.faceMesh.close?.();
+      } catch {
+      }
+      this.faceMesh = null;
+    }
+  }
+};
+
+// src/features/faceScan/hooks/useFaceScan.ts
+function useFaceScan(videoRef, canvasRef, callbacks) {
+  const [state, setState] = useState({
+    cameraReady: false,
+    livenessStage: "CENTER",
+    livenessReady: false,
+    livenessFailed: false,
+    modelLoading: true,
+    modelLoaded: false,
+    livenessInstruction: "Look straight at the camera",
+    loading: false,
+    allStepsCompleted: false,
+    capturedImage: null,
+    showDocumentUpload: false
+  });
+  const refs = {
+    centerHold: useRef(0),
+    leftHold: useRef(0),
+    rightHold: useRef(0),
+    snapTriggered: useRef(false),
+    lastResultsAt: useRef(0),
+    livenessStage: useRef("CENTER"),
+    cameraDriver: useRef(null),
+    modelLoaded: useRef(false),
+    livenessFailed: useRef(false),
+    handleFaceCapture: useRef(null)
+  };
+  const livenessStateRef = useRef({
+    centerHold: 0,
+    leftHold: 0,
+    rightHold: 0,
+    snapTriggered: false,
+    lastResultsAt: 0,
+    stage: "CENTER",
+    livenessReady: false
+  });
+  useEffect(() => {
+    livenessStateRef.current.centerHold = refs.centerHold.current;
+    livenessStateRef.current.leftHold = refs.leftHold.current;
+    livenessStateRef.current.rightHold = refs.rightHold.current;
+    livenessStateRef.current.snapTriggered = refs.snapTriggered.current;
+    livenessStateRef.current.lastResultsAt = refs.lastResultsAt.current;
+    livenessStateRef.current.stage = state.livenessStage;
+    livenessStateRef.current.livenessReady = state.livenessReady;
+  }, [state.livenessStage, state.livenessReady]);
+  useEffect(() => {
+    refs.livenessStage.current = state.livenessStage;
+  }, [state.livenessStage]);
+  const setStage = useCallback((next) => {
+    refs.livenessStage.current = next;
+    livenessStateRef.current.stage = next;
+    setState((prev) => ({ ...prev, livenessStage: next }));
+  }, []);
+  const handleFaceCapture = useCallback(async () => {
+    if (!videoRef.current) return;
+    setState((prev) => ({ ...prev, loading: true }));
+    try {
+      const video = videoRef.current;
+      const canvas = document.createElement("canvas");
+      const width = video.videoWidth || 640;
+      const height = video.videoHeight || 480;
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) throw new Error("Canvas not supported");
+      ctx.drawImage(video, 0, 0, width, height);
+      const dataUrl = canvas.toDataURL("image/jpeg", 0.92);
+      const blob = await (await fetch(dataUrl)).blob();
+      if (callbacks?.onFaceUpload) {
+        try {
+          await callbacks.onFaceUpload(blob);
+          setState((prev) => ({
+            ...prev,
+            capturedImage: dataUrl,
+            allStepsCompleted: true,
+            livenessInstruction: "Face captured and uploaded successfully!",
+            loading: false
+          }));
+        } catch (uploadError) {
+          throw new Error(uploadError.message || "Failed to upload face scan");
+        }
+      } else {
+        setState((prev) => ({
+          ...prev,
+          capturedImage: dataUrl,
+          allStepsCompleted: true,
+          livenessInstruction: "Face captured successfully!",
+          loading: false
+        }));
+      }
+      if (callbacks?.onFaceCaptureComplete) {
+        callbacks.onFaceCaptureComplete(dataUrl);
+      }
+      setTimeout(() => {
+        setState((prev) => ({ ...prev, showDocumentUpload: true }));
+      }, 500);
+    } catch (err) {
+      console.error("Error capturing image:", err);
+      setState((prev) => ({
+        ...prev,
+        livenessInstruction: err.message || "Error capturing image. Please try again.",
+        loading: false
+      }));
+    }
+  }, [callbacks]);
+  useEffect(() => {
+    refs.handleFaceCapture.current = handleFaceCapture;
+  }, [handleFaceCapture]);
+  useEffect(() => {
+    if (!state.cameraReady) return;
+    let service = null;
+    let initTimeoutId = null;
+    let cancelled = false;
+    const start = async () => {
+      try {
+        service = new FaceMeshService(
+          videoRef,
+          canvasRef,
+          refs.cameraDriver,
+          livenessStateRef,
+          {
+            onModelLoaded: () => {
+              if (cancelled) return;
+              setState((prev) => ({
+                ...prev,
+                modelLoaded: true,
+                modelLoading: false
+              }));
+              refs.modelLoaded.current = true;
+            },
+            onModelFailed: (error) => {
+              if (cancelled) return;
+              setState((prev) => ({
+                ...prev,
+                livenessFailed: true,
+                modelLoading: false,
+                modelLoaded: false
+              }));
+              refs.livenessFailed.current = true;
+              console.error("mediapipe facemesh init error", error);
+            },
+            onLivenessUpdate: (stage, instruction) => {
+              if (cancelled) return;
+              setState((prev) => ({
+                ...prev,
+                livenessStage: stage,
+                livenessInstruction: instruction,
+                livenessReady: true
+              }));
+              livenessStateRef.current.stage = stage;
+              refs.livenessStage.current = stage;
+              refs.centerHold.current = livenessStateRef.current.centerHold;
+              refs.leftHold.current = livenessStateRef.current.leftHold;
+              refs.rightHold.current = livenessStateRef.current.rightHold;
+              refs.snapTriggered.current = livenessStateRef.current.snapTriggered;
+            },
+            onCaptureTrigger: () => {
+              if (cancelled) return;
+              if (refs.handleFaceCapture.current) {
+                refs.handleFaceCapture.current();
+              }
+            }
+          }
+        );
+        await service.initialize();
+      } catch (e) {
+        if (!cancelled && refs.livenessFailed.current === false) {
+          setState((prev) => ({
+            ...prev,
+            livenessFailed: true,
+            modelLoading: false,
+            modelLoaded: false
+          }));
+          refs.livenessFailed.current = true;
+        }
+      }
+    };
+    initTimeoutId = window.setTimeout(() => {
+      if (!cancelled && !refs.modelLoaded.current && !refs.livenessFailed.current) {
+        setState((prev) => ({
+          ...prev,
+          livenessFailed: true,
+          modelLoading: false
+        }));
+        refs.livenessFailed.current = true;
+      }
+    }, 8e3);
+    start();
+    return () => {
+      cancelled = true;
+      if (initTimeoutId) {
+        window.clearTimeout(initTimeoutId);
+        initTimeoutId = null;
+      }
+      if (service) {
+        service.cleanup();
+        service = null;
+      }
+    };
+  }, [state.cameraReady]);
+  return {
+    state,
+    setState,
+    refs,
+    setStage,
+    handleFaceCapture
+  };
+}
+function FaceScanModal({ onComplete }) {
+  const faceCanvasRef = useRef(null);
+  const navigate = useNavigate();
+  const { apiService } = useKycContext();
+  const [sessionError, setSessionError] = useState(null);
+  const { videoRef, cameraReady, stopCamera } = useCamera();
+  const { state, setState, refs, handleFaceCapture } = useFaceScan(videoRef, faceCanvasRef, {
+    onFaceUpload: async (blob) => {
+      if (!apiService) {
+        throw new Error("API service not initialized");
+      }
+      await apiService.uploadFaceScan(blob);
+    },
+    onFaceCaptureComplete: (imageData) => {
+      if (onComplete) {
+        onComplete(imageData);
+      }
+    }
+  });
+  useEffect(() => {
+    const checkSession = async () => {
+      if (!apiService) return;
+      try {
+        await apiService.checkSessionActive();
+        setSessionError(null);
+      } catch (error) {
+        const message = error.message || "Session expired or inactive";
+        setSessionError(message);
+        setTimeout(() => {
+          navigate("/qr", { replace: true });
+        }, 2e3);
+      }
+    };
+    checkSession();
+  }, [apiService, navigate]);
+  useEffect(() => {
+    setState((prev) => ({ ...prev, cameraReady }));
+  }, [cameraReady, setState]);
+  const handleRetry = () => {
+    stopCamera();
+    setState({
+      cameraReady: false,
+      livenessStage: "CENTER",
+      livenessReady: false,
+      livenessFailed: false,
+      modelLoading: true,
+      modelLoaded: false,
+      livenessInstruction: "Look straight at the camera",
+      loading: false,
+      allStepsCompleted: false,
+      capturedImage: null,
+      showDocumentUpload: false
+    });
+    refs.centerHold.current = 0;
+    refs.leftHold.current = 0;
+    refs.rightHold.current = 0;
+    refs.snapTriggered.current = false;
+    refs.lastResultsAt.current = 0;
+    refs.modelLoaded.current = false;
+    refs.livenessFailed.current = false;
+    setTimeout(() => {
+      window.location.reload();
+    }, 100);
+  };
+  if (state.showDocumentUpload) {
+    return /* @__PURE__ */ jsx(
+      DocumentUploadModal_default,
+      {
+        onComplete: (_file, _docType) => {
+          if (onComplete && state.capturedImage) {
+            onComplete(state.capturedImage);
+          }
+        }
+      }
+    );
+  }
+  if (sessionError) {
+    return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black p-5 z-[1000] flex items-center justify-center font-sans overflow-y-auto custom__scrollbar", children: /* @__PURE__ */ jsx("div", { className: "max-w-[400px] w-full mx-auto bg-[#0b0f17] rounded-2xl p-6 shadow-xl", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("h2", { className: "m-0 mb-4 text-[26px] font-bold text-red-500", children: "Session Expired" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[#e5e7eb] mb-4", children: sessionError }),
+      /* @__PURE__ */ jsx("p", { className: "text-[#9ca3af] text-sm", children: "Redirecting to QR code page..." })
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black p-5 z-[1000] flex items-center justify-center font-sans overflow-y-auto custom__scrollbar", children: /* @__PURE__ */ jsxs("div", { className: "max-w-[400px] w-full mx-auto bg-[#0b0f17] rounded-2xl p-6 shadow-xl mt-48", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative mb-4", children: /* @__PURE__ */ jsx("h2", { className: "m-0 mb-4 text-[26px] font-bold text-white text-center", children: "Capture Face" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+      !state.modelLoading && state.modelLoaded && !state.livenessFailed && /* @__PURE__ */ jsx("div", { className: "bg-[#0a2315] text-[#34d399] py-3.5 px-4 rounded-xl text-sm border border-[#155e3b] text-left", children: "Face detection model loaded." }),
+      state.modelLoading && !state.livenessFailed && /* @__PURE__ */ jsx("div", { className: "bg-[#1f2937] text-[#e5e7eb] py-3.5 px-4 rounded-xl text-sm border border-[#374151] text-left", children: "Loading face detection model..." }),
+      /* @__PURE__ */ jsxs("div", { className: "relative w-full aspect-square rounded-full overflow-hidden bg-black", children: [
+        /* @__PURE__ */ jsx(
+          "video",
+          {
+            ref: videoRef,
+            playsInline: true,
+            muted: true,
+            className: "w-full h-full block bg-black object-cover -scale-x-100 origin-center"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: faceCanvasRef,
+            className: "absolute top-0 left-0 w-full h-full pointer-events-none z-[2]"
+          }
+        ),
+        /* @__PURE__ */ jsx("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-0 pointer-events-none z-[3]", children: /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "44", fill: "none", stroke: "#22c55e", strokeWidth: "2", strokeDasharray: "1 3" }) })
+      ] }),
+      !state.livenessFailed && /* @__PURE__ */ jsxs("div", { className: "bg-gradient-to-b from-[rgba(17,24,39,0.9)] to-[rgba(17,24,39,0.6)] text-[#e5e7eb] p-4 rounded-2xl text-base border border-[#30363d]", children: [
+        /* @__PURE__ */ jsx("div", { className: "font-bold mb-2.5 text-[22px] text-white", children: "Liveness Check" }),
+        /* @__PURE__ */ jsx("div", { className: "mb-2.5 text-base", children: state.livenessInstruction }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-2.5 text-lg", children: [
+          /* @__PURE__ */ jsx("div", { className: state.livenessStage === "CENTER" || state.livenessStage === "LEFT" || state.livenessStage === "RIGHT" || state.livenessStage === "DONE" ? "opacity-100" : "opacity-40", children: "1. Look Straight" }),
+          /* @__PURE__ */ jsx("div", { className: state.livenessStage === "RIGHT" || state.livenessStage === "DONE" ? "opacity-100" : "opacity-40", children: "2. Turn your face right" }),
+          /* @__PURE__ */ jsx("div", { className: state.livenessStage === "DONE" ? "opacity-100" : "opacity-30", children: "3. Turn your face left" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: !state.cameraReady || state.loading || !state.livenessFailed && state.livenessStage !== "DONE",
+          onClick: handleFaceCapture,
+          className: `py-3.5 px-4 rounded-xl text-base font-bold border-none transition-colors ${state.cameraReady && !state.loading && (state.livenessFailed || state.livenessStage === "DONE") ? "bg-[#22c55e] text-[#0b0f17] cursor-pointer hover:bg-[#16a34a]" : "bg-[#374151] text-[#e5e7eb] cursor-not-allowed"}`,
+          children: state.loading ? "Capturing..." : state.livenessFailed || state.livenessStage === "DONE" ? "Capture & Continue" : "Complete steps to continue"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleRetry,
+          disabled: state.loading,
+          className: `py-3 px-4 rounded-[10px] text-[15px] font-semibold border-none w-full transition-colors ${state.loading ? "bg-[#374151] text-[#e5e7eb] cursor-not-allowed opacity-50" : "bg-[#374151] text-[#e5e7eb] cursor-pointer hover:bg-[#4b5563]"}`,
+          children: "Restart"
+        }
+      )
+    ] })
+  ] }) });
+}
+var FaceScanModal_default = FaceScanModal;
+function MobileRoute({ onClose } = {}) {
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (!isMobileDevice()) {
+      navigate("/qr", { replace: true });
+      return;
+    }
+  }, [navigate]);
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    } else {
+      navigate(-1);
+    }
+  };
+  const handleComplete = (capturedImage) => {
+    console.log("Face capture completed with image:", capturedImage.substring(0, 50) + "...");
+  };
+  if (!isMobileDevice()) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(FaceScanModal_default, { onClose: handleClose, onComplete: handleComplete });
+}
+var MobileRoute_default = MobileRoute;
+function QRCodePage({ onClose } = {}) {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const [qrUrl, setQrUrl] = useState("");
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    const currentUrl = window.location.origin;
+    const params = {};
+    searchParams.forEach((value, key) => {
+      params[key] = value;
+    });
+    const mobileRoute = "/mobileroute";
+    const queryString = new URLSearchParams(params).toString();
+    const fullUrl = `${currentUrl}${mobileRoute}${queryString ? `?${queryString}` : ""}`;
+    setQrUrl(fullUrl);
+  }, [searchParams]);
+  const handleCopyUrl = async () => {
+    if (qrUrl) {
+      try {
+        await navigator.clipboard.writeText(qrUrl);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2e3);
+      } catch (err) {
+        console.error("Failed to copy:", err);
+      }
+    }
+  };
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    } else {
+      navigate(-1);
+    }
+  };
+  const handleRefresh = () => {
+    window.location.reload();
+  };
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 flex items-center justify-center bg-black p-4 sm:p-6 md:p-8 z-[1000]", children: /* @__PURE__ */ jsxs("div", { className: "relative bg-[rgba(20,20,20,0.95)] rounded-2xl p-5 sm:p-6 md:p-7 max-w-[450px] w-full h-[80vh] flex flex-col text-center shadow-[0_8px_32px_rgba(0,0,0,0.5)]", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "absolute top-5 right-5 bg-transparent border-none text-white cursor-pointer p-2 flex items-center justify-center rounded transition-colors hover:bg-white/10 active:bg-white/20",
+        onClick: handleClose,
+        "aria-label": "Close",
+        children: /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+          /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 sm:gap-4 flex-1 overflow-y-auto custom__scrollbar", children: [
+      /* @__PURE__ */ jsx("h1", { className: "m-0 text-white text-xl sm:text-2xl font-semibold leading-tight", children: "Continue on Mobile" }),
+      /* @__PURE__ */ jsx("p", { className: "m-0 text-white text-sm sm:text-base opacity-90 leading-relaxed", children: "Scan this QR on your phone to capture your face and document" }),
+      qrUrl && /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center p-3 sm:p-4 bg-white rounded-xl border-2 border-white", children: /* @__PURE__ */ jsx(
+        QRCodeSVG,
+        {
+          value: qrUrl,
+          size: 180,
+          level: "H",
+          includeMargin: true,
+          bgColor: "transparent",
+          fgColor: "#000000"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "w-full text-left mt-auto", children: [
+        /* @__PURE__ */ jsx("p", { className: "m-0 mb-2 text-white text-xs sm:text-sm opacity-80", children: "Or open:" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2 p-2 sm:p-3 bg-white/10 rounded-lg border border-white/20", children: [
+          /* @__PURE__ */ jsx("code", { className: "flex-1 text-white text-xs sm:text-sm break-all text-left m-0 font-mono", children: qrUrl }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "bg-transparent border-none text-white cursor-pointer p-1.5 flex items-center justify-center rounded transition-colors flex-shrink-0 hover:bg-white/10 active:bg-white/20 self-end sm:self-auto",
+              onClick: handleCopyUrl,
+              "aria-label": "Copy URL",
+              title: copied ? "Copied!" : "Copy URL",
+              children: copied ? /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+              ] })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "w-full py-3 sm:py-4 px-6 bg-gradient-to-r from-[#FF842D] to-[#FF2D55] border-none rounded-lg text-white text-sm sm:text-base font-semibold cursor-pointer transition-all hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(255,107,53,0.4)] active:translate-y-0",
+          onClick: handleRefresh,
+          children: "I've completed on mobile - Refresh"
+        }
+      )
+    ] })
+  ] }) });
+}
+var QRCodePage_default = QRCodePage;
+var KycFlow = ({
+  apiBaseUrl,
+  sessionId,
+  serverKey,
+  deviceType,
+  startAtQr = true,
+  onClose
+}) => {
+  return /* @__PURE__ */ jsx(
+    KycProvider,
+    {
+      apiBaseUrl,
+      sessionId,
+      serverKey,
+      deviceType,
+      children: /* @__PURE__ */ jsx(MemoryRouter, { initialEntries: [startAtQr ? "/qr" : "/mobileroute"], children: /* @__PURE__ */ jsxs(Routes, { children: [
+        /* @__PURE__ */ jsx(Route, { path: "/", element: /* @__PURE__ */ jsx(Navigate, { to: startAtQr ? "/qr" : "/mobileroute", replace: true }) }),
+        /* @__PURE__ */ jsx(Route, { path: "/qr", element: /* @__PURE__ */ jsx(QRCodePage_default, { onClose }) }),
+        /* @__PURE__ */ jsx(Route, { path: "/mobileroute", element: /* @__PURE__ */ jsx(MobileRoute_default, { onClose }) })
+      ] }) })
+    }
+  );
+};
+
+export { KycFlow };
+//# sourceMappingURL=components.es.js.map
+//# sourceMappingURL=components.es.js.map