payment-kit 1.18.56 → 1.19.1

package/src/components/price/upsell-select.tsx

@@ -81,12 +81,20 @@ export default function UpsellSelect({ price, onSelect, onAdd }: Props) {
         onChange={onSelectPrice}
         MenuProps={{ style: { maxHeight: 480 } }}>
         <MenuItem value="empty">
-          <Stack direction="row" alignItems="center">
+          <Stack
+            direction="row"
+            sx={{
+              alignItems: 'center',
+            }}>
             <Typography>{t('admin.price.find')}</Typography>
           </Stack>
         </MenuItem>
         <MenuItem value="add">
-          <Stack direction="row" alignItems="center">
+          <Stack
+            direction="row"
+            sx={{
+              alignItems: 'center',
+            }}>
             <AddOutlined />
             <Typography>{t('admin.price.add')}</Typography>
           </Stack>

package/src/components/price/upsell.tsx

@@ -48,7 +48,12 @@ export function UpsellForm({ data, onChange }: { data: TPriceExpanded; onChange:
 
   if (data.upsell?.upsells_to_id) {
     return (
-      <Stack spacing={1} direction="row" alignItems="center">
+      <Stack
+        spacing={1}
+        direction="row"
+        sx={{
+          alignItems: 'center',
+        }}>
         <Typography>{formatPrice(data.upsell.upsells_to, defaultCurrency)}</Typography>
         <IconButton size="small" sx={{ ml: 1 }} onClick={onRemoveUpsell}>
           <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
@@ -63,7 +68,7 @@ export function UpsellForm({ data, onChange }: { data: TPriceExpanded; onChange:
 export default function PriceUpsell({ data, onChange }: { data: TPriceExpanded; onChange: Function }) {
   return (
     <Grid container>
-      <Grid item xs={12} md={12}>
+      <Grid size={{ xs: 12, md: 12 }}>
         <InfoRow label="" value={<UpsellForm data={data} onChange={onChange} />} showLabel={false} />
       </Grid>
     </Grid>

package/src/components/pricing-table/actions.tsx

@@ -18,11 +18,7 @@ type Props = {
   variant?: LiteralUnion<'compact' | 'normal', string>;
 };
 
-PricingTableActions.defaultProps = {
-  variant: 'compact',
-};
-
-export default function PricingTableActions({ data, variant, onChange }: Props) {
+export default function PricingTableActions({ data, variant = 'compact', onChange }: Props) {
   const { t } = useLocaleContext();
   const [state, setState] = useSetState({
     action: '',

package/src/components/pricing-table/customer-settings.tsx

@@ -5,7 +5,11 @@ export default function PricingTableCustomerSettings() {
   const { t } = useLocaleContext();
 
   return (
-    <Stack spacing={2} alignItems="flex-start">
+    <Stack
+      spacing={2}
+      sx={{
+        alignItems: 'flex-start',
+      }}>
       <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
         {t('admin.pricingTable.customer')}
       </Typography>

package/src/components/pricing-table/payment-settings.tsx

@@ -27,7 +27,11 @@ export function PricePaymentSettings({ index }: { index: number }) {
   const values = getValues();
 
   return (
-    <Stack spacing={2} mb={2}>
+    <Stack
+      spacing={2}
+      sx={{
+        mb: 2,
+      }}>
       <Controller
         name={getFieldName('billing_address_collection')}
         control={control}
@@ -126,8 +130,10 @@ export function PricePaymentSettings({ index }: { index: number }) {
               size="small"
               error={!!get(errors, field.name)}
               helperText={(get(errors, field.name)?.message as string) || t('admin.paymentLink.customMessageTip')}
-              inputProps={{
-                maxLength: 200,
+              slotProps={{
+                htmlInput: {
+                  maxLength: 200,
+                },
               }}
             />
           )}
@@ -259,7 +265,11 @@ export default function PricingTablePaymentSettings() {
   const grouped = groupPricingTableItems(items.fields);
 
   return (
-    <Stack spacing={2} alignItems="flex-start">
+    <Stack
+      spacing={2}
+      sx={{
+        alignItems: 'flex-start',
+      }}>
       <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
         {t('admin.paymentLink.products')}
       </Typography>

package/src/components/pricing-table/preview.tsx

@@ -1,10 +1,16 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { useFullscreen, useSize } from 'ahooks';
 import IframeResizer from 'iframe-resizer-react';
 import { useTheme } from '@mui/material';
 import Chrome from '../payment-link/chrome';
 
-const PricingTablePreview = forwardRef(({ id, version = 1 }: { id: string; version?: number }, ref) => {
+export default function PricingTablePreview({
+  ref = undefined,
+  id,
+  version = 1,
+}: { id: string; version?: number } & {
+  ref?: React.RefObject<unknown | null>;
+}) {
   const innerRef = useRef(null);
   const size = useSize(innerRef);
   const theme = useTheme();
@@ -50,10 +56,4 @@ const PricingTablePreview = forwardRef(({ id, version = 1 }: { id: string; versi
       )}
     </div>
   );
-});
-
-PricingTablePreview.defaultProps = {
-  version: 1,
-};
-
-export default PricingTablePreview;
+}

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

@@ -26,7 +26,12 @@ export default function PriceItem({ prefix, price, onRemove }: Props) {
   const currency = findCurrency(settings.paymentMethods, price?.currency_id ?? '') || settings.baseCurrency;
   return (
     <Box sx={{ width: '100%' }}>
-      <Stack direction="row" alignItems="center" justifyContent="space-between">
+      <Stack
+        direction="row"
+        sx={{
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}>
         <Typography>{formatPrice(price, currency!)}</Typography>
         <IconButton size="small" onClick={onRemove}>
           <DeleteOutlineOutlined color="inherit" sx={{ opacity: 0.75 }} />

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

@@ -63,7 +63,12 @@ export default function ProductItem({ product, prices, valid, onUpdate, onRemove
         />
       </ClickBoundary>
       <InfoCard logo={product.images[0]} name={product.name} description={product.description} />
-      <Stack direction="column" spacing={2} alignItems="flex-start">
+      <Stack
+        direction="column"
+        spacing={2}
+        sx={{
+          alignItems: 'flex-start',
+        }}>
         {prices.map((x: any) => (
           <PriceItem
             key={x.index}

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

@@ -14,7 +14,7 @@ import ProductItem from './product-item';
 export default function PricingTableProductSettings({
   triggerError = () => {},
 }: {
-  triggerError: (keys: { [key: string]: boolean }) => void;
+  triggerError?: (keys: { [key: string]: boolean }) => void;
 }) {
   const { t } = useLocaleContext();
   const [params, setParams] = useSearchParams();
@@ -121,7 +121,11 @@ export default function PricingTableProductSettings({
   }, [items.fields, products]);
 
   return (
-    <Stack spacing={2} alignItems="flex-start">
+    <Stack
+      spacing={2}
+      sx={{
+        alignItems: 'flex-start',
+      }}>
       <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
         {t('admin.paymentLink.products')}
       </Typography>
@@ -148,7 +152,11 @@ export default function PricingTableProductSettings({
             );
           })}
           {items.fields.some((_, index) => !isPriceCurrencyAligned(items.fields as any[], products, index)) && (
-            <Typography color="error" fontSize="small">
+            <Typography
+              color="error"
+              sx={{
+                fontSize: 'small',
+              }}>
               {t('admin.paymentLink.currencyNotAligned')}
             </Typography>
           )}
@@ -188,7 +196,12 @@ export default function PricingTableProductSettings({
             )}
           />
           {highlight && (
-            <Stack direction="row" alignItems="center" spacing={0.5}>
+            <Stack
+              direction="row"
+              spacing={0.5}
+              sx={{
+                alignItems: 'center',
+              }}>
               <Controller
                 name="highlight_product_id"
                 control={control}

package/src/components/product/actions.tsx

@@ -17,11 +17,7 @@ type ProductActionProps = {
   variant?: LiteralUnion<'compact' | 'normal', string>;
 };
 
-ProductActions.defaultProps = {
-  variant: 'compact',
-};
-
-export default function ProductActions({ data, variant, onChange }: ProductActionProps) {
+export default function ProductActions({ data, variant = 'compact', onChange }: ProductActionProps) {
   const isLocked = data.locked || (!isEmpty(data.prices) && data.prices.some((x) => x.locked));
   const { t } = useLocaleContext();
   const [state, setState] = useSetState({

package/src/components/product/add-price.tsx

@@ -6,16 +6,16 @@ import type { EventHandler } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import PriceForm, { DEFAULT_PRICE, Price } from '../price/form';
+import { ProductsProvider } from '../../contexts/products';
 
-export default function AddPrice({
-  loading,
-  onSave,
-  onCancel,
-}: {
+interface AddPriceProps {
   loading: boolean;
   onSave: EventHandler<any>;
   onCancel: EventHandler<any>;
-}) {
+  productType?: string;
+}
+
+export default function AddPrice({ loading, onSave, onCancel, productType = '' }: AddPriceProps) {
   const { t } = useLocaleContext();
   const { settings } = usePaymentContext();
   const methods = useForm<Price>({
@@ -63,7 +63,9 @@ export default function AddPrice({
         </Stack>
       }>
       <FormProvider {...methods}>
-        <PriceForm />
+        <ProductsProvider>
+          <PriceForm productType={productType} />
+        </ProductsProvider>
       </FormProvider>
     </Dialog>
   );

package/src/components/product/create.tsx

@@ -9,9 +9,10 @@ import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
 
 import PriceForm, { DEFAULT_PRICE } from '../price/form';
 import ProductForm, { Product } from './form';
+import { ProductsProvider } from '../../contexts/products';
 
 export default function CreateProduct({
-  simple,
+  simple = true,
   onSave,
   onCancel,
 }: {
@@ -92,15 +93,13 @@ export default function CreateProduct({
         </Stack>
       }>
       <FormProvider {...methods}>
-        <ProductForm simple={simple} />
-        {prices.fields.map((price, index) => (
-          <PriceForm key={price.id} prefix={`prices.${index}`} simple={simple} />
-        ))}
+        <ProductsProvider>
+          <ProductForm simple={simple} />
+          {prices.fields.map((price, index) => (
+            <PriceForm key={price.id} prefix={`prices.${index}`} simple={simple} />
+          ))}
+        </ProductsProvider>
       </FormProvider>
     </Dialog>
   );
 }
-
-CreateProduct.defaultProps = {
-  simple: true,
-};

package/src/components/product/cross-sell-select.tsx

@@ -39,7 +39,11 @@ export default function CrossSellSelect({ data, onSelect, valid }: Props) {
         onChange={onSelectPrice}
         MenuProps={{ style: { maxHeight: 480 } }}>
         <MenuItem value="empty">
-          <Stack direction="row" alignItems="center">
+          <Stack
+            direction="row"
+            sx={{
+              alignItems: 'center',
+            }}>
             <Typography>{t('admin.product.find')}</Typography>
           </Stack>
         </MenuItem>

package/src/components/product/cross-sell.tsx

@@ -64,7 +64,12 @@ export function CrossSellForm({ data, onChange }: { data: TProductExpanded; onCh
   if (data.cross_sell?.cross_sells_to_id) {
     const to = data.cross_sell.cross_sells_to;
     return (
-      <Stack spacing={1} direction="row" alignItems="center">
+      <Stack
+        spacing={1}
+        direction="row"
+        sx={{
+          alignItems: 'center',
+        }}>
         <InfoCard
           name={to.name}
           description={formatProductPrice(to as any, defaultCurrency, locale)}
@@ -91,7 +96,7 @@ export default function ProductCrossSell({ data, onChange }: { data: TProductExp
   return (
     <ProductsProvider>
       <Grid container>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <CrossSellForm data={data} onChange={onChange} />
         </Grid>
       </Grid>

package/src/components/product/edit-price.tsx

@@ -10,19 +10,28 @@ import { FormProvider, useForm } from 'react-hook-form';
 
 import { getPricingModel } from '../../libs/util';
 import PriceForm, { DEFAULT_PRICE, Price } from '../price/form';
+import { ProductsProvider } from '../../contexts/products';
 
-export default function EditPrice({
-  price,
-  loading,
-  onSave,
-  onCancel,
-}: {
+interface EditPriceProps {
   price: Price;
   loading: boolean;
   onSave: EventHandler<any>;
   onCancel: EventHandler<any>;
-}) {
+  productType?: string;
+}
+
+export default function EditPrice({ price, loading, onSave, onCancel, productType = '' }: EditPriceProps) {
   const { t } = useLocaleContext();
+
+  // 处理 metadata 的回填逻辑
+  const processMetadata = (metadata: any) => {
+    if (isEmpty(metadata)) {
+      return {};
+    }
+
+    return metadata;
+  };
+
   const methods = useForm<Price>({
     mode: 'onChange',
     defaultValues: {
@@ -30,10 +39,8 @@ export default function EditPrice({
       unit_amount: fromUnitToToken(price.unit_amount, price.currency?.decimal),
       // @ts-ignore
       model: getPricingModel(price as any),
-      metadata: isEmpty(price.metadata)
-        ? []
-        : // @ts-ignore
-          Object.keys(price.metadata).map((x) => ({ key: x, value: price.metadata[x] })),
+      // @ts-ignore
+      metadata: processMetadata(price.metadata),
       recurring: price.recurring
         ? {
             ...price.recurring,
@@ -90,7 +97,9 @@ export default function EditPrice({
         </Stack>
       }>
       <FormProvider {...methods}>
-        <PriceForm />
+        <ProductsProvider>
+          <PriceForm productType={productType || price.product?.type} />
+        </ProductsProvider>
       </FormProvider>
     </Dialog>
   );

package/src/components/product/features.tsx

@@ -15,29 +15,49 @@ export default function MetadataForm() {
     <Box sx={{ width: 1 }}>
       <Typography>{t('admin.product.features.label')}</Typography>
       {features.fields.map((feature, index) => (
-        <Box key={feature.id} mt={2} sx={{ width: 1 }}>
+        <Box
+          key={feature.id}
+          sx={{ width: 1, gap: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 2 }}>
           <Controller
             render={({ field }) => (
               <TextField
                 {...field}
-                sx={{ width: '80%' }}
+                sx={{ flex: 1, width: 'calc(100% - 60px)' }}
                 size="small"
-                inputProps={{ maxLength: 64 }}
                 error={!!get(errors, field.name)}
                 helperText={get(errors, field.name)?.message as string}
+                slotProps={{
+                  htmlInput: { maxLength: 64 },
+                }}
               />
             )}
             rules={{ maxLength: { value: 64, message: t('common.maxLength', { len: 64 }) } }}
             name={`features.${index}.name`}
             control={control}
           />
-          <IconButton size="small" sx={{ ml: 1 }} onClick={() => features.remove(index)}>
+          <IconButton
+            size="small"
+            onClick={() => features.remove(index)}
+            sx={{
+              border: '1px solid',
+              borderColor: 'grey.100',
+              borderRadius: 1,
+              padding: '8px',
+            }}>
             <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
           </IconButton>
         </Box>
       ))}
-      <Box mt={features.fields.length ? 2 : 1}>
-        <Button size="small" variant="outlined" color="inherit" onClick={() => features.append({ name: '' })}>
+      <Box
+        sx={{
+          mt: features.fields.length ? 2 : 1,
+        }}>
+        <Button
+          size="small"
+          variant="outlined"
+          color="primary"
+          sx={{ color: 'text.primary' }}
+          onClick={() => features.append({ name: '' })}>
           <AddOutlined fontSize="small" /> {t('admin.product.features.add')}
         </Button>
       </Box>