smartcomply-web-sdk 1.0.89 → 1.0.91

package/dist/esm/flow/SmartComplyFlow.js

@@ -6,6 +6,7 @@ import { requiresBackSide } from "../utils/documentRules";
 import { DEFAULT_CHALLENGE_ACTIONS } from "../utils/constants";
 import { icon } from "./icons";
 import { renderSpinner, renderInlineSpinner } from "./spinner";
+import { SDKError } from "../errors/SDKError";
 // A dropped camera/network/upload error is not the user's fault and must not
 // cost them a retry attempt — only a genuine verification outcome should.
 // Classified by message rather than a typed error class since the errors
@@ -66,6 +67,18 @@ const COUNTRY_LABELS = {
 function isUploadFieldType(type) {
     return type === "upload" || type === "image" || type === "file";
 }
+/**
+ * Whether a showErrorStep() message is about an expired/invalid resume or
+ * resubmit link (RESUME_TARGET_UNAVAILABLE / NOT_A_RESUME_TOKEN — see
+ * SmartComplyFlow._resolveResumeStep), rather than a plain session timeout.
+ * Extracted to a standalone function so this specific classification is
+ * independently testable, same as resolveIdTypeInfo below — showErrorStep's
+ * own regex-based classification block is otherwise tightly coupled to DOM
+ * rendering it doesn't make sense to extract wholesale for this fix.
+ */
+export function isResumeLinkErrorMessage(message) {
+    return /resume link|resubmit link/i.test(message);
+}
 export function resolveIdTypeInfo(typeName, isDocumentFlow) {
     const u = typeName.toUpperCase();
     const advanced = u.includes("ADVANCED");
@@ -654,12 +667,114 @@ export class SmartComplyFlow {
             }
             if (this.isDestroyed)
                 return;
-            this.showStep("welcome");
+            if (this.options.resumeToken) {
+                // null means _resolveResumeStep already rendered an error itself
+                // (a provably expired/invalid resume link — see that method) and
+                // there is no step left to show; calling showStep() in that case
+                // would wipe the error message straight back out.
+                const resumeStep = await this._resolveResumeStep();
+                if (resumeStep !== null)
+                    this.showStep(resumeStep);
+            }
+            else {
+                this.showStep("welcome");
+            }
         }
         catch (err) {
             this.showErrorStep(err.message || "Failed to initialize. Please try again.");
         }
     }
