payment-kit 1.19.12 → 1.19.13

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.19.12
+version: 1.19.13
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.19.12",
+  "version": "1.19.13",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -46,18 +46,18 @@
     "@abtnode/cron": "^1.16.46",
     "@arcblock/did": "^1.21.1",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^3.0.39",
+    "@arcblock/did-connect": "^3.0.41",
     "@arcblock/did-util": "^1.21.1",
     "@arcblock/jwt": "^1.21.1",
-    "@arcblock/ux": "^3.0.39",
+    "@arcblock/ux": "^3.0.41",
     "@arcblock/validator": "^1.21.1",
     "@blocklet/did-space-js": "^1.1.13",
     "@blocklet/error": "^0.2.5",
     "@blocklet/js-sdk": "^1.16.46",
     "@blocklet/logger": "^1.16.46",
-    "@blocklet/payment-react": "1.19.12",
+    "@blocklet/payment-react": "1.19.13",
     "@blocklet/sdk": "^1.16.46",
-    "@blocklet/ui-react": "^3.0.39",
+    "@blocklet/ui-react": "^3.0.41",
     "@blocklet/uploader": "^0.2.5",
     "@blocklet/xss": "^0.2.3",
     "@mui/icons-material": "^7.1.2",
@@ -124,7 +124,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.46",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.19.12",
+    "@blocklet/payment-types": "1.19.13",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -170,5 +170,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "2496138990f95bb979125127a06c5e9d731877c9"
+  "gitHead": "07c6878eb9d455f3898adfda7d07ca9e321e866c"
 }

package/src/components/chart.tsx

@@ -63,7 +63,7 @@ export default function Chart({
           }}>
           <CartesianGrid strokeDasharray="3 3" stroke={theme.palette.grey[200]} />
           <Tooltip
