@blocklet/payment-react 1.18.1 → 1.18.3

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 (16) hide show
  1. package/es/checkout/donate.js +17 -2
  2. package/es/payment/donation-form.js +2 -1
  3. package/es/payment/form/index.js +27 -14
  4. package/es/payment/product-donation.js +4 -0
  5. package/es/theme/index.js +10 -0
  6. package/lib/checkout/donate.js +15 -6
  7. package/lib/payment/donation-form.js +2 -1
  8. package/lib/payment/form/index.js +30 -11
  9. package/lib/payment/product-donation.js +4 -0
  10. package/lib/theme/index.js +10 -0
  11. package/package.json +8 -8
  12. package/src/checkout/donate.tsx +12 -2
  13. package/src/payment/donation-form.tsx +1 -0
  14. package/src/payment/form/index.tsx +25 -12
  15. package/src/payment/product-donation.tsx +4 -0
  16. package/src/theme/index.tsx +10 -0
package/es/checkout/donate.js CHANGED
@@ -239,6 +239,7 @@ function CheckoutDonateInner({
239
239
  const [anchorEl, setAnchorEl] = useState(null);
240
240
  const [popoverOpen, setPopoverOpen] = useState(false);
241
241
  const { isMobile } = useMobile();
242
+ const { connect } = usePaymentContext();
242
243
  const handlePaid = (...args) => {
243
244
  if (onPaid) {
244
245
  onPaid(...args);
@@ -437,8 +438,22 @@ function CheckoutDonateInner({
437
438
  livemode
438
439
  },
439
440
  formRender: {
440
- cancel: /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "large", onClick: () => setState({ open: false }), children: t("common.cancel") }),
441
- onCancel: () => setState({ open: false })
441
+ cancel: /* @__PURE__ */ jsx(
442
+ Button,
443
+ {
444
+ variant: "outlined",
445
+ size: "large",
446
+ onClick: () => {
447
+ connect.close();
448
+ setState({ open: false });
449
+ },
450
+ children: t("common.cancel")
451
+ }
452
+ ),
453
+ onCancel: () => {
454
+ connect.close();
455
+ setState({ open: false });
456
+ }
442
457
  }
443
458
  }
444
459
  ) })
package/es/payment/donation-form.js CHANGED
@@ -301,7 +301,8 @@ function PaymentInner({
301
301
  xs: 1,
302
302
  md: "auto"
303
303
  },
304
- justifyContent: "flex-end"
304
+ justifyContent: "flex-end",
305
+ whiteSpace: "nowrap"
305
306
  },
306
307
  children: [
307
308
  formRender?.cancel,
package/es/payment/form/index.js CHANGED
@@ -2,8 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
2
  import "react-international-phone/style.css";
3
3
  import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
4
4
  import Toast from "@arcblock/ux/lib/Toast";
5
- import { LoadingButton } from "@mui/lab";
6
- import { Box, Divider, Fade, FormLabel, Stack, Typography } from "@mui/material";
5
+ import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Typography } from "@mui/material";
7
6
  import { useMemoizedFn, useSetState } from "ahooks";
8
7
  import pWaitFor from "p-wait-for";
9
8
  import { useEffect, useMemo, useRef, useState } from "react";
