@blocklet/launcher-ux 2.3.116 → 2.3.118

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 +237 -198
  2. package/lib/payment/checkout/on-demand.js +245 -203
  3. package/package.json +9 -9
package/es/payment/checkout/on-demand.js CHANGED
@@ -1,22 +1,39 @@
1
- import DidAddress from '@arcblock/ux/lib/DID';
2
1
  import formatError from '@blocklet/launcher-util/es/format-error';
3
2
  import { getProductFreeTrial } from '@blocklet/launcher-util/es/util';
4
3
  import { getBlockletUrlOnStore } from '@blocklet/launcher-util/lib/util';
5
4
  import { CheckoutForm, PaymentProvider, formatPrice, usePaymentContext } from '@blocklet/payment-react';
6
5
  import InfoIcon from '@mui/icons-material/InfoOutlined';
7
6
  import RocketLaunchIcon from '@mui/icons-material/RocketLaunch';
8
- import { Alert, Avatar, List, ListItem, ListItemAvatar, ListItemText, Stack, Tooltip, Typography } from '@mui/material';
7
+ import { Alert, Avatar, Collapse, Divider, IconButton, List, ListItem, ListItemText, Stack, Tooltip, Typography } from '@mui/material';
9
8
  import Box from '@mui/material/Box';
10
9
  import Chip from '@mui/material/Chip';
11
10
  import CircularProgress from '@mui/material/CircularProgress';
12
- import { useTheme } from '@mui/material/styles';
13
- import useMediaQuery from '@mui/material/useMediaQuery';
11
+ import { styled } from '@mui/material/styles';
12
+ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
14
13
  import { useSetState } from 'ahooks';
15
14
  import prettyMs from 'pretty-ms-i18n';
16
15
  import PropTypes from 'prop-types';
17
16
  import useAsync from 'react-use/lib/useAsync';
18
17
  import useMobile from '../../use-mobile';
