@ekyc_qoobiss/qbs-ect-cmp 3.6.84 → 3.6.86

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

@@ -4854,13 +4854,10 @@ const HowToInfo = class {
       this.subTitle = this.translations.HowToValues.IdSubTitileFace;
     }
     else if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.IDBACKHOWTO) {
-      this.imageLoaded = true;
       this.currentStep = TranslationUtils.FlowSteps.CiBackHowTo;
-      this.subTitle = '';
       this.topTitle = this.translations.IdCaptureValues.TitleBack;
       this.demoVideo.src = TranslationUtils.IdCaptureValues.IDPoseDemoMapping[IDPose.Rotate];
       this.demoVideo.play();
-      this.showVideo = true;
       await delay(this.translations.GlobalValues.VideoLenght);
       await this.buttonClick();
     }
@@ -4882,22 +4879,15 @@ const HowToInfo = class {
     TranslationUtils.state.flowStatus = await TranslationUtils.ApiCall.instance.GetNextFlowState();
   }
   async componentWillLoad() {
-    this.showVideo = false;
+    this.showVideo = TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.IDBACKHOWTO;
     this.translations = await TranslationUtils.Translations.getValues();
     this.subTitle = '';
     this.buttonEnabled = true;
     this.buttonText = this.translations.HowToValues.IdButton;
   }
   render() {
-    let titleClass = 'color-black-2';
-    let bgDemo = 'container';
-    let rowClass = 'row';
-    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.IDBACKHOWTO) {
-      titleClass = 'color-white';
-      bgDemo = 'container bg-black';
-      rowClass = 'container-video';
-    }
-    return (index.h("div", { class: bgDemo }, index.h("div", { class: rowClass, hidden: this.imageLoaded == false }, index.h("div", { class: "div-ci align-center", hidden: this.showVideo }, index.h("img", { ref: el => (this.image = el) })), index.h("div", { hidden: this.showVideo == false }, index.h("video", { id: "howTo", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, index.h("source", { type: "video/mp4" }))), index.h("div", { class: "text-center" }, index.h("h1", { class: titleClass }, this.topTitle), index.h("p", { class: "font-size-2", hidden: this.subTitle == '' }, this.subTitle)), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(), hidden: this.showVideo == true }, this.buttonText), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
+    let howTo = this.showVideo == true ? (index.h("div", { class: "container bg-black" }, index.h("div", { class: "container-video" }, index.h("div", null, index.h("video", { id: "howTo", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, index.h("source", { type: "video/mp4" }))), index.h("div", { class: "capture-title" }, index.h("h1", { class: "color-white text-center" }, this.topTitle), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))) : (index.h("div", { class: "container" }, index.h("div", { class: "row", hidden: this.imageLoaded == false }, index.h("div", { class: "div-ci align-center" }, index.h("img", { ref: el => (this.image = el) })), index.h("div", { class: "text-center" }, index.h("h1", { class: "color-black-2" }, this.topTitle), index.h("p", { class: "font-size-2", hidden: this.subTitle == '' }, this.subTitle)), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick() }, this.buttonText), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
+    return howTo;
   }
 };
 HowToInfo.style = howToInfoCss;
@@ -5256,7 +5246,7 @@ function v4(options, buf, offset) {
 }
 
 const name = "@ekyc_qoobiss/qbs-ect-cmp";
-const version$1 = "3.6.84";
+const version$1 = "3.6.86";
 const description = "Person Identification Component";
 const main = "./dist/index.cjs.js";
 const module$1 = "./dist/index.js";

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

@@ -37,13 +37,10 @@ export class HowToInfo {
       this.subTitle = this.translations.HowToValues.IdSubTitileFace;
     }
     else if (store.flowStatus == FlowStatus.IDBACKHOWTO) {
-      this.imageLoaded = true;
       this.currentStep = FlowSteps.CiBackHowTo;
-      this.subTitle = '';
       this.topTitle = this.translations.IdCaptureValues.TitleBack;
       this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Rotate];
       this.demoVideo.play();
-      this.showVideo = true;
       await delay(this.translations.GlobalValues.VideoLenght);
       await this.buttonClick();
     }
@@ -65,22 +62,15 @@ export class HowToInfo {
     store.flowStatus = await ApiCall.instance.GetNextFlowState();
   }
   async componentWillLoad() {
-    this.showVideo = false;
+    this.showVideo = store.flowStatus == FlowStatus.IDBACKHOWTO;
     this.translations = await Translations.getValues();
     this.subTitle = '';
     this.buttonEnabled = true;
     this.buttonText = this.translations.HowToValues.IdButton;
   }
   render() {
-    let titleClass = 'color-black-2';
-    let bgDemo = 'container';
-    let rowClass = 'row';
-    if (store.flowStatus == FlowStatus.IDBACKHOWTO) {
-      titleClass = 'color-white';
-      bgDemo = 'container bg-black';
-      rowClass = 'container-video';
-    }
-    return (h("div", { class: bgDemo }, h("div", { class: rowClass, hidden: this.imageLoaded == false }, h("div", { class: "div-ci align-center", hidden: this.showVideo }, h("img", { ref: el => (this.image = el) })), h("div", { hidden: this.showVideo == false }, h("video", { id: "howTo", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { class: "text-center" }, h("h1", { class: titleClass }, this.topTitle), h("p", { class: "font-size-2", hidden: this.subTitle == '' }, this.subTitle)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(), hidden: this.showVideo == true }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
+    let howTo = this.showVideo == true ? (h("div", { class: "container bg-black" }, h("div", { class: "container-video" }, h("div", null, h("video", { id: "howTo", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { class: "capture-title" }, h("h1", { class: "color-white text-center" }, this.topTitle), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))) : (h("div", { class: "container" }, h("div", { class: "row", hidden: this.imageLoaded == false }, h("div", { class: "div-ci align-center" }, h("img", { ref: el => (this.image = el) })), h("div", { class: "text-center" }, h("h1", { class: "color-black-2" }, this.topTitle), h("p", { class: "font-size-2", hidden: this.subTitle == '' }, this.subTitle)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
+    return howTo;
   }
   static get is() { return "how-to-info"; }
   static get originalStyleUrls() {

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

@@ -4850,13 +4850,10 @@ const HowToInfo = class {
       this.subTitle = this.translations.HowToValues.IdSubTitileFace;
     }
     else if (state.flowStatus == FlowStatus.IDBACKHOWTO) {
-      this.imageLoaded = true;
       this.currentStep = FlowSteps.CiBackHowTo;
-      this.subTitle = '';
       this.topTitle = this.translations.IdCaptureValues.TitleBack;
       this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Rotate];
       this.demoVideo.play();
-      this.showVideo = true;
       await delay(this.translations.GlobalValues.VideoLenght);
       await this.buttonClick();
     }
@@ -4878,22 +4875,15 @@ const HowToInfo = class {
     state.flowStatus = await ApiCall.instance.GetNextFlowState();
   }
   async componentWillLoad() {
-    this.showVideo = false;
+    this.showVideo = state.flowStatus == FlowStatus.IDBACKHOWTO;
     this.translations = await Translations.getValues();
     this.subTitle = '';
     this.buttonEnabled = true;
     this.buttonText = this.translations.HowToValues.IdButton;
   }
   render() {
-    let titleClass = 'color-black-2';
-    let bgDemo = 'container';
-    let rowClass = 'row';
-    if (state.flowStatus == FlowStatus.IDBACKHOWTO) {
-      titleClass = 'color-white';
-      bgDemo = 'container bg-black';
-      rowClass = 'container-video';
-    }
-    return (h("div", { class: bgDemo }, h("div", { class: rowClass, hidden: this.imageLoaded == false }, h("div", { class: "div-ci align-center", hidden: this.showVideo }, h("img", { ref: el => (this.image = el) })), h("div", { hidden: this.showVideo == false }, h("video", { id: "howTo", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { class: "text-center" }, h("h1", { class: titleClass }, this.topTitle), h("p", { class: "font-size-2", hidden: this.subTitle == '' }, this.subTitle)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(), hidden: this.showVideo == true }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
+    let howTo = this.showVideo == true ? (h("div", { class: "container bg-black" }, h("div", { class: "container-video" }, h("div", null, h("video", { id: "howTo", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { class: "capture-title" }, h("h1", { class: "color-white text-center" }, this.topTitle), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))) : (h("div", { class: "container" }, h("div", { class: "row", hidden: this.imageLoaded == false }, h("div", { class: "div-ci align-center" }, h("img", { ref: el => (this.image = el) })), h("div", { class: "text-center" }, h("h1", { class: "color-black-2" }, this.topTitle), h("p", { class: "font-size-2", hidden: this.subTitle == '' }, this.subTitle)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
+    return howTo;
   }
 };
 HowToInfo.style = howToInfoCss;
@@ -5252,7 +5242,7 @@ function v4(options, buf, offset) {
 }
 
 const name = "@ekyc_qoobiss/qbs-ect-cmp";
-const version$1 = "3.6.84";
+const version$1 = "3.6.86";
 const description = "Person Identification Component";
 const main = "./dist/index.cjs.js";
 const module = "./dist/index.js";