@paykka/card-checkout-ui 0.11.6 → 0.13.2

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

@@ -1,18 +1,19 @@
-import { w, A, F, h, y, q, u } from "../../core.js";
+import { w, A, F, h, y, q, u, b } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
-import { COMMON_CLASS_NAME, PaymentType } from "../../constant.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
-import { cssVarPrefix, normalizedClass, formatAmount } from "../../utils/format.js";
+import { normalizedClass, formatAmount } from "../../utils/format.js";
+import { formatPaymentResult } from "../../utils/payment.js";
+import { getBrowserParams } from "../../api/modules/get-browser-params.js";
+import { COMMON_CLASS_NAME, PaymentType, PaymentMethod, SessionMode } from "../../constant.js";
 import { getWechatPayInfo, wechatPay } from "../../api/modules/wechat-pay/index.js";
 import { CoreContext } from "../../core/context.js";
 import { PayKKaError } from "../../core/error.js";
-import { createAddressCore } from "../../core/Address.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { usePayState } from "../../hooks/usePayState.js";
 import { useRetry } from "../../hooks/useRetry.js";
 import { AddressField } from "../AddressField/index.js";
-import { EmailField, createEmailCore } from "../EmailField/EmailField.js";
+import { createEmailCore, EmailField } from "../EmailField/EmailField.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import "../internal/Form/FormItem.js";
@@ -21,10 +22,11 @@ import { Info } from "../internal/Info/Info.js";
 import { RecurringTip } from "../RecurringTip/index.js";
 import { SubmitButton } from "../SubmitButton/index.js";
 const { bem } = useBEM("wechat-pay");
