@paykka/card-checkout-ui 0.11.6 → 0.13.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (217) hide show
  1. package/dist/card-checkout-ui.js +19 -19
  2. package/dist/card-checkout-ui.umd.cjs +19 -19
  3. package/dist/es/_commonjsHelpers.js +82 -1
  4. package/dist/es/api/index.js +1 -0
  5. package/dist/es/api/modules/address/index.js +9 -9
  6. package/dist/es/api/modules/ali-pay/index.js +10 -49
  7. package/dist/es/api/modules/apple-pay/index.js +13 -59
  8. package/dist/es/api/modules/boost/index.js +8 -48
  9. package/dist/es/api/modules/card/index.js +10 -54
  10. package/dist/es/api/modules/checkout/index.js +11 -9
  11. package/dist/es/api/modules/checkout/map.js +25 -18
  12. package/dist/es/api/modules/encrypted-card/index.js +3 -2
  13. package/dist/es/api/modules/gcash/index.js +8 -48
  14. package/dist/es/api/modules/get-browser-params.js +4 -1
  15. package/dist/es/api/modules/google-pay/index.js +10 -56
  16. package/dist/es/api/modules/grab-pay/index.js +8 -48
  17. package/dist/es/api/modules/index.js +1 -0
  18. package/dist/es/api/modules/line-pay/index.js +8 -48
  19. package/dist/es/api/modules/map.js +17 -11
  20. package/dist/es/api/modules/may-bank-qr-pay/index.js +8 -48
  21. package/dist/es/api/modules/nine-pay/index.js +8 -48
  22. package/dist/es/api/modules/paymaya/index.js +8 -48
  23. package/dist/es/api/modules/risk/index.js +2 -1
  24. package/dist/es/api/modules/sepa/index.js +10 -51
  25. package/dist/es/api/modules/shopee-pay/index.js +8 -48
  26. package/dist/es/api/modules/threeDS/index.js +3 -0
  27. package/dist/es/api/modules/tng-wallet/index.js +8 -48
  28. package/dist/es/api/modules/wechat-pay/index.js +10 -51
  29. package/dist/es/api/modules/zalopay/index.js +16 -0
  30. package/dist/es/api/utils/index.js +59 -0
  31. package/dist/es/components/AddressField/index.js +37 -37
  32. package/dist/es/components/AliPay/index.js +158 -111
  33. package/dist/es/components/ApplePay/index.js +99 -67
  34. package/dist/es/components/Boost/index.js +91 -70
  35. package/dist/es/components/Card/index.js +114 -107
  36. package/dist/es/components/CardSelector/index.js +1 -1
  37. package/dist/es/components/DropIn/index.js +12 -4
  38. package/dist/es/components/EncryptedCard/index.js +6 -2
  39. package/dist/es/components/GooglePay/index.js +94 -60
  40. package/dist/es/components/GrabPay/index.js +91 -70
  41. package/dist/es/components/GuideCard/index.js +10 -7
  42. package/dist/es/components/LinePay/index.js +91 -70
  43. package/dist/es/components/MayBankQRPay/index.js +302 -275
  44. package/dist/es/components/NinePay/index.js +91 -70
  45. package/dist/es/components/SecuredFieldsProvider/index.js +26 -9
  46. package/dist/es/components/SecuredIframe/index.js +40 -61
  47. package/dist/es/components/Sepa/index.js +72 -53
  48. package/dist/es/components/ShopeePay/index.js +91 -70
  49. package/dist/es/components/SubmitButton/index.js +8 -7
  50. package/dist/es/components/TNGWallet/index.js +91 -70
  51. package/dist/es/components/ThreeDS/index.js +32 -7
  52. package/dist/es/components/WechatPay/index.js +151 -102
  53. package/dist/es/components/business/QRCodeModal/QRCodeModal.js +26 -6
  54. package/dist/es/components/index.js +1 -0
  55. package/dist/es/components/internal/Form/FormItem.js +1 -1
  56. package/dist/es/components/internal/Form/util.js +1 -1
  57. package/dist/es/components/internal/Modal/Modal.js +1 -1
  58. package/dist/es/components/internal/Select/Select.js +19 -8
  59. package/dist/es/components/internal/Select/SelectMenu.js +2 -2
  60. package/dist/es/components/internal/Select/SelectMenuItem.js +12 -4
  61. package/dist/es/components/internal/icons/IconError.js +7 -4
  62. package/dist/es/components/internal/icons/IconZalopay.js +47 -0
  63. package/dist/es/components/internal/icons/IconZalopayComplete.js +48 -0
  64. package/dist/es/components/wallets/GCash/GCash.js +80 -56
  65. package/dist/es/components/wallets/Paymaya/Paymaya.js +91 -70
  66. package/dist/es/components/wallets/Zalopay/Zalopay.js +381 -0
  67. package/dist/es/components/wallets/Zalopay/index.js +1 -0
  68. package/dist/es/components/wallets/Zalopay/type.js +1 -0
  69. package/dist/es/components/wallets/Zalopay/zalopay2.js +1 -0
  70. package/dist/es/config.js +5 -5
  71. package/dist/es/constant.js +8 -2
  72. package/dist/es/core/{Address.js → address.js} +8 -16
  73. package/dist/es/core/{PayKKaCheckout.js → checkout.js} +101 -27
  74. package/dist/es/core/create.js +1 -1
  75. package/dist/es/core/query.js +3 -2
  76. package/dist/es/core/{Session.js → session.js} +28 -32
  77. package/dist/es/core/theme.js +65 -0
  78. package/dist/es/core.js +0 -4
  79. package/dist/es/hooks/usePayment.js +14 -0
  80. package/dist/es/i18n/locales/de-DE.js +3 -1
  81. package/dist/es/i18n/locales/en-GB.js +3 -1
  82. package/dist/es/i18n/locales/es-ES.js +3 -1
  83. package/dist/es/i18n/locales/fr-FR.js +3 -1
  84. package/dist/es/i18n/locales/ja-JP.js +3 -1
  85. package/dist/es/i18n/locales/ko-KR.js +3 -1
  86. package/dist/es/i18n/locales/nl-NL.js +3 -1
  87. package/dist/es/i18n/locales/pt-PT.js +3 -1
  88. package/dist/es/i18n/locales/ru-RU.js +3 -1
  89. package/dist/es/i18n/locales/zh-CN.js +3 -1
  90. package/dist/es/i18n/locales/zh-HK.js +3 -1
  91. package/dist/es/i18n/locales/zh-TW.js +3 -1
  92. package/dist/es/index.js +21 -7
  93. package/dist/es/style.css +1 -1
  94. package/dist/es/types/index.js +7 -0
  95. package/dist/es/utils/colors.js +5 -1
  96. package/dist/es/utils/format.js +0 -5
  97. package/dist/es/utils/object.js +31 -1
  98. package/dist/es/utils/payment.js +82 -0
  99. package/dist/es/utils/redirect.js +4 -4
  100. package/dist/es/utils/string.js +10 -0
  101. package/dist/es/utils/system-info/is-ua-webview.js +14 -12
  102. package/dist/es/utils/theme.js +7 -0
  103. package/dist/style.css +1 -1
  104. package/dist/types/api/modules/address/index.d.ts +15 -6
  105. package/dist/types/api/modules/ali-pay/index.d.ts +3 -19
  106. package/dist/types/api/modules/apple-pay/index.d.ts +4 -14
  107. package/dist/types/api/modules/boost/index.d.ts +3 -23
  108. package/dist/types/api/modules/card/index.d.ts +3 -30
  109. package/dist/types/api/modules/checkout/index.d.ts +3 -3
  110. package/dist/types/api/modules/checkout/map.d.ts +3 -3
  111. package/dist/types/api/modules/checkout/type.d.ts +33 -4
  112. package/dist/types/api/modules/gcash/index.d.ts +3 -23
  113. package/dist/types/api/modules/get-browser-params.d.ts +1 -0
  114. package/dist/types/api/modules/google-pay/index.d.ts +3 -13
  115. package/dist/types/api/modules/grab-pay/index.d.ts +3 -23
  116. package/dist/types/api/modules/index.d.ts +1 -0
  117. package/dist/types/api/modules/line-pay/index.d.ts +3 -23
  118. package/dist/types/api/modules/map.d.ts +2 -2
  119. package/dist/types/api/modules/may-bank-qr-pay/index.d.ts +3 -23
  120. package/dist/types/api/modules/nine-pay/index.d.ts +3 -23
  121. package/dist/types/api/modules/paymaya/index.d.ts +3 -23
  122. package/dist/types/api/modules/sepa/index.d.ts +3 -24
  123. package/dist/types/api/modules/shopee-pay/index.d.ts +3 -23
  124. package/dist/types/api/modules/tng-wallet/index.d.ts +3 -23
  125. package/dist/types/api/modules/type.d.ts +74 -21
  126. package/dist/types/api/modules/wechat-pay/index.d.ts +3 -20
  127. package/dist/types/api/modules/zalopay/index.d.ts +4 -0
  128. package/dist/types/api/utils/index.d.ts +48 -0
  129. package/dist/types/components/AddressField/type.d.ts +3 -9
  130. package/dist/types/components/AliPay/AliPay.d.ts +6 -2
  131. package/dist/types/components/AliPay/type.d.ts +15 -2
  132. package/dist/types/components/ApplePay/ApplePay.d.ts +6 -2
  133. package/dist/types/components/ApplePay/type.d.ts +10 -14
  134. package/dist/types/components/ApplePay/utils.d.ts +1 -1
  135. package/dist/types/components/Boost/Boost.d.ts +6 -2
  136. package/dist/types/components/Boost/type.d.ts +2 -24
  137. package/dist/types/components/Card/Card.d.ts +6 -2
  138. package/dist/types/components/Card/type.d.ts +3 -43
  139. package/dist/types/components/DropIn/DropIn.d.ts +6 -2
  140. package/dist/types/components/DropIn/type.d.ts +4 -10
  141. package/dist/types/components/GooglePay/GooglePay.d.ts +6 -2
  142. package/dist/types/components/GooglePay/createGooglePay.d.ts +2 -1
  143. package/dist/types/components/GooglePay/type.d.ts +10 -26
  144. package/dist/types/components/GrabPay/GrabPay.d.ts +6 -2
  145. package/dist/types/components/GrabPay/type.d.ts +3 -25
  146. package/dist/types/components/LinePay/LinePay.d.ts +6 -2
  147. package/dist/types/components/LinePay/type.d.ts +3 -25
  148. package/dist/types/components/MayBankQRPay/MayBankQRPay.d.ts +6 -2
  149. package/dist/types/components/MayBankQRPay/type.d.ts +3 -25
  150. package/dist/types/components/NinePay/NinePay.d.ts +6 -2
  151. package/dist/types/components/NinePay/type.d.ts +3 -25
  152. package/dist/types/components/SecuredFieldsProvider/type.d.ts +5 -0
  153. package/dist/types/components/SecuredIframe/HiddenIframe.d.ts +3 -1
  154. package/dist/types/components/Sepa/Sepa.d.ts +6 -2
  155. package/dist/types/components/Sepa/type.d.ts +3 -2
  156. package/dist/types/components/ShopeePay/ShopeePay.d.ts +6 -2
  157. package/dist/types/components/ShopeePay/type.d.ts +3 -25
  158. package/dist/types/components/TNGWallet/TNGWallet.d.ts +6 -2
  159. package/dist/types/components/TNGWallet/type.d.ts +3 -25
  160. package/dist/types/components/ThreeDS/components/ThreeDSAuth/type.d.ts +2 -0
  161. package/dist/types/components/WechatPay/WechatPay.d.ts +6 -2
  162. package/dist/types/components/WechatPay/type.d.ts +15 -2
  163. package/dist/types/components/business/QRCodeModal/type.d.ts +2 -0
  164. package/dist/types/components/index.d.ts +1 -0
  165. package/dist/types/components/internal/Loading/Loading.d.ts +1 -0
  166. package/dist/types/components/internal/Select/SelectMenu.d.ts +1 -1
  167. package/dist/types/components/internal/icons/IconZalopay.d.ts +2 -0
  168. package/dist/types/components/internal/icons/IconZalopayComplete.d.ts +2 -0
  169. package/dist/types/components/internal/icons/index.d.ts +3 -0
  170. package/dist/types/components/wallets/GCash/GCash.d.ts +6 -2
  171. package/dist/types/components/wallets/GCash/type.d.ts +3 -35
  172. package/dist/types/components/wallets/Paymaya/Paymaya.d.ts +6 -2
  173. package/dist/types/components/wallets/Paymaya/type.d.ts +3 -25
  174. package/dist/types/components/wallets/Zalopay/Zalopay.d.ts +10 -0
  175. package/dist/types/components/wallets/Zalopay/index.d.ts +2 -0
  176. package/dist/types/components/wallets/Zalopay/type.d.ts +39 -0
  177. package/dist/types/config.d.ts +2 -4
  178. package/dist/types/constant.d.ts +3 -1
  179. package/dist/types/core/{Address.d.ts → address.d.ts} +23 -24
  180. package/dist/types/core/{PayKKaCheckout.d.ts → checkout.d.ts} +9 -3
  181. package/dist/types/core/context.d.ts +3 -2
  182. package/dist/types/core/index.d.ts +3 -2
  183. package/dist/types/core/query.d.ts +2 -2
  184. package/dist/types/core/session.d.ts +23 -0
  185. package/dist/types/core/theme.d.ts +7 -0
  186. package/dist/types/hooks/index.d.ts +1 -0
  187. package/dist/types/hooks/usePayment.d.ts +8 -0
  188. package/dist/types/i18n/locales/de-DE.d.ts +2 -0
  189. package/dist/types/i18n/locales/en-GB.d.ts +2 -0
  190. package/dist/types/i18n/locales/es-ES.d.ts +2 -0
  191. package/dist/types/i18n/locales/fr-FR.d.ts +2 -0
  192. package/dist/types/i18n/locales/ja-JP.d.ts +2 -0
  193. package/dist/types/i18n/locales/ko-KR.d.ts +2 -0
  194. package/dist/types/i18n/locales/nl-NL.d.ts +2 -0
  195. package/dist/types/i18n/locales/pt-PT.d.ts +2 -0
  196. package/dist/types/i18n/locales/ru-RU.d.ts +2 -0
  197. package/dist/types/i18n/locales/zh-CN.d.ts +2 -0
  198. package/dist/types/i18n/locales/zh-HK.d.ts +2 -0
  199. package/dist/types/i18n/locales/zh-TW.d.ts +2 -0
  200. package/dist/types/index.d.ts +2 -1
  201. package/dist/types/types/index.d.ts +70 -32
  202. package/dist/types/types/message.d.ts +30 -25
  203. package/dist/types/utils/card-brand/index.d.ts +3 -3
  204. package/dist/types/utils/colors.d.ts +1 -0
  205. package/dist/types/utils/index.d.ts +4 -2
  206. package/dist/types/utils/object.d.ts +7 -0
  207. package/dist/types/utils/payment.d.ts +37 -0
  208. package/dist/types/utils/string.d.ts +1 -0
  209. package/dist/types/utils/style.d.ts +1 -1
  210. package/dist/types/utils/system-info/is-ua-webview.d.ts +1 -1
  211. package/dist/types/utils/theme.d.ts +4 -0
  212. package/package.json +3 -3
  213. package/dist/es/utils/deep-freeze.js +0 -13
  214. package/dist/es/utils/obj.js +0 -22
  215. package/dist/types/core/Session.d.ts +0 -16
  216. package/dist/types/utils/deep-freeze.d.ts +0 -1
  217. package/dist/types/utils/obj.d.ts +0 -6
