@ekyc_qoobiss/qbs-ect-cmp 3.6.28 → 3.6.29

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

@@ -1,5 +1,487 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cf54a432.js';
-import { A as ApiCall, B as BaseComponent, F as FlowSteps, s as state, a as FlowStatus, S as SessionKeys, M as MobileOS, b as Browser, c as FlowMoments, E as Events, I as IdCaptureValues, O as OrderStatuses, d as SelfieCaptureValues } from './base-component-b7f50d31.js';
+import { A as ApiUrls, s as state, F as FlowStatus, T as Translations, S as SessionKeys, I as IdCaptureValues, a as SelfieCaptureValues } from './TranslationUtils-8ceeb437.js';
+
+var OrderStatuses;
+(function (OrderStatuses) {
+  OrderStatuses[OrderStatuses["Capturing"] = 0] = "Capturing";
+  OrderStatuses[OrderStatuses["FinishedCapturing"] = 1] = "FinishedCapturing";
+  OrderStatuses[OrderStatuses["Waiting"] = 2] = "Waiting";
+  OrderStatuses[OrderStatuses["NotFound"] = 3] = "NotFound";
+  OrderStatuses[OrderStatuses["Aborted"] = 4] = "Aborted";
+})(OrderStatuses || (OrderStatuses = {}));
+
+var FlowSteps;
+(function (FlowSteps) {
+  FlowSteps[FlowSteps["ComponentLoaded"] = 'component-loaded'] = "ComponentLoaded";
+  FlowSteps[FlowSteps["MobileRedirect"] = 'mobile-redirect'] = "MobileRedirect";
+  FlowSteps[FlowSteps["Landing"] = 'landing'] = "Landing";
+  FlowSteps[FlowSteps["Agreements"] = 'agreements'] = "Agreements";
+  FlowSteps[FlowSteps["OtpSend"] = 'otp-send'] = "OtpSend";
+  FlowSteps[FlowSteps["OtpCheck"] = 'otp-check'] = "OtpCheck";
+  FlowSteps[FlowSteps["CiFront"] = 'ci-front'] = "CiFront";
+  FlowSteps[FlowSteps["CiFrontHowTo"] = 'ci-front-how-to'] = "CiFrontHowTo";
+  FlowSteps[FlowSteps["CiFrontCapture"] = 'ci-front-capture'] = "CiFrontCapture";
+  FlowSteps[FlowSteps["CiBack"] = 'ci-back'] = "CiBack";
+  FlowSteps[FlowSteps["CiBackHowTo"] = 'ci-back-how-to'] = "CiBackHowTo";
+  FlowSteps[FlowSteps["CiBackCapture"] = 'ci-back-capture'] = "CiBackCapture";
+  FlowSteps[FlowSteps["CiTilt"] = 'ci-tilt'] = "CiTilt";
+  FlowSteps[FlowSteps["CiError"] = 'ci-error'] = "CiError";
+  FlowSteps[FlowSteps["SelfieHowTo"] = 'selfie-how-to'] = "SelfieHowTo";
+  FlowSteps[FlowSteps["SelfieTilt"] = 'selfie-tilt'] = "SelfieTilt";
+  FlowSteps[FlowSteps["SelfieCapture"] = 'selfie-capture'] = "SelfieCapture";
+  FlowSteps[FlowSteps["Selfie"] = 'selfie'] = "Selfie";
+  FlowSteps[FlowSteps["SelfieError"] = 'selfie-error'] = "SelfieError";
+  FlowSteps[FlowSteps["End"] = 'end'] = "End";
+  FlowSteps[FlowSteps["CameraError"] = 'camera-error'] = "CameraError";
+})(FlowSteps || (FlowSteps = {}));
+var FlowMoments;
+(function (FlowMoments) {
+  FlowMoments[FlowMoments["Initialized"] = 'initialized'] = "Initialized";
+  FlowMoments[FlowMoments["Finalized"] = 'finalized'] = "Finalized";
+  FlowMoments[FlowMoments["None"] = 'none'] = "None";
+})(FlowMoments || (FlowMoments = {}));
+
+class ApiCall {
+  constructor() {
+    this.serviceErrors = ['Service Unavailable', 'Unauthorized'];
+    this.toBase64 = (file) => new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = error => reject(error);
+    });
+    this.urls = new ApiUrls();
+  }
+  // private async http2<T>(method: string, url: string, data: string): Promise<T> {
+  //   return new Promise((resolve, reject) => {
+  //     var xhr = new XMLHttpRequest();
+  //     xhr.open(method, url);
+  //     xhr.onload = function () {
+  //       if (xhr.status >= 200 && xhr.status < 300) {
+  //         resolve(xhr.response);
+  //       } else {
+  //         reject({
+  //           status: xhr.status,
+  //           statusText: xhr.statusText,
+  //         });
+  //       }
+  //     };
+  //     xhr.onerror = function () {
+  //       reject({
+  //         status: xhr.status,
+  //         statusText: xhr.statusText,
+  //       });
+  //     };
+  //     xhr.send(data);
+  //   });
+  // }
+  async http(request) {
+    const response = await fetch(request);
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+    try {
+      // may error if there is no body
+      return await response.json();
+    }
+    catch (ex) {
+      throw new Error('No json found in response ' + ex);
+    }
+  }
+  async post(url, data, withRetry = true) {
+    var request = new Request(state.apiBaseUrl + url, {
+      method: 'POST',
+      body: data,
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'IDKYC-TOKEN ' + state.token,
+      },
+    });
+    try {
+      return await this.http(request);
+    }
+    catch (ex) {
+      if (!withRetry || this.serviceErrors.includes(ex.message)) {
+        throw ex;
+      }
+      this.AddLog('Error in post ', ex);
+      try {
+        var request2 = new Request(state.apiBaseUrl + url, {
+          method: 'POST',
+          body: data,
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': 'IDKYC-TOKEN ' + state.token,
+          },
+        });
+        return await this.http(request2);
+      }
+      catch (ex2) {
+        this.AddLog('Error in post ', ex2);
+        var request3 = new Request(state.apiBaseUrl + url, {
+          method: 'POST',
+          body: data,
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': 'IDKYC-TOKEN ' + state.token,
+          },
+        });
+        return await this.http(request3);
+      }
+    }
+  }
+  async get(url, withRetry = true) {
+    var request = new Request(state.apiBaseUrl + url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'IDKYC-TOKEN ' + state.token,
+      },
+    });
+    try {
+      return await this.http(request);
+    }
+    catch (ex) {
+      if (!withRetry || this.serviceErrors.includes(ex.message)) {
+        throw ex;
+      }
+      this.AddLog('Error in get ', ex);
+      try {
+        var request2 = new Request(state.apiBaseUrl + url, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': 'IDKYC-TOKEN ' + state.token,
+          },
+        });
+        return await this.http(request2);
+      }
+      catch (ex2) {
+        this.AddLog('Error in get ', ex2);
+        var request3 = new Request(state.apiBaseUrl + url, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': 'IDKYC-TOKEN ' + state.token,
+          },
+        });
+        return await this.http(request3);
+      }
+    }
+  }
+  async SendOTPCode(requestId, phoneNumber) {
+    let data = { requestId: requestId, phone: phoneNumber };
+    let jsonResp = await this.post(this.urls.OtpSend, JSON.stringify(data));
+    return jsonResp.sent;
+  }
+  async CheckOTPCode(requestId, otpCode) {
+    let data = { requestId: requestId, otp: otpCode };
+    let jsonResp = await this.post(this.urls.OtpCheck, JSON.stringify(data));
+    return jsonResp.valid;
+  }
+  async AddIdentificationRequest(deviceInfo, version) {
+    if (state.debug)
+      console.log('Calling identity request with store:' + JSON.stringify(state));
+    let data = {
+      requestId: state.requestId,
+      clientDeviceInfo: JSON.stringify(deviceInfo),
+      redirectId: state.redirectId,
+      phoneNumber: state.phoneNumber,
+      version: version,
+    };
+    let jsonResp = await this.post(this.urls.IdentityInsert, JSON.stringify(data));
+    if (state.requestId == '') {
+      state.requestId = jsonResp.requestId;
+    }
+    state.hasIdBack = jsonResp.hasIdBack;
+    state.hasIdTilt = jsonResp.hasIdTilt;
+    state.hasSelfieGesture = jsonResp.hasSelfieGesture;
+    state.agreementsValidation = jsonResp.agreementsValidation;
+    state.phoneValidation = jsonResp.phoneValidation;
+    state.phoneNumber = jsonResp.phoneNumber;
+    return true;
+  }
+  async UploadFileForRequestB64(requestId, type, file) {
+    let data = {
+      requestId: requestId,
+      type: type,
+      data: await this.toBase64(file),
+    };
+    let respJson = await this.post(this.urls.UploadCapture, JSON.stringify(data));
+    if (!state.hasIdBack && type == 'IdFront') {
+      return respJson.isValid;
+    }
+    if (state.hasIdBack && type == 'IdBack') {
+      return respJson.isValid;
+    }
+    if (type == 'Selfie') {
+      return respJson.isValid;
+    }
+    return true;
+  }
+  async GetAgreement(agreementType) {
+    let resp = await this.get(this.urls.GetAgreement + '?type=' + agreementType + '&requestId=' + state.requestId);
+    return resp.htmlText;
+  }
+  async GenerateAgreement(agreementType) {
+    let data = { requestId: state.requestId, documentType: agreementType };
+    let resp = await this.post(this.urls.GenerateAgreement, JSON.stringify(data));
+    return resp.generation;
+  }
+  async GetStatus(requestId) {
+    let resp = await this.get(this.urls.GetStatus + '?orderId=' + requestId);
+    return OrderStatuses[resp.status];
+  }
+  async SendLink(link, phoneNumber) {
+    let data = { requestId: state.requestId, link: link, phoneNumber: phoneNumber };
+    let resp = await this.post(this.urls.SendLink, JSON.stringify(data));
+    return resp.sent;
+  }
+  async AddLog(error, context) {
+    try {
+      let data = {
+        requestId: state.requestId,
+        action: FlowStatus[state.flowStatus],
+        message: JSON.stringify({ error, context }),
+      };
+      let result = await this.post(this.urls.AddLog, JSON.stringify(data), false);
+      return result.saved;
+    }
+    catch (_a) { }
+  }
+  async AddStep(step, moment) {
+    let data = { requestId: state.requestId, redirectId: state.redirectId, step: FlowSteps[step], moment: FlowMoments[moment], timestamp: new Date().toISOString() };
+    let result = await this.post(this.urls.AddStep, JSON.stringify(data));
+    return result.saved;
+  }
+  async AbortRequest() {
+    let result = await this.post(this.urls.AbortRequest, JSON.stringify({ requestId: state.requestId }));
+    return result.saved;
+  }
+}
+
+var MobileOS;
+(function (MobileOS) {
+  MobileOS["Android"] = "android";
+  MobileOS["iOS"] = "ios";
+  MobileOS["Unknown"] = "unknown";
+  MobileOS["WindowsPhone"] = "Windows Phone";
+})(MobileOS || (MobileOS = {}));
+var DesktopOS;
+(function (DesktopOS) {
+  DesktopOS["Linux"] = "linux";
+  DesktopOS["MacOS"] = "mac_os";
+  DesktopOS["Unix"] = "unix";
+  DesktopOS["Unknown"] = "unknown";
+  DesktopOS["Windows"] = "windows";
+})(DesktopOS || (DesktopOS = {}));
+var Browser;
+(function (Browser) {
+  Browser["Chrome"] = "chrome";
+  Browser["Firefox"] = "firefox";
+  Browser["Safari"] = "safari";
+  Browser["Mi"] = "mi";
+  Browser["Unknown"] = "unknown";
+})(Browser || (Browser = {}));
+
+class DeviceDetection {
+  constructor() {
+    var _a, _b, _c, _d;
+    this.supportedScreenOrientation = (_b = (_a = ((screen === null || screen === void 0 ? void 0 : screen.orientation) || {}).type) !== null && _a !== void 0 ? _a : screen.mozOrientation) !== null && _b !== void 0 ? _b : screen.msOrientation;
+    this.safariScreenOrientation = !(screen === null || screen === void 0 ? void 0 : screen.orientation) && matchMedia('(orientation: portrait)').matches ? 'portrait-primary' : 'landscape-primary';
+    this.initialScreenOrientation = (_d = (_c = this.supportedScreenOrientation) !== null && _c !== void 0 ? _c : this.safariScreenOrientation) !== null && _d !== void 0 ? _d : 'portrait-primary';
+    this.userAgent = navigator.userAgent || navigator.vendor || window.opera || undefined;
+    this.isMobile = this.isMobileDevice();
+    this.isTablet = this.isTabletDevice();
+    this.isDesktop = !this.isMobile && !this.isTablet;
+  }
+  // Device typology
+  isMobileDevice() {
+    const regexs = [/(Android)(.+)(Mobile)/i, /BlackBerry/i, /iPhone|iPod/i, /Opera Mini/i, /IEMobile/i];
+    return regexs.some(b => this.userAgent.match(b));
+  }
+  isTabletDevice() {
+    const regex = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/;
+    return regex.test(this.userAgent.toLowerCase());
+  }
+  // Device Operating System
+  getMobileOS() {
+    if (this.isMobileDevice()) {
+      if (/windows phone/i.test(this.userAgent))
+        return MobileOS.WindowsPhone;
+      else if (/android/i.test(this.userAgent))
+        return MobileOS.Android;
+      else if (/iPad|iPhone|iPod/.test(this.userAgent) && !window.MSStream)
+        return MobileOS.iOS;
+      return MobileOS.Unknown;
+    }
+    else
+      return undefined;
+  }
+  getDesktopOS() {
+    if (this.isDesktop) {
+      if (this.userAgent.indexOf('Win') !== -1)
+        return DesktopOS.Windows;
+      else if (this.userAgent.indexOf('Mac') !== -1)
+        return DesktopOS.MacOS;
+      else if (this.userAgent.indexOf('X11') !== -1)
+        return DesktopOS.Unix;
+      else if (this.userAgent.indexOf('Linux') !== -1)
+        return DesktopOS.Linux;
+      return DesktopOS.Unknown;
+    }
+    else
+      return undefined;
+  }
+  getDeviceOS() {
+    var _a;
+    return (_a = this.getMobileOS()) !== null && _a !== void 0 ? _a : this.getDesktopOS();
+  }
+  getBrowser() {
+    if (/XiaoMi/i.test(this.userAgent) || /MiuiBrowser/i.test(this.userAgent))
+      return Browser.Mi;
+    var isChrome = /chrome/i.test(this.userAgent);
+    if (isChrome)
+      return Browser.Chrome;
+    if (/firefox/i.test(navigator.userAgent))
+      return Browser.Firefox;
+    else if (!isChrome && /safari/i.test(navigator.userAgent))
+      return Browser.Safari;
+    else
+      return Browser.Unknown;
+  }
+  getDevice() {
+    var device = {
+      isDesktop: this.isDesktop,
+      desktopOS: this.getDesktopOS(),
+      isWindowsDesktop: this.getDeviceOS() === DesktopOS.Windows,
+      isLinuxOrUnixDesktop: this.getDeviceOS() === DesktopOS.Linux || this.getDeviceOS() === DesktopOS.Unix,
+      isMobile: this.isMobile,
+      mobileOS: this.getMobileOS(),
+      isAndroidDevice: this.getDeviceOS() === MobileOS.Android,
+      isAppleDevice: this.getDeviceOS() === MobileOS.iOS || this.getDeviceOS() === DesktopOS.MacOS,
+      isUnknownMobileDevice: this.getDeviceOS() === MobileOS.Unknown,
+      browser: this.getBrowser(),
+      isTablet: this.isTablet,
+      initialScreenOrientation: this.initialScreenOrientation,
+    };
+    return device;
+  }
+}
+
+class Events {
+  static init(element) {
+    this.callingModule = element;
+  }
+  static flowEvent(step, moment) {
+    const eventName = `ect-${step.toString()}-${moment.toString()}-event`;
+    this.callingModule.dispatchEvent(new CustomEvent(eventName, {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static flowStarted() {
+    this.callingModule.dispatchEvent(new CustomEvent('ect-started', {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static flowAborted() {
+    sessionStorage.clear();
+    this.callingModule.dispatchEvent(new CustomEvent('ect-aborted', {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static flowCompleted() {
+    sessionStorage.clear();
+    this.callingModule.dispatchEvent(new CustomEvent('ect-completed', {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static flowError(error) {
+    sessionStorage.clear();
+    this.callingModule.dispatchEvent(new CustomEvent('ect-error', {
+      detail: { error },
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static tokenExpired() {
+    sessionStorage.clear();
+    this.callingModule.dispatchEvent(new CustomEvent('ect-session-expired', {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+}
+
+class BaseComponent {
+  constructor(step) {
+    this.apiErrorEvent = null;
+    this.processError = null;
+    this.apiCall = new ApiCall();
+    if (step)
+      this.flowStep = step;
+    if (!state.device) {
+      state.device = new DeviceDetection().getDevice();
+    }
+  }
+  setEventEmitter(event) {
+    this.apiErrorEvent = event;
+  }
+  setErrorCallback(callback) {
+    this.processError = callback;
+  }
+  async logStep(step, moment) {
+    Events.flowEvent(step, moment);
+    try {
+      await this.apiCall.AddStep(step, moment);
+    }
+    catch (e) {
+      if (this.apiErrorEvent)
+        this.apiErrorEvent.emit(e);
+      else
+        this.processError(e, `${step}-${moment}`);
+    }
+  }
+  async initialize() {
+    Events.flowEvent(this.flowStep, FlowMoments.Initialized);
+    try {
+      await this.apiCall.AddStep(this.flowStep, FlowMoments.Initialized);
+    }
+    catch (e) {
+      if (this.apiErrorEvent)
+        this.apiErrorEvent.emit(e);
+      else
+        this.processError(e, `${this.flowStep}-${FlowMoments.Initialized}`);
+    }
+  }
+  async finalize() {
+    Events.flowEvent(this.flowStep, FlowMoments.Finalized);
+    try {
+      await this.apiCall.AddStep(this.flowStep, FlowMoments.Finalized);
+    }
+    catch (e) {
+      if (this.apiErrorEvent)
+        this.apiErrorEvent.emit(e);
+      else
+        this.processError(e, `${this.flowStep}-${FlowMoments.Finalized}`);
+    }
+  }
+}
 
 const agreementCheckCss = "";
 
@@ -14,9 +496,12 @@ const AgreementCheck = class {
     this.scrollClass = 'scroll';
     this.apiCalls = new ApiCall();
     this.buttonEnabled = true;
-    this.baseComponent = new BaseComponent(FlowSteps.CameraError);
+    this.baseComponent = new BaseComponent(FlowSteps.Agreements);
     this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
+  async componentWillLoad() {
+    this.translations = await Translations.getValues();
+  }
   async componentDidLoad() {
     try {
       this.htmlContent = await this.apiCalls.GetAgreement(this.agreementType);
@@ -30,7 +515,7 @@ const AgreementCheck = class {
     this.agreementAcceptance.emit({ agreementType: this.agreementType, result });
   }
   render() {
-    let content = (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: this.scrollClass, innerHTML: this.htmlContent }), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("div", { class: "d-flex two-buttons" }, h("button", { class: "normal-button red-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(false) }, this.baseComponent.translations.AgreementCheckValues.ButtonNo), h("button", { class: "normal-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(true) }, this.baseComponent.translations.AgreementCheckValues.ButtonYes)), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText))))));
+    let content = (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: this.scrollClass, innerHTML: this.htmlContent }), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("div", { class: "d-flex two-buttons" }, h("button", { class: "normal-button red-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(false) }, this.translations.AgreementCheckValues.ButtonNo), h("button", { class: "normal-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(true) }, this.translations.AgreementCheckValues.ButtonYes)), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
     return this.htmlContent ? content : h("div", null);
   }
 };
@@ -54,7 +539,8 @@ const AgreementInfo = class {
   async componentDidLoad() {
     await this.baseComponent.initialize();
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.translations = await Translations.getValues();
     this.openAgreements = false;
     this.openTerms = false;
   }
@@ -90,7 +576,7 @@ const AgreementInfo = class {
   render() {
     let agreementsCheck = h("agreement-check", { agreementType: "agreement" });
     let termsCheck = h("agreement-check", { agreementType: "terms" });
-    let mainComp = (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", { class: "text-center" }, this.baseComponent.translations.AgreementInfoValues.Title), h("div", { class: "d-flex space-between align-center" }, h("h3", { class: "main-text font-size-2", onClick: () => this.agreementsClicked() }, h("input", { type: "checkbox", readOnly: true, checked: this.agreementsChecked }), this.baseComponent.translations.AgreementInfoValues.Agreement)), h("div", { class: "d-flex space-between align-center" }, h("h3", { class: "main-text font-size-2", onClick: () => this.termsClicked() }, h("input", { type: "checkbox", readOnly: true, checked: this.termsChecked }), this.baseComponent.translations.AgreementInfoValues.Terms))), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", onClick: () => this.buttonClick() }, this.baseComponent.translations.AgreementInfoValues.Button), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText))))));
+    let mainComp = (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", { class: "text-center" }, this.translations.AgreementInfoValues.Title), h("div", { class: "d-flex space-between align-center" }, h("h3", { class: "main-text font-size-2", onClick: () => this.agreementsClicked() }, h("input", { type: "checkbox", readOnly: true, checked: this.agreementsChecked }), this.translations.AgreementInfoValues.Agreement)), h("div", { class: "d-flex space-between align-center" }, h("h3", { class: "main-text font-size-2", onClick: () => this.termsClicked() }, h("input", { type: "checkbox", readOnly: true, checked: this.termsChecked }), this.translations.AgreementInfoValues.Terms))), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", onClick: () => this.buttonClick() }, this.translations.AgreementInfoValues.Button), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
     return this.openAgreements ? agreementsCheck : this.openTerms ? termsCheck : mainComp;
   }
 };
@@ -4605,15 +5091,16 @@ const CameraError = class {
     this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   async componentWillLoad() {
+    this.translations = await Translations.getValues();
     this.buttonDisabled = false;
-    this.title = this.baseComponent.translations.CameraErrorValues.Title;
-    this.description = this.baseComponent.translations.CameraErrorValues.Description;
-    this.buttonText = this.baseComponent.translations.CameraErrorValues.Button;
+    this.title = this.translations.CameraErrorValues.Title;
+    this.description = this.translations.CameraErrorValues.Description;
+    this.buttonText = this.translations.CameraErrorValues.Button;
   }
   async componentDidLoad() {
     await this.baseComponent.initialize();
     if (state.device.mobileOS != MobileOS.iOS) {
-      this.demoVideo.src = this.baseComponent.translations.CameraErrorValues.HowToLink;
+      this.demoVideo.src = this.translations.CameraErrorValues.HowToLink;
       this.demoVideo.loop = true;
       this.demoVideo.play();
     }
@@ -4639,7 +5126,7 @@ const CameraError = class {
     }
   }
   render() {
-    return (h("div", { class: "container" }, h("div", { class: "row" }, h("h1", { class: "color-red" }, this.title), h("div", null, h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.description)), h("div", { hidden: state.device.mobileOS == MobileOS.iOS }, h("video", { id: "howtoPermissions", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", type: "button", disabled: this.buttonDisabled, onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText))))));
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("h1", { class: "color-red" }, this.title), h("div", null, h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.description)), h("div", { hidden: state.device.mobileOS == MobileOS.iOS }, h("video", { id: "howtoPermissions", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", type: "button", disabled: this.buttonDisabled, onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
   }
 };
 CameraError.style = cameraErrorCss;
@@ -4656,18 +5143,19 @@ const CaptureError = class {
     this.baseComponent = new BaseComponent(FlowSteps.CiError);
   }
   async componentWillLoad() {
+    this.translations = await Translations.getValues();
     this.buttonEnabled = false;
     if (this.type == 'ID') {
-      this.titleR1 = this.baseComponent.translations.IdCaptureValues.ErrorTitleR1;
-      this.titleR2 = this.baseComponent.translations.IdCaptureValues.ErrorTitleR2;
-      this.descriptionR1 = this.baseComponent.translations.IdCaptureValues.ErrorR1;
-      this.descriptionR2 = this.baseComponent.translations.IdCaptureValues.ErrorR2;
+      this.titleR1 = this.translations.IdCaptureValues.ErrorTitleR1;
+      this.titleR2 = this.translations.IdCaptureValues.ErrorTitleR2;
+      this.descriptionR1 = this.translations.IdCaptureValues.ErrorR1;
+      this.descriptionR2 = this.translations.IdCaptureValues.ErrorR2;
     }
     if (this.type == 'LIVENESS') {
-      this.titleR1 = this.baseComponent.translations.SelfieCaptureValues.ErrorTitleR1;
-      this.titleR2 = this.baseComponent.translations.SelfieCaptureValues.ErrorTitleR2;
-      this.descriptionR1 = this.baseComponent.translations.SelfieCaptureValues.ErrorR1;
-      this.descriptionR2 = this.baseComponent.translations.SelfieCaptureValues.ErrorR2;
+      this.titleR1 = this.translations.SelfieCaptureValues.ErrorTitleR1;
+      this.titleR2 = this.translations.SelfieCaptureValues.ErrorTitleR2;
+      this.descriptionR1 = this.translations.SelfieCaptureValues.ErrorR1;
+      this.descriptionR2 = this.translations.SelfieCaptureValues.ErrorR2;
     }
   }
   async componentDidLoad() {
@@ -4676,7 +5164,7 @@ const CaptureError = class {
       this.buttonText = i.toString();
       await delay(1000);
     }
-    this.buttonText = this.baseComponent.translations.IdCaptureValues.Button;
+    this.buttonText = this.translations.IdCaptureValues.Button;
     this.buttonEnabled = true;
   }
   async buttonClick() {
@@ -4685,7 +5173,7 @@ const CaptureError = class {
     this.eventCaptureErrorDone.emit();
   }
   render() {
-    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-25 mt-5" }, this.descriptionR1), h("p", { class: "color-red font-weight-bold font-size-25 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" }, this.baseComponent.translations.GlobalValues.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-25 mt-5" }, this.descriptionR1), h("p", { class: "color-red font-weight-bold font-size-25 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" }, this.translations.GlobalValues.FooterText))))));
   }
 };
 CaptureError.style = captureErrorCss;
@@ -4698,13 +5186,15 @@ const EndRedirect = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.apiErrorEvent = createEvent(this, "apiError", 7);
-    this.baseComponent = new BaseComponent(FlowSteps.End);
+  }
+  async componentWillLoad() {
+    this.translations = await Translations.getValues();
   }
   async componentDidLoad() {
     Events.flowCompleted();
   }
   render() {
-    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", { class: "text-center" }, this.baseComponent.translations.CompleteValues.Title), h("p", { class: "main-text font-size-18 mt-8 text-center" }, this.baseComponent.translations.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" }, this.baseComponent.translations.CompleteValues.Message), h("p", null, state.requestId)), h("div", { class: "btn-buletin" }, h("p", { class: "main-text font-size-18 text-center mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", { class: "text-center" }, this.translations.CompleteValues.Title), h("p", { class: "main-text font-size-18 mt-8 text-center" }, this.translations.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" }, this.translations.CompleteValues.Message), h("p", null, state.requestId)), h("div", { class: "btn-buletin" }, h("p", { class: "main-text font-size-18 text-center mb-0" }, this.translations.GlobalValues.FooterText)))));
   }
 };
 EndRedirect.style = endRedirectCss;
@@ -4738,34 +5228,35 @@ const HowToInfo = class {
     this.buttonEnabled = false;
     this.eventHowToInfoDone.emit();
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.translations = await Translations.getValues();
     this.subTitle = '';
     this.buttonEnabled = true;
     if (state.flowStatus == FlowStatus.ID) {
-      this.topTitle = this.baseComponent.translations.HowToValues.IdTitile;
+      this.topTitle = this.translations.HowToValues.IdTitile;
       this.imagePath = 'https://ekyc.blob.core.windows.net/$web/howto_id.png';
-      this.buttonText = this.baseComponent.translations.HowToValues.IdButton;
+      this.buttonText = this.translations.HowToValues.IdButton;
       if (this.idSide == 'front') {
         this.baseComponent = new BaseComponent(FlowSteps.CiFrontHowTo);
-        this.subTitle = this.baseComponent.translations.HowToValues.IdSubTitileFace;
+        this.subTitle = this.translations.HowToValues.IdSubTitileFace;
       }
       if (this.idSide == 'back') {
         this.baseComponent = new BaseComponent(FlowSteps.CiBackHowTo);
-        this.subTitle = this.baseComponent.translations.HowToValues.IdSubTitileBack;
+        this.subTitle = this.translations.HowToValues.IdSubTitileBack;
       }
     }
     if (state.flowStatus == FlowStatus.LIVENESS) {
       this.baseComponent = new BaseComponent(FlowSteps.SelfieHowTo);
-      this.topTitle = this.baseComponent.translations.HowToValues.SelfieTitile;
-      this.subTitle = this.baseComponent.translations.HowToValues.SelfieSubTitile;
+      this.topTitle = this.translations.HowToValues.SelfieTitile;
+      this.subTitle = this.translations.HowToValues.SelfieSubTitile;
       this.imagePath = 'https://ekyc.blob.core.windows.net/$web/howto_selfie.png';
-      this.buttonText = this.baseComponent.translations.HowToValues.SelfieButton;
+      this.buttonText = this.translations.HowToValues.SelfieButton;
     }
     this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   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", disabled: !this.buttonEnabled, onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.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" }, this.translations.GlobalValues.FooterText))))));
   }
 };
 HowToInfo.style = howToInfoCss;
@@ -4937,6 +5428,7 @@ const IdBackCapture = class {
     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' });
@@ -4944,14 +5436,14 @@ const IdBackCapture = class {
   }
   async componentDidLoad() {
     await this.baseComponent.logStep(FlowSteps.CiBackCapture, FlowMoments.Initialized);
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.TtileRotate;
+    this.titleMesage = this.translations.IdCaptureValues.TtileRotate;
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Rotate];
     this.demoVideo.play();
-    await delay(this.baseComponent.translations.GlobalValues.VideoLenght);
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.TitleBack;
+    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.baseComponent.translations.GlobalValues.VideoLenght);
+    await delay(this.translations.GlobalValues.VideoLenght);
     this.showDemo = false;
     this.openCamera();
   }
