diff --git a/CHANGELOG.md b/CHANGELOG.md index 181e8d6c..b147a4c0 100644 --- 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 index 3b9b5a29..d4554979 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -1,12 +1,12 @@ { "name": "example", - "version": "1.3.7", + "version": "1.3.8", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "example", - "version": "1.3.7", + "version": "1.3.8", "dependencies": { "@smileid/web-components": "file:../packages/web-components", "cors": "^2.8.5", @@ -21,7 +21,7 @@ }, "../packages/web-components": { "name": "@smileid/web-components", - "version": "1.3.7", + "version": "1.3.8", "dependencies": { "signature_pad": "^5.0.2", "validate.js": "^0.13.1" diff --git a/example/package.json b/example/package.json index f002aa20..80815ba4 100644 --- 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 index ac471e85..ea3b5f6a 100644 --- a/example/script.js +++ b/example/script.js @@ -72,10 +72,11 @@ 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, @@ -83,7 +84,7 @@ export default function setupForm() { 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 index 71529e36..b24a03ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@smileid/web", - "version": "1.3.7", + "version": "1.3.8", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@smileid/web", - "version": "1.3.7", + "version": "1.3.8", "license": "MIT", "workspaces": [ "packages/web-components/*/*", @@ -14660,7 +14660,7 @@ }, "packages/embed": { "name": "@smileid/embed", - "version": "1.3.7", + "version": "1.3.8", "dependencies": { "@sentry/browser": "^8.13.0", "@sentry/esbuild-plugin": "^2.20.1", @@ -14687,7 +14687,7 @@ }, "packages/smart-camera-web": { "name": "@smile_identity/smart-camera-web", - "version": "1.3.7", + "version": "1.3.8", "license": "MIT", "devDependencies": { "@cypress/code-coverage": "^3.12.39", @@ -14701,7 +14701,7 @@ }, "packages/web-components": { "name": "@smileid/web-components", - "version": "1.3.7", + "version": "1.3.8", "dependencies": { "signature_pad": "^5.0.2", "validate.js": "^0.13.1" @@ -14721,7 +14721,7 @@ }, "packages/web-components/components/signature-pad": { "name": "@smileid/signature-pad", - "version": "1.3.7", + "version": "1.3.8", "dependencies": { "signature_pad": "^5.0.2" }, diff --git a/package.json b/package.json index 3d644fce..0854f9c7 100644 --- 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 new file mode 100644 index 00000000..ea6694d8 --- /dev/null +++ b/packages/embed/cypress/pages/smartselfie-new-design.html @@ -0,0 +1,48 @@ + + +
+ + + + + + + + + + diff --git a/packages/embed/cypress/support/commands.js b/packages/embed/cypress/support/commands.js index 01da535b..9dee03cd 100644 --- 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 new file mode 100644 index 00000000..a1ccc104 --- /dev/null +++ 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 index 22246a90..22343f32 100644 --- 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 index 7fc5b8ee..5ec79a96 100644 --- 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 index 4d3663e1..b3b0d8a5 100644 --- 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) => { diff --git a/packages/embed/src/js/doc-verification.js b/packages/embed/src/js/doc-verification.js index e2aa73e7..08988dbe 100644 --- a/packages/embed/src/js/doc-verification.js +++ b/packages/embed/src/js/doc-verification.js @@ -209,10 +209,19 @@ import { version as sdkVersion } from '../../package.json'; let selectedIdType; let selectedIdName; - 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, + ); + } function loadIdTypes(countryCode) { const countryIdTypes = constraints.find( @@ -443,6 +452,15 @@ import { version as sdkVersion } from '../../package.json'; } } + function hasThemeColor() { + return ( + config.partner_details.theme_color && + ![null, undefined, 'null', 'undefined'].includes( + config.partner_details.theme_color, + ) + ); + } + SmartCameraWeb.addEventListener( 'imagesComputed', (event) => { diff --git a/packages/embed/src/js/ekyc.js b/packages/embed/src/js/ekyc.js index 9c2f80eb..f539c324 100644 --- a/packages/embed/src/js/ekyc.js +++ b/packages/embed/src/js/ekyc.js @@ -169,6 +169,14 @@ 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, @@ -321,6 +329,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, + ) + ); + } + IDInfoForm.querySelector('#submitForm').addEventListener( 'click', (event) => { diff --git a/packages/embed/src/js/enhanced-document-verification.js b/packages/embed/src/js/enhanced-document-verification.js index 2abfccfe..caca5a4e 100644 --- a/packages/embed/src/js/enhanced-document-verification.js +++ b/packages/embed/src/js/enhanced-document-verification.js @@ -78,10 +78,19 @@ import { version as sdkVersion } from '../../package.json'; ); function initializeSession(constraints) { - 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(constraints) .map((countryCode) => ({ code: countryCode, @@ -253,6 +262,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) => { diff --git a/packages/embed/src/js/smartselfie-auth.js b/packages/embed/src/js/smartselfie-auth.js index d1ebc5f0..f5f91e4a 100644 --- a/packages/embed/src/js/smartselfie-auth.js +++ b/packages/embed/src/js/smartselfie-auth.js @@ -1,4 +1,3 @@ -import '@smile_identity/smart-camera-web'; import JSZip from 'jszip'; import { version as sdkVersion } from '../../package.json'; @@ -57,6 +56,12 @@ import { version as sdkVersion } from '../../package.json'; event.data.includes('SmileIdentity::Configuration') ) { config = JSON.parse(event.data); + if (config.use_new_component) { + import('@smileid/web-components/smart-camera-web'); + CloseIframeButton.setAttribute('hidden', true); + } else { + import('@smile_identity/smart-camera-web'); + } partner_params = getPartnerParams(); id_info = {}; SmartCameraWeb.setAttribute( @@ -81,6 +86,16 @@ import { version as sdkVersion } from '../../package.json'; false, ); + SmartCameraWeb.addEventListener( + 'smart-camera-web.publish', + (event) => { + images = event.detail.images; + setActiveScreen(UploadProgressScreen); + handleFormSubmit(event); + }, + false, + ); + RetryUploadButton.addEventListener( 'click', () => { @@ -89,7 +104,7 @@ import { version as sdkVersion } from '../../package.json'; false, ); - CloseIframeButton.addEventListener( + CloseIframeButton?.addEventListener( 'click', () => { closeWindow(true); @@ -97,6 +112,22 @@ import { version as sdkVersion } from '../../package.json'; false, ); + SmartCameraWeb.addEventListener( + 'smart-camera-web.close', + () => { + closeWindow(true); + }, + false, + ); + + SmartCameraWeb.addEventListener( + 'smart-camera-web.cancelled', + () => { + closeWindow(true); + }, + false, + ); + function parseJWT(token) { /** * A JSON Web Token (JWT) uses a base64 URL encoded string in it's body. diff --git a/packages/smart-camera-web/package.json b/packages/smart-camera-web/package.json index fd07578f..1d0469fb 100644 --- a/packages/smart-camera-web/package.json +++ b/packages/smart-camera-web/package.json @@ -1,6 +1,6 @@ { "name": "@smile_identity/smart-camera-web", - "version": "1.3.7", + "version": "1.3.8", "description": "WebComponent for smartly capturing images on the web, for use with SmileIdentity", "main": "smart-camera-web.js", "scripts": { diff --git a/packages/web-components/components/selfie/src/SelfieCaptureScreens.js b/packages/web-components/components/selfie/src/SelfieCaptureScreens.js index 7a66d51b..b8cd5ac8 100644 --- a/packages/web-components/components/selfie/src/SelfieCaptureScreens.js +++ b/packages/web-components/components/selfie/src/SelfieCaptureScreens.js @@ -30,7 +30,7 @@ class SelfieCaptureScreens extends HTMLElement { ${styles(this.themeColor)}