npm - @blocklet/payment-react - Versions diffs - 1.13.233 → 1.13.235 - Mend

@blocklet/payment-react 1.13.233 → 1.13.235

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 (7) hide show

package/es/checkout/donate.js +10 -5
package/es/payment/product-donation.js +3 -1
package/lib/checkout/donate.js +59 -57
package/lib/payment/product-donation.js +9 -1
package/package.json +5 -5
package/src/checkout/donate.tsx +43 -36
package/src/payment/product-donation.tsx +3 -1

package/es/checkout/donate.js CHANGED Viewed

@@ -11,6 +11,7 @@ import {
   Hidden,
   Stack,
   Table,
+  TableBody,
   TableCell,
   TableRow,
   Typography
@@ -21,7 +22,7 @@ import uniqBy from "lodash/unionBy";
 import { useEffect } from "react";
 import api from "../api.js";
 import TxLink from "../components/blockchain/tx.js";
-import { formatAmount, formatDateTime, formatError } from "../util.js";
+import { formatBNStr, formatDateTime, formatError } from "../util.js";
 import CheckoutForm from "./form.js";
 const donationCache = {};
 const createOrUpdateDonation = (settings, livemode = true) => {
@@ -84,11 +85,15 @@ function SupporterTable({ supporters = [], total = 0, currency, method }) {
   const { t } = useLocaleContext();
   return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", sx: { width: "100%" }, gap: { xs: 0.5, sm: 1 }, children: [
     /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: t("payment.checkout.donation.summary", { total }) }),
-    /* @__PURE__ */ jsx(Table, { size: "small", sx: { width: "100%", overflow: "hidden" }, children: supporters.map((x) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Table, { size: "small", sx: { width: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsx(TableBody, { children: supporters.map((x) => /* @__PURE__ */ jsxs(
       TableRow,
       {
         sx: {
-          "> td": { padding: "8px 16px 8px 0", borderTop: "1px solid #e0e0e0", borderBottom: "1px solid #e0e0e0" }
+          "> td": {
+            padding: "8px 16px 8px 0",
+            borderTop: "1px solid #e0e0e0",
+            borderBottom: "1px solid #e0e0e0"
+          }
         },
         children: [
           /* @__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 }) {
             /* @__PURE__ */ jsx(Hidden, { smDown: true, children: /* @__PURE__ */ jsx(Typography, { children: x.customer?.name }) })
           ] }) }),
           /* @__PURE__ */ jsx(TableCell, { align: "right", children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 0.5, children: [
-            /* @__PURE__ */ jsx(Typography, { fontWeight: 500, component: "strong", children: formatAmount(x.amount_total, currency.decimal) }),
+            /* @__PURE__ */ jsx(Typography, { fontWeight: 500, component: "strong", children: formatBNStr(x.amount_total, currency.decimal) }),
             /* @__PURE__ */ jsx(Typography, { component: "span", children: currency.symbol })
           ] }) }),
           /* @__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 }) {
         ]
       },
       x.id
-    )) })
+    )) }) })
   ] });
 }
 export default function CheckoutDonate({ settings, livemode, onPaid, onError }) {

package/es/payment/product-donation.js CHANGED Viewed

@@ -20,10 +20,12 @@ export default function ProductDonation({
   useEffect(() => {
     if (settings.amount.preset) {
       setState({ selected: settings.amount.preset, custom: false });
+      onChange({ priceId: item.price_id, amount: settings.amount.preset });
     } else if (settings.amount.presets && settings.amount.presets.length > 0) {
       setState({ selected: settings.amount.presets[0], custom: false });
+      onChange({ priceId: item.price_id, amount: settings.amount.presets[0] });
     }
-  }, [settings.amount.preset, settings.amount.presets, setState]);
+  }, [settings.amount.preset, settings.amount.presets]);
   const handleSelect = (amount) => {
     setState({ selected: amount, custom: false, error: "" });
     onChange({ priceId: item.price_id, amount });

package/lib/checkout/donate.js CHANGED Viewed

@@ -120,67 +120,69 @@ function SupporterTable({
         width: "100%",
         overflow: "hidden"
       },
-      children: supporters.map(x => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.TableRow, {
-        sx: {
-          "> td": {
-            padding: "8px 16px 8px 0",
-            borderTop: "1px solid #e0e0e0",
-            borderBottom: "1px solid #e0e0e0"
-          }
-        },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
-          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-            direction: "row",
-            alignItems: "center",
-            spacing: 0.5,
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
-              src: `/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`,
-              variant: "circular",
-              sx: {
-                width: 24,
-                height: 24
-              }
-            }, x.id), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
-              smDown: true,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableBody, {
+        children: supporters.map(x => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.TableRow, {
+          sx: {
+            "> td": {
+              padding: "8px 16px 8px 0",
+              borderTop: "1px solid #e0e0e0",
+              borderBottom: "1px solid #e0e0e0"
+            }
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
+            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              alignItems: "center",
+              spacing: 0.5,
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+                src: `/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`,
+                variant: "circular",
+                sx: {
+                  width: 24,
+                  height: 24
+                }
+              }, x.id), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
+                smDown: true,
+                children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                  children: x.customer?.name
+                })
+              })]
+            })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
+            align: "right",
+            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              spacing: 0.5,
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                fontWeight: 500,
+                component: "strong",
+                children: (0, _util.formatBNStr)(x.amount_total, currency.decimal)
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                component: "span",
+                children: currency.symbol
+              })]
+            })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
+            smDown: true,
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
+              align: "right",
               children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                children: x.customer?.name
+                children: (0, _util.formatDateTime)(x.created_at)
               })
-            })]
-          })
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
-          align: "right",
-          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-            direction: "row",
-            alignItems: "center",
-            justifyContent: "flex-end",
-            spacing: 0.5,
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              fontWeight: 500,
-              component: "strong",
-              children: (0, _util.formatAmount)(x.amount_total, currency.decimal)
-            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              component: "span",
-              children: currency.symbol
-            })]
-          })
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
-          smDown: true,
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
+            })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
             align: "right",
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              children: (0, _util.formatDateTime)(x.created_at)
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_tx.default, {
+              method,
+              details: x.payment_details,
+              mode: "customer",
+              align: "right"
             })
-          })
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
-          align: "right",
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_tx.default, {
-            method,
-            details: x.payment_details,
-            mode: "customer",
-            align: "right"
-          })
-        })]
-      }, x.id))
+          })]
+        }, x.id))
+      })
     })]
   });
 }

package/lib/payment/product-donation.js CHANGED Viewed

@@ -32,13 +32,21 @@ function ProductDonation({
         selected: settings.amount.preset,
         custom: false
       });
+      onChange({
+        priceId: item.price_id,
+        amount: settings.amount.preset
+      });
     } else if (settings.amount.presets && settings.amount.presets.length > 0) {
       setState({
         selected: settings.amount.presets[0],
         custom: false
       });
+      onChange({
+        priceId: item.price_id,
+        amount: settings.amount.presets[0]
+      });
     }
-  }, [settings.amount.preset, settings.amount.presets, setState]);
+  }, [settings.amount.preset, settings.amount.presets]);
   const handleSelect = amount => {
     setState({
       selected: amount,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.233",
+  "version": "1.13.235",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -52,8 +52,8 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.9.68",
-    "@arcblock/ux": "^2.9.68",
+    "@arcblock/did-connect": "^2.9.71",
+    "@arcblock/ux": "^2.9.71",
     "@mui/icons-material": "^5.15.15",
     "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.15.15",
@@ -90,7 +90,7 @@
     "@babel/core": "^7.24.4",
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
-    "@blocklet/payment-types": "1.13.233",
+    "@blocklet/payment-types": "1.13.235",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",
@@ -119,5 +119,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "854b8c4502657675e5d08279d2efca31bafa0a88"
+  "gitHead": "0ce69f4fb2a09658835deab572b1f860f305b195"
 }

package/src/checkout/donate.tsx CHANGED Viewed

@@ -18,6 +18,7 @@ import {
   Hidden,
   Stack,
   Table,
+  TableBody,
   TableCell,
   TableRow,
   Typography,
@@ -30,7 +31,7 @@ import { useEffect } from 'react';
 import api from '../api';
 import TxLink from '../components/blockchain/tx';
 import { CheckoutProps } from '../types';
-import { formatAmount, formatDateTime, formatError } from '../util';
+import { formatBNStr, formatDateTime, formatError } from '../util';
 import CheckoutForm from './form';
 export type DonateHistory = {
@@ -122,43 +123,49 @@ function SupporterTable({ supporters = [], total = 0, currency, method }: Donate
         {t('payment.checkout.donation.summary', { total })}
       </Typography>
       <Table size="small" sx={{ width: '100%', overflow: 'hidden' }}>
-        {supporters.map((x) => (
-          <TableRow
-            key={x.id}
-            sx={{
-              '> td': { padding: '8px 16px 8px 0', borderTop: '1px solid #e0e0e0', borderBottom: '1px solid #e0e0e0' },
-            }}>
-            <TableCell>
-              <Stack direction="row" alignItems="center" spacing={0.5}>
-                <Avatar
-                  key={x.id}
-                  src={`/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`}
-                  variant="circular"
-                  sx={{ width: 24, height: 24 }}
-                />
-                <Hidden smDown>
-                  <Typography>{x.customer?.name}</Typography>
-                </Hidden>
-              </Stack>
-            </TableCell>
-            <TableCell align="right">
-              <Stack direction="row" alignItems="center" justifyContent="flex-end" spacing={0.5}>
-                <Typography fontWeight={500} component="strong">
-                  {formatAmount(x.amount_total, currency.decimal)}
-                </Typography>
-                <Typography component="span">{currency.symbol}</Typography>
-              </Stack>
-            </TableCell>
-            <Hidden smDown>
+        <TableBody>
+          {supporters.map((x) => (
+            <TableRow
+              key={x.id}
+              sx={{
+                '> td': {
+                  padding: '8px 16px 8px 0',
+                  borderTop: '1px solid #e0e0e0',
+                  borderBottom: '1px solid #e0e0e0',
+                },
+              }}>
+              <TableCell>
+                <Stack direction="row" alignItems="center" spacing={0.5}>
+                  <Avatar
+                    key={x.id}
+                    src={`/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`}
+                    variant="circular"
+                    sx={{ width: 24, height: 24 }}
+                  />
+                  <Hidden smDown>
+                    <Typography>{x.customer?.name}</Typography>
+                  </Hidden>
+                </Stack>
+              </TableCell>
               <TableCell align="right">
-                <Typography>{formatDateTime(x.created_at)}</Typography>
+                <Stack direction="row" alignItems="center" justifyContent="flex-end" spacing={0.5}>
+                  <Typography fontWeight={500} component="strong">
+                    {formatBNStr(x.amount_total, currency.decimal)}
+                  </Typography>
+                  <Typography component="span">{currency.symbol}</Typography>
+                </Stack>
               </TableCell>
-            </Hidden>
-            <TableCell align="right">
-              <TxLink method={method} details={x.payment_details as PaymentDetails} mode="customer" align="right" />
-            </TableCell>
-          </TableRow>
-        ))}
+              <Hidden smDown>
+                <TableCell align="right">
+                  <Typography>{formatDateTime(x.created_at)}</Typography>
+                </TableCell>
+              </Hidden>
+              <TableCell align="right">
+                <TxLink method={method} details={x.payment_details as PaymentDetails} mode="customer" align="right" />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
       </Table>
     </Box>
   );

package/src/payment/product-donation.tsx CHANGED Viewed

@@ -28,10 +28,12 @@ export default function ProductDonation({
   useEffect(() => {
     if (settings.amount.preset) {
       setState({ selected: settings.amount.preset, custom: false });
+      onChange({ priceId: item.price_id, amount: settings.amount.preset });
     } else if (settings.amount.presets && settings.amount.presets.length > 0) {
       setState({ selected: settings.amount.presets[0], custom: false });
+      onChange({ priceId: item.price_id, amount: settings.amount.presets[0] });
     }
-  }, [settings.amount.preset, settings.amount.presets, setState]);
+  }, [settings.amount.preset, settings.amount.presets]); // eslint-disable-line
   const handleSelect = (amount: string) => {
     setState({ selected: amount, custom: false, error: '' });