payment-kit 1.18.56 → 1.19.0

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')} />

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

@@ -31,7 +31,14 @@ export default function PassportList() {
   }
 
   if (data && data.length === 0) {
-    return <Typography color="text.secondary">{t('admin.event.empty')}</Typography>;
+    return (
+      <Typography
+        sx={{
+          color: 'text.secondary',
+        }}>
+        {t('admin.event.empty')}
+      </Typography>
+    );
   }
 
   const columns = [
@@ -61,7 +68,11 @@ export default function PassportList() {
           }
 
           return (
-            <Typography component="span" color="text.secondary">
+            <Typography
+              component="span"
+              sx={{
+                color: 'text.secondary',
+              }}>
               {t('common.none')}
             </Typography>
           );
@@ -82,7 +93,11 @@ export default function PassportList() {
           }
 
           return (
-            <Typography component="span" color="text.secondary">
+            <Typography
+              component="span"
+              sx={{
+                color: 'text.secondary',
+              }}>
               {t('common.none')}
             </Typography>
           );
@@ -114,7 +129,11 @@ export default function PassportList() {
           }
 
           return (
-            <Typography component="span" color="text.secondary">
+            <Typography
+              component="span"
+              sx={{
+                color: 'text.secondary',
+              }}>
               {t('common.none')}
             </Typography>
           );

package/src/pages/admin/products/prices/actions.tsx

@@ -16,12 +16,7 @@ type Props = {
   setAsDefault?: boolean;
 };
 
-PriceActions.defaultProps = {
-  variant: 'compact',
-  setAsDefault: false,
-};
-
-export default function PriceActions({ data, onChange, variant, setAsDefault }: Props) {
+export default function PriceActions({ data, onChange, variant = 'compact', setAsDefault = false }: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
 

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

@@ -107,12 +107,21 @@ export default function PriceDetail(props: { id: string }) {
             {t('admin.price.locked')}
           </Alert>
         )}
-        <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/products/${data.product_id}`)}>
+            onClick={() => goBackOrFallback(`/admin/products/${data.product_id}`)}
+            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.products')}
@@ -121,47 +130,63 @@ export default function PriceDetail(props: { id: string }) {
           <PriceActions 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="column" gap={1}>
-            <Typography variant="h2" fontWeight={600}>
+          <Stack
+            direction="column"
+            sx={{
+              gap: 1,
+            }}>
+            <Typography
+              variant="h2"
+              sx={{
+                fontWeight: 600,
+              }}>
               Price for {data.product.name}
             </Typography>
             <Copyable text={props.id} style={{ marginLeft: 4 }} />
           </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,
@@ -207,7 +232,14 @@ export default function PriceDetail(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')}>
               <Button

package/src/pages/admin/products/prices/list.tsx

@@ -36,10 +36,15 @@ export default function PricesList({ product, onChange }: { product: Product; on
           const priceCurrency = showHighlight
             ? findCurrency(settings.paymentMethods, query.currency_id || '')
             : price.currency;
-          const highlightColor = theme.mode === 'dark' ? '#2e3035' : '#FFF9C4';
+          const highlightColor = theme.palette.mode === 'dark' ? '#2e3035' : '#FFF9C4';
           return (
             <Link to={`/admin/products/${price.id}`} color="text.primary">
-              <Stack direction="row" alignItems="center" spacing={1}>
+              <Stack
+                direction="row"
+                spacing={1}
+                sx={{
+                  alignItems: 'center',
+                }}>
                 {price.locked && (
                   <Tooltip title={t('admin.price.locked')}>
                     <LockOutlined sx={{ color: 'text.secondary' }} />

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

@@ -121,23 +121,48 @@ export default function CreatePricingTable() {
       }>
       <FormProvider {...methods}>
         <ProductsProvider>
-          <Stack height="92vh" spacing={2} direction="row">
-            <Box flex={2} sx={{ borderRight: '1px solid', borderColor: 'grey.100' }} position="relative">
-              <Stack height="100%" spacing={2}>
-                <Box overflow="auto" sx={{ pr: 2, pb: 8 }}>
+          <Stack
+            spacing={2}
+            direction="row"
+            sx={{
+              height: '92vh',
+            }}>
+            <Box
+              sx={{
+                flex: 2,
+                position: 'relative',
+                borderRight: '1px solid',
+                borderColor: 'grey.100',
+              }}>
+              <Stack
+                spacing={2}
+                sx={{
+                  height: '100%',
+                }}>
+                <Box
+                  sx={{
+                    overflow: 'auto',
+                    pr: 2,
+                    pb: 8,
+                  }}>
                   {step === 0 && <PricingTableProductSettings triggerError={triggerError} />}
                   {step === 1 && <PricingTablePaymentSettings />}
                   {/* {step === 2 && <PricingTableCustomerSettings />} */}
                 </Box>
                 <Stack
-                  padding={2}
                   spacing={2}
-                  width="100%"
                   direction="row"
-                  alignItems="center"
-                  justifyContent="flex-end"
-                  position="absolute"
-                  sx={{ borderTop: '1px solid', borderColor: 'grey.100', left: 0, bottom: 0 }}>
+                  sx={{
+                    padding: 2,
+                    width: '100%',
+                    alignItems: 'center',
+                    justifyContent: 'flex-end',
+                    position: 'absolute',
+                    borderTop: '1px solid',
+                    borderColor: 'grey.100',
+                    left: 0,
+                    bottom: 0,
+                  }}>
                   <Button variant="text" color="inherit" disabled={step === 0} onClick={onPrevious}>
                     {t('common.previous')}
                   </Button>
@@ -147,14 +172,22 @@ export default function CreatePricingTable() {
                 </Stack>
               </Stack>
             </Box>
-            <Box flex={1} sx={{ maxWidth: 680 }}>
+            <Box
+              sx={{
+                flex: 1,
+                maxWidth: 680,
+              }}>
               <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
                 {t('common.preview')}
               </Typography>
               {stashed && (
                 <PricingTablePreview id={`prctbl_${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/pricing-tables/detail.tsx

@@ -85,13 +85,22 @@ export default function PricingTableDetail(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/pricing-tables')}>
+            onClick={() => goBackOrFallback('/admin/products/pricing-tables')}
+            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.pricingTables')}
@@ -100,29 +109,43 @@ export default function PricingTableDetail(props: { id: string }) {
           <PricingTableActions 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" gap={5}>
-            <Stack direction="column" alignItems="flex-start">
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              gap: 5,
+            }}>
+            <Stack
+              direction="column"
+              sx={{
+                alignItems: 'flex-start',
+              }}>
               <Typography variant="h1">{data.name}</Typography>
               <Copyable
                 text={joinURL(window.blocklet.appUrl, window.blocklet.prefix, `/checkout/pricing-table/${data.id}`)}>
@@ -146,18 +169,22 @@ export default function PricingTableDetail(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,
@@ -169,7 +196,7 @@ export default function PricingTableDetail(props: { id: string }) {
         </Box>
         <Divider />
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <Stack
           sx={{
             flexDirection: {
@@ -195,7 +222,11 @@ export default function PricingTableDetail(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')} />

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

@@ -95,7 +95,10 @@ export default function ProductsCreate() {
               <Divider sx={{ mt: 2, mb: 4 }} />
             </Fragment>
           ))}
-          <Box mt={1}>
+          <Box
+            sx={{
+              mt: 1,
+            }}>
             <Button
               size="small"
               variant="outlined"