@blocklet/payment-react 1.17.11 → 1.18.0

package/es/checkout/donate.js

@@ -83,6 +83,7 @@ function SupporterAvatar({ supporters = [], totalAmount = "0", currency, method
           Avatar,
           {
             title: x.customer?.name,
+            alt: x.customer?.name,
             src: getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
             variant: "circular",
             sx: { width: 32, height: 32 }
@@ -126,6 +127,7 @@ function SupporterTable({ supporters = [], totalAmount = "0", currency, method }
                   x?.updated_at ? new Date(x.updated_at).toISOString() : "",
                   48
                 ),
+                alt: x.customer?.name,
                 variant: "circular",
                 sx: { width: 24, height: 24 }
               },
@@ -169,6 +171,7 @@ function SupporterSimple({ supporters = [], totalAmount = "0", currency, method
           Avatar,
           {
             title: x.customer?.name,
+            alt: x.customer?.name,
             src: getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
             variant: "circular",
             sx: { width: 24, height: 24 }

package/es/components/pricing-table.js

@@ -4,6 +4,7 @@ import Toast from "@arcblock/ux/lib/Toast";
 import { CheckOutlined } from "@mui/icons-material";
 import { LoadingButton } from "@mui/lab";
 import {
+  Avatar,
   Box,
   Chip,
   List,
@@ -105,7 +106,10 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       const { payment_currencies: paymentCurrencies = [] } = paymentMethod;
       if (paymentCurrencies && paymentCurrencies.length > 0) {
         paymentCurrencies.forEach((x) => {
-          ans[x.id] = x;
+          ans[x.id] = {
+            ...x,
+            method: paymentMethod.name
+          };
         });
       }
     });
@@ -264,8 +268,16 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                   value: currency?.id,
                   onChange: (e) => setCurrency(currencyList.find((v) => v?.id === e.target.value)),
                   size: "small",
-                  sx: { m: 1, width: 120 },
-                  children: currencyList.map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x?.id, children: /* @__PURE__ */ jsx(Typography, { color: x?.id === currency?.id ? "text.primary" : "text.secondary", children: x?.symbol }) }, x?.id))
+                  sx: { m: 1, minWidth: 180 },
+                  children: currencyList.map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x?.id, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, children: [
+                    /* @__PURE__ */ jsx(Avatar, { src: x?.logo, sx: { width: 20, height: 20 }, alt: x?.symbol }),
+                    /* @__PURE__ */ jsxs(Typography, { fontSize: "12px", color: "text.secondary", children: [
+                      x?.symbol,
+                      "\uFF08",
+                      x?.method,
+                      "\uFF09"
+                    ] })
+                  ] }) }, x?.id))
                 }
               )
             ] }),

package/es/payment/header.js

@@ -20,7 +20,15 @@ export default function PaymentHeader({ checkoutSession }) {
   }, [domSize, theme]);
   return /* @__PURE__ */ jsxs(Stack, { className: "cko-header", direction: "row", spacing: 1, alignItems: "center", justifyContent: "space-between", children: [
     /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
-      /* @__PURE__ */ jsx(Avatar, { variant: "square", src: window.blocklet.appLogo, sx: { width: 32, height: 32 } }),
+      /* @__PURE__ */ jsx(
+        Avatar,
+        {
+          variant: "square",
+          src: window.blocklet.appLogo,
+          sx: { width: 32, height: 32 },
+          alt: window.blocklet?.appName || "Logo"
+        }
+      ),
       /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 600 }, children: brand }),
       !livemode && /* @__PURE__ */ jsx(Livemode, {})
     ] }),

package/lib/checkout/donate.js

@@ -91,6 +91,7 @@ function SupporterAvatar({
       max: 20,
       children: customers.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
         title: x.customer?.name,
+        alt: x.customer?.name,
         src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
         variant: "circular",
         sx: {
@@ -156,6 +157,7 @@ function SupporterTable({
               spacing: 0.5,
               children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
                 src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
+                alt: x.customer?.name,
                 variant: "circular",
                 sx: {
                   width: 24,
@@ -241,6 +243,7 @@ function SupporterSimple({
       max: 10,
       children: customers.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
         title: x.customer?.name,
+        alt: x.customer?.name,
         src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
         variant: "circular",
         sx: {

package/lib/components/pricing-table.js

@@ -116,7 +116,10 @@ function PricingTable({
       } = paymentMethod;
       if (paymentCurrencies && paymentCurrencies.length > 0) {
         paymentCurrencies.forEach(x => {
-          ans[x.id] = x;
+          ans[x.id] = {
+            ...x,
+            method: paymentMethod.name
+          };
         });
       }
     });
@@ -281,13 +284,26 @@ function PricingTable({
           size: "small",
           sx: {
             m: 1,
-            width: 120
+            minWidth: 180
           },
           children: currencyList.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.MenuItem, {
             value: x?.id,
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              color: x?.id === currency?.id ? "text.primary" : "text.secondary",
-              children: x?.symbol
+            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              alignItems: "center",
+              gap: 1,
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+                src: x?.logo,
+                sx: {
+                  width: 20,
+                  height: 20
+                },
+                alt: x?.symbol
+              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                fontSize: "12px",
+                color: "text.secondary",
+                children: [x?.symbol, "\uFF08", x?.method, "\uFF09"]
+              })]
             })
           }, x?.id))
         })]

