@paykka/card-checkout-ui 0.5.17 → 0.7.0

package/dist/es/components/CardBrands/index.js

@@ -3,8 +3,6 @@ import { COMMON_CLASS_NAME } from "../../constant.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import "../../core/context.js";
 import { clamp } from "../../utils/index.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
 import { getSupportedCardBrands, getCardBrandInfo } from "../../utils/card-brand/index.js";
 import { normalizedClass } from "../../utils/format.js";
 const { bem } = useBEM("card-brands");

package/dist/es/components/CardExpireDateField/index.js

@@ -1,18 +1,17 @@
 import { w, A, F, h, u } from "../../core.js";
 import { isExpired } from "../../utils/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../core/context.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
-import { FieldType } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
+import "../internal/Input/type.js";
+import { EFieldType } from "../SecuredFieldsProvider/index.js";
 import { limitedToNumber } from "../../utils/format.js";
 import { isUndefined } from "../../utils/is.js";
 const CardExpireDateField = w((props, ref) => {
-  const { className, style, security } = props;
+  const { className, style, security, showLabel } = props;
   const inputRef = A(null);
   const formItemRef = A(null);
   F(ref, () => ({
@@ -117,6 +116,7 @@ const CardExpireDateField = w((props, ref) => {
     FormItem,
     {
       label: i18n.get("card.cardExpireDate.label"),
+      showLabel,
       path: "expireDate",
       ref: formItemRef,
       rule,
@@ -132,7 +132,7 @@ const CardExpireDateField = w((props, ref) => {
           value,
           onInput,
           placeholder: i18n.get("card.cardExpireDate.placeholder"),
-          children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": FieldType.EXPIRE_DATE })
+          children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": EFieldType.EXPIRE_DATE })
         }
       )
     }

package/dist/es/components/CardHolderNameField/index.js

@@ -2,15 +2,14 @@ import { u } from "../../core.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../core/context.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
+import "../internal/Input/type.js";
 function CardHolderNameField(props) {
-  const { className, style } = props;
+  const { className, style, disabled } = props;
   const { i18n } = useI18n();
   const rule = {
     trigger: ["blur", "submit"],
@@ -38,7 +37,8 @@ function CardHolderNameField(props) {
         {
           maxLength: 100,
           placeholder: i18n.get("card.cardHolderName.placeholder"),
-          onInput
+          onInput,
+          disabled
         }
       )
     }

package/dist/es/components/CardIBANField/index.js

@@ -1,13 +1,12 @@
 import { A, h, u } from "../../core.js";
 import { clamp } from "../../utils/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../core/context.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
+import "../internal/Input/type.js";
 import { validateIBAN } from "../../utils/iban.js";
 import { trimAll, limitedToNumber } from "../../utils/format.js";
 function IBANField(props) {

package/dist/es/components/CardNo/index.js

@@ -5,8 +5,6 @@ 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";
 const { bem } = useBEM("card-no");
 const CardNo = (props) => {
   const { value, className, style } = props;

package/dist/es/components/CardNumberField/index.js

@@ -1,39 +1,45 @@
-import { w, A, F, h, u } from "../../core.js";
+import { w, A, F, h, y, u } from "../../core.js";
 import { clamp } from "../../utils/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../core/context.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
 import { IconCardNo } from "../internal/icons/IconCardNo.js";
 import { Input } from "../internal/Input/Input.js";
-import { FieldType } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
-import { getSupportedCardBrands, getSupportedCardBrandsLengths, findCardBrandInfo } from "../../utils/card-brand/index.js";
+import "../internal/Input/type.js";
+import { EFieldType } from "../SecuredFieldsProvider/index.js";
+import { getSupportedCardBrands, getSupportedCardBrandsLengths, finCardBrandInfoByCode, findCardBrandInfo } from "../../utils/card-brand/index.js";
 import { trimAll, limitedToNumber } from "../../utils/format.js";
 const CardNumberField = w((props, ref) => {
-  var _a;
-  const { supportedCardBrands = [], className, style, security } = props;
+  const { supportedCardBrands = [], className, security, showLabel } = props;
   const inputRef = A(null);
   const formItemRef = A(null);
   F(ref, () => ({
     input: inputRef.current,
     focus: () => {
-      var _a2;
-      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      var _a;
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
     },
     blur: () => {
-      var _a2;
-      (_a2 = inputRef.current) == null ? void 0 : _a2.blur();
+      var _a;
+      (_a = inputRef.current) == null ? void 0 : _a.blur();
     },
     resetValidation: (status, errorTip) => {
-      var _a2;
-      (_a2 = formItemRef.current) == null ? void 0 : _a2.resetValidation(status, [{ message: errorTip }]);
+      var _a;
+      (_a = formItemRef.current) == null ? void 0 : _a.resetValidation(status, [{ message: errorTip }]);
     },
     binValueChanged: (binValue) => {
       setValue(binValue);
     },
+    brandChanged: (brand) => {
+      if (brand) {
+        const brandInfo = finCardBrandInfoByCode(brand);
+        setBrandIcon(() => brandInfo == null ? void 0 : brandInfo.icon);
+      } else {
+        setBrandIcon(void 0);
+      }
+    },
     getCardBrand: () => findCardBrandInfo(trimAll(value), brands) || {}
   }));
   const { i18n } = useI18n();
@@ -41,7 +47,13 @@ const CardNumberField = w((props, ref) => {
   const [validationStatus, setValidationStatus] = h("");
   const brands = getSupportedCardBrands(supportedCardBrands);
   const brandLengths = getSupportedCardBrandsLengths(brands);
-  const cardBrandIcon = (_a = findCardBrandInfo(trimAll(value), brands)) == null ? void 0 : _a.icon;
+  const [brandIcon, setBrandIcon] = h(void 0);
+  y(() => {
+    setBrandIcon(value ? () => {
+      var _a;
+      return (_a = findCardBrandInfo(trimAll(value), brands)) == null ? void 0 : _a.icon;
+    } : void 0);
+  }, [value]);
   const rule = {
     trigger: ["blur", "submit"],
     validator(value2) {
@@ -65,7 +77,7 @@ const CardNumberField = w((props, ref) => {
     }
   };
   function onInput(event) {
-    var _a2;
+    var _a;
     const { currentTarget, inputType } = event;
     const selectionStart = currentTarget.selectionStart;
     let val = limitedToNumber(currentTarget.value);
@@ -76,11 +88,11 @@ const CardNumberField = w((props, ref) => {
     }
     setValue(currentTarget.value = val);
     currentTarget.setSelectionRange(pos, pos);
-    (_a2 = props.onInput) == null ? void 0 : _a2.call(props, event);
+    (_a = props.onInput) == null ? void 0 : _a.call(props, event);
   }
   const RightIcon = () => {
     if (validationStatus !== "error") {
-      const Icon = cardBrandIcon ?? IconCardNo;
+      const Icon = brandIcon ?? IconCardNo;
       return /* @__PURE__ */ u(Icon, { size: 32 });
     }
   };
@@ -88,12 +100,12 @@ const CardNumberField = w((props, ref) => {
     FormItem,
     {
       label: i18n.get("card.cardNumber.label"),
+      showLabel,
       path: "number",
       ref: formItemRef,
       rule,
       onValidationStatusChange: setValidationStatus,
       className,
-      style,
       children: /* @__PURE__ */ u(
         Input,
         {
@@ -105,7 +117,7 @@ const CardNumberField = w((props, ref) => {
           onInput,
           rightIcon: RightIcon(),
           placeholder: i18n.get("card.cardNumber.placeholder"),
-          children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": FieldType.CARD_NUMBER })
+          children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": EFieldType.CARD_NUMBER })
         }
       )
     }

package/dist/es/components/CardSecurityCodeField/index.js

@@ -3,17 +3,16 @@ import { isUndefined } from "../../utils/is.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { limitedToNumber } from "../../utils/format.js";
+import { EFieldType } from "../SecuredFieldsProvider/index.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../core/context.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
-import { FieldType } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
+import "../internal/Input/type.js";
 const CardSecurityCodeField = w((props, ref) => {
-  const { className, style, security } = props;
+  const { className, style, security, showLabel } = props;
   const inputRef = A(null);
   const formItemRef = A(null);
   F(ref, () => ({
@@ -60,6 +59,7 @@ const CardSecurityCodeField = w((props, ref) => {
     FormItem,
     {
       label: i18n.get("card.cardSecurityCode.label"),
+      showLabel,
       path: "securityCode",
       ref: formItemRef,
       rule,
@@ -75,7 +75,7 @@ const CardSecurityCodeField = w((props, ref) => {
           value,
           onInput,
           placeholder: i18n.get("card.cardSecurityCode.placeholder"),
-          children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": FieldType.CVV })
+          children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": EFieldType.CVV })
         }
       )
     }

package/dist/es/components/CardSelector/index.js

@@ -1,11 +1,9 @@
 import { A, h, y, u } from "../../core.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../core/context.js";
 import { finCardBrandInfoByCode } from "../../utils/card-brand/index.js";
 import "../../utils/system-info/get-browser-info.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";

package/dist/es/components/CombinedCardInfo/index.js

@@ -0,0 +1,99 @@
+import { w, A, F, h, u } from "../../core.js";
+import "../internal/Form/type.js";
+import "../internal/Form/context.js";
+import { FormItem } from "../internal/Form/FormItem.js";
+import "../internal/Form/Form.js";
+import { Input } from "../internal/Input/Input.js";
+import "../internal/Input/type.js";
+import { EFieldType } from "../SecuredFieldsProvider/index.js";
+import { finCardBrandInfoByCode, findCardBrandInfo, getSupportedCardBrands } from "../../utils/card-brand/index.js";
+import "../../utils/system-info/get-browser-info.js";
+import { trimAll } from "../../utils/format.js";
+import { IconCardNo } from "../internal/icons/IconCardNo.js";
+import { useBEM } from "../../hooks/useBEM.js";
+import { useI18n } from "../../hooks/useI18n.js";
+const { bem } = useBEM("combined-card-info");
+const CombinedCardInfo = w(
+  (props, ref) => {
+    const { supportedCardBrands = [], className, showLabel = false, security } = props;
+    const inputRef = A(null);
+    const formItemRef = A(null);
+    const { i18n } = useI18n();
+    F(ref, () => ({
+      input: inputRef.current,
+      focus: () => {
+        var _a;
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      },
+      blur: () => {
+        var _a;
+        (_a = inputRef.current) == null ? void 0 : _a.blur();
+      },
+      resetValidation: (status, errorTip) => {
+        var _a;
+        (_a = formItemRef.current) == null ? void 0 : _a.resetValidation(status, [{ message: errorTip }]);
+      },
+      binValueChanged: (binValue2) => {
+        setBinValue(binValue2);
+      },
+      brandChanged: (brand) => {
+        if (brand) {
+          const brandInfo = finCardBrandInfoByCode(brand);
+          setBrandIcon(() => brandInfo == null ? void 0 : brandInfo.icon);
+        } else {
+          setBrandIcon(void 0);
+        }
+      },
+      getCardBrand: () => {
+        return findCardBrandInfo(trimAll(binValue), getSupportedCardBrands(supportedCardBrands)) || {};
+      }
+    }));
+    const rule = {
+      trigger: ["submit"],
+      validator() {
+        if (security) {
+          const result = formItemRef.current.getValidateResult();
+          if (result.status === "error") {
+            throw new Error(result.errors[0].message);
+          } else if (result.status === "success") {
+            return true;
+          }
+        }
+        return true;
+      }
+    };
+    const [binValue, setBinValue] = h("");
+    const [brandIcon, setBrandIcon] = h(void 0);
+    const LeftIcon = () => {
+      const Icon = brandIcon ?? IconCardNo;
+      return /* @__PURE__ */ u(Icon, { size: 32 });
+    };
+    return /* @__PURE__ */ u(
+      FormItem,
+      {
+        showLabel,
+        ref: formItemRef,
+        label: i18n.get("card.info.label"),
+        className,
+        path: "cardInfo",
+        rule,
+        children: /* @__PURE__ */ u(
+          Input,
+          {
+            ref: inputRef,
+            leftIcon: LeftIcon(),
+            rightIcon: /* @__PURE__ */ u("div", { className: bem("blank-icon") }),
+            children: /* @__PURE__ */ u("div", { className: bem(), children: [
+              /* @__PURE__ */ u("div", { className: bem("card-number"), "data-sf": EFieldType.CARD_NUMBER }),
+              /* @__PURE__ */ u("div", { className: bem("expire-date"), "data-sf": EFieldType.EXPIRE_DATE }),
+              /* @__PURE__ */ u("div", { className: bem("cvv"), "data-sf": EFieldType.CVV })
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  CombinedCardInfo
+};

package/dist/es/components/EmailField/EmailField.js

@@ -9,13 +9,12 @@ import { isValuable } from "../../utils/is.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import "../../core/context.js";
-import "../../i18n/util.js";
-import "../../i18n/locales/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
 import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
+import "../internal/Input/type.js";
 class EmailState {
   constructor(email) {
     __publicField(this, "_email");