@@ -4985,7 +5477,7 @@ const IdBackCapture = class {
     if (this.verified)
       return;
     this.verified = true;
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.Loading;
+    this.titleMesage = this.translations.IdCaptureValues.Loading;
     this.closeCamera();
     this.showDemo = true;
     this.demoVideo.src = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_id.mp4';
@@ -5010,7 +5502,7 @@ const IdBackCapture = class {
     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.baseComponent.translations.GlobalValues.FooterText)))));
+    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); }
 };
@@ -5046,7 +5538,8 @@ const IdCapture = class {
     this.cameraSize = event.detail;
   }
   async componentWillLoad() {
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.Title;
+    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' });
@@ -5056,7 +5549,7 @@ const IdCapture = class {
     await this.baseComponent.logStep(FlowSteps.CiFrontCapture, FlowMoments.Initialized);
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Straight];
     this.demoVideo.play();
-    await delay(this.baseComponent.translations.GlobalValues.VideoLenght);
+    await delay(this.translations.GlobalValues.VideoLenght);
     this.showDemo = false;
     this.openCamera();
   }
@@ -5098,7 +5591,7 @@ const IdCapture = class {
     if (this.verified)
       return;
     this.verified = true;
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.Loading;
+    this.titleMesage = this.translations.IdCaptureValues.Loading;
     this.closeCamera();
     this.showDemo = true;
     this.demoVideo.src = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_id.mp4';
@@ -5120,7 +5613,7 @@ const IdCapture = class {
     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.baseComponent.translations.GlobalValues.FooterText)))));
