@ekyc_qoobiss/qbs-ect-cmp 1.5.19 → 1.5.21

package/README.md

@@ -17,10 +17,11 @@ The wev compoment has to be included in the html markup like this:
 \*.html
 
 ```sh
-<identification-component token="{{ token }}" order_id="{{ orderId }}"></identification-component>
+<identification-component token="{{ token }}" order_id="{{ orderId }}" api_url="{{ apiUrl }}"></identification-component>
 ```
 
-There are two parameters:
+There are three parameters:
 
 - token - which is the token that was obtained using the API Key on the server side;
-- order_id - is a unique ID that will be used for the current identification request when obtaining the processed data from the REST API Service.
+- order_id - is a unique ID that will be used for the current identification request when obtaining the processed data from the REST API Service;
+- api_url - is the url provided to you by our team;

package/dist/cjs/agreement-check_12.cjs.entry.js

@@ -5777,13 +5777,21 @@ const IdentificationComponent = class {
     }
   }
   async componentWillLoad() {
-    state.token = this.token;
-    state.requestId = this.order_id;
+    if (this.token) {
+      state.token = this.token;
+    }
+    if (this.order_id) {
+      state.requestId = this.order_id;
+      sessionStorage.setItem(SessionKeys.RequestIdKey, state.requestId);
+    }
     state.apiBaseUrl = this.api_url;
     await this.initializeRequest();
   }
   componentWillRender() {
-    state.requestId = sessionStorage.getItem(SessionKeys.RequestIdKey);
+    var reqId = sessionStorage.getItem(SessionKeys.RequestIdKey);
+    if (reqId) {
+      state.requestId = reqId;
+    }
     state.flowStatus = sessionStorage.getItem(SessionKeys.FlowStatusKey);
     if (!state.flowStatus) {
       state.flowStatus = 'LANDING';

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

@@ -197,13 +197,21 @@ export class IdentificationComponent {
     }
   }
   async componentWillLoad() {
-    store.token = this.token;
-    store.requestId = this.order_id;
+    if (this.token) {
+      store.token = this.token;
+    }
+    if (this.order_id) {
+      store.requestId = this.order_id;
+      sessionStorage.setItem(SessionKeys.RequestIdKey, store.requestId);
+    }
     store.apiBaseUrl = this.api_url;
     await this.initializeRequest();
   }
   componentWillRender() {
-    store.requestId = sessionStorage.getItem(SessionKeys.RequestIdKey);
+    var reqId = sessionStorage.getItem(SessionKeys.RequestIdKey);
+    if (reqId) {
+      store.requestId = reqId;
+    }
     store.flowStatus = sessionStorage.getItem(SessionKeys.FlowStatusKey);
     if (!store.flowStatus) {
       store.flowStatus = 'LANDING';

package/dist/components/ApiCall.js

@@ -0,0 +1,156 @@
+import { s as state } from './store.js';
+
+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);
+    });
+  }
+  async Post(url, data) {
+    try {
+      let resp = await fetch(state.apiBaseUrl + url, {
+        method: 'POST',
+        body: data,
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': 'IDKYC-TOKEN ' + state.token,
+          // 'ApiKey': '2E1DF612-E9F3-4B8A-9154-5256E412D90C',
+        },
+      });
+      if (!resp.ok) {
+        return new Error(resp.statusText);
+      }
+      return await resp.json();
+    }
+    catch (err) {
+      console.log(err);
+      return err;
+    }
+  }
+  async Get(url) {
+    try {
+      let resp = await fetch(state.apiBaseUrl + url, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': 'IDKYC-TOKEN ' + state.token,
+          // 'ApiKey': '2E1DF612-E9F3-4B8A-9154-5256E412D90C',
+        },
+      });
+      if (!resp.ok) {
+        return new Error(resp.statusText);
+      }
+      return await resp.json();
+    }
+    catch (err) {
+      console.log(err);
+      return err;
+    }
+  }
+  async SendOTPCode(requestId, phoneNumber) {
+    let data = { requestId: requestId, phone: phoneNumber };
+    let jsonResp = await this.Post('/validation/otp/send', JSON.stringify(data));
+    if (typeof jsonResp != 'boolean') {
+      return false;
+    }
+    return jsonResp;
+  }
+  async CheckOTPCode(requestId, otpCode) {
+    let data = { requestId: requestId, otp: otpCode };
+    let jsonResp = await this.Post('/validation/otp/check', JSON.stringify(data));
+    if (typeof jsonResp != 'boolean') {
+      return false;
+    }
+    return jsonResp;
+  }
+  async AddIdentificationRequest(requestId, deviceInfo) {
+    let data = { requestId: requestId, clientDeviceInfo: deviceInfo };
+    let jsonResp = await this.Post('/validation/identity/insert', JSON.stringify(data));
+    if (typeof jsonResp.hasIdBack == 'boolean') {
+      state.hasIdBack = jsonResp.hasIdBack;
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+  async UploadFileForRequestB64(requestId, type, file) {
+    let data = {
+      requestId: requestId,
+      type: type,
+      data: await this.toBase64(file),
+    };
+    let respJson = await this.Post('/validation/upload/capture', JSON.stringify(data));
+    if (respJson && respJson.file_path) {
+      if (type == 'IdFront') {
+        return respJson.isValid;
+      }
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+  async UploadFileForRequest(requestId, type, file) {
+    try {
+      let data = new FormData();
+      data.append('requestId', requestId);
+      data.append('type', type);
+      data.append('file', file);
+      let resp = await fetch(state.apiBaseUrl + '/validation/upload/file', {
+        method: 'POST',
+        body: data,
+      });
+      if (!resp.ok) {
+        console.log(resp.statusText);
+        return false;
+      }
+      let respJson = await resp.json();
+      if (respJson && respJson.file_path) {
+        if (type == 'IdFront') {
+          return respJson.isValid;
+        }
+        return true;
+      }
+      else {
+        return false;
+      }
+    }
+    catch (err) {
+      console.log(err);
+      return false;
+    }
+  }
+  async GetAgreement(agreementType) {
+    try {
+      let resp = await this.Get('/validation/agreement/content?type=' + agreementType + '&requestId=' + state.requestId);
+      if (resp) {
+        return resp.htmlText;
+      }
+      return '';
+    }
+    catch (err) {
+      console.log(err);
+      return '';
+    }
+  }
+  async GenerateAgreement(agreementType) {
+    try {
+      let data = { requestId: state.requestId, documentType: agreementType };
+      let resp = await this.Post('/validation/agreement/generate', JSON.stringify(data));
+      if (typeof resp != 'boolean') {
+        return false;
+      }
+      return resp;
+    }
+    catch (err) {
+      console.log(err);
+      return false;
+    }
+  }
+}
+
+export { ApiCall as A };

package/dist/components/Cameras.js

@@ -0,0 +1,100 @@
+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: 740 };
+        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;
+  }
+}
+
+export { Cameras as C };

