payment-kit 1.18.55 → 1.19.0

package/src/components/price/form.tsx

@@ -75,11 +75,6 @@ type PriceFormProps = {
   simple?: boolean;
 };
 
-PriceForm.defaultProps = {
-  prefix: '',
-  simple: false,
-};
-
 const INPUT_WIDTH = 260;
 
 const hasMoreCurrency = (methods: TPaymentMethodExpanded[] = []) => {
@@ -96,7 +91,7 @@ function stripeCurrencyValidate(v: number, currency: TPaymentCurrencyExpanded |
   return true;
 }
 
-export default function PriceForm({ prefix, simple }: PriceFormProps) {
+export default function PriceForm({ prefix = '', simple = false }: PriceFormProps) {
   const getFieldName = (name: string) => (prefix ? `${prefix}.${name}` : name);
 
   const { t, locale } = useLocaleContext();
@@ -200,8 +195,17 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
           render={({ field }) => (
             <Box>
               <FormLabel sx={{ color: 'text.primary' }}>
-                <Stack direction="row" alignItems="center" spacing={0.5}>
-                  <Typography component="span" color="text.primary">
+                <Stack
+                  direction="row"
+                  spacing={0.5}
+                  sx={{
+                    alignItems: 'center',
+                  }}>
+                  <Typography
+                    component="span"
+                    sx={{
+                      color: 'text.primary',
+                    }}>
                     {t('admin.price.amount')}
                   </Typography>
                   <Tooltip title={t('admin.price.amountTip')} placement="top" arrow>
@@ -216,33 +220,6 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                 sx={{ width: INPUT_WIDTH }}
                 error={!!getFieldError(getFieldName('unit_amount'))}
                 helperText={getFieldError(getFieldName('unit_amount'))?.message}
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">
-                      <CurrencySelect
-                        mode="selected"
-                        hasSelected={(currency) =>
-                          currencies.fields.some((x: any) => x.currency_id === currency.id) ||
-                          currency.id === defaultCurrencyId
-                        }
-                        onSelect={(currencyId) => {
-                          const index = currencies.fields.findIndex((x: any) => x.currency_id === defaultCurrencyId);
-                          if (index > -1) {
-                            // @ts-ignore
-                            handleCurrencyChange(index, currencyId);
-                          }
-                          setValue(getFieldName('currency'), findCurrency(settings.paymentMethods, currencyId), {
-                            shouldValidate: true,
-                          });
-                          setValue(getFieldName('currency_id'), currencyId, { shouldValidate: true });
-                        }}
-                        value={defaultCurrencyId}
-                        disabled={isLocked}
-                        selectSX={{ '.MuiOutlinedInput-notchedOutline': { border: 'none' } }}
-                      />
-                    </InputAdornment>
-                  ),
-                }}
                 onChange={(e) => {
                   const { value } = e.target;
                   field.onChange(value);
@@ -252,6 +229,35 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                   }
                   setValue(getFieldName(`currency_options.${index}.unit_amount`), value, { shouldValidate: true });
                 }}
+                slotProps={{
+                  input: {
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <CurrencySelect
+                          mode="selected"
+                          hasSelected={(currency) =>
+                            currencies.fields.some((x: any) => x.currency_id === currency.id) ||
+                            currency.id === defaultCurrencyId
+                          }
+                          onSelect={(currencyId) => {
+                            const index = currencies.fields.findIndex((x: any) => x.currency_id === defaultCurrencyId);
+                            if (index > -1) {
+                              // @ts-ignore
+                              handleCurrencyChange(index, currencyId);
+                            }
+                            setValue(getFieldName('currency'), findCurrency(settings.paymentMethods, currencyId), {
+                              shouldValidate: true,
+                            });
+                            setValue(getFieldName('currency_id'), currencyId, { shouldValidate: true });
+                          }}
+                          value={defaultCurrencyId}
+                          disabled={isLocked}
+                          selectSX={{ '.MuiOutlinedInput-notchedOutline': { border: 'none' } }}
+                        />
+                      </InputAdornment>
+                    ),
+                  },
+                }}
               />
             </Box>
           )}
