payment-kit 1.24.4 → 1.25.1

package/src/components/price/form.tsx

@@ -9,6 +9,7 @@ import {
   isCreditMetered,
   formatPrice,
   Collapse,
+  formatNumber,
 } from '@blocklet/payment-react';
 import type {
   InferFormType,
@@ -24,7 +25,9 @@ import { DeleteOutlineOutlined } from '@mui/icons-material';
 import {
   Alert,
   Box,
+  Button,
   Checkbox,
+  Collapse as MuiCollapse,
   FormControlLabel,
   IconButton,
   InputAdornment,
@@ -42,10 +45,10 @@ import {
 import { styled } from '@mui/system';
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import type { LiteralUnion } from 'type-fest';
-import { useMemo, useState } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 
 import { get } from 'lodash';
-import { useRequest } from 'ahooks';
+import { useRequest, useSetState } from 'ahooks';
 import ProductSelect from '../payment-link/product-select';
 import { useProductsContext } from '../../contexts/products';
 import CurrencySelect from './currency-select';
@@ -57,6 +60,9 @@ export type Price = Omit<InferFormType<TPriceExpanded>, 'product_id' | 'object'>
   recurring: Omit<PriceRecurring, 'usage_type'> & {
     interval_config: string;
   };
+  pricing_type?: 'fixed' | 'dynamic';
+  base_currency?: string;
+  base_amount?: string;
 };
 
 export const DEFAULT_PRICE: Omit<Price, 'product' | 'currency' | 'quantity_sold'> = {
@@ -86,6 +92,10 @@ export const DEFAULT_PRICE: Omit<Price, 'product' | 'currency' | 'quantity_sold'
   tiers_mode: null,
   quantity_available: 0,
   quantity_limit_per_checkout: 0,
+  pricing_type: 'fixed',
+  base_currency: 'USD',
+  base_amount: '0',
+  dynamic_pricing_config: null,
 };
 
 type PriceFormProps = {
@@ -130,6 +140,10 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
   const model = useWatch({ control, name: getFieldName('model') });
   const intervalSelectValue = useWatch({ control, name: getFieldName('recurring.interval') });
   const defaultCurrencyId = useWatch({ control, name: getFieldName('currency_id') });
+  const pricingType = useWatch({ control, name: getFieldName('pricing_type') });
+  const baseAmount = useWatch({ control, name: getFieldName('base_amount') });
+  const unitAmount = useWatch({ control, name: getFieldName('unit_amount') });
+  const currencyOptions = useWatch({ control, name: getFieldName('currency_options') });
   const creditCurrencies = useMemo(() => {
     return settings.paymentMethods.flatMap((method: TPaymentMethodExpanded) =>
       method.payment_currencies.filter((c: TPaymentCurrency) => c.type === 'credit')
@@ -142,6 +156,84 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
   const meteringMeterId = useWatch({ control, name: getFieldName('recurring.meter_id') });
   const [meters, setMeters] = useState<TMeterExpanded[]>([]);
 
+  // Exchange rate validation state for each currency option
+  const [currencyRateValidation, setCurrencyRateValidation] = useSetState<
+    Record<
+      string,
+      {
+        validating: boolean;
+        valid: boolean;
+        error: string | null;
+        rate?: string;
+      }
+    >
+  >({});
+  const [suggestedApplied, setSuggestedApplied] = useSetState<Record<string, boolean>>({});
+  // Track which amount input is focused (by currency ID)
+  const [amountInputFocused, setAmountInputFocused] = useSetState<Record<string, boolean>>({});
+
+  const shouldShowRateInfo = pricingType === 'dynamic';
+
+  // Validate exchange rate for a specific currency
+  const validateCurrencyRate = async (currencyId: string) => {
+    if (!shouldShowRateInfo) {
+      return;
+    }
+
+    const currency = findCurrency(settings.paymentMethods, currencyId);
+    if (!currency) {
+      return;
+    }
+
+    if (currency.type === 'credit' || currency.paymentMethod?.type === 'stripe') {
+      setCurrencyRateValidation({
+        [currencyId]: {
+          validating: false,
+          valid: false,
+          error: null,
+        },
+      });
+      return;
+    }
+
+    setCurrencyRateValidation({
+      [currencyId]: {
+        validating: true,
+        valid: false,
+        error: null,
+      },
+    });
+
+    try {
+      const res: any = await api.post('/api/exchange-rates/validate', { currency: currency.id });
+      setCurrencyRateValidation({
+        [currencyId]: {
+          validating: false,
+          valid: res.data.supported,
+          error: null,
+          rate: res.data.rate,
+        },
+      });
+    } catch (err: any) {
+      setCurrencyRateValidation({
+        [currencyId]: {
+          validating: false,
+          valid: false,
+          error: t('admin.price.dynamicPricing.validation.error'),
+        },
+      });
+    }
+  };
+
+  // Note: Exchange rate validation is now triggered only when amount input is focused
+  // to avoid showing rate info automatically when editing a price
+
+  useEffect(() => {
+    if (model === 'package' && pricingType === 'dynamic') {
+      setValue(getFieldName('pricing_type'), 'fixed', { shouldValidate: true });
+    }
+  }, [model, pricingType, setValue]);
+
   const { loading: loadingMeters } = useRequest(
     () => {
       if (model === 'credit_metered') {
@@ -174,6 +266,32 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
     return true;
   };
 
+  const buildSuggestedAmount = (rate?: string) => {
+    if (!baseAmount || !rate) return null;
+    const base = Number(baseAmount);
+    const rateValue = Number(rate);
+    if (!Number.isFinite(base) || !Number.isFinite(rateValue) || base <= 0 || rateValue <= 0) {
+      return null;
+    }
+    const rawAmount = base / rateValue;
+    if (rawAmount < 0.01) {
+      return rawAmount.toFixed(6).replace(/\.?0+$/, '');
+    }
+    return formatNumber(rawAmount, 2);
+  };
+
+  const applySuggestedAmount = (currencyId: string | undefined, amount: string) => {
+    if (isLocked || !currencyId) return;
+    if (currencyId === defaultCurrencyId) {
+      setValue(getFieldName('unit_amount'), amount, { shouldValidate: true });
+    }
+    const index = currencies.fields.findIndex((x: any) => x.currency_id === currencyId);
+    if (index > -1) {
+      setValue(getFieldName(`currency_options.${index}.unit_amount`), amount, { shouldValidate: true });
+    }
+    setSuggestedApplied({ [currencyId]: true });
+  };
+
   const handleRemoveCurrency = async (index: number) => {
     await currencies.remove(index);
     trigger(getFieldName('recurring.interval_config'));
@@ -197,6 +315,8 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
   const selectedMeter = meters.find((m) => m.id === meteringMeterId);
   const isCreditBilling = model === 'credit_metered';
   const isCreditMode = currentProductType === 'credit';
+  const defaultCurrencySymbol = findCurrency(settings.paymentMethods, defaultCurrencyId)?.symbol || '';
+  const defaultSuggestedAmount = buildSuggestedAmount(currencyRateValidation[defaultCurrencyId]?.rate);
 
   return (
     <Root direction="column" alignItems="flex-start" spacing={2}>
@@ -368,21 +488,122 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
           />
         </Box>
       )}
+      {/* Dynamic Pricing Toggle */}
+      {!isCreditBilling && model === 'standard' && (
+        <Box sx={{ width: INPUT_WIDTH }}>
+          <Controller
+            name={getFieldName('pricing_type')}
+            control={control}
+            disabled={isLocked}
+            render={({ field }) => (
+              <FormControlLabel
+                sx={{ alignItems: 'flex-start' }}
+                control={
+                  <Checkbox
+                    checked={field.value === 'dynamic'}
+                    {...field}
+                    onChange={(_, checked: boolean) => {
+                      setValue(field.name, checked ? 'dynamic' : 'fixed');
+                    }}
+                  />
+                }
+                label={
+                  <Stack>
+                    <Typography
+                      sx={{
+                        color: 'text.primary',
+                      }}>
+                      {t('admin.price.dynamicPricing.label')}
+                    </Typography>
+                    <Typography
+                      sx={{
+                        color: 'text.secondary',
+                      }}>
+                      {t('admin.price.dynamicPricing.description')}
+                    </Typography>
+                  </Stack>
+                }
+              />
+            )}
+          />
+        </Box>
+      )}
+      {/* Dynamic Pricing Configuration - Base Amount */}
+      {pricingType === 'dynamic' && !isCreditBilling && (
+        <Box sx={{ width: INPUT_WIDTH }}>
+          <FormLabel required>{t('admin.price.dynamicPricing.config.baseAmount.label')}</FormLabel>
+          <Controller
+            name={getFieldName('base_amount')}
+            control={control}
+            disabled={isLocked}
+            rules={{
+              required: t('admin.price.dynamicPricing.config.baseAmount.required'),
+              validate: (v) => {
+                if (Number(v) <= 0) {
+                  return t('admin.price.unit_amount.positive');
+                }
+                return true;
+              },
+            }}
+            render={({ field }) => (
+              <TextField
+                {...field}
+                type="number"
+                size="small"
+                fullWidth
+                error={!!getFieldError(getFieldName('base_amount'))}
+                helperText={getFieldError(getFieldName('base_amount'))?.message}
+                slotProps={{
+                  input: {
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <Controller
+                          name={getFieldName('base_currency')}
+                          control={control}
+                          disabled={isLocked}
+                          rules={{ required: true }}
+                          render={({ field: currencyField }) => (
+                            <Select
+                              {...currencyField}
+                              size="small"
+                              sx={{ '.MuiOutlinedInput-notchedOutline': { border: 'none' } }}>
+                              <MenuItem value="USD">USD</MenuItem>
+                            </Select>
+                          )}
+                        />
+                      </InputAdornment>
+                    ),
+                  },
+                  htmlInput: {
+                    min: 0,
+                    step: 0.01,
+                  },
+                }}
+              />
+            )}
+          />
+          <Typography
+            variant="caption"
+            sx={{
+              color: 'text.secondary',
+              display: 'block',
+              mt: 0.5,
+            }}>
+            {t('admin.price.dynamicPricing.config.baseAmount.description')}
+          </Typography>
+        </Box>
+      )}
       {!isCreditBilling && (
-        <Stack
-          direction={{ xs: 'column', sm: 'row' }}
-          spacing={2}
-          sx={{
-            width: INPUT_WIDTH,
-            '&': {
-              flexWrap: { xs: 'nowrap', sm: 'wrap' },
-            },
-          }}>
-          <Stack spacing={2} sx={{ flex: 1, minWidth: { xs: 'auto', sm: '300px' }, '>div': { width: '100%' } }}>
-            <Box sx={{ width: '100%' }}>
-              <FormLabel tooltip={t('admin.price.amountTip')} description={t('admin.price.amountDescription')}>
-                {t('admin.price.amount')}
-              </FormLabel>
+        <Stack spacing={2} sx={{ width: INPUT_WIDTH }}>
+          <FormLabel tooltip={t('admin.price.amountTip')} description={t('admin.price.amountDescription')}>
+            {t('admin.price.amount')}
+          </FormLabel>
+          <Stack
+            direction={{ xs: 'column', sm: 'row' }}
+            spacing={2}
+            alignItems="flex-start"
+            sx={{ width: INPUT_WIDTH, '&': { flexWrap: { xs: 'nowrap', sm: 'wrap' } } }}>
+            <Box sx={{ flex: 1, minWidth: { xs: 'auto', sm: '300px' } }}>
               <Controller
                 name={getFieldName('unit_amount')}
                 control={control}
@@ -425,6 +646,10 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                                   shouldValidate: true,
                                 });
                                 setValue(getFieldName('currency_id'), currencyId, { shouldValidate: true });
+
+                                if (shouldShowRateInfo) {
+                                  validateCurrencyRate(currencyId);
+                                }
                               }}
                               value={defaultCurrencyId}
                               disabled={isLocked}
@@ -434,9 +659,25 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                         ),
                       },
                     }}
+                    onFocus={() => {
+                      if (defaultCurrencyId) {
+                        setAmountInputFocused({ [defaultCurrencyId]: true });
+                        if (shouldShowRateInfo) {
+                          validateCurrencyRate(defaultCurrencyId);
+                        }
+                      }
+                    }}
+                    onBlur={() => {
+                      if (defaultCurrencyId) {
+                        setAmountInputFocused({ [defaultCurrencyId]: false });
+                      }
+                    }}
                     onChange={(e) => {
                       const { value } = e.target;
                       field.onChange(value);
+                      if (defaultCurrencyId) {
+                        setSuggestedApplied({ [defaultCurrencyId]: false });
+                      }
                       const index = currencies.fields.findIndex((x: any) => x.currency_id === defaultCurrencyId);
                       if (index === -1) {
                         return;
@@ -448,146 +689,275 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                   />
                 )}
               />
-            </Box>
-            {hasMoreCurrency(settings.paymentMethods) &&
-              currencies.fields.filter((x: any) => x.currency_id !== defaultCurrencyId).length > 0 && (
-                <Stack spacing={1.5} sx={{ width: INPUT_WIDTH }}>
-                  {currencies.fields.map((item: any, index: number) => {
-                    if (item.currency_id === defaultCurrencyId) {
-                      return null;
-                    }
-                    const fieldName = getFieldName(`currency_options.${index}.unit_amount`);
-                    const currency = findCurrency(settings.paymentMethods, item.currency_id);
-                    return (
-                      <Stack
-                        key={item.currency_id}
-                        direction="row"
-                        spacing={1}
-                        sx={{
-                          alignItems: 'start',
-                        }}>
-                        <Box sx={{ flex: 1 }}>
-                          <Controller
-                            name={fieldName}
-                            control={control}
-                            rules={{
-                              required: t('admin.price.unit_amount.required'),
-                              validate: (v) => {
-                                return validateAmount(v, currency ?? {});
-                              },
-                            }}
-                            disabled={isLocked}
-                            render={({ field }) => (
-                              <TextField
-                                {...field}
-                                type="number"
-                                size="small"
-                                fullWidth
-                                sx={{ minWidth: '300px' }}
-                                error={!!getFieldError(fieldName)}
-                                helperText={getFieldError(fieldName)?.message as string}
-                                slotProps={{
-                                  input: {
-                                    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);
+              {shouldShowRateInfo && !isLocked && currencyRateValidation[defaultCurrencyId] && (
+                <MuiCollapse in={amountInputFocused[defaultCurrencyId]} timeout={200}>
+                  {currencyRateValidation[defaultCurrencyId].validating && (
+                    <Alert severity="info" sx={{ mt: 1 }}>
+                      {t('admin.price.dynamicPricing.validation.checking')}
+                    </Alert>
+                  )}
+                  {!currencyRateValidation[defaultCurrencyId].validating &&
+                    currencyRateValidation[defaultCurrencyId].valid && (
+                      <Alert severity="success" sx={{ mt: 1 }}>
+                        <Stack spacing={0.5}>
+                          <Typography variant="body2">
+                            {t('admin.price.dynamicPricing.validation.rateLine', {
+                              currency: defaultCurrencySymbol,
+                              rate: formatNumber(currencyRateValidation[defaultCurrencyId].rate || '0', 2),
+                            })}
+                          </Typography>
+                          {Number(unitAmount) > 0 && currencyRateValidation[defaultCurrencyId]?.rate && (
+                            <Typography variant="body2" color="text.secondary">
+                              {t('admin.price.dynamicPricing.validation.usdLine', {
+                                amount: formatNumber(
+                                  Number(unitAmount) * Number(currencyRateValidation[defaultCurrencyId].rate),
+                                  2
+                                ),
+                              })}
+                            </Typography>
+                          )}
+                          {Number(unitAmount) <= 0 &&
+                            defaultSuggestedAmount &&
+                            !suggestedApplied[defaultCurrencyId] && (
+                              <Stack direction="row" spacing={1} alignItems="center">
+                                <Typography variant="body2" color="text.secondary">
+                                  {t('admin.price.dynamicPricing.validation.estimatedLine', {
+                                    amount: defaultSuggestedAmount,
+                                    currency: defaultCurrencySymbol,
+                                  })}
+                                </Typography>
+                                <Button
+                                  size="small"
+                                  variant="text"
+                                  sx={{ minWidth: 'auto', px: 0.5 }}
+                                  onMouseDown={(e) => e.preventDefault()}
+                                  onClick={() => applySuggestedAmount(defaultCurrencyId, defaultSuggestedAmount)}>
+                                  {t('admin.price.dynamicPricing.validation.useAmount')}
+                                </Button>
+                              </Stack>
+                            )}
+                        </Stack>
+                      </Alert>
+                    )}
+                  {!currencyRateValidation[defaultCurrencyId].validating &&
+                    currencyRateValidation[defaultCurrencyId].error && (
+                      <Alert severity="error" sx={{ mt: 1 }}>
+                        {currencyRateValidation[defaultCurrencyId].error}
+                      </Alert>
+                    )}
+                </MuiCollapse>
+              )}
+              {hasMoreCurrency(settings.paymentMethods) &&
+                currencies.fields.filter((x: any) => x.currency_id !== defaultCurrencyId).length > 0 && (
+                  <Stack spacing={1.5} sx={{ width: INPUT_WIDTH, mt: 1.5 }}>
+                    {currencies.fields.map((item: any, index: number) => {
+                      if (item.currency_id === defaultCurrencyId) {
+                        return null;
+                      }
+                      const fieldName = getFieldName(`currency_options.${index}.unit_amount`);
+                      const currency = findCurrency(settings.paymentMethods, item.currency_id);
+                      const suggestedAmount = buildSuggestedAmount(currencyRateValidation[item.currency_id]?.rate);
+                      return (
+                        <Stack
+                          key={item.currency_id}
+                          direction="row"
+                          spacing={1}
+                          sx={{
+                            alignItems: 'start',
+                          }}>
+                          <Box sx={{ flex: 1 }}>
+                            <Controller
+                              name={fieldName}
+                              control={control}
+                              rules={{
+                                required: t('admin.price.unit_amount.required'),
+                                validate: (v) => {
+                                  return validateAmount(v, currency ?? {});
+                                },
+                              }}
+                              disabled={isLocked}
+                              render={({ field }) => (
+                                <TextField
+                                  {...field}
+                                  type="number"
+                                  size="small"
+                                  fullWidth
+                                  sx={{ minWidth: '300px' }}
+                                  error={!!getFieldError(fieldName)}
+                                  helperText={getFieldError(fieldName)?.message as string}
+                                  onFocus={() => {
+                                    setAmountInputFocused({ [item.currency_id]: true });
+                                    if (shouldShowRateInfo) {
+                                      validateCurrencyRate(item.currency_id);
+                                    }
+                                  }}
+                                  onBlur={() => {
+                                    setAmountInputFocused({ [item.currency_id]: false });
+                                  }}
+                                  onChange={(e) => {
+                                    const { value } = e.target;
+                                    field.onChange(value);
+                                    setSuggestedApplied({ [item.currency_id]: false });
+                                  }}
+                                  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);
+                                              }
+
+                                              if (shouldShowRateInfo) {
+                                                validateCurrencyRate(currencyId);
+                                              }
+                                            }}
+                                            value={currency?.id!}
+                                            disabled={isLocked}
+                                            selectSX={{ '.MuiOutlinedInput-notchedOutline': { border: 'none' } }}
+                                          />
+                                        </InputAdornment>
+                                      ),
+                                    },
+                                  }}
+                                />
+                              )}
+                            />
+                            {shouldShowRateInfo && !isLocked && currencyRateValidation[item.currency_id] && (
+                              <MuiCollapse in={amountInputFocused[item.currency_id]} timeout={200}>
+                                {currencyRateValidation[item.currency_id]?.validating && (
+                                  <Alert severity="info" sx={{ mt: 0.5, fontSize: '0.75rem' }}>
+                                    {t('admin.price.dynamicPricing.validation.checking')}
+                                  </Alert>
+                                )}
+                                {!currencyRateValidation[item.currency_id]?.validating &&
+                                  currencyRateValidation[item.currency_id]?.valid && (
+                                    <Alert severity="success" sx={{ mt: 0.5, fontSize: '0.75rem' }}>
+                                      <Stack spacing={0.5}>
+                                        <Typography variant="body2">
+                                          {t('admin.price.dynamicPricing.validation.rateLine', {
+                                            currency: currency?.symbol || '',
+                                            rate: formatNumber(
+                                              currencyRateValidation[item.currency_id]?.rate || '0',
+                                              2
+                                            ),
+                                          })}
+                                        </Typography>
+                                        {Number(currencyOptions?.[index]?.unit_amount) > 0 &&
+                                          currencyRateValidation[item.currency_id]?.rate && (
+                                            <Typography variant="body2" color="text.secondary">
+                                              {t('admin.price.dynamicPricing.validation.usdLine', {
+                                                amount: formatNumber(
+                                                  Number(currencyOptions?.[index]?.unit_amount) *
+                                                    Number(currencyRateValidation[item.currency_id]?.rate),
+                                                  2
+                                                ),
+                                              })}
+                                            </Typography>
+                                          )}
+                                        {Number(currencyOptions?.[index]?.unit_amount) <= 0 &&
+                                          suggestedAmount &&
+                                          !suggestedApplied[item.currency_id] && (
+                                            <Stack direction="row" spacing={1} alignItems="center">
+                                              <Typography variant="body2" color="text.secondary">
+                                                {t('admin.price.dynamicPricing.validation.estimatedLine', {
+                                                  amount: suggestedAmount,
+                                                  currency: currency?.symbol || '',
+                                                })}
+                                              </Typography>
+                                              <Button
+                                                size="small"
+                                                variant="text"
+                                                sx={{ minWidth: 'auto', px: 0.5 }}
+                                                onMouseDown={(e) => e.preventDefault()}
+                                                onClick={() => applySuggestedAmount(item.currency_id, suggestedAmount)}>
+                                                {t('admin.price.dynamicPricing.validation.useAmount')}
+                                              </Button>
+                                            </Stack>
+                                          )}
+                                      </Stack>
+                                    </Alert>
+                                  )}
+                                {!currencyRateValidation[item.currency_id]?.validating &&
+                                  currencyRateValidation[item.currency_id]?.error && (
+                                    <Alert severity="error" sx={{ mt: 0.5, fontSize: '0.75rem' }}>
+                                      {currencyRateValidation[item.currency_id]?.error}
+                                    </Alert>
+                                  )}
+                              </MuiCollapse>
                             )}
-                          />
-                        </Box>
-                        {model === 'package' && <Box sx={{ flex: 1 }} />}
-                        {!isLocked && (
-                          <IconButton
-                            size="small"
-                            disabled={isLocked}
-                            onClick={() => handleRemoveCurrency(index)}
-                            sx={{ mt: 0.5, ml: -1 }}>
-                            <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
-                          </IconButton>
-                        )}
-                      </Stack>
-                    );
-                  })}
-                </Stack>
+                          </Box>
+                          {!isLocked && (
+                            <IconButton
+                              size="small"
+                              disabled={isLocked}
+                              onClick={() => handleRemoveCurrency(index)}
+                              sx={{ mt: 0.5, ml: -1 }}>
+                              <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
+                            </IconButton>
+                          )}
+                        </Stack>
+                      );
+                    })}
+                  </Stack>
+                )}
+              {!isLocked && hasMoreCurrency(settings.paymentMethods) && !isCreditBilling && (
+                <Box sx={{ width: INPUT_WIDTH, mt: 1.5 }}>
+                  <CurrencySelect
+                    mode="waiting"
+                    hasSelected={(currency) =>
+                      currencies.fields.some((x: any) => x.currency_id === currency.id) ||
+                      currency.id === defaultCurrencyId
+                    }
+                    currencyFilter={(c) => c.type !== 'credit'}
+                    onSelect={(currencyId) => {
+                      currencies.append({ currency_id: currencyId, unit_amount: 0 });
+
+                      if (shouldShowRateInfo) {
+                        validateCurrencyRate(currencyId);
+                      }
+                    }}
+                    value=""
+                    width="100%"
+                  />
+                </Box>
               )}
