astra-sdk-web 1.1.3 → 1.1.5

package/dist/components.cjs.js

@@ -1223,6 +1223,29 @@ function FaceScanModal({ onComplete }) {
   React.useEffect(() => {
     setState((prev) => ({ ...prev, cameraReady }));
   }, [cameraReady, setState]);
+  React.useEffect(() => {
+    if (cameraReady && apiService) {
+      const config = apiService.getConfig();
+      if (config) {
+        console.log("=== Camera Opened ===");
+        console.log("Session ID:", config.sessionId);
+        console.log("Server Key:", config.serverKey);
+        console.log("API Base URL:", config.apiBaseUrl);
+        console.log("Device Type:", config.deviceType || "auto-detected");
+        apiService.getSessionStatus().then((statusResponse) => {
+          console.log("=== Session Status API Response ===");
+          console.log("Full Response:", statusResponse);
+          console.log("Session Status:", statusResponse.data?.status);
+          console.log("Session ID:", statusResponse.data?.session_id);
+          console.log("Completed Steps:", statusResponse.data?.completed_steps);
+          console.log("Next Step:", statusResponse.data?.next_step);
+        }).catch((error) => {
+          console.error("=== Session Status API Error ===");
+          console.error("Error fetching session status:", error);
+        });
+      }
+    }
+  }, [cameraReady, apiService]);
   const handleRetry = () => {
     stopCamera();
     setState({
@@ -1325,12 +1348,29 @@ function FaceScanModal({ onComplete }) {
   ] }) });
 }
 var FaceScanModal_default = FaceScanModal;
+function MobileRouteContent({ onClose, onComplete }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(FaceScanModal_default, { onClose, onComplete });
+}
 function MobileRoute({ onClose, onNavigate } = {}) {
+  const [config, setConfig] = React.useState(null);
   React.useEffect(() => {
     if (!isMobileDevice() && onNavigate) {
       onNavigate("qr");
       return;
     }
+    const searchParams = new URLSearchParams(window.location.search);
+    const sessionId = searchParams.get("sessionId");
+    const apiBaseUrl = searchParams.get("apiBaseUrl") || searchParams.get("apiUrl") || "";
+    const serverKey = searchParams.get("serverKey") || "";
+    if (sessionId && apiBaseUrl && serverKey) {
+      setConfig({
+        apiBaseUrl,
+        sessionId,
+        serverKey
+      });
+    } else if (sessionId) {
+      console.error("Missing required parameters: apiBaseUrl and serverKey must be in URL");
+    }
   }, [onNavigate]);
   const handleClose = () => {
     if (onClose) {
@@ -1343,20 +1383,46 @@ function MobileRoute({ onClose, onNavigate } = {}) {
   if (!isMobileDevice()) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(FaceScanModal_default, { onClose: handleClose, onComplete: handleComplete });
+  if (config) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      KycProvider,
+      {
+        apiBaseUrl: config.apiBaseUrl,
+        sessionId: config.sessionId,
+        serverKey: config.serverKey,
+        deviceType: "mobile",
+        children: /* @__PURE__ */ jsxRuntime.jsx(MobileRouteContent, { onClose: handleClose, onComplete: handleComplete })
+      }
+    );
+  }
+  if (onNavigate) {
+    return /* @__PURE__ */ jsxRuntime.jsx(MobileRouteContent, { onClose: handleClose, onComplete: handleComplete });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 flex items-center justify-center bg-black/50 z-[1000]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white p-6 rounded-lg text-center max-w-md mx-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-600 mb-2", children: "Missing Configuration" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600", children: "Please ensure the URL includes sessionId, apiBaseUrl, and serverKey parameters." })
+  ] }) });
 }
 var MobileRoute_default = MobileRoute;
