@ekyc_qoobiss/qbs-ect-cmp 3.2.0 → 3.2.2

package/dist/esm/agreement-check_18.entry.js

@@ -374,6 +374,8 @@ const { state, onChange } = createStore({
   phoneValidation: true,
   phoneNumber: '',
   apiBaseUrl: 'https://apiro.id-kyc.com',
+  device: null,
+  recordingRetryCount: 0,
 });
 onChange('environment', value => {
   state.debug = value == 'QA';
@@ -402,20 +404,26 @@ onChange('phoneValidation', value => {
 
 var FlowSteps;
 (function (FlowSteps) {
-  FlowSteps[FlowSteps["MobileRedirect"] = 0] = "MobileRedirect";
-  FlowSteps[FlowSteps["Landing"] = 1] = "Landing";
-  FlowSteps[FlowSteps["Agreements"] = 2] = "Agreements";
-  FlowSteps[FlowSteps["OtpSend"] = 3] = "OtpSend";
-  FlowSteps[FlowSteps["OtpCheck"] = 4] = "OtpCheck";
-  FlowSteps[FlowSteps["CiFrontHowTo"] = 5] = "CiFrontHowTo";
-  FlowSteps[FlowSteps["CiFront"] = 6] = "CiFront";
-  FlowSteps[FlowSteps["CiBackHowTo"] = 7] = "CiBackHowTo";
-  FlowSteps[FlowSteps["CiBack"] = 8] = "CiBack";
-  FlowSteps[FlowSteps["SelfieHowTo"] = 9] = "SelfieHowTo";
-  FlowSteps[FlowSteps["Selfie"] = 10] = "Selfie";
-  FlowSteps[FlowSteps["End"] = 11] = "End";
-  FlowSteps[FlowSteps["CameraError"] = 12] = "CameraError";
-})(FlowSteps || (FlowSteps = {}));
+  FlowSteps["MobileRedirect"] = "mobile-redirect";
+  FlowSteps["Landing"] = "landing";
+  FlowSteps["Agreements"] = "agreements";
+  FlowSteps["OtpSend"] = "otp-send";
+  FlowSteps["OtpCheck"] = "otp-check";
+  FlowSteps["CiFrontHowTo"] = "ci-front-how-to";
+  FlowSteps["CiFront"] = "ci-front";
+  FlowSteps["CiBackHowTo"] = "ci-back-how-to";
+  FlowSteps["CiBack"] = "ci-back";
+  FlowSteps["SelfieHowTo"] = "selfie-how-to";
+  FlowSteps["Selfie"] = "selfie";
+  FlowSteps["End"] = "end";
+  FlowSteps["CameraError"] = "camera-error";
+})(FlowSteps || (FlowSteps = {}));
+var FlowMoments;
+(function (FlowMoments) {
+  FlowMoments["Initialized"] = "initialized";
+  FlowMoments["Finalized"] = "finalized";
+  FlowMoments["None"] = "none";
+})(FlowMoments || (FlowMoments = {}));
 
 class ApiCall {
   constructor() {
@@ -537,8 +545,8 @@ class ApiCall {
     }
     catch (_a) { }
   }
-  async AddStep(step) {
-    let data = { requestId: state.requestId, redirectId: state.redirectId, step: FlowSteps[step] };
+  async AddStep(step, moment) {
+    let data = { requestId: state.requestId, redirectId: state.redirectId, step: FlowSteps[step], moment: FlowMoments[moment] };
     let result = await this.post(this.urls.AddStep, JSON.stringify(data));
     return result.saved;
   }
@@ -580,6 +588,215 @@ const AgreementCheck = class {
 };
 AgreementCheck.style = agreementCheckCss;
 
+var MobileOS;
+(function (MobileOS) {
+  MobileOS["Android"] = "android";
+  MobileOS["iOS"] = "ios";
+  MobileOS["Unknown"] = "unknown";
+  MobileOS["WindowsPhone"] = "Windows Phone";
+})(MobileOS || (MobileOS = {}));
+var DesktopOS;
+(function (DesktopOS) {
+  DesktopOS["Linux"] = "linux";
+  DesktopOS["MacOS"] = "mac_os";
+  DesktopOS["Unix"] = "unix";
+  DesktopOS["Unknown"] = "unknown";
+  DesktopOS["Windows"] = "windows";
+})(DesktopOS || (DesktopOS = {}));
+var Browser;
+(function (Browser) {
+  Browser["Chrome"] = "chrome";
+  Browser["Firefox"] = "firefox";
+  Browser["Safari"] = "safari";
+  Browser["Unknown"] = "unknown";
+})(Browser || (Browser = {}));
+
+class DeviceDetection {
+  constructor() {
+    var _a, _b, _c, _d;
+    this.supportedScreenOrientation = (_b = (_a = ((screen === null || screen === void 0 ? void 0 : screen.orientation) || {}).type) !== null && _a !== void 0 ? _a : screen.mozOrientation) !== null && _b !== void 0 ? _b : screen.msOrientation;
+    this.safariScreenOrientation = !(screen === null || screen === void 0 ? void 0 : screen.orientation) && matchMedia('(orientation: portrait)').matches ? 'portrait-primary' : 'landscape-primary';
+    this.initialScreenOrientation = (_d = (_c = this.supportedScreenOrientation) !== null && _c !== void 0 ? _c : this.safariScreenOrientation) !== null && _d !== void 0 ? _d : 'portrait-primary';
+    this.userAgent = navigator.userAgent || navigator.vendor || window.opera || undefined;
+    this.isMobile = this.isMobileDevice();
+    this.isTablet = this.isTabletDevice();
+    this.isDesktop = !this.isMobile && !this.isTablet;
+  }
+  // Device typology
+  isMobileDevice() {
+    const regexs = [/(Android)(.+)(Mobile)/i, /BlackBerry/i, /iPhone|iPod/i, /Opera Mini/i, /IEMobile/i];
+    return regexs.some(b => this.userAgent.match(b));
+  }
+  isTabletDevice() {
+    const regex = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/;
+    return regex.test(this.userAgent.toLowerCase());
+  }
+  // Device Operating System
+  getMobileOS() {
+    if (this.isMobileDevice()) {
+      if (/windows phone/i.test(this.userAgent))
+        return MobileOS.WindowsPhone;
+      else if (/android/i.test(this.userAgent))
+        return MobileOS.Android;
+      else if (/iPad|iPhone|iPod/.test(this.userAgent) && !window.MSStream)
+        return MobileOS.iOS;
+      return MobileOS.Unknown;
+    }
+    else
+      return undefined;
+  }
+  getDesktopOS() {
+    if (this.isDesktop) {
+      if (this.userAgent.indexOf('Win') !== -1)
+        return DesktopOS.Windows;
+      else if (this.userAgent.indexOf('Mac') !== -1)
+        return DesktopOS.MacOS;
+      else if (this.userAgent.indexOf('X11') !== -1)
+        return DesktopOS.Unix;
+      else if (this.userAgent.indexOf('Linux') !== -1)
+        return DesktopOS.Linux;
+      return DesktopOS.Unknown;
+    }
+    else
+      return undefined;
+  }
+  getDeviceOS() {
+    var _a;
+    return (_a = this.getMobileOS()) !== null && _a !== void 0 ? _a : this.getDesktopOS();
+  }
+  getBrowser() {
+    var isChrome = /chrome/i.test(this.userAgent);
+    if (isChrome)
+      return Browser.Chrome;
+    if (/firefox/i.test(navigator.userAgent))
+      return Browser.Firefox;
+    else if (!isChrome && /safari/i.test(navigator.userAgent))
+      return Browser.Safari;
+    else
+      return Browser.Unknown;
+  }
+  getDevice() {
+    var device = {
+      isDesktop: this.isDesktop,
+      desktopOS: this.getDesktopOS(),
+      isWindowsDesktop: this.getDeviceOS() === DesktopOS.Windows,
+      isLinuxOrUnixDesktop: this.getDeviceOS() === DesktopOS.Linux || this.getDeviceOS() === DesktopOS.Unix,
+      isMobile: this.isMobile,
+      mobileOS: this.getMobileOS(),
+      isAndroidDevice: this.getDeviceOS() === MobileOS.Android,
+      isAppleDevice: this.getDeviceOS() === MobileOS.iOS || this.getDeviceOS() === DesktopOS.MacOS,
+      isUnknownMobileDevice: this.getDeviceOS() === MobileOS.Unknown,
+      browser: this.getBrowser(),
+      isTablet: this.isTablet,
+      initialScreenOrientation: this.initialScreenOrientation,
+    };
+    return device;
+  }
+}
+
+class Events {
+  static init(element) {
+    this.callingModule = element;
+  }
+  static flowEvent(step, moment) {
+    const eventName = `ect-${step.toString()}-${moment.toString()}-event`;
+    this.callingModule.dispatchEvent(new CustomEvent(eventName, {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static flowStarted() {
+    this.callingModule.dispatchEvent(new CustomEvent('ect-started', {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static flowAborted() {
+    sessionStorage.clear();
+    this.callingModule.dispatchEvent(new CustomEvent('ect-aborted', {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static flowCompleted() {
+    sessionStorage.clear();
+    this.callingModule.dispatchEvent(new CustomEvent('ect-completed', {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static flowError(error) {
+    sessionStorage.clear();
+    this.callingModule.dispatchEvent(new CustomEvent('ect-error', {
+      detail: { error },
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static tokenExpired() {
+    sessionStorage.clear();
+    this.callingModule.dispatchEvent(new CustomEvent('ect-session-expired', {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+}
+
+class BaseComponent {
+  constructor(step) {
+    this.apiErrorEvent = null;
+    this.processError = null;
+    this.apiCall = new ApiCall();
+    if (step)
+      this.flowStep = step;
+    if (!state.device) {
+      state.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);
+    }
+  }
+}
+
 const agreementInfoCss = "";
 
 const AgreementInfo = class {
@@ -590,24 +807,21 @@ const AgreementInfo = class {
     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();
       state.flowStatus = FlowStatus.PHONE;
     }
   }
@@ -4905,7 +5119,7 @@ class Stream {
   setVerificationFinished(fun) {
     this.verificationFinished = fun;
   }
-  constructor(device, _modelPath) {
+  constructor(_modelPath) {
     this.streamPaused = false;
     this.recordedChunks = [];
     this.videoSize = { width: 0, height: 0 };
@@ -4916,13 +5130,12 @@ class Stream {
       // this.dropMask();
       // if (this.faceDetection) Detector.getInstance().stopDetector();
     };
-    this.device = device;
-    this.idML5Detector = IDML5Detector.getInstance(this, device.isMobile);
-    this.faceML5Detector = FaceML5Detector.getInstance(this, device.isMobile);
+    this.idML5Detector = IDML5Detector.getInstance(this, state.device.isMobile);
+    this.faceML5Detector = FaceML5Detector.getInstance(this, state.device.isMobile);
   }
-  static getInstance(device, modelPath) {
+  static getInstance(modelPath) {
     if (!Stream.instance) {
-      Stream.instance = new Stream(device, modelPath);
+      Stream.instance = new Stream(modelPath);
     }
     return Stream.instance;
   }
@@ -4983,7 +5196,7 @@ class Stream {
   recordStream() {
     var options = { mimeType: Stream.webmMimeType.mime, videoBitsPerSecond: 1500000 };
     if (!MediaRecorder.isTypeSupported(options.mimeType)) {
-      if (this.device.isIos || this.device.isSafari)
+      if (state.device.mobileOS == MobileOS.iOS || state.device.browser == Browser.Safari)
         options.mimeType = Stream.mp4MimeType.mime;
     }
     this.recordedChunks = [];
@@ -5038,7 +5251,7 @@ class Stream {
       const context = canvas.getContext('2d');
       context.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);
       canvas.toBlob((frame) => {
-        if (frame.type === ImageFormat.JPEG && !this.device.isIos) {
+        if (frame.type === ImageFormat.JPEG && !state.device.isAppleDevice) {
           try {
             addExifInImg(frame, this.stream.getTracks()[0], this.videoSize).then(updatedFrame => resolve(updatedFrame));
           }
@@ -5131,7 +5344,6 @@ const Camera = class {
       this.verificationFinished.emit();
     };
     this.modelPath = undefined;
-    this.device = undefined;
     this.probabilityThreshold = undefined;
     this.captureMode = undefined;
   }
@@ -5141,7 +5353,7 @@ const Camera = class {
   render() {
     let cameraVideoClass = 'cameraVideo';
     let cameraCanvasClass = 'cameraCanvas';
-    if (this.device.isWin) {
+    if (state.device.isDesktop) {
       cameraVideoClass = 'cameraVideoSelfieDesk';
       cameraCanvasClass = 'cameraCanvasSelfieDesk';
     }
@@ -5153,7 +5365,7 @@ const Camera = class {
   }
   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') {
@@ -5185,12 +5397,12 @@ const CameraError = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.apiErrorEvent = createEvent(this, "apiError", 7);
-    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;
@@ -5199,7 +5411,8 @@ const CameraError = class {
     this.buttonText = CameraErrorValues.Button;
   }
   async componentDidLoad() {
-    if (!this.device.isIos) {
+    await this.baseComponent.initialize();
+    if (state.device.mobileOS != MobileOS.iOS) {
       this.demoVideo.src = CameraErrorValues.HowToLink;
       this.demoVideo.loop = true;
       this.demoVideo.play();
@@ -5211,16 +5424,11 @@ const CameraError = class {
         state.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 (state.device.mobileOS == MobileOS.iOS) {
       sessionStorage.setItem(SessionKeys.RefreshDoneKey, 'true');
       window.location.reload();
     }
@@ -5229,7 +5437,7 @@ const CameraError = class {
     }
   }
   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: state.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))))));
   }
 };
 CameraError.style = cameraErrorCss;
@@ -5279,74 +5487,19 @@ CaptureError.style = captureErrorCss;
 
 const completeSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODMiIGhlaWdodD0iODQiIHZpZXdCb3g9IjAgMCA4MyA4NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik00MS41IDgzLjcwNjJDMzAuNDE0NyA4My43MDYyIDE5Ljk5MjkgNzkuMzgwNCAxMi4xNTQ2IDcxLjUyNUM0LjMxNjQxIDYzLjY2OTcgMCA1My4yMjUxIDAgNDIuMTE1NkMwIDMxLjAwNjEgNC4zMTY0MSAyMC41NjE1IDEyLjE1NDYgMTIuNzA2MUMxOS45OTI5IDQuODUwNzUgMzAuNDE0NyAwLjUyNDkwMiA0MS41IDAuNTI0OTAyQzUyLjU4NTMgMC41MjQ5MDIgNjMuMDA3MSA0Ljg1MDc1IDcwLjg0NTMgMTIuNzA2MUM3OC42ODM2IDIwLjU2MTUgODMgMzEuMDA2MSA4MyA0Mi4xMTU2QzgzIDUzLjIyNTEgNzguNjgzNiA2My42Njk3IDcwLjg0NTMgNzEuNTI1QzYzLjAwNzEgNzkuMzgwNCA1Mi41ODUzIDgzLjcwNjIgNDEuNSA4My43MDYyWk00MS41IDQuNzYzMTNDMjAuOTQ4MyA0Ljc2MzEzIDQuMjI4OTkgMjEuNTE4OSA0LjIyODk5IDQyLjExNTZDNC4yMjg5OSA2Mi43MTIyIDIwLjk0ODMgNzkuNDY4IDQxLjUgNzkuNDY4QzYyLjA1MTcgNzkuNDY4IDc4Ljc3MSA2Mi43MTIyIDc4Ljc3MSA0Mi4xMTU2Qzc4Ljc3MSAyMS41MTg5IDYyLjA1MTcgNC43NjMxMyA0MS41IDQuNzYzMTNaIiBmaWxsPSIjNURDMUFDIi8+DQo8cGF0aCBkPSJNMzcuNDY3NiA2Mi42NjJIMzcuNDYzQzM0Ljk2MDUgNjIuNjYyIDMyLjYwOTUgNjEuNjgyNiAzMC44NDA4IDU5LjkwODRMMTguOTQzOCA0Ny45NjY2QzE1LjMwMDIgNDQuMzA4OCAxNS4zMDE3IDM4LjM1NzQgMTguOTUgMzQuNzAyOEMyMC43MjM0IDMyLjkyNTUgMjMuMDc0NCAzMS45NTA4IDI1LjU3NTMgMzEuOTUwOEMyOC4wNzYxIDMxLjk1MDggMzAuNDI3MSAzMi45MjcxIDMyLjE5NTggMzQuNjk5NkwzNy40ODE3IDM5Ljk5N0w1MC44MTAzIDI2LjYzOTNDNTQuNDYwMSAyMi45ODE1IDYwLjQgMjIuOTgxNSA2NC4wNTE0IDI2LjYzOTNDNjcuNzAxMyAzMC4yOTcxIDY3LjcwMTMgMzYuMjUwMSA2NC4wNTE0IDM5LjkwOTRMNDQuMDg4MiA1OS45MTYzQzQyLjMxOTUgNjEuNjg4OCAzOS45Njg1IDYyLjY2NTEgMzcuNDY3NiA2Mi42NjUxVjYyLjY2MlpNMjUuNTc1MyAzNi4xODlDMjQuMjA0NiAzNi4xODkgMjIuOTE1MiAzNi43MjQxIDIxLjk0NTcgMzcuNjk1N0MxOS45NDEzIDM5LjcwNDUgMTkuOTQxMyA0Mi45NjQ5IDIxLjkzNzkgNDQuOTcwNkwzMy44MzUgNTYuOTEyNEMzNC44MDQ0IDU3Ljg4NTUgMzYuMDkzOSA1OC40MjIyIDM3LjQ2NDUgNTguNDIyMkgzNy40NjYxQzM4LjgzNjcgNTguNDIyMiA0MC4xMjYyIDU3Ljg4NzEgNDEuMDk1NiA1Ni45MTU1TDYxLjA1ODggMzYuOTA4N0M2My4wNjAxIDM0LjkwMyA2My4wNjAxIDMxLjYzOTUgNjEuMDU4OCAyOS42MzM4QzU5LjA1NzUgMjcuNjI4MSA1NS44MDExIDI3LjYyODEgNTMuNzk5NyAyOS42MzM4TDUyLjMwNDIgMjguMTM1TDUzLjc5OTcgMjkuNjMzOEwzOC45NzU3IDQ0LjQ5MDNDMzguMTQ5OCA0NS4zMTc5IDM2LjgxMDQgNDUuMzE3OSAzNS45ODQ2IDQ0LjQ5MDNMMjkuMjAzMiAzNy42OTQxQzI4LjIzMzggMzYuNzIyNSAyNi45NDQzIDM2LjE4NzUgMjUuNTczNyAzNi4xODc1TDI1LjU3NTMgMzYuMTg5WiIgZmlsbD0iIzVEQzFBQyIvPg0KPC9zdmc+DQo=';
 
-class Events {
-  static init(element) {
-    this.callingModule = element;
-  }
-  static flowStarted() {
-    this.callingModule.dispatchEvent(new CustomEvent('ect-started', {
-      detail: {},
-      bubbles: true,
-      cancelable: true,
-      composed: true,
-    }));
-  }
-  static flowAborted() {
-    sessionStorage.clear();
-    this.callingModule.dispatchEvent(new CustomEvent('ect-aborted', {
-      detail: {},
-      bubbles: true,
-      cancelable: true,
-      composed: true,
-    }));
-  }
-  static flowCompleted() {
-    sessionStorage.clear();
-    this.callingModule.dispatchEvent(new CustomEvent('ect-completed', {
-      detail: {},
-      bubbles: true,
-      cancelable: true,
-      composed: true,
-    }));
-  }
-  static flowError(error) {
-    sessionStorage.clear();
-    this.callingModule.dispatchEvent(new CustomEvent('ect-error', {
-      detail: { error },
-      bubbles: true,
-      cancelable: true,
-      composed: true,
-    }));
-  }
-  static tokenExpired() {
-    sessionStorage.clear();
-    this.callingModule.dispatchEvent(new CustomEvent('ect-session-expired', {
-      detail: {},
-      bubbles: true,
-      cancelable: true,
-      composed: true,
-    }));
-  }
-}
-
 const endRedirectCss = "h1{font-family:'Inter', sans-serif;font-style:normal;font-weight:900;font-size:4vh;line-height:4vh;letter-spacing:0.01em;color:#1f2024}p{font-family:'Inter', sans-serif;font-style:normal;font-weight:400;font-size:2vh;line-height:3vh;color:#1f2024;text-align:justify}.container{gap:10rem;text-align:center}.greet{color:rgb(73, 78, 79);visibility:hidden;animation-name:rise;animation-delay:1s;animation-fill-mode:forwards}@keyframes rise{0%{visibility:hidden}50%{visibility:visible}100%{visibility:visible}}.container-coin{background-color:transparent;perspective:1000px;rotate:120deg 0deg}.coin-flip{animation:flip 0.4s ease-in;animation-delay:0.5s;transform-style:preserve-3d;animation-fill-mode:forwards;visibility:hidden}.coin-scale{animation:show 0.4s ease-in;animation-delay:0.5s;transform-style:preserve-3d;animation-fill-mode:forwards}.coin{margin-top:10rem}@keyframes flip{0%{transform:rotateX(140deg);visibility:visible}25%{transform:rotateX(120deg);visibility:visible}50%{transform:rotateX(90deg);visibility:visible}75%{transform:rotateX(75deg);visibility:visible}100%{transform:rotateX(0deg);visibility:visible}}@keyframes show{0%{transform:scale(0)}25%{transform:scale(0.2)}40%{transform:scale(0.4)}50%{transform:scale(0.5)}60%{transform:scale(0.6)}70%{transform:scale(0.7)}100%{transform:scale(1)}}";
 
 const EndRedirect = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.apiErrorEvent = createEvent(this, "apiError", 7);
-    this.apiCall = new ApiCall();
+    this.baseComponent = new BaseComponent(FlowSteps.End);
+    this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   async componentDidLoad() {
-    Events.init(window);
     Events.flowCompleted();
     if (state.environment !== 'DEMO') {
-      try {
-        await this.apiCall.AddStep(FlowSteps.End);
-      }
-      catch (e) {
-        this.apiErrorEvent.emit(e);
-      }
+      await this.baseComponent.initialize();
     }
   }
   render() {
@@ -5428,7 +5581,7 @@ class Cameras {
       const stream = await navigator.mediaDevices.getUserMedia(updatedConstraints);
       stream.getVideoTracks().forEach(track => {
         var _a, _b;
-        if (deviceInfo.isFirefox) {
+        if (deviceInfo.browser === Browser.Firefox) {
           const settings = track.getSettings();
           let facingMode = settings.facingMode && settings.facingMode.length > 0 ? settings.facingMode[0] : '';
           facingMode = facingMode === 'e' ? 'environment' : facingMode;
@@ -5494,7 +5647,7 @@ class Cameras {
         exact: selectedDeviceId,
       };
     }
-    if (device.isWin) {
+    if (device.isDesktop) {
       constraints.video.width = { ideal: 1280 };
     }
     else {
@@ -5550,7 +5703,6 @@ const IdBackCapture = class {
       //this.closeCamera();
       this.eventPhotoCapture.emit(photos);
     };
-    this.device = undefined;
     this.videoStarted = undefined;
     this.cameraSize = undefined;
     this.captureTaken = undefined;
@@ -5595,7 +5747,7 @@ const IdBackCapture = class {
     this.openCamera();
   }
   async openCamera() {
-    var constraints = this.cameras.GetConstraints(state.cameraId, this.device);
+    var constraints = this.cameras.GetConstraints(state.cameraId, state.device);
     setTimeout(() => {
       navigator.mediaDevices
         .getUserMedia(constraints)
@@ -5648,7 +5800,7 @@ const IdBackCapture = class {
     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)))));
   }
   get component() { return getElement(this); }
 };
@@ -5665,7 +5817,6 @@ const IdCapture = class {
       //this.closeCamera();
       this.eventPhotoCapture.emit(photos);
     };
-    this.device = undefined;
     this.videoStarted = undefined;
     this.cameraSize = undefined;
     this.captureTaken = undefined;
@@ -5706,7 +5857,7 @@ const IdCapture = class {
     this.openCamera();
   }
   async openCamera() {
-    var constraints = this.cameras.GetConstraints(state.cameraId, this.device);
+    var constraints = this.cameras.GetConstraints(state.cameraId, state.device);
     setTimeout(() => {
       navigator.mediaDevices
         .getUserMedia(constraints)
@@ -5764,7 +5915,7 @@ const IdCapture = class {
     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)))));
   }
   get component() { return getElement(this); }
 };
@@ -5776,7 +5927,6 @@ const IdDoubleSide = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.apiErrorEvent = createEvent(this, "apiError", 7);
-    this.device = undefined;
     this.showTimeout = undefined;
     this.showInvalid = undefined;
     this.showHowTo = undefined;
@@ -5792,7 +5942,8 @@ const IdDoubleSide = class {
       recordingFileName: '',
       recordingUploadType: '',
     };
-    this.apiCall = new ApiCall();
+    this.baseComponent = new BaseComponent(FlowSteps.CiBack);
+    this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   componentWillLoad() {
     this.captureRetryCount = 0;
@@ -5829,7 +5980,7 @@ const IdDoubleSide = class {
   async captureIdImage(event) {
     let idPhoto = event.detail;
     if (idPhoto.length == 0 || idPhoto.size == 0) {
-      await this.apiCall.AddLog({ message: 'Empty id photo', blobData: idPhoto }, getLogMessage());
+      await this.baseComponent.apiCall.AddLog({ message: 'Empty id photo', blobData: idPhoto }, getLogMessage());
       return;
     }
     try {
@@ -5843,7 +5994,7 @@ const IdDoubleSide = class {
   async captureIdBackImage(event) {
     let idPhoto = event.detail;
     if (idPhoto.length == 0 || idPhoto.size == 0) {
-      await this.apiCall.AddLog({ message: 'Empty id photo', blobData: idPhoto }, getLogMessage());
+      await this.baseComponent.apiCall.AddLog({ message: 'Empty id photo', blobData: idPhoto }, getLogMessage());
       return;
     }
     try {
@@ -5857,7 +6008,7 @@ const IdDoubleSide = class {
   async capturedIdRecording(event) {
     let idRecording = event.detail;
     if (idRecording.length == 0 || idRecording.size == 0) {
-      await this.apiCall.AddLog({ message: 'Empty recording', blobData: idRecording }, getLogMessage());
+      await this.baseComponent.apiCall.AddLog({ message: 'Empty recording', blobData: idRecording }, getLogMessage());
       return;
     }
     let mimeType = idRecording.type == Stream.mp4MimeType.type ? Stream.mp4MimeType : Stream.webmMimeType;
@@ -5866,51 +6017,53 @@ const IdDoubleSide = class {
       this.uploadRecording();
     }
     catch (e) {
-      this.apiErrorEvent.emit(e);
+      if (state.recordingRetryCount < 3) {
+        state.recordingRetryCount++;
+        this.triggerErrorFlow();
+      }
+      else {
+        this.apiErrorEvent.emit(e);
+      }
     }
   }
   async verificationFinished(_event) {
     this.flow.verificationFinished = true;
-    this.endFlow();
+    await this.endFlow();
   }
   async componentDidLoad() {
-    try {
-      await this.apiCall.AddStep(FlowSteps.CiBack);
-    }
-    catch (e) {
-      this.apiErrorEvent.emit(e);
-    }
+    await this.baseComponent.initialize();
   }
   async uploadPhoto() {
     if (this.flow.photoFile == null || this.flow.photoDone) {
       return;
     }
-    this.flow.photoDone = await this.apiCall.UploadFileForRequestB64(state.requestId, this.flow.photoUploadType, this.flow.photoFile);
+    this.flow.photoDone = await this.baseComponent.apiCall.UploadFileForRequestB64(state.requestId, this.flow.photoUploadType, this.flow.photoFile);
     if (this.flow.photoDone) {
-      this.endFlow();
+      await this.endFlow();
     }
     else {
-      this.flow.photoFile = null;
-      this.flow.recordingFile = null;
       this.switchCamera();
-      this.showInvalid = true;
+      this.triggerErrorFlow();
     }
   }
   async uploadRecording() {
     if (this.flow.recordingFile == null || this.flow.recordingDone) {
       return;
     }
-    this.flow.recordingDone = await this.apiCall.UploadFileForRequestB64(state.requestId, this.flow.recordingUploadType, this.flow.recordingFile);
+    this.flow.recordingDone = await this.baseComponent.apiCall.UploadFileForRequestB64(state.requestId, this.flow.recordingUploadType, this.flow.recordingFile);
     if (this.flow.recordingDone) {
-      this.endFlow();
+      await this.endFlow();
     }
     else {
-      this.flow.photoFile = null;
-      this.flow.recordingFile = null;
-      this.showInvalid = true;
+      this.triggerErrorFlow();
     }
   }
-  endFlow() {
+  triggerErrorFlow() {
+    this.flow.photoFile = null;
+    this.flow.recordingFile = null;
+    this.showInvalid = true;
+  }
+  async endFlow() {
     if (!this.flow.photoDone) {
       return;
     }
@@ -5933,6 +6086,8 @@ const IdDoubleSide = class {
     if (!this.flow.verificationFinished) {
       return;
     }
+    state.recordingRetryCount = 0;
+    await this.baseComponent.finalize();
     state.flowStatus = FlowStatus.LIVENESS;
   }
   switchCamera() {
@@ -5947,8 +6102,8 @@ const IdDoubleSide = class {
   }
   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 frontCapture = h("id-capture", { id: "idFront" });
+    let secondCapture = h("id-back-capture", { id: "idBack" });
     let howToInfo = h("how-to-info", { idSide: this.front ? 'front' : 'back' });
     return this.showHowTo ? howToInfo : this.showInvalid || this.showTimeout ? error : this.front ? frontCapture : secondCapture;
   }
@@ -5961,7 +6116,6 @@ const IdSingleSide = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.apiErrorEvent = createEvent(this, "apiError", 7);
-    this.device = undefined;
     this.showTimeout = undefined;
     this.showHowTo = undefined;
     this.idFlow = {
@@ -5971,7 +6125,8 @@ const IdSingleSide = class {
       photoFile: null,
       recordingFile: null,
     };
-    this.apiCall = new ApiCall();
+    this.baseComponent = new BaseComponent(FlowSteps.CiFront);
+    this.baseComponent.setEventEmitter(this.apiErrorEvent);
     this.captureRetryCount = 0;
     this.showHowTo = true;
   }
@@ -5989,7 +6144,7 @@ const IdSingleSide = class {
   async captureIdImage(event) {
     let idPhoto = event.detail;
     if (idPhoto.length == 0 || idPhoto.size == 0) {
-      await this.apiCall.AddLog({ message: 'Empty id photo', blobData: idPhoto }, getLogMessage());
+      await this.baseComponent.apiCall.AddLog({ message: 'Empty id photo', blobData: idPhoto }, getLogMessage());
       return;
     }
     try {
@@ -6002,12 +6157,12 @@ const IdSingleSide = class {
   }
   async verificationFinished(_event) {
     this.idFlow.verificationFinished = true;
-    this.endFlow();
+    await 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 }, getLogMessage());
+      await this.baseComponent.apiCall.AddLog({ message: 'Empty recording', blobData: idRecording }, getLogMessage());
       return;
     }
     let mimeType = idRecording.type == Stream.mp4MimeType.type ? Stream.mp4MimeType : Stream.webmMimeType;
@@ -6022,20 +6177,15 @@ const IdSingleSide = class {
     }
   }
   async componentDidLoad() {
-    try {
-      await this.apiCall.AddStep(FlowSteps.CiFront);
-    }
-    catch (e) {
-      this.apiErrorEvent.emit(e);
-    }
+    await this.baseComponent.initialize();
   }
   async uploadPhoto() {
     if (this.idFlow.photoFile == null || this.idFlow.photoDone) {
       return;
     }
-    this.idFlow.photoDone = await this.apiCall.UploadFileForRequestB64(state.requestId, 'IdFront', this.idFlow.photoFile);
+    this.idFlow.photoDone = await this.baseComponent.apiCall.UploadFileForRequestB64(state.requestId, 'IdFront', this.idFlow.photoFile);
     if (this.idFlow.photoDone) {
-      this.endFlow();
+      await this.endFlow();
     }
     else {
       this.idFlow.photoFile = null;
@@ -6048,9 +6198,9 @@ const IdSingleSide = class {
     if (this.idFlow.recordingFile == null || this.idFlow.recordingDone) {
       return;
     }
-    this.idFlow.recordingDone = await this.apiCall.UploadFileForRequestB64(state.requestId, 'IdFrontVideo', this.idFlow.recordingFile);
+    this.idFlow.recordingDone = await this.baseComponent.apiCall.UploadFileForRequestB64(state.requestId, 'IdFrontVideo', this.idFlow.recordingFile);
     if (this.idFlow.recordingDone) {
-      this.endFlow();
+      await this.endFlow();
     }
     else {
       this.idFlow.photoFile = null;
@@ -6058,7 +6208,7 @@ const IdSingleSide = class {
       this.showTimeout = true;
     }
   }
-  endFlow() {
+  async endFlow() {
     if (!this.idFlow.photoDone) {
       return;
     }
@@ -6068,6 +6218,7 @@ const IdSingleSide = class {
     if (!this.idFlow.verificationFinished) {
       return;
     }
+    await this.baseComponent.finalize();
     state.flowStatus = FlowStatus.LIVENESS;
   }
   switchCamera() {
@@ -6082,47 +6233,13 @@ const IdSingleSide = class {
   }
   render() {
     let error = h("capture-error", { type: "ID" });
-    let capture = h("id-capture", { id: "idFront", device: this.device });
+    let capture = h("id-capture", { id: "idFront" });
     let howToInfo = h("how-to-info", { idSide: "front" });
     return this.showHowTo ? howToInfo : this.showTimeout ? error : capture;
   }
 };
 IdSingleSide.style = idSingleSideCss;
 
-const initDevice = () => {
-  let device = {
-    isMobile: false,
-    isAndroid: false,
-    isLinux: false,
-    isMac: false,
-    isWin: false,
-    isChrome: false,
-    isFirefox: false,
-    isSafari: false,
-    isIos: false,
-  };
-  device.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
-  device.isAndroid = /Android/i.test(navigator.userAgent);
-  device.isIos = /iPhone|iPad|iPod/i.test(navigator.userAgent);
-  device.isLinux = /linux/i.test(navigator.platform);
-  device.isMac = /mac/i.test(navigator.platform);
-  device.isWin = /win/i.test(navigator.platform);
-  device.isChrome = /chrome/i.test(navigator.userAgent);
-  device.isFirefox = /firefox/i.test(navigator.userAgent);
-  device.isSafari = !device.isChrome ? /safari/i.test(navigator.userAgent) : false;
-  device.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
-  device.isAndroid = /Android/i.test(navigator.userAgent);
-  device.isIos = /iPhone|iPad|iPod/i.test(navigator.userAgent);
-  if (!device.isIos) {
-    const isIPad = navigator.userAgent.match(/Mac/) && navigator.maxTouchPoints && navigator.maxTouchPoints > 2;
-    if (isIPad) {
-      device.isIos = true;
-      device.isMobile = true;
-    }
-  }
-  return device;
-};
-
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
 // generators (like Math.random()).
@@ -6189,7 +6306,7 @@ function v4(options, buf, offset) {
 }
 
 const name = "@ekyc_qoobiss/qbs-ect-cmp";
-const version$1 = "3.2.0";
+const version$1 = "3.2.2";
 const description = "Person Identification Component";
 const main = "./dist/index.cjs.js";
 const module = "./dist/index.js";
@@ -6278,10 +6395,10 @@ const IdentificationComponent = class {
     if (state.requestId !== newValue && newValue != '') {
       state.requestId = newValue;
       state.initialised = false;
+      await this.initializeRequest();
       if (state.flowStatus != FlowStatus.LANDING) {
         state.flowStatus = FlowStatus.LANDING;
       }
-      await this.initializeRequest();
     }
   }
   onApiUrlChange(newValue, _oldValue) {
@@ -6325,7 +6442,7 @@ const IdentificationComponent = class {
   }
   agreementAcceptanceEmitted(data) {
     try {
-      this.apiCall.GenerateAgreement(data.detail.agreementType);
+      this.baseComponent.apiCall.GenerateAgreement(data.detail.agreementType);
     }
     catch (e) {
       this.apiErrorEmitter(e, 'Agreement Acceptance');
@@ -6347,7 +6464,7 @@ const IdentificationComponent = class {
     else {
       this.errorTitle = data;
     }
-    await this.apiCall.AddLog(apiLogData, getLogMessage(this.order_id, this.redirect_id, this.token));
+    await this.baseComponent.apiCall.AddLog(apiLogData, getLogMessage(this.order_id, this.redirect_id, this.token));
     Events.flowError(data);
     state.flowStatus = FlowStatus.ERROREND;
   }
@@ -6363,7 +6480,8 @@ const IdentificationComponent = class {
     this.idSide = '';
     this.errorMessage = undefined;
     this.errorTitle = undefined;
-    this.device = initDevice();
+    this.baseComponent = new BaseComponent(null);
+    this.baseComponent.setErrorCallback(this.apiErrorEmitter);
   }
   async componentWillLoad() {
     Events.init(window);
@@ -6390,13 +6508,6 @@ const IdentificationComponent = class {
     if (this.phone_number && this.phone_number != '') {
       state.phoneNumber = this.phone_number;
     }
-    var flowSt = sessionStorage.getItem(SessionKeys.FlowStatusKey);
-    if (flowSt) {
-      state.flowStatus = FlowStatus[flowSt];
-    }
-    else {
-      state.flowStatus = FlowStatus.LANDING;
-    }
     var ini = sessionStorage.getItem(SessionKeys.InitialisedKey);
     if (ini && ini.toLowerCase() == 'true') {
       state.initialised = true;
@@ -6413,17 +6524,18 @@ const IdentificationComponent = class {
     if (phoneVal && phoneVal.toLowerCase() == 'true') {
       state.phoneValidation = true;
     }
+    var flowStatusToSet = null;
     const savedRequest = sessionStorage.getItem(SessionKeys.RequestIdKey);
     if (this.order_id && this.order_id != '') {
+      state.requestId = this.order_id;
       if (state.debug)
         console.log('Current RequestId has value: ' + this.order_id);
       if (savedRequest && savedRequest != '' && savedRequest != this.order_id) {
         if (state.debug)
           console.log('Session RequestId: ' + savedRequest + ' has different value than property one: ' + this.order_id);
-        state.flowStatus = FlowStatus.LANDING;
+        flowStatusToSet = FlowStatus.LANDING;
         state.initialised = false;
       }
-      state.requestId = this.order_id;
     }
     else if (savedRequest) {
       if (state.debug)
@@ -6431,8 +6543,17 @@ const IdentificationComponent = class {
       state.requestId = savedRequest;
       this.order_id = savedRequest;
     }
-    this.apiCall = new ApiCall();
+    if (flowStatusToSet == null) {
+      var flowSt = sessionStorage.getItem(SessionKeys.FlowStatusKey);
+      if (flowSt) {
+        flowStatusToSet = FlowStatus[flowSt];
+      }
+      else {
+        flowStatusToSet = FlowStatus.LANDING;
+      }
+    }
     await this.initializeRequest();
+    state.flowStatus = flowStatusToSet;
   }
   componentWillRender() {
     if (this.idSide == '') {
@@ -6449,16 +6570,16 @@ const IdentificationComponent = class {
     }
     try {
       if (state.debug)
-        this.apiCall.AddLog('init log', this.logInit);
+        this.baseComponent.apiCall.AddLog('init log', this.logInit);
     }
     catch (_a) { }
     try {
-      if (!this.device.isMobile && state.redirectId == '') {
+      if (!state.device.isMobile && state.redirectId == '') {
         state.redirectId = v4();
         this.redirect_id = state.redirectId;
       }
       if (state.token != '' && (state.requestId != '' || state.redirectId != '')) {
-        state.initialised = await this.apiCall.AddIdentificationRequest(this.device, packageJson.version);
+        state.initialised = await this.baseComponent.apiCall.AddIdentificationRequest(state.device, packageJson.version);
         if (!this.order_id || this.order_id == '') {
           this.order_id = state.requestId;
         }
@@ -6471,9 +6592,9 @@ const IdentificationComponent = class {
   }
   render() {
     let currentBlock = h("div", null);
-    if (this.device.isMobile || state.environment == 'DEMO') {
+    if (state.device.isMobile || state.environment == 'DEMO') {
       if (state.flowStatus == FlowStatus.LANDING) {
-        currentBlock = h("landing-validation", { device: this.device });
+        currentBlock = h("landing-validation", null);
       }
     }
     else {
@@ -6492,13 +6613,13 @@ const IdentificationComponent = class {
       currentBlock = h("sms-code-validation", null);
     }
     if (state.flowStatus == FlowStatus.ID && !state.hasIdBack) {
-      currentBlock = h("id-single-side", { id: "idFront", device: this.device });
+      currentBlock = h("id-single-side", { id: "idFront" });
     }
     if (state.flowStatus == FlowStatus.ID && state.hasIdBack) {
-      currentBlock = h("id-double-side", { id: "idFront", device: this.device });
+      currentBlock = h("id-double-side", { id: "idFront" });
     }
     if (state.flowStatus == FlowStatus.LIVENESS) {
-      currentBlock = h("user-liveness", { device: this.device, id: "camera" });
+      currentBlock = h("user-liveness", { id: "camera" });
     }
     if (state.flowStatus == FlowStatus.COMPLETE) {
       currentBlock = h("end-redirect", null);
@@ -6507,7 +6628,7 @@ const IdentificationComponent = class {
       currentBlock = h("error-end", { errorTitle: this.errorTitle, message: this.errorMessage });
     }
     if (state.flowStatus == FlowStatus.CAMERAERROR) {
-      currentBlock = h("camera-error", { device: this.device });
+      currentBlock = h("camera-error", null);
     }
     return h("div", null, currentBlock);
   }
@@ -6526,22 +6647,23 @@ const infoSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSIyOCIgd
 
 const idSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iMzkiIHZpZXdCb3g9IjAgMCA0NiAzOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMjIwNiAxLjc1MTIyQzM0LjM2MDYgMS4yNjg0IDM1LjY4MDYgMS44MDQyIDM2LjE2MjggMi45NDU2M0wzNy4yNzkyIDUuNTg4MDFIMzguODMxTDM3LjQ3OTIgMi4zODgyNEMzNy4wOTY4IDEuNDgzMTYgMzYuMzg1MyAwLjc4MTQ5MyAzNS40NzU5IDAuNDEyMjExQzM0LjU2NjQgMC4wNDI5Mjc2IDMzLjU2NzcgMC4wNTA0OTYxIDMyLjY2MzcgMC40MzMzMzlMMjAuNDkzMiA1LjU4ODE2SDI0LjE2MThMMzMuMjIwNiAxLjc1MTM3VjEuNzUxMjJaTTE2LjY3ODggMTkuNTIwNUMxNy40Mjk1IDE5LjgzODQgMTguMTAzNyAyMC4yOTM0IDE4LjY4MjQgMjAuODcyOUMxOS4yNjEyIDIxLjQ1MjQgMTkuNzE1NSAyMi4xMjcyIDIwLjAzMzEgMjIuODc5QzIwLjM2MjEgMjMuNjU3OCAyMC41Mjg5IDI0LjQ4NDUgMjAuNTI4OSAyNS4zMzYzQzIwLjUyODkgMjUuNzMxNCAyMC4yMDg5IDI2LjA1MTggMTkuODE0MiAyNi4wNTE4QzE5LjQxOTYgMjYuMDUxOCAxOS4wOTk2IDI1LjczMTQgMTkuMDk5NiAyNS4zMzYzQzE5LjA5OTYgMjIuNjQ0OSAxNi45MTI3IDIwLjQ1NTIgMTQuMjI0NiAyMC40NTUyQzExLjUzNjYgMjAuNDU1MiA5LjM0OTY2IDIyLjY0NDkgOS4zNDk2NiAyNS4zMzYzQzkuMzQ5NjYgMjUuNzMxNCA5LjAyOTY2IDI2LjA1MTggOC42MzUwMiAyNi4wNTE4QzguMjQwMzcgMjYuMDUxOCA3LjkyMDM3IDI1LjczMTQgNy45MjAzNyAyNS4zMzYzQzcuOTIwMzcgMjQuNDg0NCA4LjA4NzE0IDIzLjY1NzYgOC40MTYxMiAyMi44NzlDOC43MzM2IDIyLjEyNzQgOS4xODgwOSAyMS40NTI0IDkuNzY2ODMgMjAuODcyOUMxMC4yNzUzIDIwLjM2MzkgMTAuODU3NCAxOS45NTA5IDExLjUwMDQgMTkuNjQyNUMxMS4zMzIgMTkuNTE4MSAxMS4xNzE5IDE5LjM4MDMgMTEuMDIxMyAxOS4yMjk2QzEwLjIzMiAxOC40MzkxIDkuNzk3MjIgMTcuMzg4MyA5Ljc5NzIyIDE2LjI3MDRDOS43OTcyMiAxNS4xNTI1IDEwLjIzMTkgMTQuMTAxNyAxMS4wMjEzIDEzLjMxMTNDMTEuODEwOCAxMi41MjEgMTIuODYwNCAxMi4wODU2IDEzLjk3NjggMTIuMDg1NkMxNS4wOTMxIDEyLjA4NTYgMTYuMTQyNyAxMi41MjA4IDE2LjkzMjIgMTMuMzExM0MxNy43MjE1IDE0LjEwMTcgMTguMTU2MyAxNS4xNTI2IDE4LjE1NjMgMTYuMjcwNEMxOC4xNTYzIDE3LjM4ODIgMTcuNzIxNiAxOC40MzkxIDE2LjkzMjIgMTkuMjI5NkMxNi44MzYzIDE5LjMyNTYgMTYuNzM2NCAxOS40MTYyIDE2LjYzMzMgMTkuNTAxNkwxNi42NTAxIDE5LjUwODVMMTYuNjc4OCAxOS41MjA1Wk0xMS4yMjY1IDE2LjI3MDRDMTEuMjI2NSAxNy43ODg4IDEyLjQ2MDIgMTkuMDI0MSAxMy45NzY4IDE5LjAyNDFDMTUuNDkzMyAxOS4wMjQxIDE2LjcyNyAxNy43ODg4IDE2LjcyNyAxNi4yNzA0QzE2LjcyNyAxNC43NTIgMTUuNDkzMyAxMy41MTY3IDEzLjk3NjggMTMuNTE2N0MxMi40NjAyIDEzLjUxNjcgMTEuMjI2NSAxNC43NTIgMTEuMjI2NSAxNi4yNzA0Wk0yMy45Mzg0IDEyLjA4NTZIMzYuMjA5OUMzNi42MDQ1IDEyLjA4NTYgMzYuOTI0NSAxMi40MDYgMzYuOTI0NSAxMi44MDEyQzM2LjkyNDUgMTMuMTk2MyAzNi42MDQ1IDEzLjUxNjcgMzYuMjA5OSAxMy41MTY3SDIzLjkzODRDMjMuNTQzNyAxMy41MTY3IDIzLjIyMzcgMTMuMTk2MyAyMy4yMjM3IDEyLjgwMTJDMjMuMjIzNyAxMi40MDYgMjMuNTQzNyAxMi4wODU2IDIzLjkzODQgMTIuMDg1NlpNMjMuOTM4NCAxOC4zNTQxSDM2LjIwOTlDMzYuNjA0NSAxOC4zNTQxIDM2LjkyNDUgMTguNjc0NSAzNi45MjQ1IDE5LjA2OTdDMzYuOTI0NSAxOS40NjQ4IDM2LjYwNDUgMTkuNzg1MiAzNi4yMDk5IDE5Ljc4NTJIMjMuOTM4NEMyMy41NDM3IDE5Ljc4NTIgMjMuMjIzNyAxOS40NjQ4IDIzLjIyMzcgMTkuMDY5N0MyMy4yMjM3IDE4LjY3NDUgMjMuNTQzNyAxOC4zNTQxIDIzLjkzODQgMTguMzU0MVpNMzYuMjA5OSAyNC42MjA3SDIzLjkzODRDMjMuNTQzNyAyNC42MjA3IDIzLjIyMzcgMjQuOTQxMSAyMy4yMjM3IDI1LjMzNjNDMjMuMjIzNyAyNS43MzE0IDIzLjU0MzcgMjYuMDUxOCAyMy45Mzg0IDI2LjA1MThIMzYuMjA5OUMzNi42MDQ1IDI2LjA1MTggMzYuOTI0NSAyNS43MzE0IDM2LjkyNDUgMjUuMzM2M0MzNi45MjQ1IDI0Ljk0MTEgMzYuNjA0NSAyNC42MjA3IDM2LjIwOTkgMjQuNjIwN1pNNDIuODQzNiAxNS4wODU2TDQ1LjA3MjMgMjAuMzYwN0w0NS4wNzI2IDIwLjM2MDZDNDUuNDU0OSAyMS4yNjU3IDQ1LjQ2MjUgMjIuMjY1NyA0NS4wOTM3IDIzLjE3NjNDNDQuNzI0OSAyNC4wODY4IDQ0LjAyNDEgMjQuNzk5MiA0My4xMjAxIDI1LjE4MjFMNDIuODQzOSAyNS4yOTkxVjI4LjgyNjhDNDIuODQzOSAyOS44MDk1IDQyLjQ2MTcgMzAuNzMzMyA0MS43Njc3IDMxLjQyODJDNDEuMDczNyAzMi4xMjMxIDQwLjE1MSAzMi41MDU4IDM5LjE2OTYgMzIuNTA1OEgyNS44MjkxTDEzLjMzNjIgMzcuNzk3MUMxMi40MzIyIDM4LjE4IDExLjQzMzUgMzguMTg3NiAxMC41MjQgMzcuODE4M0M5LjYxNDU4IDM3LjQ0OSA4LjkwMzA4IDM2Ljc0NzMgOC41MjA3MiAzNS44NDIyTDcuMTExMTEgMzIuNTA1OUg2LjgzMDQ4QzUuODQ5MDYgMzIuNTA1OSA0LjkyNjM4IDMyLjEyMzIgNC4yMzIzNiAzMS40Mjg0QzMuNTM4MzUgMzAuNzMzNSAzLjE1NjE0IDI5LjgwOTYgMy4xNTYxNCAyOC44MjdWMjMuMTQ0N0wwLjkyNzQ3OSAxNy44Njk2QzAuNTQ1MTE2IDE2Ljk2NDUgMC41Mzc1NTcgMTUuOTY0NSAwLjkwNjM3NiAxNS4wNTM5QzEuMjc1MiAxNC4xNDMzIDEuOTc1OTggMTMuNDMwOSAyLjg3OTkyIDEzLjA0ODFMMy4xNTYxNCAxMi45MzExVjkuMzEyMzdDMy4xNTYxNCA4LjMyOTcyIDMuNTM4MzUgNy40MDU4OCA0LjIzMjM2IDYuNzEwOTlDNC45MjYzOCA2LjAxNjExIDUuODQ5MDYgNS42MzM0MiA2LjgzMDQ4IDUuNjMzNDJIMzkuMTY5M0M0MC4xNTA3IDUuNjMzNDIgNDEuMDczMyA2LjAxNjExIDQxLjc2NzQgNi43MTA5OUM0Mi40NjE0IDcuNDA1ODggNDIuODQzNiA4LjMyOTcyIDQyLjg0MzYgOS4zMTIzN1YxNS4wODU2Wk0yLjI0Mzg2IDE3LjMxMTlMMy4xNTYxNCAxOS40NzEzVjE0LjUwOTNDMi4yMTIzNiAxNS4wNzU3IDEuODAzMDcgMTYuMjY4NyAyLjI0Mzg2IDE3LjMxMTlaTTkuODM2OTQgMzUuMjg0NUMxMC4zMTkxIDM2LjQyNiAxMS42MzkxIDM2Ljk2MTggMTIuNzc5MSAzNi40NzlMMjIuMTYwMyAzMi41MDU2SDguNjYyOTJMOS44MzY5NCAzNS4yODQ1Wk0zOS4xNjk0IDMxLjA3NDVDNDAuNDA3MiAzMS4wNzQ1IDQxLjQxNDMgMzAuMDY2MyA0MS40MTQzIDI4LjgyNjhWOS4zMTIzN0M0MS40MTQzIDguMDcyODYgNDAuNDA3MiA3LjA2NDUxIDM5LjE2OTQgNy4wNjQ1MUg2LjgzMDQ4QzUuNTkyNjggNy4wNjQ1MSA0LjU4NTU5IDguMDcyODYgNC41ODU1OSA5LjMxMjM3VjI4LjgyNjhDNC41ODU1OSAzMC4wNjYyIDUuNTkyNjggMzEuMDc0NSA2LjgzMDQ4IDMxLjA3NDVIMzkuMTY5NFpNNDIuODQzNiAxOC43NTg3VjIzLjcyMDdDNDMuNzg3NCAyMy4xNTQzIDQ0LjE5NjUgMjEuOTYxMyA0My43NTU5IDIwLjkxODFMNDIuODQzNiAxOC43NTg3WiIgZmlsbD0iIzZFNzQ4OCIvPg0KPC9zdmc+DQo=';
 
-const deviceSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCA0NiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8xNF8xNTkyKSI+DQo8cGF0aCBkPSJNMzAuMTU3IDMxLjY1NDNIMy40NzczOEMxLjc3ODc0IDMxLjY1NDMgMC4zOTc3MDUgMzAuMzA4NSAwLjM5NzcwNSAyOC42NTQ5VjI2LjQ2NzJDMC4zOTc3MDUgMjUuOTg5MSAwLjc4ODI1MyAyNS42MDQyIDEuMjcwNTYgMjUuNjA0MkgxNi43NjU0QzE3LjAwMyAyNS42MDQyIDE3LjIyODkgMjUuNjk5OSAxNy4zOTM2IDI1Ljg2NzhMMTguNTIwNSAyNy4wMjdIMjcuMDI1NUMyNy41MDc4IDI3LjAyNyAyNy44OTg0IDI3LjQxMTggMjcuODk4NCAyNy44ODk5QzI3Ljg5ODQgMjguMzY4MSAyNy41MDc4IDI4Ljc1MjkgMjcuMDI1NSAyOC43NTI5SDE4LjE0ODhDMTcuOTExMiAyOC43NTI5IDE3LjY4NTMgMjguNjU3MyAxNy41MjA2IDI4LjQ4OTNMMTYuMzkzNyAyNy4zMzAySDIuMTQzNDFWMjguNjU0OUMyLjE0MzQxIDI5LjM1NyAyLjc0MDk5IDI5LjkyNiAzLjQ3NzM4IDI5LjkyNkgzMC4xNTdDMzAuNjM5MyAyOS45MjYgMzEuMDI5OCAzMC4zMTA5IDMxLjAyOTggMzAuNzg5QzMxLjAyOTggMzEuMjY3MSAzMC42MzkzIDMxLjY1MiAzMC4xNTcgMzEuNjUyVjMxLjY1NDNaTTI5LjkwMDUgMjcuMzMwMkgyOS4yMzQ3QzI4Ljc1MjQgMjcuMzMwMiAyOC4zNjE4IDI2Ljk0NTMgMjguMzYxOCAyNi40NjcyQzI4LjM2MTggMjUuOTg5MSAyOC43NTI0IDI1LjYwNDIgMjkuMjM0NyAyNS42MDQySDI5LjkwMDVDMzAuMzgyOCAyNS42MDQyIDMwLjc3MzQgMjUuOTg5MSAzMC43NzM0IDI2LjQ2NzJDMzAuNzczNCAyNi45NDUzIDMwLjM4MjggMjcuMzMwMiAyOS45MDA1IDI3LjMzMDJaIiBmaWxsPSIjNkU3NDg4Ii8+DQo8cGF0aCBkPSJNMy4zMjIwNyAyNC44MzdDMi44Mzk3NyAyNC44MzcgMi40NDkyMiAyNC40NTIyIDIuNDQ5MjIgMjMuOTc0MVYzLjY3ODE2QzIuNDQ5MjIgMS45Njg1NyAzLjg1Mzc4IDAuNTc2MTcyIDUuNTgwNjYgMC41NzYxNzJINDAuNDE5NEM0Mi4xNDYzIDAuNTc2MTcyIDQzLjU1MDggMS45Njg1NyA0My41NTA4IDMuNjc4MTZWNy4wMzQzOEM0My41NTA4IDcuNTEyNTEgNDMuMTYwMyA3Ljg5OTY3IDQyLjY3OCA3Ljg5OTY3QzQyLjE5NTcgNy44OTk2NyA0MS44MDUxIDcuNTEyNTEgNDEuODA1MSA3LjAzNDM4VjMuNjc4MTZDNDEuODA1MSAyLjkzNDE1IDQxLjE2OTkgMi4zMDQ0MiA0MC40MTk0IDIuMzA0NDJINS41ODA2NkM0LjgzMDE1IDIuMzA0NDIgNC4xOTQ5MiAyLjkzNDE1IDQuMTk0OTIgMy42NzgxNlYyMy45NzQxQzQuMTk0OTIgMjQuNDUyMiAzLjgwNDM3IDI0LjgzNyAzLjMyMjA3IDI0LjgzN1oiIGZpbGw9IiM2RTc0ODgiLz4NCjxwYXRoIGQ9Ik0zOS45NTgyIDUuNTA5MTVIMy4zMjIwN0MyLjgzOTc3IDUuNTA5MTUgMi40NDkyMiA1LjEyMTk4IDIuNDQ5MjIgNC42NDM4NkMyLjQ0OTIyIDQuMTY1NzMgMi44Mzk3NyAzLjc3ODU2IDMuMzIyMDcgMy43Nzg1NkgzOS45NTgyQzQwLjQ0MDUgMy43Nzg1NiA0MC44MzExIDQuMTY1NzMgNDAuODMxMSA0LjY0Mzg2QzQwLjgzMTEgNS4xMjE5OCA0MC40NDA1IDUuNTA5MTUgMzkuOTU4MiA1LjUwOTE1WiIgZmlsbD0iIzZFNzQ4OCIvPg0KPHBhdGggZD0iTTQzLjM5NTYgMzEuNjU0M0gzMy44NTMxQzMyLjY0MzggMzEuNjU0MyAzMS42OTggMzAuNzE2NyAzMS42OTggMjkuNTE3OVYxMC45NTI2QzMxLjY5OCA5Ljc0NjggMzIuNjY1IDguNzY0ODkgMzMuODUzMSA4Ljc2NDg5SDQzLjM5NTZDNDQuNTkwOCA4Ljc2NDg5IDQ1LjYwMjQgOS43Njc3OSA0NS42MDI0IDEwLjk1MjZWMTcuNzY3N0M0NS42MDI0IDE4LjI0NTggNDUuMjExOSAxOC42MzA2IDQ0LjcyOTYgMTguNjMwNkM0NC4yNDczIDE4LjYzMDYgNDMuODU2NyAxOC4yNDU4IDQzLjg1NjcgMTcuNzY3N1YxMC45NTI2QzQzLjg1NjcgMTAuNzE3IDQzLjYzMzIgMTAuNDk1NSA0My4zOTU2IDEwLjQ5NTVIMzMuODUzMUMzMy42Mjk2IDEwLjQ5NTUgMzMuNDQzNyAxMC43MDU0IDMzLjQ0MzcgMTAuOTUyNlYyOS41MTc5QzMzLjQ0MzcgMjkuNzUxMiAzMy42MjAyIDI5LjkyNjEgMzMuODUzMSAyOS45MjYxSDQzLjM5NTZDNDMuNjQ3MyAyOS45MjYxIDQzLjg1NjcgMjkuNzM5NSA0My44NTY3IDI5LjUxNzlWMjAuNjY2N0M0My44NTY3IDIwLjE4ODYgNDQuMjQ3MyAxOS44MDM4IDQ0LjcyOTYgMTkuODAzOEM0NS4yMTE5IDE5LjgwMzggNDUuNjAyNCAyMC4xODg2IDQ1LjYwMjQgMjAuNjY2N1YyOS41MTc5QzQ1LjYwMjQgMzAuNjk1NyA0NC42MTE5IDMxLjY1NDMgNDMuMzk1NiAzMS42NTQzWiIgZmlsbD0iIzZFNzQ4OCIvPg0KPHBhdGggZD0iTTM4LjkzMDIgMjkuMTYxMkgzOC4zMTM4QzM3LjgzMTUgMjkuMTYxMiAzNy40NDA5IDI4Ljc3NjQgMzcuNDQwOSAyOC4yOTgzQzM3LjQ0MDkgMjcuODIwMSAzNy44MzE1IDI3LjQzNTMgMzguMzEzOCAyNy40MzUzSDM4LjkzMDJDMzkuNDEyNSAyNy40MzUzIDM5LjgwMyAyNy44MjAxIDM5LjgwMyAyOC4yOTgzQzM5LjgwMyAyOC43NzY0IDM5LjQxMjUgMjkuMTYxMiAzOC45MzAyIDI5LjE2MTJaIiBmaWxsPSIjNkU3NDg4Ii8+DQo8L2c+DQo8ZGVmcz4NCjxjbGlwUGF0aCBpZD0iY2xpcDBfMTRfMTU5MiI+DQo8cmVjdCB3aWR0aD0iNDUuMjA0NyIgaGVpZ2h0PSIzMS4wNzgyIiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4zOTc3MDUgMC41NzYxNzIpIi8+DQo8L2NsaXBQYXRoPg0KPC9kZWZzPg0KPC9zdmc+DQo=';
-
 const validationSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0MCA0NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8xNF8xNjAxKSI+DQo8cGF0aCBkPSJNMTYuNzUxNCAyOS40MTExTDE2LjcyMjggMjMuMjczMUgxNC45NTk2QzEzLjAyODMgMjMuMjczMSAxMS40NTY1IDIxLjc1MzcgMTEuNDU2NSAxOS44ODY0VjMuOTAwMTNDMTEuNDU2NSAyLjAzMjc5IDEyLjk5MzQgMC41MTM0MjggMTQuODgxOCAwLjUxMzQyOEgzNi4zMTUyQzM4LjIwMzYgMC41MTM0MjggMzkuNzM5NiAyLjAzMjc5IDM5LjczOTYgMy45MDAxM1YxOS44ODY0QzM5LjczOTYgMjEuNzUzNyAzOC4yMDM2IDIzLjI3MzEgMzYuMzE1MiAyMy4yNzMxSDI0LjgwMDZDMjQuNzQxNSAyMy4yNzMxIDI0LjY4NTIgMjMuMjkxMiAyNC42NDIyIDIzLjMyNDZMMTYuNzUxNCAyOS40MTExWk0xNC44ODE4IDIuMTQwMzRDMTMuODgxNyAyLjE0MDM0IDEzLjA2NzYgMi45Mjk0IDEzLjA2NzYgMy45MDAxM1YxOS44ODY0QzEzLjA2NzYgMjAuODU3MSAxMy45MTY2IDIxLjY0NjIgMTQuOTYwNSAyMS42NDYySDE3LjE3OTlDMTcuODEyMyAyMS42NDYyIDE4LjMyODUgMjIuMTU2OCAxOC4zMzEyIDIyLjc4NUwxOC4zNDY0IDI2LjEzMzhMMjMuNjY1NCAyMi4wMzEyQzIzLjk4NzQgMjEuNzgyNyAyNC4zOTA5IDIxLjY0NjIgMjQuODAwNiAyMS42NDYySDM2LjMxNTJDMzcuMzE1MyAyMS42NDYyIDM4LjEyOTQgMjAuODU3MSAzOC4xMjk0IDE5Ljg4NjRWMy45MDAxM0MzOC4xMjk0IDIuOTI5NCAzNy4zMTUzIDIuMTQwMzQgMzYuMzE1MiAyLjE0MDM0SDE0Ljg4MThaIiBmaWxsPSIjNkU3NDg4Ii8+DQo8cGF0aCBkPSJNMTcuNDc2OSA0My43MTcxSDUuMzgxNjhDMi41NTc1OCA0My43MTcxIDAuMjYwMzc2IDQxLjM5NiAwLjI2MDM3NiAzOC41NDI2VjExLjU2NTZDMC4yNjAzNzYgOC43MTIxOCAyLjU1NzU4IDYuMzkxMTEgNS4zODE2OCA2LjM5MTExSDkuNTM4NjZWOC4wMTgwM0g1LjM4MTY4QzMuNDQ1ODcgOC4wMTgwMyAxLjg3MDU3IDkuNjA5NyAxLjg3MDU3IDExLjU2NTZWMzguNTQyNkMxLjg3MDU3IDQwLjQ5ODUgMy40NDU4NyA0Mi4wOTAyIDUuMzgxNjggNDIuMDkwMkgxNy40NzY5QzE5LjQxMjcgNDIuMDkwMiAyMC45ODggNDAuNDk4NSAyMC45ODggMzguNTQyNlYyOC45Mjg0SDIyLjU5ODJWMzguNTQyNkMyMi41OTgyIDQxLjM5NiAyMC4zMDEgNDMuNzE3MSAxNy40NzY5IDQzLjcxNzFaIiBmaWxsPSIjNkU3NDg4Ii8+DQo8cGF0aCBkPSJNOS4zODkzNSAxMS44NDIzSDEuMDY1NTVWMTMuNDY5Mkg5LjM4OTM1VjExLjg0MjNaIiBmaWxsPSIjNkU3NDg4Ii8+DQo8cGF0aCBkPSJNMjEuNzkyMyAzNi45MTMxSDEuMDY1NTVWMzguNTRIMjEuNzkyM1YzNi45MTMxWiIgZmlsbD0iIzZFNzQ4OCIvPg0KPHBhdGggZD0iTTI0LjM4NDMgMTIuN0MyNC4zODQzIDEzLjM3MjMgMjQuOTIxNiAxMy45MzExIDI1LjU5ODUgMTMuOTMxMUMyNi4yNzU0IDEzLjkzMTEgMjYuODEyNyAxMy4zNzIzIDI2LjgxMjcgMTIuN0MyNi44MTI3IDEyLjAyNzYgMjYuMjc1NCAxMS40Njg5IDI1LjU5ODUgMTEuNDY4OUMyNC45MjE2IDExLjQ2ODkgMjQuMzg0MyAxMi4wMjc2IDI0LjM4NDMgMTIuN1pNMjUuMjAyNSAxMi43QzI1LjIwMjUgMTIuNDgxOCAyNS4zODAxIDEyLjMwNDEgMjUuNTk4NSAxMi4zMDQxQzI1LjgxNjkgMTIuMzA0MSAyNS45OTQ1IDEyLjQ4MTggMjUuOTk0NSAxMi43QzI1Ljk5NDUgMTIuOTE4MSAyNS44MTY5IDEzLjA5NTggMjUuNTk4NSAxMy4wOTU4QzI1LjM4MDEgMTMuMDk1OCAyNS4yMDI1IDEyLjkxODEgMjUuMjAyNSAxMi43WiIgZmlsbD0iIzZFNzQ4OCIgc3Ryb2tlPSIjNkU3NDg4IiBzdHJva2Utd2lkdGg9IjAuNzQ0ODkxIi8+DQo8cGF0aCBkPSJNMzAuMjQwMSAxMi43QzMwLjI0MDEgMTMuMzcyMyAzMC43Nzc0IDEzLjkzMTEgMzEuNDU0MyAxMy45MzExQzMyLjEzMTIgMTMuOTMxMSAzMi42Njg1IDEzLjM3MjMgMzIuNjY4NSAxMi43QzMyLjY2ODUgMTIuMDI3NiAzMi4xMzEyIDExLjQ2ODkgMzEuNDU0MyAxMS40Njg5QzMwLjc3NzQgMTEuNDY4OSAzMC4yNDAxIDEyLjAyNzYgMzAuMjQwMSAxMi43Wk0zMS4wNTgzIDEyLjdDMzEuMDU4MyAxMi40ODE4IDMxLjIzNTkgMTIuMzA0MSAzMS40NTQzIDEyLjMwNDFDMzEuNjcyNyAxMi4zMDQxIDMxLjg1MDMgMTIuNDgxOCAzMS44NTAzIDEyLjdDMzEuODUwMyAxMi45MTgxIDMxLjY3MjcgMTMuMDk1OCAzMS40NTQzIDEzLjA5NThDMzEuMjM1OSAxMy4wOTU4IDMxLjA1ODMgMTIuOTE4MSAzMS4wNTgzIDEyLjdaIiBmaWxsPSIjNkU3NDg4IiBzdHJva2U9IiM2RTc0ODgiIHN0cm9rZS13aWR0aD0iMC43NDQ4OTEiLz4NCjxwYXRoIGQ9Ik0xOC41Mjg2IDEyLjdDMTguNTI4NiAxMy4zNzIzIDE5LjA2NTkgMTMuOTMxMSAxOS43NDI4IDEzLjkzMTFDMjAuNDE5NyAxMy45MzExIDIwLjk1NyAxMy4zNzIzIDIwLjk1NyAxMi43QzIwLjk1NyAxMi4wMjc2IDIwLjQxOTcgMTEuNDY4OSAxOS43NDI4IDExLjQ2ODlDMTkuMDY1OSAxMS40Njg5IDE4LjUyODYgMTIuMDI3NiAxOC41Mjg2IDEyLjdaTTE5LjM0NjggMTIuN0MxOS4zNDY4IDEyLjQ4MTggMTkuNTI0NCAxMi4zMDQxIDE5Ljc0MjggMTIuMzA0MUMxOS45NjEyIDEyLjMwNDEgMjAuMTM4NyAxMi40ODE4IDIwLjEzODcgMTIuN0MyMC4xMzg3IDEyLjkxODEgMTkuOTYxMiAxMy4wOTU4IDE5Ljc0MjggMTMuMDk1OEMxOS41MjQ0IDEzLjA5NTggMTkuMzQ2OCAxMi45MTgxIDE5LjM0NjggMTIuN1oiIGZpbGw9IiM2RTc0ODgiIHN0cm9rZT0iIzZFNzQ4OCIgc3Ryb2tlLXdpZHRoPSIwLjc0NDg5MSIvPg0KPC9nPg0KPGRlZnM+DQo8Y2xpcFBhdGggaWQ9ImNsaXAwXzE0XzE2MDEiPg0KPHJlY3Qgd2lkdGg9IjM5LjQ3OTIiIGhlaWdodD0iNDMuMjAzNyIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMjYwMzc2IDAuNTEzNDI4KSIvPg0KPC9jbGlwUGF0aD4NCjwvZGVmcz4NCjwvc3ZnPg0K';
 
+const deviceSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCA0NiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8xNF8xNTkyKSI+DQo8cGF0aCBkPSJNMzAuMTU3IDMxLjY1NDNIMy40NzczOEMxLjc3ODc0IDMxLjY1NDMgMC4zOTc3MDUgMzAuMzA4NSAwLjM5NzcwNSAyOC42NTQ5VjI2LjQ2NzJDMC4zOTc3MDUgMjUuOTg5MSAwLjc4ODI1MyAyNS42MDQyIDEuMjcwNTYgMjUuNjA0MkgxNi43NjU0QzE3LjAwMyAyNS42MDQyIDE3LjIyODkgMjUuNjk5OSAxNy4zOTM2IDI1Ljg2NzhMMTguNTIwNSAyNy4wMjdIMjcuMDI1NUMyNy41MDc4IDI3LjAyNyAyNy44OTg0IDI3LjQxMTggMjcuODk4NCAyNy44ODk5QzI3Ljg5ODQgMjguMzY4MSAyNy41MDc4IDI4Ljc1MjkgMjcuMDI1NSAyOC43NTI5SDE4LjE0ODhDMTcuOTExMiAyOC43NTI5IDE3LjY4NTMgMjguNjU3MyAxNy41MjA2IDI4LjQ4OTNMMTYuMzkzNyAyNy4zMzAySDIuMTQzNDFWMjguNjU0OUMyLjE0MzQxIDI5LjM1NyAyLjc0MDk5IDI5LjkyNiAzLjQ3NzM4IDI5LjkyNkgzMC4xNTdDMzAuNjM5MyAyOS45MjYgMzEuMDI5OCAzMC4zMTA5IDMxLjAyOTggMzAuNzg5QzMxLjAyOTggMzEuMjY3MSAzMC42MzkzIDMxLjY1MiAzMC4xNTcgMzEuNjUyVjMxLjY1NDNaTTI5LjkwMDUgMjcuMzMwMkgyOS4yMzQ3QzI4Ljc1MjQgMjcuMzMwMiAyOC4zNjE4IDI2Ljk0NTMgMjguMzYxOCAyNi40NjcyQzI4LjM2MTggMjUuOTg5MSAyOC43NTI0IDI1LjYwNDIgMjkuMjM0NyAyNS42MDQySDI5LjkwMDVDMzAuMzgyOCAyNS42MDQyIDMwLjc3MzQgMjUuOTg5MSAzMC43NzM0IDI2LjQ2NzJDMzAuNzczNCAyNi45NDUzIDMwLjM4MjggMjcuMzMwMiAyOS45MDA1IDI3LjMzMDJaIiBmaWxsPSIjNkU3NDg4Ii8+DQo8cGF0aCBkPSJNMy4zMjIwNyAyNC44MzdDMi44Mzk3NyAyNC44MzcgMi40NDkyMiAyNC40NTIyIDIuNDQ5MjIgMjMuOTc0MVYzLjY3ODE2QzIuNDQ5MjIgMS45Njg1NyAzLjg1Mzc4IDAuNTc2MTcyIDUuNTgwNjYgMC41NzYxNzJINDAuNDE5NEM0Mi4xNDYzIDAuNTc2MTcyIDQzLjU1MDggMS45Njg1NyA0My41NTA4IDMuNjc4MTZWNy4wMzQzOEM0My41NTA4IDcuNTEyNTEgNDMuMTYwMyA3Ljg5OTY3IDQyLjY3OCA3Ljg5OTY3QzQyLjE5NTcgNy44OTk2NyA0MS44MDUxIDcuNTEyNTEgNDEuODA1MSA3LjAzNDM4VjMuNjc4MTZDNDEuODA1MSAyLjkzNDE1IDQxLjE2OTkgMi4zMDQ0MiA0MC40MTk0IDIuMzA0NDJINS41ODA2NkM0LjgzMDE1IDIuMzA0NDIgNC4xOTQ5MiAyLjkzNDE1IDQuMTk0OTIgMy42NzgxNlYyMy45NzQxQzQuMTk0OTIgMjQuNDUyMiAzLjgwNDM3IDI0LjgzNyAzLjMyMjA3IDI0LjgzN1oiIGZpbGw9IiM2RTc0ODgiLz4NCjxwYXRoIGQ9Ik0zOS45NTgyIDUuNTA5MTVIMy4zMjIwN0MyLjgzOTc3IDUuNTA5MTUgMi40NDkyMiA1LjEyMTk4IDIuNDQ5MjIgNC42NDM4NkMyLjQ0OTIyIDQuMTY1NzMgMi44Mzk3NyAzLjc3ODU2IDMuMzIyMDcgMy43Nzg1NkgzOS45NTgyQzQwLjQ0MDUgMy43Nzg1NiA0MC44MzExIDQuMTY1NzMgNDAuODMxMSA0LjY0Mzg2QzQwLjgzMTEgNS4xMjE5OCA0MC40NDA1IDUuNTA5MTUgMzkuOTU4MiA1LjUwOTE1WiIgZmlsbD0iIzZFNzQ4OCIvPg0KPHBhdGggZD0iTTQzLjM5NTYgMzEuNjU0M0gzMy44NTMxQzMyLjY0MzggMzEuNjU0MyAzMS42OTggMzAuNzE2NyAzMS42OTggMjkuNTE3OVYxMC45NTI2QzMxLjY5OCA5Ljc0NjggMzIuNjY1IDguNzY0ODkgMzMuODUzMSA4Ljc2NDg5SDQzLjM5NTZDNDQuNTkwOCA4Ljc2NDg5IDQ1LjYwMjQgOS43Njc3OSA0NS42MDI0IDEwLjk1MjZWMTcuNzY3N0M0NS42MDI0IDE4LjI0NTggNDUuMjExOSAxOC42MzA2IDQ0LjcyOTYgMTguNjMwNkM0NC4yNDczIDE4LjYzMDYgNDMuODU2NyAxOC4yNDU4IDQzLjg1NjcgMTcuNzY3N1YxMC45NTI2QzQzLjg1NjcgMTAuNzE3IDQzLjYzMzIgMTAuNDk1NSA0My4zOTU2IDEwLjQ5NTVIMzMuODUzMUMzMy42Mjk2IDEwLjQ5NTUgMzMuNDQzNyAxMC43MDU0IDMzLjQ0MzcgMTAuOTUyNlYyOS41MTc5QzMzLjQ0MzcgMjkuNzUxMiAzMy42MjAyIDI5LjkyNjEgMzMuODUzMSAyOS45MjYxSDQzLjM5NTZDNDMuNjQ3MyAyOS45MjYxIDQzLjg1NjcgMjkuNzM5NSA0My44NTY3IDI5LjUxNzlWMjAuNjY2N0M0My44NTY3IDIwLjE4ODYgNDQuMjQ3MyAxOS44MDM4IDQ0LjcyOTYgMTkuODAzOEM0NS4yMTE5IDE5LjgwMzggNDUuNjAyNCAyMC4xODg2IDQ1LjYwMjQgMjAuNjY2N1YyOS41MTc5QzQ1LjYwMjQgMzAuNjk1NyA0NC42MTE5IDMxLjY1NDMgNDMuMzk1NiAzMS42NTQzWiIgZmlsbD0iIzZFNzQ4OCIvPg0KPHBhdGggZD0iTTM4LjkzMDIgMjkuMTYxMkgzOC4zMTM4QzM3LjgzMTUgMjkuMTYxMiAzNy40NDA5IDI4Ljc3NjQgMzcuNDQwOSAyOC4yOTgzQzM3LjQ0MDkgMjcuODIwMSAzNy44MzE1IDI3LjQzNTMgMzguMzEzOCAyNy40MzUzSDM4LjkzMDJDMzkuNDEyNSAyNy40MzUzIDM5LjgwMyAyNy44MjAxIDM5LjgwMyAyOC4yOTgzQzM5LjgwMyAyOC43NzY0IDM5LjQxMjUgMjkuMTYxMiAzOC45MzAyIDI5LjE2MTJaIiBmaWxsPSIjNkU3NDg4Ii8+DQo8L2c+DQo8ZGVmcz4NCjxjbGlwUGF0aCBpZD0iY2xpcDBfMTRfMTU5MiI+DQo8cmVjdCB3aWR0aD0iNDUuMjA0NyIgaGVpZ2h0PSIzMS4wNzgyIiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4zOTc3MDUgMC41NzYxNzIpIi8+DQo8L2NsaXBQYXRoPg0KPC9kZWZzPg0KPC9zdmc+DQo=';
+
 const landingValidationCss = "";
 
 const LandingValidation = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.apiErrorEvent = createEvent(this, "apiError", 7);
-    this.device = undefined;
     this.warningText = undefined;
     this.buttonDisabled = undefined;
+    this.baseComponent = new BaseComponent(FlowSteps.Landing);
+    this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   async componentWillLoad() {
-    this.apiCall = new ApiCall();
+    this.baseComponent.apiCall = new ApiCall();
     this.buttonDisabled = false;
     await this.initRequest();
   }
@@ -6549,12 +6671,7 @@ const LandingValidation = class {
     Events.init(window);
     Events.flowStarted();
     if (state.environment !== 'DEMO') {
-      try {
-        await this.apiCall.AddStep(FlowSteps.Landing);
-      }
-      catch (e) {
-        this.apiErrorEvent.emit(e);
-      }
+      await this.baseComponent.initialize();
     }
   }
   async initRequest() {
@@ -6572,8 +6689,9 @@ const LandingValidation = class {
         state.flowStatus = FlowStatus.COMPLETE;
         return;
       }
-      if (!(await Cameras.InitCameras(this.device))) {
-        if (this.device.isIos)
+      await this.baseComponent.finalize();
+      if (!(await Cameras.InitCameras(state.device))) {
+        if (state.device.mobileOS == MobileOS.iOS)
           sessionStorage.setItem(SessionKeys.RefreshDoneKey, 'false');
         state.flowStatus = FlowStatus.CAMERAERROR;
       }
@@ -6593,7 +6711,8 @@ const LandingValidation = class {
       return;
     state.initialised = false;
     try {
-      await this.apiCall.AbortRequest();
+      await this.baseComponent.apiCall.AbortRequest();
+      await this.baseComponent.finalize();
       Events.flowAborted();
     }
     catch (e) {
@@ -9495,7 +9614,8 @@ const MobileRedirect = class {
     this.redirectLink = undefined;
     this.qrCode = undefined;
     this.prefilledPhone = false;
-    this.apiCall = new ApiCall();
+    this.baseComponent = new BaseComponent(FlowSteps.MobileRedirect);
+    this.baseComponent.setEventEmitter(this.apiErrorEvent);
     this.invalidValue = false;
     this.waitingMobile = false;
   }
@@ -9519,12 +9639,7 @@ const MobileRedirect = class {
   async componentDidLoad() {
     Events.init(window);
     Events.flowStarted();
-    try {
-      await this.apiCall.AddStep(FlowSteps.MobileRedirect);
-    }
-    catch (e) {
-      this.apiErrorEvent.emit(e);
-    }
+    await this.baseComponent.initialize();
     await delay(5000);
     await this.checkStatus();
     while (this.orderStatus == OrderStatuses.Capturing || this.orderStatus == OrderStatuses.Waiting) {
@@ -9533,9 +9648,10 @@ const MobileRedirect = class {
     }
   }
   async checkStatus() {
-    this.orderStatus = await this.apiCall.GetStatus(state.requestId);
+    this.orderStatus = await this.baseComponent.apiCall.GetStatus(state.requestId);
     if (this.orderStatus == OrderStatuses.FinishedCapturing) {
       this.waitingMobile = false;
+      await this.baseComponent.finalize();
       state.flowStatus = FlowStatus.COMPLETE;
     }
     if (this.orderStatus == OrderStatuses.NotFound) {
@@ -9558,7 +9674,7 @@ const MobileRedirect = class {
     this.waitingMobile = true;
     this.infoTextTop = MobileRedirectValues.InfoWaiting;
     try {
-      await this.apiCall.SendLink(this.redirectLink, this.contact);
+      await this.baseComponent.apiCall.SendLink(this.redirectLink, this.contact);
     }
     catch (e) {
       this.apiErrorEvent.emit(e);
@@ -9590,7 +9706,6 @@ const SelfieCapture = class {
       //this.closeCamera();
       this.eventPhotoCapture.emit(photos);
     };
-    this.device = undefined;
     this.videoStarted = undefined;
     this.captureTaken = undefined;
     this.verified = undefined;
@@ -9643,7 +9758,7 @@ const SelfieCapture = class {
     this.openCamera();
   }
   async openCamera() {
-    const constraints = this.cameras.GetConstraints('', this.device, true);
+    const constraints = this.cameras.GetConstraints('', state.device, true);
     setTimeout(() => {
       navigator.mediaDevices
         .getUserMedia(constraints)
@@ -9687,7 +9802,7 @@ const SelfieCapture = class {
   }
   render() {
     let cameraStyle;
-    if (this.device.isMobile && this.videoStarted) {
+    if (state.device.isMobile && this.videoStarted) {
       cameraStyle = {
         'width': this.captureWidth + 'px',
         'height': this.captureHeight + 'px',
@@ -9700,7 +9815,7 @@ const SelfieCapture = class {
     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)))));
   }
   get component() { return getElement(this); }
 };
@@ -9719,13 +9834,20 @@ const SmsCodeValidation = class {
     this.code = undefined;
     this.prefilledPhone = false;
     this.canSend = false;
-    this.apiCall = new ApiCall();
+    if (state.flowStatus == FlowStatus.PHONE) {
+      this.baseComponent = new BaseComponent(FlowSteps.OtpSend);
+    }
+    if (state.flowStatus == FlowStatus.CODE) {
+      this.baseComponent = new BaseComponent(FlowSteps.OtpCheck);
+    }
+    this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   async doAction() {
     try {
       this.canSend = false;
+      await this.baseComponent.finalize();
       if (state.flowStatus == FlowStatus.CODE || state.flowStatus == FlowStatus.CODEERROR) {
-        var codeChecked = await this.apiCall.CheckOTPCode(state.requestId, this.code);
+        var codeChecked = await this.baseComponent.apiCall.CheckOTPCode(state.requestId, this.code);
         if (codeChecked === true) {
           state.flowStatus = FlowStatus.ID;
         }
@@ -9734,7 +9856,7 @@ const SmsCodeValidation = class {
         }
       }
       if (state.flowStatus == FlowStatus.PHONE) {
-        var codeSent = await this.apiCall.SendOTPCode(state.requestId, this.phoneNumber);
+        var codeSent = await this.baseComponent.apiCall.SendOTPCode(state.requestId, this.phoneNumber);
         if (codeSent === true) {
           state.flowStatus = FlowStatus.CODE;
         }
@@ -9762,17 +9884,7 @@ const SmsCodeValidation = class {
     }
   }
   async componentDidLoad() {
-    try {
-      if (state.flowStatus == FlowStatus.PHONE) {
-        await this.apiCall.AddStep(FlowSteps.OtpSend);
-      }
-      if (state.flowStatus == FlowStatus.CODE) {
-        await this.apiCall.AddStep(FlowSteps.OtpCheck);
-      }
-    }
-    catch (e) {
-      this.apiErrorEvent.emit(e);
-    }
+    await this.baseComponent.initialize();
   }
   handleChangePhone(ev) {
     let value = ev.target ? ev.target.value : '';
@@ -9813,7 +9925,6 @@ const UserLiveness = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.apiErrorEvent = createEvent(this, "apiError", 7);
-    this.device = undefined;
     this.showError = undefined;
     this.showHowTo = undefined;
     this.selfieFlow = {
@@ -9823,15 +9934,11 @@ const UserLiveness = class {
       photoFile: null,
       recordingFile: null,
     };
-    this.apiCall = new ApiCall();
+    this.baseComponent = new BaseComponent(FlowSteps.Selfie);
+    this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   async componentDidLoad() {
-    try {
-      await this.apiCall.AddStep(FlowSteps.Selfie);
-    }
-    catch (e) {
-      this.apiErrorEvent.emit(e);
-    }
+    await this.baseComponent.initialize();
   }
   componentWillLoad() {
     this.showHowTo = true;
@@ -9852,7 +9959,7 @@ const UserLiveness = class {
   async captureSelfieImage(event) {
     let selfiePhoto = event.detail;
     if (selfiePhoto.length == 0 || selfiePhoto.size == 0) {
-      await this.apiCall.AddLog({ message: 'Empty selfie', blobData: selfiePhoto }, getLogMessage());
+      await this.baseComponent.apiCall.AddLog({ message: 'Empty selfie', blobData: selfiePhoto }, getLogMessage());
       return;
     }
     try {
@@ -9866,7 +9973,7 @@ const UserLiveness = class {
   async capturedSelfieRecording(event) {
     let selfieRecording = event.detail;
     if (selfieRecording.length == 0 || selfieRecording.size == 0) {
-      await this.apiCall.AddLog({ message: 'Empty recording', blobData: selfieRecording }, getLogMessage());
+      await this.baseComponent.apiCall.AddLog({ message: 'Empty recording', blobData: selfieRecording }, getLogMessage());
       return;
     }
     let mimeType = selfieRecording.type == Stream.mp4MimeType.type ? Stream.mp4MimeType : Stream.webmMimeType;
@@ -9875,42 +9982,49 @@ const UserLiveness = class {
       await this.uploadRecording();
     }
     catch (e) {
-      this.apiErrorEvent.emit(e);
+      if (state.recordingRetryCount < 3) {
+        state.recordingRetryCount++;
+        this.triggerErrorFlow();
+      }
+      else {
+        this.apiErrorEvent.emit(e);
+      }
     }
   }
   async verificationFinished(_event) {
     this.selfieFlow.verificationFinished = true;
-    this.endFlow();
+    await this.endFlow();
   }
   async uploadPhoto() {
     if (this.selfieFlow.photoFile == null || this.selfieFlow.photoDone) {
       return;
     }
-    this.selfieFlow.photoDone = await this.apiCall.UploadFileForRequestB64(state.requestId, 'Selfie', this.selfieFlow.photoFile);
+    this.selfieFlow.photoDone = await this.baseComponent.apiCall.UploadFileForRequestB64(state.requestId, 'Selfie', this.selfieFlow.photoFile);
     if (this.selfieFlow.photoDone) {
-      this.endFlow();
+      await this.endFlow();
     }
     else {
-      this.selfieFlow.photoFile = null;
-      this.selfieFlow.recordingFile = null;
-      this.showError = true;
+      this.triggerErrorFlow();
     }
   }
   async uploadRecording() {
     if (this.selfieFlow.recordingFile == null || this.selfieFlow.recordingDone) {
       return;
     }
-    this.selfieFlow.recordingDone = await this.apiCall.UploadFileForRequestB64(state.requestId, 'SelfieVideo', this.selfieFlow.recordingFile);
+    this.selfieFlow.recordingDone = await this.baseComponent.apiCall.UploadFileForRequestB64(state.requestId, 'SelfieVideo', this.selfieFlow.recordingFile);
     if (this.selfieFlow.recordingDone) {
-      this.endFlow();
+      await this.endFlow();
     }
     else {
-      this.selfieFlow.photoFile = null;
-      this.selfieFlow.recordingFile = null;
-      this.showError = true;
+      this.triggerErrorFlow();
     }
   }
-  endFlow() {
+  triggerErrorFlow() {
+    this.selfieFlow.photoFile = null;
+    this.selfieFlow.recordingFile = null;
+    this.showError = true;
+  }
+  async endFlow() {
     if (!this.selfieFlow.photoDone) {
       return;
     }
@@ -9920,11 +10034,13 @@ const UserLiveness = class {
     if (!this.selfieFlow.verificationFinished) {
       return;
     }
+    state.recordingRetryCount = 0;
+    await this.baseComponent.finalize();
     state.flowStatus = FlowStatus.COMPLETE;
   }
   render() {
     let howTo = h("how-to-info", { idSide: "" });
-    let capture = h("selfie-capture", { device: this.device, id: "camera" });
+    let capture = h("selfie-capture", { id: "camera" });
     let error = h("capture-error", { type: "LIVENESS" });
     return this.showHowTo ? howTo : this.showError ? error : capture;
   }