@ekyc_qoobiss/qbs-ect-cmp 3.2.1 → 3.2.3

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["loader-dots.cjs",[[1,"loader-dots"]]],["agreement-check_18.cjs",[[1,"identification-component",{"token":[1537],"order_id":[1537],"api_url":[1537],"env":[1537],"redirect_id":[1537],"phone_number":[1537],"idSide":[32],"errorMessage":[32],"errorTitle":[32]},[[0,"agreementAcceptance","agreementAcceptanceEmitted"],[0,"apiError","apiErrorEmitter"]]],[0,"id-double-side",{"device":[16],"showTimeout":[32],"showInvalid":[32],"showHowTo":[32],"front":[32],"flow":[32]},[[0,"howToInfoDone","howToDone"],[0,"timeElapsed","timeElapsed"],[0,"captureErrorDone","captureErrorDone"],[0,"photoIdCapture","captureIdImage"],[0,"photoIdBackCapture","captureIdBackImage"],[0,"recordingIdCapture","capturedIdRecording"],[0,"verificationFinished","verificationFinished"]]],[0,"id-single-side",{"device":[16],"showTimeout":[32],"showHowTo":[32],"idFlow":[32]},[[0,"captureErrorDone","captureErrorDone"],[0,"howToInfoDone","howToDone"],[0,"timeElapsed","timeElapsed"],[0,"photoIdCapture","captureIdImage"],[0,"verificationFinished","verificationFinished"],[0,"recordingIdCapture","capturedIdRecording"]]],[0,"user-liveness",{"device":[16],"showError":[32],"showHowTo":[32],"selfieFlow":[32]},[[0,"howToInfoDone","howToDone"],[0,"timeElapsed","timeElapsed"],[0,"captureErrorDone","captureErrorDone"],[0,"photoSelfieCapture","captureSelfieImage"],[0,"recordingSelfieCapture","capturedSelfieRecording"],[0,"verificationFinished","verificationFinished"]]],[0,"agreement-info",{"agreementsChecked":[32],"termsChecked":[32],"openAgreements":[32],"openTerms":[32]},[[0,"agreementAcceptance","agreementAcceptanceEmitted"]]],[0,"camera-error",{"device":[16],"title":[32],"description":[32],"buttonDisabled":[32],"demoVideo":[32]}],[0,"end-redirect"],[0,"error-end",{"message":[1],"errorTitle":[1,"error-title"]}],[0,"landing-validation",{"device":[16],"warningText":[32],"buttonDisabled":[32]}],[0,"mobile-redirect",{"infoTextTop":[32],"infoTextBottom":[32],"contact":[32],"invalidValue":[32],"waitingMobile":[32],"orderStatus":[32],"redirectLink":[32],"qrCode":[32],"prefilledPhone":[32]}],[0,"sms-code-validation",{"title":[32],"details":[32],"buttonText":[32],"phoneNumber":[32],"code":[32],"prefilledPhone":[32],"canSend":[32]}],[0,"id-back-capture",{"device":[16],"videoStarted":[32],"cameraSize":[32],"captureTaken":[32],"verified":[32],"titleMesage":[32],"showDemo":[32],"demoVideo":[32]},[[0,"changeTitle","eventChangeTitle"],[0,"videoStarted","eventVideoStarted"],[0,"verificationFinished","verificationFinished"],[0,"takePhoto","takePhoto"]]],[0,"selfie-capture",{"device":[16],"videoStarted":[32],"captureTaken":[32],"verified":[32],"titleMesage":[32],"demoEnded":[32],"demoVideo":[32],"uploadingLink":[32],"captureHeight":[32],"captureWidth":[32]},[[0,"changeTitle","eventChangeTitle"],[0,"videoStarted","eventVideoStarted"],[0,"takePhoto","takePhoto"],[0,"verificationFinished","verificationFinished"]]],[0,"agreement-check",{"agreementType":[1,"agreement-type"],"htmlContent":[32],"buttonEnabled":[32]}],[0,"id-capture",{"device":[16],"videoStarted":[32],"cameraSize":[32],"captureTaken":[32],"verified":[32],"titleMesage":[32],"showDemo":[32],"demoVideo":[32]},[[0,"changeTitle","eventChangeTitle"],[0,"videoStarted","eventVideoStarted"],[0,"takePhoto","takePhoto"],[0,"verificationFinished","verificationFinished"]]],[0,"capture-error",{"type":[1],"buttonEnabled":[32],"buttonText":[32]}],[0,"how-to-info",{"idSide":[1,"id-side"],"topTitle":[32],"subTitle":[32],"imagePath":[32],"buttonText":[32],"buttonEnabled":[32]}],[0,"camera-comp",{"modelPath":[1,"model-path"],"device":[16],"probabilityThreshold":[2,"probability-threshold"],"captureMode":[1,"capture-mode"]}]]]], options);
+  return index.bootstrapLazy([["loader-dots.cjs",[[1,"loader-dots"]]],["agreement-check_18.cjs",[[1,"identification-component",{"token":[1537],"order_id":[1537],"api_url":[1537],"env":[1537],"redirect_id":[1537],"phone_number":[1537],"idSide":[32],"errorMessage":[32],"errorTitle":[32]},[[0,"agreementAcceptance","agreementAcceptanceEmitted"],[0,"apiError","apiErrorEmitter"]]],[0,"id-double-side",{"showTimeout":[32],"showInvalid":[32],"showHowTo":[32],"front":[32],"flow":[32]},[[0,"howToInfoDone","howToDone"],[0,"timeElapsed","timeElapsed"],[0,"captureErrorDone","captureErrorDone"],[0,"photoIdCapture","captureIdImage"],[0,"photoIdBackCapture","captureIdBackImage"],[0,"recordingIdCapture","capturedIdRecording"],[0,"verificationFinished","verificationFinished"]]],[0,"id-single-side",{"showTimeout":[32],"showHowTo":[32],"idFlow":[32]},[[0,"captureErrorDone","captureErrorDone"],[0,"howToInfoDone","howToDone"],[0,"timeElapsed","timeElapsed"],[0,"photoIdCapture","captureIdImage"],[0,"verificationFinished","verificationFinished"],[0,"recordingIdCapture","capturedIdRecording"]]],[0,"user-liveness",{"showError":[32],"showHowTo":[32],"selfieFlow":[32]},[[0,"howToInfoDone","howToDone"],[0,"timeElapsed","timeElapsed"],[0,"captureErrorDone","captureErrorDone"],[0,"photoSelfieCapture","captureSelfieImage"],[0,"recordingSelfieCapture","capturedSelfieRecording"],[0,"verificationFinished","verificationFinished"]]],[0,"agreement-info",{"agreementsChecked":[32],"termsChecked":[32],"openAgreements":[32],"openTerms":[32]},[[0,"agreementAcceptance","agreementAcceptanceEmitted"]]],[0,"camera-error",{"title":[32],"description":[32],"buttonDisabled":[32],"demoVideo":[32]}],[0,"end-redirect"],[0,"error-end",{"message":[1],"errorTitle":[1,"error-title"]}],[0,"landing-validation",{"warningText":[32],"buttonDisabled":[32]}],[0,"mobile-redirect",{"infoTextTop":[32],"infoTextBottom":[32],"contact":[32],"invalidValue":[32],"waitingMobile":[32],"orderStatus":[32],"redirectLink":[32],"qrCode":[32],"prefilledPhone":[32]}],[0,"sms-code-validation",{"title":[32],"details":[32],"buttonText":[32],"phoneNumber":[32],"code":[32],"prefilledPhone":[32],"canSend":[32]}],[0,"id-back-capture",{"videoStarted":[32],"cameraSize":[32],"captureTaken":[32],"verified":[32],"titleMesage":[32],"showDemo":[32],"demoVideo":[32]},[[0,"changeTitle","eventChangeTitle"],[0,"videoStarted","eventVideoStarted"],[0,"verificationFinished","verificationFinished"],[0,"takePhoto","takePhoto"]]],[0,"selfie-capture",{"videoStarted":[32],"captureTaken":[32],"verified":[32],"titleMesage":[32],"demoEnded":[32],"demoVideo":[32],"uploadingLink":[32],"captureHeight":[32],"captureWidth":[32]},[[0,"changeTitle","eventChangeTitle"],[0,"videoStarted","eventVideoStarted"],[0,"takePhoto","takePhoto"],[0,"verificationFinished","verificationFinished"]]],[0,"agreement-check",{"agreementType":[1,"agreement-type"],"htmlContent":[32],"buttonEnabled":[32]}],[0,"id-capture",{"videoStarted":[32],"cameraSize":[32],"captureTaken":[32],"verified":[32],"titleMesage":[32],"showDemo":[32],"demoVideo":[32]},[[0,"changeTitle","eventChangeTitle"],[0,"videoStarted","eventVideoStarted"],[0,"takePhoto","takePhoto"],[0,"verificationFinished","verificationFinished"]]],[0,"capture-error",{"type":[1],"buttonEnabled":[32],"buttonText":[32]}],[0,"how-to-info",{"idSide":[1,"id-side"],"topTitle":[32],"subTitle":[32],"imagePath":[32],"buttonText":[32],"buttonEnabled":[32]}],[0,"camera-comp",{"modelPath":[1,"model-path"],"probabilityThreshold":[2,"probability-threshold"],"captureMode":[1,"capture-mode"]}]]]], options);
   });
 };
 