-function QRCodePage({ onClose, onNavigate } = {}) {
+function QRCodePage({ onClose, onNavigate, mobileBaseUrl = "https://astra-sdk-rebuild.vercel.app", sessionId, apiBaseUrl, serverKey } = {}) {
   const [qrUrl, setQrUrl] = React.useState("");
   const [copied, setCopied] = React.useState(false);
   React.useEffect(() => {
-    const currentUrl = window.location.origin;
     const searchParams = new URLSearchParams(window.location.search);
+    if (sessionId) {
+      searchParams.set("sessionId", sessionId);
+    }
+    if (apiBaseUrl) {
+      searchParams.set("apiBaseUrl", apiBaseUrl);
+    }
+    if (serverKey) {
+      searchParams.set("serverKey", serverKey);
+    }
     const mobileRoute = "/mobileroute";
     const queryString = searchParams.toString();
-    const fullUrl = `${currentUrl}${mobileRoute}${queryString ? `?${queryString}` : ""}`;
+    const fullUrl = `${mobileBaseUrl}${mobileRoute}${queryString ? `?${queryString}` : ""}`;
     setQrUrl(fullUrl);
-  }, []);
+  }, [mobileBaseUrl, sessionId, apiBaseUrl, serverKey]);
   const handleCopyUrl = async () => {
     if (qrUrl) {
       try {
@@ -1376,62 +1442,68 @@ function QRCodePage({ onClose, onNavigate } = {}) {
   const handleRefresh = () => {
     window.location.reload();
   };
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 sm:gap-4 flex-1 overflow-y-auto custom__scrollbar", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "m-0 text-white text-xl sm:text-2xl font-semibold leading-tight", children: "Continue on Mobile" }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center p-3 sm:p-4 bg-white rounded-xl border-2 border-white", children: /* @__PURE__ */ jsxRuntime.jsx(
-        qrcode_react.QRCodeSVG,
-        {
-          value: qrUrl,
-          size: 180,
-          level: "H",
-          includeMargin: true,
-          bgColor: "transparent",
-          fgColor: "#000000"
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full text-left mt-auto", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 mb-2 text-white text-xs sm:text-sm opacity-80", children: "Or open:" }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("code", { className: "flex-1 text-white text-xs sm:text-sm break-all text-left m-0 font-mono", children: qrUrl }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
-              ] })
-            }
-          )
-        ] })
-      ] }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 flex items-center justify-center bg-gradient-to-br from-gray-900 via-gray-800 to-black p-4 sm:p-6 md:p-8 z-[1000]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 opacity-10", style: {
+      backgroundImage: `radial-gradient(circle at 2px 2px, rgba(255,255,255,0.15) 1px, transparent 0)`,
+      backgroundSize: "40px 40px"
+    } }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative bg-[rgba(20,20,20,0.95)] backdrop-blur-sm 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)] border border-white/10", children: [
       /* @__PURE__ */ jsxRuntime.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"
+          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__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          ] })
         }
-      )
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 sm:gap-4 flex-1 overflow-y-auto custom__scrollbar", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "m-0 text-white text-xl sm:text-2xl font-semibold leading-tight", children: "Continue on Mobile" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center p-3 sm:p-4 bg-white rounded-xl border-2 border-white", children: /* @__PURE__ */ jsxRuntime.jsx(
+          qrcode_react.QRCodeSVG,
+          {
+            value: qrUrl,
+            size: 180,
+            level: "H",
+            includeMargin: true,
+            bgColor: "transparent",
+            fgColor: "#000000"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full text-left mt-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 mb-2 text-white text-xs sm:text-sm opacity-80", children: "Or open:" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("code", { className: "flex-1 text-white text-xs sm:text-sm break-all text-left m-0 font-mono", children: qrUrl }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+                ] })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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 = ({
@@ -1440,7 +1512,8 @@ var KycFlow = ({
   serverKey,
   deviceType,
   startAtQr = true,
-  onClose
+  onClose,
+  mobileBaseUrl = "https://astra-sdk-rebuild.vercel.app"
 }) => {
   const [currentView, setCurrentView] = React.useState(startAtQr ? "qr" : "mobileroute");
   const handleNavigate = (view) => {
@@ -1458,7 +1531,17 @@ var KycFlow = ({
       sessionId,
       serverKey,
       deviceType,
-      children: currentView === "qr" ? /* @__PURE__ */ jsxRuntime.jsx(QRCodePage_default, { onClose: handleClose, onNavigate: handleNavigate }) : /* @__PURE__ */ jsxRuntime.jsx(MobileRoute_default, { onClose: handleClose, onNavigate: handleNavigate })
+      children: currentView === "qr" ? /* @__PURE__ */ jsxRuntime.jsx(
+        QRCodePage_default,
+        {
+          onClose: handleClose,
+          onNavigate: handleNavigate,
+          mobileBaseUrl,
+          sessionId,
+          apiBaseUrl,
+          serverKey
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(MobileRoute_default, { onClose: handleClose, onNavigate: handleNavigate })
     }
   );
 };