@blocklet/launcher-ux 2.3.34 → 2.3.36

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 +257 -223
  2. package/lib/payment/checkout/on-demand.js +257 -223
  3. package/package.json +9 -9
package/es/payment/checkout/on-demand.js CHANGED
@@ -4,9 +4,13 @@ import { getProductFreeTrial } from '@blocklet/launcher-util/es/util';
4
4
  import { getBlockletUrlOnStore } from '@blocklet/launcher-util/lib/util';
5
5
  import { CheckoutForm, PaymentProvider, formatPrice, usePaymentContext } from '@blocklet/payment-react';
6
6
  import InfoIcon from '@mui/icons-material/InfoOutlined';
7
- 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';
8
9
  import Box from '@mui/material/Box';
10
+ import Chip from '@mui/material/Chip';
9
11
  import CircularProgress from '@mui/material/CircularProgress';
12
+ import { useTheme } from '@mui/material/styles';
13
+ import useMediaQuery from '@mui/material/useMediaQuery';
10
14
  import { useSetState } from 'ahooks';
11
15
  import prettyMs from 'pretty-ms-i18n';
12
16
  import PropTypes from 'prop-types';
@@ -95,10 +99,12 @@ function Component({
95
99
  const {
96
100
  isMobile
97
101
  } = useMobile();
102
+ const theme = useTheme();
98
103
  const {
99
104
  isFreeTrial,
100
105
  duration: freeTrialDurationSeconds
101
106
  } = getProductFreeTrial('serverless', freeTrialProducts);
107
+ const minimumWidth = useMediaQuery(theme.breakpoints.down(540));
102
108
  const components = (tempComponents || []).reduce((acc, x) => {
103
109
  if (acc.findIndex(y => y.did === x.did) === -1) {
104
110
  acc.push(x);
@@ -157,258 +163,286 @@ function Component({
157
163
  console.error('calculate failed error', error);
158
164
  }
159
165
  };
160
- return /*#__PURE__*/_jsxs(Box, {
166
+ return /*#__PURE__*/_jsxs(Stack, {
167
+ direction: "column",
168
+ gap: 2,
161
169
  sx: {
162
- display: 'flex',
163
- flexDirection: 'row',
164
- justifyContent: 'space-between',
165
- gap: isMobile ? '32px' : '64px',
166
- height: '100%',
167
170
  width: '100%',
168
- '@media (max-width: 1200px)': {
169
- flexDirection: 'column',
170
- justifyContent: 'flex-start'
171
- }
171
+ height: '100%'
172
172
  },
173
- children: [/*#__PURE__*/_jsxs(Box, {
173
+ children: [isFreeTrial && /*#__PURE__*/_jsx(Box, {
174
174
  sx: {
175
175
  display: 'flex',
176
- flexDirection: 'column',
177
- gap: '24px',
178
- height: '100%',
179
- width: '100%'
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, {
192
+ sx: {
193
+ display: 'flex',
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
+ }
180
201
  },
181
202
  children: [/*#__PURE__*/_jsxs(Box, {
182
203
  sx: {
183
204
  display: 'flex',
184
205
  flexDirection: 'column',
185
- gap: '12px'
206
+ gap: '24px',
207
+ height: '100%',
208
+ width: '100%'
186
209
  },
187
- children: [/*#__PURE__*/_jsxs(Typography, {
210
+ children: [/*#__PURE__*/_jsxs(Box, {
188
211
  sx: {
189
- fontWeight: 'bold'
212
+ display: 'flex',
213
+ flexDirection: 'column',
214
+ gap: '12px'
190
215
  },
191
- children: [components?.length <= 1 && t('purchase.componentCount', {
192
- count: components?.length
193
- }), components?.length > 1 && t('purchase.componentsCount', {
194
- count: components?.length
195
- })]
196
- }), /*#__PURE__*/_jsx(List, {
197
- dense: true,
198
- disablePadding: true,
199
- sx: {
200
- maxHeight: '480px',
201
- overflowY: 'auto',
202
- '&::-webkit-scrollbar': {
203
- width: '6px'
204
- },
205
- '&::-webkit-scrollbar-track': {
206
- backgroundColor: 'transparent'
207
- },
208
- '&::-webkit-scrollbar-thumb': {
209
- backgroundColor: '#ccc',
210
- borderRadius: '3px'
216
+ children: [/*#__PURE__*/_jsxs(Typography, {
217
+ sx: {
218
+ fontWeight: 'bold'
211
219
  },
212
- '@media (max-width: 1200px)': {
213
- maxHeight: 'unset'
214
- }
215
- },
216
- children: components.map(({
217
- did,
218
- title,
219
- logo
220
- }) => {
221
- let props = {};
222
- if (blockletStoreURL) {
223
- props = {
224
- component: 'a',
225
- href: getBlockletUrlOnStore({
226
- did,
227
- baseUrl: blockletStoreURL
228
- })
229
- };
230
- }
231
- return /*#__PURE__*/_jsxs(ListItem, {
232
- sx: {
233
- cursor: 'pointer',
234
- paddingRight: '4px',
235
- '&:hover': {
236
- backgroundColor: 'secondary.main',
237
- borderRadius: '4px'
238
- }
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'
239
233
  },
240
- disablePadding: true,
241
- disableGutters: true,
242
- alignItems: "flex-start",
243
- target: "_blank",
244
- ...props,
245
- children: [/*#__PURE__*/_jsx(ListItemAvatar, {
246
- children: /*#__PURE__*/_jsx(Avatar, {
247
- alt: title,
248
- variant: "rounded",
249
- src: logo
250
- })
251
- }), /*#__PURE__*/_jsx(ListItemText, {
252
- primary: /*#__PURE__*/_jsx(Typography, {
253
- children: title
254
- }),
255
- secondary: /*#__PURE__*/_jsxs(Box, {
256
- sx: {
257
- display: 'flex',
258
- justifyContent: 'space-between'
259
- },
260
- children: [/*#__PURE__*/_jsx(DidAddress, {
261
- copyable: false,
262
- did: did
263
- }), /*#__PURE__*/_jsx(Typography, {
264
- children: state.unitPrice
265
- })]
266
- })
267
- })]
268
- }, did);
269
- })
270
- })]
271
- }), /*#__PURE__*/_jsxs(Box, {
272
- sx: {
273
- display: 'flex',
274
- flexDirection: 'column',
275
- gap: '12px'
276
- },
277
- children: [/*#__PURE__*/_jsx(Box, {
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
+ }
244
+ },
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, {
278
303
  sx: {
279
304
  display: 'flex',
280
- justifyContent: 'space-between'
305
+ flexDirection: 'column',
306
+ gap: '12px'
281
307
  },
282
- children: /*#__PURE__*/_jsx(Typography, {
308
+ children: [/*#__PURE__*/_jsx(Box, {
283
309
  sx: {
284
- fontWeight: 'bold'
310
+ display: 'flex',
311
+ justifyContent: 'space-between'
285
312
  },
286
- children: t('common.price')
287
- })
288
- }), /*#__PURE__*/_jsx(List, {
289
- dense: true,
290
- disablePadding: true,
291
- children: [{
292
- label: t('checkout.estimatedCost'),
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
306
- }].map(item => {
307
- return /*#__PURE__*/_jsx(ListItem, {
313
+ children: /*#__PURE__*/_jsx(Typography, {
308
314
  sx: {
309
- maxHeight: '28px'
315
+ fontWeight: 'bold'
310
316
  },
311
- disablePadding: true,
312
- disableGutters: true,
313
- secondaryAction: /*#__PURE__*/_jsx(Box, {
314
- sx: {
315
- display: 'flex',
316
- flexDirection: 'column',
317
- alignItems: 'flex-end',
318
- paddingRight: '4px'
319
- },
320
- children: /*#__PURE__*/_jsx(Typography, {
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, {
321
336
  sx: {
322
- color: item.highlight ? 'primary.main' : 'default'
337
+ display: 'flex',
338
+ flexDirection: 'column',
339
+ alignItems: 'flex-end',
340
+ paddingRight: '4px'
323
341
  },
324
- children: item.value
325
- })
326
- }),
327
- children: /*#__PURE__*/_jsx(ListItemText, {
328
- primary: /*#__PURE__*/_jsxs(_Fragment, {
329
- children: [!item.hint && /*#__PURE__*/_jsx(Typography, {
330
- children: item.label
331
- }), item.hint && /*#__PURE__*/_jsx(Box, {
332
- component: "span",
333
- sx: {
334
- display: 'flex',
335
- alignItems: 'center'
336
- },
337
- children: /*#__PURE__*/_jsx(Tooltip, {
338
- title: item.hint,
339
- placement: "right",
340
- children: /*#__PURE__*/_jsxs(Box, {
341
- component: "span",
342
- sx: {
343
- display: 'flex',
344
- alignItems: 'center',
345
- cursor: 'pointer'
346
- },
347
- children: [/*#__PURE__*/_jsx(Typography, {
348
- children: item.label
349
- }), /*#__PURE__*/_jsx(InfoIcon, {
350
- fontSize: "small",
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",
351
364
  sx: {
352
- marginLeft: '2px'
353
- }
354
- })]
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
+ })
355
382
  })
356
- })
357
- })]
383
+ })]
384
+ }),
385
+ secondary: isMobile && /*#__PURE__*/_jsx(Typography, {
386
+ sx: {
387
+ fontWeight: 'bolder'
388
+ },
389
+ children: item.value
390
+ })
358
391
  })
359
- })
360
- }, item.label);
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
- })
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
+ })]
371
404
  })]
372
- })]
373
- }), /*#__PURE__*/_jsx(Box, {
374
- sx: {
375
- width: '100%',
376
- '& .cko-container': {
377
- minWidth: '100% !important',
378
- maxWidth: '100% !important'
379
- },
380
- '& .cko-payment': {
381
- gap: '24px'
382
- },
383
- '& .cko-payment-contact': {
384
- gap: '12px',
385
- '& >div': {
386
- marginBottom: 0
387
- }
388
- },
389
- '& .cko-payment-form': {
390
- marginTop: 0
391
- },
392
- '& .cko-payment-methods': {
393
- gap: '12px',
394
- marginTop: 0,
395
- '&>p': {
396
- marginBottom: 0
405
+ }), /*#__PURE__*/_jsx(Box, {
406
+ sx: {
407
+ width: '100%',
408
+ '& .cko-container': {
409
+ minWidth: '100% !important',
410
+ maxWidth: '100% !important'
411
+ },
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
+ }
397
436
  }
398
437
  },
399
- '& .cko-payment-submit': {
400
- marginTop: 0,
401
- '& button': {
402
- fontSize: '1rem !important'
403
- }
404
- }
405
- },
406
- children: /*#__PURE__*/_jsx(CheckoutForm, {
407
- id: checkoutSessionId,
408
- mode: "inline-minimal",
409
- onPaid: handlePaid,
410
- onChange: handleChange
411
- })
438
+ children: /*#__PURE__*/_jsx(CheckoutForm, {
439
+ id: checkoutSessionId,
440
+ mode: "inline-minimal",
441
+ onPaid: handlePaid,
442
+ onChange: handleChange,
443
+ action: "Test"
444
+ })
445
+ })]
412
446
  })]
413
447
  });
414
448
  }
package/lib/payment/checkout/on-demand.js CHANGED
@@ -10,9 +10,13 @@ var _util = require("@blocklet/launcher-util/es/util");
10
10
  var _util2 = require("@blocklet/launcher-util/lib/util");
11
11
  var _paymentReact = require("@blocklet/payment-react");
12
12
  var _InfoOutlined = _interopRequireDefault(require("@mui/icons-material/InfoOutlined"));
13
+ var _RocketLaunch = _interopRequireDefault(require("@mui/icons-material/RocketLaunch"));
13
14
  var _material = require("@mui/material");
14
15
  var _Box = _interopRequireDefault(require("@mui/material/Box"));
16
+ var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
15
17
  var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
18
+ var _styles = require("@mui/material/styles");
19
+ var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
16
20
  var _ahooks = require("ahooks");
17
21
  var _prettyMsI18n = _interopRequireDefault(require("pretty-ms-i18n"));
18
22
  var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -108,10 +112,12 @@ function Component(_ref2) {
108
112
  const {
109
113
  isMobile
110
114
  } = (0, _useMobile.default)();
115
+ const theme = (0, _styles.useTheme)();
111
116
  const {
112
117
  isFreeTrial,
113
118
  duration: freeTrialDurationSeconds
114
119
  } = (0, _util.getProductFreeTrial)('serverless', freeTrialProducts);
120
+ const minimumWidth = (0, _useMediaQuery.default)(theme.breakpoints.down(540));
115
121
  const components = (tempComponents || []).reduce((acc, x) => {
116
122
  if (acc.findIndex(y => y.did === x.did) === -1) {
117
123
  acc.push(x);
@@ -172,259 +178,287 @@ function Component(_ref2) {
172
178
  console.error('calculate failed error', error);
173
179
  }
174
180
  };
175
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
181
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
182
+ direction: "column",
183
+ gap: 2,
176
184
  sx: {
177
- display: 'flex',
178
- flexDirection: 'row',
179
- justifyContent: 'space-between',
180
- gap: isMobile ? '32px' : '64px',
181
- height: '100%',
182
185
  width: '100%',
183
- '@media (max-width: 1200px)': {
184
- flexDirection: 'column',
185
- justifyContent: 'flex-start'
186
- }
186
+ height: '100%'
187
187
  },
188
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
188
+ children: [isFreeTrial && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
189
189
  sx: {
190
190
  display: 'flex',
191
- flexDirection: 'column',
192
- gap: '24px',
193
- height: '100%',
194
- width: '100%'
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, {
207
+ sx: {
208
+ display: 'flex',
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
+ }
195
216
  },
196
217
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
197
218
  sx: {
198
219
  display: 'flex',
199
220
  flexDirection: 'column',
200
- gap: '12px'
221
+ gap: '24px',
222
+ height: '100%',
223
+ width: '100%'
201
224
  },
202
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
225
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
203
226
  sx: {
204
- fontWeight: 'bold'
227
+ display: 'flex',
228
+ flexDirection: 'column',
229
+ gap: '12px'
205
230
  },
206
- children: [(components === null || components === void 0 ? void 0 : components.length) <= 1 && t('purchase.componentCount', {
207
- count: components === null || components === void 0 ? void 0 : components.length
208
- }), (components === null || components === void 0 ? void 0 : components.length) > 1 && t('purchase.componentsCount', {
209
- count: components === null || components === void 0 ? void 0 : components.length
210
- })]
211
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
212
- dense: true,
213
- disablePadding: true,
214
- sx: {
215
- maxHeight: '480px',
216
- overflowY: 'auto',
217
- '&::-webkit-scrollbar': {
218
- width: '6px'
219
- },
220
- '&::-webkit-scrollbar-track': {
221
- backgroundColor: 'transparent'
222
- },
223
- '&::-webkit-scrollbar-thumb': {
224
- backgroundColor: '#ccc',
225
- borderRadius: '3px'
231
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
232
+ sx: {
233
+ fontWeight: 'bold'
226
234
  },
227
- '@media (max-width: 1200px)': {
228
- maxHeight: 'unset'
229
- }
230
- },
231
- children: components.map(_ref3 => {
232
- let {
233
- did,
234
- title,
235
- logo
236
- } = _ref3;
237
- let props = {};
238
- if (blockletStoreURL) {
239
- props = {
240
- component: 'a',
241
- href: (0, _util2.getBlockletUrlOnStore)({
242
- did,
243
- baseUrl: blockletStoreURL
244
- })
245
- };
246
- }
247
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, _objectSpread(_objectSpread({
248
- sx: {
249
- cursor: 'pointer',
250
- paddingRight: '4px',
251
- '&:hover': {
252
- backgroundColor: 'secondary.main',
253
- borderRadius: '4px'
254
- }
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'
255
248
  },
256
- disablePadding: true,
257
- disableGutters: true,
258
- alignItems: "flex-start",
259
- target: "_blank"
260
- }, props), {}, {
261
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
262
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
263
- alt: title,
264
- variant: "rounded",
265
- src: logo
266
- })
267
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
268
- primary: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
269
- children: title
270
- }),
271
- secondary: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
272
- sx: {
273
- display: 'flex',
274
- justifyContent: 'space-between'
275
- },
276
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
277
- copyable: false,
278
- did: did
279
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
280
- children: state.unitPrice
281
- })]
282
- })
283
- })]
284
- }), did);
285
- })
286
- })]
287
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
288
- sx: {
289
- display: 'flex',
290
- flexDirection: 'column',
291
- gap: '12px'
292
- },
293
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
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
+ }
259
+ },
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, {
294
319
  sx: {
295
320
  display: 'flex',
296
- justifyContent: 'space-between'
321
+ flexDirection: 'column',
322
+ gap: '12px'
297
323
  },
298
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
324
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
299
325
  sx: {
300
- fontWeight: 'bold'
326
+ display: 'flex',
327
+ justifyContent: 'space-between'
301
328
  },
302
- children: t('common.price')
303
- })
304
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
305
- dense: true,
306
- disablePadding: true,
307
- children: [{
308
- label: t('checkout.estimatedCost'),
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
322
- }].map(item => {
323
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItem, {
329
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
324
330
  sx: {
325
- maxHeight: '28px'
331
+ fontWeight: 'bold'
326
332
  },
327
- disablePadding: true,
328
- disableGutters: true,
329
- secondaryAction: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
330
- sx: {
331
- display: 'flex',
332
- flexDirection: 'column',
333
- alignItems: 'flex-end',
334
- paddingRight: '4px'
335
- },
336
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
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, {
337
352
  sx: {
338
- color: item.highlight ? 'primary.main' : 'default'
353
+ display: 'flex',
354
+ flexDirection: 'column',
355
+ alignItems: 'flex-end',
356
+ paddingRight: '4px'
339
357
  },
340
- children: item.value
341
- })
342
- }),
343
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
344
- primary: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
345
- children: [!item.hint && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
346
- children: item.label
347
- }), item.hint && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
348
- component: "span",
349
- sx: {
350
- display: 'flex',
351
- alignItems: 'center'
352
- },
353
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
354
- title: item.hint,
355
- placement: "right",
356
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
357
- component: "span",
358
- sx: {
359
- display: 'flex',
360
- alignItems: 'center',
361
- cursor: 'pointer'
362
- },
363
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
364
- children: item.label
365
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoOutlined.default, {
366
- fontSize: "small",
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",
367
380
  sx: {
368
- marginLeft: '2px'
369
- }
370
- })]
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
+ })
371
398
  })
