vesant-sdk 1.7.1-dev.2a5fd70 → 1.7.1-dev.2b64301

package/dist/react.mjs

@@ -924,19 +924,19 @@ var Close = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0id
 var FACE_MESSAGES = {
   idle: "Initializing camera...",
   loading: "Loading face detection...",
-  scanning: "Position your face in the circle",
+  scanning: "Position your face in the oval",
   too_far: "Face too far. Please move closer to the camera",
   too_close: "Too close. Please move back a little",
-  off_center: "Center your face in the circle",
+  off_center: "Center your face in the oval",
   ok: "Looking great! Tap the button to capture"
 };
 var FACE_COLORS = {
   idle: "#9ca3af",
-  loading: "#3b82f6",
-  scanning: "#3b82f6",
+  loading: "#ef4444",
+  scanning: "#ef4444",
   too_far: "#ef4444",
-  too_close: "#f59e0b",
-  off_center: "#f59e0b",
+  too_close: "#ef4444",
+  off_center: "#ef4444",
   ok: "#10b981"
 };
 var MEDIAPIPE_BASE = "https://cdn.jsdelivr.net/npm/@mediapipe/face_detection";
@@ -1001,11 +1001,32 @@ function loadMediaPipeFaceDetection(assetBasePath) {
   return loader;
 }
 
+// src/kyc/hostedJourney.ts
+var REUSE_KYC_SESSION_EXPIRY_MS = 10 * 60 * 1e3;
+function tryStartOperation(guard) {
+  if (guard.current) return false;
+  guard.current = true;
+  return true;
+}
+function releaseOperation(guard) {
+  guard.current = false;
+}
+function retryTarget(hasHostedJourney) {
+  return hasHostedJourney ? "journey" : "capture";
+}
+function modalMaxWidth(hasHostedJourney) {
+  return hasHostedJourney ? 680 : 448;
+}
+function resultForModalClose(stageKind, result) {
+  const terminal = stageKind === "accepted" || stageKind === "declined" || stageKind === "max_attempts";
+  return terminal && result !== void 0 ? result : null;
+}
+
 // src/kyc/FaceCaptureModal.tsx
 var MOBILE_UA = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
