@paykka/card-checkout-ui 0.11.6 → 0.13.2

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
+};

package/dist/es/components/wallets/GCash/GCash.js

@@ -4,17 +4,16 @@ import { CoreContext } from "../../../core/context.js";
 import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
 import { isMobile } from "../../../utils/system-info/get-system-info.js";
-import { cssVarPrefix, normalizedClass, formatAmount } from "../../../utils/format.js";
+import { normalizedClass, formatAmount } from "../../../utils/format.js";
 import { redirectToPayment } from "../../../utils/redirect.js";
+import { formatPaymentResult } from "../../../utils/payment.js";
 import { isTimeoutError } from "../../../api/http.js";
-import { PaymentCategory, COMMON_CLASS_NAME, PaymentMethod, SessionMode } from "../../../constant.js";
 import { getBrowserParams } from "../../../api/modules/get-browser-params.js";
+import { PaymentCategory, COMMON_CLASS_NAME, PaymentMethod, SessionMode } from "../../../constant.js";
 import { getGcashPayInfo, gcashPay } from "../../../api/modules/gcash/index.js";
 import { PayKKaError } from "../../../core/error.js";
-import { hidePaymentButton } from "../../../config.js";
 import { usePayState } from "../../../hooks/usePayState.js";
 import { useRetry } from "../../../hooks/useRetry.js";
-import { createAddressCore } from "../../../core/Address.js";
 import { createEmailCore, EmailField } from "../../EmailField/EmailField.js";
 import { SubmitButton } from "../../SubmitButton/index.js";
 import { GuideCard } from "../../GuideCard/index.js";
