@paykka/card-checkout-ui 0.13.16 → 0.14.0

package/dist/es/components/business/NameField/NameField.js

@@ -0,0 +1,51 @@
+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 "../../../out/worldpay-jsc-origin.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";
+const NameField = (props) => {
+  const { className, maxLength = 50, style, disabled, label, placeholder, incompleteText } = props;
+  const { i18n } = useI18n();
+  const rule = {
+    trigger: ["blur", "submit"],
+    validator(value) {
+      if (!value) {
+        throw new Error(incompleteText || i18n.get("form.name.incomplete"));
+      }
+      return true;
+    }
+  };
+  const onInput = (event) => {
+    var _a;
+    (_a = props.onInput) == null ? void 0 : _a.call(props, event);
+  };
+  return /* @__PURE__ */ u(
+    FormItem,
+    {
+      label: label || i18n.get("form.name.label"),
+      path: "name",
+      rule,
+      className,
+      style,
+      children: /* @__PURE__ */ u(
+        Input,
+        {
+          maxLength,
+          placeholder: placeholder || i18n.get("form.name.placeholder"),
+          onInput,
+          disabled
+        }
+      )
+    }
+  );
+};
+export {
+  NameField
+};

package/dist/es/components/business/NameField/index.js

@@ -0,0 +1,11 @@
+import "../../../core.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import "../../../core/context.js";
+import "../../../out/worldpay-jsc-origin.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";

package/dist/es/components/business/NameField/type.js

@@ -0,0 +1 @@
+

package/dist/es/components/business/PhoneField/PhoneField.js