@@ -3,18 +3,17 @@ import { useBEM } from "../../hooks/useBEM.js";
3
3
  import { CoreContext } from "../../core/context.js";
4
4
  import "../../utils/card-brand/brands.js";
5
5
  import "../../utils/system-info/get-browser-info.js";
6
- import { cssVarPrefix, normalizedClass, formatAmount } from "../../utils/format.js";
6
+ import { normalizedClass, formatAmount } from "../../utils/format.js";
7
7
  import { redirectToPayment } from "../../utils/redirect.js";
8
+ import { formatPaymentResult } from "../../utils/payment.js";
8
9
  import { isTimeoutError } from "../../api/http.js";
9
- import { PaymentCategory, COMMON_CLASS_NAME, PaymentMethod, SessionMode } from "../../constant.js";
10
10
  import { getBrowserParams } from "../../api/modules/get-browser-params.js";
11
+ import { PaymentCategory, COMMON_CLASS_NAME, PaymentMethod, SessionMode } from "../../constant.js";
11
12
  import { getMayBankQRPayInfo, mayBankQRPay } from "../../api/modules/may-bank-qr-pay/index.js";
12
13
  import { PayKKaError } from "../../core/error.js";
13
- import { hidePaymentButton } from "../../config.js";
14
14
  import { usePayState } from "../../hooks/usePayState.js";