package/dist/cjs/qbs-ect-cmp.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["loader-dots.cjs",[[1,"loader-dots"]]],["agreement-check_18.cjs",[[1,"identification-component",{"token":[1537],"order_id":[1537],"api_url":[1537],"env":[1537],"redirect_id":[1537],"phone_number":[1537],"idSide":[32],"errorMessage":[32],"errorTitle":[32]},[[0,"agreementAcceptance","agreementAcceptanceEmitted"],[0,"apiError","apiErrorEmitter"]]],[0,"id-double-side",{"device":[16],"showTimeout":[32],"showInvalid":[32],"showHowTo":[32],"front":[32],"flow":[32]},[[0,"howToInfoDone","howToDone"],[0,"timeElapsed","timeElapsed"],[0,"captureErrorDone","captureErrorDone"],[0,"photoIdCapture","captureIdImage"],[0,"photoIdBackCapture","captureIdBackImage"],[0,"recordingIdCapture","capturedIdRecording"],[0,"verificationFinished","verificationFinished"]]],[0,"id-single-side",{"device":[16],"showTimeout":[32],"showHowTo":[32],"idFlow":[32]},[[0,"captureErrorDone","captureErrorDone"],[0,"howToInfoDone","howToDone"],[0,"timeElapsed","timeElapsed"],[0,"photoIdCapture","captureIdImage"],[0,"verificationFinished","verificationFinished"],[0,"recordingIdCapture","capturedIdRecording"]]],[0,"user-liveness",{"device":[16],"showError":[32],"showHowTo":[32],"selfieFlow":[32]},[[0,"howToInfoDone","howToDone"],[0,"timeElapsed","timeElapsed"],[0,"captureErrorDone","captureErrorDone"],[0,"photoSelfieCapture","captureSelfieImage"],[0,"recordingSelfieCapture","capturedSelfieRecording"],[0,"verificationFinished","verificationFinished"]]],[0,"agreement-info",{"agreementsChecked":[32],"termsChecked":[32],"openAgreements":[32],"openTerms":[32]},[[0,"agreementAcceptance","agreementAcceptanceEmitted"]]],[0,"camera-error",{"device":[16],"title":[32],"description":[32],"buttonDisabled":[32],"demoVideo":[32]}],[0,"end-redirect"],[0,"error-end",{"message":[1],"errorTitle":[1,"error-title"]}],[0,"landing-validation",{"device":[16],"warningText":[32],"buttonDisabled":[32]}],[0,"mobile-redirect",{"infoTextTop":[32],"infoTextBottom":[32],"contact":[32],"invalidValue":[32],"waitingMobile":[32],"orderStatus":[32],"redirectLink":[32],"qrCode":[32],"prefilledPhone":[32]}],[0,"sms-code-validation",{"title":[32],"details":[32],"buttonText":[32],"phoneNumber":[32],"code":[32],"prefilledPhone":[32],"canSend":[32]}],[0,"id-back-capture",{"device":[16],"videoStarted":[32],"cameraSize":[32],"captureTaken":[32],"verified":[32],"titleMesage":[32],"showDemo":[32],"demoVideo":[32]},[[0,"changeTitle","eventChangeTitle"],[0,"videoStarted","eventVideoStarted"],[0,"verificationFinished","verificationFinished"],[0,"takePhoto","takePhoto"]]],[0,"selfie-capture",{"device":[16],"videoStarted":[32],"captureTaken":[32],"verified":[32],"titleMesage":[32],"demoEnded":[32],"demoVideo":[32],"uploadingLink":[32],"captureHeight":[32],"captureWidth":[32]},[[0,"changeTitle","eventChangeTitle"],[0,"videoStarted","eventVideoStarted"],[0,"takePhoto","takePhoto"],[0,"verificationFinished","verificationFinished"]]],[0,"agreement-check",{"agreementType":[1,"agreement-type"],"htmlContent":[32],"buttonEnabled":[32]}],[0,"id-capture",{"device":[16],"videoStarted":[32],"cameraSize":[32],"captureTaken":[32],"verified":[32],"titleMesage":[32],"showDemo":[32],"demoVideo":[32]},[[0,"changeTitle","eventChangeTitle"],[0,"videoStarted","eventVideoStarted"],[0,"takePhoto","takePhoto"],[0,"verificationFinished","verificationFinished"]]],[0,"capture-error",{"type":[1],"buttonEnabled":[32],"buttonText":[32]}],[0,"how-to-info",{"idSide":[1,"id-side"],"topTitle":[32],"subTitle":[32],"imagePath":[32],"buttonText":[32],"buttonEnabled":[32]}],[0,"camera-comp",{"modelPath":[1,"model-path"],"device":[16],"probabilityThreshold":[2,"probability-threshold"],"captureMode":[1,"capture-mode"]}]]]], options);
+  return index.bootstrapLazy([["loader-dots.cjs",[[1,"loader-dots"]]],["agreement-check_18.cjs",[[1,"identification-component",{"token":[1537],"order_id":[1537],"api_url":[1537],"env":[1537],"redirect_id":[1537],"phone_number":[1537],"idSide":[32],"errorMessage":[32],"errorTitle":[32]},[[0,"agreementAcceptance","agreementAcceptanceEmitted"],[0,"apiError","apiErrorEmitter"]]],[0,"id-double-side",{"showTimeout":[32],"showInvalid":[32],"showHowTo":[32],"front":[32],"flow":[32]},[[0,"howToInfoDone","howToDone"],[0,"timeElapsed","timeElapsed"],[0,"captureErrorDone","captureErrorDone"],[0,"photoIdCapture","captureIdImage"],[0,"photoIdBackCapture","captureIdBackImage"],[0,"recordingIdCapture","capturedIdRecording"],[0,"verificationFinished","verificationFinished"]]],[0,"id-single-side",{"showTimeout":[32],"showHowTo":[32],"idFlow":[32]},[[0,"captureErrorDone","captureErrorDone"],[0,"howToInfoDone","howToDone"],[0,"timeElapsed","timeElapsed"],[0,"photoIdCapture","captureIdImage"],[0,"verificationFinished","verificationFinished"],[0,"recordingIdCapture","capturedIdRecording"]]],[0,"user-liveness",{"showError":[32],"showHowTo":[32],"selfieFlow":[32]},[[0,"howToInfoDone","howToDone"],[0,"timeElapsed","timeElapsed"],[0,"captureErrorDone","captureErrorDone"],[0,"photoSelfieCapture","captureSelfieImage"],[0,"recordingSelfieCapture","capturedSelfieRecording"],[0,"verificationFinished","verificationFinished"]]],[0,"agreement-info",{"agreementsChecked":[32],"termsChecked":[32],"openAgreements":[32],"openTerms":[32]},[[0,"agreementAcceptance","agreementAcceptanceEmitted"]]],[0,"camera-error",{"title":[32],"description":[32],"buttonDisabled":[32],"demoVideo":[32]}],[0,"end-redirect"],[0,"error-end",{"message":[1],"errorTitle":[1,"error-title"]}],[0,"landing-validation",{"warningText":[32],"buttonDisabled":[32]}],[0,"mobile-redirect",{"infoTextTop":[32],"infoTextBottom":[32],"contact":[32],"invalidValue":[32],"waitingMobile":[32],"orderStatus":[32],"redirectLink":[32],"qrCode":[32],"prefilledPhone":[32]}],[0,"sms-code-validation",{"title":[32],"details":[32],"buttonText":[32],"phoneNumber":[32],"code":[32],"prefilledPhone":[32],"canSend":[32]}],[0,"id-back-capture",{"videoStarted":[32],"cameraSize":[32],"captureTaken":[32],"verified":[32],"titleMesage":[32],"showDemo":[32],"demoVideo":[32]},[[0,"changeTitle","eventChangeTitle"],[0,"videoStarted","eventVideoStarted"],[0,"verificationFinished","verificationFinished"],[0,"takePhoto","takePhoto"]]],[0,"selfie-capture",{"videoStarted":[32],"captureTaken":[32],"verified":[32],"titleMesage":[32],"demoEnded":[32],"demoVideo":[32],"uploadingLink":[32],"captureHeight":[32],"captureWidth":[32]},[[0,"changeTitle","eventChangeTitle"],[0,"videoStarted","eventVideoStarted"],[0,"takePhoto","takePhoto"],[0,"verificationFinished","verificationFinished"]]],[0,"agreement-check",{"agreementType":[1,"agreement-type"],"htmlContent":[32],"buttonEnabled":[32]}],[0,"id-capture",{"videoStarted":[32],"cameraSize":[32],"captureTaken":[32],"verified":[32],"titleMesage":[32],"showDemo":[32],"demoVideo":[32]},[[0,"changeTitle","eventChangeTitle"],[0,"videoStarted","eventVideoStarted"],[0,"takePhoto","takePhoto"],[0,"verificationFinished","verificationFinished"]]],[0,"capture-error",{"type":[1],"buttonEnabled":[32],"buttonText":[32]}],[0,"how-to-info",{"idSide":[1,"id-side"],"topTitle":[32],"subTitle":[32],"imagePath":[32],"buttonText":[32],"buttonEnabled":[32]}],[0,"camera-comp",{"modelPath":[1,"model-path"],"probabilityThreshold":[2,"probability-threshold"],"captureMode":[1,"capture-mode"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -0,0 +1,48 @@
+import { ApiCall } from '../helpers/ApiCall';
+import { DeviceDetection } from '../helpers/DeviceDetection';
+import Events from '../helpers/Events';
+import store from '../helpers/store';
+import { FlowMoments } from '../models/FlowSteps';
+export class BaseComponent {
+  constructor(step) {
+    this.apiErrorEvent = null;
+    this.processError = null;
+    this.apiCall = new ApiCall();
+    if (step)
+      this.flowStep = step;
+    if (!store.device) {
+      store.device = new DeviceDetection().getDevice();
+    }
+    Events.init(window);
+  }
+  setEventEmitter(event) {
+    this.apiErrorEvent = event;
+  }
+  setErrorCallback(callback) {
+    this.processError = callback;
+  }
+  async initialize() {
+    Events.flowEvent(this.flowStep, FlowMoments.Initialized);
+    try {
+      await this.apiCall.AddStep(this.flowStep, FlowMoments.Initialized);
+    }
+    catch (e) {
+      if (this.apiErrorEvent)
+        this.apiErrorEvent.emit(e);
+      else
+        this.processError(e, FlowMoments.Initialized);
+    }
+  }
+  async finalize() {
+    Events.flowEvent(this.flowStep, FlowMoments.Finalized);
+    try {
+      await this.apiCall.AddStep(this.flowStep, FlowMoments.Finalized);
+    }
+    catch (e) {
+      if (this.apiErrorEvent)
+        this.apiErrorEvent.emit(e);
+      else
+        this.processError(e, FlowMoments.Initialized);
+    }
+  }
+}

package/dist/collection/components/common/camera-error/camera-error.js

@@ -2,16 +2,17 @@ import { h } from '@stencil/core';
 import { CameraErrorValues, SessionKeys } from '../../../helpers/textValues';
 import store from '../../../helpers/store';
 import { FlowStatus } from '../../../models/FlowStatus';
-import { ApiCall } from '../../../helpers/ApiCall';
 import { FlowSteps } from '../../../models/FlowSteps';
+import { MobileOS } from '../../../models/IDevice';
+import { BaseComponent } from '../../base-component';
 export class CameraError {
   constructor() {
-    this.device = undefined;
     this.title = undefined;
     this.description = undefined;
     this.buttonDisabled = undefined;
     this.demoVideo = undefined;
-    this.apiCall = new ApiCall();
+    this.baseComponent = new BaseComponent(FlowSteps.CameraError);
+    this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   async componentWillLoad() {
     this.buttonDisabled = false;
@@ -20,7 +21,8 @@ export class CameraError {
     this.buttonText = CameraErrorValues.Button;
   }
   async componentDidLoad() {
-    if (!this.device.isIos) {
+    await this.baseComponent.initialize();
+    if (store.device.mobileOS != MobileOS.iOS) {
       this.demoVideo.src = CameraErrorValues.HowToLink;
       this.demoVideo.loop = true;
       this.demoVideo.play();
@@ -32,16 +34,11 @@ export class CameraError {
         store.flowStatus = FlowStatus.LANDING;
       }
     }
-    try {
-      await this.apiCall.AddStep(FlowSteps.CameraError);
-    }
-    catch (e) {
-      this.apiErrorEvent.emit(e);
-    }
   }
   async buttonClick() {
     this.buttonDisabled = true;
-    if (this.device.isIos) {
+    await this.baseComponent.finalize();
+    if (store.device.mobileOS == MobileOS.iOS) {
       sessionStorage.setItem(SessionKeys.RefreshDoneKey, 'true');
       window.location.reload();
     }
@@ -50,7 +47,7 @@ export class CameraError {
     }
   }
   render() {
-    return (h("div", { class: "container" }, h("div", { class: "row" }, h("h1", { class: "color-red" }, this.title), h("div", null, h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.description)), h("div", { hidden: this.device.isIos }, h("video", { id: "howtoPermissions", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", type: "button", disabled: this.buttonDisabled, onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, CameraErrorValues.FooterText))))));
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("h1", { class: "color-red" }, this.title), h("div", null, h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.description)), h("div", { hidden: store.device.mobileOS == MobileOS.iOS }, h("video", { id: "howtoPermissions", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", type: "button", disabled: this.buttonDisabled, onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, CameraErrorValues.FooterText))))));
   }
   static get is() { return "camera-error"; }
   static get originalStyleUrls() {
@@ -63,30 +60,6 @@ export class CameraError {
       "$": ["camera-error.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 {
       "title": {},

package/dist/collection/components/common/id-back-capture/id-back-capture.js

@@ -16,7 +16,6 @@ export class IdBackCapture {
       //this.closeCamera();
       this.eventPhotoCapture.emit(photos);
     };
-    this.device = undefined;
     this.videoStarted = undefined;
     this.cameraSize = undefined;
     this.captureTaken = undefined;
@@ -61,7 +60,7 @@ export class IdBackCapture {
     this.openCamera();
   }
   async openCamera() {
-    var constraints = this.cameras.GetConstraints(store.cameraId, this.device);
+    var constraints = this.cameras.GetConstraints(store.cameraId, store.device);
     setTimeout(() => {
       navigator.mediaDevices
         .getUserMedia(constraints)
@@ -114,7 +113,7 @@ export class IdBackCapture {
     let titleClass = this.verified ? 'color-black-2 text-center' : 'color-white text-center';
     //let videoClass = this.device.isMobile ? '' : 'video-demo';
     let bgDemo = this.verified ? 'container' : 'container bg-black';
-    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.showDemo == false }, h("video", { id: "howtoBack", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.showDemo }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("div", { style: cameraStyleInner }, h("camera-comp", { device: this.device, "capture-mode": "id" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, IdCaptureValues.FooterText)))));
+    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.showDemo == false }, h("video", { id: "howtoBack", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.showDemo }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("div", { style: cameraStyleInner }, h("camera-comp", { "capture-mode": "id" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, IdCaptureValues.FooterText)))));
   }
   static get is() { return "id-back-capture"; }
   static get originalStyleUrls() {
@@ -127,30 +126,6 @@ export class IdBackCapture {
       "$": ["id-back-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": {},

package/dist/collection/components/common/id-capture/id-capture.js

@@ -16,7 +16,6 @@ export class IdCapture {
       //this.closeCamera();
       this.eventPhotoCapture.emit(photos);
     };
-    this.device = undefined;
     this.videoStarted = undefined;
     this.cameraSize = undefined;
     this.captureTaken = undefined;
@@ -57,7 +56,7 @@ export class IdCapture {
     this.openCamera();
   }
   async openCamera() {
-    var constraints = this.cameras.GetConstraints(store.cameraId, this.device);
+    var constraints = this.cameras.GetConstraints(store.cameraId, store.device);
     setTimeout(() => {
       navigator.mediaDevices
         .getUserMedia(constraints)
@@ -115,7 +114,7 @@ export class IdCapture {
     let titleClass = this.verified ? 'color-black-2 text-center' : 'color-white text-center';
     //let videoClass = this.device.isMobile ? '' : 'video-demo';
     let bgDemo = this.verified ? 'container' : 'container bg-black';
-    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.showDemo == false }, h("video", { id: "howtoFront", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.showDemo }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("div", { style: cameraStyleInner }, h("camera-comp", { device: this.device, "capture-mode": "id" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, IdCaptureValues.FooterText)))));
+    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.showDemo == false }, h("video", { id: "howtoFront", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.showDemo }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("div", { style: cameraStyleInner }, h("camera-comp", { "capture-mode": "id" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, IdCaptureValues.FooterText)))));
   }
   static get is() { return "id-capture"; }
   static get originalStyleUrls() {
@@ -128,30 +127,6 @@ export class IdCapture {
       "$": ["id-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": {},

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

@@ -6,6 +6,7 @@ import { SelfieCaptureValues } from '../../../helpers/textValues';
 import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
 import { FacePose } from '../../../libs/FaceML5Detector/FacePose';
 import { delay } from '../../../utils/utils';
+import store from '../../../helpers/store';
 export class SelfieCapture {
   // @State() private animationPath: string;
   constructor() {
@@ -13,7 +14,6 @@ export class SelfieCapture {
       //this.closeCamera();
       this.eventPhotoCapture.emit(photos);
     };
-    this.device = undefined;
     this.videoStarted = undefined;
     this.captureTaken = undefined;
     this.verified = undefined;
@@ -66,7 +66,7 @@ export class SelfieCapture {
     this.openCamera();
   }
   async openCamera() {
-    const constraints = this.cameras.GetConstraints('', this.device, true);
+    const constraints = this.cameras.GetConstraints('', store.device, true);
     setTimeout(() => {
       navigator.mediaDevices
         .getUserMedia(constraints)
@@ -110,7 +110,7 @@ export class SelfieCapture {
   }
   render() {
     let cameraStyle;
-    if (this.device.isMobile && this.videoStarted) {
+    if (store.device.isMobile && this.videoStarted) {
       cameraStyle = {
         'width': this.captureWidth + 'px',
         'height': this.captureHeight + 'px',
@@ -123,7 +123,7 @@ export class SelfieCapture {
     let titleClass = this.verified ? 'color-black-2 text-center' : 'color-white text-center';
     //let videoClass = this.device.isMobile ? '' : 'video-demo';
     let bgDemo = this.verified ? 'container' : 'container bg-black';
-    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.demoEnded }, h("video", { id: "howtoSelfie", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.demoEnded == false }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("camera-comp", { device: this.device, "capture-mode": "selfie" }))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, SelfieCaptureValues.FooterText)))));
+    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.demoEnded }, h("video", { id: "howtoSelfie", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.demoEnded == false }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("camera-comp", { "capture-mode": "selfie" }))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, SelfieCaptureValues.FooterText)))));
   }
   static get is() { return "selfie-capture"; }
   static get originalStyleUrls() {
@@ -136,30 +136,6 @@ export class SelfieCapture {
       "$": ["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": {},

package/dist/collection/components/controls/camera/camera.js

@@ -1,5 +1,6 @@
 import { Stream } from '../../../helpers/Stream';
 import { h } from '@stencil/core';
+import store from '../../../helpers/store';
 // import { PipelineResult } from '../../../libs/FaceDetector/PipelineResult';
 export class Camera {
   constructor() {
@@ -37,7 +38,6 @@ export class Camera {
       this.verificationFinished.emit();
     };
     this.modelPath = undefined;
-    this.device = undefined;
     this.probabilityThreshold = undefined;
     this.captureMode = undefined;
   }
@@ -47,7 +47,7 @@ export class Camera {
   render() {
     let cameraVideoClass = 'cameraVideo';
     let cameraCanvasClass = 'cameraCanvas';
-    if (this.device.isWin) {
+    if (store.device.isDesktop) {
       cameraVideoClass = 'cameraVideoSelfieDesk';
       cameraCanvasClass = 'cameraCanvasSelfieDesk';
     }
@@ -59,7 +59,7 @@ export class Camera {
   }
   startStream() {
     if (!Stream.instance)
-      Stream.getInstance(this.device, this.modelPath);
+      Stream.getInstance(this.modelPath);
     const stream = Stream.getInstance();
     stream.updateHtmlElements(this.cameraVideo, this.cameraCanvas, this.component);
     if (this.captureMode == 'selfie') {
@@ -111,26 +111,6 @@ export class Camera {
         "attribute": "model-path",
         "reflect": false
       },
-      "device": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Device",
-          "resolved": "Device",
-          "references": {
-            "Device": {
-              "location": "import",
-              "path": "../../../models/IDevice"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
       "probabilityThreshold": {
         "type": "number",
         "mutable": false,

package/dist/collection/components/flow/agreement-info/agreement-info.js

@@ -3,31 +3,28 @@ import store from '../../../helpers/store';
 import { AgreementInfoValues } from '../../../helpers/textValues';
 import { FlowStatus } from '../../../models/FlowStatus';
 import { FlowSteps } from '../../../models/FlowSteps';
-import { ApiCall } from '../../../helpers/ApiCall';
+import { BaseComponent } from '../../base-component';
 export class AgreementInfo {
   constructor() {
     this.agreementsChecked = undefined;
     this.termsChecked = undefined;
     this.openAgreements = undefined;
     this.openTerms = undefined;
+    this.baseComponent = new BaseComponent(FlowSteps.Agreements);
+    this.baseComponent.setEventEmitter(this.apiErrorEvent);
     this.agreementsChecked = false;
     this.termsChecked = false;
-    this.apiCall = new ApiCall();
   }
   async componentDidLoad() {
-    try {
-      await this.apiCall.AddStep(FlowSteps.Agreements);
-    }
-    catch (e) {
-      this.apiErrorEvent.emit(e);
-    }
+    await this.baseComponent.initialize();
   }
   componentWillLoad() {
     this.openAgreements = false;
     this.openTerms = false;
   }
-  buttonClick() {
+  async buttonClick() {
     if (this.agreementsChecked && this.termsChecked) {
+      await this.baseComponent.finalize();
       store.flowStatus = FlowStatus.PHONE;
     }
   }

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

@@ -4,22 +4,17 @@ import { CompleteValues } from '../../../helpers/textValues';
 import completeImg from '../../../assets/complete.svg';
 import store from '../../../helpers/store';
 import Events from '../../../helpers/Events';
-import { ApiCall } from '../../../helpers/ApiCall';
 import { FlowSteps } from '../../../models/FlowSteps';
+import { BaseComponent } from '../../base-component';
 export class EndRedirect {
   constructor() {
-    this.apiCall = new ApiCall();
+    this.baseComponent = new BaseComponent(FlowSteps.End);
+    this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   async componentDidLoad() {
-    Events.init(window);
     Events.flowCompleted();
     if (store.environment !== 'DEMO') {
-      try {
-        await this.apiCall.AddStep(FlowSteps.End);
-      }
-      catch (e) {
-        this.apiErrorEvent.emit(e);
-      }
+      await this.baseComponent.initialize();
     }
   }
   render() {