-            {/* 添加更多货币 */}
-            {!isLocked && hasMoreCurrency(settings.paymentMethods) && !isCreditBilling && (
-              <Box sx={{ width: INPUT_WIDTH }}>
-                <CurrencySelect
-                  mode="waiting"
-                  hasSelected={(currency) =>
-                    currencies.fields.some((x: any) => x.currency_id === currency.id) ||
-                    currency.id === defaultCurrencyId
-                  }
-                  currencyFilter={(c) => c.type !== 'credit'}
-                  onSelect={(currencyId) => {
-                    currencies.append({ currency_id: currencyId, unit_amount: 0 });
-                  }}
-                  value=""
-                  width="100%"
+            </Box>
+            {model === 'package' && (
+              <Box sx={{ flex: { xs: 'none', sm: 1 }, width: { xs: '100%', sm: 'auto' } }}>
+                <Controller
+                  name={getFieldName('transform_quantity.divide_by')}
+                  control={control}
+                  disabled={isLocked}
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      type="number"
+                      size="small"
+                      fullWidth
+                      slotProps={{
+                        input: {
+                          startAdornment: <InputAdornment position="start">{t('common.per')}</InputAdornment>,
+                          endAdornment: <InputAdornment position="end">{t('common.unit')}</InputAdornment>,
+                        },
+                      }}
+                    />
+                  )}
                 />
               </Box>
             )}
           </Stack>
-
-          {model === 'package' && (
-            <Box
-              sx={{
-                flex: { xs: 'none', sm: 1 },
-                width: { xs: '100%', sm: 'auto' },
-                mt: { xs: 0, sm: 0 },
-              }}>
-              <FormLabel
-                sx={{
-                  visibility: { xs: 'visible', sm: 'hidden' },
-                  display: 'block',
-                }}>
-                {t('admin.price.perUnit')}
-              </FormLabel>
-              <Controller
-                name={getFieldName('transform_quantity.divide_by')}
-                control={control}
-                disabled={isLocked}
-                render={({ field }) => (
-                  <TextField
-                    {...field}
-                    type="number"
-                    size="small"
-                    fullWidth
-                    slotProps={{
-                      input: {
-                        startAdornment: <InputAdornment position="start">{t('common.per')}</InputAdornment>,
-                        endAdornment: <InputAdornment position="end">{t('common.unit')}</InputAdornment>,
-                      },
-                    }}
-                  />
-                )}
-              />
-            </Box>
-          )}
         </Stack>
       )}
       {/* 周期性配置 */}