@paykka/card-checkout-ui 0.13.17 → 0.14.0

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 (180) hide show
  1. package/dist/card-checkout-ui.js +53 -25
  2. package/dist/card-checkout-ui.umd.cjs +53 -25
  3. package/dist/es/api/modules/boost/index.js +5 -16
  4. package/dist/es/api/modules/gcash/index.js +5 -16
  5. package/dist/es/api/modules/get-browser-params.js +1 -4
  6. package/dist/es/api/modules/grab-pay/index.js +5 -16
  7. package/dist/es/api/modules/line-pay/index.js +5 -16
  8. package/dist/es/api/modules/may-bank-qr-pay/index.js +5 -16
  9. package/dist/es/api/modules/nine-pay/index.js +5 -16
  10. package/dist/es/api/modules/opay-wallet/index.js +5 -16
  11. package/dist/es/api/modules/paga-wallet/index.js +5 -16
  12. package/dist/es/api/modules/paymaya/index.js +5 -16
  13. package/dist/es/api/modules/shopee-pay/index.js +5 -16
  14. package/dist/es/api/modules/threeDS/index.js +16 -2
  15. package/dist/es/api/modules/tng-wallet/index.js +5 -16
  16. package/dist/es/api/modules/zalopay/index.js +5 -16
  17. package/dist/es/components/AccordionItem/AccordionItem.js +0 -2
  18. package/dist/es/components/AddressField/index.js +13 -3
  19. package/dist/es/components/AliPay/index.js +64 -62
  20. package/dist/es/components/ApplePay/index.js +42 -39
  21. package/dist/es/components/CPFField/index.js +2 -1
  22. package/dist/es/components/Card/index.js +160 -133
  23. package/dist/es/components/CardExpireDateField/index.js +2 -1
  24. package/dist/es/components/CardNo/index.js +2 -2
  25. package/dist/es/components/CardNumberField/index.js +2 -1
  26. package/dist/es/components/CardSecurityCodeField/index.js +2 -1
  27. package/dist/es/components/CardSelector/index.js +3 -2
  28. package/dist/es/components/DropIn/index.js +24 -21
  29. package/dist/es/components/GooglePay/index.js +97 -88
  30. package/dist/es/components/PaymentButton/index.js +1 -1
  31. package/dist/es/components/SecuredFieldsProvider/index.js +31 -9
  32. package/dist/es/components/SecuredIframe/index.js +40 -23
  33. package/dist/es/components/SubmitButton/index.js +1 -1
  34. package/dist/es/components/ThreeDS/index.js +29 -12
  35. package/dist/es/components/WechatPay/index.js +70 -69
  36. package/dist/es/components/business/PhoneField/PhoneField.js +1 -0
  37. package/dist/es/components/index.js +7 -7
  38. package/dist/es/components/internal/CheckBox/CheckBox.js +2 -2
  39. package/dist/es/components/internal/Input/Input.js +1 -1
  40. package/dist/es/components/internal/Select/Select.js +4 -1
  41. package/dist/es/components/internal/icons/IconArrowDown.js +4 -4
  42. package/dist/es/components/internal/icons/IconBancontact.js +69 -14
  43. package/dist/es/components/internal/icons/IconBlik.js +541 -21
  44. package/dist/es/components/internal/icons/IconIdeal.js +61 -29
  45. package/dist/es/components/internal/icons/IconSkrill.js +14 -7
  46. package/dist/es/components/internal/icons/IconTrustly.js +11 -44
  47. package/dist/es/components/wallets/Bancontact/Bancontact.js +11 -8
  48. package/dist/es/components/wallets/Blik/Blik.js +12 -9
  49. package/dist/es/components/wallets/Boost/Boost.js +183 -0
  50. package/dist/es/components/wallets/Boost/boost2.js +1 -0
  51. package/dist/es/components/wallets/Boost/index.js +1 -0
  52. package/dist/es/components/wallets/Boost/type.js +1 -0
  53. package/dist/es/components/wallets/GCash/GCash.js +62 -252
  54. package/dist/es/components/wallets/GrabPay/GrabPay.js +183 -0
  55. package/dist/es/components/wallets/GrabPay/grab-pay.js +1 -0
  56. package/dist/es/components/wallets/GrabPay/index.js +1 -0
  57. package/dist/es/components/wallets/GrabPay/type.js +1 -0
  58. package/dist/es/components/wallets/IDeal/IDeal.js +11 -8
  59. package/dist/es/components/wallets/LinePay/LinePay.js +183 -0
  60. package/dist/es/components/wallets/LinePay/index.js +1 -0
  61. package/dist/es/components/wallets/LinePay/line-pay.js +1 -0
  62. package/dist/es/components/wallets/LinePay/type.js +1 -0
  63. package/dist/es/components/wallets/MayBankQRPay/MayBankQRPay.js +187 -0
  64. package/dist/es/components/wallets/MayBankQRPay/index.js +1 -0
  65. package/dist/es/components/wallets/MayBankQRPay/may-bank-qr-pay.js +1 -0
  66. package/dist/es/components/wallets/MayBankQRPay/type.js +1 -0
  67. package/dist/es/components/wallets/NinePay/NinePay.js +185 -0
  68. package/dist/es/components/wallets/NinePay/index.js +1 -0
  69. package/dist/es/components/wallets/NinePay/nine-pay.js +1 -0
  70. package/dist/es/components/wallets/NinePay/type.js +1 -0
  71. package/dist/es/components/wallets/OVO/OVO.js +7 -5
  72. package/dist/es/components/wallets/OpayWallet/OpayWallet.js +56 -218
  73. package/dist/es/components/wallets/P24/P24.js +11 -8
  74. package/dist/es/components/wallets/PagaWallet/PagaWallet.js +56 -218
  75. package/dist/es/components/wallets/Paymaya/Paymaya.js +56 -221
  76. package/dist/es/components/wallets/PicPay/PicPay.js +50 -47
  77. package/dist/es/components/wallets/Pix/Pix.js +44 -48
  78. package/dist/es/components/wallets/ShopeePay/ShopeePay.js +185 -0
  79. package/dist/es/components/wallets/ShopeePay/index.js +1 -0
  80. package/dist/es/components/wallets/ShopeePay/shopee-pay.js +1 -0
  81. package/dist/es/components/wallets/ShopeePay/type.js +1 -0
  82. package/dist/es/components/wallets/Skrill/Skrill.js +28 -26
  83. package/dist/es/components/wallets/TNGWallet/TNGWallet.js +185 -0
  84. package/dist/es/components/wallets/TNGWallet/index.js +1 -0
  85. package/dist/es/components/wallets/TNGWallet/tng-wallet.js +1 -0
  86. package/dist/es/components/wallets/TNGWallet/type.js +1 -0
  87. package/dist/es/components/wallets/Trustly/Trustly.js +15 -15
  88. package/dist/es/components/wallets/Vietqr/Vietqr.js +60 -248
  89. package/dist/es/components/wallets/Zalopay/Zalopay.js +61 -249
  90. package/dist/es/components/wallets/index.js +7 -0
  91. package/dist/es/core/checkout.js +19 -45
  92. package/dist/es/core/logger.js +1 -1
  93. package/dist/es/core/payment.js +65 -0
  94. package/dist/es/hooks/useBaseWallet.js +20 -18
  95. package/dist/es/hooks/usePayState.js +37 -25
  96. package/dist/es/hooks/usePayment.js +1 -14
  97. package/dist/es/hooks/useRetry.js +50 -26
  98. package/dist/es/index.js +7 -7
  99. package/dist/es/out/base-fraud-detection.js +4 -1
  100. package/dist/es/out/fraud-detection.js +12 -13
  101. package/dist/es/out/worldpay-ddc-manager.js +7 -14
  102. package/dist/es/out/worldpay-ddc.js +7 -5
  103. package/dist/es/style.css +1 -1
  104. package/dist/es/types/event.js +1 -0
  105. package/dist/es/types/message.js +2 -0
  106. package/dist/es/utils/payment.js +12 -12
  107. package/dist/es/utils/system-info/is-ua-webview.js +1 -20
  108. package/dist/style.css +1 -1
  109. package/dist/types/api/modules/threeDS/index.d.ts +7 -0
  110. package/dist/types/components/AddressField/type.d.ts +2 -2
  111. package/dist/types/components/CPFField/type.d.ts +1 -1
  112. package/dist/types/components/CardExpireDateField/type.d.ts +1 -1
  113. package/dist/types/components/CardNo/type.d.ts +3 -2
  114. package/dist/types/components/CardNumberField/type.d.ts +1 -1
  115. package/dist/types/components/CardSecurityCodeField/type.d.ts +1 -1
  116. package/dist/types/components/CardSelector/type.d.ts +4 -4
  117. package/dist/types/components/GooglePay/createGooglePay.d.ts +1 -1
  118. package/dist/types/components/GooglePay/type.d.ts +6 -0
  119. package/dist/types/components/SecuredFieldsProvider/type.d.ts +2 -0
  120. package/dist/types/components/ThreeDS/components/ThreeDSIframe/ThreeDSIframe.d.ts +0 -6
  121. package/dist/types/components/index.d.ts +0 -7
  122. package/dist/types/components/internal/CheckBox/type.d.ts +2 -1
  123. package/dist/types/components/internal/Select/type.d.ts +1 -1
  124. package/dist/types/components/internal/icons/IconArrowDown.d.ts +1 -1
  125. package/dist/types/components/{Boost → wallets/Boost}/Boost.d.ts +9 -4
  126. package/dist/types/components/{Boost → wallets/Boost}/type.d.ts +2 -2
  127. package/dist/types/components/wallets/GCash/GCash.d.ts +5 -0
  128. package/dist/types/components/{GrabPay → wallets/GrabPay}/GrabPay.d.ts +4 -4
  129. package/dist/types/components/wallets/GrabPay/type.d.ts +17 -0
  130. package/dist/types/components/{LinePay → wallets/LinePay}/LinePay.d.ts +9 -4
  131. package/dist/types/components/{LinePay → wallets/LinePay}/type.d.ts +2 -2
  132. package/dist/types/components/wallets/MayBankQRPay/MayBankQRPay.d.ts +15 -0
  133. package/dist/types/components/{MayBankQRPay → wallets/MayBankQRPay}/type.d.ts +2 -2
  134. package/dist/types/components/wallets/NinePay/NinePay.d.ts +15 -0
  135. package/dist/types/components/{NinePay → wallets/NinePay}/type.d.ts +2 -2
  136. package/dist/types/components/wallets/OpayWallet/OpayWallet.d.ts +5 -0
  137. package/dist/types/components/wallets/PagaWallet/PagaWallet.d.ts +5 -0
  138. package/dist/types/components/wallets/Paymaya/Paymaya.d.ts +5 -0
  139. package/dist/types/components/{ShopeePay → wallets/ShopeePay}/ShopeePay.d.ts +9 -4
  140. package/dist/types/components/{ShopeePay → wallets/ShopeePay}/type.d.ts +2 -2
  141. package/dist/types/components/wallets/Skrill/type.d.ts +0 -12
  142. package/dist/types/components/{TNGWallet → wallets/TNGWallet}/TNGWallet.d.ts +9 -4
  143. package/dist/types/components/{TNGWallet → wallets/TNGWallet}/type.d.ts +2 -2
  144. package/dist/types/components/wallets/Vietqr/Vietqr.d.ts +5 -0
  145. package/dist/types/components/wallets/Zalopay/Zalopay.d.ts +5 -0
  146. package/dist/types/components/wallets/index.d.ts +7 -0
  147. package/dist/types/core/checkout.d.ts +2 -9
  148. package/dist/types/core/payment.d.ts +21 -0
  149. package/dist/types/hooks/useBaseWallet.d.ts +2 -2
  150. package/dist/types/hooks/usePayState.d.ts +3 -1
  151. package/dist/types/hooks/useRetry.console-tests.d.ts +41 -0
  152. package/dist/types/hooks/useRetry.d.ts +22 -3
  153. package/dist/types/out/base-fraud-detection.d.ts +1 -0
  154. package/dist/types/out/config.d.ts +1 -1
  155. package/dist/types/out/fraud-detection.d.ts +2 -8
  156. package/dist/types/out/types.d.ts +3 -1
  157. package/dist/types/out/worldpay-ddc-manager.d.ts +6 -7
  158. package/dist/types/types/event.d.ts +6 -1
  159. package/dist/types/types/message.d.ts +24 -3
  160. package/dist/types/types/payment.d.ts +4 -0
  161. package/dist/types/utils/iframe.d.ts +1 -1
  162. package/dist/types/utils/payment.d.ts +10 -10
  163. package/package.json +9 -5
  164. package/dist/es/components/Boost/index.js +0 -349
  165. package/dist/es/components/GrabPay/index.js +0 -349
  166. package/dist/es/components/LinePay/index.js +0 -349
  167. package/dist/es/components/MayBankQRPay/index.js +0 -355
  168. package/dist/es/components/NinePay/index.js +0 -349
  169. package/dist/es/components/ShopeePay/index.js +0 -349
  170. package/dist/es/components/TNGWallet/index.js +0 -349
  171. package/dist/types/components/GrabPay/type.d.ts +0 -28
  172. package/dist/types/components/MayBankQRPay/MayBankQRPay.d.ts +0 -10
  173. package/dist/types/components/NinePay/NinePay.d.ts +0 -10
  174. /package/dist/types/components/{Boost → wallets/Boost}/index.d.ts +0 -0
  175. /package/dist/types/components/{GrabPay → wallets/GrabPay}/index.d.ts +0 -0
  176. /package/dist/types/components/{LinePay → wallets/LinePay}/index.d.ts +0 -0
  177. /package/dist/types/components/{MayBankQRPay → wallets/MayBankQRPay}/index.d.ts +0 -0
  178. /package/dist/types/components/{NinePay → wallets/NinePay}/index.d.ts +0 -0
  179. /package/dist/types/components/{ShopeePay → wallets/ShopeePay}/index.d.ts +0 -0
  180. /package/dist/types/components/{TNGWallet → wallets/TNGWallet}/index.d.ts +0 -0
