smartcomply-web-sdk 1.0.64 → 1.0.66

package/dist/smartcomply.browser.js

@@ -5372,7 +5372,7 @@ var SmartComplySDK = (() => {
         tempVideo.muted = true;
         tempVideo.playsInline = true;
         await tempVideo.play();
-        ui2.mount(container, { time_limit_seconds: 0, instruction: "Centre your face in the oval" });
+        ui2.mount(container, { time_limit_seconds: 0, instruction: "Fit your face inside the oval outline" });
         const uiVideo = ui2.getVideoElement();
         if (uiVideo) {
           uiVideo.srcObject = stream;
@@ -5382,7 +5382,7 @@ var SmartComplySDK = (() => {
           container.appendChild(tempVideo);
         }
         await faceEngine.init();
-        ui2.updateInstruction("Centre your face in the oval");
+        ui2.updateInstruction("Fit your face inside the oval outline");
         const videoForDetection = uiVideo || tempVideo;
         await new Promise((resolve) => {
           let stableFrames = 0;
@@ -5402,7 +5402,7 @@ var SmartComplySDK = (() => {
               if (detection.faceDetected) {
                 stableFrames++;
                 missedFrames = 0;
-                ui2.updateInstruction("Centre your face in the oval");
+                ui2.updateInstruction("Good — hold that position");
                 if (stableFrames >= STABLE_REQUIRED) {
                   resolve();
                   return;
@@ -5411,7 +5411,7 @@ var SmartComplySDK = (() => {
                 missedFrames++;
                 if (missedFrames > MISS_TOLERANCE) {
                   stableFrames = 0;
-                  ui2.updateInstruction("Move your face into the oval");
+                  ui2.updateInstruction("Move closer so your whole face fits in the oval");
                 }
               }
             }
@@ -5419,7 +5419,7 @@ var SmartComplySDK = (() => {
           };
           requestAnimationFrame(checkFace);
         });
-        ui2.updateInstruction("Hold still...");
+        ui2.updateInstruction("Getting ready…");
         await new Promise((r2) => setTimeout(r2, 500));
         const challengeActions = actions || [...DEFAULT_CHALLENGE_ACTIONS];
         let entry;
@@ -5448,10 +5448,10 @@ var SmartComplySDK = (() => {
         tempVideo.remove();
         const uiChallenge = {
           time_limit_seconds: LIVENESS_TIME_LIMIT_SECONDS,
-          instruction: "Blink and look around naturally"
+          instruction: "Blink naturally and look slowly left, right, up or down"
         };
         ui2.unmount();
-        const videoEl = ui2.mount(container, uiChallenge);
+        const videoEl = ui2.mount(container, { ...uiChallenge, instruction: "Starting scan…" });
         videoEl.srcObject = stream;
         await videoEl.play();
         await new Promise((r2) => setTimeout(r2, 1e3));
@@ -5476,7 +5476,7 @@ var SmartComplySDK = (() => {
                 ui2.updateScanProgress(scan.livenessConfirmed);
                 ui2.setFaceTracking(detection.faceDetected);
                 if (!detection.faceDetected) {
-                  ui2.updateInstruction("Move your face into the oval");
+                  ui2.updateInstruction("Move closer so your whole face fits in the oval");
                 } else {
                   ui2.updateInstruction(uiChallenge.instruction);
                 }
@@ -5845,129 +5845,12 @@ var SmartComplySDK = (() => {
     return `#${(r2 << 16 | g2 << 8 | b2).toString(16).padStart(6, "0")}`;
   }
 
-  // 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/utils/documentRules.ts
   function requiresBackSide(documentType) {
     const type = documentType.toLowerCase();
+    if (type.includes("nin")) {
+      return "optional";
+    }
     return type.includes("voter") || type.includes("driver") || type.includes("license") || type.includes("national id") || type.includes("national id card") || type.includes("ghana");
   }
   function computeScaleRatio(srcWidth, srcHeight, maxWidth, maxHeight) {
@@ -6110,9 +5993,17 @@ var SmartComplySDK = (() => {
       this.backBlob = null;
       this.currentSide = "front";
     }
-    shouldCaptureBackSide(documentType) {
+    getBackSideMode(documentType) {
       return this.requiresBackOverride !== void 0 ? this.requiresBackOverride : requiresBackSide(documentType);
     }
+    /** Whether a back-side step should be shown at all (required OR optional). */
+    shouldCaptureBackSide(documentType) {
+      return this.getBackSideMode(documentType) !== false;
+    }
+    /** Whether the back-side step, once shown, can be skipped by the user. */
+    isBackSideOptional(documentType) {
+      return this.getBackSideMode(documentType) === "optional";
+    }
     renderChoiceScreen(container, theme, documentType) {
       this.root = document.createElement("div");
       this.root.style.cssText = `
@@ -6121,6 +6012,7 @@ var SmartComplySDK = (() => {
     `;
       const docLabel = this.getDocumentLabel(documentType);
       const requiresBack = this.shouldCaptureBackSide(documentType);
+      const backOptional = this.isBackSideOptional(documentType);
       const isCapturingFront = this.currentSide === "front";
       const sideLabel = requiresBack ? isCapturingFront ? " — Front side" : " — Back side" : "";
       const headerRow = document.createElement("div");
@@ -6143,7 +6035,7 @@ var SmartComplySDK = (() => {
       titleEl.textContent = `Capture your ${docLabel}`;
       const subEl = document.createElement("div");
       subEl.style.cssText = `color:${theme.textSecondary};font-size:12px;margin-top:2px;`;
-      subEl.textContent = requiresBack ? isCapturingFront ? "Step 1 of 2 — front side" : "Step 2 of 2 — back side" : "Choose how to provide your document";
+      subEl.textContent = requiresBack ? isCapturingFront ? "Step 1 of 2 — front side" : backOptional ? "Step 2 of 2 — back side (optional)" : "Step 2 of 2 — back side" : "Choose how to provide your document";
       titleBlock.appendChild(titleEl);
       titleBlock.appendChild(subEl);
       headerRow.appendChild(iconBox);
@@ -6234,9 +6126,23 @@ var SmartComplySDK = (() => {
         display:flex;align-items:center;gap:8px;
         font-size:12px;color:${theme.textSecondary};line-height:1.5;
       `;
-        notice.innerHTML = `<span style="font-size:16px;flex-shrink:0;">ℹ️</span><span>You'll capture both the <strong style="color:${theme.text}">front</strong> and <strong style="color:${theme.text}">back</strong> of this document.</span>`;
+        notice.innerHTML = backOptional ? `<span style="font-size:16px;flex-shrink:0;">ℹ️</span><span>After the <strong style="color:${theme.text}">front</strong>, you can optionally add the <strong style="color:${theme.text}">back</strong> if your card has one.</span>` : `<span style="font-size:16px;flex-shrink:0;">ℹ️</span><span>You'll capture both the <strong style="color:${theme.text}">front</strong> and <strong style="color:${theme.text}">back</strong> of this document.</span>`;
         this.root.appendChild(notice);
       }
+      if (requiresBack && !isCapturingFront && backOptional) {
+        const skipBtn = document.createElement("button");
+        skipBtn.style.cssText = `
+        display:block;margin:0 20px 16px;width:calc(100% - 40px);
+        padding:10px 12px;background:transparent;color:${theme.textSecondary};
+        border:1.5px dashed ${theme.border};border-radius:10px;cursor:pointer;
+        font-size:12.5px;font-weight:600;font-family:inherit;
+      `;
+        skipBtn.textContent = "Skip — this card has no back side";
+        skipBtn.addEventListener("click", () => {
+          this.handleCaptureComplete(null, container, theme, documentType, false, true);
+        });
+        this.root.appendChild(skipBtn);
+      }
       const fileInput = document.createElement("input");
       fileInput.type = "file";
       fileInput.accept = "image/jpeg,image/png";
@@ -6250,8 +6156,7 @@ var SmartComplySDK = (() => {
             this.showError(err);
             return;
           }
-          this.showLoadingState("Processing image...", theme);
-          this.compressImage(file, 2e3, 1500, 0.92).then((c2) => this.handleFileUploadComplete(c2, container, theme, documentType)).catch(() => this.handleFileUploadComplete(file, container, theme, documentType));
+          this.ensureUnderUploadLimit(file).then((c2) => this.handleFileUploadComplete(c2, container, theme, documentType));
         }
       });
       this.root.appendChild(fileInput);
@@ -6452,54 +6357,17 @@ var SmartComplySDK = (() => {
       if (!ctx) return;
       ctx.drawImage(this.videoEl, 0, 0, canvas.width, canvas.height);
       canvas.toBlob(
-        async (blob) => {
+        (blob) => {
           if (blob) {
             this.stopCamera();
-            this.showLoadingState("Analyzing photo...", theme);
-            const quality = await this._assessImageQuality(canvas, ctx);
-            this.showPreview(container, theme, blob, documentType, quality, true);
+            this.showPreview(container, theme, blob, documentType, true);
           }
         },
         "image/jpeg",
         0.92
       );
     }
-    /**
-     * 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, viaCamera) {
+    showPreview(container, theme, imageData, documentType, viaCamera) {
       if (this.root) this.root.innerHTML = "";
       else {
         this.root = document.createElement("div");
@@ -6532,29 +6400,9 @@ 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 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 = `⚠️ ${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(" · ");
-          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, qualityIsPoor);
+      const retakeBtn = this.createButton("Retake", theme, false);
       retakeBtn.style.flex = "1";
       retakeBtn.addEventListener("click", () => {
         if (img._blobUrl) {
@@ -6563,40 +6411,27 @@ var SmartComplySDK = (() => {
         this.root.innerHTML = "";
         this.renderChoiceScreen(container, theme, documentType);
       });
-      const proceedWithPhoto = () => {
+      const useBtn = this.createButton("Use Photo ✓", theme, true);
+      useBtn.style.flex = "1";
+      useBtn.addEventListener("click", () => {
         if (img._blobUrl) {
           URL.revokeObjectURL(img._blobUrl);
         }
         useBtn.textContent = "Processing...";
         useBtn.disabled = true;
-        this.compressImage(imageData, 2e3, 1500, 0.92).then((compressed) => this.handleCaptureComplete(compressed, container, theme, documentType, viaCamera)).catch(() => this.handleCaptureComplete(imageData, container, theme, documentType, viaCamera));
-      };
-      const useBtn = this.createButton(qualityIsPoor ? "Use Anyway ⚠" : "Use Photo ✓", theme, !qualityIsPoor);
-      useBtn.style.flex = "1";
-      if (qualityIsPoor) {
-        let confirming = false;
-        useBtn.addEventListener("click", () => {
-          if (!confirming) {
-            confirming = true;
-            useBtn.textContent = "Tap again to confirm ⚠";
-            return;
-          }
-          proceedWithPhoto();
-        });
-      } else {
-        useBtn.addEventListener("click", proceedWithPhoto);
-      }
+        this.ensureUnderUploadLimit(imageData).then((c2) => this.handleCaptureComplete(c2, container, theme, documentType, viaCamera));
+      });
       btnRow.appendChild(retakeBtn);
       btnRow.appendChild(useBtn);
       this.root.appendChild(btnRow);
     }
-    handleCaptureComplete(imageData, container, theme, documentType, viaCamera) {
+    handleCaptureComplete(imageData, container, theme, documentType, viaCamera, skipped = false) {
       const requiresBack = this.shouldCaptureBackSide(documentType);
       const wasCapturingFront = this.currentSide === "front";
       if (wasCapturingFront) {
         this.frontBlob = imageData;
         this.frontViaCamera = viaCamera;
-      } else {
+      } else if (!skipped) {
         this.backBlob = imageData;
       }
       if (requiresBack && wasCapturingFront) {
@@ -6616,24 +6451,39 @@ var SmartComplySDK = (() => {
       };
       this.resolveCapture?.(result);
     }
-    async handleFileUploadComplete(imageData, container, theme, documentType) {
-      const quality = await this._assessBlobQuality(imageData);
-      this.showPreview(container, theme, imageData, documentType, quality, false);
+    handleFileUploadComplete(imageData, container, theme, documentType) {
+      this.showPreview(container, theme, imageData, documentType, false);
     }
     validateFile(file) {
       const allowedTypes = ["image/jpeg", "image/jpg", "image/png"];
       if (!allowedTypes.includes(file.type)) {
         return "Invalid file type. Please upload a JPEG or PNG image.";
       }
-      const maxSize = 10 * 1024 * 1024;
-      if (file.size > maxSize) {
-        return "File is too large. Please upload an image smaller than 10MB.";
+      if (file.size > MAX_DOCUMENT_BYTES) {
+        return `File is too large. Please upload an image smaller than ${Math.round(MAX_DOCUMENT_BYTES / (1024 * 1024))}MB.`;
       }
       if (file.size < 1024) {
         return "File is too small. Please upload a valid image file.";
       }
       return null;
     }
+    /**
+     * Only shrinks/re-encodes when the file exceeds the backend's real upload
+     * ceiling — otherwise returns the original bytes completely untouched.
+     * Document photos become the face-comparison reference image later
+     * (see backend _crop_and_save_face), so any avoidable re-encode is a
+     * quality loss with no upside; compression here exists solely to keep
+     * oversized captures under MAX_DOCUMENT_BYTES, not to "optimize" images
+     * that already fit.
+     */
+    async ensureUnderUploadLimit(source) {
+      if (source.size <= MAX_DOCUMENT_BYTES) return source;
+      try {
+        return await this.compressImage(source, DOC_CAMERA_IDEAL_WIDTH, DOC_CAMERA_IDEAL_HEIGHT, 0.92);
+      } catch {
+        return source;
+      }
+    }
     handleFileUpload(container, theme) {
       const input = this.root?.querySelector("#sc-doc-file-input");
       if (input) input.click();
@@ -6870,7 +6720,11 @@ var SmartComplySDK = (() => {
       return { icon: "🏦", desc: "Enter your 11-digit Bank Verification Number (BVN)", requiresBack: false };
     }
     if (u2.includes("NIN") || u2.includes("NATIONAL IDENTITY NUMBER")) {
-      return { icon: "🆔", desc: "Enter your 11-digit National Identification Number (NIN)", requiresBack: false };
+      return {
+        icon: "🆔",
+        desc: isDocumentFlow ? "Capture or upload your NIN card (back optional)" : "Enter your 11-digit National Identification Number (NIN)",
+        requiresBack: isDocumentFlow ? "optional" : false
+      };
     }
     if (u2.includes("GHANA")) {
       if (isDocumentFlow) return { icon: "🪪", desc: "Capture or upload your Ghana Card", requiresBack: requiresBackSide(typeName) };
@@ -7525,7 +7379,7 @@ var SmartComplySDK = (() => {
         const requiresBackFromBackend = typeof idType !== "string" ? idType.requires_back_side : void 0;
         const requiresBack = requiresBackFromBackend ?? info.requiresBack;
         let subtitle2 = info.desc;
-        if (requiresBack && isThisDocFlow) {
+        if (requiresBack === true && isThisDocFlow) {
           subtitle2 += " ⚠️ 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();
@@ -8390,7 +8244,7 @@ var SmartComplySDK = (() => {
       container.appendChild(title);
       const desc = document.createElement("div");
       desc.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin-top:-8px;line-height:1.5;`;
-      desc.textContent = "Position your face in the oval and follow the on-screen instructions.";
+      desc.textContent = "Fit your face inside the oval, then blink naturally while looking around for a few seconds.";
       container.appendChild(desc);
       const livenessContainer = document.createElement("div");
       livenessContainer.style.cssText = "margin:8px 0;width:100%;";