-            contentStyle={{ backgroundColor: theme.palette.background.paper, borderColor: theme.palette.grey[200] }}
+            contentStyle={{ backgroundColor: theme.palette.background.paper, borderColor: theme.palette.divider }}
           />
           {Object.keys(currencies).map((x: string, i) => {
             const dataKey = currencies[x]?.symbol as string;

package/src/components/conditional-section.tsx

@@ -15,6 +15,7 @@ interface ConditionalSectionProps {
   skeleton: boolean;
   children: ReactNode;
   skeletonComponent?: ReactNode;
+  onStateChange?: (state: 'hidden' | 'visible' | 'none') => void;
 }
 
 /**
@@ -29,10 +30,19 @@ interface ConditionalSectionProps {
  * 使用方式：
  * - 在任意深度的子组件中调用 useConditionalSection()?.hideRender()
  */
-export default function ConditionalSection({ skeleton, children, skeletonComponent = null }: ConditionalSectionProps) {
+export default function ConditionalSection({
+  skeleton,
+  children,
+  skeletonComponent = null,
+  onStateChange = () => {},
+}: ConditionalSectionProps) {
   const [renderState, setRenderState] = useState<'hidden' | 'visible' | 'none'>('hidden');
   const timerRef = useRef<NodeJS.Timeout | null>(null);
 
+  useEffect(() => {
+    onStateChange(renderState);
+  }, [renderState]);
+
   const handleHideRender = useCallback((hide: boolean = true) => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);

package/src/components/customer/credit-overview.tsx

@@ -99,6 +99,7 @@ export default function CreditOverview({ customerId, settings, mode = 'portal' }
           borderColor: 'divider',
           boxShadow: 1,
           borderRadius: 1,
+          backgroundColor: 'background.default',
         }}>
         <CardContent sx={{ flexGrow: 1 }}>
           <Stack spacing={2}>
@@ -193,57 +194,59 @@ export default function CreditOverview({ customerId, settings, mode = 'portal' }
         <Tab label={t('admin.creditGrants.tab')} value={CreditTab.GRANTS} />
         <Tab label={t('admin.creditTransactions.tab')} value={CreditTab.TRANSACTIONS} />
       </Tabs>
-      {/* 概览标签页 */}
-      {creditTab === CreditTab.OVERVIEW && (
-        <Box sx={{ width: '100%', mt: 1 }} key={creditTab}>
-          <Box
-            sx={{
-              display: 'grid',
-              gridTemplateColumns: {
-                xs: 'repeat(1, 1fr)',
-                md: 'repeat(2, 1fr)',
-              },
-              gap: 2,
-              '@container (max-width: 600px)': {
-                gridTemplateColumns: 'repeat(1, 1fr)',
-              },
-            }}>
-            {filteredCreditCurrencies.map(renderCreditOverviewCard)}
-          </Box>
-
-          {filteredCreditCurrencies.length === 0 && (
+      <Box className="section-body">
+        {/* 概览标签页 */}
+        {creditTab === CreditTab.OVERVIEW && (
+          <Box sx={{ width: '100%', mt: 1 }} key={creditTab}>
             <Box
               sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                py: 8,
-                textAlign: 'center',
+                display: 'grid',
+                gridTemplateColumns: {
+                  xs: 'repeat(1, 1fr)',
+                  md: 'repeat(2, 1fr)',
+                },
+                gap: 2,
+                '@container (max-width: 600px)': {
+                  gridTemplateColumns: 'repeat(1, 1fr)',
+                },
               }}>
-              <Typography
-                variant="h6"
-                gutterBottom
-                sx={{
-                  color: 'text.secondary',
-                }}>
-                {t('admin.customer.creditGrants.noGrants')}
-              </Typography>
-              <Typography
-                variant="body2"
+              {filteredCreditCurrencies.map(renderCreditOverviewCard)}
+            </Box>
+
+            {filteredCreditCurrencies.length === 0 && (
+              <Box
                 sx={{
-                  color: 'text.secondary',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  py: 8,
+                  textAlign: 'center',
                 }}>
-                {t('admin.customer.creditGrants.noGrantsDescription')}
-              </Typography>
-            </Box>
-          )}
-        </Box>
-      )}
-      {creditTab === CreditTab.GRANTS && <CreditGrantsList customer_id={customerId} mode={mode} key={creditTab} />}
-      {creditTab === CreditTab.TRANSACTIONS && (
-        <CreditTransactionsList customer_id={customerId} mode={mode} key={creditTab} />
-      )}
+                <Typography
+                  variant="h6"
+                  gutterBottom
+                  sx={{
+                    color: 'text.secondary',
+                  }}>
+                  {t('admin.customer.creditGrants.noGrants')}
+                </Typography>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: 'text.secondary',
+                  }}>
+                  {t('admin.customer.creditGrants.noGrantsDescription')}
+                </Typography>
+              </Box>
+            )}
+          </Box>
+        )}
+        {creditTab === CreditTab.GRANTS && <CreditGrantsList customer_id={customerId} mode={mode} key={creditTab} />}
+        {creditTab === CreditTab.TRANSACTIONS && (
+          <CreditTransactionsList customer_id={customerId} mode={mode} key={creditTab} />
+        )}
+      </Box>
     </Stack>
   );
 }

package/src/components/drawer-form.tsx

