smartcomply-web-sdk 1.0.99 → 1.0.101

package/dist/esm/flow/SmartComplyFlow.js

@@ -1,11 +1,10 @@
 import { SmartComply } from "../client/Smartcomply";
 import { getTheme, TYPE, RADIUS } from "./theme";
 import { DocumentCapture, DocumentCaptureCancelledError } from "./DocumentCapture";
-import { isUploadFieldType } from "../utils/channels";
-import { isPdf } from "../utils/documentFiles";
+import { countryCodeFor, countryLabel, filterCountries, isUploadFieldType } from "../utils/channels";
 import { collectDeviceMetadata } from "../utils/device";
 import { requiresBackSide } from "../utils/documentRules";
-import { DEFAULT_CHALLENGE_ACTIONS } from "../utils/constants";
+import { DEFAULT_CHALLENGE_ACTIONS, MAX_DOCUMENT_BYTES } from "../utils/constants";
 import { icon } from "./icons";
 import { renderSpinner, renderInlineSpinner } from "./spinner";
 import { SDKError } from "../errors/SDKError";
@@ -53,15 +52,9 @@ const STEP_ORDER = [
     "liveness",
     "done",
 ];
-const COUNTRY_LABELS = {
-    nigeria: "🇳🇬  Nigeria",
-    global: "🌍  Other Countries",
-    ghana: "🇬🇭  Ghana",
-    kenya: "🇰🇪  Kenya",
-    south_africa: "🇿🇦  South Africa",
-    united_states: "🇺🇸  United States",
-    united_kingdom: "🇬🇧  United Kingdom",
-};
+// From this many countries up, the country screen shows a search box: a
+// setup can offer passports from every supported country (188).
+const COUNTRY_SEARCH_MIN = 7;
 /**
  * Whether a SPECIFIC channel is a document-scan item, vs. a plain
  * number-entry one. channels[country] is a flat list that can mix
@@ -304,24 +297,6 @@ function _parseOcrDate(raw) {
     const d = new Date(s);
     return isNaN(d.getTime()) ? null : d;
 }
-// ── W12: Image compression before document upload ────────────────────────────
-async function _compressImage(blob, maxWidth = 1600, quality = 0.85) {
-    try {
-        const bmp = await createImageBitmap(blob);
-        const scale = Math.min(1, maxWidth / bmp.width);
-        const w = Math.round(bmp.width * scale);
-        const h = Math.round(bmp.height * scale);
-        const canvas = document.createElement("canvas");
-        canvas.width = w;
-        canvas.height = h;
-        canvas.getContext("2d").drawImage(bmp, 0, 0, w, h);
-        bmp.close();
-        return await new Promise((res, rej) => canvas.toBlob(b => b ? res(b) : rej(new Error("Compression failed")), "image/jpeg", quality));
-    }
-    catch {
-        return blob; // fallback to original on any error
-    }
-}
 // ── Document type code → human label ─────────────────────────────────────────
 function _formatDocType(code) {
     const map = {
@@ -1164,15 +1139,47 @@ export class SmartComplyFlow {
         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) {
@@ -1760,8 +1767,15 @@ export class SmartComplyFlow {
             faceWrap.appendChild(faceImg);
             container.appendChild(faceWrap);
         }
-        // Expiry soon warning
-        if (this._ocrExpirySoon && !this._ocrIsExpired) {
+        // Expired or expiring-soon notice
+        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.";
@@ -1864,12 +1878,10 @@ export class SmartComplyFlow {
             polls++;
             try {
                 const result = await this.sdk.liveness.pollResult(entryId);
-                // W7: Expired document — stop, do not proceed to liveness
-                if (result.is_expired === true) {
-                    container.innerHTML = "";
-                    this._renderExpiredDocument(container);
-                    return;
-                }
+                // An expired document does not stop the flow: liveness and the face
+                // match still run so the client gets the full result, and the backend
+                // fails the check at the end with "Document has expired." The confirm
+                // screen tells the user (see _ocrIsExpired).
                 // W8: OCR quality fail — offer retake
                 if (result.ocr_quality_failed === true) {
                     container.innerHTML = "";
@@ -1945,32 +1957,6 @@ export class SmartComplyFlow {
         // First poll after 3s — give OCR submission time to start
         this._ocrPollTimer = setTimeout(poll, 3000);
     }
-    _renderExpiredDocument(container) {
-        container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:20px 0;";
-        const icon = document.createElement("div");
-        icon.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;`;
-        icon.textContent = "📅";
-        container.appendChild(icon);
-        const t = document.createElement("h2");
-        t.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
-        t.textContent = "Document Expired";
-        container.appendChild(t);
-        const d = document.createElement("p");
-        d.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin:0;max-width:280px;line-height:1.6;`;
-        d.textContent = "The document you submitted has expired. Please use a valid, current ID.";
-        container.appendChild(d);
-        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 icon = document.createElement("div");
@@ -2158,15 +2144,11 @@ export class SmartComplyFlow {
      * Process document capture result with front/back support
      */
     async processDocumentCaptureResult(result, captureContainer, container) {
-        // B2+P2: Compress both images once here. Do NOT assign documentBlob twice
-        // (old code set it to the raw blob first, then overwrote with compressed).
-        // processDocumentBlob also ran _compressImage — that second pass is removed
-        // below so compression only happens once.
-        // A PDF is sent as-is: only photos are re-encoded.
-        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);
+        // Uploaded exactly as captured or picked, photo or PDF: re-encoding a
+        // small passport photo as JPEG blurred its machine-readable lines and the
+        // OCR rejected a clear Rwandan passport as "country: unknown".
+        this.documentBlob = result.front;
+        this.documentBackBlob = result.back || null;
         this._documentViaCamera = result.viaCamera;
         // Process the front image — pass the already-compressed blob
         await this.processDocumentBlob(this.documentBlob, captureContainer, container);
@@ -2179,12 +2161,11 @@ export class SmartComplyFlow {
         let retryCount = 0;
         const attemptProcessing = async () => {
             try {
-                // Validate blob — compression already done in processDocumentCaptureResult (P2)
                 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;
                 // Show scanning state
@@ -2203,11 +2184,7 @@ export class SmartComplyFlow {
                     || 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 {
@@ -2397,11 +2374,7 @@ export class SmartComplyFlow {
             ? ""
             : (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);
         // Start liveness check (this handles camera, detection, recording, submission)
         // If livenessEntryId exists (document flow), reuse it instead of creating a new one
         this.sdk.liveness