vesant-sdk 1.7.1-dev.9fc141f → 1.7.1-dev.a461ee2

package/dist/react.mjs

@@ -1001,9 +1001,25 @@ 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;
+}
+
 // 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 LIVENESS_MESSAGES = [
   "Position your face inside the oval",
   "Make sure your face is well lit",
@@ -1014,6 +1030,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 +1057,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 +1077,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 +1131,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 });
@@ -1301,12 +1380,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 +1410,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,7 +1424,7 @@ 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),
@@ -1360,7 +1457,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 +1484,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 = {