-var SESSION_EXPIRY_MS = 15 * 60 * 1e3;
+var ACCEPTED_AUTO_CLOSE_MS = 1200;
 var LIVENESS_MESSAGES = [
-  "Position your face inside the circle",
+  "Position your face inside the oval",
   "Make sure your face is well lit",
   "Remove glasses or hats if possible",
   "Look straight at the camera, then tap Capture"
@@ -1014,6 +1035,8 @@ function headerSubtitle(stageKind) {
   switch (stageKind) {
     case "qr":
       return "Use your phone to continue";
+    case "journey":
+      return "Follow the steps to verify your identity";
     case "accepted":
       return "All set";
     case "declined":
@@ -1039,7 +1062,9 @@ function FaceCaptureModal({
 }) {
   const isMobile = typeof navigator !== "undefined" && MOBILE_UA.test(navigator.userAgent);
   const initialChoice = defaultDevice ?? (isMobile ? "this" : "ask");
+  const journeyMode = Boolean(session.verification_url);
   const initialStage = (() => {
+    if (journeyMode) return { kind: "journey", url: session.verification_url ?? "" };
     if (initialChoice === "this") return { kind: "capture" };
     if (initialChoice === "mobile") return { kind: "qr", mobileConnected: false };
     return { kind: "choose" };
@@ -1057,19 +1082,20 @@ function FaceCaptureModal({
   const qrPayload = session.link || `vesant://reuse-kyc?token=${encodeURIComponent(session.token)}`;
   const cancelledRef = useRef(false);
   const submittingRef = useRef(false);
+  const journeyRetryingRef = useRef(false);
   useEffect(() => {
     const timer = setTimeout(() => {
       setStage(
-        (prev) => prev.kind === "choose" || prev.kind === "qr" || prev.kind === "capture" ? { kind: "error", message: "Session expired" } : prev
+        (prev) => prev.kind === "choose" || prev.kind === "qr" || prev.kind === "capture" || prev.kind === "journey" ? { kind: "error", message: "Session expired" } : prev
       );
-    }, SESSION_EXPIRY_MS);
+    }, REUSE_KYC_SESSION_EXPIRY_MS);
     return () => clearTimeout(timer);
   }, [session.token]);
   useEffect(() => {
     if (stage.kind !== "qr") return;
     let stopped = false;
     const intervalMs = 2e3;
-    const deadline = Date.now() + SESSION_EXPIRY_MS;
+    const deadline = Date.now() + REUSE_KYC_SESSION_EXPIRY_MS;
     let mobileSeen = stage.mobileConnected;
     const tick = async () => {
       if (stopped || cancelledRef.current) return;
@@ -1110,6 +1136,64 @@ function FaceCaptureModal({
       stopped = true;
     };
   }, [stage.kind, stage.kind === "qr" ? stage.mobileConnected : false]);
+  useEffect(() => {
+    if (stage.kind !== "journey" || !stage.url) return;
+    let stopped = false;
+    const checkOnce = async () => {
+      try {
+        const result = await client.getEventBasedFaceVerificationSessionStatus(session.token);
+        if (applyResult(result)) {
+          stopped = true;
+          return true;
+        }
+      } catch {
+      }
+      return false;
+    };
+    const tick = async () => {
+      if (stopped || cancelledRef.current) return;
+      await checkOnce();
+      if (!stopped && !cancelledRef.current) {
+        setTimeout(tick, 2500);
+      }
+    };
+    void tick();
+    let frameOrigin = "";
+    try {
+      frameOrigin = new URL(stage.url).origin;
+    } catch {
+      frameOrigin = "";
+    }
+    const onMessage = (e) => {
+      if (!frameOrigin || e.origin !== frameOrigin) return;
+      const status = e.data?.verification_status;
+      if (status) void checkOnce();
+    };
+    window.addEventListener("message", onMessage);
+    return () => {
+      stopped = true;
+      window.removeEventListener("message", onMessage);
+    };
+  }, [stage.kind, stage.kind === "journey" ? stage.url : ""]);
+  const handleJourneyRetry = async () => {
+    if (!tryStartOperation(journeyRetryingRef)) return;
+    setStage({ kind: "journey", url: "" });
+    try {
+      const refreshed = await client.retryEventBasedFaceVerificationJourney(session.token);
+      if (refreshed.verification_url) {
+        setStage({ kind: "journey", url: refreshed.verification_url });
+        return;
+      }
+      setStage({ kind: "error", message: "Unable to start a new attempt. Please try again." });
+    } catch (err) {
+      setStage({
+        kind: "error",
+        message: err instanceof Error ? err.message : "Unable to start a new attempt. Please try again."
+      });
+    } finally {
+      releaseOperation(journeyRetryingRef);
+    }
+  };
   const applyResult = (result) => {
     if (result.status === "accepted") {
       setStage({ kind: "accepted", result });
@@ -1237,12 +1321,22 @@ function FaceCaptureModal({
     }, 3e3);
     return () => clearInterval(interval);
   }, [captureMode]);
-  const close = (result) => {
+  const close = useCallback((result) => {
     cancelledRef.current = true;
     if (result === null && onCancel) {
       onCancel();
     }
     onComplete(result);
+  }, [onCancel, onComplete]);
+  useEffect(() => {
+    if (stage.kind !== "accepted") return;
+    const result = stage.result;
+    const timer = setTimeout(() => close(result), ACCEPTED_AUTO_CLOSE_MS);
+    return () => clearTimeout(timer);
+  }, [close, stage]);
+  const handleHeaderClose = () => {
+    const result = "result" in stage ? stage.result : void 0;
+    close(resultForModalClose(stage.kind, result));
   };
   const renderChoose = () => /* @__PURE__ */ React.createElement("div", { style: contentStyle }, /* @__PURE__ */ React.createElement("div", { style: visualGuideContainerStyle }, /* @__PURE__ */ React.createElement("div", { style: visualGuideStyle }, /* @__PURE__ */ React.createElement("div", { style: circleStyle }, /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "", width: 48, height: 48 })))), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, "How would you like to verify?"), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement(
     "button",
@@ -1301,12 +1395,28 @@ function FaceCaptureModal({
   };
   const renderSubmitting = () => /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: { ...spinnerStyle, margin: "24px auto", width: 32, height: 32 } }), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, "Verifying your photo\u2026"), /* @__PURE__ */ React.createElement("p", { style: { ...attemptsTextStyle, marginTop: 8 } }, "This usually takes a few seconds."));
   const renderAccepted = (result) => /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: successCircleStyle }, /* @__PURE__ */ React.createElement("img", { src: Done, alt: "", width: 48, height: 48 })), /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, "Verified"), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, "Your identity has been confirmed. You can continue."), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: () => close(result) }, "Continue")));
