smartcomply-web-sdk 1.0.35 → 1.0.38

package/dist/smartcomply.browser.js

@@ -4925,7 +4925,10 @@ var SmartComplySDK = (() => {
         docVideo.play().catch(() => {
         });
         const cleanup = () => {
-          if (docRoot.parentElement) docRoot.parentElement.removeChild(docRoot);
+          try {
+            docRoot.remove();
+          } catch (_2) {
+          }
           this.docCaptureRoot = null;
         };
         const captureBtn = bottomPanel.querySelector("#sc-capture-doc-btn");
@@ -4968,12 +4971,14 @@ var SmartComplySDK = (() => {
     }
     unmount() {
       this.stopTimer();
-      if (this.docCaptureRoot?.parentElement) {
-        this.docCaptureRoot.parentElement.removeChild(this.docCaptureRoot);
-        this.docCaptureRoot = null;
+      try {
+        this.docCaptureRoot?.remove();
+      } catch (_2) {
       }
-      if (this.root?.parentElement) {
-        this.root.parentElement.removeChild(this.root);
+      this.docCaptureRoot = null;
+      try {
+        this.root?.remove();
+      } catch (_2) {
       }
       this.root = null;
       this.videoEl = null;
@@ -5361,6 +5366,8 @@ var SmartComplySDK = (() => {
      */
     async captureFrame(video, maxAttempts = 5) {
       const MIN_BLUR_SCORE = 120;
+      const MIN_BRIGHTNESS = 40;
+      const MAX_BRIGHTNESS = 220;
       const RETRY_DELAY_MS2 = 200;
       let bestBlob = null;
       let bestScore = -1;
@@ -5371,15 +5378,18 @@ var SmartComplySDK = (() => {
         const ctx = canvas.getContext("2d");
         if (!ctx) throw new Error("Failed to get canvas context");
         ctx.drawImage(video, 0, 0);
-        const score = this._computeBlurScore(canvas);
+        const blurScore = this._computeBlurScore(canvas);
+        const brightness = this._computeBrightness(canvas);
+        const brightnessOk = brightness >= MIN_BRIGHTNESS && brightness <= MAX_BRIGHTNESS;
+        const qualityScore = brightnessOk ? blurScore : 0;
         const blob = await new Promise(
           (res) => canvas.toBlob((b2) => res(b2), "image/jpeg", 0.92)
         );
-        if (blob && score > bestScore) {
+        if (blob && qualityScore > bestScore) {
           bestBlob = blob;
-          bestScore = score;
+          bestScore = qualityScore;
         }
-        if (score >= MIN_BLUR_SCORE) break;
+        if (blurScore >= MIN_BLUR_SCORE && brightnessOk) break;
         if (attempt < maxAttempts - 1) {
           await new Promise((r2) => setTimeout(r2, RETRY_DELAY_MS2));
         }
@@ -5387,6 +5397,26 @@ var SmartComplySDK = (() => {
       if (bestBlob) return bestBlob;
       throw new Error("Failed to capture frame");
     }
+    /**
+     * Compute average brightness (0–255) of the centre-cropped frame.
+     * Used to reject frames that are too dark or overexposed before sending
+     * to face comparison — server rejects IMAGE_TOO_DARK below ~40 luminance.
+     */
+    _computeBrightness(canvas) {
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return 128;
+      const sw = Math.min(canvas.width, 320);
+      const sh = Math.min(canvas.height, 240);
+      const sx = Math.floor((canvas.width - sw) / 2);
+      const sy = Math.floor((canvas.height - sh) / 2);
+      const { data } = ctx.getImageData(sx, sy, sw, sh);
+      let total = 0;
+      const pixels = sw * sh;
+      for (let i2 = 0; i2 < pixels; i2++) {
+        total += 0.299 * data[i2 * 4] + 0.587 * data[i2 * 4 + 1] + 0.114 * data[i2 * 4 + 2];
+      }
+      return total / pixels;
+    }
     /**
      * Sum-of-squared Laplacian blur metric on a centre-cropped region (320×240 max).
      * Higher score = sharper image.
@@ -5655,7 +5685,7 @@ var SmartComplySDK = (() => {
     }
     requiresBackSide(documentType) {
       const type = documentType.toLowerCase();
-      return type.includes("voter") || type.includes("nin") || type.includes("driver") || type.includes("license") || type.includes("national id") || type.includes("national id card") || type.includes("ghana");
+      return type.includes("voter") || type.includes("driver") || type.includes("license") || type.includes("national id") || type.includes("national id card") || type.includes("ghana");
     }
     shouldCaptureBackSide(documentType) {
       return this.requiresBackOverride !== void 0 ? this.requiresBackOverride : this.requiresBackSide(documentType);
@@ -6359,24 +6389,21 @@ var SmartComplySDK = (() => {
   };
   function resolveIdTypeInfo(typeName, isDocumentFlow) {
     const u2 = typeName.toUpperCase();
-    const withFace = u2.includes("WITH FACE") || u2.includes("FACE");
     const advanced = u2.includes("ADVANCED");
+    const cleanName = typeName.replace(/\s*with\s+face\s*/gi, " ").replace(/\s*\(NIN\)\s*/gi, " ").replace(/\s*\(BVN\)\s*/gi, " ").replace(/\s{2,}/g, " ").trim();
     const requiresBackSide = (type) => {
       const t2 = type.toLowerCase();
-      return t2.includes("voter") || t2.includes("nin") || t2.includes("driver") || t2.includes("license") || t2.includes("national id") || t2.includes("national id card");
+      return t2.includes("voter") || t2.includes("driver") || t2.includes("license") || t2.includes("national id") || t2.includes("national id card");
     };
     if (u2.includes("BVN") || u2.includes("BANK VERIFICATION")) {
-      const extra = withFace ? " + selfie photo" : "";
-      return { icon: "\u{1F3E6}", desc: `Enter your 11-digit BVN${extra}`, requiresBack: false };
+      return { icon: "\u{1F3E6}", desc: "Enter your 11-digit Bank Verification Number (BVN)", requiresBack: false };
     }
     if (u2.includes("NIN") || u2.includes("NATIONAL IDENTITY NUMBER")) {
-      const extra = withFace ? " + selfie photo" : "";
-      return { icon: "\u{1F194}", desc: `Enter your 11-digit NIN${extra}`, requiresBack: false };
+      return { icon: "\u{1F194}", desc: "Enter your 11-digit National Identification Number (NIN)", requiresBack: false };
     }
     if (u2.includes("GHANA")) {
       if (isDocumentFlow) return { icon: "\u{1FAAA}", desc: "Capture or upload your Ghana Card", requiresBack: true };
-      const extra = withFace ? " + selfie photo" : "";
-      return { icon: "\u{1FAAA}", desc: `Enter your Ghana Card number${extra}`, requiresBack: false };
+      return { icon: "\u{1FAAA}", desc: "Enter your Ghana Card number", requiresBack: false };
     }
     if (u2.includes("SSNIT"))
       return { icon: "\u{1F3DB}\uFE0F", desc: "Enter your SSNIT number", requiresBack: false };
@@ -6512,8 +6539,9 @@ var SmartComplySDK = (() => {
       if (this.overlay) {
         this.overlay.style.opacity = "0";
         setTimeout(() => {
-          if (this.overlay?.parentElement) {
-            this.overlay.parentElement.removeChild(this.overlay);
+          try {
+            this.overlay?.remove();
+          } catch (_2) {
           }
           this.overlay = null;
           this.modal = null;
@@ -6849,8 +6877,9 @@ var SmartComplySDK = (() => {
         if (requiresBack && isThisDocFlow) {
           subtitle2 += " \u26A0\uFE0F Both sides required";
         }
+        const displayName = typeName.replace(/\s*with\s+face\s*/gi, " ").replace(/\s*\(NIN\)\s*/gi, " ").replace(/\s*\(BVN\)\s*/gi, " ").replace(/\s{2,}/g, " ").trim();
         const card = this.createOptionCard(
-          `${info.icon}  ${typeName}`,
+          `${info.icon}  ${displayName}`,
           subtitle2,
           () => {
             const idTypeChanged = this.selectedIdType !== typeCode;
@@ -6884,7 +6913,8 @@ var SmartComplySDK = (() => {
       container.style.cssText += "display:flex;flex-direction:column;gap:16px;";
       const dataFields = this.selectedChannelFields.filter((f2) => f2.type !== "upload");
       const info = resolveIdTypeInfo(this.selectedIdTypeName || this.selectedIdType, false);
-      const title = this.createStepTitle(`${info.icon}  ${this.selectedIdTypeName || this.selectedIdType}`);
+      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();
+      const title = this.createStepTitle(`${info.icon}  ${cleanStepTitle}`);
       container.appendChild(title);
       const subtitle = document.createElement("div");
       subtitle.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin-top:-8px;`;
@@ -7070,7 +7100,9 @@ var SmartComplySDK = (() => {
     // ── Document Capture ────────────────────────────────────────────
     renderDocumentCapture(container) {
       container.style.cssText += "display:flex;flex-direction:column;gap:16px;";
-      const title = this.createStepTitle(`Capture ${this.selectedIdTypeName || this.selectedIdType || "your document"}`);
+      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}`);
       container.appendChild(title);
       const subtitle = document.createElement("div");
       subtitle.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin-top:-8px;`;
@@ -7103,69 +7135,65 @@ var SmartComplySDK = (() => {
     }
     // ── Processing ────────────────────────────────────────────────────
     renderProcessing(container) {
-      container.style.cssText += "display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px 16px;min-height:400px;";
+      container.style.cssText += "display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px;";
       const animationWrap = document.createElement("div");
-      animationWrap.style.cssText = "position:relative;width:80px;height:80px;";
+      animationWrap.style.cssText = "position:relative;width:52px;height:52px;flex-shrink:0;";
       const spinner = document.createElement("div");
       spinner.style.cssText = `
       position:absolute;inset:0;border-radius:50%;
-      border:4px solid ${this.theme.border};
+      border:3px solid ${this.theme.border};
       border-top-color:${this.theme.primary};
-      animation:sc-spin 1s linear infinite;
+      animation:sc-spin 0.9s linear infinite;
     `;
       animationWrap.appendChild(spinner);
       const centerIcon = document.createElement("div");
       centerIcon.style.cssText = `
       position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
-      font-size:28px;
+      font-size:20px;
     `;
       centerIcon.textContent = "\u{1F50D}";
       animationWrap.appendChild(centerIcon);
       container.appendChild(animationWrap);
       const title = document.createElement("div");
-      title.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:600;text-align:center;`;
-      title.textContent = "Processing Your Documents";
+      title.style.cssText = `color:${this.theme.text};font-size:15px;font-weight:700;text-align:center;`;
+      title.textContent = "Processing your document";
       container.appendChild(title);
       const subtitle = document.createElement("div");
-      subtitle.style.cssText = `color:${this.theme.textSecondary};font-size:13px;text-align:center;max-width:280px;line-height:1.5;`;
-      subtitle.textContent = "Scanning and verifying your identity documents. This may take a few moments.";
+      subtitle.style.cssText = `color:${this.theme.textSecondary};font-size:12px;text-align:center;max-width:260px;line-height:1.5;`;
+      subtitle.textContent = "Scanning and verifying your ID. This usually takes a few seconds.";
       container.appendChild(subtitle);
       const stepsContainer = document.createElement("div");
       stepsContainer.style.cssText = `
-      width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px;
-      margin-top:16px;
+      width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;
     `;
       const steps = [
-        { id: "uploading", text: "Uploading documents", icon: "\u{1F4E4}" },
-        { id: "scanning", text: "Scanning for information", icon: "\u{1F50D}" },
-        { id: "verifying", text: "Verifying authenticity", icon: "\u2713" },
-        { id: "analyzing", text: "Analyzing document quality", icon: "\u{1F52C}" }
+        { id: "uploading", text: "Uploading", icon: "\u{1F4E4}" },
+        { id: "scanning", text: "Scanning", icon: "\u{1F50D}" },
+        { id: "verifying", text: "Verifying", icon: "\u2713" },
+        { id: "analyzing", text: "Checking quality", icon: "\u{1F52C}" }
       ];
-      steps.forEach((step, index) => {
+      steps.forEach((step) => {
         const stepEl = document.createElement("div");
         stepEl.style.cssText = `
-        display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;
+        display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;
         background:${this.theme.cardBg};border:1px solid ${this.theme.border};
         transition:all 0.3s ease;
       `;
         stepEl.id = `processing-step-${step.id}`;
         const iconEl = document.createElement("div");
         iconEl.style.cssText = `
-        width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
-        font-size:14px;background:${this.theme.shimmer};border:1px solid ${this.theme.border};
+        width:26px;height:26px;border-radius:7px;flex-shrink:0;
+        display:flex;align-items:center;justify-content:center;
+        font-size:12px;background:${this.theme.shimmer};
       `;
         iconEl.textContent = step.icon;
         iconEl.id = `step-icon-${step.id}`;
         const textEl = document.createElement("div");
-        textEl.style.cssText = `flex:1;color:${this.theme.textSecondary};font-size:13px;font-weight:500;`;
+        textEl.style.cssText = `flex:1;color:${this.theme.textSecondary};font-size:11px;font-weight:500;`;
         textEl.textContent = step.text;
         textEl.id = `step-text-${step.id}`;
         const statusEl = document.createElement("div");
-        statusEl.style.cssText = `
-        width:20px;height:20px;border-radius:50%;
-        border:2px solid ${this.theme.border};
-        position:relative;
-      `;
+        statusEl.style.cssText = `width:16px;height:16px;border-radius:50%;border:2px solid ${this.theme.border};position:relative;flex-shrink:0;`;
         statusEl.id = `step-status-${step.id}`;
         stepEl.appendChild(iconEl);
         stepEl.appendChild(textEl);