@paykka/card-checkout-ui 0.13.17 → 0.14.0

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

@@ -4,7 +4,7 @@ import { getAliPayInfo, aliPay } from "../../api/modules/ali-pay/index.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { normalizedClass, formatAmount } from "../../utils/format.js";
-import { formatPaymentResult } from "../../utils/payment.js";
+import { processPaymentStatus, formatPaymentResult } from "../../utils/payment.js";
 import { getBrowserParams } from "../../api/modules/get-browser-params.js";
 import { PaymentMethod, COMMON_CLASS_NAME, PaymentType, SessionMode } from "../../constant.js";
 import { CoreContext } from "../../core/context.js";
@@ -13,7 +13,7 @@ import "../../out/worldpay-jsc-origin.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 { DEFAULT_ADDRESS, AddressField } from "../AddressField/index.js";
 import { createEmailCore, EmailField } from "../EmailField/EmailField.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
@@ -26,23 +26,15 @@ const CURR_PAYMENT_METHOD = PaymentMethod.ALI_PAY;
 const { bem } = useBEM("ali-pay");
 const fieldClassNames = bem("field");
 const AliPay = w((props, ref) => {
-  const { session, core, showEmail = false, showAddress = false } = props;
+  const { session, core, showEmail = false, showAddress = false, autoQuery = true } = props;
   const addressCore = core.getAddressCore();
   const emailState = createEmailCore();
-  const { setErrorMsg, fraudDetection, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
+  const { setErrorMsg, fraudDetection, i18n, errorMsg, sessionReady, disabled } = 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
-    }
+    address: { ...DEFAULT_ADDRESS }
   });
   const [validated, setValidated] = h(false);
   const [fieldStatus, setFieldStatus] = h();
@@ -67,29 +59,26 @@ const AliPay = w((props, ref) => {
       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();
+      const address = addressCore.getAddressState();
+      form.address = address;
+      setForm(form);
+      (_a = addressFieldRef.current) == null ? void 0 : _a.update(address);
+      validateFormSilently();
     },
     updateEmail: () => {
       var _a;
       if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
         return;
-      const newForm = Object.assign(form, { email: emailState.email });
-      setForm(newForm);
+      form.email = emailState.email;
+      setForm(form);
       (_a = emailFieldRef.current) == null ? void 0 : _a.update(emailState.email);
-      validateForm();
+      validateFormSilently();
     }
   }));
