@blocklet/payment-react 1.18.42 → 1.18.44

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 (7) hide show
  1. package/es/payment/form/address.js +5 -6
  2. package/es/payment/form/index.js +14 -29
  3. package/lib/payment/form/address.js +8 -11
  4. package/lib/payment/form/index.js +17 -29
  5. package/package.json +9 -9
  6. package/src/payment/form/address.tsx +1 -2
  7. package/src/payment/form/index.tsx +17 -31
package/es/payment/form/address.js CHANGED
@@ -99,9 +99,9 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
99
99
  ] }) }) });
100
100
  }
101
101
  if (stripe) {
102
- return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-address cko-payment-form", sx, children: [
103
- /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t(`payment.checkout.billing.${mode}`) }),
104
- /* @__PURE__ */ jsx(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0, children: /* @__PURE__ */ jsx(
102
+ return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsx(Stack, { className: "cko-payment-address cko-payment-form", sx, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
103
+ /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.postal_code") }),
104
+ /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0, children: /* @__PURE__ */ jsx(
105
105
  FormInput,
106
106
  {
107
107
  name: "billing_address.postal_code",
@@ -116,7 +116,6 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
116
116
  errorPosition,
117
117
  variant: "outlined",
118
118
  placeholder: t("payment.checkout.billing.postal_code"),
119
- wrapperStyle: { height: "40px" },
120
119
  InputProps: {
121
120
  startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", style: { marginRight: "2px", marginLeft: "-8px" }, children: /* @__PURE__ */ jsx(
122
121
  Controller,
@@ -138,8 +137,8 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
138
137
  ) })
139
138
  }
140
139
  }
141
- ) }) })
142
- ] }) });
140
+ ) })
141
+ ] }) }) });
143
142
  }
144
143
  return null;
145
144
  }
package/es/payment/form/index.js CHANGED
@@ -61,7 +61,7 @@ export const hasDidWallet = (user) => {
61
61
  return connected.some((x) => x.provider === "wallet");
62
62
  };
63
63
  const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
64
- const { preferExisting = true } = options;
64
+ const { preferExisting = true, shouldValidate = false } = options;
65
65
  const basicFields = {
66
66
  customer_name: userInfo.name || userInfo.fullName,
67
67
  customer_email: userInfo.email,
@@ -81,7 +81,7 @@ const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
81
81
  const allFields = { ...addressFields, ...basicFields };
82
82
  Object.entries(allFields).forEach(([field, value]) => {
83
83
  if (!preferExisting || !currentValues[field.split(".")[0]]) {
84
- setValue(field, value);
84
+ setValue(field, value, { shouldValidate });
85
85
  }
86
86
  });
87
87
  };
