astra-sdk-web 1.1.5 → 1.1.7

package/dist/components.cjs.js

@@ -84,7 +84,10 @@ var KycApiService = class {
       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 error = new Error(message);
+        error.statusCode = response.status;
+        error.errorData = errorData;
+        throw error;
       }
       const data = await response.json();
       return data;
@@ -1185,18 +1188,82 @@ function useFaceScan(videoRef, canvasRef, callbacks) {
     handleFaceCapture
   };
 }
+function Toast({ message, type = "info", duration = 5e3, onClose }) {
+  const [isVisible, setIsVisible] = React.useState(true);
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+      setTimeout(() => {
+        if (onClose) onClose();
+      }, 300);
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [duration, onClose]);
+  const bgColor = {
+    success: "bg-green-600",
+    error: "bg-red-600",
+    info: "bg-blue-600",
+    warning: "bg-yellow-600"
+  }[type];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `fixed top-4 right-4 z-[10000] transition-all duration-300 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2"}`,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `${bgColor} text-white px-6 py-4 rounded-lg shadow-lg flex items-center gap-3 min-w-[300px] max-w-[500px]`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-sm font-medium", children: message }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => {
+                  setIsVisible(false);
+                  setTimeout(() => {
+                    if (onClose) onClose();
+                  }, 300);
+                },
+                className: "text-white hover:text-gray-200 transition-colors",
+                "aria-label": "Close",
+                children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", 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" })
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 function FaceScanModal({ onComplete }) {
   const faceCanvasRef = React.useRef(null);
   const navigate = reactRouterDom.useNavigate();
   const { apiService } = useKycContext();
   const [sessionError, setSessionError] = React.useState(null);
+  const [toast, setToast] = React.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);
+      try {
+        await apiService.uploadFaceScan(blob);
+      } catch (error) {
+        const errorMessage = error?.message || "";
+        const errorData = error?.errorData || {};
+        if (errorMessage.includes("Face already registered") || errorMessage.includes("already registered") || errorData?.message?.includes("Face already registered") || error?.statusCode === 500 && errorMessage.includes("Face")) {
+          setToast({
+            message: "Face has already been registered for this session. Proceeding to document upload.",
+            type: "warning"
+          });
+          return;
+        }
+        throw error;
+      }
     },
     onFaceCaptureComplete: (imageData) => {
       if (onComplete) {
@@ -1291,61 +1358,72 @@ function FaceScanModal({ onComplete }) {
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[#9ca3af] text-sm", children: "Redirecting to QR code page..." })
     ] }) }) });
   }
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "max-w-[400px] w-full mx-auto bg-[#0b0f17] rounded-2xl p-6 shadow-xl mt-48", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mb-4", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 mb-4 text-[26px] font-bold text-white text-center", children: "Capture Face" }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4", children: [
-      !state.modelLoading && state.modelLoaded && !state.livenessFailed && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative w-full aspect-square rounded-full overflow-hidden bg-black", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    toast && /* @__PURE__ */ jsxRuntime.jsx(
+      Toast,
+      {
+        message: toast.message,
+        type: toast.type,
+        onClose: () => setToast(null),
+        duration: 6e3
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "max-w-[400px] w-full mx-auto bg-[#0b0f17] rounded-2xl p-6 shadow-xl mt-48", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mb-4", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 mb-4 text-[26px] font-bold text-white text-center", children: "Capture Face" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4", children: [
+        !state.modelLoading && state.modelLoaded && !state.livenessFailed && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative w-full aspect-square rounded-full overflow-hidden bg-black", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "video",
+            {
+              ref: videoRef,
+              playsInline: true,
+              muted: true,
+              className: "w-full h-full block bg-black object-cover -scale-x-100 origin-center"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "canvas",
+            {
+              ref: faceCanvasRef,
+              className: "absolute top-0 left-0 w-full h-full pointer-events-none z-[2]"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-0 pointer-events-none z-[3]", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "50", r: "44", fill: "none", stroke: "#22c55e", strokeWidth: "2", strokeDasharray: "1 3" }) })
+        ] }),
+        !state.livenessFailed && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "font-bold mb-2.5 text-[22px] text-white", children: "Liveness Check" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2.5 text-base", children: state.livenessInstruction }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2.5 text-lg", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: state.livenessStage === "CENTER" || state.livenessStage === "LEFT" || state.livenessStage === "RIGHT" || state.livenessStage === "DONE" ? "opacity-100" : "opacity-40", children: "1. Look Straight" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: state.livenessStage === "RIGHT" || state.livenessStage === "DONE" ? "opacity-100" : "opacity-40", children: "2. Turn your face right" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: state.livenessStage === "DONE" ? "opacity-100" : "opacity-30", children: "3. Turn your face left" })
+          ] })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "video",
+          "button",
           {
-            ref: videoRef,
-            playsInline: true,
-            muted: true,
-            className: "w-full h-full block bg-black object-cover -scale-x-100 origin-center"
+            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__ */ jsxRuntime.jsx(
-          "canvas",
+          "button",
           {
-            ref: faceCanvasRef,
-            className: "absolute top-0 left-0 w-full h-full pointer-events-none z-[2]"
+            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"
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-0 pointer-events-none z-[3]", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "50", r: "44", fill: "none", stroke: "#22c55e", strokeWidth: "2", strokeDasharray: "1 3" }) })
-      ] }),
-      !state.livenessFailed && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "font-bold mb-2.5 text-[22px] text-white", children: "Liveness Check" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2.5 text-base", children: state.livenessInstruction }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2.5 text-lg", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: state.livenessStage === "CENTER" || state.livenessStage === "LEFT" || state.livenessStage === "RIGHT" || state.livenessStage === "DONE" ? "opacity-100" : "opacity-40", children: "1. Look Straight" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: state.livenessStage === "RIGHT" || state.livenessStage === "DONE" ? "opacity-100" : "opacity-40", children: "2. Turn your face right" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: state.livenessStage === "DONE" ? "opacity-100" : "opacity-30", children: "3. Turn your face left" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 MobileRouteContent({ onClose, onComplete }) {
@@ -1463,15 +1541,15 @@ function QRCodePage({ onClose, onNavigate, mobileBaseUrl = "https://astra-sdk-re
       /* @__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(
+        qrUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center p-3 sm:p-4 bg-black rounded-xl border-2 border-white shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
           qrcode_react.QRCodeSVG,
           {
             value: qrUrl,
             size: 180,
             level: "H",
             includeMargin: true,
-            bgColor: "transparent",
-            fgColor: "#000000"
+            bgColor: "#000000",
+            fgColor: "#FFFFFF"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full text-left mt-auto", children: [