@blocklet/launcher-ux 2.3.33 → 2.3.35

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 (3) hide show
  1. package/es/payment/checkout/on-demand.js +284 -200
  2. package/lib/payment/checkout/on-demand.js +285 -201
  3. package/package.json +12 -11
package/es/payment/checkout/on-demand.js CHANGED
@@ -1,12 +1,18 @@
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';
6
- import { Alert, Avatar, List, ListItem, ListItemAvatar, ListItemText, Tooltip, Typography } from '@mui/material';
7
+ import RocketLaunchIcon from '@mui/icons-material/RocketLaunch';
8
+ import { Alert, Avatar, List, ListItem, ListItemAvatar, ListItemText, Stack, Tooltip, Typography } from '@mui/material';
7
9
  import Box from '@mui/material/Box';
10
+ import Chip from '@mui/material/Chip';
8
11
  import CircularProgress from '@mui/material/CircularProgress';
12
+ import { useTheme } from '@mui/material/styles';
13
+ import useMediaQuery from '@mui/material/useMediaQuery';
9
14
  import { useSetState } from 'ahooks';
15
+ import prettyMs from 'pretty-ms-i18n';
10
16
  import PropTypes from 'prop-types';
11
17
  import useAsync from 'react-use/lib/useAsync';
12
18
  import useMobile from '../../use-mobile';
@@ -21,7 +27,9 @@ export default function CheckoutOnDemand({
21
27
  checkoutPath,
22
28
  session,
23
29
  t,
24
- locale
30
+ locale,
31
+ freeTrialProducts,
32
+ minStakeAmount
25
33
  }) {
26
34
  return /*#__PURE__*/_jsx(Box, {
27
35
  sx: {
@@ -39,7 +47,9 @@ export default function CheckoutOnDemand({
39
47
  components: components,
40
48
  blockletStoreURL: blockletStoreURL,
41
49
  t: t,
42
- locale: locale
50
+ locale: locale,
51
+ freeTrialProducts: freeTrialProducts,
52
+ minStakeAmount: minStakeAmount
43
53
  })
44
54
  })
45
55
  });
@@ -52,7 +62,12 @@ const propTypes = {
52
62
  t: PropTypes.func.isRequired,
53
63
  locale: PropTypes.string.isRequired,
54
64
  api: PropTypes.object.isRequired,
55
- checkoutPath: PropTypes.string.isRequired
65
+ checkoutPath: PropTypes.string.isRequired,
66
+ freeTrialProducts: PropTypes.array,
67
+ minStakeAmount: PropTypes.number.isRequired
68
+ };
69
+ CheckoutOnDemand.defaultProps = {
70
+ freeTrialProducts: []
56
71
  };