@@ -321,18 +320,25 @@ export default function PaymentForm({
321
320
  };
322
321
  if (onlyShowBtn) {
323
322
  return /* @__PURE__ */ jsxs(Fragment, { children: [
324
- /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsx(
325
- LoadingButton,
323
+ /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsxs(
324
+ Button,
326
325
  {
327
326
  variant: "contained",
328
327
  color: "primary",
329
328
  size: "large",
330
329
  className: "cko-submit-button",
331
- onClick: onAction,
330
+ onClick: () => {
331
+ if (state.submitting || state.paying) {
332
+ return;
333
+ }
334
+ onAction();
335
+ },
332
336
  fullWidth: true,
333
- disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable,
334
- loading: state.submitting || state.paying,
335
- children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
337
+ disabled: state.stripePaying || !quantityInventoryStatus || !payable,
338
+ children: [
339
+ (state.submitting || state.paying) && /* @__PURE__ */ jsx(CircularProgress, { size: 16, sx: { mr: 0.5, color: "var(--foregrounds-fg-on-color, #fff)" } }),
340
+ state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
341
+ ]
336
342
  }
337
343
  ) }),
338
344
  state.customerLimited && /* @__PURE__ */ jsx(
@@ -468,18 +474,25 @@ export default function PaymentForm({
468
474
  ] }) }),
469
475
  /* @__PURE__ */ jsx(Divider, { sx: { mt: 2.5, mb: 2.5 } }),
470
476
  /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-submit", children: [
471
- /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsx(
472
- LoadingButton,
477
+ /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsxs(
478
+ Button,
473
479
  {
474
480
  variant: "contained",
475
481
  color: "primary",
476
482
  size: "large",
477
483
  className: "cko-submit-button",
478
- onClick: onAction,
484
+ onClick: () => {
485
+ if (state.submitting || state.paying) {
486
+ return;
487
+ }
488
+ onAction();
489
+ },
479
490
  fullWidth: true,
480
- disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable,
481
- loading: state.submitting || state.paying,
482
- children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
491
+ disabled: state.stripePaying || !quantityInventoryStatus || !payable,
492
+ children: [
493
+ (state.submitting || state.paying) && /* @__PURE__ */ jsx(CircularProgress, { size: 16, sx: { mr: 0.5, color: "var(--foregrounds-fg-on-color, #fff)" } }),
494
+ state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
495
+ ]
483
496
  }
484
497
  ) }),
485
498
  ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */ jsx(Typography, { sx: { mt: 2.5, color: "text.lighter", fontSize: "0.9rem", lineHeight: "1.1rem" }, children: t("payment.checkout.confirm", { payee }) })
package/es/payment/product-donation.js CHANGED
@@ -43,6 +43,7 @@ export default function ProductDonation({
43
43
  }
44
44
  }, [state.custom]);
45
45
  const handleSelect = (amount) => {
46
+ setPayable(true);
46
47
  setState({ selected: amount, custom: false, error: "" });
47
48
  onChange({ priceId: item.price_id, amount });
48
49
  };
@@ -67,6 +68,9 @@ export default function ProductDonation({
67
68
  };
68
69
  const handleCustomSelect = () => {
69
70
  setState({ custom: true, error: "" });
71
+ if (!state.input) {
72
+ setPayable(false);
73
+ }
70
74
  };
71
75
  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 1.5, children: [
72
76
  supportPreset && /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
package/es/theme/index.js CHANGED
@@ -114,6 +114,9 @@ export function PaymentThemeProvider({
114
114
  },
115
115
  MuiPopover: {
116
116
  styleOverrides: {
117
+ root: {
118
+ zIndex: 1200
119
+ },
117
120
  paper: ({ theme }) => ({
118
121
  border: `1px solid ${theme.palette.divider}`,
119
122
  boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
@@ -231,6 +234,13 @@ export function PaymentThemeProvider({
231
234
  }
232
235
  }
233
236
  }
237
+ },
238
+ MuiDialog: {
239
+ styleOverrides: {
240
+ root: {
241
+ zIndex: 1200
242
+ }
243
+ }
234
244
  }
235
245
  }
236
246
  };
package/lib/checkout/donate.js CHANGED
@@ -319,6 +319,9 @@ function CheckoutDonateInner({
319
319
  const {
320
320
  isMobile
321
321
  } = (0, _mobile.useMobile)();
322
+ const {
323
+ connect
324
+ } = (0, _payment.usePaymentContext)();
322
325
  const handlePaid = (...args) => {
323
326
  if (onPaid) {
324
327
  onPaid(...args);
@@ -559,14 +562,20 @@ function CheckoutDonateInner({
559
562
  cancel: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
560
563
  variant: "outlined",
561
564
  size: "large",
562
- onClick: () => setState({
563
- open: false
564
- }),
565
+ onClick: () => {
566
+ connect.close();
567
+ setState({
568
+ open: false
569
+ });
570
+ },
565
571
  children: t("common.cancel")
566
572
  }),
567
- onCancel: () => setState({
568
- open: false
569
- })
573
+ onCancel: () => {
574
+ connect.close();
575
+ setState({
576
+ open: false
577
+ });
578
+ }
570
579
  }
571
580
  })
572
581
  })
package/lib/payment/donation-form.js CHANGED
@@ -330,7 +330,8 @@ function PaymentInner({
330
330
  xs: 1,
331
331
  md: "auto"
332
332
  },
333
- justifyContent: "flex-end"
333
+ justifyContent: "flex-end",
334
+ whiteSpace: "nowrap"
334
335
  },
335
336
  children: [formRender?.cancel, /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
336
337
  currencyId,
package/lib/payment/form/index.js CHANGED
@@ -9,7 +9,6 @@ var _jsxRuntime = require("react/jsx-runtime");
9
9
  require("react-international-phone/style.css");
10
10
  var _context = require("@arcblock/ux/lib/Locale/context");
11
11
  var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
12
- var _lab = require("@mui/lab");
13
12
  var _material = require("@mui/material");
14
13
  var _ahooks = require("ahooks");
15
14
  var _pWaitFor = _interopRequireDefault(require("p-wait-for"));
@@ -389,16 +388,26 @@ function PaymentForm({
389
388
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
390
389
  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
391
390
  className: "cko-payment-submit-btn",
392
- children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
391
+ children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
393
392
  variant: "contained",
394
393
  color: "primary",
395
394
  size: "large",
396
395
  className: "cko-submit-button",
397
- onClick: onAction,
396
+ onClick: () => {
397
+ if (state.submitting || state.paying) {
398
+ return;
399
+ }
400
+ onAction();
401
+ },
398
402
  fullWidth: true,
399
- disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable,
400
- loading: state.submitting || state.paying,
401
- children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
403
+ disabled: state.stripePaying || !quantityInventoryStatus || !payable,
404
+ children: [(state.submitting || state.paying) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
405
+ size: 16,
406
+ sx: {
407
+ mr: 0.5,
408
+ color: "var(--foregrounds-fg-on-color, #fff)"
409
+ }
410
+ }), state.submitting || state.paying ? t("payment.checkout.processing") : buttonText]
402
411
  })
403
412
  }), state.customerLimited && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