372
- })
373
- })]
399
+ })]
400
+ }),
401
+ secondary: isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
402
+ sx: {
403
+ fontWeight: 'bolder'
404
+ },
405
+ children: item.value
406
+ })
374
407
  })
375
- })
376
- }, item.label);
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
- })
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
+ })]
387
420
  })]
388
- })]
389
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
390
- sx: {
391
- width: '100%',
392
- '& .cko-container': {
393
- minWidth: '100% !important',
394
- maxWidth: '100% !important'
395
- },
396
- '& .cko-payment': {
397
- gap: '24px'
398
- },
399
- '& .cko-payment-contact': {
400
- gap: '12px',
401
- '& >div': {
402
- marginBottom: 0
403
- }
404
- },
405
- '& .cko-payment-form': {
406
- marginTop: 0
407
- },
408
- '& .cko-payment-methods': {
409
- gap: '12px',
410
- marginTop: 0,
411
- '&>p': {
412
- marginBottom: 0
421
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
422
+ sx: {
423
+ width: '100%',
424
+ '& .cko-container': {
425
+ minWidth: '100% !important',
426
+ maxWidth: '100% !important'
427
+ },
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
+ }
413
452
  }
414
453
  },
415
- '& .cko-payment-submit': {
416
- marginTop: 0,
417
- '& button': {
418
- fontSize: '1rem !important'
419
- }
420
- }
421
- },
422
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_paymentReact.CheckoutForm, {
423
- id: checkoutSessionId,
424
- mode: "inline-minimal",
425
- onPaid: handlePaid,
426
- onChange: handleChange
427
- })
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
+ })]
428
462
  })]
