@paykka/card-checkout-ui 0.5.15 → 0.6.0

package/dist/es/components/index.js

@@ -9,10 +9,12 @@ import "../core/context.js";
 import "../i18n/util.js";
 import "../i18n/locales/index.js";
 import "./CardExpireDateField/index.js";
+import "./internal/Form/type.js";
 import "./internal/Form/context.js";
 import "./internal/Form/FormItem.js";
 import "./internal/Form/Form.js";
 import "./internal/Input/Input.js";
+import "./internal/Input/type.js";
 import "./CardNumberField/index.js";
 import "./CardSecurityCodeField/index.js";
 import "./CardSelector/index.js";
@@ -25,3 +27,5 @@ import "./WechatPay/index.js";
 import "./ApplePay/index.js";
 import "./GooglePay/index.js";
 import "./Sepa/index.js";
+import "./EncryptedCard/index.js";
+import "./CombinedEncryptedField/index.js";

package/dist/es/components/internal/CheckBox/CheckBox.js

@@ -5,9 +5,9 @@ import "../../../core/context.js";
 import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
 import { normalizedClass } from "../../../utils/format.js";
-import { COMMON_CLASS_NAME } from "../../../constant.js";
 import "../../../i18n/util.js";
 import "../../../i18n/locales/index.js";
