@paykka/card-checkout-ui 0.8.0 → 0.11.2

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

@@ -2,24 +2,64 @@ import { u, w, h, A, F, y, b } from "../../core.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { CoreContext } from "../../core/context.js";
-import { CardPaymentMethods, PaymentMethod, PaymentCategory, SessionMode } from "../../constant.js";
+import "../../api/http.js";
+import { CardPaymentMethods, PaymentMethod, PaymentCategory, SessionMode, PaymentMethod2CategoryMap } from "../../constant.js";
 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 { GCash } from "../wallets/GCash/GCash.js";
+import { Paymaya } from "../wallets/Paymaya/Paymaya.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { intersection } from "../../utils/index.js";
 import { PayKKaError } from "../../core/error.js";
 import { usePayState } from "../../hooks/usePayState.js";
-import { IconCard } from "../internal/icons/IconCard.js";
+import { Accordion } from "../internal/Accordion/Accordion.js";
+import { AccordionItem } from "../AccordionItem/AccordionItem.js";
+import { IconLinePay } from "../internal/icons/IconLinePay.js";
+import { IconBoost } from "../internal/icons/IconBoost.js";
+import { IconGrabPay } from "../internal/icons/IconGrabPay.js";
+import { IconNinePay } from "../internal/icons/IconNinePay.js";
+import { IconMayBankQRPay } from "../internal/icons/IconMayBankQRPay.js";
+import { IconShopeePay } from "../internal/icons/IconShopeePay.js";
+import { IconTNGWallet } from "../internal/icons/IconTNGWallet.js";
+import { IconCard2 } from "../internal/icons/IconCard2.js";
+import { IconGCash } from "../internal/icons/IconGCash.js";
+import { IconPaymaya } from "../internal/icons/IconPaymaya.js";
+import { removeElementFromArray } from "../../utils/array.js";
 const dropInSupportedPaymentMethods = [
   ...CardPaymentMethods,
   PaymentMethod.GOOGLE_PAY,
-  PaymentMethod.APPLE_PAY
+  PaymentMethod.APPLE_PAY,
+  PaymentMethod.BOOST,
+  PaymentMethod.GRAB_PAY,
+  PaymentMethod.LINE_PAY,
+  PaymentMethod.NINE_PAY,
+  PaymentMethod.SHOPEE_PAY,
+  PaymentMethod.TNG_WALLET,
+  PaymentMethod.MAY_BANK_QR_PAY,
+  PaymentMethod.GCASH,
+  PaymentMethod.PAYMAYA
 ];
 const PaymentComponentMap = {
   [PaymentCategory.CARD]: Card,
   [PaymentCategory.APPLE_PAY]: ApplePay,
-  [PaymentCategory.GOOGLE_PAY]: GooglePay
+  [PaymentCategory.GOOGLE_PAY]: GooglePay,
+  [PaymentCategory.BOOST]: Boost,
+  [PaymentCategory.NINE_PAY]: NinePay,
+  [PaymentCategory.LINE_PAY]: LinePay,
+  [PaymentCategory.TNG_WALLET]: TNGWallet,
+  [PaymentCategory.MAY_BANK_QR_PAY]: MayBankQRPay,
+  [PaymentCategory.SHOPEE_PAY]: ShopeePay,
+  [PaymentCategory.GRAB_PAY]: GrabPay,
+  [PaymentCategory.GCASH]: GCash,
+  [PaymentCategory.PAYMAYA]: Paymaya
   // [PaymentCategory.WECHAT_PAY]: WechatPay,
   // [PaymentCategory.ALI_PAY]: AliPay,
   // [PaymentCategory.SEPA_DEBIT]: Sepa
@@ -54,14 +94,61 @@ const PaymentTabs = (props) => {
     }
   )) });
 };
