@smileid/web-components 1.0.0-beta → 1.4.2

package/components/signature-pad/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/signature-pad",
-  "version": "1.0.0",
+  "version": "1.4.2",
   "private": "true",
   "exports": {
     ".": "./index.js"
@@ -15,16 +15,16 @@
   ],
   "author": "SmileID <support@usesmileid.com> (https://usesmileid.com)",
   "dependencies": {
-    "signature_pad": "^4.1.7"
+    "signature_pad": "^5.0.2"
   },
   "devDependencies": {
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.2.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "prettier": "^3.2.2"
+    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "prettier": "^3.3.3"
   }
 }

package/components/signature-pad/src/SignaturePad.js

@@ -177,7 +177,7 @@ button[data-variant="text"] {
 }
 
 button[data-variant="solid"] {
-  --button-color: var(--color-default);
+  --button-color: ${this.themeColor};
   border-radius: 2.5rem;
   border: 0;
   background-color: transparent;
@@ -468,6 +468,10 @@ button:disabled {
   get allowUpload() {
     return this.hasAttribute('allow-upload');
   }
+
+  get themeColor() {
+    return this.getAttribute('theme-color') || '#001096';
+  }
 }
 
 if ('customElements' in window) {

package/components/signature-pad/src/SignaturePad.stories.js

@@ -1,23 +1,31 @@
 import './SignaturePad';
 
 const meta = {
+  args: {
+    'theme-color': '#001096',
+  },
+  argTypes: {
+    'theme-color': { control: 'color' },
+  },
   component: 'smileid-signature-pad',
 };
 
 export default meta;
 
 export const SignaturePad = {
-  render: () => `
+  render: (args) => `
         <smileid-signature-pad
+        theme-color='${args['theme-color']}'
         >
         </smileid-signature-pad>
     `,
 };
 
 export const SignaturePadWithUploads = {
-  render: () => `
+  render: (args) => `
         <smileid-signature-pad
           allow-upload
+          theme-color='${args['theme-color']}'
         >
         </smileid-signature-pad>
     `,

package/components/smart-camera-web/src/README.md

@@ -0,0 +1,207 @@
+# SmartCameraWeb
+
+`SmartCameraWeb` is a [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) designed to capture images including selfies, liveness images, and ID Document images for use with SmileIdentity. It interfaces with the [Server to Server](https://docs.usesmileid.com/server-to-server) libraries, serving as a user interface client.
+
+Explore an [example full stack integration](https://glitch.com/edit/#!/smart-camera-web-demo-node) using our [NodeJS](https://docs.usesmileid.com/server-to-server/javascript) library.
+
+## Getting Started
+
+To integrate `SmartCameraWeb`, follow these steps:
+
+- [SmartCameraWeb](#smartcameraweb)
+  - [Getting Started](#getting-started)
+    - [Choose a Server to Server Library](#choose-a-server-to-server-library)
+    - [Installation](#installation)
+      - [Install Via NPM](#install-via-npm)
+    - [Usage](#usage)
+  - [Compatibility](#compatibility)
+  - [Support](#support)
+  - [Development](#development)
+
+### Choose a Server to Server Library
+
+Supported [Server to Server Libraries](https://docs.usesmileid.com/server-to-server) include:
+
+- [Java](https://docs.usesmileid.com/server-to-server/java)
+- [NodeJS](https://docs.usesmileid.com/server-to-server/javascript)
+- [PHP](https://docs.usesmileid.com/server-to-server/php)
+- [Python](https://docs.usesmileid.com/server-to-server/python)
+- [Ruby](https://docs.usesmileid.com/server-to-server/ruby)
+
+> **Note**: Code samples in this documentation utilize the NodeJS Server to Server library.
+
+### Installation
+
+You can install via NPM or directly include it from our CDN.
+
+#### Install Via NPM
+
+```shell
+npm install @smileid/web-components@<version>
+```
+
+Then, in your VueJS, AngularJS, or React component:
+
+```js
+import '@smileid/web-components/smart-camera-web';
+```
+
+### Usage
+
+After installation and necessary imports:
+
+1. Add the desired markup to your page/component:
+
+   - **For Selfie Capture / Liveness Images**:
+
+     ```html
+     <smart-camera-web></smart-camera-web>
+     ```
+
+   - **For Selfie Capture / Liveness and ID Images**:
+
+     ```html
+     <smart-camera-web capture-id></smart-camera-web>
+     ```
+
+     Initially, you'll see this image:
+     ![Selfie Capture Instruction](https://cdn.smileidentity.com/images/smart-camera-web/selfie-capture-instruction.png)
+
+     After granting access, the capture screen appears:
+     ![Selfie Camera](https://cdn.smileidentity.com/images/smart-camera-web/selfie-capture.png)
+
+     Upon capturing a selfie, you'll reach the review screen:
+     ![Selfie Review](https://cdn.smileidentity.com/images/smart-camera-web/selfie-capture-review.png)
+
+   ![Document Capture Instruction](https://cdn.smileidentity.com/images/smart-camera-web/document-capture-instruction.png)
+
+   If the `capture-id` attribute is used, additional screens include:
+
+   ![ID Camera](https://cdn.smileidentity.com/images/smart-camera-web/document-capture.png)
+
+   ![ID Review](https://cdn.smileidentity.com/images/smart-camera-web/document-review-new.png)
+
+2. Handle the `smart-camera-web.publish` event:
+
+   When the user approves the captured image, an `smart-camera-web.publish` event is dispatched. The event returns a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent) payload in `e.detail`.
+
+   Here's a script example to handle the event and send data to a backend endpoint:
+
+   ```html
+   <script>
+     const app = document.querySelector('smart-camera-web');
+
+     const postContent = async (data) => {
+       const options = {
+         method: 'POST',
+         headers: {
+           'Content-Type': 'application/json',
+         },
+         body: JSON.stringify(data),
+       };
+
+       try {
+         const response = await fetch('/', options);
+         const json = await response.json();
+
+         return json;
+       } catch (e) {
+         throw e;
+       }
+     };
+
+     app.addEventListener('smart-camera-web.publish', async (e) => {
+       try {
+         const response = await postContent(e.detail);
+
+         console.log(response);
+       } catch (e) {
+         console.error(e);
+       }
+     });
+   </script>
+   ```
+
+   The provided backend endpoint uses the NodeJS Server to Server library and ExpressJS:
+
+   ```js
+   const express = require('express');
+   const { v4: UUID } = require('uuid');
+
+   if (process.env.NODE_ENV === 'development') {
+     const dotenv = require('dotenv');
+
+     dotenv.config();
+   }
+
+   const SIDCore = require('smile-identity-core');
+   const SIDSignature = SIDCore.Signature;
+   const SIDWebAPI = SIDCore.WebApi;
+
+   const app = express();
+
+   app.use(express.json({ limit: '500kb' }));
+   app.use(express.static('public'));
+
+   app.post('/', async (req, res, next) => {
+     try {
+       const { PARTNER_ID, API_KEY, SID_SERVER } = process.env;
+       const connection = new SIDWebAPI(
+         PARTNER_ID,
+         '/callback',
+         API_KEY,
+         SID_SERVER,
+       );
+
+       const partner_params_from_server = {
+         user_id: `user-${UUID()}`,
+         job_id: `job-${UUID()}`,
+         job_type: 4, // job_type is the simplest job we have which enrolls a user using their selfie
+       };
+
+       const {
+         images,
+         partner_params: { libraryVersion },
+       } = req.body;
+
+       const options = {
+         return_job_status: true,
+       };
+
+       const partner_params = Object.assign({}, partner_params_from_server, {
+         libraryVersion,
+       });
+
+       const result = await connection.submit_job(
+         partner_params,
+         images,
+         {},
+         options,
+       );
+
+       res.json(result);
+     } catch (e) {
+       console.error(e);
+     }
+   });
+
+   // NOTE: This can be used to process responses. don't forget to add it as a callback option in the `connection` config on L22
+   // https://docs.usesmileid.com/further-reading/faqs/how-do-i-setup-a-callback
+   app.post('/callback', (req, res, next) => {});
+
+   app.listen(process.env.PORT || 4000);
+   ```
+
+   This approach can also be achieved using other Server to Server libraries.
+
+## Compatibility
+
+`SmartCameraWeb` is compatible with most JavaScript frameworks and libraries. For integration with [ReactJS](https://reactjs.org), refer to this [tutorial](https://www.robinwieruch.de/react-web-components) due to React-WebComponents compatibility issues.
+
+## Support
+
+Tested on the latest versions of Chrome, Edge, Firefox, and Safari. If compatibility issues arise on certain browsers, please notify us.
+
+## Development
+
+Note: `smart-camera-web.js` is generated from `src/` using [esbuild](https://esbuild.github.io/). To make changes, edit the source files and run `npm run build` to generate the new `smart-camera-web.js` file.

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

@@ -9,13 +9,14 @@ import { version as COMPONENTS_VERSION } from '../../../package.json';
 
 function scwTemplateString() {
   return `
-  ${styles}
+  ${styles(this.themeColor)}
   <div>
-    <camera-permission ${this.title} ${this.showNavigation} ${this.hideInstructions ? '' : 'hidden'}></camera-permission>
-    <selfie-capture-screens ${this.title} ${this.showNavigation} ${this.disableImageTests} ${this.hideAttribution} ${this.hideInstructions} hidden
-      ${this.hideBackToHost}
+    <camera-permission ${this.applyComponentThemeColor} ${this.title} ${this.showNavigation} ${this.hideInstructions ? '' : 'hidden'} ${this.hideAttribution}></camera-permission>
+    <selfie-capture-screens ${this.applyComponentThemeColor} ${this.title} ${this.showNavigation} ${this.disableImageTests} ${this.hideAttribution} ${this.hideInstructions} hidden
+      ${this.hideBackToHost} ${this.allowAgentMode} ${this.allowAgentModeTests}
     ></selfie-capture-screens>
-    <document-capture-screens document-type=${this.documentType} ${this.title} ${this.documentCaptureModes} ${this.showNavigation}  ${this.hideAttribution} hidden></document-capture-screens>
+    <document-capture-screens ${this.applyComponentThemeColor} document-type=${this.documentType} ${this.title} ${this.documentCaptureModes} ${this.showNavigation}  ${this.hideAttribution}
+     ${this.hideBackOfId} ${this.applyComponentThemeColor} hidden></document-capture-screens>
   </div>
 `;
 }
@@ -60,19 +61,30 @@ class SmartCameraWeb extends HTMLElement {
 
   static get observedAttributes() {
     return [
+      'allow-agent-mode',
+      'disable-image-tests',
       'document-capture-modes',
       'document-type',
+      'hide-attribution',
+      'hide-back-of-id',
       'hide-back-to-host',
       'show-navigation',
+      'theme-color',
     ];
   }
 
   attributeChangedCallback(name) {
     switch (name) {
+      case 'allow-agent-mode':
+      case 'disable-image-tests':
       case 'document-capture-modes':
       case 'document-type':
+      case 'hide-attribution':
+      case 'hide-back-of-id':
       case 'hide-back-to-host':
       case 'show-navigation':
+      case 'theme-color':
+        this.disconnectedCallback();
         this.shadowRoot.innerHTML = this.render();
         this.setUpEventListeners();
         break;
@@ -105,7 +117,11 @@ class SmartCameraWeb extends HTMLElement {
       'selfie-capture-screens.publish',
       (event) => {
         this._data.images = event.detail.images;
-        this.setActiveScreen(this.documentCapture);
+        if (!this.captureId) {
+          this._publishSelectedImages();
+        } else {
+          this.setActiveScreen(this.documentCapture);
+        }
       },
     );
 
@@ -182,6 +198,10 @@ class SmartCameraWeb extends HTMLElement {
     );
   }
 
+  get captureId() {
+    return this.hasAttribute('capture-id');
+  }
+
   get documentType() {
     return this.getAttribute('document-type');
   }
@@ -195,7 +215,7 @@ class SmartCameraWeb extends HTMLElement {
   }
 
   get hideBackOfId() {
-    return this.hasAttribute('hide-back-of-id');
+    return this.hasAttribute('hide-back-of-id') ? 'hide-back-of-id' : '';
   }
 
   get showNavigation() {
@@ -206,6 +226,18 @@ class SmartCameraWeb extends HTMLElement {
     return this.hasAttribute('hide-back-to-host') ? 'hide-back-to-host' : '';
   }
 
+  get allowAgentMode() {
+    return this.hasAttribute('allow-agent-mode')
+      ? `allow-agent-mode=${this.getAttribute('allow-agent-mode')}`
+      : '';
+  }
+
+  get allowAgentModeTests() {
+    return this.hasAttribute('show-agent-mode-for-tests')
+      ? 'show-agent-mode-for-tests'
+      : '';
+  }
+
   get title() {
     return this.hasAttribute('title')
       ? `title=${this.getAttribute('title')}`
@@ -228,6 +260,23 @@ class SmartCameraWeb extends HTMLElement {
     return this.hasAttribute('hide-attribution') ? 'hide-attribution' : '';
   }
 
+  get hasThemeColor() {
+    return (
+      this.hasAttribute('theme-color') &&
+      ![null, undefined, 'null', 'undefined'].includes(
+        this.getAttribute('theme-color'),
+      )
+    );
+  }
+
+  get themeColor() {
+    return this.hasThemeColor ? this.getAttribute('theme-color') : '#001096';
+  }
+
+  get applyComponentThemeColor() {
+    return this.hasThemeColor ? `theme-color='${this.themeColor}'` : '';
+  }
+
   setActiveScreen(screen) {
     this.activeScreen?.setAttribute('hidden', '');
     screen.removeAttribute('hidden');

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

@@ -1,35 +1,55 @@
 import './SmartCameraWeb';
 
 const meta = {
+  args: {
+    'theme-color': '#001096',
+  },
+  argTypes: {
+    'theme-color': { control: 'color' },
+  },
   component: 'smart-camera-web',
 };
 
 export default meta;
 
 export const SmartCameraWeb = {
-  render: () => `
-        <smart-camera-web  show-navigation>
+  render: (args) => `
+        <smart-camera-web theme-color='${args['theme-color']}' capture-id show-navigation>
         </smart-camera-web>
     `,
 };
 
 export const SmartCameraWebWithOutInstructions = {
-  render: () => `
-        <smart-camera-web hide-instructions>
+  render: (args) => `
+        <smart-camera-web theme-color='${args['theme-color']}' capture-id hide-instructions>
         </smart-camera-web>
     `,
 };
 
 export const SmartCameraWebWithOutNavigation = {
-  render: () => `
-        <smart-camera-web>
+  render: (args) => `
+        <smart-camera-web theme-color='${args['theme-color']}' capture-id>
         </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>
+    `,
+};
+
+export const SmartCameraWebWithOutBackId = {
+  render: (args) => `
+        <smart-camera-web theme-color='${args['theme-color']}' capture-id show-navigation hide-back-of-id>
+        </smart-camera-web>
+    `,
+};
+
+export const SmartCameraWebAgentMode = {
   render: () => `
-        <smart-camera-web show-navigation hide-back-to-host>
+        <smart-camera-web hide-instructions hide-back-of-id allow-agent-mode='true' show-agent-mode-for-tests>
         </smart-camera-web>
     `,
 };

package/components/totp-consent/src/TotpConsent.js

@@ -196,7 +196,7 @@ function markup() {
             .back-button-text {
                 font-size: 11px;
                 line-height: 11px;
-                color: rgb(21, 31, 114);
+                color: ${this.themeColor || 'rgb(21, 31, 114)'};
             }
 
             #error,
@@ -290,7 +290,7 @@ function markup() {
                     <button type='button' data-type='icon' id="back-button" class="back-button">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
                             <path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
-                            <path fill="#001096" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
+                            <path fill="${this.themeColor}" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
                         </svg>
                     </button>
                     <div class="back-button-text">Back</div>
@@ -337,7 +337,7 @@ function markup() {
                     <button type='button' data-type='icon' id="back-to-entry-button" class="back-button">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
                             <path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
-                            <path fill="#001096" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
+                            <path fill="${this.themeColor}" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
                         </svg>
                     </button>
                     <div class="back-button-text">Back</div>
@@ -893,6 +893,18 @@ class TotpConsent extends HTMLElement {
     return this.getAttribute('token');
   }
 
+  get themeColor() {
+    return this.getAttribute('theme-color') || '#001096';
+  }
+
+  get hideBack() {
+    return this.hasAttribute('hide-back');
+  }
+
+  get showNavigation() {
+    return this.hasAttribute('show-navigation');
+  }
+
   handleTotpConsentGrant() {
     const customEvent = new CustomEvent('end-user-consent.totp.granted', {
       detail: {

package/cypress/e2e/smart-camera-web-agent-mode.cy.js

@@ -0,0 +1,144 @@
+context('SmartCameraWeb', () => {
+  beforeEach(() => {
+    cy.visit('/smart-camera-web-agent-mode');
+  });
+
+  it('should switch from the selfie mode to agent mode"', () => {
+    cy.log('Enable agent mode for tests');
+    cy.get('smart-camera-web')
+      .invoke('attr', 'allow-agent-mode', 'true')
+      .should('have.attr', 'allow-agent-mode', 'true');
+
+    cy.get('smart-camera-web').invoke(
+      'attr',
+      'show-agent-mode-for-tests',
+      'true',
+    );
+    cy.get('smart-camera-web').invoke('attr', 'disable-image-tests', '');
+
+    cy.clock();
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .find('#allow')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('contain.text', 'Agent Mode On');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#switch-camera')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('contain.text', 'Agent Mode Off');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#switch-camera')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('contain.text', 'Agent Mode On');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('contain.text', 'Take a Selfie');
+
+    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')
+      .shadow()
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .should('be.visible');
+  });
+
+  it('should not show the agent mode switch button"', () => {
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .invoke('attr', 'show-agent-mode-for-tests', 'false');
+    cy.get('smart-camera-web').invoke('attr', 'disable-image-tests', '');
+
+    cy.clock();
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .find('#allow')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#switch-camera')
+      .should('not.exist');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('contain.text', 'Take a Selfie');
+
+    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')
+      .shadow()
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .should('be.visible');
+  });
+});