+    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); }
 };
@@ -5156,7 +5649,8 @@ const IdTilt = class {
     this.cameraSize = event.detail;
   }
   async componentWillLoad() {
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.IDPoseMapping;
+    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' });
@@ -5166,7 +5660,7 @@ const IdTilt = class {
     await this.baseComponent.logStep(FlowSteps.CiTilt, FlowMoments.Initialized);
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Tilted];
     this.demoVideo.play();
-    await delay(this.baseComponent.translations.GlobalValues.VideoLenght);
+    await delay(this.translations.GlobalValues.VideoLenght);
     this.showDemo = false;
     this.openCamera();
   }
@@ -5208,7 +5702,7 @@ const IdTilt = class {
     if (this.verified)
       return;
     this.verified = true;
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.Loading;
+    this.titleMesage = this.translations.IdCaptureValues.Loading;
     this.closeCamera();
     this.showDemo = true;
     this.demoVideo.src = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_id.mp4';
@@ -5230,7 +5724,7 @@ const IdTilt = class {
     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.baseComponent.translations.GlobalValues.FooterText)))));
+    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)))));
   }
   get component() { return getElement(this); }
 };
@@ -5302,7 +5796,7 @@ function v4(options, buf, offset) {
 }
 
 const name = "@ekyc_qoobiss/qbs-ect-cmp";
