@ekyc_qoobiss/qbs-ect-cmp 1.2.0

package/dist/collection/components/flow/error-end/error-end.js

@@ -0,0 +1,64 @@
+import { h } from '@stencil/core';
+import Events from '../../../helpers/Events';
+export class ErrorEnd {
+  constructor() {
+    this.message = undefined;
+    this.errorTitle = undefined;
+  }
+  componentDidLoad() {
+    Events.init(window);
+    Events.flowError(this.errorTitle + ' ' + this.message);
+  }
+  render() {
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: "text-center" }, h("h1", null, this.errorTitle)), h("div", null, h("p", { class: "color-red font-weight-bold font-size-2 text-center mt-10" }, this.message)))));
+  }
+  static get is() { return "error-end"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["error-end.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["error-end.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "message": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "message",
+        "reflect": false
+      },
+      "errorTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error-title",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/flow/id-double-side/id-double-side.js

@@ -0,0 +1,284 @@
+import { h /*getAssetPath*/ } from '@stencil/core';
+import { ApiCall } from '../../../helpers/ApiCall';
+import store from '../../../helpers/store';
+import { Stream } from '../../../helpers/Stream';
+import { FlowStatus } from '../../../models/FlowStatus';
+// import { IDPose } from '../../libs/IDML5Detector/IDPose';
+export class IdDoubleSide {
+  constructor() {
+    this.device = undefined;
+    this.showTimeout = undefined;
+    this.showInvalid = undefined;
+    this.showHowTo = undefined;
+    this.front = undefined;
+    this.flow = {
+      photoDone: false,
+      recordingDone: false,
+      verificationFinished: false,
+      photoFile: null,
+      photoFileName: '',
+      photoUploadType: '',
+      recordingFile: null,
+      recordingFileName: '',
+      recordingUploadType: '',
+    };
+    this.apiCall = new ApiCall();
+  }
+  componentWillLoad() {
+    this.captureRetryCount = 0;
+    this.showHowTo = true;
+    this.flow.photoFileName = 'idImage.png';
+    this.flow.recordingFileName = 'idVideo.';
+    this.flow.photoUploadType = 'IdFront';
+    this.flow.recordingUploadType = 'IdFrontVideo';
+    this.front = true;
+  }
+  howToDone() {
+    this.showHowTo = false;
+  }
+  timeElapsed() {
+    this.showTimeout = true;
+  }
+  captureErrorDone() {
+    if (this.showTimeout == true) {
+      this.showTimeout = false;
+    }
+    if (this.showInvalid == true) {
+      this.flow.photoFileName = 'idImage.png';
+      this.flow.recordingFileName = 'idVideo.';
+      this.flow.photoUploadType = 'IdFront';
+      this.flow.recordingUploadType = 'IdFrontVideo';
+      this.flow.photoFile = null;
+      this.flow.recordingFile = null;
+      this.flow.photoDone = false;
+      this.flow.recordingDone = false;
+      this.front = true;
+      this.showInvalid = false;
+    }
+  }
+  async captureIdImage(event) {
+    let idPhoto = event.detail;
+    if (idPhoto.length == 0 || idPhoto.size == 0) {
+      await this.apiCall.AddLog({ message: 'Empty id photo', blobData: idPhoto });
+      return;
+    }
+    try {
+      this.flow.photoFile = new File([idPhoto], this.flow.photoFileName, { type: 'image/png' });
+      this.uploadPhoto();
+    }
+    catch (e) {
+      this.apiErrorEvent.emit(e);
+    }
+  }
+  async captureIdBackImage(event) {
+    let idPhoto = event.detail;
+    if (idPhoto.length == 0 || idPhoto.size == 0) {
+      await this.apiCall.AddLog({ message: 'Empty id photo', blobData: idPhoto });
+      return;
+    }
+    try {
+      this.flow.photoFile = new File([idPhoto], this.flow.photoFileName, { type: 'image/png' });
+      this.uploadPhoto();
+    }
+    catch (e) {
+      this.apiErrorEvent.emit(e);
+    }
+  }
+  async capturedIdRecording(event) {
+    let idRecording = event.detail;
+    if (idRecording.length == 0 || idRecording.size == 0) {
+      await this.apiCall.AddLog({ message: 'Empty recording', blobData: idRecording });
+      return;
+    }
+    let mimeType = idRecording.type == Stream.mp4MimeType.type ? Stream.mp4MimeType : Stream.webmMimeType;
+    try {
+      this.flow.recordingFile = new File([idRecording], this.flow.recordingFileName + mimeType.extension, { type: mimeType.type });
+      this.uploadRecording();
+    }
+    catch (e) {
+      this.apiErrorEvent.emit(e);
+    }
+  }
+  async verificationFinished(_event) {
+    this.flow.verificationFinished = true;
+    this.endFlow();
+  }
+  async uploadPhoto() {
+    if (this.flow.photoFile == null || this.flow.photoDone) {
+      return;
+    }
+    this.flow.photoDone = await this.apiCall.UploadFileForRequestB64(store.requestId, this.flow.photoUploadType, this.flow.photoFile);
+    if (this.flow.photoDone) {
+      this.endFlow();
+    }
+    else {
+      this.flow.photoFile = null;
+      this.flow.recordingFile = null;
+      this.switchCamera();
+      this.showInvalid = true;
+    }
+  }
+  async uploadRecording() {
+    if (this.flow.recordingFile == null || this.flow.recordingDone) {
+      return;
+    }
+    this.flow.recordingDone = await this.apiCall.UploadFileForRequestB64(store.requestId, this.flow.recordingUploadType, this.flow.recordingFile);
+    if (this.flow.recordingDone) {
+      this.endFlow();
+    }
+    else {
+      this.flow.photoFile = null;
+      this.flow.recordingFile = null;
+      this.showInvalid = true;
+    }
+  }
+  endFlow() {
+    if (!this.flow.photoDone) {
+      return;
+    }
+    if (!this.flow.recordingDone) {
+      return;
+    }
+    if (this.front) {
+      this.flow.photoFileName = 'idBackImage.png';
+      this.flow.recordingFileName = 'idBackVideo.';
+      this.flow.photoUploadType = 'IdBack';
+      this.flow.recordingUploadType = 'IdBackVideo';
+      this.flow.photoFile = null;
+      this.flow.recordingFile = null;
+      this.flow.photoDone = false;
+      this.flow.recordingDone = false;
+      this.front = false;
+      this.showHowTo = true;
+      return;
+    }
+    if (!this.flow.verificationFinished) {
+      return;
+    }
+    store.flowStatus = FlowStatus.LIVENESS;
+  }
+  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++;
+    }
+  }
+  render() {
+    let error = h("capture-error", { type: "ID" });
+    let frontCapture = h("id-capture", { id: "idFront", device: this.device });
+    let secondCapture = h("id-back-capture", { id: "idBack", device: this.device });
+    let howToInfo = h("how-to-info", { idSide: this.front ? 'front' : 'back' });
+    return this.showHowTo ? howToInfo : this.showInvalid || this.showTimeout ? error : this.front ? frontCapture : secondCapture;
+  }
+  static get is() { return "id-double-side"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["id-double-side.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["id-double-side.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 {
+      "showTimeout": {},
+      "showInvalid": {},
+      "showHowTo": {},
+      "front": {},
+      "flow": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "apiErrorEvent",
+        "name": "apiError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "howToInfoDone",
+        "method": "howToDone",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "timeElapsed",
+        "method": "timeElapsed",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "captureErrorDone",
+        "method": "captureErrorDone",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "photoIdCapture",
+        "method": "captureIdImage",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "photoIdBackCapture",
+        "method": "captureIdBackImage",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "recordingIdCapture",
+        "method": "capturedIdRecording",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "verificationFinished",
+        "method": "verificationFinished",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/flow/id-single-side/id-single-side.js

@@ -0,0 +1,225 @@
+import { h /*getAssetPath*/ } from '@stencil/core';
+import { ApiCall } from '../../../helpers/ApiCall';
+import store from '../../../helpers/store';
+import { Stream } from '../../../helpers/Stream';
+import { FlowStatus } from '../../../models/FlowStatus';
+// import { IDPose } from '../../libs/IDML5Detector/IDPose';
+export class IdSingleSide {
+  constructor() {
+    this.device = undefined;
+    this.showTimeout = undefined;
+    this.showHowTo = undefined;
+    this.idFlow = {
+      verificationFinished: false,
+      photoDone: false,
+      recordingDone: false,
+      photoFile: null,
+      recordingFile: null,
+    };
+    this.apiCall = new ApiCall();
+    this.captureRetryCount = 0;
+    this.showHowTo = true;
+  }
+  captureErrorDone() {
+    this.idFlow.photoFile = null;
+    this.idFlow.recordingFile = null;
+    this.showTimeout = false;
+  }
+  howToDone() {
+    this.showHowTo = false;
+  }
+  timeElapsed() {
+    this.showTimeout = true;
+  }
+  async captureIdImage(event) {
+    let idPhoto = event.detail;
+    if (idPhoto.length == 0 || idPhoto.size == 0) {
+      await this.apiCall.AddLog({ message: 'Empty id photo', blobData: idPhoto });
+      return;
+    }
+    try {
+      this.idFlow.photoFile = new File([idPhoto], 'idImage.png', { type: 'image/png' });
+      await this.uploadPhoto();
+    }
+    catch (e) {
+      this.apiErrorEvent.emit(e);
+    }
+  }
+  async verificationFinished(_event) {
+    this.idFlow.verificationFinished = true;
+    this.endFlow();
+  }
+  async capturedIdRecording(event) {
+    let idRecording = event.detail;
+    if (idRecording.length == 0 || idRecording.size == 0) {
+      await this.apiCall.AddLog({ message: 'Empty recording', blobData: idRecording });
+      return;
+    }
+    let mimeType = idRecording.type == Stream.mp4MimeType.type ? Stream.mp4MimeType : Stream.webmMimeType;
+    if (store.flowStatus == FlowStatus.ID) {
+      try {
+        this.idFlow.recordingFile = new File([idRecording], 'idVideo.' + mimeType.extension, { type: mimeType.type });
+        await this.uploadRecording();
+      }
+      catch (e) {
+        this.apiErrorEvent.emit(e);
+      }
+    }
+  }
+  async uploadPhoto() {
+    if (this.idFlow.photoFile == null || this.idFlow.photoDone) {
+      return;
+    }
+    this.idFlow.photoDone = await this.apiCall.UploadFileForRequestB64(store.requestId, 'IdFront', this.idFlow.photoFile);
+    if (this.idFlow.photoDone) {
+      this.endFlow();
+    }
+    else {
+      this.idFlow.photoFile = null;
+      this.idFlow.recordingFile = null;
+      this.switchCamera();
+      this.showTimeout = true;
+    }
+  }
+  async uploadRecording() {
+    if (this.idFlow.recordingFile == null || this.idFlow.recordingDone) {
+      return;
+    }
+    this.idFlow.recordingDone = await this.apiCall.UploadFileForRequestB64(store.requestId, 'IdFrontVideo', this.idFlow.recordingFile);
+    if (this.idFlow.recordingDone) {
+      this.endFlow();
+    }
+    else {
+      this.idFlow.photoFile = null;
+      this.idFlow.recordingFile = null;
+      this.showTimeout = true;
+    }
+  }
+  endFlow() {
+    if (!this.idFlow.photoDone) {
+      return;
+    }
+    if (!this.idFlow.recordingDone) {
+      return;
+    }
+    if (!this.idFlow.verificationFinished) {
+      return;
+    }
+    store.flowStatus = FlowStatus.LIVENESS;
+  }
+  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++;
+    }
+  }
+  render() {
+    let error = h("capture-error", { type: "ID" });
+    let capture = h("id-capture", { id: "idFront", device: this.device });
+    let howToInfo = h("how-to-info", { idSide: "front" });
+    return this.showHowTo ? howToInfo : this.showTimeout ? error : capture;
+  }
+  static get is() { return "id-single-side"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["id-single-side.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["id-single-side.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 {
+      "showTimeout": {},
+      "showHowTo": {},
+      "idFlow": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "apiErrorEvent",
+        "name": "apiError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "captureErrorDone",
+        "method": "captureErrorDone",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "howToInfoDone",
+        "method": "howToDone",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "timeElapsed",
+        "method": "timeElapsed",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "photoIdCapture",
+        "method": "captureIdImage",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "verificationFinished",
+        "method": "verificationFinished",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "recordingIdCapture",
+        "method": "capturedIdRecording",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,88 @@
+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 Events from '../../../helpers/Events';
+import { FlowStatus } from '../../../models/FlowStatus';
+export class LandingValidation {
+  constructor() {
+    this.device = undefined;
+    this.warningText = undefined;
+  }
+  async componentWillLoad() {
+    await new Promise(f => setTimeout(f, 500));
+    await this.initRequest();
+  }
+  componentDidLoad() {
+    Events.init(window);
+    Events.flowStarted();
+  }
+  async initRequest() {
+    if (store.hasIdBack) {
+      this.warningText = LandingValues.WarningMd;
+    }
+    else {
+      this.warningText = LandingValues.Warning;
+    }
+  }
+  async startFlow() {
+    if (store.initialised) {
+      if (store.agreementsValidation) {
+        store.flowStatus = FlowStatus.AGREEMENT;
+      }
+      else if (store.phoneValidation) {
+        store.flowStatus = FlowStatus.PHONE;
+      }
+      else {
+        store.flowStatus = FlowStatus.ID;
+      }
+    }
+  }
+  render() {
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", { class: "text-center" }, 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 text-center" }, this.warningText)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", disabled: !store.initialised, 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 {
+      "warningText": {}
+    };
+  }
+}

package/dist/collection/components/flow/mobile-redirect/mobile-redirect.css

@@ -0,0 +1,10 @@
+.qr-canvas {
+  max-height: 60vh;
+  max-width: 80vw;
+  text-align: center;
+}
+
+.qr-canvas > canvas {
+  width: 100%;
+  height: 100%;
+}