@ekyc_qoobiss/qbs-ect-cmp 3.6.39 → 3.6.41

package/dist/esm/{agreement-check_19.entry.js → agreement-check_17.entry.js}

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cf54a432.js';
-import { A as ApiCall, s as state, F as FlowMoments, a as FlowSteps, T as Translations, b as FlowStatus, S as SessionKeys, I as IdCaptureValues, O as OrderStatuses, c as SelfieCaptureValues } from './TranslationUtils-7e68bc94.js';
+import { A as ApiCall, s as state, F as FlowMoments, a as FlowSteps, T as Translations, S as SessionKeys, b as FlowStatus, I as IdCaptureValues, O as OrderStatuses, c as SelfieCaptureValues } from './TranslationUtils-741a728a.js';
 
 var MobileOS;
 (function (MobileOS) {
@@ -290,11 +290,11 @@ const AgreementInfo = class {
   }
   async buttonClick() {
     if (this.agreementsChecked && this.termsChecked) {
-      if (state.phoneValidation) {
-        state.flowStatus = FlowStatus.PHONE;
+      try {
+        state.flowStatus = await this.baseComponent.apiCall.GetNextFlowState();
       }
-      else {
-        state.flowStatus = FlowStatus.ID;
+      catch (e) {
+        this.apiErrorEvent.emit(e);
       }
     }
   }
@@ -1625,7 +1625,7 @@ class ML5 {
   }
   async init() {
     return new Promise(async (resolve) => {
-      const modelPath = state.hasIdBack ? 'https://ekyc.blob.core.windows.net/$web/md/model.json' : 'https://ekyc.blob.core.windows.net/$web/model.json';
+      const modelPath = state.apiBaseUrl.includes("apimd") ? 'https://ekyc.blob.core.windows.net/$web/md/model.json' : 'https://ekyc.blob.core.windows.net/$web/model.json';
       this.classifier = await ml5.imageClassifier(modelPath, this.loaded);
       this.faceapi = await ml5.faceApi({ withLandmarks: true, withDescriptors: false }, this.loaded);
       //warmup
@@ -4516,24 +4516,12 @@ class Stream {
     this.idDetection = val;
     this.faceDetection = !val;
   }
-  // public setProbabilityThreshold(val: number): void {
-  //   Detector.getInstance().setProbabilityThreshold(val);
-  // }
-  setCallbackChangeTitle(fun) {
-    this.callbackChangeTitle = fun;
-  }
   setCallbackVideoStarted(fun) {
     this.callbackVideoStarted = fun;
   }
-  setCallbackErrors(fun) {
-    this.callbackErrors = fun;
-  }
   setCallbackAutoCapturing(fun) {
     this.callbackAutoCapturing = fun;
   }
-  // public setCallbackFaceDetectionErrors(fun: (e: PipelineResult) => void): void {
-  //   this.callbackFaceDetectionErrors = fun;
-  // }
   setCallbackRecordingReady(fun) {
     this.callbackRecordingReady = fun;
   }
@@ -4547,13 +4535,6 @@ class Stream {
     this.streamPaused = false;
     this.recordedChunks = [];
     this.videoSize = { width: 0, height: 0 };
-    this.pauseStream = () => {
-      this.streamPaused = true;
-      this.mediaRecorder.pause();
-      this.videoElement.pause();
-      // this.dropMask();
-      // if (this.faceDetection) Detector.getInstance().stopDetector();
-    };
     this.initFacePose();
     this.idML5Detector = IDML5Detector.getInstance(this, state.device.isMobile);
     this.faceML5Detector = FaceML5Detector.getInstance(this, state.device.isMobile);
@@ -4565,9 +4546,6 @@ class Stream {
     }
     return Stream.instance;
   }
-  // public returnErrors(errors: PipelineResult) {
-  //   this.callbackFaceDetectionErrors(errors);
-  // }
   autoCapturing() {
     this.callbackAutoCapturing();
   }
@@ -4583,7 +4561,6 @@ class Stream {
     this.idML5Detector.updateHtmlElements(this.videoElement, this.canvasElement, component);
     this.faceML5Detector.updateHtmlElements(this.videoElement, this.canvasElement, component);
   }
-  static orientationChange() { }
   startStream(stream) {
     if (this.stream)
       this.stream.getTracks().forEach((track) => track.stop());
@@ -4615,13 +4592,6 @@ class Stream {
     this.startStream(stream);
     this.recordStream();
   }
-  async resumeStream() {
-    this.streamPaused = false;
-    this.mediaRecorder.resume();
-    await this.videoElement.play();
-    // this.drawMask();
-    // if (this.faceDetection) await Detector.getInstance().startDetector();
-  }
   recordStream() {
     if (this.mediaRecorder && this.mediaRecorder.state == 'recording')
       return;
@@ -4661,7 +4631,6 @@ class Stream {
     if (this.mediaRecorder && this.mediaRecorder.state != 'inactive') {
       this.mediaRecorder.stop();
     }
-    // if (this.faceDetection) Detector.getInstance().stopDetector();
   }
   streamStopped() {
     return !(this.stream && this.stream.getTracks && this.stream.getTracks().length > 0);
@@ -4684,15 +4653,13 @@ class Stream {
           }
           catch (e) {
             resolve(frame);
-            this.callbackErrors(e, false);
+            this.timeElapsed();
           }
         }
         else {
           resolve(frame);
         }
       }, ImageFormat.PNG, 1);
-      //let outCanvContext = this.canvasElement.getContext('2d');
-      //outCanvContext.drawImage(this.videoElement, 0, 0, this.canvasElement.width, this.canvasElement.height);
     });
   }
   async startIdDetection() {
@@ -4708,22 +4675,9 @@ class Stream {
   initFacePose() {
     this.facePose = FacePosePick.randomEnum(FacePose);
   }
-  requestFacePose() {
-    // var pose = FacePose.TiltLeft;
-    this.callbackChangeTitle(this.facePose);
-    return this.facePose;
-  }
-  changeFacePose() {
-    this.callbackChangeTitle(null);
-  }
-  changeIDPose(pose) {
-    this.callbackChangeTitle(pose);
-  }
 }
 Stream.mp4MimeType = { type: 'video/mp4', codec: 'codecs:h264', extension: 'mp4', mime: 'video/mp4;codecs:h264' };
-Stream.webmMimeType = { type: 'video/webm', codec: 'codecs=vp8', extension: 'webm', mime: 'video/webm;codecs=vp8' };
-window.addEventListener('resize', Stream.orientationChange, false);
-window.addEventListener('orientationchange', Stream.orientationChange, false);
+Stream.webmMimeType = { type: 'video/webm', codec: 'codecs=vp8', extension: 'webm', mime: 'video/webm;codecs=vp8' };
 
 const cameraCss = ".camera{width:100%;height:100%;color:white;display:flex;align-items:center;justify-content:center;position:relative}.cameraCanvas,.cameraCanvasSelfie,.cameraCanvasSelfieDesk{z-index:3;max-width:100%;max-height:100%;border-radius:10px}.cameraCanvasSelfie,.cameraCanvasSelfieDesk{transform:scale(-1, 1);-webkit-transform:scale(-1, 1)}.cameraVideo,.cameraVideoSelfie,.cameraVideoSelfieDesk{z-index:2;position:absolute;max-width:100%;max-height:100%;border-radius:10px}.cameraVideoSelfie,.cameraVideoSelfieDesk{transform:scale(-1, 1);-webkit-transform:scale(-1, 1)}.cameraMobile{position:fixed;top:0;left:0;background:black}";
 
@@ -4731,23 +4685,11 @@ const Camera = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.eventVideoStarted = createEvent(this, "videoStarted", 7);
-    this.eventCloseCamera = createEvent(this, "closeCamera", 7);
-    this.errorCameraEvent = createEvent(this, "errorCamera", 7);
     this.eventTakePhoto = createEvent(this, "takePhoto", 7);
     this.eventRecordingSelfieReady = createEvent(this, "recordingSelfieCapture", 7);
     this.eventRecordingIdReady = createEvent(this, "recordingIdCapture", 7);
     this.eventTimeElapsed = createEvent(this, "timeElapsed", 7);
-    this.eventChangeTitle = createEvent(this, "changeTitle", 7);
     this.verificationFinished = createEvent(this, "verificationFinished", 7);
-    this.callbackErrors = (error, isError) => {
-      if (isError) {
-        this.errorCameraEvent.emit(error);
-        this.eventCloseCamera.emit();
-      }
-      else {
-        this.errorCameraEvent.emit(error);
-      }
-    };
     this.callbackAutoCapturing = () => {
       this.eventTakePhoto.emit();
     };
@@ -4763,9 +4705,6 @@ const Camera = class {
     this.callbackTimeElapsed = () => {
       this.eventTimeElapsed.emit();
     };
-    this.callbackChangeTitle = (message) => {
-      this.eventChangeTitle.emit(message);
-    };
     this.callbackVideoStarted = () => {
       this.eventVideoStarted.emit(this.component.getBoundingClientRect());
     };
@@ -4793,8 +4732,7 @@ const Camera = class {
     return (h("div", { class: "camera" }, h("video", { id: "video", loop: true, autoplay: true, playsinline: true, muted: true, class: cameraVideoClass, ref: el => (this.cameraVideo = el) }), h("canvas", { id: "output", class: cameraCanvasClass, ref: el => (this.cameraCanvas = el) })));
   }
   startStream() {
-    var captureMode = this.captureMode == 'tilt' ? VerificationMode.Tilt : VerificationMode.Full;
-    const stream = Stream.getNewInstance(captureMode);
+    const stream = Stream.instance;
     stream.updateHtmlElements(this.cameraVideo, this.cameraCanvas, this.component);
     if (this.captureMode == 'selfie') {
       stream.setFaceDetection(true);
@@ -4808,9 +4746,7 @@ const Camera = class {
       stream.setCallbackRecordingReady(this.callbackIdRecordingReady);
       // stream.setShowMask(false);
     }
-    stream.setCallbackErrors(this.callbackErrors);
     stream.setCallbackAutoCapturing(this.callbackAutoCapturing);
-    stream.setCallbackChangeTitle(this.callbackChangeTitle);
     stream.setCallbackVideoStarted(this.callbackVideoStarted);
     stream.setCallbackTimeElapsed(this.callbackTimeElapsed);
     stream.setVerificationFinished(this.callbackVerificationFinished);
@@ -4959,7 +4895,7 @@ ErrorEnd.style = errorEndCss;
 const howToInfoCss = "";
 
 const HowToInfo = class {
-  constructor(hostRef) { registerInstance(this, hostRef); this.eventHowToInfoDone = createEvent(this, "howToInfoDone", 7); this.apiErrorEvent = createEvent(this, "apiError", 7); this.idSide = undefined; this.topTitle = undefined; this.subTitle = undefined; this.imagePath = undefined; this.buttonText = undefined; this.buttonEnabled = undefined; }
+  constructor(hostRef) { registerInstance(this, hostRef); this.eventHowToInfoDone = createEvent(this, "howToInfoDone", 7); this.apiErrorEvent = createEvent(this, "apiError", 7); this.topTitle = undefined; this.subTitle = undefined; this.imagePath = undefined; this.buttonText = undefined; this.buttonEnabled = undefined; }
   async componentDidLoad() {
     await this.baseComponent.initialize();
   }
@@ -4974,18 +4910,16 @@ const HowToInfo = class {
     this.translations = await Translations.getValues();
     this.subTitle = '';
     this.buttonEnabled = true;
-    if (state.flowStatus == FlowStatus.ID) {
-      this.topTitle = this.translations.HowToValues.IdTitile;
-      this.imagePath = 'https://ekyc.blob.core.windows.net/$web/howto_id.png';
-      this.buttonText = this.translations.HowToValues.IdButton;
-      if (this.idSide == 'front') {
-        this.baseComponent = new BaseComponent(FlowSteps.CiFrontHowTo);
-        this.subTitle = this.translations.HowToValues.IdSubTitileFace;
-      }
-      if (this.idSide == 'back') {
-        this.baseComponent = new BaseComponent(FlowSteps.CiBackHowTo);
-        this.subTitle = this.translations.HowToValues.IdSubTitileBack;
-      }
+    this.topTitle = this.translations.HowToValues.IdTitile;
+    this.imagePath = 'https://ekyc.blob.core.windows.net/$web/howto_id.png';
+    this.buttonText = this.translations.HowToValues.IdButton;
+    if (state.flowStatus == FlowStatus.IDFRONT) {
+      this.baseComponent = new BaseComponent(FlowSteps.CiFrontHowTo);
+      this.subTitle = this.translations.HowToValues.IdSubTitileFace;
+    }
+    else if (state.flowStatus == FlowStatus.IDBACK) {
+      this.baseComponent = new BaseComponent(FlowSteps.CiBackHowTo);
+      this.subTitle = this.translations.HowToValues.IdSubTitileBack;
     }
     if (state.flowStatus == FlowStatus.LIVENESS) {
       this.baseComponent = new BaseComponent(FlowSteps.SelfieHowTo);
@@ -5140,128 +5074,6 @@ var IDPose;
   IDPose[IDPose["BackTilted"] = 4] = "BackTilted";
 })(IDPose || (IDPose = {}));
 
-const idBackCaptureCss = ".logo{max-height:450px;max-width:450px}.canvas-on-video{max-width:100%;max-height:100%;position:absolute;z-index:2;transform:scale(-1, 1)}";
-
-const IdBackCapture = class {
-  // @State() private animationPath: string;
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.eventPhotoCapture = createEvent(this, "photoIdBackCapture", 7);
-    this.apiErrorEvent = createEvent(this, "apiError", 7);
-    this.eventTimeElapsed = createEvent(this, "timeElapsed", 7);
-    this.photoIsReady = photos => {
-      //this.closeCamera();
-      this.eventPhotoCapture.emit(photos);
-    };
-    this.videoStarted = undefined;
-    this.cameraSize = undefined;
-    this.captureTaken = undefined;
-    this.verified = undefined;
-    this.titleMesage = undefined;
-    this.showDemo = undefined;
-    this.demoVideo = undefined;
-    this.captureTaken = false;
-    this.verified = false;
-    this.cameras = new Cameras();
-    this.showDemo = true;
-    this.baseComponent = new BaseComponent(FlowSteps.CiBackCapture);
-  }
-  eventVideoStarted(event) {
-    this.videoStarted = true;
-    this.cameraSize = event.detail;
-  }
-  async componentWillLoad() {
-    this.translations = await Translations.getValues();
-    //this.videoDemoStyle = this.device.isMobile ? { width: window.screen.width + 'px', height: window.screen.height + 'px', 'object-fit': 'fill' } : {};
-    if (!navigator.mediaDevices) {
-      this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
-    }
-  }
-  async componentDidLoad() {
-    await this.baseComponent.logStep(FlowSteps.CiBackCapture, FlowMoments.Initialized);
-    this.titleMesage = this.translations.IdCaptureValues.TtileRotate;
-    this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Rotate];
-    this.demoVideo.play();
-    await delay(this.translations.GlobalValues.VideoLenght);
-    this.titleMesage = this.translations.IdCaptureValues.TitleBack;
-    this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.BackStraight];
-    this.demoVideo.play();
-    await delay(this.translations.GlobalValues.VideoLenght);
-    this.showDemo = false;
-    this.openCamera();
-  }
-  async openCamera() {
-    const constraints = this.cameras.GetConstraints(state.cameraId, state.device);
-    setTimeout(() => {
-      navigator.mediaDevices
-        .getUserMedia(constraints)
-        .then(stream => {
-        const superStream = Stream.getNewInstance(VerificationMode.Full);
-        superStream.initStream(stream);
-      })
-        .catch(e => {
-        this.closeCamera();
-        this.apiErrorEvent.emit(e);
-      });
-    }, 100);
-  }
-  closeCamera() {
-    if (Stream.instance) {
-      Stream.instance.dropStream();
-    }
-  }
-  disconnectedCallback() {
-    this.closeCamera();
-    Stream.instance = null;
-    IDML5Detector.instance = null;
-    FaceML5Detector.instance = null;
-  }
-  async verificationFinished() {
-    if (this.verified)
-      return;
-    this.verified = true;
-    this.titleMesage = this.translations.IdCaptureValues.Loading;
-    this.closeCamera();
-    this.showDemo = true;
-    var loops = 0;
-    this.demoVideo.src = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_id.mp4';
-    this.demoVideo.loop = false;
-    while (loops < 7) {
-      loops++;
-      this.demoVideo.play();
-      await delay(this.translations.GlobalValues.VideoLenght);
-    }
-    this.eventTimeElapsed.emit();
-  }
-  async takePhoto() {
-    if (this.captureTaken)
-      return;
-    this.captureTaken = true;
-    if (Stream.instance) {
-      let res = await Stream.instance.takePhoto();
-      this.photoIsReady(res);
-    }
-    else {
-      this.eventTimeElapsed.emit();
-    }
-    await this.baseComponent.logStep(FlowSteps.CiBackCapture, FlowMoments.Finalized);
-  }
-  render() {
-    let cameraStyle;
-    let cameraStyleInner;
-    if (this.videoStarted) {
-      cameraStyle = { width: Math.round(this.cameraSize.width) + 'px', height: Math.round((this.cameraSize.width * 9) / 16) + 'px', overflow: 'hidden', borderRadius: '10px' };
-      cameraStyleInner = { marginTop: Math.round((this.cameraSize.height - (this.cameraSize.width * 9) / 16) / 2) * -1 + 'px' };
-    }
-    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", { "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" }, this.translations.GlobalValues.FooterText)))));
-  }
-  get component() { return getElement(this); }
-};
-IdBackCapture.style = idBackCaptureCss;
-
 const idCaptureCss = ".logo{max-height:450px;max-width:450px}.canvas-on-video{max-width:100%;max-height:100%;position:absolute;z-index:2;transform:scale(-1, 1)}";
 
 const IdCapture = class {
@@ -5271,8 +5083,7 @@ const IdCapture = class {
     this.eventPhotoCapture = createEvent(this, "photoIdCapture", 7);
     this.apiErrorEvent = createEvent(this, "apiError", 7);
     this.eventTimeElapsed = createEvent(this, "timeElapsed", 7);
-    this.photoIsReady = photos => {
-      //this.closeCamera();
+    this.photoIsReady = (photos) => {
       this.eventPhotoCapture.emit(photos);
     };
     this.videoStarted = undefined;
@@ -5286,7 +5097,6 @@ const IdCapture = class {
     this.verified = false;
     this.cameras = new Cameras();
     this.showDemo = true;
-    this.baseComponent = new BaseComponent(FlowSteps.CiFrontCapture);
   }
   eventVideoStarted(event) {
     this.videoStarted = true;
@@ -5294,138 +5104,41 @@ const IdCapture = class {
   }
   async componentWillLoad() {
     this.translations = await Translations.getValues();
-    this.titleMesage = this.translations.IdCaptureValues.Title;
-    //this.videoDemoStyle = this.device.isMobile ? { 'width': window.screen.width + 'px', 'height': window.screen.height + 'px', 'object-fit': 'fill' } : {};
     if (!navigator.mediaDevices) {
       this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
     }
+    this.baseComponent = new BaseComponent(this.flowStep);
   }
-  async componentDidLoad() {
-    await this.baseComponent.logStep(FlowSteps.CiFrontCapture, FlowMoments.Initialized);
-    this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Straight];
-    this.demoVideo.play();
-    await delay(this.translations.GlobalValues.VideoLenght);
-    this.showDemo = false;
-    this.openCamera();
-  }
-  async openCamera() {
-    const constraints = this.cameras.GetConstraints(state.cameraId, state.device);
-    setTimeout(() => {
-      navigator.mediaDevices
-        .getUserMedia(constraints)
-        .then(stream => {
-        const superStream = Stream.getNewInstance(VerificationMode.Full);
-        superStream.initStream(stream);
-      })
-        .catch(e => {
-        this.closeCamera();
-        this.apiErrorEvent.emit(e);
-      });
-    }, 100);
-  }
-  closeCamera() {
-    if (Stream.instance) {
-      Stream.instance.dropStream();
+  initVariables() {
+    if (state.flowStatus == FlowStatus.IDFRONT) {
+      this.pose = IDPose.Straight;
+      this.flowStep = FlowSteps.CiFrontCapture;
+      this.titleMesage = this.translations.IdCaptureValues.Title;
+      this.verificationMode = VerificationMode.Full;
     }
-  }
-  disconnectedCallback() {
-    this.closeCamera();
-    Stream.instance = null;
-    IDML5Detector.instance = null;
-    FaceML5Detector.instance = null;
-  }
-  async takePhoto() {
-    if (this.captureTaken)
-      return;
-    this.captureTaken = true;
-    if (Stream.instance) {
-      let res = await Stream.instance.takePhoto();
-      this.photoIsReady(res);
+    else if (state.flowStatus == FlowStatus.IDBACK) {
+      this.pose = IDPose.BackStraight;
+      this.flowStep = FlowSteps.CiBackCapture;
+      this.titleMesage = this.translations.IdCaptureValues.TtileRotate;
+      this.verificationMode = VerificationMode.Full;
     }
-    else {
-      this.eventTimeElapsed.emit();
+    else if (state.flowStatus == FlowStatus.IDTILT) {
+      this.titleMesage = this.translations.IdCaptureValues.IDPoseMapping;
+      this.pose = IDPose.Tilted;
+      this.flowStep = FlowSteps.CiTilt;
+      this.verificationMode = VerificationMode.Tilt;
     }
-    await this.baseComponent.logStep(FlowSteps.CiFrontCapture, FlowMoments.Finalized);
   }
-  async verificationFinished() {
-    if (this.verified)
-      return;
-    this.verified = true;
-    this.titleMesage = this.translations.IdCaptureValues.Loading;
-    this.closeCamera();
-    this.showDemo = true;
-    var loops = 0;
-    this.demoVideo.src = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_id.mp4';
-    this.demoVideo.loop = false;
-    while (loops < 7) {
-      loops++;
+  async componentDidLoad() {
+    await this.baseComponent.logStep(this.flowStep, FlowMoments.Initialized);
+    this.initVariables();
+    if (state.flowStatus == FlowStatus.IDBACK) {
+      this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Rotate];
       this.demoVideo.play();
       await delay(this.translations.GlobalValues.VideoLenght);
+      this.titleMesage = this.translations.IdCaptureValues.TitleBack;
     }
-    this.eventTimeElapsed.emit();
-  }
-  render() {
-    let cameraStyle;
-    let cameraStyleInner;
-    if (this.videoStarted) {
-      cameraStyle = {
-        width: Math.round(this.cameraSize.width) + 'px',
-        height: Math.round((this.cameraSize.width * 9) / 16) + 'px',
-        overflow: 'hidden',
-        borderRadius: '10px',
-      };
-      cameraStyleInner = { marginTop: Math.round((this.cameraSize.height - (this.cameraSize.width * 9) / 16) / 2) * -1 + 'px' };
-    }
-    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", { "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" }, this.translations.GlobalValues.FooterText)))));
-  }
-  get component() { return getElement(this); }
-};
-IdCapture.style = idCaptureCss;
-
-const idTiltCss = ".logo{max-height:450px;max-width:450px}.canvas-on-video{max-width:100%;max-height:100%;position:absolute;z-index:2;transform:scale(-1, 1)}";
-
-const IdTilt = class {
-  // @State() private animationPath: string;
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.eventPhotoCapture = createEvent(this, "photoTiltCapture", 7);
-    this.apiErrorEvent = createEvent(this, "apiError", 7);
-    this.eventTimeElapsed = createEvent(this, "timeElapsed", 7);
-    this.photoIsReady = photos => {
-      //this.closeCamera();
-      this.eventPhotoCapture.emit(photos);
-    };
-    this.videoStarted = undefined;
-    this.cameraSize = undefined;
-    this.captureTaken = undefined;
-    this.verified = undefined;
-    this.titleMesage = undefined;
-    this.showDemo = undefined;
-    this.demoVideo = undefined;
-    this.captureTaken = false;
-    this.verified = false;
-    this.cameras = new Cameras();
-    this.showDemo = true;
-    this.baseComponent = new BaseComponent(FlowSteps.CiTilt);
-  }
-  eventVideoStarted(event) {
-    this.videoStarted = true;
-    this.cameraSize = event.detail;
-  }
-  async componentWillLoad() {
-    this.translations = await Translations.getValues();
-    this.titleMesage = this.translations.IdCaptureValues.IDPoseMapping;
-    //this.videoDemoStyle = this.device.isMobile ? { 'width': window.screen.width + 'px', 'height': window.screen.height + 'px', 'object-fit': 'fill' } : {};
-    if (!navigator.mediaDevices) {
-      this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
-    }
-  }
-  async componentDidLoad() {
-    await this.baseComponent.logStep(FlowSteps.CiTilt, FlowMoments.Initialized);
-    this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Tilted];
+    this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[this.pose];
     this.demoVideo.play();
     await delay(this.translations.GlobalValues.VideoLenght);
     this.showDemo = false;
@@ -5437,7 +5150,7 @@ const IdTilt = class {
       navigator.mediaDevices
         .getUserMedia(constraints)
         .then(stream => {
-        const superStream = Stream.getNewInstance(VerificationMode.Tilt);
+        const superStream = Stream.getNewInstance(this.verificationMode);
         superStream.initStream(stream);
       })
         .catch(e => {
@@ -5468,7 +5181,7 @@ const IdTilt = class {
     else {
       this.eventTimeElapsed.emit();
     }
-    await this.baseComponent.logStep(FlowSteps.CiTilt, FlowMoments.Finalized);
+    await this.baseComponent.logStep(this.flowStep, FlowMoments.Finalized);
   }
   async verificationFinished() {
     if (this.verified)
@@ -5476,15 +5189,11 @@ const IdTilt = class {
     this.verified = true;
     this.titleMesage = this.translations.IdCaptureValues.Loading;
     this.closeCamera();
-    this.showDemo = true;
-    var loops = 0;
     this.demoVideo.src = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_id.mp4';
-    this.demoVideo.loop = false;
-    while (loops < 7) {
-      loops++;
-      this.demoVideo.play();
-      await delay(this.translations.GlobalValues.VideoLenght);
-    }
+    this.demoVideo.loop = true;
+    this.showDemo = true;
+    this.demoVideo.play();
+    await delay(10000);
     this.eventTimeElapsed.emit();
   }
   render() {
@@ -5500,13 +5209,12 @@ const IdTilt = class {
       cameraStyleInner = { marginTop: Math.round((this.cameraSize.height - (this.cameraSize.width * 9) / 16) / 2) * -1 + 'px' };
     }
     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", { "capture-mode": "tilt" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText)))));
+    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.showDemo == false }, h("video", { id: "howTo", 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" }, this.translations.GlobalValues.FooterText)))));
   }
   get component() { return getElement(this); }
 };
-IdTilt.style = idTiltCss;
+IdCapture.style = idCaptureCss;
 
 // 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
@@ -5574,7 +5282,7 @@ function v4(options, buf, offset) {
 }
 
 const name = "@ekyc_qoobiss/qbs-ect-cmp";
-const version$1 = "3.6.39";
+const version$1 = "3.6.41";
 const description = "Person Identification Component";
 const main = "./dist/index.cjs.js";
 const module = "./dist/index.js";
@@ -5696,6 +5404,7 @@ const IdentificationComponent = class {
     registerInstance(this, hostRef);
     this.logInit = {};
     this.flowStatusToSet = FlowStatus.NONE;
+    this.initialised = false;
     this.token = undefined;
     this.order_id = undefined;
     this.api_url = undefined;
@@ -5703,7 +5412,6 @@ const IdentificationComponent = class {
     this.redirect_id = undefined;
     this.phone_number = undefined;
     this.lang_iso = undefined;
-    this.idSide = '';
     this.errorMessage = undefined;
     this.errorTitle = undefined;
   }
@@ -5738,33 +5446,14 @@ const IdentificationComponent = class {
     if (this.lang_iso && this.lang_iso != '') {
       state.langIso = this.lang_iso;
     }
-    var ini = sessionStorage.getItem(SessionKeys.InitialisedKey);
-    if (ini && ini.toLowerCase() == 'true') {
-      state.initialised = true;
-    }
-    var hasIdBk = sessionStorage.getItem(SessionKeys.HasIdBackKey);
-    if (hasIdBk && hasIdBk.toLowerCase() == 'true') {
-      state.hasIdBack = true;
-    }
-    var agrVal = sessionStorage.getItem(SessionKeys.AgreementValidationKey);
-    if (agrVal && agrVal.toLowerCase() == 'true') {
-      state.agreementsValidation = true;
-    }
-    var phoneVal = sessionStorage.getItem(SessionKeys.PhoneValidationKey);
-    if (phoneVal && phoneVal.toLowerCase() == 'true') {
-      state.phoneValidation = true;
-    }
     const savedRequest = sessionStorage.getItem(SessionKeys.RequestIdKey);
+    if (savedRequest && savedRequest != '' && savedRequest != this.order_id && state.debug) {
+      console.log('Session RequestId: ' + savedRequest + ' has different value than property one: ' + this.order_id);
+    }
     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);
-        this.flowStatusToSet = FlowStatus.LANDING;
-        state.initialised = false;
-      }
     }
     else if (savedRequest) {
       if (state.debug)
@@ -5786,17 +5475,12 @@ const IdentificationComponent = class {
     await this.initializeRequest();
     state.flowStatus = this.flowStatusToSet;
   }
-  componentWillRender() {
-    if (this.idSide == '') {
-      this.idSide = state.hasIdBack ? 'front' : '';
-    }
-  }
   async initializeRequest() {
-    if (state.initialised) {
+    if (this.initialised) {
       return;
     }
+    this.initialised = true;
     if (state.environment == 'DEMO') {
-      state.initialised = true;
       return;
     }
     if (state.device.browser == Browser.Mi) {
@@ -5814,7 +5498,7 @@ const IdentificationComponent = class {
         this.redirect_id = state.redirectId;
       }
       if (state.token != '' && (state.requestId != '' || state.redirectId != '')) {
-        state.initialised = await this.baseComponent.apiCall.AddIdentificationRequest(state.device, packageJson.version);
+        await this.baseComponent.apiCall.AddIdentificationRequest(state.device, packageJson.version);
         if (!this.order_id || this.order_id == '') {
           this.order_id = state.requestId;
         }
@@ -5830,19 +5514,17 @@ const IdentificationComponent = class {
   }
   render() {
     let currentBlock = (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: "div-ci align-center" }, h("img", { src: loaderSvg })))));
-    if (state.device.isMobile || state.environment == 'DEMO') {
-      if (state.flowStatus == FlowStatus.LANDING) {
-        currentBlock = h("landing-validation", null);
-      }
+    if (state.flowStatus == FlowStatus.LANDING) {
+      currentBlock = h("landing-validation", null);
     }
-    else if (state.flowStatus != FlowStatus.NONE) {
+    if (state.flowStatus == FlowStatus.MOBILE) {
       currentBlock = h("mobile-redirect", null);
     }
     if (state.flowStatus == FlowStatus.AGREEMENT) {
       currentBlock = h("agreement-info", null);
     }
     if (state.flowStatus == FlowStatus.PHONE) {
-      currentBlock = h("sms-code-validation", null);
+      currentBlock = h("sms-send", null);
     }
     if (state.flowStatus == FlowStatus.CODE) {
       currentBlock = h("sms-code-validation", null);
@@ -5850,11 +5532,11 @@ const IdentificationComponent = class {
     if (state.flowStatus == FlowStatus.CODEERROR) {
       currentBlock = h("sms-code-validation", null);
     }
-    if (state.flowStatus == FlowStatus.ID) {
+    if (state.flowStatus in [FlowStatus.IDFRONT, FlowStatus.IDBACK, FlowStatus.IDTILT]) {
       currentBlock = h("process-id", null);
     }
-    if (state.flowStatus == FlowStatus.LIVENESS) {
-      currentBlock = h("user-liveness", { id: "camera" });
+    if (state.flowStatus in [FlowStatus.LIVENESS, FlowStatus.LIVENESSGESTURE]) {
+      currentBlock = h("user-liveness", null);
     }
     if (state.flowStatus == FlowStatus.COMPLETE) {
       currentBlock = h("end-redirect", null);
@@ -5905,33 +5587,25 @@ const LandingValidation = class {
     }
   }
   async initRequest() {
-    if (state.hasIdBack) {
-      this.warningText = this.translations.LandingValues.WarningMd;
-    }
-    else {
-      this.warningText = this.translations.LandingValues.Warning;
-    }
+    this.warningText = this.translations.LandingValues.Warning;
   }
   async startFlow() {
-    if (state.initialised) {
+    if (!this.buttonDisabled) {
       this.buttonDisabled = true;
       if (state.environment === 'DEMO') {
         state.flowStatus = FlowStatus.COMPLETE;
         return;
       }
-      if (!(await Cameras.InitCameras(state.device))) {
+      var cameraIsAccessible = await Cameras.InitCameras(state.device);
+      if (!cameraIsAccessible) {
         if (state.device.mobileOS == MobileOS.iOS)
           sessionStorage.setItem(SessionKeys.RefreshDoneKey, 'false');
-        state.flowStatus = FlowStatus.CAMERAERROR;
-      }
-      else if (state.agreementsValidation) {
-        state.flowStatus = FlowStatus.AGREEMENT;
       }
-      else if (state.phoneValidation) {
-        state.flowStatus = FlowStatus.PHONE;
+      try {
+        state.flowStatus = await this.baseComponent.apiCall.LandingValidationStartFlow(cameraIsAccessible);
       }
-      else {
-        state.flowStatus = FlowStatus.ID;
+      catch (e) {
+        this.apiErrorEvent.emit(e);
       }
     }
   }
@@ -5941,9 +5615,9 @@ const LandingValidation = class {
   async leaveFlow() {
     if (this.buttonDisabled)
       return;
-    state.initialised = false;
     try {
-      await this.baseComponent.apiCall.AbortRequest();
+      let abortResult = await this.baseComponent.apiCall.AbortRequest();
+      state.flowStatus = FlowStatus[abortResult.state];
       Events.flowAborted();
     }
     catch (e) {
@@ -5952,7 +5626,7 @@ const LandingValidation = class {
     }
   }
   render() {
-    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", { class: "text-center" }, this.translations.LandingValues.Title), h("div", { class: "d-flex space-between align-center" }, h("p", { class: "main-text font-size-2" }, this.translations.LandingValues.Description), h("div", { class: "img-info" }, h("div", { class: "i-effect" }), h("img", { src: infoSvg })))), h("div", { class: "info-container" }, h("div", { class: "img-text" }, h("div", { class: "bg-img" }, h("img", { src: idSvg })), h("h3", null, this.translations.LandingValues.IdInfo)), h("div", { class: "img-text" }, h("div", { class: "bg-img" }, h("img", { src: deviceSvg })), h("h3", null, this.translations.LandingValues.DeviceInfo)), h("div", { class: "img-text" }, h("div", { class: "bg-img" }, h("img", { src: validationSvg })), h("h3", null, this.translations.LandingValues.SmsInfo))), h("div", { class: "terms-container" }, h("h3", { class: "font-size-2 mb-1 text-center" }, this.warningText)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", type: "button", disabled: !state.initialised || this.buttonDisabled, onClick: () => this.startFlow() }, this.translations.LandingValues.Button), h("p", { class: "main-text font-size-2 link-text mb-0", onClick: () => this.leaveFlow() }, this.translations.LandingValues.ButtonLeave), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", { class: "text-center" }, this.translations.LandingValues.Title), h("div", { class: "d-flex space-between align-center" }, h("p", { class: "main-text font-size-2" }, this.translations.LandingValues.Description), h("div", { class: "img-info" }, h("div", { class: "i-effect" }), h("img", { src: infoSvg })))), h("div", { class: "info-container" }, h("div", { class: "img-text" }, h("div", { class: "bg-img" }, h("img", { src: idSvg })), h("h3", null, this.translations.LandingValues.IdInfo)), h("div", { class: "img-text" }, h("div", { class: "bg-img" }, h("img", { src: deviceSvg })), h("h3", null, this.translations.LandingValues.DeviceInfo)), h("div", { class: "img-text" }, h("div", { class: "bg-img" }, h("img", { src: validationSvg })), h("h3", null, this.translations.LandingValues.SmsInfo))), h("div", { class: "terms-container" }, h("h3", { class: "font-size-2 mb-1 text-center" }, this.warningText)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", type: "button", disabled: this.buttonDisabled, onClick: () => this.startFlow() }, this.translations.LandingValues.Button), h("p", { class: "main-text font-size-2 link-text mb-0", onClick: () => this.leaveFlow() }, this.translations.LandingValues.ButtonLeave), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
   }
 };
 LandingValidation.style = landingValidationCss;
@@ -8856,7 +8530,7 @@ const MobileRedirect = class {
     this.infoTextTop = this.translations.MobileRedirectValues.InfoTop;
     this.infoTextBottom = this.translations.MobileRedirectValues.InfoBottom;
     let envUri = state.environment == 'QA' ? 'test' : 'ect';
-    let baseUri = state.hasIdBack ? 'https://onmd.id-kyc.com/' : 'https://onro.id-kyc.com/';
+    let baseUri = state.apiBaseUrl.includes("apimd") ? 'https://onmd.id-kyc.com/' : 'https://onro.id-kyc.com/';
     this.redirectLink = baseUri + envUri + '/mobileredirect?redirectId=' + state.redirectId;
     if (state.phoneNumber && state.phoneNumber != '') {
       this.contact = state.phoneNumber;
@@ -8939,23 +8613,7 @@ var CaptureUploadTypes;
   CaptureUploadTypes["SelfieGestureVideo"] = "SelfieGestureVideo";
   CaptureUploadTypes["TiltVideo"] = "TiltVideo";
   CaptureUploadTypes["None"] = "None";
-})(CaptureUploadTypes || (CaptureUploadTypes = {}));
-var IdCaptureFlowStatus;
-(function (IdCaptureFlowStatus) {
-  IdCaptureFlowStatus[IdCaptureFlowStatus["HowToFront"] = 0] = "HowToFront";
-  IdCaptureFlowStatus[IdCaptureFlowStatus["IdFront"] = 1] = "IdFront";
-  IdCaptureFlowStatus[IdCaptureFlowStatus["HowToBack"] = 2] = "HowToBack";
-  IdCaptureFlowStatus[IdCaptureFlowStatus["IdBack"] = 3] = "IdBack";
-  IdCaptureFlowStatus[IdCaptureFlowStatus["Tilt"] = 4] = "Tilt";
-  IdCaptureFlowStatus[IdCaptureFlowStatus["End"] = 5] = "End";
-})(IdCaptureFlowStatus || (IdCaptureFlowStatus = {}));
-var SelfieFlowStatus;
-(function (SelfieFlowStatus) {
-  SelfieFlowStatus[SelfieFlowStatus["HowToSelfie"] = 0] = "HowToSelfie";
-  SelfieFlowStatus[SelfieFlowStatus["Selfie"] = 1] = "Selfie";
-  SelfieFlowStatus[SelfieFlowStatus["Gesture"] = 2] = "Gesture";
-  SelfieFlowStatus[SelfieFlowStatus["End"] = 3] = "End";
-})(SelfieFlowStatus || (SelfieFlowStatus = {}));
+})(CaptureUploadTypes || (CaptureUploadTypes = {}));
 
 const processIdCss = "";
 
@@ -8964,7 +8622,6 @@ const ProcessId = class {
     registerInstance(this, hostRef);
     this.apiErrorEvent = createEvent(this, "apiError", 7);
     this.recordingResultCount = 0;
-    this.captureStep = undefined;
     this.showTimeout = undefined;
     this.showInvalid = undefined;
     this.flow = undefined;
@@ -8976,47 +8633,42 @@ const ProcessId = class {
     this.initFlow();
   }
   initFlow() {
-    this.flow = {
-      front: {
-        photoDone: false,
-        recordingDone: false,
-        fileName: 'idImage.png',
-        recName: 'idVideo.',
-        photoType: CaptureUploadTypes.IdFront,
-        recType: CaptureUploadTypes.IdFrontVideo,
-      },
-      back: null,
-      tilt: null,
-    };
-    if (state.hasIdBack) {
-      this.flow.back = {
-        photoDone: false,
-        recordingDone: false,
-        fileName: 'idBackImage.png',
-        recName: 'idBackVideo.',
-        photoType: CaptureUploadTypes.IdBack,
-        recType: CaptureUploadTypes.IdBackVideo,
+    if (state.flowStatus == FlowStatus.IDFRONT) {
+      this.flow = {
+        capture: {
+          fileName: 'idImage.png',
+          recName: 'idVideo.',
+          photoType: CaptureUploadTypes.IdFront,
+          recType: CaptureUploadTypes.IdFrontVideo,
+        },
+        howToDone: false,
+      };
+    }
+    else if (state.flowStatus == FlowStatus.IDBACK) {
+      this.flow = {
+        capture: {
+          fileName: 'idBackImage.png',
+          recName: 'idBackVideo.',
+          photoType: CaptureUploadTypes.IdBack,
+          recType: CaptureUploadTypes.IdBackVideo,
+        },
+        howToDone: false,
       };
     }
-    if (state.hasIdTilt) {
-      this.flow.tilt = {
-        photoDone: true,
-        recordingDone: false,
-        fileName: 'idTiltImage.png',
-        recName: 'idTiltVideo.',
-        photoType: CaptureUploadTypes.None,
-        recType: CaptureUploadTypes.TiltVideo,
+    else if (state.flowStatus == FlowStatus.IDTILT) {
+      this.flow = {
+        capture: {
+          fileName: 'idTiltImage.png',
+          recName: 'idTiltVideo.',
+          photoType: CaptureUploadTypes.None,
+          recType: CaptureUploadTypes.TiltVideo,
+        },
+        howToDone: false,
       };
     }
-    this.captureStep = IdCaptureFlowStatus.HowToFront;
   }
   howToDone() {
-    if (this.captureStep == IdCaptureFlowStatus.HowToFront) {
-      this.captureStep = IdCaptureFlowStatus.IdFront;
-    }
-    if (this.captureStep == IdCaptureFlowStatus.HowToBack) {
-      this.captureStep = IdCaptureFlowStatus.IdBack;
-    }
+    this.flow.howToDone = true;
   }
   timeElapsed() {
     this.showTimeout = true;
@@ -9037,25 +8689,11 @@ const ProcessId = class {
       return;
     }
     try {
-      let frontCapture = new File([idPhoto], this.flow.front.fileName, { type: 'image/png' });
-      this.flow.front.photoDone = await this.uploadPhotos(this.flow.front.photoType, frontCapture);
-      await this.endFlow();
-    }
-    catch (e) {
-      this.apiErrorEvent.emit(e);
-    }
-  }
-  async captureIdBackImage(event) {
-    let idPhoto = event.detail;
-    if (idPhoto.size == 0) {
-      await this.baseComponent.apiCall.AddLog({ message: 'Empty id photo', blobData: idPhoto }, getLogMessage());
-      this.triggerErrorFlow();
-      return;
-    }
-    try {
-      let backCapture = new File([idPhoto], this.flow.back.fileName, { type: 'image/png' });
-      this.flow.back.photoDone = await this.uploadPhotos(this.flow.back.photoType, backCapture);
-      await this.endFlow();
+      let frontCapture = new File([idPhoto], this.flow.capture.fileName, { type: 'image/png' });
+      let uploadPhotoDone = await this.uploadPhotos(this.flow.capture.photoType, frontCapture);
+      if (!uploadPhotoDone) {
+        this.triggerErrorFlow();
+      }
     }
     catch (e) {
       this.apiErrorEvent.emit(e);
@@ -9073,22 +8711,11 @@ const ProcessId = class {
       return;
     }
     let mimeType = idRecording.type == Stream.mp4MimeType.type ? Stream.mp4MimeType : Stream.webmMimeType;
-    if (this.captureStep == IdCaptureFlowStatus.IdFront) {
-      let frontRec = new File([idRecording], this.flow.front.recName + mimeType.extension, { type: mimeType.type });
-      this.flow.front.recordingDone = await this.uploadRecording(this.flow.front.recType, frontRec);
-    }
-    else if (this.captureStep == IdCaptureFlowStatus.IdBack) {
-      let backRec = new File([idRecording], this.flow.back.recName + mimeType.extension, { type: mimeType.type });
-      this.flow.back.recordingDone = await this.uploadRecording(this.flow.back.recType, backRec);
-    }
-    else if (this.captureStep == IdCaptureFlowStatus.Tilt) {
-      let tiltRec = new File([idRecording], this.flow.tilt.recName + mimeType.extension, { type: mimeType.type });
-      this.flow.tilt.recordingDone = await this.uploadRecording(this.flow.tilt.recType, tiltRec);
-    }
-    else {
-      this.triggerErrorFlow(true);
+    let captureRec = new File([idRecording], this.flow.capture.recName + mimeType.extension, { type: mimeType.type });
+    let recordingUploaded = await this.uploadRecording(this.flow.capture.recType, captureRec);
+    if (!recordingUploaded) {
+      this.triggerErrorFlow();
     }
-    await this.endFlow();
     this.recordingResultCount = 0;
   }
   async componentDidLoad() {
@@ -9121,72 +8748,9 @@ const ProcessId = class {
     }
     return false;
   }
-  triggerErrorFlow(restart = false) {
-    if (this.captureStep == IdCaptureFlowStatus.IdBack) {
-      restart = true;
-    }
-    if (restart) {
-      this.initFlow();
-      this.showInvalid = true;
-      return;
-    }
-    if (this.captureStep == IdCaptureFlowStatus.IdFront) {
-      this.flow.front.photoDone = false;
-      this.flow.front.recordingDone = false;
-    }
-    if (this.captureStep == IdCaptureFlowStatus.IdBack) {
-      this.flow.back.photoDone = false;
-      this.flow.back.recordingDone = false;
-    }
-    if (this.captureStep == IdCaptureFlowStatus.Tilt) {
-      this.flow.tilt.photoDone = true;
-      this.flow.tilt.recordingDone = false;
-    }
+  triggerErrorFlow() {
     this.showInvalid = true;
   }
-  async endFlow() {
-    if (this.captureStep == IdCaptureFlowStatus.IdFront) {
-      if (this.flow.front.photoDone && this.flow.front.recordingDone) {
-        if (state.hasIdBack) {
-          this.captureStep = IdCaptureFlowStatus.IdBack;
-        }
-        else if (state.hasIdTilt) {
-          this.captureStep = IdCaptureFlowStatus.Tilt;
-        }
-        else {
-          this.captureStep = IdCaptureFlowStatus.End;
-        }
-      }
-      else {
-        return;
-      }
-    }
-    if (this.captureStep == IdCaptureFlowStatus.IdBack && state.hasIdBack) {
-      if (this.flow.back.photoDone && this.flow.back.recordingDone) {
-        if (state.hasIdTilt) {
-          this.captureStep = IdCaptureFlowStatus.Tilt;
-        }
-        else {
-          this.captureStep = IdCaptureFlowStatus.End;
-        }
-      }
-      else {
-        return;
-      }
-    }
-    if (this.captureStep == IdCaptureFlowStatus.Tilt && state.hasIdTilt) {
-      if (this.flow.tilt.photoDone && this.flow.tilt.recordingDone) {
-        this.captureStep = IdCaptureFlowStatus.End;
-      }
-      else {
-        return;
-      }
-    }
-    if (this.captureStep != IdCaptureFlowStatus.End) {
-      return;
-    }
-    state.flowStatus = FlowStatus.LIVENESS;
-  }
   async disconnectedCallback() {
     await this.baseComponent.finalize();
   }
@@ -9202,30 +8766,17 @@ const ProcessId = class {
   }
   render() {
     let error = h("capture-error", { type: "ID" });
-    let frontCapture = h("id-capture", null);
-    let secondCapture = h("id-back-capture", null);
-    let tiltCapture = h("id-tilt", null);
-    let howToFront = h("how-to-info", { idSide: "front" });
-    let howToBack = h("how-to-info", { idSide: "back" });
+    let capture = h("id-capture", null);
+    let howTo = h("how-to-info", null);
     if (this.showInvalid || this.showTimeout) {
       return error;
     }
-    if (this.captureStep == IdCaptureFlowStatus.HowToFront) {
-      return howToFront;
-    }
-    if (this.captureStep == IdCaptureFlowStatus.HowToBack) {
-      return howToBack;
-    }
-    if (this.captureStep == IdCaptureFlowStatus.IdFront) {
-      return frontCapture;
-    }
-    if (this.captureStep == IdCaptureFlowStatus.IdBack) {
-      return secondCapture;
+    if (state.flowStatus != FlowStatus.IDTILT && this.flow.howToDone) {
+      return howTo;
     }
-    if (this.captureStep == IdCaptureFlowStatus.Tilt) {
-      return tiltCapture;
+    else {
+      return capture;
     }
-    return h("div", null);
   }
 };
 ProcessId.style = processIdCss;
@@ -9233,31 +8784,23 @@ ProcessId.style = processIdCss;
 const selfieCaptureCss = "";
 
 const SelfieCapture = class {
-  // @State() private animationPath: string;
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.eventPhotoCapture = createEvent(this, "photoSelfieCapture", 7);
     this.apiErrorEvent = createEvent(this, "apiError", 7);
     this.eventTimeElapsed = createEvent(this, "timeElapsed", 7);
-    this.photoIsReady = photos => {
-      //this.closeCamera();
-      this.eventPhotoCapture.emit(photos);
-    };
     this.videoStarted = undefined;
     this.captureTaken = undefined;
     this.verified = undefined;
     this.titleMesage = undefined;
     this.demoEnded = undefined;
     this.demoVideo = undefined;
-    this.uploadingLink = undefined;
     this.captureHeight = undefined;
     this.captureWidth = undefined;
     this.captureTaken = false;
     this.verified = false;
     this.cameras = new Cameras();
     this.demoEnded = false;
-    this.uploadingLink = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_selfie.mp4';
-    this.baseComponent = new BaseComponent(FlowSteps.SelfieCapture);
   }
   eventVideoStarted(event) {
     this.videoStarted = true;
@@ -9275,8 +8818,20 @@ const SelfieCapture = class {
     }
   }
   async componentDidLoad() {
-    await this.baseComponent.logStep(FlowSteps.SelfieCapture, FlowMoments.Initialized);
-    this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[FacePose.Main];
+    if (state.flowStatus == FlowStatus.LIVENESS) {
+      this.verificationMode = VerificationMode.Full;
+      this.currentStep = FlowSteps.SelfieCapture;
+      this.mainStream = Stream.getNewInstance(this.verificationMode);
+      this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[FacePose.Main];
+    }
+    else if (state.flowStatus == FlowStatus.LIVENESSGESTURE) {
+      this.verificationMode = VerificationMode.Tilt;
+      this.currentStep = FlowSteps.SelfieTilt;
+      this.mainStream = Stream.getNewInstance(this.verificationMode);
+      this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[this.mainStream.facePose];
+    }
+    this.baseComponent = new BaseComponent(this.currentStep);
+    await this.baseComponent.logStep(this.currentStep, FlowMoments.Initialized);
     this.demoVideo.play();
     await delay(this.translations.GlobalValues.VideoLenght);
     this.demoEnded = true;
@@ -9288,8 +8843,7 @@ const SelfieCapture = class {
       navigator.mediaDevices
         .getUserMedia(constraints)
         .then(stream => {
-        const superStream = Stream.getNewInstance(VerificationMode.Full);
-        superStream.initStream(stream);
+        this.mainStream.initStream(stream);
       })
         .catch(e => {
         this.closeCamera();
@@ -9298,8 +8852,8 @@ const SelfieCapture = class {
     }, 100);
   }
   closeCamera() {
-    if (Stream.instance) {
-      Stream.instance.dropStream();
+    if (this.mainStream) {
+      this.mainStream.dropStream();
     }
   }
   disconnectedCallback() {
@@ -9311,14 +8865,14 @@ const SelfieCapture = class {
     if (this.captureTaken)
       return;
     this.captureTaken = true;
-    if (Stream.instance) {
-      let res = await Stream.instance.takePhoto();
-      this.photoIsReady(res);
+    if (this.mainStream) {
+      let res = await this.mainStream.takePhoto();
+      this.eventPhotoCapture.emit(res);
     }
     else {
       this.eventTimeElapsed.emit();
     }
-    await this.baseComponent.logStep(FlowSteps.SelfieCapture, FlowMoments.Finalized);
+    await this.baseComponent.logStep(this.currentStep, FlowMoments.Finalized);
   }
   async verificationFinished() {
     if (this.verified)
@@ -9327,14 +8881,10 @@ const SelfieCapture = class {
     this.titleMesage = this.translations.SelfieCaptureValues.Loading;
     this.closeCamera();
     this.demoEnded = false;
-    var loops = 0;
-    this.demoVideo.src = this.uploadingLink;
-    this.demoVideo.loop = false;
-    while (loops < 7) {
-      loops++;
-      this.demoVideo.play();
-      await delay(this.translations.GlobalValues.VideoLenght);
-    }
+    this.demoVideo.src = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_selfie.mp4';
+    this.demoVideo.loop = true;
+    this.demoVideo.play();
+    await delay(10000);
     this.eventTimeElapsed.emit();
   }
   render() {
@@ -9358,169 +8908,79 @@ const SelfieCapture = class {
 };
 SelfieCapture.style = selfieCaptureCss;
 
-const selfieTiltCss = "";
+const smsCodeValidationCss = "";
 
-const SelfieTilt = class {
-  // @State() private animationPath: string;
+const SmsCodeValidation = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.eventPhotoCapture = createEvent(this, "photoSelfieTiltCapture", 7);
     this.apiErrorEvent = createEvent(this, "apiError", 7);
-    this.eventTimeElapsed = createEvent(this, "timeElapsed", 7);
-    this.photoIsReady = photos => {
-      //this.closeCamera();
-      this.eventPhotoCapture.emit(photos);
-    };
-    this.videoStarted = undefined;
-    this.captureTaken = undefined;
-    this.verified = undefined;
-    this.titleMesage = undefined;
-    this.demoEnded = undefined;
-    this.demoVideo = undefined;
-    this.uploadingLink = undefined;
-    this.captureHeight = undefined;
-    this.captureWidth = undefined;
-    this.captureTaken = false;
-    this.verified = false;
-    this.cameras = new Cameras();
-    this.demoEnded = false;
-    this.uploadingLink = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_selfie.mp4';
-    this.baseComponent = new BaseComponent(FlowSteps.SelfieTilt);
-  }
-  eventVideoStarted(event) {
-    this.videoStarted = true;
-    var cameraSize = event.detail;
-    var height = Math.round((cameraSize.width * 16) / 9);
-    this.captureHeight = height - Math.round((window.screen.height - height) / 2);
-    this.captureWidth = Math.round((this.captureHeight * 9) / 16);
+    this.title = undefined;
+    this.details = undefined;
+    this.buttonText = undefined;
+    this.code = undefined;
+    this.canSend = false;
+    this.baseComponent = new BaseComponent(FlowSteps.OtpCheck);
+    this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
-  async componentWillLoad() {
-    this.translations = await Translations.getValues();
-    this.titleMesage = this.translations.SelfieCaptureValues.Title;
-    //this.videoDemoStyle = this.device.isMobile ? { 'width': window.screen.width + 'px', 'height': window.screen.height + 'px', 'object-fit': 'fill' } : {};
-    if (!navigator.mediaDevices) {
-      this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
+  async doAction() {
+    try {
+      this.canSend = false;
+      var codeChecked = await this.baseComponent.apiCall.CheckOTPCode(state.requestId, this.code);
+      state.flowStatus = FlowStatus[codeChecked.status];
     }
-  }
-  async componentDidLoad() {
-    this.mainStream = Stream.getNewInstance(VerificationMode.Tilt);
-    await this.baseComponent.logStep(FlowSteps.SelfieTilt, FlowMoments.Initialized);
-    this.titleMesage = this.translations.SelfieCaptureValues.FacePoseMapping[this.mainStream.facePose];
-    this.demoEnded = false;
-    this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[this.mainStream.facePose];
-    this.demoVideo.play();
-    await delay(this.translations.GlobalValues.VideoLenght);
-    this.demoEnded = true;
-    this.openCamera();
-  }
-  async openCamera() {
-    const constraints = this.cameras.GetConstraints('', state.device, true);
-    setTimeout(() => {
-      navigator.mediaDevices
-        .getUserMedia(constraints)
-        .then(stream => {
-        this.mainStream.initStream(stream);
-      })
-        .catch(e => {
-        this.closeCamera();
-        this.apiErrorEvent.emit(e);
-      });
-    }, 100);
-  }
-  closeCamera() {
-    if (this.mainStream) {
-      this.mainStream.dropStream();
+    catch (e) {
+      this.apiErrorEvent.emit(e);
     }
   }
-  disconnectedCallback() {
-    this.closeCamera();
-    Stream.instance = null;
-    FaceML5Detector.instance = null;
+  async disconnectedCallback() {
+    await this.baseComponent.finalize();
   }
-  async takePhoto() {
-    if (this.captureTaken)
-      return;
-    this.captureTaken = true;
-    let res = this.mainStream.takePhoto();
-    this.photoIsReady(res);
-    await this.baseComponent.logStep(FlowSteps.SelfieTilt, FlowMoments.Finalized);
+  async componentWillRender() {
+    this.translations = await Translations.getValues();
+    this.title = this.translations.CodeValidationValues.Title;
+    this.details = this.translations.CodeValidationValues.Description;
+    this.buttonText = this.translations.CodeValidationValues.Button;
   }
-  async verificationFinished() {
-    if (this.verified)
-      return;
-    this.verified = true;
-    this.titleMesage = this.translations.SelfieCaptureValues.Loading;
-    this.closeCamera();
-    this.demoEnded = false;
-    var loops = 0;
-    this.demoVideo.src = this.uploadingLink;
-    this.demoVideo.loop = false;
-    while (loops < 7) {
-      loops++;
-      this.demoVideo.play();
-      await delay(this.translations.GlobalValues.VideoLenght);
-    }
-    this.eventTimeElapsed.emit();
+  async componentDidLoad() {
+    await this.baseComponent.initialize();
+  }
+  handleChangeCode(ev) {
+    let value = ev.target ? ev.target.value : '';
+    this.code = value;
+    if (this.code.length > 4)
+      this.code = this.code.substring(0, 4);
+    this.canSend = this.code.length == 4;
+    ev.target.value = this.code;
   }
   render() {
-    let cameraStyle;
-    if (state.device.isMobile && this.videoStarted) {
-      cameraStyle = {
-        'width': this.captureWidth + 'px',
-        'height': this.captureHeight + 'px',
-        'overflow': 'hidden',
-        'borderRadius': '10px',
-        'text-align': 'center',
-        'margin': 'auto',
-      };
+    let errorBlock;
+    if (state.flowStatus == FlowStatus.CODEERROR) {
+      errorBlock = h("p", { class: "main-text font-size-18 mt-15 color-red text-center" }, this.translations.CodeValidationValues.Error);
     }
-    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", { "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" }, this.translations.GlobalValues.FooterText)))));
+    return (h("div", { class: "container" }, h("div", { class: "row row-validare" }, h("div", null, h("h1", { class: "text-center" }, this.title), errorBlock == null ? h("p", { class: "main-text font-size-2 mt-15 mb-20 text-center" }, this.details) : errorBlock), h("div", { class: "input-container mb-15" }, h("input", { type: "text", id: "codeInput", class: "main-input", onInput: ev => this.handleChangeCode(ev), value: this.code })), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { id: "action", disabled: !this.canSend, class: "main-button", onClick: () => this.doAction() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
   }
-  get component() { return getElement(this); }
 };
-SelfieTilt.style = selfieTiltCss;
+SmsCodeValidation.style = smsCodeValidationCss;
 
-const smsCodeValidationCss = "";
+const smsSendCss = "";
 
-const SmsCodeValidation = class {
+const SmsSend = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.apiErrorEvent = createEvent(this, "apiError", 7);
-    this.title = undefined;
-    this.details = undefined;
     this.buttonText = undefined;
     this.phoneNumber = undefined;
-    this.code = undefined;
     this.prefilledPhone = false;
     this.canSend = false;
-    if (state.flowStatus == FlowStatus.PHONE) {
-      this.baseComponent = new BaseComponent(FlowSteps.OtpSend);
-    }
-    if (state.flowStatus == FlowStatus.CODE) {
-      this.baseComponent = new BaseComponent(FlowSteps.OtpCheck);
-    }
+    this.baseComponent = new BaseComponent(FlowSteps.OtpSend);
     this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   async doAction() {
     try {
       this.canSend = false;
-      if (state.flowStatus == FlowStatus.CODE || state.flowStatus == FlowStatus.CODEERROR) {
-        var codeChecked = await this.baseComponent.apiCall.CheckOTPCode(state.requestId, this.code);
-        if (codeChecked === true) {
-          state.flowStatus = FlowStatus.ID;
-        }
-        else {
-          state.flowStatus = FlowStatus.CODEERROR;
-        }
-      }
-      if (state.flowStatus == FlowStatus.PHONE) {
-        var codeSent = await this.baseComponent.apiCall.SendOTPCode(state.requestId, this.phoneNumber);
-        if (codeSent === true) {
-          state.flowStatus = FlowStatus.CODE;
-        }
+      var codeSent = await this.baseComponent.apiCall.SendOTPCode(state.requestId, this.phoneNumber);
+      if (codeSent.sent === true) {
+        state.flowStatus = FlowStatus[codeSent.status];
       }
     }
     catch (e) {
@@ -9532,20 +8992,11 @@ const SmsCodeValidation = class {
   }
   async componentWillRender() {
     this.translations = await Translations.getValues();
-    if (state.flowStatus == FlowStatus.PHONE) {
-      this.title = this.translations.PhoneValidationValues.Title;
-      this.details = this.translations.PhoneValidationValues.Description;
-      this.buttonText = this.translations.PhoneValidationValues.Button;
-      if (state.phoneNumber && state.phoneNumber != '') {
-        this.phoneNumber = state.phoneNumber;
-        this.prefilledPhone = true;
-        this.canSend = true;
-      }
-    }
-    if (state.flowStatus == FlowStatus.CODE || state.flowStatus == FlowStatus.CODEERROR) {
-      this.title = this.translations.CodeValidationValues.Title;
-      this.details = this.translations.CodeValidationValues.Description;
-      this.buttonText = this.translations.CodeValidationValues.Button;
+    this.buttonText = this.translations.PhoneValidationValues.Button;
+    if (state.phoneNumber && state.phoneNumber != '') {
+      this.phoneNumber = state.phoneNumber;
+      this.prefilledPhone = true;
+      this.canSend = true;
     }
   }
   async componentDidLoad() {
@@ -9559,30 +9010,11 @@ const SmsCodeValidation = class {
     this.canSend = this.phoneNumber.length == 10;
     ev.target.value = this.phoneNumber;
   }
-  handleChangeCode(ev) {
-    let value = ev.target ? ev.target.value : '';
-    this.code = value;
-    if (this.code.length > 4)
-      this.code = this.code.substring(0, 4);
-    this.canSend = this.code.length == 4;
-    ev.target.value = this.code;
-  }
   render() {
-    let inputBlock;
-    let errorBlock;
-    if (state.flowStatus == FlowStatus.CODEERROR) {
-      errorBlock = h("p", { class: "main-text font-size-18 mt-15 color-red text-center" }, this.translations.CodeValidationValues.Error);
-    }
-    if (state.flowStatus == FlowStatus.PHONE) {
-      inputBlock = (h("div", { class: "input-container mb-15" }, h("label", { class: "font-size-18 mb-1" }, h("b", null, this.translations.PhoneValidationValues.Label)), h("input", { type: "tel", id: "phoneInput", class: "main-input", disabled: this.prefilledPhone, onInput: ev => this.handleChangePhone(ev), value: this.phoneNumber })));
-    }
-    else {
-      inputBlock = (h("div", { class: "input-container mb-15" }, h("input", { type: "text", id: "codeInput", class: "main-input", onInput: ev => this.handleChangeCode(ev), value: this.code })));
-    }
-    return (h("div", { class: "container" }, h("div", { class: "row row-validare" }, h("div", null, h("h1", { class: "text-center" }, this.title), errorBlock == null ? h("p", { class: "main-text font-size-2 mt-15 mb-20 text-center" }, this.details) : errorBlock), inputBlock, h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { id: "action", disabled: !this.canSend, class: "main-button", onClick: () => this.doAction() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
+    return (h("div", { class: "container" }, h("div", { class: "row row-validare" }, h("div", { class: "input-container mb-15" }, h("label", { class: "font-size-18 mb-1" }, h("b", null, this.translations.PhoneValidationValues.Label)), h("input", { type: "tel", id: "phoneInput", class: "main-input", disabled: this.prefilledPhone, onInput: ev => this.handleChangePhone(ev), value: this.phoneNumber })), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { id: "action", disabled: !this.canSend, class: "main-button", onClick: () => this.doAction() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
   }
 };
-SmsCodeValidation.style = smsCodeValidationCss;
+SmsSend.style = smsSendCss;
 
 const userLivenessCss = "";
 
@@ -9593,57 +9025,51 @@ const UserLiveness = class {
     this.recordingResultCount = 0;
     this.recordingRetryCount = 0;
     this.showError = undefined;
-    this.captureStep = undefined;
     this.flow = undefined;
-    this.baseComponent = new BaseComponent(FlowSteps.Selfie);
-    this.baseComponent.setEventEmitter(this.apiErrorEvent);
+    this.howToDone = false;
   }
   async componentDidLoad() {
     await this.baseComponent.initialize();
   }
   componentWillLoad() {
-    this.flow = {
-      front: {
-        photoDone: false,
-        recordingDone: false,
-        fileName: 'selfie.png',
-        recName: 'selfieVideo.',
-        photoType: CaptureUploadTypes.Selfie,
-        recType: CaptureUploadTypes.SelfieVideo,
-      },
-      back: null,
-      tilt: null,
-    };
-    if (state.hasSelfieGesture) {
-      this.flow.tilt = {
-        photoDone: true,
-        recordingDone: false,
-        fileName: '',
-        recName: 'selfieTiltVideo.',
-        photoType: CaptureUploadTypes.None,
-        recType: CaptureUploadTypes.SelfieGestureVideo,
+    if (state.flowStatus == FlowStatus.LIVENESS) {
+      this.baseComponent = new BaseComponent(FlowSteps.Selfie);
+      this.flow = {
+        capture: {
+          fileName: 'selfie.png',
+          recName: 'selfieVideo.',
+          photoType: CaptureUploadTypes.Selfie,
+          recType: CaptureUploadTypes.SelfieVideo,
+        },
+        howToDone: false,
       };
     }
-    this.captureStep = SelfieFlowStatus.HowToSelfie;
+    else if (state.flowStatus == FlowStatus.LIVENESSGESTURE) {
+      this.baseComponent = new BaseComponent(FlowSteps.SelfieTilt);
+      this.flow = {
+        capture: {
+          fileName: '',
+          recName: 'selfieTiltVideo.',
+          photoType: CaptureUploadTypes.None,
+          recType: CaptureUploadTypes.SelfieGestureVideo,
+        },
+        howToDone: false,
+      };
+    }
+    this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
-  howToDone() {
-    this.captureStep = SelfieFlowStatus.Selfie;
+  howToDoneEvent() {
+    this.howToDone = true;
   }
   timeElapsed() {
     this.showError = true;
   }
   captureErrorDone() {
     this.showError = false;
-    if (this.captureStep == SelfieFlowStatus.Selfie) {
-      this.flow.front.photoDone = false;
-      this.flow.front.recordingDone = false;
-    }
-    if (this.captureStep == SelfieFlowStatus.Gesture) {
-      this.flow.tilt.photoDone = false;
-      this.flow.tilt.recordingDone = false;
-    }
   }
   async captureSelfieImage(event) {
+    if (state.flowStatus == FlowStatus.LIVENESSGESTURE)
+      return;
     let selfiePhoto = event.detail;
     if (selfiePhoto.size == 0) {
       await this.baseComponent.apiCall.AddLog({ message: 'Empty selfie', blobData: selfiePhoto }, getLogMessage());
@@ -9651,8 +9077,11 @@ const UserLiveness = class {
       return;
     }
     try {
-      var uploadPhoto = new File([selfiePhoto], this.flow.front.fileName, { type: 'image/png' });
-      await this.uploadPhoto(uploadPhoto, this.flow.front.photoType);
+      var uploadPhoto = new File([selfiePhoto], this.flow.capture.fileName, { type: 'image/png' });
+      let photoUploaded = await this.baseComponent.apiCall.UploadFileForRequestB64(state.requestId, this.flow.capture.photoType, uploadPhoto);
+      if (!photoUploaded) {
+        this.triggerErrorFlow();
+      }
     }
     catch (e) {
       this.apiErrorEvent.emit(e);
@@ -9672,18 +9101,11 @@ const UserLiveness = class {
     }
     let mimeType = selfieRecording.type == Stream.mp4MimeType.type ? Stream.mp4MimeType : Stream.webmMimeType;
     try {
-      if (this.captureStep == SelfieFlowStatus.Selfie) {
-        let uploadRec = new File([selfieRecording], this.flow.front.recName + mimeType.extension, { type: mimeType.type });
-        this.flow.front.recordingDone = await this.uploadRecording(uploadRec, this.flow.front.recType);
-      }
-      else if (this.captureStep == SelfieFlowStatus.Gesture) {
-        let uploadRec = new File([selfieRecording], this.flow.tilt.recName + mimeType.extension, { type: mimeType.type });
-        this.flow.tilt.recordingDone = await this.uploadRecording(uploadRec, this.flow.tilt.recType);
-      }
-      else {
+      let uploadRec = new File([selfieRecording], this.flow.capture.recName + mimeType.extension, { type: mimeType.type });
+      let uplodDone = await this.baseComponent.apiCall.UploadFileForRequestB64(state.requestId, this.flow.capture.recType, uploadRec);
+      if (!uplodDone) {
         this.triggerErrorFlow();
       }
-      this.endFlow();
     }
     catch (e) {
       if (this.recordingRetryCount < 3) {
@@ -9695,84 +9117,27 @@ const UserLiveness = class {
       }
     }
   }
-  async verificationFinished(_event) {
-    this.endFlow();
-  }
   async disconnectedCallback() {
     await this.baseComponent.finalize();
   }
-  async uploadPhoto(photoFile, photoType) {
-    if (this.flow.front.photoDone) {
-      return;
-    }
-    this.flow.front.photoDone = await this.baseComponent.apiCall.UploadFileForRequestB64(state.requestId, photoType, photoFile);
-    if (this.flow.front.photoDone) {
-      this.endFlow();
-    }
-    else {
-      this.triggerErrorFlow();
-    }
-  }
-  async uploadRecording(uploadRec, recType) {
-    let uplodDone = await this.baseComponent.apiCall.UploadFileForRequestB64(state.requestId, recType, uploadRec);
-    if (uplodDone) {
-      return true;
-    }
-    else {
-      this.triggerErrorFlow();
-    }
-    return false;
-  }
   triggerErrorFlow() {
     this.showError = true;
   }
-  endFlow() {
-    if (this.captureStep == SelfieFlowStatus.Selfie) {
-      if (this.flow.front.photoDone && this.flow.front.recordingDone) {
-        if (state.hasSelfieGesture) {
-          this.captureStep = SelfieFlowStatus.Gesture;
-        }
-        else {
-          this.captureStep = SelfieFlowStatus.End;
-        }
-      }
-      else {
-        return;
-      }
-    }
-    if (this.captureStep == SelfieFlowStatus.Gesture) {
-      if (this.flow.tilt.photoDone && this.flow.tilt.recordingDone) {
-        this.captureStep = SelfieFlowStatus.End;
-      }
-      else {
-        return;
-      }
-    }
-    if (this.captureStep != SelfieFlowStatus.End) {
-      return;
-    }
-    state.flowStatus = FlowStatus.COMPLETE;
-  }
   render() {
-    let howTo = h("how-to-info", { idSide: "" });
-    let capture = h("selfie-capture", { id: "camera" });
-    let tilt = h("selfie-tilt", { id: "camera" });
+    let howTo = h("how-to-info", null);
+    let capture = h("selfie-capture", null);
     let error = h("capture-error", { type: "LIVENESS" });
     if (this.showError) {
       return error;
     }
-    if (this.captureStep == SelfieFlowStatus.HowToSelfie) {
-      return howTo;
-    }
-    if (this.captureStep == SelfieFlowStatus.Selfie) {
+    if (this.howToDone) {
       return capture;
     }
-    if (this.captureStep == SelfieFlowStatus.Gesture) {
-      return tilt;
+    else {
+      return howTo;
     }
-    return h("div", null);
   }
 };
 UserLiveness.style = userLivenessCss;
 
-export { AgreementCheck as agreement_check, AgreementInfo as agreement_info, Camera as camera_comp, CameraError as camera_error, CaptureError as capture_error, EndRedirect as end_redirect, ErrorEnd as error_end, HowToInfo as how_to_info, IdBackCapture as id_back_capture, IdCapture as id_capture, IdTilt as id_tilt, IdentificationComponent as identification_component, LandingValidation as landing_validation, MobileRedirect as mobile_redirect, ProcessId as process_id, SelfieCapture as selfie_capture, SelfieTilt as selfie_tilt, SmsCodeValidation as sms_code_validation, UserLiveness as user_liveness };
+export { AgreementCheck as agreement_check, AgreementInfo as agreement_info, Camera as camera_comp, CameraError as camera_error, CaptureError as capture_error, EndRedirect as end_redirect, ErrorEnd as error_end, HowToInfo as how_to_info, IdCapture as id_capture, IdentificationComponent as identification_component, LandingValidation as landing_validation, MobileRedirect as mobile_redirect, ProcessId as process_id, SelfieCapture as selfie_capture, SmsCodeValidation as sms_code_validation, SmsSend as sms_send, UserLiveness as user_liveness };