-const version$1 = "3.6.28";
+const version$1 = "3.6.29";
 const description = "Person Identification Component";
 const main = "./dist/index.cjs.js";
 const module = "./dist/index.js";
@@ -5622,6 +6116,7 @@ const LandingValidation = class {
   }
   async componentWillLoad() {
     Events.flowStarted();
+    this.translations = await Translations.getValues();
     this.baseComponent.apiCall = new ApiCall();
     this.buttonDisabled = false;
     await this.initRequest();
@@ -5633,10 +6128,10 @@ const LandingValidation = class {
   }
   async initRequest() {
     if (state.hasIdBack) {
-      this.warningText = this.baseComponent.translations.LandingValues.WarningMd;
+      this.warningText = this.translations.LandingValues.WarningMd;
     }
     else {
-      this.warningText = this.baseComponent.translations.LandingValues.Warning;
+      this.warningText = this.translations.LandingValues.Warning;
     }
   }
   async startFlow() {
@@ -5679,7 +6174,7 @@ const LandingValidation = class {
     }
   }
   render() {
-    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", { class: "text-center" }, this.baseComponent.translations.LandingValues.Title), h("div", { class: "d-flex space-between align-center" }, h("p", { class: "main-text font-size-2" }, this.baseComponent.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.baseComponent.translations.LandingValues.IdInfo)), h("div", { class: "img-text" }, h("div", { class: "bg-img" }, h("img", { src: deviceSvg })), h("h3", null, this.baseComponent.translations.LandingValues.DeviceInfo)), h("div", { class: "img-text" }, h("div", { class: "bg-img" }, h("img", { src: validationSvg })), h("h3", null, this.baseComponent.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.baseComponent.translations.LandingValues.Button), h("p", { class: "main-text font-size-2 link-text mb-0", onClick: () => this.leaveFlow() }, this.baseComponent.translations.LandingValues.ButtonLeave), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.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: !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))))));
   }
 };
 LandingValidation.style = landingValidationCss;
