smartcomply-web-sdk 1.0.66 → 1.0.69

package/dist/esm/flow/SmartComplyFlow.js

@@ -3,8 +3,35 @@ import { getTheme, TYPE, RADIUS } from "./theme";
 import { DocumentCapture } from "./DocumentCapture";
 import { collectDeviceMetadata } from "../utils/device";
 import { requiresBackSide } from "../utils/documentRules";
+import { DEFAULT_CHALLENGE_ACTIONS } from "../utils/constants";
 import { icon } from "./icons";
 import { renderSpinner, renderInlineSpinner } from "./spinner";
+// A dropped camera/network/upload error is not the user's fault and must not
+// cost them a retry attempt — only a genuine verification outcome should.
+// Classified by message rather than a typed error class since the errors
+// originate from several independent layers (CameraManager, VideoRecorder,
+// LivenessUploader) that don't share a common error type today.
+const _INFRASTRUCTURE_ERROR_PATTERNS = [
+    "camera connection was lost",
+    "network error",
+    "failed after all retries",
+    "camera access is not supported",
+    "camera access failed",
+    "recording failed unexpectedly",
+];
+function _isInfrastructureError(err) {
+    const msg = String(err?.message || "").toLowerCase();
+    return _INFRASTRUCTURE_ERROR_PATTERNS.some((p) => msg.includes(p));
+}
+// Keep this plain-language and reassuring for infrastructure hiccups — the
+// user did nothing wrong, so the copy should say so rather than sound like
+// a rejection.
+function _userFacingLivenessError(err) {
+    if (_isInfrastructureError(err)) {
+        return "We lost connection during your scan — this wasn't anything you did. Please check your camera and internet connection, then try again.";
+    }
+    return err?.message || "We couldn't verify your face. Please try again.";
+}
 const STEP_ORDER = [
     "loading",
     "welcome",
@@ -273,9 +300,14 @@ export class SmartComplyFlow {
         this.isDestroyed = false;
         this.headerBackBtn = null;
         this._keydownHandler = null;
+        this._visibilityHandler = null;
+        this._hiddenAtMs = null;
+        this._popstateHandler = null;
+        this._historyGuardActive = false;
         // Retry safety — max 3 confirmation rejections or liveness failures per session
         this._confirmRetries = 0;
         this._livenessFailures = 0;
+        this._livenessAttemptId = 0;
         // IVS result stored for confirm_identity screen
         this._ivsName = "";
         this._ivsGender = "";
@@ -334,6 +366,26 @@ export class SmartComplyFlow {
             document.removeEventListener("keydown", this._keydownHandler);
             this._keydownHandler = null;
         }
+        if (this._visibilityHandler) {
+            document.removeEventListener("visibilitychange", this._visibilityHandler);
+            this._visibilityHandler = null;
+        }
+        if (this._popstateHandler) {
+            window.removeEventListener("popstate", this._popstateHandler);
+            this._popstateHandler = null;
+        }
+        // Closing via the ✕/Escape/completion (not via the back gesture, which
+        // handles its own guard entry above) still leaves our one guard entry
+        // sitting on top of the host's history — back out of it so the user
+        // isn't left pressing back once "into" a widget that's already gone.
+        if (this._historyGuardActive) {
+            this._historyGuardActive = false;
+            try {
+                if (history.state?.scFlowGuard)
+                    history.back();
+            }
+            catch { /* ignore — best effort only */ }
+        }
         this.docCapture?.destroy();
         // Release any pre-warmed camera stream
         if (this._prewarmedStream) {
@@ -464,6 +516,64 @@ export class SmartComplyFlow {
             }
         };
         document.addEventListener("keydown", this._keydownHandler);
+        // A tab backgrounded mid-scan (a notification, switching apps to copy a
+        // code, a phone call) leaves the camera stream and detection loop in an
+        // undefined state on most mobile browsers — rAF throttles/pauses while
+        // hidden, and some browsers suspend the camera outright. Rather than let
+        // the scan silently continue against stale state and fail confusingly,
+        // restart the liveness step cleanly once the tab has been away long
+        // enough to plausibly have disrupted an active camera session. A brief
+        // glance elsewhere (quick app switch, screen lock tap) is not enough to
+        // warrant restarting — only a real return-from-away.
+        const REBACKGROUND_RESTART_MS = 3000;
+        this._visibilityHandler = () => {
+            if (this.isDestroyed)
+                return;
+            if (document.hidden) {
+                this._hiddenAtMs = Date.now();
+                return;
+            }
+            const hiddenAt = this._hiddenAtMs;
+            this._hiddenAtMs = null;
+            if (hiddenAt === null)
+                return;
+            const awayMs = Date.now() - hiddenAt;
+            if (awayMs >= REBACKGROUND_RESTART_MS && this.currentStep === "liveness") {
+                this.showStep("liveness");
+            }
+        };
+        document.addEventListener("visibilitychange", this._visibilityHandler);
+        // Intercept the browser/OS back gesture so it steps back within the flow
+        // instead of navigating the host page away and abandoning the session
+        // mid-verification (camera left open, timers orphaned). One guard entry
+        // is pushed — not one per step — to minimize interference with a host
+        // page's own router; popstate re-arms it each time so back can be
+        // pressed repeatedly. If the current step has no back target, back
+        // closes the widget cleanly instead (same as the header ✕).
+        this._historyGuardActive = true;
+        try {
+            history.pushState({ scFlowGuard: true }, "");
+        }
+        catch {
+            this._historyGuardActive = false; // host disallows pushState — degrade silently
+        }
+        this._popstateHandler = () => {
+            if (this.isDestroyed || !this._historyGuardActive)
+                return;
+            const backAction = this._getBackAction(this.currentStep);
+            if (backAction) {
+                backAction();
+            }
+            else {
+                this.close();
+                return; // don't re-arm — we're closing, let the real back navigation proceed
+            }
+            try {
+                history.pushState({ scFlowGuard: true }, "");
+            }
+            catch { /* ignore — nothing more we can do */ }
+        };
+        window.addEventListener("popstate", this._popstateHandler);
     }
     async initialize() {
         this.showStep("loading");
@@ -655,7 +765,7 @@ export class SmartComplyFlow {
         container.appendChild(topRow);
         // Title + subtitle (compact)
         const titleWrap = document.createElement("div");
-        titleWrap.style.cssText = "display:flex;flex-direction:column;gap:5px;";
+        titleWrap.style.cssText = "display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;";
         const title = document.createElement("h2");
         title.style.cssText = `
       color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;
@@ -670,7 +780,7 @@ export class SmartComplyFlow {
         const desc = document.createElement("p");
         desc.style.cssText = `
       color:${this.theme.textSecondary};font-size:13px;line-height:1.5;
-      margin:0;max-width:300px;
+      margin:0 auto;max-width:300px;text-align:center;
     `;
         desc.textContent = isDocFlow
             ? "You'll need your document and camera access. This takes about 2 minutes."
@@ -732,14 +842,16 @@ export class SmartComplyFlow {
         btn.style.cssText += "margin-top:2px;";
         btn.addEventListener("click", () => this.showStep("country"));
         container.appendChild(btn);
-        // Trust badge — "Powered by Adhere" already lives in the persistent
-        // modal footer below; repeating it here just cost vertical space.
+        // Plain-language line on what the camera/photo is for and what happens
+        // to it — shown before the "Get Started" tap that leads to the first
+        // camera permission prompt, so the browser's own prompt isn't the only
+        // context the user gets for why a camera is being requested.
         const trust = document.createElement("div");
         trust.style.cssText = `
-      display:flex;align-items:center;gap:6px;
-      color:${this.theme.textMuted};font-size:10.5px;
+      display:flex;align-items:flex-start;gap:6px;text-align:left;
+      color:${this.theme.textMuted};font-size:10.5px;line-height:1.5;
     `;
-        trust.textContent = "🔒  End-to-end encrypted";
+        trust.innerHTML = `<span style="flex-shrink:0;">🔒</span><span>Your photo and camera scan are used only to verify it's really you, and are kept encrypted.</span>`;
         container.appendChild(trust);
     }
     // ── Country Select ──────────────────────────────────────────────
@@ -1290,6 +1402,14 @@ export class SmartComplyFlow {
             this._renderRetryLimitReached(container);
             return;
         }
+        // OCR reported "done" but extracted nothing usable — do not let the user
+        // click through to liveness with no verified identity data. This is the
+        // ocr_status==="done"-with-empty-fields sibling of the poll timeout case
+        // (which _renderOcrTimeout already catches in renderOcrGate).
+        if (!this._ocrName && !this._ocrDocNumber && !this._ocrExpiry) {
+            this._renderOcrTimeout(container);
+            return;
+        }
         // W13: Pre-warm camera while user reads — but only if the document photo
         // itself came from the camera. Pre-warming here when the user uploaded
         // from gallery means requesting camera access before they've touched
@@ -1429,7 +1549,7 @@ export class SmartComplyFlow {
         // end. 45 x 2s = 90s comfortably covers that worst case while the loop
         // still exits immediately once ocrDone is true — the common case
         // (OCR done in a few seconds) is exactly as fast as before.
-        const MAX_POLLS = 45; // 45 × 2s = 90s timeout
+        const MAX_POLLS = 45; // 45 x 2s = 90s timeout
         let polls = 0;
         const poll = async () => {
             if (this.isDestroyed)
@@ -1483,13 +1603,13 @@ export class SmartComplyFlow {
                     this._ocrPollTimer = setTimeout(poll, 2000);
                 }
                 else if (!this.isDestroyed) {
-                    // Genuinely exhausted the whole window — proceed anyway with whatever we have
-                    statusEl.textContent = "Taking longer than usual…";
-                    subEl.textContent = "We'll continue — you can confirm your details on the next screen.";
-                    this._ocrPollTimer = setTimeout(() => {
-                        if (!this.isDestroyed)
-                            this.showStep("document_confirm");
-                    }, 2000);
+                    // Genuinely exhausted the whole window with nothing usable read —
+                    // stop here instead of letting an unverified identity through to
+                    // liveness. document_confirm never blocks on missing fields (by
+                    // design, so a partial-but-real OCR read still lets the user
+                    // continue), so the gate has to live here, before that screen.
+                    container.innerHTML = "";
+                    this._renderOcrTimeout(container);
                 }
             }
             catch {
@@ -1558,6 +1678,35 @@ export class SmartComplyFlow {
         });
         container.appendChild(retryBtn);
     }
+    /**
+     * OCR ran to completion but never produced a single usable field within
+     * the poll window — do not let the flow reach liveness with no verified
+     * identity data. Distinct from _renderOcrQualityFail (a bad photo) since
+     * this covers a genuinely stuck/slow OCR pass instead of a rejected image.
+     */
+    _renderOcrTimeout(container) {
+        container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:20px 0;";
+        const icon = document.createElement("div");
+        icon.style.cssText = `width:72px;height:72px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:28px;`;
+        icon.textContent = "⏱️";
+        container.appendChild(icon);
+        const t = document.createElement("h2");
+        t.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
+        t.textContent = "Couldn't Read Your Document";
+        container.appendChild(t);
+        const d = document.createElement("p");
+        d.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin:0;max-width:280px;line-height:1.6;`;
+        d.textContent = "We weren't able to read any details from your document. Please retake the photo in good lighting, with all four corners visible.";
+        container.appendChild(d);
+        const retryBtn = this.createPrimaryButton("Retake photo");
+        retryBtn.addEventListener("click", () => {
+            this.livenessEntryId = null;
+            this.documentBlob = null;
+            this.documentBackBlob = null;
+            this.showStep("document_capture");
+        });
+        container.appendChild(retryBtn);
+    }
     // ── W11: You're all done (end-user final screen) ─────────────────
     renderDone(container) {
         container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:24px 0;";
@@ -1816,6 +1965,11 @@ export class SmartComplyFlow {
             this._renderRetryLimitReached(container);
             return;
         }
+        // Each render gets its own id so a stale attempt (e.g. abandoned after
+        // the tab was backgrounded and we restarted the scan on return) can't
+        // resolve/reject into the current one — see the visibilitychange
+        // handler in mount(), which re-renders this step on return-to-foreground.
+        const attemptId = ++this._livenessAttemptId;
         const title = this.createStepTitle("Face verification");
         container.appendChild(title);
         const desc = document.createElement("div");
@@ -1864,8 +2018,12 @@ export class SmartComplyFlow {
                 error: this.theme.error,
                 warning: this.theme.warning,
             },
-        }, ["BLINK"], this.livenessEntryId || undefined)
+        }, [...DEFAULT_CHALLENGE_ACTIONS], this.livenessEntryId || undefined)
             .then((result) => {
+            // A stale attempt (superseded by a restart after the tab was
+            // backgrounded) resolving late must not act on the current screen.
+            if (attemptId !== this._livenessAttemptId)
+                return;
             // W11: After submit, end user is done — show "You're all done" screen.
             // Backend processing continues in background; client receives webhook.
             // Track liveness failures for retry limit (W14).
@@ -1878,8 +2036,18 @@ export class SmartComplyFlow {
             this.showStep("done");
         })
             .catch((err) => {
-            this._livenessFailures++;
-            this.showErrorStep(err.message || "Liveness verification failed. Please try again.");
+            if (attemptId !== this._livenessAttemptId)
+                return;
+            // Only count a genuine verification failure against the retry limit —
+            // a dropped camera, network blip, or upload failure isn't the user's
+            // fault and shouldn't cost them one of their limited attempts. These
+            // are infrastructure-layer errors (thrown/rejected); a real face-
+            // match/quality failure comes back as a resolved result with
+            // status "failed" instead (handled in .then() above).
+            if (!_isInfrastructureError(err)) {
+                this._livenessFailures++;
+            }
+            this.showErrorStep(_userFacingLivenessError(err));
         });
     }
     // ── Error ───────────────────────────────────────────────────────
@@ -2072,9 +2240,14 @@ export class SmartComplyFlow {
         const powered = document.createElement("span");
         powered.style.cssText = `font-size:11px;color:${this.theme.textMuted};`;
         powered.textContent = "Powered by ";
-        const brand = document.createElement("span");
-        brand.style.cssText = `font-size:11px;font-weight:700;color:${this.theme.primary};`;
+        const brand = document.createElement("a");
+        brand.href = "https://adhere.smartcomply.com/";
+        brand.target = "_blank";
+        brand.rel = "noopener noreferrer";
+        brand.style.cssText = `font-size:11px;font-weight:700;color:${this.theme.primary};text-decoration:none;`;
         brand.textContent = "Adhere";
+        brand.addEventListener("mouseenter", () => { brand.style.textDecoration = "underline"; });
+        brand.addEventListener("mouseleave", () => { brand.style.textDecoration = "none"; });
         footer.appendChild(powered);
         footer.appendChild(brand);
         return footer;
@@ -2111,18 +2284,19 @@ export class SmartComplyFlow {
         });
         card.addEventListener("click", onClick);
         const textWrap = document.createElement("div");
+        textWrap.style.cssText = "flex:1 1 auto;min-width:0;";
         const titleEl = document.createElement("div");
-        titleEl.style.cssText = `color:${this.theme.text};font-size:14px;font-weight:600;`;
+        titleEl.style.cssText = `color:${this.theme.text};font-size:14px;font-weight:600;line-height:1.35;`;
         titleEl.textContent = title;
         textWrap.appendChild(titleEl);
         if (subtitle) {
             const subEl = document.createElement("div");
-            subEl.style.cssText = `color:${this.theme.textMuted};font-size:12px;margin-top:2px;`;
+            subEl.style.cssText = `color:${this.theme.textMuted};font-size:12px;line-height:1.4;margin-top:2px;`;
             subEl.textContent = subtitle;
             textWrap.appendChild(subEl);
         }
         const arrow = document.createElement("span");
-        arrow.style.cssText = `color:${this.theme.textMuted};font-size:18px;flex-shrink:0;`;
+        arrow.style.cssText = `color:${this.theme.textMuted};font-size:18px;flex-shrink:0;margin-left:12px;line-height:1;`;
         arrow.textContent = "→";
         card.appendChild(textWrap);
         card.appendChild(arrow);
@@ -2195,6 +2369,24 @@ export class SmartComplyFlow {
             .flatMap((ch) => ch.fields || []);
         return allFields.some((f) => isUploadFieldType(f.type));
     }
+    /**
+     * The "go back one step" target for a given step, if that step is
+     * navigable — shared by the header back button and the browser
+     * back-button (popstate) handler in mount() so both agree on the same
+     * step order.
+     */
+    _getBackAction(step) {
+        const countries = Object.keys(this.sdkConfig?.channels || {});
+        const backTargets = {
+            id_type: () => this.showStep(countries.length > 1 ? "country" : "welcome"),
+            country: () => this.showStep("welcome"),
+            id_input: () => this.showStep("id_type"),
+            confirm_identity: () => this.showStep("id_input"),
+            document_capture: () => { this.docCapture?.destroy(); this.showStep("id_type"); },
+            document_confirm: () => { this.docCapture?.destroy(); this.showStep("document_capture"); },
+        };
+        return backTargets[step];
+    }
     updateProgress() {
         const isDocFlow = this.isDocumentFlow();
         const countries = Object.keys(this.sdkConfig?.channels || {});
@@ -2246,15 +2438,7 @@ export class SmartComplyFlow {
         }
         // Back button — show for navigable steps only
         if (this.headerBackBtn) {
-            const backTargets = {
-                id_type: () => this.showStep(countries.length > 1 ? "country" : "welcome"),
-                country: () => this.showStep("welcome"),
-                id_input: () => this.showStep("id_type"),
-                confirm_identity: () => this.showStep("id_input"),
-                document_capture: () => { this.docCapture?.destroy(); this.showStep("id_type"); },
-                document_confirm: () => { this.docCapture?.destroy(); this.showStep("document_capture"); },
-            };
-            const backAction = backTargets[this.currentStep];
+            const backAction = this._getBackAction(this.currentStep);
             if (backAction) {
                 this.headerBackBtn.style.display = "flex";
                 const newBtn = this.headerBackBtn.cloneNode(true);