smartcomply-web-sdk 1.0.35 → 1.0.36

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;
@@ -5655,7 +5660,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 +6364,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 +6514,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 +6852,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 +6888,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;`;
@@ -7103,69 +7108,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);