feat(document): adaptive contour-Canny for low-contrast backgrounds

packages/embed/cypress/tests/document-verification.cy.cjs

@@ -131,7 +131,11 @@ describe('document verification', () => {
 
     cy.wait('@successfulUpload');
 
-    cy.getIFrameBody().find('#complete-screen').should('be.visible');
+    // The document submission UI now shows the completion state in-place
+    // (image + tick) rather than switching to the legacy #complete-screen.
+    cy.getIFrameBody()
+      .find('#doc-submission')
+      .should('have.attr', 'submission-state', 'success');
   });
 });
 
@@ -278,6 +282,10 @@ describe('legacy support - preselected country / id_types', () => {
 
     cy.wait('@successfulUpload');
 
-    cy.getIFrameBody().find('#complete-screen').should('be.visible');
+    // The document submission UI now shows the completion state in-place
+    // (image + tick) rather than switching to the legacy #complete-screen.
+    cy.getIFrameBody()
+      .find('#doc-submission')
+      .should('have.attr', 'submission-state', 'success');
   });
 });

packages/embed/cypress/tests/enhanced-document-verification-dev.cy.cjs

@@ -126,6 +126,10 @@ describe('enhanced document verification', () => {
 
     cy.wait('@successfulUpload');
 
-    cy.getIFrameBody().find('#complete-screen').should('be.visible');
+    // The document submission UI now shows the completion state in-place
+    // (image + tick) rather than switching to the legacy #complete-screen.
+    cy.getIFrameBody()
+      .find('#doc-submission')
+      .should('have.attr', 'submission-state', 'success');
   });
 });

packages/embed/cypress/tests/enhanced-document-verification.cy.cjs

@@ -130,6 +130,10 @@ describe('enhanced document verification', () => {
 
     cy.wait('@successfulUpload');
 
-    cy.getIFrameBody().find('#complete-screen').should('be.visible');
+    // The document submission UI now shows the completion state in-place
+    // (image + tick) rather than switching to the legacy #complete-screen.
+    cy.getIFrameBody()
+      .find('#doc-submission')
+      .should('have.attr', 'submission-state', 'success');
   });
 });

packages/embed/cypress/tests/id-selection.cy.cjs