-  const renderDeclined = (result) => /* @__PURE__ */ React.createElement("div", { style: contentStyle }, /* @__PURE__ */ React.createElement("div", { style: alertBoxStyle }, /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, result.declined_reason ?? "We couldn't match your selfie. Please take a new one.")), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: handleRetakeAfterDecline }, /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "", width: 20, height: 20 }), /* @__PURE__ */ React.createElement("span", null, "Retake")), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(result) }, "Cancel")), /* @__PURE__ */ React.createElement("p", { style: attemptsTextStyle }, "Attempt ", Math.min(attempts + 1, maxAttempts), " of ", maxAttempts));
+  const renderDeclined = (result) => /* @__PURE__ */ React.createElement("div", { style: contentStyle }, /* @__PURE__ */ React.createElement("div", { style: alertBoxStyle }, /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, result.declined_reason ?? "We couldn't match your selfie. Please take a new one.")), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, journeyMode ? /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: () => void handleJourneyRetry() }, /* @__PURE__ */ React.createElement("span", null, "Try Again")) : /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: handleRetakeAfterDecline }, /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "", width: 20, height: 20 }), /* @__PURE__ */ React.createElement("span", null, "Retake")), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(result) }, "Cancel")), /* @__PURE__ */ React.createElement("p", { style: attemptsTextStyle }, "Attempt ", Math.min(attempts + 1, maxAttempts), " of ", maxAttempts));
   const renderMaxAttempts = (result) => /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, "Maximum Attempts Reached"), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, result.declined_reason ?? "We couldn't verify your identity after several attempts."), result.data?.freeze_account && /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, "For your security, your account has been temporarily restricted", result.data.freeze_duration_minutes ? ` for ${result.data.freeze_duration_minutes} minutes` : "", ". Please contact support if you need immediate help."), result.data?.enforce_logout && /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, "You will be signed out of your session."), result.data?.block && /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, "This action has been blocked for security reasons."), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: () => close(result) }, "Close")));
   const renderError = (message) => {
     const sessionExpired = /session\s+expired/i.test(message);
-    return /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, sessionExpired ? "Session expired" : "Something Went Wrong"), /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, sessionExpired ? "Your verification session is no longer valid. Please start a new verification from the beginning." : message), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, !sessionExpired && /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: () => setStage({ kind: "capture" }) }, "Try Again"), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(null) }, sessionExpired ? "Close" : "Cancel")));
+    return /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, sessionExpired ? "Session expired" : "Something Went Wrong"), /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, sessionExpired ? "Your verification session is no longer valid. Please start a new verification from the beginning." : message), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, !sessionExpired && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        style: primaryButtonStyle,
+        onClick: () => retryTarget(journeyMode) === "journey" ? void handleJourneyRetry() : setStage({ kind: "capture" })
+      },
+      "Try Again"
+    ), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(null) }, sessionExpired ? "Close" : "Cancel")));
   };
