@blocklet/payment-react 1.19.4 → 1.19.6

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 (15) hide show
  1. package/es/components/blockchain/tx.d.ts +2 -1
  2. package/es/components/blockchain/tx.js +4 -3
  3. package/es/payment/form/index.js +2 -4
  4. package/es/payment/product-item.js +3 -3
  5. package/es/theme/index.js +0 -1
  6. package/lib/components/blockchain/tx.d.ts +2 -1
  7. package/lib/components/blockchain/tx.js +8 -2
  8. package/lib/payment/form/index.js +2 -10
  9. package/lib/payment/product-item.js +2 -5
  10. package/lib/theme/index.js +0 -1
  11. package/package.json +9 -9
  12. package/src/components/blockchain/tx.tsx +4 -2
  13. package/src/payment/form/index.tsx +2 -5
  14. package/src/payment/product-item.tsx +5 -3
  15. package/src/theme/index.tsx +0 -1
package/es/components/blockchain/tx.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import type { PaymentDetails, TPaymentMethod } from '@blocklet/payment-types';
2
- export default function TxLink({ details, method, mode, align, }: {
2
+ export default function TxLink({ details, method, mode, align, size, }: {
3
3
  details: PaymentDetails;
4
4
  method: TPaymentMethod;
5
5
  mode?: 'customer' | 'dashboard';
6
6
  align?: 'left' | 'right';
7
+ size?: number;
7
8
  }): import("react").JSX.Element;
package/es/components/blockchain/tx.js CHANGED
@@ -8,7 +8,8 @@ export default function TxLink({
8
8
  details,
9
9
  method,
10
10
  mode = "dashboard",
11
- align = "left"
11
+ align = "left",
12
+ size = 20
12
13
  }) {
13
14
  const { t } = useLocaleContext();
14
15
  if (!details || mode === "customer" && method.type === "stripe") {
@@ -34,8 +35,8 @@ export default function TxLink({
34
35
  sx: { color: "text.link" },
35
36
  spacing: 1,
36
37
  children: [
37
- /* @__PURE__ */ jsx(Typography, { component: "span", sx: { color: "text.link" }, children: text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join("...") : text }),
38
- /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small" })
38
+ /* @__PURE__ */ jsx(Typography, { className: "tx-link-text", component: "span", sx: { color: "text.link" }, children: text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join("...") : text }),
39
+ /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small", sx: { width: size, height: size } })
39
40
  ]
40
41
  }
41
42
  ) });
package/es/payment/form/index.js CHANGED
@@ -215,8 +215,6 @@ export default function PaymentForm({
215
215
  }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
216
216
  const paymentMethod = useWatch({ control, name: "payment_method" });
217
217
  const paymentCurrencyId = useWatch({ control, name: "payment_currency" });
218
- const customerName = useWatch({ control, name: "customer_name" });
219
- const customerEmail = useWatch({ control, name: "customer_email" });
220
218
  const afterUserLoggedIn = useMemoizedFn(() => {
221
219
  handleSubmit(onFormSubmit, onFormError)();
222
220
  });
@@ -250,11 +248,11 @@ export default function PaymentForm({
250
248
  if (mode === "required") {
251
249
  return true;
252
250
  }
253
- if (customerName && customerEmail) {
251
+ if (session?.user?.fullName && session?.user?.email) {
254
252
  return false;
255
253
  }
256
254
  return true;
257
- }, [session?.user, method, checkoutSession, customerName, customerEmail]);
255
+ }, [session?.user, method, checkoutSession]);
258
256
  const handleConnected = async () => {
259
257
  setState({ paying: true });
260
258
  try {
package/es/payment/product-item.js CHANGED
@@ -8,6 +8,7 @@ import Switch from "../components/switch-button.js";
8
8
  import {
9
9
  findCurrency,
10
10
  formatLineItemPricing,
11
+ formatNumber,
11
12
  formatPrice,
12
13
  formatQuantityInventory,
13
14
  formatRecurring,
@@ -46,7 +47,7 @@ export default function ProductItem({
46
47
  const canAdjustQuantity = adjustableQuantity.enabled && mode === "normal";
47
48
  const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
48
49
  const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
49
- const maxQuantity = Math.min(adjustableQuantity.maximum || 999, quantityAvailable || 999);
50
+ const maxQuantity = quantityAvailable ? Math.min(adjustableQuantity.maximum || Infinity, quantityAvailable) : adjustableQuantity.maximum || Infinity;
50
51
  const handleQuantityChange = (newQuantity) => {
51
52
  if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
52
53
  setLocalQuantity(newQuantity);
@@ -75,7 +76,7 @@ export default function ProductItem({
75
76
  const formatCreditInfo = () => {
76
77
  if (!isCreditProduct) return null;
77
78
  const isRecurring = item.price.type === "recurring";
78
- const totalCredit = creditAmount * localQuantity;
79
+ const totalCredit = formatNumber(creditAmount * localQuantity);
79
80
  let message = "";
80
81
  if (isRecurring) {
81
82
  message = t("payment.checkout.credit.recurringInfo", {
@@ -225,7 +226,6 @@ export default function ProductItem({
225
226
  size: "small",
226
227
  value: localQuantity,
227
228
  onChange: handleQuantityInputChange,
228
- sx: { width: 60 },
229
229
  type: "number",
230
230
  slotProps: {
231
231
  htmlInput: {
package/es/theme/index.js CHANGED
@@ -195,7 +195,6 @@ export function PaymentThemeProvider({
195
195
  MuiRadio: {
196
196
  styleOverrides: {
197
197
  root: {
198
- color: palette.grey[200],
199
198
  "&:hover": {
200
199
  background: "none"
201
200
  },
package/lib/components/blockchain/tx.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import type { PaymentDetails, TPaymentMethod } from '@blocklet/payment-types';
2
- export default function TxLink({ details, method, mode, align, }: {
2
+ export default function TxLink({ details, method, mode, align, size, }: {
3
3
  details: PaymentDetails;
4
4
  method: TPaymentMethod;
5
5
  mode?: 'customer' | 'dashboard';
6
6
  align?: 'left' | 'right';
7
+ size?: number;
7
8
  }): import("react").JSX.Element;
package/lib/components/blockchain/tx.js CHANGED
@@ -14,7 +14,8 @@ function TxLink({
14
14
  details,
15
15
  method,
16
16
  mode = "dashboard",
17
- align = "left"
17
+ align = "left",
18
+ size = 20
18
19
  }) {
19
20
  const {
20
21
  t
@@ -46,13 +47,18 @@ function TxLink({
46
47
  },
47
48
  spacing: 1,
48
49
  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
50
+ className: "tx-link-text",
49
51
  component: "span",
50
52
  sx: {
51
53
  color: "text.link"
52
54
  },
53
55
  children: text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join("...") : text
54
56
  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNewOutlined, {
55
- fontSize: "small"
57
+ fontSize: "small",
58
+ sx: {
59
+ width: size,
60
+ height: size
61
+ }
56
62
  })]
57
63
  })
58
64
  });
package/lib/payment/form/index.js CHANGED
@@ -246,14 +246,6 @@ function PaymentForm({
246
246
  control,
247
247
  name: "payment_currency"
248
248
  });
249
- const customerName = (0, _reactHookForm.useWatch)({
250
- control,
251
- name: "customer_name"
252
- });
253
- const customerEmail = (0, _reactHookForm.useWatch)({
254
- control,
255
- name: "customer_email"
256
- });
257
249
  const afterUserLoggedIn = (0, _ahooks.useMemoizedFn)(() => {
258
250
  handleSubmit(onFormSubmit, onFormError)();
259
251
  });
@@ -289,11 +281,11 @@ function PaymentForm({
289
281
  if (mode === "required") {
290
282
  return true;
291
283
  }
292
- if (customerName && customerEmail) {
284
+ if (session?.user?.fullName && session?.user?.email) {
293
285
  return false;
294
286
  }
295
287
  return true;
296
- }, [session?.user, method, checkoutSession, customerName, customerEmail]);
288
+ }, [session?.user, method, checkoutSession]);
297
289
  const handleConnected = async () => {
298
290
  setState({
299
291
  paying: true
package/lib/payment/product-item.js CHANGED
@@ -55,7 +55,7 @@ function ProductItem({
55
55
  const canAdjustQuantity = adjustableQuantity.enabled && mode === "normal";
56
56
  const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
57
57
  const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
58
- const maxQuantity = Math.min(adjustableQuantity.maximum || 999, quantityAvailable || 999);
58
+ const maxQuantity = quantityAvailable ? Math.min(adjustableQuantity.maximum || Infinity, quantityAvailable) : adjustableQuantity.maximum || Infinity;
59
59
  const handleQuantityChange = newQuantity => {
60
60
  if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
61
61
  setLocalQuantity(newQuantity);
@@ -84,7 +84,7 @@ function ProductItem({
84
84
  const formatCreditInfo = () => {
85
85
  if (!isCreditProduct) return null;
86
86
  const isRecurring = item.price.type === "recurring";
87
- const totalCredit = creditAmount * localQuantity;
87
+ const totalCredit = (0, _util.formatNumber)(creditAmount * localQuantity);
88
88
  let message = "";
89
89
  if (isRecurring) {
90
90
  message = t("payment.checkout.credit.recurringInfo", {
@@ -216,9 +216,6 @@ function ProductItem({
216
216
  size: "small",
217
217
  value: localQuantity,
218
218
  onChange: handleQuantityInputChange,
219
- sx: {
220
- width: 60
221
- },
222
219
  type: "number",
223
220
  slotProps: {
224
221
  htmlInput: {
package/lib/theme/index.js CHANGED
@@ -211,7 +211,6 @@ function PaymentThemeProvider({
211
211
  MuiRadio: {
212
212
  styleOverrides: {
213
213
  root: {
214
- color: palette.grey[200],
215
214
  "&:hover": {
216
215
  background: "none"
217
216
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/payment-react",
3
- "version": "1.19.4",
3
+ "version": "1.19.6",
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": "^3.0.24",
58
- "@arcblock/ux": "^3.0.24",
59
- "@arcblock/ws": "^1.20.15",
60
- "@blocklet/theme": "^3.0.24",
61
- "@blocklet/ui-react": "^3.0.24",
57
+ "@arcblock/did-connect": "^3.0.32",
58
+ "@arcblock/ux": "^3.0.32",
59
+ "@arcblock/ws": "^1.21.0",
60
+ "@blocklet/theme": "^3.0.32",
61
+ "@blocklet/ui-react": "^3.0.32",
62
62
  "@mui/icons-material": "^7.1.2",
63
63
  "@mui/lab": "7.0.0-beta.14",
64
64
  "@mui/material": "^7.1.2",
65
65
  "@mui/system": "^7.1.1",
66
- "@ocap/util": "^1.20.15",
66
+ "@ocap/util": "^1.21.0",
67
67
  "@stripe/react-stripe-js": "^2.9.0",
68
68
  "@stripe/stripe-js": "^2.4.0",
69
69
  "@vitejs/plugin-legacy": "^7.0.0",
@@ -94,7 +94,7 @@
94
94
  "@babel/core": "^7.27.4",
95
95
  "@babel/preset-env": "^7.27.2",
96
96
  "@babel/preset-react": "^7.27.1",
97
- "@blocklet/payment-types": "1.19.4",
97
+ "@blocklet/payment-types": "1.19.6",
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.3.1",
126
126
  "vite-plugin-node-polyfills": "^0.23.0"
127
127
  },
128
- "gitHead": "ced79cc9e205a344b6fdce2f43ac8d27bb37f5f4"
128
+ "gitHead": "d062db562d215b8ef5485b3f291d7e4f994093be"
129
129
  }
package/src/components/blockchain/tx.tsx CHANGED
@@ -11,11 +11,13 @@ export default function TxLink({
11
11
  method,
12
12
  mode = 'dashboard',
13
13
  align = 'left',
14
+ size = 20,
14
15
  }: {
15
16
  details: PaymentDetails;
16
17
  method: TPaymentMethod;
17
18
  mode?: 'customer' | 'dashboard';
18
19
  align?: 'left' | 'right';
20
+ size?: number;
19
21
  }) {
20
22
  const { t } = useLocaleContext();
21
23
 
@@ -42,10 +44,10 @@ export default function TxLink({
42
44
  justifyContent={align === 'left' ? 'flex-start' : 'flex-end'}
43
45
  sx={{ color: 'text.link' }}
44
46
  spacing={1}>
45
- <Typography component="span" sx={{ color: 'text.link' }}>
47
+ <Typography className="tx-link-text" component="span" sx={{ color: 'text.link' }}>
46
48
  {text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join('...') : text}
47
49
  </Typography>
48
- <OpenInNewOutlined fontSize="small" />
50
+ <OpenInNewOutlined fontSize="small" sx={{ width: size, height: size }} />
49
51
  </Root>
50
52
  </Link>
51
53
  );
package/src/payment/form/index.tsx CHANGED
@@ -315,9 +315,6 @@ export default function PaymentForm({
315
315
 
316
316
  const paymentMethod = useWatch({ control, name: 'payment_method' });
317
317
  const paymentCurrencyId = useWatch({ control, name: 'payment_currency' });
318
- const customerName = useWatch({ control, name: 'customer_name' });
319
- const customerEmail = useWatch({ control, name: 'customer_email' });
320
-
321
318
  // const domSize = useSize(document.body);
322
319
 
323
320
  // const isColumnLayout = useCreation(() => {
@@ -365,11 +362,11 @@ export default function PaymentForm({
365
362
  if (mode === 'required') {
366
363
  return true;
367
364
  }
368
- if (customerName && customerEmail) {
365
+ if (session?.user?.fullName && session?.user?.email) {
369
366
  return false;
370
367
  }
371
368
  return true;
372
- }, [session?.user, method, checkoutSession, customerName, customerEmail]);
369
+ }, [session?.user, method, checkoutSession]);
373
370
 
374
371
  const handleConnected = async () => {
375
372
  setState({ paying: true });
package/src/payment/product-item.tsx CHANGED
@@ -9,6 +9,7 @@ import Switch from '../components/switch-button';
9
9
  import {
10
10
  findCurrency,
11
11
  formatLineItemPricing,
12
+ formatNumber,
12
13
  formatPrice,
13
14
  formatQuantityInventory,
14
15
  formatRecurring,
@@ -71,7 +72,9 @@ export default function ProductItem({
71
72
  const canAdjustQuantity = adjustableQuantity.enabled && mode === 'normal';
72
73
  const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
73
74
  const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
74
- const maxQuantity = Math.min(adjustableQuantity.maximum || 999, quantityAvailable || 999);
75
+ const maxQuantity = quantityAvailable
76
+ ? Math.min(adjustableQuantity.maximum || Infinity, quantityAvailable)
77
+ : adjustableQuantity.maximum || Infinity;
75
78
 
76
79
  const handleQuantityChange = (newQuantity: number) => {
77
80
  if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
@@ -107,7 +110,7 @@ export default function ProductItem({
107
110
  if (!isCreditProduct) return null;
108
111
 
109
112
  const isRecurring = item.price.type === 'recurring';
110
- const totalCredit = creditAmount * localQuantity;
113
+ const totalCredit = formatNumber(creditAmount * localQuantity);
111
114
 
112
115
  let message = '';
113
116
  if (isRecurring) {
@@ -240,7 +243,6 @@ export default function ProductItem({
240
243
  size="small"
241
244
  value={localQuantity}
242
245
  onChange={handleQuantityInputChange}
243
- sx={{ width: 60 }}
244
246
  type="number"
245
247
  slotProps={{
246
248
  htmlInput: {
package/src/theme/index.tsx CHANGED
@@ -208,7 +208,6 @@ export function PaymentThemeProvider({
208
208
  MuiRadio: {
209
209
  styleOverrides: {
210
210
  root: {
211
- color: palette.grey[200],
212
211
  '&:hover': {
213
212
  background: 'none',
214
213
  },