payment-kit 1.18.56 → 1.19.1

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

@@ -1,7 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import { ConfirmDialog, api, formatError } from '@blocklet/payment-react';
-import type { TPrice } from '@blocklet/payment-types';
+import type { TPrice, TProduct } from '@blocklet/payment-types';
 import { useSetState } from 'ahooks';
 import noop from 'lodash/noop';
 import { useNavigate } from 'react-router-dom';
@@ -14,14 +14,16 @@ type Props = {
   onChange: Function;
   variant?: string;
   setAsDefault?: boolean;
+  product?: TProduct | null;
 };
 
-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,
+  product = null,
+}: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
 
@@ -150,8 +152,13 @@ export default function PriceActions({ data, onChange, variant, setAsDefault }:
     <>
       <Actions variant={variant} actions={actions} />
       {state.action === 'edit' && (
-        // @ts-ignore
-        <EditPrice price={data} onSave={onEditPrice} onCancel={() => setState({ action: '' })} />
+        <EditPrice
+          // @ts-ignore
+          price={data}
+          onSave={onEditPrice}
+          onCancel={() => setState({ action: '' })}
+          productType={product?.type}
+        />
       )}
       {state.action === 'archive' && (
         <ConfirmDialog

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

@@ -1,12 +1,21 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError, formatPrice, formatRecurring, formatTime, Table, useMobile } from '@blocklet/payment-react';
+import {
+  api,
+  formatError,
+  formatPrice,
+  formatRecurring,
+  formatTime,
+  Table,
+  useMobile,
+  isCreditMetered,
+} from '@blocklet/payment-react';
 import type { PriceRecurring, TPrice, TPriceExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, AlertTitle, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 import Copyable from '../../../../components/copyable';
 import Currency from '../../../../components/currency';
@@ -107,12 +116,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 +139,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 +241,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
@@ -267,6 +308,24 @@ export default function PriceDetail(props: { id: string }) {
           </Box>
 
           <Divider />
+          {isCreditMetered(data) && (
+            <>
+              <Box className="section">
+                <SectionHeader title={t('admin.meters')} />
+                <Box className="section-body">
+                  <InfoRow
+                    label={t('admin.meter.eventName.label')}
+                    value={
+                      <Link to={`/admin/billing/${data.meter?.id}`} target="_blank">
+                        {data.meter?.event_name}
+                      </Link>
+                    }
+                  />
+                </Box>
+              </Box>
+              <Divider />
+            </>
+          )}
           <Box className="section">
             <SectionHeader title={t('admin.price.currency.list')} />
             <Box className="section-body">
@@ -325,7 +384,7 @@ export default function PriceDetail(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/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' }} />
@@ -123,7 +128,14 @@ export default function PricesList({ product, onChange }: { product: Product; on
         sort: false,
         customBodyRenderLite: (_: any, index: number) => {
           const price = product.prices[index] as any;
-          return <PriceActions data={price} onChange={onChange} setAsDefault={price.id === product.default_price_id} />;
+          return (
+            <PriceActions
+              data={price}
+              onChange={onChange}
+              setAsDefault={price.id === product.default_price_id}
+              product={product as any}
+            />
+          );
         },
       },
     },

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')} />
@@ -289,7 +320,7 @@ export default function PricingTableDetail(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>