@ekyc_qoobiss/qbs-ect-cmp 1.5.11

package/dist/collection/components/identification-component/identification-component.js

@@ -0,0 +1,397 @@
+import { h } from '@stencil/core';
+import { initDevice } from '../../helpers';
+import { SessionKeys } from '../../helpers/textValues';
+import { v4 as uuidv4 } from 'uuid';
+import { ApiCall } from '../../helpers/ApiCall';
+import store from '../../helpers/store';
+import { ML5 } from '../../helpers/ML5';
+export class IdentificationComponent {
+  constructor() {
+    this.selfieFlow = {
+      done: false,
+      photoFile: null,
+      recordingFile: null,
+    };
+    this.token = undefined;
+    this.order_id = undefined;
+    this.api_url = undefined;
+    this.idErrorType = '';
+    this.idSide = '';
+    this.idFlow = {
+      done: false,
+      photoFile: null,
+      recordingFile: null,
+    };
+    this.idBackFlow = {
+      done: false,
+      photoFile: null,
+      recordingFile: null,
+    };
+    ML5.getInstance();
+    this.device = initDevice();
+    this.apiCall = new ApiCall();
+    this.captureRetryCount = 0;
+  }
+  onTokenChange(newValue, _oldValue) {
+    if (store.token !== newValue) {
+      store.token = newValue;
+    }
+  }
+  onOrderIdChange(newValue, _oldValue) {
+    if (store.requestId !== newValue) {
+      store.requestId = newValue;
+      sessionStorage.setItem(SessionKeys.RequestIdKey, store.requestId);
+    }
+  }
+  onApiUrlChange(newValue, _oldValue) {
+    if (store.apiBaseUrl !== newValue) {
+      store.apiBaseUrl = newValue;
+    }
+  }
+  agreementAcceptanceEmitted(data) {
+    this.apiCall.GenerateAgreement(data.detail.agreementType);
+  }
+  async captureIdBackImage(event) {
+    let idPhoto = event.detail;
+    this.idBackFlow.photoFile = new File([idPhoto], 'idBackImage.png', { type: 'image/png' });
+    await this.runIdBackFlow();
+  }
+  async captureIdImage(event) {
+    let idPhoto = event.detail;
+    this.idFlow.photoFile = new File([idPhoto], 'idImage.png', { type: 'image/png' });
+    await this.runIdFlow();
+  }
+  async capturedIdRecording(event) {
+    let idRecording = event.detail;
+    let mimeType = idRecording.type.split(';')[0];
+    let extension = mimeType.split('/')[1];
+    if (store.flowStatus == 'ID') {
+      this.idFlow.recordingFile = new File([idRecording], 'idVideo.' + extension, { type: mimeType });
+      await this.runIdFlow();
+    }
+    if (store.flowStatus == 'IDBACK') {
+      this.idBackFlow.recordingFile = new File([idRecording], 'idBackVideo.' + extension, { type: mimeType });
+      await this.runIdBackFlow();
+    }
+  }
+  async runIdFlow() {
+    if (this.idFlow.photoFile == null || this.idFlow.recordingFile == null || this.idFlow.done) {
+      return;
+    }
+    let uploadedPhoto = await this.apiCall.UploadFileForRequestB64(store.requestId, 'IdFront', this.idFlow.photoFile);
+    if (uploadedPhoto === false) {
+      this.idFlow.done = false;
+      this.idFlow.photoFile = null;
+      this.idFlow.recordingFile = null;
+      this.switchCamera();
+      store.flowStatus = 'IDERROR';
+      return;
+    }
+    let uploadedRecording = await this.apiCall.UploadFileForRequestB64(store.requestId, 'IdFrontVideo', this.idFlow.recordingFile);
+    this.idFlow.done = uploadedRecording;
+    if (uploadedRecording === true) {
+      if (store.hasIdBack) {
+        this.idSide = 'back';
+        store.flowStatus = 'HOWTOID';
+      }
+      else {
+        store.flowStatus = 'HOWTOLIVENESS';
+      }
+    }
+    else {
+      this.idFlow.photoFile = null;
+      this.idFlow.recordingFile = null;
+      store.flowStatus = 'IDERROR';
+    }
+  }
+  async runIdBackFlow() {
+    if (this.idBackFlow.photoFile == null || this.idBackFlow.recordingFile == null || this.idBackFlow.done) {
+      return;
+    }
+    let uploadedPhoto = await this.apiCall.UploadFileForRequestB64(store.requestId, 'IdBack', this.idBackFlow.photoFile);
+    if (uploadedPhoto === false) {
+      this.idBackFlow.done = false;
+      this.idBackFlow.photoFile = null;
+      this.idBackFlow.recordingFile = null;
+      this.switchCamera();
+      this.idErrorType = 'invalid';
+      store.flowStatus = 'IDERROR';
+      return;
+    }
+    let uploadedRecording = await this.apiCall.UploadFileForRequestB64(store.requestId, 'IdBackVideo', this.idBackFlow.recordingFile);
+    this.idBackFlow.done = uploadedRecording;
+    if (uploadedRecording === true) {
+      store.flowStatus = 'HOWTOLIVENESS';
+    }
+    else {
+      this.idBackFlow.photoFile = null;
+      this.idBackFlow.recordingFile = null;
+      store.flowStatus = 'IDERROR';
+    }
+  }
+  async captureSelfieImage(event) {
+    let selfiePhoto = event.detail;
+    this.selfieFlow.photoFile = new File([selfiePhoto], 'selfie.png', { type: 'image/png' });
+    await this.runSelfieFlow();
+  }
+  async capturedSelfieRecording(event) {
+    let selfieRecording = event.detail;
+    let mimeType = selfieRecording.type.split(';')[0];
+    let extension = mimeType.split('/')[1];
+    this.selfieFlow.recordingFile = new File([selfieRecording], 'selfieVideo.' + extension, { type: mimeType });
+    await this.runSelfieFlow();
+  }
+  async runSelfieFlow() {
+    if (this.selfieFlow.photoFile == null || this.selfieFlow.recordingFile == null || this.selfieFlow.done) {
+      return;
+    }
+    let uploadPhoto = await this.apiCall.UploadFileForRequestB64(store.requestId, 'Selfie', this.selfieFlow.photoFile);
+    if (uploadPhoto === false) {
+      this.selfieFlow.done = false;
+      this.selfieFlow.photoFile = null;
+      this.selfieFlow.recordingFile = null;
+      store.flowStatus = 'LIVENESSERROR';
+      return;
+    }
+    let uploadRecording = await this.apiCall.UploadFileForRequestB64(store.requestId, 'SelfieVideo', this.selfieFlow.recordingFile);
+    this.selfieFlow.done = uploadRecording;
+    if (uploadRecording == true) {
+      store.flowStatus = 'COMPLETE';
+    }
+    else {
+      this.selfieFlow.photoFile = null;
+      this.selfieFlow.recordingFile = null;
+      store.flowStatus = 'LIVENESSERROR';
+    }
+  }
+  timeElapsed() {
+    this.idErrorType = 'timeout';
+    if (store.flowStatus == 'ID') {
+      this.switchCamera();
+      if (!this.idFlow.done) {
+        store.flowStatus = 'IDERROR';
+      }
+    }
+    if (store.flowStatus == 'IDBACK') {
+      this.switchCamera();
+      if (!this.idBackFlow.done) {
+        store.flowStatus = 'IDERROR';
+      }
+    }
+    if (store.flowStatus == 'LIVENESS') {
+      if (!this.selfieFlow.done) {
+        store.flowStatus = 'LIVENESSERROR';
+      }
+    }
+  }
+  switchCamera() {
+    if (this.captureRetryCount == 2) {
+      let camIndex = store.cameraIds.indexOf(store.cameraId);
+      store.cameraId = camIndex === store.cameraIds.length - 1 ? store.cameraIds[0] : store.cameraIds[camIndex + 1];
+      this.captureRetryCount = 0;
+    }
+    else {
+      this.captureRetryCount++;
+    }
+  }
+  componentWillLoad() {
+    store.token = this.token;
+    store.apiBaseUrl = this.api_url;
+  }
+  componentWillRender() {
+    store.requestId = sessionStorage.getItem(SessionKeys.RequestIdKey);
+    if (!store.requestId) {
+      if (!this.order_id) {
+        this.order_id = uuidv4();
+      }
+      store.requestId = this.order_id;
+      sessionStorage.setItem(SessionKeys.RequestIdKey, store.requestId);
+    }
+    else {
+      this.order_id = store.requestId;
+    }
+    store.flowStatus = sessionStorage.getItem(SessionKeys.FlowStatusKey);
+    if (!store.flowStatus) {
+      store.flowStatus = 'LANDING';
+      sessionStorage.setItem(SessionKeys.FlowStatusKey, store.flowStatus);
+    }
+    if (this.idSide == '') {
+      this.idSide = store.hasIdBack ? 'face' : '';
+    }
+  }
+  render() {
+    let currentBlock = h("div", null);
+    if (store.flowStatus == 'LANDING') {
+      currentBlock = h("landing-validation", { device: this.device });
+    }
+    if (store.flowStatus == 'AGREEMENT') {
+      currentBlock = h("agreement-info", null);
+    }
+    if (store.flowStatus == 'PHONE') {
+      currentBlock = h("sms-code-validation", null);
+    }
+    if (store.flowStatus == 'CODE') {
+      currentBlock = h("sms-code-validation", null);
+    }
+    if (store.flowStatus == 'CODEERROR') {
+      currentBlock = h("sms-code-validation", null);
+    }
+    if (store.flowStatus == 'HOWTOID') {
+      currentBlock = h("how-to-info", { idSide: this.idSide });
+    }
+    if (store.flowStatus == 'ID') {
+      currentBlock = h("id-capture", { id: "idFront", device: this.device });
+    }
+    if (store.flowStatus == 'IDBACK') {
+      currentBlock = h("id-back-capture", { id: "idBack", device: this.device });
+    }
+    if (store.flowStatus == 'IDERROR') {
+      currentBlock = h("capture-error", { idSide: this.idSide, type: this.idErrorType });
+    }
+    if (store.flowStatus == 'HOWTOLIVENESS') {
+      currentBlock = h("how-to-info", { idSide: "" });
+    }
+    if (store.flowStatus == 'LIVENESS') {
+      currentBlock = h("selfie-capture", { device: this.device, id: "camera" });
+    }
+    if (store.flowStatus == 'LIVENESSERROR') {
+      currentBlock = h("capture-error", null);
+    }
+    if (store.flowStatus == 'COMPLETE') {
+      currentBlock = h("end-redirect", null);
+    }
+    return h("div", null, currentBlock);
+  }
+  static get is() { return "identification-component"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["identification-component.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["identification-component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "token": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "token",
+        "reflect": false
+      },
+      "order_id": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "order_id",
+        "reflect": true
+      },
+      "api_url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "api_url",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "idErrorType": {},
+      "idSide": {},
+      "idFlow": {},
+      "idBackFlow": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "token",
+        "methodName": "onTokenChange"
+      }, {
+        "propName": "order_id",
+        "methodName": "onOrderIdChange"
+      }, {
+        "propName": "api_url",
+        "methodName": "onApiUrlChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "agreementAcceptance",
+        "method": "agreementAcceptanceEmitted",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "photoIdBackCapture",
+        "method": "captureIdBackImage",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "photoIdCapture",
+        "method": "captureIdImage",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "recordingIdCapture",
+        "method": "capturedIdRecording",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "photoSelfieCapture",
+        "method": "captureSelfieImage",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "recordingSelfieCapture",
+        "method": "capturedSelfieRecording",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "timeElapsed",
+        "method": "timeElapsed",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/landing-validation/landing-validation.js

@@ -0,0 +1,78 @@
+import { h } from '@stencil/core';
+import { LandingValues } from '../../helpers/textValues';
+// @ts-ignore
+import info from '../../assets/landing/info.svg';
+import idSvg from '../../assets/landing/id.svg';
+import idDevice from '../../assets/landing/device.svg';
+import idValidation from '../../assets/landing/validation.svg';
+import store from '../../helpers/store';
+import { ApiCall } from '../../helpers/ApiCall';
+export class LandingValidation {
+  constructor() {
+    this.device = undefined;
+    this.saved = undefined;
+    this.warningText = undefined;
+    this.apiCall = new ApiCall();
+  }
+  async componentWillLoad() {
+    this.saved = await this.apiCall.AddIdentificationRequest(store.requestId, JSON.stringify(this.device));
+    if (!this.saved) {
+      this.saved = await this.apiCall.AddIdentificationRequest(store.requestId, JSON.stringify(this.device));
+    }
+    if (store.hasIdBack) {
+      this.warningText = LandingValues.WarningMd;
+    }
+    else {
+      this.warningText = LandingValues.Warning;
+    }
+  }
+  async startFlow() {
+    if (this.saved) {
+      store.flowStatus = 'AGREEMENT';
+    }
+  }
+  render() {
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", null, LandingValues.Title), h("div", { class: "d-flex space-between align-center" }, h("p", { class: "main-text font-size-2" }, LandingValues.Description), h("div", { class: "img-info" }, h("div", { class: "i-effect" }), h("img", { src: info })))), h("div", { class: "info-container" }, h("div", { class: "img-text" }, h("div", { class: "bg-img" }, h("img", { src: idSvg })), h("h3", null, LandingValues.IdInfo)), h("div", { class: "img-text" }, h("div", { class: "bg-img" }, h("img", { src: idDevice })), h("h3", null, LandingValues.DeviceInfo)), h("div", { class: "img-text" }, h("div", { class: "bg-img" }, h("img", { src: idValidation })), h("h3", null, LandingValues.SmsInfo))), h("div", { class: "terms-container" }, h("h3", { class: "font-size-2 mb-1" }, this.warningText)), h("div", { class: "pos-relative" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", onClick: () => this.startFlow() }, LandingValues.Button), h("p", { class: "main-text font-size-18 text-right mb-0" }, LandingValues.FooterText))))));
+  }
+  static get is() { return "landing-validation"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["landing-validation.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["landing-validation.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "device": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Device",
+          "resolved": "Device",
+          "references": {
+            "Device": {
+              "location": "import",
+              "path": "../../models/IDevice"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "saved": {},
+      "warningText": {}
+    };
+  }
+}

package/dist/collection/components/selfie-capture/selfie-capture.css

@@ -0,0 +1,22 @@
+/* .cameraContainer {
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  position: relative;
+  overflow: hidden;
+} */
+
+.block {
+  width: 60%;
+  margin-left: 20%;
+}
+
+.canvas-on-video {
+  max-width: 100%;
+  max-height: 100%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 2;
+  transform: scale(-1, 1);
+}

package/dist/collection/components/selfie-capture/selfie-capture.js

@@ -0,0 +1,198 @@
+import { h, getAssetPath } from '@stencil/core';
+import Events from '../../helpers/Events';
+import { Cameras } from '../../helpers/Cameras';
+import { Stream } from '../../helpers/Stream';
+import { FacePose } from '../../libs/FaceML5Detector/FacePose';
+import { SelfieCaptureValues } from '../../helpers/textValues';
+import { FaceML5Detector } from '../../libs/FaceML5Detector/FaceML5Detector';
+export class SelfieCapture {
+  constructor() {
+    this.photoIsReady = photos => {
+      this.closeCamera();
+      this.eventPhotoCapture.emit(photos);
+    };
+    this.device = undefined;
+    this.videoStarted = undefined;
+    this.cameraSize = undefined;
+    this.stopAnimation = undefined;
+    this.captureTaken = undefined;
+    this.titleMesage = undefined;
+    this.animationPath = undefined;
+    this.captureTaken = false;
+    this.cameras = new Cameras();
+  }
+  eventChangeTitle(event) {
+    this.stopAnimation = false;
+    if (event.detail == null) {
+      this.animationPath = getAssetPath('../../assets/animations/face/general.gif');
+      this.titleMesage = SelfieCaptureValues.FinalTitle;
+    }
+    else {
+      this.animationPath = getAssetPath('../../assets/animations/face/' + FacePose[event.detail] + '.gif');
+      this.titleMesage = SelfieCaptureValues.FacePoseMapping[event.detail];
+    }
+  }
+  eventVideoStarted(event) {
+    this.videoStarted = true;
+    this.cameraSize = event.detail;
+  }
+  eventStopAnimation() {
+    this.stopAnimation = true;
+  }
+  componentWillLoad() {
+    Events.init(this.component);
+    this.titleMesage = SelfieCaptureValues.Title;
+    if (!navigator.mediaDevices) {
+      Events.errorEvent('This browser does not support webRTC');
+    }
+  }
+  async componentDidLoad() {
+    this.openCamera();
+    this.animationPath = getAssetPath('../../assets/animations/face/general.gif');
+  }
+  async openCamera() {
+    const constraints = this.cameras.GetConstraints('', this.device, true);
+    setTimeout(() => {
+      navigator.mediaDevices
+        .getUserMedia(constraints)
+        .then(stream => {
+        const superStream = Stream.getInstance();
+        superStream.initStream(stream);
+      })
+        .catch(e => {
+        this.closeCamera();
+        Events.errorEvent(e);
+      });
+    }, 100);
+  }
+  closeCamera() {
+    if (Stream.instance) {
+      Events.closeEvent();
+      Stream.getInstance().dropStream();
+    }
+  }
+  disconnectedCallback() {
+    this.closeCamera();
+    Stream.instance = null;
+    FaceML5Detector.instance = null;
+  }
+  takePhoto() {
+    if (this.captureTaken)
+      return;
+    this.captureTaken = true;
+    this.titleMesage = SelfieCaptureValues.Loading;
+    Stream.getInstance()
+      .takePhoto()
+      .then(res => {
+      this.photoIsReady(res[0]);
+    });
+  }
+  render() {
+    let loadingBlock;
+    if (this.captureTaken) {
+      loadingBlock = (h("div", { class: "pos-relative" }, h("div", { class: "dot-effect" }, h("div", { class: "snippet", "data-title": ".dot-shuttle" }, h("div", { class: "stage filter-contrast" }, h("div", { class: "dot-shuttle" }))))));
+    }
+    let animationBlock;
+    if (this.videoStarted && this.stopAnimation !== true) {
+      let left = 0;
+      if (this.cameraSize.width > this.cameraSize.height)
+        left = (this.cameraSize.width) / 2 - (this.cameraSize.height / 1.77 / 2);
+      animationBlock = (h("img", { class: "animation", style: { left: left + 'px' }, "data-src": this.animationPath, src: this.animationPath }));
+    }
+    let divClass = "chenar-buletin pos-relative";
+    if (this.videoStarted && this.cameraSize.width < this.cameraSize.height)
+      divClass += " block";
+    return (h("div", { class: "container bg-black" }, h("div", { class: "row ctheight-100" }, h("div", null, h("h1", { class: "color-white" }, this.titleMesage)), h("div", { hidden: this.captureTaken, class: divClass }, animationBlock, h("camera-comp", { device: this.device, "capture-mode": "selfie" })), loadingBlock, h("div", { class: "pos-relative" }, h("p", { class: "main-text font-size-18 text-right mb-0" }, SelfieCaptureValues.FooterText)))));
+  }
+  static get is() { return "selfie-capture"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["selfie-capture.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["selfie-capture.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "device": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Device",
+          "resolved": "Device",
+          "references": {
+            "Device": {
+              "location": "import",
+              "path": "../../models/IDevice"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "videoStarted": {},
+      "cameraSize": {},
+      "stopAnimation": {},
+      "captureTaken": {},
+      "titleMesage": {},
+      "animationPath": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "eventPhotoCapture",
+        "name": "photoSelfieCapture",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "component"; }
+  static get listeners() {
+    return [{
+        "name": "changeTitle",
+        "method": "eventChangeTitle",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "videoStarted",
+        "method": "eventVideoStarted",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "stopAnimation",
+        "method": "eventStopAnimation",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "takePhoto",
+        "method": "takePhoto",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}