@blocklet/payment-react 1.13.293 → 1.13.294

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.
@@ -6,7 +6,7 @@ export type DonateHistory = {
6
6
  supporters: TCheckoutSessionExpanded[];
7
7
  currency: TPaymentCurrency;
8
8
  method: TPaymentMethod;
9
- total: number;
9
+ totalAmount: string;
10
10
  };
11
11
  export interface ButtonType extends Omit<MUIButtonProps, 'text'> {
12
12
  text: string;
@@ -23,7 +23,7 @@ import uniqBy from "lodash/unionBy";
23
23
  import { useEffect, useState } from "react";
24
24
  import TxLink from "../components/blockchain/tx.js";
25
25
  import api from "../libs/api.js";
26
- import { formatBNStr, formatDateTime, formatError, lazyLoad } from "../libs/util.js";
26
+ import { formatAmount, formatBNStr, formatDateTime, formatError, lazyLoad } from "../libs/util.js";
27
27
  import CheckoutForm from "./form.js";
28
28
  const donationCache = {};
29
29
  const createOrUpdateDonation = (settings, livemode = true) => {
@@ -47,9 +47,10 @@ const fetchSupporters = (target, livemode = true) => {
47
47
  }
48
48
  return supporterCache[target];
49
49
  };
50
- function SupporterAvatar({ supporters = [], total = 0, currency, method }) {
50
+ function SupporterAvatar({ supporters = [], totalAmount = "0", currency, method }) {
51
51
  const { t } = useLocaleContext();
52
52
  const customers = uniqBy(supporters, "customer_did");
53
+ const customersNum = customers.length;
53
54
  return /* @__PURE__ */ jsxs(
54
55
  Box,
55
56
  {
@@ -67,8 +68,12 @@ function SupporterAvatar({ supporters = [], total = 0, currency, method }) {
67
68
  sm: 1
68
69
  },
69
70
  children: [
70
- /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: t("payment.checkout.donation.summary", { total }) }),
71
- /* @__PURE__ */ jsx(AvatarGroup, { total, max: 20, children: customers.map((x) => /* @__PURE__ */ jsx(
71
+ /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
72
+ total: customersNum,
73
+ symbol: currency.symbol,
74
+ totalAmount: formatAmount(totalAmount || "0", currency.decimal)
75
+ }) }),
76
+ /* @__PURE__ */ jsx(AvatarGroup, { total: customersNum, max: 20, children: customers.map((x) => /* @__PURE__ */ jsx(
72
77
  Avatar,
73
78
  {
74
79
  title: x.customer?.name,
@@ -82,10 +87,16 @@ function SupporterAvatar({ supporters = [], total = 0, currency, method }) {
82
87
  }
83
88
  );
84
89
  }
85
- function SupporterTable({ supporters = [], total = 0, currency, method }) {
90
+ function SupporterTable({ supporters = [], totalAmount = "0", currency, method }) {
86
91
  const { t } = useLocaleContext();
92
+ const customers = uniqBy(supporters, "customer_did");
93
+ const customersNum = customers.length;
87
94
  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: { xs: 0.5, sm: 1 }, children: [
88
- /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: t("payment.checkout.donation.summary", { total }) }),
95
+ /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
96
+ total: customersNum,
97
+ symbol: currency.symbol,
98
+ totalAmount: formatAmount(totalAmount || "0", currency.decimal)
99
+ }) }),
89
100
  /* @__PURE__ */ jsx(Table, { size: "small", sx: { width: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsx(TableBody, { children: supporters.map((x) => /* @__PURE__ */ jsxs(
90
101
  TableRow,
91
102
  {
@@ -124,36 +135,36 @@ function SupporterTable({ supporters = [], total = 0, currency, method }) {
124
135
  )) }) })
125
136
  ] });
126
137
  }
127
- function SupporterSimple({ supporters = [], total = 0, currency, method }) {
138
+ function SupporterSimple({ supporters = [], totalAmount = "0", currency, method }) {
128
139
  const { t } = useLocaleContext();
129
140
  const customers = uniqBy(supporters, "customer_did");
141
+ const customersNum = customers.length;
130
142
  return /* @__PURE__ */ jsxs(
131
143
  Box,
132
144
  {
133
145
  display: "flex",
146
+ flexDirection: "column",
134
147
  alignItems: "center",
135
- sx: {
136
- ".MuiAvatar-root": {
137
- width: "32px",
138
- height: "32px"
139
- }
140
- },
141
148
  gap: {
142
149
  xs: 0.5,
143
150
  sm: 1
144
151
  },
145
152
  children: [
146
- /* @__PURE__ */ jsx(AvatarGroup, { total, max: 10, children: customers.map((x) => /* @__PURE__ */ jsx(
153
+ /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
154
+ total: customersNum,
155
+ symbol: currency.symbol,
156
+ totalAmount: formatAmount(totalAmount || "0", currency.decimal)
157
+ }) }),
158
+ /* @__PURE__ */ jsx(AvatarGroup, { total: customersNum, max: 10, children: customers.map((x) => /* @__PURE__ */ jsx(
147
159
  Avatar,
148
160
  {
149
161
  title: x.customer?.name,
150
162
  src: `/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`,
151
163
  variant: "circular",
152
- sx: { width: 32, height: 32 }
164
+ sx: { width: 24, height: 24 }
153
165
  },
154
166
  x.id
155
- )) }),
156
- /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: t("payment.checkout.donation.simpleSummary", { total }) })
167
+ )) })
157
168
  ]
158
169
  }
