@paykka/card-checkout-ui 0.13.1 → 0.13.5

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

@@ -0,0 +1,49 @@
+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 IconVietqrComplete = ({ size, style, className }) => {
+  const computedSize = !isUndefined(size) ? `${size}px` : "1em";
+  return /* @__PURE__ */ u(
+    "svg",
+    {
+      height: computedSize,
+      viewBox: "0 0 77 22",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style,
+      className: normalizedClass(COMMON_CLASS_NAME, className),
+      children: /* @__PURE__ */ u("g", { xmlns: "http://www.w3.org/2000/svg", id: "logo-VietQR", children: [
+        /* @__PURE__ */ u(
+          "path",
+          {
+            id: "path1",
+            d: "M10.798 21.8011C10.2713 21.6258 9.92445 21.4398 9.51047 21.0935C9.13497 20.8125 8.82283 20.3898 8.58211 19.9999C6.58712 16.4803 4.52893 12.9969 2.52683 9.4811C2.28976 9.07466 1.26256 7.29508 0.801223 6.51513C0.351537 5.75394 0.270564 5.55668 0.138788 5.10282C0.0865695 4.92296 0.00275196 4.66219 8.93571e-05 4.09555C-0.00238938 3.56806 0.046983 3.28128 0.113112 3.01017C0.4046 1.81511 1.28694 0.788727 2.45017 0.291579C2.96712 0.0706408 3.52514 -0.0205173 4.21107 0.00391868C4.56416 0.0164973 4.72437 0.0356746 4.95213 0.092622C5.89029 0.327189 6.65462 0.779213 7.11183 1.36988C8.52669 3.62088 9.81845 5.9492 11.1486 8.25161C11.765 9.32109 12.0955 9.87917 12.1037 9.86442C12.2418 9.61696 12.3997 9.36151 12.5446 9.11171C12.8238 8.63128 13.493 7.47445 14.512 5.71056C16.8347 1.6902 16.7861 1.77241 16.9975 1.49804C17.3525 1.03702 17.9119 0.598431 18.4643 0.347953C19.2855 -0.0243857 19.9489 -0.00467975 20.2879 0.00586032C20.8063 0.0219726 21.0952 0.0713712 21.5093 0.214722C22.3388 0.501889 23.0363 1.13226 23.3835 1.59717C23.55 1.82022 23.7175 2.11689 23.8495 2.42272C24.0675 2.92795 24.1515 3.36487 24.1522 3.99813C24.1532 4.90633 23.979 5.45778 23.3622 6.49931C20.8029 10.9425 18.2032 15.3628 15.687 19.8308C15.2117 20.7003 14.6698 21.1934 13.9016 21.5716C13.3177 21.859 12.8678 22.0009 12.0772 22.0001C11.3629 21.9993 11.16 21.9216 10.798 21.8011ZM25.527 21.8387C25.204 21.7478 24.9584 21.5724 24.7903 21.3125C24.5815 20.9898 24.5975 21.51 24.5987 15.0703C24.5997 9.45742 24.6014 9.27379 24.6525 9.13928C24.7348 8.92285 24.8333 8.77278 24.9878 8.6284C25.1402 8.48603 25.3775 8.35971 25.4935 8.35927C25.5326 8.35913 25.579 8.34469 25.5965 8.32721C25.6457 8.27805 26.2019 8.28727 26.3786 8.34018C26.7373 8.44757 27.0554 8.69809 27.2019 8.98856C27.3702 9.32243 27.3617 8.99639 27.3612 15.0971C27.3607 21.1969 27.3697 20.8636 27.1949 21.2096C27.0465 21.5034 26.8029 21.6996 26.4436 21.8148C26.254 21.8756 25.7085 21.8898 25.527 21.8387ZM43.7925 21.8085C43.328 21.659 43.0049 21.2714 42.9342 20.7788C42.9167 20.6565 42.9027 18.7965 42.8967 15.7963C42.8915 13.1632 42.8817 11.004 42.8749 10.998C42.8681 10.992 42.3143 10.9794 41.6444 10.97C40.2763 10.9508 40.2604 10.9485 39.9986 10.736C39.7255 10.5144 39.5839 10.212 39.5627 9.80499C39.5286 9.15071 39.8164 8.69 40.4001 8.46418C40.5448 8.4082 40.5882 8.40762 44.2717 8.41249C46.777 8.4158 48.0333 8.42704 48.1081 8.44679C48.3815 8.51903 48.7011 8.75713 48.838 8.99048C49.0625 9.37323 49.0776 9.97117 48.8729 10.372C48.7843 10.5455 48.5612 10.7655 48.3877 10.8504C48.1275 10.9777 48.0031 10.9871 46.8209 10.9688C45.8419 10.9537 45.7268 10.9565 45.7117 10.9959C45.7024 11.0201 45.6948 13.2254 45.6948 15.8965C45.6948 21.1876 45.7035 20.8912 45.5392 21.2151C45.4332 21.4241 45.2388 21.6176 45.0415 21.7105C44.6581 21.891 44.1684 21.9294 43.7925 21.8085ZM30.2153 21.727C29.9918 21.6646 29.7952 21.5541 29.6306 21.3986C29.4405 21.219 29.3279 21.0218 29.2582 20.7461C29.2039 20.5317 29.2031 20.4285 29.2101 14.8546L29.2173 9.18141L29.2916 9.02319C29.437 8.71317 29.734 8.4799 30.0563 8.4225C30.1328 8.40887 31.9419 8.40189 34.1285 8.40679C37.6102 8.41459 38.0805 8.42066 38.2156 8.45956C38.7771 8.62124 39.0825 9.05159 39.0808 9.67873C39.08 9.97948 39.0509 10.1232 38.9482 10.3326C38.7881 10.6593 38.4909 10.8851 38.1327 10.9523C37.9821 10.9805 34.3735 10.9695 33.037 10.9368C32.6756 10.9279 32.4194 10.9331 32.3745 10.9502C32.3336 10.9657 32.2744 10.968 32.2404 10.9554C32.2016 10.9411 32.1506 10.9473 32.1003 10.9724L32.0212 11.0118L32.0284 12.3687L32.0357 13.7256L34.9796 13.7397C38.2297 13.7553 38.0303 13.7437 38.3258 13.9332C38.7611 14.2123 38.9674 14.6802 38.8888 15.2102C38.8105 15.7376 38.4425 16.1561 37.9528 16.2745C37.8494 16.2995 37.0973 16.3064 34.9505 16.3018C33.3751 16.2984 32.0717 16.3046 32.054 16.3156C32.0302 16.3302 32.0217 16.7147 32.0217 17.7691V19.2027L35.1973 19.2102L38.3729 19.2176L38.5828 19.3213C38.8427 19.4496 39.0495 19.6596 39.1735 19.9213C39.2592 20.102 39.2629 20.1239 39.2629 20.4582C39.2629 20.8024 39.2616 20.8093 39.1599 21.0222C39.0448 21.2629 38.8586 21.4794 38.6734 21.5878C38.6057 21.6275 38.4469 21.6861 38.3206 21.7182C38.0957 21.7753 38.0614 21.776 36.6957 21.7522C35.2349 21.7267 33.7253 21.7268 31.6171 21.7525C30.5655 21.7653 30.3377 21.7612 30.2153 21.727ZM31.3799 8.70622C31.3799 8.70115 31.3557 8.69883 31.326 8.70106C31.2964 8.70329 31.278 8.7145 31.2851 8.72598C31.2969 8.74504 31.3799 8.72774 31.3799 8.70622ZM31.7985 8.71046C31.7985 8.70443 31.779 8.69203 31.7552 8.6829C31.7303 8.67338 31.7191 8.67805 31.7289 8.69385C31.7453 8.72034 31.7985 8.73304 31.7985 8.71046Z",
+            fill: "#E7222D"
+          }
+        ),
+        /* @__PURE__ */ u(
+          "path",
+          {
+            id: "path2",
+            d: "M55.1925 21.92C53.8843 21.7615 52.6378 21.2664 51.6259 20.5033C51.0596 20.0763 50.3657 19.3185 50.0018 18.7297C49.3431 17.664 49.0164 16.459 49.0156 15.0914C49.0148 13.8128 49.3317 12.6021 49.9277 11.6057C50.7628 10.2098 52.011 9.20998 53.6295 8.64053C55.0053 8.15652 56.9498 8.08879 58.4191 8.47369C60.3524 8.98013 61.9394 10.215 62.8254 11.9022C63.1681 12.5548 63.3805 13.205 63.5031 13.9765C63.5564 14.3126 63.565 14.4751 63.5646 15.1473C63.5642 15.8695 63.5587 15.9582 63.4905 16.3322C63.2817 17.4773 62.8774 18.4001 62.1908 19.2988C62.0732 19.4528 61.8921 19.6654 61.7885 19.7713C61.6072 19.9566 61.5712 20.0188 61.6256 20.0524C61.6396 20.0611 61.7037 20.1638 61.7679 20.2808C61.8322 20.3977 62.0404 20.7617 62.2308 21.0896C62.4211 21.4175 62.5768 21.7013 62.5768 21.7202C62.5768 21.747 62.2641 21.7534 61.1478 21.7496L59.7188 21.7446L59.5759 21.4987C59.4973 21.3634 59.1973 20.845 58.9092 20.3466C58.6211 19.8483 58.2752 19.2524 58.1405 19.0224C57.9022 18.6154 57.3307 17.6229 56.4889 16.1538C56.2613 15.7567 56.0751 15.4306 56.0751 15.429C56.0751 15.4274 56.7248 15.4281 57.5189 15.4304C58.6954 15.434 58.9667 15.4417 58.9845 15.4723C58.9966 15.4929 59.1804 15.8108 59.393 16.1788C59.9347 17.1167 59.9375 17.1213 59.9749 17.1337C60.0445 17.1569 60.2761 16.5173 60.3711 16.0395C60.7339 14.2145 60.0272 12.4194 58.5808 11.4918C57.7968 10.989 56.7589 10.7563 55.8101 10.8705C54.5528 11.0219 53.5085 11.6432 52.8623 12.6244C52.4492 13.2516 52.2436 13.8512 52.1557 14.6854C52.0513 15.6769 52.3057 16.7396 52.8448 17.5648C53.3753 18.3765 54.2187 18.9722 55.1857 19.2182C55.5582 19.3129 55.7949 19.3425 56.2014 19.345C56.5457 19.3471 56.5516 19.3482 56.599 19.4196C56.6255 19.4594 56.9493 20.0136 57.3185 20.6511L57.9898 21.8103L57.8487 21.8442C57.3598 21.9618 55.8849 22.0039 55.1925 21.92ZM64.9975 21.7528C64.986 21.741 64.9766 18.7476 64.9766 15.1009V8.47049L68.2344 8.47074C71.6501 8.47102 71.7734 8.47473 72.4299 8.59758C73.7077 8.83668 74.8707 9.48307 75.5587 10.3365C76.2858 11.2385 76.58 12.286 76.5004 13.6892C76.4711 14.2054 76.3972 14.5742 76.2363 15.0082C76.0165 15.6012 75.7694 15.978 75.2746 16.4747C74.871 16.8798 74.5141 17.1414 74.0525 17.3702C73.9259 17.4329 73.8223 17.4958 73.8223 17.5099C73.8223 17.524 73.8643 17.5878 73.9157 17.6517C73.9671 17.7156 74.1391 17.9561 74.2979 18.1861C74.7976 18.9097 75.2065 19.4954 76.3609 21.1412C76.5653 21.4325 76.7376 21.6897 76.7438 21.7127C76.7538 21.7496 76.5594 21.7539 75.1003 21.749L73.4456 21.7436L71.5429 19.003C70.4964 17.4957 69.5192 16.0868 69.3714 15.8722C69.2235 15.6575 68.9458 15.2561 68.7543 14.9801C68.5627 14.7041 68.3953 14.4594 68.3823 14.4364C68.3613 14.3995 68.5499 14.3946 70.0086 14.3946H71.6586L71.9522 14.8189C72.1136 15.0522 72.2613 15.2435 72.2805 15.244C72.3977 15.2471 72.8814 14.8124 73.055 14.548C73.3028 14.1707 73.3833 13.8593 73.3869 13.2656C73.3892 12.8922 73.3808 12.8032 73.3251 12.6108C73.0637 11.7068 72.4545 11.2211 71.3253 11.016C71.0255 10.9615 68.1464 10.931 68.0854 10.9817C68.0518 11.0095 68.0461 11.7988 68.0461 16.3774V21.7406H66.6968C65.9547 21.7406 65.2735 21.7482 65.183 21.7574C65.0925 21.7667 65.009 21.7646 64.9975 21.7528Z",
+            fill: "#22447B"
+          }
+        ),
+        /* @__PURE__ */ u(
+          "path",
+          {
+            id: "path3",
+            d: "M8.56249 11.6472C7.79974 11.5294 7.31519 11.3389 6.80457 10.9561C6.55858 10.7717 6.03688 10.2 5.77374 9.82653C4.66699 8.12241 3.69272 6.33375 2.68332 4.57079C2.22379 3.74081 2.15786 3.537 2.16022 2.95389C2.16206 2.49824 2.21217 2.23574 2.3862 1.83486C2.53686 1.48783 2.68318 1.27272 2.98345 0.978366C3.36395 0.605367 3.57096 0.51728 4.04888 0.368012C4.31669 0.284365 4.54819 0.26924 4.86424 0.271585C5.20822 0.274133 5.67159 0.230133 6.40409 0.7126C7.00298 1.10707 7.18193 1.34246 7.89432 2.57754C9.14851 4.74421 10.3988 6.91316 11.6546 9.07889L12.1025 9.85141L12.0235 10.0128C11.98 10.1015 11.8604 10.2668 11.7576 10.3801C11.358 10.8206 11.0179 11.0683 10.3661 11.3932C10.163 11.4944 9.77574 11.59 9.43258 11.6476C9.2492 11.6783 8.74109 11.6748 8.56249 11.6472Z",
+            fill: "#9E2D1F"
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  IconVietqrComplete
+};

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

@@ -4,7 +4,7 @@ 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";
@@ -29,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,
@@ -110,9 +110,9 @@ const GCash = w((props, ref) => {
     setFieldStatus({ ...field });
   };
   const processOnSuccess = (res) => {
-    var _a2, _b2;
+    var _a2, _b;
     setSubmitButtonStatus("success");
-    (_b2 = props.onSuccess) == null ? void 0 : _b2.call(props, formatPaymentResult({
+    (_b = props.onSuccess) == null ? void 0 : _b.call(props, formatPaymentResult({
       ...res,
       returnUrl: (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.returnUrl
     }));
@@ -180,12 +180,12 @@ const GCash = w((props, ref) => {
     };
   };
   const pay = async (search = false, timeout) => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
+    var _a2, _b, _c, _d, _e, _f, _g;
     try {
       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.GCASH);
+        const extraParams = (_b = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b.call(_a2, "query", PaymentMethod.GCASH);
         res = await getGcashPayInfo(
           {
             sessionId: session.sessionId,
@@ -196,10 +196,10 @@ const GCash = w((props, ref) => {
           requestOptions
         );
       } else {
-        const extraParams = (_d2 = (_c2 = core.config)._getExtraParams) == null ? void 0 : _d2.call(_c2, "payment", PaymentMethod.GCASH);
+        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", PaymentMethod.GCASH);
         res = await gcashPay(await getPaymentParams(), extraParams, requestOptions);
       }
-      !search && ((_e2 = props.onSubmitResponse) == null ? void 0 : _e2.call(props, res));
+      !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);
@@ -237,7 +237,7 @@ const GCash = w((props, ref) => {
           return { end: false };
         } else if (orderStatus === "CANCELED") {
           setSubmitButtonStatus("unSubmit");
-          (_f2 = props.onTimeout) == null ? void 0 : _f2.call(props);
+          (_f = props.onTimeout) == null ? void 0 : _f.call(props);
           core.resetEnablePaymentMethod();
           return { end: true };
         }
@@ -248,7 +248,7 @@ const GCash = w((props, ref) => {
       } else if (status === "EXPIRED") {
         setShowQRCodeModal(false);
         setSubmitButtonStatus("unSubmit");
-        (_g2 = props.onExpired) == null ? void 0 : _g2.call(props);
+        (_g = props.onExpired) == null ? void 0 : _g.call(props);
         return { end: true };
       }
       setSubmitButtonStatus("unSubmit");
@@ -337,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 }))
       }
     ) }) });
@@ -367,13 +360,15 @@ const GCash = w((props, ref) => {
         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,
@@ -383,7 +378,7 @@ const GCash = w((props, ref) => {
             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
           }

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

@@ -0,0 +1,346 @@
+import { w, F, A, h, y, q, u, b } from "../../../core.js";
+import { useBEM } from "../../../hooks/useBEM.js";
+import { CoreContext } from "../../../core/context.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.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 { getBrowserParams } from "../../../api/modules/get-browser-params.js";
+import { PaymentCategory, COMMON_CLASS_NAME, PaymentMethod, SessionMode } from "../../../constant.js";
+import { getOpayWalletPayInfo, opayWalletPay } from "../../../api/modules/opay-wallet/index.js";
+import { PayKKaError } from "../../../core/error.js";
+import { usePayState } from "../../../hooks/usePayState.js";
+import { useRetry } from "../../../hooks/useRetry.js";
+import { createEmailCore, EmailField } from "../../EmailField/EmailField.js";
+import { SubmitButton } from "../../SubmitButton/index.js";
+import { GuideCard } from "../../GuideCard/index.js";
+import { AddressField } from "../../AddressField/index.js";
+import { Info } from "../../internal/Info/Info.js";
+import "../../internal/Form/type.js";
+import "../../internal/Form/context.js";
+import "../../internal/Form/FormItem.js";
+import { Form } from "../../internal/Form/Form.js";
+import "./opay-wallet.js";
+const { bem } = useBEM("opay-wallet");
+const fieldClassNames = bem("field");
+const OpayWallet = w((props, ref) => {
+  const {
+    session,
+    showEmail = false,
+    showAddress = false,
+    core,
+    redirectMode = "auto",
+    autoQuery = true,
+    showGuideCard = true,
+    hidePaymentButton = false
+  } = props;
+  F(ref, () => ({
+    stopRetry: () => {
+      setSubmitButtonStatus("unSubmit");
+      stopReFetchPayInfo();
+    },
+    startRetry: (timeout) => {
+      setSubmitButtonStatus("loading");
+      startReFetchPayInfo({ timeout });
+    },
+    updateAddress: () => {
+      var _a;
+      if (!(fieldStatus == null ? void 0 : fieldStatus.address.show))
+        return;
+      const newForm = Object.assign(form, { address: addressCore.getAddressState() });
+      setForm(newForm);
+      (_a = addressFieldRef.current) == null ? void 0 : _a.update(addressCore.getAddressState());
+      validateForm();
+    },
+    updateEmail: () => {
+      var _a;
+      if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
+        return;
+      const newForm = Object.assign(form, { email: emailState.email });
+      setForm(newForm);
+      (_a = emailFieldRef.current) == null ? void 0 : _a.update(emailState.email);
+      validateForm();
+    },
+    payment: () => {
+      hidePaymentButton && onSubmit();
+    }
+  }));
+  const addressCore = core.getAddressCore();
+  const emailState = createEmailCore();
+  const addressFieldRef = A(null);
+  const emailFieldRef = A(null);
+  const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
+  const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
+  const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
+  const formRef = A(null);
+  const [form, setForm] = h({
+    email: "",
+    address: {
+      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 [fieldStatus, setFieldStatus] = h();
+  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 });
+  };
+  const processOnSuccess = (res) => {
+    var _a, _b;
+    setSubmitButtonStatus("success");
+    (_b = props.onSuccess) == null ? void 0 : _b.call(props, formatPaymentResult({
+      ...res,
+      returnUrl: (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.returnUrl
+    }));
+  };
+  y(() => {
+    if (!sessionReady) {
+      return;
+    }
+    const { bill = {}, supportMethods = [], country } = (session == null ? void 0 : session.checkout) || {};
+    if (!supportMethods.includes(PaymentMethod.OPAY_WALLET)) {
+      return;
+    }
+    initFieldStatus();
+    setIsCheckoutEnabled(true);
+    country && addressCore.setCountry(country);
+    form.email = bill.email ?? "";
+    form.address.country = country;
+    if (autoQuery && core.processingPaymentMethod === PaymentMethod.OPAY_WALLET) {
+      setSubmitButtonStatus("loading");
+      startReFetchPayInfo();
+    }
+  }, [sessionReady]);
+  const processOnError = (error) => {
+    var _a;
+    (_a = props.onError) == null ? void 0 : _a.call(props, error);
+    core.resetEnablePaymentMethod();
+  };
+  const onTimeout = q(
+    (message) => {
+      var _a;
+      setErrorMsg(message || i18n.get("common.payTimeout"));
+      setSubmitButtonStatus("unSubmit");
+      (_a = props.onTimeout) == null ? void 0 : _a.call(props);
+      core.resetEnablePaymentMethod();
+    },
+    [i18n, props.onTimeout]
+  );
+  const { start: startReFetchPayInfo, stop: stopReFetchPayInfo } = useRetry(
+    (timeout) => pay(true, timeout),
+    { onTimeout: () => onTimeout(i18n.get("common.queryTimeout")) }
+  );
+  const getPaymentParams = async () => {
+    return {
+      sessionId: session.sessionId,
+      clientKey: session.clientKey,
+      payment: {
+        paymentMethod: PaymentMethod.OPAY_WALLET
+      },
+      bill: {
+        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
+      },
+      browser: await getBrowserParams()
+    };
+  };
+  const pay = async (search = false, timeout) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    try {
+      const requestOptions = { locale: i18n.locale, timeout };
+      let res = null;
+      if (search) {
+        const extraParams = (_b = (_a = core.config)._getExtraParams) == null ? void 0 : _b.call(_a, "query", PaymentMethod.OPAY_WALLET);
+        res = await getOpayWalletPayInfo(
+          {
+            sessionId: session.sessionId,
+            clientKey: session.clientKey,
+            paymentMethod: PaymentMethod.OPAY_WALLET
+          },
+          extraParams,
+          requestOptions
+        );
+      } else {
+        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", PaymentMethod.OPAY_WALLET);
+        res = await opayWalletPay(await getPaymentParams(), extraParams, requestOptions);
+      }
+      !search && ((_e = props.onSubmitResponse) == null ? void 0 : _e.call(props, res));
+      const { status, orderStatus, errorMessage, errorCode, payInfo, sessionId } = res;
+      sessionId && (session.sessionId = sessionId);
+      if (status === "PROCESSING") {
+        if (!orderStatus) {
+          setSubmitButtonStatus("unSubmit");
+          return { end: true };
+        } else if (orderStatus === "SUCCESS") {
+          processOnSuccess(res);
+          return { end: true };
+        } else if (orderStatus === "FAILURE") {
+          errorMessage && setErrorMsg(errorMessage);
+          setSubmitButtonStatus("unSubmit");
+          processOnError(new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
+          return { end: true };
+        } else if (orderStatus === "PROCESSING") {
+          if (!search) {
+            if (redirectMode === "auto" && payInfo) {
+              redirectToPayment(payInfo);
+              return { end: true };
+            } else {
+              startReFetchPayInfo();
+            }
+          }
+          return { end: false };
+        } else if (orderStatus === "CANCELED") {
+          setSubmitButtonStatus("unSubmit");
+          (_f = props.onTimeout) == null ? void 0 : _f.call(props);
+          core.resetEnablePaymentMethod();
+          return { end: true };
+        }
+      } else if (status === "SUCCESS") {
+        processOnSuccess(res);
+        return { end: true };
+      } else if (status === "EXPIRED") {
+        setSubmitButtonStatus("unSubmit");
+        (_g = props.onExpired) == null ? void 0 : _g.call(props);
+        return { end: true };
+      }
+      setSubmitButtonStatus("unSubmit");
+      return { end: true };
+    } catch (error) {
+      if (isTimeoutError(error)) {
+        if (search) {
+          return { end: false };
+        } else {
+          onTimeout();
+          return { end: true };
+        }
+      } else {
+        const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
+        message && setErrorMsg(message);
+        processOnError(new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
+        setSubmitButtonStatus("unSubmit");
+        return { end: true };
+      }
+    }
+  };
+  const validateForm = () => {
+    var _a;
+    (_a = formRef.current) == null ? void 0 : _a.validate(void 0, false).then(() => {
+      setValidated(true);
+    }).catch(() => {
+      setValidated(false);
+    });
+  };
+  y(() => {
+    validateForm();
+  }, [form]);
+  const onSubmit = async () => {
+    var _a;
+    setErrorMsg("");
+    (_a = formRef.current) == null ? void 0 : _a.validate(async (errors) => {
+      var _a2;
+      (fieldStatus == null ? void 0 : fieldStatus.address.show) && addressCore.setValidateAllFields(true);
+      (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props, errors);
+      if (errors) {
+        setSubmitButtonStatus("unSubmit");
+        return;
+      }
+      setErrorMsg("");
+      setSubmitButtonStatus("loading");
+      await pay();
+    });
+  };
+  const setFormRef = (dom) => {
+    formRef.current = dom;
+    dom && validateForm();
+  };
+  const Button = () => {
+    var _a;
+    const transAmount = (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.transAmount;
+    const amountText = (transAmount == null ? void 0 : transAmount.amount) ? formatAmount(transAmount).jointSymbol() : "";
+    const text = i18n.get("common.pay") + (amountText ? ` ${amountText}` : "");
+    return /* @__PURE__ */ u(
+      SubmitButton,
+      {
+        className: bem("button"),
+        status: submitButtonStatus,
+        text,
+        loadingText: i18n.get("common.payProcessing"),
+        successText: i18n.get("common.paySuccess"),
+        onClick: onSubmit,
+        verified: validated
+      }
+    );
+  };
+  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 ErrorMessage = () => {
+    return /* @__PURE__ */ u(b, { children: !!errorMsg && /* @__PURE__ */ u(Info, { content: errorMsg }) });
+  };
+  const Address = () => {
+    var _a, _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: ((_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.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,
+        core
+      },
+      children: isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u("div", { className: core.theme.className, children: [
+        showGuideCard && /* @__PURE__ */ u(GuideCard, { type: PaymentCategory.OPAY_WALLET }),
+        /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), children: [
+          Email(),
+          Address(),
+          /* @__PURE__ */ u("div", { className: bem("footer-wrapper"), children: [
+            ErrorMessage(),
+            !hidePaymentButton && Button()
+          ] })
+        ] }) })
+      ] })
+    }
+  );
+});
+export {
+  OpayWallet
+};

package/dist/es/components/wallets/OpayWallet/index.js

@@ -0,0 +1 @@
+import "./OpayWallet.js";

package/dist/es/components/wallets/OpayWallet/opay-wallet.js

@@ -0,0 +1 @@
+

package/dist/es/components/wallets/OpayWallet/type.js

@@ -0,0 +1 @@
+