payment-kit 1.19.11 → 1.19.13

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',
                 }}