@smileid/web-components 1.4.6 → 1.5.0

package/components/document/src/DocumentCaptureScreens.js

@@ -9,12 +9,25 @@ import packageJson from '../../../package.json';
 
 const COMPONENTS_VERSION = packageJson.version;
 
+const smartCameraWeb = document.querySelector('smart-camera-web');
+
 async function getPermissions(captureScreen) {
   try {
-    await SmartCamera.getMedia({
+    const stream = await SmartCamera.getMedia({
       audio: false,
       video: SmartCamera.environmentOptions,
     });
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    const videoDevice = devices.find(
+      (device) =>
+        device.kind === 'videoinput' &&
+        stream.getVideoTracks()[0].getSettings().deviceId === device.deviceId,
+    );
+    smartCameraWeb?.dispatchEvent(
+      new CustomEvent('metadata.camera-name', {
+        detail: { cameraName: videoDevice?.label },
+      }),
+    );
     captureScreen.removeAttribute('data-camera-error');
     captureScreen.setAttribute('data-camera-ready', true);
   } catch (error) {
@@ -30,6 +43,8 @@ class DocumentCaptureScreens extends HTMLElement {
   constructor() {
     super();
     this.activeScreen = null;
+    this.smartCameraWeb = this.closest('smart-camera-web');
+    smartCameraWeb?.dispatchEvent(new CustomEvent('metadata.initialize'));
   }
 
   connectedCallback() {
@@ -107,6 +122,14 @@ class DocumentCaptureScreens extends HTMLElement {
     this.documentInstruction.addEventListener(
       'document-capture-instructions.capture',
       async () => {
+        smartCameraWeb?.dispatchEvent(
+          new CustomEvent('metadata.document-front-capture-start'),
+        );
+        smartCameraWeb?.dispatchEvent(
+          new CustomEvent('metadata.document-front-origin', {
+            detail: { imageOrigin: 'camera_manual_capture' },
+          }),
+        );
         this.setActiveScreen(this.idCapture);
         await getPermissions(this.idCapture);
       },
@@ -114,6 +137,11 @@ class DocumentCaptureScreens extends HTMLElement {
     this.documentInstruction.addEventListener(
       'document-capture-instructions.upload',
       async (event) => {
+        smartCameraWeb?.dispatchEvent(
+          new CustomEvent('metadata.document-front-origin', {
+            detail: { imageOrigin: 'gallery' },
+          }),
+        );
         this.idReview.setAttribute('data-image', event.detail.previewImage);
         this._data.images.push({
           image: event.detail.image.split(',')[1],
@@ -124,6 +152,9 @@ class DocumentCaptureScreens extends HTMLElement {
     );
 
     this.idCapture.addEventListener('document-capture.publish', (event) => {
+      smartCameraWeb?.dispatchEvent(
+        new CustomEvent('metadata.document-front-capture-end'),
+      );
       this.idReview.setAttribute('data-image', event.detail.previewImage);
       this._data.images.push({
         image: event.detail.image.split(',')[1],
@@ -144,6 +175,9 @@ class DocumentCaptureScreens extends HTMLElement {
     this.idReview.addEventListener(
       'document-capture-review.rejected',
       async () => {
+        smartCameraWeb?.dispatchEvent(
+          new CustomEvent('metadata.document-front-capture-retry'),
+        );
         this.idReview.removeAttribute('data-image');
         this._data.images.pop();
         if (this.hideInstructions) {
@@ -172,6 +206,14 @@ class DocumentCaptureScreens extends HTMLElement {
     this.documentInstructionBack.addEventListener(
       'document-capture-instructions.capture',
       async () => {
+        smartCameraWeb?.dispatchEvent(
+          new CustomEvent('metadata.document-back-capture-start'),
+        );
+        smartCameraWeb?.dispatchEvent(
+          new CustomEvent('metadata.document-back-origin', {
+            detail: { imageOrigin: 'camera_manual_capture' },
+          }),
+        );
         this.setActiveScreen(this.idCaptureBack);
         await getPermissions(this.idCaptureBack);
       },
@@ -194,6 +236,11 @@ class DocumentCaptureScreens extends HTMLElement {
     this.documentInstructionBack.addEventListener(
       'document-capture-instructions.upload',
       async (event) => {
+        smartCameraWeb?.dispatchEvent(
+          new CustomEvent('metadata.document-back-origin', {
+            detail: { imageOrigin: 'gallery' },
+          }),
+        );
         this.backOfIdReview.setAttribute('data-image', event.detail.image);
         this._data.images.push({
           image: event.detail.image.split(',')[1],
@@ -203,6 +250,9 @@ class DocumentCaptureScreens extends HTMLElement {
       },
     );
     this.idCaptureBack.addEventListener('document-capture.publish', (event) => {
+      smartCameraWeb?.dispatchEvent(
+        new CustomEvent('metadata.document-back-capture-end'),
+      );
       this.backOfIdReview.setAttribute('data-image', event.detail.previewImage);
       this._data.images.push({
         image: event.detail.image.split(',')[1],
@@ -227,6 +277,9 @@ class DocumentCaptureScreens extends HTMLElement {
     this.backOfIdReview.addEventListener(
       'document-capture-review.rejected',
       async () => {
+        smartCameraWeb?.dispatchEvent(
+          new CustomEvent('metadata.document-back-capture-retry'),
+        );
         this.backOfIdReview.removeAttribute('data-image');
         this._data.images.pop();
         if (this.hideInstructions) {

package/components/selfie/src/SelfieCaptureScreens.js

@@ -7,12 +7,25 @@ import packageJson from '../../../package.json';
 
 const COMPONENTS_VERSION = packageJson.version;
 
+const smartCameraWeb = document.querySelector('smart-camera-web');
+
 async function getPermissions(captureScreen, facingMode = 'user') {
   try {
-    await SmartCamera.getMedia({
+    const stream = await SmartCamera.getMedia({
       audio: false,
       video: { facingMode },
     });
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    const videoDevice = devices.find(
+      (device) =>
+        device.kind === 'videoinput' &&
+        stream.getVideoTracks()[0].getSettings().deviceId === device.deviceId,
+    );
+    smartCameraWeb?.dispatchEvent(
+      new CustomEvent('metadata.camera-name', {
+        detail: { cameraName: videoDevice?.label },
+      }),
+    );
     captureScreen.removeAttribute('data-camera-error');
     captureScreen.setAttribute('data-camera-ready', true);
   } catch (error) {
@@ -28,6 +41,7 @@ class SelfieCaptureScreens extends HTMLElement {
   constructor() {
     super();
     this.activeScreen = null;
+    smartCameraWeb?.dispatchEvent(new CustomEvent('metadata.initialize'));
   }
 
   connectedCallback() {
@@ -89,6 +103,19 @@ class SelfieCaptureScreens extends HTMLElement {
         await getPermissions(this.selfieCapture, this.getAgentMode()).then(() =>
           this.setActiveScreen(this.selfieCapture),
         );
+        smartCameraWeb?.dispatchEvent(
+          new CustomEvent('metadata.selfie-capture-start'),
+        );
+        smartCameraWeb?.dispatchEvent(
+          new CustomEvent('metadata.selfie-origin', {
+            detail: {
+              imageOrigin: {
+                environment: 'back_camera',
+                user: 'front_camera',
+              }[this.getAgentMode()],
+            },
+          }),
+        );
       },
     );
     this.selfieInstruction.addEventListener(
@@ -107,6 +134,9 @@ class SelfieCaptureScreens extends HTMLElement {
     });
 
     this.selfieCapture.addEventListener('selfie-capture.publish', (event) => {
+      smartCameraWeb?.dispatchEvent(
+        new CustomEvent('metadata.selfie-capture-end'),
+      );
       this.selfieReview.setAttribute('data-image', event.detail.referenceImage);
       this._data.images = event.detail.images;
       SmartCamera.stopMedia();
@@ -127,6 +157,9 @@ class SelfieCaptureScreens extends HTMLElement {
     this.selfieReview.addEventListener(
       'selfie-capture-review.rejected',
       async () => {
+        smartCameraWeb?.dispatchEvent(
+          new CustomEvent('metadata.selfie-capture-retry'),
+        );
         this.selfieReview.removeAttribute('data-image');
         this._data.images = [];
         if (this.hideInstructions) {
@@ -194,7 +227,10 @@ class SelfieCaptureScreens extends HTMLElement {
   }
 
   get hideBack() {
-    return this.hasAttribute('hide-back-to-host') ? 'hide-back' : '';
+    return this.hasAttribute('hide-back-to-host') ||
+      this.hasAttribute('hide-back')
+      ? 'hide-back'
+      : '';
   }
 
   get disableImageTests() {

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

@@ -554,10 +554,21 @@ async function getPermissions(
   constraints = { facingMode: 'user' },
 ) {
   try {
-    await SmartCamera.getMedia({
+    const stream = await SmartCamera.getMedia({
       audio: false,
       video: constraints,
     });
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    const videoDevice = devices.find(
+      (device) =>
+        device.kind === 'videoinput' &&
+        stream.getVideoTracks()[0].getSettings().deviceId === device.deviceId,
+    );
+    window.dispatchEvent(
+      new CustomEvent('metadata.camera-name', {
+        detail: { cameraName: videoDevice?.label },
+      }),
+    );
     captureScreen?.removeAttribute('data-camera-error');
     captureScreen?.setAttribute('data-camera-ready', true);
   } catch (error) {

package/components/signature-pad/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/signature-pad",
-  "version": "1.4.6",
+  "version": "1.5.0",
   "private": "true",
   "exports": {
     ".": "./index.js"

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

@@ -224,7 +224,10 @@ class SmartCameraWeb extends HTMLElement {
   }
 
   get hideBackToHost() {
-    return this.hasAttribute('hide-back-to-host') ? 'hide-back-to-host' : '';
+    return this.hasAttribute('hide-back-to-host') ||
+      this.hasAttribute('hide-back')
+      ? 'hide-back'
+      : '';
   }
 
   get allowAgentMode() {

package/cypress/e2e/smart-camera-web-hide-back-to-host.cy.js

@@ -0,0 +1,61 @@
+describe('SmartCameraWeb', () => {
+  beforeEach(() => {
+    cy.visit('/capture-back-of-id-navigation');
+  });
+
+  it('shows attribution by default', () => {
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .should('be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .should('contain.text', "Next, we'll take a quick selfie");
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .find('smileid-navigation')
+      .shadow()
+      .find('.back-button')
+      .should('be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .find('#cancel')
+      .should('be.visible');
+  });
+
+  it('hides back exit and cancel button when `hide-back-to-host` attribute is passed', () => {
+    cy.get('smart-camera-web')
+      .invoke('attr', 'hide-back-to-host', 'true')
+      .should('have.attr', 'hide-back-to-host', 'true');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .should('be.visible');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .should('contain.text', "Next, we'll take a quick selfie");
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .find('smileid-navigation')
+      .shadow()
+      .get('.back-button')
+      .should('not.exist');
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .get('#cancel')
+      .should('not.exist');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web-components",
-  "version": "1.4.6",
+  "version": "1.5.0",
   "main": "index.js",
   "exports": {
     ".": "./index.js",
@@ -14,7 +14,7 @@
     "./smart-camera-web": "./components/smart-camera-web/src/SmartCameraWeb.js"
   },
   "scripts": {
-    "build": "NODE_ENV=development node esbuild.js",
+    "build": "cross-env NODE_ENV=development node esbuild.js",
     "clean": "rm -rf build dist",
     "lint:fix": "eslint . --ext .js --fix",
     "lint:html": "npx prettier --write $(git ls-files '*.html')",
@@ -33,6 +33,7 @@
     "validate.js": "^0.13.1"
   },
   "devDependencies": {
+    "cross-env": "^7.0.3",
     "cypress": "^13.15.0",
     "esbuild": "^0.24.0",
     "eslint": "^8.57.0",