@@ -9,7 +9,7 @@ import { redirectToPayment } from "../../../utils/redirect.js";
9
9
  import { processPaymentStatus, formatPaymentResult } from "../../../utils/payment.js";
10
10
  import { isTimeoutError } from "../../../api/http.js";
11
11
  import { getBrowserParams } from "../../../api/modules/get-browser-params.js";
12
- import { PaymentCategory, COMMON_CLASS_NAME, PaymentMethod, SessionMode } from "../../../constant.js";
12
+ import { PaymentMethod, PaymentCategory, COMMON_CLASS_NAME, SessionMode } from "../../../constant.js";
13
13
  import { getPixPayInfo, pixPay } from "../../../api/modules/pix/index.js";
14
14
  import { PayKKaError } from "../../../core/error.js";
15
15
  import "../../../out/worldpay-jsc-origin.js";
@@ -18,7 +18,7 @@ import { useRetry } from "../../../hooks/useRetry.js";
18
18
  import { createEmailCore, EmailField } from "../../EmailField/EmailField.js";
19
19
  import { SubmitButton } from "../../SubmitButton/index.js";
20
20
  import { GuideCard } from "../../GuideCard/index.js";
21
- import { AddressField } from "../../AddressField/index.js";
21
+ import { DEFAULT_ADDRESS, AddressField } from "../../AddressField/index.js";
22
22
  import { Info } from "../../internal/Info/Info.js";
