feat: Remove enabled checkbox + group payments by provider
1. Remove Enable/Disable Checkbox ✅ - Already controlled by toggle in main UI - Skip rendering 'enabled' field in GenericGatewayForm - Cleaner form, less redundancy 2. Use Field Default as Default Value ✅ - Already working: field.value ?? field.default - Backend sends current value, falls back to default - No changes needed 3. Group Online Payments by Provider ✅ - Installed @radix-ui/react-accordion - Created accordion.tsx component - Group by gateway.title (provider name) - Show provider with method count - Expand to see individual methods Structure: TriPay (3 payment methods) ├─ BNI Virtual Account ├─ Mandiri Virtual Account └─ BCA Virtual Account PayPal (1 payment method) └─ PayPal Benefits: - Cleaner UI with less clutter - Easy to find specific provider - Shows method count at a glance - Multiple providers can be expanded - Better organization for many gateways Files Modified: - GenericGatewayForm.tsx: Skip enabled field - Payments.tsx: Accordion grouping by provider - accordion.tsx: New component (shadcn pattern) Next: Dialog/Drawer responsive pattern
This commit is contained in:
dwindown
@@ -9,6 +9,7 @@ import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
|
||||
import { CreditCard, Banknote, Settings, RefreshCw, ExternalLink, Loader2, AlertTriangle } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
@@ -115,6 +116,16 @@ export default function PaymentsPage() {
|
||||
const manualGateways = gateways.filter((g: PaymentGateway) => g.type === 'manual');
|
||||
// Combine provider and other into single "3rd party" category
|
||||
const thirdPartyGateways = gateways.filter((g: PaymentGateway) => g.type === 'provider' || g.type === 'other');
|
||||
|
||||
// Group third party gateways by provider (title)
|
||||
const gatewaysByProvider = thirdPartyGateways.reduce((acc: Record<string, PaymentGateway[]>, gateway: PaymentGateway) => {
|
||||
const provider = gateway.title || 'Other';
|
||||
if (!acc[provider]) {
|
||||
acc[provider] = [];
|
||||
}
|
||||
acc[provider].push(gateway);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
@@ -197,70 +208,87 @@ export default function PaymentsPage() {
|
||||
)}
|
||||
</SettingsCard>
|
||||
|
||||
{/* 3rd Party Payment Methods - All online payment gateways */}
|
||||
{thirdPartyGateways.length > 0 && (
|
||||
{/* 3rd Party Payment Methods - Grouped by provider */}
|
||||
{Object.keys(gatewaysByProvider).length > 0 && (
|
||||
<SettingsCard
|
||||
title="Online Payment Methods"
|
||||
description="Accept credit cards, digital wallets, and other online payments"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{thirdPartyGateways.map((gateway: PaymentGateway) => (
|
||||
<div
|
||||
key={gateway.id}
|
||||
className="border rounded-lg p-4 hover:border-primary/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-4 flex-1">
|
||||
<Accordion type="multiple" className="w-full">
|
||||
{(Object.entries(gatewaysByProvider) as [string, PaymentGateway[]][]).map(([provider, providerGateways]) => (
|
||||
<AccordionItem key={provider} value={provider}>
|
||||
<AccordionTrigger className="hover:no-underline">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-primary/10 rounded-lg text-primary">
|
||||
<CreditCard className="h-6 w-6" />
|
||||
<CreditCard className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="font-semibold">{gateway.method_title || gateway.title}</h3>
|
||||
{gateway.enabled ? (
|
||||
<Badge variant="default" className="bg-green-500">
|
||||
● Enabled
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary">○ Disabled</Badge>
|
||||
)}
|
||||
<div className="text-left">
|
||||
<h3 className="font-semibold">{provider}</h3>
|
||||
<p className="text-sm text-muted-foreground font-normal">
|
||||
{providerGateways.length} payment {providerGateways.length === 1 ? 'method' : 'methods'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<div className="space-y-3 pt-2">
|
||||
{providerGateways.map((gateway: PaymentGateway) => (
|
||||
<div
|
||||
key={gateway.id}
|
||||
className="border rounded-lg p-4 hover:border-primary/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-4 flex-1">
|
||||
<div className={`p-2 rounded-lg ${gateway.enabled ? 'bg-green-500/20 text-green-500' : 'bg-muted text-muted-foreground'}`}>
|
||||
<CreditCard className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4 className="font-medium">
|
||||
{gateway.method_title}
|
||||
</h4>
|
||||
</div>
|
||||
{gateway.method_description && (
|
||||
<p className="text-sm text-muted-foreground mb-2">
|
||||
{gateway.method_description}
|
||||
</p>
|
||||
)}
|
||||
{!gateway.requirements.met && (
|
||||
<Alert variant="destructive" className="mt-2">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Requirements not met: {gateway.requirements.missing.join(', ')}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-0">
|
||||
{gateway.enabled && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleManageGateway(gateway)}
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
<ToggleField
|
||||
id={gateway.id}
|
||||
label=""
|
||||
checked={gateway.enabled}
|
||||
onCheckedChange={(checked) => handleToggle(gateway.id, checked)}
|
||||
disabled={!gateway.requirements.met || togglingGateway === gateway.id}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{gateway.method_description && (
|
||||
<p className="text-sm text-muted-foreground mb-2">
|
||||
{gateway.method_description}
|
||||
</p>
|
||||
)}
|
||||
{!gateway.requirements.met && (
|
||||
<Alert variant="destructive" className="mt-2">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Requirements not met: {gateway.requirements.missing.join(', ')}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleManageGateway(gateway)}
|
||||
>
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
Manage
|
||||
</Button>
|
||||
<ToggleField
|
||||
id={gateway.id}
|
||||
label=""
|
||||
checked={gateway.enabled}
|
||||
onCheckedChange={(checked) => handleToggle(gateway.id, checked)}
|
||||
disabled={!gateway.requirements.met || togglingGateway === gateway.id}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</div>
|
||||
</Accordion>
|
||||
</SettingsCard>
|
||||
)}
|
||||
</SettingsLayout>
|
||||
@@ -268,7 +296,7 @@ export default function PaymentsPage() {
|
||||
{/* Gateway Settings Modal */}
|
||||
{selectedGateway && (
|
||||
<Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] flex flex-col p-0 gap-0">
|
||||
<DialogContent className="max-w-2xl max-h-[100vh] flex flex-col p-0 gap-0">
|
||||
<DialogHeader className="px-6 pt-6 pb-4 border-b shrink-0">
|
||||
<DialogTitle>{selectedGateway.title} Settings</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
Reference in New Issue
Block a user