smartcomply-web-sdk 1.0.68 → 1.0.69

package/dist/smartcomply.browser.js

@@ -4709,6 +4709,7 @@ var SmartComplySDK = (() => {
       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);
@@ -4730,6 +4731,7 @@ var SmartComplySDK = (() => {
       this.guideWrapEl = guideWrap;
       const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
       svg.setAttribute("viewBox", "0 0 140 180");
+      svg.setAttribute("aria-hidden", "true");
       svg.style.cssText = "width:100%;height:100%;overflow:visible;";
       const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
       const clip = document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
@@ -4769,12 +4771,12 @@ var SmartComplySDK = (() => {
       confOval.setAttribute("ry", "86");
       confOval.setAttribute("fill", "none");
       confOval.setAttribute("stroke", this.colors.primary);
-      confOval.setAttribute("stroke-width", "2.5");
-      confOval.setAttribute("stroke-linecap", "round");
+      confOval.setAttribute("stroke-width", "3");
+      confOval.setAttribute("stroke-linecap", "butt");
       const circ = 2 * Math.PI * Math.sqrt((64 * 64 + 86 * 86) / 2);
       confOval.setAttribute("stroke-dasharray", `${circ}`);
       confOval.setAttribute("stroke-dashoffset", `${circ}`);
-      confOval.style.cssText = "transition:stroke-dashoffset 0.2s linear,stroke 0.3s ease;transform:rotate(-90deg);transform-origin:70px 90px;";
+      confOval.style.cssText = "transition:stroke-dashoffset 0.2s linear,stroke 0.3s ease;transform:rotate(-90deg);transform-origin:70px 90px;filter:drop-shadow(0 0 3px rgba(0,0,0,0.25));";
       this.confidenceRingEl = confOval;
       const bracketGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
       bracketGroup.setAttribute("stroke", this.colors.primary);
@@ -4822,6 +4824,8 @@ var SmartComplySDK = (() => {
       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;
     `;
@@ -5857,6 +5861,126 @@ var SmartComplySDK = (() => {
     return Math.min(maxWidth / srcWidth, maxHeight / srcHeight, 1);
   }
 
+  // src/utils/ImageQuality.ts
+  function calculateSharpness(imageData) {
+    const { width, height, data } = imageData;
+    const gray = new Uint8Array(width * height);
+    for (let i2 = 0; i2 < width * height; i2++) {
+      const idx = i2 * 4;
+      gray[i2] = Math.round(0.299 * data[idx] + 0.587 * data[idx + 1] + 0.114 * data[idx + 2]);
+    }
+    const laplacian = new Float32Array(width * height);
+    let sum = 0;
+    let sumSq = 0;
+    let count = 0;
+    for (let y2 = 1; y2 < height - 1; y2++) {
+      for (let x2 = 1; x2 < width - 1; x2++) {
+        const idx = y2 * width + x2;
+        const val = -1 * gray[idx - width] + -1 * gray[idx - 1] + 4 * gray[idx] + -1 * gray[idx + 1] + -1 * gray[idx + width];
+        laplacian[idx] = val;
+        sum += val;
+        sumSq += val * val;
+        count++;
+      }
+    }
+    const mean = sum / count;
+    const variance = sumSq / count - mean * mean;
+    return Math.abs(variance);
+  }
+  function detectGlare(imageData, threshold = 250) {
+    const { data } = imageData;
+    let overexposed = 0;
+    for (let i2 = 0; i2 < data.length; i2 += 4) {
+      const brightness = (data[i2] + data[i2 + 1] + data[i2 + 2]) / 3;
+      if (brightness > threshold) {
+        overexposed++;
+      }
+    }
+    return overexposed / (data.length / 4);
+  }
+  function calculateContrast(imageData) {
+    const { data } = imageData;
+    let sum = 0;
+    let sumSq = 0;
+    const pixelCount = data.length / 4;
+    for (let i2 = 0; i2 < data.length; i2 += 4) {
+      const gray = 0.299 * data[i2] + 0.587 * data[i2 + 1] + 0.114 * data[i2 + 2];
+      sum += gray;
+      sumSq += gray * gray;
+    }
+    const mean = sum / pixelCount;
+    const variance = sumSq / pixelCount - mean * mean;
+    return Math.sqrt(variance);
+  }
+  function calculateBrightness(imageData) {
+    const { data } = imageData;
+    let sum = 0;
+    for (let i2 = 0; i2 < data.length; i2 += 4) {
+      sum += (data[i2] + data[i2 + 1] + data[i2 + 2]) / 3;
+    }
+    return sum / (data.length / 4);
+  }
+  function assessQuality(imageData) {
+    const sharpness = calculateSharpness(imageData);
+    const glare = detectGlare(imageData);
+    const contrast = calculateContrast(imageData);
+    const brightness = calculateBrightness(imageData);
+    const isBlurry = sharpness < 80;
+    const hasGlare = glare > 0.15;
+    const isTooDark = brightness < 50;
+    const isTooBright = brightness > 200;
+    const lowContrast = contrast < 30;
+    let score = 100;
+    if (isBlurry) score -= 40;
+    if (hasGlare) score -= 25;
+    if (isTooDark) score -= 20;
+    if (isTooBright) score -= 20;
+    if (lowContrast) score -= 15;
+    const metrics = {
+      sharpness: Math.round(sharpness * 10) / 10,
+      contrast: Math.round(contrast * 10) / 10,
+      brightness: Math.round(brightness * 10) / 10,
+      isBlurry,
+      hasGlare,
+      overallScore: Math.max(0, score)
+    };
+    const issues = [];
+    const recommendations = [];
+    if (isBlurry) {
+      issues.push("Too blurry");
+      recommendations.push("Hold camera steady");
+      recommendations.push("Ensure good lighting");
+    }
+    if (hasGlare) {
+      issues.push("Too much glare");
+      recommendations.push("Avoid direct light on document");
+      recommendations.push("Tilt document slightly");
+    }
+    if (isTooDark) {
+      issues.push("Too dark");
+      recommendations.push("Move to brighter area");
+      recommendations.push("Turn on more lights");
+    }
+    if (isTooBright) {
+      issues.push("Too bright");
+      recommendations.push("Reduce lighting");
+      recommendations.push("Move away from direct sun");
+    }
+    if (lowContrast) {
+      issues.push("Low contrast");
+      recommendations.push("Ensure even lighting");
+    }
+    const isValid = score >= 60;
+    const message = issues.length > 0 ? issues.join(", ") : "Good quality";
+    return {
+      isValid,
+      message,
+      recommendations: recommendations.slice(0, 3),
+      // Max 3 recommendations
+      quality: metrics
+    };
+  }
+
   // src/flow/icons.ts
   var PATHS = {
     shield: '<path d="M12 2l8 3v6c0 5-3.5 8.5-8 11-4.5-2.5-8-6-8-11V5l8-3z"/>',
@@ -6400,6 +6524,15 @@ var SmartComplySDK = (() => {
       sublabel.style.cssText = `color:${theme.textMuted};font-size:${TYPE.xs}px;text-align:center;line-height:1.6;`;
       sublabel.textContent = "All text must be readable and all four corners must be visible.";
       this.root.appendChild(sublabel);
+      const qualityNotice = document.createElement("div");
+      qualityNotice.style.cssText = `
+      display:none;width:100%;padding:10px 14px;border-radius:${RADIUS.md}px;
+      background:${theme.warning}15;border:1px solid ${theme.warning}35;
+      color:${theme.text};font-size:12px;text-align:left;line-height:1.5;
+    `;
+      qualityNotice.setAttribute("role", "status");
+      this.root.appendChild(qualityNotice);
+      this._checkPhotoQuality(imageData, qualityNotice, theme);
       const btnRow = document.createElement("div");
       btnRow.style.cssText = "display:flex;gap:12px;width:100%;";
       const retakeBtn = this.createButton("Retake", theme, false);
@@ -6425,6 +6558,54 @@ var SmartComplySDK = (() => {
       btnRow.appendChild(useBtn);
       this.root.appendChild(btnRow);
     }
+    /**
+     * Runs the shared client-side quality heuristic (blur/glare/contrast/
+     * brightness — see utils/ImageQuality.ts) against the just-captured photo
+     * and, if it scores poorly, shows a plain-language nudge on the preview
+     * screen. Fails silently on decode error — this is an advisory extra, not
+     * a required step, so a browser that can't run it must not block capture.
+     */
+    async _checkPhotoQuality(imageData, noticeEl, theme) {
+      try {
+        const canvas = await this._blobToCanvas(imageData, 640);
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+        const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const result = assessQuality(pixels);
+        if (noticeEl.isConnected && !result.isValid) {
+          noticeEl.style.display = "block";
+          noticeEl.textContent = "This photo might be hard to read — " + (result.recommendations[0] || "try retaking it in good lighting") + ".";
+        }
+      } catch {
+      }
+    }
+    /** Decodes to a canvas, optionally downscaled to maxDim on the long edge (never upscales). */
+    _blobToCanvas(source, maxDim) {
+      return new Promise((resolve, reject) => {
+        const url = URL.createObjectURL(source);
+        const imgEl = document.createElement("img");
+        imgEl.onload = () => {
+          URL.revokeObjectURL(url);
+          const { naturalWidth: w2, naturalHeight: h2 } = imgEl;
+          const ratio = maxDim ? computeScaleRatio(w2, h2, maxDim, maxDim) : 1;
+          const canvas = document.createElement("canvas");
+          canvas.width = Math.round(w2 * ratio);
+          canvas.height = Math.round(h2 * ratio);
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            reject(new Error("Canvas unavailable"));
+            return;
+          }
+          ctx.drawImage(imgEl, 0, 0, canvas.width, canvas.height);
+          resolve(canvas);
+        };
+        imgEl.onerror = () => {
+          URL.revokeObjectURL(url);
+          reject(new Error("Image load failed"));
+        };
+        imgEl.src = url;
+      });
+    }
     handleCaptureComplete(imageData, container, theme, documentType, viaCamera, skipped = false) {
       const requiresBack = this.shouldCaptureBackSide(documentType);
       const wasCapturingFront = this.currentSide === "front";
@@ -6501,6 +6682,8 @@ var SmartComplySDK = (() => {
       if (!this.root) return;
       this.root.innerHTML = "";
       this.root.style.cssText = "display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px 20px;min-height:300px;";
+      this.root.setAttribute("aria-live", "polite");
+      this.root.setAttribute("role", "status");
       this.root.appendChild(renderSpinner(theme, { size: 80, icon: icon("document", 28) }));
       const loadingText = document.createElement("div");
       loadingText.style.cssText = `color:${theme.text};font-size:${TYPE.heading}px;font-weight:600;text-align:center;`;
@@ -6510,15 +6693,19 @@ var SmartComplySDK = (() => {
     showError(message) {
       if (!this.root) return;
       const errorContainer = document.createElement("div");
+      errorContainer.setAttribute("role", "alert");
       errorContainer.style.cssText = `
       display:flex;align-items:center;gap:12px;padding:16px;
       background:#ff444415;border:1px solid #ff444430;border-radius:${RADIUS.md}px;
       color:#ff4444;font-size:14px;margin-top:16px;animation:shake 0.5s ease-in-out;
     `;
-      errorContainer.innerHTML = `
-      <span style="font-size:18px;">⚠️</span>
-      <span>${message}</span>
-    `;
+      const errIcon = document.createElement("span");
+      errIcon.style.fontSize = "18px";
+      errIcon.textContent = "⚠️";
+      const errText = document.createElement("span");
+      errText.textContent = message;
+      errorContainer.appendChild(errIcon);
+      errorContainer.appendChild(errText);
       if (!document.head.querySelector("style[data-shake-animation]")) {
         const style = document.createElement("style");
         style.setAttribute("data-shake-animation", "true");
@@ -6700,6 +6887,24 @@ var SmartComplySDK = (() => {
   };
 
   // src/flow/SmartComplyFlow.ts
+  var _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((p2) => msg.includes(p2));
+  }
+  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.";
+  }
   var COUNTRY_LABELS = {
     nigeria: "🇳🇬  Nigeria",
     global: "🌍  Other Countries",
@@ -6907,9 +7112,14 @@ var SmartComplySDK = (() => {
       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 = "";
@@ -6968,6 +7178,21 @@ var SmartComplySDK = (() => {
         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;
+      }
+      if (this._historyGuardActive) {
+        this._historyGuardActive = false;
+        try {
+          if (history.state?.scFlowGuard) history.back();
+        } catch {
+        }
+      }
       this.docCapture?.destroy();
       if (this._prewarmedStream) {
         this._prewarmedStream.getTracks().forEach((t2) => t2.stop());
@@ -7084,6 +7309,43 @@ var SmartComplySDK = (() => {
         }
       };
       document.addEventListener("keydown", this._keydownHandler);
+      const REBACKGROUND_RESTART_MS = 3e3;
+      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);
+      this._historyGuardActive = true;
+      try {
+        history.pushState({ scFlowGuard: true }, "");
+      } catch {
+        this._historyGuardActive = false;
+      }
+      this._popstateHandler = () => {
+        if (this.isDestroyed || !this._historyGuardActive) return;
+        const backAction = this._getBackAction(this.currentStep);
+        if (backAction) {
+          backAction();
+        } else {
+          this.close();
+          return;
+        }
+        try {
+          history.pushState({ scFlowGuard: true }, "");
+        } catch {
+        }
+      };
+      window.addEventListener("popstate", this._popstateHandler);
     }
     async initialize() {
       this.showStep("loading");
@@ -7324,10 +7586,10 @@ var SmartComplySDK = (() => {
       container.appendChild(btn);
       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 ──────────────────────────────────────────────
@@ -8270,6 +8532,7 @@ var SmartComplySDK = (() => {
         this._renderRetryLimitReached(container);
         return;
       }
+      const attemptId = ++this._livenessAttemptId;
       const title = this.createStepTitle("Face verification");
       container.appendChild(title);
       const desc = document.createElement("div");
@@ -8311,9 +8574,10 @@ var SmartComplySDK = (() => {
             warning: this.theme.warning
           }
         },
-        ["BLINK"],
+        [...DEFAULT_CHALLENGE_ACTIONS],
         this.livenessEntryId || void 0
       ).then((result) => {
+        if (attemptId !== this._livenessAttemptId) return;
         if (result.status === "failed") {
           this._livenessFailures++;
         }
@@ -8322,8 +8586,11 @@ var SmartComplySDK = (() => {
         }
         this.showStep("done");
       }).catch((err) => {
-        this._livenessFailures++;
-        this.showErrorStep(err.message || "Liveness verification failed. Please try again.");
+        if (attemptId !== this._livenessAttemptId) return;
+        if (!_isInfrastructureError(err)) {
+          this._livenessFailures++;
+        }
+        this.showErrorStep(_userFacingLivenessError(err));
       });
     }
     // ── Error ───────────────────────────────────────────────────────
@@ -8605,6 +8872,30 @@ var SmartComplySDK = (() => {
       const allFields = Object.values(channels).flat().flatMap((ch) => ch.fields || []);
       return allFields.some((f2) => isUploadFieldType(f2.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 || {});
@@ -8642,21 +8933,7 @@ var SmartComplySDK = (() => {
         if (dots[1]) dots[1].style.background = stage2Active ? this.theme.primary : this.theme.border;
       }
       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);