astra-sdk-web 1.1.2 → 1.1.4

package/dist/components.cjs.js

@@ -1325,19 +1325,16 @@ function FaceScanModal({ onComplete }) {
   ] }) });
 }
 var FaceScanModal_default = FaceScanModal;
-function MobileRoute({ onClose } = {}) {
-  const navigate = reactRouterDom.useNavigate();
+function MobileRoute({ onClose, onNavigate } = {}) {
   React.useEffect(() => {
-    if (!isMobileDevice()) {
-      navigate("/qr", { replace: true });
+    if (!isMobileDevice() && onNavigate) {
+      onNavigate("qr");
       return;
     }
-  }, [navigate]);
+  }, [onNavigate]);
   const handleClose = () => {
     if (onClose) {
       onClose();
-    } else {
-      navigate(-1);
     }
   };
   const handleComplete = (capturedImage) => {
@@ -1349,22 +1346,19 @@ function MobileRoute({ onClose } = {}) {
   return /* @__PURE__ */ jsxRuntime.jsx(FaceScanModal_default, { onClose: handleClose, onComplete: handleComplete });
 }
 var MobileRoute_default = MobileRoute;
-function QRCodePage({ onClose } = {}) {
-  const [searchParams] = reactRouterDom.useSearchParams();
-  const navigate = reactRouterDom.useNavigate();
+function QRCodePage({ onClose, onNavigate, mobileBaseUrl = "https://astra-sdk-rebuild.vercel.app", sessionId } = {}) {
   const [qrUrl, setQrUrl] = React.useState("");
   const [copied, setCopied] = React.useState(false);
   React.useEffect(() => {
-    const currentUrl = window.location.origin;
-    const params = {};
-    searchParams.forEach((value, key) => {
-      params[key] = value;
-    });
+    const searchParams = new URLSearchParams(window.location.search);
+    if (sessionId) {
+      searchParams.set("sessionId", sessionId);
+    }
     const mobileRoute = "/mobileroute";
-    const queryString = new URLSearchParams(params).toString();
-    const fullUrl = `${currentUrl}${mobileRoute}${queryString ? `?${queryString}` : ""}`;
+    const queryString = searchParams.toString();
+    const fullUrl = `${mobileBaseUrl}${mobileRoute}${queryString ? `?${queryString}` : ""}`;
     setQrUrl(fullUrl);
-  }, [searchParams]);
+  }, [mobileBaseUrl, sessionId]);
   const handleCopyUrl = async () => {
     if (qrUrl) {
       try {
@@ -1379,69 +1373,73 @@ function QRCodePage({ onClose } = {}) {
   const handleClose = () => {
     if (onClose) {
       onClose();
-    } else {
-      navigate(-1);
     }
   };
   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 = ({
@@ -1450,8 +1448,18 @@ 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) => {
+    setCurrentView(view);
+  };
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     KycProvider,
     {
@@ -1459,11 +1467,15 @@ var KycFlow = ({
       sessionId,
       serverKey,
       deviceType,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.MemoryRouter, { initialEntries: [startAtQr ? "/qr" : "/mobileroute"], children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/", element: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: startAtQr ? "/qr" : "/mobileroute", replace: true }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/qr", element: /* @__PURE__ */ jsxRuntime.jsx(QRCodePage_default, { onClose }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/mobileroute", element: /* @__PURE__ */ jsxRuntime.jsx(MobileRoute_default, { onClose }) })
-      ] }) })
+      children: currentView === "qr" ? /* @__PURE__ */ jsxRuntime.jsx(
+        QRCodePage_default,
+        {
+          onClose: handleClose,
+          onNavigate: handleNavigate,
+          mobileBaseUrl,
+          sessionId
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(MobileRoute_default, { onClose: handleClose, onNavigate: handleNavigate })
     }
   );
 };