@paykka/card-checkout-ui 0.11.5 → 0.13.1

package/dist/es/api/utils/index.js

@@ -0,0 +1,59 @@
+import "../../utils/card-brand/brands.js";
+import "../../utils/system-info/get-browser-info.js";
+import { deepMerge } from "../../utils/object.js";
+const buildPaymentParams = (params, extraParams = {}) => {
+  const { bill, payment } = params;
+  const mergedParams = deepMerge(
+    {
+      bill: {
+        first_name: bill == null ? void 0 : bill.firstName,
+        middle_name: bill == null ? void 0 : bill.middleName,
+        last_name: bill == null ? void 0 : bill.lastName,
+        email: bill == null ? void 0 : bill.email,
+        country: bill == null ? void 0 : bill.country,
+        state: bill == null ? void 0 : bill.state,
+        city: bill == null ? void 0 : bill.city,
+        postal_code: bill == null ? void 0 : bill.postalCode,
+        address_line1: bill == null ? void 0 : bill.addressLine1,
+        address_line2: bill == null ? void 0 : bill.addressLine2,
+        district: bill == null ? void 0 : bill.district,
+        area_code: bill == null ? void 0 : bill.areaCode,
+        phone_number: bill == null ? void 0 : bill.phoneNumber
+      }
+    },
+    extraParams || {}
+  );
+  return {
+    ...mergedParams,
+    session_id: params.sessionId,
+    client_key: params.clientKey,
+    channel_user_id: params.channelUserId,
+    payment: {
+      payment_method: payment.paymentMethod,
+      store_payment_method: payment.storePaymentMethod,
+      token_data: payment.tokenData,
+      iban: payment.iban,
+      token: payment.token,
+      card_no: payment.cardNo,
+      exp_year: payment.expYear,
+      exp_month: payment.expMonth,
+      cvv: payment.cvv,
+      holder_name: payment.holderName
+    },
+    browser: params.browser
+  };
+};
+const buildQueryParams = (params, extraParams = {}) => {
+  const { sessionId, clientKey, paymentMethod, browser } = params;
+  return {
+    ...extraParams,
+    session_id: sessionId,
+    client_key: clientKey,
+    payment_method: paymentMethod,
+    browser
+  };
+};
+export {
+  buildPaymentParams,
+  buildQueryParams
+};

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

@@ -1,13 +1,12 @@
-import { w, h, A, T, F, u } from "../../core.js";
+import { w, x, h, A, T, F, u } from "../../core.js";
 import { mergedGetAddressFormat, getCity } from "../../api/modules/address/index.js";
 import { EAddressType } from "../../constant.js";
-import { createAddressCore } from "../../core/Address.js";
-import { useBEM } from "../../hooks/useBEM.js";
-import { useI18n } from "../../hooks/useI18n.js";
-import "../../api/http.js";
 import { isArray, isNil } from "../../utils/is.js";
 import "../../utils/card-brand/brands.js";
 import "../../utils/system-info/get-browser-info.js";
+import { useBEM } from "../../hooks/useBEM.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";
@@ -15,20 +14,25 @@ import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
 import "../internal/Input/type.js";
 import { Select } from "../internal/Select/Select.js";
