@blocklet/payment-react 1.14.37 → 1.14.39

package/es/checkout/donate.js

@@ -23,7 +23,7 @@ import uniqBy from "lodash/unionBy";
 import { useEffect, useState } from "react";
 import TxLink from "../components/blockchain/tx.js";
 import api from "../libs/api.js";
-import { formatAmount, formatBNStr, formatDateTime, formatError, lazyLoad } from "../libs/util.js";
+import { formatAmount, formatBNStr, formatDateTime, formatError, getCustomerAvatar, lazyLoad } from "../libs/util.js";
 import CheckoutForm from "./form.js";
 import { PaymentThemeProvider } from "../theme/index.js";
 const donationCache = {};
@@ -81,7 +81,7 @@ function SupporterAvatar({ supporters = [], totalAmount = "0", currency, method
           Avatar,
           {
             title: x.customer?.name,
-            src: `/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`,
+            src: getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
             variant: "circular",
             sx: { width: 32, height: 32 }
           },
@@ -119,7 +119,11 @@ function SupporterTable({ supporters = [], totalAmount = "0", currency, method }
             /* @__PURE__ */ jsx(
               Avatar,
               {
-                src: `/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`,
+                src: getCustomerAvatar(
+                  x.customer?.did,
+                  x?.updated_at ? new Date(x.updated_at).toISOString() : "",
+                  48
+                ),
                 variant: "circular",
                 sx: { width: 24, height: 24 }
               },
@@ -163,7 +167,7 @@ function SupporterSimple({ supporters = [], totalAmount = "0", currency, method
           Avatar,
           {
             title: x.customer?.name,
-            src: `/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`,
+            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/table.js

@@ -51,7 +51,7 @@ const Table = React.memo(
   }
 );
 const Wrapped = styled(Datatable)`
-  ${(props) => props.hasRowLink ? `.MuiTableCell-root {
+  ${(props) => props?.hasRowLink ? `.MuiTableCell-root {
     font-size: 1rem !important;
   }` : ""}
   .MuiPaper-root {

package/es/libs/util.d.ts

@@ -107,3 +107,4 @@ export declare function formatAmountPrecisionLimit(amount: string, locale?: stri
 export declare function getWordBreakStyle(value: any): 'break-word' | 'break-all';
 export declare function isMobileSafari(): boolean;
 export declare function truncateText(text: string, maxLength: number, useWidth?: boolean): string;
+export declare function getCustomerAvatar(did: string | undefined, updated_at: string | number | undefined, imageSize?: number): string;

package/es/libs/util.js

@@ -838,3 +838,6 @@ export function truncateText(text, maxLength, useWidth = false) {
   }
   return `${truncated}...`;
 }
+export function getCustomerAvatar(did, updated_at, imageSize = 48) {
+  return `/.well-known/service/user/avatar/${did}?imageFilter=resize&w=${imageSize}&h=${imageSize}&updateAt=${updated_at || dayjs().unix()}`;
+}

package/es/payment/form/index.js

@@ -331,7 +331,7 @@ export default function PaymentForm({
           children: t("payment.checkout.paymentDetails")
         }
       ),
-      /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", className: "cko-payment-methods", sx: { mb: 1 }, children: [
+      /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", className: "cko-payment-methods", children: [
         /* @__PURE__ */ jsx(Stack, { direction: "row", sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
           Controller,
           {
@@ -368,7 +368,7 @@ export default function PaymentForm({
           id: "cko-payment-form",
           spacing: 0,
           ref: !isEmpty(errors) ? errorRef : void 0,
-          sx: { flex: 1, overflow: "auto" },
+          sx: { flex: 1, overflow: "auto", py: 1 },
           children: [
             /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.customer.name") }),
             /* @__PURE__ */ jsx(

package/lib/checkout/donate.js

@@ -89,7 +89,7 @@ function SupporterAvatar({
       max: 20,
       children: customers.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
         title: x.customer?.name,
-        src: `/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`,
+        src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
         variant: "circular",
         sx: {
           width: 32,
@@ -153,7 +153,7 @@ function SupporterTable({
               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`,
+                src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
                 variant: "circular",
                 sx: {
                   width: 24,
@@ -239,7 +239,7 @@ function SupporterSimple({
       max: 10,
       children: customers.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
         title: x.customer?.name,
-        src: `/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`,
+        src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
         variant: "circular",
         sx: {
           width: 24,

package/lib/components/table.js

@@ -71,7 +71,7 @@ const Table = _react.default.memo(({
   });
 });
 const Wrapped = (0, _system.styled)(_Datatable.default)`
-  ${props => props.hasRowLink ? `.MuiTableCell-root {
+  ${props => props?.hasRowLink ? `.MuiTableCell-root {
     font-size: 1rem !important;
   }` : ""}
   .MuiPaper-root {

package/lib/libs/util.d.ts

@@ -107,3 +107,4 @@ export declare function formatAmountPrecisionLimit(amount: string, locale?: stri
 export declare function getWordBreakStyle(value: any): 'break-word' | 'break-all';
 export declare function isMobileSafari(): boolean;
 export declare function truncateText(text: string, maxLength: number, useWidth?: boolean): string;
+export declare function getCustomerAvatar(did: string | undefined, updated_at: string | number | undefined, imageSize?: number): string;

package/lib/libs/util.js

@@ -28,6 +28,7 @@ exports.formatToDatetime = formatToDatetime;
 exports.formatTotalPrice = formatTotalPrice;
 exports.formatUpsellSaving = formatUpsellSaving;
 exports.getCheckoutAmount = getCheckoutAmount;
+exports.getCustomerAvatar = getCustomerAvatar;
 exports.getFreeTrialTime = getFreeTrialTime;
 exports.getInvoiceStatusColor = getInvoiceStatusColor;
 exports.getPaymentIntentStatusColor = getPaymentIntentStatusColor;
@@ -1009,4 +1010,7 @@ function truncateText(text, maxLength, useWidth = false) {
     return truncated;
   }
   return `${truncated}...`;
+}
+function getCustomerAvatar(did, updated_at, imageSize = 48) {
+  return `/.well-known/service/user/avatar/${did}?imageFilter=resize&w=${imageSize}&h=${imageSize}&updateAt=${updated_at || (0, _dayjs.default)().unix()}`;
 }

package/lib/payment/form/index.js

@@ -399,9 +399,6 @@ function PaymentForm({
             direction: "column",
             alignItems: "flex-start",
             className: "cko-payment-methods",
-            sx: {
-              mb: 1
-            },
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
               direction: "row",
               sx: {
@@ -434,7 +431,8 @@ function PaymentForm({
           ref: !(0, _lodash.isEmpty)(errors) ? errorRef : void 0,
           sx: {
             flex: 1,
-            overflow: "auto"
+            overflow: "auto",
+            py: 1
           },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
             className: "base-label",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.14.37",
+  "version": "1.14.39",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -53,21 +53,21 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.10.23",
-    "@arcblock/ux": "^2.10.23",
-    "@arcblock/ws": "^1.18.132",
-    "@blocklet/ui-react": "^2.10.23",
+    "@arcblock/did-connect": "^2.10.25",
+    "@arcblock/ux": "2.10.24",
+    "@arcblock/ws": "^1.18.135",
+    "@blocklet/ui-react": "^2.10.25",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/styles": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.18.132",
+    "@ocap/util": "^1.18.135",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
     "ahooks": "^3.8.0",
-    "axios": "^1.7.2",
+    "axios": "^1.7.5",
     "dayjs": "^1.11.12",
     "flat": "^5.0.2",
     "google-libphonenumber": "^3.2.38",
@@ -93,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.14.37",
+    "@blocklet/payment-types": "1.14.39",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -116,12 +116,12 @@
     "react-dom": "18.2.0",
     "rollup-plugin-node-builtins": "^2.1.2",
     "storybook": "^7.6.20",
-    "ts-jest": "^29.2.3",
+    "ts-jest": "^29.2.5",
     "type-fest": "^4.23.0",
     "typescript": "^4.9.5",
     "unbuild": "^2.0.0",
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "645ae0bdbab463eec878af0521eb982b51499639"
+  "gitHead": "a0f45877c7288ccd7a7f73b3fedc464c19cc0163"
 }

package/src/checkout/donate.tsx

@@ -34,7 +34,7 @@ import { useEffect, useState } from 'react';
 
 import TxLink from '../components/blockchain/tx';
 import api from '../libs/api';
-import { formatAmount, formatBNStr, formatDateTime, formatError, lazyLoad } from '../libs/util';
+import { formatAmount, formatBNStr, formatDateTime, formatError, getCustomerAvatar, lazyLoad } from '../libs/util';
 import { CheckoutProps, PaymentThemeOptions } from '../types';
 import CheckoutForm from './form';
 import { PaymentThemeProvider } from '../theme';
@@ -136,7 +136,7 @@ function SupporterAvatar({ supporters = [], totalAmount = '0', currency, method
           <Avatar
             key={x.id}
             title={x.customer?.name}
-            src={`/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`}
+            src={getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : '', 48)}
             variant="circular"
             sx={{ width: 32, height: 32 }}
           />
@@ -183,7 +183,11 @@ function SupporterTable({ supporters = [], totalAmount = '0', currency, method }
                 <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`}
+                    src={getCustomerAvatar(
+                      x.customer?.did,
+                      x?.updated_at ? new Date(x.updated_at).toISOString() : '',
+                      48
+                    )}
                     variant="circular"
                     sx={{ width: 24, height: 24 }}
                   />
@@ -247,7 +251,7 @@ function SupporterSimple({ supporters = [], totalAmount = '0', currency, method
           <Avatar
             key={x.id}
             title={x.customer?.name}
-            src={`/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`}
+            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/table.tsx

@@ -57,9 +57,19 @@ const Table = React.memo(
   }
 );
 
+interface TableProps {
+  options: any;
+  columns: any;
+  toolbar?: boolean;
+  footer?: boolean;
+  hasRowLink?: boolean;
+  emptyNodeText?: string;
+  mobileTDFlexDirection?: string;
+}
+
 const Wrapped = styled(Datatable)`
-  ${(props) =>
-    props.hasRowLink
+  ${(props: any) =>
+    props?.hasRowLink
       ? `.MuiTableCell-root {
     font-size: 1rem !important;
   }`
@@ -176,7 +186,7 @@ const Wrapped = styled(Datatable)`
       align-items: center;
       padding: 0;
       flex-wrap: wrap;
-      flex-direction: ${({ mobileTDFlexDirection = 'column' }) => mobileTDFlexDirection || 'row'};
+      flex-direction: ${({ mobileTDFlexDirection = 'column' }: TableProps) => mobileTDFlexDirection || 'row'};
       align-items: ${({ mobileTDFlexDirection = 'column' }) =>
         mobileTDFlexDirection === 'column' ? 'flex-start' : 'center'};
       justify-content: ${({ mobileTDFlexDirection = 'column' }) =>

package/src/libs/util.ts

@@ -1083,3 +1083,11 @@ export function truncateText(text: string, maxLength: number, useWidth: boolean
 
   return `${truncated}...`;
 }
+
+export function getCustomerAvatar(
+  did: string | undefined,
+  updated_at: string | number | undefined,
+  imageSize: number = 48
+): string {
+  return `/.well-known/service/user/avatar/${did}?imageFilter=resize&w=${imageSize}&h=${imageSize}&updateAt=${updated_at || dayjs().unix()}`;
+}

package/src/payment/form/index.tsx

@@ -416,7 +416,7 @@ export default function PaymentForm({
             {t('payment.checkout.paymentDetails')}
           </Typography>
           <Fade in>
-            <Stack direction="column" alignItems="flex-start" className="cko-payment-methods" sx={{ mb: 1 }}>
+            <Stack direction="column" alignItems="flex-start" className="cko-payment-methods">
               <Stack direction="row" sx={{ width: '100%' }}>
                 <Controller
                   name="payment_currency"
@@ -449,7 +449,7 @@ export default function PaymentForm({
             id="cko-payment-form"
             spacing={0}
             ref={!isEmpty(errors) ? (errorRef as any) : undefined}
-            sx={{ flex: 1, overflow: 'auto' }}>
+            sx={{ flex: 1, overflow: 'auto', py: 1 }}>
             <FormLabel className="base-label">{t('payment.checkout.customer.name')}</FormLabel>
             <FormInput
               name="customer_name"