Merge branch 'main' into dependabot/npm_and_yarn/example/axios-1.7.4

smileidentity · Aug 27, 2024 · 14b9e25 · 14b9e25
2 parents 5d43804 + bfffdb1
commit 14b9e25
Show file tree

Hide file tree

Showing 27 changed files with 599 additions and 48 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Added new designs to smart selfie authentication
+
+## [1.3.8] - 2024-08-15
+
+### Changed
+
+- Updated the button in id types selection screen to use the theme color provided
+
 ## [1.3.7] - 2024-08-14
 
 ### Changed

diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -1,7 +1,7 @@
 {
   "name": "example",
   "private": true,
-  "version": "1.3.7",
+  "version": "1.3.8",
   "type": "module",
   "main": "server.js",
   "scripts": {

diff --git a/example/script.js b/example/script.js
@@ -72,18 +72,19 @@ export default function setupForm() {
           product,
           callback_url,
           environment,
-          // demo_mode: true,
           use_new_component: true,
+          //demo_mode: true,
           // previewBVNMFA: true,
           document_capture_modes: ['camera', 'upload'],
+          allow_agent_mode: true,
           partner_details: {
             partner_id,
             signature,
             timestamp,
             name: 'Demo Account',
             logo_url: 'https://via.placeholder.com/50/000000/FFFFFF?text=DA',
             policy_url: 'https://smileidentity.com/privacy-privacy',
-            theme_color: '#000',
+            theme_color: '#96002d',
           },
           onSuccess: () => {
             resetButton();

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "A collection of SmileID browser clients and components",
   "main": "index.js",
   "private": true,

diff --git a/packages/embed/cypress/pages/smartselfie-new-design.html b/packages/embed/cypress/pages/smartselfie-new-design.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        max-width: 100%;
+        min-height: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <script src="js/script.min.js"></script>
+
+    <script>
+      SmileIdentity({
+        use_new_component: true,
+        token:
+          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXJ0bmVyX3BhcmFtcyI6eyJ1c2VyX2lkIjoid2ViLXRva2VuLXRlc3QtdXNlci0xMDEiLCJqb2JfaWQiOiJ3ZWItdG9rZW4tam9iLTIzMDAiLCJqb2JfdHlwZSI6NH0sImNhbGxiYWNrX3VybCI6Imh0dHBzOi8vd2ViaG9vay5zaXRlLzFhYWE3YTdiLWFjY2ItNDBhYy04NjQzLWZkOGE4NzAzZTliZSIsImlhdCI6MTY0ODIzNTA0NCwiZXhwIjoxNjQ5ODgzMjcyfQ.FNqqYIda63uEd2pMSSnDcWmm4eXPvRRpuV9qJggGejc',
+        product: 'smartselfie',
+        callback_url:
+          'https://webhook.site/1aaa7a7b-accb-40ac-8643-fd8a8703e9be',
+        environment: 'sandbox',
+        consent_required: {
+          NG: ['BVN'],
+        },
+        partner_details: {
+          name: 'Test Org',
+          logo_url: 'https://portal.usesmileid.com/favicon.ico',
+          partner_id: '212',
+          policy_url: 'https://usesmileid.com/privacy-policy',
+          theme_color: '#000',
+        },
+        onSuccess: () => {},
+        onClose: () => {},
+      });
+    </script>
+  </body>
+</html>
diff --git a/packages/embed/cypress/support/commands.js b/packages/embed/cypress/support/commands.js
@@ -257,3 +257,55 @@ Cypress.Commands.add('navigateThroughCameraScreens', () => {
     .find('#select-selfie')
     .click();
 });
+
+Cypress.Commands.add('navigateThroughNewCameraScreens', () => {
+  cy.log('SmartCameraWeb: disable image tests');
+
+  cy.getIFrameBody()
+    .find('smart-camera-web')
+    .invoke('attr', 'disable-image-tests', 'true');
+
+  cy.getIFrameBody()
+    .find('smart-camera-web')
+    .shadow()
+    .find('selfie-capture-instructions')
+    .shadow()
+    .find('#allow')
+    .click();
+
+  cy.getIFrameBody()
+    .find('smart-camera-web')
+    .shadow()
+    .find('selfie-capture-instructions')
+    .should('not.be.visible');
+
+  cy.getIFrameBody()
+    .find('smart-camera-web')
+    .shadow()
+    .find('selfie-capture')
+    .should('be.visible');
+  cy.getIFrameBody()
+    .find('smart-camera-web')
+    .shadow()
+    .find('selfie-capture')
+    .shadow()
+    .should('contain.text', 'Take a Selfie');
+
+  cy.getIFrameBody()
+    .find('smart-camera-web')
+    .shadow()
+    .find('selfie-capture')
+    .shadow()
+    .find('#start-image-capture')
+    .click();
+
+  cy.wait(8000);
+
+  cy.getIFrameBody()
+    .find('smart-camera-web')
+    .shadow()
+    .find('selfie-capture-review')
+    .shadow()
+    .find('#select-id-image')
+    .click();
+});
diff --git a/packages/embed/cypress/tests/smartselfie-auth-new-design.cy.cjs b/packages/embed/cypress/tests/smartselfie-auth-new-design.cy.cjs
@@ -0,0 +1,77 @@
+describe('smartselfie authentication', () => {
+  beforeEach(() => {
+    cy.visit('/smartselfie-new-design');
+
+    cy.getIFrameBody().should('be.visible');
+
+    cy.intercept(
+      {
+        method: 'POST',
+        url: '*upload*',
+      },
+      {
+        upload_url:
+          'https://smile-uploads-development01.s3.us-west-2.amazonaws.com/videos/212/212-0000060103-0gdzke3mdtlco5k0sdfh6vifzcrd3n/smartselfie.zip',
+      },
+    ).as('getUploadURL');
+  });
+
+  describe('when a successful upload happens', () => {
+    beforeEach(() => {
+      cy.intercept(
+        {
+          method: 'PUT',
+          url: 'https://smile-uploads-development01.s3.us-west-2.amazonaws.com/videos/212/212-0000060103-0gdzke3mdtlco5k0sdfh6vifzcrd3n/smartselfie.zip',
+        },
+        {
+          statusCode: 200,
+        },
+      ).as('successfulUpload');
+      cy.navigateThroughNewCameraScreens();
+    });
+
+    it('should show the completion screen', () => {
+      cy.wait('@getUploadURL');
+
+      cy.wait('@successfulUpload');
+      cy.getIFrameBody().find('#complete-screen').should('be.visible');
+    });
+  });
+
+  describe('when the upload fails', () => {
+    beforeEach(() => {
+      cy.intercept(
+        {
+          method: 'PUT',
+          url: 'https://smile-uploads-development01.s3.us-west-2.amazonaws.com/videos/212/212-0000060103-0gdzke3mdtlco5k0sdfh6vifzcrd3n/smartselfie.zip',
+        },
+        {
+          statusCode: 412,
+        },
+      ).as('failedUploadRequest');
+      cy.navigateThroughNewCameraScreens();
+    });
+
+    it('should show the upload failure screen', () => {
+      cy.wait('@getUploadURL');
+
+      cy.getIFrameBody()
+        .find('#upload-progress-screen')
+        .should('not.be.visible');
+
+      cy.wait('@failedUploadRequest');
+
+      cy.getIFrameBody().find('#upload-failure-screen').should('be.visible');
+    });
+
+    it('should should retry upload when "try again" button is clicked', () => {
+      cy.wait('@getUploadURL');
+
+      cy.wait('@failedUploadRequest');
+
+      cy.getIFrameBody().find('#retry-upload').click();
+
+      cy.wait('@failedUploadRequest');
+    });
+  });
+});
diff --git a/packages/embed/package.json b/packages/embed/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@smileid/embed",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "Self Hosted Integration for Smile Identity on the Web",
   "private": true,
   "main": "inline.js",

diff --git a/packages/embed/src/js/basic-kyc.js b/packages/embed/src/js/basic-kyc.js
@@ -171,6 +171,15 @@ import { version as sdkVersion } from '../../package.json';
   }
 
   function initializeSession(generalConstraints, partnerConstraints) {
+    if (hasThemeColor()) {
+      const root = document.documentElement;
+
+      root.style.setProperty(
+        '--color-default',
+        config.partner_details.theme_color,
+      );
+    }
+
     const supportedCountries = Object.keys(generalConstraints)
       .map((countryCode) => ({
         code: countryCode,
@@ -322,6 +331,14 @@ import { version as sdkVersion } from '../../package.json';
     document.body.appendChild(script);
   }
 
+  function hasThemeColor() {
+    return (
+      config.partner_details.theme_color &&
+      ![null, undefined, 'null', 'undefined'].includes(
+        config.partner_details.theme_color,
+      )
+    );
+  }
   IDInfoForm.querySelector('#submitForm').addEventListener(
     'click',
     (event) => {

diff --git a/packages/embed/src/js/biometric-kyc.js b/packages/embed/src/js/biometric-kyc.js
@@ -177,10 +177,20 @@ import { version as sdkVersion } from '../../package.json';
   }
 
   function initializeSession(generalConstraints, partnerConstraints) {
-    SmartCameraWeb.setAttribute(
-      'theme-color',
-      config.partner_details.theme_color,
-    );
+    if (hasThemeColor()) {
+      SmartCameraWeb.setAttribute(
+        'theme-color',
+        config.partner_details.theme_color,
+      );
+
+      const root = document.documentElement;
+
+      root.style.setProperty(
+        '--color-default',
+        config.partner_details.theme_color,
+      );
+    }
+
     const supportedCountries = Object.keys(generalConstraints)
       .map((countryCode) => ({
         code: countryCode,
@@ -333,6 +343,15 @@ import { version as sdkVersion } from '../../package.json';
     document.body.appendChild(script);
   }
 
+  function hasThemeColor() {
+    return (
+      config.partner_details.theme_color &&
+      ![null, undefined, 'null', 'undefined'].includes(
+        config.partner_details.theme_color,
+      )
+    );
+  }
+
   SmartCameraWeb.addEventListener(
     'imagesComputed',
     (event) => {