payment-kit 1.18.56 → 1.19.1

package/src/pages/admin/payments/intents/detail.tsx

@@ -96,12 +96,21 @@ export default function PaymentIntentDetail(props: { id: string }) {
   return (
     <Root direction="column" spacing={2.5} mb={4}>
       <Box>
-        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+        <Stack
+          className="page-header"
+          direction="row"
+          sx={{
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}>
           <Stack
             direction="row"
-            alignItems="center"
-            sx={{ fontWeight: 'normal', cursor: 'pointer' }}
-            onClick={() => goBackOrFallback('/admin/payments/intents')}>
+            onClick={() => goBackOrFallback('/admin/payments/intents')}
+            sx={{
+              alignItems: 'center',
+              fontWeight: 'normal',
+              cursor: 'pointer',
+            }}>
             <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
             <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
               {t('admin.payments')}
@@ -110,36 +119,55 @@ export default function PaymentIntentDetail(props: { id: string }) {
           <PaymentIntentActions data={data} variant="normal" onChange={runAsync} />
         </Stack>
         <Box
-          mt={4}
-          mb={3}
           sx={{
+            mt: 4,
+            mb: 3,
             display: 'flex',
+
             gap: {
               xs: 2,
               sm: 2,
               md: 5,
             },
+
             flexWrap: 'wrap',
+
             flexDirection: {
               xs: 'column',
               sm: 'column',
               md: 'row',
             },
+
             alignItems: {
               xs: 'flex-start',
               sm: 'flex-start',
               md: 'center',
             },
           }}>
-          <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Stack direction="row" alignItems="center" spacing={1}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{
+                alignItems: 'center',
+              }}>
               <Avatar
                 src={data.paymentCurrency.logo}
                 alt={data.paymentCurrency.symbol}
                 variant="square"
                 sx={{ width: '52px', height: '52px', borderRadius: 0.5 }}
               />
-              <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
+              <Stack
+                direction="column"
+                sx={{
+                  alignItems: 'flex-start',
+                  justifyContent: 'space-around',
+                }}>
                 <Amount
                   amount={data?.amount_received === '0' ? total : received}
                   sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }}
@@ -150,18 +178,22 @@ export default function PaymentIntentDetail(props: { id: string }) {
           </Stack>
           <Stack
             className="section-body"
-            justifyContent="flex-start"
-            flexWrap="wrap"
             sx={{
+              justifyContent: 'flex-start',
+              flexWrap: 'wrap',
+
               'hr.MuiDivider-root:last-child': {
                 display: 'none',
               },
+
               flexDirection: {
                 xs: 'column',
                 sm: 'column',
                 md: 'row',
               },
+
               alignItems: 'flex-start',
+
               gap: {
                 xs: 1,
                 sm: 1,
@@ -208,7 +240,14 @@ export default function PaymentIntentDetail(props: { id: string }) {
             },
           },
         }}>
-        <Box flex={1} className="payment-link-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
+        <Box
+          className="payment-link-column-1"
+          sx={{
+            flex: 1,
+            gap: 2.5,
+            display: 'flex',
+            flexDirection: 'column',
+          }}>
           <Box className="section" sx={{ containerType: 'inline-size' }}>
             <SectionHeader title={t('admin.details')} />
             <InfoRowGroup
@@ -240,7 +279,12 @@ export default function PaymentIntentDetail(props: { id: string }) {
               <InfoRow
                 label={t('common.status')}
                 value={
-                  <Stack direction="row" alignItems="center" spacing={1}>
+                  <Stack
+                    direction="row"
+                    spacing={1}
+                    sx={{
+                      alignItems: 'center',
+                    }}>
                     <Status label={data.status} color={getPaymentIntentStatusColor(data.status)} />
                     {data.last_payment_error && (
                       <Tooltip
@@ -286,7 +330,7 @@ export default function PaymentIntentDetail(props: { id: string }) {
           </Box>
           <Divider />
           <Box className="section">
-            <SectionHeader title={t('admin.events')} />
+            <SectionHeader title={t('admin.events.title')} />
             <Box className="section-body">
               <EventList features={{ toolbar: false }} object_id={data.id} />
             </Box>

package/src/pages/admin/payments/payouts/detail.tsx

@@ -119,12 +119,21 @@ export default function PayoutDetail(props: { id: string }) {
   return (
     <Root direction="column" spacing={2.5} mb={4}>
       <Box>
-        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+        <Stack
+          className="page-header"
+          direction="row"
+          sx={{
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}>
           <Stack
             direction="row"
-            alignItems="center"
-            sx={{ fontWeight: 'normal', cursor: 'pointer' }}
-            onClick={() => goBackOrFallback('/admin/payments/payouts')}>
+            onClick={() => goBackOrFallback('/admin/payments/payouts')}
+            sx={{
+              alignItems: 'center',
+              fontWeight: 'normal',
+              cursor: 'pointer',
+            }}>
             <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
             <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
               {t('admin.payouts')}
@@ -132,37 +141,60 @@ export default function PayoutDetail(props: { id: string }) {
           </Stack>
         </Stack>
         <Box
-          mt={4}
-          mb={3}
           sx={{
+            mt: 4,
+            mb: 3,
             display: 'flex',
+
             gap: {
               xs: 2,
               sm: 2,
               md: 5,
             },
+
             flexWrap: 'wrap',
+
             flexDirection: {
               xs: 'column',
               sm: 'column',
               md: 'row',
             },
+
             alignItems: {
               xs: 'flex-start',
               sm: 'flex-start',
               md: 'center',
             },
           }}>
-          <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Stack direction="row" alignItems="center">
-              <Stack direction="row" alignItems="center" spacing={1}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+              }}>
+              <Stack
+                direction="row"
+                spacing={1}
+                sx={{
+                  alignItems: 'center',
+                }}>
                 <Avatar
                   src={data.paymentCurrency.logo}
                   alt={data.paymentCurrency.symbol}
                   variant="square"
                   sx={{ width: '52px', height: '52px', borderRadius: 0.5 }}
                 />
-                <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
+                <Stack
+                  direction="column"
+                  sx={{
+                    alignItems: 'flex-start',
+                    justifyContent: 'space-around',
+                  }}>
                   <Amount amount={total} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />
                   <Copyable text={props.id} />
                 </Stack>
@@ -171,18 +203,22 @@ export default function PayoutDetail(props: { id: string }) {
           </Stack>
           <Stack
             className="section-body"
-            justifyContent="flex-start"
-            flexWrap="wrap"
             sx={{
+              justifyContent: 'flex-start',
+              flexWrap: 'wrap',
+
               'hr.MuiDivider-root:last-child': {
                 display: 'none',
               },
+
               flexDirection: {
                 xs: 'column',
                 sm: 'column',
                 md: 'row',
               },
+
               alignItems: 'flex-start',
+
               gap: {
                 xs: 1,
                 sm: 1,
@@ -278,7 +314,14 @@ export default function PayoutDetail(props: { id: string }) {
             },
           },
         }}>
-        <Box flex={1} className="payment-link-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
+        <Box
+          className="payment-link-column-1"
+          sx={{
+            flex: 1,
+            gap: 2.5,
+            display: 'flex',
+            flexDirection: 'column',
+          }}>
           <Box className="section" sx={{ containerType: 'inline-size' }}>
             <SectionHeader title={t('admin.details')} />
             <InfoRowGroup
@@ -310,7 +353,12 @@ export default function PayoutDetail(props: { id: string }) {
               <InfoRow
                 label={t('common.status')}
                 value={
-                  <Stack direction="row" alignItems="center" spacing={1}>
+                  <Stack
+                    direction="row"
+                    spacing={1}
+                    sx={{
+                      alignItems: 'center',
+                    }}>
                     <Status label={data.status} color={getPayoutStatusColor(data.status)} />
                     {data.last_attempt_error && (
                       <Tooltip
@@ -334,7 +382,7 @@ export default function PayoutDetail(props: { id: string }) {
           </Box>
           <Divider />
           <Box className="section">
-            <SectionHeader title={t('admin.events')} />
+            <SectionHeader title={t('admin.events.title')} />
             <Box className="section-body">
               <EventList features={{ toolbar: false }} object_id={data.id} />
             </Box>

package/src/pages/admin/payments/refunds/detail.tsx

@@ -94,12 +94,21 @@ export default function RefundDetail(props: { id: string }) {
   return (
     <Root direction="column" spacing={2.5} mb={4}>
       <Box>
-        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+        <Stack
+          className="page-header"
+          direction="row"
+          sx={{
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}>
           <Stack
             direction="row"
-            alignItems="center"
-            sx={{ fontWeight: 'normal', cursor: 'pointer' }}
-            onClick={() => goBackOrFallback('/admin/payments/refunds')}>
+            onClick={() => goBackOrFallback('/admin/payments/refunds')}
+            sx={{
+              alignItems: 'center',
+              fontWeight: 'normal',
+              cursor: 'pointer',
+            }}>
             <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
             <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
               {t('admin.refunds')}
@@ -108,36 +117,55 @@ export default function RefundDetail(props: { id: string }) {
           <RefundActions data={data} variant="normal" onChange={() => runAsync()} />
         </Stack>
         <Box
-          mt={4}
-          mb={3}
           sx={{
+            mt: 4,
+            mb: 3,
             display: 'flex',
+
             gap: {
               xs: 2,
               sm: 2,
               md: 5,
             },
+
             flexWrap: 'wrap',
+
             flexDirection: {
               xs: 'column',
               sm: 'column',
               md: 'row',
             },
+
             alignItems: {
               xs: 'flex-start',
               sm: 'flex-start',
               md: 'center',
             },
           }}>
-          <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Stack direction="row" alignItems="center" spacing={1}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{
+                alignItems: 'center',
+              }}>
               <Avatar
                 src={data.paymentCurrency.logo}
                 alt={data.paymentCurrency.symbol}
                 variant="square"
                 sx={{ width: '52px', height: '52px', borderRadius: 0.5 }}
               />
-              <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
+              <Stack
+                direction="column"
+                sx={{
+                  alignItems: 'flex-start',
+                  justifyContent: 'space-around',
+                }}>
                 <Amount amount={amount} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />
                 <Copyable text={props.id} />
               </Stack>
@@ -145,18 +173,22 @@ export default function RefundDetail(props: { id: string }) {
           </Stack>
           <Stack
             className="section-body"
-            justifyContent="flex-start"
-            flexWrap="wrap"
             sx={{
+              justifyContent: 'flex-start',
+              flexWrap: 'wrap',
+
               'hr.MuiDivider-root:last-child': {
                 display: 'none',
               },
+
               flexDirection: {
                 xs: 'column',
                 sm: 'column',
                 md: 'row',
               },
+
               alignItems: 'flex-start',
+
               gap: {
                 xs: 1,
                 sm: 1,
@@ -203,7 +235,14 @@ export default function RefundDetail(props: { id: string }) {
             },
           },
         }}>
-        <Box flex={1} className="payment-link-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
+        <Box
+          className="payment-link-column-1"
+          sx={{
+            flex: 1,
+            gap: 2.5,
+            display: 'flex',
+            flexDirection: 'column',
+          }}>
           <Box className="section" sx={{ containerType: 'inline-size' }}>
             <SectionHeader title={t('admin.details')} />
             <InfoRowGroup
@@ -235,7 +274,12 @@ export default function RefundDetail(props: { id: string }) {
               <InfoRow
                 label={t('common.status')}
                 value={
-                  <Stack direction="row" alignItems="center" spacing={1}>
+                  <Stack
+                    direction="row"
+                    spacing={1}
+                    sx={{
+                      alignItems: 'center',
+                    }}>
                     <Status label={data.status} color={getRefundStatusColor(data.status)} />
                     {data.last_attempt_error && data.status !== 'canceled' && (
                       <Tooltip
@@ -268,7 +312,7 @@ export default function RefundDetail(props: { id: string }) {
           </Box>
           <Divider />
           <Box className="section">
-            <SectionHeader title={t('admin.events')} />
+            <SectionHeader title={t('admin.events.title')} />
             <Box className="section-body">
               <EventList features={{ toolbar: false }} object_id={data.id} />
             </Box>

package/src/pages/admin/products/index.tsx

@@ -1,7 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
 import { Box, Stack } from '@mui/material';
-import React, { isValidElement } from 'react';
+import React, { isValidElement, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { useTransitionContext } from '../../../components/progress-bar';
@@ -26,6 +26,7 @@ export default function Products() {
   const navigate = useNavigate();
   const { t } = useLocaleContext();
   const { page = 'products' } = useParams();
+  const [createProduct, setCreateProduct] = useState(false);
   const { startTransition } = useTransitionContext();
 
   if (page.startsWith('prod_')) {
@@ -56,7 +57,7 @@ export default function Products() {
 
   let extra = null;
   if (page === 'products') {
-    extra = <ProductCreate />;
+    extra = <ProductCreate open={createProduct} onClose={() => setCreateProduct(false)} />;
   } else if (page === 'links') {
     extra = <PaymentLinkCreate />;
   } else if (page === 'pricing-tables') {
@@ -65,7 +66,14 @@ export default function Products() {
 
   return (
     <>
-      <Stack direction="row" alignItems="flex-start" justifyContent="end" flexWrap="wrap" spacing={1}>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{
+          alignItems: 'flex-start',
+          justifyContent: 'end',
+          flexWrap: 'wrap',
+        }}>
         {/* @ts-ignore */}
         <Tabs
           // @ts-ignore
@@ -99,7 +107,6 @@ export default function Products() {
         />
         <Box> {extra}</Box>
       </Stack>
-
       {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
     </>
   );

package/src/pages/admin/products/links/create.tsx

@@ -150,8 +150,18 @@ export default function CreatePaymentLink() {
         </Button>
       }>
       <FormProvider {...methods}>
-        <Stack spacing={3} direction="row" alignItems="flex-start">
-          <Stack spacing={2} flex={2} alignItems="flex-start">
+        <Stack
+          spacing={3}
+          direction="row"
+          sx={{
+            alignItems: 'flex-start',
+          }}>
+          <Stack
+            spacing={2}
+            sx={{
+              flex: 2,
+              alignItems: 'flex-start',
+            }}>
             <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
               {t('common.setup')}
             </Typography>
@@ -172,12 +182,20 @@ export default function CreatePaymentLink() {
               <TabComponent triggerError={triggerError} />
             </ProductsProvider>
           </Stack>
-          <Stack flex={1} sx={{ maxWidth: 680 }}>
+          <Stack
+            sx={{
+              flex: 1,
+              maxWidth: 680,
+            }}>
             <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
               {t('common.preview')}
             </Typography>
             {stashed && <PaymentLinkPreview id={`plink_${session?.user?.did}`} version={stashed} ref={fullScreenRef} />}
-            <Box textAlign="center" mt={2.5}>
+            <Box
+              sx={{
+                textAlign: 'center',
+                mt: 2.5,
+              }}>
               <Button
                 variant="outlined"
                 color="primary"

package/src/pages/admin/products/links/detail.tsx

@@ -104,13 +104,22 @@ export default function PaymentLinkDetail(props: { id: string }) {
 
   return (
     <Grid container spacing={4} sx={{ mb: 4 }}>
-      <Grid item xs={12}>
-        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+      <Grid size={12}>
+        <Stack
+          className="page-header"
+          direction="row"
+          sx={{
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}>
           <Stack
             direction="row"
-            alignItems="center"
-            sx={{ fontWeight: 'normal', cursor: 'pointer' }}
-            onClick={() => goBackOrFallback('/admin/products/links')}>
+            onClick={() => goBackOrFallback('/admin/products/links')}
+            sx={{
+              alignItems: 'center',
+              fontWeight: 'normal',
+              cursor: 'pointer',
+            }}>
             <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
             <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
               {t('admin.paymentLinks')}
@@ -119,29 +128,41 @@ export default function PaymentLinkDetail(props: { id: string }) {
           <PaymentLinkActions data={data} onChange={onChange} variant="normal" />
         </Stack>
         <Box
-          mt={4}
-          mb={3}
           sx={{
+            mt: 4,
+            mb: 3,
             display: 'flex',
+
             gap: {
               xs: 2,
               sm: 2,
               md: 5,
             },
+
             flexWrap: 'wrap',
+
             flexDirection: {
               xs: 'column',
               sm: 'column',
               md: 'row',
             },
+
             alignItems: {
               xs: 'flex-start',
               sm: 'flex-start',
               md: 'center',
             },
           }}>
-          <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Stack gap={1}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+            <Stack
+              sx={{
+                gap: 1,
+              }}>
               <Typography variant="h1">{data.name}</Typography>
               <Copyable text={joinURL(window.blocklet.appUrl, window.blocklet.prefix, `/checkout/pay/${data.id}`)}>
                 <Typography
@@ -160,18 +181,22 @@ export default function PaymentLinkDetail(props: { id: string }) {
           </Stack>
           <Stack
             className="section-body"
-            justifyContent="flex-start"
-            flexWrap="wrap"
             sx={{
+              justifyContent: 'flex-start',
+              flexWrap: 'wrap',
+
               'hr.MuiDivider-root:last-child': {
                 display: 'none',
               },
+
               flexDirection: {
                 xs: 'column',
                 sm: 'column',
                 md: 'row',
               },
+
               alignItems: 'flex-start',
+
               gap: {
                 xs: 1,
                 sm: 1,
@@ -184,7 +209,7 @@ export default function PaymentLinkDetail(props: { id: string }) {
         </Box>
         <Divider />
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <Stack
           sx={{
             flexDirection: {
@@ -210,7 +235,11 @@ export default function PaymentLinkDetail(props: { id: string }) {
               },
             },
           }}>
-          <Box flex={1} className="payment-link-column-1">
+          <Box
+            className="payment-link-column-1"
+            sx={{
+              flex: 1,
+            }}>
             <Div direction="column" spacing={3}>
               <Box className="section">
                 <SectionHeader title={t('admin.products')} />
@@ -348,7 +377,7 @@ export default function PaymentLinkDetail(props: { id: string }) {
               </Box>
               <Divider />
               <Box className="section">
-                <SectionHeader title={t('admin.events')} />
+                <SectionHeader title={t('admin.events.title')} />
                 <Box className="section-body">
                   <EventList features={{ toolbar: false }} object_id={data.id} />
                 </Box>