[Embed][WebComponent] Support both hide back and hide back to host (#376

)

* Support both hide back and hide back to host
Change from embed package to use web-components file dependency

* Bump package version
Update change log

* Add test

* fix lint

CHANGELOG.md

@@ -7,10 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [1.4.6] - 2024-12-19
+## [1.4.7] - 2024-12-23
+
+### Added
+
+- Added support for both `hide-back-to-host` and `hide-back` to web components (selfie capture instructions and smart camera web)
 
 ## Changed
 
+- Change embed to use the latest web components via file dependency
+- Added support for both `hide-back-to-host` and `hide-back` to web components (selfie capture instructions and smart camera web)
+
+## [1.4.6] - 2024-12-19
+
+### Changed
+
 - Fixed selfie import
 
 ## [1.4.5] - 2024-12-16

example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "example",
   "private": true,
-  "version": "1.4.6",
+  "version": "1.4.7",
   "type": "module",
   "main": "server.js",
   "scripts": {

example/script.js

@@ -65,43 +65,44 @@ export default function setupForm() {
         signature,
         timestamp,
       } = tokenResults;
-
-      if (window.SmileIdentity) {
-        window.SmileIdentity({
-          token,
-          product,
-          callback_url,
-          environment,
-          use_new_component: true,
-          //demo_mode: true,
-          previewBVNMFA: true,
-          hide_attribution: true,
-          document_capture_modes: ['camera', 'upload'],
-          allow_agent_mode: true,
-          consent_required: {
-            NG: ['BVN'],
-          },
-          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: '#96002d',
-          },
-          onSuccess: () => {
-            resetButton();
-          },
-          onClose: () => {
-            resetButton();
-          },
-          onError: () => {
-            resetButton();
-          },
-        });
-      }
+      window.SmileIdentity({
+        token,
+        product,
+        callback_url,
+        environment,
+        use_new_component: true,
+        //demo_mode: true,
+        previewBVNMFA: true,
+        hide_attribution: true,
+        document_capture_modes: ['camera', 'upload'],
+        allow_agent_mode: true,
+        // id_selection: {
+        //   NG: ['PASSPORT']
+        // },
+        // consent_required: {
+        //   NG: ['BVN'],
+        // },
+        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: '#96002d',
+        },
+        onSuccess: () => {
+          resetButton();
+        },
+        onClose: () => {
+          resetButton();
+        },
+        onError: () => {
+          resetButton();
+        },
+      });
     } catch (error) {
+      console.error(error);
       resetButton();
     }
   });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "description": "A collection of SmileID browser clients and components",
   "main": "index.js",
   "private": true,

packages/embed/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/embed",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "description": "Self Hosted Integration for Smile Identity on the Web",
   "private": true,
   "main": "inline.js",
@@ -30,7 +30,7 @@
     "@sentry/browser": "^8.33.0",
     "@sentry/esbuild-plugin": "^2.22.3",
     "@smile_identity/smart-camera-web": "file:../smart-camera-web",
-    "@smileid/web-components": "<2.0.0",
+    "@smileid/web-components": "file:../web-components",
     "jszip": "^3.10.1",
     "validate.js": "^0.13.1"
   },

packages/smart-camera-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smile_identity/smart-camera-web",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "description": "WebComponent for smartly capturing images on the web, for use with SmileIdentity",
   "main": "smart-camera-web.js",
   "scripts": {

packages/web-components/components/selfie/src/SelfieCaptureScreens.js

@@ -194,7 +194,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() {

packages/web-components/components/signature-pad/package.json

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

packages/web-components/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() {

packages/web-components/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');
+  });
+});

packages/web-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web-components",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "private": "true",
   "main": "index.js",
   "exports": {