@@ -209,7 +209,9 @@ describe('No ID Selection', () => {
 
     cy.wait('@successfulUpload');
 
-    cy.getIFrameBody().find('#complete-screen').should('be.visible');
+    cy.getIFrameBody()
+      .find('#doc-submission')
+      .should('have.attr', 'submission-state', 'success');
   });
 
   it('enhanced_kyc', () => {
@@ -470,7 +472,9 @@ describe('Preselected Country', () => {
 
     cy.wait('@successfulUpload');
 
-    cy.getIFrameBody().find('#complete-screen').should('be.visible');
+    cy.getIFrameBody()
+      .find('#doc-submission')
+      .should('have.attr', 'submission-state', 'success');
   });
 
   it('enhanced_kyc', () => {
@@ -725,7 +729,9 @@ describe('Preselected Country and ID Type', () => {
 
     cy.wait('@successfulUpload');
 
-    cy.getIFrameBody().find('#complete-screen').should('be.visible');
+    cy.getIFrameBody()
+      .find('#doc-submission')
+      .should('have.attr', 'submission-state', 'success');
   });
 
   it('enhanced_kyc', () => {

packages/embed/src/doc-verification.html

@@ -248,33 +248,12 @@ <h1 style="--flow-space: 4rem" data-i18n="pages.loading.title">
       >
       </smart-camera-web>
 
-      <section hidden id="upload-progress-screen" class="flow center">
-        <br />
-        <p class="spinner"></p>
-
-        <h1 style="--flow-space: 4rem" data-i18n="pages.upload.title">
-          Uploading
-        </h1>
-
-        <p>
-          <span data-i18n="pages.upload.subtitle">Just a few more seconds</span>
-          <br />
-          <span data-i18n="pages.upload.description"
-            >We are processing your request</span
-          >
-        </p>
-
-        <p class="center credits">
-          <span class="visually-hidden">Powered by SmileID</span>
-          <svg
-            aria-hidden="true"
-            viewBox="0 0 90 9"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <use href="#attribution" />
-          </svg>
-        </p>
+      <section hidden id="upload-progress-screen">
+        <document-capture-submission
+          id="doc-submission"
+          submission-state="submitting"
+          style="display: block; width: 100%; min-height: 100vh"
+        ></document-capture-submission>
       </section>
 
       <section hidden id="upload-failure-screen" class="flow center">

packages/embed/src/enhanced-document-verification.html

@@ -254,33 +254,12 @@ <h1 style="--flow-space: 4rem" data-i18n="pages.loading.title">
       >
       </smart-camera-web>
 
-      <section hidden id="upload-progress-screen" class="flow center">
-        <br />
-        <p class="spinner"></p>
-
-        <h1 style="--flow-space: 4rem" data-i18n="pages.upload.title">
-          Uploading
-        </h1>
-
-        <p>
-          <span data-i18n="pages.upload.subtitle">Just a few more seconds</span>
-          <br />
-          <span data-i18n="pages.upload.description"
-            >We are processing your request</span
-          >
-        </p>
-
-        <p class="center credits">
-          <span class="visually-hidden">Powered by SmileID</span>
-          <svg
-            aria-hidden="true"
-            viewBox="0 0 90 9"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <use href="#attribution" />
-          </svg>
-        </p>
+      <section hidden id="upload-progress-screen">
+        <document-capture-submission
+          id="doc-submission"
+          submission-state="submitting"
+          style="display: block; width: 100%; min-height: 100vh"
+        ></document-capture-submission>
       </section>
 
       <section hidden id="upload-failure-screen" class="flow center">

packages/embed/src/js/doc-verification.js

@@ -59,6 +59,7 @@ window.Sentry = Sentry;
   );
   const UploadFailureScreen = document.querySelector('#upload-failure-screen');
   const CompleteScreen = document.querySelector('#complete-screen');
+  const DocSubmission = document.querySelector('#doc-submission');
 
   const CloseIframeButtons = document.querySelectorAll('.close-iframe');
   const RetryUploadButton = document.querySelector('#retry-upload');
@@ -693,6 +694,7 @@ window.Sentry = Sentry;
     'smart-camera-web.publish',
     (event) => {
       images = event.detail.images;
+      showDocSubmission(images);
       setActiveScreen(UploadProgressScreen);
       handleFormSubmit(event);
     },
@@ -715,6 +717,11 @@ window.Sentry = Sentry;
     false,
   );
 
+  // Close affordance on the submission screen (mirrors the iframe close).
+  window.addEventListener('document-capture-submission.close', () => {
+    closeWindow(true);
+  });
+
   RetryUploadButton.addEventListener(
     'click',
     () => {
@@ -773,6 +780,68 @@ window.Sentry = Sentry;
     activeScreen = node;
   }
 
+  // Reconstruct a data URI for the captured document so the submission screen
+  // can show it behind the status card. Publish images carry raw base64 with
+  // the data: prefix stripped, so we re-add it.
+  //
+  // Pick the most recent ID-card image by type id (front=3, back=7) rather than
+  // blindly taking the last array entry — enhanced flows also publish selfie
+  // (2) / liveness (6) frames, and relying on append order would risk showing a
+  // face behind the document card. Sniff PNG vs JPEG from the base64 signature
+  // so gallery-uploaded PNGs aren't mislabelled.
+  function getDocPreviewDataUri(capturedImages) {
+    if (!Array.isArray(capturedImages)) return '';
+    const ID_CARD_TYPE_IDS = [3, 7];
+    const docImages = capturedImages.filter(
+      (img) => img?.image && ID_CARD_TYPE_IDS.includes(img.image_type_id),
+    );
+    const chosen =
+      docImages[docImages.length - 1] ||
+      capturedImages[capturedImages.length - 1];
+    if (!chosen?.image) return '';
+    const mime = chosen.image.startsWith('iVBOR') ? 'image/png' : 'image/jpeg';
+    return `data:${mime};base64,${chosen.image}`;
+  }
+
+  // Prime the <document-capture-submission> element with the captured image,
+  // partner theme/attribution, and the initial "submitting" state.
+  function showDocSubmission(capturedImages) {
+    if (!DocSubmission) return;
+    const previewSrc = getDocPreviewDataUri(capturedImages);
+    if (previewSrc) DocSubmission.setAttribute('image-src', previewSrc);
+    if (config.partner_details?.theme_color) {
+      DocSubmission.setAttribute(
+        'theme-color',
+        config.partner_details.theme_color,
+      );
+    }
+    if (config.hide_attribution) {
+      DocSubmission.setAttribute('hide-attribution', 'true');
+    }
+    DocSubmission.setAttribute('show-navigation', '');
+    // Clear any message left over from a prior attempt before re-submitting.
+    DocSubmission.removeAttribute('submission-message');
+    DocSubmission.setAttribute('submission-state', 'submitting');
+  }
+
+  // Flip the submission card between submitting → success / error. Driven by
+  // the upload lifecycle below (mirrors the Enhanced SmartSelfie host pattern).
+  // Falls back to the legacy static screens if the element isn't present.
+  function setDocSubmissionState(state, message) {
+    if (!DocSubmission) {
+      setActiveScreen(
+        state === 'success' ? CompleteScreen : UploadFailureScreen,
+      );
+      return;
+    }
+    DocSubmission.setAttribute('submission-state', state);
+    if (message) {
+      DocSubmission.setAttribute('submission-message', message);
+    } else {
+      DocSubmission.removeAttribute('submission-message');
+    }
+  }
+
   async function handleFormSubmit(event) {
     event.preventDefault();
     const errorMessage = document.querySelector('.validation-message');
@@ -891,25 +960,29 @@ window.Sentry = Sentry;
     });
 
     request.upload.addEventListener('error', function (e) {
+      // Errors keep the legacy failure screen so the user retains the
+      // "Retry" affordance (#retry-upload); only success uses the new
+      // in-place submission card. Report rather than throw — a throw inside
+      // this listener is unhandled (no caller to catch it).
       setActiveScreen(UploadFailureScreen);
-      throw new Error('uploadZip failed', { cause: e });
+      console.error('SmileIdentity - uploadZip failed', e);
     });
 
     request.onreadystatechange = function () {
       if (
         request.readyState === XMLHttpRequest.DONE &&
         request.status === 200
       ) {
-        setActiveScreen(CompleteScreen);
+        setDocSubmissionState('success');
         handleSuccess();
-        window.setTimeout(closeWindow, 2000);
+        window.setTimeout(closeWindow, 2500);
       }
       if (
         request.readyState === XMLHttpRequest.DONE &&
         request.status !== 200
       ) {
         setActiveScreen(UploadFailureScreen);
-        throw new Error('uploadZip failed', { cause: request });
+        console.error('SmileIdentity - uploadZip failed', request.status);
       }
     };