@paykka/card-checkout-ui 0.11.6 → 0.13.1

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 { 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, _b, _c, _d, _e, _f, _g;
+  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, _b2;
+    setSubmitButtonStatus("success");
+    (_b2 = props.onSuccess) == null ? void 0 : _b2.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, _b2, _c2, _d2, _e2, _f2, _g2, _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 = (_b2 = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b2.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 = (_d2 = (_c2 = core.config)._getExtraParams) == null ? void 0 : _d2.call(_c2, "payment", PaymentMethod.WECHAT_PAY);
+        res = await wechatPay(await getPaymentParams(), extraParams, requestOptions);
+      }
+      const { status, orderStatus, errorMessage, payInfo, errorCode, sessionId } = res;
+      sessionId && (session.sessionId = sessionId);
+      !search && ((_e2 = props.onSubmitResponse) == null ? void 0 : _e2.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 }));
+          (_f2 = props.onError) == null ? void 0 : _f2.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 ((_g2 = props.onCallWxPayBox) == null ? void 0 : _g2.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");
@@ -239,33 +286,40 @@ const WechatPay = w((props, ref) => {
     [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, _b2;
+    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) || ((_b2 = session == null ? void 0 : session.checkout) == null ? void 0 : _b2.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(),
+      children: isCheckoutEnabled && 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: [
+        Email(),
+        Address(),
+        ((_g = session == null ? void 0 : session.checkout) == null ? void 0 : _g.paymentType) === PaymentType.RECURRING && RecurringTip(),
         !!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/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/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/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
+};

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

@@ -0,0 +1,48 @@
+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 IconZalopayComplete = ({ size, style, className }) => {
+  const computedSize = !isUndefined(size) ? `${size}px` : "1em";
+  return /* @__PURE__ */ u(
+    "svg",
+    {
+      height: computedSize,
+      viewBox: "0 0 100 22",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style,
+      className: normalizedClass(COMMON_CLASS_NAME, className),
+      children: [
+        /* @__PURE__ */ u("g", { id: "logo-Zalopay", "clip-path": "url(#clip0_979_2746)", children: [
+          /* @__PURE__ */ u(
+            "path",
+            {
+              id: "Vector",
+              "fill-rule": "evenodd",
+              "clip-rule": "evenodd",
+              d: "M82.8549 3.38495V13.5354H84.5426V16.9278H83.3429C81.982 16.9278 80.7885 16.2275 80.0939 15.1694C78.9495 16.2562 77.436 16.9259 75.7694 16.9259C72.2105 16.9259 69.3233 13.899 69.3233 10.164C69.3233 6.42913 72.2087 3.40217 75.7694 3.40217C77.1433 3.40217 78.4138 3.85564 79.4584 4.6229V3.38495H82.8549ZM72.7118 10.1621C72.7118 12.0258 74.2215 13.5354 76.0851 13.5354C77.9488 13.5354 79.4584 12.0258 79.4584 10.1621C79.4584 8.29848 77.9488 6.78884 76.0851 6.78884C74.2215 6.78884 72.7118 8.29848 72.7118 10.1621ZM61.2871 3.38503C57.5522 3.38503 54.5156 6.42347 54.5156 10.1565V22.0002H57.9061V16.0152C58.9031 16.593 60.0549 16.9279 61.2871 16.9279C65.022 16.9279 68.0585 13.8895 68.0585 10.1565C68.0585 6.42347 65.0201 3.38503 61.2871 3.38503ZM61.2871 13.5374C59.4234 13.5374 57.9061 12.0201 57.9061 10.1565C57.9061 8.29283 59.4234 6.77553 61.2871 6.77553C63.1507 6.77553 64.6681 8.29283 64.6681 10.1565C64.6681 12.0201 63.1527 13.5374 61.2871 13.5374ZM94.8363 3.38881L91.2299 11.8019L87.8049 3.38881H84.1427L89.3528 16.1855L86.8597 22.0002H90.5502L98.5268 3.38881H94.8363Z",
+              fill: "#00CF6A"
+            }
+          ),
+          /* @__PURE__ */ u(
+            "path",
+            {
+              id: "Vector_2",
+              "fill-rule": "evenodd",
+              "clip-rule": "evenodd",
+              d: "M14.7098 0.962429C15.0064 1.55557 14.9433 2.25395 14.5452 2.78396L6.48228 13.5352H14.9337V16.9257H3.17788C2.51585 16.9257 1.91888 16.5584 1.6223 15.9652C1.32573 15.372 1.38887 14.6737 1.78685 14.1436L9.85176 3.3905H1.39844V0H13.1523C13.8162 0 14.4132 0.369281 14.7098 0.962429ZM38.451 10.1563C38.451 6.42329 41.4894 3.38485 45.2224 3.38485C48.9554 3.38485 51.9939 6.42329 51.9939 10.1563C51.9939 13.8893 48.9554 16.9277 45.2224 16.9277C41.4894 16.9277 38.451 13.8893 38.451 10.1563ZM41.8415 10.1563C41.8415 12.0199 43.3588 13.5372 45.2224 13.5372C47.0879 13.5372 48.6033 12.0199 48.6033 10.1563C48.6033 8.29266 47.0879 6.77536 45.2224 6.77536C43.3568 6.77536 41.8415 8.29266 41.8415 10.1563ZM29.7336 13.5353V3.38485H26.3374V4.62281C25.2927 3.85554 24.0222 3.40207 22.6484 3.40207C19.0876 3.40207 16.2022 6.42904 16.2022 10.1639C16.2022 13.8989 19.0896 16.9258 22.6484 16.9258C24.3149 16.9258 25.8285 16.2561 26.9726 15.1693C27.6672 16.2274 28.8612 16.9277 30.2216 16.9277H31.4213V13.5353H29.7336ZM22.9641 13.5353C21.1005 13.5353 19.5908 12.0257 19.5908 10.162C19.5908 8.2984 21.1005 6.78875 22.9641 6.78875C24.8277 6.78875 26.3374 8.2984 26.3374 10.162C26.3374 12.0257 24.8277 13.5353 22.9641 13.5353ZM36.1051 13.5314V0H32.707V13.0377C32.707 15.1846 34.4463 16.9257 36.5931 16.9257H37.8042V13.5314H36.1051Z",
+              fill: "#0033C9"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ u("defs", { children: /* @__PURE__ */ u("clipPath", { id: "clip0_979_2746", children: /* @__PURE__ */ u("rect", { width: "98.2143", height: "22", fill: "white", transform: "translate(0.894531)" }) }) })
+      ]
+    }
+  );
+};
+export {
+  IconZalopayComplete
+};