+  const renderJourney = (url) => /* @__PURE__ */ React.createElement("div", { style: contentStyle }, url ? /* @__PURE__ */ React.createElement(
+    "iframe",
+    {
+      src: url,
+      title: "Identity verification",
+      allow: "camera; microphone",
+      style: journeyFrameStyle
+    }
+  ) : /* @__PURE__ */ React.createElement("div", { style: { padding: 24, textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: { ...spinnerStyle, margin: "24px auto", width: 32, height: 32 } }), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, "Preparing your next attempt\u2026")), /* @__PURE__ */ React.createElement("p", { style: { ...attemptsTextStyle, textAlign: "center" } }, "Attempt ", Math.min(attempts + 1, maxAttempts), " of ", maxAttempts));
   const body = (() => {
     switch (stage.kind) {
       case "choose":
@@ -1315,6 +1425,8 @@ function FaceCaptureModal({
         return renderQRStage(stage.mobileConnected);
       case "capture":
         return renderCapture(stage.declinedReason);
+      case "journey":
+        return renderJourney(stage.url);
       case "submitting":
         return renderSubmitting();
       case "accepted":
@@ -1327,10 +1439,10 @@ function FaceCaptureModal({
         return renderError(stage.message);
     }
   })();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", null, keyframes), /* @__PURE__ */ React.createElement("div", { style: overlayStyle }, /* @__PURE__ */ React.createElement("div", { style: modalStyle }, /* @__PURE__ */ React.createElement("div", { style: headerStyle }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", null, keyframes), /* @__PURE__ */ React.createElement("div", { style: overlayStyle }, /* @__PURE__ */ React.createElement("div", { style: { ...modalStyle, maxWidth: modalMaxWidth(journeyMode) } }, /* @__PURE__ */ React.createElement("div", { style: headerStyle }, /* @__PURE__ */ React.createElement(
     "button",
     {
-      onClick: () => close(null),
+      onClick: handleHeaderClose,
       style: closeButtonStyle,
       "aria-label": "Close"
     },
@@ -1360,7 +1472,8 @@ var modalStyle = {
   borderRadius: 16,
   boxShadow: "0 25px 50px -12px rgba(0,0,0,.25)",
   width: "100%",
-  maxWidth: 448,
+  maxHeight: "calc(100vh - 32px)",
+  overflowY: "auto",
   animation: "zoomIn .2s ease-out"
 };
 var headerStyle = {
@@ -1386,6 +1499,13 @@ var contentStyle = {
   flexDirection: "column",
   gap: 16
 };
+var journeyFrameStyle = {
+  width: "100%",
+  height: "min(520px, 60vh)",
+  border: 0,
+  borderRadius: 12,
+  background: "#f9fafb"
+};
 var visualGuideContainerStyle = { display: "flex", justifyContent: "center" };
 var visualGuideStyle = { position: "relative" };
 var circleStyle = {
@@ -1652,9 +1772,10 @@ function LiveCamera({ onCapture, onCancel, message, assetBasePath }) {
   if (error) {
     return /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center", padding: 0 } }, /* @__PURE__ */ React.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, "Camera unavailable"), /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, error), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: secondaryButtonStyle, onClick: onCancel }, "Back")));
   }
-  const detectionActive = ready && !faceDetectionFailed;
-  const liveMessage = detectionActive ? FACE_MESSAGES[faceStatus] : message;
-  const liveFaceColor = detectionActive ? FACE_COLORS[faceStatus] : void 0;
+  const detectionAvailable = !faceDetectionFailed;
+  const detectionActive = ready && detectionAvailable;
+  const liveMessage = detectionAvailable ? FACE_MESSAGES[faceStatus] : message;
+  const liveFaceColor = detectionAvailable ? FACE_COLORS[faceStatus] : void 0;
   const captureDisabled = isCaptureDisabled(ready, detectionActive, faceStatus);
   const ringPulse = detectionActive && (faceStatus === "too_far" || faceStatus === "too_close") ? "pulse 1.5s ease-in-out infinite" : void 0;
   const dynamicCircleStyle = {
@@ -1770,20 +1891,22 @@ var faceOverlayContainerStyle = {
 };
 var faceRingWrapStyle = {
   position: "relative",
-  width: "72%",
-  aspectRatio: "1 / 1"
+  height: "64%",
+  aspectRatio: "3 / 4"
 };
 var faceDashedRingStyle = {
   position: "absolute",
   inset: -6,
-  borderRadius: "50%",
-  border: "6px dashed rgba(255, 255, 255, 0.4)",
-  animation: "spin 10s linear infinite"
+  borderRadius: 9999,
+  border: "6px dashed rgba(255, 255, 255, 0.4)"
 };
 var faceCircleStyle = {
   position: "absolute",
   inset: 0,
-  borderRadius: "50%",
+  // Tailwind's `rounded-full` resolves to a very large fixed radius. On a
+  // 3:4 box that creates the normal KYC capsule/head guide with straighter
+  // sides; 50% would instead produce a mathematically perfect ellipse.
+  borderRadius: 9999,
   border: "4px solid #00bc7d",
   boxShadow: "0 0 0 1000px rgba(0, 0, 0, 0.5)"
 };