package/lib/payment/header.js

@@ -45,7 +45,8 @@ function PaymentHeader({
         sx: {
           width: 32,
           height: 32
-        }
+        },
+        alt: window.blocklet?.appName || "Logo"
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         sx: {
           color: "text.primary",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.17.11",
+  "version": "1.18.0",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.17.11",
+    "@blocklet/payment-types": "1.18.0",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -123,5 +123,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "286c7709d37515078269b963b1e7381f599111cc"
+  "gitHead": "052c301e1f565558766c9346ba355f2fd072108e"
 }

package/src/checkout/donate.tsx

@@ -144,6 +144,7 @@ function SupporterAvatar({ supporters = [], totalAmount = '0', currency, method
           <Avatar
             key={x.id}
             title={x.customer?.name}
+            alt={x.customer?.name}
             src={getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : '', 48)}
             variant="circular"
             sx={{ width: 32, height: 32 }}
@@ -196,6 +197,7 @@ function SupporterTable({ supporters = [], totalAmount = '0', currency, method }
                       x?.updated_at ? new Date(x.updated_at).toISOString() : '',
                       48
                     )}
+                    alt={x.customer?.name}
                     variant="circular"
                     sx={{ width: 24, height: 24 }}
                   />
@@ -259,6 +261,7 @@ function SupporterSimple({ supporters = [], totalAmount = '0', currency, method
           <Avatar
             key={x.id}
             title={x.customer?.name}
+            alt={x.customer?.name}
             src={getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : '', 48)}
             variant="circular"
             sx={{ width: 24, height: 24 }}

package/src/components/pricing-table.tsx

@@ -5,6 +5,7 @@ import type { PriceCurrency, PriceRecurring, TPricingTableExpanded, TPricingTabl
 import { CheckOutlined } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
 import {
+  Avatar,
   Box,
   Chip,
   List,
@@ -130,7 +131,10 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       const { payment_currencies: paymentCurrencies = [] } = paymentMethod;
       if (paymentCurrencies && paymentCurrencies.length > 0) {
         paymentCurrencies.forEach((x: { id: string; symbol: string }) => {
-          ans[x.id] = x;
+          ans[x.id] = {
+            ...x,
+            method: paymentMethod.name,
+          };
         });
       }
     });
@@ -297,12 +301,15 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
               value={currency?.id}
               onChange={(e) => setCurrency(currencyList.find((v) => v?.id === e.target.value))}
               size="small"
-              sx={{ m: 1, width: 120 }}>
+              sx={{ m: 1, minWidth: 180 }}>
               {currencyList.map((x) => (
                 <MenuItem key={x?.id} value={x?.id}>
-                  <Typography color={x?.id === currency?.id ? 'text.primary' : 'text.secondary'}>
-                    {x?.symbol}
-                  </Typography>
+                  <Stack direction="row" alignItems="center" gap={1}>
+                    <Avatar src={x?.logo} sx={{ width: 20, height: 20 }} alt={x?.symbol} />
+                    <Typography fontSize="12px" color="text.secondary">
+                      {x?.symbol}（{x?.method}）
+                    </Typography>
+                  </Stack>
                 </MenuItem>
               ))}
             </Select>

package/src/payment/header.tsx

@@ -30,7 +30,12 @@ export default function PaymentHeader({ checkoutSession }: Props) {
   return (
     <Stack className="cko-header" direction="row" spacing={1} alignItems="center" justifyContent="space-between">
       <Stack direction="row" spacing={1} alignItems="center">
-        <Avatar variant="square" src={window.blocklet.appLogo} sx={{ width: 32, height: 32 }} />
+        <Avatar
+          variant="square"
+          src={window.blocklet.appLogo}
+          sx={{ width: 32, height: 32 }}
+          alt={window.blocklet?.appName || 'Logo'}
+        />
         <Typography sx={{ color: 'text.primary', fontWeight: 600 }}>{brand}</Typography>
         {!livemode && <Livemode />}
       </Stack>