smartcomply-web-sdk 1.0.52 → 1.0.56

package/dist/smartcomply.browser.js

@@ -4521,6 +4521,20 @@ var SmartComplySDK = (() => {
       0%,100% { opacity:0.3; transform:scale(0.85); }
       50%     { opacity:1;   transform:scale(1); }
     }
+    @keyframes sc-scanline-sweep {
+      0%   { transform:translateY(-4%); opacity:0; }
+      8%   { opacity:0.9; }
+      92%  { opacity:0.9; }
+      100% { transform:translateY(104%); opacity:0; }
+    }
+    @keyframes sc-corner-pulse {
+      0%,100% { opacity:0.55; }
+      50%     { opacity:1; }
+    }
+    @keyframes sc-oval-breathe {
+      0%,100% { opacity:0.5; }
+      50%     { opacity:0.85; }
+    }
   `;
     document.head.appendChild(s2);
   }
@@ -4530,11 +4544,15 @@ var SmartComplySDK = (() => {
       this.videoEl = null;
       this.instructionEl = null;
       this.confidenceRingEl = null;
+      this.bgOvalEl = null;
+      this.guideWrapEl = null;
+      this.scanlineEl = null;
       this.overlayEl = null;
       this.dotsEl = null;
       this.docCaptureRoot = null;
       this.scanStartMs = 0;
       this.scanDurationMs = 0;
+      this.faceTracked = false;
     }
     mount(container, challenge) {
       injectLivenessKeyframes();
@@ -4552,41 +4570,110 @@ var SmartComplySDK = (() => {
       this.videoEl.muted = true;
       this.videoEl.style.cssText = `
       width:100%;height:100%;display:block;
+      filter:brightness(1.03) contrast(1.03);
       transform:scaleX(-1);object-fit:cover;
+    `;
+      const vignette = document.createElement("div");
+      vignette.style.cssText = `
+      position:absolute;inset:0;pointer-events:none;
+      background:radial-gradient(ellipse 34% 44% at 50% 47%, transparent 55%, rgba(0,0,0,0.55) 100%);
     `;
       const guideWrap = document.createElement("div");
       guideWrap.style.cssText = `
       position:absolute;top:50%;left:50%;
       transform:translate(-50%,-52%);
       width:64%;aspect-ratio:140/180;pointer-events:none;
+      filter:drop-shadow(0 0 18px rgba(59,130,246,0.35));
+      transition:filter 0.3s ease;
     `;
+      this.guideWrapEl = guideWrap;
       const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
       svg.setAttribute("viewBox", "0 0 140 180");
-      svg.style.cssText = "width:100%;height:100%;";
+      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");
+      clip.setAttribute("id", "sc-oval-clip");
+      const clipOval = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
+      clipOval.setAttribute("cx", "70");
+      clipOval.setAttribute("cy", "90");
+      clipOval.setAttribute("rx", "64");
+      clipOval.setAttribute("ry", "86");
+      clip.appendChild(clipOval);
+      defs.appendChild(clip);
+      svg.appendChild(defs);
+      const trackOval = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
+      trackOval.setAttribute("cx", "70");
+      trackOval.setAttribute("cy", "90");
+      trackOval.setAttribute("rx", "58");
+      trackOval.setAttribute("ry", "80");
+      trackOval.setAttribute("fill", "none");
+      trackOval.setAttribute("stroke", "rgba(255,255,255,0.16)");
+      trackOval.setAttribute("stroke-width", "1");
+      trackOval.setAttribute("stroke-dasharray", "2 5");
+      svg.appendChild(trackOval);
       const bgOval = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
       bgOval.setAttribute("cx", "70");
       bgOval.setAttribute("cy", "90");
       bgOval.setAttribute("rx", "64");
       bgOval.setAttribute("ry", "86");
       bgOval.setAttribute("fill", "none");
-      bgOval.setAttribute("stroke", "rgba(255,255,255,0.35)");
-      bgOval.setAttribute("stroke-width", "2");
+      bgOval.setAttribute("stroke", "rgba(255,255,255,0.4)");
+      bgOval.setAttribute("stroke-width", "1.5");
+      bgOval.style.cssText = "animation:sc-oval-breathe 2.4s ease-in-out infinite;transition:stroke 0.3s ease;";
+      this.bgOvalEl = bgOval;
       const confOval = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
       confOval.setAttribute("cx", "70");
       confOval.setAttribute("cy", "90");
       confOval.setAttribute("rx", "64");
       confOval.setAttribute("ry", "86");
       confOval.setAttribute("fill", "none");
-      confOval.setAttribute("stroke", "#22c55e");
-      confOval.setAttribute("stroke-width", "3");
+      confOval.setAttribute("stroke", "#3b82f6");
+      confOval.setAttribute("stroke-width", "2.5");
+      confOval.setAttribute("stroke-linecap", "round");
       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;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;";
       this.confidenceRingEl = confOval;
+      const bracketGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      bracketGroup.setAttribute("stroke", "#3b82f6");
+      bracketGroup.setAttribute("stroke-width", "3");
+      bracketGroup.setAttribute("stroke-linecap", "round");
+      bracketGroup.setAttribute("fill", "none");
+      bracketGroup.style.cssText = "animation:sc-corner-pulse 2s ease-in-out infinite;";
+      const bracketLen = 14;
+      const bx0 = 70 - 64 * 0.74, bx1 = 70 + 64 * 0.74;
+      const by0 = 90 - 86 * 0.82, by1 = 90 + 86 * 0.82;
+      const brackets = [
+        `M${bx0},${by0 + bracketLen} L${bx0},${by0} L${bx0 + bracketLen},${by0}`,
+        `M${bx1 - bracketLen},${by0} L${bx1},${by0} L${bx1},${by0 + bracketLen}`,
+        `M${bx0},${by1 - bracketLen} L${bx0},${by1} L${bx0 + bracketLen},${by1}`,
+        `M${bx1 - bracketLen},${by1} L${bx1},${by1} L${bx1},${by1 - bracketLen}`
+      ];
+      for (const d2 of brackets) {
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", d2);
+        bracketGroup.appendChild(path);
+      }
       svg.appendChild(bgOval);
       svg.appendChild(confOval);
+      svg.appendChild(bracketGroup);
       guideWrap.appendChild(svg);
+      const scanlineClipWrap = document.createElement("div");
+      scanlineClipWrap.style.cssText = `
+      position:absolute;inset:0;
+      clip-path:ellipse(45.7% 47.8% at 50% 50%);
+      overflow:hidden;
+    `;
+      const scanline = document.createElement("div");
+      scanline.style.cssText = `
+      position:absolute;left:0;right:0;height:26%;top:0;
+      background:linear-gradient(180deg,transparent 0%,rgba(59,130,246,0.32) 45%,rgba(147,197,253,0.55) 50%,rgba(59,130,246,0.32) 55%,transparent 100%);
+      animation:sc-scanline-sweep 2.6s ease-in-out infinite;
+    `;
+      this.scanlineEl = scanline;
+      scanlineClipWrap.appendChild(scanline);
+      guideWrap.appendChild(scanlineClipWrap);
       const camTop = document.createElement("div");
       camTop.style.cssText = `
       position:absolute;top:0;left:0;right:0;
@@ -4610,13 +4697,14 @@ var SmartComplySDK = (() => {
       for (let i2 = 0; i2 < 3; i2++) {
         const dot = document.createElement("div");
         dot.style.cssText = `
-        width:6px;height:6px;border-radius:50%;background:#22c55e;
+        width:6px;height:6px;border-radius:50%;background:#3b82f6;
         animation:sc-scan-dot 1.1s ease-in-out ${i2 * 0.18}s infinite;
       `;
         this.dotsEl.appendChild(dot);
       }
       camBottom.appendChild(this.dotsEl);
       this.root.appendChild(this.videoEl);
+      this.root.appendChild(vignette);
       this.root.appendChild(guideWrap);
       this.root.appendChild(camTop);
       this.root.appendChild(camBottom);
@@ -4650,6 +4738,25 @@ var SmartComplySDK = (() => {
       this.confidenceRingEl.setAttribute("stroke-dashoffset", `${circ * (1 - pct)}`);
       this.confidenceRingEl.setAttribute("stroke", livenessConfirmed ? "#22c55e" : "#3b82f6");
     }
+    /**
+     * Reflects whether a face is currently detected in-frame — brightens the
+     * oval guide's glow/brackets when locked on, and dims the scan-line sweep
+     * so the UI visibly distinguishes "searching" from "actively scanning".
+     */
+    setFaceTracking(tracked) {
+      if (this.faceTracked === tracked) return;
+      this.faceTracked = tracked;
+      if (this.guideWrapEl) {
+        this.guideWrapEl.style.filter = tracked ? "drop-shadow(0 0 22px rgba(34,197,94,0.45))" : "drop-shadow(0 0 18px rgba(59,130,246,0.35))";
+      }
+      if (this.bgOvalEl) {
+        this.bgOvalEl.setAttribute("stroke", tracked ? "rgba(74,222,128,0.55)" : "rgba(255,255,255,0.4)");
+      }
+      if (this.scanlineEl) {
+        this.scanlineEl.style.animationPlayState = tracked ? "running" : "paused";
+        this.scanlineEl.style.opacity = tracked ? "1" : "0.4";
+      }
+    }
     updateInstruction(text) {
       if (this.instructionEl) this.instructionEl.textContent = text;
     }
@@ -4791,6 +4898,10 @@ var SmartComplySDK = (() => {
       this.confidenceRingEl = null;
       this.overlayEl = null;
       this.dotsEl = null;
+      this.bgOvalEl = null;
+      this.guideWrapEl = null;
+      this.scanlineEl = null;
+      this.faceTracked = false;
     }
   };
 
@@ -4984,6 +5095,7 @@ var SmartComplySDK = (() => {
             }
             if (videoForDetection.readyState >= 2) {
               const detection = faceEngine.detect(videoForDetection, performance.now());
+              ui2.setFaceTracking(detection.faceDetected);
               if (detection.faceDetected) {
                 stableFrames++;
                 missedFrames = 0;
@@ -5058,6 +5170,7 @@ var SmartComplySDK = (() => {
                 const detection = faceEngine.detect(videoEl, performance.now());
                 const scan = actionDetector.check(detection);
                 ui2.updateScanProgress(scan.livenessConfirmed);
+                ui2.setFaceTracking(detection.faceDetected);
                 if (!detection.faceDetected) {
                   ui2.updateInstruction("Move your face into the oval");
                 } else {
@@ -6423,7 +6536,6 @@ var SmartComplySDK = (() => {
       "traceback",
       "str(e)",
       "error:",
-      "failed:",
       "django",
       "python",
       "http ",
@@ -6435,11 +6547,19 @@ var SmartComplySDK = (() => {
       "confidence_percentage",
       "threshold_percentage",
       "polling_fallback",
-      "resolved_by"
+      "resolved_by",
+      // Billing/wallet messages are an operator problem (fund the account,
+      // configure billing) — never the end user's to act on.
+      "wallet",
+      "fund your wallet",
+      "billing is not configured",
+      "insufficient balance",
+      "insufficient fund"
     ];
     for (const blocked of blocklist) {
       if (lower.includes(blocked)) return null;
     }
+    if (/failed:\S/i.test(raw)) return null;
     if (/[a-z]+_[a-z]+/.test(raw) && !/\s/.test(raw.trim())) return null;
     if (raw.trim()[0] === raw.trim()[0].toLowerCase() && /^[a-z]/.test(raw.trim())) return null;
     return raw.trim();
@@ -7048,7 +7168,12 @@ var SmartComplySDK = (() => {
         { match: "GHANA", rule: { minLen: 8, maxLen: 20, alphanumeric: true, hint: "Ghana Card number must be 8–20 alphanumeric characters" } },
         { match: "SSNIT", rule: { minLen: 7, maxLen: 15, alphanumeric: true, hint: "SSNIT number must be 7–15 alphanumeric characters" } },
         { match: "TIN", rule: { minLen: 8, maxLen: 20, alphanumeric: true, hint: "TIN must be 8–20 characters" } },
-        { match: "KRA", rule: { minLen: 10, maxLen: 12, alphanumeric: true, hint: "KRA PIN must be 10–12 characters" } }
+        { match: "KRA", rule: { minLen: 10, maxLen: 12, alphanumeric: true, hint: "KRA PIN must be 10–12 characters" } },
+        // Backend accepts DD-MM-YYYY, DD/MM/YYYY, YYYY-MM-DD or YYYY/MM/DD
+        // (see _normalize_date_str in ivs_run_check.py) — DD-MM-YYYY shown here
+        // since it matches the date format printed on NIN/BVN records.
+        { match: "DATE OF BIRTH", rule: { pattern: /^\d{2}[-/]\d{2}[-/]\d{4}$|^\d{4}[-/]\d{2}[-/]\d{2}$/, hint: "Format: DD-MM-YYYY (e.g. 15-06-1996)", placeholder: "DD-MM-YYYY" } },
+        { match: "DOB", rule: { pattern: /^\d{2}[-/]\d{2}[-/]\d{4}$|^\d{4}[-/]\d{2}[-/]\d{2}$/, hint: "Format: DD-MM-YYYY (e.g. 15-06-1996)", placeholder: "DD-MM-YYYY" } }
       ];
       function getFieldRule(label) {
         const upper = label.toUpperCase();
@@ -7063,6 +7188,7 @@ var SmartComplySDK = (() => {
         const v2 = value.trim();
         if (rule.numeric && !/^\d+$/.test(v2)) return `${label} must contain digits only`;
         if (rule.alphanumeric && !/^[A-Za-z0-9]+$/.test(v2)) return `${label} must be alphanumeric (letters and digits only)`;
+        if (rule.pattern && !rule.pattern.test(v2)) return rule.hint;
         if (rule.minLen && v2.length < rule.minLen) return rule.hint;
         if (rule.maxLen && v2.length > rule.maxLen) return rule.hint;
         return null;
@@ -7156,7 +7282,7 @@ var SmartComplySDK = (() => {
           input.id = inputId;
           input.setAttribute("aria-labelledby", labelId);
           input.setAttribute("aria-describedby", hintId);
-          input.placeholder = `Enter ${field.label}`;
+          input.placeholder = rule?.placeholder || `Enter ${field.label}`;
           input.maxLength = rule?.maxLen ? rule.maxLen + 2 : 50;
           if (rule?.numeric) input.inputMode = "numeric";
           input.style.cssText = `
@@ -7256,7 +7382,7 @@ var SmartComplySDK = (() => {
             }
             this.showStep("confirm_identity");
           } else {
-            errorEl.textContent = this.verificationResult.message || "We could not verify your details. Please check and try again.";
+            errorEl.textContent = _sanitizeUserMessage(this.verificationResult.message) || "We could not verify your details. Please check and try again.";
             errorEl.style.display = "block";
             submitBtn.textContent = "Verify & Continue";
             submitBtn.disabled = false;
@@ -7267,11 +7393,11 @@ var SmartComplySDK = (() => {
           if (Array.isArray(fieldErrors) && fieldErrors.length > 0) {
             const firstMsg = fieldErrors[0]?.message || fieldErrors[0]?.detail || "";
             errorEl.textContent = _sanitizeUserMessage(firstMsg) || "Please check your details and try again.";
-          } else if (err.code === "VERIFICATION_FAILED") {
-            errorEl.textContent = "We could not verify those details. Please check your ID number and try again.";
-          } else if (err.code === "CHANNEL_NOT_CONFIGURED") {
+          } else if (err.errorCode === "VERIFICATION_FAILED") {
+            errorEl.textContent = _sanitizeUserMessage(err.message) || "We could not verify those details. Please check your ID number and try again.";
+          } else if (err.errorCode === "CHANNEL_NOT_CONFIGURED") {
             errorEl.textContent = "This ID type is not currently available. Please choose a different option.";
-          } else if (err.code === "INSUFFICIENT_BALANCE") {
+          } else if (err.errorCode === "INSUFFICIENT_BALANCE") {
             errorEl.textContent = "Verification is temporarily unavailable. Please contact support.";
           } else {
             errorEl.textContent = _sanitizeUserMessage(err.message) || "Something went wrong. Please try again.";
@@ -7902,9 +8028,10 @@ var SmartComplySDK = (() => {
       const isDocQuality = /blurry|blur|quality|glare|dark|bright|lighting/i.test(message);
       const isExpiredDoc = /document.*expired|expired.*document/i.test(message);
       const isFaceMatch = /face.*match|selfie.*match|does not match/i.test(message);
-      const errorIcon = isCameraErr ? "📷" : isNetworkErr ? "📡" : isAuthErr ? "⏱" : isDocQuality ? "🔍" : isExpiredDoc ? "📅" : isFaceMatch ? "🤳" : "✕";
-      const errorTitle = isCameraErr ? "Camera Access Required" : isNetworkErr ? "Connection Problem" : isAuthErr ? "Session Expired" : isDocQuality ? "Document Photo Unclear" : isExpiredDoc ? "Document Expired" : isFaceMatch ? "Face Match Failed" : "Verification Unsuccessful";
-      const userMessage = isCameraErr ? "Please allow camera access in your browser settings and try again." : isNetworkErr ? "Check your internet connection and try again." : isAuthErr ? "Your session has expired. Please start again." : isDocQuality ? _sanitizeUserMessage(message) || "Please retake your document photo in good lighting with no glare." : isExpiredDoc ? "The document you submitted has expired. Please use a valid, current ID." : isFaceMatch ? "Your selfie did not match the photo on your ID. Please ensure you are using your own valid document and face the camera directly." : _sanitizeUserMessage(message) || "We were unable to complete your verification. Please try again.";
+      const isBillingErr = /wallet|balance|insufficient.*fund|payment.*required/i.test(message);
+      const errorIcon = isCameraErr ? "📷" : isNetworkErr ? "📡" : isAuthErr ? "⏱" : isDocQuality ? "🔍" : isExpiredDoc ? "📅" : isFaceMatch ? "🤳" : isBillingErr ? "⚠️" : "✕";
+      const errorTitle = isCameraErr ? "Camera Access Required" : isNetworkErr ? "Connection Problem" : isAuthErr ? "Session Expired" : isDocQuality ? "Document Photo Unclear" : isExpiredDoc ? "Document Expired" : isFaceMatch ? "Face Match Failed" : isBillingErr ? "Verification Unavailable" : "Verification Unsuccessful";
+      const userMessage = isCameraErr ? "Please allow camera access in your browser settings and try again." : isNetworkErr ? "Check your internet connection and try again." : isAuthErr ? "Your session has expired. Please start again." : isDocQuality ? _sanitizeUserMessage(message) || "Please retake your document photo in good lighting with no glare." : isExpiredDoc ? "The document you submitted has expired. Please use a valid, current ID." : isFaceMatch ? "Your selfie did not match the photo on your ID. Please ensure you are using your own valid document and face the camera directly." : isBillingErr ? "Verification is temporarily unavailable. Please contact support." : _sanitizeUserMessage(message) || "We were unable to complete your verification. Please try again.";
       const iconWrap = document.createElement("div");
       iconWrap.style.cssText = `
       width:72px;height:72px;border-radius:50%;