@@ -8579,8 +9074,9 @@ const MobileRedirect = class {
   }
   async componentWillLoad() {
     Events.flowStarted();
-    this.infoTextTop = this.baseComponent.translations.MobileRedirectValues.InfoTop;
-    this.infoTextBottom = this.baseComponent.translations.MobileRedirectValues.InfoBottom;
+    this.translations = await Translations.getValues();
+    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/';
     this.redirectLink = baseUri + envUri + '/mobileredirect?redirectId=' + state.redirectId;
@@ -8614,12 +9110,12 @@ const MobileRedirect = class {
       this.apiErrorEvent.emit({ message: 'No order was started for this process.' });
     }
     if (this.orderStatus == OrderStatuses.Capturing) {
-      this.infoTextTop = this.baseComponent.translations.MobileRedirectValues.InfoWaiting;
+      this.infoTextTop = this.translations.MobileRedirectValues.InfoWaiting;
       this.waitingMobile = true;
     }
     if (this.orderStatus == OrderStatuses.Aborted) {
       this.waitingMobile = false;
-      this.infoTextTop = this.baseComponent.translations.MobileRedirectValues.InfoAborted;
+      this.infoTextTop = this.translations.MobileRedirectValues.InfoAborted;
       Events.flowAborted();
     }
   }