57
72
  CheckoutOnDemand.propTypes = {
58
73
  ...propTypes,
@@ -60,6 +75,7 @@ CheckoutOnDemand.propTypes = {
60
75
  session: PropTypes.object.isRequired
61
76
  };
62
77
  Component.propTypes = propTypes;
78
+ Component.defaultProps = CheckoutOnDemand.defaultProps;
63
79
  function Component({
64
80
  launchSessionId,
65
81
  handlePaid,
@@ -68,18 +84,27 @@ function Component({
68
84
  api,
69
85
  checkoutPath,
70
86
  t,
71
- locale
87
+ locale,
88
+ freeTrialProducts,
89
+ minStakeAmount
72
90
  }) {
73
91
  const {
74
92
  getCurrency
75
93
  } = usePaymentContext();
76
94
  const [state, setState] = useSetState({
77
95
  unitPrice: '',
78
- totalPrice: ''
96
+ totalPrice: '',
97
+ minStakeAmount: ''
79
98
  });
80
99
  const {
81
100
  isMobile
82
101
  } = useMobile();
102
+ const theme = useTheme();
103
+ const {
104
+ isFreeTrial,
105
+ duration: freeTrialDurationSeconds
106
+ } = getProductFreeTrial('serverless', freeTrialProducts);
107
+ const minimumWidth = useMediaQuery(theme.breakpoints.down(540));
83
108
  const components = (tempComponents || []).reduce((acc, x) => {
84
109
  if (acc.findIndex(y => y.did === x.did) === -1) {
85
110
  acc.push(x);
@@ -131,234 +156,293 @@ function Component({
131
156
  unitPrice = unitPrice?.replace(new RegExp(`${UNIT_LABEL_PLACEHOLDER}\\s+\\/*`), '');
132
157
  setState({
133
158
  unitPrice,
134
- totalPrice
159
+ totalPrice,
160
+ minStakeAmount: `${minStakeAmount} ${currency.symbol}`
135
161
  });
136
162
  } catch (error) {
137
163
  console.error('calculate failed error', error);
138
164
  }
139
165
  };
140
- return /*#__PURE__*/_jsxs(Box, {
166
+ return /*#__PURE__*/_jsxs(Stack, {
167
+ direction: "column",
168
+ gap: 2,
141
169
  sx: {
142
- display: 'flex',
143
- flexDirection: 'row',
144
- justifyContent: 'space-between',
145
- gap: isMobile ? '32px' : '64px',
146
- height: '100%',
147
170
  width: '100%',
148
- '@media (max-width: 1200px)': {
149
- flexDirection: 'column',
150
- justifyContent: 'flex-start'
151
- }
171
+ height: '100%'
152
172
  },
153
- children: [/*#__PURE__*/_jsxs(Box, {
173
+ children: [isFreeTrial && /*#__PURE__*/_jsx(Box, {
174
+ sx: {
175
+ display: 'flex',
176
+ justifyContent: 'flex-start'
177
+ },
178
+ children: /*#__PURE__*/_jsx(Chip, {
179
+ icon: /*#__PURE__*/_jsx(RocketLaunchIcon, {}),
180
+ label: t('checkout.freeTrialHint', {
181
+ duration: prettyMs(freeTrialDurationSeconds * 1000, {
182
+ locale: locale === 'zh' ? 'zh_CN' : 'en_US',
183
+ compact: true,
184
+ verbose: false
185
+ })
186
+ }),
187
+ color: "success",
188
+ size: "small",
189
+ variant: "contained"
190
+ })
191
+ }), /*#__PURE__*/_jsxs(Box, {
154
192
  sx: {
155
193
  display: 'flex',
156
- flexDirection: 'column',
157
- gap: '24px',
158
- height: '100%',
159
- width: '100%'
194
+ flexDirection: 'row',
195
+ justifyContent: 'space-between',
196
+ gap: isMobile ? '32px' : '64px',
197
+ '@media (max-width: 1200px)': {
198
+ flexDirection: 'column',
199
+ justifyContent: 'flex-start'
200
+ }
160
201
  },
161
202
  children: [/*#__PURE__*/_jsxs(Box, {
162
203
  sx: {
163
204
  display: 'flex',
164
205
  flexDirection: 'column',
165
- gap: '12px'
206
+ gap: '24px',
207
+ height: '100%',
208
+ width: '100%'
166
209
  },
167
- children: [/*#__PURE__*/_jsxs(Typography, {
210
+ children: [/*#__PURE__*/_jsxs(Box, {
168
211
  sx: {
169
- fontWeight: 'bold'
212
+ display: 'flex',
213
+ flexDirection: 'column',
214
+ gap: '12px'
170
215
  },
171
- children: [components?.length <= 1 && t('purchase.componentCount', {
172
- count: components?.length
173
- }), components?.length > 1 && t('purchase.componentsCount', {
174
- count: components?.length
175
- })]
176
- }), /*#__PURE__*/_jsx(List, {
177
- dense: true,
178
- disablePadding: true,
179
- sx: {
180
- maxHeight: '480px',
181
- overflowY: 'auto',
182
- '&::-webkit-scrollbar': {
183
- width: '6px'
216
+ children: [/*#__PURE__*/_jsxs(Typography, {
217
+ sx: {
218
+ fontWeight: 'bold'
184
219
  },
185
- '&::-webkit-scrollbar-track': {
186
- backgroundColor: 'transparent'
187
- },
188
- '&::-webkit-scrollbar-thumb': {
189
- backgroundColor: '#ccc',
190
- borderRadius: '3px'
220
+ children: [components?.length <= 1 && t('purchase.componentCount', {
221
+ count: components?.length
222
+ }), components?.length > 1 && t('purchase.componentsCount', {
223
+ count: components?.length
224
+ })]
225
+ }), /*#__PURE__*/_jsx(List, {
226
+ dense: true,
227
+ disablePadding: true,
228
+ sx: {
229
+ maxHeight: '480px',
230
+ overflowY: 'auto',
231
+ '&::-webkit-scrollbar': {
232
+ width: '6px'
233
+ },
234
+ '&::-webkit-scrollbar-track': {
235
+ backgroundColor: 'transparent'
236
+ },
237
+ '&::-webkit-scrollbar-thumb': {
238
+ backgroundColor: '#ccc',
239
+ borderRadius: '3px'
240
+ },
241
+ '@media (max-width: 1200px)': {
242
+ maxHeight: 'unset'
243
+ }
191
244
  },
192
- '@media (max-width: 1200px)': {
193
- maxHeight: 'unset'
194
- }
245
+ children: components.map(({
246
+ did,
247
+ title,
248
+ logo
249
+ }) => {
250
+ let props = {};
251
+ if (blockletStoreURL) {
252
+ props = {
253
+ component: 'a',
254
+ href: getBlockletUrlOnStore({
255
+ did,
256
+ baseUrl: blockletStoreURL
257
+ })
258
+ };
259
+ }
260
+ return /*#__PURE__*/_jsxs(ListItem, {
261
+ sx: {
262
+ cursor: 'pointer',
263
+ paddingRight: '4px',
264
+ '&:hover': {
265
+ backgroundColor: 'secondary.main',
266
+ borderRadius: '4px'
267
+ }
268
+ },
269
+ disablePadding: true,
270
+ disableGutters: true,
271
+ alignItems: "flex-start",
272
+ target: "_blank",
273
+ ...props,
274
+ children: [/*#__PURE__*/_jsx(ListItemAvatar, {
275
+ children: /*#__PURE__*/_jsx(Avatar, {
276
+ alt: title,
277
+ variant: "rounded",
278
+ src: logo
279
+ })
280
+ }), /*#__PURE__*/_jsx(ListItemText, {
281
+ primary: /*#__PURE__*/_jsx(Typography, {
282
+ children: title
283
+ }),
284
+ secondary: /*#__PURE__*/_jsxs(Box, {
285
+ sx: {
286
+ display: 'flex',
287
+ justifyContent: 'space-between'
288
+ },
289
+ children: [/*#__PURE__*/_jsx(DidAddress, {
290
+ startChars: minimumWidth ? 4 : 6,
291
+ endChars: minimumWidth ? 4 : 6,
292
+ copyable: false,
293
+ did: did
294
+ }), /*#__PURE__*/_jsx(Typography, {
295
+ children: state.unitPrice
296
+ })]
297
+ })
298
+ })]
299
+ }, did);
300
+ })
301
+ })]
302
+ }), /*#__PURE__*/_jsxs(Box, {
303
+ sx: {
304
+ display: 'flex',
305
+ flexDirection: 'column',
306
+ gap: '12px'
195
307
  },
196
- children: components.map(({
197
- did,
198
- title,
199
- logo
200
- }) => {
201
- let props = {};
202
- if (blockletStoreURL) {
203
- props = {
204
- component: 'a',
205
- href: getBlockletUrlOnStore({
206
- did,
207
- baseUrl: blockletStoreURL
208
- })
209
- };
210
- }
211
- return /*#__PURE__*/_jsxs(ListItem, {
308
+ children: [/*#__PURE__*/_jsx(Box, {
309
+ sx: {
310
+ display: 'flex',
311
+ justifyContent: 'space-between'
312
+ },
313
+ children: /*#__PURE__*/_jsx(Typography, {
212
314
  sx: {
213
- cursor: 'pointer',
214
- paddingRight: '4px',
215
- '&:hover': {
216
- backgroundColor: 'secondary.main',
217
- borderRadius: '4px'
218
- }
315
+ fontWeight: 'bold'
219
316
  },
220
- disablePadding: true,
221
- disableGutters: true,
222
- alignItems: "flex-start",
223
- target: "_blank",
224
- ...props,
225
- children: [/*#__PURE__*/_jsx(ListItemAvatar, {
226
- children: /*#__PURE__*/_jsx(Avatar, {
227
- alt: title,
228
- variant: "rounded",
229
- src: logo
230
- })
231
- }), /*#__PURE__*/_jsx(ListItemText, {
232
- primary: /*#__PURE__*/_jsx(Typography, {
233
- children: title
234
- }),
235
- secondary: /*#__PURE__*/_jsxs(Box, {
317
+ children: t('common.price')
318
+ })
319
+ }), /*#__PURE__*/_jsx(List, {
320
+ dense: true,
321
+ disablePadding: true,
322
+ children: [{
323
+ label: t('checkout.stakeAmount'),
324
+ value: state.minStakeAmount,
325
+ highlight: false
326
+ }, {
327
+ label: isFreeTrial ? t('checkout.estimatedCostFreeTrial') : t('checkout.estimatedCost'),
328
+ value: state.totalPrice,
329
+ hint: t('checkout.estimatedCostHint'),
330
+ highlight: isFreeTrial
331
+ }].map(item => {
332
+ return /*#__PURE__*/_jsx(ListItem, {
333
+ disablePadding: true,
334
+ disableGutters: true,
335
+ secondaryAction: !isMobile && /*#__PURE__*/_jsx(Box, {
236
336
  sx: {
237
337
  display: 'flex',
238
- justifyContent: 'space-between'
338
+ flexDirection: 'column',
339
+ alignItems: 'flex-end',
340
+ paddingRight: '4px'
239
341
  },
240
- children: [/*#__PURE__*/_jsx(DidAddress, {
241
- copyable: false,
242
- did: did
243
- }), /*#__PURE__*/_jsx(Typography, {
342
+ children: /*#__PURE__*/_jsx(Typography, {
343
+ children: item.value
344
+ })
345
+ }),
346
+ children: /*#__PURE__*/_jsx(ListItemText, {
347
+ primary: /*#__PURE__*/_jsxs(_Fragment, {
348
+ children: [!item.hint && /*#__PURE__*/_jsx(Typography, {
349
+ sx: {
350
+ fontSize: isMobile ? '0.825rem' : '1rem'
351
+ },
352
+ children: item.label
353
+ }), item.hint && /*#__PURE__*/_jsx(Box, {
354
+ component: "span",
355
+ sx: {
356
+ display: 'flex',
357
+ alignItems: 'center'
358
+ },
359
+ children: /*#__PURE__*/_jsx(Tooltip, {
360
+ title: item.hint,
361
+ placement: "right",
362
+ children: /*#__PURE__*/_jsxs(Box, {
363
+ component: "span",
364
+ sx: {
365
+ display: 'flex',
366
+ alignItems: 'center',
367
+ cursor: 'pointer'
368
+ },
369
+ children: [/*#__PURE__*/_jsx(Typography, {
370
+ sx: {
371
+ fontSize: isMobile ? '0.825rem' : '1rem'
372
+ },
373
+ children: item.label
374
+ }), /*#__PURE__*/_jsx(InfoIcon, {
375
+ fontSize: "small",
376
+ sx: {
377
+ marginLeft: '2px',
378
+ fontSize: isMobile && '0.825rem'
379
+ }
380
+ })]
381
+ })
382
+ })
383
+ })]
384
+ }),
385
+ secondary: isMobile && /*#__PURE__*/_jsx(Typography, {
244
386
  sx: {
245
- color: 'primary.main'
387
+ fontWeight: 'bolder'
246
388
  },
247
- children: state.unitPrice
248
- })]
389
+ children: item.value
390
+ })
249
391
  })
250
- })]
251
- }, did);
252
- })
392
+ }, item.label);
393
+ })
394
+ }), /*#__PURE__*/_jsx(Alert, {
395
+ severity: "info",
396
+ sx: {
397
+ mt: 2,
398
+ fontStyle: 'italic'
399
+ },
400
+ children: t('checkout.stakeHint', {
401
+ amount: state.minStakeAmount
402
+ })
403
+ })]
253
404
  })]
254
- }), /*#__PURE__*/_jsxs(Box, {
405
+ }), /*#__PURE__*/_jsx(Box, {
255
406
  sx: {
256
- display: 'flex',
257
- flexDirection: 'column',
258
- gap: '12px'
259
- },
260
- children: [/*#__PURE__*/_jsx(Typography, {
261
- sx: {
262
- fontWeight: 'bold'
407
+ width: '100%',
408
+ '& .cko-container': {
409
+ minWidth: '100% !important',
410
+ maxWidth: '100% !important'
263
411
  },
264
- children: t('common.price')
265
- }), /*#__PURE__*/_jsx(List, {
266
- dense: true,
267
- disablePadding: true,
268
- children: [{
269
- label: t('checkout.estimatedCost'),
270
- value: state.totalPrice,
271
- hint: t('checkout.estimatedCostHint')
272
- }].map(item => {
273
- return /*#__PURE__*/_jsx(ListItem, {
274
- sx: {
275
- maxHeight: '28px'
276
- },
277
- disablePadding: true,
278
- disableGutters: true,
279
- secondaryAction: /*#__PURE__*/_jsx(Typography, {
280
- color: "primary.main",
281
- sx: {
282
- paddingRight: '4px'
283
- },
284
- children: item.value
285
- }),
286
- children: /*#__PURE__*/_jsx(ListItemText, {
287
- primary: /*#__PURE__*/_jsxs(_Fragment, {
288
- children: [!item.hint && /*#__PURE__*/_jsx(Typography, {
289
- children: item.label
290
- }), item.hint && /*#__PURE__*/_jsx(Box, {
291
- component: "span",
292
- sx: {
293
- display: 'flex',
294
- alignItems: 'center'
295
- },
296
- children: /*#__PURE__*/_jsx(Tooltip, {
297
- title: item.hint,
298
- placement: "right",
299
- children: /*#__PURE__*/_jsxs(Box, {
300
- component: "span",
301
- sx: {
302
- display: 'flex',
303
- alignItems: 'center',
304
- cursor: 'pointer'
305
- },
306
- children: [/*#__PURE__*/_jsx(Typography, {
307
- children: item.label
308
- }), /*#__PURE__*/_jsx(InfoIcon, {
309
- fontSize: "small",
310
- sx: {
311
- marginLeft: '2px'
312
- }
313
- })]
314
- })
315
- })
316
- })]
317
- })
318
- })
319
- }, item.label);
320
- })
321
- })]
322
- })]
323
- }), /*#__PURE__*/_jsx(Box, {
324
- sx: {
325
- width: '100%',
326
- '& .cko-container': {
327
- minWidth: '100% !important',
328
- maxWidth: '100% !important'
329
- },
330
- '& .cko-payment': {
331
- gap: '24px'
332
- },
333
- '& .cko-payment-contact': {
334
- gap: '12px',
335
- '& >div': {
336
- marginBottom: 0
337
- }
338
- },
339
- '& .cko-payment-form': {
340
- marginTop: 0
341
- },
342
- '& .cko-payment-methods': {
343
- gap: '12px',
344
- marginTop: 0,
345
- '&>p': {
346
- marginBottom: 0
412
+ '& .cko-payment': {
413
+ gap: '24px'
414
+ },
415
+ '& .cko-payment-contact': {
416
+ gap: '12px',
417
+ '& >div': {
418
+ marginBottom: 0
419
+ }
420
+ },
421
+ '& .cko-payment-form': {
422
+ marginTop: 0
423
+ },
424
+ '& .cko-payment-methods': {
425
+ gap: '12px',
426
+ marginTop: 0,
427
+ '&>p': {
428
+ marginBottom: 0
429
+ }
430
+ },
431
+ '& .cko-payment-submit': {
432
+ marginTop: 0,
433
+ '& button': {
434
+ fontSize: '1rem !important'
435
+ }
347
436
  }
348
437
  },
349
- '& .cko-payment-submit': {
350
- marginTop: 0,
351
- '& button': {
352
- fontSize: '1rem !important'
353
- }
354
- }
355
- },
356
- children: /*#__PURE__*/_jsx(CheckoutForm, {
357
- id: checkoutSessionId,
358
- mode: "inline-minimal",
359
- onPaid: handlePaid,
360
- onChange: handleChange
361
- })
438
+ children: /*#__PURE__*/_jsx(CheckoutForm, {
439
+ id: checkoutSessionId,
440
+ mode: "inline-minimal",
441
+ onPaid: handlePaid,
442
+ onChange: handleChange,
443
+ action: "Test"
444
+ })
445
+ })]
362
446
  })]
363
447
  });
364
448
  }
package/lib/payment/checkout/on-demand.js CHANGED
@@ -6,13 +6,19 @@ 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/lib/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"));
13
+ var _RocketLaunch = _interopRequireDefault(require("@mui/icons-material/RocketLaunch"));
12
14
  var _material = require("@mui/material");
13
15
  var _Box = _interopRequireDefault(require("@mui/material/Box"));
16
+ var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
14
17
  var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
18
+ var _styles = require("@mui/material/styles");
19
+ var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
15
20
  var _ahooks = require("ahooks");
21
+ var _prettyMsI18n = _interopRequireDefault(require("pretty-ms-i18n"));
16
22
  var _propTypes = _interopRequireDefault(require("prop-types"));
17
23
  var _useAsync = _interopRequireDefault(require("react-use/lib/useAsync"));
18
24
  var _useMobile = _interopRequireDefault(require("../../use-mobile"));
@@ -34,7 +40,9 @@ function CheckoutOnDemand(_ref) {
34
40
  checkoutPath,
35
41
  session,
36
42
  t,
37
- locale
43
+ locale,
44
+ freeTrialProducts,
45
+ minStakeAmount
38
46
  } = _ref;
39
47
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
40
48
  sx: {
@@ -52,7 +60,9 @@ function CheckoutOnDemand(_ref) {
52
60
  components: components,
53
61
  blockletStoreURL: blockletStoreURL,
54
62
  t: t,
55
- locale: locale
63
+ locale: locale,
64
+ freeTrialProducts: freeTrialProducts,
65
+ minStakeAmount: minStakeAmount
56
66
  })
57
67
  })
58
68
  });
@@ -65,13 +75,19 @@ const propTypes = {
65
75
  t: _propTypes.default.func.isRequired,
66
76
  locale: _propTypes.default.string.isRequired,
67
77
  api: _propTypes.default.object.isRequired,
68
- checkoutPath: _propTypes.default.string.isRequired
78
+ checkoutPath: _propTypes.default.string.isRequired,
79
+ freeTrialProducts: _propTypes.default.array,
80
+ minStakeAmount: _propTypes.default.number.isRequired
81
+ };
82
+ CheckoutOnDemand.defaultProps = {
83
+ freeTrialProducts: []
69
84
  };
70
85
  CheckoutOnDemand.propTypes = _objectSpread(_objectSpread({}, propTypes), {}, {
71
86
  connectApi: _propTypes.default.func.isRequired,
72
87
  session: _propTypes.default.object.isRequired
73
88
  });
74
89
  Component.propTypes = propTypes;
90
+ Component.defaultProps = CheckoutOnDemand.defaultProps;
75
91
  function Component(_ref2) {
76
92
  let {
77
93
  launchSessionId,
@@ -81,18 +97,27 @@ function Component(_ref2) {
81
97
  api,
82
98
  checkoutPath,
83
99
  t,
84
- locale
100
+ locale,
101
+ freeTrialProducts,
102
+ minStakeAmount
85
103
  } = _ref2;
86
104
  const {
87
105
  getCurrency
88
106
  } = (0, _paymentReact.usePaymentContext)();
89
107
  const [state, setState] = (0, _ahooks.useSetState)({
90
108
  unitPrice: '',
91
- totalPrice: ''
109
+ totalPrice: '',
110
+ minStakeAmount: ''
92
111
  });
93
112
  const {
94
113
  isMobile
95
114
  } = (0, _useMobile.default)();
115
+ const theme = (0, _styles.useTheme)();
116
+ const {
117
+ isFreeTrial,
118
+ duration: freeTrialDurationSeconds
119
+ } = (0, _util.getProductFreeTrial)('serverless', freeTrialProducts);
120
+ const minimumWidth = (0, _useMediaQuery.default)(theme.breakpoints.down(540));
96
121
  const components = (tempComponents || []).reduce((acc, x) => {
97
122
  if (acc.findIndex(y => y.did === x.did) === -1) {
98
123
  acc.push(x);
@@ -146,235 +171,294 @@ function Component(_ref2) {
146
171
  unitPrice = (_unitPrice = unitPrice) === null || _unitPrice === void 0 ? void 0 : _unitPrice.replace(new RegExp("".concat(UNIT_LABEL_PLACEHOLDER, "\\s+\\/*")), '');
147
172
  setState({
148
173
  unitPrice,
149
- totalPrice
174
+ totalPrice,
175
+ minStakeAmount: "".concat(minStakeAmount, " ").concat(currency.symbol)
150
176
  });
151
177
  } catch (error) {
152
178
  console.error('calculate failed error', error);
153
179
  }
154
180
  };
155
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
181
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
182
+ direction: "column",
183
+ gap: 2,
156
184
  sx: {
157
- display: 'flex',
158
- flexDirection: 'row',
159
- justifyContent: 'space-between',
160
- gap: isMobile ? '32px' : '64px',
161
- height: '100%',
162
185
  width: '100%',
163
- '@media (max-width: 1200px)': {
164
- flexDirection: 'column',
165
- justifyContent: 'flex-start'
166
- }
186
+ height: '100%'
167
187
  },
168
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
188
+ children: [isFreeTrial && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
189
+ sx: {
190
+ display: 'flex',
191
+ justifyContent: 'flex-start'
192
+ },
193
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
194
+ icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RocketLaunch.default, {}),
195
+ label: t('checkout.freeTrialHint', {
196
+ duration: (0, _prettyMsI18n.default)(freeTrialDurationSeconds * 1000, {
197
+ locale: locale === 'zh' ? 'zh_CN' : 'en_US',
198
+ compact: true,
199
+ verbose: false
200
+ })
201
+ }),
202
+ color: "success",
203
+ size: "small",
204
+ variant: "contained"
205
+ })
206
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
169
207
  sx: {
170
208
  display: 'flex',
171
- flexDirection: 'column',
172
- gap: '24px',
173
- height: '100%',
174
- width: '100%'
209
+ flexDirection: 'row',
210
+ justifyContent: 'space-between',
211
+ gap: isMobile ? '32px' : '64px',
212
+ '@media (max-width: 1200px)': {
213
+ flexDirection: 'column',
214
+ justifyContent: 'flex-start'
215
+ }
175
216
  },
176
217
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
177
218
  sx: {
178
219
  display: 'flex',
179
220
  flexDirection: 'column',
180
- gap: '12px'
221
+ gap: '24px',
222
+ height: '100%',
223
+ width: '100%'
181
224
  },
182
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
225
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
183
226
  sx: {
184
- fontWeight: 'bold'
227
+ display: 'flex',
228
+ flexDirection: 'column',
229
+ gap: '12px'
185
230
  },
186
- children: [(components === null || components === void 0 ? void 0 : components.length) <= 1 && t('purchase.componentCount', {
187
- count: components === null || components === void 0 ? void 0 : components.length
188
- }), (components === null || components === void 0 ? void 0 : components.length) > 1 && t('purchase.componentsCount', {
189
- count: components === null || components === void 0 ? void 0 : components.length
190
- })]
191
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
192
- dense: true,
193
- disablePadding: true,
194
- sx: {
195
- maxHeight: '480px',
196
- overflowY: 'auto',
197
- '&::-webkit-scrollbar': {
198
- width: '6px'
231
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
232
+ sx: {
233
+ fontWeight: 'bold'
199
234
  },
200
- '&::-webkit-scrollbar-track': {
201
- backgroundColor: 'transparent'
202
- },
203
- '&::-webkit-scrollbar-thumb': {
204
- backgroundColor: '#ccc',
205
- borderRadius: '3px'
235
+ children: [(components === null || components === void 0 ? void 0 : components.length) <= 1 && t('purchase.componentCount', {
236
+ count: components === null || components === void 0 ? void 0 : components.length
237
+ }), (components === null || components === void 0 ? void 0 : components.length) > 1 && t('purchase.componentsCount', {
238
+ count: components === null || components === void 0 ? void 0 : components.length
239
+ })]
240
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
241
+ dense: true,
242
+ disablePadding: true,
243
+ sx: {
244
+ maxHeight: '480px',
245
+ overflowY: 'auto',
246
+ '&::-webkit-scrollbar': {
247
+ width: '6px'
248
+ },
249
+ '&::-webkit-scrollbar-track': {
250
+ backgroundColor: 'transparent'
251
+ },
252
+ '&::-webkit-scrollbar-thumb': {
253
+ backgroundColor: '#ccc',
254
+ borderRadius: '3px'
255
+ },
256
+ '@media (max-width: 1200px)': {
257
+ maxHeight: 'unset'
258
+ }
206
259
  },
207
- '@media (max-width: 1200px)': {
208
- maxHeight: 'unset'
209
- }
260
+ children: components.map(_ref3 => {
261
+ let {
262
+ did,
263
+ title,
264
+ logo
265
+ } = _ref3;
266
+ let props = {};
267
+ if (blockletStoreURL) {
268
+ props = {
269
+ component: 'a',
270
+ href: (0, _util2.getBlockletUrlOnStore)({
271
+ did,
272
+ baseUrl: blockletStoreURL
273
+ })
274
+ };
275
+ }
276
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, _objectSpread(_objectSpread({
277
+ sx: {
278
+ cursor: 'pointer',
279
+ paddingRight: '4px',
280
+ '&:hover': {
281
+ backgroundColor: 'secondary.main',
282
+ borderRadius: '4px'
283
+ }
284
+ },
285
+ disablePadding: true,
286
+ disableGutters: true,
287
+ alignItems: "flex-start",
288
+ target: "_blank"
289
+ }, props), {}, {
290
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
291
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
292
+ alt: title,
293
+ variant: "rounded",
294
+ src: logo
295
+ })
296
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
297
+ primary: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
298
+ children: title
299
+ }),
300
+ secondary: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
301
+ sx: {
302
+ display: 'flex',
303
+ justifyContent: 'space-between'
304
+ },
305
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
306
+ startChars: minimumWidth ? 4 : 6,
307
+ endChars: minimumWidth ? 4 : 6,
308
+ copyable: false,
309
+ did: did
310
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
311
+ children: state.unitPrice
312
+ })]
313
+ })
314
+ })]
315
+ }), did);
316
+ })
317
+ })]
318
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
319
+ sx: {
320
+ display: 'flex',
321
+ flexDirection: 'column',
322
+ gap: '12px'
210
323
  },
211
- children: components.map(_ref3 => {
212
- let {
213
- did,
214
- title,
215
- logo
216
- } = _ref3;
217
- let props = {};
218
- if (blockletStoreURL) {
219
- props = {
220
- component: 'a',
221
- href: (0, _util.getBlockletUrlOnStore)({
222
- did,
223
- baseUrl: blockletStoreURL
224
- })
225
- };
226
- }
227
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, _objectSpread(_objectSpread({
324
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
325
+ sx: {
326
+ display: 'flex',
327
+ justifyContent: 'space-between'
328
+ },
329
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
228
330
  sx: {
229
- cursor: 'pointer',
230
- paddingRight: '4px',
231
- '&:hover': {
232
- backgroundColor: 'secondary.main',
233
- borderRadius: '4px'
234
- }
331
+ fontWeight: 'bold'
235
332
  },
236
- disablePadding: true,
237
- disableGutters: true,
238
- alignItems: "flex-start",
239
- target: "_blank"
240
- }, props), {}, {
241
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
242
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
243
- alt: title,
244
- variant: "rounded",
245
- src: logo
246
- })
247
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
248
- primary: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
249
- children: title
250
- }),
251
- secondary: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
333
+ children: t('common.price')
334
+ })
335
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
336
+ dense: true,
337
+ disablePadding: true,
338
+ children: [{
339
+ label: t('checkout.stakeAmount'),
340
+ value: state.minStakeAmount,
341
+ highlight: false
342
+ }, {
343
+ label: isFreeTrial ? t('checkout.estimatedCostFreeTrial') : t('checkout.estimatedCost'),
344
+ value: state.totalPrice,
345
+ hint: t('checkout.estimatedCostHint'),
346
+ highlight: isFreeTrial
347
+ }].map(item => {
348
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItem, {
349
+ disablePadding: true,
350
+ disableGutters: true,
351
+ secondaryAction: !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
252
352
  sx: {
253
353
  display: 'flex',
254
- justifyContent: 'space-between'
354
+ flexDirection: 'column',
355
+ alignItems: 'flex-end',
356
+ paddingRight: '4px'
255
357
  },
256
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
257
- copyable: false,
258
- did: did
259
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
358
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
359
+ children: item.value
360
+ })
361
+ }),
362
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
363
+ primary: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
364
+ children: [!item.hint && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
365
+ sx: {
366
+ fontSize: isMobile ? '0.825rem' : '1rem'
367
+ },
368
+ children: item.label
369
+ }), item.hint && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
370
+ component: "span",
371
+ sx: {
372
+ display: 'flex',
373
+ alignItems: 'center'
374
+ },
375
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
376
+ title: item.hint,
377
+ placement: "right",
378
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
379
+ component: "span",
380
+ sx: {
381
+ display: 'flex',
382
+ alignItems: 'center',
383
+ cursor: 'pointer'
384
+ },
385
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
386
+ sx: {
387
+ fontSize: isMobile ? '0.825rem' : '1rem'
388
+ },
389
+ children: item.label
390
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoOutlined.default, {
391
+ fontSize: "small",
392
+ sx: {
393
+ marginLeft: '2px',
394
+ fontSize: isMobile && '0.825rem'
395
+ }
396
+ })]
397
+ })
398
+ })
399
+ })]
400
+ }),
401
+ secondary: isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
260
402
  sx: {
261
- color: 'primary.main'
403
+ fontWeight: 'bolder'
262
404
  },
