payment-kit 1.18.16 → 1.18.17

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 (19) hide show
  1. package/api/src/libs/notification/template/customer-reward-succeeded.ts +32 -14
  2. package/api/src/libs/session.ts +9 -1
  3. package/api/src/libs/util.ts +12 -4
  4. package/api/src/routes/checkout-sessions.ts +286 -120
  5. package/api/src/routes/connect/pay.ts +1 -1
  6. package/api/src/routes/connect/shared.ts +65 -6
  7. package/api/src/routes/customers.ts +1 -1
  8. package/api/src/routes/donations.ts +1 -1
  9. package/api/src/routes/invoices.ts +1 -1
  10. package/blocklet.yml +2 -1
  11. package/package.json +16 -16
  12. package/src/components/info-card.tsx +3 -1
  13. package/src/locales/en.tsx +1 -1
  14. package/src/pages/admin/payments/payouts/detail.tsx +16 -5
  15. package/src/pages/customer/index.tsx +71 -24
  16. package/src/pages/customer/invoice/past-due.tsx +1 -0
  17. package/src/pages/customer/payout/detail.tsx +16 -5
  18. package/src/pages/customer/recharge/account.tsx +204 -206
  19. package/src/pages/customer/recharge/subscription.tsx +11 -8
package/src/pages/customer/recharge/account.tsx CHANGED
@@ -29,7 +29,7 @@ import {
29
29
  } from '@blocklet/payment-react';