@@ -30,7 +29,7 @@ import "./g-cash.js";
 const { bem } = useBEM("gcash");
 const fieldClassNames = bem("field");
 const GCash = w((props, ref) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a;
   const {
     session,
     showEmail = false,
@@ -39,7 +38,8 @@ const GCash = w((props, ref) => {
     redirectMode = "auto",
     autoQuery = true,
     showGuideCard = true,
-    enableQRCodeModal = true
+    enableQRCodeModal = true,
+    hidePaymentButton = false
   } = props;
   F(ref, () => ({
     stopRetry: () => {
@@ -54,15 +54,17 @@ const GCash = w((props, ref) => {
       var _a2;
       if (!(fieldStatus == null ? void 0 : fieldStatus.address.show))
         return;
-      setForm(Object.assign(form, { address: addressState.getAddressState() }));
-      (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressState.getAddressState());
+      const newForm = Object.assign(form, { address: addressCore.getAddressState() });
+      setForm(newForm);
+      (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressCore.getAddressState());
+      validateForm();
     },
     updateEmail: () => {
       var _a2;
       if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
         return;
-      setForm(Object.assign(form, { email: emailState.email }));
-      form.email = emailState.email;
+      const newForm = Object.assign(form, { email: emailState.email });
+      setForm(newForm);
       (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
       validateForm();
     },
@@ -70,7 +72,7 @@ const GCash = w((props, ref) => {
       hidePaymentButton && onSubmit();
     }
   }));
-  const addressState = createAddressCore();
+  const addressCore = core.getAddressCore();
   const emailState = createEmailCore();
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
@@ -81,13 +83,13 @@ const GCash = 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);
@@ -107,17 +109,27 @@ const GCash = w((props, ref) => {
     }
     setFieldStatus({ ...field });
   };
+  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(() => {
     if (!sessionReady) {
       return;
     }
-    const { bill = {}, paymentMethod = [] } = (session == null ? void 0 : session.checkout) || {};
-    if (!paymentMethod.includes(PaymentMethod.GCASH)) {
+    const { bill = {}, supportMethods = [], country } = (session == null ? void 0 : session.checkout) || {};
+    if (!supportMethods.includes(PaymentMethod.GCASH)) {
       return;
     }
     initFieldStatus();
     setIsCheckoutEnabled(true);
+    country && addressCore.setCountry(country);
     form.email = bill.email ?? "";
+    form.address.country = country;
     if (autoQuery && core.processingPaymentMethod === PaymentMethod.GCASH) {
       setSubmitButtonStatus("loading");
       startReFetchPayInfo();
@@ -156,35 +168,51 @@ const GCash = w((props, ref) => {
       },
       bill: {
         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
+        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
       },
       browser: await getBrowserParams()
     };
   };
   const pay = async (search = false, timeout) => {
-    var _a2, _b2, _c2, _d2, _e2;
+    var _a2, _b, _c, _d, _e, _f, _g;
     try {
-      const paymentParams = await getPaymentParams();
       const requestOptions = { locale: i18n.locale, timeout };
-      const res = search ? await getGcashPayInfo(
-        { sessionId: session.sessionId, clientKey: session.clientKey },
-        requestOptions
-      ) : await gcashPay(paymentParams, props.core, requestOptions);
-      !search && ((_a2 = props.onSubmitResponse) == null ? void 0 : _a2.call(props, res));
-      const { status, orderStatus, errorMessage, errorCode, payInfo, paymentExpiredAt } = res;
+      let res = null;
+      if (search) {
+        const extraParams = (_b = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b.call(_a2, "query", PaymentMethod.GCASH);
+        res = await getGcashPayInfo(
+          {
+            sessionId: session.sessionId,
+            clientKey: session.clientKey,
+            paymentMethod: PaymentMethod.GCASH
+          },
+          extraParams,
+          requestOptions
+        );
+      } else {
+        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", PaymentMethod.GCASH);
+        res = await gcashPay(await getPaymentParams(), extraParams, requestOptions);
+      }
+      !search && ((_e = props.onSubmitResponse) == null ? void 0 : _e.call(props, res));
+      const { status, orderStatus, errorMessage, errorCode, payInfo = {}, sessionId } = res;
+      const { paymentExpiredAt } = payInfo;
+      sessionId && (session.sessionId = sessionId);
       if (status === "PROCESSING") {
         if (!orderStatus) {
           setSubmitButtonStatus("unSubmit");
           return { end: true };
         } else if (orderStatus === "SUCCESS") {
           setShowQRCodeModal(false);
-          setSubmitButtonStatus("success");
-          (_b2 = props.onSuccess) == null ? void 0 : _b2.call(props);
+          processOnSuccess(res);
           return { end: true };
         } else if (orderStatus === "FAILURE") {
-          setErrorMsg(errorMessage);
+          errorMessage && setErrorMsg(errorMessage);
           setSubmitButtonStatus("unSubmit");
           processOnError(new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
           return { end: true };
@@ -209,19 +237,18 @@ const GCash = w((props, ref) => {
           return { end: false };
         } else if (orderStatus === "CANCELED") {
           setSubmitButtonStatus("unSubmit");
-          (_c2 = props.onTimeout) == null ? void 0 : _c2.call(props);
+          (_f = props.onTimeout) == null ? void 0 : _f.call(props);
           core.resetEnablePaymentMethod();
           return { end: true };
         }
       } else if (status === "SUCCESS") {
         setShowQRCodeModal(false);
-        setSubmitButtonStatus("success");
-        (_d2 = props.onSuccess) == null ? void 0 : _d2.call(props);
+        processOnSuccess(res);
         return { end: true };
       } else if (status === "EXPIRED") {
         setShowQRCodeModal(false);
         setSubmitButtonStatus("unSubmit");
-        (_e2 = props.onExpired) == null ? void 0 : _e2.call(props);
+        (_g = props.onExpired) == null ? void 0 : _g.call(props);
         return { end: true };
       }
       setSubmitButtonStatus("unSubmit");
@@ -236,7 +263,7 @@ const GCash = w((props, ref) => {
         }
       } else {
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
-        setErrorMsg(message);
+        message && setErrorMsg(message);
         processOnError(new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         setSubmitButtonStatus("unSubmit");
         return { end: true };
@@ -259,7 +286,7 @@ const GCash = w((props, ref) => {
     setErrorMsg("");
     (_a2 = formRef.current) == null ? void 0 : _a2.validate(async (errors) => {
       var _a3;
-      (fieldStatus == null ? void 0 : fieldStatus.address.show) && 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");
@@ -310,24 +337,17 @@ const GCash = w((props, ref) => {
       }
     ) }) });
   };
-  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 ErrorMessage = () => {
-    return /* @__PURE__ */ u(b, { children: !!errorMsg && /* @__PURE__ */ u(Info, { content: errorMsg, style: { marginTop: "12px" } }) });
+    return /* @__PURE__ */ u(b, { children: !!errorMsg && /* @__PURE__ */ u(Info, { content: errorMsg }) });
   };
   const Address = () => {
-    var _a2, _b2;
+    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) || ((_b2 = session == null ? void 0 : session.checkout) == null ? void 0 : _b2.bill.country),
+        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 }))
       }
     ) }) });
@@ -337,24 +357,28 @@ const GCash = w((props, ref) => {
     {
       value: {
         i18n,
-        session
+        session,
+        core
       },
-      children: isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u(b, { children: [
+      children: isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u("div", { className: core.theme.className, children: [
         showGuideCard && /* @__PURE__ */ u(GuideCard, { type: PaymentCategory.GCASH }),
-        /* @__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(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), children: [
           Email(),
           Address(),
-          ErrorMessage(),
-          !hidePaymentButton && Button()
+          /* @__PURE__ */ u("div", { className: bem("footer-wrapper"), children: [
+            ErrorMessage(),
+            !hidePaymentButton && Button()
+          ] })
         ] }) }),
         showQRCodeModal && /* @__PURE__ */ u(
           QRCodeModal,
           {
             title: i18n.get("qrCode.scanByGcash"),
             bgColor: "#002CB8",
+            textColor: "#FFFFFF",
             qrCode: qrCodeInfo.qrCode,
             icon: /* @__PURE__ */ u(IconGcashComplete, { size: 22 }),
-            amount: (_g = session == null ? void 0 : session.checkout) == null ? void 0 : _g.transAmount,
+            amount: (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.transAmount,
             expiredTime: qrCodeInfo.expiredTime,
             onClose: handleCloseQRCodeModal
           }