+import { CoreContext } from "../../core/context.js";
 const { bem } = useBEM("address-field");
 const defaultAddress = {
-  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 AddressField = w((props, ref) => {
   const { onAddressChange } = props;
   const { i18n } = useI18n();
-  const addressCore = createAddressCore();
+  const context = x(CoreContext);
+  if (!(context == null ? void 0 : context.core)) {
+    throw new Error("CoreContext is not found");
+  }
+  const addressCore = context.core.getAddressCore();
   const [addressState, setAddressState] = h({
     ...addressCore.getAddressState()
   });
@@ -105,17 +109,11 @@ const AddressField = w((props, ref) => {
     });
   }
   async function getDefaultCountry() {
-    const countryCode = props.country;
+    const language = navigator.language;
+    const areaCode = language.split("-");
+    const countryCode = addressState.country || ((areaCode == null ? void 0 : areaCode[1]) ?? "US");
     onSelectCountry(countryCode || "");
-    onAddressChange({
-      country: addressState.country ?? "",
-      province: addressState.province ?? "",
-      city: addressState.city ?? "",
-      area: addressState.area ?? "",
-      postCode: addressState.postCode ?? "",
-      address1: addressState.address1 ?? "",
-      address2: addressState.address2 ?? ""
-    });
+    onAddressChange({ ...addressState });
   }
   const AddressFormatMap = {
     [EAddressType.ADDRESS_1]: Address1Item,
@@ -137,8 +135,17 @@ const AddressField = w((props, ref) => {
     };
   }
   async function onSelectCountry(value) {
+    var _a, _b;
     handleAddressFormatChange([]);
     handleStateChange("COUNTRY", value);
+    const addressMode = (_b = (_a = context == null ? void 0 : context.core) == null ? void 0 : _a.config._checkoutConfig) == null ? void 0 : _b.addressMode;
+    if (addressMode === "country") {
+      onAddressChange({
+        ...defaultAddress,
+        country: value
+      });
+      return;
+    }
     const format = await mergedGetAddressFormat(value, { locale: i18n.locale });
     const addressType = [];
     const addressArr = format.map(({ addressItem, required, description }) => {
@@ -188,13 +195,9 @@ const AddressField = w((props, ref) => {
     resetField([EAddressType.CITY]);
     (_a = cityFormItemRef.current) == null ? void 0 : _a.validateChange("");
     onAddressChange({
-      country: addressState.country ?? "",
+      ...addressState,
       province: value,
-      city: "",
-      postCode: addressState.postCode,
-      address1: addressState.address1,
-      address2: addressState.address2,
-      area: addressState.area
+      city: ""
     });
   }
   async function getCityData(value) {
@@ -208,16 +211,13 @@ const AddressField = w((props, ref) => {
   function onSelectCity(value) {
     handleStateChange(EAddressType.CITY, value);
     onAddressChange({
-      country: addressState.country ?? "",
-      province: addressState.province ?? "",
-      city: value,
-      postCode: addressState.postCode ?? "",
-      address1: addressState.address1 ?? "",
-      address2: addressState.address2 ?? "",
-      area: addressState.area
+      ...addressState,
+      city: value
     });
   }
   function CountryItem() {
+    var _a, _b;
+    const addressMode = (_b = (_a = context == null ? void 0 : context.core) == null ? void 0 : _a.config._checkoutConfig) == null ? void 0 : _b.addressMode;
     return /* @__PURE__ */ u(
       FormItem,
       {
@@ -234,7 +234,7 @@ const AddressField = w((props, ref) => {
             options: countryOptions,
             onSelect: (value) => onSelectCountry(value),
             placeholder: i18n.get("address.country"),
-            inputClassName: bem("first-item"),
+            inputClassName: bem("first-item", { "no-bottom-radius": addressMode === "address" }),
             noDataTip: i18n.get("common.noData")
           }
         )

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

@@ -1,18 +1,19 @@
-import { w, h, A, F, y, q, u } from "../../core.js";
+import { w, h, A, F, y, q, u, b } from "../../core.js";
 import { isTimeoutError } from "../../api/http.js";
 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 { cssVarPrefix, normalizedClass, formatAmount } from "../../utils/format.js";
-import { COMMON_CLASS_NAME, PaymentType } from "../../constant.js";
+import { formatPaymentResult } from "../../utils/payment.js";
+import { getBrowserParams } from "../../api/modules/get-browser-params.js";
+import { COMMON_CLASS_NAME, PaymentType, PaymentMethod, SessionMode } from "../../constant.js";
 import { CoreContext } from "../../core/context.js";
 import { PayKKaError } from "../../core/error.js";
-import { createAddressCore } from "../../core/Address.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 { EmailField, createEmailCore } from "../EmailField/EmailField.js";
+import { createEmailCore, EmailField } from "../EmailField/EmailField.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import "../internal/Form/FormItem.js";
@@ -21,10 +22,11 @@ import { Info } from "../internal/Info/Info.js";
 import { RecurringTip } from "../RecurringTip/index.js";
 import { SubmitButton } from "../SubmitButton/index.js";
 const { bem } = useBEM("ali-pay");
+const fieldClassNames = bem("field");
 const AliPay = w((props, ref) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  const { session } = props;
-  const addressState = createAddressCore();
+  var _a, _b, _c, _d, _e, _f;
+  const { session, core, showEmail = false, showAddress = false } = props;
+  const addressCore = core.getAddressCore();
   const emailState = createEmailCore();
   const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
@@ -32,20 +34,20 @@ const AliPay = 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);
-  const disabledEmail = A(false);
-  const [requiredBill, setRequiredBill] = h(false);
+  const [fieldStatus, setFieldStatus] = h();
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
+  const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
   F(ref, () => ({
     stopRetry: () => {
       stopReFetchPayInfo();
@@ -57,13 +59,21 @@ const AliPay = w((props, ref) => {
     },
     updateAddress: () => {
       var _a2;
-      setForm(Object.assign(form, { address: addressState.getAddressState() }));
-      (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressState.getAddressState());
+      if (!(fieldStatus == null ? void 0 : fieldStatus.address.show))
+        return;
+      const newForm = Object.assign(form, { address: addressCore.getAddressState() });
+      setForm(newForm);
+      (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressCore.getAddressState());
+      validateForm();
     },
     updateEmail: () => {
       var _a2;
-      setForm(Object.assign(form, { email: emailState.email }));
+      if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
+        return;
+      const newForm = Object.assign(form, { email: emailState.email });
+      setForm(newForm);
       (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
+      validateForm();
     }
   }));
   function validateForm() {
@@ -74,23 +84,46 @@ const AliPay = w((props, ref) => {
       setValidated(false);
     });
   }
+  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 });
+  };
   y(() => {
     validateForm();
   }, [form]);
+  const processOnSuccess = (res) => {
+    var _a2, _b2;
+    setSubmitButtonStatus("success");
+    (_b2 = props.onSuccess) == null ? void 0 : _b2.call(
+      props,
+      formatPaymentResult({
+        ...res,
+        returnUrl: (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.returnUrl
+      })
+    );
+  };
   y(() => {
-    var _a2;
-    if (sessionReady) {
-      if ((session == null ? void 0 : session.checkout.status) === "SUCCESS") {
-        setSubmitButtonStatus("success");
-        (_a2 = props.onSuccess) == null ? void 0 : _a2.call(props);
-      }
-      form.email = (session == null ? void 0 : session.checkout.bill.email) ?? "";
-      disabledEmail.current = !!(session == null ? void 0 : session.checkout.bill.email);
-      (session == null ? void 0 : session.checkout.bill.billingAddressCollection) === "REQUIRED" ? setRequiredBill(true) : setRequiredBill(false);
-      !requiredBill && setTimeout(() => {
-        validateForm();
-      }, 100);
+    if (!sessionReady) {
+      return;
     }
+    const { bill = {}, supportMethods = [], country } = (session == null ? void 0 : session.checkout) || {};
+    if (!supportMethods.includes(PaymentMethod.ALI_PAY)) {
+      return;
+    }
+    initFieldStatus();
+    setIsCheckoutEnabled(true);
+    country && addressCore.setCountry(country);
+    form.email = bill.email ?? "";
+    form.address.country = country;
   }, [sessionReady]);
   const onTimeout = q(
     (message) => {
@@ -107,64 +140,77 @@ const AliPay = w((props, ref) => {
       onTimeout: () => onTimeout(i18n.get("common.queryTimeout"))
     }
   );
+  const getPaymentParams = async () => {
+    return {
+      sessionId: session.sessionId,
+      clientKey: session.clientKey,
+      bill: (fieldStatus == null ? void 0 : fieldStatus.address.show) ? {
+        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
+      } : {
+        email: form.email
+      },
+      payment: {
+        paymentMethod: PaymentMethod.ALI_PAY
+      },
+      browser: await getBrowserParams()
+    };
+  };
   async function pay(search = false, timeout) {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g, _h, _i;
     try {
-      const res = search ? await getAliPayInfo(
-        {
-          sessionId: session.sessionId,
-          clientKey: session.clientKey
-        },
-        { locale: i18n.locale, timeout }
-      ) : await aliPay(
-        {
-          sessionId: session.sessionId,
-          clientKey: session.clientKey,
-          bill: requiredBill ? {
-            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
-          } : {
-            email: form.email
-          }
-        },
-        props.core,
-        { locale: i18n.locale, timeout }
-      );
-      const { status, orderStatus, errorMessage, errorCode } = res;
-      !search && ((_a2 = props.onSubmitResponse) == null ? void 0 : _a2.call(props, res));
+      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.ALI_PAY);
+        res = await getAliPayInfo(
+          {
+            sessionId: session.sessionId,
+            clientKey: session.clientKey,
+            paymentMethod: PaymentMethod.ALI_PAY
+          },
+          extraParams,
+          requestOptions
+        );
+      } else {
+        const extraParams = (_d2 = (_c2 = core.config)._getExtraParams) == null ? void 0 : _d2.call(_c2, "payment", PaymentMethod.ALI_PAY);
+        res = await aliPay(await getPaymentParams(), extraParams, requestOptions);
+      }
+      const { status, orderStatus, errorMessage, errorCode, sessionId } = res;
+      sessionId && (session.sessionId = sessionId);
+      !search && ((_e2 = props.onSubmitResponse) == null ? void 0 : _e2.call(props, res));
       if (status === "PROCESSING") {
         if (!orderStatus) {
           setSubmitButtonStatus("unSubmit");
           return { end: true };
         } else if (orderStatus === "SUCCESS") {
-          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");
-          (_c2 = props.onError) == null ? void 0 : _c2.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
+          (_f2 = props.onError) == null ? void 0 : _f2.call(props, new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
           return { end: true };
         } else if (orderStatus === "PROCESSING") {
           !search && startReFetchPayInfo();
           return { end: false };
         } else if (orderStatus === "CANCELED") {
           setSubmitButtonStatus("unSubmit");
-          (_d2 = props.onTimeout) == null ? void 0 : _d2.call(props, "channel");
+          (_g = props.onTimeout) == null ? void 0 : _g.call(props, "channel");
           return { end: true };
         }
       } else if (status === "SUCCESS") {
-        setSubmitButtonStatus("success");
-        (_e2 = props.onSuccess) == null ? void 0 : _e2.call(props);
+        processOnSuccess(res);
         return { end: true };
       } else if (status === "EXPIRED") {
         setSubmitButtonStatus("unSubmit");
-        (_f2 = props.onExpired) == null ? void 0 : _f2.call(props);
+        (_h = props.onExpired) == null ? void 0 : _h.call(props);
         return { end: true };
       }
       setSubmitButtonStatus("unSubmit");
@@ -179,8 +225,8 @@ const AliPay = w((props, ref) => {
         }
       } else {
         const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
-        setErrorMsg(message);
-        (_g2 = props.onError) == null ? void 0 : _g2.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
+        message && setErrorMsg(message);
+        (_i = props.onError) == null ? void 0 : _i.call(props, new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
         setSubmitButtonStatus("unSubmit");
         return { end: true };
       }
@@ -191,7 +237,7 @@ const AliPay = w((props, ref) => {
     setErrorMsg("");
     (_a2 = formRef.current) == null ? void 0 : _a2.validate(async (errors) => {
       var _a3;
-      requiredBill && 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");
@@ -232,32 +278,39 @@ const AliPay = w((props, ref) => {
     [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 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 Address = () => {
+    var _a2, _b2;
+    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),
+        onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
+      }
+    ) }) });
+  };
   return /* @__PURE__ */ u(
     CoreContext.Provider,
     {
       value: {
         i18n,
-        session
+        session,
+        core
       },
-      children: sessionReady && i18n.ready.value && /* @__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(
-          EmailField,
-          {
-            ref: emailFieldRef,
-            className: bem("email"),
-            value: form.email,
-            disabled: !!disabledEmail.current
-          }
-        ),
-        requiredBill && /* @__PURE__ */ u(
-          AddressField,
-          {
-            ref: addressFieldRef,
-            value: form.address,
-            country: ((_g = session == null ? void 0 : session.checkout) == null ? void 0 : _g.country) || ((_h = session == null ? void 0 : session.checkout) == null ? void 0 : _h.bill.country),
-            onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
-          }
-        ),
+      children: isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: formStyle, children: [
+        Email(),
+        Address(),
         (session == null ? void 0 : session.checkout.paymentType) === PaymentType.RECURRING && RecurringTip(),
         !!errorMsg && /* @__PURE__ */ u(Info, { className: bem("error"), content: errorMsg }),
         Button()