30
30
  import type { TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
31
31
  import { joinURL } from 'ufo';
32
- import { ArrowBackOutlined, ArrowForwardOutlined } from '@mui/icons-material';
32
+ import { AccountBalanceWalletOutlined, ArrowBackOutlined, ArrowForwardOutlined } from '@mui/icons-material';
33
33
  import Empty from '@arcblock/ux/lib/Empty';
34
34
  import RechargeList from '../../../components/invoice/recharge';
35
35
  import { getTokenBalanceLink, goBackOrFallback } from '../../../libs/util';
@@ -61,7 +61,6 @@ const Root = styled(Stack)(({ theme }) => ({
61
61
  marginBottom: theme.spacing(3),
62
62
  gap: theme.spacing(3),
63
63
  flexDirection: 'column',
64
- maxWidth: '800px',
65
64
  }));
66
65
 
67
66
  const BalanceCard = styled(Card)(({ theme }) => ({
@@ -72,18 +71,6 @@ const BalanceCard = styled(Card)(({ theme }) => ({
72
71
  marginBottom: theme.spacing(2),
73
72
  }));
74
73
 
75
- const SubscriptionScroll = styled(Box)(() => ({
76
- display: 'flex',
77
- overflowX: 'auto',
78
- padding: '8px 2px',
79
- scrollbarWidth: 'none',
80
- '&::-webkit-scrollbar': {
81
- display: 'none',
82
- },
83
- '-ms-overflow-style': 'none',
84
- gap: '16px',
85
- }));
86
-
87
74
  export default function BalanceRechargePage() {
88
75
  const { t, locale } = useLocaleContext();
89
76
  const { currencyId } = useParams<{ currencyId: string }>();
@@ -148,8 +135,7 @@ export default function BalanceRechargePage() {
148
135
  if (rechargeRef.current) {
149
136
  const rechargePosition = rechargeRef.current.getBoundingClientRect();
150
137
  const absoluteTop = window.scrollY + rechargePosition.top;
151
- const scrollToPosition = absoluteTop + 20;
152
-
138
+ const scrollToPosition = absoluteTop - 120;
153
139
  window.scrollTo({
154
140
  top: scrollToPosition,
155
141
  behavior: 'smooth',
@@ -157,7 +143,7 @@ export default function BalanceRechargePage() {
157
143
  }
158
144
  }, 200);
159
145
  }
160
- }, [currency]);
146
+ }, [currency, loading]);
161
147
 
162
148
  const handleRecharge = () => {
163
149
  if (!currency) return;
@@ -274,14 +260,211 @@ export default function BalanceRechargePage() {
274
260
  </Typography>
275
261
 
276
262
  {currency && (
277
- <Box>
263
+ <Box ref={rechargeRef}>
264
+ <Stack sx={{ maxWidth: '600px' }}>
265
+ <Box sx={{ mb: 4 }}>
266
+ <BalanceCard elevation={0}>
267
+ <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
268
+ <Stack spacing={0.5}>
269
+ <Typography variant="body2" color="text.secondary">
270
+ {t('customer.recharge.receiveAddress')}
271
+ </Typography>
272
+ <Typography variant="body1" sx={{ wordBreak: 'break-all', fontFamily: 'monospace' }}>
273
+ {payerValue?.paymentAddress || t('customer.balance.addressNotFound')}
274
+ </Typography>
275
+ </Stack>
276
+ {currency.logo && (
277
+ <Avatar
278
+ src={currency.logo}
279
+ alt={currency.name}
280
+ sx={{
281
+ width: {
282
+ xs: 30,
283
+ sm: 40,
284
+ },
285
+ height: {
286
+ xs: 30,
287
+ sm: 40,
288
+ },
289
+ }}
290
+ />
291
+ )}
292
+ </Stack>
293
+ </BalanceCard>
294
+
295
+ <BalanceCard
296
+ elevation={0}
297
+ onClick={() => balanceLink && window.open(balanceLink, '_blank')}
298
+ sx={{
299
+ color: 'text.primary',
300
+ borderRadius: 'var(--radius-m, 8px)',
301
+ transition: 'all 0.2s ease-in-out',
302
+ cursor: balanceLink ? 'pointer' : 'default',
303
+ position: 'relative',
304
+ '&:hover': balanceLink
305
+ ? {
306
+ '& .arrow-icon': {
307
+ opacity: 1,
308
+ transform: 'translateX(0)',
309
+ },
310
+ }
311
+ : undefined,
312
+ }}>
313
+ <Stack direction="row" alignItems="center" justifyContent="space-between">
314
+ <Stack>
315
+ <Typography
316
+ variant="body1"
317
+ color="inherit"
318
+ sx={{ display: 'flex', alignItems: 'center', gap: 1, color: 'text.secondary' }}>
319
+ <AccountBalanceWalletOutlined color="success" fontSize="small" />
320
+ {t('admin.customer.summary.balance')}
321
+ </Typography>
322
+ <Typography variant="h3" sx={{ fontWeight: 'bold', mt: 1, color: 'text.primary' }}>
323
+ {currentBalance} {currency.symbol}
324
+ </Typography>
325
+ </Stack>
326
+ {balanceLink && (
327
+ <ArrowForwardOutlined
328
+ className="arrow-icon"
329
+ sx={{
330
+ opacity: 0,
331
+ transform: 'translateX(-10px)',
332
+ transition: 'all 0.2s ease-in-out',
333
+ color: 'inherit',
334
+ fontSize: 30,
335
+ }}
336
+ />
337
+ )}
338
+ </Stack>
339
+ </BalanceCard>
340
+ </Box>
341
+
342
+ <Paper elevation={0} sx={{ mb: 3, backgroundColor: 'background.default', borderRadius: '16px' }}>
343
+ <Grid container spacing={2}>
344
+ {presetAmounts.map(({ amount: presetAmount }) => (
345
+ <Grid item xs={6} sm={3} key={presetAmount}>
346
+ <Card
347
+ variant="outlined"
348
+ sx={{
349
+ height: '100%',
350
+ display: 'flex',
351
+ flexDirection: 'column',
352
+ justifyContent: 'center',
353
+ transition: 'all 0.2s',
354
+ cursor: 'pointer',
355
+ borderRadius: '12px',
356
+ '&:hover': {
357
+ transform: 'translateY(-4px)',
358
+ boxShadow: 3,
359
+ },
360
+ ...(amount === presetAmount && !customAmount
361
+ ? {
362
+ borderColor: 'primary.main',
363
+ borderWidth: 2,
364
+ backgroundColor: 'primary.lighter',
365
+ }
366
+ : {}),
367
+ }}>
368
+ <CardActionArea onClick={() => handleSelect(presetAmount)} sx={{ height: '100%', p: 1.5 }}>
369
+ <Typography
370
+ variant="h6"
371
+ align="center"
372
+ sx={{
373
+ fontWeight: 600,
374
+ color: amount === presetAmount && !customAmount ? 'primary.main' : 'text.primary',
375
+ }}>
376
+ {presetAmount} {currency.symbol}
377
+ </Typography>
378
+ </CardActionArea>
379
+ </Card>
380
+ </Grid>
381
+ ))}
382
+ <Grid item xs={6} sm={3}>
383
+ <Card
384
+ variant="outlined"
385
+ sx={{
386
+ height: '100%',
387
+ display: 'flex',
388
+ flexDirection: 'column',
389
+ justifyContent: 'center',
390
+ transition: 'all 0.2s',
391
+ cursor: 'pointer',
392
+ borderRadius: '12px',
393
+ '&:hover': {
394
+ transform: 'translateY(-4px)',
395
+ boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
396
+ },
397
+ ...(customAmount
398
+ ? {
399
+ borderColor: 'primary.main',
400
+ borderWidth: 2,
401
+ backgroundColor: 'primary.lighter',
402
+ }
403
+ : {}),
404
+ }}>
405
+ <CardActionArea onClick={handleCustomSelect} sx={{ height: '100%', p: 1 }}>
406
+ <Stack direction="row" spacing={1} justifyContent="center" alignItems="center">
407
+ <Typography
408
+ variant="h6"
409
+ align="center"
410
+ sx={{ fontWeight: 600, color: customAmount ? 'primary.main' : 'text.primary' }}>
411
+ {t('customer.recharge.custom') || t('common.custom')}
412
+ </Typography>
413
+ </Stack>
414
+ </CardActionArea>
415
+ </Card>
416
+ </Grid>
417
+ </Grid>
418
+ </Paper>
419
+
420
+ {customAmount && (
421
+ <Box sx={{ mb: 3 }}>
422
+ <TextField
423
+ fullWidth
424
+ label={t('customer.recharge.amount')}
425
+ variant="outlined"
426
+ type="text"
427
+ value={amount}
428
+ error={!!amountError}
429
+ helperText={amountError}
430
+ onChange={handleAmountChange}
431
+ InputProps={{
432
+ endAdornment: <Typography>{currency.symbol}</Typography>,
433
+ autoComplete: 'off',
434
+ }}
435
+ inputRef={customInputRef}
436
+ />
437
+ </Box>
438
+ )}
439
+
440
+ <Button
441
+ fullWidth
442
+ size="large"
443
+ variant="contained"
444
+ color="primary"
445
+ onClick={handleRecharge}
446
+ disabled={!amount || parseFloat(amount) <= 0 || !!amountError}
447
+ sx={{
448
+ mb: 4,
449
+ py: 1.5,
450
+ borderRadius: '8px',
451
+ boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
452
+ '&:hover': {
453
+ boxShadow: '0 6px 15px rgba(0,0,0,0.15)',
454
+ transform: 'translateY(-2px)',
455
+ },
456
+ transition: 'all 0.2s',
457
+ }}>
458
+ {t('customer.recharge.submit')}
459
+ </Button>
460
+ </Stack>
278
461
  {relatedSubscriptions.length > 0 && (
279
462
  <Box sx={{ mb: 3 }}>
280
- <Typography variant="h6" gutterBottom>
463
+ <Typography variant="h4" gutterBottom>
281
464
  {t('customer.recharge.relatedSubscriptions')}
282
465
  </Typography>
283
466
 
284
- <SubscriptionScroll>
467
+ <Stack direction="row" sx={{ flexWrap: 'wrap', gap: 2 }}>
285
468
  {relatedSubscriptions.map((subscription) => (
286
469
  <Stack
287
470
  key={subscription.id}
@@ -289,7 +472,7 @@ export default function BalanceRechargePage() {
289
472
  className="base-card"
290
473
  sx={{
291
474
  minWidth: '220px',
292
- maxWidth: '220px',
475
+ flex: 1,
293
476
  }}>
294
477
  <Stack direction="row" alignItems="center" spacing={1.5} sx={{ mb: 1 }}>
295
478
  <Typography
@@ -313,194 +496,9 @@ export default function BalanceRechargePage() {
313
496
  )}
314
497
  </Stack>
315
498
  ))}
316
- </SubscriptionScroll>
317
- </Box>
318
- )}
319
-
320
- <Box sx={{ mb: 4 }}>
321
- <BalanceCard elevation={0}>
322
- <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
323
- <Stack spacing={0.5}>
324
- <Typography variant="body2" color="text.secondary">
325
- {t('customer.recharge.receiveAddress')}
326
- </Typography>
327
- <Typography variant="body1" sx={{ wordBreak: 'break-all', fontFamily: 'monospace' }}>
328
- {payerValue?.paymentAddress || t('customer.balance.addressNotFound')}
329
- </Typography>
330
- </Stack>
331
- {currency.logo && <Avatar src={currency.logo} alt={currency.name} sx={{ width: 40, height: 40 }} />}
332
499
  </Stack>
333
- </BalanceCard>
334
-
335
- <BalanceCard
336
- elevation={0}
337
- onClick={() => balanceLink && window.open(balanceLink, '_blank')}
338
- sx={{
339
- background: 'var(--tags-tag-orange-bg, #B7FEE3)',
340
- color: 'var(--tags-tag-orange-text, #007C52)',
341
- borderRadius: 'var(--radius-m, 8px)',
342
- border: 'none',
343
- transition: 'all 0.2s ease-in-out',
344
- cursor: balanceLink ? 'pointer' : 'default',
345
- position: 'relative',
346
- '&:hover': balanceLink
347
- ? {
348
- transform: 'translateY(-4px)',
349
- boxShadow: '0 8px 16px rgba(0, 124, 82, 0.1)',
350
- '& .arrow-icon': {
351
- opacity: 1,
352
- transform: 'translateX(0)',
353
- },
354
- }
355
- : undefined,
356
- }}>
357
- <Stack direction="row" alignItems="center" justifyContent="space-between">
358
- <Stack>
359
- <Typography variant="h6" color="inherit">
360
- {t('admin.customer.summary.balance')}
361
- </Typography>
362
- <Typography variant="h3" sx={{ fontWeight: 'bold', mt: 1 }}>
363
- {currentBalance} {currency.symbol}
364
- </Typography>
365
- </Stack>
366
- {balanceLink && (
367
- <ArrowForwardOutlined
368
- className="arrow-icon"
369
- sx={{
370
- opacity: 0,
371
- transform: 'translateX(-10px)',
372
- transition: 'all 0.2s ease-in-out',
373
- color: 'inherit',
374
- fontSize: 30,
375
- }}
376
- />
377
- )}
378
- </Stack>
379
- </BalanceCard>
380
- </Box>
381
-
382
- <Paper
383
- ref={rechargeRef}
384
- elevation={0}
385
- sx={{ mb: 3, backgroundColor: 'background.default', borderRadius: '16px' }}>
386
- <Grid container spacing={2}>
387
- {presetAmounts.map(({ amount: presetAmount }) => (
388
- <Grid item xs={6} sm={3} key={presetAmount}>
389
- <Card
390
- variant="outlined"
391
- sx={{
392
- height: '100%',
393
- display: 'flex',
394
- flexDirection: 'column',
395
- justifyContent: 'center',
396
- transition: 'all 0.2s',
397
- cursor: 'pointer',
398
- borderRadius: '12px',
399
- '&:hover': {
400
- transform: 'translateY(-4px)',
401
- boxShadow: 3,
402
- },
403
- ...(amount === presetAmount && !customAmount
404
- ? {
405
- borderColor: 'primary.main',
406
- borderWidth: 2,
407
- backgroundColor: 'primary.lighter',
408
- }
409
- : {}),
410
- }}>
411
- <CardActionArea onClick={() => handleSelect(presetAmount)} sx={{ height: '100%', p: 1.5 }}>
412
- <Typography
413
- variant="h6"
414
- align="center"
415
- sx={{
416
- fontWeight: 600,
417
- color: amount === presetAmount && !customAmount ? 'primary.main' : 'text.primary',
418
- }}>
419
- {presetAmount} {currency.symbol}
420
- </Typography>
421
- </CardActionArea>
422
- </Card>
423
- </Grid>
424
- ))}
425
- <Grid item xs={6} sm={3}>
426
- <Card
427
- variant="outlined"
428
- sx={{
429
- height: '100%',
430
- display: 'flex',
431
- flexDirection: 'column',
432
- justifyContent: 'center',
433
- transition: 'all 0.2s',
434
- cursor: 'pointer',
435
- borderRadius: '12px',
436
- '&:hover': {
437
- transform: 'translateY(-4px)',
438
- boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
439
- },
440
- ...(customAmount
441
- ? {
442
- borderColor: 'primary.main',
443
- borderWidth: 2,
444
- backgroundColor: 'primary.lighter',
445
- }
446
- : {}),
447
- }}>
448
- <CardActionArea onClick={handleCustomSelect} sx={{ height: '100%', p: 1 }}>
449
- <Stack direction="row" spacing={1} justifyContent="center" alignItems="center">
450
- <Typography
451
- variant="h6"
452
- align="center"
453
- sx={{ fontWeight: 600, color: customAmount ? 'primary.main' : 'text.primary' }}>
454
- {t('customer.recharge.custom') || t('common.custom')}
455
- </Typography>
456
- </Stack>
457
- </CardActionArea>
458
- </Card>
459
- </Grid>
460
- </Grid>
461
- </Paper>
462
-
463
- {customAmount && (
464
- <Box sx={{ mb: 3 }}>
465
- <TextField
466
- fullWidth
467
- label={t('customer.recharge.amount')}
468
- variant="outlined"
469
- type="text"
470
- value={amount}
471
- error={!!amountError}
472
- helperText={amountError}
473
- onChange={handleAmountChange}
474
- InputProps={{
475
- endAdornment: <Typography>{currency.symbol}</Typography>,
476
- autoComplete: 'off',
477
- }}
478
- inputRef={customInputRef}
479
- />
480
500
  </Box>
481
501
  )}
482
-
483
- <Button
484
- fullWidth
485
- size="large"
486
- variant="contained"
487
- color="primary"
488
- onClick={handleRecharge}
489
- disabled={!amount || parseFloat(amount) <= 0 || !!amountError}
490
- sx={{
491
- mb: 4,
492
- py: 1.5,
493
- borderRadius: '8px',
494
- boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
495
- '&:hover': {
496
- boxShadow: '0 6px 15px rgba(0,0,0,0.15)',
497
- transform: 'translateY(-2px)',
498
- },
499
- transition: 'all 0.2s',
500
- }}>
501
- {t('customer.recharge.submit')}
502
- </Button>
503
-
504
502
  <Divider sx={{ mb: 3 }} />
505
503
 
506
504
  <Typography variant="h4" gutterBottom>
package/src/pages/customer/recharge/subscription.tsx CHANGED
@@ -28,7 +28,7 @@ import {
28
28
  } from '@blocklet/payment-react';
29
29
  import { joinURL } from 'ufo';
30
30
  import type { TSubscriptionExpanded } from '@blocklet/payment-types';
31
- import { ArrowBackOutlined, ArrowForwardOutlined } from '@mui/icons-material';
31
+ import { AccountBalanceWalletOutlined, ArrowBackOutlined, ArrowForwardOutlined } from '@mui/icons-material';
32
32
  import { BN, fromUnitToToken } from '@ocap/util';
33
33
  import RechargeList from '../../../components/invoice/recharge';
34
34
  import SubscriptionDescription from '../../../components/subscription/description';
@@ -344,14 +344,11 @@ export default function RechargePage() {
344
344
  <BalanceCard
345
345
  onClick={() => balanceLink && window.open(balanceLink, '_blank')}
346
346
  sx={{
347
- background: 'var(--tags-tag-orange-bg, #B7FEE3)',
348
- color: 'var(--tags-tag-orange-text, #007C52)',
347
+ color: 'text.primary',
349
348
  borderRadius: 'var(--radius-m, 8px)',
350
- border: 'none',
351
-
352
349
  transition: 'all 0.2s ease-in-out',
353
- position: 'relative',
354
350
  cursor: balanceLink ? 'pointer' : 'default',
351
+ position: 'relative',
355
352
  '&:hover': balanceLink
356
353
  ? {
357
354
  '& .MuiSvgIcon-root': {
@@ -363,8 +360,14 @@ export default function RechargePage() {
363
360
  }}>
364
361
  <Stack direction="row" alignItems="center" spacing={1}>
365
362
  <Stack flex={1}>
366
- <Typography variant="subtitle1">{t('admin.customer.summary.balance')}</Typography>
367
- <Typography variant="h4">
363
+ <Typography
364
+ variant="body1"
365
+ color="inherit"
366
+ sx={{ display: 'flex', alignItems: 'center', gap: 1, color: 'text.secondary' }}>
367
+ <AccountBalanceWalletOutlined color="success" fontSize="small" />
368
+ {t('admin.customer.summary.balance')}
369
+ </Typography>
370
+ <Typography variant="h3" sx={{ fontWeight: 'bold', mt: 1, color: 'text.primary' }}>
368
371
  {currentBalance} {subscription.paymentCurrency.symbol}
369
372
  </Typography>
370
373
  </Stack>