@smileid/web-components 1.4.4 → 1.4.5-alpha.1

package/components/document/src/DocumentCaptureScreens.js

@@ -5,7 +5,9 @@ import SmartCamera from '../../../domain/camera/src/SmartCamera';
 import './document-capture';
 import './document-capture-review';
 import './document-capture-instructions';
-import { version as COMPONENTS_VERSION } from '../../../package.json';
+import packageJson from '../../../package.json';
+
+const COMPONENTS_VERSION = packageJson.version;
 
 async function getPermissions(captureScreen) {
   try {
@@ -34,20 +36,23 @@ class DocumentCaptureScreens extends HTMLElement {
     this.innerHTML = `
       ${styles(this.themeColor)}
       <div>
-      <document-capture-instructions theme-color='${this.themeColor}' id='document-capture-instructions-front' ${this.title} ${this.documentCaptureModes} ${this.showNavigation} ${this.hideInstructions ? 'hidden' : ''}></document-capture-instructions>
+      <document-capture-instructions theme-color='${this.themeColor}' id='document-capture-instructions-front' ${this.title}
+      ${this.documentCaptureModes} ${this.showNavigation} ${this.hideInstructions ? 'hidden' : ''}
+      ${this.hideAttribution}
+      ></document-capture-instructions>
       <document-capture id='document-capture-front' side-of-id='Front'
-      ${this.title} ${this.showNavigation} ${this.hideInstructions ? '' : 'hidden'} 
+      ${this.title} ${this.showNavigation} ${this.hideInstructions ? '' : 'hidden'} ${this.hideAttribution}
       ${this.documentCaptureModes} ${this.documentType} theme-color='${this.themeColor}'
       ></document-capture>
       <document-capture-instructions id='document-capture-instructions-back' side-of-id='Back' title='Submit Back of ID'
-       ${this.documentCaptureModes} ${this.showNavigation} theme-color='${this.themeColor}' hidden
+       ${this.documentCaptureModes} ${this.showNavigation} theme-color='${this.themeColor}' ${this.hideAttribution} hidden
        ></document-capture-instructions>
       <document-capture id='document-capture-back' side-of-id='Back' ${this.title} ${this.showNavigation}
-      ${this.documentCaptureModes} theme-color='${this.themeColor}'
+      ${this.documentCaptureModes} theme-color='${this.themeColor}' ${this.hideAttribution}
       hidden 
       ></document-capture>
-      <document-capture-review id='front-of-document-capture-review' theme-color='${this.themeColor}' hidden></document-capture-review>
-      <document-capture-review id='back-of-document-capture-review' theme-color='${this.themeColor}' hidden></document-capture-review>
+      <document-capture-review id='front-of-document-capture-review' theme-color='${this.themeColor}' ${this.hideAttribution} hidden></document-capture-review>
+      <document-capture-review id='back-of-document-capture-review' theme-color='${this.themeColor}' ${this.hideAttribution} hidden></document-capture-review>
       </div>
     `;
 
@@ -294,6 +299,10 @@ class DocumentCaptureScreens extends HTMLElement {
       : '';
   }
 
+  get hideAttribution() {
+    return this.hasAttribute('hide-attribution') ? 'hide-attribution' : '';
+  }
+
   get themeColor() {
     return this.getAttribute('theme-color') || '#001096';
   }

package/components/document/src/DocumentCaptureScreens.stories.js

@@ -2,9 +2,11 @@ import './index';
 
 const meta = {
   args: {
+    'hide-attribution': false,
     'theme-color': '#001096',
   },
   argTypes: {
+    'hide-attribution': { control: 'boolean' },
     'theme-color': { control: 'color' },
   },
   component: 'document-capture-screens',
@@ -14,35 +16,35 @@ export default meta;
 
 export const DocumentCapture = {
   render: (args) => `
-        <document-capture-screens theme-color='${args['theme-color']}'>
+        <document-capture-screens theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </document-capture-screens>
     `,
 };
 
 export const DocumentCaptureHiddenInstructions = {
   render: (args) => `
-        <document-capture-screens hide-instructions theme-color='${args['theme-color']}'>
+        <document-capture-screens hide-instructions theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </document-capture-screens>
     `,
 };
 
 export const DocumentCaptureHideBackOfId = {
   render: (args) => `
-        <document-capture-screens hide-back-of-id theme-color='${args['theme-color']}'>
+        <document-capture-screens hide-back-of-id theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </document-capture-screens>
     `,
 };
 
 export const DocumentCaptureAllowAttributes = {
   render: (args) => `
-        <document-capture-screens document-capture-screens-modes='camera,upload' theme-color='${args['theme-color']}'>
+        <document-capture-screens document-capture-screens-modes='camera,upload' theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </document-capture-screens>
     `,
 };
 
 export const DocumentCaptureHideInstructionNBackOfId = {
   render: (args) => `
-        <document-capture-screens hide-back-of-id hide-instructions theme-color='${args['theme-color']}'>
+        <document-capture-screens hide-back-of-id hide-instructions theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </document-capture-screens>
     `,
 };

package/components/document/src/document-capture/DocumentCapture.js

@@ -168,7 +168,7 @@ function templateString() {
         ${this.cameraError ? '' : '<p class="spinner"></p>'}
         ${this.cameraError ? `<p style="--flow-space: 4rem" class='color-red | center'>${this.cameraError}</p>` : '<p style="--flow-space: 4rem">Checking permissions</p>'}
     </div>
-    <div class='section | flow ${this.isPortraitCaptureView ? 'portrait' : 'landscape'}'>
+    <div class='section | flow ${this.isPortraitCaptureView ? 'portrait' : 'landscape'}' ${this.cameraError ? 'hidden' : ''}>
       <div class='id-video-container'>
         <div class='id-video ${this.isPortraitCaptureView ? 'portrait' : 'landscape'}' hidden>
         </div>
@@ -339,71 +339,84 @@ class DocumentCapture extends HTMLElement {
   }
 
   handleIDStream(stream) {
-    const videoExists = this.shadowRoot.querySelector('canvas');
-    if (videoExists) {
-      // remove canvas
-      videoExists.remove();
-    }
-    let video = null;
-    let canvas = null;
-    video = document.createElement('video');
-    canvas = document.createElement('canvas');
-    const videoContainer = this.shadowRoot.querySelector('.id-video-container');
-
-    video.muted = true;
-    video.setAttribute('muted', 'true');
-
-    video.autoplay = true;
-    video.playsInline = true;
-    if ('srcObject' in video) {
-      video.srcObject = stream;
-    } else {
-      video.src = window.URL.createObjectURL(stream);
-    }
-
-    canvas.width = videoContainer.clientWidth;
-    canvas.height = (videoContainer.clientWidth * 9) / 16;
-    if (this.isPortraitCaptureView) {
-      canvas.height = (videoContainer.clientWidth * 16) / 9;
-    }
+    try {
+      const videoExists = this.shadowRoot.querySelector('canvas');
+      if (videoExists) {
+        // remove canvas
+        videoExists.remove();
+      }
+      let video = null;
+      let canvas = null;
+      video = document.createElement('video');
+      canvas = document.createElement('canvas');
+      const videoContainer = this.shadowRoot.querySelector(
+        '.id-video-container',
+      );
 
-    video.onloadedmetadata = () => {
-      video.play();
+      video.muted = true;
+      video.setAttribute('muted', 'true');
 
-      this.shadowRoot.querySelector('#loader').hidden = true;
-      this.shadowRoot.querySelector('.id-video').hidden = false;
-      this.shadowRoot.querySelector('.actions').hidden = false;
-      if (!videoExists) {
-        videoContainer.prepend(canvas);
+      video.autoplay = true;
+      video.playsInline = true;
+      if ('srcObject' in video) {
+        video.srcObject = stream;
+      } else {
+        video.src = window.URL.createObjectURL(stream);
       }
-    };
 
-    const onVideoStart = () => {
-      if (video.paused || video.ended) return;
-      video.removeEventListener('playing', onVideoStart);
-      const aspectRatio = video.videoWidth / video.videoHeight;
-      const portrait = aspectRatio < 1;
+      canvas.width = videoContainer.clientWidth;
+      canvas.height = (videoContainer.clientWidth * 9) / 16;
       if (this.isPortraitCaptureView) {
-        this.updatePortraitId(canvas, video);
-        requestAnimationFrame(onVideoStart);
-        return;
+        canvas.height = (videoContainer.clientWidth * 16) / 9;
       }
 
-      if (portrait) {
-        videoContainer.classList.add('mobile-camera-screen');
-        const intermediateCanvas = document.createElement('canvas');
-        this._capturePortraitToLandscapeImage(intermediateCanvas, video);
-        this._drawLandscapeImageFromCanvas(canvas, intermediateCanvas);
-      } else {
-        this._drawLandscapeImage(canvas, video);
-      }
-      requestAnimationFrame(onVideoStart);
-    };
+      video.onloadedmetadata = () => {
+        video.play();
+
+        this.shadowRoot.querySelector('#loader').hidden = true;
+        this.shadowRoot.querySelector('.id-video').hidden = false;
+        this.shadowRoot.querySelector('.actions').hidden = false;
+        if (!videoExists) {
+          videoContainer.prepend(canvas);
+        }
+      };
+
+      const onVideoStart = () => {
+        if (video.paused || video.ended) return;
+        video.removeEventListener('playing', onVideoStart);
+        const aspectRatio = video.videoWidth / video.videoHeight;
+        const portrait = aspectRatio < 1;
+        if (this.isPortraitCaptureView) {
+          this.updatePortraitId(canvas, video);
+          requestAnimationFrame(onVideoStart);
+          return;
+        }
+
+        if (portrait) {
+          videoContainer.classList.add('mobile-camera-screen');
+          const intermediateCanvas = document.createElement('canvas');
+          this._capturePortraitToLandscapeImage(intermediateCanvas, video);
+          this._drawLandscapeImageFromCanvas(canvas, intermediateCanvas);
+        } else {
+          this._drawLandscapeImage(canvas, video);
+        }
+        requestAnimationFrame(onVideoStart);
+      };
 
-    video.addEventListener('playing', onVideoStart);
+      video.addEventListener('playing', onVideoStart);
 
-    this._IDStream = stream;
-    this._IDVideo = video;
+      this._IDStream = stream;
+      this._IDVideo = video;
+    } catch (error) {
+      this.setAttribute(
+        'data-camera-error',
+        SmartCamera.handleCameraError(error),
+      );
+      if (error.name !== 'AbortError') {
+        console.error(error);
+      }
+      SmartCamera.stopMedia();
+    }
   }
 
   _drawLandscapeImage(
@@ -731,10 +744,12 @@ class DocumentCapture extends HTMLElement {
 
   handleBackEvents() {
     this.dispatchEvent(new CustomEvent('document-capture.cancelled'));
+    SmartCamera.stopMedia();
   }
 
   handleCloseEvents() {
     this.dispatchEvent(new CustomEvent('document-capture.close'));
+    SmartCamera.stopMedia();
   }
 }
 

package/components/selfie/src/SelfieCaptureScreens.js

@@ -3,7 +3,9 @@ import './selfie-capture-instructions';
 import './selfie-capture-review';
 import SmartCamera from '../../../domain/camera/src/SmartCamera';
 import styles from '../../../styles/src/styles';
-import { version as COMPONENTS_VERSION } from '../../../package.json';
+import packageJson from '../../../package.json';
+
+const COMPONENTS_VERSION = packageJson.version;
 
 async function getPermissions(captureScreen, facingMode = 'user') {
   try {
@@ -55,8 +57,9 @@ class SelfieCaptureScreens extends HTMLElement {
 
     // If the initial screen is selfie-capture, we need to get permissions
     if (this.getAttribute('initial-screen') === 'selfie-capture') {
-      getPermissions(this.selfieCapture, this.getAgentMode());
-      this.setActiveScreen(this.selfieCapture);
+      getPermissions(this.selfieCapture, this.getAgentMode()).then(() =>
+        this.setActiveScreen(this.selfieCapture),
+      );
     } else if (this.hideInstructions) {
       this.setActiveScreen(this.selfieCapture);
     } else {
@@ -83,8 +86,9 @@ class SelfieCaptureScreens extends HTMLElement {
     this.selfieInstruction.addEventListener(
       'selfie-capture-instructions.capture',
       async () => {
-        await getPermissions(this.selfieCapture, this.getAgentMode());
-        this.setActiveScreen(this.selfieCapture);
+        await getPermissions(this.selfieCapture, this.getAgentMode()).then(() =>
+          this.setActiveScreen(this.selfieCapture),
+        );
       },
     );
     this.selfieInstruction.addEventListener(

package/components/selfie/src/SelfieCaptureScreens.stories.js

@@ -1,7 +1,12 @@
 import './SelfieCaptureScreens';
 
 const meta = {
+  args: {
+    'hide-attribution': false,
+    'theme-color': '#001096',
+  },
   argTypes: {
+    'hide-attribution': { control: 'boolean' },
     'theme-color': { control: 'color' },
   },
   component: 'selfie-capture-screens',
@@ -10,21 +15,15 @@ const meta = {
 export default meta;
 
 export const SelfieCaptureFlow = {
-  args: {
-    'theme-color': '#001096',
-  },
   render: (args) => `
-        <selfie-capture-screens theme-color='${args['theme-color']}'>
+        <selfie-capture-screens theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </selfie-capture-screens>
     `,
 };
 
 export const SelfieCaptureFlowHiddenInstructions = {
-  args: {
-    'theme-color': '#001096',
-  },
   render: (args) => `
-        <selfie-capture-screens hide-instructions theme-color='${args['theme-color']}'>
+        <selfie-capture-screens hide-instructions theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </selfie-capture-screens>
     `,
 };

package/components/selfie/src/selfie-capture/SelfieCapture.js

@@ -514,7 +514,11 @@ function templateString() {
     <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
     <h1 class='text-2xl title-color font-bold'>Take a Selfie</h1>
 
-    <div class='section | flow'>
+    <div className="error">
+      ${this.cameraError ? `<p class="color-red">${this.cameraError}</p>` : ''}
+      ${this.hideAttribution ? '' : '<powered-by-smile-id></powered-by-smile-id>'}
+    </div>
+    <div class='section | flow' ${this.cameraError ? 'hidden' : ''}>
       <div class='video-container'>
         <div class='video'>
         </div>
@@ -763,41 +767,47 @@ class SelfieCaptureScreen extends HTMLElement {
   }
 
   handleStream(stream) {
-    const videoExists = this.shadowRoot.querySelector('video');
-    let video = null;
-    if (videoExists) {
-      video = this.shadowRoot.querySelector('video');
-    } else {
-      video = document.createElement('video');
-    }
+    try {
+      const videoExists = this.shadowRoot.querySelector('video');
+      let video = null;
+      if (videoExists) {
+        video = this.shadowRoot.querySelector('video');
+      } else {
+        video = document.createElement('video');
+      }
 
-    video.autoplay = true;
-    video.playsInline = true;
-    video.muted = true;
+      video.autoplay = true;
+      video.playsInline = true;
+      video.muted = true;
 
-    if ('srcObject' in video) {
-      video.srcObject = stream;
-    } else {
-      video.src = window.URL.createObjectURL(stream);
-    }
+      if ('srcObject' in video) {
+        video.srcObject = stream;
+      } else {
+        video.src = window.URL.createObjectURL(stream);
+      }
 
-    video.onloadedmetadata = () => {
-      video.play();
-    };
-    this._video = video;
-    const videoContainer = this.shadowRoot.querySelector(
-      '.video-container > .video',
-    );
-    this._data.permissionGranted = true;
+      video.onloadedmetadata = () => {
+        video.play();
+      };
 
-    video.onloadedmetadata = () => {
-      // this.shadowRoot.querySelector('.actions').hidden = false;
-      // this.shadowRoot.querySelector('#loader').hidden = true;
-      // this.shadowRoot.querySelector('.video-section').hidden = false;
-    };
+      this._video = video;
+      const videoContainer = this.shadowRoot.querySelector(
+        '.video-container > .video',
+      );
+      this._data.permissionGranted = true;
 
-    if (!videoExists) {
-      videoContainer.prepend(video);
+      if (!videoExists) {
+        videoContainer.prepend(video);
+      }
+    } catch (error) {
+      this.setAttribute(
+        'data-camera-error',
+        SmartCamera.handleCameraError(error),
+      );
+      if (error.name !== 'AbortError') {
+        console.error(error);
+      }
+      SmartCamera.stopMedia();
     }
   }
 
@@ -934,13 +944,19 @@ class SelfieCaptureScreen extends HTMLElement {
   }
 
   handleBackEvents() {
-    SmartCamera.stopMedia();
+    this.stopMedia();
     this.dispatchEvent(new CustomEvent('selfie-capture.cancelled'));
   }
 
   closeWindow() {
+    this.stopMedia();
     this.dispatchEvent(new CustomEvent('selfie-capture.close'));
   }
+
+  stopMedia() {
+    this.removeAttribute('data-camera-ready');
+    SmartCamera.stopMedia();
+  }
 }
 
 if ('customElements' in window && !customElements.get('selfie-capture')) {

package/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.js

@@ -305,7 +305,7 @@ function templateString() {
     </style>
     ${styles(this.themeColor)}
     <div id="selfie-capture-instruction-screen" class="flow center">
-    <smileid-navigation theme-color=${this.themeColor} ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
+    <smileid-navigation theme-color=${this.themeColor} ${this.hideBack ? 'hide-back' : ''} ${this.showNavigation ? '' : 'hidden'}></smileid-navigation>
     <header>
       <svg xmlns="http://www.w3.org/2000/svg" width="65" height="91" viewBox="0 0 65 91" fill="none">
       <g clip-path="url(#clip0_604_692)">
@@ -543,7 +543,7 @@ function templateString() {
         <button id='allow' data-variant='solid full-width' class='button theme-background'>
             Allow
         </button>
-        <button id='cancel' data-variant='outline full-width' class="button" style='--flow-space: 1.5rem'>
+        <button id='cancel' data-variant='outline full-width' class="button" style='--flow-space: 1.5rem' ${(this.hideBack || !this.showNavigation) ? 'hidden' : ''}>
             Cancel
         </button>
        </section>
@@ -629,6 +629,10 @@ class SelfieCaptureInstructions extends HTMLElement {
   handleCloseEvents() {
     this.dispatchEvent(new CustomEvent('selfie-capture-instructions.close'));
   }
+
+  static get observedAttributes() {
+    return ['show-navigation'];
+  }
 }
 
 if (

package/components/signature-pad/package.json

@@ -23,7 +23,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-jest": "^28.8.3",
     "eslint-plugin-prettier": "^5.2.1",
     "prettier": "^3.3.3"
   }

package/components/smart-camera-web/src/SmartCameraWeb.js

@@ -4,8 +4,9 @@ import SmartCamera from '../../../domain/camera/src/SmartCamera';
 import '../../document/src';
 import '../../selfie/src';
 import '../../camera-permission/CameraPermission';
+import packageJson from '../../../package.json';
 
-import { version as COMPONENTS_VERSION } from '../../../package.json';
+const COMPONENTS_VERSION = packageJson.version;
 
 function scwTemplateString() {
   return `

package/components/smart-camera-web/src/SmartCameraWeb.stories.js

@@ -2,9 +2,11 @@ import './SmartCameraWeb';
 
 const meta = {
   args: {
+    'hide-attribution': false,
     'theme-color': '#001096',
   },
   argTypes: {
+    'hide-attribution': { control: 'boolean' },
     'theme-color': { control: 'color' },
   },
   component: 'smart-camera-web',
@@ -14,35 +16,35 @@ export default meta;
 
 export const SmartCameraWeb = {
   render: (args) => `
-        <smart-camera-web theme-color='${args['theme-color']}' capture-id show-navigation>
+        <smart-camera-web theme-color='${args['theme-color']}' capture-id show-navigation ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </smart-camera-web>
     `,
 };
 
 export const SmartCameraWebWithOutInstructions = {
   render: (args) => `
-        <smart-camera-web theme-color='${args['theme-color']}' capture-id hide-instructions>
+        <smart-camera-web theme-color='${args['theme-color']}' capture-id hide-instructions ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </smart-camera-web>
     `,
 };
 
 export const SmartCameraWebWithOutNavigation = {
   render: (args) => `
-        <smart-camera-web theme-color='${args['theme-color']}' capture-id>
+        <smart-camera-web theme-color='${args['theme-color']}' capture-id ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </smart-camera-web>
     `,
 };
 
 export const SmartCameraWebWithOutBackToHost = {
   render: (args) => `
-        <smart-camera-web theme-color='${args['theme-color']}' capture-id show-navigation hide-back-to-host>
+        <smart-camera-web theme-color='${args['theme-color']}' capture-id show-navigation hide-back-to-host ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </smart-camera-web>
     `,
 };
 
 export const SmartCameraWebWithOutBackId = {
   render: (args) => `
-        <smart-camera-web theme-color='${args['theme-color']}' capture-id show-navigation hide-back-of-id>
+        <smart-camera-web theme-color='${args['theme-color']}' capture-id show-navigation hide-back-of-id ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </smart-camera-web>
     `,
 };

package/cypress/e2e/smart-camera-web-attribution.cy.js

@@ -1,5 +1,6 @@
 describe('SmartCameraWeb', () => {
   it('shows attribution by default', () => {
+    cy.clock();
     cy.visit('/smart-camera-web');
     cy.get('smart-camera-web')
       .shadow()
@@ -7,9 +8,123 @@ describe('SmartCameraWeb', () => {
       .shadow()
       .find('powered-by-smile-id')
       .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .find('#allow')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('powered-by-smile-id')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#start-image-capture')
+      .click();
+    cy.tick(8000);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .shadow()
+      .find('powered-by-smile-id')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .shadow()
+      .find('#select-id-image')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-instructions#document-capture-instructions-front')
+      .shadow()
+      .find('powered-by-smile-id')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-instructions#document-capture-instructions-front')
+      .shadow()
+      .find('#take-photo')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture#document-capture-front')
+      .shadow()
+      .find('powered-by-smile-id')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture#document-capture-front')
+      .shadow()
+      .find('#capture-id-image')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-review#front-of-document-capture-review')
+      .shadow()
+      .find('powered-by-smile-id')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-review#front-of-document-capture-review')
+      .shadow()
+      .find('#select-id-image')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-instructions#document-capture-instructions-back')
+      .shadow()
+      .find('powered-by-smile-id')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-instructions#document-capture-instructions-back')
+      .shadow()
+      .find('#take-photo')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture#document-capture-back')
+      .shadow()
+      .find('powered-by-smile-id')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture#document-capture-back')
+      .shadow()
+      .find('#capture-id-image')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-review#back-of-document-capture-review')
+      .shadow()
+      .find('powered-by-smile-id')
+      .should('be.visible');
   });
 
   it.only('hides attribution when `hide-attribution` attribute is passed', () => {
+    cy.clock();
     cy.visit('/capture-back-of-id-hide-attribution');
     cy.get('smart-camera-web')
       .shadow()
@@ -17,5 +132,118 @@ describe('SmartCameraWeb', () => {
       .shadow()
       .get('powered-by-smile-id')
       .should('not.exist');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .find('#allow')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .get('powered-by-smile-id')
+      .should('not.exist');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#start-image-capture')
+      .click();
+    cy.tick(8000);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .shadow()
+      .get('powered-by-smile-id')
+      .should('not.exist');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .shadow()
+      .find('#select-id-image')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-instructions#document-capture-instructions-front')
+      .shadow()
+      .get('powered-by-smile-id')
+      .should('not.exist');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-instructions#document-capture-instructions-front')
+      .shadow()
+      .find('#take-photo')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture#document-capture-front')
+      .shadow()
+      .get('powered-by-smile-id')
+      .should('not.exist');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture#document-capture-front')
+      .shadow()
+      .find('#capture-id-image')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-review#front-of-document-capture-review')
+      .shadow()
+      .get('powered-by-smile-id')
+      .should('not.exist');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-review#front-of-document-capture-review')
+      .shadow()
+      .find('#select-id-image')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-instructions#document-capture-instructions-back')
+      .shadow()
+      .get('powered-by-smile-id')
+      .should('not.exist');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-instructions#document-capture-instructions-back')
+      .shadow()
+      .find('#take-photo')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture#document-capture-back')
+      .shadow()
+      .get('powered-by-smile-id')
+      .should('not.exist');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture#document-capture-back')
+      .shadow()
+      .find('#capture-id-image')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-review#back-of-document-capture-review')
+      .shadow()
+      .get('powered-by-smile-id')
+      .should('not.exist');
   });
 });

package/generate-exports.js

@@ -0,0 +1,34 @@
+import fs from 'fs';
+import path from 'path';
+
+const componentsDir = './components';
+const outputFilePath = './index.js';
+
+const getDirectories = (source) =>
+  fs
+    .readdirSync(source, { withFileTypes: true })
+    .filter((dirent) => dirent.isDirectory())
+    .map((dirent) => dirent.name);
+
+const generateExports = () => {
+  const componentDirs = getDirectories(componentsDir);
+  let exportStatements = '';
+
+  componentDirs.forEach((dir) => {
+    const srcPath = path.join(componentsDir, dir, 'src');
+    if (fs.existsSync(srcPath)) {
+      const files = fs.readdirSync(srcPath);
+      files.forEach((file) => {
+        const fileName = path.parse(file).name;
+        const exportName = fileName.charAt(0).toUpperCase() + fileName.slice(1);
+        exportStatements += `import ${exportName} from './components/${dir}/src/${fileName}';\n`;
+        exportStatements += `export { ${exportName} };\n`;
+      });
+    }
+  });
+
+  fs.writeFileSync(outputFilePath, exportStatements);
+};
+
+generateExports();
+export default generateExports;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@smileid/web-components",
-  "version": "1.4.4",
+  "version": "1.4.5-alpha.1",
+  "main": "index.js",
   "exports": {
     ".": "./index.js",
     "./combobox": "./components/combobox/src/index.js",
@@ -33,13 +34,13 @@
   },
   "devDependencies": {
     "cypress": "^13.15.0",
-    "esbuild": "^0.21.5",
+    "esbuild": "^0.24.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-jest": "^28.8.3",
     "eslint-plugin-prettier": "^5.2.1",
     "prettier": "^3.3.3"
   }