package/dist/components/agreement-check.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AgreementCheck extends Components.AgreementCheck, HTMLElement {}
+export const AgreementCheck: {
+  prototype: AgreementCheck;
+  new (): AgreementCheck;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/agreement-check.js

@@ -0,0 +1,6 @@
+import { A as AgreementCheck$1, d as defineCustomElement$1 } from './agreement-check2.js';
+
+const AgreementCheck = AgreementCheck$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AgreementCheck, defineCustomElement };

package/dist/components/agreement-check2.js

@@ -0,0 +1,45 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { A as ApiCall } from './ApiCall.js';
+import { A as AgreementCheckValues, a as AgreementInfoValues } from './textValues.js';
+
+const agreementCheckCss = "";
+
+const AgreementCheck = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.agreementAcceptance = createEvent(this, "agreementAcceptance", 7);
+    this.agreementType = undefined;
+    this.htmlContent = undefined;
+    this.apiCalls = new ApiCall();
+  }
+  async componentDidLoad() {
+    this.htmlContent = await this.apiCalls.GetAgreement(this.agreementType);
+  }
+  async buttonClick(result) {
+    this.agreementAcceptance.emit({ agreementType: this.agreementType, result });
+  }
+  render() {
+    let content = (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { innerHTML: this.htmlContent }), h("div", { class: "pos-relative" }, h("div", { class: "d-flex two-buttons" }, h("button", { class: "normal-button red-button", onClick: () => this.buttonClick(false) }, AgreementCheckValues.ButtonNo), h("button", { class: "normal-button", onClick: () => this.buttonClick(true) }, AgreementCheckValues.ButtonYes)), h("p", { class: "main-text font-size-18 text-right mb-0" }, AgreementInfoValues.FooterText)))));
+    return this.htmlContent ? content : h("div", null);
+  }
+  static get style() { return agreementCheckCss; }
+}, [0, "agreement-check", {
+    "agreementType": [1, "agreement-type"],
+    "htmlContent": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["agreement-check"];
+  components.forEach(tagName => { switch (tagName) {
+    case "agreement-check":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AgreementCheck);
+      }
+      break;
+  } });
+}
+
+export { AgreementCheck as A, defineCustomElement as d };

