Merge branch 'main' into updated-color-theme

CHANGELOG.md

@@ -6,11 +6,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
-
 ### Changed
 
 - When `theme_color` is provided, it will now be used to style header texts and buttons
 
+
+## [1.3.6] - 2024-08-01
+
+### Changed
+
+- Added green book document to document verification
+
+
 ## [1.3.5] - 2024-07-12
 
 ### Changed

example/package.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "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.3.5",
+  "version": "1.3.6",
   "description": "Self Hosted Integration for Smile Identity on the Web",
   "private": true,
   "main": "inline.js",

packages/smart-camera-web/package.json

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

packages/web-components/components/document/src/DocumentCaptureScreens.js

@@ -189,7 +189,7 @@ class DocumentCaptureScreens extends HTMLElement {
     this.documentInstructionBack.addEventListener(
       'document-capture-instructions.upload',
       async (event) => {
-        this.idReview.setAttribute('data-image', event.detail.image);
+        this.backOfIdReview.setAttribute('data-image', event.detail.image);
         this._data.images.push({
           image: event.detail.image.split(',')[1],
           image_type_id: IMAGE_TYPE.ID_CARD_BACK_IMAGE_BASE64,
@@ -198,7 +198,7 @@ class DocumentCaptureScreens extends HTMLElement {
       },
     );
     this.idCaptureBack.addEventListener('document-capture.publish', (event) => {
-      this.backOfIdReview.setAttribute('data-image', event.detail.image);
+      this.backOfIdReview.setAttribute('data-image', event.detail.previewImage);
       this._data.images.push({
         image: event.detail.image.split(',')[1],
         image_type_id: IMAGE_TYPE.ID_CARD_BACK_IMAGE_BASE64,

packages/web-components/components/document/src/document-capture-instructions/DocumentCaptureInstructions.js

@@ -423,7 +423,7 @@ class DocumentInstruction extends HTMLElement {
 
             this.dispatchEvent(
               new CustomEvent('document-capture-instructions.upload', {
-                detail: { image: fileData },
+                detail: { image: fileData, previewImage: fileData },
               }),
             );
           } catch (error) {

packages/web-components/components/document/src/document-capture-review/DocumentCaptureReview.js

@@ -20,18 +20,6 @@ function templateString() {
         height: 100vh;
         justify-content: center;
       }
-
-      .video-overlay {
-        position: absolute;
-        border-width: 1rem;
-        border-color: white;
-        border-style: solid;
-        inset: 0px;
-      }
-
-      img {
-        clip-path: polygon(10% 10%, 90% 10%, 90% 85%, 10% 85%);
-      }
     }
     
     .id-image-container {
@@ -42,25 +30,15 @@ function templateString() {
     }
 
     .id-image {
-      max-width: fit-content;
-      height: auto;
-      text-align: center;
-      position: relative;
-      overflow: hidden;
+        width: 100%;
+        text-align: center;
+        position: relative;
+        background: white;
     }
     img {
       height: 100%;
       min-height: 100px;
-      clip-path: polygon(5% 5%, 95% 5%, 95% 90%, 5% 90%);
-    }
-
-    .video-overlay .inner-border {
-      position: absolute;
-      border-width: 1rem;
-      border-color: #9394ab;
-      border-style: solid;
-      border-radius: 1rem;
-      inset: -8px;
+      width: 98%;
     }
 
     .action-buttons {
@@ -178,6 +156,12 @@ function templateString() {
     .padding-bottom-2 {
       padding-bottom: 2rem;
     }
+    img {
+        border-width: 0.25rem;
+        border-color: #9394ab;
+        border-style: solid;
+        border-radius: 0.25rem;
+      }
 
     .instructions-wrapper {
       display: inline-flex;
@@ -247,7 +231,7 @@ function templateString() {
       <div class='id-image-container'>
         <div class='id-image'>
           <div class='video-overlay'></div>
-          ${this.imageSrc ? `<img alt='your ID card' id='document-capture-review-image' src='${this.imageSrc}' width='396' />` : ''}
+          ${this.imageSrc ? `<img alt='your ID card' id='document-capture-review-image' src='${this.imageSrc}' />` : ''}
           </div>
         <div class='flow action-buttons'>
           <button data-variant='solid full-width' class='button' type='button' id='select-id-image'>