@@ -262,16 +268,21 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
             control={control}
             disabled={isLocked}
             render={({ field }) => (
-              <Box ml={2}>
+              <Box
+                sx={{
+                  ml: 2,
+                }}>
                 <FormLabel>&nbsp;</FormLabel>
                 <TextField
                   {...field}
                   type="number"
                   size="small"
                   sx={{ width: INPUT_WIDTH }}
-                  InputProps={{
-                    startAdornment: <InputAdornment position="start">{t('common.per')}</InputAdornment>,
-                    endAdornment: <InputAdornment position="end">{t('common.unit')}</InputAdornment>,
+                  slotProps={{
+                    input: {
+                      startAdornment: <InputAdornment position="start">{t('common.per')}</InputAdornment>,
+                      endAdornment: <InputAdornment position="end">{t('common.unit')}</InputAdornment>,
+                    },
                   }}
                 />
               </Box>
@@ -288,7 +299,13 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
             const fieldName = getFieldName(`currency_options.${index}.unit_amount`);
             const currency = findCurrency(settings.paymentMethods, item.currency_id);
             return (
-              <Stack key={item.currency_id} direction="row" alignItems="start" spacing={1}>
+              <Stack
+                key={item.currency_id}
+                direction="row"
+                spacing={1}
+                sx={{
+                  alignItems: 'start',
+                }}>
                 <Controller
                   name={fieldName}
                   control={control}
@@ -312,30 +329,32 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                         sx={{ width: INPUT_WIDTH }}
                         error={!!getFieldError(fieldName)}
                         helperText={getFieldError(fieldName)?.message as string}
-                        InputProps={{
-                          endAdornment: (
-                            <InputAdornment position="end">
-                              <CurrencySelect
-                                mode="selected"
-                                hasSelected={(c) =>
-                                  currencies.fields.some((x: any) => x.currency_id === c.id) ||
-                                  c.id === defaultCurrencyId
-                                }
-                                onSelect={(currencyId) => {
-                                  const cIndex = currencies.fields.findIndex(
-                                    (x: any) => x.currency_id === currency?.id
-                                  );
-                                  if (cIndex > -1) {
-                                    // @ts-ignore
-                                    handleCurrencyChange(cIndex, currencyId);
+                        slotProps={{
+                          input: {
+                            endAdornment: (
+                              <InputAdornment position="end">
+                                <CurrencySelect
+                                  mode="selected"
+                                  hasSelected={(c) =>
+                                    currencies.fields.some((x: any) => x.currency_id === c.id) ||
+                                    c.id === defaultCurrencyId
                                   }
-                                }}
-                                value={currency?.id!}
-                                disabled={isLocked}
-                                selectSX={{ '.MuiOutlinedInput-notchedOutline': { border: 'none' } }}
-                              />
-                            </InputAdornment>
-                          ),
+                                  onSelect={(currencyId) => {
+                                    const cIndex = currencies.fields.findIndex(
+                                      (x: any) => x.currency_id === currency?.id
+                                    );
+                                    if (cIndex > -1) {
+                                      // @ts-ignore
+                                      handleCurrencyChange(cIndex, currencyId);
+                                    }
+                                  }}
+                                  value={currency?.id!}
+                                  disabled={isLocked}
+                                  selectSX={{ '.MuiOutlinedInput-notchedOutline': { border: 'none' } }}
+                                />
+                              </InputAdornment>
+                            ),
+                          },
                         }}
                       />
                     );
@@ -447,7 +466,10 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                 },
               }}
               render={({ field }) => (
-                <Box ml={2}>
+                <Box
+                  sx={{
+                    ml: 2,
+                  }}>
                   <FormLabel>&nbsp;</FormLabel>
                   <TextField
                     {...field}
@@ -456,21 +478,23 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                     sx={{ width: INPUT_WIDTH }}
                     error={!!get(errors, getFieldName('recurring.interval_count'))}
                     helperText={get(errors, getFieldName('recurring.interval_count'))?.message as string}
-                    InputProps={{
-                      startAdornment: <InputAdornment position="start">{t('common.every')}</InputAdornment>,
-                      endAdornment: (
-                        <InputAdornment position="end">
-                          <select
-                            onChange={(e) => setValue(getFieldName('recurring.interval'), e.target.value)}
-                            value={intervalSelectValue}
-                            style={{ background: 'none', outline: 'none' }}>
-                            <option value="day">{t('common.days')}</option>
-                            <option value="week">{t('common.weeks')}</option>
-                            <option value="month">{t('common.months')}</option>
-                            <option value="year">{t('common.years')}</option>
-                          </select>
-                        </InputAdornment>
-                      ),
+                    slotProps={{
+                      input: {
+                        startAdornment: <InputAdornment position="start">{t('common.every')}</InputAdornment>,
+                        endAdornment: (
+                          <InputAdornment position="end">
+                            <select
+                              onChange={(e) => setValue(getFieldName('recurring.interval'), e.target.value)}
+                              value={intervalSelectValue}
+                              style={{ background: 'none', outline: 'none' }}>
+                              <option value="day">{t('common.days')}</option>
+                              <option value="week">{t('common.weeks')}</option>
+                              <option value="month">{t('common.months')}</option>
+                              <option value="year">{t('common.years')}</option>
+                            </select>
+                          </InputAdornment>
+                        ),
+                      },
                     }}
                   />
                 </Box>
@@ -496,8 +520,17 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
               }
               label={
                 <Stack>
-                  <Typography color="text.primary">{t('admin.price.recurring.metered')}</Typography>
-                  <Typography color="text.secondary" sx={{ maxWidth: '80%' }}>
+                  <Typography
+                    sx={{
+                      color: 'text.primary',
+                    }}>
+                    {t('admin.price.recurring.metered')}
+                  </Typography>
+                  <Typography
+                    sx={{
+                      color: 'text.secondary',
+                      maxWidth: '80%',
+                    }}>
                     {t('admin.price.recurring.meteredTip')}
                   </Typography>
                 </Stack>
@@ -526,7 +559,11 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
       )}
       {!simple && (
         <Collapse trigger={t('admin.price.additional')} expanded={isLocked}>
-          <Stack spacing={2} alignItems="flex-start">
+          <Stack
+            spacing={2}
+            sx={{
+              alignItems: 'flex-start',
+            }}>
             <Controller
               name={getFieldName('quantity_available')}
               control={control}
@@ -577,7 +614,14 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
               render={({ field }) => (
                 <Box>
                   <FormLabel sx={{ color: 'text.primary' }}>{t('admin.price.nickname.label')}</FormLabel>
-                  <TextField {...field} size="small" sx={{ width: INPUT_WIDTH }} inputProps={{ maxLength: 64 }} />
+                  <TextField
+                    {...field}
+                    size="small"
+                    sx={{ width: INPUT_WIDTH }}
+                    slotProps={{
+                      htmlInput: { maxLength: 64 },
+                    }}
+                  />
                 </Box>
               )}
             />
@@ -593,7 +637,14 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
               render={({ field }) => (
                 <Box>
                   <FormLabel sx={{ color: 'text.primary' }}>{t('admin.price.lookup_key.label')}</FormLabel>
-                  <TextField {...field} size="small" sx={{ width: INPUT_WIDTH }} inputProps={{ maxLength: 64 }} />
+                  <TextField
+                    {...field}
+                    size="small"
+                    sx={{ width: INPUT_WIDTH }}
+                    slotProps={{
+                      htmlInput: { maxLength: 64 },
+                    }}
+                  />
                 </Box>
               )}
             />

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>;
+}) {
   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/create.tsx

@@ -11,7 +11,7 @@ import PriceForm, { DEFAULT_PRICE } from '../price/form';
 import ProductForm, { Product } from './form';
 
 export default function CreateProduct({
-  simple,
+  simple = true,
   onSave,
   onCancel,
 }: {
@@ -100,7 +100,3 @@ export default function CreateProduct({
     </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/features.tsx

@@ -15,16 +15,23 @@ 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={{
+            mt: 2,
+            width: 1,
+          }}>
           <Controller
             render={({ field }) => (
               <TextField
                 {...field}
                 sx={{ width: '80%' }}
                 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 }) } }}
@@ -36,7 +43,10 @@ export default function MetadataForm() {
           </IconButton>
         </Box>
       ))}
-      <Box mt={features.fields.length ? 2 : 1}>
+      <Box
+        sx={{
+          mt: features.fields.length ? 2 : 1,
+        }}>
         <Button size="small" variant="outlined" color="inherit" onClick={() => features.append({ name: '' })}>
           <AddOutlined fontSize="small" /> {t('admin.product.features.add')}
         </Button>