astra-sdk-web 1.1.6 → 1.1.8

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;
@@ -746,6 +749,8 @@ var FaceMeshService = class {
       }
       this.processLiveness(faceOnCanvas, w, h);
     } else {
+      this.livenessStateRef.current.currentYaw = null;
+      this.livenessStateRef.current.currentAbsYaw = null;
       const vid = this.videoRef.current;
       if (vid) {
         const vidW = Math.max(1, vid?.videoWidth || displayW);
@@ -789,6 +794,8 @@ var FaceMeshService = class {
       const midX = (leftEyeOuter.x + rightEyeOuter.x) / 2;
       const yaw = (nT.x - midX) / Math.max(1e-6, faceWidth);
       const absYaw = Math.abs(yaw);
+      this.livenessStateRef.current.currentYaw = yaw;
+      this.livenessStateRef.current.currentAbsYaw = absYaw;
       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;
@@ -815,11 +822,13 @@ var FaceMeshService = class {
         } 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");
+            if (!state.livenessCompleted) {
+              const newStage = "LEFT";
+              state.stage = newStage;
+              state.centerHold = 0;
+              if (this.callbacks.onLivenessUpdate) {
+                this.callbacks.onLivenessUpdate(newStage, "Turn your face LEFT");
+              }
             }
           }
         } else {
@@ -858,16 +867,12 @@ var FaceMeshService = class {
           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();
-              }
+            state.livenessCompleted = true;
+            const newStage = "DONE";
+            state.stage = newStage;
+            state.centerHold = 0;
+            if (this.callbacks.onLivenessUpdate) {
+              this.callbacks.onLivenessUpdate(newStage, "Great! Now look straight at the camera");
             }
           }
         } else {
@@ -876,6 +881,28 @@ var FaceMeshService = class {
             this.callbacks.onLivenessUpdate(state.stage, yaw < -0.08 ? "You're facing left. Turn RIGHT" : "Turn a bit more RIGHT");
           }
         }
+      } else if (state.stage === "DONE") {
+        if (absYaw < centerThreshold && insideGuide) {
+          state.centerHold += 1;
+          if (state.centerHold >= holdFramesCenter && !state.snapTriggered) {
+            state.snapTriggered = true;
+            if (this.callbacks.onLivenessUpdate) {
+              this.callbacks.onLivenessUpdate(state.stage, "Capturing...");
+            }
+            if (this.callbacks.onCaptureTrigger) {
+              this.callbacks.onCaptureTrigger();
+            }
+          }
+        } else {
+          state.centerHold = 0;
+          if (this.callbacks.onLivenessUpdate) {
+            if (!insideGuide) {
+              this.callbacks.onLivenessUpdate(state.stage, "Center your face inside the circle");
+            } else {
+              this.callbacks.onLivenessUpdate(state.stage, "Please look straight at the camera");
+            }
+          }
+        }
       }
     }
   }
@@ -1011,7 +1038,10 @@ function useFaceScan(videoRef, canvasRef, callbacks) {
     snapTriggered: false,
     lastResultsAt: 0,
     stage: "CENTER",
-    livenessReady: false
+    livenessReady: false,
+    currentYaw: null,
+    currentAbsYaw: null,
+    livenessCompleted: false
   });
   React.useEffect(() => {
     livenessStateRef.current.centerHold = refs.centerHold.current;
@@ -1032,6 +1062,22 @@ function useFaceScan(videoRef, canvasRef, callbacks) {
   }, []);
   const handleFaceCapture = React.useCallback(async () => {
     if (!videoRef.current) return;
+    const centerThreshold = 0.05;
+    const currentAbsYaw = livenessStateRef.current.currentAbsYaw;
+    if (currentAbsYaw === null || currentAbsYaw === void 0) {
+      setState((prev) => ({
+        ...prev,
+        livenessInstruction: "Please position your face in front of the camera"
+      }));
+      return;
+    }
+    if (currentAbsYaw >= centerThreshold) {
+      setState((prev) => ({
+        ...prev,
+        livenessInstruction: "Please look straight at the camera before capturing"
+      }));
+      return;
+    }
     setState((prev) => ({ ...prev, loading: true }));
     try {
       const video = videoRef.current;
@@ -1185,18 +1231,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 already registered",
+            type: "warning"
+          });
+          return;
+        }
+        throw error;
+      }
     },
     onFaceCaptureComplete: (imageData) => {
       if (onComplete) {
@@ -1291,61 +1401,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 }) {