@@ -8631,7 +9127,7 @@ const MobileRedirect = class {
       return;
     }
     this.waitingMobile = true;
-    this.infoTextTop = this.baseComponent.translations.MobileRedirectValues.InfoWaiting;
+    this.infoTextTop = this.translations.MobileRedirectValues.InfoWaiting;
     try {
       await this.baseComponent.apiCall.SendLink(this.redirectLink, this.contact);
     }
@@ -8649,7 +9145,7 @@ const MobileRedirect = class {
     ev.target.value = this.contact;
   }
   render() {
-    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { hidden: this.waitingMobile }, h("div", { class: "text-center" }, h("p", { class: "font-size-2" }, this.infoTextTop)), h("div", { class: "qr-canvas align-center" }, h("img", { src: this.qrCode })), h("div", { class: "text-center" }, h("p", { class: "font-size-2" }, this.infoTextBottom)), h("div", { class: "input-container mb-15" }, h("label", { class: "font-size-18 mb-1 color-red", hidden: this.invalidValue == false }, h("b", null, this.baseComponent.translations.MobileRedirectValues.Validation)), h("input", { type: "text", id: "codeInput", class: "main-input", disabled: this.prefilledPhone, value: this.contact, onInput: ev => this.handleChangeContact(ev) })), h("div", { class: "pos-relative" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", onClick: () => this.buttonClick() }, "Trimite"), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))), h("div", { hidden: this.waitingMobile == false }, h("div", { class: "text-center" }, h("p", { class: "font-size-2" }, this.infoTextTop))))));
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { hidden: this.waitingMobile }, h("div", { class: "text-center" }, h("p", { class: "font-size-2" }, this.infoTextTop)), h("div", { class: "qr-canvas align-center" }, h("img", { src: this.qrCode })), h("div", { class: "text-center" }, h("p", { class: "font-size-2" }, this.infoTextBottom)), h("div", { class: "input-container mb-15" }, h("label", { class: "font-size-18 mb-1 color-red", hidden: this.invalidValue == false }, h("b", null, this.translations.MobileRedirectValues.Validation)), h("input", { type: "text", id: "codeInput", class: "main-input", disabled: this.prefilledPhone, value: this.contact, onInput: ev => this.handleChangeContact(ev) })), h("div", { class: "pos-relative" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", onClick: () => this.buttonClick() }, "Trimite"), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText)))), h("div", { hidden: this.waitingMobile == false }, h("div", { class: "text-center" }, h("p", { class: "font-size-2" }, this.infoTextTop))))));
   }
 };
 MobileRedirect.style = mobileRedirectCss;
@@ -8985,8 +9481,9 @@ const SelfieCapture = class {
     this.captureHeight = height - Math.round((window.screen.height - height) / 2);
     this.captureWidth = Math.round((this.captureHeight * 9) / 16);
   }
-  componentWillLoad() {
-    this.titleMesage = this.baseComponent.translations.SelfieCaptureValues.Title;
+  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' });
@@ -8996,7 +9493,7 @@ const SelfieCapture = class {
     await this.baseComponent.logStep(FlowSteps.SelfieCapture, FlowMoments.Initialized);
     this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[FacePose.Main];
     this.demoVideo.play();
-    await delay(this.baseComponent.translations.GlobalValues.VideoLenght);
+    await delay(this.translations.GlobalValues.VideoLenght);
     this.demoEnded = true;
     this.openCamera();
   }
@@ -9037,7 +9534,7 @@ const SelfieCapture = class {
     if (this.verified)
       return;
     this.verified = true;
-    this.titleMesage = this.baseComponent.translations.SelfieCaptureValues.Loading;
+    this.titleMesage = this.translations.SelfieCaptureValues.Loading;
     this.closeCamera();
     this.demoEnded = false;
     this.demoVideo.src = this.uploadingLink;
@@ -9059,7 +9556,7 @@ const SelfieCapture = class {
     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.baseComponent.translations.GlobalValues.FooterText)))));
+    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)))));
   }
   get component() { return getElement(this); }
 };