19
18
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
19
+ const ExpandMore = styled(props => {
20
+ const {
21
+ expand,
22
+ ...other
23
+ } = props;
24
+ return /*#__PURE__*/_jsx(IconButton, {
25
+ ...other
26
+ });
27
+ })(({
28
+ theme,
29
+ expand
30
+ }) => ({
31
+ transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
32
+ marginLeft: 'auto',
33
+ transition: theme.transitions.create('transform', {
34
+ duration: theme.transitions.duration.shortest
35
+ })
36
+ }));
20
37
  export default function CheckoutOnDemand({
21
38
  launchSessionId,
22
39
  handlePaid,
@@ -31,7 +48,8 @@ export default function CheckoutOnDemand({
31
48
  locale,
32
49
  freeTrialProducts,
33
50
  minStakeAmount,
34
- isResume
51
+ isResume,
52
+ blockletMeta
35
53
  }) {
36
54
  return /*#__PURE__*/_jsx(Box, {
37
55
  sx: {
@@ -53,7 +71,8 @@ export default function CheckoutOnDemand({
53
71
  locale: locale,
54
72
  freeTrialProducts: freeTrialProducts,
55
73
  minStakeAmount: minStakeAmount,
56
- isResume: isResume
74
+ isResume: isResume,
75
+ blockletMeta: blockletMeta
57
76
  })
58
77
  })
59
78
  });
@@ -70,11 +89,13 @@ const propTypes = {
70
89
  checkoutSession: PropTypes.object,
71
90
  freeTrialProducts: PropTypes.array,
72
91
  minStakeAmount: PropTypes.number.isRequired,
73
- isResume: PropTypes.bool
92
+ isResume: PropTypes.bool,
93
+ blockletMeta: PropTypes.object
74
94
  };
75
95
  CheckoutOnDemand.defaultProps = {
76
96
  freeTrialProducts: [],
77
- isResume: false
97
+ isResume: false,
98
+ blockletMeta: {}
78
99
  };
79
100
  CheckoutOnDemand.propTypes = {
80
101
  ...propTypes,
@@ -95,9 +116,9 @@ function Component({
95
116
  locale,
96
117
  freeTrialProducts,
97
118
  minStakeAmount,
98
- isResume
119
+ isResume,
120
+ blockletMeta
99
121
  }) {
100
- const theme = useTheme();
101
122
  const {
102
123
  isMobile
103
124
  } = useMobile();
@@ -106,13 +127,12 @@ function Component({
106
127
  getMethod
107
128
  } = usePaymentContext();
108
129
  const [state, setState] = useSetState({
109
- unitPrice: '',
110
- totalPrice: '',
111
- minStakeAmount: '',
130
+ currency: null,
131
+ paymentMethod: null,
132
+ freeTrial: null,
112
133
  shouldStake: true,
113
- freeTrial: null
134
+ expand: false
114
135
  });
115
- const minimumWidth = useMediaQuery(theme.breakpoints.down(540));
116
136
  const components = (tempComponents || []).reduce((acc, x) => {
117
137
  if (acc.findIndex(y => y.did === x.did) === -1) {
118
138
  acc.push(x);
@@ -165,11 +185,6 @@ function Component({
165
185
  } = {}) => {
166
186
  try {
167
187
  const currency = getCurrency(currencyId);
168
- const UNIT_LABEL_PLACEHOLDER = 'UNIT_LABEL_TEMPLATES';
169
- let totalPrice = formatPrice(price, currency, UNIT_LABEL_PLACEHOLDER, quantity, true, locale);
170
- totalPrice = totalPrice?.replace(new RegExp(`${UNIT_LABEL_PLACEHOLDER}\\s+\\/*`), '');
171
- let unitPrice = formatPrice(price, currency, UNIT_LABEL_PLACEHOLDER, 1, true, locale);
172
- unitPrice = unitPrice?.replace(new RegExp(`${UNIT_LABEL_PLACEHOLDER}\\s+\\/*`), '');
173
188
  const paymentMethod = getMethod(paymentMethodId);
174
189
  const freeTrial = getProductFreeTrial({
175
190
  typeName: 'serverless',
@@ -177,203 +192,223 @@ function Component({
177
192
  currencyId: currency?.id || currencyId
178
193
  });
179
194
  setState({
180
- unitPrice,
181
- totalPrice,
182
- minStakeAmount: `${minStakeAmount} ${currency?.symbol || ''}`.trim(),
183
- shouldStake: paymentMethod?.type === 'arcblock',
184
- freeTrial
195
+ currency,
196
+ paymentMethod,
197
+ freeTrial,
198
+ shouldStake: paymentMethod?.type === 'arcblock'
185
199
  });
186
200
  } catch (error) {
187
201
  console.error('calculate failed error', error);
188
202
  }
189
203
  };
190
- return /*#__PURE__*/_jsxs(Stack, {
204
+ const formatPriceWithLocale = (p, q = 1) => {
205
+ if (!state.currency) return '';
206
+ const UNIT_LABEL_PLACEHOLDER = 'UNIT_LABEL_TEMPLATES';
207
+ const formattedPrice = formatPrice(p, state.currency, UNIT_LABEL_PLACEHOLDER, q, true, locale);
208
+ return formattedPrice?.replace(new RegExp(`${UNIT_LABEL_PLACEHOLDER}\\s+\\/*`), '');
209
+ };
210
+ const unitPrice = formatPriceWithLocale(price, 1);
211
+ const totalPrice = formatPriceWithLocale(price, quantity);
212
+ const formattedMinStakeAmount = state.currency ? `${minStakeAmount} ${state.currency?.symbol || ''}`.trim() : '';
213
+ const currencyOptions = price?.currency_options || [];
214
+ const productList = /*#__PURE__*/_jsx(Box, {
215
+ sx: {
216
+ display: 'flex',
217
+ flexDirection: 'column',
218
+ gap: 1,
219
+ flex: 1,
220
+ minHeight: 0,
221
+ overflowY: isMobile ? 'visible' : 'auto',
222
+ maxHeight: isMobile ? 'auto' : 'calc(70vh - 400px)'
223
+ },
224
+ children: components.map(({
225
+ did,
226
+ title,
227
+ logo,
228
+ bundleSource
229
+ }) => {
230
+ let props = {};
231
+ if (blockletStoreURL || bundleSource) {
232
+ let blockletURL = '';
233
+ if (bundleSource?.store) {
234
+ blockletURL = getBlockletUrlOnStore({
235
+ did,
236
+ baseUrl: bundleSource?.store
237
+ });
238
+ } else {
239
+ blockletURL = getBlockletUrlOnStore({
240
+ did,
241
+ baseUrl: blockletStoreURL
242
+ });
243
+ }
244
+ props = {
245
+ component: 'a',
246
+ href: blockletURL
247
+ };
248
+ }
249
+ return /*#__PURE__*/_jsxs(Box, {
250
+ sx: {
251
+ display: 'flex',
252
+ alignItems: 'center',
253
+ borderRadius: '4px',
254
+ px: 1,
255
+ py: 0.5,
256
+ minHeight: 44,
257
+ cursor: 'pointer',
258
+ '&:hover': {
259
+ backgroundColor: 'secondary.main',
260
+ borderRadius: '4px'
261
+ }
262
+ },
263
+ target: "_blank",
264
+ ...props,
265
+ children: [/*#__PURE__*/_jsx(Avatar, {
266
+ alt: title,
267
+ variant: "rounded",
268
+ src: logo,
269
+ sx: {
270
+ mr: 1
271
+ }
272
+ }), /*#__PURE__*/_jsx(Typography, {
273
+ sx: {
274
+ fontWeight: 500,
275
+ fontSize: '1rem',
276
+ color: 'text.primary',
277
+ whiteSpace: 'nowrap',
278
+ overflow: 'hidden',
279
+ textOverflow: 'ellipsis',
280
+ flex: 1,
281
+ minWidth: 0,
282
+ mr: 1
283
+ },
284
+ children: title
285
+ }), /*#__PURE__*/_jsx(Typography, {
286
+ sx: {
287
+ color: 'text.primary',
288
+ fontSize: '1rem',
289
+ textAlign: 'right',
290
+ whiteSpace: 'nowrap'
291
+ },
292
+ children: unitPrice
293
+ })]
294
+ }, did);
295
+ })
296
+ });
297
+ return /*#__PURE__*/_jsx(Stack, {
191
298
  direction: "column",
192
299
  gap: 2,
193
300
  sx: {
194
301
  width: '100%',
195
302
  height: '100%'
196
303
  },
197
- children: [state.freeTrial && /*#__PURE__*/_jsx(Box, {
304
+ children: /*#__PURE__*/_jsxs(Box, {
198
305
  sx: {
199
306
  display: 'flex',
200
- justifyContent: 'flex-start'
201
- },
202
- children: /*#__PURE__*/_jsx(Chip, {
203
- icon: /*#__PURE__*/_jsx(RocketLaunchIcon, {}),
204
- label: t('checkout.freeTrialHint', {
205
- duration: prettyMs(state.freeTrial.duration * 1000, {
206
- locale: locale === 'zh' ? 'zh_CN' : 'en_US',
207
- compact: true,
208
- verbose: true,
209
- unitCount: 1
210
- })
211
- }),
212
- color: "success",
213
- size: "small",
214
- variant: "contained"
215
- })
216
- }), /*#__PURE__*/_jsxs(Box, {
217
- sx: {
218
- display: 'flex',
219
- flexDirection: 'row',
220
307
  justifyContent: 'space-between',
221
308
  gap: isMobile ? '32px' : '64px',
222
- '@media (max-width: 1200px)': {
223
- flexDirection: 'column',
224
- justifyContent: 'flex-start'
225
- }
309
+ flexDirection: isMobile ? 'column' : 'row',
310
+ alignItems: isMobile ? 'center' : 'flex-start'
226
311
  },
227
312
  children: [/*#__PURE__*/_jsxs(Box, {
228
313
  sx: {
229
314
  display: 'flex',
230
315
  flexDirection: 'column',
231
- gap: '24px',
316
+ gap: 2,
232
317
  height: '100%',
233
- width: '100%'
318
+ width: '100%',
319
+ flex: '1'
234
320
  },
235
- children: [/*#__PURE__*/_jsxs(Box, {
236
- sx: {
237
- display: 'flex',
238
- flexDirection: 'column',
239
- gap: '12px'
240
- },
241
- children: [/*#__PURE__*/_jsxs(Typography, {
242
- sx: {
243
- fontWeight: 'bold'
244
- },
245
- children: [components?.length <= 1 && t('purchase.componentCount', {
246
- count: components?.length
247
- }), components?.length > 1 && t('purchase.componentsCount', {
248
- count: components?.length
249
- })]
250
- }), /*#__PURE__*/_jsx(List, {
251
- dense: true,
252
- disablePadding: true,
253
- sx: {
254
- // maxHeight: { xs: '240px', md: '360px' },
255
- // maxHeight: { xs: 'unset', lg: '120px', xl: '320px' },
256
- overflowY: 'auto',
257
- '&::-webkit-scrollbar': {
258
- width: '6px'
259
- },
260
- '&::-webkit-scrollbar-track': {
261
- backgroundColor: 'transparent'
262
- },
263
- '&::-webkit-scrollbar-thumb': {
264
- backgroundColor: '#ccc',
265
- borderRadius: '3px'
266
- },
267
- '@media (min-height: 1400px)': {
268
- maxHeight: '380px'
269
- },
270
- '@media (max-height: 1399px)': {
271
- maxHeight: '280px'
272
- },
273
- '@media (max-height: 900px)': {
274
- maxHeight: '160px'
275
- },
276
- '@media (max-height: 600px)': {
277
- maxHeight: '120px'
321
+ children: [/*#__PURE__*/_jsxs(Stack, {
322
+ gap: 1,
323
+ children: [/*#__PURE__*/_jsxs(Stack, {
324
+ direction: "row",
325
+ justifyContent: "space-between",
326
+ alignItems: "center",
327
+ children: [/*#__PURE__*/_jsxs(Box, {
328
+ sx: {
329
+ display: 'flex',
330
+ flexDirection: 'row',
331
+ gap: 1,
332
+ alignItems: 'center'
278
333
  },
279
- '@media (max-width: 900px)': {
280
- maxHeight: 'unset'
281
- }
282
- },
283
- children: components.map(({
284
- did,
285
- title,
286
- logo,
287
- bundleSource
288
- }) => {
289
- let props = {};
290
- if (blockletStoreURL || bundleSource) {
291
- let blockletURL = '';
292
- if (bundleSource?.store) {
293
- blockletURL = getBlockletUrlOnStore({
294
- did,
295
- baseUrl: bundleSource?.store
296
- });
297
- } else {
298
- blockletURL = getBlockletUrlOnStore({
299
- did,
300
- baseUrl: blockletStoreURL
301
- });
302
- }
303
- props = {
304
- component: 'a',
305
- href: blockletURL
306
- };
307
- }
308
- return /*#__PURE__*/_jsxs(ListItem, {
334
+ children: [blockletMeta?.title && /*#__PURE__*/_jsx(Typography, {
309
335
  sx: {
310
- cursor: 'pointer',
311
- paddingRight: '4px',
312
- '&:hover': {
313
- backgroundColor: 'secondary.main',
314
- borderRadius: '4px'
315
- }
336
+ fontWeight: 'bold',
337
+ lineHeight: '32px'
316
338
  },
317
- disablePadding: true,
318
- disableGutters: true,
319
- alignItems: "flex-start",
320
- target: "_blank",
321
- ...props,
322
- children: [/*#__PURE__*/_jsx(ListItemAvatar, {
323
- children: /*#__PURE__*/_jsx(Avatar, {
324
- alt: title,
325
- variant: "rounded",
326
- src: logo
327
- })
328
- }), /*#__PURE__*/_jsx(ListItemText, {
329
- primary: /*#__PURE__*/_jsx(Typography, {
330
- children: title
331
- }),
332
- secondary: /*#__PURE__*/_jsxs(Box, {
333
- sx: {
334
- display: 'flex',
335
- justifyContent: 'space-between'
336
- },
337
- children: [/*#__PURE__*/_jsx(DidAddress, {
338
- startChars: minimumWidth ? 4 : 6,
339
- endChars: minimumWidth ? 4 : 6,
340
- copyable: false,
341
- did: did
342
- }), /*#__PURE__*/_jsx(Typography, {
343
- children: state.unitPrice
344
- })]
345
- })
339
+ children: blockletMeta?.title
340
+ }), /*#__PURE__*/_jsxs(Typography, {
341
+ variant: "body2",
342
+ sx: {
343
+ color: 'text.secondary',
344
+ lineHeight: '32px'
345
+ },
346
+ children: [components?.length <= 1 && t('purchase.componentCount', {
347
+ count: components?.length
348
+ }), components?.length > 1 && t('purchase.componentsCount', {
349
+ count: components?.length
346
350
  })]
347
- }, did);
348
- })
349
- })]
351
+ })]
352
+ }), isMobile && /*#__PURE__*/_jsx(ExpandMore, {
353
+ expand: state.expanded,
354
+ "aria-expanded": state.expanded,
355
+ "aria-label": "show more",
356
+ children: /*#__PURE__*/_jsx(ExpandMoreIcon, {
357
+ onClick: () => setState({
358
+ expanded: !state.expanded
359
+ })
360
+ })
361
+ })]
362
+ }), isMobile ? /*#__PURE__*/_jsx(Collapse, {
363
+ in: state.expanded,
364
+ children: productList
365
+ }) : productList, /*#__PURE__*/_jsx(Divider, {})]
350
366
  }), /*#__PURE__*/_jsxs(Box, {
351
367
  sx: {
352
368
  display: 'flex',
353
369
  flexDirection: 'column',
354
370
  gap: '12px'
355
371
  },
356
- children: [/*#__PURE__*/_jsx(Box, {
372
+ children: [/*#__PURE__*/_jsxs(Box, {
357
373
  sx: {
358
374
  display: 'flex',
359
- justifyContent: 'space-between'
375
+ gap: 1
360
376
  },
361
- children: /*#__PURE__*/_jsx(Typography, {
377
+ children: [/*#__PURE__*/_jsx(Typography, {
362
378
  sx: {
363
379
  fontWeight: 'bold'
364
380
  },
365
381
  children: t('common.price')
366
- })
382
+ }), state.freeTrial && /*#__PURE__*/_jsx(Box, {
383
+ sx: {
384
+ display: 'flex',
385
+ justifyContent: 'flex-start'
386
+ },
387
+ children: /*#__PURE__*/_jsx(Chip, {
388
+ icon: /*#__PURE__*/_jsx(RocketLaunchIcon, {}),
389
+ label: t('checkout.freeTrialHint', {
390
+ duration: prettyMs(state.freeTrial.duration * 1000, {
391
+ locale: locale === 'zh' ? 'zh_CN' : 'en_US',
392
+ compact: true,
393
+ verbose: true,
394
+ unitCount: 1
395
+ })
396
+ }),
397
+ color: "success",
398
+ size: "small",
399
+ variant: "contained"
400
+ })
401
+ })]
367
402
  }), /*#__PURE__*/_jsx(List, {
368
403
  dense: true,
369
404
  disablePadding: true,
370
405
  children: [state.shouldStake && {
371
406
  label: t('checkout.stakeAmount'),
372
- value: state.minStakeAmount,
407
+ value: formattedMinStakeAmount,
373
408
  highlight: false
374
409
  }, {
375
410
  label: state.isFreeTrial ? t('checkout.estimatedCostFreeTrial') : t('checkout.estimatedCost'),
376
- value: state.totalPrice,
411
+ value: totalPrice,
377
412
  hint: t('checkout.estimatedCostHint'),
378
413
  highlight: state.isFreeTrial
379
414
  }].map(item => {
@@ -383,6 +418,13 @@ function Component({
383
418
  return /*#__PURE__*/_jsx(ListItem, {
384
419
  disablePadding: true,
385
420
  disableGutters: true,
421
+ sx: {
422
+ '& .MuiListItemText-root': {
423
+ display: 'flex',
424
+ flexDirection: 'row',
425
+ justifyContent: 'space-between'
426
+ }
427
+ },
386
428
  secondaryAction: !isMobile && /*#__PURE__*/_jsx(Box, {
387
429
  sx: {
388
430
  display: 'flex',
@@ -398,7 +440,7 @@ function Component({
398
440
  primary: /*#__PURE__*/_jsxs(_Fragment, {
399
441
  children: [!item.hint && /*#__PURE__*/_jsx(Typography, {
400
442
  sx: {
401
- fontSize: isMobile ? '0.825rem' : '1rem'
443
+ fontSize: '1rem'
402
444
  },
403
445
  children: item.label
404
446
  }), item.hint && /*#__PURE__*/_jsx(Box, {
@@ -419,7 +461,7 @@ function Component({
419
461
  },
420
462
  children: [/*#__PURE__*/_jsx(Typography, {
421
463
  sx: {
422
- fontSize: isMobile ? '0.825rem' : '1rem'
464
+ fontSize: '1rem'
423
465
  },
424
466
  children: item.label
425
467
  }), /*#__PURE__*/_jsx(InfoIcon, {
@@ -449,29 +491,24 @@ function Component({
449
491
  fontStyle: 'italic'
450
492
  },
451
493
  children: t('checkout.stakeHint', {
452
- amount: state.minStakeAmount
494
+ amount: formattedMinStakeAmount
453
495
  })
454
496
  })]
455
497
  })]
456
498
  }), /*#__PURE__*/_jsx(Box, {
457
499
  sx: {
500
+ flex: '1',
458
501
  width: '100%',
459
- '& .cko-container': {
460
- minWidth: '100% !important',
461
- maxWidth: '100% !important',
462
- '&>div': {
463
- padding: 0
464
- }
465
- },
466
502
  '& .cko-payment': {
467
- gap: '24px',
503
+ width: '100% !important',
468
504
  '&>hr': {
469
505
  display: 'none'
506
+ },
507
+ '&::before': {
508
+ display: 'none'
470
509
  }
471
510
  },
472
511
  '& .cko-payment-contact': {
473
- gap: '12px',
474
- lineHeight: '1.5rem',
475
512
  '&>*': {
476
513
  marginBottom: 0
477
514
  },
@@ -479,31 +516,33 @@ function Component({
479
516
  fontSize: '1rem'
480
517
  }
481
518
  },
482
- '& .cko-payment-form': {
483
- gap: '12px'
519
+ '.cko-payment-methods': {
520
+ marginTop: 0.5
484
521
  },
485
- '& .cko-payment-methods': {
486
- gap: '12px',
487
- marginTop: 0,
488
- '&>p': {
489
- marginBottom: 0
490
- }
522
+ '.base-card': {
523
+ padding: '0 !important',
524
+ maxWidth: '100%'
491
525
  },
492
526
  '& .cko-payment-submit': {
493
- marginTop: 0,
494
- '& button': {
495
- fontSize: '1rem !important'
496
- },
527
+ marginTop: isMobile ? 0 : 3,
528
+ paddingBottom: isMobile ? '64px' : 0,
497
529
  [isMobile && '.cko-payment-submit-btn']: {
498
530
  position: 'fixed',
499
- bottom: '12px',
531
+ bottom: '0px',
532
+ paddingBottom: '12px',
500
533
  left: '0px',
501
534
  right: '0px',
502
535
  zIndex: 999,
503
- background: 'rgb(255, 255, 255)',
536
+ backgroundColor: 'background.paper',
504
537
  padding: '12px',
505
538
  textAlign: 'center'
506
539
  }
540
+ },
541
+ '.cko-currency-selector': {
542
+ ...(currencyOptions?.length < 6 ? {
543
+ display: 'flex !important',
544
+ flexDirection: 'column'
545
+ } : {})
507
546
  }
508
547
  },
509
548
  children: /*#__PURE__*/_jsx(CheckoutForm, {
@@ -514,6 +553,6 @@ function Component({
514
553
  theme: "inherit"
515
554
  })
516
555
  })]
517
- })]
556
+ })
518
557
  });
519
558
  }
package/lib/payment/checkout/on-demand.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = CheckoutOnDemand;
7
- var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
8
7
  var _formatError = _interopRequireDefault(require("@blocklet/launcher-util/es/format-error"));
9
8
  var _util = require("@blocklet/launcher-util/es/util");
10
9
  var _util2 = require("@blocklet/launcher-util/lib/util");
@@ -16,20 +15,42 @@ var _Box = _interopRequireDefault(require("@mui/material/Box"));
16
15
  var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
17
16
  var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
18
17
  var _styles = require("@mui/material/styles");
19
- var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
18
+ var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
20
19
  var _ahooks = require("ahooks");
21
20
  var _prettyMsI18n = _interopRequireDefault(require("pretty-ms-i18n"));
22
21
  var _propTypes = _interopRequireDefault(require("prop-types"));
23
22
  var _useAsync = _interopRequireDefault(require("react-use/lib/useAsync"));
24
23
  var _useMobile = _interopRequireDefault(require("../../use-mobile"));
25
24
  var _jsxRuntime = require("react/jsx-runtime");
25
+ const _excluded = ["expand"];
26
26
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
27
27
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
28
28
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
29
29
  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
30
30
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
31
31
  function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
32
- function CheckoutOnDemand(_ref) {
32
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
33
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
34
+ const ExpandMore = (0, _styles.styled)(props => {
35
+ const {
36
+ expand
37
+ } = props,
38
+ other = _objectWithoutProperties(props, _excluded);
39
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread({}, other));
40
+ })(_ref => {
41
+ let {
42
+ theme,
43
+ expand
44
+ } = _ref;
45
+ return {
46
+ transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
47
+ marginLeft: 'auto',
48
+ transition: theme.transitions.create('transform', {
49
+ duration: theme.transitions.duration.shortest
50
+ })
51
+ };
52
+ });
53
+ function CheckoutOnDemand(_ref2) {
33
54
  let {
34
55
  launchSessionId,
35
56
  handlePaid,
@@ -44,8 +65,9 @@ function CheckoutOnDemand(_ref) {
44
65
  locale,
45
66
  freeTrialProducts,
46
67
  minStakeAmount,
47
- isResume
48
- } = _ref;
68
+ isResume,
69
+ blockletMeta
70
+ } = _ref2;
49
71
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
50
72
  sx: {
51
73
  display: 'flex',
@@ -66,7 +88,8 @@ function CheckoutOnDemand(_ref) {
66
88
  locale: locale,
67
89
  freeTrialProducts: freeTrialProducts,
68
90
  minStakeAmount: minStakeAmount,
69
- isResume: isResume
91
+ isResume: isResume,
92
+ blockletMeta: blockletMeta
70
93
  })
71
94
  })
72
95
  });
@@ -83,11 +106,13 @@ const propTypes = {
83
106
  checkoutSession: _propTypes.default.object,
84
107
  freeTrialProducts: _propTypes.default.array,
85
108
  minStakeAmount: _propTypes.default.number.isRequired,
86
- isResume: _propTypes.default.bool
109
+ isResume: _propTypes.default.bool,
110
+ blockletMeta: _propTypes.default.object
87
111
  };
88
112
  CheckoutOnDemand.defaultProps = {
89
113
  freeTrialProducts: [],
90
- isResume: false
114
+ isResume: false,
115
+ blockletMeta: {}
91
116
  };
92
117
  CheckoutOnDemand.propTypes = _objectSpread(_objectSpread({}, propTypes), {}, {
93
118
  connectApi: _propTypes.default.func.isRequired,
@@ -95,7 +120,8 @@ CheckoutOnDemand.propTypes = _objectSpread(_objectSpread({}, propTypes), {}, {
95
120
  });
96
121
  Component.propTypes = propTypes;
97
122
  Component.defaultProps = CheckoutOnDemand.defaultProps;
98
- function Component(_ref2) {
123
+ function Component(_ref3) {
124
+ var _state$currency;
99
125
  let {
100
126
  launchSessionId,
101
127
  handlePaid,
@@ -108,9 +134,9 @@ function Component(_ref2) {
108
134
  locale,
109
135
  freeTrialProducts,
110
136
  minStakeAmount,
111
- isResume
112
- } = _ref2;
113
- const theme = (0, _styles.useTheme)();
137
+ isResume,
138
+ blockletMeta
139
+ } = _ref3;
114
140
  const {
115
141
  isMobile
116
142
  } = (0, _useMobile.default)();
@@ -119,13 +145,12 @@ function Component(_ref2) {
119
145
  getMethod
120
146
  } = (0, _paymentReact.usePaymentContext)();
121
147
  const [state, setState] = (0, _ahooks.useSetState)({
122
- unitPrice: '',
123
- totalPrice: '',
124
- minStakeAmount: '',
148
+ currency: null,
149
+ paymentMethod: null,
150
+ freeTrial: null,
125
151
  shouldStake: true,
126
- freeTrial: null
152
+ expand: false
127
153
  });
128
- const minimumWidth = (0, _useMediaQuery.default)(theme.breakpoints.down(540));
129
154
  const components = (tempComponents || []).reduce((acc, x) => {
130
155
  if (acc.findIndex(y => y.did === x.did) === -1) {
131
156
  acc.push(x);
@@ -178,13 +203,7 @@ function Component(_ref2) {
178
203
  payment_method: paymentMethodId
179
204
  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
180
205
  try {
181
- var _totalPrice, _unitPrice;
182
206
  const currency = getCurrency(currencyId);
183
- const UNIT_LABEL_PLACEHOLDER = 'UNIT_LABEL_TEMPLATES';
184
- let totalPrice = (0, _paymentReact.formatPrice)(price, currency, UNIT_LABEL_PLACEHOLDER, quantity, true, locale);
185
- totalPrice = (_totalPrice = totalPrice) === null || _totalPrice === void 0 ? void 0 : _totalPrice.replace(new RegExp("".concat(UNIT_LABEL_PLACEHOLDER, "\\s+\\/*")), '');
186
- let unitPrice = (0, _paymentReact.formatPrice)(price, currency, UNIT_LABEL_PLACEHOLDER, 1, true, locale);
187
- unitPrice = (_unitPrice = unitPrice) === null || _unitPrice === void 0 ? void 0 : _unitPrice.replace(new RegExp("".concat(UNIT_LABEL_PLACEHOLDER, "\\s+\\/*")), '');
188
207
  const paymentMethod = getMethod(paymentMethodId);
189
208
  const freeTrial = (0, _util.getProductFreeTrial)({
190
209
  typeName: 'serverless',
@@ -192,204 +211,225 @@ function Component(_ref2) {
192
211
  currencyId: (currency === null || currency === void 0 ? void 0 : currency.id) || currencyId
193
212
  });
194
213
  setState({
195
- unitPrice,
196
- totalPrice,
197
- minStakeAmount: "".concat(minStakeAmount, " ").concat((currency === null || currency === void 0 ? void 0 : currency.symbol) || '').trim(),
198
- shouldStake: (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.type) === 'arcblock',
199
- freeTrial
214
+ currency,
215
+ paymentMethod,
216
+ freeTrial,
217
+ shouldStake: (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.type) === 'arcblock'
200
218
  });
201
219
  } catch (error) {
202
220
  console.error('calculate failed error', error);
203
221
  }
204
222
  };
205
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
223
+ const formatPriceWithLocale = function formatPriceWithLocale(p) {
224
+ let q = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
225
+ if (!state.currency) return '';
226
+ const UNIT_LABEL_PLACEHOLDER = 'UNIT_LABEL_TEMPLATES';
227
+ const formattedPrice = (0, _paymentReact.formatPrice)(p, state.currency, UNIT_LABEL_PLACEHOLDER, q, true, locale);
228
+ return formattedPrice === null || formattedPrice === void 0 ? void 0 : formattedPrice.replace(new RegExp("".concat(UNIT_LABEL_PLACEHOLDER, "\\s+\\/*")), '');
229
+ };
230
+ const unitPrice = formatPriceWithLocale(price, 1);
231
+ const totalPrice = formatPriceWithLocale(price, quantity);
232
+ const formattedMinStakeAmount = state.currency ? "".concat(minStakeAmount, " ").concat(((_state$currency = state.currency) === null || _state$currency === void 0 ? void 0 : _state$currency.symbol) || '').trim() : '';
233
+ const currencyOptions = (price === null || price === void 0 ? void 0 : price.currency_options) || [];
234
+ const productList = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
235
+ sx: {
236
+ display: 'flex',
237
+ flexDirection: 'column',
238
+ gap: 1,
239
+ flex: 1,
240
+ minHeight: 0,
241
+ overflowY: isMobile ? 'visible' : 'auto',
242
+ maxHeight: isMobile ? 'auto' : 'calc(70vh - 400px)'
243
+ },
244
+ children: components.map(_ref4 => {
245
+ let {
246
+ did,
247
+ title,
248
+ logo,
249
+ bundleSource
250
+ } = _ref4;
251
+ let props = {};
252
+ if (blockletStoreURL || bundleSource) {
253
+ let blockletURL = '';
254
+ if (bundleSource !== null && bundleSource !== void 0 && bundleSource.store) {
255
+ blockletURL = (0, _util2.getBlockletUrlOnStore)({
256
+ did,
257
+ baseUrl: bundleSource === null || bundleSource === void 0 ? void 0 : bundleSource.store
258
+ });
259
+ } else {
260
+ blockletURL = (0, _util2.getBlockletUrlOnStore)({
261
+ did,
262
+ baseUrl: blockletStoreURL
263
+ });
264
+ }
265
+ props = {
266
+ component: 'a',
267
+ href: blockletURL
268
+ };
269
+ }
270
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, _objectSpread(_objectSpread({
271
+ sx: {
272
+ display: 'flex',
273
+ alignItems: 'center',
274
+ borderRadius: '4px',
275
+ px: 1,
276
+ py: 0.5,
277
+ minHeight: 44,
278
+ cursor: 'pointer',
279
+ '&:hover': {
280
+ backgroundColor: 'secondary.main',
281
+ borderRadius: '4px'
282
+ }
283
+ },
284
+ target: "_blank"
285
+ }, props), {}, {
286
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
287
+ alt: title,
288
+ variant: "rounded",
289
+ src: logo,
290
+ sx: {
291
+ mr: 1
292
+ }
293
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
294
+ sx: {
295
+ fontWeight: 500,
296
+ fontSize: '1rem',
297
+ color: 'text.primary',
298
+ whiteSpace: 'nowrap',
299
+ overflow: 'hidden',
300
+ textOverflow: 'ellipsis',
301
+ flex: 1,
302
+ minWidth: 0,
303
+ mr: 1
304
+ },
305
+ children: title
306
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
307
+ sx: {
308
+ color: 'text.primary',
309
+ fontSize: '1rem',
310
+ textAlign: 'right',
311
+ whiteSpace: 'nowrap'
312
+ },
313
+ children: unitPrice
314
+ })]
315
+ }), did);
316
+ })
317
+ });
318
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
206
319
  direction: "column",
207
320
  gap: 2,
208
321
  sx: {
209
322
  width: '100%',
210
323
  height: '100%'
211
324
  },
212
- children: [state.freeTrial && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
213
- sx: {
214
- display: 'flex',
215
- justifyContent: 'flex-start'
216
- },
217
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
218
- icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RocketLaunch.default, {}),
219
- label: t('checkout.freeTrialHint', {
220
- duration: (0, _prettyMsI18n.default)(state.freeTrial.duration * 1000, {
221
- locale: locale === 'zh' ? 'zh_CN' : 'en_US',
222
- compact: true,
223
- verbose: true,
224
- unitCount: 1
225
- })
226
- }),
227
- color: "success",
228
- size: "small",
229
- variant: "contained"
230
- })
231
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
325
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
232
326
  sx: {
233
327
  display: 'flex',
234
- flexDirection: 'row',
235
328
  justifyContent: 'space-between',
236
329
  gap: isMobile ? '32px' : '64px',
237
- '@media (max-width: 1200px)': {
238
- flexDirection: 'column',
239
- justifyContent: 'flex-start'
240
- }
330
+ flexDirection: isMobile ? 'column' : 'row',
331
+ alignItems: isMobile ? 'center' : 'flex-start'
241
332
  },
242
333
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
243
334
  sx: {
244
335
  display: 'flex',
245
336
  flexDirection: 'column',
246
- gap: '24px',
337
+ gap: 2,
247
338
  height: '100%',
248
- width: '100%'
339
+ width: '100%',
340
+ flex: '1'
249
341
  },
250
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
251
- sx: {
252
- display: 'flex',
253
- flexDirection: 'column',
254
- gap: '12px'
255
- },
256
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
257
- sx: {
258
- fontWeight: 'bold'
259
- },
260
- children: [(components === null || components === void 0 ? void 0 : components.length) <= 1 && t('purchase.componentCount', {
261
- count: components === null || components === void 0 ? void 0 : components.length
262
- }), (components === null || components === void 0 ? void 0 : components.length) > 1 && t('purchase.componentsCount', {
263
- count: components === null || components === void 0 ? void 0 : components.length
264
- })]
265
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
266
- dense: true,
267
- disablePadding: true,
268
- sx: {
269
- // maxHeight: { xs: '240px', md: '360px' },
270
- // maxHeight: { xs: 'unset', lg: '120px', xl: '320px' },
271
- overflowY: 'auto',
272
- '&::-webkit-scrollbar': {
273
- width: '6px'
274
- },
275
- '&::-webkit-scrollbar-track': {
276
- backgroundColor: 'transparent'
277
- },
278
- '&::-webkit-scrollbar-thumb': {
279
- backgroundColor: '#ccc',
280
- borderRadius: '3px'
281
- },
282
- '@media (min-height: 1400px)': {
283
- maxHeight: '380px'
284
- },
285
- '@media (max-height: 1399px)': {
286
- maxHeight: '280px'
287
- },
288
- '@media (max-height: 900px)': {
289
- maxHeight: '160px'
290
- },
291
- '@media (max-height: 600px)': {
292
- maxHeight: '120px'
342
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
343
+ gap: 1,
344
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
345
+ direction: "row",
346
+ justifyContent: "space-between",
347
+ alignItems: "center",
348
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
349
+ sx: {
350
+ display: 'flex',
351
+ flexDirection: 'row',
352
+ gap: 1,
353
+ alignItems: 'center'
293
354
  },
294
- '@media (max-width: 900px)': {
295
- maxHeight: 'unset'
296
- }
297
- },
298
- children: components.map(_ref3 => {
299
- let {
300
- did,
301
- title,
302
- logo,
303
- bundleSource
304
- } = _ref3;
305
- let props = {};
306
- if (blockletStoreURL || bundleSource) {
307
- let blockletURL = '';
308
- if (bundleSource !== null && bundleSource !== void 0 && bundleSource.store) {
309
- blockletURL = (0, _util2.getBlockletUrlOnStore)({
310
- did,
311
- baseUrl: bundleSource === null || bundleSource === void 0 ? void 0 : bundleSource.store
312
- });
313
- } else {
314
- blockletURL = (0, _util2.getBlockletUrlOnStore)({
315
- did,
316
- baseUrl: blockletStoreURL
317
- });
318
- }
319
- props = {
320
- component: 'a',
321
- href: blockletURL
322
- };
323
- }
324
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, _objectSpread(_objectSpread({
355
+ children: [(blockletMeta === null || blockletMeta === void 0 ? void 0 : blockletMeta.title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
325
356
  sx: {
326
- cursor: 'pointer',
327
- paddingRight: '4px',
328
- '&:hover': {
329
- backgroundColor: 'secondary.main',
330
- borderRadius: '4px'
331
- }
357
+ fontWeight: 'bold',
358
+ lineHeight: '32px'
332
359
  },
333
- disablePadding: true,
334
- disableGutters: true,
335
- alignItems: "flex-start",
336
- target: "_blank"
337
- }, props), {}, {
338
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
339
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
340
- alt: title,
341
- variant: "rounded",
342
- src: logo
343
- })
344
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
345
- primary: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
346
- children: title
347
- }),
348
- secondary: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
349
- sx: {
350
- display: 'flex',
351
- justifyContent: 'space-between'
352
- },
353
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
354
- startChars: minimumWidth ? 4 : 6,
355
- endChars: minimumWidth ? 4 : 6,
356
- copyable: false,
357
- did: did
358
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
359
- children: state.unitPrice
360
- })]
361
- })
360
+ children: blockletMeta === null || blockletMeta === void 0 ? void 0 : blockletMeta.title
361
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
362
+ variant: "body2",
363
+ sx: {
364
+ color: 'text.secondary',
365
+ lineHeight: '32px'
366
+ },
367
+ children: [(components === null || components === void 0 ? void 0 : components.length) <= 1 && t('purchase.componentCount', {
368
+ count: components === null || components === void 0 ? void 0 : components.length
369
+ }), (components === null || components === void 0 ? void 0 : components.length) > 1 && t('purchase.componentsCount', {
370
+ count: components === null || components === void 0 ? void 0 : components.length
362
371
  })]
363
- }), did);
364
- })
365
- })]
372
+ })]
373
+ }), isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandMore, {
374
+ expand: state.expanded,
375
+ "aria-expanded": state.expanded,
376
+ "aria-label": "show more",
377
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {
378
+ onClick: () => setState({
379
+ expanded: !state.expanded
380
+ })
381
+ })
382
+ })]
383
+ }), isMobile ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Collapse, {
384
+ in: state.expanded,
385
+ children: productList
386
+ }) : productList, /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {})]
366
387
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
367
388
  sx: {
368
389
  display: 'flex',
369
390
  flexDirection: 'column',
370
391
  gap: '12px'
371
392
  },
372
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
393
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
373
394
  sx: {
374
395
  display: 'flex',
375
- justifyContent: 'space-between'
396
+ gap: 1
376
397
  },
377
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
398
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
378
399
  sx: {
379
400
  fontWeight: 'bold'
380
401
  },
381
402
  children: t('common.price')
382
- })
403
+ }), state.freeTrial && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
404
+ sx: {
405
+ display: 'flex',
406
+ justifyContent: 'flex-start'
407
+ },
408
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
409
+ icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RocketLaunch.default, {}),
410
+ label: t('checkout.freeTrialHint', {
411
+ duration: (0, _prettyMsI18n.default)(state.freeTrial.duration * 1000, {
412
+ locale: locale === 'zh' ? 'zh_CN' : 'en_US',
413
+ compact: true,
414
+ verbose: true,
415
+ unitCount: 1
416
+ })
417
+ }),
418
+ color: "success",
419
+ size: "small",
420
+ variant: "contained"
421
+ })
422
+ })]
383
423
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
384
424
  dense: true,
385
425
  disablePadding: true,
386
426
  children: [state.shouldStake && {
387
427
  label: t('checkout.stakeAmount'),
388
- value: state.minStakeAmount,
428
+ value: formattedMinStakeAmount,
389
429
  highlight: false
390
430
  }, {
391
431
  label: state.isFreeTrial ? t('checkout.estimatedCostFreeTrial') : t('checkout.estimatedCost'),
392
- value: state.totalPrice,
432
+ value: totalPrice,
393
433
  hint: t('checkout.estimatedCostHint'),
394
434
  highlight: state.isFreeTrial
395
435
  }].map(item => {
@@ -399,6 +439,13 @@ function Component(_ref2) {
399
439
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItem, {
400
440
  disablePadding: true,
401
441
  disableGutters: true,
442
+ sx: {
443
+ '& .MuiListItemText-root': {
444
+ display: 'flex',
445
+ flexDirection: 'row',
446
+ justifyContent: 'space-between'
447
+ }
448
+ },
402
449
  secondaryAction: !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
403
450
  sx: {
404
451
  display: 'flex',
@@ -414,7 +461,7 @@ function Component(_ref2) {
414
461
  primary: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
415
462
  children: [!item.hint && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
416
463
  sx: {
417
- fontSize: isMobile ? '0.825rem' : '1rem'
464
+ fontSize: '1rem'
418
465
  },
419
466
  children: item.label
420
467
  }), item.hint && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
@@ -435,7 +482,7 @@ function Component(_ref2) {
435
482
  },
436
483
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
437
484
  sx: {
438
- fontSize: isMobile ? '0.825rem' : '1rem'
485
+ fontSize: '1rem'
439
486
  },
440
487
  children: item.label
441
488
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoOutlined.default, {
@@ -465,29 +512,24 @@ function Component(_ref2) {
465
512
  fontStyle: 'italic'
466
513
  },
467
514
  children: t('checkout.stakeHint', {
468
- amount: state.minStakeAmount
515
+ amount: formattedMinStakeAmount
469
516
  })
470
517
  })]
471
518
  })]
472
519
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
473
520
  sx: {
521
+ flex: '1',
474
522
  width: '100%',
475
- '& .cko-container': {
476
- minWidth: '100% !important',
477
- maxWidth: '100% !important',
478
- '&>div': {
479
- padding: 0
480
- }
481
- },
482
523
  '& .cko-payment': {
483
- gap: '24px',
524
+ width: '100% !important',
484
525
  '&>hr': {
485
526
  display: 'none'
527
+ },
528
+ '&::before': {
529
+ display: 'none'
486
530
  }
487
531
  },
488
532
  '& .cko-payment-contact': {
489
- gap: '12px',
490
- lineHeight: '1.5rem',
491
533
  '&>*': {
492
534
  marginBottom: 0
493
535
  },
@@ -495,32 +537,32 @@ function Component(_ref2) {
495
537
  fontSize: '1rem'
496
538
  }
497
539
  },
498
- '& .cko-payment-form': {
499
- gap: '12px'
540
+ '.cko-payment-methods': {
541
+ marginTop: 0.5
500
542
  },
501
- '& .cko-payment-methods': {
502
- gap: '12px',
503
- marginTop: 0,
504
- '&>p': {
505
- marginBottom: 0
506
- }
543
+ '.base-card': {
544
+ padding: '0 !important',
545
+ maxWidth: '100%'
507
546
  },
508
547
  '& .cko-payment-submit': {
509
- marginTop: 0,
510
- '& button': {
511
- fontSize: '1rem !important'
512
- },
548
+ marginTop: isMobile ? 0 : 3,
549
+ paddingBottom: isMobile ? '64px' : 0,
513
550
  [isMobile && '.cko-payment-submit-btn']: {
514
551
  position: 'fixed',
515
- bottom: '12px',
552
+ bottom: '0px',
553
+ paddingBottom: '12px',
516
554
  left: '0px',
517
555
  right: '0px',
518
556
  zIndex: 999,
519
- background: 'rgb(255, 255, 255)',
557
+ backgroundColor: 'background.paper',
520
558
  padding: '12px',
521
559
  textAlign: 'center'
522
560
  }
523
- }
561
+ },
562
+ '.cko-currency-selector': _objectSpread({}, (currencyOptions === null || currencyOptions === void 0 ? void 0 : currencyOptions.length) < 6 ? {
563
+ display: 'flex !important',
564
+ flexDirection: 'column'
565
+ } : {})
524
566
  },
525
567
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_paymentReact.CheckoutForm, {
526
568
  id: checkoutSessionId,
@@ -530,6 +572,6 @@ function Component(_ref2) {
530
572
  theme: "inherit"
531
573
  })
532
574
  })]
533
- })]
575
+ })
534
576
  });
535
577
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/launcher-ux",
3
- "version": "2.3.116",
3
+ "version": "2.3.118",
4
4
  "description": "Launcher UX lib",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -44,19 +44,19 @@
44
44
  "react": ">=18.1.0"
45
45
  },
46
46
  "devDependencies": {
47
- "@babel/cli": "^7.27.0",
48
- "@babel/core": "^7.26.10",
49
- "@babel/preset-env": "^7.26.9",
50
- "@babel/preset-react": "^7.26.3",
47
+ "@babel/cli": "^7.27.2",
48
+ "@babel/core": "^7.27.1",
49
+ "@babel/preset-env": "^7.27.2",
50
+ "@babel/preset-react": "^7.27.1",
51
51
  "@storybook/react": "^7.6.20",
52
52
  "babel-plugin-inline-react-svg": "^2.0.2",
53
53
  "concurrently": "^9.1.2",
54
54
  "glob": "^10.4.5"
55
55
  },
56
56
  "dependencies": {
57
- "@arcblock/ux": "^2.13.13",
58
- "@blocklet/launcher-util": "2.3.116",
59
- "@blocklet/payment-react": "^1.18.37",
57
+ "@arcblock/ux": "^2.13.35",
58
+ "@blocklet/launcher-util": "2.3.118",
59
+ "@blocklet/payment-react": "^1.18.43",
60
60
  "@emotion/styled": "^11.14.0",
61
61
  "@mui/icons-material": "^5.17.1",
62
62
  "@mui/material": "^5.17.1",
@@ -94,5 +94,5 @@
94
94
  "require": "./lib/use-mobile/index.js"
95
95
  }
96
96
  },
97
- "gitHead": "6499f65008cb2a2bf81563354e3e744847cbb73d"
97
+ "gitHead": "76af82cb00a4d6d95dc5e046e8982375f38e65a1"
98
98
  }