smartcomply-web-sdk 1.0.69 → 1.0.70

package/dist/smartcomply.browser.js

@@ -5999,7 +5999,8 @@ var SmartComplySDK = (() => {
     passport: '<rect x="5" y="2" width="14" height="20" rx="2"/><circle cx="12" cy="9" r="2.5"/><path d="M9 15h6"/>',
     car: '<path d="M4 16V11l2-5h12l2 5v5"/><path d="M4 16h16M7 16v2M17 16v2"/><circle cx="7.5" cy="14" r="1"/><circle cx="16.5" cy="14" r="1"/>',
     ballot: '<rect x="4" y="8" width="16" height="12" rx="1"/><path d="M9 8V5a3 3 0 016 0v3"/><path d="M12 12v4"/>',
-    refresh: '<path d="M4 4v6h6"/><path d="M20 20v-6h-6"/><path d="M20 10a8 8 0 00-14.6-4.6M4 14a8 8 0 0014.6 4.6"/>'
+    refresh: '<path d="M4 4v6h6"/><path d="M20 20v-6h-6"/><path d="M20 10a8 8 0 00-14.6-4.6M4 14a8 8 0 0014.6 4.6"/>',
+    rotate: '<rect x="7" y="7" width="12" height="12" rx="2"/><path d="M7 4h5a4 4 0 014 4"/><path d="M13 1.5L16 4l-3 2.5"/>'
   };
   function icon(name, size = 24) {
     const d2 = PATHS[name];
@@ -6250,7 +6251,7 @@ var SmartComplySDK = (() => {
         display:flex;align-items:center;gap:8px;
         font-size:12px;color:${theme.textSecondary};line-height:1.5;
       `;
-        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>`;
+        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 document 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) {
@@ -6261,7 +6262,7 @@ var SmartComplySDK = (() => {
         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.textContent = "Skip — my document has no back side";
         skipBtn.addEventListener("click", () => {
           this.handleCaptureComplete(null, container, theme, documentType, false, true);
         });
@@ -6508,14 +6509,15 @@ var SmartComplySDK = (() => {
       stepBadge.textContent = "STEP 1 OF 2 · CHECK THE PHOTO";
       this.root.appendChild(stepBadge);
       const img = document.createElement("img");
-      const imageUrl = URL.createObjectURL(imageData);
-      img.src = imageUrl;
+      let currentUrl = URL.createObjectURL(imageData);
+      img.src = currentUrl;
       img.style.cssText = `
       width:100%;max-height:300px;object-fit:contain;border-radius:${RADIUS.md}px;
       border:2px solid ${theme.border};
     `;
       this.root.appendChild(img);
-      img._blobUrl = imageUrl;
+      let currentBlob = imageData;
+      let isRotating = false;
       const label = document.createElement("div");
       label.style.cssText = `color:${theme.text};font-size:${TYPE.base}px;font-weight:700;text-align:center;`;
       label.textContent = "Does the photo look clear?";
@@ -6524,6 +6526,35 @@ 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 rotateBtn = document.createElement("button");
+      rotateBtn.type = "button";
+      rotateBtn.setAttribute("aria-label", "Rotate photo 90 degrees");
+      rotateBtn.style.cssText = `
+      display:flex;align-items:center;justify-content:center;gap:6px;
+      margin:0 auto;padding:8px 16px;background:transparent;
+      color:${theme.textSecondary};border:1.5px solid ${theme.border};
+      border-radius:${RADIUS.pill}px;cursor:pointer;
+      font-size:12.5px;font-weight:600;font-family:inherit;
+    `;
+      rotateBtn.innerHTML = `<span style="display:inline-flex;">${icon("rotate", 15)}</span><span>Rotate</span>`;
+      rotateBtn.addEventListener("click", async () => {
+        if (isRotating) return;
+        isRotating = true;
+        rotateBtn.disabled = true;
+        try {
+          const rotated = await this._rotateImage(currentBlob, 90);
+          currentBlob = rotated;
+          URL.revokeObjectURL(currentUrl);
+          currentUrl = URL.createObjectURL(rotated);
+          img.src = currentUrl;
+          this._checkPhotoQuality(currentBlob, qualityNotice, theme);
+        } catch {
+        } finally {
+          isRotating = false;
+          rotateBtn.disabled = false;
+        }
+      });
+      this.root.appendChild(rotateBtn);
       const qualityNotice = document.createElement("div");
       qualityNotice.style.cssText = `
       display:none;width:100%;padding:10px 14px;border-radius:${RADIUS.md}px;
@@ -6532,27 +6563,24 @@ var SmartComplySDK = (() => {
     `;
       qualityNotice.setAttribute("role", "status");
       this.root.appendChild(qualityNotice);
-      this._checkPhotoQuality(imageData, qualityNotice, theme);
+      this._checkPhotoQuality(currentBlob, qualityNotice, theme);
       const btnRow = document.createElement("div");
       btnRow.style.cssText = "display:flex;gap:12px;width:100%;";
       const retakeBtn = this.createButton("Retake", theme, false);
       retakeBtn.style.flex = "1";
       retakeBtn.addEventListener("click", () => {
-        if (img._blobUrl) {
-          URL.revokeObjectURL(img._blobUrl);
-        }
+        URL.revokeObjectURL(currentUrl);
         this.root.innerHTML = "";
         this.renderChoiceScreen(container, theme, documentType);
       });
       const useBtn = this.createButton("Use Photo ✓", theme, true);
       useBtn.style.flex = "1";
       useBtn.addEventListener("click", () => {
-        if (img._blobUrl) {
-          URL.revokeObjectURL(img._blobUrl);
-        }
+        URL.revokeObjectURL(currentUrl);
         useBtn.textContent = "Confirming photo…";
         useBtn.disabled = true;
-        this.ensureUnderUploadLimit(imageData).then((c2) => this.handleCaptureComplete(c2, container, theme, documentType, viaCamera));
+        rotateBtn.disabled = true;
+        this.ensureUnderUploadLimit(currentBlob).then((c2) => this.handleCaptureComplete(c2, container, theme, documentType, viaCamera));
       });
       btnRow.appendChild(retakeBtn);
       btnRow.appendChild(useBtn);
@@ -6606,6 +6634,49 @@ var SmartComplySDK = (() => {
         imgEl.src = url;
       });
     }
+    /**
+     * Rotate an image blob by a multiple of 90° and re-encode it — used by the
+     * preview screen's rotate control for a document photographed or uploaded
+     * sideways/upside-down. EXIF auto-rotation (see compressImage) only fixes
+     * phone photos that embed correct orientation metadata; it can't help a
+     * document whose actual pixel content is sideways (e.g. the phone itself
+     * was held rotated relative to the document, or a pre-cropped/scanned
+     * upload with no EXIF at all) — that needs the user to say so directly.
+     */
+    _rotateImage(source, degrees) {
+      return new Promise((resolve, reject) => {
+        const url = URL.createObjectURL(source);
+        const imgEl = document.createElement("img");
+        imgEl.onload = () => {
+          URL.revokeObjectURL(url);
+          const { naturalWidth: w2, naturalHeight: h2 } = imgEl;
+          const swapped = degrees === 90 || degrees === 270;
+          const canvas = document.createElement("canvas");
+          canvas.width = swapped ? h2 : w2;
+          canvas.height = swapped ? w2 : h2;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            reject(new Error("Canvas unavailable"));
+            return;
+          }
+          ctx.translate(canvas.width / 2, canvas.height / 2);
+          ctx.rotate(degrees * Math.PI / 180);
+          ctx.drawImage(imgEl, -w2 / 2, -h2 / 2);
+          canvas.toBlob(
+            (blob) => {
+              blob ? resolve(blob) : reject(new Error("Rotation failed"));
+            },
+            "image/jpeg",
+            0.95
+          );
+        };
+        imgEl.onerror = () => {
+          URL.revokeObjectURL(url);
+          reject(new Error("Image load failed"));
+        };
+        imgEl.src = url;
+      });
+    }
     handleCaptureComplete(imageData, container, theme, documentType, viaCamera, skipped = false) {
       const requiresBack = this.shouldCaptureBackSide(documentType);
       const wasCapturingFront = this.currentSide === "front";
@@ -6880,8 +6951,9 @@ var SmartComplySDK = (() => {
       if (t2.includes("passport")) return "passport";
       if (t2.includes("driver") || t2.includes("licen")) return "driver's license";
       if (t2.includes("voter") || t2.includes("pvc")) return "voter's card";
-      if (t2.includes("national") || t2.includes("nin") || t2.includes("national id")) return "national ID card";
-      if (t2.includes("bvn")) return "BVN card";
+      if (t2.includes("nin")) return "NIN document";
+      if (t2.includes("national")) return "national ID card";
+      if (t2.includes("bvn")) return "BVN document";
       return "identity document";
     }
   };
@@ -6927,7 +6999,7 @@ var SmartComplySDK = (() => {
     if (u2.includes("NIN") || u2.includes("NATIONAL IDENTITY NUMBER")) {
       return {
         icon: "🆔",
-        desc: isDocumentFlow ? "Capture or upload your NIN card (back optional)" : "Enter your 11-digit National Identification Number (NIN)",
+        desc: isDocumentFlow ? "Capture or upload your NIN (slip or card) — add the back if your document has one" : "Enter your 11-digit National Identification Number (NIN)",
         requiresBack: isDocumentFlow ? "optional" : false
       };
     }