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

@blocklet/payment-react 1.13.233 → 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 (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 +3 -3
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.234",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -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.234",
     "@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": "7b34eb52c3c96ab9124d80da66777fcd88f023ce"
 }

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: '' });