smartcomply-web-sdk 1.0.39 → 1.0.41

package/dist/smartcomply.browser.js

@@ -5625,6 +5625,126 @@ var SmartComplySDK = (() => {
     return THEMES[name] || THEMES.default;
   }
 
+  // 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/DocumentCapture.ts
   var DocumentCapture = class {
     constructor() {
@@ -5970,17 +6090,54 @@ var SmartComplySDK = (() => {
       if (!ctx) return;
       ctx.drawImage(this.videoEl, 0, 0, canvas.width, canvas.height);
       canvas.toBlob(
-        (blob) => {
+        async (blob) => {
           if (blob) {
             this.stopCamera();
-            this.showPreview(container, theme, blob, documentType);
+            this.showLoadingState("Analyzing photo...", theme);
+            const quality = await this._assessImageQuality(canvas, ctx);
+            this.showPreview(container, theme, blob, documentType, quality);
           }
         },
         "image/jpeg",
         0.85
       );
     }
-    showPreview(container, theme, imageData, documentType) {
+    /**
+     * Runs the local sharpness/glare/contrast/brightness check against a
+     * captured frame. Returns null (never blocks) if quality can't be computed
+     * — e.g. a tainted canvas from a cross-origin file, or an unsupported browser.
+     */
+    async _assessImageQuality(canvas, ctx) {
+      try {
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        return assessQuality(imageData);
+      } catch {
+        return null;
+      }
+    }
+    /** Same as _assessImageQuality but starting from a Blob/File (upload path). */
+    async _assessBlobQuality(blob) {
+      try {
+        const url = URL.createObjectURL(blob);
+        const imgEl = document.createElement("img");
+        await new Promise((resolve, reject) => {
+          imgEl.onload = () => resolve();
+          imgEl.onerror = () => reject(new Error("Image load failed"));
+          imgEl.src = url;
+        });
+        const canvas = document.createElement("canvas");
+        canvas.width = imgEl.naturalWidth;
+        canvas.height = imgEl.naturalHeight;
+        const ctx = canvas.getContext("2d");
+        URL.revokeObjectURL(url);
+        if (!ctx) return null;
+        ctx.drawImage(imgEl, 0, 0);
+        return this._assessImageQuality(canvas, ctx);
+      } catch {
+        return null;
+      }
+    }
+    showPreview(container, theme, imageData, documentType, quality) {
       if (this.root) this.root.innerHTML = "";
       else {
         this.root = document.createElement("div");
@@ -6004,9 +6161,29 @@ var SmartComplySDK = (() => {
       sublabel.style.cssText = `color:${theme.textMuted};font-size:11px;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 qualityIsPoor = !!quality && !quality.isValid;
+      if (qualityIsPoor && quality) {
+        const warn = document.createElement("div");
+        warn.style.cssText = `
+        width:100%;box-sizing:border-box;padding:10px 14px;border-radius:10px;
+        background:#eab30815;border:1px solid #eab30840;
+        color:${theme.text};font-size:12px;line-height:1.5;
+      `;
+        const issueLine = document.createElement("div");
+        issueLine.style.cssText = "font-weight:700;color:#b8860b;";
+        issueLine.textContent = `\u26A0\uFE0F ${quality.message}`;
+        warn.appendChild(issueLine);
+        if (quality.recommendations.length > 0) {
+          const rec = document.createElement("div");
+          rec.style.cssText = "margin-top:4px;color:" + theme.textSecondary + ";";
+          rec.textContent = quality.recommendations.join(" \xB7 ");
+          warn.appendChild(rec);
+        }
+        this.root.appendChild(warn);
+      }
       const btnRow = document.createElement("div");
       btnRow.style.cssText = "display:flex;gap:12px;width:100%;";
-      const retakeBtn = this.createButton("Retake", theme, false);
+      const retakeBtn = this.createButton("Retake", theme, qualityIsPoor);
       retakeBtn.style.flex = "1";
       retakeBtn.addEventListener("click", () => {
         if (img._blobUrl) {
@@ -6015,7 +6192,7 @@ var SmartComplySDK = (() => {
         this.root.innerHTML = "";
         this.renderChoiceScreen(container, theme, documentType);
       });
-      const useBtn = this.createButton("Use Photo \u2713", theme, true);
+      const useBtn = this.createButton(qualityIsPoor ? "Use Anyway \u26A0" : "Use Photo \u2713", theme, !qualityIsPoor);
       useBtn.style.flex = "1";
       useBtn.addEventListener("click", () => {
         if (img._blobUrl) {
@@ -6053,8 +6230,9 @@ var SmartComplySDK = (() => {
       };
       this.resolveCapture?.(result);
     }
-    handleFileUploadComplete(imageData, container, theme, documentType) {
-      this.showPreview(container, theme, imageData, documentType);
+    async handleFileUploadComplete(imageData, container, theme, documentType) {
+      const quality = await this._assessBlobQuality(imageData);
+      this.showPreview(container, theme, imageData, documentType, quality);
     }
     validateFile(file) {
       const allowedTypes = ["image/jpeg", "image/jpg", "image/png"];
@@ -6569,7 +6747,7 @@ var SmartComplySDK = (() => {
       this.modal = document.createElement("div");
       this.modal.id = "sc-flow-modal";
       this.modal.style.cssText = `
-      width:100%;max-width:580px;max-height:92vh;
+      width:100%;max-width:580px;max-height:95vh;
       background:${this.theme.bg};
       border-radius:20px;overflow:hidden;
       box-shadow:${this.theme.shadow};
@@ -6591,7 +6769,7 @@ var SmartComplySDK = (() => {
       this.contentArea = document.createElement("div");
       this.contentArea.id = "sc-flow-content";
       this.contentArea.style.cssText = `
-      flex:1;overflow-y:auto;padding:20px 24px;
+      flex:1;overflow-y:auto;padding:16px 20px;
       -webkit-overflow-scrolling:touch;
     `;
       this.modal.appendChild(this.contentArea);
@@ -6724,15 +6902,15 @@ var SmartComplySDK = (() => {
     }
     // ── Welcome ────────────────────────────────────────────────────
     renderWelcome(container) {
-      container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;";
+      container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;";
       const isDocFlow = this.isDocumentFlow();
       const topRow = document.createElement("div");
-      topRow.style.cssText = "display:flex;flex-direction:column;align-items:center;gap:10px;";
+      topRow.style.cssText = "display:flex;flex-direction:column;align-items:center;gap:8px;";
       const iconWrap = document.createElement("div");
       iconWrap.style.cssText = `
-      width:58px;height:58px;border-radius:16px;
+      width:50px;height:50px;border-radius:14px;
       display:flex;align-items:center;justify-content:center;
-      font-size:26px;
+      font-size:22px;
       background:linear-gradient(135deg,${this.theme.primary}22,${this.theme.primaryGlow});
       border:1.5px solid ${this.theme.primary}33;
     `;
@@ -6786,7 +6964,7 @@ var SmartComplySDK = (() => {
         const row = document.createElement("div");
         row.style.cssText = `
         display:flex;align-items:center;gap:12px;
-        padding:9px 14px;
+        padding:8px 14px;
         background:${this.theme.cardBg};
         ${i2 < steps.length - 1 ? `border-bottom:1px solid ${this.theme.border};` : ""}
       `;
@@ -6823,12 +7001,12 @@ var SmartComplySDK = (() => {
       display:flex;align-items:center;gap:6px;
       color:${this.theme.textMuted};font-size:10.5px;
     `;
-      trust.textContent = "\u{1F512}  End-to-end encrypted \xB7 Powered by Adhere";
+      trust.textContent = "\u{1F512}  End-to-end encrypted";
       container.appendChild(trust);
     }
     // ── Country Select ──────────────────────────────────────────────
     renderCountrySelect(container) {
-      container.style.cssText += "display:flex;flex-direction:column;gap:16px;";
+      container.style.cssText += "display:flex;flex-direction:column;gap:14px;";
       const channels = this.sdkConfig?.channels || {};
       const countries = Object.keys(channels);
       if (countries.length === 1) {
@@ -6856,7 +7034,7 @@ var SmartComplySDK = (() => {
     }
     // ── ID Type Select ──────────────────────────────────────────────
     renderIdTypeSelect(container) {
-      container.style.cssText += "display:flex;flex-direction:column;gap:16px;";
+      container.style.cssText += "display:flex;flex-direction:column;gap:14px;";
       const globalDocFlow = this.isDocumentFlow();
       const title = this.createStepTitle(globalDocFlow ? "Select document type" : "Select ID type");
       container.appendChild(title);
@@ -6911,7 +7089,7 @@ var SmartComplySDK = (() => {
     }
     // ── ID Input (data verification — dynamic fields) ─────────────
     renderIdInput(container) {
-      container.style.cssText += "display:flex;flex-direction:column;gap:16px;";
+      container.style.cssText += "display:flex;flex-direction:column;gap:14px;";
       const dataFields = this.selectedChannelFields.filter((f2) => f2.type !== "upload");
       const info = resolveIdTypeInfo(this.selectedIdTypeName || this.selectedIdType, false);
       const cleanStepTitle = (this.selectedIdTypeName || this.selectedIdType).replace(/\s*with\s+face\s*/gi, " ").replace(/\s*\(NIN\)\s*/gi, " ").replace(/\s*\(BVN\)\s*/gi, " ").replace(/\s{2,}/g, " ").trim();
@@ -6937,7 +7115,7 @@ var SmartComplySDK = (() => {
       }
       const inputEls = [];
       for (const field of dataFields) {
-        const fieldKey = field.label.toLowerCase().replace(/[^a-z0-9]+/g, "_");
+        const fieldKey = field.label;
         const fieldWrap = document.createElement("div");
         fieldWrap.style.cssText = "display:flex;flex-direction:column;gap:6px;";
         const label = document.createElement("label");
@@ -7066,7 +7244,7 @@ var SmartComplySDK = (() => {
             identity_type_id: this.selectedChannelId,
             fields: { ...this.collectedFields }
           });
-          if (this.verificationResult.status === "verified" || this.verificationResult.status === "success") {
+          if (this.verificationResult.status === "success") {
             const fieldValues = Object.values(this.collectedFields);
             this.idNumber = fieldValues[0] || "";
             this.identityCheckId = this.verificationResult.data?.identity_check_id || null;
@@ -7100,7 +7278,7 @@ var SmartComplySDK = (() => {
     }
     // ── Document Capture ────────────────────────────────────────────
     renderDocumentCapture(container) {
-      container.style.cssText += "display:flex;flex-direction:column;gap:16px;";
+      container.style.cssText += "display:flex;flex-direction:column;gap:14px;";
       const rawName = this.selectedIdTypeName || this.selectedIdType || "your document";
       const cleanDocTitle = rawName.replace(/\s*with\s+face\s*/gi, " ").replace(/\s*\(NIN\)\s*/gi, " ").replace(/\s*\(BVN\)\s*/gi, " ").replace(/\s{2,}/g, " ").trim();
       const title = this.createStepTitle(`Capture ${cleanDocTitle}`);
@@ -7399,7 +7577,7 @@ var SmartComplySDK = (() => {
     }
     // ── Liveness ────────────────────────────────────────────────────
     renderLiveness(container) {
-      container.style.cssText += "display:flex;flex-direction:column;gap:16px;";
+      container.style.cssText += "display:flex;flex-direction:column;gap:14px;";
       const title = this.createStepTitle("Face verification");
       container.appendChild(title);
       const desc = document.createElement("div");
@@ -7679,7 +7857,7 @@ var SmartComplySDK = (() => {
       const header = document.createElement("div");
       header.style.cssText = `
       display:flex;align-items:center;justify-content:space-between;
-      padding:14px 20px;border-bottom:1px solid ${this.theme.border};
+      padding:11px 20px;border-bottom:1px solid ${this.theme.border};
     `;
       const leftArea = document.createElement("div");
       leftArea.style.cssText = "display:flex;align-items:center;gap:8px;min-width:0;";
@@ -7742,7 +7920,7 @@ var SmartComplySDK = (() => {
     createFooter() {
       const footer = document.createElement("div");
       footer.style.cssText = `
-      padding:12px 20px;border-top:1px solid ${this.theme.border};
+      padding:9px 20px;border-top:1px solid ${this.theme.border};
       display:flex;align-items:center;justify-content:center;gap:6px;
     `;
       const powered = document.createElement("span");
@@ -7767,7 +7945,7 @@ var SmartComplySDK = (() => {
     createOptionCard(title, subtitle, onClick) {
       const card = document.createElement("button");
       card.style.cssText = `
-      width:100%;padding:16px;border-radius:12px;
+      width:100%;padding:13px 16px;border-radius:12px;
       background:${this.theme.cardBg};
       border:2px solid ${this.theme.border};
       cursor:pointer;text-align:left;