@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.
- package/es/checkout/donate.d.ts +1 -1
- package/es/checkout/donate.js +37 -23
- package/es/locales/en.js +2 -2
- package/es/locales/zh.js +2 -2
- package/lib/checkout/donate.d.ts +1 -1
- package/lib/checkout/donate.js +37 -32
- package/lib/locales/en.js +2 -2
- package/lib/locales/zh.js +2 -2
- package/package.json +3 -3
- package/src/checkout/donate.tsx +45 -24
- package/src/locales/en.tsx +2 -2
- package/src/locales/zh.tsx +2 -2
package/es/checkout/donate.d.ts
CHANGED
package/es/checkout/donate.js
CHANGED
|
@@ -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 = [],
|
|
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", {
|
|
71
|
-
|
|
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 = [],
|
|
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", {
|
|
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 = [],
|
|
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(
|
|
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:
|
|
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:
|
|
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",
|
|
289
|
-
/* @__PURE__ */
|
|
290
|
-
|
|
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: "
|
|
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
|
-
|
|
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: "\
|
|
117
|
-
|
|
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",
|
package/lib/checkout/donate.d.ts
CHANGED
package/lib/checkout/donate.js
CHANGED
|
@@ -46,7 +46,7 @@ const fetchSupporters = (target, livemode = true) => {
|
|
|
46
46
|
};
|
|
47
47
|
function SupporterAvatar({
|
|
48
48
|
supporters = [],
|
|
49
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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.
|
|
214
|
-
|
|
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:
|
|
222
|
-
height:
|
|
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:
|
|
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
|
-
|
|
372
|
+
flexDirection: "column",
|
|
368
373
|
gap: 2,
|
|
369
|
-
children: [/* @__PURE__ */(0, _jsxRuntime.
|
|
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: "
|
|
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
|
-
|
|
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: "\
|
|
124
|
-
|
|
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.
|
|
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.
|
|
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": "
|
|
123
|
+
"gitHead": "94e507a512252badd0ee5b537cba5a1d52cc061b"
|
|
124
124
|
}
|
package/src/checkout/donate.tsx
CHANGED
|
@@ -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
|
|
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 = [],
|
|
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
|
-
{
|
|
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={
|
|
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 = [],
|
|
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
|
-
{
|
|
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 = [],
|
|
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
|
-
<
|
|
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:
|
|
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:
|
|
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"
|
|
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: '
|
|
454
|
+
text: 'Tip',
|
|
434
455
|
},
|
|
435
456
|
},
|
|
436
457
|
};
|
package/src/locales/en.tsx
CHANGED
|
@@ -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
|
-
|
|
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',
|
package/src/locales/zh.tsx
CHANGED
|
@@ -115,8 +115,8 @@ export default flat({
|
|
|
115
115
|
between: '金额必须大于 {min} 且小于 {max}',
|
|
116
116
|
custom: '输入金额',
|
|
117
117
|
select: '选择金额',
|
|
118
|
-
summary: '
|
|
119
|
-
|
|
118
|
+
summary: '共有 {total} 人支持 {totalAmount}{symbol}',
|
|
119
|
+
empty: '❤️ 支持一下',
|
|
120
120
|
},
|
|
121
121
|
cardPay: '使用卡片{action}',
|
|
122
122
|
empty: '没有可支付的项目',
|