@blocklet/payment-react 1.13.145 → 1.13.146
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.
package/es/checkout/form.js
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useRequest, useSetState } from "ahooks";
|
|
3
3
|
import noop from "lodash/noop";
|
|
4
|
-
import { useEffect } from "react";
|
|
5
|
-
import { joinURL } from "ufo";
|
|
6
4
|
import api from "../api.js";
|
|
7
5
|
import Payment from "../payment/index.js";
|
|
8
|
-
import {
|
|
6
|
+
import { mergeExtraParams } from "../util.js";
|
|
9
7
|
const startFromPaymentLink = async (id, params) => {
|
|
10
8
|
const { data } = await api.post(`/api/checkout-sessions/start/${id}?${mergeExtraParams(params)}`);
|
|
11
9
|
return data;
|
|
@@ -23,11 +21,6 @@ export default function CheckoutForm({ id, onPaid, onError, mode, goBack, extraP
|
|
|
23
21
|
const { error: apiError, data } = useRequest(
|
|
24
22
|
() => type === "paymentLink" ? startFromPaymentLink(id, extraParams) : fetchCheckoutSession(id)
|
|
25
23
|
);
|
|
26
|
-
useEffect(() => {
|
|
27
|
-
if (type === "paymentLink" && mode === "standalone" && data) {
|
|
28
|
-
window.location.replace(joinURL(getPrefix(), `/checkout/pay/${data.checkoutSession.id}`));
|
|
29
|
-
}
|
|
30
|
-
}, [type, mode, data]);
|
|
31
24
|
const handlePaid = () => {
|
|
32
25
|
setState({ completed: true });
|
|
33
26
|
onPaid?.(data);
|
|
@@ -18,7 +18,7 @@ import {
|
|
|
18
18
|
} from "@mui/material";
|
|
19
19
|
import { styled } from "@mui/system";
|
|
20
20
|
import { useSetState } from "ahooks";
|
|
21
|
-
import { useEffect } from "react";
|
|
21
|
+
import { useEffect, useState } from "react";
|
|
22
22
|
import Amount from "../payment/amount.js";
|
|
23
23
|
import { formatError, formatPriceAmount, formatRecurring } from "../util.js";
|
|
24
24
|
const groupItemsByRecurring = (items) => {
|
|
@@ -41,7 +41,7 @@ PricingTable.defaultProps = {
|
|
|
41
41
|
};
|
|
42
42
|
export default function PricingTable({ table, alignItems, interval, mode, onSelect }) {
|
|
43
43
|
const { t, locale } = useLocaleContext();
|
|
44
|
-
const [state, setState] = useSetState({ interval
|
|
44
|
+
const [state, setState] = useSetState({ interval });
|
|
45
45
|
const { recurring, grouped } = groupItemsByRecurring(table.items);
|
|
46
46
|
useEffect(() => {
|
|
47
47
|
if (table) {
|
|
@@ -53,15 +53,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
|
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
}, [table]);
|
|
56
|
-
const handleSelect = async (priceId) => {
|
|
57
|
-
try {
|
|
58
|
-
setState({ loading: priceId, loaded: true });
|
|
59
|
-
await onSelect(priceId);
|
|
60
|
-
} catch (err) {
|
|
61
|
-
console.error(err);
|
|
62
|
-
Toast.error(formatError(err));
|
|
63
|
-
}
|
|
64
|
-
};
|
|
65
56
|
const Root = styled(Box)`
|
|
66
57
|
@media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
|
|
67
58
|
.price-table-item {
|
|
@@ -69,7 +60,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
|
|
|
69
60
|
}
|
|
70
61
|
}
|
|
71
62
|
@media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
|
|
72
|
-
.price-table-wrap:has(> div:nth-child(
|
|
63
|
+
.price-table-wrap:has(> div:nth-child(1)) {
|
|
73
64
|
width: 300px !important;
|
|
74
65
|
}
|
|
75
66
|
.price-table-wrap:has(> div:nth-child(2)) {
|
|
@@ -78,6 +69,16 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
|
|
|
78
69
|
.price-table-wrap:has(> div:nth-child(3)) {
|
|
79
70
|
width: 900px !important;
|
|
80
71
|
}
|
|
72
|
+
.price-table-wrap:has(> div:nth-child(1)) > .price-table-item {
|
|
73
|
+
width: 90% !important;
|
|
74
|
+
}
|
|
75
|
+
.price-table-wrap:has(> div:nth-child(2)) > .price-table-item {
|
|
76
|
+
// 当子元素为2的时候，子元素给宽度
|
|
77
|
+
width: 60% !important;
|
|
78
|
+
}
|
|
79
|
+
.price-table-wrap:has(> div:nth-child(3)) > .price-table-item {
|
|
80
|
+
width: 30% !important;
|
|
81
|
+
}
|
|
81
82
|
}
|
|
82
83
|
`;
|
|
83
84
|
return /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsxs(
|
|
@@ -134,7 +135,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
|
|
|
134
135
|
className: "price-table-item",
|
|
135
136
|
justifyContent: "center",
|
|
136
137
|
sx: {
|
|
137
|
-
width: 0.9 / grouped[state.interval].length,
|
|
138
138
|
cursor: "pointer",
|
|
139
139
|
borderWidth: "1px",
|
|
140
140
|
borderStyle: "solid",
|
|
@@ -162,21 +162,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
|
|
|
162
162
|
/* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: "0.8rem", children: formatRecurring(x.price.recurring, false, "", locale) })
|
|
163
163
|
] })
|
|
164
164
|
] }),
|
|
165
|
-
/* @__PURE__ */ jsx(
|
|
166
|
-
LoadingButton,
|
|
167
|
-
{
|
|
168
|
-
fullWidth: true,
|
|
169
|
-
size: "large",
|
|
170
|
-
variant: x.is_highlight || x.is_selected ? "contained" : "outlined",
|
|
171
|
-
color: x.is_highlight || x.is_selected ? "primary" : "info",
|
|
172
|
-
sx: { fontSize: "1.2rem" },
|
|
173
|
-
loading: state.loading === x.price_id && !state.loaded,
|
|
174
|
-
disabled: x.is_disabled,
|
|
175
|
-
onClick: () => handleSelect(x.price_id),
|
|
176
|
-
loadingPosition: "end",
|
|
177
|
-
children: action
|
|
178
|
-
}
|
|
179
|
-
),
|
|
165
|
+
/* @__PURE__ */ jsx(Loading, { x, action, onSelect }),
|
|
180
166
|
x.product.features.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
|
|
181
167
|
/* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.include") }),
|
|
182
168
|
/* @__PURE__ */ jsx(List, { dense: true, children: x.product.features.map((f) => /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, disablePadding: true, children: [
|
|
@@ -195,3 +181,31 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
|
|
|
195
181
|
}
|
|
196
182
|
) });
|
|
197
183
|
}
|
|
184
|
+
function Loading({ x, action, onSelect }) {
|
|
185
|
+
const [state, setState] = useState({ loading: "", loaded: false });
|
|
186
|
+
const handleSelect = async (priceId) => {
|
|
187
|
+
try {
|
|
188
|
+
setState({ loading: priceId, loaded: true });
|
|
189
|
+
await onSelect(priceId);
|
|
190
|
+
} catch (err) {
|
|
191
|
+
console.error(err);
|
|
192
|
+
Toast.error(formatError(err));
|
|
193
|
+
}
|
|
194
|
+
};
|
|
195
|
+
return /* @__PURE__ */ jsx(
|
|
196
|
+
LoadingButton,
|
|
197
|
+
{
|
|
198
|
+
fullWidth: true,
|
|
199
|
+
size: "large",
|
|
200
|
+
variant: x.is_highlight || x.is_selected ? "contained" : "outlined",
|
|
201
|
+
color: x.is_highlight || x.is_selected ? "primary" : "info",
|
|
202
|
+
sx: { fontSize: "1.2rem" },
|
|
203
|
+
loading: state.loading === x.price_id && !state.loaded,
|
|
204
|
+
disabled: x.is_disabled,
|
|
205
|
+
onClick: () => handleSelect(x.price_id),
|
|
206
|
+
loadingPosition: "end",
|
|
207
|
+
endIcon: null,
|
|
208
|
+
children: action
|
|
209
|
+
}
|
|
210
|
+
);
|
|
211
|
+
}
|
package/lib/checkout/form.js
CHANGED
|
@@ -7,8 +7,6 @@ module.exports = CheckoutForm;
|
|
|
7
7
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
8
8
|
var _ahooks = require("ahooks");
|
|
9
9
|
var _noop = _interopRequireDefault(require("lodash/noop"));
|
|
10
|
-
var _react = require("react");
|
|
11
|
-
var _ufo = require("ufo");
|
|
12
10
|
var _api = _interopRequireDefault(require("../api"));
|
|
13
11
|
var _payment = _interopRequireDefault(require("../payment"));
|
|
14
12
|
var _util = require("../util");
|
|
@@ -45,11 +43,6 @@ function CheckoutForm({
|
|
|
45
43
|
error: apiError,
|
|
46
44
|
data
|
|
47
45
|
} = (0, _ahooks.useRequest)(() => type === "paymentLink" ? startFromPaymentLink(id, extraParams) : fetchCheckoutSession(id));
|
|
48
|
-
(0, _react.useEffect)(() => {
|
|
49
|
-
if (type === "paymentLink" && mode === "standalone" && data) {
|
|
50
|
-
window.location.replace((0, _ufo.joinURL)((0, _util.getPrefix)(), `/checkout/pay/${data.checkoutSession.id}`));
|
|
51
|
-
}
|
|
52
|
-
}, [type, mode, data]);
|
|
53
46
|
const handlePaid = () => {
|
|
54
47
|
setState({
|
|
55
48
|
completed: true
|
|
@@ -49,9 +49,7 @@ function PricingTable({
|
|
|
49
49
|
locale
|
|
50
50
|
} = (0, _context.useLocaleContext)();
|
|
51
51
|
const [state, setState] = (0, _ahooks.useSetState)({
|
|
52
|
-
interval
|
|
53
|
-
loading: "",
|
|
54
|
-
loaded: false
|
|
52
|
+
interval
|
|
55
53
|
});
|
|
56
54
|
const {
|
|
57
55
|
recurring,
|
|
@@ -69,18 +67,6 @@ function PricingTable({
|
|
|
69
67
|
}
|
|
70
68
|
}
|
|
71
69
|
}, [table]);
|
|
72
|
-
const handleSelect = async priceId => {
|
|
73
|
-
try {
|
|
74
|
-
setState({
|
|
75
|
-
loading: priceId,
|
|
76
|
-
loaded: true
|
|
77
|
-
});
|
|
78
|
-
await onSelect(priceId);
|
|
79
|
-
} catch (err) {
|
|
80
|
-
console.error(err);
|
|
81
|
-
_Toast.default.error((0, _util.formatError)(err));
|
|
82
|
-
}
|
|
83
|
-
};
|
|
84
70
|
const Root = (0, _system.styled)(_material.Box)`
|
|
85
71
|
@media (max-width: ${({
|
|
86
72
|
theme
|
|
@@ -92,7 +78,7 @@ function PricingTable({
|
|
|
92
78
|
@media (min-width: ${({
|
|
93
79
|
theme
|
|
94
80
|
}) => theme.breakpoints.values.md}px) {
|
|
95
|
-
.price-table-wrap:has(> div:nth-child(
|
|
81
|
+
.price-table-wrap:has(> div:nth-child(1)) {
|
|
96
82
|
width: 300px !important;
|
|
97
83
|
}
|
|
98
84
|
.price-table-wrap:has(> div:nth-child(2)) {
|
|
@@ -101,6 +87,16 @@ function PricingTable({
|
|
|
101
87
|
.price-table-wrap:has(> div:nth-child(3)) {
|
|
102
88
|
width: 900px !important;
|
|
103
89
|
}
|
|
90
|
+
.price-table-wrap:has(> div:nth-child(1)) > .price-table-item {
|
|
91
|
+
width: 90% !important;
|
|
92
|
+
}
|
|
93
|
+
.price-table-wrap:has(> div:nth-child(2)) > .price-table-item {
|
|
94
|
+
// 当子元素为2的时候，子元素给宽度
|
|
95
|
+
width: 60% !important;
|
|
96
|
+
}
|
|
97
|
+
.price-table-wrap:has(> div:nth-child(3)) > .price-table-item {
|
|
98
|
+
width: 30% !important;
|
|
99
|
+
}
|
|
104
100
|
}
|
|
105
101
|
`;
|
|
106
102
|
return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
|
|
@@ -156,7 +152,6 @@ function PricingTable({
|
|
|
156
152
|
className: "price-table-item",
|
|
157
153
|
justifyContent: "center",
|
|
158
154
|
sx: {
|
|
159
|
-
width: 0.9 / grouped[state.interval].length,
|
|
160
155
|
cursor: "pointer",
|
|
161
156
|
borderWidth: "1px",
|
|
162
157
|
borderStyle: "solid",
|
|
@@ -210,19 +205,10 @@ function PricingTable({
|
|
|
210
205
|
children: (0, _util.formatRecurring)(x.price.recurring, false, "", locale)
|
|
211
206
|
})]
|
|
212
207
|
})]
|
|
213
|
-
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
color: x.is_highlight || x.is_selected ? "primary" : "info",
|
|
218
|
-
sx: {
|
|
219
|
-
fontSize: "1.2rem"
|
|
220
|
-
},
|
|
221
|
-
loading: state.loading === x.price_id && !state.loaded,
|
|
222
|
-
disabled: x.is_disabled,
|
|
223
|
-
onClick: () => handleSelect(x.price_id),
|
|
224
|
-
loadingPosition: "end",
|
|
225
|
-
children: action
|
|
208
|
+
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(Loading, {
|
|
209
|
+
x,
|
|
210
|
+
action,
|
|
211
|
+
onSelect
|
|
226
212
|
}), x.product.features.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
|
|
227
213
|
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
|
|
228
214
|
children: t("payment.checkout.include")
|
|
@@ -251,4 +237,41 @@ function PricingTable({
|
|
|
251
237
|
})]
|
|
252
238
|
})
|
|
253
239
|
});
|
|
240
|
+
}
|
|
241
|
+
function Loading({
|
|
242
|
+
x,
|
|
243
|
+
action,
|
|
244
|
+
onSelect
|
|
245
|
+
}) {
|
|
246
|
+
const [state, setState] = (0, _react.useState)({
|
|
247
|
+
loading: "",
|
|
248
|
+
loaded: false
|
|
249
|
+
});
|
|
250
|
+
const handleSelect = async priceId => {
|
|
251
|
+
try {
|
|
252
|
+
setState({
|
|
253
|
+
loading: priceId,
|
|
254
|
+
loaded: true
|
|
255
|
+
});
|
|
256
|
+
await onSelect(priceId);
|
|
257
|
+
} catch (err) {
|
|
258
|
+
console.error(err);
|
|
259
|
+
_Toast.default.error((0, _util.formatError)(err));
|
|
260
|
+
}
|
|
261
|
+
};
|
|
262
|
+
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
|
|
263
|
+
fullWidth: true,
|
|
264
|
+
size: "large",
|
|
265
|
+
variant: x.is_highlight || x.is_selected ? "contained" : "outlined",
|
|
266
|
+
color: x.is_highlight || x.is_selected ? "primary" : "info",
|
|
267
|
+
sx: {
|
|
268
|
+
fontSize: "1.2rem"
|
|
269
|
+
},
|
|
270
|
+
loading: state.loading === x.price_id && !state.loaded,
|
|
271
|
+
disabled: x.is_disabled,
|
|
272
|
+
onClick: () => handleSelect(x.price_id),
|
|
273
|
+
loadingPosition: "end",
|
|
274
|
+
endIcon: null,
|
|
275
|
+
children: action
|
|
276
|
+
});
|
|
254
277
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/payment-react",
|
|
3
|
-
"version": "1.13.
|
|
3
|
+
"version": "1.13.146",
|
|
4
4
|
"description": "Reusable react components for payment kit v2",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"@babel/core": "^7.23.9",
|
|
90
90
|
"@babel/preset-env": "^7.23.9",
|
|
91
91
|
"@babel/preset-react": "^7.23.3",
|
|
92
|
-
"@blocklet/payment-types": "1.13.
|
|
92
|
+
"@blocklet/payment-types": "1.13.146",
|
|
93
93
|
"@storybook/addon-essentials": "^7.6.13",
|
|
94
94
|
"@storybook/addon-interactions": "^7.6.13",
|
|
95
95
|
"@storybook/addon-links": "^7.6.13",
|
|
@@ -118,5 +118,5 @@
|
|
|
118
118
|
"vite-plugin-babel": "^1.2.0",
|
|
119
119
|
"vite-plugin-node-polyfills": "^0.19.0"
|
|
120
120
|
},
|
|
121
|
-
"gitHead": "
|
|
121
|
+
"gitHead": "d7b68b409a84dd6ad962d298a74155fcdd9993db"
|
|
122
122
|
}
|
package/src/checkout/form.tsx
CHANGED
|
@@ -2,13 +2,11 @@
|
|
|
2
2
|
import { TCheckoutSessionExpanded, TPaymentMethodExpanded } from '@blocklet/payment-types';
|
|
3
3
|
import { useRequest, useSetState } from 'ahooks';
|
|
4
4
|
import noop from 'lodash/noop';
|
|
5
|
-
import { useEffect } from 'react';
|
|
6
|
-
import { joinURL } from 'ufo';
|
|
7
5
|
|
|
8
6
|
import api from '../api';
|
|
9
7
|
import Payment from '../payment';
|
|
10
8
|
import { CheckoutContext, CheckoutProps } from '../types';
|
|
11
|
-
import {
|
|
9
|
+
import { mergeExtraParams } from '../util';
|
|
12
10
|
|
|
13
11
|
const startFromPaymentLink = async (id: string, params?: Record<string, any>): Promise<CheckoutContext> => {
|
|
14
12
|
const { data } = await api.post(`/api/checkout-sessions/start/${id}?${mergeExtraParams(params)}`);
|
|
@@ -34,12 +32,6 @@ export default function CheckoutForm({ id, onPaid, onError, mode, goBack, extraP
|
|
|
34
32
|
type === 'paymentLink' ? startFromPaymentLink(id, extraParams) : fetchCheckoutSession(id)
|
|
35
33
|
);
|
|
36
34
|
|
|
37
|
-
useEffect(() => {
|
|
38
|
-
if (type === 'paymentLink' && mode === 'standalone' && data) {
|
|
39
|
-
window.location.replace(joinURL(getPrefix(), `/checkout/pay/${data.checkoutSession.id}`));
|
|
40
|
-
}
|
|
41
|
-
}, [type, mode, data]);
|
|
42
|
-
|
|
43
35
|
const handlePaid = () => {
|
|
44
36
|
setState({ completed: true });
|
|
45
37
|
onPaid?.(data as CheckoutContext);
|
|
@@ -19,7 +19,7 @@ import {
|
|
|
19
19
|
} from '@mui/material';
|
|
20
20
|
import { styled } from '@mui/system';
|
|
21
21
|
import { useSetState } from 'ahooks';
|
|
22
|
-
import { useEffect } from 'react';
|
|
22
|
+
import { useEffect, useState } from 'react';
|
|
23
23
|
|
|
24
24
|
import Amount from '../payment/amount';
|
|
25
25
|
import { formatError, formatPriceAmount, formatRecurring } from '../util';
|
|
@@ -59,7 +59,7 @@ PricingTable.defaultProps = {
|
|
|
59
59
|
|
|
60
60
|
export default function PricingTable({ table, alignItems, interval, mode, onSelect }: Props) {
|
|
61
61
|
const { t, locale } = useLocaleContext();
|
|
62
|
-
const [state, setState] = useSetState({ interval
|
|
62
|
+
const [state, setState] = useSetState({ interval });
|
|
63
63
|
const { recurring, grouped } = groupItemsByRecurring(table.items);
|
|
64
64
|
|
|
65
65
|
useEffect(() => {
|
|
@@ -74,16 +74,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
|
|
|
74
74
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
75
75
|
}, [table]);
|
|
76
76
|
|
|
77
|
-
const handleSelect = async (priceId: string) => {
|
|
78
|
-
try {
|
|
79
|
-
setState({ loading: priceId, loaded: true });
|
|
80
|
-
await onSelect(priceId);
|
|
81
|
-
} catch (err) {
|
|
82
|
-
console.error(err);
|
|
83
|
-
Toast.error(formatError(err));
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
|
|
87
77
|
const Root = styled(Box)`
|
|
88
78
|
@media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
|
|
89
79
|
.price-table-item {
|
|
@@ -91,7 +81,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
|
|
|
91
81
|
}
|
|
92
82
|
}
|
|
93
83
|
@media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
|
|
94
|
-
.price-table-wrap:has(> div:nth-child(
|
|
84
|
+
.price-table-wrap:has(> div:nth-child(1)) {
|
|
95
85
|
width: 300px !important;
|
|
96
86
|
}
|
|
97
87
|
.price-table-wrap:has(> div:nth-child(2)) {
|
|
@@ -100,6 +90,16 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
|
|
|
100
90
|
.price-table-wrap:has(> div:nth-child(3)) {
|
|
101
91
|
width: 900px !important;
|
|
102
92
|
}
|
|
93
|
+
.price-table-wrap:has(> div:nth-child(1)) > .price-table-item {
|
|
94
|
+
width: 90% !important;
|
|
95
|
+
}
|
|
96
|
+
.price-table-wrap:has(> div:nth-child(2)) > .price-table-item {
|
|
97
|
+
// 当子元素为2的时候，子元素给宽度
|
|
98
|
+
width: 60% !important;
|
|
99
|
+
}
|
|
100
|
+
.price-table-wrap:has(> div:nth-child(3)) > .price-table-item {
|
|
101
|
+
width: 30% !important;
|
|
102
|
+
}
|
|
103
103
|
}
|
|
104
104
|
`;
|
|
105
105
|
return (
|
|
@@ -159,7 +159,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
|
|
|
159
159
|
className="price-table-item"
|
|
160
160
|
justifyContent="center"
|
|
161
161
|
sx={{
|
|
162
|
-
width: 0.9 / grouped[state.interval as string].length,
|
|
163
162
|
cursor: 'pointer',
|
|
164
163
|
borderWidth: '1px',
|
|
165
164
|
borderStyle: 'solid',
|
|
@@ -192,18 +191,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
|
|
|
192
191
|
</Typography>
|
|
193
192
|
</Stack>
|
|
194
193
|
</Stack>
|
|
195
|
-
<
|
|
196
|
-
fullWidth
|
|
197
|
-
size="large"
|
|
198
|
-
variant={x.is_highlight || x.is_selected ? 'contained' : 'outlined'}
|
|
199
|
-
color={x.is_highlight || x.is_selected ? 'primary' : 'info'}
|
|
200
|
-
sx={{ fontSize: '1.2rem' }}
|
|
201
|
-
loading={state.loading === x.price_id && !state.loaded}
|
|
202
|
-
disabled={x.is_disabled}
|
|
203
|
-
onClick={() => handleSelect(x.price_id)}
|
|
204
|
-
loadingPosition="end">
|
|
205
|
-
{action}
|
|
206
|
-
</LoadingButton>
|
|
194
|
+
<Loading x={x} action={action} onSelect={onSelect} />
|
|
207
195
|
{x.product.features.length > 0 && (
|
|
208
196
|
<Box>
|
|
209
197
|
<Typography>{t('payment.checkout.include')}</Typography>
|
|
@@ -229,3 +217,33 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
|
|
|
229
217
|
</Root>
|
|
230
218
|
);
|
|
231
219
|
}
|
|
220
|
+
|
|
221
|
+
function Loading({ x, action, onSelect }: any) {
|
|
222
|
+
const [state, setState] = useState({ loading: '', loaded: false });
|
|
223
|
+
|
|
224
|
+
const handleSelect = async (priceId: string) => {
|
|
225
|
+
try {
|
|
226
|
+
setState({ loading: priceId, loaded: true });
|
|
227
|
+
await onSelect(priceId);
|
|
228
|
+
} catch (err) {
|
|
229
|
+
console.error(err);
|
|
230
|
+
Toast.error(formatError(err));
|
|
231
|
+
}
|
|
232
|
+
};
|
|
233
|
+
|
|
234
|
+
return (
|
|
235
|
+
<LoadingButton
|
|
236
|
+
fullWidth
|
|
237
|
+
size="large"
|
|
238
|
+
variant={x.is_highlight || x.is_selected ? 'contained' : 'outlined'}
|
|
239
|
+
color={x.is_highlight || x.is_selected ? 'primary' : 'info'}
|
|
240
|
+
sx={{ fontSize: '1.2rem' }}
|
|
241
|
+
loading={state.loading === x.price_id && !state.loaded}
|
|
242
|
+
disabled={x.is_disabled}
|
|
243
|
+
onClick={() => handleSelect(x.price_id)}
|
|
244
|
+
loadingPosition="end"
|
|
245
|
+
endIcon={null}>
|
|
246
|
+
{action}
|
|
247
|
+
</LoadingButton>
|
|
248
|
+
);
|
|
249
|
+
}
|