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.
538 lines
18 KiB
TypeScript
Vendored
538 lines
18 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 { type ChangeEvent, useEffect, useRef, useState } from 'react'
|
||
import { useForm } from 'react-hook-form'
|
||
import { Plus, Pencil, Trash2 } from 'lucide-react'
|
||
import { useTranslation } from 'react-i18next'
|
||
import { toast } from 'sonner'
|
||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||
import { Button } from '@/components/ui/button'
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from '@/components/ui/dialog'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Label } from '@/components/ui/label'
|
||
import { Separator } from '@/components/ui/separator'
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
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 {
|
||
WaffoEnabled: boolean
|
||
WaffoApiKey: string
|
||
WaffoPrivateKey: string
|
||
WaffoPublicCert: string
|
||
WaffoSandboxPublicCert: string
|
||
WaffoSandboxApiKey: string
|
||
WaffoSandboxPrivateKey: string
|
||
WaffoSandbox: boolean
|
||
WaffoMerchantId: string
|
||
WaffoCurrency: string
|
||
WaffoUnitPrice: number
|
||
WaffoMinTopUp: number
|
||
WaffoNotifyUrl: string
|
||
WaffoReturnUrl: string
|
||
WaffoPayMethods: string
|
||
}
|
||
|
||
interface PayMethod {
|
||
name: string
|
||
icon: string
|
||
payMethodType: string
|
||
payMethodName: string
|
||
}
|
||
|
||
interface Props {
|
||
defaultValues: WaffoSettingsValues
|
||
}
|
||
|
||
export function WaffoSettingsSection(props: Props) {
|
||
const { t } = useTranslation()
|
||
const updateOption = useUpdateOption()
|
||
const [loading, setLoading] = useState(false)
|
||
const iconFileInputRef = useRef<HTMLInputElement | null>(null)
|
||
|
||
const form = useForm<Omit<WaffoSettingsValues, 'WaffoPayMethods'>>({
|
||
defaultValues: props.defaultValues,
|
||
})
|
||
|
||
const [payMethods, setPayMethods] = useState<PayMethod[]>(() => {
|
||
try {
|
||
return JSON.parse(props.defaultValues.WaffoPayMethods || '[]')
|
||
} catch {
|
||
return []
|
||
}
|
||
})
|
||
const [methodDialogOpen, setMethodDialogOpen] = useState(false)
|
||
const [editingIdx, setEditingIdx] = useState(-1)
|
||
const [methodForm, setMethodForm] = useState<PayMethod>({
|
||
name: '',
|
||
icon: '',
|
||
payMethodType: '',
|
||
payMethodName: '',
|
||
})
|
||
|
||
useEffect(() => {
|
||
form.reset(props.defaultValues)
|
||
try {
|
||
setPayMethods(JSON.parse(props.defaultValues.WaffoPayMethods || '[]'))
|
||
} catch {
|
||
setPayMethods([])
|
||
}
|
||
}, [props.defaultValues, form])
|
||
|
||
const handleSave = async () => {
|
||
setLoading(true)
|
||
try {
|
||
const values = form.getValues()
|
||
const options: { key: string; value: string }[] = [
|
||
{ key: 'WaffoEnabled', value: String(values.WaffoEnabled) },
|
||
{ key: 'WaffoSandbox', value: String(values.WaffoSandbox) },
|
||
{ key: 'WaffoMerchantId', value: values.WaffoMerchantId || '' },
|
||
{ key: 'WaffoCurrency', value: values.WaffoCurrency || 'USD' },
|
||
{ key: 'WaffoUnitPrice', value: String(values.WaffoUnitPrice || 1) },
|
||
{ key: 'WaffoMinTopUp', value: String(values.WaffoMinTopUp || 1) },
|
||
{ key: 'WaffoNotifyUrl', value: values.WaffoNotifyUrl || '' },
|
||
{ key: 'WaffoReturnUrl', value: values.WaffoReturnUrl || '' },
|
||
{ key: 'WaffoPublicCert', value: values.WaffoPublicCert || '' },
|
||
{
|
||
key: 'WaffoSandboxPublicCert',
|
||
value: values.WaffoSandboxPublicCert || '',
|
||
},
|
||
{ key: 'WaffoPayMethods', value: JSON.stringify(payMethods) },
|
||
]
|
||
if (values.WaffoApiKey)
|
||
options.push({ key: 'WaffoApiKey', value: values.WaffoApiKey })
|
||
if (values.WaffoPrivateKey)
|
||
options.push({ key: 'WaffoPrivateKey', value: values.WaffoPrivateKey })
|
||
if (values.WaffoSandboxApiKey)
|
||
options.push({
|
||
key: 'WaffoSandboxApiKey',
|
||
value: values.WaffoSandboxApiKey,
|
||
})
|
||
if (values.WaffoSandboxPrivateKey)
|
||
options.push({
|
||
key: 'WaffoSandboxPrivateKey',
|
||
value: values.WaffoSandboxPrivateKey,
|
||
})
|
||
|
||
for (const opt of options) {
|
||
await updateOption.mutateAsync(opt)
|
||
}
|
||
toast.success(t('Updated successfully'))
|
||
} catch {
|
||
toast.error(t('Update failed'))
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const openAdd = () => {
|
||
setEditingIdx(-1)
|
||
setMethodForm({ name: '', icon: '', payMethodType: '', payMethodName: '' })
|
||
setMethodDialogOpen(true)
|
||
}
|
||
|
||
const openEdit = (idx: number) => {
|
||
setEditingIdx(idx)
|
||
setMethodForm({ ...payMethods[idx] })
|
||
setMethodDialogOpen(true)
|
||
}
|
||
|
||
const saveMethod = () => {
|
||
if (!methodForm.name.trim())
|
||
return toast.error(t('Payment method name is required'))
|
||
if (editingIdx === -1) {
|
||
setPayMethods((prev) => [...prev, methodForm])
|
||
} else {
|
||
setPayMethods((prev) =>
|
||
prev.map((m, i) => (i === editingIdx ? methodForm : m))
|
||
)
|
||
}
|
||
setMethodDialogOpen(false)
|
||
}
|
||
|
||
const handleIconFileChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||
const file = event.target.files?.[0]
|
||
|
||
if (!file) {
|
||
return
|
||
}
|
||
|
||
const maxIconSize = 100 * 1024
|
||
|
||
if (file.size > maxIconSize) {
|
||
toast.error(t('Icon file must be 100 KB or smaller'))
|
||
event.target.value = ''
|
||
return
|
||
}
|
||
|
||
const reader = new FileReader()
|
||
reader.onload = (loadEvent) => {
|
||
setMethodForm((previous) => ({
|
||
...previous,
|
||
icon:
|
||
typeof loadEvent.target?.result === 'string'
|
||
? loadEvent.target.result
|
||
: '',
|
||
}))
|
||
}
|
||
reader.readAsDataURL(file)
|
||
event.target.value = ''
|
||
}
|
||
|
||
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')}
|
||
</h3>
|
||
<p className='text-muted-foreground text-sm'>
|
||
{t(
|
||
'Payment aggregator mode — onboard with your own registered company (offshore entity). Built for Enterprise.'
|
||
)}
|
||
</p>
|
||
</div>
|
||
<Alert>
|
||
<AlertDescription className='text-xs'>
|
||
{t(
|
||
'Obtain the API key, merchant ID, and RSA key pair from the Waffo dashboard, and configure the callback URL.'
|
||
)}
|
||
</AlertDescription>
|
||
</Alert>
|
||
|
||
<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'>
|
||
<div className='grid gap-1.5'>
|
||
<Label>{t('API Key (Production)')}</Label>
|
||
<Input type='password' {...form.register('WaffoApiKey')} />
|
||
</div>
|
||
<div className='grid gap-1.5'>
|
||
<Label>{t('API Key (Sandbox)')}</Label>
|
||
<Input type='password' {...form.register('WaffoSandboxApiKey')} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className='grid gap-1.5'>
|
||
<Label>{t('Merchant ID')}</Label>
|
||
<Input {...form.register('WaffoMerchantId')} />
|
||
</div>
|
||
|
||
<div className='grid grid-cols-2 gap-4'>
|
||
<div className='grid gap-1.5'>
|
||
<Label>{t('RSA Private Key (Production)')}</Label>
|
||
<Textarea
|
||
rows={3}
|
||
{...form.register('WaffoPrivateKey')}
|
||
className='font-mono text-xs'
|
||
/>
|
||
</div>
|
||
<div className='grid gap-1.5'>
|
||
<Label>{t('RSA Private Key (Sandbox)')}</Label>
|
||
<Textarea
|
||
rows={3}
|
||
{...form.register('WaffoSandboxPrivateKey')}
|
||
className='font-mono text-xs'
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='grid grid-cols-2 gap-4'>
|
||
<div className='grid gap-1.5'>
|
||
<Label>{t('Waffo Public Key (Production)')}</Label>
|
||
<Textarea
|
||
rows={3}
|
||
{...form.register('WaffoPublicCert')}
|
||
className='font-mono text-xs'
|
||
/>
|
||
</div>
|
||
<div className='grid gap-1.5'>
|
||
<Label>{t('Waffo Public Key (Sandbox)')}</Label>
|
||
<Textarea
|
||
rows={3}
|
||
{...form.register('WaffoSandboxPublicCert')}
|
||
className='font-mono text-xs'
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='grid grid-cols-3 gap-4'>
|
||
<div className='grid gap-1.5'>
|
||
<Label>{t('Currency')}</Label>
|
||
<Input {...form.register('WaffoCurrency')} disabled />
|
||
</div>
|
||
<div className='grid gap-1.5'>
|
||
<Label>{t('Unit price (USD)')}</Label>
|
||
<Input
|
||
type='number'
|
||
step={0.1}
|
||
min={0}
|
||
{...form.register('WaffoUnitPrice')}
|
||
/>
|
||
</div>
|
||
<div className='grid gap-1.5'>
|
||
<Label>{t('Minimum top-up quantity')}</Label>
|
||
<Input type='number' min={1} {...form.register('WaffoMinTopUp')} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className='grid grid-cols-2 gap-4'>
|
||
<div className='grid gap-1.5'>
|
||
<Label>{t('Callback notification URL')}</Label>
|
||
<Input
|
||
placeholder='https://example.com/api/waffo/webhook'
|
||
{...form.register('WaffoNotifyUrl')}
|
||
/>
|
||
</div>
|
||
<div className='grid gap-1.5'>
|
||
<Label>{t('Payment return URL')}</Label>
|
||
<Input
|
||
placeholder='https://example.com/console/topup'
|
||
{...form.register('WaffoReturnUrl')}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<Separator />
|
||
|
||
<div className='flex items-center justify-between'>
|
||
<h4 className='font-medium'>{t('Payment Methods')}</h4>
|
||
<Button variant='outline' size='sm' onClick={openAdd}>
|
||
<Plus className='mr-1 h-3 w-3' />
|
||
{t('Add payment method')}
|
||
</Button>
|
||
</div>
|
||
|
||
<div className='rounded-md border'>
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>{t('Display name')}</TableHead>
|
||
<TableHead>{t('Icon')}</TableHead>
|
||
<TableHead>{t('Payment method type')}</TableHead>
|
||
<TableHead>{t('Payment method name')}</TableHead>
|
||
<TableHead className='text-right'>{t('Actions')}</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{payMethods.length === 0 ? (
|
||
<TableRow>
|
||
<TableCell
|
||
colSpan={5}
|
||
className='text-muted-foreground py-8 text-center'
|
||
>
|
||
{t('No payment methods configured')}
|
||
</TableCell>
|
||
</TableRow>
|
||
) : (
|
||
payMethods.map((m, idx) => (
|
||
<TableRow key={idx}>
|
||
<TableCell>{m.name}</TableCell>
|
||
<TableCell>
|
||
{m.icon ? (
|
||
<img
|
||
src={m.icon}
|
||
alt={m.name}
|
||
className='h-6 w-6 rounded object-contain'
|
||
/>
|
||
) : (
|
||
<span className='text-muted-foreground'>-</span>
|
||
)}
|
||
</TableCell>
|
||
<TableCell>{m.payMethodType || '-'}</TableCell>
|
||
<TableCell>{m.payMethodName || '-'}</TableCell>
|
||
<TableCell className='text-right'>
|
||
<div className='flex justify-end gap-1'>
|
||
<Button
|
||
variant='ghost'
|
||
size='icon'
|
||
className='h-7 w-7'
|
||
onClick={() => openEdit(idx)}
|
||
>
|
||
<Pencil className='h-3 w-3' />
|
||
</Button>
|
||
<Button
|
||
variant='ghost'
|
||
size='icon'
|
||
className='h-7 w-7'
|
||
onClick={() =>
|
||
setPayMethods((prev) =>
|
||
prev.filter((_, i) => i !== idx)
|
||
)
|
||
}
|
||
>
|
||
<Trash2 className='h-3 w-3' />
|
||
</Button>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
))
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
</div>
|
||
|
||
<Dialog open={methodDialogOpen} onOpenChange={setMethodDialogOpen}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>
|
||
{editingIdx === -1
|
||
? t('Add payment method')
|
||
: t('Edit payment method')}
|
||
</DialogTitle>
|
||
</DialogHeader>
|
||
<div className='space-y-3'>
|
||
<div className='grid gap-1.5'>
|
||
<Label>{t('Display name')} *</Label>
|
||
<Input
|
||
value={methodForm.name}
|
||
onChange={(e) =>
|
||
setMethodForm((p) => ({ ...p, name: e.target.value }))
|
||
}
|
||
/>
|
||
</div>
|
||
<div className='grid gap-2'>
|
||
<Label>{t('Icon')}</Label>
|
||
<div className='flex items-center gap-3'>
|
||
{methodForm.icon ? (
|
||
<img
|
||
src={methodForm.icon}
|
||
alt={methodForm.name || t('Icon')}
|
||
className='h-10 w-10 rounded border object-contain p-1'
|
||
/>
|
||
) : (
|
||
<div className='bg-muted text-muted-foreground flex h-10 w-10 items-center justify-center rounded border text-xs'>
|
||
{t('Icon')}
|
||
</div>
|
||
)}
|
||
<input
|
||
ref={iconFileInputRef}
|
||
type='file'
|
||
accept='image/png,image/jpeg,image/svg+xml,image/webp'
|
||
className='hidden'
|
||
onChange={handleIconFileChange}
|
||
/>
|
||
<Button
|
||
type='button'
|
||
variant='outline'
|
||
onClick={() => iconFileInputRef.current?.click()}
|
||
>
|
||
{t('Upload')}
|
||
</Button>
|
||
{methodForm.icon ? (
|
||
<Button
|
||
type='button'
|
||
variant='outline'
|
||
onClick={() =>
|
||
setMethodForm((previous) => ({
|
||
...previous,
|
||
icon: '',
|
||
}))
|
||
}
|
||
>
|
||
{t('Clear')}
|
||
</Button>
|
||
) : null}
|
||
</div>
|
||
<p className='text-muted-foreground text-xs'>
|
||
{t(
|
||
'Supports PNG, JPG, SVG, or WebP. Recommended size: 128×128 or smaller.'
|
||
)}
|
||
</p>
|
||
</div>
|
||
<div className='grid gap-1.5'>
|
||
<Label>{t('Payment method type')}</Label>
|
||
<Input
|
||
value={methodForm.payMethodType}
|
||
onChange={(e) =>
|
||
setMethodForm((p) => ({
|
||
...p,
|
||
payMethodType: e.target.value,
|
||
}))
|
||
}
|
||
placeholder='CREDITCARD,DEBITCARD'
|
||
/>
|
||
</div>
|
||
<div className='grid gap-1.5'>
|
||
<Label>{t('Payment method name')}</Label>
|
||
<Input
|
||
value={methodForm.payMethodName}
|
||
onChange={(e) =>
|
||
setMethodForm((p) => ({
|
||
...p,
|
||
payMethodName: e.target.value,
|
||
}))
|
||
}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<DialogFooter>
|
||
<Button
|
||
variant='outline'
|
||
onClick={() => setMethodDialogOpen(false)}
|
||
>
|
||
{t('Cancel')}
|
||
</Button>
|
||
<Button onClick={saveMethod}>{t('Confirm')}</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</>
|
||
)
|
||
}
|