@@ -0,0 +1,125 @@
+import { x, h, T, y, u } from "../../../core.js";
+import { useBEM } from "../../../hooks/useBEM.js";
+import { useI18n } from "../../../hooks/useI18n.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import { trimAll, normalizedClass } from "../../../utils/format.js";
+import "../../../core/context.js";
+import "../../../out/worldpay-jsc-origin.js";
+import "../../internal/Form/type.js";
+import { FormContext, FormItemContext } from "../../internal/Form/context.js";
+import { FormItem } from "../../internal/Form/FormItem.js";
+import "../../internal/Form/Form.js";
+import { Select } from "../../internal/Select/Select.js";
+import { SegmentedDigitInput } from "../SegmentedDigitInput/SegmentedDigitInput.js";
+import { phoneList, phoneConfigByAreaCode, formatPhoneDigits } from "./config.js";
+import "./phone-field.js";
+const FALLBACK_DIGIT_GROUPS = [3, 4, 4];
+const PhoneField = (props) => {
+  var _a;
+  const {
+    className,
+    style,
+    disabled,
+    label,
+    placeholder,
+    incompleteText,
+    invalidText,
+    areaCode,
+    areaCodeDisabled,
+    onValidationStatusChange
+  } = props;
+  const { i18n } = useI18n();
+  const { bem } = useBEM("phone-field");
+  const formContext = x(FormContext);
+  const [value, setValue] = h("");
+  const resolvedAreaCode = T(() => {
+    var _a2, _b;
+    const fromForm = (_a2 = formContext == null ? void 0 : formContext.form) == null ? void 0 : _a2.areaCode;
+    const raw = fromForm ?? areaCode ?? ((_b = phoneList[0]) == null ? void 0 : _b.value) ?? "";
+    return String(raw);
+  }, [(_a = formContext == null ? void 0 : formContext.form) == null ? void 0 : _a.areaCode, areaCode]);
+  const phoneCfg = T(
+    () => phoneConfigByAreaCode(resolvedAreaCode),
+    [resolvedAreaCode]
+  );
+  const digitGroups = (phoneCfg == null ? void 0 : phoneCfg.digitGroups) ?? FALLBACK_DIGIT_GROUPS;
+  const maxDigits = (phoneCfg == null ? void 0 : phoneCfg.maxDigits) ?? 12;
+  y(() => {
+    var _a2, _b;
+    if (!formContext || areaCodeDisabled)
+      return;
+    const initial = areaCode ?? ((_a2 = phoneList[0]) == null ? void 0 : _a2.value);
+    const current = (_b = formContext.form) == null ? void 0 : _b.areaCode;
+    if (initial != null && initial !== "" && (current === void 0 || current === "")) {
+      formContext.setForm((prev) => ({ ...prev, areaCode: String(initial) }));
+    }
+  }, [formContext, areaCode, areaCodeDisabled]);
+  y(() => {
+    setValue((v) => formatPhoneDigits(trimAll(v), digitGroups, maxDigits));
+  }, [resolvedAreaCode, digitGroups, maxDigits]);
+  const rule = {
+    trigger: ["blur", "submit"],
+    validator(val) {
+      var _a2, _b;
+      const code = ((_a2 = formContext == null ? void 0 : formContext.form) == null ? void 0 : _a2.areaCode) ?? areaCode ?? ((_b = phoneList[0]) == null ? void 0 : _b.value) ?? "";
+      const cfg = phoneConfigByAreaCode(String(code));
+      const digits = trimAll(val ?? "");
+      if (!digits) {
+        throw new Error(incompleteText || i18n.get("form.phone.incomplete"));
+      }
+      if (!(cfg == null ? void 0 : cfg.regex.test(digits))) {
+        throw new Error(invalidText || i18n.get("form.phone.invalid"));
+      }
+      return true;
+    }
+  };
+  const onNumberInput = (event) => {
+    var _a2;
+    setValue(event.currentTarget.value);
+    (_a2 = props.onInput) == null ? void 0 : _a2.call(props, event);
+  };
+  const placeholderText = placeholder ?? (phoneCfg == null ? void 0 : phoneCfg.placeholder) ?? i18n.get("form.phone.placeholder");
+  const areaCodeLocked = disabled || areaCodeDisabled;
+  return /* @__PURE__ */ u(
+    FormItem,
+    {
+      label: label || i18n.get("form.phone.label"),
+      path: "phoneNumber",
+      rule,
+      className: normalizedClass(bem(), className),
+      style,
+      onValidationStatusChange,
+      children: /* @__PURE__ */ u("div", { className: bem("row"), children: [
+        /* @__PURE__ */ u("div", { className: normalizedClass(bem("areaCode"), areaCodeLocked ? bem("areaCode--disabled") : void 0), children: /* @__PURE__ */ u(FormItemContext.Provider, { value: null, children: /* @__PURE__ */ u(
+          Select,
+          {
+            value: resolvedAreaCode,
+            options: phoneList,
+            filterable: false,
+            inputClassName: bem("areaCode-input"),
+            disabled,
+            onSelect: (v) => {
+              formContext == null ? void 0 : formContext.setForm((prev) => ({ ...prev, areaCode: String(v) }));
+            }
+          }
+        ) }) }),
+        /* @__PURE__ */ u("div", { className: bem("number"), children: /* @__PURE__ */ u(
+          SegmentedDigitInput,
+          {
+            value,
+            digitGroups,
+            maxDigits,
+            separator: " ",
+            onInput: onNumberInput,
+            placeholder: placeholderText,
+            disabled
+          }
+        ) })
+      ] })
+    }
+  );
+};
+export {
+  PhoneField
+};

package/dist/es/components/business/PhoneField/config.js

@@ -0,0 +1,33 @@
+import { formatDigitsByGroups } from "../SegmentedDigitInput/format.js";
+const phoneType2ConfigMap = {
+  [
+    "IDN"
+    /* IDN */
+  ]: {
+    areaCode: "+62",
+    placeholder: "812 3456 7890",
+    regex: /^8[1-9]\d{7,11}$/,
+    digitGroups: [3, 4, 6],
+    maxDigits: 13
+  }
+};
+const phoneList = Object.keys(phoneType2ConfigMap).map((type) => {
+  const config = phoneType2ConfigMap[type];
+  return {
+    label: config.areaCode,
+    value: config.areaCode,
+    ...config
+  };
+});
+const formatPhoneDigits = (rawDigits, groups, maxDigits) => {
+  return formatDigitsByGroups(rawDigits, groups, maxDigits, " ");
+};
+const phoneConfigByAreaCode = (areaCode) => {
+  const p = String(areaCode);
+  return phoneList.find((item) => item.areaCode === p || String(item.value) === p);
+};
+export {
+  formatPhoneDigits,
+  phoneConfigByAreaCode,
+  phoneList
+};

package/dist/es/components/business/PhoneField/index.js

