smartcomply-web-sdk 1.0.89 → 1.0.91

package/dist/modules/liveness/LivenessUI.js

@@ -6,30 +6,30 @@ function injectLivenessKeyframes() {
         return;
     const s = document.createElement("style");
     s.id = "sc-liveness-kf";
-    s.textContent = `
-    @keyframes sc-pop-in {
-      0%   { transform:scale(0.7); opacity:0; }
-      60%  { transform:scale(1.05); }
-      100% { transform:scale(1); opacity:1; }
-    }
-    @keyframes sc-scan-dot {
-      0%,100% { opacity:0.3; transform:scale(0.85); }
-      50%     { opacity:1;   transform:scale(1); }
-    }
-    @keyframes sc-scanline-sweep {
-      0%   { transform:translateY(-4%); opacity:0; }
-      8%   { opacity:0.9; }
-      92%  { opacity:0.9; }
-      100% { transform:translateY(104%); opacity:0; }
-    }
-    @keyframes sc-corner-pulse {
-      0%,100% { opacity:0.55; }
-      50%     { opacity:1; }
-    }
-    @keyframes sc-oval-breathe {
-      0%,100% { opacity:0.5; }
-      50%     { opacity:0.85; }
-    }
+    s.textContent = `
+    @keyframes sc-pop-in {
+      0%   { transform:scale(0.7); opacity:0; }
+      60%  { transform:scale(1.05); }
+      100% { transform:scale(1); opacity:1; }
+    }
+    @keyframes sc-scan-dot {
+      0%,100% { opacity:0.3; transform:scale(0.85); }
+      50%     { opacity:1;   transform:scale(1); }
+    }
+    @keyframes sc-scanline-sweep {
+      0%   { transform:translateY(-4%); opacity:0; }
+      8%   { opacity:0.9; }
+      92%  { opacity:0.9; }
+      100% { transform:translateY(104%); opacity:0; }
+    }
+    @keyframes sc-corner-pulse {
+      0%,100% { opacity:0.55; }
+      50%     { opacity:1; }
+    }
+    @keyframes sc-oval-breathe {
+      0%,100% { opacity:0.5; }
+      50%     { opacity:0.85; }
+    }
   `;
     document.head.appendChild(s);
 }
@@ -59,38 +59,38 @@ class LivenessUI {
     mount(container, challenge) {
         injectLivenessKeyframes();
         this.root = document.createElement("div");
-        this.root.style.cssText = `
-      position:relative;width:100%;max-width:420px;margin:0 auto;
-      background:#0a0a0a;border-radius:16px;overflow:hidden;
-      font-family:system-ui,-apple-system,sans-serif;
-      box-shadow:0 8px 32px rgba(0,0,0,0.4);
-      aspect-ratio:3/4;
+        this.root.style.cssText = `
+      position:relative;width:100%;max-width:420px;margin:0 auto;
+      background:#0a0a0a;border-radius:16px;overflow:hidden;
+      font-family:system-ui,-apple-system,sans-serif;
+      box-shadow:0 8px 32px rgba(0,0,0,0.4);
+      aspect-ratio:3/4;
     `;
         this.videoEl = document.createElement("video");
         this.videoEl.autoplay = true;
         this.videoEl.playsInline = true;
         this.videoEl.muted = true;
         this.videoEl.setAttribute("aria-label", "Live camera preview for face verification");
-        this.videoEl.style.cssText = `
-      width:100%;height:100%;display:block;
-      filter:brightness(1.03) contrast(1.03);
-      transform:scaleX(-1);object-fit:cover;
+        this.videoEl.style.cssText = `
+      width:100%;height:100%;display:block;
+      filter:brightness(1.03) contrast(1.03);
+      transform:scaleX(-1);object-fit:cover;
     `;
         // Dim everything outside the oval so the guide reads as a scan aperture
         // rather than a shape floating over the raw feed.
         const vignette = document.createElement("div");
-        vignette.style.cssText = `
-      position:absolute;inset:0;pointer-events:none;
-      background:radial-gradient(ellipse 34% 44% at 50% 47%, transparent 55%, rgba(0,0,0,0.55) 100%);
+        vignette.style.cssText = `
+      position:absolute;inset:0;pointer-events:none;
+      background:radial-gradient(ellipse 34% 44% at 50% 47%, transparent 55%, rgba(0,0,0,0.55) 100%);
     `;
         // Oval guide — centred
         const guideWrap = document.createElement("div");
-        guideWrap.style.cssText = `
-      position:absolute;top:50%;left:50%;
-      transform:translate(-50%,-52%);
-      width:64%;aspect-ratio:140/180;pointer-events:none;
-      filter:drop-shadow(0 0 18px rgba(59,130,246,0.35));
-      transition:filter 0.3s ease;
+        guideWrap.style.cssText = `
+      position:absolute;top:50%;left:50%;
+      transform:translate(-50%,-52%);
+      width:64%;aspect-ratio:140/180;pointer-events:none;
+      filter:drop-shadow(0 0 18px rgba(59,130,246,0.35));
+      transition:filter 0.3s ease;
     `;
         this.guideWrapEl = guideWrap;
         const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@@ -179,49 +179,49 @@ class LivenessUI {
         // Scan-line sweep — clipped to the oval, gives a visible "actively
         // scanning" motion cue instead of a static outline.
         const scanlineClipWrap = document.createElement("div");
-        scanlineClipWrap.style.cssText = `
-      position:absolute;inset:0;
-      clip-path:ellipse(45.7% 47.8% at 50% 50%);
-      overflow:hidden;
+        scanlineClipWrap.style.cssText = `
+      position:absolute;inset:0;
+      clip-path:ellipse(45.7% 47.8% at 50% 50%);
+      overflow:hidden;
     `;
         const scanline = document.createElement("div");
-        scanline.style.cssText = `
-      position:absolute;left:0;right:0;height:26%;top:0;
-      background:linear-gradient(180deg,transparent 0%,rgba(59,130,246,0.32) 45%,rgba(147,197,253,0.55) 50%,rgba(59,130,246,0.32) 55%,transparent 100%);
-      animation:sc-scanline-sweep 2.6s ease-in-out infinite;
+        scanline.style.cssText = `
+      position:absolute;left:0;right:0;height:26%;top:0;
+      background:linear-gradient(180deg,transparent 0%,rgba(59,130,246,0.32) 45%,rgba(147,197,253,0.55) 50%,rgba(59,130,246,0.32) 55%,transparent 100%);
+      animation:sc-scanline-sweep 2.6s ease-in-out infinite;
     `;
         this.scanlineEl = scanline;
         scanlineClipWrap.appendChild(scanline);
         guideWrap.appendChild(scanlineClipWrap);
         // Instruction — top, gradient scrim
         const camTop = document.createElement("div");
-        camTop.style.cssText = `
-      position:absolute;top:0;left:0;right:0;
-      background:linear-gradient(180deg,rgba(0,0,0,0.8) 0%,transparent 100%);
-      padding:14px 16px 32px;
+        camTop.style.cssText = `
+      position:absolute;top:0;left:0;right:0;
+      background:linear-gradient(180deg,rgba(0,0,0,0.8) 0%,transparent 100%);
+      padding:14px 16px 32px;
     `;
         this.instructionEl = document.createElement("div");
         this.instructionEl.setAttribute("aria-live", "polite");
         this.instructionEl.setAttribute("role", "status");
-        this.instructionEl.style.cssText = `
-      color:#fff;font-size:14px;font-weight:600;text-align:center;line-height:1.4;
+        this.instructionEl.style.cssText = `
+      color:#fff;font-size:14px;font-weight:600;text-align:center;line-height:1.4;
     `;
         this.instructionEl.textContent = challenge.instruction;
         camTop.appendChild(this.instructionEl);
         // Scan progress dots — bottom
         const camBottom = document.createElement("div");
-        camBottom.style.cssText = `
-      position:absolute;bottom:0;left:0;right:0;
-      background:linear-gradient(0deg,rgba(0,0,0,0.7) 0%,transparent 100%);
-      padding:28px 10px 18px;display:flex;justify-content:center;
+        camBottom.style.cssText = `
+      position:absolute;bottom:0;left:0;right:0;
+      background:linear-gradient(0deg,rgba(0,0,0,0.7) 0%,transparent 100%);
+      padding:28px 10px 18px;display:flex;justify-content:center;
     `;
         this.dotsEl = document.createElement("div");
         this.dotsEl.style.cssText = "display:flex;gap:6px;";
         for (let i = 0; i < 3; i++) {
             const dot = document.createElement("div");
-            dot.style.cssText = `
-        width:6px;height:6px;border-radius:50%;background:${this.colors.primary};
-        animation:sc-scan-dot 1.1s ease-in-out ${i * 0.18}s infinite;
+            dot.style.cssText = `
+        width:6px;height:6px;border-radius:50%;background:${this.colors.primary};
+        animation:sc-scan-dot 1.1s ease-in-out ${i * 0.18}s infinite;
       `;
             this.dotsEl.appendChild(dot);
         }
@@ -233,10 +233,10 @@ class LivenessUI {
         this.root.appendChild(camBottom);
         // Result overlay
         this.overlayEl = document.createElement("div");
-        this.overlayEl.style.cssText = `
-      position:absolute;inset:0;display:none;align-items:center;
-      justify-content:center;z-index:10;
-      background:rgba(0,0,0,0.88);backdrop-filter:blur(8px);
+        this.overlayEl.style.cssText = `
+      position:absolute;inset:0;display:none;align-items:center;
+      justify-content:center;z-index:10;
+      background:rgba(0,0,0,0.88);backdrop-filter:blur(8px);
     `;
         this.root.appendChild(this.overlayEl);
         container.appendChild(this.root);
@@ -297,15 +297,15 @@ class LivenessUI {
             }
             const ok = status === "processing";
             this.overlayEl.style.display = "flex";
-            this.overlayEl.innerHTML = `
-        <div style="text-align:center;color:#fff;animation:sc-pop-in 0.35s ease;padding:24px;">
-          <div style="width:72px;height:72px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:32px;
-            background:${ok ? "rgba(34,197,94,0.2)" : "rgba(239,68,68,0.2)"};
-            border:3px solid ${ok ? this.colors.success : this.colors.error};">
-            ${ok ? "✓" : "✕"}
-          </div>
-          <div style="font-size:17px;font-weight:700;margin-bottom:8px;">${ok ? "Verification submitted" : "Submission failed"}</div>
-          <div style="font-size:12px;opacity:0.6;line-height:1.6;">${ok ? "Hold on while we wrap up…" : "Something went wrong. Please try again."}</div>
+            this.overlayEl.innerHTML = `
+        <div style="text-align:center;color:#fff;animation:sc-pop-in 0.35s ease;padding:24px;">
+          <div style="width:72px;height:72px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:32px;
+            background:${ok ? "rgba(34,197,94,0.2)" : "rgba(239,68,68,0.2)"};
+            border:3px solid ${ok ? this.colors.success : this.colors.error};">
+            ${ok ? "✓" : "✕"}
+          </div>
+          <div style="font-size:17px;font-weight:700;margin-bottom:8px;">${ok ? "Verification submitted" : "Submission failed"}</div>
+          <div style="font-size:12px;opacity:0.6;line-height:1.6;">${ok ? "Hold on while we wrap up…" : "Something went wrong. Please try again."}</div>
         </div>`;
             setTimeout(resolve, 1800);
         });
@@ -317,12 +317,12 @@ class LivenessUI {
                 return;
             }
             this.overlayEl.style.display = "flex";
-            this.overlayEl.innerHTML = `
-        <div style="text-align:center;color:#fff;animation:sc-pop-in 0.35s ease;padding:24px;">
-          <div style="width:72px;height:72px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:32px;background:rgba(251,191,36,0.15);border:3px solid ${this.colors.warning};">⏱</div>
-          <div style="font-size:17px;font-weight:700;margin-bottom:8px;">Time's Up</div>
-          <div style="font-size:12px;opacity:0.6;margin-bottom:18px;">We couldn't confirm liveness in time. Please try again.</div>
-          <button id="sc-retry-btn" style="padding:11px 28px;border-radius:10px;background:${this.colors.primary};color:#fff;border:none;cursor:pointer;font-size:14px;font-weight:600;width:100%;max-width:180px;">Try Again</button>
+            this.overlayEl.innerHTML = `
+        <div style="text-align:center;color:#fff;animation:sc-pop-in 0.35s ease;padding:24px;">
+          <div style="width:72px;height:72px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:32px;background:rgba(251,191,36,0.15);border:3px solid ${this.colors.warning};">⏱</div>
+          <div style="font-size:17px;font-weight:700;margin-bottom:8px;">Time's Up</div>
+          <div style="font-size:12px;opacity:0.6;margin-bottom:18px;">We couldn't confirm liveness in time. Please try again.</div>
+          <button id="sc-retry-btn" style="padding:11px 28px;border-radius:10px;background:${this.colors.primary};color:#fff;border:none;cursor:pointer;font-size:14px;font-weight:600;width:100%;max-width:180px;">Try Again</button>
         </div>`;
             const btn = this.overlayEl.querySelector("#sc-retry-btn");
             if (btn) {

package/dist/smartcomply.browser.js

@@ -4632,7 +4632,10 @@ var SmartComplySDK = (() => {
       this.blinkHoldCount = 0;
       this.blinkDetected = false;
       this.motionDetected = false;
-      this.baselineYaw = null;
+      // Running min/max yaw seen so far in the scan, not a single fixed
+      // first-frame baseline (see check() below for why).
+      this.minYaw = null;
+      this.maxYaw = null;
     }
     check(result) {
       if (!result.faceDetected) {
@@ -4652,9 +4655,9 @@ var SmartComplySDK = (() => {
       }
       if (!this.motionDetected) {
         const yaw = this.getHeadYaw(result.transformMatrix);
-        if (this.baselineYaw === null) {
-          this.baselineYaw = yaw;
-        } else if (Math.abs(yaw - this.baselineYaw) >= YAW_MOTION_THRESHOLD_DEG) {
+        if (this.minYaw === null || yaw < this.minYaw) this.minYaw = yaw;
+        if (this.maxYaw === null || yaw > this.maxYaw) this.maxYaw = yaw;
+        if (this.maxYaw - this.minYaw >= YAW_MOTION_THRESHOLD_DEG) {
           this.motionDetected = true;
         }
       }
@@ -5779,7 +5782,7 @@ var SmartComplySDK = (() => {
      * the request, so the resume_token has to be the one in use throughout.
      *
      * No expires_at is set here — the resume_token's own issuance response
-     * only carries resume_expires_at (a 72h invite-link window), not the
+     * only carries resume_expires_at (a 24h invite-link window), not the
      * session's own runtime expiry the way createSession() returns one. The
      * backend still enforces the real expiry server-side regardless; this
      * only means the client-side "session about to expire" warning timer
@@ -5808,6 +5811,22 @@ var SmartComplySDK = (() => {
       this._sdkConfig = config;
       return config;
     }
+    /**
+     * Resolve a resume_token to the entry/step it's resuming, without
+     * consuming the single-use resume binding (unlike create/, which does).
+     * Only meaningful after resumeSession() — a normal createSession()
+     * session was never issued for a resume, so this returns a 404
+     * (NOT_A_RESUME_TOKEN) for it, same as the backend.
+     *
+     * GET /v1/sdk/liveness/resume-info/
+     * Auth: x-access-token: <sessionToken>
+     */
+    async getResumeInfo() {
+      return this.http.sessionRequest(
+        "GET",
+        "/v1/sdk/liveness/resume-info/"
+      );
+    }
   };
   /**
    * Package version, hardcoded to match package.json — bump this alongside
@@ -5818,7 +5837,7 @@ var SmartComplySDK = (() => {
    * CDN tag they installed with (e.g. @1, which floats to the latest
    * matching release) actually resolved to the version they expect.
    */
-  _SmartComply.VERSION = "1.0.89";
+  _SmartComply.VERSION = "1.0.91";
   var SmartComply = _SmartComply;
 
   // src/flow/theme.ts
@@ -7342,6 +7361,9 @@ var SmartComplySDK = (() => {
   function isUploadFieldType(type) {
     return type === "upload" || type === "image" || type === "file";
   }
+  function isResumeLinkErrorMessage(message) {
+    return /resume link|resubmit link/i.test(message);
+  }
   function resolveIdTypeInfo(typeName, isDocumentFlow) {
     const u2 = typeName.toUpperCase();
     const advanced = u2.includes("ADVANCED");
@@ -7819,11 +7841,85 @@ var SmartComplySDK = (() => {
           this.brandLogoImg.style.display = "block";
         }
         if (this.isDestroyed) return;
-        this.showStep("welcome");
+        if (this.options.resumeToken) {
+          const resumeStep = await this._resolveResumeStep();
+          if (resumeStep !== null) this.showStep(resumeStep);
+        } else {
+          this.showStep("welcome");
+        }
       } catch (err) {
         this.showErrorStep(err.message || "Failed to initialize. Please try again.");
       }
     }
+    // Resolves a resume_token to the step the customer should land on,
+    // pre-selecting the same country/ID type the original attempt used (the
+    // same state renderCountrySelect/renderIdTypeSelect's own click handlers
+    // set) so document_capture/liveness render correctly instead of assuming
+    // state that was never set. Falls back to "welcome" on anything that
+    // doesn't resolve cleanly for an UNCERTAIN reason (network error, timeout)
+    // — this is a UX improvement, not a requirement: the backend's own
+    // resume-match at create/ time still works correctly even if the widget
+    // can't figure out which screen to pre-select.
+    //
+    // Returns null instead when the lookup fails for a CERTAIN, known reason
+    // — the resume link itself is provably expired or already used
+    // (RESUME_TARGET_UNAVAILABLE) or was never a resume link at all
+    // (NOT_A_RESUME_TOKEN). Unlike a transient failure, there is no "try the
+    // real request and it'll still work" fallback for these: create/'s own
+    // resume-match reads the exact same resume_target_entry binding this
+    // lookup just found missing/invalid, so falling through to a generic
+    // welcome screen would silently walk the customer into a brand-new,
+    // unrelated verification attempt with no explanation — worse than telling
+    // them plainly that their link no longer works. The caller shows this
+    // error itself (via showErrorStep, called here directly) rather than
+    // rendering a step.
+    async _resolveResumeStep() {
+      try {
+        const info = await this.sdk.getResumeInfo();
+        if (info.verification_type === "liveness_only" || info.failure_stage === "liveness" || // data_match is always a selfie-vs-identity-photo mismatch (see the
+        // backend's own comment in _process_identity_face_match) — fixed by
+        // redoing the selfie/video, same as a "liveness" failure. There is
+        // no document step in data verification at all, so this can never
+        // legitimately need document_capture.
+        info.failure_stage === "data_match") {
+          this.selectedCountry = info.country || this.selectedCountry || "global";
+          return "liveness";
+        }
+        if (info.failure_stage === "document" && info.country && info.identifier_type) {
+          const channels = this.sdkConfig?.channels || {};
+          const idTypes = channels[info.country] || [];
+          const match = idTypes.find((idType) => {
+            const code = typeof idType === "string" ? idType : idType.code || idType.name;
+            return code === info.identifier_type;
+          });
+          if (match) {
+            const typeName = typeof match === "string" ? match : match.name;
+            const typeCode = typeof match === "string" ? match : match.code || match.name;
+            const channelFields = typeof match !== "string" ? match.fields || [] : [];
+            const isDocFlow = channelFields.some((f2) => isUploadFieldType(f2.type)) || this.isDocumentFlow();
+            const info2 = resolveIdTypeInfo(typeName, isDocFlow);
+            const requiresBackFromBackend = typeof match !== "string" ? match.requires_back_side : void 0;
+            this.selectedCountry = info.country;
+            this.selectedIdType = typeCode;
+            this.selectedIdTypeName = typeName;
+            this.selectedRequiresBack = requiresBackFromBackend ?? info2.requiresBack;
+            if (typeof match !== "string") {
+              this.selectedChannelId = match.id;
+              this.selectedChannelFields = match.fields || [];
+            }
+            return "document_capture";
+          }
+        }
+        return "welcome";
+      } catch (err) {
+        const code = err instanceof SDKError ? err.errorCode : void 0;
+        if (code === "RESUME_TARGET_UNAVAILABLE" || code === "NOT_A_RESUME_TOKEN") {
+          this.showErrorStep("This resume link has expired or is no longer valid.");
+          return null;
+        }
+        return "welcome";
+      }
+    }
     // Defers the expiry warning while the user is on a camera-active step
     // (document_capture/liveness) — showing it there would blow away a live
     // video element and in-progress MediaRecorder mid-scan.
@@ -9143,14 +9239,15 @@ var SmartComplySDK = (() => {
     `;
       const isCameraErr = /camera|permission|notallowed|notfound/i.test(message);
       const isNetworkErr = /network|timeout|connection|fetch/i.test(message);
-      const isAuthErr = /session.*expired|token.*expired|authentication/i.test(message);
+      const isResumeLinkErr = isResumeLinkErrorMessage(message);
+      const isAuthErr = !isResumeLinkErr && /session.*expired|token.*expired|authentication/i.test(message);
       const isDocQuality = /blurry|blur|quality|glare|dark|bright|lighting/i.test(message);
       const isExpiredDoc = /document.*expired|expired.*document/i.test(message);
       const isFaceMatch = /face.*match|selfie.*match|does not match/i.test(message);
       const isBillingErr = /wallet|balance|insufficient.*fund|payment.*required/i.test(message);
-      const errorIconName = isCameraErr ? "camera" : isNetworkErr ? "network" : isAuthErr ? "clock" : isDocQuality ? "search" : isExpiredDoc ? "calendar" : isFaceMatch ? "face" : isBillingErr ? "warning" : "close";
-      const errorTitle = isCameraErr ? "Camera Access Required" : isNetworkErr ? "Connection Problem" : isAuthErr ? "Session Expired" : isDocQuality ? "Document Photo Unclear" : isExpiredDoc ? "Document Expired" : isFaceMatch ? "Face Match Failed" : isBillingErr ? "Verification Unavailable" : "Verification Unsuccessful";
-      const userMessage = isCameraErr ? "Please allow camera access in your browser settings and try again." : isNetworkErr ? "Check your internet connection and try again." : isAuthErr ? "Your session has expired. Please start again." : isDocQuality ? _sanitizeUserMessage(message) || "Please retake your document photo in good lighting with no glare." : isExpiredDoc ? "The document you submitted has expired. Please use a valid, current ID." : isFaceMatch ? "Your selfie did not match the photo on your ID. Please ensure you are using your own valid document and face the camera directly." : isBillingErr ? "Verification is temporarily unavailable. Please contact support." : _sanitizeUserMessage(message) || "We were unable to complete your verification. Please try again.";
+      const errorIconName = isCameraErr ? "camera" : isNetworkErr ? "network" : isResumeLinkErr ? "clock" : isAuthErr ? "clock" : isDocQuality ? "search" : isExpiredDoc ? "calendar" : isFaceMatch ? "face" : isBillingErr ? "warning" : "close";
+      const errorTitle = isCameraErr ? "Camera Access Required" : isNetworkErr ? "Connection Problem" : isResumeLinkErr ? "Link No Longer Valid" : isAuthErr ? "Session Expired" : isDocQuality ? "Document Photo Unclear" : isExpiredDoc ? "Document Expired" : isFaceMatch ? "Face Match Failed" : isBillingErr ? "Verification Unavailable" : "Verification Unsuccessful";
+      const userMessage = isCameraErr ? "Please allow camera access in your browser settings and try again." : isNetworkErr ? "Check your internet connection and try again." : isResumeLinkErr ? "This link has expired or has already been used. Please contact us to request a new one." : isAuthErr ? "Your session has expired. Please start again." : isDocQuality ? _sanitizeUserMessage(message) || "Please retake your document photo in good lighting with no glare." : isExpiredDoc ? "The document you submitted has expired. Please use a valid, current ID." : isFaceMatch ? "Your selfie did not match the photo on your ID. Please ensure you are using your own valid document and face the camera directly." : isBillingErr ? "Verification is temporarily unavailable. Please contact support." : _sanitizeUserMessage(message) || "We were unable to complete your verification. Please try again.";
       const iconWrap = document.createElement("div");
       iconWrap.style.cssText = `
       width:72px;height:72px;border-radius:50%;