smartcomply-web-sdk 1.0.99 → 1.0.101

package/dist/smartcomply.browser.js

@@ -293,7 +293,7 @@ var SmartComplySDK = (() => {
   var SESSION_WARN_BEFORE_MS = 2 * 60 * 1e3;
   var MAX_RETRIES = 2;
   var RETRY_DELAY_MS = 1e3;
-  var MAX_DOCUMENT_BYTES = 5 * 1024 * 1024;
+  var MAX_DOCUMENT_BYTES = 10 * 1024 * 1024;
   var MAX_VIDEO_BYTES = 50 * 1024 * 1024;
   var MAX_SNAPSHOT_BYTES = 2 * 1024 * 1024;
   var DEFAULT_CHALLENGE_ACTIONS = ["BLINK", "TURN_HEAD"];
@@ -5760,10 +5760,29 @@ var SmartComplySDK = (() => {
           data_verification: isChannelList(byCategory.data_verification) ? byCategory.data_verification : [],
           document_verification: isChannelList(byCategory.document_verification) ? byCategory.document_verification : []
         };
+        if (typeof byCategory.code === "string") grouped[country].code = byCategory.code;
+        if (typeof byCategory.name === "string") grouped[country].name = byCategory.name;
       }
     }
     return grouped;
   }
+  var NO_COUNTRY = "global";
+  function countryCodeFor(channels, country) {
+    if (!country || country === NO_COUNTRY) return NO_COUNTRY;
+    return channels[country]?.code || country;
+  }
+  function countryLabel(channels, country) {
+    const name = channels[country]?.name;
+    if (name) return name;
+    return country.replace(/\b\w/g, (letter) => letter.toUpperCase());
+  }
+  function searchable(text) {
+    return text.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();
+  }
+  function filterCountries(channels, query) {
+    const needle = searchable(query);
+    return Object.keys(channels).map((country) => ({ country, label: countryLabel(channels, country) })).filter(({ country, label }) => !needle || searchable(label).includes(needle) || searchable(country).includes(needle)).sort((a2, b2) => a2.label.localeCompare(b2.label)).map(({ country }) => country);
+  }
 
   // src/client/Smartcomply.ts
   var _SmartComply = class _SmartComply {
@@ -5886,7 +5905,7 @@ var SmartComplySDK = (() => {
    * CDN tag they installed with (e.g. @1, which floats to the latest
    * matching release) actually resolved to the version they expect.
    */
-  _SmartComply.VERSION = "1.0.99";
+  _SmartComply.VERSION = "1.0.101";
   var SmartComply = _SmartComply;
 
   // src/flow/theme.ts
@@ -6566,7 +6585,7 @@ var SmartComplySDK = (() => {
             this.showPdfPreview(container, theme, file, documentType);
             return;
           }
-          this.ensureUnderUploadLimit(file).then((c2) => this.handleFileUploadComplete(c2, container, theme, documentType));
+          this.handleFileUploadComplete(file, container, theme, documentType);
         }
       });
       this.root.appendChild(fileInput);
@@ -6980,7 +6999,14 @@ var SmartComplySDK = (() => {
         useBtn.textContent = "Confirming photo…";
         useBtn.disabled = true;
         rotateBtn.disabled = true;
-        this.ensureUnderUploadLimit(currentBlob).then((c2) => this.handleCaptureComplete(c2, container, theme, documentType, viaCamera));
+        if (currentBlob.size > MAX_DOCUMENT_BYTES) {
+          useBtn.textContent = "Use Photo ✓";
+          useBtn.disabled = false;
+          rotateBtn.disabled = false;
+          this.showError(this.tooLargeMessage());
+          return;
+        }
+        this.handleCaptureComplete(currentBlob, container, theme, documentType, viaCamera);
       });
       btnRow.appendChild(retakeBtn);
       btnRow.appendChild(useBtn);
@@ -7063,9 +7089,8 @@ var SmartComplySDK = (() => {
     /**
      * 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
+     * sideways/upside-down. Orientation metadata 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.
      */
@@ -7199,29 +7224,15 @@ var SmartComplySDK = (() => {
         return "Invalid file type. Please upload a JPEG or PNG photo, or a PDF.";
       }
       if (file.size > MAX_DOCUMENT_BYTES) {
-        return `File is too large. Please upload a file smaller than ${Math.round(MAX_DOCUMENT_BYTES / (1024 * 1024))}MB.`;
+        return this.tooLargeMessage();
       }
       if (file.size < 1024) {
         return "File is too small. Please upload a valid photo or PDF.";
       }
       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;
-      }
+    tooLargeMessage() {
+      return `File is too large. Please upload a file smaller than ${Math.round(MAX_DOCUMENT_BYTES / (1024 * 1024))}MB.`;
     }
     handleFileUpload(container, theme) {
       const input = this.root?.querySelector("#sc-doc-file-input");
@@ -7299,141 +7310,6 @@ var SmartComplySDK = (() => {
       });
       return btn;
     }
-    compressImage(source, maxWidth, maxHeight, quality) {
-      return new Promise((resolve, reject) => {
-        this._readExifOrientation(source).then((orientation) => {
-          const url = URL.createObjectURL(source);
-          const imgEl = document.createElement("img");
-          imgEl.onload = () => {
-            URL.revokeObjectURL(url);
-            let { naturalWidth: w2, naturalHeight: h2 } = imgEl;
-            const swapped = orientation >= 5 && orientation <= 8;
-            const srcW = swapped ? h2 : w2;
-            const srcH = swapped ? w2 : h2;
-            const ratio = computeScaleRatio(srcW, srcH, maxWidth, maxHeight);
-            const outW = Math.round(srcW * ratio);
-            const outH = Math.round(srcH * ratio);
-            const canvas = document.createElement("canvas");
-            canvas.width = outW;
-            canvas.height = outH;
-            const ctx = canvas.getContext("2d");
-            if (!ctx) {
-              reject(new Error("Canvas unavailable"));
-              return;
-            }
-            ctx.save();
-            if (orientation === 2) {
-              ctx.transform(-1, 0, 0, 1, outW, 0);
-            } else if (orientation === 3) {
-              ctx.transform(-1, 0, 0, -1, outW, outH);
-            } else if (orientation === 4) {
-              ctx.transform(1, 0, 0, -1, 0, outH);
-            } else if (orientation === 5) {
-              ctx.transform(0, 1, 1, 0, 0, 0);
-            } else if (orientation === 6) {
-              ctx.transform(0, 1, -1, 0, outH, 0);
-            } else if (orientation === 7) {
-              ctx.transform(0, -1, -1, 0, outH, outW);
-            } else if (orientation === 8) {
-              ctx.transform(0, -1, 1, 0, 0, outW);
-            }
-            ctx.drawImage(imgEl, 0, 0, swapped ? outH : outW, swapped ? outW : outH);
-            ctx.restore();
-            canvas.toBlob(
-              (blob) => {
-                blob ? resolve(blob) : reject(new Error("Compression failed"));
-              },
-              "image/jpeg",
-              quality
-            );
-          };
-          imgEl.onerror = () => {
-            URL.revokeObjectURL(url);
-            reject(new Error("Image load failed"));
-          };
-          imgEl.src = url;
-        }).catch(() => {
-          const url = URL.createObjectURL(source);
-          const imgEl = document.createElement("img");
-          imgEl.onload = () => {
-            URL.revokeObjectURL(url);
-            let { naturalWidth: w2, naturalHeight: h2 } = imgEl;
-            const ratio = computeScaleRatio(w2, h2, maxWidth, maxHeight);
-            const canvas = document.createElement("canvas");
-            canvas.width = Math.round(w2 * ratio);
-            canvas.height = Math.round(h2 * ratio);
-            const ctx = canvas.getContext("2d");
-            if (!ctx) {
-              reject(new Error("Canvas unavailable"));
-              return;
-            }
-            ctx.drawImage(imgEl, 0, 0, canvas.width, canvas.height);
-            canvas.toBlob(
-              (blob) => {
-                blob ? resolve(blob) : reject(new Error("Compression failed"));
-              },
-              "image/jpeg",
-              quality
-            );
-          };
-          imgEl.onerror = () => {
-            URL.revokeObjectURL(url);
-            reject(new Error("Image load failed"));
-          };
-          imgEl.src = url;
-        });
-      });
-    }
-    /**
-     * Read JPEG EXIF orientation tag (1–8) from a Blob/File.
-     * Returns 1 (no rotation) if EXIF is absent or unreadable.
-     */
-    _readExifOrientation(source) {
-      return new Promise((resolve) => {
-        const reader = new FileReader();
-        reader.onload = (e2) => {
-          try {
-            const buf = e2.target?.result;
-            const view = new DataView(buf);
-            if (view.getUint16(0, false) !== 65496) {
-              resolve(1);
-              return;
-            }
-            let offset = 2;
-            while (offset < view.byteLength) {
-              const marker = view.getUint16(offset, false);
-              offset += 2;
-              if (marker === 65505) {
-                if (view.getUint32(offset + 2, false) !== 1165519206) {
-                  resolve(1);
-                  return;
-                }
-                const little = view.getUint16(offset + 8, false) === 18761;
-                const ifdOff = offset + 8 + view.getUint32(offset + 12, little);
-                const tags = view.getUint16(ifdOff, little);
-                for (let i2 = 0; i2 < tags; i2++) {
-                  if (view.getUint16(ifdOff + 2 + 12 * i2, little) === 274) {
-                    resolve(view.getUint16(ifdOff + 2 + 12 * i2 + 8, little));
-                    return;
-                  }
-                }
-                resolve(1);
-                return;
-              } else if ((marker & 65280) !== 65280) {
-                break;
-              } else {
-                offset += view.getUint16(offset, false);
-              }
-            }
-            resolve(1);
-          } catch {
-            resolve(1);
-          }
-        };
-        reader.onerror = () => resolve(1);
-        reader.readAsArrayBuffer(source.slice(0, 65536));
-      });
-    }
     getDocumentLabel(type) {
       const t2 = type.toLowerCase();
       if (t2.includes("passport")) return "passport";
@@ -7470,15 +7346,7 @@ var SmartComplySDK = (() => {
     }
     return err?.message || "We couldn't verify your face. Please try again.";
   }
-  var COUNTRY_LABELS = {
-    nigeria: "🇳🇬  Nigeria",
-    global: "🌍  Other Countries",
-    ghana: "🇬🇭  Ghana",
-    kenya: "🇰🇪  Kenya",
-    south_africa: "🇿🇦  South Africa",
-    united_states: "🇺🇸  United States",
-    united_kingdom: "🇬🇧  United Kingdom"
-  };
+  var COUNTRY_SEARCH_MIN = 7;
   function isChannelDocumentFlow(idType, globalDocFlow) {
     if (typeof idType === "string") return globalDocFlow;
     return (idType.fields || []).some((f2) => isUploadFieldType(f2.type));
@@ -7618,24 +7486,6 @@ var SmartComplySDK = (() => {
     const d2 = new Date(s2);
     return isNaN(d2.getTime()) ? null : d2;
   }
-  async function _compressImage(blob, maxWidth = 1600, quality = 0.85) {
-    try {
-      const bmp = await createImageBitmap(blob);
-      const scale = Math.min(1, maxWidth / bmp.width);
-      const w2 = Math.round(bmp.width * scale);
-      const h2 = Math.round(bmp.height * scale);
-      const canvas = document.createElement("canvas");
-      canvas.width = w2;
-      canvas.height = h2;
-      canvas.getContext("2d").drawImage(bmp, 0, 0, w2, h2);
-      bmp.close();
-      return await new Promise(
-        (res, rej) => canvas.toBlob((b2) => b2 ? res(b2) : rej(new Error("Compression failed")), "image/jpeg", quality)
-      );
-    } catch {
-      return blob;
-    }
-  }
   function _formatDocType(code) {
     const map = {
       passport: "Passport",
@@ -8321,18 +8171,50 @@ var SmartComplySDK = (() => {
       subtitle.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin-top:-8px;`;
       subtitle.textContent = "Choose the country that issued your ID";
       container.appendChild(subtitle);
-      for (const country of countries) {
-        const count = channels[country].data_verification.length + channels[country].document_verification.length;
-        const card = this.createOptionCard(
-          COUNTRY_LABELS[country] || country,
-          `${count} ID type${count > 1 ? "s" : ""} available`,
-          () => {
-            this.selectedCountry = country;
-            this.showStep("id_type");
-          }
-        );
-        container.appendChild(card);
+      const list = document.createElement("div");
+      list.setAttribute("role", "list");
+      list.style.cssText = "display:flex;flex-direction:column;gap:10px;max-height:min(52vh,420px);overflow-y:auto;padding:2px;";
+      const renderList = (query) => {
+        list.innerHTML = "";
+        const matches = filterCountries(channels, query);
+        if (matches.length === 0) {
+          const empty = document.createElement("div");
+          empty.setAttribute("role", "status");
+          empty.style.cssText = `color:${this.theme.textSecondary};font-size:13px;line-height:1.6;padding:8px 2px;`;
+          empty.textContent = `No country matches "${query.trim()}". Check the spelling or try another name.`;
+          list.appendChild(empty);
+          return;
+        }
+        for (const country of matches) {
+          const count = channels[country].data_verification.length + channels[country].document_verification.length;
+          const card = this.createOptionCard(
+            countryLabel(channels, country),
+            `${count} ID type${count > 1 ? "s" : ""} available`,
+            () => {
+              this.selectedCountry = country;
+              this.showStep("id_type");
+            }
+          );
+          card.setAttribute("role", "listitem");
+          list.appendChild(card);
+        }
+      };
+      if (countries.length >= COUNTRY_SEARCH_MIN) {
+        const search = document.createElement("input");
+        search.type = "search";
+        search.placeholder = "Search countries";
+        search.setAttribute("aria-label", "Search countries");
+        search.autocomplete = "off";
+        search.style.cssText = `
+        width:100%;box-sizing:border-box;padding:11px 14px;border-radius:${RADIUS.md}px;
+        background:${this.theme.cardBg};color:${this.theme.text};
+        border:1.5px solid ${this.theme.border};font-size:14px;outline-offset:2px;
+      `;
+        search.addEventListener("input", () => renderList(search.value));
+        container.appendChild(search);
       }
+      renderList("");
+      container.appendChild(list);
     }
     // ── ID Type Select ──────────────────────────────────────────────
     renderIdTypeSelect(container) {
@@ -8820,7 +8702,13 @@ var SmartComplySDK = (() => {
         faceWrap.appendChild(faceImg);
         container.appendChild(faceWrap);
       }
-      if (this._ocrExpirySoon && !this._ocrIsExpired) {
+      if (this._ocrIsExpired) {
+        const expired = document.createElement("div");
+        expired.setAttribute("role", "alert");
+        expired.style.cssText = `width:100%;padding:10px 14px;border-radius:10px;background:${this.theme.errorBg};border:1px solid ${this.theme.error}40;color:${this.theme.error};font-size:12px;text-align:left;line-height:1.5;`;
+        expired.textContent = "⚠️  This document has expired. You can continue, but a check with an expired document won't be approved. Use a valid document if you have one.";
+        container.appendChild(expired);
+      } else if (this._ocrExpirySoon) {
         const warn = document.createElement("div");
         warn.style.cssText = `width:100%;padding:10px 14px;border-radius:10px;background:${this.theme.warning}18;border:1px solid ${this.theme.warning}40;color:${this.theme.warning};font-size:12px;text-align:left;line-height:1.5;`;
         warn.textContent = "⚠️  Your document expires soon. Some services may not accept it, but you can still continue.";
@@ -8903,11 +8791,6 @@ var SmartComplySDK = (() => {
         polls++;
         try {
           const result = await this.sdk.liveness.pollResult(entryId);
-          if (result.is_expired === true) {
-            container.innerHTML = "";
-            this._renderExpiredDocument(container);
-            return;
-          }
           if (result.ocr_quality_failed === true) {
             container.innerHTML = "";
             this._renderOcrQualityFail(container, result.ocr_rejection_reason);
@@ -8956,35 +8839,6 @@ var SmartComplySDK = (() => {
       };
       this._ocrPollTimer = setTimeout(poll, 3e3);
     }
-    _renderExpiredDocument(container) {
-      container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:20px 0;";
-      const icon2 = document.createElement("div");
-      icon2.style.cssText = `width:72px;height:72px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:28px;`;
-      icon2.textContent = "📅";
-      container.appendChild(icon2);
-      const t2 = document.createElement("h2");
-      t2.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
-      t2.textContent = "Document Expired";
-      container.appendChild(t2);
-      const d2 = document.createElement("p");
-      d2.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin:0;max-width:280px;line-height:1.6;`;
-      d2.textContent = "The document you submitted has expired. Please use a valid, current ID.";
-      container.appendChild(d2);
-      const retryBtn = this.createPrimaryButton("Try a different document");
-      retryBtn.addEventListener("click", () => {
-        this.livenessEntryId = null;
-        this.documentBlob = null;
-        this.documentBackBlob = null;
-        this.showStep("document_capture");
-      });
-      container.appendChild(retryBtn);
-      const endBtn = this.createSecondaryButton("End session");
-      endBtn.addEventListener("click", () => {
-        this.options.onError?.(new Error("Document expired"));
-        this.close();
-      });
-      container.appendChild(endBtn);
-    }
     _renderOcrQualityFail(container, reason) {
       container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:20px 0;";
       const icon2 = document.createElement("div");
@@ -9148,8 +9002,8 @@ var SmartComplySDK = (() => {
      * Process document capture result with front/back support
      */
     async processDocumentCaptureResult(result, captureContainer, container) {
-      this.documentBlob = isPdf(result.front) ? result.front : await _compressImage(result.front, 1600, 0.85);
-      this.documentBackBlob = !result.back ? null : isPdf(result.back) ? result.back : await _compressImage(result.back, 1600, 0.85);
+      this.documentBlob = result.front;
+      this.documentBackBlob = result.back || null;
       this._documentViaCamera = result.viaCamera;
       await this.processDocumentBlob(this.documentBlob, captureContainer, container);
     }
@@ -9164,8 +9018,10 @@ var SmartComplySDK = (() => {
           if (!blob || blob.size === 0) {
             throw new Error("Failed to capture document. Please try again.");
           }
-          if (blob.size > 5 * 1024 * 1024) {
-            throw new Error("Document image is too large. Please retake in better lighting or use a clearer photo.");
+          if (blob.size > MAX_DOCUMENT_BYTES) {
+            throw new Error(
+              `Document is too large. Please use a file smaller than ${Math.round(MAX_DOCUMENT_BYTES / (1024 * 1024))}MB.`
+            );
           }
           this.documentBlob = blob;
           captureContainer.innerHTML = "";
@@ -9175,16 +9031,7 @@ var SmartComplySDK = (() => {
         <div style="color:${this.theme.text};font-size:14px;font-weight:600;">Scanning document...</div>
         <div style="color:${this.theme.textSecondary};font-size:12px;text-align:center;max-width:200px;line-height:1.5;">Running OCR and verifying your identity</div>`);
           const identifier = Object.values(this.collectedFields)[0] || this.idNumber || this.selectedIdType || `DOC-${Date.now()}`;
-          const COUNTRY_CODES = {
-            nigeria: "NG",
-            ghana: "GH",
-            kenya: "KE",
-            south_africa: "ZA",
-            united_states: "US",
-            united_kingdom: "GB",
-            global: "US"
-          };
-          const country = COUNTRY_CODES[this.selectedCountry] || this.selectedCountry.toUpperCase().slice(0, 2);
+          const country = countryCodeFor(this.sdkConfig?.channels || {}, this.selectedCountry);
           const deviceMeta = collectDeviceMetadata();
           let createResult;
           try {
@@ -9331,16 +9178,7 @@ var SmartComplySDK = (() => {
       const isDataVerification = !!this.identityCheckId;
       const identifier = isDataVerification ? "" : this.idNumber || Object.values(this.collectedFields)[0] || this.selectedIdType || `DOC-${Date.now()}`;
       const identifierType = isDataVerification ? "" : this.selectedIdType;
-      const COUNTRY_CODES = {
-        nigeria: "NG",
-        ghana: "GH",
-        kenya: "KE",
-        south_africa: "ZA",
-        united_states: "US",
-        united_kingdom: "GB",
-        global: "US"
-      };
-      const country = COUNTRY_CODES[this.selectedCountry] || this.selectedCountry.toUpperCase().slice(0, 2);
+      const country = countryCodeFor(this.sdkConfig?.channels || {}, this.selectedCountry);
       this.sdk.liveness.startCheck(
         livenessContainer,
         {