@@ -0,0 +1,14 @@
+import "../../../core.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import "../../../core/context.js";
+import "../../../out/worldpay-jsc-origin.js";
+import "../../internal/Form/type.js";
+import "../../internal/Form/context.js";
+import "../../internal/Form/FormItem.js";
+import "../../internal/Form/Form.js";
+import "../../internal/Select/Select.js";
+import "../../internal/Input/Input.js";
+import "../../internal/Input/type.js";
+import "./config.js";
+import "./phone-field.js";

package/dist/es/components/business/PhoneField/phone-field.js

@@ -0,0 +1 @@
+

package/dist/es/components/business/PhoneField/type.js

@@ -0,0 +1 @@
+

package/dist/es/components/business/SegmentedDigitInput/SegmentedDigitInput.js

@@ -0,0 +1,80 @@
+import { T, u } from "../../../core.js";
+import { clamp } from "../../../utils/index.js";
+import { Input } from "../../internal/Input/Input.js";
+import "../../internal/Input/type.js";
+import { maxFormattedLength, formatDigitsByGroups } from "./format.js";
+import { trimAll, limitedToNumber } from "../../../utils/format.js";
+function cursorPosAfterDigitCount(formatted, digitCount) {
+  if (digitCount <= 0)
+    return 0;
+  let seen = 0;
+  for (let i = 0; i < formatted.length; i++) {
+    if (/\d/.test(formatted[i])) {
+      seen++;
+      if (seen === digitCount)
+        return i + 1;
+    }
+  }
+  return formatted.length;
+}
+const SegmentedDigitInput = (props) => {
+  const {
+    value,
+    digitGroups,
+    maxDigits,
+    separator = " ",
+    onInput,
+    placeholder,
+    disabled,
+    inputClassName,
+    style,
+    onFocus,
+    onBlur,
+    leftIcon,
+    rightIcon
+  } = props;
+  const maxLen = T(
+    () => maxFormattedLength(digitGroups, maxDigits, separator),
+    [digitGroups, maxDigits, separator]
+  );
+  const onInnerInput = (event) => {
+    const { currentTarget, inputType } = event;
+    const selectionStart = currentTarget.selectionStart ?? 0;
+    const oldVal = currentTarget.value;
+    const sep = separator;
+    const digitsBeforeCursor = trimAll(oldVal.slice(0, selectionStart)).length;
+    let digits = limitedToNumber(currentTarget.value).slice(0, maxDigits);
+    const newVal = formatDigitsByGroups(digits, digitGroups, maxDigits, sep);
+    let newPos = cursorPosAfterDigitCount(newVal, digitsBeforeCursor);
+    if (inputType === "insertText" && newPos > 0 && newVal[newPos - 1] === sep) {
+      newPos = clamp(newPos + 1, 0, newVal.length);
+    }
+    if (inputType === "deleteContentBackward" && newPos > 0 && newVal[newPos - 1] === sep) {
+      newPos = clamp(newPos - 1, 0, newVal.length);
+    }
+    currentTarget.value = newVal;
+    currentTarget.setSelectionRange(newPos, newPos);
+    onInput == null ? void 0 : onInput(event);
+  };
+  return /* @__PURE__ */ u(
+    Input,
+    {
+      type: "text",
+      inputmode: "numeric",
+      maxLength: maxLen,
+      value,
+      onInput: onInnerInput,
+      placeholder,
+      disabled,
+      inputClassName,
+      style,
+      onFocus,
+      onBlur,
+      leftIcon,
+      rightIcon
+    }
+  );
+};
+export {
+  SegmentedDigitInput
+};

package/dist/es/components/business/SegmentedDigitInput/format.js

@@ -0,0 +1,26 @@
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import { limitedToNumber } from "../../../utils/format.js";
+function formatDigitsByGroups(rawDigits, groups, maxDigits, separator = " ") {
+  const d = limitedToNumber(rawDigits).slice(0, maxDigits);
+  if (!d)
+    return "";
+  const parts = [];
+  let i = 0;
+  for (let g = 0; g < groups.length && i < d.length; g++) {
+    const len = groups[g];
+    parts.push(d.slice(i, i + len));
+    i += len;
+  }
+  if (i < d.length) {
+    parts.push(d.slice(i));
+  }
+  return parts.join(separator);
+}
+function maxFormattedLength(groups, maxDigits, separator = " ") {
+  return formatDigitsByGroups("0".repeat(maxDigits), groups, maxDigits, separator).length;
+}
+export {
+  formatDigitsByGroups,
+  maxFormattedLength
+};

