@ekyc_qoobiss/qbs-ect-cmp 1.2.0

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

@@ -0,0 +1,355 @@
+import { h } from '@stencil/core';
+import { initDevice } from '../../helpers';
+import { SessionKeys } from '../../helpers/textValues';
+import { ApiCall } from '../../helpers/ApiCall';
+import store from '../../helpers/store';
+import { ML5 } from '../../helpers/ML5';
+import { FlowStatus } from '../../models/FlowStatus';
+import Events from '../../helpers/Events';
+import * as uuid from 'uuid';
+export class IdentificationComponent {
+  async onTokenChange(newValue, _oldValue) {
+    if (newValue == '') {
+      newValue = store.token;
+      return;
+    }
+    if (store.token !== newValue) {
+      store.token = newValue;
+      await this.initializeRequest();
+    }
+  }
+  async onOrderIdChange(newValue, _oldValue) {
+    if (store.requestId !== newValue) {
+      store.requestId = newValue;
+      store.initialised = false;
+      sessionStorage.clear();
+      if (store.flowStatus != FlowStatus.LANDING) {
+        store.flowStatus = FlowStatus.LANDING;
+      }
+      await this.initializeRequest();
+    }
+  }
+  onApiUrlChange(newValue, _oldValue) {
+    if (store.apiBaseUrl != '') {
+      newValue = store.apiBaseUrl;
+      return;
+    }
+    if (store.apiBaseUrl !== newValue) {
+      store.apiBaseUrl = newValue;
+    }
+  }
+  onEnvChange(newValue, _oldValue) {
+    if (store.environment != '') {
+      newValue = store.environment;
+      return;
+    }
+    if (store.environment !== newValue) {
+      store.environment = newValue;
+    }
+  }
+  async onRedirectIdChange(newValue, _oldValue) {
+    if (store.redirectId != '') {
+      newValue = store.redirectId;
+      return;
+    }
+    if (store.redirectId !== newValue) {
+      store.redirectId = newValue;
+    }
+    await this.initializeRequest();
+  }
+  agreementAcceptanceEmitted(data) {
+    try {
+      this.apiCall.GenerateAgreement(data.detail.agreementType);
+    }
+    catch (e) {
+      this.apiErrorEmitter(e);
+    }
+  }
+  async apiErrorEmitter(data) {
+    var _a, _b;
+    let apiLogData = { message: '', stack: '' };
+    if (data.detail) {
+      this.errorTitle = (_a = data.detail.message) !== null && _a !== void 0 ? _a : '';
+      this.errorMessage = (_b = data.detail.stack) !== null && _b !== void 0 ? _b : '';
+      apiLogData.message = data.detail.message;
+      apiLogData.stack = data.detail.stack;
+    }
+    else if (data.message) {
+      this.errorTitle = data.message;
+      apiLogData.message = data.message;
+    }
+    else {
+      this.errorTitle = data;
+    }
+    await this.apiCall.AddLog(apiLogData);
+    Events.flowError(data);
+    store.flowStatus = FlowStatus.ERROREND;
+  }
+  constructor() {
+    this.token = undefined;
+    this.order_id = undefined;
+    this.api_url = undefined;
+    this.env = undefined;
+    this.redirect_id = undefined;
+    this.idSide = '';
+    this.errorMessage = undefined;
+    this.errorTitle = undefined;
+    ML5.getInstance();
+    this.device = initDevice();
+  }
+  async componentWillLoad() {
+    Events.init(window);
+    store.apiBaseUrl = this.api_url;
+    store.environment = this.env;
+    if (this.token) {
+      store.token = this.token;
+    }
+    else {
+      store.token = sessionStorage.getItem(SessionKeys.TokenKey);
+    }
+    if (this.redirect_id) {
+      store.redirectId = this.redirect_id;
+    }
+    var flowSt = sessionStorage.getItem(SessionKeys.FlowStatusKey);
+    if (flowSt) {
+      store.flowStatus = FlowStatus[flowSt];
+    }
+    if (!store.flowStatus) {
+      store.flowStatus = FlowStatus.LANDING;
+    }
+    var ini = sessionStorage.getItem(SessionKeys.InitialisedKey);
+    if (ini && ini.toLowerCase() == 'true') {
+      store.initialised = true;
+    }
+    var hasIdBk = sessionStorage.getItem(SessionKeys.HasIdBackKey);
+    if (hasIdBk && hasIdBk.toLowerCase() == 'true') {
+      store.hasIdBack = true;
+    }
+    var agrVal = sessionStorage.getItem(SessionKeys.AgreementValidationKey);
+    if (agrVal && agrVal.toLowerCase() == 'true') {
+      store.agreementsValidation = true;
+    }
+    var phoneVal = sessionStorage.getItem(SessionKeys.PhoneValidationKey);
+    if (phoneVal && phoneVal.toLowerCase() == 'true') {
+      store.phoneValidation = true;
+    }
+    const savedRequest = sessionStorage.getItem(SessionKeys.RequestIdKey);
+    if (this.order_id) {
+      if (savedRequest && savedRequest != this.order_id) {
+        sessionStorage.clear();
+        store.flowStatus = FlowStatus.LANDING;
+        store.initialised = false;
+      }
+      else {
+        store.requestId = this.order_id;
+      }
+    }
+    this.apiCall = new ApiCall();
+    await this.initializeRequest();
+  }
+  componentWillRender() {
+    if (this.idSide == '') {
+      this.idSide = store.hasIdBack ? 'front' : '';
+    }
+  }
+  async initializeRequest() {
+    if (store.initialised) {
+      return;
+    }
+    try {
+      if (!this.device.isMobile && store.redirectId == '') {
+        store.redirectId = uuid.v4();
+        this.redirect_id = store.redirectId;
+      }
+      if (store.token != '' && (store.requestId != '' || store.redirectId != '')) {
+        store.initialised = await this.apiCall.AddIdentificationRequest(this.device);
+        if (!this.order_id || this.order_id == '') {
+          this.order_id = store.requestId;
+        }
+      }
+    }
+    catch (e) {
+      this.apiErrorEmitter(e);
+    }
+  }
+  render() {
+    let currentBlock = h("div", null);
+    if (this.device.isMobile) {
+      if (store.flowStatus == FlowStatus.LANDING) {
+        currentBlock = h("landing-validation", { device: this.device });
+      }
+    }
+    else {
+      currentBlock = h("mobile-redirect", null);
+    }
+    if (store.flowStatus == FlowStatus.AGREEMENT) {
+      currentBlock = h("agreement-info", null);
+    }
+    if (store.flowStatus == FlowStatus.PHONE) {
+      currentBlock = h("sms-code-validation", null);
+    }
+    if (store.flowStatus == FlowStatus.CODE) {
+      currentBlock = h("sms-code-validation", null);
+    }
+    if (store.flowStatus == FlowStatus.CODEERROR) {
+      currentBlock = h("sms-code-validation", null);
+    }
+    if (store.flowStatus == FlowStatus.ID && !store.hasIdBack) {
+      currentBlock = h("id-single-side", { id: "idFront", device: this.device });
+    }
+    if (store.flowStatus == FlowStatus.ID && store.hasIdBack) {
+      currentBlock = h("id-double-side", { id: "idFront", device: this.device });
+    }
+    if (store.flowStatus == FlowStatus.LIVENESS) {
+      currentBlock = h("user-liveness", { device: this.device, id: "camera" });
+    }
+    if (store.flowStatus == FlowStatus.COMPLETE) {
+      currentBlock = h("end-redirect", null);
+    }
+    if (store.flowStatus == FlowStatus.ERROREND) {
+      currentBlock = h("error-end", { errorTitle: this.errorTitle, message: this.errorMessage });
+    }
+    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": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "token",
+        "reflect": true
+      },
+      "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": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "api_url",
+        "reflect": true
+      },
+      "env": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "env",
+        "reflect": true
+      },
+      "redirect_id": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "redirect_id",
+        "reflect": true
+      }
+    };
+  }
+  static get states() {
+    return {
+      "idSide": {},
+      "errorMessage": {},
+      "errorTitle": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "token",
+        "methodName": "onTokenChange"
+      }, {
+        "propName": "order_id",
+        "methodName": "onOrderIdChange"
+      }, {
+        "propName": "api_url",
+        "methodName": "onApiUrlChange"
+      }, {
+        "propName": "env",
+        "methodName": "onEnvChange"
+      }, {
+        "propName": "redirect_id",
+        "methodName": "onRedirectIdChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "agreementAcceptance",
+        "method": "agreementAcceptanceEmitted",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "apiError",
+        "method": "apiErrorEmitter",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/helpers/ApiCall.js

@@ -0,0 +1,113 @@
+import { OrderStatuses } from '../models/OrderStatuses';
+import store from './store';
+import { ApiUrls } from './textValues';
+import { FlowStatus } from '../models/FlowStatus';
+export class ApiCall {
+  constructor() {
+    this.toBase64 = (file) => new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = error => reject(error);
+    });
+    this.urls = new ApiUrls();
+  }
+  async http(request) {
+    const response = await fetch(request);
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+    try {
+      // may error if there is no body
+      return await response.json();
+    }
+    catch (ex) {
+      throw new Error('No json found in response ' + ex);
+    }
+  }
+  async post(url, data) {
+    return await this.http(new Request(store.apiBaseUrl + url, {
+      method: 'POST',
+      body: data,
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'IDKYC-TOKEN ' + store.token,
+      },
+    }));
+  }
+  async get(url) {
+    return await this.http(new Request(store.apiBaseUrl + url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'IDKYC-TOKEN ' + store.token,
+      },
+    }));
+  }
+  async SendOTPCode(requestId, phoneNumber) {
+    let data = { requestId: requestId, phone: phoneNumber };
+    let jsonResp = await this.post(this.urls.OtpSend, JSON.stringify(data));
+    return jsonResp.sent;
+  }
+  async CheckOTPCode(requestId, otpCode) {
+    let data = { requestId: requestId, otp: otpCode };
+    let jsonResp = await this.post(this.urls.OtpCheck, JSON.stringify(data));
+    return jsonResp.valid;
+  }
+  async AddIdentificationRequest(deviceInfo) {
+    let data = {
+      requestId: store.requestId,
+      clientDeviceInfo: JSON.stringify(deviceInfo),
+      redirectId: store.redirectId,
+    };
+    let jsonResp = await this.post(this.urls.IdentityInsert, JSON.stringify(data));
+    if (store.requestId == '') {
+      store.requestId = jsonResp.requestId;
+    }
+    store.hasIdBack = jsonResp.hasIdBack;
+    store.agreementsValidation = jsonResp.agreementsValidation;
+    store.phoneValidation = jsonResp.phoneValidation;
+    return true;
+  }
+  async UploadFileForRequestB64(requestId, type, file) {
+    let data = {
+      requestId: requestId,
+      type: type,
+      data: await this.toBase64(file),
+    };
+    let respJson = await this.post(this.urls.UploadCapture, JSON.stringify(data));
+    if (!store.hasIdBack && type == 'IdFront') {
+      return respJson.isValid;
+    }
+    if (store.hasIdBack && type == 'IdBack') {
+      return respJson.isValid;
+    }
+    return true;
+  }
+  async GetAgreement(agreementType) {
+    let resp = await this.get(this.urls.GetAgreement + '?type=' + agreementType + '&requestId=' + store.requestId);
+    return resp.htmlText;
+  }
+  async GenerateAgreement(agreementType) {
+    let data = { requestId: store.requestId, documentType: agreementType };
+    let resp = await this.post(this.urls.GenerateAgreement, JSON.stringify(data));
+    return resp.generation;
+  }
+  async GetStatus(requestId) {
+    let resp = await this.get(this.urls.GetStatus + '?orderId=' + requestId);
+    return OrderStatuses[resp.status];
+  }
+  async SendLink(link, phoneNumber) {
+    let data = { link: link, phoneNumber: phoneNumber };
+    let resp = await this.post(this.urls.SendLink, JSON.stringify(data));
+    return resp.sent;
+  }
+  async AddLog(error) {
+    try {
+      let data = { requestId: store.requestId, action: FlowStatus[store.flowStatus], message: JSON.stringify(error !== null && error !== void 0 ? error : 'no error data') };
+      let result = await this.post(this.urls.AddLog, JSON.stringify(data));
+      return result.saved;
+    }
+    catch (_a) { }
+  }
+}

