@ekyc_qoobiss/qbs-ect-cmp 2.1.2 → 2.1.3

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

@@ -1,24 +1,41 @@
 import { h } from '@stencil/core';
 import { IdCaptureValues, SelfieCaptureValues } from '../../../helpers/textValues';
+import { delay } from '../../../utils/utils';
 export class CaptureError {
   constructor() {
     this.type = undefined;
+    this.buttonEnabled = undefined;
+    this.buttonText = undefined;
   }
-  componentWillRender() {
+  async componentWillRender() {
+    this.buttonEnabled = false;
     if (this.type == 'ID') {
-      this.imagePath = 'https://ekyc.blob.core.windows.net/$web/capture-error_idError.png';
-      this.description = IdCaptureValues.Error;
+      this.titleR1 = IdCaptureValues.ErrorTitleR1;
+      this.titleR2 = IdCaptureValues.ErrorTitleR2;
+      this.descriptionR1 = IdCaptureValues.ErrorR1;
+      this.descriptionR2 = IdCaptureValues.ErrorR2;
     }
     if (this.type == 'LIVENESS') {
-      this.imagePath = 'https://ekyc.blob.core.windows.net/$web/capture-error_selfieError.png';
-      this.description = SelfieCaptureValues.Error;
+      this.titleR1 = SelfieCaptureValues.ErrorTitleR1;
+      this.titleR2 = SelfieCaptureValues.ErrorTitleR2;
+      this.descriptionR1 = SelfieCaptureValues.ErrorR1;
+      this.descriptionR2 = SelfieCaptureValues.ErrorR2;
     }
   }
+  async componentDidLoad() {
+    for (let i = 1; i <= 5; i++) {
+      this.buttonText = i.toString();
+      await delay(1000);
+    }
+    this.buttonText = IdCaptureValues.Button;
+    this.buttonEnabled = true;
+  }
   buttonClick() {
+    this.buttonEnabled = false;
     this.eventCaptureErrorDone.emit();
   }
   render() {
-    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: "buletin-container" }, h("img", { class: "w-45", src: this.imagePath })), h("div", null, h("p", { class: "color-red font-weight-bold font-size-2 text-center mt-10" }, this.description)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", onClick: () => this.buttonClick() }, IdCaptureValues.Button), h("p", { class: "main-text font-size-18 text-right mb-0" }, IdCaptureValues.FooterText))))));
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("h1", { class: "color-red" }, this.titleR1), h("h1", { class: "color-red" }, this.titleR2), h("div", null, h("p", { class: "color-red font-weight-bold font-size-3 mt-5" }, this.descriptionR1), h("p", { class: "color-red font-weight-bold font-size-3 mt-5" }, this.descriptionR2)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", type: "button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, IdCaptureValues.FooterText))))));
   }
   static get is() { return "capture-error"; }
   static get originalStyleUrls() {
@@ -52,6 +69,12 @@ export class CaptureError {
       }
     };
   }
