vesant-sdk 2.0.0-dev.9578c07 → 2.0.0-dev.9a74cc1

package/dist/react.js

@@ -893,10 +893,10 @@ var Upload = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0i
 // src/kyc/FaceCaptureModal.tsx
 var MOBILE_UA = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
 var LIVENESS_MESSAGES = [
-  "Align your face in the oval",
-  "Face too far. Please, move closer to the camera",
-  "Looking good! Stay still...",
-  "Processing liveness..."
+  "Position your face inside the circle",
+  "Make sure your face is well lit",
+  "Remove glasses or hats if possible",
+  "Look straight at the camera, then tap Capture"
 ];
 function headerSubtitle(stageKind) {
   switch (stageKind) {
@@ -905,7 +905,7 @@ function headerSubtitle(stageKind) {
     case "accepted":
       return "All set";
     case "declined":
-      return "Verification didn't match \u2014 try once more";
+      return "Verification didn't match, try once more";
     case "max_attempts":
       return "We couldn't verify you";
     default:
@@ -1011,6 +1011,15 @@ function FaceCaptureModal({
     setStage({ kind: "submitting" });
     let settled = false;
     const ref = session.reference;
+    const baselineAttempts = attempts;
+    const isFreshPollResult = (r) => {
+      if (r.status === "accepted") return true;
+      if (r.status === "declined") {
+        const derivedAttempts = maxAttempts - (r.data?.retries_remaining ?? 0);
+        return derivedAttempts > baselineAttempts;
+      }
+      return false;
+    };
     try {
       const postPromise = (async () => {
         try {
@@ -1031,7 +1040,7 @@ function FaceCaptureModal({
           if (settled || cancelledRef.current) return null;
           try {
             const r = await client.getReuseKycSessionStatus(ref);
-            if (r.status === "accepted" || r.status === "declined") return r;
+            if (isFreshPollResult(r)) return r;
           } catch {
           }
           if (settled || cancelledRef.current) return null;
@@ -1182,6 +1191,7 @@ var keyframes = `
 @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
 @keyframes zoomIn { from { transform: scale(.96); opacity: 0 } to { transform: scale(1); opacity: 1 } }
 @keyframes spin   { to { transform: rotate(360deg) } }
+@keyframes pulse  { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }
 `;
 var overlayStyle = {
   position: "fixed",
@@ -1429,7 +1439,7 @@ function LiveCamera({ onCapture, onCancel, message }) {
       autoPlay: true,
       style: videoStyle
     }
-  ), /* @__PURE__ */ React__default.default.createElement("div", { style: faceOvalOverlayStyle, "aria-hidden": "true" }), !ready && /* @__PURE__ */ React__default.default.createElement("div", { style: videoLoadingStyle }, "Starting camera\u2026")), message && /* @__PURE__ */ React__default.default.createElement("p", { style: livenessMessageStyle }, message), /* @__PURE__ */ React__default.default.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React__default.default.createElement(
+  ), /* @__PURE__ */ React__default.default.createElement("div", { style: faceOverlayContainerStyle, "aria-hidden": "true" }, /* @__PURE__ */ React__default.default.createElement("div", { style: faceRingWrapStyle }, /* @__PURE__ */ React__default.default.createElement("div", { style: faceDashedRingStyle }), /* @__PURE__ */ React__default.default.createElement("div", { style: faceCircleStyle }))), message && /* @__PURE__ */ React__default.default.createElement("div", { style: liveMessagePillContainerStyle }, /* @__PURE__ */ React__default.default.createElement("div", { style: liveMessagePillStyle }, /* @__PURE__ */ React__default.default.createElement("span", { style: liveMessagePillTextStyle }, message))), !ready && /* @__PURE__ */ React__default.default.createElement("div", { style: videoLoadingStyle }, "Starting camera\u2026")), /* @__PURE__ */ React__default.default.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React__default.default.createElement(
     "button",
     {
       style: ready ? primaryButtonStyle : { ...primaryButtonStyle, opacity: 0.5, cursor: "not-allowed" },
@@ -1455,13 +1465,32 @@ var videoStyle = {
   transform: "scaleX(-1)"
   // mirror so the preview matches the user's POV
 };
-var faceOvalOverlayStyle = {
+var faceOverlayContainerStyle = {
   position: "absolute",
   inset: 0,
   pointerEvents: "none",
-  background: "radial-gradient(ellipse 38% 50% at center, transparent 60%, rgba(15, 23, 42, 0.55) 62%)",
-  border: "2px solid rgba(0, 188, 125, 0.6)",
-  borderRadius: 12
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var faceRingWrapStyle = {
+  position: "relative",
+  width: "72%",
+  aspectRatio: "1 / 1"
+};
+var faceDashedRingStyle = {
+  position: "absolute",
+  inset: -6,
+  borderRadius: "50%",
+  border: "6px dashed rgba(255, 255, 255, 0.4)",
+  animation: "spin 10s linear infinite"
+};
+var faceCircleStyle = {
+  position: "absolute",
+  inset: 0,
+  borderRadius: "50%",
+  border: "4px solid #00bc7d",
+  boxShadow: "0 0 0 1000px rgba(0, 0, 0, 0.5)"
 };
 var videoLoadingStyle = {
   position: "absolute",
@@ -1473,16 +1502,29 @@ var videoLoadingStyle = {
   fontSize: 14,
   fontWeight: 500
 };
-var livenessMessageStyle = {
-  margin: 0,
+var liveMessagePillContainerStyle = {
+  position: "absolute",
+  top: 12,
+  left: "50%",
+  transform: "translateX(-50%)",
+  maxWidth: "84%",
+  pointerEvents: "none"
+};
+var liveMessagePillStyle = {
+  background: "rgba(0, 0, 0, 0.7)",
+  backdropFilter: "blur(6px)",
+  border: "1px solid rgba(255, 255, 255, 0.2)",
+  borderRadius: 999,
+  padding: "6px 12px",
   textAlign: "center",
-  fontSize: 13,
+  boxShadow: "0 10px 25px -5px rgba(0,0,0,.3)"
+};
+var liveMessagePillTextStyle = {
+  margin: 0,
+  fontSize: 12,
   fontWeight: 500,
-  color: "#374151",
-  background: "rgba(0, 188, 125, 0.08)",
-  border: "1px solid rgba(0, 188, 125, 0.25)",
-  borderRadius: 8,
-  padding: "8px 12px"
+  color: "#ffffff",
+  animation: "pulse 2s ease-in-out infinite"
 };
 var FaceCaptureModal_default = FaceCaptureModal;