package/dist/collection/helpers/Cameras.js

@@ -0,0 +1,98 @@
+export class Cameras {
+  async GetCameras(deviceInfo) {
+    var allDevices = [];
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    const videoDevices = devices.filter(device => device.kind === 'videoinput');
+    for (const device of videoDevices) {
+      const updatedConstraints = this.GetConstraints(device.deviceId, deviceInfo);
+      const stream = await navigator.mediaDevices.getUserMedia(updatedConstraints);
+      stream.getVideoTracks().forEach(track => {
+        if (deviceInfo.isFirefox) {
+          const settings = track.getSettings();
+          let facingMode = settings.facingMode && settings.facingMode.length > 0 ? settings.facingMode[0] : '';
+          facingMode = facingMode === 'e' ? 'environment' : facingMode;
+          allDevices.push({
+            deviceId: device.deviceId,
+            name: device.label,
+            height: settings.height,
+            width: settings.width,
+            frameRate: Number(settings.frameRate.max),
+            torch: false,
+            recommended: false,
+            facingMode: facingMode,
+          });
+        }
+        else {
+          const capabilities = track.getCapabilities();
+          let facingMode = capabilities.facingMode && capabilities.facingMode.length > 0 ? capabilities.facingMode[0] : '';
+          facingMode = facingMode === 'e' ? 'environment' : facingMode;
+          allDevices.push({
+            deviceId: device.deviceId,
+            name: device.label,
+            height: capabilities.height.max,
+            width: capabilities.width.max,
+            frameRate: Number(capabilities.frameRate.max),
+            torch: capabilities.torch,
+            recommended: false,
+            facingMode: facingMode,
+          });
+        }
+      });
+      stream.getTracks().forEach(track => {
+        track.stop();
+      });
+    }
+    if (allDevices.length > 0) {
+      allDevices = allDevices.sort((a, b) => b.frameRate - a.frameRate);
+      var firstOption = allDevices.find(i => i.name.indexOf('0,') != -1 && i.facingMode === 'environment');
+      if (firstOption) {
+        allDevices[allDevices.indexOf(firstOption)].recommended = true;
+      }
+      else {
+        var firstEnv = allDevices.find(i => i.facingMode === 'environment');
+        if (firstEnv) {
+          allDevices[allDevices.indexOf(firstEnv)].recommended = true;
+        }
+      }
+    }
+    return allDevices;
+  }
+  GetConstraints(selectedDeviceId, device, portrait = false) {
+    let constraints = {
+      audio: false,
+      video: {
+        frameRate: 30
+      }
+    };
+    if (selectedDeviceId) {
+      constraints.video.deviceId = {
+        exact: selectedDeviceId,
+      };
+    }
+    if (device.isWin) {
+      constraints.video.width = { ideal: 1280 };
+    }
+    else {
+      if (portrait) {
+        constraints.video.facingMode = 'user';
+        constraints.video.width = { ideal: 1280 };
+        constraints.video.height = { ideal: 720 };
+      }
+      else {
+        constraints.video.facingMode = 'environment';
+        constraints.video.width = { ideal: 1280 };
+        constraints.video.aspectRatio = 1;
+      }
+    }
+    return constraints;
+  }
+  GetRecommendedCamera(cameras) {
+    if (cameras && cameras.length > 0) {
+      var recommDevice = cameras.find(c => c.recommended);
+      if (recommDevice) {
+        return recommDevice;
+      }
+    }
+    return null;
+  }
+}

