@blocklet/launcher-ux 2.3.33 → 2.3.34
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/payment/checkout/on-demand.js +67 -17
- package/lib/payment/checkout/on-demand.js +69 -19
- package/package.json +11 -10
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import DidAddress from '@arcblock/ux/lib/DID';
|
|
2
2
|
import formatError from '@blocklet/launcher-util/es/format-error';
|
|
3
|
+
import { getProductFreeTrial } from '@blocklet/launcher-util/es/util';
|
|
3
4
|
import { getBlockletUrlOnStore } from '@blocklet/launcher-util/lib/util';
|
|
4
5
|
import { CheckoutForm, PaymentProvider, formatPrice, usePaymentContext } from '@blocklet/payment-react';
|
|
5
6
|
import InfoIcon from '@mui/icons-material/InfoOutlined';
|
|
@@ -7,6 +8,7 @@ import { Alert, Avatar, List, ListItem, ListItemAvatar, ListItemText, Tooltip, T
|
|
|
7
8
|
import Box from '@mui/material/Box';
|
|
8
9
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
9
10
|
import { useSetState } from 'ahooks';
|
|
11
|
+
import prettyMs from 'pretty-ms-i18n';
|
|
10
12
|
import PropTypes from 'prop-types';
|
|
11
13
|
import useAsync from 'react-use/lib/useAsync';
|
|
12
14
|
import useMobile from '../../use-mobile';
|
|
@@ -21,7 +23,9 @@ export default function CheckoutOnDemand({
|
|
|
21
23
|
checkoutPath,
|
|
22
24
|
session,
|
|
23
25
|
t,
|
|
24
|
-
locale
|
|
26
|
+
locale,
|
|
27
|
+
freeTrialProducts,
|
|
28
|
+
minStakeAmount
|
|
25
29
|
}) {
|
|
26
30
|
return /*#__PURE__*/_jsx(Box, {
|
|
27
31
|
sx: {
|
|
@@ -39,7 +43,9 @@ export default function CheckoutOnDemand({
|
|
|
39
43
|
components: components,
|
|
40
44
|
blockletStoreURL: blockletStoreURL,
|
|
41
45
|
t: t,
|
|
42
|
-
locale: locale
|
|
46
|
+
locale: locale,
|
|
47
|
+
freeTrialProducts: freeTrialProducts,
|
|
48
|
+
minStakeAmount: minStakeAmount
|
|
43
49
|
})
|
|
44
50
|
})
|
|
45
51
|
});
|
|
@@ -52,7 +58,12 @@ const propTypes = {
|
|
|
52
58
|
t: PropTypes.func.isRequired,
|
|
53
59
|
locale: PropTypes.string.isRequired,
|
|
54
60
|
api: PropTypes.object.isRequired,
|
|
55
|
-
checkoutPath: PropTypes.string.isRequired
|
|
61
|
+
checkoutPath: PropTypes.string.isRequired,
|
|
62
|
+
freeTrialProducts: PropTypes.array,
|
|
63
|
+
minStakeAmount: PropTypes.number.isRequired
|
|
64
|
+
};
|
|
65
|
+
CheckoutOnDemand.defaultProps = {
|
|
66
|
+
freeTrialProducts: []
|
|
56
67
|
};
|
|
57
68
|
CheckoutOnDemand.propTypes = {
|
|
58
69
|
...propTypes,
|
|
@@ -60,6 +71,7 @@ CheckoutOnDemand.propTypes = {
|
|
|
60
71
|
session: PropTypes.object.isRequired
|
|
61
72
|
};
|
|
62
73
|
Component.propTypes = propTypes;
|
|
74
|
+
Component.defaultProps = CheckoutOnDemand.defaultProps;
|
|
63
75
|
function Component({
|
|
64
76
|
launchSessionId,
|
|
65
77
|
handlePaid,
|
|
@@ -68,18 +80,25 @@ function Component({
|
|
|
68
80
|
api,
|
|
69
81
|
checkoutPath,
|
|
70
82
|
t,
|
|
71
|
-
locale
|
|
83
|
+
locale,
|
|
84
|
+
freeTrialProducts,
|
|
85
|
+
minStakeAmount
|
|
72
86
|
}) {
|
|
73
87
|
const {
|
|
74
88
|
getCurrency
|
|
75
89
|
} = usePaymentContext();
|
|
76
90
|
const [state, setState] = useSetState({
|
|
77
91
|
unitPrice: '',
|
|
78
|
-
totalPrice: ''
|
|
92
|
+
totalPrice: '',
|
|
93
|
+
minStakeAmount: ''
|
|
79
94
|
});
|
|
80
95
|
const {
|
|
81
96
|
isMobile
|
|
82
97
|
} = useMobile();
|
|
98
|
+
const {
|
|
99
|
+
isFreeTrial,
|
|
100
|
+
duration: freeTrialDurationSeconds
|
|
101
|
+
} = getProductFreeTrial('serverless', freeTrialProducts);
|
|
83
102
|
const components = (tempComponents || []).reduce((acc, x) => {
|
|
84
103
|
if (acc.findIndex(y => y.did === x.did) === -1) {
|
|
85
104
|
acc.push(x);
|
|
@@ -131,7 +150,8 @@ function Component({
|
|
|
131
150
|
unitPrice = unitPrice?.replace(new RegExp(`${UNIT_LABEL_PLACEHOLDER}\\s+\\/*`), '');
|
|
132
151
|
setState({
|
|
133
152
|
unitPrice,
|
|
134
|
-
totalPrice
|
|
153
|
+
totalPrice,
|
|
154
|
+
minStakeAmount: `${minStakeAmount} ${currency.symbol}`
|
|
135
155
|
});
|
|
136
156
|
} catch (error) {
|
|
137
157
|
console.error('calculate failed error', error);
|
|
@@ -241,9 +261,6 @@ function Component({
|
|
|
241
261
|
copyable: false,
|
|
242
262
|
did: did
|
|
243
263
|
}), /*#__PURE__*/_jsx(Typography, {
|
|
244
|
-
sx: {
|
|
245
|
-
color: 'primary.main'
|
|
246
|
-
},
|
|
247
264
|
children: state.unitPrice
|
|
248
265
|
})]
|
|
249
266
|
})
|
|
@@ -257,18 +274,35 @@ function Component({
|
|
|
257
274
|
flexDirection: 'column',
|
|
258
275
|
gap: '12px'
|
|
259
276
|
},
|
|
260
|
-
children: [/*#__PURE__*/_jsx(
|
|
277
|
+
children: [/*#__PURE__*/_jsx(Box, {
|
|
261
278
|
sx: {
|
|
262
|
-
|
|
279
|
+
display: 'flex',
|
|
280
|
+
justifyContent: 'space-between'
|
|
263
281
|
},
|
|
264
|
-
children:
|
|
282
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
|
283
|
+
sx: {
|
|
284
|
+
fontWeight: 'bold'
|
|
285
|
+
},
|
|
286
|
+
children: t('common.price')
|
|
287
|
+
})
|
|
265
288
|
}), /*#__PURE__*/_jsx(List, {
|
|
266
289
|
dense: true,
|
|
267
290
|
disablePadding: true,
|
|
268
291
|
children: [{
|
|
269
292
|
label: t('checkout.estimatedCost'),
|
|
270
|
-
value:
|
|
271
|
-
|
|
293
|
+
value: isFreeTrial ? t('checkout.freeTrialHint', {
|
|
294
|
+
duration: prettyMs(freeTrialDurationSeconds * 1000, {
|
|
295
|
+
locale: locale === 'zh' ? 'zh_CN' : 'en_US',
|
|
296
|
+
compact: true,
|
|
297
|
+
verbose: false
|
|
298
|
+
})
|
|
299
|
+
}) : state.totalPrice,
|
|
300
|
+
hint: t('checkout.estimatedCostHint'),
|
|
301
|
+
highlight: isFreeTrial
|
|
302
|
+
}, {
|
|
303
|
+
label: t('checkout.stakeAmount'),
|
|
304
|
+
value: state.minStakeAmount,
|
|
305
|
+
highlight: false
|
|
272
306
|
}].map(item => {
|
|
273
307
|
return /*#__PURE__*/_jsx(ListItem, {
|
|
274
308
|
sx: {
|
|
@@ -276,12 +310,19 @@ function Component({
|
|
|
276
310
|
},
|
|
277
311
|
disablePadding: true,
|
|
278
312
|
disableGutters: true,
|
|
279
|
-
secondaryAction: /*#__PURE__*/_jsx(
|
|
280
|
-
color: "primary.main",
|
|
313
|
+
secondaryAction: /*#__PURE__*/_jsx(Box, {
|
|
281
314
|
sx: {
|
|
315
|
+
display: 'flex',
|
|
316
|
+
flexDirection: 'column',
|
|
317
|
+
alignItems: 'flex-end',
|
|
282
318
|
paddingRight: '4px'
|
|
283
319
|
},
|
|
284
|
-
children:
|
|
320
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
|
321
|
+
sx: {
|
|
322
|
+
color: item.highlight ? 'primary.main' : 'default'
|
|
323
|
+
},
|
|
324
|
+
children: item.value
|
|
325
|
+
})
|
|
285
326
|
}),
|
|
286
327
|
children: /*#__PURE__*/_jsx(ListItemText, {
|
|
287
328
|
primary: /*#__PURE__*/_jsxs(_Fragment, {
|
|
@@ -318,6 +359,15 @@ function Component({
|
|
|
318
359
|
})
|
|
319
360
|
}, item.label);
|
|
320
361
|
})
|
|
362
|
+
}), /*#__PURE__*/_jsx(Alert, {
|
|
363
|
+
severity: "info",
|
|
364
|
+
sx: {
|
|
365
|
+
mt: 2,
|
|
366
|
+
fontStyle: 'italic'
|
|
367
|
+
},
|
|
368
|
+
children: t('checkout.stakeHint', {
|
|
369
|
+
amount: state.minStakeAmount
|
|
370
|
+
})
|
|
321
371
|
})]
|
|
322
372
|
})]
|
|
323
373
|
}), /*#__PURE__*/_jsx(Box, {
|
|
@@ -6,13 +6,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = CheckoutOnDemand;
|
|
7
7
|
var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
|
|
8
8
|
var _formatError = _interopRequireDefault(require("@blocklet/launcher-util/es/format-error"));
|
|
9
|
-
var _util = require("@blocklet/launcher-util/
|
|
9
|
+
var _util = require("@blocklet/launcher-util/es/util");
|
|
10
|
+
var _util2 = require("@blocklet/launcher-util/lib/util");
|
|
10
11
|
var _paymentReact = require("@blocklet/payment-react");
|
|
11
12
|
var _InfoOutlined = _interopRequireDefault(require("@mui/icons-material/InfoOutlined"));
|
|
12
13
|
var _material = require("@mui/material");
|
|
13
14
|
var _Box = _interopRequireDefault(require("@mui/material/Box"));
|
|
14
15
|
var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
|
|
15
16
|
var _ahooks = require("ahooks");
|
|
17
|
+
var _prettyMsI18n = _interopRequireDefault(require("pretty-ms-i18n"));
|
|
16
18
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
19
|
var _useAsync = _interopRequireDefault(require("react-use/lib/useAsync"));
|
|
18
20
|
var _useMobile = _interopRequireDefault(require("../../use-mobile"));
|
|
@@ -34,7 +36,9 @@ function CheckoutOnDemand(_ref) {
|
|
|
34
36
|
checkoutPath,
|
|
35
37
|
session,
|
|
36
38
|
t,
|
|
37
|
-
locale
|
|
39
|
+
locale,
|
|
40
|
+
freeTrialProducts,
|
|
41
|
+
minStakeAmount
|
|
38
42
|
} = _ref;
|
|
39
43
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
|
|
40
44
|
sx: {
|
|
@@ -52,7 +56,9 @@ function CheckoutOnDemand(_ref) {
|
|
|
52
56
|
components: components,
|
|
53
57
|
blockletStoreURL: blockletStoreURL,
|
|
54
58
|
t: t,
|
|
55
|
-
locale: locale
|
|
59
|
+
locale: locale,
|
|
60
|
+
freeTrialProducts: freeTrialProducts,
|
|
61
|
+
minStakeAmount: minStakeAmount
|
|
56
62
|
})
|
|
57
63
|
})
|
|
58
64
|
});
|
|
@@ -65,13 +71,19 @@ const propTypes = {
|
|
|
65
71
|
t: _propTypes.default.func.isRequired,
|
|
66
72
|
locale: _propTypes.default.string.isRequired,
|
|
67
73
|
api: _propTypes.default.object.isRequired,
|
|
68
|
-
checkoutPath: _propTypes.default.string.isRequired
|
|
74
|
+
checkoutPath: _propTypes.default.string.isRequired,
|
|
75
|
+
freeTrialProducts: _propTypes.default.array,
|
|
76
|
+
minStakeAmount: _propTypes.default.number.isRequired
|
|
77
|
+
};
|
|
78
|
+
CheckoutOnDemand.defaultProps = {
|
|
79
|
+
freeTrialProducts: []
|
|
69
80
|
};
|
|
70
81
|
CheckoutOnDemand.propTypes = _objectSpread(_objectSpread({}, propTypes), {}, {
|
|
71
82
|
connectApi: _propTypes.default.func.isRequired,
|
|
72
83
|
session: _propTypes.default.object.isRequired
|
|
73
84
|
});
|
|
74
85
|
Component.propTypes = propTypes;
|
|
86
|
+
Component.defaultProps = CheckoutOnDemand.defaultProps;
|
|
75
87
|
function Component(_ref2) {
|
|
76
88
|
let {
|
|
77
89
|
launchSessionId,
|
|
@@ -81,18 +93,25 @@ function Component(_ref2) {
|
|
|
81
93
|
api,
|
|
82
94
|
checkoutPath,
|
|
83
95
|
t,
|
|
84
|
-
locale
|
|
96
|
+
locale,
|
|
97
|
+
freeTrialProducts,
|
|
98
|
+
minStakeAmount
|
|
85
99
|
} = _ref2;
|
|
86
100
|
const {
|
|
87
101
|
getCurrency
|
|
88
102
|
} = (0, _paymentReact.usePaymentContext)();
|
|
89
103
|
const [state, setState] = (0, _ahooks.useSetState)({
|
|
90
104
|
unitPrice: '',
|
|
91
|
-
totalPrice: ''
|
|
105
|
+
totalPrice: '',
|
|
106
|
+
minStakeAmount: ''
|
|
92
107
|
});
|
|
93
108
|
const {
|
|
94
109
|
isMobile
|
|
95
110
|
} = (0, _useMobile.default)();
|
|
111
|
+
const {
|
|
112
|
+
isFreeTrial,
|
|
113
|
+
duration: freeTrialDurationSeconds
|
|
114
|
+
} = (0, _util.getProductFreeTrial)('serverless', freeTrialProducts);
|
|
96
115
|
const components = (tempComponents || []).reduce((acc, x) => {
|
|
97
116
|
if (acc.findIndex(y => y.did === x.did) === -1) {
|
|
98
117
|
acc.push(x);
|
|
@@ -146,7 +165,8 @@ function Component(_ref2) {
|
|
|
146
165
|
unitPrice = (_unitPrice = unitPrice) === null || _unitPrice === void 0 ? void 0 : _unitPrice.replace(new RegExp("".concat(UNIT_LABEL_PLACEHOLDER, "\\s+\\/*")), '');
|
|
147
166
|
setState({
|
|
148
167
|
unitPrice,
|
|
149
|
-
totalPrice
|
|
168
|
+
totalPrice,
|
|
169
|
+
minStakeAmount: "".concat(minStakeAmount, " ").concat(currency.symbol)
|
|
150
170
|
});
|
|
151
171
|
} catch (error) {
|
|
152
172
|
console.error('calculate failed error', error);
|
|
@@ -218,7 +238,7 @@ function Component(_ref2) {
|
|
|
218
238
|
if (blockletStoreURL) {
|
|
219
239
|
props = {
|
|
220
240
|
component: 'a',
|
|
221
|
-
href: (0,
|
|
241
|
+
href: (0, _util2.getBlockletUrlOnStore)({
|
|
222
242
|
did,
|
|
223
243
|
baseUrl: blockletStoreURL
|
|
224
244
|
})
|
|
@@ -257,9 +277,6 @@ function Component(_ref2) {
|
|
|
257
277
|
copyable: false,
|
|
258
278
|
did: did
|
|
259
279
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
|
|
260
|
-
sx: {
|
|
261
|
-
color: 'primary.main'
|
|
262
|
-
},
|
|
263
280
|
children: state.unitPrice
|
|
264
281
|
})]
|
|
265
282
|
})
|
|
@@ -273,18 +290,35 @@ function Component(_ref2) {
|
|
|
273
290
|
flexDirection: 'column',
|
|
274
291
|
gap: '12px'
|
|
275
292
|
},
|
|
276
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
293
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
|
|
277
294
|
sx: {
|
|
278
|
-
|
|
295
|
+
display: 'flex',
|
|
296
|
+
justifyContent: 'space-between'
|
|
279
297
|
},
|
|
280
|
-
children:
|
|
298
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
|
|
299
|
+
sx: {
|
|
300
|
+
fontWeight: 'bold'
|
|
301
|
+
},
|
|
302
|
+
children: t('common.price')
|
|
303
|
+
})
|
|
281
304
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
|
|
282
305
|
dense: true,
|
|
283
306
|
disablePadding: true,
|
|
284
307
|
children: [{
|
|
285
308
|
label: t('checkout.estimatedCost'),
|
|
286
|
-
value:
|
|
287
|
-
|
|
309
|
+
value: isFreeTrial ? t('checkout.freeTrialHint', {
|
|
310
|
+
duration: (0, _prettyMsI18n.default)(freeTrialDurationSeconds * 1000, {
|
|
311
|
+
locale: locale === 'zh' ? 'zh_CN' : 'en_US',
|
|
312
|
+
compact: true,
|
|
313
|
+
verbose: false
|
|
314
|
+
})
|
|
315
|
+
}) : state.totalPrice,
|
|
316
|
+
hint: t('checkout.estimatedCostHint'),
|
|
317
|
+
highlight: isFreeTrial
|
|
318
|
+
}, {
|
|
319
|
+
label: t('checkout.stakeAmount'),
|
|
320
|
+
value: state.minStakeAmount,
|
|
321
|
+
highlight: false
|
|
288
322
|
}].map(item => {
|
|
289
323
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItem, {
|
|
290
324
|
sx: {
|
|
@@ -292,12 +326,19 @@ function Component(_ref2) {
|
|
|
292
326
|
},
|
|
293
327
|
disablePadding: true,
|
|
294
328
|
disableGutters: true,
|
|
295
|
-
secondaryAction: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
296
|
-
color: "primary.main",
|
|
329
|
+
secondaryAction: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
|
|
297
330
|
sx: {
|
|
331
|
+
display: 'flex',
|
|
332
|
+
flexDirection: 'column',
|
|
333
|
+
alignItems: 'flex-end',
|
|
298
334
|
paddingRight: '4px'
|
|
299
335
|
},
|
|
300
|
-
children:
|
|
336
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
|
|
337
|
+
sx: {
|
|
338
|
+
color: item.highlight ? 'primary.main' : 'default'
|
|
339
|
+
},
|
|
340
|
+
children: item.value
|
|
341
|
+
})
|
|
301
342
|
}),
|
|
302
343
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
|
|
303
344
|
primary: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
@@ -334,6 +375,15 @@ function Component(_ref2) {
|
|
|
334
375
|
})
|
|
335
376
|
}, item.label);
|
|
336
377
|
})
|
|
378
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Alert, {
|
|
379
|
+
severity: "info",
|
|
380
|
+
sx: {
|
|
381
|
+
mt: 2,
|
|
382
|
+
fontStyle: 'italic'
|
|
383
|
+
},
|
|
384
|
+
children: t('checkout.stakeHint', {
|
|
385
|
+
amount: state.minStakeAmount
|
|
386
|
+
})
|
|
337
387
|
})]
|
|
338
388
|
})]
|
|
339
389
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/launcher-ux",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.34",
|
|
4
4
|
"description": "Launcher UX lib",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -46,21 +46,22 @@
|
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@babel/cli": "^7.24.8",
|
|
48
48
|
"@babel/core": "^7.24.9",
|
|
49
|
-
"@babel/preset-env": "^7.
|
|
49
|
+
"@babel/preset-env": "^7.25.0",
|
|
50
50
|
"@babel/preset-react": "^7.24.7",
|
|
51
51
|
"@storybook/react": "^6.5.16",
|
|
52
52
|
"babel-plugin-inline-react-svg": "^2.0.2",
|
|
53
53
|
"glob": "^10.4.5"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@arcblock/ux": "^2.10.
|
|
57
|
-
"@blocklet/launcher-util": "2.3.
|
|
58
|
-
"@blocklet/payment-react": "^1.
|
|
59
|
-
"@emotion/styled": "^11.
|
|
60
|
-
"@mui/icons-material": "^5.16.
|
|
61
|
-
"@mui/material": "^5.16.
|
|
56
|
+
"@arcblock/ux": "^2.10.9",
|
|
57
|
+
"@blocklet/launcher-util": "2.3.34",
|
|
58
|
+
"@blocklet/payment-react": "^1.14.5",
|
|
59
|
+
"@emotion/styled": "^11.13.0",
|
|
60
|
+
"@mui/icons-material": "^5.16.5",
|
|
61
|
+
"@mui/material": "^5.16.5",
|
|
62
62
|
"ahooks": "^3.8.0",
|
|
63
|
-
"
|
|
63
|
+
"pretty-ms-i18n": "^1.0.3",
|
|
64
|
+
"react-use": "^17.5.1"
|
|
64
65
|
},
|
|
65
66
|
"exports": {
|
|
66
67
|
".": {
|
|
@@ -92,5 +93,5 @@
|
|
|
92
93
|
"require": "./lib/use-mobile/index.js"
|
|
93
94
|
}
|
|
94
95
|
},
|
|
95
|
-
"gitHead": "
|
|
96
|
+
"gitHead": "54c8d4db562dd766ed25c2adb05b00f4430d2083"
|
|
96
97
|
}
|