@ekyc_qoobiss/qbs-ect-cmp 1.2.0

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

@@ -0,0 +1,128 @@
+import { h } from '@stencil/core';
+import { MobileRedirectValues } from '../../../helpers/textValues';
+import QRCode from 'qrcode';
+import store from '../../../helpers/store';
+import { ApiCall } from '../../../helpers/ApiCall';
+import { OrderStatuses } from '../../../models/OrderStatuses';
+import { FlowStatus } from '../../../models/FlowStatus';
+export class MobileRedirect {
+  constructor() {
+    this.delay = ms => new Promise(res => setTimeout(res, ms));
+    this.infoTextTop = undefined;
+    this.infoTextBottom = undefined;
+    this.contact = undefined;
+    this.invalidValue = undefined;
+    this.waitingMobile = undefined;
+    this.orderStatus = undefined;
+    this.redirectLink = undefined;
+    this.qrCode = undefined;
+    this.apiCall = new ApiCall();
+    this.invalidValue = false;
+    this.waitingMobile = false;
+  }
+  async componentWillLoad() {
+    this.infoTextTop = MobileRedirectValues.InfoTop;
+    this.infoTextBottom = MobileRedirectValues.InfoBottom;
+    let envUri = store.environment == 'PROD' ? 'ect' : 'test';
+    let baseUri = store.hasIdBack ? 'https://onmd.id-kyc.com/' : 'https://onro.id-kyc.com/';
+    this.redirectLink = baseUri + envUri + '?redirectId=' + store.redirectId;
+    var self = this;
+    QRCode.toDataURL(this.redirectLink, { type: 'image/png', errorCorrectionLevel: 'M', scale: 6 }, function (error, url) {
+      if (error)
+        console.error(error);
+      self.qrCode = url;
+    });
+  }
+  componentWillRender() { }
+  async componentDidLoad() {
+    await this.delay(5000);
+    await this.checkStatus();
+    while (this.orderStatus == OrderStatuses.Capturing || this.orderStatus == OrderStatuses.Waiting) {
+      await this.checkStatus();
+      await this.delay(5000);
+    }
+  }
+  async checkStatus() {
+    this.orderStatus = await this.apiCall.GetStatus(store.requestId);
+    if (this.orderStatus == OrderStatuses.FinishedCapturing) {
+      this.waitingMobile = false;
+      store.flowStatus = FlowStatus.COMPLETE;
+    }
+    if (this.orderStatus == OrderStatuses.NotFound) {
+      this.apiErrorEvent.emit({ message: 'No order was started for this process.' });
+    }
+    if (this.orderStatus == OrderStatuses.Capturing) {
+      this.infoTextTop = MobileRedirectValues.InfoWaiting;
+      this.waitingMobile = true;
+    }
+  }
+  async buttonClick() {
+    if (this.contact == '' || this.contact.length != 10) {
+      this.invalidValue == true;
+      return;
+    }
+    this.waitingMobile = true;
+    this.infoTextTop = MobileRedirectValues.InfoWaiting;
+    try {
+      await this.apiCall.SendLink(this.redirectLink, this.contact);
+    }
+    catch (e) {
+      this.apiErrorEvent.emit(e);
+    }
+  }
+  handleChangeContact(ev) {
+    let value = ev.target ? ev.target.value : '';
+    this.contact = value.replace(/\D/g, '');
+    if (this.contact.length > 10) {
+      this.contact = this.contact.substring(0, 10);
+    }
+    else if (this.contact.length == 10) {
+      this.invalidValue = false;
+    }
+    ev.target.value = this.contact;
+  }
+  render() {
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { hidden: this.waitingMobile }, h("div", { class: "text-center" }, h("p", { class: "font-size-2" }, this.infoTextTop)), h("div", { class: "qr-canvas align-center" }, h("img", { src: this.qrCode })), h("div", { class: "text-center" }, h("p", { class: "font-size-2" }, this.infoTextBottom)), h("div", { class: "input-container mb-15" }, h("label", { class: "font-size-18 mb-1 color-red", hidden: this.invalidValue == false }, h("b", null, MobileRedirectValues.Validation)), h("input", { type: "text", id: "codeInput", class: "main-input", value: this.contact, onInput: ev => this.handleChangeContact(ev) })), h("div", { class: "pos-relative" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", onClick: () => this.buttonClick() }, "Trimite"), h("p", { class: "main-text font-size-18 text-right mb-0" }, MobileRedirectValues.FooterText)))), h("div", { hidden: this.waitingMobile == false }, h("div", { class: "text-center" }, h("p", { class: "font-size-2" }, this.infoTextTop))))));
+  }
+  static get is() { return "mobile-redirect"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mobile-redirect.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mobile-redirect.css"]
+    };
+  }
+  static get states() {
+    return {
+      "infoTextTop": {},
+      "infoTextBottom": {},
+      "contact": {},
+      "invalidValue": {},
+      "waitingMobile": {},
+      "orderStatus": {},
+      "redirectLink": {},
+      "qrCode": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "apiErrorEvent",
+        "name": "apiError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}

package/dist/collection/components/flow/sms-code-validation/sms-code-validation.js

@@ -0,0 +1,115 @@
+import { h } from '@stencil/core';
+import { ApiCall } from '../../../helpers/ApiCall';
+import store from '../../../helpers/store';
+import { PhoneValidationValues, CodeValidationValues } from '../../../helpers/textValues';
+import { FlowStatus } from '../../../models/FlowStatus';
+export class SmsCodeValidation {
+  constructor() {
+    this.title = undefined;
+    this.details = undefined;
+    this.buttonText = undefined;
+    this.phoneNumber = undefined;
+    this.code = undefined;
+    this.apiCall = new ApiCall();
+  }
+  async doAction() {
+    try {
+      if (store.flowStatus == FlowStatus.CODE || store.flowStatus == FlowStatus.CODEERROR) {
+        var codeChecked = await this.apiCall.CheckOTPCode(store.requestId, this.code);
+        if (codeChecked === true) {
+          store.flowStatus = FlowStatus.ID;
+        }
+        else {
+          store.flowStatus = FlowStatus.CODEERROR;
+        }
+      }
+      if (store.flowStatus == FlowStatus.PHONE) {
+        var codeSent = await this.apiCall.SendOTPCode(store.requestId, this.phoneNumber);
+        if (codeSent === true) {
+          store.flowStatus = FlowStatus.CODE;
+        }
+      }
+    }
+    catch (e) {
+      this.apiErrorEvent.emit(e);
+    }
+  }
+  componentWillRender() {
+    if (store.flowStatus == FlowStatus.PHONE) {
+      this.title = PhoneValidationValues.Title;
+      this.details = PhoneValidationValues.Description;
+      this.buttonText = PhoneValidationValues.Button;
+    }
+    if (store.flowStatus == FlowStatus.CODE || store.flowStatus == FlowStatus.CODEERROR) {
+      this.title = CodeValidationValues.Title;
+      this.details = CodeValidationValues.Description;
+      this.buttonText = CodeValidationValues.Button;
+    }
+  }
+  handleChangePhone(ev) {
+    let value = ev.target ? ev.target.value : '';
+    this.phoneNumber = value.replace(/\D/g, '');
+    if (this.phoneNumber.length > 10)
+      this.phoneNumber = this.phoneNumber.substring(0, 10);
+    ev.target.value = this.phoneNumber;
+  }
+  handleChangeCode(ev) {
+    let value = ev.target ? ev.target.value : '';
+    this.code = value;
+    if (this.code.length > 4)
+      this.code = this.code.substring(0, 4);
+    ev.target.value = this.code;
+  }
+  render() {
+    let inputBlock;
+    let errorBlock;
+    if (store.flowStatus == FlowStatus.CODEERROR) {
+      errorBlock = h("p", { class: "main-text font-size-18 mt-15 color-red text-center" }, CodeValidationValues.Error);
+    }
+    if (store.flowStatus == FlowStatus.PHONE) {
+      inputBlock = (h("div", { class: "input-container mb-15" }, h("label", { class: "font-size-18 mb-1" }, h("b", null, PhoneValidationValues.Label)), h("input", { type: "tel", id: "phoneInput", class: "main-input", onInput: ev => this.handleChangePhone(ev), value: this.phoneNumber })));
+    }
+    else {
+      inputBlock = (h("div", { class: "input-container mb-15" }, h("input", { type: "text", id: "codeInput", class: "main-input", onInput: ev => this.handleChangeCode(ev), value: this.code })));
+    }
+    return (h("div", { class: "container" }, h("div", { class: "row row-validare" }, h("div", null, h("h1", { class: "text-center" }, this.title), errorBlock == null ? h("p", { class: "main-text font-size-2 mt-15 mb-20 text-center" }, this.details) : errorBlock), inputBlock, h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { id: "action", class: "main-button", onClick: () => this.doAction() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, PhoneValidationValues.FooterText))))));
+  }
+  static get is() { return "sms-code-validation"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sms-code-validation.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sms-code-validation.css"]
+    };
+  }
+  static get states() {
+    return {
+      "title": {},
+      "details": {},
+      "buttonText": {},
+      "phoneNumber": {},
+      "code": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "apiErrorEvent",
+        "name": "apiError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}

package/dist/collection/components/flow/user-liveness/user-liveness.js

@@ -0,0 +1,214 @@
+import { h } from '@stencil/core';
+import { ApiCall } from '../../../helpers/ApiCall';
+import store from '../../../helpers/store';
+import { Stream } from '../../../helpers/Stream';
+import { FlowStatus } from '../../../models/FlowStatus';
+export class UserLiveness {
+  constructor() {
+    this.device = undefined;
+    this.showError = undefined;
+    this.showHowTo = undefined;
+    this.selfieFlow = {
+      photoDone: false,
+      recordingDone: false,
+      verificationFinished: false,
+      photoFile: null,
+      recordingFile: null,
+    };
+    this.apiCall = new ApiCall();
+  }
+  componentWillLoad() {
+    this.showHowTo = true;
+  }
+  howToDone() {
+    this.showHowTo = false;
+  }
+  timeElapsed() {
+    this.showError = true;
+  }
+  captureErrorDone() {
+    this.showError = false;
+    this.selfieFlow.photoDone = false;
+    this.selfieFlow.recordingDone = false;
+    this.selfieFlow.photoFile = null;
+    this.selfieFlow.recordingFile = null;
+  }
+  async captureSelfieImage(event) {
+    let selfiePhoto = event.detail;
+    if (selfiePhoto.length == 0 || selfiePhoto.size == 0) {
+      await this.apiCall.AddLog({ message: 'Empty selfie', blobData: selfiePhoto });
+      return;
+    }
+    try {
+      this.selfieFlow.photoFile = new File([selfiePhoto], 'selfie.png', { type: 'image/png' });
+      await this.uploadPhoto();
+    }
+    catch (e) {
+      this.apiErrorEvent.emit(e);
+    }
+  }
+  async capturedSelfieRecording(event) {
+    let selfieRecording = event.detail;
+    if (selfieRecording.length == 0 || selfieRecording.size == 0) {
+      await this.apiCall.AddLog({ message: 'Empty recording', blobData: selfieRecording });
+      return;
+    }
+    let mimeType = selfieRecording.type == Stream.mp4MimeType.type ? Stream.mp4MimeType : Stream.webmMimeType;
+    try {
+      this.selfieFlow.recordingFile = new File([selfieRecording], 'selfieVideo.' + mimeType.extension, { type: mimeType.type });
+      await this.uploadRecording();
+    }
+    catch (e) {
+      this.apiErrorEvent.emit(e);
+    }
+  }
+  async verificationFinished(_event) {
+    this.selfieFlow.verificationFinished = true;
+    this.endFlow();
+  }
+  async uploadPhoto() {
+    if (this.selfieFlow.photoFile == null || this.selfieFlow.photoDone) {
+      return;
+    }
+    this.selfieFlow.photoDone = await this.apiCall.UploadFileForRequestB64(store.requestId, 'Selfie', this.selfieFlow.photoFile);
+    if (this.selfieFlow.photoDone) {
+      this.endFlow();
+    }
+    else {
+      this.selfieFlow.photoFile = null;
+      this.selfieFlow.recordingFile = null;
+      this.showError = true;
+    }
+  }
+  async uploadRecording() {
+    if (this.selfieFlow.recordingFile == null || this.selfieFlow.recordingDone) {
+      return;
+    }
+    this.selfieFlow.recordingDone = await this.apiCall.UploadFileForRequestB64(store.requestId, 'SelfieVideo', this.selfieFlow.recordingFile);
+    if (this.selfieFlow.recordingDone) {
+      this.endFlow();
+    }
+    else {
+      this.selfieFlow.photoFile = null;
+      this.selfieFlow.recordingFile = null;
+      this.showError = true;
+    }
+  }
+  endFlow() {
+    if (!this.selfieFlow.photoDone) {
+      return;
+    }
+    if (!this.selfieFlow.recordingDone) {
+      return;
+    }
+    if (!this.selfieFlow.verificationFinished) {
+      return;
+    }
+    store.flowStatus = FlowStatus.COMPLETE;
+  }
+  render() {
+    let howTo = h("how-to-info", { idSide: "" });
+    let capture = h("selfie-capture", { device: this.device, id: "camera" });
+    let error = h("capture-error", { type: "LIVENESS" });
+    return this.showHowTo ? howTo : this.showError ? error : capture;
+  }
+  static get is() { return "user-liveness"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["user-liveness.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["user-liveness.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 {
+      "showError": {},
+      "showHowTo": {},
+      "selfieFlow": {}
+    };
+  }
+  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": "photoSelfieCapture",
+        "method": "captureSelfieImage",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "recordingSelfieCapture",
+        "method": "capturedSelfieRecording",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "verificationFinished",
+        "method": "verificationFinished",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}