@blocklet/payment-react 1.13.232 → 1.13.234

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 (22) hide show
  1. package/es/checkout/donate.js +10 -5
  2. package/es/components/blockchain/tx.js +2 -5
  3. package/es/payment/amount.js +1 -1
  4. package/es/payment/form/index.js +2 -2
  5. package/es/payment/index.js +2 -2
  6. package/es/payment/product-donation.js +3 -1
  7. package/es/payment/summary.js +3 -3
  8. package/lib/checkout/donate.js +59 -57
  9. package/lib/components/blockchain/tx.js +3 -4
  10. package/lib/payment/amount.js +1 -1
  11. package/lib/payment/form/index.js +2 -3
  12. package/lib/payment/index.js +2 -2
  13. package/lib/payment/product-donation.js +9 -1
  14. package/lib/payment/summary.js +3 -1
  15. package/package.json +3 -3
  16. package/src/checkout/donate.tsx +43 -36
  17. package/src/components/blockchain/tx.tsx +1 -2
  18. package/src/payment/amount.tsx +1 -1
  19. package/src/payment/form/index.tsx +2 -2
  20. package/src/payment/index.tsx +2 -2
  21. package/src/payment/product-donation.tsx +3 -1
  22. package/src/payment/summary.tsx +5 -3
package/es/checkout/donate.js CHANGED
@@ -11,6 +11,7 @@ import {
11
11
  Hidden,
12
12
  Stack,
13
13
  Table,
14
+ TableBody,
14
15
  TableCell,
15
16
  TableRow,
16
17
  Typography
@@ -21,7 +22,7 @@ import uniqBy from "lodash/unionBy";
21
22
  import { useEffect } from "react";
22
23
  import api from "../api.js";
23
24
  import TxLink from "../components/blockchain/tx.js";
24
- import { formatAmount, formatDateTime, formatError } from "../util.js";
25
+ import { formatBNStr, formatDateTime, formatError } from "../util.js";
25
26
  import CheckoutForm from "./form.js";
26
27
  const donationCache = {};
27
28
  const createOrUpdateDonation = (settings, livemode = true) => {
@@ -84,11 +85,15 @@ function SupporterTable({ supporters = [], total = 0, currency, method }) {
84
85
  const { t } = useLocaleContext();
85
86
  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", sx: { width: "100%" }, gap: { xs: 0.5, sm: 1 }, children: [
86
87
  /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: t("payment.checkout.donation.summary", { total }) }),
87
- /* @__PURE__ */ jsx(Table, { size: "small", sx: { width: "100%", overflow: "hidden" }, children: supporters.map((x) => /* @__PURE__ */ jsxs(
88
+ /* @__PURE__ */ jsx(Table, { size: "small", sx: { width: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsx(TableBody, { children: supporters.map((x) => /* @__PURE__ */ jsxs(
88
89
  TableRow,
89
90
  {
90
91
  sx: {
91
- "> td": { padding: "8px 16px 8px 0", borderTop: "1px solid #e0e0e0", borderBottom: "1px solid #e0e0e0" }
92
+ "> td": {
93
+ padding: "8px 16px 8px 0",
94
+ borderTop: "1px solid #e0e0e0",
95
+ borderBottom: "1px solid #e0e0e0"
96
+ }
92
97
  },
93
98
  children: [
94
99
  /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
@@ -104,7 +109,7 @@ function SupporterTable({ supporters = [], total = 0, currency, method }) {
104
109
  /* @__PURE__ */ jsx(Hidden, { smDown: true, children: /* @__PURE__ */ jsx(Typography, { children: x.customer?.name }) })
105
110
  ] }) }),
106
111
  /* @__PURE__ */ jsx(TableCell, { align: "right", children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 0.5, children: [
107
- /* @__PURE__ */ jsx(Typography, { fontWeight: 500, component: "strong", children: formatAmount(x.amount_total, currency.decimal) }),
112
+ /* @__PURE__ */ jsx(Typography, { fontWeight: 500, component: "strong", children: formatBNStr(x.amount_total, currency.decimal) }),
108
113
  /* @__PURE__ */ jsx(Typography, { component: "span", children: currency.symbol })
109
114
  ] }) }),
110
115
  /* @__PURE__ */ jsx(Hidden, { smDown: true, children: /* @__PURE__ */ jsx(TableCell, { align: "right", children: /* @__PURE__ */ jsx(Typography, { children: formatDateTime(x.created_at) }) }) }),
@@ -112,7 +117,7 @@ function SupporterTable({ supporters = [], total = 0, currency, method }) {
112
117
  ]
113
118
  },
114
119
  x.id
115
- )) })
120
+ )) }) })
116
121
  ] });