+    // Resolves a resume_token to the step the customer should land on,
+    // pre-selecting the same country/ID type the original attempt used (the
+    // same state renderCountrySelect/renderIdTypeSelect's own click handlers
+    // set) so document_capture/liveness render correctly instead of assuming
+    // state that was never set. Falls back to "welcome" on anything that
+    // doesn't resolve cleanly for an UNCERTAIN reason (network error, timeout)
+    // — this is a UX improvement, not a requirement: the backend's own
+    // resume-match at create/ time still works correctly even if the widget
+    // can't figure out which screen to pre-select.
+    //
+    // Returns null instead when the lookup fails for a CERTAIN, known reason
+    // — the resume link itself is provably expired or already used
+    // (RESUME_TARGET_UNAVAILABLE) or was never a resume link at all
+    // (NOT_A_RESUME_TOKEN). Unlike a transient failure, there is no "try the
+    // real request and it'll still work" fallback for these: create/'s own
+    // resume-match reads the exact same resume_target_entry binding this
+    // lookup just found missing/invalid, so falling through to a generic
+    // welcome screen would silently walk the customer into a brand-new,
+    // unrelated verification attempt with no explanation — worse than telling
+    // them plainly that their link no longer works. The caller shows this
+    // error itself (via showErrorStep, called here directly) rather than
+    // rendering a step.
+    async _resolveResumeStep() {
+        try {
+            const info = await this.sdk.getResumeInfo();
+            if (info.verification_type === "liveness_only" ||
+                info.failure_stage === "liveness" ||
+                // data_match is always a selfie-vs-identity-photo mismatch (see the
+                // backend's own comment in _process_identity_face_match) — fixed by
+                // redoing the selfie/video, same as a "liveness" failure. There is
+                // no document step in data verification at all, so this can never
+                // legitimately need document_capture.
+                info.failure_stage === "data_match") {
+                // Nothing to re-select — there's no document channel to pick, just
+                // liveness itself to redo. selectedCountry still needs a non-blank
+                // value (renderLiveness sends it as a required field) the same way
+                // the liveness-only welcome-screen path already handles this.
+                this.selectedCountry = info.country || this.selectedCountry || "global";
+                return "liveness";
+            }
+            if (info.failure_stage === "document" && info.country && info.identifier_type) {
+                const channels = this.sdkConfig?.channels || {};
+                const idTypes = channels[info.country] || [];
+                const match = idTypes.find((idType) => {
+                    const code = typeof idType === "string" ? idType : (idType.code || idType.name);
+                    return code === info.identifier_type;
+                });
+                if (match) {
+                    const typeName = typeof match === "string" ? match : match.name;
+                    const typeCode = typeof match === "string" ? match : (match.code || match.name);
+                    const channelFields = typeof match !== "string" ? (match.fields || []) : [];
+                    const isDocFlow = channelFields.some((f) => isUploadFieldType(f.type)) || this.isDocumentFlow();
+                    const info2 = resolveIdTypeInfo(typeName, isDocFlow);
+                    const requiresBackFromBackend = typeof match !== "string" ? match.requires_back_side : undefined;
+                    this.selectedCountry = info.country;
+                    this.selectedIdType = typeCode;
+                    this.selectedIdTypeName = typeName;
+                    this.selectedRequiresBack = requiresBackFromBackend ?? info2.requiresBack;
+                    if (typeof match !== "string") {
+                        this.selectedChannelId = match.id;
+                        this.selectedChannelFields = match.fields || [];
+                    }
+                    return "document_capture";
+                }
+                // Channel from the original submission no longer exists in this
+                // config (e.g. it was disabled since) — fall through to welcome
+                // rather than render document_capture with no title/back-side info.
+            }
+            // Nothing above matched cleanly (e.g. a document channel that no
+            // longer exists in this config) — the entry is still correctly bound
+            // server-side regardless of which screen the widget shows first.
+            return "welcome";
+        }
+        catch (err) {
+            const code = err instanceof SDKError ? err.errorCode : undefined;
+            if (code === "RESUME_TARGET_UNAVAILABLE" || code === "NOT_A_RESUME_TOKEN") {
+                // A certain, known failure — this specific link is provably no
+                // longer usable (already used, expired, or was never a resume link
+                // at all). Tell the customer plainly rather than silently starting
+                // a new, unrelated verification on a welcome screen with no
+                // explanation — see this method's own docstring above.
+                this.showErrorStep("This resume link has expired or is no longer valid.");
+                return null;
+            }
+            // Anything else (network error, timeout, an SDKError with a
+            // different/absent code) — never block the flow on this lookup.
+            // create/'s own resume-match still runs correctly once the customer
+            // gets there, so falling through to a generic welcome screen is safe.
+            return "welcome";
+        }
+    }
     // Defers the expiry warning while the user is on a camera-active step
     // (document_capture/liveness) — showing it there would blow away a live
     // video element and in-progress MediaRecorder mid-scan.