@@ -9100,8 +9597,9 @@ const SelfieTilt = class {
     this.captureHeight = height - Math.round((window.screen.height - height) / 2);
     this.captureWidth = Math.round((this.captureHeight * 9) / 16);
   }
-  componentWillLoad() {
-    this.titleMesage = this.baseComponent.translations.SelfieCaptureValues.Title;
+  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' });
@@ -9110,11 +9608,11 @@ const SelfieTilt = class {
   async componentDidLoad() {
     this.mainStream = Stream.getInstance(VerificationMode.Tilt);
     await this.baseComponent.logStep(FlowSteps.SelfieTilt, FlowMoments.Initialized);
-    this.titleMesage = this.baseComponent.translations.SelfieCaptureValues.FacePoseMapping[Object.values(FacePose).indexOf(this.mainStream.facePose)];
+    this.titleMesage = this.translations.SelfieCaptureValues.FacePoseMapping[Object.values(FacePose).indexOf(this.mainStream.facePose)];
     this.demoEnded = false;
     this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[this.mainStream.facePose];
     this.demoVideo.play();
-    await delay(this.baseComponent.translations.GlobalValues.VideoLenght);
+    await delay(this.translations.GlobalValues.VideoLenght);
     this.demoEnded = true;
     this.openCamera();
   }
@@ -9154,7 +9652,7 @@ const SelfieTilt = class {
     if (this.verified)
       return;
     this.verified = true;
-    this.titleMesage = this.baseComponent.translations.SelfieCaptureValues.Loading;
+    this.titleMesage = this.translations.SelfieCaptureValues.Loading;
     this.closeCamera();
     this.demoEnded = false;
     this.demoVideo.src = this.uploadingLink;
@@ -9176,7 +9674,7 @@ const SelfieTilt = class {
     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.baseComponent.translations.GlobalValues.FooterText)))));