117
122
  }
118
123
  export default function CheckoutDonate({ settings, livemode, onPaid, onError }) {
package/es/components/blockchain/tx.js CHANGED
@@ -12,7 +12,7 @@ export default function TxLink(props) {
12
12
  if (!props.details || props.mode === "customer" && props.method.type === "stripe") {
13
13
  return /* @__PURE__ */ jsx(Typography, { component: "small", color: "text.secondary", children: t("common.none") });
14
14
  }
15
- const { text, link, gas } = getTxLink(props.method, props.details);
15
+ const { text, link } = getTxLink(props.method, props.details);
16
16
  if (link) {
17
17
  return /* @__PURE__ */ jsx(Link, { href: link, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(
18
18
  Stack,
@@ -23,10 +23,7 @@ export default function TxLink(props) {
23
23
  justifyContent: props.align === "left" ? "flex-start" : "flex-end",
24
24
  spacing: 1,
25
25
  children: [
26
- /* @__PURE__ */ jsxs(Typography, { component: "span", color: "primary", children: [
27
- text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join("...") : text,
28
- gas
29
- ] }),
26
+ /* @__PURE__ */ jsx(Typography, { component: "span", color: "primary", children: text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join("...") : text }),
30
27
  /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small" })
31
28
  ]
32
29
  }
package/es/payment/amount.js CHANGED
@@ -4,11 +4,11 @@ export default function PaymentAmount({ amount, sx }) {
4
4
  return /* @__PURE__ */ jsx(
5
5
  Typography,
6
6
  {
7
+ component: "div",
7
8
  sx: {
8
9
  my: 0.5,
9
10
  fontWeight: 600,
10
11
  fontSize: "2.5rem",
11
- lineHeight: "1.3",
12
12
  letterSpacing: "-0.03rem",
13
13
  fontVariantNumeric: "tabular-nums",
14
14
  ...sx
package/es/payment/form/index.js CHANGED
@@ -243,7 +243,7 @@ export default function PaymentForm({
243
243
  return /* @__PURE__ */ jsxs(Fragment, { children: [
244
244
  /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-contact", children: [
245
245
  /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { mb: 1 }, alignItems: "center", justifyContent: "space-between", children: [
246
- /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 600 }, children: t("payment.checkout.contact") }),
246
+ /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontWeight: 600 }, children: t("payment.checkout.contact") }),
247
247
  isColumnLayout || mode !== "standalone" ? null : /* @__PURE__ */ jsx(UserButtons, {})
248
248
  ] }),
249
249
  /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
@@ -300,7 +300,7 @@ export default function PaymentForm({
300
300
  ] }) }),
301
301
  /* @__PURE__ */ jsx(AddressForm, { mode: checkoutSession.billing_address_collection, stripe: method?.type === "stripe" }),
302
302
  /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", className: "cko-payment-methods", children: [
303
- /* @__PURE__ */ jsx(Typography, { sx: { mb: 1, color: "text.primary", fontWeight: 600 }, children: t("payment.checkout.method") }),
303
+ /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontWeight: 600 }, children: t("payment.checkout.method") }),
304
304
  /* @__PURE__ */ jsx(Stack, { direction: "row", sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
305
305
  Controller,
306
306
  {
package/es/payment/index.js CHANGED
@@ -249,7 +249,7 @@ export function PaymentInner({
249
249
  }
250
250
  )
251
251
  ] }) }),