+const paymentCategoryOptionMap = {
+  [PaymentCategory.CARD]: {
+    icon: IconCard2,
+    nameKey: "dropIn.card.label"
+  },
+  [PaymentCategory.LINE_PAY]: {
+    icon: IconLinePay,
+    nameKey: "dropIn.linePay.label"
+  },
+  [PaymentCategory.BOOST]: {
+    icon: IconBoost,
+    nameKey: "dropIn.boost.label"
+  },
+  [PaymentCategory.GRAB_PAY]: {
+    icon: IconGrabPay,
+    nameKey: "dropIn.grabPay.label"
+  },
+  [PaymentCategory.NINE_PAY]: {
+    icon: IconNinePay,
+    nameKey: "dropIn.ninePay.label"
+  },
+  [PaymentCategory.MAY_BANK_QR_PAY]: {
+    icon: IconMayBankQRPay,
+    nameKey: "dropIn.mayBankQRPay.label"
+  },
+  [PaymentCategory.SHOPEE_PAY]: {
+    icon: IconShopeePay,
+    nameKey: "dropIn.shopeePay.label"
+  },
+  [PaymentCategory.TNG_WALLET]: {
+    icon: IconTNGWallet,
+    nameKey: "dropIn.TNGWallet.label"
+  },
+  [PaymentCategory.GCASH]: {
+    icon: IconGCash,
+    nameKey: "dropIn.gcash.label"
+  },
+  [PaymentCategory.PAYMAYA]: {
+    icon: IconPaymaya,
+    nameKey: "dropIn.paymaya.label"
+  }
+};
 const { bem } = useBEM("drop-in");
 const DropIn = w((props, ref) => {
-  const { paymentMethods: paymentMethodsConfig, layout = "tabs", session } = props;
-  const { i18n, sessionReady } = usePayState(session);
+  const {
+    paymentMethods: paymentMethodsConfig,
+    layout = "accordion",
+    session,
+    core,
+    enableAccordionTransition = true
+  } = props;
+  const { i18n, sessionReady } = usePayState(session, props.core);
   const [paymentCategoryOptions, setPaymentCategoryOptions] = h([]);
-  const [activePaymentCategory, setActivePaymentCategory] = h(
-    null
-  );
+  const [activePaymentCategory, setActivePaymentCategory] = h();
+  const [enablePaymentMethod, setEnablePaymentMethod] = h();
   const [headerPaymentCategories, setHeaderPaymentCategories] = h(
     []
   );
@@ -78,14 +165,24 @@ const DropIn = w((props, ref) => {
     }
   }));
   y(() => {
+    var _a, _b;
     if (!activePaymentCategory) {
       return;
     }
-    if (componentInstMap.current[activePaymentCategory]) {
-      return;
+    const currCompInst = componentInstMap.current[activePaymentCategory];
+    if (currCompInst) {
+      const ref2 = currCompInst.ref;
+      (_a = ref2.updateAddress) == null ? void 0 : _a.call(ref2);
+      (_b = ref2.updateEmail) == null ? void 0 : _b.call(ref2);
     }
-    renderComponent(activePaymentCategory);
   }, [activePaymentCategory]);
+  y(() => {
+    if (paymentCategories == null ? void 0 : paymentCategories.length) {
+      paymentCategories.forEach((category) => {
+        renderComponent(category);
+      });
+    }
+  }, [paymentCategories]);
   y(() => {
     if (headerPaymentCategories == null ? void 0 : headerPaymentCategories.length) {
       renderComponent(PaymentCategory.APPLE_PAY);
@@ -113,32 +210,46 @@ const DropIn = w((props, ref) => {
     }
   };
   const initPaymentCategories = (enablePaymentMethods) => {
+    const cpyEnablePaymentMethods = [...enablePaymentMethods];
     const paymentCategoryOptions2 = [];
     const paymentCategories2 = [];
     const headerPaymentCategories2 = [];
-    if (enablePaymentMethods.includes(PaymentMethod.APPLE_PAY)) {
-      if (layout === "tabs") {
-        headerPaymentCategories2.push(PaymentCategory.APPLE_PAY);
-      } else {
-        paymentCategories2.push(PaymentCategory.APPLE_PAY);
-      }
+    if (cpyEnablePaymentMethods.includes(PaymentMethod.APPLE_PAY)) {
+      headerPaymentCategories2.push(PaymentCategory.APPLE_PAY);
+      removeElementFromArray(cpyEnablePaymentMethods, PaymentMethod.APPLE_PAY);
     }
-    if (enablePaymentMethods.includes(PaymentMethod.GOOGLE_PAY)) {
-      if (layout === "tabs") {
-        headerPaymentCategories2.push(PaymentCategory.GOOGLE_PAY);
-      } else {
-        paymentCategories2.push(PaymentCategory.APPLE_PAY);
-      }
+    if (cpyEnablePaymentMethods.includes(PaymentMethod.GOOGLE_PAY)) {
+      headerPaymentCategories2.push(PaymentCategory.GOOGLE_PAY);
+      removeElementFromArray(cpyEnablePaymentMethods, PaymentMethod.GOOGLE_PAY);
     }
-    const isCardEnable = !!intersection(enablePaymentMethods, CardPaymentMethods).length;
+    const isCardEnable = !!intersection(cpyEnablePaymentMethods, CardPaymentMethods).length;
     if (isCardEnable) {
       paymentCategories2.push(PaymentCategory.CARD);
       paymentCategoryOptions2.push({
         type: PaymentCategory.CARD,
-        name: i18n.get("dropIn.card.label"),
-        icon: /* @__PURE__ */ u(IconCard, { size: 16 })
+        icon: () => {
+          const Icon = paymentCategoryOptionMap[PaymentCategory.CARD].icon;
+          return Icon ? /* @__PURE__ */ u(Icon, { size: 24 }) : null;
+        },
+        name: i18n.get(paymentCategoryOptionMap[PaymentCategory.CARD].nameKey)
       });
     }
+    cpyEnablePaymentMethods.forEach((method) => {
+      if (cpyEnablePaymentMethods.includes(method)) {
+        const type = PaymentMethod2CategoryMap[method];
+        if (type) {
+          paymentCategories2.push(type);
+          paymentCategoryOptions2.push({
+            type,
+            icon: () => {
+              const Icon = paymentCategoryOptionMap[type].icon;
+              return Icon ? /* @__PURE__ */ u(Icon, { size: 24 }) : null;
+            },
+            name: i18n.get(paymentCategoryOptionMap[type].nameKey)
+          });
+        }
+      }
+    });
     if (paymentCategoryOptions2.length) {
       setPaymentCategoryOptions(paymentCategoryOptions2);
       setActivePaymentCategory(paymentCategoryOptions2[0].type);
@@ -157,7 +268,7 @@ const DropIn = w((props, ref) => {
     if (((_a = session.checkout) == null ? void 0 : _a.sessionMode) === SessionMode.COMPONENT) {
       (_c = (_b = props.core.config).onInitError) == null ? void 0 : _c.call(
         _b,
-        new PayKKaError("ERROR", "Please send the correct mode when creating the checkout")
+        new PayKKaError("ERROR", "Please send the correct session when creating the checkout")
       );
       return;
     }
@@ -170,38 +281,83 @@ const DropIn = w((props, ref) => {
       return;
     }
     initPaymentCategories(enablePaymentMethods);
+    if (core.processingPaymentMethod) {
+      const category = PaymentMethod2CategoryMap[core.processingPaymentMethod];
+      category && setActivePaymentCategory(category);
+      core.enablePaymentMethod.value = core.processingPaymentMethod;
+    }
   }, [sessionReady, i18n.ready.value]);
-  return /* @__PURE__ */ u(CoreContext.Provider, { value: { i18n }, children: i18n.ready.value && /* @__PURE__ */ u("div", { className: bem(), children: layout === "accordion" ? /* @__PURE__ */ u(b, {}) : /* @__PURE__ */ u(b, { children: [
-    headerPaymentCategories == null ? void 0 : headerPaymentCategories.map((category) => /* @__PURE__ */ u(
+  y(() => {
+    if (core.enablePaymentMethod.value) {
+      setEnablePaymentMethod(
+        PaymentMethod2CategoryMap[core.enablePaymentMethod.value]
+      );
+    } else {
+      setEnablePaymentMethod(void 0);
+    }
+  }, [core.enablePaymentMethod.value]);
+  const HeaderField = () => {
+    return /* @__PURE__ */ u(b, { children: headerPaymentCategories == null ? void 0 : headerPaymentCategories.map((category) => /* @__PURE__ */ u(
       "div",
       {
         className: bem("header-payment"),
         ref: (el) => componentMountRefMap.current[category] = el
       }
-    )),
-    !!paymentCategoryOptions.length && activePaymentCategory && /* @__PURE__ */ u(b, { children: [
-      !!(headerPaymentCategories == null ? void 0 : headerPaymentCategories.length) && /* @__PURE__ */ u("div", { className: bem("other"), children: [
-        /* @__PURE__ */ u("div", { className: bem("other-line") }),
-        /* @__PURE__ */ u("div", { className: bem("other-text"), children: i18n.get("dropIn.otherPaymentMethod") }),
-        /* @__PURE__ */ u("div", { className: bem("other-line") })
-      ] }),
-      /* @__PURE__ */ u("div", { className: bem("tabs-wrapper"), children: /* @__PURE__ */ u(
-        PaymentTabs,
+    )) });
+  };
+  const OtherLine = () => {
+    return /* @__PURE__ */ u(b, { children: !!(headerPaymentCategories == null ? void 0 : headerPaymentCategories.length) && /* @__PURE__ */ u("div", { className: bem("other"), children: [
+      /* @__PURE__ */ u("div", { className: bem("other-line") }),
+      /* @__PURE__ */ u("div", { className: bem("other-text"), children: i18n.get("dropIn.otherPaymentMethod") }),
+      /* @__PURE__ */ u("div", { className: bem("other-line") })
+    ] }) });
+  };
+  return /* @__PURE__ */ u(CoreContext.Provider, { value: { i18n }, children: i18n.ready.value && /* @__PURE__ */ u("div", { className: bem(), children: [
+    HeaderField(),
+    !!paymentCategoryOptions.length && /* @__PURE__ */ u(b, { children: [
+      OtherLine(),
+      layout === "accordion" ? /* @__PURE__ */ u(b, { children: /* @__PURE__ */ u("div", { className: bem("accordion-wrapper"), children: /* @__PURE__ */ u(
+        Accordion,
         {
           value: activePaymentCategory,
-          tabs: paymentCategoryOptions,
-          onChange: (item) => handlePaymentCategoryChange(item)
-        }
-      ) }),
-      paymentCategories == null ? void 0 : paymentCategories.map((category) => /* @__PURE__ */ u(
-        "div",
-        {
-          style: { display: category === activePaymentCategory ? "block" : "none" },
-          ref: (el) => componentMountRefMap.current[category] = el
+          enableTransition: enableAccordionTransition,
+          onChange: (item) => handlePaymentCategoryChange(item),
+          children: paymentCategoryOptions.map((item) => /* @__PURE__ */ u(
+            AccordionItem,
+            {
+              title: item.name,
+              value: item.type,
+              header: /* @__PURE__ */ u("div", { className: bem("accordion-icon"), children: item.icon() }),
+              disabled: !!enablePaymentMethod && enablePaymentMethod !== item.type,
+              children: /* @__PURE__ */ u(
+                "div",
+                {
+                  style: "padding: 0 2px",
+                  ref: (el) => componentMountRefMap.current[item.type] = el
+                }
+              )
+            }
+          ))
         }
-      ))
+      ) }) }) : /* @__PURE__ */ u(b, { children: [
+        /* @__PURE__ */ u("div", { className: bem("tabs-wrapper"), children: /* @__PURE__ */ u(
+          PaymentTabs,
+          {
+            value: activePaymentCategory,
+            tabs: paymentCategoryOptions,
+            onChange: (item) => handlePaymentCategoryChange(item)
+          }
+        ) }),
+        paymentCategories == null ? void 0 : paymentCategories.map((category) => /* @__PURE__ */ u(
+          "div",
+          {
+            style: { display: category === activePaymentCategory ? "block" : "none" },
+            ref: (el) => componentMountRefMap.current[category] = el
+          }
+        ))
+      ] })
     ] })
-  ] }) }) });
+  ] }) });
 });
 export {
   DropIn,

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

@@ -8,7 +8,9 @@ import { w, h, A, F, y, u } from "../../core.js";
 import { isValuable } from "../../utils/is.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
+import { EMAIL_REG } from "../../utils/reg-exp.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import "../../api/http.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import { FormItem } from "../internal/Form/FormItem.js";
@@ -50,42 +52,39 @@ const EmailField = w((props, ref) => {
   const emailCore = createEmailCore(props.value ?? "");
   F(ref, () => ({
     update: (value2) => {
-      var _a, _b;
-      setValue(value2 ?? "");
-      emailCore.email = value2 ?? "";
-      if (emailCore.isValid) {
+      var _a;
+      updateEmail(value2);
+      if (emailCore.isValid || isValuable(value2)) {
         (_a = formItemRef.current) == null ? void 0 : _a.validate(value2, { trigger: "submit", setResult: true });
-      } else {
-        isValuable(value2) && ((_b = formItemRef.current) == null ? void 0 : _b.validate(value2, { trigger: "submit", setResult: true }));
       }
     }
   }));
   y(() => {
-    setValue(props.value ?? "");
-    emailCore.email = props.value ?? "";
+    updateEmail(props.value);
   }, [props.value]);
-  y(() => {
-    emailCore.email = value ?? "";
-  }, [value]);
+  const updateEmail = (value2) => {
+    emailCore.email = value2 ?? "";
+    setValue(value2 ?? "");
+  };
   const rule = {
     trigger: ["blur", "submit"],
     validator(value2) {
       if (!value2) {
         throw new Error(i18n.get("common.email.incomplete"));
       }
-      const emailReg = new RegExp("^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$");
+      const emailReg = new RegExp(EMAIL_REG);
       if (!emailReg.test(value2)) {
         throw new Error(i18n.get("common.email.incorrect"));
       }
       return true;
     }
   };
-  function onInput(event) {
+  const onInput = (event) => {
     var _a;
     const { currentTarget } = event;
-    setValue(currentTarget.value);
+    updateEmail(currentTarget.value);
     (_a = props.onInput) == null ? void 0 : _a.call(props, event);
-  }
+  };
   return /* @__PURE__ */ u(
     FormItem,
     {

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

@@ -1,6 +1,7 @@
 import { setApiUrl, setCDNUrl } from "../../config.js";
 import { CoreContext } from "../../core/context.js";
 import { create } from "../../core/create.js";
+import "../../api/http.js";
 import "../../utils/card-brand/brands.js";
 import { getBrowserInfo } from "../../utils/system-info/get-browser-info.js";
 import { w, F, h, A, y, u } from "../../core.js";

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

@@ -1,13 +1,13 @@
 import { w, F, h, q, y, A, u, b } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
 import { SessionMode, PaymentMethod } from "../../constant.js";
+import "../../utils/card-brand/brands.js";
+import "../../utils/system-info/get-browser-info.js";
+import { extractAreaCodeAndPhoneNumber } from "../../utils/format.js";
 import { getBrowserParams } from "../../api/modules/get-browser-params.js";
 import { getGooglePayInfo, googlePay } from "../../api/modules/google-pay/index.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 { extractAreaCodeAndPhoneNumber } from "../../utils/format.js";
 import { PayKKaError } from "../../core/error.js";
 import { usePayState } from "../../hooks/usePayState.js";
 import { useRetry } from "../../hooks/useRetry.js";
@@ -180,7 +180,7 @@ const GooglePay = w((props, ref) => {
   F(ref, () => ({
     checkThreeDS
   }));
-  const { sessionReady, i18n, fraudDetection } = usePayState(session);
+  const { sessionReady, i18n, fraudDetection } = usePayState(session, props.core);
   const [errorMsg, setErrorMsg] = h("");
   const [showGooglePay, setShowGooglePay] = h(false);
   const [showThreeDSModal, setShowThreeDSModal] = h(false);
@@ -206,7 +206,7 @@ const GooglePay = w((props, ref) => {
     if (sessionMode === SessionMode.DROP_IN && !isDropIn) {
       (_b = (_a2 = props.core.config).onInitError) == null ? void 0 : _b.call(
         _a2,
-        new PayKKaError("ERROR", "Please send the correct mode when creating the checkout")
+        new PayKKaError("ERROR", "Please send the correct session when creating the checkout")
       );
       return;
     }
@@ -290,9 +290,10 @@ const GooglePay = w((props, ref) => {
               areaCode: phone == null ? void 0 : phone.areaCode
             },
             browser: await getBrowserParams({
-              fraudDetectionId: fraudDetection == null ? void 0 : fraudDetection.fraudDetectionID
+              fraudDetectionId: await (fraudDetection == null ? void 0 : fraudDetection.getFraudDetectionId())
             })
           },
+          props.core,
           { locale: i18n.locale }
         );
       }());