+  static get states() {
+    return {
+      "buttonEnabled": {},
+      "buttonText": {}
+    };
+  }
   static get events() {
     return [{
         "method": "eventCaptureErrorDone",

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

@@ -9,12 +9,15 @@ export class HowToInfo {
     this.subTitle = undefined;
     this.imagePath = undefined;
     this.buttonText = undefined;
+    this.buttonEnabled = undefined;
   }
   buttonClick() {
+    this.buttonEnabled = false;
     this.eventHowToInfoDone.emit();
   }
   componentWillLoad() {
     this.subTitle = '';
+    this.buttonEnabled = true;
     if (store.flowStatus == FlowStatus.ID) {
       this.topTitle = HowToValues.IdTitile;
       this.imagePath = 'https://ekyc.blob.core.windows.net/$web/howto_id.png';
@@ -35,7 +38,7 @@ export class HowToInfo {
   }
   render() {
     let sub = this.subTitle != '' ? h("p", { class: "font-size-2" }, this.subTitle) : null;
-    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: "div-ci align-center" }, h("img", { src: this.imagePath })), h("div", { class: "text-center" }, h("h1", null, this.topTitle), sub), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, HowToValues.FooterText))))));
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: "div-ci align-center" }, h("img", { src: this.imagePath })), h("div", { class: "text-center" }, h("h1", null, this.topTitle), sub), 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" }, HowToValues.FooterText))))));
   }
   static get is() { return "how-to-info"; }
   static get originalStyleUrls() {
@@ -74,7 +77,8 @@ export class HowToInfo {
       "topTitle": {},
       "subTitle": {},
       "imagePath": {},
-      "buttonText": {}
+      "buttonText": {},
+      "buttonEnabled": {}
     };
   }
   static get events() {

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

@@ -6,11 +6,11 @@ import { IdCaptureValues } from '../../../helpers/textValues';
 import { IDML5Detector } from '../../../libs/IDML5Detector/IDML5Detector';
 import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
 import { IDPose } from '../../../libs/IDML5Detector/IDPose';
+import { delay } from '../../../utils/utils';
 // import { IDPose } from '../../libs/IDML5Detector/IDPose';
 export class IdBackCapture {
   // @State() private animationPath: string;
   constructor() {
-    this.delay = ms => new Promise(res => setTimeout(res, ms));
     this.photoIsReady = photos => {
       //this.closeCamera();
       this.eventPhotoCapture.emit(photos);
@@ -33,7 +33,7 @@ export class IdBackCapture {
     this.titleMesage = IdCaptureValues.IDPoseMapping[event.detail];
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.BackTilted];
     this.demoVideo.play();
-    await this.delay(IdCaptureValues.VideoLenght);
+    await delay(IdCaptureValues.VideoLenght);
     this.showDemo = false;
   }
   eventVideoStarted(event) {
@@ -51,11 +51,11 @@ export class IdBackCapture {
     this.titleMesage = IdCaptureValues.TtileRotate;
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Rotate];
     this.demoVideo.play();
-    await this.delay(IdCaptureValues.VideoLenght);
+    await delay(IdCaptureValues.VideoLenght);
     this.titleMesage = IdCaptureValues.TitleBack;
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.BackStraight];
     this.demoVideo.play();
-    await this.delay(IdCaptureValues.VideoLenght);
+    await delay(IdCaptureValues.VideoLenght);
     this.showDemo = false;
     this.openCamera();
   }

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

@@ -6,11 +6,11 @@ import { IdCaptureValues } from '../../../helpers/textValues';
 import { IDML5Detector } from '../../../libs/IDML5Detector/IDML5Detector';
 import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
 import { IDPose } from '../../../libs/IDML5Detector/IDPose';
+import { delay } from '../../../utils/utils';
 // import { IDPose } from '../../libs/IDML5Detector/IDPose';
 export class IdCapture {
   // @State() private animationPath: string;
   constructor() {
-    this.delay = ms => new Promise(res => setTimeout(res, ms));
     this.photoIsReady = photos => {
       //this.closeCamera();
       this.eventPhotoCapture.emit(photos);
@@ -33,7 +33,7 @@ export class IdCapture {
     this.titleMesage = IdCaptureValues.IDPoseMapping[event.detail];
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Tilted];
     this.demoVideo.play();
-    await this.delay(IdCaptureValues.VideoLenght);
+    await delay(IdCaptureValues.VideoLenght);
     this.showDemo = false;
   }
   eventVideoStarted(event) {
@@ -51,7 +51,7 @@ export class IdCapture {
   async componentDidLoad() {
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Straight];
     this.demoVideo.play();
-    await this.delay(IdCaptureValues.VideoLenght);
+    await delay(IdCaptureValues.VideoLenght);
     this.showDemo = false;
     this.openCamera();
   }

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

@@ -5,10 +5,10 @@ import { Stream } from '../../../helpers/Stream';
 import { SelfieCaptureValues } from '../../../helpers/textValues';
 import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
 import { FacePose } from '../../../libs/FaceML5Detector/FacePose';
+import { delay } from '../../../utils/utils';
 export class SelfieCapture {
   // @State() private animationPath: string;
   constructor() {
-    this.delay = ms => new Promise(res => setTimeout(res, ms));
     this.photoIsReady = photos => {
       //this.closeCamera();
       this.eventPhotoCapture.emit(photos);
@@ -39,7 +39,7 @@ export class SelfieCapture {
       this.demoEnded = false;
       this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[event.detail];
       this.demoVideo.play();
-      await this.delay(SelfieCaptureValues.VideoLenght);
+      await delay(SelfieCaptureValues.VideoLenght);
       this.demoEnded = true;
     }
   }
@@ -61,7 +61,7 @@ export class SelfieCapture {
   async componentDidLoad() {
     this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[FacePose.Main];
     this.demoVideo.play();
-    await this.delay(SelfieCaptureValues.VideoLenght);
+    await delay(SelfieCaptureValues.VideoLenght);
     this.demoEnded = true;
     this.openCamera();
   }

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

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
 import Events from '../../../helpers/Events';
+import store from '../../../helpers/store';
 export class ErrorEnd {
   constructor() {
     this.message = undefined;
@@ -10,7 +11,7 @@ export class ErrorEnd {
     Events.flowError(this.errorTitle + ' ' + this.message);
   }
   render() {
-    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: "text-center" }, h("h1", null, this.errorTitle)), h("div", null, h("p", { class: "color-red font-weight-bold font-size-2 text-center mt-10" }, this.message)))));
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: "text-center" }, h("h1", null, this.errorTitle)), h("div", { class: "text-center" }, h("p", null, store.requestId)), h("div", null, h("p", { class: "color-red font-weight-bold font-size-2 text-center mt-10" }, this.message)))));
   }
   static get is() { return "error-end"; }
   static get originalStyleUrls() {

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

@@ -7,9 +7,9 @@ import Events from '../../../helpers/Events';
 import { OrderStatuses } from '../../../models/OrderStatuses';
 import { FlowStatus } from '../../../models/FlowStatus';
 import { FlowSteps } from '../../../models/FlowSteps';
+import { delay } from '../../../utils/utils';
 export class MobileRedirect {
   constructor() {
-    this.delay = ms => new Promise(res => setTimeout(res, ms));
     this.infoTextTop = undefined;
     this.infoTextBottom = undefined;
     this.contact = undefined;
@@ -50,11 +50,11 @@ export class MobileRedirect {
     catch (e) {
       this.apiErrorEvent.emit(e);
     }
-    await this.delay(5000);
+    await delay(5000);
     await this.checkStatus();
     while (this.orderStatus == OrderStatuses.Capturing || this.orderStatus == OrderStatuses.Waiting) {
       await this.checkStatus();
-      await this.delay(5000);
+      await delay(5000);
     }
   }
   async checkStatus() {

package/dist/collection/components/identification-component/identification-component.css

@@ -646,6 +646,9 @@ a {
 .mt-10 {
   margin-top: 10vh;
 }
+.mt-5 {
+  margin-top: 5vh;
+}
 .pos-relative {
   position: relative;
 }

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

@@ -7,6 +7,7 @@ import { ML5 } from '../../helpers/ML5';
 import { FlowStatus } from '../../models/FlowStatus';
 import Events from '../../helpers/Events';
 import * as uuid from 'uuid';
+import packageJson from '../../../package.json';
 export class IdentificationComponent {
   async onTokenChange(newValue, _oldValue) {
     if (store.debug)
@@ -206,7 +207,7 @@ export class IdentificationComponent {
         this.redirect_id = store.redirectId;
       }
       if (store.token != '' && (store.requestId != '' || store.redirectId != '')) {
-        store.initialised = await this.apiCall.AddIdentificationRequest(this.device);
+        store.initialised = await this.apiCall.AddIdentificationRequest(this.device, packageJson.version);
         if (!this.order_id || this.order_id == '') {
           this.order_id = store.requestId;
         }

package/dist/collection/helpers/ApiCall.js

@@ -55,7 +55,7 @@ export class ApiCall {
     let jsonResp = await this.post(this.urls.OtpCheck, JSON.stringify(data));
     return jsonResp.valid;
   }
-  async AddIdentificationRequest(deviceInfo) {
+  async AddIdentificationRequest(deviceInfo, version) {
     if (store.debug)
       console.log('Calling identity request with store:' + JSON.stringify(store));
     let data = {
@@ -63,6 +63,7 @@ export class ApiCall {
       clientDeviceInfo: JSON.stringify(deviceInfo),
       redirectId: store.redirectId,
       phoneNumber: store.phoneNumber,
+      version: version,
     };
     let jsonResp = await this.post(this.urls.IdentityInsert, JSON.stringify(data));
     if (store.requestId == '') {

package/dist/collection/helpers/textValues.js

@@ -56,7 +56,10 @@ IdCaptureValues.Button = 'Încerc din nou';
 IdCaptureValues.Title = 'Încadrează actul de identitate în chenarul de pe ecran.';
 IdCaptureValues.TitleBack = 'Încadrează spatele actului de identitate în chenarul de pe ecran.';
 IdCaptureValues.TtileRotate = 'Întoarce actul de identitate.';
-IdCaptureValues.Error = 'Procesul a eșuat. Te rugăm să respecți întocmai instrucțiunile de pe ecran. Ai grijă să încadrezi integral actul în chenraul de pe ecran și să nu apară reflexii de lumină pe suprafața acestuia.';
+IdCaptureValues.ErrorTitleR1 = 'Nu am putut colecta informațiile din actul de identitate!';
+IdCaptureValues.ErrorTitleR2 = 'Te rugăm să mai încerci o dată!';
+IdCaptureValues.ErrorR1 = 'Încadrează actul de identitate în așa fel încât chenarul să se potrivească perfect pe colțurile actului de identitate. Trebuie să fie vizibilă întreaga suprafață a actului de identitate. ';
+IdCaptureValues.ErrorR2 = 'Ai grijă să te afli într-o zonă cu suficientă lumină și să nu acoperi părți ale actului de identitate cu degetele. Ai grijă de asemenea să nu se formeze reflexii de lumină pe suprafața acestuia.';
 IdCaptureValues.IDPoseMapping = {
   0: '',
   1: 'Înclină actul de identitate spre spate.',
@@ -76,7 +79,10 @@ export class SelfieCaptureValues extends GlobalValues {
 }
 SelfieCaptureValues.Title = 'Încadrează fața în chenarul de pe ecran.';
 SelfieCaptureValues.FinalTitle = 'Îndreaptă capul și încadrează fața în chenarul de pe ecran.';
-SelfieCaptureValues.Error = 'Procesul a eșuat. Te rugăm să respecți întocmai instrucțiunile de pe ecran.';
+SelfieCaptureValues.ErrorTitleR1 = 'Procesul a eșuat!';
+SelfieCaptureValues.ErrorTitleR2 = 'Te rugăm să mai încerci o dată!';
+SelfieCaptureValues.ErrorR1 = 'Încadrează fața în așa fel încât chenarul să se suprapună peste linia bărbiei și a frunții, exact așa cum vezi în animația de pe ecran. ';
+SelfieCaptureValues.ErrorR2 = 'Rămâi cu fața încadrată în chenar și execută gestul solicitat după ce animația cu explicația a dispărut de pe ecran.';
 SelfieCaptureValues.Loading = 'Transferăm datele. Asteptați...';
 SelfieCaptureValues.FacePoseMapping = {
   0: 'Întoarce capul spre stânga.',

package/dist/collection/libs/FaceML5Detector/FaceML5Detector.js

@@ -8,6 +8,7 @@ import face_white_svg from '../../assets/canvas-masks/face_white.svg';
 import face_green_svg from '../../assets/canvas-masks/face_green.svg';
 import { GlobalValues } from '../../helpers/textValues';
 import store from '../../helpers/store';
+import { delay } from '../../utils/utils';
 export class FaceML5Detector {
   static getInstance(stream, isMobile) {
     if (!FaceML5Detector.instance) {
@@ -49,7 +50,7 @@ export class FaceML5Detector {
     this.height = this.videoElement.videoHeight;
     // this.videoRatio = getVideoRatio(this.videoElement);
     this.drawFrame('white');
-    this.delay(2000).then(() => this.detectFaces());
+    delay(2000).then(() => this.detectFaces());
   }
   detectFaces() {
     if (this.validFaceFoundAgain) {
@@ -85,7 +86,7 @@ export class FaceML5Detector {
           // this.frontFace = new FaceLandmarks(results[0], this.width, this.height);
           await this.drawFrame('green');
           this.requestedFacePose = this.stream.requestFacePose();
-          await this.delay(GlobalValues.VideoLenght);
+          await delay(GlobalValues.VideoLenght);
         }
         else if (this.validFaceFound && !this.validFaceFoundAgain) {
           await this.checkFacePose(results);
@@ -114,16 +115,13 @@ export class FaceML5Detector {
         const centerShift_y = (canvas.height - img.height * ratio) / 2;
         canvasContext.drawImage(img, 0, 0, img.width, img.height, centerShift_x + paddingX, centerShift_y + paddingY, img.width * ratio - paddingX * 2, img.height * ratio - paddingY * 2);
         if (color != 'white' && !persistent) {
-          await this.delay(1000);
+          await delay(1000);
           this.drawFrame('white');
         }
         resolve();
       };
     });
   }
-  delay(time) {
-    return new Promise(resolve => setTimeout(resolve, time));
-  }
   isSingleFace(results) {
     return results.length == this.MAX_NUMBER_FACES;
   }
@@ -210,7 +208,7 @@ export class FaceML5Detector {
       //   //this.stream.changeFacePose();
       // }
       if (this.requestedFacePose) {
-        await this.delay(3000);
+        await delay(3000);
         this.validFacePose = true;
         this.validFaceFoundAgain = true;
         await this.drawFrame('green', true);

package/dist/collection/libs/IDML5Detector/IDML5Detector.js

@@ -5,6 +5,7 @@ import { GlobalValues } from '../../helpers/textValues';
 import id_white_svg from '../../assets/canvas-masks/id_white.svg';
 // @ts-ignore
 import id_green_svg from '../../assets/canvas-masks/id_green.svg';
+import { delay } from '../../utils/utils';
 export class IDML5Detector {
   static getInstance(stream, isMobile) {
     if (!IDML5Detector.instance) {
@@ -32,7 +33,7 @@ export class IDML5Detector {
     // this.width = this.videoElement.videoWidth;
     // this.height = this.videoElement.videoHeight;
     this.drawFrame('white');
-    this.delay(2000).then(() => this.classifyVideo());
+    delay(2000).then(() => this.classifyVideo());
   }
   classifyVideo() {
     if (this.full == 1 && this.tilted == 1) {
@@ -61,7 +62,7 @@ export class IDML5Detector {
       this.stream.autoCapturing();
       await this.drawFrame('green');
       this.stream.changeIDPose(IDPose.Tilted);
-      await this.delay(GlobalValues.VideoLenght);
+      await delay(GlobalValues.VideoLenght);
     }
     if (results[0].label == 'tilted' && results[0].confidence > 0.8 && this.full == 1 && this.tilted == 0) {
       this.tilted = 1;
@@ -88,14 +89,11 @@ export class IDML5Detector {
         const centerShift_y = (canvas.height - img.height * ratio) / 2;
         canvasContext.drawImage(img, 0, 0, img.width, img.height, centerShift_x + paddingX, centerShift_y + paddingY, img.width * ratio - paddingX * 2, img.height * ratio - paddingY * 2);
         if (color != 'white' && !persistent) {
-          await this.delay(1000);
+          await delay(1000);
           this.drawFrame('white');
         }
         resolve();
       };
     });
   }
-  delay(time) {
-    return new Promise(resolve => setTimeout(resolve, time));
-  }
 }

package/dist/collection/utils/utils.js

@@ -8,3 +8,4 @@ export const blobToBase64 = (blob) => {
     reader.readAsDataURL(blob);
   });
 };
+export const delay = ms => new Promise(res => setTimeout(res, ms));