@ekyc_qoobiss/qbs-ect-cmp 3.5.1 → 3.5.3

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

@@ -413,11 +413,20 @@ var FlowSteps;
   FlowSteps[FlowSteps["Agreements"] = 'agreements'] = "Agreements";
   FlowSteps[FlowSteps["OtpSend"] = 'otp-send'] = "OtpSend";
   FlowSteps[FlowSteps["OtpCheck"] = 'otp-check'] = "OtpCheck";
-  FlowSteps[FlowSteps["CiFrontHowTo"] = 'ci-front-how-to'] = "CiFrontHowTo";
   FlowSteps[FlowSteps["CiFront"] = 'ci-front'] = "CiFront";
-  FlowSteps[FlowSteps["CiBackHowTo"] = 'ci-back-how-to'] = "CiBackHowTo";
+  FlowSteps[FlowSteps["CiFrontHowTo"] = 'ci-front-how-to'] = "CiFrontHowTo";
+  FlowSteps[FlowSteps["CiFrontHoldAnimation"] = 'ci-front-hold-animation'] = "CiFrontHoldAnimation";
+  FlowSteps[FlowSteps["CiFrontTiltAnimation"] = 'ci-front-tilt-animation'] = "CiFrontTiltAnimation";
+  FlowSteps[FlowSteps["CiFrontCapture"] = 'ci-front-capture'] = "CiFrontCapture";
   FlowSteps[FlowSteps["CiBack"] = 'ci-back'] = "CiBack";
+  FlowSteps[FlowSteps["CiBackHowTo"] = 'ci-back-how-to'] = "CiBackHowTo";
+  FlowSteps[FlowSteps["CiBackHoldAnimation"] = 'ci-back-hold-animation'] = "CiBackHoldAnimation";
+  FlowSteps[FlowSteps["CiBackTiltAnimation"] = 'ci-back-tilt-animation'] = "CiBackTiltAnimation";
+  FlowSteps[FlowSteps["CiBackCapture"] = 'ci-back-capture'] = "CiBackCapture";
   FlowSteps[FlowSteps["SelfieHowTo"] = 'selfie-how-to'] = "SelfieHowTo";
+  FlowSteps[FlowSteps["SelfieHoldAnimation"] = 'selfie-hold-animation'] = "SelfieHoldAnimation";
+  FlowSteps[FlowSteps["SelfieTiltAnimation"] = 'selfie-tilt-animation'] = "SelfieTiltAnimation";
+  FlowSteps[FlowSteps["SelfieCapture"] = 'selfie-capture'] = "SelfieCapture";
   FlowSteps[FlowSteps["Selfie"] = 'selfie'] = "Selfie";
   FlowSteps[FlowSteps["End"] = 'end'] = "End";
   FlowSteps[FlowSteps["CameraError"] = 'camera-error'] = "CameraError";
@@ -864,6 +873,18 @@ class BaseComponent {
   setErrorCallback(callback) {
     this.processError = callback;
   }
+  async logStep(flowStep, flowMoment) {
+    Events.flowEvent(flowStep, flowMoment);
+    try {
+      await this.apiCall.AddStep(flowStep, flowMoment);
+    }
+    catch (e) {
+      if (this.apiErrorEvent)
+        this.apiErrorEvent.emit(e);
+      else
+        this.processError(e, `${flowStep}-${flowMoment}`);
+    }
+  }
   async initialize() {
     Events.flowEvent(this.flowStep, FlowMoments.Initialized);
     try {
@@ -873,7 +894,7 @@ class BaseComponent {
       if (this.apiErrorEvent)
         this.apiErrorEvent.emit(e);
       else
-        this.processError(e, FlowMoments.Initialized);
+        this.processError(e, `${this.flowStep}-${FlowMoments.Initialized}`);
     }
   }
   async finalize() {
@@ -885,7 +906,7 @@ class BaseComponent {
       if (this.apiErrorEvent)
         this.apiErrorEvent.emit(e);
       else
-        this.processError(e, FlowMoments.Initialized);
+        this.processError(e, `${this.flowStep}-${FlowMoments.Finalized}`);
     }
   }
 }
@@ -5587,17 +5608,9 @@ const completeSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODMiIGhlaWdodD0iO
 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) {
-    index.registerInstance(this, hostRef);
-    this.apiErrorEvent = index.createEvent(this, "apiError", 7);
-    this.baseComponent = new BaseComponent(FlowSteps.End);
-    this.baseComponent.setEventEmitter(this.apiErrorEvent);
-  }
+  constructor(hostRef) { index.registerInstance(this, hostRef); this.apiErrorEvent = index.createEvent(this, "apiError", 7); }
   async componentDidLoad() {
     Events.flowCompleted();
-    if (state.environment !== 'DEMO') {
-      await this.baseComponent.initialize();
-    }
   }
   render() {
     return (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("div", null, index.h("h1", { class: "text-center" }, CompleteValues.Title), index.h("p", { class: "main-text font-size-18 mt-8 text-center" }, CompleteValues.Description)), index.h("div", { class: "buletin-container" }, index.h("div", { class: "container-coin" }, index.h("div", { class: "coin-scale" }, index.h("div", { class: "coin-flip" }, index.h("img", { class: "w-40 coin", src: completeSvg }))))), index.h("div", { class: "text-center" }, index.h("p", { class: "font-weight-900 font-size-3 color-black-2 text-center mt-20" }, CompleteValues.Message), index.h("p", null, state.requestId)), index.h("div", { class: "btn-buletin" }, index.h("p", { class: "main-text font-size-18 text-center mb-0" }, CompleteValues.FooterText)))));
