feat: Add GenericGatewayForm component
✅ Generic form builder for payment gateways:
Features:
- Supports 8 field types: text, password, checkbox, select, textarea, number, email, url
- Auto-categorizes fields: Basic, API, Advanced
- Multi-page tabs for 20+ fields
- Single page for < 20 fields
- Unsupported field warning with link to WC settings
- Field validation (required, placeholder, etc.)
- Loading/saving states
- Dirty state detection
- Link to WC settings for complex cases
Code Quality:
- TypeScript strict mode
- ESLint clean (0 errors, 0 warnings in new file)
- Proper type safety
- Performance optimized (SUPPORTED_FIELD_TYPES outside component)
Next: Update Payments.tsx to use real API
This commit is contained in:
dwindown
330
admin-spa/src/components/settings/GenericGatewayForm.tsx
Normal file
330
admin-spa/src/components/settings/GenericGatewayForm.tsx
Normal file
@@ -0,0 +1,330 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { ExternalLink, AlertTriangle } from 'lucide-react';
|
||||
|
||||
interface GatewayField {
|
||||
id: string;
|
||||
type: string;
|
||||
title: string;
|
||||
description: string;
|
||||
default: string | boolean;
|
||||
placeholder?: string;
|
||||
required: boolean;
|
||||
options?: Record<string, string>;
|
||||
custom_attributes?: Record<string, string>;
|
||||
}
|
||||
|
||||
interface GatewaySettings {
|
||||
basic: Record<string, GatewayField>;
|
||||
api: Record<string, GatewayField>;
|
||||
advanced: Record<string, GatewayField>;
|
||||
}
|
||||
|
||||
interface GenericGatewayFormProps {
|
||||
gateway: {
|
||||
id: string;
|
||||
title: string;
|
||||
settings: GatewaySettings;
|
||||
wc_settings_url: string;
|
||||
};
|
||||
onSave: (settings: Record<string, unknown>) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
// Supported field types (outside component to avoid re-renders)
|
||||
const SUPPORTED_FIELD_TYPES = ['text', 'password', 'checkbox', 'select', 'textarea', 'number', 'email', 'url'];
|
||||
|
||||
export function GenericGatewayForm({ gateway, onSave, onCancel }: GenericGatewayFormProps) {
|
||||
const [formData, setFormData] = useState<Record<string, unknown>>({});
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [unsupportedFields, setUnsupportedFields] = useState<string[]>([]);
|
||||
|
||||
// Check for unsupported fields
|
||||
React.useEffect(() => {
|
||||
const unsupported: string[] = [];
|
||||
|
||||
const categories: Record<string, GatewayField>[] = [
|
||||
gateway.settings.basic,
|
||||
gateway.settings.api,
|
||||
gateway.settings.advanced,
|
||||
];
|
||||
|
||||
categories.forEach((category) => {
|
||||
Object.values(category).forEach((field) => {
|
||||
if (!SUPPORTED_FIELD_TYPES.includes(field.type)) {
|
||||
unsupported.push(field.title || field.id);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
setUnsupportedFields(unsupported);
|
||||
}, [gateway]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSaving(true);
|
||||
|
||||
try {
|
||||
await onSave(formData);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFieldChange = (fieldId: string, value: unknown) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[fieldId]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const renderField = (field: GatewayField) => {
|
||||
const value = formData[field.id] ?? field.default;
|
||||
|
||||
// Unsupported field type
|
||||
if (!SUPPORTED_FIELD_TYPES.includes(field.type)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
switch (field.type) {
|
||||
case 'checkbox':
|
||||
return (
|
||||
<div key={field.id} className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id={field.id}
|
||||
checked={value as boolean}
|
||||
onCheckedChange={(checked) => handleFieldChange(field.id, checked)}
|
||||
/>
|
||||
<div className="grid gap-1.5 leading-none">
|
||||
<Label
|
||||
htmlFor={field.id}
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
{field.title}
|
||||
{field.required && <span className="text-destructive ml-1">*</span>}
|
||||
</Label>
|
||||
{field.description && (
|
||||
<p className="text-sm text-muted-foreground">{field.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'select':
|
||||
return (
|
||||
<div key={field.id} className="space-y-2">
|
||||
<Label htmlFor={field.id}>
|
||||
{field.title}
|
||||
{field.required && <span className="text-destructive ml-1">*</span>}
|
||||
</Label>
|
||||
{field.description && (
|
||||
<p className="text-sm text-muted-foreground">{field.description}</p>
|
||||
)}
|
||||
<Select
|
||||
value={value as string}
|
||||
onValueChange={(val) => handleFieldChange(field.id, val)}
|
||||
>
|
||||
<SelectTrigger id={field.id}>
|
||||
<SelectValue placeholder={field.placeholder || 'Select...'} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{field.options &&
|
||||
Object.entries(field.options).map(([key, label]) => (
|
||||
<SelectItem key={key} value={key}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'textarea':
|
||||
return (
|
||||
<div key={field.id} className="space-y-2">
|
||||
<Label htmlFor={field.id}>
|
||||
{field.title}
|
||||
{field.required && <span className="text-destructive ml-1">*</span>}
|
||||
</Label>
|
||||
{field.description && (
|
||||
<p className="text-sm text-muted-foreground">{field.description}</p>
|
||||
)}
|
||||
<Textarea
|
||||
id={field.id}
|
||||
value={value as string}
|
||||
onChange={(e) => handleFieldChange(field.id, e.target.value)}
|
||||
placeholder={field.placeholder}
|
||||
required={field.required}
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
// text, password, number, email, url
|
||||
return (
|
||||
<div key={field.id} className="space-y-2">
|
||||
<Label htmlFor={field.id}>
|
||||
{field.title}
|
||||
{field.required && <span className="text-destructive ml-1">*</span>}
|
||||
</Label>
|
||||
{field.description && (
|
||||
<p className="text-sm text-muted-foreground">{field.description}</p>
|
||||
)}
|
||||
<Input
|
||||
id={field.id}
|
||||
type={field.type}
|
||||
value={value as string}
|
||||
onChange={(e) => handleFieldChange(field.id, e.target.value)}
|
||||
placeholder={field.placeholder}
|
||||
required={field.required}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const renderCategory = (category: Record<string, GatewayField>) => {
|
||||
const fields = Object.values(category);
|
||||
|
||||
if (fields.length === 0) {
|
||||
return <p className="text-sm text-muted-foreground">No settings available</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{fields.map((field) => renderField(field))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Count fields in each category
|
||||
const basicCount = Object.keys(gateway.settings.basic).length;
|
||||
const apiCount = Object.keys(gateway.settings.api).length;
|
||||
const advancedCount = Object.keys(gateway.settings.advanced).length;
|
||||
const totalFields = basicCount + apiCount + advancedCount;
|
||||
|
||||
// If 20+ fields, use tabs. Otherwise, show all in one page
|
||||
const useMultiPage = totalFields >= 20;
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Warning for unsupported fields */}
|
||||
{unsupportedFields.length > 0 && (
|
||||
<Alert>
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Some advanced settings are not supported in this interface.{' '}
|
||||
<a
|
||||
href={gateway.wc_settings_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 font-medium underline"
|
||||
>
|
||||
Configure in WooCommerce
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{useMultiPage ? (
|
||||
<Tabs defaultValue="basic" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="basic">
|
||||
Basic {basicCount > 0 && `(${basicCount})`}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="api">
|
||||
API {apiCount > 0 && `(${apiCount})`}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="advanced">
|
||||
Advanced {advancedCount > 0 && `(${advancedCount})`}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="basic" className="space-y-4 mt-4">
|
||||
{renderCategory(gateway.settings.basic)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="api" className="space-y-4 mt-4">
|
||||
{renderCategory(gateway.settings.api)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="advanced" className="space-y-4 mt-4">
|
||||
{renderCategory(gateway.settings.advanced)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{basicCount > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold mb-3">Basic Settings</h3>
|
||||
{renderCategory(gateway.settings.basic)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{apiCount > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold mb-3">API Settings</h3>
|
||||
{renderCategory(gateway.settings.api)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{advancedCount > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold mb-3">Advanced Settings</h3>
|
||||
{renderCategory(gateway.settings.advanced)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-between pt-4 border-t">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
disabled={isSaving}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
asChild
|
||||
>
|
||||
<a
|
||||
href={gateway.wc_settings_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1"
|
||||
>
|
||||
View in WooCommerce
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
|
||||
<Button type="submit" disabled={isSaving}>
|
||||
{isSaving ? 'Saving...' : 'Save Settings'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user