252
- /* @__PURE__ */ jsxs(Stack, { className: "cko-payment", direction: "column", spacing: { xs: 2, sm: 4 }, children: [
252
+ /* @__PURE__ */ jsxs(Stack, { className: "cko-payment", direction: "column", spacing: { xs: 2, sm: 3 }, children: [
253
253
  completed && /* @__PURE__ */ jsx(
254
254
  PaymentSuccess,
255
255
  {
@@ -388,7 +388,7 @@ export const Root = styled(Box)`
388
388
  .cko-container {
389
389
  flex-direction: column;
390
390
  align-items: center;
391
- gap: 24px;
391
+ gap: 32px;
392
392
  min-width: 350px;
393
393
  max-width: 400px;
394
394
  }
package/es/payment/product-donation.js CHANGED
@@ -20,10 +20,12 @@ export default function ProductDonation({
20
20
  useEffect(() => {
21
21
  if (settings.amount.preset) {
22
22
  setState({ selected: settings.amount.preset, custom: false });
23
+ onChange({ priceId: item.price_id, amount: settings.amount.preset });
23
24
  } else if (settings.amount.presets && settings.amount.presets.length > 0) {
24
25
  setState({ selected: settings.amount.presets[0], custom: false });
26
+ onChange({ priceId: item.price_id, amount: settings.amount.presets[0] });
25
27
  }
26
- }, [settings.amount.preset, settings.amount.presets, setState]);
28
+ }, [settings.amount.preset, settings.amount.presets]);
27
29
  const handleSelect = (amount) => {
28
30
  setState({ selected: amount, custom: false, error: "" });
29
31
  onChange({ priceId: item.price_id, amount });
package/es/payment/summary.js CHANGED
@@ -142,10 +142,10 @@ export default function PaymentSummary({
142
142
  }
143
143
  };
144
144
  return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-product", direction: "column", ...rest, children: [
145
- /* @__PURE__ */ jsxs(Stack, { className: "cko-product-summary", direction: "column", alignItems: "flex-start", sx: { mb: { xs: 0, sm: 3 } }, children: [
146
- /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 500, fontSize: "1.15rem", color: "text.secondary" }, children: action || headlines.action }),
145
+ /* @__PURE__ */ jsxs(Stack, { className: "cko-product-summary", direction: "column", alignItems: "flex-start", sx: { mb: { xs: 1, sm: 3 } }, children: [
146
+ /* @__PURE__ */ jsx(Typography, { component: "div", sx: { fontWeight: 500, fontSize: "1.15rem", color: "text.secondary" }, children: action || headlines.action }),
147
147
  /* @__PURE__ */ jsx(PaymentAmount, { amount: headlines.amount }),
148
- headlines.then && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.9rem", color: "text.secondary" }, children: headlines.then })
148
+ headlines.then && /* @__PURE__ */ jsx(Typography, { component: "div", sx: { fontSize: "0.9rem", color: "text.secondary" }, children: headlines.then })
149
149
  ] }),
150
150
  /* @__PURE__ */ jsx(Stack, { spacing: { xs: 1, sm: 2 }, children: items.map(
151
151
  (x) => x.price.custom_unit_amount && onChangeAmount && donationSettings ? /* @__PURE__ */ jsx(
package/lib/checkout/donate.js CHANGED
@@ -120,67 +120,69 @@ function SupporterTable({
120
120
  width: "100%",
121
121
  overflow: "hidden"
122
122
  },
123
- children: supporters.map(x => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.TableRow, {
124
- sx: {
125
- "> td": {
126
- padding: "8px 16px 8px 0",
127
- borderTop: "1px solid #e0e0e0",
128
- borderBottom: "1px solid #e0e0e0"
129
- }
130
- },
131
- children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
132
- children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
133
- direction: "row",
134
- alignItems: "center",
135
- spacing: 0.5,
136
- children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
137
- src: `/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`,
138
- variant: "circular",
139
- sx: {
140
- width: 24,
141
- height: 24
142
- }
143
- }, x.id), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
144
- smDown: true,
123
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableBody, {
124
+ children: supporters.map(x => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.TableRow, {
125
+ sx: {
126
+ "> td": {
127
+ padding: "8px 16px 8px 0",
128
+ borderTop: "1px solid #e0e0e0",
129
+ borderBottom: "1px solid #e0e0e0"
130
+ }
131
+ },
132
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
133
+ children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
134
+ direction: "row",
135
+ alignItems: "center",
136
+ spacing: 0.5,
137
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
138
+ src: `/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`,
139
+ variant: "circular",
140
+ sx: {
141
+ width: 24,
142
+ height: 24
143
+ }
144
+ }, x.id), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
145
+ smDown: true,
146
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
147
+ children: x.customer?.name
148
+ })
149
+ })]
150
+ })
151
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
152
+ align: "right",
153
+ children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
154
+ direction: "row",
155
+ alignItems: "center",
156
+ justifyContent: "flex-end",
157
+ spacing: 0.5,
158
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
159
+ fontWeight: 500,
160
+ component: "strong",
161
+ children: (0, _util.formatBNStr)(x.amount_total, currency.decimal)
162
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
163
+ component: "span",
164
+ children: currency.symbol
165
+ })]
166
+ })
167
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
168
+ smDown: true,
169
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
170
+ align: "right",
145
171
  children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
146
- children: x.customer?.name
172
+ children: (0, _util.formatDateTime)(x.created_at)
147
173
  })
148
- })]
149
- })
150
- }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
151
- align: "right",
152
- children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
153
- direction: "row",
154
- alignItems: "center",
155
- justifyContent: "flex-end",
156
- spacing: 0.5,
157
- children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
158
- fontWeight: 500,
159
- component: "strong",
160
- children: (0, _util.formatAmount)(x.amount_total, currency.decimal)
161
- }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
162
- component: "span",
163
- children: currency.symbol
164
- })]
165
- })
166
- }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
167
- smDown: true,
168
- children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
174
+ })
175
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
169
176
  align: "right",
170
- children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
171
- children: (0, _util.formatDateTime)(x.created_at)
177
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_tx.default, {
178
+ method,
179
+ details: x.payment_details,
180
+ mode: "customer",
181
+ align: "right"
172
182
  })
173
- })
174
- }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
175
- align: "right",
176
- children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_tx.default, {
177
- method,
178
- details: x.payment_details,
179
- mode: "customer",
180
- align: "right"
181
- })
182
- })]
183
- }, x.id))
183
+ })]
184
+ }, x.id))
185
+ })
184
186
  })]
185
187
  });
186
188
  }
package/lib/components/blockchain/tx.js CHANGED
@@ -26,8 +26,7 @@ function TxLink(props) {
26
26
  }
27
27
  const {
28
28
  text,
29
- link,
30
- gas
29
+ link
31
30
  } = (0, _util.getTxLink)(props.method, props.details);
32
31
  if (link) {
33
32
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
@@ -40,10 +39,10 @@ function TxLink(props) {
40
39
  alignItems: "center",
41
40
  justifyContent: props.align === "left" ? "flex-start" : "flex-end",
42
41
  spacing: 1,
43
- children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
42
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
44
43
  component: "span",
45
44
  color: "primary",
46
- children: [text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join("...") : text, gas]
45
+ children: text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join("...") : text
47
46
  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNewOutlined, {
48
47
  fontSize: "small"
49
48
  })]
package/lib/payment/amount.js CHANGED
@@ -11,11 +11,11 @@ function PaymentAmount({
11
11
  sx
12
12
  }) {
13
13
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
14
+ component: "div",
14
15
  sx: {
15
16
  my: 0.5,
16
17
  fontWeight: 600,
17
18
  fontSize: "2.5rem",
18
- lineHeight: "1.3",
19
19
  letterSpacing: "-0.03rem",
20
20
  fontVariantNumeric: "tabular-nums",
21
21
  ...sx
package/lib/payment/form/index.js CHANGED
@@ -316,7 +316,7 @@ function PaymentForm({
316
316
  justifyContent: "space-between",
317
317
  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
318
318
  sx: {
319
- color: "text.primary",
319
+ color: "text.secondary",
320
320
  fontWeight: 600
321
321
  },
322
322
  children: t("payment.checkout.contact")
@@ -382,8 +382,7 @@ function PaymentForm({
382
382
  className: "cko-payment-methods",
383
383
  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
384
384
  sx: {
385
- mb: 1,
386
- color: "text.primary",
385
+ color: "text.secondary",
387
386
  fontWeight: 600
388
387
  },
389
388
  children: t("payment.checkout.method")
package/lib/payment/index.js CHANGED
@@ -330,7 +330,7 @@ function PaymentInner({
330
330
  direction: "column",
331
331
  spacing: {
332
332
  xs: 2,
333
- sm: 4
333
+ sm: 3
334
334
  },
335
335
  children: [completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_success.default, {
336
336
  mode,
@@ -465,7 +465,7 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
465
465
  .cko-container {
466
466
  flex-direction: column;
467
467
  align-items: center;
468
- gap: 24px;
468
+ gap: 32px;
469
469
  min-width: 350px;
470
470
  max-width: 400px;
471
471
  }
package/lib/payment/product-donation.js CHANGED
@@ -32,13 +32,21 @@ function ProductDonation({
32
32
  selected: settings.amount.preset,
33
33
  custom: false
34
34
  });
35
+ onChange({
36
+ priceId: item.price_id,
37
+ amount: settings.amount.preset
38
+ });
35
39
  } else if (settings.amount.presets && settings.amount.presets.length > 0) {
36
40
  setState({
37
41
  selected: settings.amount.presets[0],
38
42
  custom: false
39
43
  });
44
+ onChange({
45
+ priceId: item.price_id,
46
+ amount: settings.amount.presets[0]
47
+ });
40
48
  }
41
- }, [settings.amount.preset, settings.amount.presets, setState]);
49
+ }, [settings.amount.preset, settings.amount.presets]);
42
50
  const handleSelect = amount => {
43
51
  setState({
44
52
  selected: amount,
package/lib/payment/summary.js CHANGED
@@ -177,11 +177,12 @@ function PaymentSummary({
177
177
  alignItems: "flex-start",
178
178
  sx: {
179
179
  mb: {
180
- xs: 0,
180
+ xs: 1,
181
181
  sm: 3
182
182
  }
183
183
  },
184
184
  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
185
+ component: "div",
185
186
  sx: {
186
187
  fontWeight: 500,
187
188
  fontSize: "1.15rem",
@@ -191,6 +192,7 @@ function PaymentSummary({
191
192
  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
192
193
  amount: headlines.amount
193
194
  }), headlines.then && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
195
+ component: "div",
194
196
  sx: {
195
197
  fontSize: "0.9rem",
196
198
  color: "text.secondary"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/payment-react",
3
- "version": "1.13.232",
3
+ "version": "1.13.234",
4
4
  "description": "Reusable react components for payment kit v2",
5
5
  "keywords": [
6
6
  "react",
@@ -90,7 +90,7 @@
90
90
  "@babel/core": "^7.24.4",
91
91
  "@babel/preset-env": "^7.24.4",
92
92
  "@babel/preset-react": "^7.24.1",
93
- "@blocklet/payment-types": "1.13.232",
93
+ "@blocklet/payment-types": "1.13.234",
94
94
  "@storybook/addon-essentials": "^7.6.17",
95
95
  "@storybook/addon-interactions": "^7.6.17",
96
96
  "@storybook/addon-links": "^7.6.17",
@@ -119,5 +119,5 @@
119
119
  "vite-plugin-babel": "^1.2.0",
120
120
  "vite-plugin-node-polyfills": "^0.21.0"
121
121
  },
122
- "gitHead": "250cff1f7b3b483e089a5f19587e58556d7ef063"
122
+ "gitHead": "7b34eb52c3c96ab9124d80da66777fcd88f023ce"
123
123
  }
package/src/checkout/donate.tsx CHANGED
@@ -18,6 +18,7 @@ import {
18
18
  Hidden,
19
19
  Stack,
20
20
  Table,
21
+ TableBody,
21
22
  TableCell,
22
23
  TableRow,
23
24
  Typography,
@@ -30,7 +31,7 @@ import { useEffect } from 'react';
30
31
  import api from '../api';
31
32
  import TxLink from '../components/blockchain/tx';
32
33
  import { CheckoutProps } from '../types';
33
- import { formatAmount, formatDateTime, formatError } from '../util';
34
+ import { formatBNStr, formatDateTime, formatError } from '../util';
34
35
  import CheckoutForm from './form';
35
36
 
36
37
  export type DonateHistory = {
@@ -122,43 +123,49 @@ function SupporterTable({ supporters = [], total = 0, currency, method }: Donate
122
123
  {t('payment.checkout.donation.summary', { total })}
123
124
  </Typography>
124
125
  <Table size="small" sx={{ width: '100%', overflow: 'hidden' }}>
125
- {supporters.map((x) => (
126
- <TableRow
127
- key={x.id}
128
- sx={{
129
- '> td': { padding: '8px 16px 8px 0', borderTop: '1px solid #e0e0e0', borderBottom: '1px solid #e0e0e0' },
130
- }}>
131
- <TableCell>
132
- <Stack direction="row" alignItems="center" spacing={0.5}>
133
- <Avatar
134
- key={x.id}
135
- src={`/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`}
136
- variant="circular"
137
- sx={{ width: 24, height: 24 }}
138
- />
139
- <Hidden smDown>
140
- <Typography>{x.customer?.name}</Typography>
141
- </Hidden>
142
- </Stack>
143
- </TableCell>
144
- <TableCell align="right">
145
- <Stack direction="row" alignItems="center" justifyContent="flex-end" spacing={0.5}>
146
- <Typography fontWeight={500} component="strong">
147
- {formatAmount(x.amount_total, currency.decimal)}
148
- </Typography>
149
- <Typography component="span">{currency.symbol}</Typography>
150
- </Stack>
151
- </TableCell>
152
- <Hidden smDown>
126
+ <TableBody>
127
+ {supporters.map((x) => (
128
+ <TableRow
129
+ key={x.id}
130
+ sx={{
131
+ '> td': {
132
+ padding: '8px 16px 8px 0',
133
+ borderTop: '1px solid #e0e0e0',
134
+ borderBottom: '1px solid #e0e0e0',
135
+ },
136
+ }}>
137
+ <TableCell>
138
+ <Stack direction="row" alignItems="center" spacing={0.5}>
139
+ <Avatar
140
+ key={x.id}
141
+ src={`/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`}
142
+ variant="circular"
143
+ sx={{ width: 24, height: 24 }}
144
+ />
145
+ <Hidden smDown>
146
+ <Typography>{x.customer?.name}</Typography>
147
+ </Hidden>
148
+ </Stack>
149
+ </TableCell>
153
150
  <TableCell align="right">
154
- <Typography>{formatDateTime(x.created_at)}</Typography>
151
+ <Stack direction="row" alignItems="center" justifyContent="flex-end" spacing={0.5}>
152
+ <Typography fontWeight={500} component="strong">
153
+ {formatBNStr(x.amount_total, currency.decimal)}
154
+ </Typography>
155
+ <Typography component="span">{currency.symbol}</Typography>
156
+ </Stack>
155
157
  </TableCell>
156
- </Hidden>
157
- <TableCell align="right">
158
- <TxLink method={method} details={x.payment_details as PaymentDetails} mode="customer" align="right" />
159
- </TableCell>
160
- </TableRow>
161
- ))}
158
+ <Hidden smDown>
159
+ <TableCell align="right">
160
+ <Typography>{formatDateTime(x.created_at)}</Typography>
161
+ </TableCell>
162
+ </Hidden>
163
+ <TableCell align="right">
164
+ <TxLink method={method} details={x.payment_details as PaymentDetails} mode="customer" align="right" />
165
+ </TableCell>
166
+ </TableRow>
167
+ ))}
168
+ </TableBody>
162
169
  </Table>
163
170
  </Box>
164
171
  );
package/src/components/blockchain/tx.tsx CHANGED
@@ -26,7 +26,7 @@ export default function TxLink(props: {
26
26
  );
27
27
  }
28
28
 
29
- const { text, link, gas } = getTxLink(props.method, props.details);
29
+ const { text, link } = getTxLink(props.method, props.details);
30
30
 
31
31
  if (link) {
32
32
  return (
@@ -39,7 +39,6 @@ export default function TxLink(props: {
39
39
  spacing={1}>
40
40
  <Typography component="span" color="primary">
41
41
  {text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join('...') : text}
42
- {gas}
43
42
  </Typography>
44
43
  <OpenInNewOutlined fontSize="small" />
45
44
  </Stack>
package/src/payment/amount.tsx CHANGED
@@ -5,11 +5,11 @@ type Props = { amount: string; sx?: any };
5
5
  export default function PaymentAmount({ amount, sx }: Props) {
6
6
  return (
7
7
  <Typography
8
+ component="div"
8
9
  sx={{
9
10
  my: 0.5,
10
11
  fontWeight: 600,
11
12
  fontSize: '2.5rem',
12
- lineHeight: '1.3',
13
13
  letterSpacing: '-0.03rem',
14
14
  fontVariantNumeric: 'tabular-nums',
15
15
  ...sx,
package/src/payment/form/index.tsx CHANGED
@@ -305,7 +305,7 @@ export default function PaymentForm({
305
305
  <Fade in>
306
306
  <Stack className="cko-payment-contact">
307
307
  <Stack direction="row" sx={{ mb: 1 }} alignItems="center" justifyContent="space-between">
308
- <Typography sx={{ color: 'text.primary', fontWeight: 600 }}>{t('payment.checkout.contact')}</Typography>
308
+ <Typography sx={{ color: 'text.secondary', fontWeight: 600 }}>{t('payment.checkout.contact')}</Typography>
309
309
  {isColumnLayout || mode !== 'standalone' ? null : <UserButtons />}
310
310
  </Stack>
311
311
  <Stack direction="column" className="cko-payment-form" spacing={0}>
@@ -359,7 +359,7 @@ export default function PaymentForm({
359
359
  <AddressForm mode={checkoutSession.billing_address_collection as string} stripe={method?.type === 'stripe'} />
360
360
  <Fade in>
361
361
  <Stack direction="column" alignItems="flex-start" className="cko-payment-methods">
362
- <Typography sx={{ mb: 1, color: 'text.primary', fontWeight: 600 }}>{t('payment.checkout.method')}</Typography>
362
+ <Typography sx={{ color: 'text.secondary', fontWeight: 600 }}>{t('payment.checkout.method')}</Typography>
363
363
  <Stack direction="row" sx={{ width: '100%' }}>
364
364
  <Controller
365
365
  name="payment_currency"
package/src/payment/index.tsx CHANGED
@@ -295,7 +295,7 @@ export function PaymentInner({
295
295
  />
296
296
  </Stack>
297
297
  </Fade>
298
- <Stack className="cko-payment" direction="column" spacing={{ xs: 2, sm: 4 }}>
298
+ <Stack className="cko-payment" direction="column" spacing={{ xs: 2, sm: 3 }}>
299
299
  {completed && (
300
300
  <PaymentSuccess
301
301
  mode={mode}
@@ -443,7 +443,7 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
443
443
  .cko-container {
444
444
  flex-direction: column;
445
445
  align-items: center;
446
- gap: 24px;
446
+ gap: 32px;
447
447
  min-width: 350px;
448
448
  max-width: 400px;
449
449
  }
package/src/payment/product-donation.tsx CHANGED
@@ -28,10 +28,12 @@ export default function ProductDonation({
28
28
  useEffect(() => {
29
29
  if (settings.amount.preset) {
30
30
  setState({ selected: settings.amount.preset, custom: false });
31
+ onChange({ priceId: item.price_id, amount: settings.amount.preset });
31
32
  } else if (settings.amount.presets && settings.amount.presets.length > 0) {
32
33
  setState({ selected: settings.amount.presets[0], custom: false });
34
+ onChange({ priceId: item.price_id, amount: settings.amount.presets[0] });
33
35
  }
34
- }, [settings.amount.preset, settings.amount.presets, setState]);
36
+ }, [settings.amount.preset, settings.amount.presets]); // eslint-disable-line
35
37
 
36
38
  const handleSelect = (amount: string) => {
37
39
  setState({ selected: amount, custom: false, error: '' });
package/src/payment/summary.tsx CHANGED
@@ -176,13 +176,15 @@ export default function PaymentSummary({
176
176
  return (
177
177
  <Fade in>
178
178
  <Stack className="cko-product" direction="column" {...rest}>
179
- <Stack className="cko-product-summary" direction="column" alignItems="flex-start" sx={{ mb: { xs: 0, sm: 3 } }}>
180
- <Typography sx={{ fontWeight: 500, fontSize: '1.15rem', color: 'text.secondary' }}>
179
+ <Stack className="cko-product-summary" direction="column" alignItems="flex-start" sx={{ mb: { xs: 1, sm: 3 } }}>
180
+ <Typography component="div" sx={{ fontWeight: 500, fontSize: '1.15rem', color: 'text.secondary' }}>
181
181
  {action || headlines.action}
182
182
  </Typography>
183
183
  <PaymentAmount amount={headlines.amount} />
184
184
  {headlines.then && (
185
- <Typography sx={{ fontSize: '0.9rem', color: 'text.secondary' }}>{headlines.then}</Typography>
185
+ <Typography component="div" sx={{ fontSize: '0.9rem', color: 'text.secondary' }}>
186
+ {headlines.then}
187
+ </Typography>
186
188
  )}
187
189
  </Stack>
188
190
  <Stack spacing={{ xs: 1, sm: 2 }}>