-  function validateForm() {
+  const validateFormSilently = () => {
     var _a;
-    (_a = formRef.current) == null ? void 0 : _a.validate(void 0, false).then(() => {
-      setValidated(true);
-    }).catch(() => {
-      setValidated(false);
-    });
-  }
+    (_a = formRef.current) == null ? void 0 : _a.validate(void 0, false).then(() => setValidated(true)).catch(() => setValidated(false));
+  };
   const initFieldStatus = () => {
     const { field, sessionMode } = session.checkout;
     const { email, address } = field;
@@ -104,7 +93,7 @@ const AliPay = w((props, ref) => {
     setFieldStatus({ ...field });
   };
   y(() => {
-    validateForm();
+    validateFormSilently();
   }, [form]);
   const processOnSuccess = (res) => {
     var _a, _b;
@@ -116,6 +105,7 @@ const AliPay = w((props, ref) => {
     (_b = props.onSuccess) == null ? void 0 : _b.call(props, result, getPaymentMethodContext());
   };
   y(() => {
+    var _a;
     if (!sessionReady) {
       return;
     }
@@ -128,12 +118,17 @@ const AliPay = w((props, ref) => {
     country && addressCore.setCountry(country);
     form.email = bill.email ?? "";
     form.address.country = country;
+    if (autoQuery && ((_a = core.payment) == null ? void 0 : _a.currPaymentMethod.value) === CURR_PAYMENT_METHOD) {
+      setSubmitButtonStatus("loading");
+      startReFetchPayInfo();
+    }
   }, [sessionReady]);
   const onTimeout = q(
     (message) => {
       var _a;
       setErrorMsg(message || i18n.get("common.payTimeout"));
       setSubmitButtonStatus("unSubmit");
+      core.payment.resetCurrPaymentMethod();
       (_a = props.onTimeout) == null ? void 0 : _a.call(props, "retry", getPaymentMethodContext());
     },
     [i18n, props.onTimeout]
@@ -161,7 +156,7 @@ const AliPay = w((props, ref) => {
         email: form.email
       },
       payment: {
-        paymentMethod: PaymentMethod.ALI_PAY
+        paymentMethod: CURR_PAYMENT_METHOD
       },
       browser: await getBrowserParams({
         fraudDetectionId: await (fraudDetection == null ? void 0 : fraudDetection.getFraudDetectionId())
@@ -169,62 +164,66 @@ const AliPay = w((props, ref) => {
     };
   };
   async function pay(search = false, timeout) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a, _b, _c, _d, _e, _f;
     try {
+      core.payment.currPaymentMethod.value = CURR_PAYMENT_METHOD;
       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.ALI_PAY);
+        const extraParams = (_b = (_a = core.config)._getExtraParams) == null ? void 0 : _b.call(_a, "query", CURR_PAYMENT_METHOD);
         res = await getAliPayInfo(
           {
             sessionId: session.sessionId,
             clientKey: session.clientKey,
-            paymentMethod: PaymentMethod.ALI_PAY
+            paymentMethod: CURR_PAYMENT_METHOD
           },
           extraParams,
           requestOptions
         );
       } else {
-        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", PaymentMethod.ALI_PAY);
+        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", CURR_PAYMENT_METHOD);
         res = await aliPay(await getPaymentParams(), extraParams, requestOptions);
       }
-      const { status, orderStatus, errorMessage, errorCode, sessionId } = res;
+      const { errorMessage, errorCode, sessionId } = res;
       sessionId && (session.sessionId = sessionId);
       !search && ((_e = props.onSubmitResponse) == null ? void 0 : _e.call(props, res, getPaymentMethodContext()));
-      if (status === "PROCESSING") {
-        if (!orderStatus) {
-          setSubmitButtonStatus("unSubmit");
-          return { end: true };
-        } else if (orderStatus === "SUCCESS") {
+      let end = true;
+      await processPaymentStatus(res, {
+        onProcessing: () => {
+          !search && startReFetchPayInfo();
+          end = false;
+        },
+        onSuccess: () => {
           processOnSuccess(res);
-          return { end: true };
-        } else if (orderStatus === "FAILURE") {
+        },
+        onFailure: () => {
+          var _a2;
           errorMessage && setErrorMsg(errorMessage);
           setSubmitButtonStatus("unSubmit");
-          (_f = props.onError) == null ? void 0 : _f.call(
+          core.payment.resetCurrPaymentMethod();
+          (_a2 = props.onError) == null ? void 0 : _a2.call(
             props,
             new PayKKaError("API_ERROR", errorMessage, { code: errorCode }),
             getPaymentMethodContext()
           );
-          return { end: true };
-        } else if (orderStatus === "PROCESSING") {
-          !search && startReFetchPayInfo();
-          return { end: false };
-        } else if (orderStatus === "CANCELED") {
+        },
+        onCanceled: () => {
+          var _a2;
           setSubmitButtonStatus("unSubmit");
-          (_g = props.onTimeout) == null ? void 0 : _g.call(props, "channel", getPaymentMethodContext());
-          return { end: true };
+          (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props, "channel", getPaymentMethodContext());
+          core.payment.resetCurrPaymentMethod();
+        },
+        onExpired: () => {
+          var _a2;
+          setSubmitButtonStatus("unSubmit");
+          (_a2 = props.onExpired) == null ? void 0 : _a2.call(props, getPaymentMethodContext());
+        },
+        onDefault: () => {
+          setSubmitButtonStatus("unSubmit");
+          core.payment.resetCurrPaymentMethod();
         }
-      } else if (status === "SUCCESS") {
-        processOnSuccess(res);
-        return { end: true };
-      } else if (status === "EXPIRED") {
-        setSubmitButtonStatus("unSubmit");
-        (_h = props.onExpired) == null ? void 0 : _h.call(props, getPaymentMethodContext());
-        return { end: true };
-      }
-      setSubmitButtonStatus("unSubmit");
-      return { end: true };
+      });
+      return { end };
     } catch (error) {
       if (isTimeoutError(error)) {
         if (search) {
@@ -236,7 +235,8 @@ const AliPay = w((props, ref) => {
       } else {
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
         message && setErrorMsg(message);
-        (_i = props.onError) == null ? void 0 : _i.call(
+        core.payment.resetCurrPaymentMethod();
+        (_f = props.onError) == null ? void 0 : _f.call(
           props,
           new PayKKaError("API_ERROR", message, { code: error.code, cause: error }),
           getPaymentMethodContext()
@@ -273,6 +273,7 @@ const AliPay = w((props, ref) => {
       {
         className: bem("button"),
         status: submitButtonStatus,
+        disabled,
         text,
         loadingText: i18n.get("common.payProcessing"),
         successText: i18n.get("common.paySuccess"),
@@ -283,7 +284,7 @@ const AliPay = w((props, ref) => {
   };
   const setFormRef = (dom) => {
     formRef.current = dom;
-    dom && validateForm();
+    dom && validateFormSilently();
   };
   const Email = () => {
     return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.email.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
@@ -291,7 +292,7 @@ const AliPay = w((props, ref) => {
       {
         ref: emailFieldRef,
         value: form.email,
-        disabled: fieldStatus == null ? void 0 : fieldStatus.email.disabled
+        disabled: (fieldStatus == null ? void 0 : fieldStatus.email.disabled) || disabled
       }
     ) }) });
   };
@@ -301,6 +302,7 @@ const AliPay = w((props, ref) => {
       {
         ref: addressFieldRef,
         value: form.address,
+        disabled,
         onChange: (value) => setForm(Object.assign(form, { address: value }))
       }
     ) }) });

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

@@ -3,16 +3,15 @@ import { isTimeoutError } from "../../api/http.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
 import { parseE164, underscoreToUpperCamelCase } from "../../utils/format.js";
-import { PaymentStatus } from "../../types/index.js";
+import { ApplePayEventType } from "../../types/event.js";
 import { deepMerge } from "../../utils/object.js";
-import { formatPaymentResult } from "../../utils/payment.js";
+import { processPaymentStatus, formatPaymentResult } from "../../utils/payment.js";
 import { getBrowserParams } from "../../api/modules/get-browser-params.js";
 import { PaymentMethod, SessionMode } from "../../constant.js";
 import { getApplePayInfo, applePay, getMerchantSession } from "../../api/modules/apple-pay/index.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import "../../core/context.js";
 import { PayKKaError } from "../../core/error.js";
-import { ApplePayEventType } from "../../types/event.js";
 import "../../out/worldpay-jsc-origin.js";
 import { usePayState } from "../../hooks/usePayState.js";
 import { useRetry } from "../../hooks/useRetry.js";
@@ -118,7 +117,7 @@ const { bem } = useBEM("apple-pay");
 const ApplePay = w((props) => {
   const { session, isDropIn, core, config } = props;
   const { applePaySession, initApplePaySession, reportSuccess2ApplePay, reportFailure2ApplePay } = useApplePaySession();
-  const { i18n, sessionReady, fraudDetection } = usePayState(session, props.core);
+  const { i18n, sessionReady, fraudDetection, disabled } = usePayState(session, props.core);
   const [errorMsg, setErrorMsg] = h("");
   const [showApplePay, setShowApplePay] = h(false);
   const applePayConfig = deepMerge(DEFAULT_APPLE_PAY_CONFIG, config || {});
@@ -148,7 +147,7 @@ const ApplePay = w((props) => {
       );
       return;
     }
-    if (!supportMethods.includes(PaymentMethod.APPLE_PAY)) {
+    if (!supportMethods.includes(CURR_PAYMENT_METHOD)) {
       return;
     }
     loadApplePayJS(
@@ -175,6 +174,7 @@ const ApplePay = w((props) => {
   const onTimeout = q(
     (message) => {
       var _a;
+      core.payment.resetCurrPaymentMethod();
       const timeoutMessage = message || i18n.get("common.payTimeout");
       reportFailure2ApplePay(timeoutMessage);
       setErrorMsg(timeoutMessage);
@@ -205,7 +205,7 @@ const ApplePay = w((props) => {
         country: billingContact == null ? void 0 : billingContact.countryCode
       },
       payment: {
-        paymentMethod: PaymentMethod.APPLE_PAY,
+        paymentMethod: CURR_PAYMENT_METHOD,
         tokenData: JSON.stringify({ token })
       },
       browser: await getBrowserParams({
@@ -214,70 +214,71 @@ const ApplePay = w((props) => {
     };
   };
   async function pay(search = false, timeout, token, billingContact, shippingContact) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a, _b, _c, _d, _e, _f;
     setErrorMsg("");
     try {
+      core.payment.currPaymentMethod.value = CURR_PAYMENT_METHOD;
       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.APPLE_PAY);
+        const extraParams = (_b = (_a = core.config)._getExtraParams) == null ? void 0 : _b.call(_a, "query", CURR_PAYMENT_METHOD);
         res = await getApplePayInfo(
           {
             sessionId: session.sessionId,
             clientKey: session.clientKey,
-            paymentMethod: PaymentMethod.APPLE_PAY
+            paymentMethod: CURR_PAYMENT_METHOD
           },
           extraParams,
           requestOptions
         );
       } else {
-        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", PaymentMethod.APPLE_PAY);
+        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", CURR_PAYMENT_METHOD);
         res = await applePay(
           await getPaymentParams(token, billingContact, shippingContact),
           extraParams,
           requestOptions
         );
       }
-      const { status, orderStatus, errorMessage, errorCode, sessionId } = res;
+      const { errorMessage, errorCode, sessionId } = res;
       sessionId && (session.sessionId = sessionId);
       !search && ((_e = props.onSubmitResponse) == null ? void 0 : _e.call(props, res, getPaymentMethodContext()));
-      if (status === PaymentStatus.PROCESSING) {
-        if (orderStatus === PaymentStatus.SUCCESS) {
+      let end = true;
+      await processPaymentStatus(res, {
+        onProcessing: async () => {
+          !search && await startReFetchPayInfo();
+          end = false;
+        },
+        onSuccess: () => {
           reportSuccess2ApplePay();
           processOnSuccess(res);
-          return { end: true };
-        } else if (orderStatus === PaymentStatus.PROCESSING) {
-          !search && await startReFetchPayInfo();
-          return { end: !search };
-        } else if (orderStatus === PaymentStatus.FAILURE) {
+        },
+        onFailure: () => {
+          var _a2;
           errorMessage && setErrorMsg(errorMessage);
-          (_f = props.onError) == null ? void 0 : _f.call(
+          (_a2 = props.onError) == null ? void 0 : _a2.call(
             props,
             new PayKKaError("API_ERROR", errorMessage, { code: errorCode }),
             getPaymentMethodContext()
           );
+          core.payment.resetCurrPaymentMethod();
           reportFailure2ApplePay(errorMessage);
-          return { end: true };
-        } else if (orderStatus === PaymentStatus.AUTHORIZED) {
+        },
+        onAuthorized: () => {
+          var _a2;
           reportSuccess2ApplePay();
-          (_g = props.onAuthorized) == null ? void 0 : _g.call(props, getPaymentMethodContext());
-          return { end: true };
-        } else {
+          (_a2 = props.onAuthorized) == null ? void 0 : _a2.call(props, getPaymentMethodContext());
+        },
+        onExpired: () => {
+          var _a2, _b2;
+          (_a2 = props.onExpired) == null ? void 0 : _a2.call(props, getPaymentMethodContext());
+          (_b2 = applePaySession.current) == null ? void 0 : _b2.abort();
+        },
+        onDefault: () => {
           reportFailure2ApplePay();
-          return { end: true };
+          core.payment.resetCurrPaymentMethod();
         }
-      } else if (status === PaymentStatus.SUCCESS) {
-        reportSuccess2ApplePay();
-        processOnSuccess(res);
-        return { end: true };
-      } else if (status === PaymentStatus.EXPIRED) {
-        (_h = props.onExpired) == null ? void 0 : _h.call(props, getPaymentMethodContext());
-        (_i = applePaySession.current) == null ? void 0 : _i.abort();
-        return { end: true };
-      } else {
-        reportFailure2ApplePay();
-        return { end: true };
-      }
+      });
+      return { end };
     } catch (error) {
       if (isTimeoutError(error)) {
         if (search) {
@@ -289,12 +290,13 @@ const ApplePay = w((props) => {
       } else {
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
         message && setErrorMsg(message);
-        (_j = props.onError) == null ? void 0 : _j.call(
+        (_f = props.onError) == null ? void 0 : _f.call(
           props,
           new PayKKaError("API_ERROR", message, { code: error.code, cause: error }),
           getPaymentMethodContext()
         );
         reportFailure2ApplePay(message);
+        core.payment.resetCurrPaymentMethod();
         return { end: true };
       }
     }
@@ -352,6 +354,7 @@ const ApplePay = w((props) => {
       onCancel: () => {
         var _a2;
         onEvent == null ? void 0 : onEvent(ApplePayEventType.APPLE_PAY_CANCELLED);
+        core.payment.resetCurrPaymentMethod();
         (_a2 = props.onCancel) == null ? void 0 : _a2.call(props);
       }
     });
@@ -361,7 +364,7 @@ const ApplePay = w((props) => {
     var _a, _b;
     const buttonStyle = (_a = applePayConfig.button) == null ? void 0 : _a.buttonStyle;
     const buttonType = (_b = applePayConfig.button) == null ? void 0 : _b.buttonType;
-    return /* @__PURE__ */ u("div", { className: bem("button"), children: canUseApplePaySDK ? /* @__PURE__ */ u(b, { children: /* @__PURE__ */ u(
+    return /* @__PURE__ */ u("div", { className: bem("button", { disabled }), children: canUseApplePaySDK ? /* @__PURE__ */ u(b, { children: /* @__PURE__ */ u(
       "apple-pay-button",
       {
         buttonstyle: buttonStyle,

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

@@ -14,7 +14,7 @@ import { Input } from "../internal/Input/Input.js";
 import "../internal/Input/type.js";
 import { CNPJ_FULL_LENGTH, CPF_FULL_LENGTH, formatCPFOnInsert } from "../../utils/cpf.js";
 const CPFField = w((props, ref) => {
-  const { className, style, security } = props;
+  const { className, style, security, disabled } = props;
   const { i18n } = useI18n();
   const inputRef = A(null);
   const formItemRef = A(null);
@@ -71,6 +71,7 @@ const CPFField = w((props, ref) => {
         Input,
         {
           type: "text",
+          disabled,
           inputmode: "numeric",
           ref: inputRef,
           maxLength: CNPJ_FULL_LENGTH,