@@ -5623,15 +5636,12 @@ ErrorEnd.style = errorEndCss;
 const howToInfoCss = "";
 
 const HowToInfo = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.eventHowToInfoDone = index.createEvent(this, "howToInfoDone", 7);
-    this.idSide = undefined;
-    this.topTitle = undefined;
-    this.subTitle = undefined;
-    this.imagePath = undefined;
-    this.buttonText = undefined;
-    this.buttonEnabled = undefined;
+  constructor(hostRef) { index.registerInstance(this, hostRef); this.eventHowToInfoDone = index.createEvent(this, "howToInfoDone", 7); this.apiErrorEvent = index.createEvent(this, "apiError", 7); this.idSide = undefined; this.topTitle = undefined; this.subTitle = undefined; this.imagePath = undefined; this.buttonText = undefined; this.buttonEnabled = undefined; }
+  async componentDidLoad() {
+    await this.baseComponent.initialize();
+  }
+  disconnectedCallback() {
+    this.baseComponent.finalize();
   }
   buttonClick() {
     this.buttonEnabled = false;
@@ -5645,18 +5655,22 @@ const HowToInfo = class {
       this.imagePath = 'https://ekyc.blob.core.windows.net/$web/howto_id.png';
       this.buttonText = HowToValues.IdButton;
       if (this.idSide == 'front') {
+        this.baseComponent = new BaseComponent(FlowSteps.CiFrontHowTo);
         this.subTitle = HowToValues.IdSubTitileFace;
       }
       if (this.idSide == 'back') {
+        this.baseComponent = new BaseComponent(FlowSteps.CiBackHowTo);
         this.subTitle = HowToValues.IdSubTitileBack;
       }
     }
     if (state.flowStatus == FlowStatus.LIVENESS) {
+      this.baseComponent = new BaseComponent(FlowSteps.SelfieHowTo);
       this.topTitle = HowToValues.SelfieTitile;
       this.subTitle = HowToValues.SelfieSubTitile;
       this.imagePath = 'https://ekyc.blob.core.windows.net/$web/howto_selfie.png';
       this.buttonText = HowToValues.SelfieButton;
     }
+    this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   render() {
     let sub = this.subTitle != '' ? index.h("p", { class: "font-size-2" }, this.subTitle) : null;
@@ -5809,14 +5823,17 @@ const IdBackCapture = class {
     this.verified = false;
     this.cameras = new Cameras();
     this.showDemo = true;
+    this.baseComponent = new BaseComponent(FlowSteps.CiBackHoldAnimation);
   }
   async eventChangeTitle(event) {
+    await this.baseComponent.logStep(FlowSteps.CiBackTiltAnimation, FlowMoments.Initialized);
     this.showDemo = true;
     this.titleMesage = IdCaptureValues.IDPoseMapping[event.detail];
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.BackTilted];
     this.demoVideo.play();
     await delay(IdCaptureValues.VideoLenght);
     this.showDemo = false;
+    await this.baseComponent.logStep(FlowSteps.CiBackTiltAnimation, FlowMoments.Finalized);
   }
   eventVideoStarted(event) {
     this.videoStarted = true;
@@ -5829,6 +5846,7 @@ const IdBackCapture = class {
     }
   }
   async componentDidLoad() {
+    await this.baseComponent.logStep(FlowSteps.CiBackHoldAnimation, FlowMoments.Initialized);
     this.titleMesage = IdCaptureValues.TtileRotate;
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Rotate];
     this.demoVideo.play();
@@ -5837,10 +5855,12 @@ const IdBackCapture = class {
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.BackStraight];
     this.demoVideo.play();
     await delay(IdCaptureValues.VideoLenght);
+    await this.baseComponent.logStep(FlowSteps.CiBackHoldAnimation, FlowMoments.Finalized);
     this.showDemo = false;
     this.openCamera();
   }
   async openCamera() {
+    await this.baseComponent.logStep(FlowSteps.CiBackCapture, FlowMoments.Initialized);
     var constraints = this.cameras.GetConstraints(state.cameraId, state.device);
     setTimeout(() => {
       navigator.mediaDevices
@@ -5883,6 +5903,7 @@ const IdBackCapture = class {
     this.captureTaken = true;
     let res = await Stream.getInstance().takePhoto();
     this.photoIsReady(res);
+    await this.baseComponent.logStep(FlowSteps.CiBackCapture, FlowMoments.Finalized);
   }
   render() {
     let cameraStyle;
@@ -5923,14 +5944,17 @@ const IdCapture = class {
     this.verified = false;
     this.cameras = new Cameras();
     this.showDemo = true;
+    this.baseComponent = new BaseComponent(FlowSteps.CiFrontHoldAnimation);
   }
   async eventChangeTitle(event) {
+    await this.baseComponent.logStep(FlowSteps.CiFrontTiltAnimation, FlowMoments.Initialized);
     this.showDemo = true;
     this.titleMesage = IdCaptureValues.IDPoseMapping[event.detail];
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Tilted];
     this.demoVideo.play();
     await delay(IdCaptureValues.VideoLenght);
     this.showDemo = false;
+    await this.baseComponent.logStep(FlowSteps.CiFrontTiltAnimation, FlowMoments.Finalized);
   }
   eventVideoStarted(event) {
     this.videoStarted = true;
@@ -5944,13 +5968,16 @@ const IdCapture = class {
     }
   }
   async componentDidLoad() {
+    await this.baseComponent.logStep(FlowSteps.CiFrontHoldAnimation, FlowMoments.Initialized);
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Straight];
     this.demoVideo.play();
     await delay(IdCaptureValues.VideoLenght);
+    await this.baseComponent.logStep(FlowSteps.CiFrontHoldAnimation, FlowMoments.Finalized);
     this.showDemo = false;
     this.openCamera();
   }
   async openCamera() {
+    await this.baseComponent.logStep(FlowSteps.CiFrontCapture, FlowMoments.Initialized);
     var constraints = this.cameras.GetConstraints(state.cameraId, state.device);
     setTimeout(() => {
       navigator.mediaDevices
@@ -5982,6 +6009,7 @@ const IdCapture = class {
     this.captureTaken = true;
     let res = await Stream.getInstance().takePhoto();
     this.photoIsReady(res);
+    await this.baseComponent.logStep(FlowSteps.CiFrontCapture, FlowMoments.Finalized);
   }
   async verificationFinished() {
     if (this.verified)
@@ -6404,7 +6432,7 @@ function v4(options, buf, offset) {
 }
 
 const name = "@ekyc_qoobiss/qbs-ect-cmp";
-const version$1 = "3.5.1";
+const version$1 = "3.5.3";
 const description = "Person Identification Component";
 const main = "./dist/index.cjs.js";
 const module$1 = "./dist/index.js";
@@ -9830,6 +9858,7 @@ const SelfieCapture = class {
     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.SelfieHoldAnimation);
   }
   async eventChangeTitle(event) {
     // this.stopAnimation = false;
@@ -9837,11 +9866,13 @@ const SelfieCapture = class {
       this.titleMesage = SelfieCaptureValues.FinalTitle;
     }
     else {
+      await this.baseComponent.logStep(FlowSteps.SelfieTiltAnimation, FlowMoments.Initialized);
       this.titleMesage = SelfieCaptureValues.FacePoseMapping[event.detail];
       this.demoEnded = false;
       this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[event.detail];
       this.demoVideo.play();
       await delay(SelfieCaptureValues.VideoLenght);
+      await this.baseComponent.logStep(FlowSteps.SelfieTiltAnimation, FlowMoments.Finalized);
       this.demoEnded = true;
     }
   }
@@ -9860,13 +9891,16 @@ const SelfieCapture = class {
     }
   }
   async componentDidLoad() {
+    await this.baseComponent.logStep(FlowSteps.SelfieHoldAnimation, FlowMoments.Initialized);
     this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[FacePose.Main];
     this.demoVideo.play();
     await delay(SelfieCaptureValues.VideoLenght);
+    await this.baseComponent.logStep(FlowSteps.SelfieHoldAnimation, FlowMoments.Finalized);
     this.demoEnded = true;
     this.openCamera();
   }
   async openCamera() {
+    await this.baseComponent.logStep(FlowSteps.SelfieCapture, FlowMoments.Initialized);
     const constraints = this.cameras.GetConstraints('', state.device, true);
     setTimeout(() => {
       navigator.mediaDevices
@@ -9897,6 +9931,7 @@ const SelfieCapture = class {
     this.captureTaken = true;
     let res = await Stream.getInstance().takePhoto();
     this.photoIsReady(res);
+    await this.baseComponent.logStep(FlowSteps.SelfieHoldAnimation, FlowMoments.Finalized);
   }
   verificationFinished() {
     if (this.verified)

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

@@ -21,6 +21,18 @@ export class BaseComponent {
   setErrorCallback(callback) {
     this.processError = callback;
   }
+  async logStep(flowStep, flowMoment) {
+    Events.flowEvent(flowStep, flowMoment);
+    try {
+      await this.apiCall.AddStep(flowStep, flowMoment);
+    }
+    catch (e) {
+      if (this.apiErrorEvent)
+        this.apiErrorEvent.emit(e);
+      else
+        this.processError(e, `${flowStep}-${flowMoment}`);
+    }
+  }
   async initialize() {
     Events.flowEvent(this.flowStep, FlowMoments.Initialized);
     try {
@@ -30,7 +42,7 @@ export class BaseComponent {
       if (this.apiErrorEvent)
         this.apiErrorEvent.emit(e);
       else
-        this.processError(e, FlowMoments.Initialized);
+        this.processError(e, `${this.flowStep}-${FlowMoments.Initialized}`);
     }
   }
   async finalize() {
@@ -42,7 +54,7 @@ export class BaseComponent {
       if (this.apiErrorEvent)
         this.apiErrorEvent.emit(e);
       else
-        this.processError(e, FlowMoments.Initialized);
+        this.processError(e, `${this.flowStep}-${FlowMoments.Finalized}`);
     }
   }
 }

package/dist/collection/components/common/how-to-info/how-to-info.js

@@ -2,14 +2,15 @@ import { h } from '@stencil/core';
 import { HowToValues } from '../../../helpers/textValues';
 import store from '../../../helpers/store';
 import { FlowStatus } from '../../../models/FlowStatus';
+import { BaseComponent } from '../../base-component';
+import { FlowSteps } from '../../../models/FlowSteps';
 export class HowToInfo {
-  constructor() {
-    this.idSide = undefined;
-    this.topTitle = undefined;
-    this.subTitle = undefined;
-    this.imagePath = undefined;
-    this.buttonText = undefined;
-    this.buttonEnabled = undefined;
+  constructor() { this.idSide = undefined; this.topTitle = undefined; this.subTitle = undefined; this.imagePath = undefined; this.buttonText = undefined; this.buttonEnabled = undefined; }
+  async componentDidLoad() {
+    await this.baseComponent.initialize();
+  }
+  disconnectedCallback() {
+    this.baseComponent.finalize();
   }
   buttonClick() {
     this.buttonEnabled = false;
@@ -23,18 +24,22 @@ export class HowToInfo {
       this.imagePath = 'https://ekyc.blob.core.windows.net/$web/howto_id.png';
       this.buttonText = HowToValues.IdButton;
       if (this.idSide == 'front') {
+        this.baseComponent = new BaseComponent(FlowSteps.CiFrontHowTo);
         this.subTitle = HowToValues.IdSubTitileFace;
       }
       if (this.idSide == 'back') {
+        this.baseComponent = new BaseComponent(FlowSteps.CiBackHowTo);
         this.subTitle = HowToValues.IdSubTitileBack;
       }
     }
     if (store.flowStatus == FlowStatus.LIVENESS) {
+      this.baseComponent = new BaseComponent(FlowSteps.SelfieHowTo);
       this.topTitle = HowToValues.SelfieTitile;
       this.subTitle = HowToValues.SelfieSubTitile;
       this.imagePath = 'https://ekyc.blob.core.windows.net/$web/howto_selfie.png';
       this.buttonText = HowToValues.SelfieButton;
     }
+    this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   render() {
     let sub = this.subTitle != '' ? h("p", { class: "font-size-2" }, this.subTitle) : null;
@@ -97,6 +102,21 @@ export class HowToInfo {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "apiErrorEvent",
+        "name": "apiError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
       }];
   }
 }

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

@@ -7,6 +7,8 @@ import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
 import { IDPose } from '../../../libs/IDML5Detector/IDPose';
 import { delay } from '../../../utils/utils';
 import store from '../../../helpers/store';
+import { BaseComponent } from '../../base-component';
+import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
 // import { IDPose } from '../../libs/IDML5Detector/IDPose';
 export class IdBackCapture {
   // @State() private animationPath: string;
@@ -26,14 +28,17 @@ export class IdBackCapture {
     this.verified = false;
     this.cameras = new Cameras();
     this.showDemo = true;
+    this.baseComponent = new BaseComponent(FlowSteps.CiBackHoldAnimation);
   }
   async eventChangeTitle(event) {
+    await this.baseComponent.logStep(FlowSteps.CiBackTiltAnimation, FlowMoments.Initialized);
     this.showDemo = true;
     this.titleMesage = IdCaptureValues.IDPoseMapping[event.detail];
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.BackTilted];
     this.demoVideo.play();
     await delay(IdCaptureValues.VideoLenght);
     this.showDemo = false;
+    await this.baseComponent.logStep(FlowSteps.CiBackTiltAnimation, FlowMoments.Finalized);
   }
   eventVideoStarted(event) {
     this.videoStarted = true;
@@ -46,6 +51,7 @@ export class IdBackCapture {
     }
   }
   async componentDidLoad() {
+    await this.baseComponent.logStep(FlowSteps.CiBackHoldAnimation, FlowMoments.Initialized);
     this.titleMesage = IdCaptureValues.TtileRotate;
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Rotate];
     this.demoVideo.play();
@@ -54,10 +60,12 @@ export class IdBackCapture {
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.BackStraight];
     this.demoVideo.play();
     await delay(IdCaptureValues.VideoLenght);
+    await this.baseComponent.logStep(FlowSteps.CiBackHoldAnimation, FlowMoments.Finalized);
     this.showDemo = false;
     this.openCamera();
   }
   async openCamera() {
+    await this.baseComponent.logStep(FlowSteps.CiBackCapture, FlowMoments.Initialized);
     var constraints = this.cameras.GetConstraints(store.cameraId, store.device);
     setTimeout(() => {
       navigator.mediaDevices
@@ -100,6 +108,7 @@ export class IdBackCapture {
     this.captureTaken = true;
     let res = await Stream.getInstance().takePhoto();
     this.photoIsReady(res);
+    await this.baseComponent.logStep(FlowSteps.CiBackCapture, FlowMoments.Finalized);
   }
   render() {
     let cameraStyle;

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

@@ -7,6 +7,8 @@ import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
 import { IDPose } from '../../../libs/IDML5Detector/IDPose';
 import { delay } from '../../../utils/utils';
 import store from '../../../helpers/store';
+import { BaseComponent } from '../../base-component';
+import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
 // import { IDPose } from '../../libs/IDML5Detector/IDPose';
 export class IdCapture {
   // @State() private animationPath: string;
@@ -26,14 +28,17 @@ export class IdCapture {
     this.verified = false;
     this.cameras = new Cameras();
     this.showDemo = true;
+    this.baseComponent = new BaseComponent(FlowSteps.CiFrontHoldAnimation);
   }
   async eventChangeTitle(event) {
+    await this.baseComponent.logStep(FlowSteps.CiFrontTiltAnimation, FlowMoments.Initialized);
     this.showDemo = true;
     this.titleMesage = IdCaptureValues.IDPoseMapping[event.detail];
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Tilted];
     this.demoVideo.play();
     await delay(IdCaptureValues.VideoLenght);
     this.showDemo = false;
+    await this.baseComponent.logStep(FlowSteps.CiFrontTiltAnimation, FlowMoments.Finalized);
   }
   eventVideoStarted(event) {
     this.videoStarted = true;
@@ -47,13 +52,16 @@ export class IdCapture {
     }
   }
   async componentDidLoad() {
+    await this.baseComponent.logStep(FlowSteps.CiFrontHoldAnimation, FlowMoments.Initialized);
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Straight];
     this.demoVideo.play();
     await delay(IdCaptureValues.VideoLenght);
+    await this.baseComponent.logStep(FlowSteps.CiFrontHoldAnimation, FlowMoments.Finalized);
     this.showDemo = false;
     this.openCamera();
   }
   async openCamera() {
+    await this.baseComponent.logStep(FlowSteps.CiFrontCapture, FlowMoments.Initialized);
     var constraints = this.cameras.GetConstraints(store.cameraId, store.device);
     setTimeout(() => {
       navigator.mediaDevices
@@ -85,6 +93,7 @@ export class IdCapture {
     this.captureTaken = true;
     let res = await Stream.getInstance().takePhoto();
     this.photoIsReady(res);
+    await this.baseComponent.logStep(FlowSteps.CiFrontCapture, FlowMoments.Finalized);
   }
   async verificationFinished() {
     if (this.verified)

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

@@ -6,6 +6,8 @@ import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
 import { FacePose } from '../../../libs/FaceML5Detector/FacePose';
 import { delay } from '../../../utils/utils';
 import store from '../../../helpers/store';
+import { BaseComponent } from '../../base-component';
+import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
 export class SelfieCapture {
   // @State() private animationPath: string;
   constructor() {
@@ -27,6 +29,7 @@ export class SelfieCapture {
     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.SelfieHoldAnimation);
   }
   async eventChangeTitle(event) {
     // this.stopAnimation = false;
@@ -34,11 +37,13 @@ export class SelfieCapture {
       this.titleMesage = SelfieCaptureValues.FinalTitle;
     }
     else {
+      await this.baseComponent.logStep(FlowSteps.SelfieTiltAnimation, FlowMoments.Initialized);
       this.titleMesage = SelfieCaptureValues.FacePoseMapping[event.detail];
       this.demoEnded = false;
       this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[event.detail];
       this.demoVideo.play();
       await delay(SelfieCaptureValues.VideoLenght);
+      await this.baseComponent.logStep(FlowSteps.SelfieTiltAnimation, FlowMoments.Finalized);
       this.demoEnded = true;
     }
   }
@@ -57,13 +62,16 @@ export class SelfieCapture {
     }
   }
   async componentDidLoad() {
+    await this.baseComponent.logStep(FlowSteps.SelfieHoldAnimation, FlowMoments.Initialized);
     this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[FacePose.Main];
     this.demoVideo.play();
     await delay(SelfieCaptureValues.VideoLenght);
+    await this.baseComponent.logStep(FlowSteps.SelfieHoldAnimation, FlowMoments.Finalized);
     this.demoEnded = true;
     this.openCamera();
   }
   async openCamera() {
+    await this.baseComponent.logStep(FlowSteps.SelfieCapture, FlowMoments.Initialized);
     const constraints = this.cameras.GetConstraints('', store.device, true);
     setTimeout(() => {
       navigator.mediaDevices
@@ -94,6 +102,7 @@ export class SelfieCapture {
     this.captureTaken = true;
     let res = await Stream.getInstance().takePhoto();
     this.photoIsReady(res);
+    await this.baseComponent.logStep(FlowSteps.SelfieHoldAnimation, FlowMoments.Finalized);
   }
   verificationFinished() {
     if (this.verified)

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

@@ -4,18 +4,10 @@ import { CompleteValues } from '../../../helpers/textValues';
 import completeImg from '../../../assets/complete.svg';
 import store from '../../../helpers/store';
 import Events from '../../../helpers/Events';
-import { FlowSteps } from '../../../models/FlowSteps';
-import { BaseComponent } from '../../base-component';
 export class EndRedirect {
-  constructor() {
-    this.baseComponent = new BaseComponent(FlowSteps.End);
-    this.baseComponent.setEventEmitter(this.apiErrorEvent);
-  }
+  constructor() { }
   async componentDidLoad() {
     Events.flowCompleted();
-    if (store.environment !== 'DEMO') {
-      await this.baseComponent.initialize();
-    }
   }
   render() {
     return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", { class: "text-center" }, CompleteValues.Title), h("p", { class: "main-text font-size-18 mt-8 text-center" }, CompleteValues.Description)), h("div", { class: "buletin-container" }, h("div", { class: "container-coin" }, h("div", { class: "coin-scale" }, h("div", { class: "coin-flip" }, h("img", { class: "w-40 coin", src: completeImg }))))), h("div", { class: "text-center" }, h("p", { class: "font-weight-900 font-size-3 color-black-2 text-center mt-20" }, CompleteValues.Message), h("p", null, store.requestId)), h("div", { class: "btn-buletin" }, h("p", { class: "main-text font-size-18 text-center mb-0" }, CompleteValues.FooterText)))));

package/dist/collection/models/FlowSteps.js

@@ -5,11 +5,20 @@ export var FlowSteps;
   FlowSteps[FlowSteps["Agreements"] = 'agreements'] = "Agreements";
   FlowSteps[FlowSteps["OtpSend"] = 'otp-send'] = "OtpSend";
   FlowSteps[FlowSteps["OtpCheck"] = 'otp-check'] = "OtpCheck";
-  FlowSteps[FlowSteps["CiFrontHowTo"] = 'ci-front-how-to'] = "CiFrontHowTo";
   FlowSteps[FlowSteps["CiFront"] = 'ci-front'] = "CiFront";
-  FlowSteps[FlowSteps["CiBackHowTo"] = 'ci-back-how-to'] = "CiBackHowTo";
+  FlowSteps[FlowSteps["CiFrontHowTo"] = 'ci-front-how-to'] = "CiFrontHowTo";
+  FlowSteps[FlowSteps["CiFrontHoldAnimation"] = 'ci-front-hold-animation'] = "CiFrontHoldAnimation";
+  FlowSteps[FlowSteps["CiFrontTiltAnimation"] = 'ci-front-tilt-animation'] = "CiFrontTiltAnimation";
+  FlowSteps[FlowSteps["CiFrontCapture"] = 'ci-front-capture'] = "CiFrontCapture";
   FlowSteps[FlowSteps["CiBack"] = 'ci-back'] = "CiBack";
+  FlowSteps[FlowSteps["CiBackHowTo"] = 'ci-back-how-to'] = "CiBackHowTo";
+  FlowSteps[FlowSteps["CiBackHoldAnimation"] = 'ci-back-hold-animation'] = "CiBackHoldAnimation";
+  FlowSteps[FlowSteps["CiBackTiltAnimation"] = 'ci-back-tilt-animation'] = "CiBackTiltAnimation";
+  FlowSteps[FlowSteps["CiBackCapture"] = 'ci-back-capture'] = "CiBackCapture";
   FlowSteps[FlowSteps["SelfieHowTo"] = 'selfie-how-to'] = "SelfieHowTo";
+  FlowSteps[FlowSteps["SelfieHoldAnimation"] = 'selfie-hold-animation'] = "SelfieHoldAnimation";
+  FlowSteps[FlowSteps["SelfieTiltAnimation"] = 'selfie-tilt-animation'] = "SelfieTiltAnimation";
+  FlowSteps[FlowSteps["SelfieCapture"] = 'selfie-capture'] = "SelfieCapture";
   FlowSteps[FlowSteps["Selfie"] = 'selfie'] = "Selfie";
   FlowSteps[FlowSteps["End"] = 'end'] = "End";
   FlowSteps[FlowSteps["CameraError"] = 'camera-error'] = "CameraError";