23
23
  import "../../internal/Form/type.js";
24
24
  import "../../internal/Form/context.js";
@@ -30,6 +30,7 @@ import { CPFField } from "../../CPFField/index.js";
30
30
  import { Tip } from "../../Tip/index.js";
31
31
  const { bem } = useBEM("pix");
32
32
  const fieldClassNames = bem("field");
33
+ const CURR_PAYMENT_METHOD = PaymentMethod.PIX;
33
34
  const Pix = w((props, ref) => {
34
35
  var _a;
35
36
  const {
@@ -55,19 +56,20 @@ const Pix = w((props, ref) => {
55
56
  var _a2;
56
57
  if (!(fieldStatus == null ? void 0 : fieldStatus.address.show))
57
58
  return;
58
- const newForm = Object.assign(form, { address: addressCore.getAddressState() });
59
- setForm(newForm);
60
- (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressCore.getAddressState());
61
- validateForm();
59
+ const address = addressCore.getAddressState();
60
+ form.address = address;
61
+ setForm(form);
62
+ (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(address);
63
+ validateFormSilently();
62
64
  },
63
65
  updateEmail: () => {
64
66
  var _a2;
65
67
  if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
66
68
  return;
67
- const newForm = Object.assign(form, { email: emailState.email });
68
- setForm(newForm);
69
+ form.email = emailState.email;
70
+ setForm(form);
69
71
  (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
70
- validateForm();
72
+ validateFormSilently();
71
73
  },
72
74
  payment: () => {
73
75
  hidePaymentButton && onSubmit();
@@ -80,27 +82,19 @@ const Pix = w((props, ref) => {
80
82
  const SFPRef = A(null);
81
83
  const cpfFieldRef = A(null);
82
84
  const [isCheckoutEnabled, setIsCheckoutEnabled] = h(false);
83
- const { setErrorMsg, fraudDetection, i18n, errorMsg, sessionReady } = usePayState(session, props.core);
85
+ const { setErrorMsg, fraudDetection, i18n, errorMsg, sessionReady, disabled } = usePayState(session, props.core);
84
86
  const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
85
87
  const [security, setSecurity] = h(false);
86
88
  const formRef = A(null);
87
89
  const [form, setForm] = h({
88
90
  email: "",
89
- address: {
90
- country: void 0,
91
- province: void 0,
92
- city: void 0,
93
- area: void 0,
94
- postCode: void 0,
95
- address1: void 0,
96
- address2: void 0
97
- },
91
+ address: { ...DEFAULT_ADDRESS },
98
92
  cpf: ""
99
93
  });
100
94
  const [validated, setValidated] = h(false);
101
95
  const [fieldStatus, setFieldStatus] = h();
102
96
  const getPaymentMethodContext = () => ({
103
- paymentMethod: PaymentMethod.PIX
97
+ paymentMethod: CURR_PAYMENT_METHOD
104
98
  });
105
99
  const initFieldStatus = () => {
106
100
  const { field, sessionMode } = session.checkout;
@@ -124,12 +118,12 @@ const Pix = w((props, ref) => {
124
118
  }), getPaymentMethodContext());
125
119
  };
126
120
  y(() => {
127
- var _a2;
121
+ var _a2, _b;
128
122
  if (!sessionReady) {
129
123
  return;
130
124
  }
131
125
  const { bill = {}, supportMethods = [], country, sessionMode } = (session == null ? void 0 : session.checkout) || {};
132
- if (!supportMethods.includes(PaymentMethod.PIX)) {
126
+ if (!supportMethods.includes(CURR_PAYMENT_METHOD)) {
133
127
  return;
134
128
  }
135
129
  initFieldStatus();
@@ -139,23 +133,23 @@ const Pix = w((props, ref) => {
139
133
  country && addressCore.setCountry(country);
140
134
  form.email = bill.email ?? "";
141
135
  form.address.country = country;
142
- if (autoQuery && core.processingPaymentMethod === PaymentMethod.PIX) {
136
+ if (autoQuery && ((_b = core.payment) == null ? void 0 : _b.currPaymentMethod.value) === CURR_PAYMENT_METHOD) {
143
137
  setSubmitButtonStatus("loading");
144
138
  startReFetchPayInfo();
145
139
  }
146
140
  }, [sessionReady]);
147
141
  const processOnError = (error) => {
148
- var _a2;
142
+ var _a2, _b;
149
143
  (_a2 = props.onError) == null ? void 0 : _a2.call(props, error, getPaymentMethodContext());
150
- core.resetEnablePaymentMethod();
144
+ (_b = core.payment) == null ? void 0 : _b.resetCurrPaymentMethod();
151
145
  };
152
146
  const onTimeout = q(
153
147
  (message) => {
154
- var _a2;
148
+ var _a2, _b;
155
149
  setErrorMsg(message || i18n.get("common.payTimeout"));
156
150
  setSubmitButtonStatus("unSubmit");
157
151
  (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props, "retry", getPaymentMethodContext());
158
- core.resetEnablePaymentMethod();
152
+ (_b = core.payment) == null ? void 0 : _b.resetCurrPaymentMethod();
159
153
  },
160
154
  [i18n, props.onTimeout]
161
155
  );
@@ -168,7 +162,7 @@ const Pix = w((props, ref) => {
168
162
  sessionId: session.sessionId,
169
163
  clientKey: session.clientKey,
170
164
  payment: {
171
- paymentMethod: PaymentMethod.PIX
165
+ paymentMethod: CURR_PAYMENT_METHOD
172
166
  },
173
167
  customer: {
174
168
  document: limitedToNumber(form.cpf)
@@ -191,22 +185,23 @@ const Pix = w((props, ref) => {
191
185
  const pay = async (search = false, timeout) => {
192
186
  var _a2, _b, _c, _d, _e;
193
187
  try {
188
+ core.payment.currPaymentMethod.value = CURR_PAYMENT_METHOD;
194
189
  const requestOptions = { locale: i18n.locale, timeout };
195
190
  let res = null;
196
191
  if (search) {
197
- const extraParams = (_b = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b.call(_a2, "query", PaymentMethod.PIX);
192
+ const extraParams = (_b = (_a2 = core.config)._getExtraParams) == null ? void 0 : _b.call(_a2, "query", CURR_PAYMENT_METHOD);
198
193
  res = await getPixPayInfo(
199
194
  {
200
195
  sessionId: session.sessionId,
201
196
  clientKey: session.clientKey,
202
- paymentMethod: PaymentMethod.PIX
197
+ paymentMethod: CURR_PAYMENT_METHOD
203
198
  },
204
199
  extraParams,
205
200
  requestOptions
206
201
  );
207
202
  } else {
208
203
  const paymentParams = await getPaymentParams();
209
- const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", PaymentMethod.PIX);
204
+ const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", CURR_PAYMENT_METHOD);
210
205
  if (security) {
211
206
  (_e = SFPRef.current) == null ? void 0 : _e.payment(paymentParams, extraParams);
212
207
  return { end: true };
@@ -229,16 +224,12 @@ const Pix = w((props, ref) => {
229
224
  }
230
225
  }
231
226
  };
232
- const validateForm = () => {
227
+ const validateFormSilently = () => {
233
228
  var _a2;
234
- (_a2 = formRef.current) == null ? void 0 : _a2.validate(void 0, false).then(() => {
235
- setValidated(true);
236
- }).catch(() => {
237
- setValidated(false);
238
- });
229
+ (_a2 = formRef.current) == null ? void 0 : _a2.validate(void 0, false).then(() => setValidated(true)).catch(() => setValidated(false));
239
230
  };
240
231
  y(() => {
241
- validateForm();
232
+ validateFormSilently();
242
233
  }, [form]);
243
234
  const onSubmit = async () => {
244
235
  var _a2;
@@ -256,13 +247,13 @@ const Pix = w((props, ref) => {
256
247
  await pay();
257
248
  });
258
249
  };
259
- const processAfterPayment = (res, search = false) => {
250
+ const processAfterPayment = async (res, search = false) => {
260
251
  var _a2;
261
252
  !search && ((_a2 = props.onSubmitResponse) == null ? void 0 : _a2.call(props, res, getPaymentMethodContext()));
262
253
  const { errorMessage, errorCode, payInfo, sessionId } = res;
263
254
  sessionId && (session.sessionId = sessionId);
264
255
  let end = true;
265
- processPaymentStatus(res, {
256
+ await processPaymentStatus(res, {
266
257
  onProcessing: () => {
267
258
  if (redirectMode === "auto" && (payInfo == null ? void 0 : payInfo.targetUrl)) {
268
259
  redirectToPayment(payInfo);
@@ -278,10 +269,10 @@ const Pix = w((props, ref) => {
278
269
  processPaymentError({ message: errorMessage, code: errorCode });
279
270
  },
280
271
  onCanceled: () => {
281
- var _a3;
272
+ var _a3, _b;
282
273
  setSubmitButtonStatus("unSubmit");
283
274
  (_a3 = props.onTimeout) == null ? void 0 : _a3.call(props, "channel", getPaymentMethodContext());
284
- core.resetEnablePaymentMethod();
275
+ (_b = core.payment) == null ? void 0 : _b.resetCurrPaymentMethod();
285
276
  },
286
277
  onExpired: () => {
287
278
  var _a3;
@@ -289,6 +280,8 @@ const Pix = w((props, ref) => {
289
280
  (_a3 = props.onExpired) == null ? void 0 : _a3.call(props, getPaymentMethodContext());
290
281
  },
291
282
  onDefault: () => {
283
+ var _a3;
284
+ (_a3 = core.payment) == null ? void 0 : _a3.resetCurrPaymentMethod();
292
285
  setSubmitButtonStatus("unSubmit");
293
286
  }
294
287
  });
@@ -320,12 +313,12 @@ const Pix = w((props, ref) => {
320
313
  const error = data.errorTip && i18n.get(data.errorTip);
321
314
  (_a2 = cpfFieldRef.current) == null ? void 0 : _a2.resetValidation(data.status, error);
322
315
  setTimeout(() => {
323
- validateForm();
316
+ validateFormSilently();
324
317
  }, 100);
325
318
  };
326
319
  const setFormRef = (dom) => {
327
320
  formRef.current = dom;
328
- dom && validateForm();
321
+ dom && validateFormSilently();
329
322
  };
330
323
  const Button = () => {
331
324
  var _a2;
@@ -341,7 +334,8 @@ const Pix = w((props, ref) => {
341
334
  loadingText: i18n.get("common.payProcessing"),
342
335
  successText: i18n.get("common.paySuccess"),
343
336
  onClick: onSubmit,
344
- verified: validated
337
+ verified: validated,
338
+ disabled
345
339
  }
346
340
  );
347
341
  };
@@ -351,7 +345,7 @@ const Pix = w((props, ref) => {
351
345
  {
352
346
  ref: emailFieldRef,
353
347
  value: form.email,
354
- disabled: fieldStatus == null ? void 0 : fieldStatus.email.disabled
348
+ disabled: (fieldStatus == null ? void 0 : fieldStatus.email.disabled) || disabled
355
349
  }
356
350
  ) }) });
357
351
  };
@@ -364,7 +358,8 @@ const Pix = w((props, ref) => {
364
358
  {
365
359
  ref: addressFieldRef,
366
360
  value: form.address,
367
- onChange: (value) => setForm(Object.assign(form, { address: value }))
361
+ onChange: (value) => setForm(Object.assign(form, { address: value })),
362
+ disabled
368
363
  }
369
364
  ) }) });
370
365
  };
@@ -386,6 +381,7 @@ const Pix = w((props, ref) => {
386
381
  ref: SFPRef,
387
382
  core,
388
383
  i18n,
384
+ disabled,
389
385
  checkoutId: core.id,
390
386
  style: defaultInputStyleConfig,
391
387
  sessionMode: (_a = session.checkout) == null ? void 0 : _a.sessionMode,
@@ -398,7 +394,7 @@ const Pix = w((props, ref) => {
398
394
  var _a2, _b;
399
395
  return (_b = (_a2 = core.config).onEvent) == null ? void 0 : _b.call(_a2, type, data);
400
396
  },
401
- children: /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(CPFField, { ref: cpfFieldRef, security }) })
397
+ children: /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(CPFField, { disabled, ref: cpfFieldRef, security }) })
402
398
  }
403
399
  ),
404
400
  Address(),
@@ -0,0 +1,185 @@
1
+ import { w, F, A, h, y, u, b } from "../../../core.js";
2
+ import { useBEM } from "../../../hooks/useBEM.js";
3
+ import { CoreContext } from "../../../core/context.js";
4
+ import "../../../utils/card-brand/brands.js";
5
+ import "../../../utils/system-info/get-browser-info.js";
6
+ import { normalizedClass, formatAmount } from "../../../utils/format.js";
7
+ import { PaymentMethod, PaymentCategory, COMMON_CLASS_NAME } from "../../../constant.js";
8
+ import "../../../out/worldpay-jsc-origin.js";
9
+ import { usePayState } from "../../../hooks/usePayState.js";
10
+ import { useBaseWallet } from "../../../hooks/useBaseWallet.js";
11
+ import { createEmailCore, EmailField } from "../../EmailField/EmailField.js";
12
+ import "../../internal/Form/type.js";
13
+ import "../../internal/Form/context.js";
14
+ import "../../internal/Form/FormItem.js";
15
+ import { Form } from "../../internal/Form/Form.js";
16
+ import { DEFAULT_ADDRESS, AddressField } from "../../AddressField/index.js";
17
+ import { Info } from "../../internal/Info/Info.js";
18
+ import "./shopee-pay.js";
19
+ import { GuideCard } from "../../GuideCard/index.js";
20
+ import { PaymentButton } from "../../PaymentButton/index.js";
21
+ const { bem } = useBEM("shopee-pay");
22
+ const fieldClassNames = bem("field");
23
+ const CURR_PAYMENT_METHOD = PaymentMethod.SHOPEE_PAY;
24
+ const ShopeePay = w((props, ref) => {
25
+ const {
26
+ session,
27
+ core,
28
+ showGuideCard = true,
29
+ hidePaymentButton = false
30
+ } = props;
31
+ F(ref, () => ({
32
+ stopRetry: () => stopRetry(),
33
+ startRetry: (timeout) => startRetry(timeout),
34
+ updateAddress: () => {
35
+ var _a;
36
+ if (!(fieldStatus == null ? void 0 : fieldStatus.address.show))
37
+ return;
38
+ const address = addressCore.getAddressState();
39
+ form.address = address;
40
+ setForm(form);
41
+ (_a = addressFieldRef.current) == null ? void 0 : _a.update(address);
42
+ validateFormSilently();
43
+ },
44
+ updateEmail: () => {
45
+ var _a;
46
+ if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
47
+ return;
48
+ form.email = emailState.email;
49
+ setForm(form);
50
+ (_a = emailFieldRef.current) == null ? void 0 : _a.update(emailState.email);
51
+ validateFormSilently();
52
+ },
53
+ payment: () => {
54
+ hidePaymentButton && onSubmit();
55
+ }
56
+ }));
57
+ const {
58
+ isEnabled,
59
+ fieldStatus,
60
+ paymentButtonStatus,
61
+ setPaymentButtonStatus,
62
+ errorMessage,
63
+ setErrorMessage,
64
+ payment,
65
+ startRetry,
66
+ stopRetry,
67
+ getPaymentMethodContext
68
+ } = useBaseWallet(CURR_PAYMENT_METHOD, props, {
69
+ getFormData: () => {
70
+ return {
71
+ ...form
72
+ };
73
+ }
74
+ });
75
+ const addressCore = core.getAddressCore();
76
+ const emailState = createEmailCore();
77
+ const addressFieldRef = A(null);
78
+ const emailFieldRef = A(null);
79
+ const { i18n, sessionReady, disabled } = usePayState(session, props.core);
80
+ const formRef = A(null);
81
+ const [form, setForm] = h({
82
+ email: "",
83
+ address: { ...DEFAULT_ADDRESS }
84
+ });
85
+ const [validated, setValidated] = h(false);
86
+ y(() => {
87
+ if (!sessionReady)
88
+ return;
89
+ const { country, bill = {} } = (session == null ? void 0 : session.checkout) || {};
90
+ country && addressCore.setCountry(country);
91
+ form.email = bill.email ?? "";
92
+ form.address.country = country;
93
+ }, [sessionReady]);
94
+ const validateFormSilently = () => {
95
+ var _a;
96
+ (_a = formRef.current) == null ? void 0 : _a.validate(void 0, false).then(() => setValidated(true)).catch(() => setValidated(false));
97
+ };
98
+ y(() => {
99
+ validateFormSilently();
100
+ }, [form]);
101
+ const onSubmit = async () => {
102
+ var _a;
103
+ setErrorMessage("");
104
+ (_a = formRef.current) == null ? void 0 : _a.validate(async (errors) => {
105
+ var _a2;
106
+ (fieldStatus == null ? void 0 : fieldStatus.address.show) && addressCore.setValidateAllFields(true);
107
+ (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props, errors, getPaymentMethodContext());
108
+ if (errors) {
109
+ setPaymentButtonStatus("unSubmit");
110
+ return;
111
+ }
112
+ setPaymentButtonStatus("loading");
113
+ await payment();
114
+ });
115
+ };
116
+ const setFormRef = (dom) => {
117
+ formRef.current = dom;
118
+ dom && validateFormSilently();
119
+ };
120
+ const Button = () => {
121
+ var _a;
122
+ const transAmount = (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.transAmount;
123
+ const amountText = (transAmount == null ? void 0 : transAmount.amount) ? formatAmount(transAmount).jointSymbol() : "";
124
+ const text = i18n.get("common.pay") + (amountText ? ` ${amountText}` : "");
125
+ return /* @__PURE__ */ u(
126
+ PaymentButton,
127
+ {
128
+ className: bem("button"),
129
+ status: paymentButtonStatus,
130
+ disabled,
131
+ verified: validated,
132
+ onClick: onSubmit,
133
+ children: text
134
+ }
135
+ );
136
+ };
137
+ const Email = () => {
138
+ return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.email.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
139
+ EmailField,
140
+ {
141
+ ref: emailFieldRef,
142
+ value: form.email,
143
+ disabled: (fieldStatus == null ? void 0 : fieldStatus.email.disabled) || disabled
144
+ }
145
+ ) }) });
146
+ };
147
+ const ErrorMessage = () => {
148
+ return /* @__PURE__ */ u(b, { children: !!errorMessage && /* @__PURE__ */ u(Info, { content: errorMessage }) });
149
+ };
150
+ const Address = () => {
151
+ return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.address.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
152
+ AddressField,
153
+ {
154
+ ref: addressFieldRef,
155
+ value: form.address,
156
+ onChange: (value) => setForm(Object.assign(form, { address: value })),
157
+ disabled
158
+ }
159
+ ) }) });
160
+ };
161
+ return /* @__PURE__ */ u(
162
+ CoreContext.Provider,
163
+ {
164
+ value: {
165
+ i18n,
166
+ session,
167
+ core
168
+ },
169
+ children: isEnabled && i18n.ready.value && /* @__PURE__ */ u("div", { className: core.theme.className, children: [
170
+ showGuideCard && /* @__PURE__ */ u(GuideCard, { type: PaymentCategory.SHOPEE_PAY }),
171
+ /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), children: [
172
+ Email(),
173
+ Address(),
174
+ /* @__PURE__ */ u("div", { className: bem("footer-wrapper"), children: [
175
+ ErrorMessage(),
176
+ !hidePaymentButton && Button()
177
+ ] })
178
+ ] }) })
179
+ ] })
180
+ }
181
+ );
182
+ });
183
+ export {
184
+ ShopeePay
185
+ };
@@ -0,0 +1 @@
1
+ import "./ShopeePay.js";
@@ -29,7 +29,7 @@ import "../../business/BlikCodeField/blik-code-field.js";
29
29
  import "../../internal/Button/button2.js";
30
30
  import "../../business/BlikConfirmModal/blik-confirm-modal.js";
31
31
  import "../../internal/LoadingCheck/loading-check.js";
32
- import { AddressField } from "../../AddressField/index.js";
32
+ import { DEFAULT_ADDRESS, AddressField } from "../../AddressField/index.js";
33
33
  import { createEmailCore, EmailField } from "../../EmailField/EmailField.js";
34
34
  const { bem } = useBEM("skrill");
35
35
  const fieldClassNames = bem("field");
@@ -48,17 +48,18 @@ const Skrill = w((props, ref) => {
48
48
  var _a;
49
49
  if (!(fieldStatus == null ? void 0 : fieldStatus.address.show))
50
50
  return;
51
- const newForm = Object.assign(form, { address: addressCore.getAddressState() });
52
- setForm(newForm);
53
- (_a = addressFieldRef.current) == null ? void 0 : _a.update(addressCore.getAddressState());
51
+ const address = addressCore.getAddressState();
52
+ form.address = address;
53
+ setForm(form);
54
+ (_a = addressFieldRef.current) == null ? void 0 : _a.update(address);
54
55
  validateFormSilently();
55
56
  },
56
57
  updateEmail: () => {
57
58
  var _a;
58
59
  if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
59
60
  return;
60
- const newForm = Object.assign(form, { email: emailState.email });
61
- setForm(newForm);
61
+ form.email = emailState.email;
62
+ setForm(form);
62
63
  (_a = emailFieldRef.current) == null ? void 0 : _a.update(emailState.email);
63
64
  validateFormSilently();
64
65
  },
@@ -66,7 +67,7 @@ const Skrill = w((props, ref) => {
66
67
  hidePaymentButton && onSubmit();
67
68
  }
68
69
  }));
69
- const { i18n, sessionReady } = usePayState(session, props.core);
70
+ const { i18n, sessionReady, disabled } = usePayState(session, props.core);
70
71
  y(() => {
71
72
  if (!sessionReady)
72
73
  return;
@@ -101,9 +102,7 @@ const Skrill = w((props, ref) => {
101
102
  const emailFieldRef = A(null);
102
103
  const formRef = A(null);
103
104
  const [form, setForm] = h({
104
- address: {
105
- country: void 0
106
- },
105
+ address: { ...DEFAULT_ADDRESS },
107
106
  name: "",
108
107
  email: ""
109
108
  });
@@ -117,13 +116,28 @@ const Skrill = w((props, ref) => {
117
116
  dom && validateFormSilently();
118
117
  };
119
118
  y(() => validateFormSilently(), [form]);
119
+ const onSubmit = () => {
120
+ var _a;
121
+ setErrorMessage("");
122
+ (_a = formRef.current) == null ? void 0 : _a.validate(async (errors) => {
123
+ var _a2;
124
+ (fieldStatus == null ? void 0 : fieldStatus.address.show) && addressCore.setValidateAllFields(true);
125
+ (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props, errors, getPaymentMethodContext());
126
+ if (errors) {
127
+ setPaymentButtonStatus("unSubmit");
128
+ return;
129
+ }
130
+ setPaymentButtonStatus("loading");
131
+ await payment();
132
+ });
133
+ };
120
134
  const Email = () => {
121
135
  return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.email.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
122
136
  EmailField,
123
137
  {
124
138
  ref: emailFieldRef,
125
139
  value: form.email,
126
- disabled: fieldStatus == null ? void 0 : fieldStatus.email.disabled
140
+ disabled: (fieldStatus == null ? void 0 : fieldStatus.email.disabled) || disabled
127
141
  }
128
142
  ) }) });
129
143
  };
@@ -133,24 +147,11 @@ const Skrill = w((props, ref) => {
133
147
  {
134
148
  ref: addressFieldRef,
135
149
  value: form.address,
150
+ disabled,
136
151
  onChange: (value) => setForm(Object.assign(form, { address: value }))
137
152
  }
138
153
  ) }) });
139
154
  };
140
- const onSubmit = () => {
141
- var _a;
142
- setErrorMessage("");
143
- (_a = formRef.current) == null ? void 0 : _a.validate(async (errors) => {
144
- var _a2;
145
- (_a2 = props.onSubmit) == null ? void 0 : _a2.call(props, errors, getPaymentMethodContext());
146
- if (errors) {
147
- setPaymentButtonStatus("unSubmit");
148
- return;
149
- }
150
- setPaymentButtonStatus("loading");
151
- await payment();
152
- });
153
- };
154
155
  const Button = () => {
155
156
  var _a;
156
157
  const transAmount = (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.transAmount;
@@ -161,6 +162,7 @@ const Skrill = w((props, ref) => {
161
162
  {
162
163
  className: bem("button"),
163
164
  status: paymentButtonStatus,
165
+ disabled,
164
166
  verified: validated,
165
167
  onClick: onSubmit,
166
168
  children: text
@@ -182,7 +184,7 @@ const Skrill = w((props, ref) => {
182
184
  showGuideCard && /* @__PURE__ */ u(GuideCard, { type: PaymentCategory.SKRILL }),
183
185
  /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), children: [
184
186
  Email(),
185
- /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(NameField, {}) }),
187
+ /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(NameField, { disabled }) }),
186
188
  Address(),
187
189
  /* @__PURE__ */ u("div", { className: bem("footer-wrapper"), children: [
188
190
  ErrorMessage(),