package/dist/es/components/business/SegmentedDigitInput/index.js

@@ -0,0 +1,5 @@
+import "../../../core.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import "../../internal/Input/Input.js";
+import "../../internal/Input/type.js";

package/dist/es/components/business/Tooltip/Tooltip.js

@@ -0,0 +1,18 @@
+import { u } from "../../../core.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 "../../../out/worldpay-jsc-origin.js";
+import "./tooltip2.js";
+const Tooltip = (props) => {
+  const { content, children } = props;
+  const { bem } = useBEM("tooltip");
+  return /* @__PURE__ */ u("div", { className: bem(), children: [
+    /* @__PURE__ */ u("div", { className: bem("trigger"), children }),
+    /* @__PURE__ */ u("div", { className: bem("popup"), role: "tooltip", children: content })
+  ] });
+};
+export {
+  Tooltip
+};

package/dist/es/components/business/Tooltip/index.js

@@ -0,0 +1,6 @@
+import "../../../core.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import "../../../core/context.js";
+import "../../../out/worldpay-jsc-origin.js";
+import "./tooltip2.js";

package/dist/es/components/business/Tooltip/tooltip2.js

@@ -0,0 +1 @@
+

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

@@ -5,3 +5,17 @@ import "../../core/context.js";
 import "../../out/worldpay-jsc-origin.js";
 import "../internal/Modal/Modal.js";
 import "./QRCodeModal/qr-code-modal.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 "../internal/Select/Select.js";
+import "./PhoneField/config.js";
+import "./PhoneField/phone-field.js";
+import "./Tooltip/tooltip2.js";
+import "./BlikCodeField/blik-code-field.js";
+import "../internal/Button/button2.js";
+import "./BlikConfirmModal/blik-confirm-modal.js";
+import "../internal/LoadingCheck/loading-check.js";

package/dist/es/components/index.js

@@ -29,13 +29,13 @@ import "./Sepa/index.js";
 import "./EncryptedCard/index.js";
 import "./CombinedCardInfo/index.js";
 import "./DropIn/index.js";
-import "./Boost/index.js";
-import "./LinePay/index.js";
-import "./MayBankQRPay/index.js";
-import "./NinePay/index.js";
-import "./GrabPay/index.js";
-import "./TNGWallet/index.js";
-import "./ShopeePay/index.js";
+import "./wallets/Boost/Boost.js";
+import "./wallets/GrabPay/GrabPay.js";
+import "./wallets/LinePay/LinePay.js";
+import "./wallets/NinePay/NinePay.js";
+import "./wallets/MayBankQRPay/MayBankQRPay.js";
+import "./wallets/ShopeePay/ShopeePay.js";
+import "./wallets/TNGWallet/TNGWallet.js";
 import "./wallets/GCash/GCash.js";
 import "./wallets/Paymaya/Paymaya.js";
 import "./wallets/Zalopay/Zalopay.js";
@@ -44,3 +44,10 @@ import "./wallets/Pix/Pix.js";
 import "./wallets/PicPay/PicPay.js";
 import "./wallets/PagaWallet/PagaWallet.js";
 import "./wallets/OpayWallet/OpayWallet.js";
+import "./wallets/OVO/OVO.js";
+import "./wallets/Bancontact/Bancontact.js";
+import "./wallets/Blik/Blik.js";
+import "./wallets/IDeal/IDeal.js";
+import "./wallets/Skrill/Skrill.js";
+import "./wallets/P24/P24.js";
+import "./wallets/Trustly/Trustly.js";

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