+import { COMMON_CLASS_NAME } from "../../../constant.js";
 import { IconChecked } from "../icons/iconChecked.js";
 const { bem } = useBEM("check-box");
 const CheckBox = (props) => {

package/dist/es/components/internal/Form/FormItem.js

@@ -1,18 +1,14 @@
 import { w, F, x, h, y, u } from "../../../core.js";
 import "./form-item.js";
 import { COMMON_CLASS_NAME } from "../../../constant.js";
-import { useBEM } from "../../../hooks/useBEM.js";
-import "../../../core/context.js";
 import { isNil } from "../../../utils/is.js";
 import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
 import { normalizedClass } from "../../../utils/format.js";
 import { set } from "../../../utils/obj.js";
-import "../../../i18n/util.js";
-import "../../../i18n/locales/index.js";
 import { FormItemContext, FormContext } from "./context.js";
+import { formItemBEM, formItemLabelClassName, formItemErrorMessageClassName } from "./type.js";
 import { getActiveRules } from "./util.js";
-const { bem } = useBEM("form-item");
 const isEmpty = (value) => isNil(value) || value === "";
 const FormItem = w((props, ref) => {
   const {
@@ -23,7 +19,8 @@ const FormItem = w((props, ref) => {
     onValidationStatusChange,
     className,
     style,
-    showErrorMessage = true
+    showErrorMessage = true,
+    showLabel = true
   } = props;
   F(ref, () => ({
     validate: internalValidate,
@@ -136,24 +133,31 @@ const FormItem = w((props, ref) => {
       path && (formContext == null ? void 0 : formContext.setFormItems((prev) => prev.filter((item) => item !== internalRef)));
     };
   }, []);
-  return /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem(), className), style, children: [
-    !isNil(label) && /* @__PURE__ */ u("div", { className: bem("label"), children: label }),
-    /* @__PURE__ */ u(
-      FormItemContext.Provider,
-      {
-        value: {
-          rule: props.rule,
-          validateBlur,
-          validateChange,
-          resetValidation,
-          validationResult,
-          setValue
-        },
-        children
-      }
-    ),
-    showErrorMessage && validationResult.status === "error" && /* @__PURE__ */ u("div", { className: bem("error-text"), children: getFirstError().message })
-  ] });
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: normalizedClass(COMMON_CLASS_NAME, formItemBEM.bem(), className),
+      style,
+      children: [
+        showLabel && !isNil(label) && /* @__PURE__ */ u("div", { className: formItemLabelClassName, children: label }),
+        /* @__PURE__ */ u(
+          FormItemContext.Provider,
+          {
+            value: {
+              rule: props.rule,
+              validateBlur,
+              validateChange,
+              resetValidation,
+              validationResult,
+              setValue
+            },
+            children
+          }
+        ),
+        showErrorMessage && validationResult.status === "error" && /* @__PURE__ */ u("div", { className: formItemErrorMessageClassName, children: getFirstError().message })
+      ]
+    }
+  );
 });
 export {
   FormItem

package/dist/es/components/internal/Form/index.js

@@ -1,3 +1,4 @@
+import "./type.js";
 import "./context.js";
 import "./FormItem.js";
 import "./Form.js";

package/dist/es/components/internal/Form/type.js

@@ -1 +1,15 @@
-
+import { useBEM } from "../../../hooks/useBEM.js";
+import "../../../core.js";
+import "../../../core/context.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import "../../../i18n/util.js";
+import "../../../i18n/locales/index.js";
+const formItemBEM = useBEM("form-item");
+const formItemLabelClassName = formItemBEM.bem("label");
+const formItemErrorMessageClassName = formItemBEM.bem("error-text");
+export {
+  formItemBEM,
+  formItemErrorMessageClassName,
+  formItemLabelClassName
+};

package/dist/es/components/internal/Input/Input.js

@@ -1,19 +1,16 @@
 import { w, F, x, h, A, w$1, u } from "../../../core.js";
 import "./input2.js";
 import { COMMON_CLASS_NAME } from "../../../constant.js";
-import { useBEM } from "../../../hooks/useBEM.js";
-import "../../../core/context.js";
 import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
 import { normalizedClass } from "../../../utils/format.js";
-import "../../../i18n/util.js";
-import "../../../i18n/locales/index.js";
+import "../Form/type.js";
 import { FormItemContext } from "../Form/context.js";
 import "../Form/FormItem.js";
 import "../Form/Form.js";
 import { IconError } from "../icons/IconError.js";
 import { IconSuccess } from "../icons/IconSuccess.js";
-const { bem } = useBEM("input");
+import { inputBEM } from "./type.js";
 const statusIconMap = {
   error: IconError,
   success: IconSuccess
@@ -74,13 +71,13 @@ const Input = w((props, ref) => {
     formItemContext == null ? void 0 : formItemContext.validateChange(value);
   }
   const inputWrapperClass = w$1(() => {
-    const inputWrapper = bem("input-wrapper", [
+    const inputWrapper = inputBEM.bem("input-wrapper", [
       status,
       {
         focus: isFocus
       }
     ]);
-    const inputWrapperDisabled = bem("input-wrapper-disabled");
+    const inputWrapperDisabled = inputBEM.bem("input-wrapper-disabled");
     return disabled ? `${inputWrapper} ${inputWrapperDisabled}` : `${inputWrapper}`;
   });
   function onCompositionStart(e) {
@@ -92,16 +89,17 @@ const Input = w((props, ref) => {
     isComposing = false;
     onInput(e);
   }
-  return /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem(), inputClassName), style, onClick: () => {
+  return /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, inputBEM.bem(), inputClassName), onClick: () => {
     var _a;
     return (_a = inputRef.current) == null ? void 0 : _a.focus();
-  }, children: /* @__PURE__ */ u("div", { className: inputWrapperClass, children: [
+  }, children: /* @__PURE__ */ u("div", { className: `${inputWrapperClass}`, style, children: [
+    !!props.leftIcon && /* @__PURE__ */ u("div", { class: inputBEM.bem("left-icon"), children: props.leftIcon }),
     children ? children : /* @__PURE__ */ u(
       "input",
       {
         ref: inputRef,
         ...props,
-        class: bem("input"),
+        class: inputBEM.bem("input"),
         onFocus,
         onBlur,
         onInput,
@@ -110,7 +108,7 @@ const Input = w((props, ref) => {
         autocomplete: "off"
       }
     ),
-    !!rightIcon && /* @__PURE__ */ u("div", { class: bem("right-icon"), children: rightIcon })
+    !!rightIcon && /* @__PURE__ */ u("div", { class: inputBEM.bem("right-icon"), children: rightIcon })
   ] }) });
 });
 export {

package/dist/es/components/internal/Input/index.js

@@ -1 +1,2 @@
 import "./Input.js";
+import "./type.js";

package/dist/es/components/internal/Input/type.js

@@ -1 +1,13 @@
-
+import { useBEM } from "../../../hooks/useBEM.js";
+import "../../../core.js";
+import "../../../core/context.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import "../../../i18n/util.js";
+import "../../../i18n/locales/index.js";
+const inputBEM = useBEM("input");
+const inputWrapperClassName = inputBEM.bem("input-wrapper");
+export {
+  inputBEM,
+  inputWrapperClassName
+};

package/dist/es/components/internal/Select/Select.js

@@ -6,11 +6,13 @@ import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
 import "../../../i18n/util.js";
 import "../../../i18n/locales/index.js";
+import "../Form/type.js";
 import { FormItemContext } from "../Form/context.js";
 import "../Form/FormItem.js";
 import "../Form/Form.js";
 import { IconArrowDown } from "../icons/IconArrowDown.js";
 import { Input } from "../Input/Input.js";
+import "../Input/type.js";
 import { SelectMenu } from "./SelectMenu.js";
 import { SelectMenuItem } from "./SelectMenuItem.js";
 const { bem } = useBEM("select");

package/dist/es/config.js

@@ -1,9 +1,16 @@
+import "./utils/card-brand/brands.js";
+import "./utils/system-info/get-browser-info.js";
+import "./i18n/util.js";
+import "./core.js";
+import "./i18n/locales/index.js";
 let apiUrl = "https://checkout.aq.paykka.com";
 let cdnOrigin = "https://checkout.aq.paykka.com";
 let cdnDir = "/cp";
 let cdnUrl = `${cdnOrigin}${cdnDir}`;
-let radarEnv = void 0;
+let fraudDetectionEnv = void 0;
 let customReqHeaders = {};
+let customLocale = void 0;
+let hidePaymentButton = false;
 function setApiUrl(url) {
   apiUrl = url;
 }
@@ -11,22 +18,32 @@ function setCDNUrl(url) {
   const urlInfo = new URL(url);
   cdnOrigin = urlInfo.origin;
   cdnDir = urlInfo.pathname;
-  cdnUrl = `${cdnOrigin}${cdnDir}`;
+  cdnUrl = `${cdnOrigin}${cdnDir === "/" ? "" : cdnDir}`;
 }
-function setRadarEnv(env) {
-  radarEnv = env;
+function setFraudDetectionEnv(env) {
+  fraudDetectionEnv = env;
 }
 function setCustomReqHeaders(headers) {
   customReqHeaders = headers;
 }
+function setCustomLocale(locale) {
+  customLocale = locale;
+}
+function setCheckoutConfig(params) {
+  hidePaymentButton = params.hidePaymentButton || false;
+}
 export {
   apiUrl,
   cdnOrigin,
   cdnUrl,
+  customLocale,
   customReqHeaders,
-  radarEnv,
+  fraudDetectionEnv,
+  hidePaymentButton,
   setApiUrl,
   setCDNUrl,
+  setCheckoutConfig,
+  setCustomLocale,
   setCustomReqHeaders,
-  setRadarEnv
+  setFraudDetectionEnv
 };

package/dist/es/constant.js

@@ -17,6 +17,15 @@ var PaymentMethod = /* @__PURE__ */ ((PaymentMethod2) => {
   PaymentMethod2["SEPA_DEBIT"] = "SEPA_DEBIT";
   return PaymentMethod2;
 })(PaymentMethod || {});
+const CardPaymentMethods = [
+  "VISA",
+  "MASTER_CARD",
+  "JCB",
+  "AMEX",
+  "DINERS_CLUB",
+  "DISCOVER"
+  /* DISCOVER */
+];
 var PaymentType = /* @__PURE__ */ ((PaymentType2) => {
   PaymentType2["PURCHASE"] = "PURCHASE";
   PaymentType2["PREPARE_AUTHORIZE"] = "PREPARE_AUTHORIZE";
@@ -40,6 +49,7 @@ var SessionMode = /* @__PURE__ */ ((SessionMode2) => {
 })(SessionMode || {});
 export {
   COMMON_CLASS_NAME,
+  CardPaymentMethods,
   EAddressType,
   PREFIX,
   PaymentMethod,

package/dist/es/core/PayKKaCheckout.js

@@ -0,0 +1,62 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { create } from "./create.js";
+import { Session } from "./Session.js";
+import { setCheckoutConfig, setCDNUrl, setFraudDetectionEnv, setCustomLocale, setApiUrl } from "../config.js";
+const _PayKKaCheckout = class _PayKKaCheckout {
+  constructor(config) {
+    __publicField(this, "config");
+    if (_PayKKaCheckout.instance) {
+      return _PayKKaCheckout.instance;
+    }
+    this.config = config;
+    this.init();
+    _PayKKaCheckout.instance = this;
+  }
+  init() {
+    const {
+      sandbox,
+      sessionId,
+      clientKey,
+      locale,
+      fraudDetectionEnv,
+      hidePaymentButton,
+      onPaymentMethodsReady,
+      onInitError
+    } = this.config;
+    fraudDetectionEnv && setFraudDetectionEnv(fraudDetectionEnv);
+    locale && setCustomLocale(locale);
+    setCheckoutConfig({
+      hidePaymentButton
+    });
+    if (sandbox) {
+      setApiUrl("https://checkout-sandbox.aq.paykka.com");
+      setCDNUrl("https://checkout-sandbox.aq.paykka.com/cp");
+    }
+    _PayKKaCheckout.session = new Session(sessionId, clientKey);
+    _PayKKaCheckout.session.ready().then(() => {
+      var _a;
+      const { paymentMethod = [] } = ((_a = _PayKKaCheckout.session) == null ? void 0 : _a.checkout) || {};
+      onPaymentMethodsReady == null ? void 0 : onPaymentMethodsReady(paymentMethod);
+    }).catch((error) => {
+      onInitError == null ? void 0 : onInitError(error);
+      console.log(error);
+    });
+  }
+  static getSession() {
+    return _PayKKaCheckout.session;
+  }
+  create(component, props) {
+    return create(component, props);
+  }
+};
+__publicField(_PayKKaCheckout, "session");
+__publicField(_PayKKaCheckout, "instance", null);
+let PayKKaCheckout = _PayKKaCheckout;
+export {
+  PayKKaCheckout
+};

package/dist/es/core/Session.js

@@ -26,6 +26,9 @@ import "../utils/card-brand/brands.js";
 import "../utils/system-info/get-browser-info.js";
 import { generateColors } from "../utils/colors.js";
 import { createPromise } from "../utils/create-promise.js";
+import "../i18n/util.js";
+import "../core.js";
+import "../i18n/locales/index.js";
 import { querySession } from "./query.js";
 class Session {
   constructor(sessionId, clientKey) {

package/dist/es/core/index.js

@@ -2,3 +2,5 @@ import "./context.js";
 import "../core.js";
 import "../utils/card-brand/brands.js";
 import "../utils/system-info/get-browser-info.js";
+import "../i18n/util.js";
+import "../i18n/locales/index.js";

package/dist/es/core/query.js

@@ -1,13 +1,11 @@
 import "../utils/card-brand/brands.js";
 import "../utils/system-info/get-browser-info.js";
+import "../i18n/util.js";
+import "../core.js";
+import "../i18n/locales/index.js";
 import { onceGetCheckoutInfo } from "../api/modules/checkout/index.js";
 async function querySession({ sessionId, clientKey }, options) {
-  try {
-    return await onceGetCheckoutInfo({ sessionId, clientKey }, options);
-  } catch (error) {
-    console.log("[PayKKa Checkout UI]:", error);
-    return {};
-  }
+  return onceGetCheckoutInfo({ sessionId, clientKey }, options);
 }
 export {
   querySession

package/dist/es/core.js

@@ -675,6 +675,36 @@ l$3.diffed = function(n2) {
   var t2 = n2.props, e2 = n2.__e;
   null != e2 && "textarea" === n2.type && "value" in t2 && t2.value !== e2.value && (e2.value = null == t2.value ? "" : t2.value);
 };
+function e$1(e2, n2) {
+  return n2 = n2 || {}, new Promise(function(t2, r2) {
+    var s2 = new XMLHttpRequest(), o2 = [], u2 = {}, a2 = function e3() {
+      return { ok: 2 == (s2.status / 100 | 0), statusText: s2.statusText, status: s2.status, url: s2.responseURL, text: function() {
+        return Promise.resolve(s2.responseText);
+      }, json: function() {
+        return Promise.resolve(s2.responseText).then(JSON.parse);
+      }, blob: function() {
+        return Promise.resolve(new Blob([s2.response]));
+      }, clone: e3, headers: { keys: function() {
+        return o2;
+      }, entries: function() {
+        return o2.map(function(e4) {
+          return [e4, s2.getResponseHeader(e4)];
+        });
+      }, get: function(e4) {
+        return s2.getResponseHeader(e4);
+      }, has: function(e4) {
+        return null != s2.getResponseHeader(e4);
+      } } };
+    };
+    for (var i2 in s2.open(n2.method || "get", e2, true), s2.onload = function() {
+      s2.getAllResponseHeaders().toLowerCase().replace(/^(.+?):/gm, function(e3, n3) {
+        u2[n3] || o2.push(u2[n3] = n3);
+      }), t2(a2());
+    }, s2.onerror = r2, s2.withCredentials = "include" == n2.credentials, n2.headers)
+      s2.setRequestHeader(i2, n2.headers[i2]);
+    s2.send(n2.body || null);
+  });
+}
 var __assign = function() {
   __assign = Object.assign || function __assign2(t2) {
     for (var s2, i2 = 1, n2 = arguments.length; i2 < n2; i2++) {
@@ -3854,36 +3884,6 @@ function isValidCSSUnit(color) {
   }
   return matchers.CSS_UNIT.test(color);
 }
-function e$1(e2, n2) {
-  return n2 = n2 || {}, new Promise(function(t2, r2) {
-    var s2 = new XMLHttpRequest(), o2 = [], u2 = {}, a2 = function e3() {
-      return { ok: 2 == (s2.status / 100 | 0), statusText: s2.statusText, status: s2.status, url: s2.responseURL, text: function() {
-        return Promise.resolve(s2.responseText);
-      }, json: function() {
-        return Promise.resolve(s2.responseText).then(JSON.parse);
-      }, blob: function() {
-        return Promise.resolve(new Blob([s2.response]));
-      }, clone: e3, headers: { keys: function() {
-        return o2;
-      }, entries: function() {
-        return o2.map(function(e4) {
-          return [e4, s2.getResponseHeader(e4)];
-        });
-      }, get: function(e4) {
-        return s2.getResponseHeader(e4);
-      }, has: function(e4) {
-        return null != s2.getResponseHeader(e4);
-      } } };
-    };
-    for (var i2 in s2.open(n2.method || "get", e2, true), s2.onload = function() {
-      s2.getAllResponseHeaders().toLowerCase().replace(/^(.+?):/gm, function(e3, n3) {
-        u2[n3] || o2.push(u2[n3] = n3);
-      }), t2(a2());
-    }, s2.onerror = r2, s2.withCredentials = "include" == n2.credentials, n2.headers)
-      s2.setRequestHeader(i2, n2.headers[i2]);
-    s2.send(n2.body || null);
-  });
-}
 var i = Symbol.for("preact-signals");
 function t() {
   if (!(s$1 > 1)) {

package/dist/es/hooks/useI18n.js

@@ -6,8 +6,8 @@ import { I18n } from "../i18n/I18n.js";
 import "../i18n/locales/index.js";
 function useI18n(locale) {
   const coreContext = x(CoreContext);
-  const [_i18n] = h((coreContext == null ? void 0 : coreContext.i18n) ?? new I18n(locale));
-  locale && _i18n.load(locale);
+  const [_i18n] = h((coreContext == null ? void 0 : coreContext.i18n) ?? new I18n());
+  _i18n.load(locale);
   return { i18n: _i18n };
 }
 export {

package/dist/es/hooks/usePayState.js

@@ -2,41 +2,30 @@ import { h, y } from "../core.js";
 import "../core/context.js";
 import "../utils/card-brand/brands.js";
 import "../utils/system-info/get-browser-info.js";
-import { Session } from "../core/Session.js";
-import { radarEnv } from "../config.js";
-import { getPayKKaRadarInstance } from "../out/radar.js";
+import { customLocale, fraudDetectionEnv } from "../config.js";
+import { PayKKaCheckout } from "../core/PayKKaCheckout.js";
+import { getFraudDetectionInstance } from "../out/fraud-detection.js";
 import { useI18n } from "./useI18n.js";
-let _session;
-function usePayState(props) {
+function usePayState() {
   const [validated, setValidated] = h(false);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const [errorMsg, setErrorMsg] = h("");
   const [session, setSession] = h(null);
   const [sessionReady, setSessionReady] = h(false);
-  const [payKKaRadar, setPayKKaRadar] = h(null);
+  const [fraudDetection, setFraudDetection] = h(null);
+  setSession(PayKKaCheckout.getSession());
+  const { i18n } = useI18n(customLocale);
   y(() => {
-    setSessionReady(false);
-    if (!_session) {
-      _session = new Session(props.sessionId, props.clientKey);
-    }
-    setSession(_session);
-    _session.ready().then(() => setSessionReady(true)).catch(() => setSessionReady(false));
-  }, [props.sessionId]);
-  const { i18n } = useI18n(props.i18n);
-  y(() => {
-    if (props.i18n) {
-      i18n.load(props.i18n);
-      return;
-    }
     if (session) {
       session.ready().then(() => {
-        i18n.load(session.checkout.locale);
-        const payKKaRadar2 = getPayKKaRadarInstance(radarEnv);
-        setPayKKaRadar(payKKaRadar2);
-        payKKaRadar2 == null ? void 0 : payKKaRadar2.createPayKKaRadar();
+        setSessionReady(true);
+        i18n.load(session.checkout.locale || customLocale);
+        const fraudDetection2 = getFraudDetectionInstance(fraudDetectionEnv);
+        setFraudDetection(fraudDetection2);
+        fraudDetection2 == null ? void 0 : fraudDetection2.createFraudDetection();
       });
     }
-  }, [props.i18n, session]);
+  }, [session]);
   return {
     validated,
     setValidated,
@@ -49,7 +38,7 @@ function usePayState(props) {
     sessionReady,
     setSessionReady,
     i18n,
-    payKKaRadar
+    fraudDetection
   };
 }
 export {

package/dist/es/i18n/I18n.js

@@ -9,17 +9,16 @@ import { getBrowserInfo } from "../utils/system-info/get-browser-info.js";
 import { loadTranslation } from "./util.js";
 import { d } from "../core.js";
 const _I18n = class _I18n {
-  constructor(locale = getBrowserInfo().language) {
+  constructor() {
     /** 语言 */
     __publicField(this, "locale");
     /** 翻译文案 */
     __publicField(this, "translation");
     /** 加载文案完成标识 */
-    __publicField(this, "ready", d(false));
+    __publicField(this, "isReady", d(false));
     /** 当前正在加载的id标识 */
     __publicField(this, "currentLoadId", 0);
     if (!_I18n.instance) {
-      this.load(locale);
       _I18n.instance = this;
     }
     return _I18n.instance;
@@ -28,6 +27,9 @@ const _I18n = class _I18n {
     var _a;
     return ((_a = this.translation) == null ? void 0 : _a[key]) ?? "";
   }
+  get ready() {
+    return this.isReady;
+  }
   /** 加载国际化翻译文案 */
   load(locale = getBrowserInfo().language) {
     if (locale === this.locale) {
@@ -35,15 +37,16 @@ const _I18n = class _I18n {
     }
     this.locale = locale;
     const loadId = ++this.currentLoadId;
-    this.ready.value = false;
+    this.isReady.value = false;
     loadTranslation(this.locale).then((res) => {
+      if (loadId !== this.currentLoadId) {
+        return;
+      }
+      this.isReady.value = true;
       this.locale = res.locale;
       this.translation = res.translation;
-      if (loadId === this.currentLoadId) {
-        this.ready.value = true;
-      }
     }).catch(() => {
-      this.ready.value = false;
+      this.isReady.value = false;
     });
   }
 };