@@ -2264,7 +2379,14 @@ export class SmartComplyFlow {
         // Classify the error into a user-friendly category
         const isCameraErr = /camera|permission|notallowed|notfound/i.test(message);
         const isNetworkErr = /network|timeout|connection|fetch/i.test(message);
-        const isAuthErr = /session.*expired|token.*expired|authentication/i.test(message);
+        // Checked before the generic isAuthErr below — a resume/resubmit link
+        // (RESUME_TARGET_UNAVAILABLE / NOT_A_RESUME_TOKEN from the backend, see
+        // _resolveResumeStep) also matches "token...expired"/"link" wording, but
+        // the corrective action is different from a plain session timeout: the
+        // customer can't just "start again" themselves, they need a fresh link
+        // from whoever sent them this one.
+        const isResumeLinkErr = isResumeLinkErrorMessage(message);
+        const isAuthErr = !isResumeLinkErr && /session.*expired|token.*expired|authentication/i.test(message);
         const isDocQuality = /blurry|blur|quality|glare|dark|bright|lighting/i.test(message);
         const isExpiredDoc = /document.*expired|expired.*document/i.test(message);
         const isFaceMatch = /face.*match|selfie.*match|does not match/i.test(message);
@@ -2274,36 +2396,40 @@ export class SmartComplyFlow {
         const isBillingErr = /wallet|balance|insufficient.*fund|payment.*required/i.test(message);
         const errorIconName = isCameraErr ? "camera"
             : isNetworkErr ? "network"
-                : isAuthErr ? "clock"
-                    : isDocQuality ? "search"
-                        : isExpiredDoc ? "calendar"
-                            : isFaceMatch ? "face"
-                                : isBillingErr ? "warning"
-                                    : "close";
+                : isResumeLinkErr ? "clock"
+                    : isAuthErr ? "clock"
+                        : isDocQuality ? "search"
+                            : isExpiredDoc ? "calendar"
+                                : isFaceMatch ? "face"
+                                    : isBillingErr ? "warning"
+                                        : "close";
         const errorTitle = isCameraErr ? "Camera Access Required"
             : isNetworkErr ? "Connection Problem"
-                : isAuthErr ? "Session Expired"
-                    : isDocQuality ? "Document Photo Unclear"
-                        : isExpiredDoc ? "Document Expired"
-                            : isFaceMatch ? "Face Match Failed"
-                                : isBillingErr ? "Verification Unavailable"
-                                    : "Verification Unsuccessful";
+                : isResumeLinkErr ? "Link No Longer Valid"
+                    : isAuthErr ? "Session Expired"
+                        : isDocQuality ? "Document Photo Unclear"
+                            : isExpiredDoc ? "Document Expired"
+                                : isFaceMatch ? "Face Match Failed"
+                                    : isBillingErr ? "Verification Unavailable"
+                                        : "Verification Unsuccessful";
         // Map to user-facing guidance — never show raw internal message
         const userMessage = isCameraErr
             ? "Please allow camera access in your browser settings and try again."
             : isNetworkErr
                 ? "Check your internet connection and try again."
-                : isAuthErr
-                    ? "Your session has expired. Please start again."
-                    : isDocQuality
-                        ? _sanitizeUserMessage(message) || "Please retake your document photo in good lighting with no glare."
-                        : isExpiredDoc
-                            ? "The document you submitted has expired. Please use a valid, current ID."
-                            : isFaceMatch
-                                ? "Your selfie did not match the photo on your ID. Please ensure you are using your own valid document and face the camera directly."
-                                : isBillingErr
-                                    ? "Verification is temporarily unavailable. Please contact support."
-                                    : _sanitizeUserMessage(message) || "We were unable to complete your verification. Please try again.";
+                : isResumeLinkErr
+                    ? "This link has expired or has already been used. Please contact us to request a new one."
+                    : isAuthErr
+                        ? "Your session has expired. Please start again."
+                        : isDocQuality
+                            ? _sanitizeUserMessage(message) || "Please retake your document photo in good lighting with no glare."
+                            : isExpiredDoc
+                                ? "The document you submitted has expired. Please use a valid, current ID."
+                                : isFaceMatch
+                                    ? "Your selfie did not match the photo on your ID. Please ensure you are using your own valid document and face the camera directly."
+                                    : isBillingErr
+                                        ? "Verification is temporarily unavailable. Please contact support."
+                                        : _sanitizeUserMessage(message) || "We were unable to complete your verification. Please try again.";
         const iconWrap = document.createElement("div");
         iconWrap.style.cssText = `
       width:72px;height:72px;border-radius:50%;