payment-kit 1.20.11 → 1.20.13

package/src/components/invoice-pdf/template.tsx

@@ -1,4 +1,4 @@
-import { formatNumber, formatTime } from '@blocklet/payment-react';
+import { formatNumber, formatTime, formatAmount } from '@blocklet/payment-react';
 import { useEffect } from 'react';
 import type { InvoicePDFProps } from './types';
 import { composeStyles } from './utils';
@@ -6,7 +6,7 @@ import { getInvoiceRows } from '../invoice/table';
 import { applyStyles } from './styles';
 
 export function InvoiceTemplate({ data, t }: InvoicePDFProps) {
-  const { detail, summary } = getInvoiceRows(data);
+  const { detail, summary } = getInvoiceRows(data, t);
 
   useEffect(() => {
     applyStyles();
@@ -70,48 +70,72 @@ export function InvoiceTemplate({ data, t }: InvoicePDFProps) {
 
       {/* Table Header */}
       <div style={composeStyles('mt-40 row flex')}>
-        <div style={composeStyles('w-48 p-4-8')}>
+        <div style={composeStyles('w-38 p-4-8')}>
           <span style={composeStyles('bold')}>{t('admin.subscription.product')}</span>
         </div>
-        <div style={composeStyles('w-17 p-4-8')}>
+        <div style={composeStyles('w-15 p-4-8')}>
           <span style={composeStyles('bold right')}>{t('common.quantity')}</span>
         </div>
-        <div style={composeStyles('w-17 p-4-8')}>
+        <div style={composeStyles('w-15 p-4-8')}>
           <span style={composeStyles('bold right')}>{t('payment.customer.invoice.unitPrice')}</span>
         </div>
-        <div style={composeStyles('w-18 p-4-8')}>
+        <div style={composeStyles('w-15 p-4-8')}>
+          <span style={composeStyles('bold right')}>{t('common.discount')}</span>
+        </div>
+        <div style={composeStyles('w-17 p-4-8')}>
           <span style={composeStyles('bold right')}>{t('common.amount')}</span>
         </div>
       </div>
 
       {/* Table Content */}
-      {detail.map((line) => (
-        <div key={line.id} style={composeStyles('row flex')}>
-          <div style={composeStyles('w-48 p-4-8 pb-15')}>
-            <span style={composeStyles('dark')}>
-              {line.product}
-              {line.credits && (
-                <span style={composeStyles('block gray fs-10 mt-5')}>
-                  {formatNumber(line.credits.total)} {line.credits.currency}
-                </span>
-              )}
-            </span>
-          </div>
-          <div style={composeStyles('w-17 p-4-8 pb-15')}>
-            <span style={composeStyles('dark right')}>{line.quantity}</span>
-          </div>
-          <div style={composeStyles('w-17 p-4-8 pb-15')}>
-            <span style={composeStyles('dark right')}>
-              {line.price ? `${line.price} ${data.paymentCurrency.symbol}` : ''}
-            </span>
-          </div>
-          <div style={composeStyles('w-18 p-4-8 pb-15')}>
-            <span style={composeStyles('dark right')}>
-              {line.amount} {data.paymentCurrency.symbol}
-            </span>
+      {detail.map((line) => {
+        // Calculate discount amount for this line item
+        let itemDiscountAmount = 0;
+        if (line.raw.discount_amounts && line.raw.discount_amounts.length > 0) {
+          line.raw.discount_amounts.forEach((discount: any) => {
+            if (discount.amount) {
+              itemDiscountAmount += Number(discount.amount);
+            }
+          });
+        }
+
+        return (
+          <div key={line.id} style={composeStyles('row flex')}>
+            <div style={composeStyles('w-38 p-4-8 pb-15')}>
+              <span style={composeStyles('dark')}>
+                {line.product}
+                {line.credits && (
+                  <span style={composeStyles('block gray fs-10 mt-5')}>
+                    {formatNumber(line.credits.total)} {line.credits.currency}
+                  </span>
+                )}
+              </span>
+            </div>
+            <div style={composeStyles('w-15 p-4-8 pb-15')}>
+              <span style={composeStyles('dark right')}>{line.quantity}</span>
+            </div>
+            <div style={composeStyles('w-15 p-4-8 pb-15')}>
+              <span style={composeStyles('dark right')}>
+                {line.price ? `${line.price} ${data.paymentCurrency.symbol}` : ''}
+              </span>
+            </div>
+            <div style={composeStyles('w-15 p-4-8 pb-15')}>
+              <span style={composeStyles(`${itemDiscountAmount > 0 ? 'green' : 'dark'} right`)}>
+                {itemDiscountAmount > 0
+                  ? `-${formatAmount(itemDiscountAmount.toString(), data.paymentCurrency.decimal)} ${
+                      data.paymentCurrency.symbol
+                    }`
+                  : '-'}
+              </span>
+            </div>
+            <div style={composeStyles('w-17 p-4-8 pb-15')}>
+              <span style={composeStyles('dark right')}>
+                {line.amount} {data.paymentCurrency.symbol}
+              </span>
+            </div>
           </div>
-        </div>
-      ))}
+        );
+      })}
 
       {/* Summary */}
       <div style={composeStyles('flex')}>
@@ -120,7 +144,9 @@ export function InvoiceTemplate({ data, t }: InvoicePDFProps) {
           {summary.map((line) => (
             <div style={composeStyles('flex')} key={line.key}>
               <div style={composeStyles('w-60 p-5')}>
-                <span style={composeStyles('bold')}>{t(line.key)}</span>
+                <span style={composeStyles('bold')}>
+                  {line.key.startsWith('common.') || line.key.startsWith('payment.') ? t(line.key) : line.key}
+                </span>
               </div>
               <div style={composeStyles('w-40 p-5')}>
                 <span style={composeStyles('right bold dark')}>

package/src/components/metadata/form.tsx

@@ -205,7 +205,15 @@ export default function MetadataForm({
                     size="small"
                     name={`metadata.${index}.key`}
                     rules={{
-                      required: t('payment.checkout.required'),
+                      required: {
+                        value: true,
+                        message: t('payment.checkout.required'),
+                      },
+                      validate: (value: any) => {
+                        if (value === false || value === 'false') return true;
+                        if (!value && value !== 0) return t('payment.checkout.required');
+                        return true;
+                      },
                       maxLength: {
                         value: 64,
                         message: t('common.maxLength', { len: 40 }),
@@ -224,10 +232,11 @@ export default function MetadataForm({
                     label="Value *"
                     placeholder="Value"
                     rules={{
-                      required: t('payment.checkout.required'),
-                      maxLength: {
-                        value: 256,
-                        message: t('common.maxLength', { len: 256 }),
+                      validate: (value: any) => {
+                        if (value === false || value === 'false') return true;
+                        if (!value && value !== 0) return t('payment.checkout.required');
+                        if (typeof value === 'string' && value.length > 256) return t('common.maxLength', { len: 256 });
+                        return true;
                       },
                     }}
                     // @ts-ignore

package/src/components/payment-link/actions.tsx

@@ -64,6 +64,24 @@ export default function PaymentLinkActions({ data, variant = 'compact', onChange
       setState({ loading: false, action: '' });
     }
   };
+
+  const onTogglePromotionCodes = async () => {
+    try {
+      setState({ loading: true });
+      await api
+        .put(`/api/payment-links/${data.id}`, {
+          allow_promotion_codes: !data.allow_promotion_codes,
+        })
+        .then((res) => res.data);
+      Toast.success(t('common.saved'));
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
   const onCopyLink = () => {
     Copy(joinURL(window.blocklet.appUrl, window.blocklet.prefix, `/checkout/pay/${data.id}`));
     Toast.success(t('common.copied'));
@@ -102,6 +120,13 @@ export default function PaymentLinkActions({ data, variant = 'compact', onChange
             color: 'error',
             divider: true,
           },
+          {
+            label: data.allow_promotion_codes
+              ? t('admin.paymentLink.disablePromotionCodes')
+              : t('admin.paymentLink.enablePromotionCodes'),
+            handler: () => setState({ action: 'togglePromotionCodes' }),
+            color: 'primary',
+          },
           {
             label: t('admin.passport.assign'),
             handler: () => setState({ action: 'assign' }),
@@ -137,6 +162,23 @@ export default function PaymentLinkActions({ data, variant = 'compact', onChange
           loading={state.loading}
         />
       )}
+      {state.action === 'togglePromotionCodes' && (
+        <ConfirmDialog
+          onConfirm={onTogglePromotionCodes}
+          onCancel={() => setState({ action: '' })}
+          title={
+            data.allow_promotion_codes
+              ? t('admin.paymentLink.disablePromotionCodes')
+              : t('admin.paymentLink.enablePromotionCodes')
+          }
+          message={
+            data.allow_promotion_codes
+              ? t('admin.paymentLink.disablePromotionCodesTip')
+              : t('admin.paymentLink.enablePromotionCodesTip')
+          }
+          loading={state.loading}
+        />
+      )}
     </ClickBoundary>
   );
 }

package/src/components/price/form.tsx

@@ -352,14 +352,16 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                   !meteringMeterId ? t('admin.price.creditMetered.required') : t('admin.price.creditMetered.help')
                 }
                 size="small"
-                InputProps={{
-                  ...params.InputProps,
-                  endAdornment: (
-                    <>
-                      {loadingMeters ? <div>{t('common.loading')}</div> : null}
-                      {params.InputProps.endAdornment}
-                    </>
-                  ),
+                slotProps={{
+                  input: {
+                    ...params.InputProps,
+                    endAdornment: (
+                      <>
+                        {loadingMeters ? <div>{t('common.loading')}</div> : null}
+                        {params.InputProps.endAdornment}
+                      </>
+                    ),
+                  },
                 }}
               />
             )}
@@ -398,35 +400,37 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                     fullWidth
                     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
-                            }
-                            currencyFilter={(c) => c.type !== 'credit'}
-                            onSelect={(currencyId) => {
-                              const index = currencies.fields.findIndex(
-                                (x: any) => x.currency_id === defaultCurrencyId
-                              );
-                              if (index > -1) {
-                                // @ts-ignore
-                                handleCurrencyChange(index, currencyId);
+                    slotProps={{
+                      input: {
+                        endAdornment: (
+                          <InputAdornment position="end">
+                            <CurrencySelect
+                              mode="selected"
+                              hasSelected={(currency) =>
+                                currencies.fields.some((x: any) => x.currency_id === currency.id) ||
+                                currency.id === defaultCurrencyId
                               }
-                              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>
-                      ),
+                              currencyFilter={(c) => c.type !== 'credit'}
+                              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;
@@ -480,31 +484,33 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                                 sx={{ minWidth: '300px' }}
                                 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
-                                        }
-                                        currencyFilter={(c) => c.type !== 'credit'}
-                                        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>
-                                  ),
+                                          currencyFilter={(c) => c.type !== 'credit'}
+                                          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>
+                                    ),
+                                  },
                                 }}
                               />
                             )}
@@ -569,9 +575,11 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                     type="number"
                     size="small"
                     fullWidth
-                    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>,
+                      },
                     }}
                   />
                 )}
@@ -1117,7 +1125,16 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                 render={({ field }) => (
                   <Box sx={{ width: '100%', mb: 2 }}>
                     <FormLabel>{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>
                 )}
               />
@@ -1133,7 +1150,16 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                 render={({ field }) => (
                   <Box sx={{ width: '100%', mb: 2 }}>
                     <FormLabel>{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,
+                        },
+                      }}
+                    />
                     <Typography
                       variant="caption"
                       sx={{

package/src/components/product/vendor-config.tsx

@@ -89,7 +89,6 @@ export default function VendorConfig() {
           {error}
         </Alert>
       )}
-
       <Stack
         sx={{
           maxHeight: 400,
@@ -132,7 +131,11 @@ export default function VendorConfig() {
                           noneSelectedVendors.map((vendor) => (
                             <MenuItem key={vendor.id} value={vendor.id} sx={{ gap: 1 }}>
                               <Typography variant="h5">{vendor.name}</Typography>
-                              <Typography variant="body2" color="text.secondary">
+                              <Typography
+                                variant="body2"
+                                sx={{
+                                  color: 'text.secondary',
+                                }}>
                                 {vendor.vendor_key}
                               </Typography>
                             </MenuItem>
@@ -213,7 +216,6 @@ export default function VendorConfig() {
               })}
         </Alert>
       )}
-
       <Divider />
       <Stack
         direction="row"