@@ -72,7 +72,7 @@ export default function DrawerForm(rawProps: Props) {
             pt: 2,
             gap: 1,
             borderBottom: '1px solid',
-            borderColor: 'grey.200',
+            borderColor: 'divider',
 
             '@media (max-width: 600px)': {
               '& > .addons-wrapper': {

package/src/components/filter-toolbar.tsx

@@ -522,7 +522,7 @@ const Root = styled(Box)`
     padding: 0;
     background: ${({ theme }) => theme.palette.background.paper};
     border: 1px solid;
-    border-color: ${({ theme }) => theme.palette.grey[100]};
+    border-color: ${({ theme }) => theme.palette.divider};
     z-index: 999999;
     top: 15px;
     display: block;

package/src/components/info-card.tsx

@@ -100,7 +100,7 @@ export default function InfoCard(rawProps: Props) {
                 color: 'background.paper',
                 '&::before': {
                   border: '1px solid',
-                  borderColor: 'grey.200',
+                  borderColor: 'divider',
                   backgroundColor: 'background.paper',
                 },
               },

package/src/components/invoice-pdf/pdf.tsx

@@ -100,7 +100,7 @@ export function Download({ data }: { data: TInvoiceExpanded }) {
         size="small"
         onClick={generatePDF}
         disabled={!isReady || isGenerating}
-        sx={{ borderColor: 'grey.100' }}>
+        sx={{ borderColor: 'divider' }}>
         {isGenerating ? (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
             <CircularProgress size={16} sx={{ color: 'inherit' }} />

package/src/components/layout/admin.tsx

@@ -34,10 +34,6 @@ const Root = styled(Dashboard)<{ padding: string }>`
         margin-bottom: 8px;
       }
 
-      .MuiTabs-scroller {
-        border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
-      }
-
       .page-content {
         margin-top: 2px;
       }

package/src/components/metadata/form.tsx

@@ -241,7 +241,7 @@ export default function MetadataForm({
                   onClick={() => metadata.remove(index)}
                   sx={{
                     border: '1px solid',
-                    borderColor: 'grey.100',
+                    borderColor: 'divider',
                     borderRadius: 1,
                     padding: '8px',
                   }}>

package/src/components/meter/events-list.tsx

@@ -418,10 +418,16 @@ export default function MeterEventsList({ meterId, paymentCurrency }: MeterEvent
             variant="outlined"
             startIcon={<CalendarTodayOutlined />}
             onClick={onTogglePicker}
+            size="large"
             sx={{
               minWidth: isMobile ? '100%' : 200,
               justifyContent: isMobile ? 'flex-start' : 'center',
               color: 'text.secondary',
+              borderColor: 'grey.300',
+              '&:hover': {
+                borderColor: 'primary.main',
+              },
+              backgroundColor: 'grey.50',
             }}>
             {dayjs(state.startDate).format('YYYY-MM-DD')} - {dayjs(state.endDate).format('YYYY-MM-DD')}
           </Button>

package/src/components/meter/usage-guide.tsx

@@ -160,7 +160,7 @@ print("Event recorded:", response.json())`;
 const CodeBlock = styled(Paper)(({ theme }) => ({
   padding: theme.spacing(2),
   backgroundColor: theme.palette.grey[50],
-  border: `1px solid ${theme.palette.grey[200]}`,
+  border: `1px solid ${theme.palette.divider}`,
   borderRadius: theme.shape.borderRadius,
   overflow: 'auto',
   '& pre': {

package/src/components/payment-link/item.tsx

@@ -54,7 +54,7 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
         p: 2,
         borderWidth: valid ? 1 : 2,
         borderStyle: 'solid',
-        borderColor: valid ? 'grey.100' : 'error.main',
+        borderColor: valid ? 'divider' : 'error.main',
         borderRadius: 2,
         position: 'relative',
       }}>

package/src/components/pricing-table/product-item.tsx

@@ -47,7 +47,7 @@ export default function ProductItem({ product, prices, valid, onUpdate, onRemove
         p: 2,
         borderWidth: valid ? 1 : 2,
         borderStyle: 'solid',
-        borderColor: valid ? 'grey.100' : 'error.main',
+        borderColor: valid ? 'divider' : 'error.main',
         borderRadius: 2,
         position: 'relative',
       }}>

package/src/components/product/features.tsx

@@ -40,7 +40,7 @@ export default function MetadataForm() {
             onClick={() => features.remove(index)}
             sx={{
               border: '1px solid',
-              borderColor: 'grey.100',
+              borderColor: 'divider',
               borderRadius: 1,
               padding: '8px',
             }}>

package/src/components/uploader.tsx

@@ -150,7 +150,7 @@ export default function Uploader({
 
 const Div = styled(Box)`
   border: 1px solid;
-  border-color: ${({ theme }) => theme.palette.grey[100]};
+  border-color: ${({ theme }) => theme.palette.grey[300]};
   border-radius: 4px;
   cursor: pointer;
   width: 120px;

package/src/components/webhook/attempts.tsx

@@ -160,7 +160,7 @@ export default function WebhookAttempts({ event_id = '', webhook_endpoint_id = '
           md: 8,
         }}>
         {selected && (
-          <Stack direction="column" spacing={2} sx={{ pt: 3, pl: 3, borderLeft: '1px solid', borderColor: 'grey.100' }}>
+          <Stack direction="column" spacing={2} sx={{ pt: 3, pl: 3, borderLeft: '1px solid', borderColor: 'divider' }}>
             <Typography variant="h6">{event_id ? selected.endpoint.url : selected.event.type}</Typography>
             <Box>
               <Typography variant="h6">Response ({selected.response_status})</Typography>

package/src/locales/en.tsx

@@ -63,7 +63,8 @@ export default flat({
     scope: 'Scope',
     effectiveDate: 'Effective Date',
     expirationDate: 'Expiration Date',
-    creditGrant: 'Credit Grant',
+    creditGrant: 'Grant',
+    date: 'Date',
     subscription: 'Subscription',
     meterEvent: 'Meter Event',
     creditAmount: 'Credit',

package/src/locales/zh.tsx

@@ -63,6 +63,7 @@ export default flat({
     effectiveDate: '生效时间',
     expirationDate: '过期时间',
     creditGrant: '信用额度',
+    date: '日期',
     subscription: '订阅',
     meterEvent: '计量事件',
     creditAmount: '额度',

package/src/pages/admin/developers/webhooks/detail.tsx

@@ -90,7 +90,7 @@ export default function WebhookDetail(props: { id: string }) {
               pt: 2,
               mt: 2,
               borderTop: '1px solid',
-              borderColor: 'grey.100',
+              borderColor: 'divider',
             }}>
             <InfoMetric
               label={t('common.status')}

package/src/pages/admin/products/pricing-tables/create.tsx

@@ -132,7 +132,7 @@ export default function CreatePricingTable() {
                 flex: 2,
                 position: 'relative',
                 borderRight: '1px solid',
-                borderColor: 'grey.100',
+                borderColor: 'divider',
               }}>
               <Stack
                 spacing={2}
@@ -159,7 +159,7 @@ export default function CreatePricingTable() {
                     justifyContent: 'flex-end',
                     position: 'absolute',
                     borderTop: '1px solid',
-                    borderColor: 'grey.100',
+                    borderColor: 'divider',
                     left: 0,
                     bottom: 0,
                   }}>

package/src/pages/checkout/pricing-table.tsx

@@ -26,7 +26,7 @@ export default function PricingTablePage({ id }: Props) {
         theme={undefined}
         hideNavMenu={undefined}
         maxWidth={false}
-        sx={{ borderBottom: '1px solid', borderColor: 'grey.100' }}
+        sx={{ borderBottom: '1px solid', borderColor: 'divider' }}
       />
 
       <Stack

package/src/pages/customer/index.tsx

@@ -36,7 +36,7 @@ import type { SelectChangeEvent } from '@mui/material/Select';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { flatten, isEmpty } from 'lodash';
-import { memo, useEffect, useState } from 'react';
+import { memo, useEffect, useState, Fragment } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { joinURL } from 'ufo';
 import CreditOverview from '../../components/customer/credit-overview';
@@ -193,6 +193,10 @@ export default function CustomerHome() {
   const { t } = useLocaleContext();
   const { events } = useSessionContext();
   const { settings } = usePaymentContext();
+  const [domFilter, setDomFilter] = useSetState<any>({
+    credit: '',
+    revenue: '',
+  });
   const [subscriptionLoading, setSubscriptionLoading] = useState(false);
   const currencies = flatten(
     settings.paymentMethods?.map((method) =>
@@ -399,7 +403,7 @@ export default function CustomerHome() {
                     p: 2,
                     gap: 2,
                     border: '1px solid',
-                    borderColor: 'grey.100',
+                    borderColor: 'divider',
                     boxShadow: 1,
                   }}>
                   <Stack
@@ -481,7 +485,7 @@ export default function CustomerHome() {
 
   // 独立的Credit Card组件
   const CreditCard = (
-    <ConditionalSection skeleton={loadingCard}>
+    <ConditionalSection skeleton={loadingCard} onStateChange={(val) => setDomFilter({ credit: val })}>
       <Box className="base-card section section-credit">
         <Box className="section-header" sx={{ mb: 2 }}>
           <Typography variant="h3">{t('admin.creditGrants.title')}</Typography>
@@ -520,16 +524,28 @@ export default function CustomerHome() {
   );
 
   const RevenueCard = (
-    <ConditionalSection skeleton={loadingCard}>
+    <ConditionalSection skeleton={loadingCard} onStateChange={(val) => setDomFilter({ revenue: val })}>
       <Box className="base-card section section-revenue">
         <Box className="section-header">
           <Typography variant="h3">{t('customer.payout.title')}</Typography>
         </Box>
-        <CustomerRevenueList />
+        <Box className="section-body">
+          <CustomerRevenueList />
+        </Box>
       </Box>
     </ConditionalSection>
   );
 
+  const cards = [
+    { card: SummaryCard, key: 'summary' },
+    { card: CreditCard, key: 'credit' },
+    { card: SubscriptionCard, key: 'subscription' },
+    { card: InvoiceCard, key: 'invoice' },
+    { card: RevenueCard, key: 'revenue' },
+  ];
+
+  const visibleCards = cards.filter(({ card, key }) => card && domFilter[key] !== 'none');
+
   return (
     <Content>
       {data?.error && (
@@ -582,15 +598,12 @@ export default function CustomerHome() {
         />
       )}
       <Root>
-        {SummaryCard}
-        {SummaryCard && <Divider />}
-        {CreditCard}
-        {CreditCard && <Divider />}
-        {SubscriptionCard}
-        {SubscriptionCard && <Divider />}
-        {InvoiceCard}
-        {InvoiceCard && <Divider />}
-        {RevenueCard}
+        {visibleCards.map(({ card, key }, index, array) => (
+          <Fragment key={key}>
+            {card}
+            {(domFilter[key] ? domFilter[key] === 'visible' : index < array.length - 1) && <Divider />}
+          </Fragment>
+        ))}
       </Root>
     </Content>
   );
@@ -627,6 +640,9 @@ const Root = styled(Stack)`
   gap: 24px;
   display: flex;
   flex-direction: column;
+  .section-body {
+    padding: 0 1px;
+  }
   @media (max-width: ${({ theme }) => theme.breakpoints.values.xl}px) {
     padding: 0px;
     .base-card {

package/src/pages/customer/invoice/detail.tsx

@@ -170,7 +170,7 @@ export default function CustomerInvoiceDetail() {
               variant="outlined"
               color="primary"
               size="small"
-              sx={{ borderColor: 'grey.100' }}
+              sx={{ borderColor: 'divider' }}
               disabled={state.paying}
               onClick={onPay}>
               {t('payment.customer.invoice.pay')}

package/src/pages/integrations/donations/preview.tsx

@@ -25,7 +25,7 @@ function PreviewAvatars({ count }: { count: number }) {
                 borderRadius: '50%',
                 bgcolor: 'grey.200',
                 border: '2px solid',
-                borderColor: 'grey.100',
+                borderColor: 'divider',
                 position: 'relative',
                 marginLeft: i === 0 ? 0 : '-8px',
                 zIndex: count - i,
@@ -151,7 +151,7 @@ export default function DonationPreview({ config }: { config: TSetting['settings
                             borderRadius: '50%',
                             bgcolor: 'grey.200',
                             border: '2px solid',
-                            borderColor: 'grey.100',
+                            borderColor: 'divider',
                             position: 'relative',
                           }}
                         />
@@ -213,7 +213,7 @@ export default function DonationPreview({ config }: { config: TSetting['settings
                 variant="outlined"
                 size="small"
                 sx={{
-                  borderColor: selectedAmount === amount ? 'primary.main' : 'grey.100',
+                  borderColor: selectedAmount === amount ? 'primary.main' : 'divider',
                   borderWidth: selectedAmount === amount ? 2 : 1,
                   color: selectedAmount === amount ? 'primary.main' : 'text.primary',
                 }}
@@ -226,7 +226,7 @@ export default function DonationPreview({ config }: { config: TSetting['settings
                 variant="outlined"
                 size="small"
                 sx={{
-                  borderColor: showCustom ? 'primary.main' : 'grey.100',
+                  borderColor: showCustom ? 'primary.main' : 'divider',
                   borderWidth: showCustom ? 2 : 1,
                   color: showCustom ? 'primary.main' : 'text.primary',
                 }}