t0ng7u
b08febaa3c
Redesign the system settings interface to align with the rest of the console experience by using fixed header actions, removing redundant subtitles, respecting global content width, and standardizing responsive form layouts. Introduce reusable settings layout primitives for forms, switch rows, grouped controls, nested control sections, title status indicators, and page action portals. Replace duplicated card-style switch markup with explicit compact components, improve nested switch readability, and reduce visual noise across authentication, billing, content, integrations, maintenance, models, and request-limit settings. Also complete missing i18n translations, remove obsolete subtitle translation keys, refine i18n sync reporting, fix sidebar truncation for long labels, and verify the frontend with type checking and lint diagnostics.
378 lines
14 KiB
TypeScript
Vendored
378 lines
14 KiB
TypeScript
Vendored
/*
|
|
Copyright (C) 2023-2026 QuantumNous
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as
|
|
published by the Free Software Foundation, either version 3 of the
|
|
License, or (at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
For commercial licensing, please contact support@quantumnous.com
|
|
*/
|
|
import * as z from 'zod'
|
|
import type { Resolver } from 'react-hook-form'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { DEFAULT_CURRENCY_CONFIG } from '@/stores/system-config-store'
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormDescription,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from '@/components/ui/form'
|
|
import { Input } from '@/components/ui/input'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select'
|
|
import { Switch } from '@/components/ui/switch'
|
|
import { FormDirtyIndicator } from '../components/form-dirty-indicator'
|
|
import { FormNavigationGuard } from '../components/form-navigation-guard'
|
|
import {
|
|
SettingsForm,
|
|
SettingsSwitchContent,
|
|
SettingsSwitchItem,
|
|
} from '../components/settings-form-layout'
|
|
import { SettingsPageFormActions } from '../components/settings-page-context'
|
|
import { SettingsSection } from '../components/settings-section'
|
|
import { useSettingsForm } from '../hooks/use-settings-form'
|
|
import { useUpdateOption } from '../hooks/use-update-option'
|
|
|
|
const createPricingSchema = (t: (key: string) => string) =>
|
|
z
|
|
.object({
|
|
QuotaPerUnit: z.coerce.number().min(0, t('Value must be at least 0')),
|
|
USDExchangeRate: z.coerce
|
|
.number()
|
|
.min(0.0001, t('Exchange rate must be greater than 0')),
|
|
DisplayInCurrencyEnabled: z.boolean(),
|
|
DisplayTokenStatEnabled: z.boolean(),
|
|
general_setting: z.object({
|
|
quota_display_type: z.enum(['USD', 'CNY', 'TOKENS', 'CUSTOM']),
|
|
custom_currency_symbol: z.string().max(8).optional(),
|
|
custom_currency_exchange_rate: z.coerce
|
|
.number()
|
|
.min(0.0001, t('Exchange rate must be greater than 0'))
|
|
.optional(),
|
|
}),
|
|
})
|
|
.superRefine((data, ctx) => {
|
|
const displayType = data.general_setting.quota_display_type
|
|
|
|
if (displayType === 'CUSTOM') {
|
|
if (!data.general_setting.custom_currency_symbol?.trim()) {
|
|
ctx.addIssue({
|
|
code: z.ZodIssueCode.custom,
|
|
path: ['general_setting', 'custom_currency_symbol'],
|
|
message: t('Custom currency symbol is required'),
|
|
})
|
|
}
|
|
|
|
if (data.general_setting.custom_currency_exchange_rate == null) {
|
|
ctx.addIssue({
|
|
code: z.ZodIssueCode.custom,
|
|
path: ['general_setting', 'custom_currency_exchange_rate'],
|
|
message: t('Exchange rate is required'),
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
type PricingFormValues = z.infer<ReturnType<typeof createPricingSchema>>
|
|
|
|
type PricingSectionProps = {
|
|
defaultValues: PricingFormValues
|
|
}
|
|
|
|
export function PricingSection({ defaultValues }: PricingSectionProps) {
|
|
const { t } = useTranslation()
|
|
const updateOption = useUpdateOption()
|
|
|
|
const pricingSchema = createPricingSchema(t)
|
|
|
|
const { form, handleSubmit, handleReset, isDirty, isSubmitting } =
|
|
useSettingsForm<PricingFormValues>({
|
|
resolver: zodResolver(pricingSchema) as Resolver<
|
|
PricingFormValues,
|
|
unknown,
|
|
PricingFormValues
|
|
>,
|
|
defaultValues,
|
|
onSubmit: async (_data, changedFields) => {
|
|
for (const [key, value] of Object.entries(changedFields)) {
|
|
if (value === undefined || value === null) continue
|
|
if (typeof value === 'object') continue
|
|
|
|
let serialized: string | boolean = value as string | boolean
|
|
|
|
if (typeof value === 'boolean') {
|
|
serialized = String(value)
|
|
} else if (typeof value === 'number') {
|
|
serialized = Number.isFinite(value) ? String(value) : '0'
|
|
}
|
|
|
|
await updateOption.mutateAsync({
|
|
key,
|
|
value: serialized,
|
|
})
|
|
}
|
|
},
|
|
})
|
|
|
|
const displayType = form.watch('general_setting.quota_display_type') ?? 'USD'
|
|
const displayInCurrencyEnabled = form.watch('DisplayInCurrencyEnabled')
|
|
const showTokensOnlyOption = displayType === 'TOKENS'
|
|
const showQuotaPerUnit =
|
|
displayType === 'TOKENS' ||
|
|
defaultValues.QuotaPerUnit !== DEFAULT_CURRENCY_CONFIG.quotaPerUnit
|
|
const showDisplayInCurrencyOption = displayInCurrencyEnabled === false
|
|
|
|
return (
|
|
<>
|
|
<FormNavigationGuard when={isDirty} />
|
|
|
|
<SettingsSection title={t('Pricing & Display')}>
|
|
<Form {...form}>
|
|
<SettingsForm onSubmit={handleSubmit}>
|
|
<SettingsPageFormActions
|
|
onSave={handleSubmit}
|
|
onReset={handleReset}
|
|
isSaving={updateOption.isPending || isSubmitting}
|
|
isResetDisabled={!isDirty}
|
|
/>
|
|
<FormDirtyIndicator isDirty={isDirty} />
|
|
{showQuotaPerUnit && (
|
|
<FormField
|
|
control={form.control}
|
|
name='QuotaPerUnit'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t('Quota Per Unit')}</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type='number'
|
|
step='0.01'
|
|
value={field.value as number}
|
|
disabled
|
|
name={field.name}
|
|
onBlur={field.onBlur}
|
|
ref={field.ref}
|
|
/>
|
|
</FormControl>
|
|
<FormDescription>
|
|
{t('Number of tokens per unit quota')}
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
)}
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name='general_setting.quota_display_type'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t('Display Mode')}</FormLabel>
|
|
<Select
|
|
items={[
|
|
{ value: 'USD', label: t('USD') },
|
|
{ value: 'CNY', label: t('CNY') },
|
|
{ value: 'CUSTOM', label: t('Custom Currency') },
|
|
{ value: 'TOKENS', label: t('Tokens Only') },
|
|
]}
|
|
value={field.value}
|
|
onValueChange={field.onChange}
|
|
>
|
|
<FormControl>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={t('Select display mode')} />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent alignItemWithTrigger={false}>
|
|
<SelectGroup>
|
|
<SelectItem value='USD'>{t('USD')}</SelectItem>
|
|
<SelectItem value='CNY'>{t('CNY')}</SelectItem>
|
|
<SelectItem value='CUSTOM'>
|
|
{t('Custom Currency')}
|
|
</SelectItem>
|
|
{showTokensOnlyOption && (
|
|
<SelectItem value='TOKENS'>
|
|
{t('Tokens Only')}
|
|
</SelectItem>
|
|
)}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<FormDescription>
|
|
{t('Choose how quota values are shown to users')}
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
{displayType !== 'TOKENS' && (
|
|
<FormField
|
|
control={form.control}
|
|
name='USDExchangeRate'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>
|
|
{displayType === 'CNY'
|
|
? t('CNY per USD')
|
|
: displayType === 'USD'
|
|
? t('USD Exchange Rate')
|
|
: t('USD Exchange Rate')}
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type='number'
|
|
step='0.01'
|
|
value={field.value as number}
|
|
onChange={(e) => field.onChange(e.target.valueAsNumber)}
|
|
name={field.name}
|
|
onBlur={field.onBlur}
|
|
ref={field.ref}
|
|
/>
|
|
</FormControl>
|
|
<FormDescription>
|
|
{t(
|
|
'Real exchange rate between USD and your payment gateway currency'
|
|
)}
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
)}
|
|
|
|
{displayType === 'CUSTOM' && (
|
|
<div className='grid gap-4 sm:grid-cols-2'>
|
|
<FormField
|
|
control={form.control}
|
|
name='general_setting.custom_currency_symbol'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t('Custom Currency Symbol')}</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type='text'
|
|
value={field.value ?? ''}
|
|
onChange={field.onChange}
|
|
name={field.name}
|
|
onBlur={field.onBlur}
|
|
ref={field.ref}
|
|
maxLength={8}
|
|
placeholder={t('e.g. ¥ or HK$')}
|
|
/>
|
|
</FormControl>
|
|
<FormDescription>
|
|
{t('Prefix used when displaying prices')}
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name='general_setting.custom_currency_exchange_rate'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t('Units per USD')}</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type='number'
|
|
step='0.01'
|
|
value={field.value ?? ''}
|
|
onChange={(e) =>
|
|
field.onChange(
|
|
e.target.value === ''
|
|
? undefined
|
|
: e.target.valueAsNumber
|
|
)
|
|
}
|
|
name={field.name}
|
|
onBlur={field.onBlur}
|
|
ref={field.ref}
|
|
placeholder={t('e.g. 8 means 1 USD = 8 units')}
|
|
/>
|
|
</FormControl>
|
|
<FormDescription>
|
|
{t('Conversion rate from USD to your custom currency')}
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{showDisplayInCurrencyOption && (
|
|
<FormField
|
|
control={form.control}
|
|
name='DisplayInCurrencyEnabled'
|
|
render={({ field }) => (
|
|
<SettingsSwitchItem>
|
|
<SettingsSwitchContent>
|
|
<FormLabel>{t('Display in Currency')}</FormLabel>
|
|
<FormDescription>
|
|
{displayType === 'TOKENS'
|
|
? t(
|
|
'Tokens-only mode will show raw quota values regardless of this toggle.'
|
|
)
|
|
: t('Show prices in currency instead of quota.')}
|
|
</FormDescription>
|
|
</SettingsSwitchContent>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
</SettingsSwitchItem>
|
|
)}
|
|
/>
|
|
)}
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name='DisplayTokenStatEnabled'
|
|
render={({ field }) => (
|
|
<SettingsSwitchItem>
|
|
<SettingsSwitchContent>
|
|
<FormLabel>{t('Display Token Statistics')}</FormLabel>
|
|
<FormDescription>
|
|
{t('Show token usage statistics in the UI')}
|
|
</FormDescription>
|
|
</SettingsSwitchContent>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
</SettingsSwitchItem>
|
|
)}
|
|
/>
|
|
</SettingsForm>
|
|
</Form>
|
|
</SettingsSection>
|
|
</>
|
|
)
|
|
}
|