smartcomply-web-sdk 1.0.65 → 1.0.66

package/dist/smartcomply.browser.js

@@ -5848,6 +5848,9 @@ var SmartComplySDK = (() => {
   // 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) {
@@ -5990,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 = `
@@ -6001,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");
@@ -6023,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);
@@ -6114,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";
@@ -6399,13 +6425,13 @@ var SmartComplySDK = (() => {
       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) {
@@ -6694,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) };
@@ -7349,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();