+const fieldClassNames = bem("field");
 const WechatPay = w((props, ref) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  const { session } = props;
-  const addressState = createAddressCore();
+  var _a;
+  const { session, core, showEmail = false, showAddress = false } = props;
+  const addressCore = core.getAddressCore();
   const emailState = createEmailCore();
   const emailFieldRef = A(null);
   F(ref, () => ({
@@ -40,13 +42,21 @@ const WechatPay = w((props, ref) => {
     },
     updateAddress: () => {
       var _a2;
-      setForm(Object.assign(form, { address: addressState.getAddressState() }));
-      (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressState.getAddressState());
+      if (!(fieldStatus == null ? void 0 : fieldStatus.address.show))
+        return;
+      const newForm = Object.assign(form, { address: addressCore.getAddressState() });
+      setForm(newForm);
+      (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressCore.getAddressState());
+      validateForm();
     },
     updateEmail: () => {
       var _a2;
-      setForm(Object.assign(form, { email: emailState.email }));
+      if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
+        return;
+      const newForm = Object.assign(form, { email: emailState.email });
+      setForm(newForm);
       (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
+      validateForm();
     }
   }));
   const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
@@ -55,19 +65,19 @@ const WechatPay = w((props, ref) => {
   const [form, setForm] = h({
     email: "",
     address: {
-      country: "",
-      province: "",
-      city: "",
-      area: "",
-      postCode: "",
-      address1: "",
-      address2: ""
+      country: void 0,
+      province: void 0,
+      city: void 0,
+      area: void 0,
+      postCode: void 0,
+      address1: void 0,
+      address2: void 0
     }
   });
   const [validated, setValidated] = h(false);
-  const disabledEmail = A(false);
-  const [requiredBill, setRequiredBill] = h(false);
+  const [fieldStatus, setFieldStatus] = h();
   const addressFieldRef = A(null);
+  const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
   function validateForm() {
     var _a2;
     (_a2 = formRef.current) == null ? void 0 : _a2.validate(void 0, false).then(() => {
@@ -76,23 +86,46 @@ const WechatPay = w((props, ref) => {
       setValidated(false);
     });
   }
+  const initFieldStatus = () => {
+    const { field, sessionMode } = session.checkout;
+    const { email, address } = field;
+    if (sessionMode === SessionMode.COMPONENT) {
+      if (email.disabled) {
+        email.show = showEmail;
+      }
+      if (showAddress && !(address == null ? void 0 : address.show)) {
+        address.show = true;
+      }
+    }
+    setFieldStatus({ ...field });
+  };
   y(() => {
     validateForm();
   }, [form]);
+  const processOnSuccess = (res) => {
+    var _a2, _b;
+    setSubmitButtonStatus("success");
+    (_b = props.onSuccess) == null ? void 0 : _b.call(
+      props,
+      formatPaymentResult({
+        ...res,
+        returnUrl: (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.returnUrl
+      })
+    );
+  };
   y(() => {
-    var _a2;
-    if (sessionReady) {
-      if ((session == null ? void 0 : session.checkout.status) === "SUCCESS") {
-        setSubmitButtonStatus("success");
-        (_a2 = props.onSuccess) == null ? void 0 : _a2.call(props);
-      }
-      form.email = (session == null ? void 0 : session.checkout.bill.email) ?? "";
-      disabledEmail.current = !!(session == null ? void 0 : session.checkout.bill.email);
-      (session == null ? void 0 : session.checkout.bill.billingAddressCollection) === "REQUIRED" ? setRequiredBill(true) : setRequiredBill(false);
-      !requiredBill && setTimeout(() => {
-        validateForm();
-      }, 100);
+    if (!sessionReady) {
+      return;
+    }
+    const { bill = {}, supportMethods = [], country } = (session == null ? void 0 : session.checkout) || {};
+    if (!supportMethods.includes(PaymentMethod.WECHAT_PAY)) {
+      return;
     }
+    initFieldStatus();
+    setIsCheckoutEnabled(true);
+    country && addressCore.setCountry(country);
+    form.email = bill.email ?? "";
+    form.address.country = country;
   }, [sessionReady]);
   const onTimeout = q(
     (message) => {
@@ -110,68 +143,82 @@ const WechatPay = w((props, ref) => {
       onTimeout: () => onTimeout(i18n.get("common.queryTimeout"))
     }
   );
+  const getPaymentParams = async () => {
+    var _a2;
+    return {
+      sessionId: session.sessionId,
+      clientKey: session.clientKey,
+      bill: (fieldStatus == null ? void 0 : fieldStatus.address.show) ? {
+        email: form.email,
+        addressLine1: form.address.address1,
+        addressLine2: form.address.address2,
+        postalCode: form.address.postCode,
+        country: form.address.country,
+        district: form.address.area,
+        state: form.address.province ? addressCore.getLabel(form.address.province, addressCore.getProvinceOption()) ?? form.address.province : void 0,
+        city: form.address.city ? addressCore.getLabel(form.address.city, addressCore.getCityOptions()) ?? form.address.city : void 0
+      } : {
+        email: form.email
+      },
+      channelUserId: await ((_a2 = props.onGetOpenId) == null ? void 0 : _a2.call(props)),
+      payment: {
+        paymentMethod: PaymentMethod.WECHAT_PAY
+      },
+      browser: await getBrowserParams()
+    };
+  };
   async function pay(search = false, timeout) {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     try {
-      const res = search ? await getWechatPayInfo(
-        {
-          sessionId: session.sessionId,
-          clientKey: session.clientKey
-        },
-        { locale: i18n.locale, timeout }
-      ) : await wechatPay(
-        {
-          sessionId: session.sessionId,
-          clientKey: session.clientKey,
-          bill: requiredBill ? {
-            email: form.email,
-            ...form.address,
-            province: addressState.getLabel(
-              form.address.province,
-              addressState.getProvinceOption()
-            ) ?? form.address.province,
-            city: addressState.getLabel(form.address.city, addressState.getCityOptions()) ?? form.address.city
-          } : {
-            email: form.email
+      const requestOptions = { locale: i18n.locale, timeout };
+      let res = null;
+      if (search) {
+        const extraParams = (_b = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b.call(_a2, "query", PaymentMethod.WECHAT_PAY);
+        res = await getWechatPayInfo(
+          {
+            sessionId: session.sessionId,
+            clientKey: session.clientKey,
+            paymentMethod: PaymentMethod.WECHAT_PAY
           },
-          channelUserId: await ((_a2 = props.onGetOpenId) == null ? void 0 : _a2.call(props))
-        },
-        props.core,
-        { locale: i18n.locale, timeout }
-      );
-      const { status, orderStatus, errorMessage, payInfo, errorCode } = res;
-      !search && ((_b2 = props.onSubmitResponse) == null ? void 0 : _b2.call(props, res));
+          extraParams,
+          requestOptions
+        );
+      } else {
+        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", PaymentMethod.WECHAT_PAY);
+        res = await wechatPay(await getPaymentParams(), extraParams, requestOptions);
+      }
+      const { status, orderStatus, errorMessage, payInfo, errorCode, sessionId } = res;
+      sessionId && (session.sessionId = sessionId);
+      !search && ((_e = props.onSubmitResponse) == null ? void 0 : _e.call(props, res));
       if (status === "PROCESSING") {
         if (!orderStatus) {
           setSubmitButtonStatus("unSubmit");
           return { end: true };
         } else if (orderStatus === "SUCCESS") {
-          setSubmitButtonStatus("success");
-          (_c2 = props.onSuccess) == null ? void 0 : _c2.call(props);
+          processOnSuccess(res);
           return { end: true };
         } else if (orderStatus === "FAILURE") {
-          setErrorMsg(errorMessage);
+          errorMessage && setErrorMsg(errorMessage);
           setSubmitButtonStatus("unSubmit");
-          (_d2 = props.onError) == null ? void 0 : _d2.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
+          (_f = props.onError) == null ? void 0 : _f.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
           return { end: true };
         } else if (orderStatus === "PROCESSING") {
           if (!search) {
-            await ((_e2 = props.onCallWxPayBox) == null ? void 0 : _e2.call(props, payInfo));
+            await ((_g = props.onCallWxPayBox) == null ? void 0 : _g.call(props, payInfo));
             startReFetchPayInfo();
           }
           return { end: false };
         } else if (orderStatus === "CANCELED") {
           setSubmitButtonStatus("unSubmit");
-          (_f2 = props.onTimeout) == null ? void 0 : _f2.call(props, "channel");
+          (_h = props.onTimeout) == null ? void 0 : _h.call(props, "channel");
           return { end: true };
         }
       } else if (status === "SUCCESS") {
-        setSubmitButtonStatus("success");
-        (_g2 = props.onSuccess) == null ? void 0 : _g2.call(props);
+        processOnSuccess(res);
         return { end: true };
       } else if (status === "EXPIRED") {
         setSubmitButtonStatus("unSubmit");
-        (_h2 = props.onExpired) == null ? void 0 : _h2.call(props);
+        (_i = props.onExpired) == null ? void 0 : _i.call(props);
         return { end: true };
       }
       setSubmitButtonStatus("unSubmit");
@@ -186,8 +233,8 @@ const WechatPay = w((props, ref) => {
         }
       } else {
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
-        setErrorMsg(message);
-        (_i2 = props.onError) == null ? void 0 : _i2.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
+        message && setErrorMsg(message);
+        (_j = props.onError) == null ? void 0 : _j.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         setSubmitButtonStatus("unSubmit");
         return { end: true };
       }
@@ -198,7 +245,7 @@ const WechatPay = w((props, ref) => {
     setErrorMsg("");
     (_a2 = formRef.current) == null ? void 0 : _a2.validate(async (errors) => {
       var _a3;
-      requiredBill && addressState.setValidateAllFields(true);
+      (fieldStatus == null ? void 0 : fieldStatus.address.show) && addressCore.setValidateAllFields(true);
       (_a3 = props.onSubmit) == null ? void 0 : _a3.call(props, errors);
       if (errors) {
         setSubmitButtonStatus("unSubmit");
@@ -232,43 +279,45 @@ const WechatPay = w((props, ref) => {
     formRef.current = dom;
     dom && validateForm();
   };
-  const formStyle = {
-    [cssVarPrefix("button-bg-color")]: (_a = session == null ? void 0 : session.colors) == null ? void 0 : _a.primary,
-    [cssVarPrefix("button-bg-color-hover")]: (_b = session == null ? void 0 : session.colors) == null ? void 0 : _b.primaryHover,
-    [cssVarPrefix("button-bg-color-active")]: (_c = session == null ? void 0 : session.colors) == null ? void 0 : _c.primaryActive,
-    [cssVarPrefix("button-text-color")]: (_e = (_d = session == null ? void 0 : session.checkout) == null ? void 0 : _d.theme) == null ? void 0 : _e.payButtonTextColor,
-    [cssVarPrefix("input-color")]: (_f = session == null ? void 0 : session.colors) == null ? void 0 : _f.primary
+  const Email = () => {
+    return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.email.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
+      EmailField,
+      {
+        ref: emailFieldRef,
+        value: form.email,
+        disabled: fieldStatus == null ? void 0 : fieldStatus.email.disabled
+      }
+    ) }) });
+  };
+  const Address = () => {
+    var _a2, _b;
+    return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.address.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
+      AddressField,
+      {
+        ref: addressFieldRef,
+        value: form.address,
+        country: ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.country) || ((_b = session == null ? void 0 : session.checkout) == null ? void 0 : _b.bill.country),
+        onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
+      }
+    ) }) });
   };
   return /* @__PURE__ */ u(
     CoreContext.Provider,
     {
       value: {
         i18n,
-        session
+        session,
+        core
       },
-      children: sessionReady && i18n.ready.value && /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: formStyle, children: [
-        /* @__PURE__ */ u(
-          EmailField,
-          {
-            ref: emailFieldRef,
-            className: bem("email"),
-            value: form.email,
-            disabled: !!disabledEmail.current
-          }
-        ),
-        requiredBill && /* @__PURE__ */ u(
-          AddressField,
-          {
-            ref: addressFieldRef,
-            value: form.address,
-            country: ((_g = session == null ? void 0 : session.checkout) == null ? void 0 : _g.country) || ((_h = session == null ? void 0 : session.checkout) == null ? void 0 : _h.bill.country),
-            onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
-          }
-        ),
-        ((_i = session == null ? void 0 : session.checkout) == null ? void 0 : _i.paymentType) === PaymentType.RECURRING && RecurringTip(),
-        !!errorMsg && /* @__PURE__ */ u(Info, { className: bem("error"), content: errorMsg }),
-        Button()
-      ] }) })
+      children: isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u("div", { className: core.theme.className, children: /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), children: [
+        Email(),
+        Address(),
+        ((_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.paymentType) === PaymentType.RECURRING && RecurringTip(),
+        /* @__PURE__ */ u("div", { className: bem("footer-wrapper"), children: [
+          !!errorMsg && /* @__PURE__ */ u(Info, { className: bem("error"), content: errorMsg }),
+          Button()
+        ] })
+      ] }) }) })
     }
   );
 });

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

@@ -1,35 +1,55 @@
 import { u, b } from "../../../core.js";
 import { useBEM } from "../../../hooks/useBEM.js";
 import { useI18n } from "../../../hooks/useI18n.js";
-import "../../../api/http.js";
 import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
 import { formatAmount } from "../../../utils/format.js";
 import { formatTime } from "../../../utils/date.js";
+import "../../../api/http.js";
 import { useBreakpoints } from "../../../hooks/useBreakpoints.js";
 import { Modal } from "../../internal/Modal/Modal.js";
 import "./qr-code-modal.js";
 import { QRCode } from "../../internal/QRCode/QRCode.js";
 const { bem } = useBEM("qr-code-modal");
 const QRCodeModal = (props) => {
-  const { title, bgColor, expiredTime, amount, icon, qrCode, onClose } = props;
+  const {
+    title,
+    bgColor = "#FFFFFF",
+    textColor = "#1F1F1F",
+    expiredTime,
+    amount,
+    icon,
+    qrCode,
+    onClose
+  } = props;
   const { i18n } = useI18n();
   const breakpoints = useBreakpoints();
+  const useRoundBorder = !bgColor || ["transparent", "white", "#FFFFFF"].includes(bgColor);
+  const RoundBorder = () => {
+    return /* @__PURE__ */ u("div", { className: bem("round-border"), children: [
+      /* @__PURE__ */ u("div", { className: bem("round-border-item") }),
+      /* @__PURE__ */ u("div", { className: bem("round-border-item") }),
+      /* @__PURE__ */ u("div", { className: bem("round-border-item") }),
+      /* @__PURE__ */ u("div", { className: bem("round-border-item") })
+    ] });
+  };
   return /* @__PURE__ */ u(
     Modal,
     {
       show: true,
       width: breakpoints.smaller("xs") ? "90vw" : "340px",
-      appendToBody: true,
       onChange: (status) => !status && (onClose == null ? void 0 : onClose()),
       children: /* @__PURE__ */ u("div", { className: bem(), children: [
         /* @__PURE__ */ u("div", { className: bem("title"), children: title }),
         /* @__PURE__ */ u("div", { className: bem("container"), children: /* @__PURE__ */ u("div", { className: bem("body"), style: { backgroundColor: bgColor }, children: [
           icon && /* @__PURE__ */ u("div", { className: bem("icon"), children: icon }),
-          /* @__PURE__ */ u("div", { className: bem("qr-code"), children: /* @__PURE__ */ u(QRCode, { value: qrCode }) }),
+          /* @__PURE__ */ u("div", { className: bem("qr-code-container"), children: [
+            useRoundBorder && /* @__PURE__ */ u(RoundBorder, {}),
+            /* @__PURE__ */ u("div", { className: bem("qr-code"), children: /* @__PURE__ */ u(QRCode, { size: 160, value: qrCode }) })
+          ] }),
           expiredTime && /* @__PURE__ */ u(b, { children: [
-            /* @__PURE__ */ u("div", { className: bem("expired-time"), children: formatTime(expiredTime) }),
-            /* @__PURE__ */ u("div", { className: bem("expired-time-text"), children: i18n.get("qrCode.expired") })
+            /* @__PURE__ */ u("div", { style: { color: textColor }, className: bem("expired-time"), children: formatTime(expiredTime) }),
+            /* @__PURE__ */ u("div", { style: { color: textColor }, className: bem("expired-time-text"), children: i18n.get("qrCode.expired") })
           ] })
         ] }) }),
         amount && /* @__PURE__ */ u("div", { className: bem("amount"), children: formatAmount(amount).jointSymbolAndCurrency() })

package/dist/es/components/index.js

@@ -38,3 +38,4 @@ import "./TNGWallet/index.js";
 import "./ShopeePay/index.js";
 import "./wallets/GCash/GCash.js";
 import "./wallets/Paymaya/Paymaya.js";
+import "./wallets/Zalopay/Zalopay.js";

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

@@ -5,7 +5,7 @@ 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 { set } from "../../../utils/object.js";
 import { FormItemContext, FormContext } from "./context.js";
 import { formItemBEM, formItemLabelClassName, formItemErrorMessageClassName } from "./type.js";
 import { getActiveRules } from "./util.js";

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

@@ -1,5 +1,5 @@
 import { getIf } from "../../../utils/index.js";
-import { set } from "../../../utils/obj.js";
+import { set } from "../../../utils/object.js";
 import { isArray } from "../../../utils/is.js";
 function isIncludeTrigger(ruleItem, trigger) {
   if (!trigger)

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

@@ -1,9 +1,9 @@
 import { w, h, T, u, b, P } from "../../../core.js";
 import { useBEM } from "../../../hooks/useBEM.js";
 import { useI18n } from "../../../hooks/useI18n.js";
-import "../../../api/http.js";
 import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
+import "../../../api/http.js";
 import "./modal2.js";
 const { bem } = useBEM("modal");
 const Modal = w((props) => {

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

@@ -1,4 +1,4 @@
-import { w, x, h, A, T, y, F, m, u } from "../../../core.js";
+import { w, x, h, A, y, F, q, u } from "../../../core.js";
 import { useBEM } from "../../../hooks/useBEM.js";
 import "../../../core/context.js";
 import { isNil } from "../../../utils/is.js";
@@ -27,7 +27,10 @@ const Select = w((props, ref) => {
   const inputRef = A(null);
   const [dropMenuVisible, setDropMenuVisible] = h(false);
   const [doFilter, setDoFilter] = h(false);
-  T(() => {
+  y(() => {
+    if (doFilter) {
+      return;
+    }
     setSelectOptions(props.options ?? []);
     if (!isNil(props.value) && props.options.length > 0) {
       const item = findItemByValue(props.value, props.options);
@@ -82,7 +85,7 @@ const Select = w((props, ref) => {
     if (isNil(inputValue) || inputValue === "") {
       setIsInputChange(false);
     }
-    if (selectOptions.length === 0 && props.options.length !== 0) {
+    if (!selectOptions.length && props.options.length) {
       setInputValue("");
       setIsInputChange(false);
     } else {
@@ -110,13 +113,21 @@ const Select = w((props, ref) => {
   }
   let startClick;
   let endClick;
-  document.addEventListener("mousedown", (e) => {
+  const handleMouseDown = q((e) => {
     startClick = e;
-  });
-  document.addEventListener("mouseup", (e) => {
+  }, []);
+  const handleMouseUp = q((e) => {
     endClick = e;
     validateClickOut(endClick, startClick);
-  });
+  }, []);
+  y(() => {
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, []);
   function validateClickOut(mouseup, mousedown) {
     var _a, _b;
     if (!selectRef.current)
@@ -130,7 +141,7 @@ const Select = w((props, ref) => {
     }
     setDropMenuVisible(false);
   }
-  const selectRef = m();
+  const selectRef = A(null);
   const defRightIcon = IconArrowDown({
     style: {
       transform: dropMenuVisible ? "rotate(-180deg)" : "rotate(0deg)",

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

@@ -6,10 +6,10 @@ import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
 import "../../../api/http.js";
 const { bem } = useBEM("select");
-function SelectMenu(props) {
+const SelectMenu = (props) => {
   const { style, children } = props;
   return /* @__PURE__ */ u("div", { style, class: bem("menu"), children });
-}
+};
 export {
   SelectMenu
 };

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

@@ -12,13 +12,21 @@ function SelectMenuItem(props) {
   const { onSelect, ...restProps } = props;
   const { label } = restProps;
   function onClick(e) {
+    e.preventDefault();
     e.stopPropagation();
     onSelect == null ? void 0 : onSelect({ ...restProps });
   }
-  return /* @__PURE__ */ u("div", { onClick: (e) => onClick(e), class: bem("menu-item", [{ selected: props.selected }]), children: [
-    isFunction(label) ? label(props, props.selected) : label,
-    props.selected && /* @__PURE__ */ u("div", { class: bem("menu-item-icon"), children: IconTick({}) })
-  ] });
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      onClick: (e) => onClick(e),
+      class: bem("menu-item", [{ selected: props.selected }]),
+      children: [
+        isFunction(label) ? label(props, props.selected) : label,
+        props.selected && /* @__PURE__ */ u("div", { class: bem("menu-item-icon"), children: IconTick({}) })
+      ]
+    }
+  );
 }
 export {
   SelectMenuItem

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

@@ -14,20 +14,23 @@ function IconError({ size, style, className }) {
       viewBox: "0 0 16 16",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      style,
+      style: {
+        ...style,
+        marginBottom: "-2px"
+      },
       className: normalizedClass(COMMON_CLASS_NAME, className),
       children: [
-        /* @__PURE__ */ u("g", { id: "icon-error", "clip-path": "url(#clip0_21_2165)", children: /* @__PURE__ */ u("g", { id: "tips/exclamation-circle-fill", children: /* @__PURE__ */ u(
+        /* @__PURE__ */ u("g", { id: "icon-Error", "clip-path": "url(#clip0_765_422)", children: /* @__PURE__ */ u("g", { id: "tips/exclamation-circle-fill", children: /* @__PURE__ */ u(
           "path",
           {
             id: "Vector",
             "fill-rule": "evenodd",
             "clip-rule": "evenodd",
-            d: "M1.33301 8.00004C1.33301 4.31814 4.31778 1.33337 7.99967 1.33337C11.6816 1.33337 14.6663 4.31814 14.6663 8.00004C14.6663 11.6819 11.6816 14.6667 7.99967 14.6667C4.31778 14.6667 1.33301 11.6819 1.33301 8.00004ZM7.33301 10V11.3334H8.66634V10H7.33301ZM8.66634 9.33337L8.66634 4.66671H7.33301L7.33301 9.33337H8.66634Z",
+            d: "M1.33398 7.99992C1.33398 4.31802 4.31875 1.33325 8.00065 1.33325C11.6826 1.33325 14.6673 4.31802 14.6673 7.99992C14.6673 11.6818 11.6826 14.6666 8.00065 14.6666C4.31875 14.6666 1.33398 11.6818 1.33398 7.99992ZM7.33398 9.99992V11.3333H8.66732V9.99992H7.33398ZM8.66732 9.33325L8.66732 4.66659H7.33399L7.33398 9.33325H8.66732Z",
             fill: "#F53F3F"
           }
         ) }) }),
-        /* @__PURE__ */ u("defs", { children: /* @__PURE__ */ u("clipPath", { id: "clip0_21_2165", children: /* @__PURE__ */ u("rect", { width: "16", height: "16", fill: "white" }) }) })
+        /* @__PURE__ */ u("defs", { children: /* @__PURE__ */ u("clipPath", { id: "clip0_765_422", children: /* @__PURE__ */ u("rect", { width: "16", height: "16", fill: "white" }) }) })
       ]
     }
   );

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

@@ -0,0 +1,47 @@
+import { u } from "../../../core.js";
+import { COMMON_CLASS_NAME } from "../../../constant.js";
+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";
+const IconZalopay = ({ size, style, className }) => {
+  const computedSize = !isUndefined(size) ? `${size}px` : "1em";
+  return /* @__PURE__ */ u(
+    "svg",
+    {
+      width: computedSize,
+      height: computedSize,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style,
+      className: normalizedClass(COMMON_CLASS_NAME, className),
+      children: /* @__PURE__ */ u("g", { id: "9pay", children: [
+        /* @__PURE__ */ u("rect", { width: "24", height: "24", rx: "4.8", fill: "white" }),
+        /* @__PURE__ */ u(
+          "path",
+          {
+            id: "Vector",
+            "fill-rule": "evenodd",
+            "clip-rule": "evenodd",
+            d: "M13.5067 13.2344V16.9375H14.1224V18.1751H13.6847C13.1882 18.1751 12.7528 17.9196 12.4994 17.5336C12.0819 17.9301 11.5298 18.1744 10.9218 18.1744C9.62342 18.1744 8.5701 17.0701 8.5701 15.7075C8.5701 14.345 9.62274 13.2407 10.9218 13.2407C11.423 13.2407 11.8865 13.4061 12.2676 13.686V13.2344H13.5067ZM9.80631 15.7068C9.80631 16.3867 10.3571 16.9375 11.037 16.9375C11.7168 16.9375 12.2676 16.3867 12.2676 15.7068C12.2676 15.0269 11.7168 14.4762 11.037 14.4762C10.3571 14.4762 9.80631 15.0269 9.80631 15.7068ZM5.63833 13.2344C4.27576 13.2344 3.16797 14.3429 3.16797 15.7048V20.0256H4.4049V17.8421C4.76859 18.0529 5.18881 18.1751 5.63833 18.1751C7.00092 18.1751 8.10868 17.0666 8.10868 15.7048C8.10868 14.3429 7.0002 13.2344 5.63833 13.2344ZM5.63833 16.9382C4.95843 16.9382 4.4049 16.3846 4.4049 15.7048C4.4049 15.0249 4.95843 14.4713 5.63833 14.4713C6.31822 14.4713 6.87178 15.0249 6.87178 15.7048C6.87178 16.3846 6.31893 16.9382 5.63833 16.9382ZM17.8777 13.2358L16.562 16.305L15.3126 13.2358H13.9765L15.8773 17.9043L14.9677 20.0256H16.3141L19.2241 13.2358H17.8777Z",
+            fill: "#00CF6A"
+          }
+        ),
+        /* @__PURE__ */ u(
+          "path",
+          {
+            id: "Vector_2",
+            "fill-rule": "evenodd",
+            "clip-rule": "evenodd",
+            d: "M8.02423 5.26518C8.13241 5.48157 8.10939 5.73635 7.96418 5.92971L5.02265 9.85197H8.10589V11.0889H3.81714C3.57562 11.0889 3.35784 10.9549 3.24964 10.7385C3.14144 10.5221 3.16448 10.2673 3.30967 10.0739L6.25191 6.15098H3.16797V4.91406H7.45601C7.69823 4.91406 7.91602 5.04878 8.02423 5.26518ZM16.6855 8.61928C16.6855 7.25741 17.7939 6.14892 19.1558 6.14892C20.5177 6.14892 21.6262 7.25741 21.6262 8.61928C21.6262 9.98116 20.5177 11.0896 19.1558 11.0896C17.7939 11.0896 16.6855 9.98116 16.6855 8.61928ZM17.9224 8.61928C17.9224 9.29917 18.4759 9.85271 19.1558 9.85271C19.8364 9.85271 20.3893 9.29917 20.3893 8.61928C20.3893 7.93939 19.8364 7.38585 19.1558 7.38585C18.4752 7.38585 17.9224 7.93939 17.9224 8.61928ZM13.5052 9.85202V6.14892H12.2662V6.60055C11.8851 6.32064 11.4216 6.15521 10.9204 6.15521C9.62132 6.15521 8.56868 7.2595 8.56868 8.62206C8.56868 9.98465 9.62204 11.0889 10.9204 11.0889C11.5284 11.0889 12.0805 10.8446 12.4979 10.4481C12.7513 10.8342 13.1869 11.0896 13.6832 11.0896H14.1209V9.85202H13.5052ZM11.0355 9.85202C10.3557 9.85202 9.80492 9.30127 9.80492 8.62138C9.80492 7.94148 10.3557 7.39073 11.0355 7.39073C11.7154 7.39073 12.2662 7.94148 12.2662 8.62138C12.2662 9.30127 11.7154 9.85202 11.0355 9.85202ZM15.8297 9.85059V4.91406H14.59V9.67049C14.59 10.4537 15.2245 11.0889 16.0077 11.0889H16.4495V9.85059H15.8297Z",
+            fill: "#0033C9"
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  IconZalopay
+};