package/dist/components/agreement-info.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AgreementInfo extends Components.AgreementInfo, HTMLElement {}
+export const AgreementInfo: {
+  prototype: AgreementInfo;
+  new (): AgreementInfo;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/agreement-info.js

@@ -0,0 +1,6 @@
+import { A as AgreementInfo$1, d as defineCustomElement$1 } from './agreement-info2.js';
+
+const AgreementInfo = AgreementInfo$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AgreementInfo, defineCustomElement };

package/dist/components/agreement-info2.js

@@ -0,0 +1,76 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as state } from './store.js';
+import { a as AgreementInfoValues } from './textValues.js';
+import { d as defineCustomElement$1 } from './agreement-check2.js';
+
+const agreementInfoCss = "";
+
+const AgreementInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.agreementsChecked = undefined;
+    this.termsChecked = undefined;
+    this.openAgreements = undefined;
+    this.openTerms = undefined;
+    this.agreementsChecked = false;
+    this.termsChecked = false;
+  }
+  componentWillLoad() {
+    this.openAgreements = false;
+    this.openTerms = false;
+  }
+  buttonClick() {
+    if (this.agreementsChecked && this.termsChecked) {
+      state.flowStatus = 'PHONE';
+    }
+  }
+  agreementAcceptanceEmitted(data) {
+    if (data.detail.agreementType == 'agreement') {
+      this.agreementsChecked = data.detail.result;
+      this.openAgreements = false;
+    }
+    if (data.detail.agreementType == 'terms') {
+      this.termsChecked = data.detail.result;
+      this.openTerms = false;
+    }
+  }
+  agreementsClicked() {
+    this.openAgreements = true;
+  }
+  termsClicked() {
+    this.openTerms = true;
+  }
+  render() {
+    let agreementsCheck = h("agreement-check", { agreementType: "agreement" });
+    let termsCheck = h("agreement-check", { agreementType: "terms" });
+    let mainComp = (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", null, AgreementInfoValues.Title), h("div", { class: "d-flex space-between align-center" }, h("h3", { class: "main-text font-size-2", onClick: () => this.agreementsClicked() }, h("input", { type: "checkbox", readOnly: true, checked: this.agreementsChecked }), AgreementInfoValues.Agreement)), h("div", { class: "d-flex space-between align-center" }, h("h3", { class: "main-text font-size-2", onClick: () => this.termsClicked() }, h("input", { type: "checkbox", readOnly: true, checked: this.termsChecked }), AgreementInfoValues.Terms))), h("div", { class: "pos-relative" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", onClick: () => this.buttonClick() }, AgreementInfoValues.Button), h("p", { class: "main-text font-size-18 text-right mb-0" }, AgreementInfoValues.FooterText))))));
+    return this.openAgreements ? agreementsCheck : this.openTerms ? termsCheck : mainComp;
+  }
+  static get style() { return agreementInfoCss; }
+}, [0, "agreement-info", {
+    "agreementsChecked": [32],
+    "termsChecked": [32],
+    "openAgreements": [32],
+    "openTerms": [32]
+  }, [[0, "agreementAcceptance", "agreementAcceptanceEmitted"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["agreement-info", "agreement-check"];
+  components.forEach(tagName => { switch (tagName) {
+    case "agreement-info":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AgreementInfo);
+      }
+      break;
+    case "agreement-check":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { AgreementInfo as A, defineCustomElement as d };

package/dist/components/camera-comp.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CameraComp extends Components.CameraComp, HTMLElement {}
+export const CameraComp: {
+  prototype: CameraComp;
+  new (): CameraComp;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/camera-comp.js

@@ -0,0 +1,6 @@
+import { C as Camera, d as defineCustomElement$1 } from './camera.js';
+
+const CameraComp = Camera;
+const defineCustomElement = defineCustomElement$1;
+
+export { CameraComp, defineCustomElement };