159
170
  );
@@ -263,9 +274,9 @@ export default function CheckoutDonate({
263
274
  children: /* @__PURE__ */ jsxs(
264
275
  Box,
265
276
  {
266
- p: 1,
267
277
  sx: {
268
- minWidth: 200
278
+ minWidth: 320,
279
+ padding: "20px"
269
280
  },
270
281
  children: [
271
282
  supporters.loading && /* @__PURE__ */ jsx(
@@ -285,9 +296,12 @@ export default function CheckoutDonate({
285
296
  children: /* @__PURE__ */ jsx(CircularProgress, {})
286
297
  }
287
298
  ),
288
- /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, children: [
289
- /* @__PURE__ */ jsx(SupporterSimple, { ...supporters.data }),
290
- /* @__PURE__ */ jsx(Button, { ...inlineOptions.button, onClick: () => setState({ open: true }), children: inlineOptions?.button?.text })
299
+ /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", flexDirection: "column", gap: 2, children: [
300
+ /* @__PURE__ */ jsxs(Button, { ...inlineOptions.button, onClick: () => setState({ open: true }), children: [
301
+ settings.appearance.button.icon,
302
+ inlineOptions?.button?.text
303
+ ] }),
304
+ /* @__PURE__ */ jsx(SupporterSimple, { ...supporters.data })
291
305
  ] })
292
306
  ]
293
307
  }
@@ -351,7 +365,7 @@ CheckoutDonate.defaultProps = {
351
365
  mode: "default",
352
366
  inlineOptions: {
353
367
  button: {
354
- text: "Support"
368
+ text: "Tip"
355
369
  }
356
370
  }
357
371
  };
package/es/locales/en.js CHANGED
@@ -113,8 +113,8 @@ export default flat({
113
113
  between: "Please enter an amount between {min} and {max}.",
114
114
  custom: "Custom Amount",
115
115
  select: "Select Amount",
116
- summary: "{total} supporters",
117
- simpleSummary: "{total} supporters"
116
+ summary: "{total} supporters {totalAmount}{symbol}",
117
+ empty: "No supporters yet"
118
118
  },
119
119
  cardPay: "{action} with card",
120
120
  empty: "No thing to pay",
package/es/locales/zh.js CHANGED
@@ -113,8 +113,8 @@ export default flat({
113
113
  between: "\u91D1\u989D\u5FC5\u987B\u5927\u4E8E {min} \u4E14\u5C0F\u4E8E {max}",
114
114
  custom: "\u8F93\u5165\u91D1\u989D",
115
115
  select: "\u9009\u62E9\u91D1\u989D",
116
- summary: "\u5DF2\u7ECF\u6709 {total} \u4EBA\u652F\u6301",
117
- simpleSummary: "{total} \u4EBA\u652F\u6301"
116
+ summary: "\u5171\u6709 {total} \u4EBA\u652F\u6301 {totalAmount}{symbol}",
117
+ empty: "\u2764\uFE0F \u652F\u6301\u4E00\u4E0B"
118
118
  },
119
119
  cardPay: "\u4F7F\u7528\u5361\u7247{action}",
120
120
  empty: "\u6CA1\u6709\u53EF\u652F\u4ED8\u7684\u9879\u76EE",
@@ -6,7 +6,7 @@ export type DonateHistory = {
6
6
  supporters: TCheckoutSessionExpanded[];
7
7
  currency: TPaymentCurrency;
8
8
  method: TPaymentMethod;
9
- total: number;
9
+ totalAmount: string;
10
10
  };
11
11
  export interface ButtonType extends Omit<MUIButtonProps, 'text'> {
12
12
  text: string;
@@ -46,7 +46,7 @@ const fetchSupporters = (target, livemode = true) => {
46
46
  };
47
47
  function SupporterAvatar({
48
48
  supporters = [],
49
- total = 0,
49
+ totalAmount = "0",
50
50
  currency,
51
51
  method
52
52
  }) {
@@ -54,6 +54,7 @@ function SupporterAvatar({
54
54
  t
55
55
  } = (0, _context.useLocaleContext)();
56
56
  const customers = (0, _unionBy.default)(supporters, "customer_did");
57
+ const customersNum = customers.length;
57
58
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
58
59
  display: "flex",
59
60
  flexDirection: "column",
@@ -71,11 +72,13 @@ function SupporterAvatar({
71
72
  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
72
73
  component: "p",
73
74
  color: "text.secondary",
74
- children: t("payment.checkout.donation.summary", {
75
- total
75
+ children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
76
+ total: customersNum,
77
+ symbol: currency.symbol,
78
+ totalAmount: (0, _util.formatAmount)(totalAmount || "0", currency.decimal)
76
79
  })
77
80
  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
78
- total,
81
+ total: customersNum,
79
82
  max: 20,
80
83
  children: customers.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
81
84
  title: x.customer?.name,
@@ -91,13 +94,15 @@ function SupporterAvatar({
91
94
  }
92
95
  function SupporterTable({
93
96
  supporters = [],
94
- total = 0,
97
+ totalAmount = "0",
95
98
  currency,
96
99
  method
97
100
  }) {
98
101
  const {
99
102
  t
100
103
  } = (0, _context.useLocaleContext)();
104
+ const customers = (0, _unionBy.default)(supporters, "customer_did");
105
+ const customersNum = customers.length;
101
106
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
102
107
  display: "flex",
103
108
  flexDirection: "column",
@@ -109,8 +114,10 @@ function SupporterTable({
109
114
  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
110
115
  component: "p",
111
116
  color: "text.secondary",
112
- children: t("payment.checkout.donation.summary", {
113
- total
117
+ children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
118
+ total: customersNum,
119
+ symbol: currency.symbol,
120
+ totalAmount: (0, _util.formatAmount)(totalAmount || "0", currency.decimal)
114
121
  })
115
122
  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Table, {
116
123
  size: "small",
@@ -189,7 +196,7 @@ function SupporterTable({
189
196
  }
190
197
  function SupporterSimple({
191
198
  supporters = [],
192
- total = 0,
199
+ totalAmount = "0",
193
200
  currency,
194
201
  method
195
202
  }) {
@@ -197,37 +204,35 @@ function SupporterSimple({
197
204
  t
198
205
  } = (0, _context.useLocaleContext)();
199
206
  const customers = (0, _unionBy.default)(supporters, "customer_did");
207
+ const customersNum = customers.length;
200
208
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
201
209
  display: "flex",
210
+ flexDirection: "column",
202
211
  alignItems: "center",
203
- sx: {
204
- ".MuiAvatar-root": {
205
- width: "32px",
206
- height: "32px"
207
- }
208
- },
209
212
  gap: {
210
213
  xs: 0.5,
211
214
  sm: 1
212
215
  },
213
- children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
214
- total,
216
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
217
+ component: "p",
218
+ color: "text.secondary",
219
+ children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
220
+ total: customersNum,
221
+ symbol: currency.symbol,
222
+ totalAmount: (0, _util.formatAmount)(totalAmount || "0", currency.decimal)
223
+ })
224
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
225
+ total: customersNum,
215
226
  max: 10,
216
227
  children: customers.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
217
228
  title: x.customer?.name,
218
229
  src: `/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`,
219
230
  variant: "circular",
220
231
  sx: {
221
- width: 32,
222
- height: 32
232
+ width: 24,
233
+ height: 24
223
234
  }
224
235
  }, x.id))
225
- }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
226
- component: "p",
227
- color: "text.secondary",
228
- children: t("payment.checkout.donation.simpleSummary", {
229
- total
230
- })
231
236
  })]
232
237
  });
233
238
  }
@@ -344,9 +349,9 @@ function CheckoutDonate({
344
349
  horizontal: "center"
345
350
  },
346
351
  children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
347
- p: 1,
348
352
  sx: {
349
- minWidth: 200
353
+ minWidth: 320,
354
+ padding: "20px"
350
355
  },
351
356
  children: [supporters.loading && /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
352
357
  style: {
@@ -364,16 +369,16 @@ function CheckoutDonate({
364
369
  }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
365
370
  display: "flex",
366
371
  alignItems: "center",
367
- justifyContent: "space-between",
372
+ flexDirection: "column",
368
373
  gap: 2,
369
- children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterSimple, {
370
- ...supporters.data
371
- }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
374
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
372
375
  ...inlineOptions.button,
373
376
  onClick: () => setState({
374
377
  open: true
375
378
  }),
376
- children: inlineOptions?.button?.text
379
+ children: [settings.appearance.button.icon, inlineOptions?.button?.text]
380
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterSimple, {
381
+ ...supporters.data
377
382
  })]
378
383
  })]
379
384
  })
@@ -444,7 +449,7 @@ CheckoutDonate.defaultProps = {
444
449
  mode: "default",
445
450
  inlineOptions: {
446
451
  button: {
447
- text: "Support"
452
+ text: "Tip"
448
453
  }
449
454
  }
450
455
  };
package/lib/locales/en.js CHANGED
@@ -120,8 +120,8 @@ module.exports = (0, _flat.default)({
120
120
  between: "Please enter an amount between {min} and {max}.",
121
121
  custom: "Custom Amount",
122
122
  select: "Select Amount",
123
- summary: "{total} supporters",
124
- simpleSummary: "{total} supporters"
123
+ summary: "{total} supporters {totalAmount}{symbol}",
124
+ empty: "No supporters yet"
125
125
  },
126
126
  cardPay: "{action} with card",
127
127
  empty: "No thing to pay",
package/lib/locales/zh.js CHANGED
@@ -120,8 +120,8 @@ module.exports = (0, _flat.default)({
120
120
  between: "\u91D1\u989D\u5FC5\u987B\u5927\u4E8E {min} \u4E14\u5C0F\u4E8E {max}",
121
121
  custom: "\u8F93\u5165\u91D1\u989D",
122
122
  select: "\u9009\u62E9\u91D1\u989D",
123
- summary: "\u5DF2\u7ECF\u6709 {total} \u4EBA\u652F\u6301",
124
- simpleSummary: "{total} \u4EBA\u652F\u6301"
123
+ summary: "\u5171\u6709 {total} \u4EBA\u652F\u6301 {totalAmount}{symbol}",
124
+ empty: "\u2764\uFE0F \u652F\u6301\u4E00\u4E0B"
125
125
  },
126
126
  cardPay: "\u4F7F\u7528\u5361\u7247{action}",
127
127
  empty: "\u6CA1\u6709\u53EF\u652F\u4ED8\u7684\u9879\u76EE",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/payment-react",
3
- "version": "1.13.293",
3
+ "version": "1.13.294",
4
4
  "description": "Reusable react components for payment kit v2",
5
5
  "keywords": [
6
6
  "react",
@@ -91,7 +91,7 @@
91
91
  "@babel/core": "^7.24.7",
92
92
  "@babel/preset-env": "^7.24.7",
93
93
  "@babel/preset-react": "^7.24.7",
94
- "@blocklet/payment-types": "1.13.293",
94
+ "@blocklet/payment-types": "1.13.294",
95
95
  "@storybook/addon-essentials": "^7.6.19",
96
96
  "@storybook/addon-interactions": "^7.6.19",
97
97
  "@storybook/addon-links": "^7.6.19",
@@ -120,5 +120,5 @@
120
120
  "vite-plugin-babel": "^1.2.0",
121
121
  "vite-plugin-node-polyfills": "^0.21.0"
122
122
  },
123
- "gitHead": "d2f0dd9b6c3c0ce4c4c8a1c7f1d2cc5e8a332e5c"
123
+ "gitHead": "94e507a512252badd0ee5b537cba5a1d52cc061b"
124
124
  }
@@ -1,3 +1,4 @@
1
+ /* eslint-disable @typescript-eslint/indent */
1
2
  import Dialog from '@arcblock/ux/lib/Dialog';
2
3
  import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
3
4
  import type {
@@ -32,7 +33,7 @@ import { useEffect, useState } from 'react';
32
33
 
33
34
  import TxLink from '../components/blockchain/tx';
34
35
  import api from '../libs/api';
35
- import { formatBNStr, formatDateTime, formatError, lazyLoad } from '../libs/util';
36
+ import { formatAmount, formatBNStr, formatDateTime, formatError, lazyLoad } from '../libs/util';
36
37
  import { CheckoutProps } from '../types';
37
38
  import CheckoutForm from './form';
38
39
 
@@ -40,7 +41,8 @@ export type DonateHistory = {
40
41
  supporters: TCheckoutSessionExpanded[];
41
42
  currency: TPaymentCurrency;
42
43
  method: TPaymentMethod;
43
- total: number;
44
+ // total?: number;
45
+ totalAmount: string;
44
46
  };
45
47
 
46
48
  export interface ButtonType extends Omit<MUIButtonProps, 'text'> {
@@ -90,9 +92,10 @@ const fetchSupporters = (target: string, livemode: boolean = true): Promise<Dona
90
92
  };
91
93
 
92
94
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
93
- function SupporterAvatar({ supporters = [], total = 0, currency, method }: DonateHistory) {
95
+ function SupporterAvatar({ supporters = [], totalAmount = '0', currency, method }: DonateHistory) {
94
96
  const { t } = useLocaleContext();
95
97
  const customers = uniqBy(supporters, 'customer_did');
98
+ const customersNum = customers.length;
96
99
  return (
97
100
  <Box
98
101
  display="flex"
@@ -109,9 +112,15 @@ function SupporterAvatar({ supporters = [], total = 0, currency, method }: Donat
109
112
  sm: 1,
110
113
  }}>
111
114
  <Typography component="p" color="text.secondary">
112
- {t('payment.checkout.donation.summary', { total })}
115
+ {customersNum === 0
116
+ ? t('payment.checkout.donation.empty')
117
+ : t('payment.checkout.donation.summary', {
118
+ total: customersNum,
119
+ symbol: currency.symbol,
120
+ totalAmount: formatAmount(totalAmount || '0', currency.decimal),
121
+ })}
113
122
  </Typography>
114
- <AvatarGroup total={total} max={20}>
123
+ <AvatarGroup total={customersNum} max={20}>
115
124
  {customers.map((x) => (
116
125
  <Avatar
117
126
  key={x.id}
@@ -127,12 +136,20 @@ function SupporterAvatar({ supporters = [], total = 0, currency, method }: Donat
127
136
  }
128
137
 
129
138
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
130
- function SupporterTable({ supporters = [], total = 0, currency, method }: DonateHistory) {
139
+ function SupporterTable({ supporters = [], totalAmount = '0', currency, method }: DonateHistory) {
131
140
  const { t } = useLocaleContext();
141
+ const customers = uniqBy(supporters, 'customer_did');
142
+ const customersNum = customers.length;
132
143
  return (
133
144
  <Box display="flex" flexDirection="column" alignItems="center" gap={{ xs: 0.5, sm: 1 }}>
134
145
  <Typography component="p" color="text.secondary">
135
- {t('payment.checkout.donation.summary', { total })}
146
+ {customersNum === 0
147
+ ? t('payment.checkout.donation.empty')
148
+ : t('payment.checkout.donation.summary', {
149
+ total: customersNum,
150
+ symbol: currency.symbol,
151
+ totalAmount: formatAmount(totalAmount || '0', currency.decimal),
152
+ })}
136
153
  </Typography>
137
154
  <Table size="small" sx={{ width: '100%', overflow: 'hidden' }}>
138
155
  <TableBody>
@@ -187,37 +204,40 @@ function SupporterTable({ supporters = [], total = 0, currency, method }: Donate
187
204
  }
188
205
 
189
206
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
190
- function SupporterSimple({ supporters = [], total = 0, currency, method }: DonateHistory) {
207
+ function SupporterSimple({ supporters = [], totalAmount = '0', currency, method }: DonateHistory) {
191
208
  const { t } = useLocaleContext();
192
209
  const customers = uniqBy(supporters, 'customer_did');
210
+ const customersNum = customers.length;
211
+
193
212
  return (
194
213
  <Box
195
214
  display="flex"
215
+ flexDirection="column"
196
216
  alignItems="center"
197
- sx={{
198
- '.MuiAvatar-root': {
199
- width: '32px',
200
- height: '32px',
201
- },
202
- }}
203
217
  gap={{
204
218
  xs: 0.5,
205
219
  sm: 1,
206
220
  }}>
207
- <AvatarGroup total={total} max={10}>
221
+ <Typography component="p" color="text.secondary">
222
+ {customersNum === 0
223
+ ? t('payment.checkout.donation.empty')
224
+ : t('payment.checkout.donation.summary', {
225
+ total: customersNum,
226
+ symbol: currency.symbol,
227
+ totalAmount: formatAmount(totalAmount || '0', currency.decimal),
228
+ })}
229
+ </Typography>
230
+ <AvatarGroup total={customersNum} max={10}>
208
231
  {customers.map((x) => (
209
232
  <Avatar
210
233
  key={x.id}
211
234
  title={x.customer?.name}
212
235
  src={`/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`}
213
236
  variant="circular"
214
- sx={{ width: 32, height: 32 }}
237
+ sx={{ width: 24, height: 24 }}
215
238
  />
216
239
  ))}
217
240
  </AvatarGroup>
218
- <Typography component="p" color="text.secondary">
219
- {t('payment.checkout.donation.simpleSummary', { total })}
220
- </Typography>
221
241
  </Box>
222
242
  );
223
243
  }
@@ -342,9 +362,9 @@ export default function CheckoutDonate({
342
362
  horizontal: 'center',
343
363
  }}>
344
364
  <Box
345
- p={1}
346
365
  sx={{
347
- minWidth: 200,
366
+ minWidth: 320,
367
+ padding: '20px',
348
368
  }}>
349
369
  {supporters.loading && (
350
370
  <div
@@ -362,11 +382,12 @@ export default function CheckoutDonate({
362
382
  <CircularProgress />
363
383
  </div>
364
384
  )}
365
- <Box display="flex" alignItems="center" justifyContent="space-between" gap={2}>
366
- <SupporterSimple {...(supporters.data as DonateHistory)} />
385
+ <Box display="flex" alignItems="center" flexDirection="column" gap={2}>
367
386
  <Button {...inlineOptions.button} onClick={() => setState({ open: true })}>
387
+ {settings.appearance.button.icon}
368
388
  {inlineOptions?.button?.text}
369
389
  </Button>
390
+ <SupporterSimple {...(supporters.data as DonateHistory)} />
370
391
  </Box>
371
392
  </Box>
372
393
  </Popover>
@@ -430,7 +451,7 @@ CheckoutDonate.defaultProps = {
430
451
  mode: 'default',
431
452
  inlineOptions: {
432
453
  button: {
433
- text: 'Support',
454
+ text: 'Tip',
434
455
  },
435
456
  },
436
457
  };
@@ -116,8 +116,8 @@ export default flat({
116
116
  between: 'Please enter an amount between {min} and {max}.',
117
117
  custom: 'Custom Amount',
118
118
  select: 'Select Amount',
119
- summary: '{total} supporters',
120
- simpleSummary: '{total} supporters',
119
+ summary: '{total} supporters {totalAmount}{symbol}',
120
+ empty: 'No supporters yet',
121
121
  },
122
122
  cardPay: '{action} with card',
123
123
  empty: 'No thing to pay',
@@ -115,8 +115,8 @@ export default flat({
115
115
  between: '金额必须大于 {min} 且小于 {max}',
116
116
  custom: '输入金额',
117
117
  select: '选择金额',
118
- summary: '已经有 {total} 人支持',
119
- simpleSummary: '{total} 人支持',
118
+ summary: '共有 {total} 人支持 {totalAmount}{symbol}',
119
+ empty: '❤️ 支持一下',
120
120
  },
121
121
  cardPay: '使用卡片{action}',
122
122
  empty: '没有可支付的项目',