Jaymr/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(payment): enhance payment method configuration with icons and improve UI interactions

Browse Source
This commit is contained in:
CaIon
2026-06-17 20:47:24 +08:00
parent a2f3ac02e4
commit 2154fce094
17 changed files with 1437 additions and 904 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/system-settings/integrations/payment-method-dialog.tsx
Vendored
+99 -79
View File
@@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { useEffect, useMemo } from 'react'
import { useEffect } from 'react'
import * as z from 'zod'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
@@ -34,12 +34,13 @@ import {
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { Dialog } from '@/components/dialog'
import { ReactIconByName } from '@/components/react-icon-by-name'
const createPaymentMethodDialogSchema = (t: (key: string) => string) =>
z.object({
name: z.string().min(1, t('Payment method name is required')),
type: z.string().min(1, t('Payment method type is required')),
color: z.string().min(1, t('Color is required')),
type: z.string().min(1, t('Payment type key is required')),
icon: z.string().optional(),
min_topup: z.string().optional(),
})
@@ -52,8 +53,9 @@ const PAYMENT_METHOD_FORM_ID = 'payment-method-form'
export type PaymentMethodData = {
name: string
type: string
color: string
icon?: string
min_topup?: string
color?: string
}
type PaymentMethodDialogProps = {
@@ -63,42 +65,14 @@ type PaymentMethodDialogProps = {
editData?: PaymentMethodData | null
}
const PAYMENT_TYPES = [
{ value: 'alipay', label: 'Alipay' },
{ value: 'wxpay', label: 'WeChat Pay' },
{ value: 'stripe', label: 'Stripe' },
]
const getColorPreview = (color: string) => {
if (color.includes('var(--')) {
return null
}
return color
const PAYMENT_TYPE_ICON_NAMES: Record<string, string> = {
alipay: 'SiAlipay',
stripe: 'SiStripe',
waffo_pancake: 'LuCreditCard',
wxpay: 'SiWechat',
}
const COLOR_PRESETS = [
{ value: '#1677FF', label: 'Blue (Alipay)' },
{ value: '#07C160', label: 'Green (WeChat)' },
{ value: '#635BFF', label: 'Purple (Stripe)' },
{ value: '#1890FF', label: 'Sky Blue' },
{ value: '#52C41A', label: 'Lime Green' },
{ value: 'black', label: 'Black' },
{ value: '#FF4D4F', label: 'Red' },
{ value: '#FFA940', label: 'Orange' },
].map((preset) => {
const previewColor = getColorPreview(preset.value)
return {
...preset,
icon: previewColor ? (
<div
className='size-4 rounded border'
style={{ backgroundColor: previewColor }}
/>
) : (
<div className='bg-muted size-4 rounded border' />
),
}
})
const getDefaultIconName = (type: string) => PAYMENT_TYPE_ICON_NAMES[type] ?? ''
export function PaymentMethodDialog({
open,
@@ -109,41 +83,60 @@ export function PaymentMethodDialog({
const { t } = useTranslation()
const isEditMode = !!editData
const paymentMethodDialogSchema = createPaymentMethodDialogSchema(t)
const paymentTypeOptions = [
{
iconName: 'SiAlipay',
label: `${t('Alipay')} (Epay: alipay)`,
name: t('Alipay'),
value: 'alipay',
},
{
iconName: 'SiWechat',
label: `${t('WeChat Pay')} (Epay: wxpay)`,
name: t('WeChat Pay'),
value: 'wxpay',
},
{
iconName: 'SiStripe',
label: `${t('Stripe')} (stripe)`,
name: t('Stripe'),
value: 'stripe',
},
{
iconName: 'LuCreditCard',
label: 'Waffo Pancake (waffo_pancake)',
name: 'Waffo Pancake',
value: 'waffo_pancake',
},
]
const getPaymentTypeOption = (value: string) =>
paymentTypeOptions.find((option) => option.value === value)
const form = useForm<PaymentMethodDialogFormValues>({
resolver: zodResolver(paymentMethodDialogSchema),
defaultValues: {
name: '',
type: '',
color: '',
icon: '',
min_topup: '',
},
})
const colorValue = form.watch('color')
const colorPreview = useMemo(() => {
if (!colorValue) return null
try {
// For CSS variables like rgba(var(--semi-blue-5), 1), we can't preview accurately
// but we can detect common patterns
if (colorValue.includes('var(--')) {
return null // Can't preview CSS variables reliably
}
return colorValue
} catch {
return null
}
}, [colorValue])
const iconValue = form.watch('icon')
useEffect(() => {
if (editData) {
form.reset(editData)
form.reset({
name: editData.name,
type: editData.type,
icon: editData.icon ?? getDefaultIconName(editData.type),
min_topup: editData.min_topup ?? '',
})
} else {
form.reset({
name: '',
type: '',
color: '',
icon: '',
min_topup: '',
})
}
@@ -153,7 +146,9 @@ export function PaymentMethodDialog({
const data: PaymentMethodData = {
name: values.name,
type: values.type,
color: values.color,
}
if (values.icon && values.icon.trim() !== '') {
data.icon = values.icon.trim()
}
if (values.min_topup && values.min_topup.trim() !== '') {
data.min_topup = values.min_topup
@@ -215,19 +210,46 @@ export function PaymentMethodDialog({
name='type'
render={({ field }) => (
<FormItem>
<FormLabel>{t('Type')}</FormLabel>
<FormLabel>{t('Payment type key')}</FormLabel>
<FormControl>
<Combobox
options={PAYMENT_TYPES}
options={paymentTypeOptions}
value={field.value}
onValueChange={field.onChange}
placeholder={t('Select or enter payment type')}
searchPlaceholder={t('Search payment types...')}
onValueChange={(value) => {
if (value === null) return
const currentIcon = form.getValues('icon')?.trim()
const currentName = form.getValues('name')?.trim()
const previousOption = getPaymentTypeOption(field.value)
const nextOption = getPaymentTypeOption(value)
field.onChange(value)
if (
nextOption?.iconName &&
(!currentIcon ||
currentIcon === previousOption?.iconName)
) {
form.setValue('icon', nextOption.iconName, {
shouldDirty: true,
})
}
if (
nextOption?.name &&
(!currentName || currentName === previousOption?.name)
) {
form.setValue('name', nextOption.name, {
shouldDirty: true,
})
}
}}
placeholder={t('Select or enter payment type key')}
searchPlaceholder={t('Search payment type keys...')}
allowCustomValue
/>
</FormControl>
<FormDescription>
{t('Select from presets or type custom identifier.')}
<FormDescription className='leading-relaxed'>
{t(
'Used to decide the payment flow. Built-in keys include stripe for Stripe and waffo_pancake for Waffo Pancake; other values are sent to Epay as the type parameter.'
)}
</FormDescription>
<FormMessage />
</FormItem>
@@ -236,32 +258,30 @@ export function PaymentMethodDialog({
<FormField
control={form.control}
name='color'
name='icon'
render={({ field }) => (
<FormItem>
<FormLabel>{t('Color')}</FormLabel>
<FormLabel>{t('Icon')}</FormLabel>
<FormControl>
<div className='flex items-center gap-2'>
<Combobox
options={COLOR_PRESETS}
value={field.value}
onValueChange={field.onChange}
placeholder={t('Select or enter color value')}
searchPlaceholder={t('Search colors...')}
allowCustomValue
<Input
placeholder={t('e.g., SiAlipay')}
{...field}
className='flex-1'
/>
{colorPreview && (
<div
className='size-9 shrink-0 rounded border'
style={{ backgroundColor: colorPreview }}
title={colorPreview}
{iconValue && (
<ReactIconByName
name={iconValue}
className='text-muted-foreground size-5 shrink-0'
title={iconValue}
/>
)}
</div>
</FormControl>
<FormDescription>
{t('Select preset or enter custom CSS color value.')}
{t(
'Enter a react-icons component name. Invalid names show no icon.'
)}
</FormDescription>
<FormMessage />
</FormItem>
web/default/src/features/system-settings/integrations/payment-methods-visual-editor.tsx
Vendored
+95 -72
View File
@@ -27,6 +27,7 @@ import {
PopoverTrigger,
} from '@/components/ui/popover'
import { StaticDataTable } from '@/components/data-table'
import { ReactIconByName } from '@/components/react-icon-by-name'
import { safeJsonParseWithValidation } from '../utils/json-parser'
import { isArray } from '../utils/json-validators'
import {
@@ -39,47 +40,70 @@ type PaymentMethodsVisualEditorProps = {
onChange: (value: string) => void
}
const PAYMENT_TEMPLATES = [
{
name: 'Alipay',
template: {
color: 'rgba(var(--semi-blue-5), 1)',
name: '支付宝',
type: 'alipay',
},
},
{
name: 'WeChat Pay',
template: {
color: 'rgba(var(--semi-green-5), 1)',
name: '微信',
type: 'wxpay',
},
},
{
name: 'Stripe',
template: {
color: 'rgba(var(--semi-green-5), 1)',
name: 'Stripe',
type: 'stripe',
},
},
{
name: 'Custom',
template: {
color: 'black',
min_topup: '50',
name: '自定义1',
type: 'custom1',
},
},
]
const PAYMENT_TYPE_ICON_NAMES: Record<string, string> = {
alipay: 'SiAlipay',
stripe: 'SiStripe',
waffo_pancake: 'LuCreditCard',
wxpay: 'SiWechat',
}
function getDefaultIconName(type: string) {
return PAYMENT_TYPE_ICON_NAMES[type] ?? ''
}
function getEffectiveIconName(method: PaymentMethodData) {
return method.icon || getDefaultIconName(method.type)
}
export function PaymentMethodsVisualEditor({
value,
onChange,
}: PaymentMethodsVisualEditorProps) {
const { t } = useTranslation()
const paymentTemplates = [
{
name: t('Epay Alipay'),
template: {
icon: getDefaultIconName('alipay'),
name: '支付宝',
type: 'alipay',
},
},
{
name: t('Epay WeChat Pay'),
template: {
icon: getDefaultIconName('wxpay'),
name: '微信',
type: 'wxpay',
},
},
{
name: t('Stripe'),
template: {
icon: getDefaultIconName('stripe'),
min_topup: '10',
name: 'Stripe',
type: 'stripe',
},
},
{
name: 'Waffo Pancake',
template: {
icon: getDefaultIconName('waffo_pancake'),
name: 'Waffo Pancake',
type: 'waffo_pancake',
},
},
{
name: t('Custom Epay method'),
template: {
icon: 'LuCreditCard',
min_topup: '50',
name: '自定义1',
type: 'custom1',
},
},
]
const [searchText, setSearchText] = useState('')
const [dialogOpen, setDialogOpen] = useState(false)
const [editData, setEditData] = useState<PaymentMethodData | null>(null)
@@ -98,10 +122,11 @@ export function PaymentMethodsVisualEditor({
item !== null &&
'name' in item &&
'type' in item &&
'color' in item &&
typeof item.name === 'string' &&
typeof item.type === 'string' &&
typeof item.color === 'string'
(!('icon' in item) || typeof item.icon === 'string') &&
(!('min_topup' in item) || typeof item.min_topup === 'string') &&
(!('color' in item) || typeof item.color === 'string')
)
}, [value])
@@ -111,7 +136,8 @@ export function PaymentMethodsVisualEditor({
return paymentMethods.filter(
(method) =>
method.name.toLowerCase().includes(lowerSearch) ||
method.type.toLowerCase().includes(lowerSearch)
method.type.toLowerCase().includes(lowerSearch) ||
getEffectiveIconName(method).toLowerCase().includes(lowerSearch)
)
}, [paymentMethods, searchText])
@@ -202,14 +228,6 @@ export function PaymentMethodsVisualEditor({
}
}
const getColorPreview = (color: string) => {
// For CSS variables, show a placeholder
if (color.includes('var(--')) {
return null
}
return color
}
return (
<div className='space-y-4'>
<div className='flex flex-col gap-3 sm:flex-row sm:items-center'>
@@ -235,10 +253,10 @@ export function PaymentMethodsVisualEditor({
<PopoverContent className='w-60'>
<div className='space-y-2'>
<p className='text-muted-foreground text-xs'>
{t('Quick insert common payment methods')}
{t('Quick insert payment entries')}
</p>
<div className='space-y-1'>
{PAYMENT_TEMPLATES.map((item) => (
{paymentTemplates.map((item) => (
<Button
key={item.name}
type='button'
@@ -297,7 +315,7 @@ export function PaymentMethodsVisualEditor({
},
{
id: 'type',
header: t('Type'),
header: t('Payment type key'),
cell: (method) => (
<code className='bg-muted rounded px-1.5 py-0.5 text-sm'>
{method.type}
@@ -305,23 +323,24 @@ export function PaymentMethodsVisualEditor({
),
},
{
id: 'color',
header: t('Color'),
id: 'icon',
header: t('Icon'),
cell: (method) => {
const colorPreview = getColorPreview(method.color)
const iconName = getEffectiveIconName(method)
return (
return iconName ? (
<div className='flex items-center gap-2'>
{colorPreview && (
<div
className='size-5 shrink-0 rounded border'
style={{ backgroundColor: colorPreview }}
/>
)}
<ReactIconByName
name={iconName}
className='text-muted-foreground size-5 shrink-0'
title={iconName}
/>
<span className='text-muted-foreground truncate font-mono text-sm'>
{method.color}
{iconName}
</span>
</div>
) : (
<span className='text-muted-foreground text-sm'>—</span>
)
},
},
@@ -377,7 +396,8 @@ export function PaymentMethodsVisualEditor({
{/* Mobile card view */}
<div className='divide-y md:hidden'>
{filteredMethods.map((method, index) => {
const colorPreview = getColorPreview(method.color)
const iconName = getEffectiveIconName(method)
return (
<div key={`${method.type}-${index}`} className='p-4'>
<div className='mb-3 flex items-start justify-between'>
@@ -417,19 +437,22 @@ export function PaymentMethodsVisualEditor({
<div className='space-y-2 text-sm'>
<div className='flex items-center gap-2'>
<span className='text-muted-foreground min-w-20'>
{t('Color:')}
{t('Icon')}
</span>
<div className='flex items-center gap-2'>
{colorPreview && (
<div
className='size-5 shrink-0 rounded border'
style={{ backgroundColor: colorPreview }}
{iconName ? (
<div className='flex min-w-0 items-center gap-2'>
<ReactIconByName
name={iconName}
className='text-muted-foreground size-5 shrink-0'
title={iconName}
/>
)}
<span className='text-muted-foreground truncate font-mono text-xs'>
{method.color}
</span>
</div>
<span className='text-muted-foreground truncate font-mono text-xs'>
{iconName}
</span>
</div>
) : (
<span className='text-muted-foreground text-xs'>—</span>
)}
</div>
{method.min_topup && (
<div className='flex items-center gap-2'>
web/default/src/features/system-settings/integrations/payment-settings-section.tsx
Vendored
+741 -663
View File
File diff suppressed because it is too large Load Diff