package/dist/collection/helpers/Events.js

@@ -0,0 +1,39 @@
+export default class Events {
+  static init(element) {
+    this.cameraModule = element;
+  }
+  static flowStarted() {
+    this.cameraModule.dispatchEvent(new CustomEvent('ect-started', {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static flowCompleted() {
+    sessionStorage.clear();
+    this.cameraModule.dispatchEvent(new CustomEvent('ect-completed', {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static flowError(error) {
+    sessionStorage.clear();
+    this.cameraModule.dispatchEvent(new CustomEvent('ect-error', {
+      detail: { error },
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static tokenExpired() {
+    this.cameraModule.dispatchEvent(new CustomEvent('ect-session-expired', {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+}

package/dist/collection/helpers/ML5.js

@@ -0,0 +1,35 @@
+import ml5 from 'ml5';
+import store from './store';
+// @ts-ignore
+import preload from '../assets/ml5-preload.png';
+export class ML5 {
+  static getInstance() {
+    if (!ML5.instance) {
+      ML5.instance = new ML5();
+    }
+    return ML5.instance;
+  }
+  constructor() {
+    this.init();
+  }
+  async init() {
+    return new Promise(async (resolve) => {
+      const modelPath = store.hasIdBack ? 'https://ekyc.blob.core.windows.net/$web/md/model.json' : 'https://ekyc.blob.core.windows.net/$web/model.json';
+      this.classifier = await ml5.imageClassifier(modelPath, this.loaded);
+      this.faceapi = await ml5.faceApi({ withLandmarks: true, withDescriptors: false }, this.loaded);
+      //warmup
+      const img = new Image();
+      img.src = preload;
+      this.classifier.classify(img, this.gotResults);
+      this.faceapi.detect(img, this.gotResults);
+      resolve();
+    });
+  }
+  loaded() {
+    console.log('ML5 LOADED!!!');
+  }
+  gotResults(error, results) {
+    console.log(error);
+    console.log(results);
+  }
+}