404
413
  onConfirm: () => window.open((0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`), "_self"),
@@ -530,16 +539,26 @@ function PaymentForm({
530
539
  className: "cko-payment-submit",
531
540
  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
532
541
  className: "cko-payment-submit-btn",
533
- children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
542
+ children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
534
543
  variant: "contained",
535
544
  color: "primary",
536
545
  size: "large",
537
546
  className: "cko-submit-button",
538
- onClick: onAction,
547
+ onClick: () => {
548
+ if (state.submitting || state.paying) {
549
+ return;
550
+ }
551
+ onAction();
552
+ },
539
553
  fullWidth: true,
540
- disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable,
541
- loading: state.submitting || state.paying,
542
- children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
554
+ disabled: state.stripePaying || !quantityInventoryStatus || !payable,
555
+ children: [(state.submitting || state.paying) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
556
+ size: 16,
557
+ sx: {
558
+ mr: 0.5,
559
+ color: "var(--foregrounds-fg-on-color, #fff)"
560
+ }
561
+ }), state.submitting || state.paying ? t("payment.checkout.processing") : buttonText]
543
562
  })
544
563
  }), ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
545
564
  sx: {
package/lib/payment/product-donation.js CHANGED
@@ -66,6 +66,7 @@ function ProductDonation({
66
66
  }
67
67
  }, [state.custom]);
68
68
  const handleSelect = amount => {
69
+ setPayable(true);
69
70
  setState({
70
71
  selected: amount,
71
72
  custom: false,
@@ -117,6 +118,9 @@ function ProductDonation({
117
118
  custom: true,
118
119
  error: ""
119
120
  });
121
+ if (!state.input) {
122
+ setPayable(false);
123
+ }
120
124
  };
121
125
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
122
126
  display: "flex",
package/lib/theme/index.js CHANGED
@@ -129,6 +129,9 @@ function PaymentThemeProvider({
129
129
  },
130
130
  MuiPopover: {
131
131
  styleOverrides: {
132
+ root: {
133
+ zIndex: 1200
134
+ },
132
135
  paper: ({
133
136
  theme
134
137
  }) => ({
@@ -248,6 +251,13 @@ function PaymentThemeProvider({
248
251
  }
249
252
  }
250
253
  }
254
+ },
255
+ MuiDialog: {
256
+ styleOverrides: {
257
+ root: {
258
+ zIndex: 1200
259
+ }
260
+ }
251
261
  }
252
262
  }
253
263
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/payment-react",
3
- "version": "1.18.1",
3
+ "version": "1.18.3",
4
4
  "description": "Reusable react components for payment kit v2",
5
5
  "keywords": [
6
6
  "react",
@@ -53,15 +53,15 @@
53
53
  }
54
54
  },
55
55
  "dependencies": {
56
- "@arcblock/did-connect": "^2.11.27",
57
- "@arcblock/ux": "^2.11.27",
58
- "@arcblock/ws": "^1.19.3",
59
- "@blocklet/ui-react": "^2.11.27",
56
+ "@arcblock/did-connect": "^2.11.30",
57
+ "@arcblock/ux": "^2.11.30",
58
+ "@arcblock/ws": "^1.19.9",
59
+ "@blocklet/ui-react": "^2.11.30",
60
60
  "@mui/icons-material": "^5.16.6",
61
61
  "@mui/lab": "^5.0.0-alpha.173",
62
62
  "@mui/material": "^5.16.6",
63
63
  "@mui/system": "^5.16.6",
64
- "@ocap/util": "^1.19.3",
64
+ "@ocap/util": "^1.19.9",
65
65
  "@stripe/react-stripe-js": "^2.7.3",
66
66
  "@stripe/stripe-js": "^2.4.0",
67
67
  "@vitejs/plugin-legacy": "^5.4.1",
@@ -92,7 +92,7 @@
92
92
  "@babel/core": "^7.25.2",
93
93
  "@babel/preset-env": "^7.25.2",
94
94
  "@babel/preset-react": "^7.24.7",
95
- "@blocklet/payment-types": "1.18.1",
95
+ "@blocklet/payment-types": "1.18.3",
96
96
  "@storybook/addon-essentials": "^7.6.20",
97
97
  "@storybook/addon-interactions": "^7.6.20",
98
98
  "@storybook/addon-links": "^7.6.20",
@@ -123,5 +123,5 @@
123
123
  "vite-plugin-babel": "^1.2.0",
124
124
  "vite-plugin-node-polyfills": "^0.21.0"
125
125
  },
126
- "gitHead": "22060b542145f7c62282ee0d3ec132ff581e13ec"
126
+ "gitHead": "a2708c80deb174f7fd9d170ffc90566b68bf844b"
127
127
  }
package/src/checkout/donate.tsx CHANGED
@@ -336,6 +336,7 @@ function CheckoutDonateInner({
336
336
  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
337
337
  const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
338
338
  const { isMobile } = useMobile();
339
+ const { connect } = usePaymentContext();
339
340
 
340
341
  const handlePaid = (...args: any[]) => {
341
342
  if (onPaid) {
@@ -560,11 +561,20 @@ function CheckoutDonateInner({
560
561
  }}
561
562
  formRender={{
562
563
  cancel: (
563
- <Button variant="outlined" size="large" onClick={() => setState({ open: false })}>
564
+ <Button
565
+ variant="outlined"
566
+ size="large"
567
+ onClick={() => {
568
+ connect.close();
569
+ setState({ open: false });
570
+ }}>
564
571
  {t('common.cancel')}
565
572
  </Button>
566
573
  ),
567
- onCancel: () => setState({ open: false }),
574
+ onCancel: () => {
575
+ connect.close();
576
+ setState({ open: false });
577
+ },
568
578
  }}
569
579
  />
570
580
  </Box>
package/src/payment/donation-form.tsx CHANGED
@@ -328,6 +328,7 @@ function PaymentInner({
328
328
  md: 'auto',
329
329
  },
330
330
  justifyContent: 'flex-end',
331
+ whiteSpace: 'nowrap',
331
332
  }}>
332
333
  {formRender?.cancel}
333
334
  <PaymentForm
package/src/payment/form/index.tsx CHANGED
@@ -11,8 +11,7 @@ import type {
11
11
  TPaymentIntent,
12
12
  TPaymentMethodExpanded,
13
13
  } from '@blocklet/payment-types';
14
- import { LoadingButton } from '@mui/lab';
15
- import { Box, Divider, Fade, FormLabel, Stack, Typography } from '@mui/material';
14
+ import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Typography } from '@mui/material';
16
15
  import { useMemoizedFn, useSetState } from 'ahooks';
17
16
  import pWaitFor from 'p-wait-for';
18
17
  import { useEffect, useMemo, useRef, useState } from 'react';
@@ -409,17 +408,24 @@ export default function PaymentForm({
409
408
  return (
410
409
  <>
411
410
  <Box className="cko-payment-submit-btn">
412
- <LoadingButton
411
+ <Button
413
412
  variant="contained"
414
413
  color="primary"
415
414
  size="large"
416
415
  className="cko-submit-button"
417
- onClick={onAction}
416
+ onClick={() => {
417
+ if (state.submitting || state.paying) {
418
+ return;
419
+ }
420
+ onAction();
421
+ }}
418
422
  fullWidth
419
- disabled={state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable}
420
- loading={state.submitting || state.paying}>
423
+ disabled={state.stripePaying || !quantityInventoryStatus || !payable}>
424
+ {(state.submitting || state.paying) && (
425
+ <CircularProgress size={16} sx={{ mr: 0.5, color: 'var(--foregrounds-fg-on-color, #fff)' }} />
426
+ )}
421
427
  {state.submitting || state.paying ? t('payment.checkout.processing') : buttonText}
422
- </LoadingButton>
428
+ </Button>
423
429
  </Box>
424
430
  {state.customerLimited && (
425
431
  <ConfirmDialog
@@ -543,17 +549,24 @@ export default function PaymentForm({
543
549
  <Fade in>
544
550
  <Stack className="cko-payment-submit">
545
551
  <Box className="cko-payment-submit-btn">
546
- <LoadingButton
552
+ <Button
547
553
  variant="contained"
548
554
  color="primary"
549
555
  size="large"
550
556
  className="cko-submit-button"
551
- onClick={onAction}
557
+ onClick={() => {
558
+ if (state.submitting || state.paying) {
559
+ return;
560
+ }
561
+ onAction();
562
+ }}
552
563
  fullWidth
553
- disabled={state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable}
554
- loading={state.submitting || state.paying}>
564
+ disabled={state.stripePaying || !quantityInventoryStatus || !payable}>
565
+ {(state.submitting || state.paying) && (
566
+ <CircularProgress size={16} sx={{ mr: 0.5, color: 'var(--foregrounds-fg-on-color, #fff)' }} />
567
+ )}
555
568
  {state.submitting || state.paying ? t('payment.checkout.processing') : buttonText}
556
- </LoadingButton>
569
+ </Button>
557
570
  </Box>
558
571
 
559
572
  {['subscription', 'setup'].includes(checkoutSession.mode) && (
package/src/payment/product-donation.tsx CHANGED
@@ -54,6 +54,7 @@ export default function ProductDonation({
54
54
  }, [state.custom]);
55
55
 
56
56
  const handleSelect = (amount: string) => {
57
+ setPayable(true);
57
58
  setState({ selected: amount, custom: false, error: '' });
58
59
  onChange({ priceId: item.price_id, amount });
59
60
  };
@@ -82,6 +83,9 @@ export default function ProductDonation({
82
83
 
83
84
  const handleCustomSelect = () => {
84
85
  setState({ custom: true, error: '' });
86
+ if (!state.input) {
87
+ setPayable(false);
88
+ }
85
89
  };
86
90
 
87
91
  return (
package/src/theme/index.tsx CHANGED
@@ -124,6 +124,9 @@ export function PaymentThemeProvider({
124
124
  },
125
125
  MuiPopover: {
126
126
  styleOverrides: {
127
+ root: {
128
+ zIndex: 1200,
129
+ },
127
130
  paper: ({ theme }) => ({
128
131
  border: `1px solid ${theme.palette.divider}`,
129
132
  boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
@@ -244,6 +247,13 @@ export function PaymentThemeProvider({
244
247
  },
245
248
  },
246
249
  },
250
+ MuiDialog: {
251
+ styleOverrides: {
252
+ root: {
253
+ zIndex: 1200,
254
+ },
255
+ },
256
+ },
247
257
  },
248
258
  };
249
259