+    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)))));
   }
   get component() { return getElement(this); }
 };
@@ -9229,11 +9727,12 @@ const SmsCodeValidation = class {
   async disconnectedCallback() {
     await this.baseComponent.finalize();
   }
-  componentWillRender() {
+  async componentWillRender() {
+    this.translations = await Translations.getValues();
     if (state.flowStatus == FlowStatus.PHONE) {
-      this.title = this.baseComponent.translations.PhoneValidationValues.Title;
-      this.details = this.baseComponent.translations.PhoneValidationValues.Description;
-      this.buttonText = this.baseComponent.translations.PhoneValidationValues.Button;
+      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;
@@ -9241,9 +9740,9 @@ const SmsCodeValidation = class {
       }
     }
     if (state.flowStatus == FlowStatus.CODE || state.flowStatus == FlowStatus.CODEERROR) {
-      this.title = this.baseComponent.translations.CodeValidationValues.Title;
-      this.details = this.baseComponent.translations.CodeValidationValues.Description;
-      this.buttonText = this.baseComponent.translations.CodeValidationValues.Button;
+      this.title = this.translations.CodeValidationValues.Title;
+      this.details = this.translations.CodeValidationValues.Description;
+      this.buttonText = this.translations.CodeValidationValues.Button;
     }
   }
   async componentDidLoad() {
@@ -9269,15 +9768,15 @@ const SmsCodeValidation = class {
     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.baseComponent.translations.CodeValidationValues.Error);
+      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.baseComponent.translations.PhoneValidationValues.Label)), h("input", { type: "tel", id: "phoneInput", class: "main-input", disabled: this.prefilledPhone, onInput: ev => this.handleChangePhone(ev), value: this.phoneNumber })));
+      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.baseComponent.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), 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))))));
   }
 };
 SmsCodeValidation.style = smsCodeValidationCss;