@@ -10,14 +10,14 @@ import "../../../out/worldpay-jsc-origin.js";
 import { IconChecked } from "../icons/iconChecked.js";
 const { bem } = useBEM("check-box");
 const CheckBox = (props) => {
-  const { checked, onChange, label, style } = props;
+  const { checked, onChange, label, style, disabled } = props;
   const handleChange = () => {
     onChange == null ? void 0 : onChange(!checked);
   };
   return /* @__PURE__ */ u(
     "div",
     {
-      className: normalizedClass(COMMON_CLASS_NAME, bem({ checked })),
+      className: normalizedClass(COMMON_CLASS_NAME, bem({ checked, disabled })),
       onClick: handleChange,
       style,
       children: [

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

@@ -108,7 +108,7 @@ const Input = w((props, ref) => {
         autocomplete: "off"
       }
     ),
-    !!rightIcon && /* @__PURE__ */ u("div", { class: inputBEM.bem("right-icon"), children: rightIcon })
+    !!rightIcon && /* @__PURE__ */ u("div", { class: inputBEM.bem("right-icon", { disabled }), children: rightIcon })
   ] }) });
 });
 export {

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

@@ -16,6 +16,7 @@ import { SelectMenu } from "./SelectMenu.js";
 import { SelectMenuItem } from "./SelectMenuItem.js";
 const { bem } = useBEM("select");
 const Select = w((props, ref) => {
+  const { disabled } = props;
   const formItemContext = x(FormItemContext);
   let status = props.status ?? (formItemContext == null ? void 0 : formItemContext.validationResult.status);
   if (status === "unValidate")
@@ -107,6 +108,9 @@ const Select = w((props, ref) => {
     setDropMenuVisible(false);
     setIsInputChange(false);
     (_c = (_b = inputRef.current) == null ? void 0 : _b.input) == null ? void 0 : _c.blur();
+    if (callCallBack) {
+      formItemContext == null ? void 0 : formItemContext.setValue(selectedValue);
+    }
     callCallBack && ((_d = props == null ? void 0 : props.onSelect) == null ? void 0 : _d.call(props, selectedValue, option));
   }
   function onInputChange(event) {
@@ -157,6 +161,7 @@ const Select = w((props, ref) => {
     /* @__PURE__ */ u(FormItemContext.Provider, { value: null, children: /* @__PURE__ */ u(
       Input,
       {
+        disabled,
         ref: inputRef,
         value: inputValue,
         status,
@@ -177,7 +182,8 @@ const Select = w((props, ref) => {
         class: bem("render-label", [
           {
             placeholder: isFocus,
-            hidden: isInputChange
+            hidden: isInputChange,
+            disabled
           }
         ]),
         onClick: onClickDisplay,

package/dist/es/components/internal/icons/IconArrowDown.js

@@ -4,7 +4,7 @@ import { isUndefined } from "../../../utils/is.js";
 import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
 import { normalizedClass } from "../../../utils/format.js";
-function IconArrowDown({ size, style, className }) {
+const IconArrowDown = ({ size, style, className }) => {
   const computedSize = !isUndefined(size) ? `${size}px` : "1em";
   return /* @__PURE__ */ u(
     "svg",
@@ -12,17 +12,17 @@ function IconArrowDown({ size, style, className }) {
       width: computedSize,
       height: computedSize,
       viewBox: "0 0 16 16",
-      fill: "none",
+      fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
       style,
       className: normalizedClass(COMMON_CLASS_NAME, className),
       children: [
-        /* @__PURE__ */ u("g", { id: "icon-wrapper", "clip-path": "url(#clip0_543_1600)", children: /* @__PURE__ */ u("g", { id: "direction/down", children: /* @__PURE__ */ u("path", { id: "Vector", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6719 6.28589L12.7291 5.34308L8.01502 10.0571L3.30098 5.34308L2.35817 6.28589L7.54358 11.4713C7.54358 11.4713 7.54362 11.4713 8.01502 10.9999L7.54358 11.4713L8.01502 11.9427L13.6719 6.28589Z", fill: "#1F1F1F" }) }) }),
+        /* @__PURE__ */ u("g", { id: "icon-wrapper", "clip-path": "url(#clip0_543_1600)", children: /* @__PURE__ */ u("g", { id: "direction/down", children: /* @__PURE__ */ u("path", { id: "Vector", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6719 6.28589L12.7291 5.34308L8.01502 10.0571L3.30098 5.34308L2.35817 6.28589L7.54358 11.4713C7.54358 11.4713 7.54362 11.4713 8.01502 10.9999L7.54358 11.4713L8.01502 11.9427L13.6719 6.28589Z", fill: "currentColor" }) }) }),
         /* @__PURE__ */ u("defs", { children: /* @__PURE__ */ u("clipPath", { id: "clip0_543_1600", children: /* @__PURE__ */ u("rect", { width: "16", height: "16", fill: "white" }) }) })
       ]
     }
   );
-}
+};
 export {
   IconArrowDown
 };