15
15
  import { useRetry } from "../../hooks/useRetry.js";
16
16
  import { createEmailCore, EmailField } from "../EmailField/EmailField.js";
17
- import { createAddressCore } from "../../core/Address.js";
18
17
  import { SubmitButton } from "../SubmitButton/index.js";
19
18
  import "../internal/Form/type.js";
20
19
  import "../internal/Form/context.js";
@@ -25,300 +24,328 @@ import { Info } from "../internal/Info/Info.js";
25
24
  import { GuideCard } from "../GuideCard/index.js";
26
25
  const { bem } = useBEM("may-bank-qr-pay");
27
26
  const fieldClassNames = bem("field");
28
- const MayBankQRPay = w((props, ref) => {
29
- var _a, _b, _c, _d, _e, _f;
30
- const {
31
- session,
32
- showEmail = false,
33
- showAddress = false,
34
- redirectMode = "auto",
35
- core,
36
- autoQuery = true,
37
- showGuideCard = true
38
- } = props;
39
- F(ref, () => ({
40
- stopRetry: () => {
41
- setSubmitButtonStatus("unSubmit");
42
- stopReFetchPayInfo();
43
- },
44
- startRetry: (timeout) => {
45
- setSubmitButtonStatus("loading");
46
- startReFetchPayInfo({ timeout });
47
- },
48
- updateAddress: () => {
49
- var _a2;
50
- if (!(fieldStatus == null ? void 0 : fieldStatus.address.show))
27
+ const MayBankQRPay = w(
28
+ (props, ref) => {
29
+ const {
30
+ session,
31
+ showEmail = false,
32
+ showAddress = false,
33
+ redirectMode = "auto",
34
+ core,
35
+ autoQuery = true,
36
+ showGuideCard = true,
37
+ hidePaymentButton = false
38
+ } = props;
39
+ F(ref, () => ({
40
+ stopRetry: () => {
41
+ setSubmitButtonStatus("unSubmit");
42
+ stopReFetchPayInfo();
43
+ },
44
+ startRetry: (timeout) => {
45
+ setSubmitButtonStatus("loading");
46
+ startReFetchPayInfo({ timeout });
47
+ },
48
+ updateAddress: () => {
49
+ var _a;
50
+ if (!(fieldStatus == null ? void 0 : fieldStatus.address.show))
51
+ return;
52
+ const newForm = Object.assign(form, { address: addressCore.getAddressState() });
53
+ setForm(newForm);
54
+ (_a = addressFieldRef.current) == null ? void 0 : _a.update(addressCore.getAddressState());
55
+ validateForm();
56
+ },
57
+ updateEmail: () => {
58
+ var _a;
59
+ if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
60
+ return;
61
+ const newForm = Object.assign(form, { email: emailState.email });
62
+ setForm(newForm);
63
+ (_a = emailFieldRef.current) == null ? void 0 : _a.update(emailState.email);
64
+ validateForm();
65
+ },
66
+ payment: () => {
67
+ hidePaymentButton && onSubmit();
68
+ }
69
+ }));
70
+ const addressCore = core.getAddressCore();
71
+ const emailState = createEmailCore();
72
+ const addressFieldRef = A(null);
73
+ const emailFieldRef = A(null);
74
+ const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
75
+ const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
76
+ const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
77
+ const formRef = A(null);
78
+ const [form, setForm] = h({
79
+ email: "",
80
+ address: {
81
+ country: void 0,
82
+ province: void 0,
83
+ city: void 0,
84
+ area: void 0,
85
+ postCode: void 0,
86
+ address1: void 0,
87
+ address2: void 0
88
+ }
89
+ });
90
+ const [validated, setValidated] = h(false);
91
+ const [fieldStatus, setFieldStatus] = h();
92
+ const initFieldStatus = () => {
93
+ const { field, sessionMode } = session.checkout;
94
+ const { email, address } = field;
95
+ if (sessionMode === SessionMode.COMPONENT) {
96
+ if (email.disabled) {
97
+ email.show = showEmail;
98
+ }
99
+ if (showAddress && !(address == null ? void 0 : address.show)) {
100
+ address.show = true;
101
+ }
102
+ }
103
+ setFieldStatus({ ...field });
104
+ };
105
+ const processOnSuccess = (res) => {
106
+ var _a, _b;
107
+ setSubmitButtonStatus("success");
108
+ (_b = props.onSuccess) == null ? void 0 : _b.call(props, formatPaymentResult({
109
+ ...res,
110
+ returnUrl: (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.returnUrl
111
+ }));
112
+ };
113
+ y(() => {
114
+ if (!sessionReady) {
51
115
  return;
52
- setForm(Object.assign(form, { address: addressState.getAddressState() }));
53
- (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressState.getAddressState());
54
- },
55
- updateEmail: () => {
56
- var _a2;
57
- if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
116
+ }
117
+ const { bill = {}, supportMethods = [], country } = (session == null ? void 0 : session.checkout) || {};
118
+ if (!supportMethods.includes(PaymentMethod.MAY_BANK_QR_PAY)) {
58
119
  return;
59
- setForm(Object.assign(form, { email: emailState.email }));
60
- form.email = emailState.email;
61
- (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
62
- validateForm();
63
- },
64
- payment: () => {
65
- hidePaymentButton && onSubmit();
66
- }
67
- }));
68
- const addressState = createAddressCore();
69
- const emailState = createEmailCore();
70
- const addressFieldRef = A(null);
71
- const emailFieldRef = A(null);
72
- const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
73
- const { setErrorMsg, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
74
- const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
75
- const formRef = A(null);
76
- const [form, setForm] = h({
77
- email: "",
78
- address: {
79
- country: "",
80
- province: "",
81
- city: "",
82
- area: "",
83
- postCode: "",
84
- address1: "",
85
- address2: ""
86
- }
87
- });
88
- const [validated, setValidated] = h(false);
89
- const [fieldStatus, setFieldStatus] = h();
90
- const initFieldStatus = () => {
91
- const { field, sessionMode } = session.checkout;
92
- const { email, address } = field;
93
- if (sessionMode === SessionMode.COMPONENT) {
94
- if (email.disabled) {
95
- email.show = showEmail;
96
120
  }
97
- if (showAddress && !(address == null ? void 0 : address.show)) {
98
- address.show = true;
121
+ initFieldStatus();
122
+ setIsCheckoutEnabled(true);
123
+ country && addressCore.setCountry(country);
124
+ form.email = bill.email ?? "";
125
+ form.address.country = country;
126
+ if (autoQuery && core.processingPaymentMethod === PaymentMethod.MAY_BANK_QR_PAY) {
127
+ setSubmitButtonStatus("loading");
128
+ startReFetchPayInfo();
99
129
  }
100
- }
101
- setFieldStatus({ ...field });
102
- };
103
- y(() => {
104
- if (!sessionReady) {
105
- return;
106
- }
107
- const { bill = {}, paymentMethod = [] } = (session == null ? void 0 : session.checkout) || {};
108
- if (!paymentMethod.includes(PaymentMethod.MAY_BANK_QR_PAY)) {
109
- return;
110
- }
111
- initFieldStatus();
112
- setIsCheckoutEnabled(true);
113
- form.email = bill.email ?? "";
114
- if (autoQuery && core.processingPaymentMethod === PaymentMethod.MAY_BANK_QR_PAY) {
115
- setSubmitButtonStatus("loading");
116
- startReFetchPayInfo();
117
- }
118
- }, [sessionReady]);
119
- const processOnError = (error) => {
120
- var _a2;
121
- (_a2 = props.onError) == null ? void 0 : _a2.call(props, error);
122
- core.resetEnablePaymentMethod();
123
- };
124
- const onTimeout = q(
125
- (message) => {
126
- var _a2;
127
- setErrorMsg(message || i18n.get("common.payTimeout"));
128
- setSubmitButtonStatus("unSubmit");
129
- (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props);
130
+ }, [sessionReady]);
131
+ const processOnError = (error) => {
132
+ var _a;
133
+ (_a = props.onError) == null ? void 0 : _a.call(props, error);
130
134
  core.resetEnablePaymentMethod();
131
- },
132
- [i18n, props.onTimeout]
133
- );
134
- const { start: startReFetchPayInfo, stop: stopReFetchPayInfo } = useRetry(
135
- (timeout) => pay(true, timeout),
136
- { onTimeout: () => onTimeout(i18n.get("common.queryTimeout")) }
137
- );
138
- const getPaymentParams = async () => {
139
- return {
140
- sessionId: session.sessionId,
141
- clientKey: session.clientKey,
142
- payment: {
143
- paymentMethod: PaymentMethod.MAY_BANK_QR_PAY
144
- },
145
- bill: {
146
- email: form.email,
147
- ...form.address,
148
- province: addressState.getLabel(form.address.province, addressState.getProvinceOption()) ?? form.address.province,
149
- city: addressState.getLabel(form.address.city, addressState.getCityOptions()) ?? form.address.city
135
+ };
136
+ const onTimeout = q(
137
+ (message) => {
138
+ var _a;
139
+ setErrorMsg(message || i18n.get("common.payTimeout"));
140
+ setSubmitButtonStatus("unSubmit");
141
+ (_a = props.onTimeout) == null ? void 0 : _a.call(props);
142
+ core.resetEnablePaymentMethod();
150
143
  },
151
- browser: await getBrowserParams()
144
+ [i18n, props.onTimeout]
145
+ );
146
+ const { start: startReFetchPayInfo, stop: stopReFetchPayInfo } = useRetry(
147
+ (timeout) => pay(true, timeout),
148
+ { onTimeout: () => onTimeout(i18n.get("common.queryTimeout")) }
149
+ );
150
+ const getPaymentParams = async () => {
151
+ return {
152
+ sessionId: session.sessionId,
153
+ clientKey: session.clientKey,
154
+ payment: {
155
+ paymentMethod: PaymentMethod.MAY_BANK_QR_PAY
156
+ },
157
+ bill: {
158
+ email: form.email,
159
+ addressLine1: form.address.address1,
160
+ addressLine2: form.address.address2,
161
+ postalCode: form.address.postCode,
162
+ country: form.address.country,
163
+ district: form.address.area,
164
+ state: form.address.province ? addressCore.getLabel(form.address.province, addressCore.getProvinceOption()) ?? form.address.province : void 0,
165
+ city: form.address.city ? addressCore.getLabel(form.address.city, addressCore.getCityOptions()) ?? form.address.city : void 0
166
+ },
167
+ browser: await getBrowserParams()
168
+ };
152
169
  };
153
- };
154
- const pay = async (search = false, timeout) => {
155
- var _a2, _b2, _c2, _d2, _e2;
156
- try {
157
- const paymentParams = await getPaymentParams();
158
- const requestOptions = { locale: i18n.locale, timeout };
159
- const res = search ? await getMayBankQRPayInfo(
160
- { sessionId: session.sessionId, clientKey: session.clientKey },
161
- requestOptions
162
- ) : await mayBankQRPay(paymentParams, props.core, requestOptions);
163
- !search && ((_a2 = props.onSubmitResponse) == null ? void 0 : _a2.call(props, res));
164
- const { status, orderStatus, errorMessage, errorCode, payInfo } = res;
165
- if (status === "PROCESSING") {
166
- if (!orderStatus) {
167
- setSubmitButtonStatus("unSubmit");
168
- return { end: true };
169
- } else if (orderStatus === "SUCCESS") {
170
- setSubmitButtonStatus("success");
171
- (_b2 = props.onSuccess) == null ? void 0 : _b2.call(props);
172
- return { end: true };
173
- } else if (orderStatus === "FAILURE") {
174
- setErrorMsg(errorMessage);
175
- setSubmitButtonStatus("unSubmit");
176
- processOnError(new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
177
- return { end: true };
178
- } else if (orderStatus === "PROCESSING") {
179
- if (!search) {
180
- if (redirectMode === "auto" && payInfo) {
181
- redirectToPayment(payInfo);
182
- return { end: true };
183
- } else {
184
- startReFetchPayInfo();
170
+ const pay = async (search = false, timeout) => {
171
+ var _a, _b, _c, _d, _e, _f, _g;
172
+ try {
173
+ const requestOptions = { locale: i18n.locale, timeout };
174
+ let res = null;
175
+ if (search) {
176
+ const extraParams = (_b = (_a = core.config)._getExtraParams) == null ? void 0 : _b.call(_a, "query", PaymentMethod.MAY_BANK_QR_PAY);
177
+ res = await getMayBankQRPayInfo(
178
+ {
179
+ sessionId: session.sessionId,
180
+ clientKey: session.clientKey,
181
+ paymentMethod: PaymentMethod.MAY_BANK_QR_PAY
182
+ },
183
+ extraParams,
184
+ requestOptions
185
+ );
186
+ } else {
187
+ const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(
188
+ _c,
189
+ "payment",
190
+ PaymentMethod.MAY_BANK_QR_PAY
191
+ );
192
+ res = await mayBankQRPay(await getPaymentParams(), extraParams, requestOptions);
193
+ }
194
+ !search && ((_e = props.onSubmitResponse) == null ? void 0 : _e.call(props, res));
195
+ const { status, orderStatus, errorMessage, errorCode, payInfo, sessionId } = res;
196
+ sessionId && (session.sessionId = sessionId);
197
+ if (status === "PROCESSING") {
198
+ if (!orderStatus) {
199
+ setSubmitButtonStatus("unSubmit");
200
+ return { end: true };
201
+ } else if (orderStatus === "SUCCESS") {
202
+ processOnSuccess(res);
203
+ return { end: true };
204
+ } else if (orderStatus === "FAILURE") {
205
+ errorMessage && setErrorMsg(errorMessage);
206
+ setSubmitButtonStatus("unSubmit");
207
+ processOnError(new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
208
+ return { end: true };
209
+ } else if (orderStatus === "PROCESSING") {
210
+ if (!search) {
211
+ if (redirectMode === "auto" && payInfo) {
212
+ redirectToPayment(payInfo);
213
+ return { end: true };
214
+ } else {
215
+ startReFetchPayInfo();
216
+ }
185
217
  }
218
+ return { end: false };
219
+ } else if (orderStatus === "CANCELED") {
220
+ setSubmitButtonStatus("unSubmit");
221
+ (_f = props.onTimeout) == null ? void 0 : _f.call(props);
222
+ core.resetEnablePaymentMethod();
223
+ return { end: true };
186
224
  }
187
- return { end: false };
188
- } else if (orderStatus === "CANCELED") {
225
+ } else if (status === "SUCCESS") {
226
+ processOnSuccess(res);
227
+ return { end: true };
228
+ } else if (status === "EXPIRED") {
189
229
  setSubmitButtonStatus("unSubmit");
190
- (_c2 = props.onTimeout) == null ? void 0 : _c2.call(props);
191
- core.resetEnablePaymentMethod();
230
+ (_g = props.onExpired) == null ? void 0 : _g.call(props);
192
231
  return { end: true };
193
232
  }
194
- } else if (status === "SUCCESS") {
195
- setSubmitButtonStatus("success");
196
- (_d2 = props.onSuccess) == null ? void 0 : _d2.call(props);
197
- return { end: true };
198
- } else if (status === "EXPIRED") {
199
233
  setSubmitButtonStatus("unSubmit");
200
- (_e2 = props.onExpired) == null ? void 0 : _e2.call(props);
201
234
  return { end: true };
202
- }
203
- setSubmitButtonStatus("unSubmit");
204
- return { end: true };
205
- } catch (error) {
206
- if (isTimeoutError(error)) {
207
- if (search) {
208
- return { end: false };
235
+ } catch (error) {
236
+ if (isTimeoutError(error)) {
237
+ if (search) {
238
+ return { end: false };
239
+ } else {
240
+ onTimeout();
241
+ return { end: true };
242
+ }
209
243
  } else {
210
- onTimeout();
244
+ const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
245
+ message && setErrorMsg(message);
246
+ processOnError(new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
247
+ setSubmitButtonStatus("unSubmit");
211
248
  return { end: true };
212
249
  }
213
- } else {
214
- const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
215
- setErrorMsg(message);
216
- processOnError(new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
217
- setSubmitButtonStatus("unSubmit");
218
- return { end: true };
219
- }
220
- }
221
- };
222
- const validateForm = () => {
223
- var _a2;
224
- (_a2 = formRef.current) == null ? void 0 : _a2.validate(void 0, false).then(() => {
225
- setValidated(true);
226
- }).catch(() => {
227
- setValidated(false);
228
- });
229
- };
230
- y(() => {
231
- validateForm();
232
- }, [form]);
233
- const onSubmit = async () => {
234
- var _a2;
235
- setErrorMsg("");
236
- (_a2 = formRef.current) == null ? void 0 : _a2.validate(async (errors) => {
237
- var _a3;
238
- (fieldStatus == null ? void 0 : fieldStatus.address.show) && addressState.setValidateAllFields(true);
239
- (_a3 = props.onSubmit) == null ? void 0 : _a3.call(props, errors);
240
- if (errors) {
241
- setSubmitButtonStatus("unSubmit");
242
- return;
243
250
  }
251
+ };
252
+ const validateForm = () => {
253
+ var _a;
254
+ (_a = formRef.current) == null ? void 0 : _a.validate(void 0, false).then(() => {
255
+ setValidated(true);
256
+ }).catch(() => {
257
+ setValidated(false);
258
+ });
259
+ };
260
+ y(() => {
261
+ validateForm();
262
+ }, [form]);
263
+ const onSubmit = async () => {
264
+ var _a;
244
265
  setErrorMsg("");
245
- setSubmitButtonStatus("loading");
246
- await pay();
247
- });
248
- };
249
- const setFormRef = (dom) => {
250
- formRef.current = dom;
251
- dom && validateForm();
252
- };
253
- const Button = () => {
254
- var _a2;
255
- const transAmount = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.transAmount;
256
- const amountText = (transAmount == null ? void 0 : transAmount.amount) ? formatAmount(transAmount).jointSymbol() : "";
257
- const text = i18n.get("common.pay") + (amountText ? ` ${amountText}` : "");
266
+ (_a = formRef.current) == null ? void 0 : _a.validate(async (errors) => {
267
+ var _a2;
268
+ (fieldStatus == null ? void 0 : fieldStatus.address.show) && addressCore.setValidateAllFields(true);
269
+ (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props, errors);
270
+ if (errors) {
271
+ setSubmitButtonStatus("unSubmit");
272
+ return;
273
+ }
274
+ setErrorMsg("");
275
+ setSubmitButtonStatus("loading");
276
+ await pay();
277
+ });
278
+ };
279
+ const setFormRef = (dom) => {
280
+ formRef.current = dom;
281
+ dom && validateForm();
282
+ };
283
+ const Button = () => {
284
+ var _a;
285
+ const transAmount = (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.transAmount;
286
+ const amountText = (transAmount == null ? void 0 : transAmount.amount) ? formatAmount(transAmount).jointSymbol() : "";
287
+ const text = i18n.get("common.pay") + (amountText ? ` ${amountText}` : "");
288
+ return /* @__PURE__ */ u(
289
+ SubmitButton,
290
+ {
291
+ className: bem("button"),
292
+ status: submitButtonStatus,
293
+ text,
294
+ loadingText: i18n.get("common.payProcessing"),
295
+ successText: i18n.get("common.paySuccess"),
296
+ onClick: onSubmit,
297
+ verified: validated
298
+ }
299
+ );
300
+ };
301
+ const Email = () => {
302
+ return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.email.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
303
+ EmailField,
304
+ {
305
+ ref: emailFieldRef,
306
+ value: form.email,
307
+ disabled: fieldStatus == null ? void 0 : fieldStatus.email.disabled
308
+ }
309
+ ) }) });
310
+ };
311
+ const ErrorMessage = () => {
312
+ return /* @__PURE__ */ u(b, { children: !!errorMsg && /* @__PURE__ */ u(Info, { content: errorMsg }) });
313
+ };
314
+ const Address = () => {
315
+ var _a, _b;
316
+ return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.address.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
317
+ AddressField,
318
+ {
319
+ ref: addressFieldRef,
320
+ value: form.address,
321
+ 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),
322
+ onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
323
+ }
324
+ ) }) });
325
+ };
258
326
  return /* @__PURE__ */ u(
259
- SubmitButton,
327
+ CoreContext.Provider,
260
328
  {
261
- className: bem("button"),
262
- status: submitButtonStatus,
263
- text,
264
- loadingText: i18n.get("common.payProcessing"),
265
- successText: i18n.get("common.paySuccess"),
266
- onClick: onSubmit,
267
- verified: validated
329
+ value: {
330
+ i18n,
331
+ session,
332
+ core
333
+ },
334
+ children: isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u("div", { className: core.theme.className, children: [
335
+ showGuideCard && /* @__PURE__ */ u(GuideCard, { type: PaymentCategory.MAY_BANK_QR_PAY }),
336
+ /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), children: [
337
+ Email(),
338
+ Address(),
339
+ /* @__PURE__ */ u("div", { className: bem("footer-wrapper"), children: [
340
+ ErrorMessage(),
341
+ !hidePaymentButton && Button()
342
+ ] })
343
+ ] }) })
344
+ ] })
268
345
  }
269
346
  );
270
- };
271
- const Email = () => {
272
- return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.email.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
273
- EmailField,
274
- {
275
- ref: emailFieldRef,
276
- value: form.email,
277
- disabled: fieldStatus == null ? void 0 : fieldStatus.email.disabled
278
- }
279
- ) }) });
280
- };
281
- const formStyle = {
282
- [cssVarPrefix("button-bg-color")]: (_a = session == null ? void 0 : session.colors) == null ? void 0 : _a.primary,
283
- [cssVarPrefix("button-bg-color-hover")]: (_b = session == null ? void 0 : session.colors) == null ? void 0 : _b.primaryHover,
284
- [cssVarPrefix("button-bg-color-active")]: (_c = session == null ? void 0 : session.colors) == null ? void 0 : _c.primaryActive,
285
- [cssVarPrefix("button-text-color")]: (_e = (_d = session == null ? void 0 : session.checkout) == null ? void 0 : _d.theme) == null ? void 0 : _e.payButtonTextColor,
286
- [cssVarPrefix("input-color")]: (_f = session == null ? void 0 : session.colors) == null ? void 0 : _f.primary
287
- };
288
- const ErrorMessage = () => {
289
- return /* @__PURE__ */ u(b, { children: !!errorMsg && /* @__PURE__ */ u(Info, { content: errorMsg, style: { marginTop: "12px" } }) });
290
- };
291
- const Address = () => {
292
- var _a2, _b2;
293
- return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.address.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
294
- AddressField,
295
- {
296
- ref: addressFieldRef,
297
- value: form.address,
298
- 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),
299
- onAddressChange: (value) => setForm(Object.assign(form, { address: value }))
300
- }
301
- ) }) });
302
- };
303
- return /* @__PURE__ */ u(
304
- CoreContext.Provider,
305
- {
306
- value: {
307
- i18n,
308
- session
309
- },
310
- children: isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u(b, { children: [
311
- showGuideCard && /* @__PURE__ */ u(GuideCard, { type: PaymentCategory.MAY_BANK_QR_PAY }),
312
- /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: formStyle, children: [
313
- Email(),
314
- Address(),
315
- ErrorMessage(),
316
- !hidePaymentButton && Button()
317
- ] }) })
318
- ] })
319
- }
320
- );
321
- });
347
+ }
348
+ );
322
349
  export {
323
350
  MayBankQRPay
324
351
  };