@paykka/card-checkout-ui 0.13.16 → 0.14.0

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

@@ -14,7 +14,7 @@ import { formatExpireDateOnInsert, formatExpireDateOnPaste } from "../../utils/e
 import { limitedToNumber } from "../../utils/format.js";
 import { isUndefined } from "../../utils/is.js";
 const CardExpireDateField = w((props, ref) => {
-  const { className, style, security, showLabel } = props;
+  const { className, style, security, showLabel, disabled } = props;
   const inputRef = A(null);
   const formItemRef = A(null);
   F(ref, () => ({
@@ -120,6 +120,7 @@ const CardExpireDateField = w((props, ref) => {
           ref: inputRef,
           maxLength: 5,
           value,
+          disabled,
           onInput,
           placeholder: i18n.get("card.cardExpireDate.placeholder"),
           children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": EFieldType.EXPIRE_DATE })

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

@@ -8,7 +8,7 @@ import { normalizedClass } from "../../utils/format.js";
 import "../../out/worldpay-jsc-origin.js";
 const { bem } = useBEM("card-no");
 const CardNo = (props) => {
-  const { value, className, style } = props;
+  const { value, className, style, disabled } = props;
   return /* @__PURE__ */ u(
     "div",
     {
@@ -18,7 +18,7 @@ const CardNo = (props) => {
         Array.from({ length: 4 }, (_, i) => i).map(() => {
           return /* @__PURE__ */ u("span", { className: bem("dot") });
         }),
-        /* @__PURE__ */ u("span", { className: bem("card-no"), children: value })
+        /* @__PURE__ */ u("span", { className: bem("card-no"), disabled, children: value })
       ]
     }
   );

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

@@ -15,7 +15,7 @@ import { getSupportedCardBrands, getSupportedCardBrandsLengths, finCardBrandInfo
 import { trimAll, limitedToNumber } from "../../utils/format.js";
 const CardNumberField = w(
   (props, ref) => {
-    const { supportedCardBrands = [], className, security, showLabel, onBinValue } = props;
+    const { supportedCardBrands = [], className, security, showLabel, onBinValue, disabled } = props;
     const inputRef = A(null);
     const formItemRef = A(null);
     F(ref, () => ({
@@ -132,6 +132,7 @@ const CardNumberField = w(
             ref: inputRef,
             maxLength: 23,
             value,
+            disabled,
             onInput,
             rightIcon: RightIcon(),
             placeholder: i18n.get("card.cardNumber.placeholder"),

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

@@ -14,7 +14,7 @@ import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
 import "../internal/Input/type.js";
 const CardSecurityCodeField = w((props, ref) => {
-  const { className, style, security, showLabel } = props;
+  const { className, style, security, showLabel, disabled } = props;
   const inputRef = A(null);
   const formItemRef = A(null);
   F(ref, () => ({
@@ -75,6 +75,7 @@ const CardSecurityCodeField = w((props, ref) => {
           ref: inputRef,
           maxLength: 4,
           value,
+          disabled,
           onInput,
           placeholder: i18n.get("card.cardSecurityCode.placeholder"),
           children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": EFieldType.CVV })

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

@@ -16,7 +16,7 @@ import { IconCardNo } from "../internal/icons/IconCardNo.js";
 import { IconSwitch } from "../internal/icons/IconSwitch.js";
 import { IconAdd } from "../internal/icons/IconAdd.js";
 const CardSelector = (props) => {
-  const { cardList = [], onCardChange, onClickEdit, className, style, onClickChange, value } = props;
+  const { cardList = [], onCardChange, onClickEdit, className, style, onClickChange, value, disabled } = props;
   const { i18n } = useI18n();
   const { bem } = useBEM("card-selector");
   const selectRef = A(null);
@@ -55,7 +55,7 @@ const CardSelector = (props) => {
     ] });
   };
   const getChangeIcon = () => {
-    return /* @__PURE__ */ u("div", { className: bem("change"), onClick: onClickChange, children: [
+    return /* @__PURE__ */ u("div", { className: bem("change", { disabled }), onClick: onClickChange, children: [
       /* @__PURE__ */ u(IconSwitch, {}),
       /* @__PURE__ */ u("span", { style: { marginLeft: "4px" }, children: i18n.get("card.cardSelector.change") })
     ] });
@@ -91,6 +91,7 @@ const CardSelector = (props) => {
         {
           value: currToken,
           ref: selectRef,
+          disabled,
           options: formatCardOptions(),
           renderLabel,
           onSelect: onSelectCard,

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

@@ -7,13 +7,13 @@ import { CardPaymentMethods, PaymentMethod, PaymentCategory, SessionMode, Paymen
 import { Card } from "../Card/index.js";
 import { ApplePay } from "../ApplePay/index.js";
 import { GooglePay } from "../GooglePay/index.js";
-import { Boost } from "../Boost/index.js";
-import { NinePay } from "../NinePay/index.js";
-import { LinePay } from "../LinePay/index.js";
-import { TNGWallet } from "../TNGWallet/index.js";
-import { MayBankQRPay } from "../MayBankQRPay/index.js";
-import { ShopeePay } from "../ShopeePay/index.js";
-import { GrabPay } from "../GrabPay/index.js";
+import { Boost } from "../wallets/Boost/Boost.js";
+import { NinePay } from "../wallets/NinePay/NinePay.js";
+import { LinePay } from "../wallets/LinePay/LinePay.js";
+import { TNGWallet } from "../wallets/TNGWallet/TNGWallet.js";
+import { MayBankQRPay } from "../wallets/MayBankQRPay/MayBankQRPay.js";
+import { ShopeePay } from "../wallets/ShopeePay/ShopeePay.js";
+import { GrabPay } from "../wallets/GrabPay/GrabPay.js";
 import { GCash } from "../wallets/GCash/GCash.js";
 import { Paymaya } from "../wallets/Paymaya/Paymaya.js";
 import { Zalopay } from "../wallets/Zalopay/Zalopay.js";
@@ -22,9 +22,17 @@ import { Pix } from "../wallets/Pix/Pix.js";
 import { PicPay } from "../wallets/PicPay/PicPay.js";
 import { OpayWallet } from "../wallets/OpayWallet/OpayWallet.js";
 import { PagaWallet } from "../wallets/PagaWallet/PagaWallet.js";
+import { OVO } from "../wallets/OVO/OVO.js";
+import { Bancontact } from "../wallets/Bancontact/Bancontact.js";
+import { Blik } from "../wallets/Blik/Blik.js";
+import { IDeal } from "../wallets/IDeal/IDeal.js";
+import { Skrill } from "../wallets/Skrill/Skrill.js";
+import { P24 } from "../wallets/P24/P24.js";
+import { Trustly } from "../wallets/Trustly/Trustly.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { intersection } from "../../utils/index.js";
 import { PayKKaError } from "../../core/error.js";
+import { createCheckoutChild } from "../../core/create-child.js";
 import { usePayState } from "../../hooks/usePayState.js";
 import { Accordion } from "../internal/Accordion/Accordion.js";
 import { AccordionItem } from "../AccordionItem/AccordionItem.js";
@@ -44,6 +52,13 @@ import { IconPix } from "../internal/icons/IconPix.js";
 import { IconPicPay } from "../internal/icons/IconPicPay.js";
 import { IconOpayWallet } from "../internal/icons/IconOpayWallet.js";
 import { IconPagaWallet } from "../internal/icons/IconPagaWallet.js";
+import { IconP24 } from "../internal/icons/IconP24.js";
+import { IconTrustly } from "../internal/icons/IconTrustly.js";
+import { IconBlik } from "../internal/icons/IconBlik.js";
+import { IconOvo } from "../internal/icons/IconOvo.js";
+import { IconSkrill } from "../internal/icons/IconSkrill.js";
+import { IconBancontact } from "../internal/icons/IconBancontact.js";
+import { IconIdeal } from "../internal/icons/IconIdeal.js";
 import { removeElementFromArray } from "../../utils/array.js";
 const dropInSupportedPaymentMethods = [
   ...CardPaymentMethods,
@@ -63,7 +78,14 @@ const dropInSupportedPaymentMethods = [
   PaymentMethod.PIX,
   PaymentMethod.PIC_PAY,
   PaymentMethod.OPAY_WALLET,
-  PaymentMethod.PAGA_WALLET
+  PaymentMethod.PAGA_WALLET,
+  PaymentMethod.BANCONTACT,
+  PaymentMethod.IDEAL,
+  PaymentMethod.BLIK,
+  PaymentMethod.OVO,
+  PaymentMethod.SKRILL,
+  PaymentMethod.TRUSTLY,
+  PaymentMethod.P24
 ];
 const PaymentComponentMap = {
   [PaymentCategory.CARD]: Card,
@@ -83,7 +105,14 @@ const PaymentComponentMap = {
   [PaymentCategory.PIX]: Pix,
   [PaymentCategory.PIC_PAY]: PicPay,
   [PaymentCategory.OPAY_WALLET]: OpayWallet,
-  [PaymentCategory.PAGA_WALLET]: PagaWallet
+  [PaymentCategory.PAGA_WALLET]: PagaWallet,
+  [PaymentCategory.BANCONTACT]: Bancontact,
+  [PaymentCategory.IDEAL]: IDeal,
+  [PaymentCategory.BLIK]: Blik,
+  [PaymentCategory.OVO]: OVO,
+  [PaymentCategory.SKRILL]: Skrill,
+  [PaymentCategory.TRUSTLY]: Trustly,
+  [PaymentCategory.P24]: P24
   // [PaymentCategory.WECHAT_PAY]: WechatPay,
   // [PaymentCategory.ALI_PAY]: AliPay,
   // [PaymentCategory.SEPA_DEBIT]: Sepa
@@ -182,10 +211,39 @@ const paymentCategoryOptionMap = {
   [PaymentCategory.PAGA_WALLET]: {
     icon: IconPagaWallet,
     nameKey: "dropIn.pagaWallet.label"
+  },
+  [PaymentCategory.BANCONTACT]: {
+    icon: IconBancontact,
+    nameKey: "dropIn.bancontact.label"
+  },
+  [PaymentCategory.IDEAL]: {
+    icon: IconIdeal,
+    nameKey: "dropIn.ideal.label"
+  },
+  [PaymentCategory.BLIK]: {
+    icon: IconBlik,
+    nameKey: "dropIn.blik.label"
+  },
+  [PaymentCategory.OVO]: {
+    icon: IconOvo,
+    nameKey: "dropIn.ovo.label"
+  },
+  [PaymentCategory.SKRILL]: {
+    icon: IconSkrill,
+    nameKey: "dropIn.skrill.label"
+  },
+  [PaymentCategory.TRUSTLY]: {
+    icon: IconTrustly,
+    nameKey: "dropIn.trustly.label"
+  },
+  [PaymentCategory.P24]: {
+    icon: IconP24,
+    nameKey: "dropIn.p24.label"
   }
 };
 const { bem } = useBEM("drop-in");
 const DropIn = w((props, ref) => {
+  var _a;
   const {
     paymentMethods: paymentMethodsConfig,
     layout = "accordion",
@@ -205,22 +263,22 @@ const DropIn = w((props, ref) => {
   const componentInstMap = A({});
   F(ref, () => ({
     payment: () => {
-      var _a, _b;
+      var _a2, _b;
       if (activePaymentCategory) {
-        const instRef = (_a = componentInstMap.current[activePaymentCategory]) == null ? void 0 : _a.ref;
+        const instRef = (_a2 = componentInstMap.current[activePaymentCategory]) == null ? void 0 : _a2.ref;
         (_b = instRef == null ? void 0 : instRef.payment) == null ? void 0 : _b.call(instRef);
       }
     }
   }));
   y(() => {
-    var _a, _b;
+    var _a2, _b;
     if (!activePaymentCategory) {
       return;
     }
     const currCompInst = componentInstMap.current[activePaymentCategory];
     if (currCompInst) {
       const ref2 = currCompInst.ref;
-      (_a = ref2.updateAddress) == null ? void 0 : _a.call(ref2);
+      (_a2 = ref2.updateAddress) == null ? void 0 : _a2.call(ref2);
       (_b = ref2.updateEmail) == null ? void 0 : _b.call(ref2);
     }
   }, [activePaymentCategory]);
@@ -238,16 +296,24 @@ const DropIn = w((props, ref) => {
     }
   }, [headerPaymentCategories]);
   const createComponent = (category) => {
-    const { onError, onSuccess, onTimeout, onExpired, onSubmit } = props;
-    return props.core.create(PaymentComponentMap[category], {
-      onError,
-      onSuccess,
-      onTimeout,
-      onExpired,
-      onSubmit,
-      ...paymentMethodsConfig == null ? void 0 : paymentMethodsConfig[category],
-      isDropIn: true
-    });
+    const { onError, onSuccess, onTimeout, onExpired, onSubmit, onAuthorized, onSubmitResponse } = props;
+    return createCheckoutChild(
+      props.core,
+      PaymentComponentMap[category],
+      {
+        onError,
+        onSuccess,
+        onTimeout,
+        onExpired,
+        onSubmit,
+        onAuthorized,
+        onSubmitResponse
+      },
+      {
+        ...paymentMethodsConfig == null ? void 0 : paymentMethodsConfig[category],
+        isDropIn: true
+      }
+    );
   };
   const renderComponent = (category) => {
     const inst = createComponent(category);
@@ -309,11 +375,11 @@ const DropIn = w((props, ref) => {
     setActivePaymentCategory(newPaymentCategory);
   };
   y(() => {
-    var _a, _b, _c;
+    var _a2, _b, _c, _d;
     if (!sessionReady || !i18n.ready.value) {
       return;
     }
-    if (((_a = session.checkout) == null ? void 0 : _a.sessionMode) === SessionMode.COMPONENT) {
+    if (((_a2 = session.checkout) == null ? void 0 : _a2.sessionMode) === SessionMode.COMPONENT) {
       (_c = (_b = props.core.config).onInitError) == null ? void 0 : _c.call(
         _b,
         new PayKKaError("ERROR", "Please send the correct session when creating the checkout")
@@ -329,21 +395,22 @@ const DropIn = w((props, ref) => {
       return;
     }
     initPaymentCategories(enablePaymentMethods);
-    if (core.processingPaymentMethod) {
-      const category = PaymentMethod2CategoryMap[core.processingPaymentMethod];
+    const currPaymentMethod = (_d = core.payment) == null ? void 0 : _d.currPaymentMethod.value;
+    if (currPaymentMethod) {
+      const category = PaymentMethod2CategoryMap[currPaymentMethod];
       category && setActivePaymentCategory(category);
-      core.enablePaymentMethod.value = core.processingPaymentMethod;
     }
   }, [sessionReady, i18n.ready.value]);
   y(() => {
-    if (core.enablePaymentMethod.value) {
+    var _a2, _b;
+    if ((_a2 = core.payment) == null ? void 0 : _a2.currPaymentMethod.value) {
       setEnablePaymentMethod(
-        PaymentMethod2CategoryMap[core.enablePaymentMethod.value]
+        PaymentMethod2CategoryMap[(_b = core.payment) == null ? void 0 : _b.currPaymentMethod.value]
       );
     } else {
       setEnablePaymentMethod(void 0);
     }
-  }, [core.enablePaymentMethod.value]);
+  }, [(_a = core.payment) == null ? void 0 : _a.currPaymentMethod.value]);
   const HeaderField = () => {
     return /* @__PURE__ */ u(b, { children: headerPaymentCategories == null ? void 0 : headerPaymentCategories.map((category) => /* @__PURE__ */ u(
       "div",