263
- children: state.unitPrice
264
- })]
405
+ children: item.value
406
+ })
265
407
  })
266
- })]
267
- }), did);
268
- })
408
+ }, item.label);
409
+ })
410
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Alert, {
411
+ severity: "info",
412
+ sx: {
413
+ mt: 2,
414
+ fontStyle: 'italic'
415
+ },
416
+ children: t('checkout.stakeHint', {
417
+ amount: state.minStakeAmount
418
+ })
419
+ })]
269
420
  })]
270
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
421
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
271
422
  sx: {
272
- display: 'flex',
273
- flexDirection: 'column',
274
- gap: '12px'
275
- },
276
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
277
- sx: {
278
- fontWeight: 'bold'
423
+ width: '100%',
424
+ '& .cko-container': {
425
+ minWidth: '100% !important',
426
+ maxWidth: '100% !important'
279
427
  },
280
- children: t('common.price')
281
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
282
- dense: true,
283
- disablePadding: true,
284
- children: [{
285
- label: t('checkout.estimatedCost'),
286
- value: state.totalPrice,
287
- hint: t('checkout.estimatedCostHint')
288
- }].map(item => {
289
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItem, {
290
- sx: {
291
- maxHeight: '28px'
292
- },
293
- disablePadding: true,
294
- disableGutters: true,
295
- secondaryAction: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
296
- color: "primary.main",
297
- sx: {
298
- paddingRight: '4px'
299
- },
300
- children: item.value
301
- }),
302
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
303
- primary: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
304
- children: [!item.hint && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
305
- children: item.label
306
- }), item.hint && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
307
- component: "span",
308
- sx: {
309
- display: 'flex',
310
- alignItems: 'center'
311
- },
312
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
313
- title: item.hint,
314
- placement: "right",
315
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
316
- component: "span",
317
- sx: {
318
- display: 'flex',
319
- alignItems: 'center',
320
- cursor: 'pointer'
321
- },
322
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
323
- children: item.label
324
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoOutlined.default, {
325
- fontSize: "small",
326
- sx: {
327
- marginLeft: '2px'
328
- }
329
- })]
330
- })
331
- })
332
- })]
333
- })
334
- })
335
- }, item.label);
336
- })
337
- })]
338
- })]
339
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
340
- sx: {
341
- width: '100%',
342
- '& .cko-container': {
343
- minWidth: '100% !important',
344
- maxWidth: '100% !important'
345
- },
346
- '& .cko-payment': {
347
- gap: '24px'
348
- },
349
- '& .cko-payment-contact': {
350
- gap: '12px',
351
- '& >div': {
352
- marginBottom: 0
353
- }
354
- },
355
- '& .cko-payment-form': {
356
- marginTop: 0
357
- },
358
- '& .cko-payment-methods': {
359
- gap: '12px',
360
- marginTop: 0,
361
- '&>p': {
362
- marginBottom: 0
428
+ '& .cko-payment': {
429
+ gap: '24px'
430
+ },
431
+ '& .cko-payment-contact': {
432
+ gap: '12px',
433
+ '& >div': {
434
+ marginBottom: 0
435
+ }
436
+ },
437
+ '& .cko-payment-form': {
438
+ marginTop: 0
439
+ },
440
+ '& .cko-payment-methods': {
441
+ gap: '12px',
442
+ marginTop: 0,
443
+ '&>p': {
444
+ marginBottom: 0
445
+ }
446
+ },
447
+ '& .cko-payment-submit': {
448
+ marginTop: 0,
449
+ '& button': {
450
+ fontSize: '1rem !important'
451
+ }
363
452
  }
364
453
  },
365
- '& .cko-payment-submit': {
366
- marginTop: 0,
367
- '& button': {
368
- fontSize: '1rem !important'
369
- }
370
- }
371
- },
372
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_paymentReact.CheckoutForm, {
373
- id: checkoutSessionId,
374
- mode: "inline-minimal",
375
- onPaid: handlePaid,
376
- onChange: handleChange
377
- })
454
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_paymentReact.CheckoutForm, {
455
+ id: checkoutSessionId,
456
+ mode: "inline-minimal",
457
+ onPaid: handlePaid,
458
+ onChange: handleChange,
459
+ action: "Test"
460
+ })
461
+ })]
378
462
  })]
379
463
  });
380
464
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/launcher-ux",
3
- "version": "2.3.33",
3
+ "version": "2.3.35",
4
4
  "description": "Launcher UX lib",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -45,22 +45,23 @@
45
45
  },
46
46
  "devDependencies": {
47
47
  "@babel/cli": "^7.24.8",
48
- "@babel/core": "^7.24.9",
49
- "@babel/preset-env": "^7.24.8",
48
+ "@babel/core": "^7.25.2",
49
+ "@babel/preset-env": "^7.25.2",
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.5",
57
- "@blocklet/launcher-util": "2.3.33",
58
- "@blocklet/payment-react": "^1.13.303",
59
- "@emotion/styled": "^11.11.5",
60
- "@mui/icons-material": "^5.16.4",
61
- "@mui/material": "^5.16.4",
56
+ "@arcblock/ux": "^2.10.10",
57
+ "@blocklet/launcher-util": "2.3.35",
58
+ "@blocklet/payment-react": "^1.14.6",
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
- "react-use": "^17.5.0"
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": "75ae66c63237205cf514a901f826390a07081f9c"
96
+ "gitHead": "e911a8f6561282c5d6173098d1666725d1e7f1d1"
96
97
  }