ext/new-api
2
0
Fork 0
mirror of https://github.com/QuantumNous/new-api.git synced 2026-09-07 01:56:53 +00:00
Code Activity

✨ refactor: system settings UI for consistent, compact layouts

Browse Source 
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.
This commit is contained in:
t0ng7u
2026-05-25 00:34:26 +08:00
parent 92a0959448
commit b08febaa3c
97 changed files with 2420 additions and 3032 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/system-settings/integrations/email-settings-section.tsx
Vendored
+24 -29
View File
@@ -20,7 +20,6 @@ import * as z from 'zod'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import {
Form,
FormControl,
@@ -32,6 +31,12 @@ import {
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import {
SettingsForm,
SettingsSwitchContent,
SettingsSwitchItem,
} from '../components/settings-form-layout'
import { SettingsPageFormActions } from '../components/settings-page-context'
import { SettingsSection } from '../components/settings-section'
import { useResetForm } from '../hooks/use-reset-form'
import { useUpdateOption } from '../hooks/use-update-option'
@@ -138,16 +143,14 @@ export function EmailSettingsSection({
}
return (
<SettingsSection
title={t('SMTP Email')}
description={t('Configure outgoing email server for notifications')}
>
<SettingsSection title={t('SMTP Email')}>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className='space-y-6'
autoComplete='off'
>
<SettingsForm onSubmit={form.handleSubmit(onSubmit)} autoComplete='off'>
<SettingsPageFormActions
onSave={form.handleSubmit(onSubmit)}
isSaving={updateOption.isPending}
saveLabel='Save SMTP settings'
/>
<FormField
control={form.control}
name='SMTPServer'
@@ -198,22 +201,20 @@ export function EmailSettingsSection({
control={form.control}
name='SMTPSSLEnabled'
render={({ field }) => (
<FormItem className='flex flex-row items-center justify-between rounded-lg border p-4'>
<div className='space-y-0.5'>
<FormLabel className='text-base'>
{t('Enable SSL/TLS')}
</FormLabel>
<SettingsSwitchItem>
<SettingsSwitchContent>
<FormLabel>{t('Enable SSL/TLS')}</FormLabel>
<FormDescription>
{t('Use secure connection when sending emails')}
</FormDescription>
</div>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
</SettingsSwitchItem>
)}
/>
@@ -221,22 +222,20 @@ export function EmailSettingsSection({
control={form.control}
name='SMTPForceAuthLogin'
render={({ field }) => (
<FormItem className='flex flex-row items-center justify-between rounded-lg border p-4'>
<div className='space-y-0.5'>
<FormLabel className='text-base'>
{t('Force AUTH LOGIN')}
</FormLabel>
<SettingsSwitchItem>
<SettingsSwitchContent>
<FormLabel>{t('Force AUTH LOGIN')}</FormLabel>
<FormDescription>
{t('Force SMTP authentication using AUTH LOGIN method')}
</FormDescription>
</div>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
</SettingsSwitchItem>
)}
/>
</div>
@@ -307,11 +306,7 @@ export function EmailSettingsSection({
</FormItem>
)}
/>
<Button type='submit' disabled={updateOption.isPending}>
{updateOption.isPending ? t('Saving...') : t('Save SMTP settings')}
</Button>
</form>
</SettingsForm>
</Form>
</SettingsSection>
)
web/default/src/features/system-settings/integrations/ionet-deployment-settings-section.tsx
Vendored
+20 -26
View File
@@ -37,6 +37,12 @@ import {
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import { testDeploymentConnectionWithKey } from '@/features/models/api'
import {
SettingsForm,
SettingsSwitchContent,
SettingsSwitchItem,
} from '../components/settings-form-layout'
import { SettingsPageFormActions } from '../components/settings-page-context'
import { SettingsSection } from '../components/settings-section'
import { useUpdateOption } from '../hooks/use-update-option'
@@ -129,29 +135,26 @@ export function IoNetDeploymentSettingsSection({
}
return (
<SettingsSection
title={t('io.net Deployments')}
description={t('Configure io.net API key for model deployments')}
>
<SettingsSection title={t('io.net Deployments')}>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
autoComplete='off'
className='space-y-6'
>
<SettingsForm onSubmit={form.handleSubmit(onSubmit)} autoComplete='off'>
<SettingsPageFormActions
onSave={form.handleSubmit(onSubmit)}
isSaving={updateOption.isPending || isSubmitting}
isSaveDisabled={!isDirty}
saveLabel='Save io.net settings'
/>
<FormField
control={form.control}
name='enabled'
render={({ field }) => (
<FormItem className='flex flex-row items-center justify-between rounded-lg border p-4'>
<div className='space-y-0.5'>
<FormLabel className='text-base'>
{t('Enable io.net deployments')}
</FormLabel>
<SettingsSwitchItem>
<SettingsSwitchContent>
<FormLabel>{t('Enable io.net deployments')}</FormLabel>
<FormDescription>
{t('Enable io.net model deployment service in console')}
</FormDescription>
</div>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={field.value}
@@ -159,7 +162,7 @@ export function IoNetDeploymentSettingsSection({
disabled={updateOption.isPending || isSubmitting}
/>
</FormControl>
</FormItem>
</SettingsSwitchItem>
)}
/>
@@ -253,16 +256,7 @@ export function IoNetDeploymentSettingsSection({
) : null}
</>
) : null}
<Button
type='submit'
disabled={!isDirty || updateOption.isPending || isSubmitting}
>
{updateOption.isPending || isSubmitting
? t('Saving...')
: t('Save io.net settings')}
</Button>
</form>
</SettingsForm>
</Form>
</SettingsSection>
)
web/default/src/features/system-settings/integrations/monitoring-settings-section.tsx
Vendored
+29 -36
View File
@@ -23,7 +23,6 @@ import { zodResolver } from '@hookform/resolvers/zod'
import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
import { parseHttpStatusCodeRules } from '@/lib/http-status-code-rules'
import { Button } from '@/components/ui/button'
import {
Form,
FormControl,
@@ -36,6 +35,12 @@ import {
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import { Textarea } from '@/components/ui/textarea'
import {
SettingsForm,
SettingsSwitchContent,
SettingsSwitchItem,
} from '../components/settings-form-layout'
import { SettingsPageFormActions } from '../components/settings-page-context'
import { SettingsSection } from '../components/settings-section'
import { useResetForm } from '../hooks/use-reset-form'
import { useUpdateOption } from '../hooks/use-update-option'
@@ -243,35 +248,33 @@ export function MonitoringSettingsSection({
}
return (
<SettingsSection
title={t('Monitoring & Alerts')}
description={t(
'Automatically test channels and notify users when limits are hit'
)}
>
<SettingsSection title={t('Monitoring & Alerts')}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className='space-y-6'>
<SettingsForm onSubmit={form.handleSubmit(onSubmit)}>
<SettingsPageFormActions
onSave={form.handleSubmit(onSubmit)}
isSaving={updateOption.isPending}
saveLabel='Save monitoring rules'
/>
<div className='grid gap-6 md:grid-cols-2'>
<FormField
control={form.control}
name='monitor_setting.auto_test_channel_enabled'
render={({ field }) => (
<FormItem className='flex flex-row items-center justify-between rounded-lg border p-4'>
<div className='space-y-0.5'>
<FormLabel className='text-base'>
{t('Scheduled channel tests')}
</FormLabel>
<SettingsSwitchItem>
<SettingsSwitchContent>
<FormLabel>{t('Scheduled channel tests')}</FormLabel>
<FormDescription>
{t('Automatically probe all channels in the background')}
</FormDescription>
</div>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
</SettingsSwitchItem>
)}
/>
@@ -364,22 +367,20 @@ export function MonitoringSettingsSection({
control={form.control}
name='AutomaticDisableChannelEnabled'
render={({ field }) => (
<FormItem className='flex flex-row items-center justify-between rounded-lg border p-4'>
<div className='space-y-0.5'>
<FormLabel className='text-base'>
{t('Disable on failure')}
</FormLabel>
<SettingsSwitchItem>
<SettingsSwitchContent>
<FormLabel>{t('Disable on failure')}</FormLabel>
<FormDescription>
{t('Automatically disable channels when tests fail')}
</FormDescription>
</div>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
</SettingsSwitchItem>
)}
/>
@@ -387,22 +388,20 @@ export function MonitoringSettingsSection({
control={form.control}
name='AutomaticEnableChannelEnabled'
render={({ field }) => (
<FormItem className='flex flex-row items-center justify-between rounded-lg border p-4'>
<div className='space-y-0.5'>
<FormLabel className='text-base'>
{t('Re-enable on success')}
</FormLabel>
<SettingsSwitchItem>
<SettingsSwitchContent>
<FormLabel>{t('Re-enable on success')}</FormLabel>
<FormDescription>
{t('Bring channels back online after successful checks')}
</FormDescription>
</div>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
</SettingsSwitchItem>
)}
/>
</div>
@@ -492,13 +491,7 @@ export function MonitoringSettingsSection({
)}
/>
</div>
<Button type='submit' disabled={updateOption.isPending}>
{updateOption.isPending
? t('Saving...')
: t('Save monitoring rules')}
</Button>
</form>
</SettingsForm>
</Form>
</SettingsSection>
)
web/default/src/features/system-settings/integrations/payment-settings-section.tsx
Vendored
+79 -340
View File
@@ -47,6 +47,12 @@ import { Switch } from '@/components/ui/switch'
import { Textarea } from '@/components/ui/textarea'
import { RiskAcknowledgementDialog } from '@/components/risk-acknowledgement-dialog'
import { confirmPaymentCompliance } from '../api'
import {
SettingsForm,
SettingsSwitchContent,
SettingsSwitchItem,
} from '../components/settings-form-layout'
import { SettingsPageFormActions } from '../components/settings-page-context'
import { SettingsSection } from '../components/settings-section'
import { useUpdateOption } from '../hooks/use-update-option'
import { AmountDiscountVisualEditor } from './amount-discount-visual-editor'
@@ -278,25 +284,67 @@ export function PaymentSettingsSection({
})
}, [defaultsSignature, form])
const saveGeneralSettings = async () => {
const values = form.getValues()
const onSubmit = async (values: PaymentFormValues) => {
const sanitized = {
Price: values.Price as number,
MinTopUp: values.MinTopUp as number,
PayAddress: removeTrailingSlash(values.PayAddress),
EpayId: values.EpayId.trim(),
EpayKey: values.EpayKey.trim(),
Price: values.Price,
MinTopUp: values.MinTopUp,
CustomCallbackAddress: removeTrailingSlash(values.CustomCallbackAddress),
PayMethods: values.PayMethods.trim(),
AmountOptions: values.AmountOptions.trim(),
AmountDiscount: values.AmountDiscount.trim(),
StripeApiSecret: values.StripeApiSecret.trim(),
StripeWebhookSecret: values.StripeWebhookSecret.trim(),
StripePriceId: values.StripePriceId.trim(),
StripeUnitPrice: values.StripeUnitPrice,
StripeMinTopUp: values.StripeMinTopUp,
StripePromotionCodesEnabled: values.StripePromotionCodesEnabled,
CreemApiKey: values.CreemApiKey.trim(),
CreemWebhookSecret: values.CreemWebhookSecret.trim(),
CreemTestMode: values.CreemTestMode,
CreemProducts: values.CreemProducts.trim(),
}
const initial = {
PayAddress: removeTrailingSlash(initialRef.current.PayAddress),
EpayId: initialRef.current.EpayId.trim(),
EpayKey: initialRef.current.EpayKey.trim(),
Price: initialRef.current.Price,
MinTopUp: initialRef.current.MinTopUp,
CustomCallbackAddress: removeTrailingSlash(
initialRef.current.CustomCallbackAddress
),
PayMethods: initialRef.current.PayMethods.trim(),
AmountOptions: initialRef.current.AmountOptions.trim(),
AmountDiscount: initialRef.current.AmountDiscount.trim(),
StripeApiSecret: initialRef.current.StripeApiSecret.trim(),
StripeWebhookSecret: initialRef.current.StripeWebhookSecret.trim(),
StripePriceId: initialRef.current.StripePriceId.trim(),
StripeUnitPrice: initialRef.current.StripeUnitPrice,
StripeMinTopUp: initialRef.current.StripeMinTopUp,
StripePromotionCodesEnabled:
initialRef.current.StripePromotionCodesEnabled,
CreemApiKey: initialRef.current.CreemApiKey.trim(),
CreemWebhookSecret: initialRef.current.CreemWebhookSecret.trim(),
CreemTestMode: initialRef.current.CreemTestMode,
CreemProducts: initialRef.current.CreemProducts.trim(),
}
const updates: Array<{ key: string; value: string | number }> = []
const updates: Array<{ key: string; value: string | number | boolean }> = []
if (sanitized.PayAddress !== initial.PayAddress) {
updates.push({ key: 'PayAddress', value: sanitized.PayAddress })
}
if (sanitized.EpayId !== initial.EpayId) {
updates.push({ key: 'EpayId', value: sanitized.EpayId })
}
if (sanitized.EpayKey && sanitized.EpayKey !== initial.EpayKey) {
updates.push({ key: 'EpayKey', value: sanitized.EpayKey })
}
if (sanitized.Price !== initial.Price) {
updates.push({ key: 'Price', value: sanitized.Price })
@@ -306,6 +354,13 @@ export function PaymentSettingsSection({
updates.push({ key: 'MinTopUp', value: sanitized.MinTopUp })
}
if (sanitized.CustomCallbackAddress !== initial.CustomCallbackAddress) {
updates.push({
key: 'CustomCallbackAddress',
value: sanitized.CustomCallbackAddress,
})
}
if (
normalizeJsonForComparison(sanitized.PayMethods) !==
normalizeJsonForComparison(initial.PayMethods)
@@ -333,87 +388,6 @@ export function PaymentSettingsSection({
})
}
if (updates.length === 0) {
return
}
for (const update of updates) {
await updateOption.mutateAsync(update)
}
}
const saveEpaySettings = async () => {
const values = form.getValues()
const sanitized = {
PayAddress: removeTrailingSlash(values.PayAddress),
EpayId: values.EpayId.trim(),
EpayKey: values.EpayKey.trim(),
CustomCallbackAddress: removeTrailingSlash(values.CustomCallbackAddress),
}
const initial = {
PayAddress: removeTrailingSlash(initialRef.current.PayAddress),
EpayId: initialRef.current.EpayId.trim(),
EpayKey: initialRef.current.EpayKey.trim(),
CustomCallbackAddress: removeTrailingSlash(
initialRef.current.CustomCallbackAddress
),
}
const updates: Array<{ key: string; value: string }> = []
if (sanitized.PayAddress !== initial.PayAddress) {
updates.push({ key: 'PayAddress', value: sanitized.PayAddress })
}
if (sanitized.EpayId !== initial.EpayId) {
updates.push({ key: 'EpayId', value: sanitized.EpayId })
}
if (sanitized.EpayKey && sanitized.EpayKey !== initial.EpayKey) {
updates.push({ key: 'EpayKey', value: sanitized.EpayKey })
}
if (sanitized.CustomCallbackAddress !== initial.CustomCallbackAddress) {
updates.push({
key: 'CustomCallbackAddress',
value: sanitized.CustomCallbackAddress,
})
}
if (updates.length === 0) {
return
}
for (const update of updates) {
await updateOption.mutateAsync(update)
}
}
const saveStripeSettings = async () => {
const values = form.getValues()
const sanitized = {
StripeApiSecret: values.StripeApiSecret.trim(),
StripeWebhookSecret: values.StripeWebhookSecret.trim(),
StripePriceId: values.StripePriceId.trim(),
StripeUnitPrice: values.StripeUnitPrice as number,
StripeMinTopUp: values.StripeMinTopUp as number,
StripePromotionCodesEnabled:
values.StripePromotionCodesEnabled as boolean,
}
const initial = {
StripeApiSecret: initialRef.current.StripeApiSecret.trim(),
StripeWebhookSecret: initialRef.current.StripeWebhookSecret.trim(),
StripePriceId: initialRef.current.StripePriceId.trim(),
StripeUnitPrice: initialRef.current.StripeUnitPrice,
StripeMinTopUp: initialRef.current.StripeMinTopUp,
StripePromotionCodesEnabled:
initialRef.current.StripePromotionCodesEnabled,
}
const updates: Array<{ key: string; value: string | number | boolean }> = []
if (
sanitized.StripeApiSecret &&
sanitized.StripeApiSecret !== initial.StripeApiSecret
@@ -453,33 +427,6 @@ export function PaymentSettingsSection({
})
}
if (updates.length === 0) {
return
}
for (const update of updates) {
await updateOption.mutateAsync(update)
}
}
const saveCreemSettings = async () => {
const values = form.getValues()
const sanitized = {
CreemApiKey: values.CreemApiKey.trim(),
CreemWebhookSecret: values.CreemWebhookSecret.trim(),
CreemTestMode: values.CreemTestMode as boolean,
CreemProducts: values.CreemProducts.trim(),
}
const initial = {
CreemApiKey: initialRef.current.CreemApiKey.trim(),
CreemWebhookSecret: initialRef.current.CreemWebhookSecret.trim(),
CreemTestMode: initialRef.current.CreemTestMode,
CreemProducts: initialRef.current.CreemProducts.trim(),
}
const updates: Array<{ key: string; value: string | boolean }> = []
if (
sanitized.CreemApiKey &&
sanitized.CreemApiKey !== initial.CreemApiKey
@@ -508,162 +455,13 @@ export function PaymentSettingsSection({
updates.push({ key: 'CreemProducts', value: sanitized.CreemProducts })
}
if (updates.length === 0) {
return
}
for (const update of updates) {
await updateOption.mutateAsync(update)
}
}
const onSubmit = async (values: PaymentFormValues) => {
const sanitized = {
PayAddress: removeTrailingSlash(values.PayAddress),
EpayId: values.EpayId.trim(),
EpayKey: values.EpayKey.trim(),
Price: values.Price,
MinTopUp: values.MinTopUp,
CustomCallbackAddress: removeTrailingSlash(values.CustomCallbackAddress),
PayMethods: values.PayMethods.trim(),
AmountOptions: values.AmountOptions.trim(),
AmountDiscount: values.AmountDiscount.trim(),
StripeApiSecret: values.StripeApiSecret.trim(),
StripeWebhookSecret: values.StripeWebhookSecret.trim(),
StripePriceId: values.StripePriceId.trim(),
StripeUnitPrice: values.StripeUnitPrice,
StripeMinTopUp: values.StripeMinTopUp,
StripePromotionCodesEnabled: values.StripePromotionCodesEnabled,
}
const initial = {
PayAddress: removeTrailingSlash(initialRef.current.PayAddress),
EpayId: initialRef.current.EpayId.trim(),
EpayKey: initialRef.current.EpayKey.trim(),
Price: initialRef.current.Price,
MinTopUp: initialRef.current.MinTopUp,
CustomCallbackAddress: removeTrailingSlash(
initialRef.current.CustomCallbackAddress
),
PayMethods: initialRef.current.PayMethods.trim(),
AmountOptions: initialRef.current.AmountOptions.trim(),
AmountDiscount: initialRef.current.AmountDiscount.trim(),
StripeApiSecret: initialRef.current.StripeApiSecret.trim(),
StripeWebhookSecret: initialRef.current.StripeWebhookSecret.trim(),
StripePriceId: initialRef.current.StripePriceId.trim(),
StripeUnitPrice: initialRef.current.StripeUnitPrice,
StripeMinTopUp: initialRef.current.StripeMinTopUp,
StripePromotionCodesEnabled:
initialRef.current.StripePromotionCodesEnabled,
}
const updates: Array<{ key: string; value: string | number | boolean }> = []
if (sanitized.PayAddress !== initial.PayAddress) {
updates.push({ key: 'PayAddress', value: sanitized.PayAddress })
}
if (sanitized.EpayId !== initial.EpayId) {
updates.push({ key: 'EpayId', value: sanitized.EpayId })
}
if (sanitized.EpayKey && sanitized.EpayKey !== initial.EpayKey) {
updates.push({ key: 'EpayKey', value: sanitized.EpayKey })
}
if (sanitized.Price !== initial.Price) {
updates.push({ key: 'Price', value: sanitized.Price })
}
if (sanitized.MinTopUp !== initial.MinTopUp) {
updates.push({ key: 'MinTopUp', value: sanitized.MinTopUp })
}
if (sanitized.CustomCallbackAddress !== initial.CustomCallbackAddress) {
updates.push({
key: 'CustomCallbackAddress',
value: sanitized.CustomCallbackAddress,
})
}
if (
normalizeJsonForComparison(sanitized.PayMethods) !==
normalizeJsonForComparison(initial.PayMethods)
) {
updates.push({ key: 'PayMethods', value: sanitized.PayMethods })
}
if (
normalizeJsonForComparison(sanitized.AmountOptions) !==
normalizeJsonForComparison(initial.AmountOptions)
) {
updates.push({
key: 'payment_setting.amount_options',
value: sanitized.AmountOptions,
})
}
if (
normalizeJsonForComparison(sanitized.AmountDiscount) !==
normalizeJsonForComparison(initial.AmountDiscount)
) {
updates.push({
key: 'payment_setting.amount_discount',
value: sanitized.AmountDiscount,
})
}
if (
sanitized.StripeApiSecret &&
sanitized.StripeApiSecret !== initial.StripeApiSecret
) {
updates.push({ key: 'StripeApiSecret', value: sanitized.StripeApiSecret })
}
if (
sanitized.StripeWebhookSecret &&
sanitized.StripeWebhookSecret !== initial.StripeWebhookSecret
) {
updates.push({
key: 'StripeWebhookSecret',
value: sanitized.StripeWebhookSecret,
})
}
if (sanitized.StripePriceId !== initial.StripePriceId) {
updates.push({ key: 'StripePriceId', value: sanitized.StripePriceId })
}
if (sanitized.StripeUnitPrice !== initial.StripeUnitPrice) {
updates.push({ key: 'StripeUnitPrice', value: sanitized.StripeUnitPrice })
}
if (sanitized.StripeMinTopUp !== initial.StripeMinTopUp) {
updates.push({ key: 'StripeMinTopUp', value: sanitized.StripeMinTopUp })
}
if (
sanitized.StripePromotionCodesEnabled !==
initial.StripePromotionCodesEnabled
) {
updates.push({
key: 'StripePromotionCodesEnabled',
value: sanitized.StripePromotionCodesEnabled,
})
}
for (const update of updates) {
await updateOption.mutateAsync(update)
}
}
return (
<SettingsSection
title={t('Payment Gateway')}
description={t(
'Configure recharge pricing and payment gateway integrations'
)}
>
<SettingsSection title={t('Payment Gateway')}>
{!complianceConfirmed ? (
<Alert variant='destructive' className='mb-6'>
<ShieldAlert className='h-4 w-4' />
@@ -729,14 +527,19 @@ export function PaymentSettingsSection({
{/* eslint-disable react-hooks/refs */}
<Form {...form}>
<form
<SettingsForm
onSubmit={form.handleSubmit(onSubmit)}
className={cn(
'space-y-8',
'gap-y-8',
!complianceConfirmed && 'pointer-events-none opacity-40'
)}
data-no-autosubmit='true'
>
<SettingsPageFormActions
onSave={form.handleSubmit(onSubmit)}
isSaving={updateOption.isPending}
saveLabel='Save all settings'
/>
<div className='space-y-4'>
<div>
<h3 className='text-lg font-medium'>{t('General Settings')}</h3>
@@ -964,20 +767,6 @@ export function PaymentSettingsSection({
)}
/>
</div>
<Button
type='button'
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
saveGeneralSettings()
}}
disabled={updateOption.isPending}
>
{updateOption.isPending
? t('Saving...')
: t('Save general settings')}
</Button>
</div>
<Separator />
@@ -1079,20 +868,6 @@ export function PaymentSettingsSection({
)}
/>
</div>
<Button
type='button'
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
saveEpaySettings()
}}
disabled={updateOption.isPending}
>
{updateOption.isPending
? t('Saving...')
: t('Save Epay settings')}
</Button>
</div>
<Separator />
@@ -1266,39 +1041,23 @@ export function PaymentSettingsSection({
control={form.control}
name='StripePromotionCodesEnabled'
render={({ field }) => (
<FormItem className='flex flex-row items-center justify-between rounded-lg border p-4'>
<div className='space-y-0.5'>
<FormLabel className='text-base'>
{t('Promotion codes')}
</FormLabel>
<SettingsSwitchItem>
<SettingsSwitchContent>
<FormLabel>{t('Promotion codes')}</FormLabel>
<FormDescription>
{t('Allow users to enter promo codes')}
</FormDescription>
</div>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
</SettingsSwitchItem>
)}
/>
</div>
<Button
type='button'
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
saveStripeSettings()
}}
disabled={updateOption.isPending}
>
{updateOption.isPending
? t('Saving...')
: t('Save Stripe settings')}
</Button>
</div>
<Separator />
@@ -1378,22 +1137,20 @@ export function PaymentSettingsSection({
control={form.control}
name='CreemTestMode'
render={({ field }) => (
<FormItem className='flex flex-row items-center justify-between rounded-lg border p-4'>
<div className='space-y-0.5'>
<FormLabel className='text-base'>
{t('Test Mode')}
</FormLabel>
<SettingsSwitchItem>
<SettingsSwitchContent>
<FormLabel>{t('Test Mode')}</FormLabel>
<FormDescription>
{t('Enable test mode for Creem payments')}
</FormDescription>
</div>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
</SettingsSwitchItem>
)}
/>
@@ -1448,26 +1205,8 @@ export function PaymentSettingsSection({
</FormItem>
)}
/>
<Button
type='button'
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
saveCreemSettings()
}}
disabled={updateOption.isPending}
>
{updateOption.isPending
? t('Saving...')
: t('Save Creem settings')}
</Button>
</div>
<Button type='submit' disabled={updateOption.isPending}>
{updateOption.isPending ? t('Saving...') : t('Save all settings')}
</Button>
</form>
</SettingsForm>
</Form>
<Separator />
web/default/src/features/system-settings/integrations/waffo-pancake-settings-section.tsx
Vendored
+15 -10
View File
@@ -41,6 +41,8 @@ import {
SelectValue,
} from '@/components/ui/select'
import { Textarea } from '@/components/ui/textarea'
import { SettingsForm } from '../components/settings-form-layout'
import { SettingsPageActionsPortal } from '../components/settings-page-context'
import { removeTrailingSlash } from './utils'
import {
type CatalogStore,
@@ -451,6 +453,16 @@ export function WaffoPancakeSettingsSection(props: Props) {
return (
<div className='space-y-4 pt-4'>
<SettingsPageActionsPortal>
<Button
type='button'
size='sm'
onClick={handleSave}
disabled={saving || !chosenStoreID || !chosenProductID}
>
{saving ? t('Saving...') : t('Save Waffo Pancake settings')}
</Button>
</SettingsPageActionsPortal>
<div>
<h3 className='text-lg font-medium'>{t('Waffo Pancake MoR')}</h3>
<p className='text-muted-foreground text-sm'>
@@ -460,9 +472,9 @@ export function WaffoPancakeSettingsSection(props: Props) {
</p>
</div>
<Form {...form}>
<form
<SettingsForm
onSubmit={(e) => e.preventDefault()}
className='space-y-4'
className='gap-y-4'
data-no-autosubmit='true'
>
{/* Blue box — webhook configuration only. */}
@@ -685,13 +697,6 @@ export function WaffoPancakeSettingsSection(props: Props) {
) : null}
<div className='flex items-center gap-3'>
<Button
type='button'
onClick={handleSave}
disabled={saving || !chosenStoreID || !chosenProductID}
>
{saving ? t('Saving...') : t('Save Waffo Pancake settings')}
</Button>
{storeID || productID ? (
<div className='text-muted-foreground flex flex-wrap gap-x-3 gap-y-1 text-xs'>
{storeID ? (
@@ -714,7 +719,7 @@ export function WaffoPancakeSettingsSection(props: Props) {
) : null}
</div>
</div>
</form>
</SettingsForm>
</Form>
</div>
)
web/default/src/features/system-settings/integrations/waffo-settings-section.tsx
Vendored
+25 -20
View File
@@ -33,7 +33,6 @@ import {
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'
import { Switch } from '@/components/ui/switch'
import {
Table,
TableBody,
@@ -43,6 +42,8 @@ import {
TableRow,
} from '@/components/ui/table'
import { Textarea } from '@/components/ui/textarea'
import { SettingsSwitchField } from '../components/settings-form-layout'
import { SettingsPageActionsPortal } from '../components/settings-page-context'
import { useUpdateOption } from '../hooks/use-update-option'
export interface WaffoSettingsValues {
@@ -212,6 +213,16 @@ export function WaffoSettingsSection(props: Props) {
return (
<>
<div className='space-y-4 pt-4'>
<SettingsPageActionsPortal>
<Button
type='button'
size='sm'
onClick={handleSave}
disabled={loading}
>
{loading ? t('Saving...') : t('Save Waffo settings')}
</Button>
</SettingsPageActionsPortal>
<div>
<h3 className='text-lg font-medium'>
{t('Waffo Aggregator Gateway')}
@@ -230,21 +241,19 @@ export function WaffoSettingsSection(props: Props) {
</AlertDescription>
</Alert>
<div className='grid grid-cols-2 gap-4'>
<div className='flex items-center gap-2'>
<Switch
checked={form.watch('WaffoEnabled')}
onCheckedChange={(v) => form.setValue('WaffoEnabled', v)}
/>
<Label>{t('Enable Waffo')}</Label>
</div>
<div className='flex items-center gap-2'>
<Switch
checked={form.watch('WaffoSandbox')}
onCheckedChange={(v) => form.setValue('WaffoSandbox', v)}
/>
<Label>{t('Sandbox mode')}</Label>
</div>
<div className='grid gap-4 sm:grid-cols-2'>
<SettingsSwitchField
checked={form.watch('WaffoEnabled')}
onCheckedChange={(v) => form.setValue('WaffoEnabled', v)}
label={t('Enable Waffo')}
className='border-b-0 py-0'
/>
<SettingsSwitchField
checked={form.watch('WaffoSandbox')}
onCheckedChange={(v) => form.setValue('WaffoSandbox', v)}
label={t('Sandbox mode')}
className='border-b-0 py-0'
/>
</div>
<div className='grid grid-cols-2 gap-4'>
@@ -416,10 +425,6 @@ export function WaffoSettingsSection(props: Props) {
</TableBody>
</Table>
</div>
<Button onClick={handleSave} disabled={loading}>
{loading ? t('Saving...') : t('Save Changes')}
</Button>
</div>
<Dialog open={methodDialogOpen} onOpenChange={setMethodDialogOpen}>
web/default/src/features/system-settings/integrations/worker-settings-section.tsx
Vendored
+19 -26
View File
@@ -20,7 +20,6 @@ import * as z from 'zod'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import {
Form,
FormControl,
@@ -32,6 +31,12 @@ import {
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import {
SettingsForm,
SettingsSwitchContent,
SettingsSwitchItem,
} from '../components/settings-form-layout'
import { SettingsPageFormActions } from '../components/settings-page-context'
import { SettingsSection } from '../components/settings-section'
import { useResetForm } from '../hooks/use-reset-form'
import { useUpdateOption } from '../hooks/use-update-option'
@@ -100,18 +105,14 @@ export function WorkerSettingsSection({
}
return (
<SettingsSection
title={t('Worker Proxy')}
description={t(
'Configure upstream worker or proxy service for outbound requests'
)}
>
<SettingsSection title={t('Worker Proxy')}>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
autoComplete='off'
className='space-y-6'
>
<SettingsForm onSubmit={form.handleSubmit(onSubmit)} autoComplete='off'>
<SettingsPageFormActions
onSave={form.handleSubmit(onSubmit)}
isSaving={updateOption.isPending}
saveLabel='Save Worker settings'
/>
<FormField
control={form.control}
name='WorkerUrl'
@@ -167,33 +168,25 @@ export function WorkerSettingsSection({
control={form.control}
name='WorkerAllowHttpImageRequestEnabled'
render={({ field }) => (
<FormItem className='flex flex-row items-center justify-between rounded-lg border p-4'>
<div className='space-y-0.5'>
<FormLabel className='text-base'>
{t('Allow HTTP image requests')}
</FormLabel>
<SettingsSwitchItem>
<SettingsSwitchContent>
<FormLabel>{t('Allow HTTP image requests')}</FormLabel>
<FormDescription>
{t(
'Enable when proxying workers that fetch images over HTTP.'
)}
</FormDescription>
</div>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
</SettingsSwitchItem>
)}
/>
<Button type='submit' disabled={updateOption.isPending}>
{updateOption.isPending
? t('Saving...')
: t('Save Worker settings')}
</Button>
</form>
</SettingsForm>
</Form>
</SettingsSection>
)