@ekyc_qoobiss/qbs-ect-cmp 3.5.1 → 3.5.3

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

@@ -409,11 +409,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";
@@ -860,6 +869,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 {
@@ -869,7 +890,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() {
@@ -881,7 +902,7 @@ class BaseComponent {
       if (this.apiErrorEvent)
         this.apiErrorEvent.emit(e);
       else
-        this.processError(e, FlowMoments.Initialized);
+        this.processError(e, `${this.flowStep}-${FlowMoments.Finalized}`);
     }
   }
 }
@@ -5583,17 +5604,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) {
-    registerInstance(this, hostRef);
-    this.apiErrorEvent = createEvent(this, "apiError", 7);
-    this.baseComponent = new BaseComponent(FlowSteps.End);
-    this.baseComponent.setEventEmitter(this.apiErrorEvent);
-  }
+  constructor(hostRef) { registerInstance(this, hostRef); this.apiErrorEvent = createEvent(this, "apiError", 7); }
   async componentDidLoad() {
     Events.flowCompleted();
-    if (state.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: completeSvg }))))), 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, state.requestId)), h("div", { class: "btn-buletin" }, h("p", { class: "main-text font-size-18 text-center mb-0" }, CompleteValues.FooterText)))));
@@ -5619,15 +5632,12 @@ ErrorEnd.style = errorEndCss;
 const howToInfoCss = "";
 
 const HowToInfo = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.eventHowToInfoDone = createEvent(this, "howToInfoDone", 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.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;
@@ -5641,18 +5651,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 != '' ? h("p", { class: "font-size-2" }, this.subTitle) : null;
@@ -5805,14 +5819,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;
@@ -5825,6 +5842,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();
@@ -5833,10 +5851,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
@@ -5879,6 +5899,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;
@@ -5919,14 +5940,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;
@@ -5940,13 +5964,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
@@ -5978,6 +6005,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)
@@ -6400,7 +6428,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 = "./dist/index.js";
@@ -9826,6 +9854,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;
@@ -9833,11 +9862,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;
     }
   }
@@ -9856,13 +9887,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
@@ -9893,6 +9927,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)