429
463
  });
430
464
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/launcher-ux",
3
- "version": "2.3.34",
3
+ "version": "2.3.36",
4
4
  "description": "Launcher UX lib",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -45,20 +45,20 @@
45
45
  },
46
46
  "devDependencies": {
47
47
  "@babel/cli": "^7.24.8",
48
- "@babel/core": "^7.24.9",
49
- "@babel/preset-env": "^7.25.0",
48
+ "@babel/core": "^7.25.2",
49
+ "@babel/preset-env": "^7.25.3",
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.9",
57
- "@blocklet/launcher-util": "2.3.34",
58
- "@blocklet/payment-react": "^1.14.5",
56
+ "@arcblock/ux": "^2.10.12",
57
+ "@blocklet/launcher-util": "2.3.36",
58
+ "@blocklet/payment-react": "^1.14.8",
59
59
  "@emotion/styled": "^11.13.0",
60
- "@mui/icons-material": "^5.16.5",
61
- "@mui/material": "^5.16.5",
60
+ "@mui/icons-material": "^5.16.6",
61
+ "@mui/material": "^5.16.6",
62
62
  "ahooks": "^3.8.0",
63
63
  "pretty-ms-i18n": "^1.0.3",
64
64
  "react-use": "^17.5.1"
@@ -93,5 +93,5 @@
93
93
  "require": "./lib/use-mobile/index.js"
94
94
  }
95
95
  },
96
- "gitHead": "54c8d4db562dd766ed25c2adb05b00f4430d2083"
96
+ "gitHead": "55fe474e79787d4314b3e6be089e9aef5036e58b"
97
97
  }