@ekyc_qoobiss/qbs-ect-cmp 3.6.28 → 3.6.29

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

@@ -7,6 +7,7 @@ import { FlowStatus } from '../../../models/FlowStatus';
 import { FlowSteps } from '../../../models/FlowSteps';
 import { delay } from '../../../utils/utils';
 import { BaseComponent } from '../../base-component';
+import { Translations } from '../../../helpers/TranslationUtils';
 export class MobileRedirect {
   constructor() {
     this.infoTextTop = undefined;
@@ -25,8 +26,9 @@ export class MobileRedirect {
   }
   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 = store.environment == 'QA' ? 'test' : 'ect';
     let baseUri = store.hasIdBack ? 'https://onmd.id-kyc.com/' : 'https://onro.id-kyc.com/';
     this.redirectLink = baseUri + envUri + '/mobileredirect?redirectId=' + store.redirectId;
@@ -60,12 +62,12 @@ export class MobileRedirect {
       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();
     }
   }
@@ -78,7 +80,7 @@ export class MobileRedirect {
       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);
     }
@@ -96,7 +98,7 @@ export class MobileRedirect {
     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))))));
   }
   static get is() { return "mobile-redirect"; }
   static get originalStyleUrls() {

package/dist/collection/components/flow/sms-code-validation/sms-code-validation.js

@@ -3,6 +3,7 @@ import store from '../../../helpers/store';
 import { FlowStatus } from '../../../models/FlowStatus';
 import { FlowSteps } from '../../../models/FlowSteps';
 import { BaseComponent } from '../../base-component';
+import { Translations } from '../../../helpers/TranslationUtils';
 export class SmsCodeValidation {
   constructor() {
     this.title = undefined;
@@ -46,11 +47,12 @@ export class SmsCodeValidation {
   async disconnectedCallback() {
     await this.baseComponent.finalize();
   }
-  componentWillRender() {
+  async componentWillRender() {
+    this.translations = await Translations.getValues();
     if (store.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 (store.phoneNumber && store.phoneNumber != '') {
         this.phoneNumber = store.phoneNumber;
         this.prefilledPhone = true;
@@ -58,9 +60,9 @@ export class SmsCodeValidation {
       }
     }
     if (store.flowStatus == FlowStatus.CODE || store.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() {
@@ -86,15 +88,15 @@ export class SmsCodeValidation {
     let inputBlock;
     let errorBlock;
     if (store.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 (store.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))))));
   }
   static get is() { return "sms-code-validation"; }
   static get originalStyleUrls() {

package/dist/esm/TranslationUtils-8ceeb437.js

@@ -0,0 +1,339 @@
+import { a as getRenderingRef, f as forceUpdate } from './index-cf54a432.js';
+
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2000);
+const stencilSubscription = () => {
+    if (typeof getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const unwrap = (val) => (typeof val === 'function' ? val() : val);
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    const unwrappedState = unwrap(defaultState);
+    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        var _a;
+        // When resetting the state, the default state may be a function - unwrap it to invoke it.
+        // otherwise, the state won't be properly reset
+        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(unwrappedState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        // We need to unwrap the defaultState because it might be a function.
+        // Otherwise we might not be sending the right reset value.
+        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
+
+var FlowStatus;
+(function (FlowStatus) {
+  FlowStatus[FlowStatus["LANDING"] = 0] = "LANDING";
+  FlowStatus[FlowStatus["AGREEMENT"] = 1] = "AGREEMENT";
+  FlowStatus[FlowStatus["PHONE"] = 2] = "PHONE";
+  FlowStatus[FlowStatus["CODE"] = 3] = "CODE";
+  FlowStatus[FlowStatus["CODEERROR"] = 4] = "CODEERROR";
+  FlowStatus[FlowStatus["ID"] = 5] = "ID";
+  FlowStatus[FlowStatus["LIVENESS"] = 6] = "LIVENESS";
+  FlowStatus[FlowStatus["COMPLETE"] = 7] = "COMPLETE";
+  FlowStatus[FlowStatus["ERROREND"] = 8] = "ERROREND";
+  FlowStatus[FlowStatus["CAMERAERROR"] = 9] = "CAMERAERROR";
+  FlowStatus[FlowStatus["NONE"] = 10] = "NONE";
+})(FlowStatus || (FlowStatus = {}));
+
+class IdCaptureValues {
+}
+IdCaptureValues.IDPoseDemoMapping = {
+  0: 'https://ekyc.blob.core.windows.net/$web/animations/id/id_front.mp4',
+  1: 'https://ekyc.blob.core.windows.net/$web/animations/id/id_front_tilt.mp4',
+  2: 'https://ekyc.blob.core.windows.net/$web/animations/id/id_rotate.mp4',
+  3: 'https://ekyc.blob.core.windows.net/$web/animations/id/id_back.mp4',
+  4: 'https://ekyc.blob.core.windows.net/$web/animations/id/id_back_tilt.mp4',
+};
+class SelfieCaptureValues {
+}
+SelfieCaptureValues.FacePoseDemoMapping = {
+  0: 'https://ekyc.blob.core.windows.net/$web/animations/selfie/selfie_rotate_left.mp4',
+  1: 'https://ekyc.blob.core.windows.net/$web/animations/selfie/selfie_rotate_right.mp4',
+  2: 'https://ekyc.blob.core.windows.net/$web/animations/selfie/selfie_tilt_back.mp4',
+  3: 'https://ekyc.blob.core.windows.net/$web/animations/selfie/selfie_tilt_front.mp4',
+  // 4: 'https://ekyc.blob.core.windows.net/$web/animations/selfie/selfie_tilt_left.mp4',
+  // 5: 'https://ekyc.blob.core.windows.net/$web/animations/selfie/selfie_tilt_right.mp4',
+  4: 'https://ekyc.blob.core.windows.net/$web/animations/selfie/selfie_main.mp4',
+};
+class SessionKeys {
+}
+SessionKeys.FlowStatusKey = 'qbs-ect-flowstatus';
+SessionKeys.RequestIdKey = 'qbs-ect-requestid';
+SessionKeys.TokenKey = 'qbs-ect-token';
+SessionKeys.InitialisedKey = 'qbs-ect-initialised';
+SessionKeys.HasIdBackKey = 'qbs-ect-has-id-back';
+SessionKeys.AgreementValidationKey = 'qbs-ect-agreement-validation';
+SessionKeys.PhoneValidationKey = 'qbs-ect-phone-validation';
+SessionKeys.RefreshDoneKey = 'qbs-ect-refresh-done';
+class ApiUrls {
+  constructor() {
+    this.uriEnv = '/';
+    this.uriEnv = state.environment == 'QA' ? '/dev_' : '/';
+    this.OtpSend = this.uriEnv + 'validation/otp/send';
+    this.OtpCheck = this.uriEnv + 'validation/otp/check';
+    this.IdentityInsert = this.uriEnv + 'validation/identity/insert';
+    this.UploadCapture = this.uriEnv + 'validation/upload/capture';
+    this.GetAgreement = this.uriEnv + 'validation/agreement/content';
+    this.GenerateAgreement = this.uriEnv + 'validation/agreement/generate';
+    this.SendLink = this.uriEnv + 'validation/otp/sendlink';
+    this.GetStatus = this.uriEnv + 'validation/identity/status';
+    this.AddLog = this.uriEnv + 'validation/logs/add';
+    this.AddStep = this.uriEnv + 'validation/logs/step';
+    this.AbortRequest = this.uriEnv + 'validation/identity/abort';
+  }
+}
+
+const { state, onChange } = createStore({
+  flowStatus: FlowStatus.NONE,
+  environment: 'PROD',
+  debug: false,
+  requestId: '',
+  redirectId: '',
+  initialised: false,
+  token: '',
+  cameraIds: [],
+  cameraId: '',
+  hasIdBack: false,
+  hasSelfieGesture: false,
+  hasIdTilt: false,
+  agreementsValidation: true,
+  phoneValidation: true,
+  phoneNumber: '',
+  apiBaseUrl: 'https://apiro.id-kyc.com',
+  device: null,
+  langIso: 'ro',
+});
+onChange('environment', value => {
+  state.debug = value == 'QA';
+});
+onChange('flowStatus', value => {
+  sessionStorage.setItem(SessionKeys.FlowStatusKey, FlowStatus[value]);
+});
+onChange('token', value => {
+  sessionStorage.setItem(SessionKeys.TokenKey, value);
+});
+onChange('requestId', value => {
+  sessionStorage.setItem(SessionKeys.RequestIdKey, value);
+});
+onChange('initialised', value => {
+  sessionStorage.setItem(SessionKeys.InitialisedKey, String(value));
+});
+onChange('hasIdBack', value => {
+  sessionStorage.setItem(SessionKeys.HasIdBackKey, String(value));
+});
+onChange('agreementsValidation', value => {
+  sessionStorage.setItem(SessionKeys.AgreementValidationKey, String(value));
+});
+onChange('phoneValidation', value => {
+  sessionStorage.setItem(SessionKeys.PhoneValidationKey, String(value));
+});
+
+class TranslationsController {
+  async getValues() {
+    if (this.values) {
+      return this.values;
+    }
+    else {
+      this.values = await this.fetchTranslations();
+      return this.values;
+    }
+  }
+  getLocale(element = document.body) {
+    const closestElement = element.closest('[lang]');
+    return closestElement ? closestElement.lang : state.langIso;
+  }
+  async fetchTranslations() {
+    const locale = this.getLocale();
+    const existingTranslations = JSON.parse(sessionStorage.getItem(`i18n.${locale}`));
+    if (existingTranslations && Object.keys(existingTranslations).length > 0) {
+      return existingTranslations;
+    }
+    else {
+      try {
+        const result = await fetch(`/i18n/${locale}.json`);
+        if (result.ok) {
+          const data = await result.json();
+          sessionStorage.setItem(`i18n.${locale}`, JSON.stringify(data));
+          return data;
+        }
+      }
+      catch (exception) {
+        console.error(`Error loading locale: ${locale}`, exception);
+      }
+    }
+  }
+}
+const Translations = new TranslationsController();
+
+export { ApiUrls as A, FlowStatus as F, IdCaptureValues as I, SessionKeys as S, Translations as T, SelfieCaptureValues as a, state as s };