@@ -112,7 +112,8 @@ export default function PaymentForm({
112
112
  getValues,
113
113
  setValue,
114
114
  handleSubmit,
115
- formState: { errors }
115
+ formState: { errors },
116
+ trigger
116
117
  } = useFormContext();
117
118
  const errorRef = useRef(null);
118
119
  const quantityInventoryStatus = useMemo(() => {
@@ -150,8 +151,8 @@ export default function PaymentForm({
150
151
  const mergeUserInfo = (customerInfo, userInfo) => {
151
152
  return {
152
153
  ...userInfo || {},
153
- name: customerInfo?.name || userInfo?.name || userInfo?.fullName,
154
- fullName: customerInfo?.name || userInfo?.fullName,
154
+ name: customerInfo?.name || customerInfo?.fullName || userInfo?.name || userInfo?.fullName,
155
+ fullName: customerInfo?.name || customerInfo?.fullName || userInfo?.name || userInfo?.fullName,
155
156
  email: customerInfo?.email || userInfo?.email,
156
157
  phone: customerInfo?.phone || userInfo?.phone,
157
158
  address: {
@@ -209,20 +210,15 @@ export default function PaymentForm({
209
210
  );
210
211
  }
211
212
  };
213
+ if (state.submitting) {
214
+ return;
215
+ }
212
216
  initUserInfo();
213
217
  }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
214
218
  const paymentMethod = useWatch({ control, name: "payment_method" });
215
219
  const paymentCurrencyId = useWatch({ control, name: "payment_currency" });
216
220
  const afterUserLoggedIn = useMemoizedFn(() => {
217
- if (hasDidWallet(session.user) || skipBindWallet) {
218
- handleSubmit(onFormSubmit, onFormError)();
219
- } else {
220
- session.bindWallet(() => {
221
- setTimeout(() => {
222
- handleSubmit(onFormSubmit, onFormError)();
223
- }, 2e3);
224
- });
225
- }
221
+ handleSubmit(onFormSubmit, onFormError)();
226
222
  });
227
223
  const payee = getStatementDescriptor(checkoutSession.line_items);
228
224
  let buttonText = "";
@@ -241,7 +237,6 @@ export default function PaymentForm({
241
237
  const showStake = method.type === "arcblock" && !checkoutSession.subscription_data?.no_stake;
242
238
  const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
243
239
  const showForm = !!session?.user;
244
- const skipBindWallet = method.type === "stripe";
245
240
  const handleConnected = async () => {
246
241
  setState({ paying: true });
247
242
  try {
@@ -268,8 +263,10 @@ export default function PaymentForm({
268
263
  const userInfo = mergeUserInfo(profile, session?.user);
269
264
  setUserFormValues(userInfo, values, setValue, {
270
265
  preferExisting: false,
271
- showPhone: checkoutSession.phone_number_collection?.enabled
266
+ showPhone: checkoutSession.phone_number_collection?.enabled,
267
+ shouldValidate: true
272
268
  });
269
+ await trigger();
273
270
  }
274
271
  };
275
272
  const handleFastCheckoutConfirm = async () => {
@@ -414,19 +411,7 @@ export default function PaymentForm({
414
411
  errorRef.current.scrollIntoView({ behavior: "smooth" });
415
412
  }
416
413
  if (session?.user) {
417
- if (skipBindWallet) {
418
- handleSubmit(onFormSubmit, onFormError)();
419
- return;
420
- }
421
- if (hasDidWallet(session.user)) {
422
- handleSubmit(onFormSubmit, onFormError)();
423
- return;
424
- }
425
- session.bindWallet(() => {
426
- setTimeout(() => {
427
- handleSubmit(onFormSubmit, onFormError)();
428
- }, 2e3);
429
- });
414
+ handleSubmit(onFormSubmit, onFormError)();
430
415
  } else {
431
416
  if (isDonationMode) {
432
417
  handleSubmit(onFormSubmit, onFormError)();
package/lib/payment/form/address.js CHANGED
@@ -128,17 +128,17 @@ function AddressForm({
128
128
  if (stripe) {
129
129
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
130
130
  in: true,
131
- children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
131
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
132
132
  className: "cko-payment-address cko-payment-form",
133
133
  sx,
134
- children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
135
- className: "base-label",
136
- children: t(`payment.checkout.billing.${mode}`)
137
- }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
134
+ children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
138
135
  direction: "column",
139
136
  className: "cko-payment-form",
140
137
  spacing: 0,
141
- children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
138
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
139
+ className: "base-label",
140
+ children: t("payment.checkout.billing.postal_code")
141
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
142
142
  direction: "row",
143
143
  spacing: 0,
144
144
  children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -154,9 +154,6 @@ function AddressForm({
154
154
  errorPosition,
155
155
  variant: "outlined",
156
156
  placeholder: t("payment.checkout.billing.postal_code"),
157
- wrapperStyle: {
158
- height: "40px"
159
- },
160
157
  InputProps: {
161
158
  startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
162
159
  position: "start",
@@ -181,8 +178,8 @@ function AddressForm({
181
178
  })
182
179
  }
183
180
  })
184
- })
185
- })]
181
+ })]
182
+ })
186
183
  })
187
184
  });
188
185
  }
package/lib/payment/form/index.js CHANGED
@@ -66,7 +66,8 @@ const hasDidWallet = user => {
66
66
  exports.hasDidWallet = hasDidWallet;
67
67
  const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
68
68
  const {
69
- preferExisting = true
69
+ preferExisting = true,
70
+ shouldValidate = false
70
71
  } = options;
71
72
  const basicFields = {
72
73
  customer_name: userInfo.name || userInfo.fullName,
@@ -90,7 +91,9 @@ const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
90
91
  };
91
92
  Object.entries(allFields).forEach(([field, value]) => {
92
93
  if (!preferExisting || !currentValues[field.split(".")[0]]) {
93
- setValue(field, value);
94
+ setValue(field, value, {
95
+ shouldValidate
96
+ });
94
97
  }
95
98
  });
96
99
  };
@@ -132,7 +135,8 @@ function PaymentForm({
132
135
  handleSubmit,
133
136
  formState: {
134
137
  errors
135
- }
138
+ },
139
+ trigger
136
140
  } = (0, _reactHookForm.useFormContext)();
137
141
  const errorRef = (0, _react.useRef)(null);
138
142
  const quantityInventoryStatus = (0, _react.useMemo)(() => {
@@ -172,8 +176,8 @@ function PaymentForm({
172
176
  const mergeUserInfo = (customerInfo, userInfo) => {
173
177
  return {
174
178
  ...(userInfo || {}),
175
- name: customerInfo?.name || userInfo?.name || userInfo?.fullName,
176
- fullName: customerInfo?.name || userInfo?.fullName,
179
+ name: customerInfo?.name || customerInfo?.fullName || userInfo?.name || userInfo?.fullName,
180
+ fullName: customerInfo?.name || customerInfo?.fullName || userInfo?.name || userInfo?.fullName,
177
181
  email: customerInfo?.email || userInfo?.email,
178
182
  phone: customerInfo?.phone || userInfo?.phone,
179
183
  address: {
@@ -231,6 +235,9 @@ function PaymentForm({
231
235
  });
232
236
  }
233
237
  };
238
+ if (state.submitting) {
239
+ return;
240
+ }
234
241
  initUserInfo();
235
242
  }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
236
243
  const paymentMethod = (0, _reactHookForm.useWatch)({
@@ -242,15 +249,7 @@ function PaymentForm({
242
249
  name: "payment_currency"
243
250
  });
244
251
  const afterUserLoggedIn = (0, _ahooks.useMemoizedFn)(() => {
245
- if (hasDidWallet(session.user) || skipBindWallet) {
246
- handleSubmit(onFormSubmit, onFormError)();
247
- } else {
248
- session.bindWallet(() => {
249
- setTimeout(() => {
250
- handleSubmit(onFormSubmit, onFormError)();
251
- }, 2e3);
252
- });
253
- }
252
+ handleSubmit(onFormSubmit, onFormError)();
254
253
  });
255
254
  const payee = (0, _util2.getStatementDescriptor)(checkoutSession.line_items);
256
255
  let buttonText = "";
@@ -271,7 +270,6 @@ function PaymentForm({
271
270
  const showStake = method.type === "arcblock" && !checkoutSession.subscription_data?.no_stake;
272
271
  const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
273
272
  const showForm = !!session?.user;
274
- const skipBindWallet = method.type === "stripe";
275
273
  const handleConnected = async () => {
276
274
  setState({
277
275
  paying: true
@@ -309,8 +307,10 @@ function PaymentForm({
309
307
  const userInfo = mergeUserInfo(profile, session?.user);
310
308
  setUserFormValues(userInfo, values, setValue, {
311
309
  preferExisting: false,
312
- showPhone: checkoutSession.phone_number_collection?.enabled
310
+ showPhone: checkoutSession.phone_number_collection?.enabled,
311
+ shouldValidate: true
313
312
  });
313
+ await trigger();
314
314
  }
315
315
  };
316
316
  const handleFastCheckoutConfirm = async () => {
@@ -483,19 +483,7 @@ function PaymentForm({
483
483
  });
484
484
  }
485
485
  if (session?.user) {
486
- if (skipBindWallet) {
487
- handleSubmit(onFormSubmit, onFormError)();
488
- return;
489
- }
490
- if (hasDidWallet(session.user)) {
491
- handleSubmit(onFormSubmit, onFormError)();
492
- return;
493
- }
494
- session.bindWallet(() => {
495
- setTimeout(() => {
496
- handleSubmit(onFormSubmit, onFormError)();
497
- }, 2e3);
498
- });
486
+ handleSubmit(onFormSubmit, onFormError)();
499
487
  } else {
500
488
  if (isDonationMode) {
501
489
  handleSubmit(onFormSubmit, onFormError)();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/payment-react",
3
- "version": "1.18.42",
3
+ "version": "1.18.44",
4
4
  "description": "Reusable react components for payment kit v2",
5
5
  "keywords": [
6
6
  "react",
@@ -54,16 +54,16 @@
54
54
  }
55
55
  },
56
56
  "dependencies": {
57
- "@arcblock/did-connect": "^2.13.29",
58
- "@arcblock/ux": "^2.13.29",
59
- "@arcblock/ws": "^1.20.8",
60
- "@blocklet/theme": "^2.13.29",
61
- "@blocklet/ui-react": "^2.13.29",
57
+ "@arcblock/did-connect": "^2.13.36",
58
+ "@arcblock/ux": "^2.13.36",
59
+ "@arcblock/ws": "^1.20.11",
60
+ "@blocklet/theme": "^2.13.36",
61
+ "@blocklet/ui-react": "^2.13.36",
62
62
  "@mui/icons-material": "^5.16.6",
63
63
  "@mui/lab": "^5.0.0-alpha.173",
64
64
  "@mui/material": "^5.16.6",
65
65
  "@mui/system": "^5.16.6",
66
- "@ocap/util": "^1.20.8",
66
+ "@ocap/util": "^1.20.11",
67
67
  "@stripe/react-stripe-js": "^2.7.3",
68
68
  "@stripe/stripe-js": "^2.4.0",
69
69
  "@vitejs/plugin-legacy": "^5.4.1",
@@ -94,7 +94,7 @@
94
94
  "@babel/core": "^7.25.2",
95
95
  "@babel/preset-env": "^7.25.2",
96
96
  "@babel/preset-react": "^7.24.7",
97
- "@blocklet/payment-types": "1.18.42",
97
+ "@blocklet/payment-types": "1.18.44",
98
98
  "@storybook/addon-essentials": "^7.6.20",
99
99
  "@storybook/addon-interactions": "^7.6.20",
100
100
  "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
125
125
  "vite-plugin-babel": "^1.2.0",
126
126
  "vite-plugin-node-polyfills": "^0.21.0"
127
127
  },
128
- "gitHead": "030db016706e5d8fa6b591aa28f32d5c63ad751e"
128
+ "gitHead": "88004667b15d54fd198448255fda732cedfda970"
129
129
  }
package/src/payment/form/address.tsx CHANGED
@@ -107,8 +107,8 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
107
107
  return (
108
108
  <Fade in>
109
109
  <Stack className="cko-payment-address cko-payment-form" sx={sx}>
110
- <FormLabel className="base-label">{t(`payment.checkout.billing.${mode}`)}</FormLabel>
111
110
  <Stack direction="column" className="cko-payment-form" spacing={0}>
111
+ <FormLabel className="base-label">{t('payment.checkout.billing.postal_code')}</FormLabel>
112
112
  <Stack direction="row" spacing={0}>
113
113
  <FormInput
114
114
  name="billing_address.postal_code"
@@ -123,7 +123,6 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
123
123
  errorPosition={errorPosition}
124
124
  variant="outlined"
125
125
  placeholder={t('payment.checkout.billing.postal_code')}
126
- wrapperStyle={{ height: '40px' }}
127
126
  InputProps={{
128
127
  startAdornment: (
129
128
  <InputAdornment position="start" style={{ marginRight: '2px', marginLeft: '-8px' }}>
package/src/payment/form/index.tsx CHANGED
@@ -119,9 +119,9 @@ const setUserFormValues = (
119
119
  userInfo: UserInfo,
120
120
  currentValues: any,
121
121
  setValue: Function,
122
- options: { preferExisting?: boolean; showPhone?: boolean } = {}
122
+ options: { preferExisting?: boolean; showPhone?: boolean; shouldValidate?: boolean } = {}
123
123
  ) => {
124
- const { preferExisting = true } = options;
124
+ const { preferExisting = true, shouldValidate = false } = options;
125
125
  const basicFields = {
126
126
  customer_name: userInfo.name || userInfo.fullName,
127
127
  customer_email: userInfo.email,
@@ -144,7 +144,7 @@ const setUserFormValues = (
144
144
 
145
145
  Object.entries(allFields).forEach(([field, value]) => {
146
146
  if (!preferExisting || !currentValues[field.split('.')[0]]) {
147
- setValue(field, value);
147
+ setValue(field, value, { shouldValidate });
148
148
  }
149
149
  });
150
150
  };
@@ -184,6 +184,7 @@ export default function PaymentForm({
184
184
  setValue,
185
185
  handleSubmit,
186
186
  formState: { errors },
187
+ trigger,
187
188
  } = useFormContext();
188
189
  const errorRef = useRef<HTMLDivElement | null>(null);
189
190
  const quantityInventoryStatus = useMemo(() => {
@@ -236,11 +237,14 @@ export default function PaymentForm({
236
237
  }
237
238
  }, [subscription]); // eslint-disable-line react-hooks/exhaustive-deps
238
239
 
239
- const mergeUserInfo = (customerInfo: TCustomer, userInfo?: UserInfo): UserInfo => {
240
+ const mergeUserInfo = (
241
+ customerInfo: UserInfo | (TCustomer & { fullName?: string }),
242
+ userInfo?: UserInfo
243
+ ): UserInfo => {
240
244
  return {
241
245
  ...(userInfo || {}),
242
- name: customerInfo?.name || userInfo?.name || userInfo?.fullName,
243
- fullName: customerInfo?.name || userInfo?.fullName,
246
+ name: customerInfo?.name || customerInfo?.fullName || userInfo?.name || userInfo?.fullName,
247
+ fullName: customerInfo?.name || customerInfo?.fullName || userInfo?.name || userInfo?.fullName,
244
248
  email: customerInfo?.email || userInfo?.email,
245
249
  phone: customerInfo?.phone || userInfo?.phone,
246
250
  address: {
@@ -300,6 +304,9 @@ export default function PaymentForm({
300
304
  );
301
305
  }
302
306
  };
307
+ if (state.submitting) {
308
+ return;
309
+ }
303
310
  initUserInfo();
304
311
  // eslint-disable-next-line react-hooks/exhaustive-deps
305
312
  }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
@@ -319,16 +326,7 @@ export default function PaymentForm({
319
326
  // }, [domSize, theme]);
320
327
 
321
328
  const afterUserLoggedIn = useMemoizedFn(() => {
322
- if (hasDidWallet(session.user) || skipBindWallet) {
323
- handleSubmit(onFormSubmit, onFormError)();
324
- } else {
325
- session.bindWallet(() => {
326
- // timeout required because https://github.com/ArcBlock/ux/issues/1241
327
- setTimeout(() => {
328
- handleSubmit(onFormSubmit, onFormError)();
329
- }, 2000);
330
- });
331
- }
329
+ handleSubmit(onFormSubmit, onFormError)();
332
330
  });
333
331
 
334
332
  const payee = getStatementDescriptor(checkoutSession.line_items);
@@ -350,7 +348,6 @@ export default function PaymentForm({
350
348
 
351
349
  const isDonationMode = checkoutSession?.submit_type === 'donate' && isDonation;
352
350
  const showForm = !!session?.user;
353
- const skipBindWallet = method.type === 'stripe';
354
351
 
355
352
  const handleConnected = async () => {
356
353
  setState({ paying: true });
@@ -381,7 +378,9 @@ export default function PaymentForm({
381
378
  setUserFormValues(userInfo, values, setValue, {
382
379
  preferExisting: false,
383
380
  showPhone: checkoutSession.phone_number_collection?.enabled,
381
+ shouldValidate: true,
384
382
  });
383
+ await trigger();
385
384
  }
386
385
  };
387
386
 
@@ -539,20 +538,7 @@ export default function PaymentForm({
539
538
  errorRef.current.scrollIntoView({ behavior: 'smooth' });
540
539
  }
541
540
  if (session?.user) {
542
- if (skipBindWallet) {
543
- handleSubmit(onFormSubmit, onFormError)();
544
- return;
545
- }
546
- if (hasDidWallet(session.user)) {
547
- handleSubmit(onFormSubmit, onFormError)();
548
- return;
549
- }
550
- session.bindWallet(() => {
551
- // timeout required because https://github.com/ArcBlock/ux/issues/1241
552
- setTimeout(() => {
553
- handleSubmit(onFormSubmit, onFormError)();
554
- }, 2000);
555
- });
541
+ handleSubmit(onFormSubmit, onFormError)();
556
542
  } else {
557
543
  if (isDonationMode) {
558
544
  handleSubmit(onFormSubmit, onFormError)();