Set stream to null after stopping all tracks

Add thank you screen Add capture back id Add hide back capture
smileidentity · Dec 16, 2023 · f370967 · f370967
1 parent aa02c22
commit f370967
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 6 deletions.
diff --git a/packages/components/document-capture/DocumentCapture.js b/packages/components/document-capture/DocumentCapture.js
@@ -3,7 +3,8 @@ import './id-review/src'
 import './instructions/src'
 import { SmartCamera } from "../domain/camera/SmartCamera";
 import { Router } from '../router/router';
-
+import { IMAGE_TYPE  } from "../domain/Constants";
+const VERSION = '1.0.2';
 
 async function getPermissions(captureScreen) {
 	await SmartCamera.getMedia({
@@ -29,13 +30,27 @@ class DocumentCapture extends HTMLElement {
 	connectedCallback() {
 		this.innerHTML = `
 			<document-instruction ${this.hideInstructions ? 'hidden' : ''}></document-instruction>
-			<id-capture ${this.hideInstructions ? '' : 'hidden'} ></id-capture>
+			<id-capture side-of-id='Front' id-type='National ID' ${this.hideInstructions ? '' : 'hidden'} ></id-capture>
+			<id-capture id='back-of-id' side-of-id='Back' id-type='National ID' hidden ></id-capture>
 			<id-review hidden></id-review>
+			<id-review id='back-of-id-review' hidden></id-review>
+			<thank-you hidden></thank-you>
 		`;
 
+		this._data = {
+			images: [],
+			partner_params: {
+			  libraryVersion: VERSION,
+			  permissionGranted: false,
+			},
+		  };
+
 		this.documentInstruction = this.querySelector('document-instruction');
 		this.idCapture = this.querySelector('id-capture');
 		this.idReview = this.querySelector('id-review');
+		this.idCaptureBack = this.querySelector('#back-of-id');
+		this.backOfIdReview = this.querySelector('#back-of-id-review');
+		this.thankYouScreen = this.querySelector('thank-you');
 
 		if (this.hideInstructions) {
 			Router.setActiveScreen(this.idCapture);
@@ -44,21 +59,78 @@ class DocumentCapture extends HTMLElement {
 			Router.setActiveScreen(this.documentInstruction);
 		}
 
+		this.setUpEventListeners();
+	}
+
+
+	setUpEventListeners() {
 		this.documentInstruction.addEventListener('DocumentInstruction::StartCamera', async () => {
 			await getPermissions(this.idCapture);
 			Router.setActiveScreen(this.idCapture);
 		});
 
 		this.idCapture.addEventListener('IDCapture::ImageCaptured', (event) => {
 			this.idReview.setAttribute('data-image', event.detail.image);
+			this._data.images.push({
+				image: event.detail.image.split(',')[1],
+				image_type_id: IMAGE_TYPE.ID_CARD_IMAGE_BASE64,
+			  });
 			Router.setActiveScreen(this.idReview);
+			SmartCamera.stopMedia();
+		});
+
+		this.idReview.addEventListener('IdReview::ReCaptureID', async (event) => {
+			this.idReview.removeAttribute('data-image');
+			this._data.images.pop();
+			Router.setActiveScreen(this.idCapture);
+			await getPermissions(this.idCapture);
+		});
+
+		this.idReview.addEventListener('IdReview::SelectImage', async () => {
+			if (this.hideBackOfId) {
+				this._publishSelectedImages();
+			}else {
+				Router.setActiveScreen(this.idCaptureBack);
+				await getPermissions(this.idCaptureBack);
+			}
+		});
+
+		this.idCaptureBack.addEventListener('IDCapture::ImageCaptured', (event) => {
+			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,
+			  });
+			Router.setActiveScreen(this.backOfIdReview);
+			SmartCamera.stopMedia();
+		});
+
+		this.backOfIdReview.addEventListener('IdReview::ReCaptureID', async (event) => {
+			this.backOfIdReview.removeAttribute('data-image');
+			this._data.images.pop();
+			Router.setActiveScreen(this.idCaptureBack);
+			await getPermissions(this.idCaptureBack);
 		});
+
+		this.backOfIdReview.addEventListener('IdReview::SelectImage', () => {
+			this._publishSelectedImages();
+		});
+	}
+	_publishSelectedImages() {
+		this.dispatchEvent(
+		  new CustomEvent('imagesComputed', { detail: this._data }),
+		);
+		Router.setActiveScreen(this.thankYouScreen);
 	}
 
 
 	get hideInstructions() {
 		return this.hasAttribute('hide-instructions');
 	}
+
+	get hideBackOfId() {
+		return this.hasAttribute('hide-back-of-id');
+	}
 }
 
 if ('customElements' in window && !customElements.get('document-capture')) {

diff --git a/packages/components/document-capture/DocumentCapture.stories.js b/packages/components/document-capture/DocumentCapture.stories.js
@@ -21,4 +21,13 @@ export const DocumentCaptureHiddenInstructions = {
 		>
         </document-capture>
     `,
+}
+
+export const DocumentCaptureHideBackOfId = {
+    render: () => `
+        <document-capture
+			hide-back-of-id
+		>
+        </document-capture>
+    `,
 }
diff --git a/packages/components/document-capture/id-capture/src/IdCaptureScreen.js b/packages/components/document-capture/id-capture/src/IdCaptureScreen.js
@@ -245,7 +245,7 @@ function templateString() {
         </button>
       </div>
     ` : ''}
-    <h2 class='h2 color-digital-blue'>Nigeria National ID Card</h2>
+    <h2 class='h2 color-digital-blue'>${this.idType}</h2>
     <div class="circle-progress" id="loader">
         <p class="spinner"></p>
         <p style="--flow-space: 4rem">Checking permissions</p>
@@ -262,7 +262,7 @@ function templateString() {
         </svg>
       </div>
     </div>
-    <h2 class='h2 color-digital-blue reset-margin-block id-side'>Front of National ID Card</h2>
+    <h2 class='h2 color-digital-blue reset-margin-block id-side'>${this.IdSides[this.sideOfId]} of ${this.idType}</h2>
     <h4 class='h4 color-digital-blue description reset-margin-block'>Make sure all corners are visible and there is no glare.</h4>
     <div class='actions' hidden>
       <button id='capture-id-image' class='button icon-btn | center' type='button'>
@@ -290,6 +290,10 @@ class IdCaptureScreen extends HTMLElement {
     };
 
     this.attachShadow({ mode: "open" });
+    this.IdSides = {
+      front: "Front",
+      back: "Back",
+    };
   }
 
   connectedCallback() {
@@ -462,7 +466,6 @@ class IdCaptureScreen extends HTMLElement {
   }
 
   setUpEventListeners() {
-    this.IDCameraScreen = this.shadowRoot.querySelector('#id-camera-screen');
     this.captureIDImage = this.shadowRoot.querySelector('#capture-id-image');
     this.backButton = this.shadowRoot.querySelector("#back-button");
 
@@ -525,8 +528,20 @@ class IdCaptureScreen extends HTMLElement {
     return this.getAttribute('hidden');
   }
 
+  get sideOfId() {
+    return (this.getAttribute('side-of-id') || 'front').toLowerCase();
+  }
+
+  get isFrontOfId() {
+    return this.sideOfId === 'front';
+  }
+
   get isBackOfId() {
-    return this.hasAttribute('isBackOfId');
+    return !this.isFrontOfId;
+  }
+
+  get idType() {
+    return this.getAttribute('id-type');
   }
 
   static get observedAttributes() {

diff --git a/packages/components/document-capture/thank-you/ThankYou.js b/packages/components/document-capture/thank-you/ThankYou.js
@@ -0,0 +1,27 @@
+import styles from '../../styles';
+
+class ThankYou extends HTMLElement {
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		this.innerHTML = `
+		${styles}
+		<div hidden id='thanks-screen' class='flow center'>
+			<div class='section | flow'>
+			<h1>Thank you</h1>
+			${this.hideAttribution ? '' : `
+				<powered-by-smile-id></powered-by-smile-id>
+			`}
+			</div>
+		</div>
+		`;
+	}
+}
+
+if ('customElements' in window && !window.customElements.get('thank-you')) {
+	customElements.define('thank-you', ThankYou);
+}
+
+export { ThankYou };
diff --git a/packages/components/domain/Constants.js b/packages/components/domain/Constants.js
@@ -0,0 +1,23 @@
+/**
+ * The type of image submitted in the job request
+ * @readonly
+ * @enum {number}
+ */
+export const IMAGE_TYPE = {
+	/** SELFIE_IMAGE_FILE Selfie image in .png or .jpg file format */
+	SELFIE_IMAGE_FILE: 0,
+	/** ID_CARD_IMAGE_FILE ID card image in .png or .jpg file format */
+	ID_CARD_IMAGE_FILE: 1,
+	/** SELFIE_IMAGE_BASE64 Base64 encoded selfie image (.png or .jpg) */
+	SELFIE_IMAGE_BASE64: 2,
+	/** ID_CARD_IMAGE_BASE64 Base64 encoded ID card image (.png or .jpg) */
+	ID_CARD_IMAGE_BASE64: 3,
+	/** LIVENESS_IMAGE_FILE Liveness image in .png or .jpg file format */
+	LIVENESS_IMAGE_FILE: 4,
+	/** ID_CARD_BACK_IMAGE_FILE Back of ID card image in .png or .jpg file format */
+	ID_CARD_BACK_IMAGE_FILE: 5,
+	/** LIVENESS_IMAGE_BASE64 Base64 encoded liveness image (.jpg or .png) */
+	LIVENESS_IMAGE_BASE64: 6,
+	/** ID_CARD_BACK_IMAGE_BASE64 Base64 encoded back of ID card image (.jpg or .png) */
+	ID_CARD_BACK_IMAGE_BASE64: 7,
+};
diff --git a/packages/components/domain/camera/SmartCamera.js b/packages/components/domain/camera/SmartCamera.js
@@ -22,6 +22,7 @@ class SmartCamera {
 	static stopMedia() {
 		if (SmartCamera.stream) {
 			SmartCamera.stream.getTracks().forEach(track => track.stop());
+			SmartCamera.stream = null;
 		}
 	}