@paykka/card-checkout-ui 0.11.6 → 0.13.1

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