smartcomply-web-sdk 1.0.62 → 1.0.63

package/dist/esm/flow/SmartComplyFlow.js

@@ -1,8 +1,10 @@
 import { SmartComply } from "../client/Smartcomply";
-import { getTheme } from "./theme";
+import { getTheme, TYPE, RADIUS } from "./theme";
 import { DocumentCapture } from "./DocumentCapture";
 import { collectDeviceMetadata } from "../utils/device";
 import { requiresBackSide } from "../utils/documentRules";
+import { icon } from "./icons";
+import { renderSpinner, renderInlineSpinner } from "./spinner";
 const STEP_ORDER = [
     "loading",
     "welcome",
@@ -226,18 +228,6 @@ function _formatDocType(code) {
 }
 // SmartComplyFlow
 // ─────────────────────────────────────────────────────────────────────
-// Add CSS animation keyframes for spin animations
-const style = document.createElement('style');
-style.textContent = `
-  @keyframes sc-spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-`;
-if (!document.head.querySelector('style[data-sc-animations]')) {
-    style.setAttribute('data-sc-animations', 'true');
-    document.head.appendChild(style);
-}
 export class SmartComplyFlow {
     constructor(options) {
         this.theme = getTheme("default");
@@ -609,27 +599,9 @@ export class SmartComplyFlow {
     // ── Loading ─────────────────────────────────────────────────────
     renderLoading(container) {
         container.style.cssText += "display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:16px;";
-        const spinnerWrap = document.createElement("div");
-        spinnerWrap.style.cssText = "position:relative;width:60px;height:60px;flex-shrink:0;";
-        const ring = document.createElement("div");
-        ring.style.cssText = `
-      position:absolute;inset:0;border-radius:50%;
-      border:3px solid ${this.theme.border};
-      border-top-color:${this.theme.primary};
-      animation:sc-spin 0.9s linear infinite;
-    `;
-        const centre = document.createElement("div");
-        centre.style.cssText = `
-      position:absolute;inset:0;
-      display:flex;align-items:center;justify-content:center;
-      font-size:22px;
-    `;
-        centre.textContent = "\uD83D\uDEE1\uFE0F";
-        spinnerWrap.appendChild(ring);
-        spinnerWrap.appendChild(centre);
-        container.appendChild(spinnerWrap);
+        container.appendChild(renderSpinner(this.theme, { size: 60, icon: icon("shield", 22) }));
         const label = document.createElement("div");
-        label.style.cssText = `color:${this.theme.text};font-size:15px;font-weight:600;`;
+        label.style.cssText = `color:${this.theme.text};font-size:${TYPE.base}px;font-weight:600;`;
         label.textContent = "Setting up secure session";
         container.appendChild(label);
         const sub = document.createElement("div");
@@ -648,11 +620,11 @@ export class SmartComplyFlow {
         iconWrap.style.cssText = `
       width:50px;height:50px;border-radius:14px;
       display:flex;align-items:center;justify-content:center;
-      font-size:22px;
+      color:${this.theme.primary};
       background:linear-gradient(135deg,${this.theme.primary}22,${this.theme.primaryGlow});
       border:1.5px solid ${this.theme.primary}33;
     `;
-        iconWrap.textContent = isDocFlow ? "🪪" : "🛡️";
+        iconWrap.innerHTML = icon(isDocFlow ? "id-card" : "shield", 24);
         topRow.appendChild(iconWrap);
         const badge = document.createElement("div");
         badge.style.cssText = `
@@ -671,7 +643,7 @@ export class SmartComplyFlow {
         titleWrap.style.cssText = "display:flex;flex-direction:column;gap:5px;";
         const title = document.createElement("h2");
         title.style.cssText = `
-      color:${this.theme.text};font-size:20px;font-weight:700;
+      color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;
       margin:0;line-height:1.2;
     `;
         // W2: Use client brand name in title
@@ -705,7 +677,7 @@ export class SmartComplyFlow {
         const stepsWrap = document.createElement("div");
         stepsWrap.style.cssText = `
       width:100%;display:flex;flex-direction:column;gap:0;
-      border-radius:12px;overflow:hidden;
+      border-radius:${RADIUS.md}px;overflow:hidden;
       border:1.5px solid ${this.theme.border};
     `;
         steps.forEach((step, i) => {
@@ -718,7 +690,7 @@ export class SmartComplyFlow {
       `;
             const iconEl = document.createElement("div");
             iconEl.style.cssText = `
-        width:28px;height:28px;border-radius:8px;flex-shrink:0;
+        width:28px;height:28px;border-radius:${RADIUS.sm}px;flex-shrink:0;
         display:flex;align-items:center;justify-content:center;
         font-size:13px;
         background:${this.theme.primary}12;
@@ -946,7 +918,7 @@ export class SmartComplyFlow {
                 // Dropdown field
                 const select = document.createElement("select");
                 select.style.cssText = `
-          width:100%;padding:13px 16px;border-radius:12px;
+          width:100%;padding:13px 16px;border-radius:${RADIUS.md}px;
           font-size:15px;
           background:${this.theme.inputBg};
           color:${this.theme.text};
@@ -981,7 +953,7 @@ export class SmartComplyFlow {
                 fileInput.type = "file";
                 fileInput.accept = "image/*";
                 fileInput.style.cssText = `
-          width:100%;padding:12px 16px;border-radius:12px;
+          width:100%;padding:12px 16px;border-radius:${RADIUS.md}px;
           font-size:14px;font-weight:500;
           background:${this.theme.inputBg};
           color:${this.theme.text};
@@ -1025,7 +997,7 @@ export class SmartComplyFlow {
                 if (rule?.numeric)
                     input.inputMode = "numeric";
                 input.style.cssText = `
-          width:100%;padding:14px 16px;border-radius:12px;
+          width:100%;padding:14px 16px;border-radius:${RADIUS.md}px;
           font-size:16px;font-weight:500;
           background:${this.theme.inputBg};
           color:${this.theme.text};
@@ -1087,7 +1059,7 @@ export class SmartComplyFlow {
         errorEl.id = "sc-id-error";
         errorEl.style.cssText = `
       color:${this.theme.error};font-size:13px;display:none;
-      padding:8px 12px;border-radius:8px;background:${this.theme.errorBg};
+      padding:8px 12px;border-radius:${RADIUS.sm}px;background:${this.theme.errorBg};
     `;
         container.appendChild(errorEl);
         // Submit
@@ -1108,7 +1080,7 @@ export class SmartComplyFlow {
         };
         submitBtn.addEventListener("click", async () => {
             submitBtn.disabled = true;
-            submitBtn.innerHTML = `<span style="display:inline-flex;align-items:center;justify-content:center;gap:8px;"><span style="width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;animation:sc-spin 0.6s linear infinite;display:inline-block;flex-shrink:0;"></span>Verifying...</span>`;
+            submitBtn.innerHTML = `<span style="display:inline-flex;align-items:center;justify-content:center;gap:8px;">${renderInlineSpinner("#fff", 13)}Verifying...</span>`;
             errorEl.style.display = "none";
             try {
                 this.verificationResult = await this.sdk.onboarding.verify({
@@ -1235,11 +1207,11 @@ export class SmartComplyFlow {
         // W13: Pre-warm camera silently while user reads this screen
         this._prewarmCamera();
         const iconWrap = document.createElement("div");
-        iconWrap.style.cssText = `width:64px;height:64px;border-radius:50%;background:${this.theme.primary}15;border:2px solid ${this.theme.primary}30;display:flex;align-items:center;justify-content:center;font-size:28px;`;
-        iconWrap.textContent = "🛡️";
+        iconWrap.style.cssText = `width:64px;height:64px;border-radius:50%;background:${this.theme.primary}15;border:2px solid ${this.theme.primary}30;display:flex;align-items:center;justify-content:center;color:${this.theme.primary};`;
+        iconWrap.innerHTML = icon("shield", 28);
         container.appendChild(iconWrap);
         const title = document.createElement("h2");
-        title.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        title.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
         title.textContent = this._ivsName ? `Is this you?` : "Identity Confirmed";
         container.appendChild(title);
         if (this._ivsName) {
@@ -1303,12 +1275,25 @@ export class SmartComplyFlow {
         }
         // W13: Pre-warm camera while user reads
         this._prewarmCamera();
+        // Step badge — pairs with DocumentCapture.showPreview's "Step 1 of 2"
+        // badge shown right after capture, so this doesn't read as unexplained
+        // repetition: that screen checked photo clarity, this one checks the
+        // OCR-extracted data.
+        const stepBadge = document.createElement("div");
+        stepBadge.style.cssText = `
+      display:inline-flex;align-items:center;gap:5px;
+      padding:3px 11px;border-radius:${RADIUS.pill}px;
+      font-size:10.5px;font-weight:600;letter-spacing:0.2px;
+      color:${this.theme.primary};background:${this.theme.primary}15;border:1px solid ${this.theme.primary}30;
+    `;
+        stepBadge.textContent = "STEP 2 OF 2 · CHECK WHAT WE READ";
+        container.appendChild(stepBadge);
         const iconWrap = document.createElement("div");
-        iconWrap.style.cssText = `width:64px;height:64px;border-radius:50%;background:${this.theme.primary}15;border:2px solid ${this.theme.primary}30;display:flex;align-items:center;justify-content:center;font-size:28px;`;
-        iconWrap.textContent = "📄";
+        iconWrap.style.cssText = `width:64px;height:64px;border-radius:50%;background:${this.theme.primary}15;border:2px solid ${this.theme.primary}30;display:flex;align-items:center;justify-content:center;color:${this.theme.primary};`;
+        iconWrap.innerHTML = icon("document", 28);
         container.appendChild(iconWrap);
         const title = document.createElement("h2");
-        title.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        title.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
         title.textContent = "Are these your details?";
         container.appendChild(title);
         const sub = document.createElement("p");
@@ -1400,19 +1385,10 @@ export class SmartComplyFlow {
     // ── W6+W7+W8: OCR Gate (document verification) ───────────────────
     renderOcrGate(container) {
         container.style.cssText += "display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 0;text-align:center;";
-        const spinnerWrap = document.createElement("div");
-        spinnerWrap.style.cssText = "position:relative;width:52px;height:52px;flex-shrink:0;";
-        const ring = document.createElement("div");
-        ring.style.cssText = `position:absolute;inset:0;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.9s linear infinite;`;
-        const centre = document.createElement("div");
-        centre.style.cssText = "position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;";
-        centre.textContent = "📄";
-        spinnerWrap.appendChild(ring);
-        spinnerWrap.appendChild(centre);
-        container.appendChild(spinnerWrap);
+        container.appendChild(renderSpinner(this.theme, { size: 52, icon: icon("document", 20) }));
         const statusEl = document.createElement("div");
         statusEl.setAttribute("aria-live", "polite");
-        statusEl.style.cssText = `color:${this.theme.text};font-size:15px;font-weight:600;`;
+        statusEl.style.cssText = `color:${this.theme.text};font-size:${TYPE.base}px;font-weight:600;`;
         statusEl.textContent = "Reading your document…";
         container.appendChild(statusEl);
         const subEl = document.createElement("div");
@@ -1513,7 +1489,7 @@ export class SmartComplyFlow {
         icon.textContent = "📅";
         container.appendChild(icon);
         const t = document.createElement("h2");
-        t.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        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");
@@ -1539,7 +1515,7 @@ export class SmartComplyFlow {
         icon.textContent = "🔍";
         container.appendChild(icon);
         const t = document.createElement("h2");
-        t.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        t.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
         t.textContent = "Document Photo Unclear";
         container.appendChild(t);
         const msg = reason === "image_too_blurry" ? "Your document photo is too blurry. Please retake it in good lighting with a steady hand."
@@ -1576,11 +1552,11 @@ export class SmartComplyFlow {
             verificationResult: this.verificationResult || undefined,
         });
         const iconWrap = document.createElement("div");
-        iconWrap.style.cssText = `width:80px;height:80px;border-radius:50%;background:${this.theme.successBg};border:3px solid ${this.theme.success};display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:${this.theme.success};animation:sc-pop 0.4s ease;`;
-        iconWrap.textContent = "✓";
+        iconWrap.style.cssText = `width:80px;height:80px;border-radius:50%;background:${this.theme.successBg};border:3px solid ${this.theme.success};display:flex;align-items:center;justify-content:center;color:${this.theme.success};animation:sc-pop 0.4s ease;`;
+        iconWrap.innerHTML = icon("check", 36);
         container.appendChild(iconWrap);
         const title = document.createElement("h2");
-        title.style.cssText = `color:${this.theme.text};font-size:22px;font-weight:700;margin:0;`;
+        title.style.cssText = `color:${this.theme.text};font-size:${TYPE.headingLg}px;font-weight:700;margin:0;`;
         title.textContent = "You're all done!";
         container.appendChild(title);
         const desc = document.createElement("p");
@@ -1607,7 +1583,7 @@ export class SmartComplyFlow {
         icon.textContent = "⚠️";
         container.appendChild(icon);
         const t = document.createElement("h2");
-        t.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        t.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
         t.textContent = "Unable to Complete Verification";
         container.appendChild(t);
         const d = document.createElement("p");
@@ -1662,15 +1638,12 @@ export class SmartComplyFlow {
                 }
                 this.documentBlob = blob;
                 // Show scanning state
-                captureContainer.innerHTML = `
-      <div style="display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 20px;">
-        <div style="position:relative;width:52px;height:52px;">
-          <div style="position:absolute;inset:0;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.8s linear infinite;"></div>
-          <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;">🔍</div>
-        </div>
+                captureContainer.innerHTML = "";
+                captureContainer.style.cssText += "display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 20px;";
+                captureContainer.appendChild(renderSpinner(this.theme, { size: 52, icon: icon("search", 20) }));
+                captureContainer.insertAdjacentHTML("beforeend", `
         <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>
-      </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>`);
                 // Create liveness entry with document.
                 // Use the first collected field value as identifier when available
                 // (document flow has no data-verification step, so collectedFields is
@@ -1734,15 +1707,12 @@ export class SmartComplyFlow {
                     console.log(`Retrying document processing (attempt ${retryCount}/${maxRetries})`);
                     // Show retry message
                     if (captureContainer) {
-                        captureContainer.innerHTML = `
-              <div style="display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 20px;text-align:center;">
-                <div style="position:relative;width:52px;height:52px;">
-                  <div style="position:absolute;inset:0;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.8s linear infinite;"></div>
-                  <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;">🔄</div>
-                </div>
+                        captureContainer.innerHTML = "";
+                        captureContainer.style.cssText += "display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 20px;text-align:center;";
+                        captureContainer.appendChild(renderSpinner(this.theme, { size: 52, icon: icon("refresh", 20) }));
+                        captureContainer.insertAdjacentHTML("beforeend", `
                 <div style="color:${this.theme.text};font-size:14px;font-weight:600;">Retrying...</div>
-                <div style="color:${this.theme.textSecondary};font-size:12px;max-width:240px;line-height:1.5;">Attempt ${retryCount} of ${maxRetries}</div>
-              </div>`;
+                <div style="color:${this.theme.textSecondary};font-size:12px;max-width:240px;line-height:1.5;">Attempt ${retryCount} of ${maxRetries}</div>`);
                     }
                     // Wait before retry
                     await new Promise(resolve => setTimeout(resolve, 2000));
@@ -1804,7 +1774,7 @@ export class SmartComplyFlow {
                 const retryBtn = document.createElement("button");
                 retryBtn.textContent = "Try Again";
                 retryBtn.setAttribute("aria-label", "Retake document photo");
-                retryBtn.style.cssText = `margin-top:8px;padding:12px 24px;border-radius:8px;background:${this.theme.primary};color:#fff;border:none;font-size:14px;font-weight:600;cursor:pointer;`;
+                retryBtn.style.cssText = `margin-top:8px;padding:12px 24px;border-radius:${RADIUS.sm}px;background:${this.theme.primary};color:#fff;border:none;font-size:14px;font-weight:600;cursor:pointer;`;
                 retryBtn.addEventListener("click", () => this.showStep("document_capture"));
                 wrap.appendChild(retryBtn);
             }
@@ -1865,6 +1835,12 @@ export class SmartComplyFlow {
                     : "liveness_only",
             // B4: pass pre-warmed stream so camera.open() is skipped
             prewarmedStream: this._prewarmedStream || undefined,
+            colors: {
+                primary: this.theme.primary,
+                success: this.theme.success,
+                error: this.theme.error,
+                warning: this.theme.warning,
+            },
         }, ["BLINK"], this.livenessEntryId || undefined)
             .then((result) => {
             // W11: After submit, end user is done — show "You're all done" screen.
@@ -1906,14 +1882,14 @@ export class SmartComplyFlow {
         // /v1/sdk/liveness/submit/) are an operator-facing problem, not something
         // the end user can act on — never show "wallet"/"balance" language to them.
         const isBillingErr = /wallet|balance|insufficient.*fund|payment.*required/i.test(message);
-        const errorIcon = isCameraErr ? "📷"
-            : isNetworkErr ? "📡"
-                : isAuthErr ? "⏱"
-                    : isDocQuality ? "🔍"
-                        : isExpiredDoc ? "📅"
-                            : isFaceMatch ? "🤳"
-                                : isBillingErr ? "⚠️"
-                                    : "✕";
+        const errorIconName = isCameraErr ? "camera"
+            : isNetworkErr ? "network"
+                : isAuthErr ? "clock"
+                    : isDocQuality ? "search"
+                        : isExpiredDoc ? "calendar"
+                            : isFaceMatch ? "face"
+                                : isBillingErr ? "warning"
+                                    : "close";
         const errorTitle = isCameraErr ? "Camera Access Required"
             : isNetworkErr ? "Connection Problem"
                 : isAuthErr ? "Session Expired"
@@ -1942,14 +1918,14 @@ export class SmartComplyFlow {
         iconWrap.style.cssText = `
       width:72px;height:72px;border-radius:50%;
       display:flex;align-items:center;justify-content:center;
-      font-size:28px;
+      color:${this.theme.error};
       background:${this.theme.errorBg};
       border:3px solid ${this.theme.error};
     `;
-        iconWrap.textContent = errorIcon;
+        iconWrap.innerHTML = icon(errorIconName, 28);
         wrapper.appendChild(iconWrap);
         const title = document.createElement("h2");
-        title.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        title.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
         title.textContent = errorTitle;
         wrapper.appendChild(title);
         const desc = document.createElement("p");
@@ -1988,7 +1964,7 @@ export class SmartComplyFlow {
         this.headerBackBtn.innerHTML = "&#8592;";
         this.headerBackBtn.setAttribute("aria-label", "Go back to previous step");
         this.headerBackBtn.style.cssText = `
-      width:30px;height:30px;border-radius:8px;flex-shrink:0;
+      width:30px;height:30px;border-radius:${RADIUS.sm}px;flex-shrink:0;
       display:none;align-items:center;justify-content:center;
       border:1.5px solid ${this.theme.border};cursor:pointer;
       font-size:16px;line-height:1;
@@ -2046,7 +2022,7 @@ export class SmartComplyFlow {
         closeBtn.innerHTML = "✕";
         closeBtn.setAttribute("aria-label", "Close identity verification");
         closeBtn.style.cssText = `
-      width:32px;height:32px;border-radius:8px;flex-shrink:0;
+      width:32px;height:32px;border-radius:${RADIUS.sm}px;flex-shrink:0;
       display:flex;align-items:center;justify-content:center;
       border:none;cursor:pointer;font-size:16px;
       background:${this.theme.shimmer};color:${this.theme.textMuted};
@@ -2083,7 +2059,7 @@ export class SmartComplyFlow {
     createStepTitle(text) {
         const el = document.createElement("h3");
         el.style.cssText = `
-      color:${this.theme.text};font-size:18px;font-weight:700;
+      color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;
       margin:0;
     `;
         el.textContent = text;
@@ -2093,7 +2069,7 @@ export class SmartComplyFlow {
         const card = document.createElement("button");
         card.setAttribute("aria-label", subtitle ? `${title}: ${subtitle}` : title);
         card.style.cssText = `
-      width:100%;padding:13px 16px;border-radius:12px;
+      width:100%;padding:13px 16px;border-radius:${RADIUS.md}px;
       background:${this.theme.cardBg};
       border:2px solid ${this.theme.border};
       cursor:pointer;text-align:left;
@@ -2133,7 +2109,7 @@ export class SmartComplyFlow {
         const btn = document.createElement("button");
         btn.textContent = text;
         btn.style.cssText = `
-      width:100%;padding:14px;border-radius:12px;
+      width:100%;padding:14px;border-radius:${RADIUS.md}px;
       font-size:15px;font-weight:600;
       background:${this.theme.primary};color:#fff;
       border:none;cursor:pointer;
@@ -2154,7 +2130,7 @@ export class SmartComplyFlow {
         const btn = document.createElement("button");
         btn.textContent = text;
         btn.style.cssText = `
-      width:100%;padding:12px;border-radius:12px;
+      width:100%;padding:12px;border-radius:${RADIUS.md}px;
       font-size:14px;font-weight:500;
       background:transparent;color:${this.theme.textSecondary};
       border:none;cursor:pointer;
@@ -2292,9 +2268,6 @@ export class SmartComplyFlow {
         const style = document.createElement("style");
         style.id = "sc-flow-styles";
         style.textContent = `
-      @keyframes sc-spin {
-        to { transform: rotate(360deg); }
-      }
       @keyframes sc-pop {
         0% { transform: scale(0.8); opacity: 0; }
         50% { transform: scale(1.05); }