revert: Remove accordion grouping + add AlertDialog
1. Reverted Accordion Grouping ✅ Problem: Payment titles are editable by users - User renames "BNI Virtual Account" to "BNI VA 2" - Grouping breaks - gateway moves to new accordion - Confusing UX when titles change Solution: Back to flat list - All payment methods in one list - Titles can be edited without breaking layout - Simpler, more predictable behavior 2. Added AlertDialog Component ✅ Installed: @radix-ui/react-alert-dialog Created: alert-dialog.tsx (shadcn pattern) Use for confirmations: - "Are you sure you want to delete?" - "Discard unsaved changes?" - "Disable payment method?" Example: <AlertDialog> <AlertDialogTrigger>Delete</AlertDialogTrigger> <AlertDialogContent> <AlertDialogHeader> <AlertDialogTitle>Are you sure?</AlertDialogTitle> <AlertDialogDescription> This action cannot be undone. </AlertDialogDescription> </AlertDialogHeader> <AlertDialogFooter> <AlertDialogCancel>Cancel</AlertDialogCancel> <AlertDialogAction>Delete</AlertDialogAction> </AlertDialogFooter> </AlertDialogContent> </AlertDialog> Shadcn Dialog Components: ✅ Dialog - Forms, settings (@radix-ui/react-dialog) ✅ Drawer - Mobile bottom sheet (vaul) ✅ AlertDialog - Confirmations (@radix-ui/react-alert-dialog) All three are official shadcn components!
This commit is contained in:
dwindown
@@ -9,7 +9,6 @@ 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';
|
||||
|
||||
@@ -116,16 +115,6 @@ 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 (
|
||||
@@ -208,87 +197,66 @@ export default function PaymentsPage() {
|
||||
)}
|
||||
</SettingsCard>
|
||||
|
||||
{/* 3rd Party Payment Methods - Grouped by provider */}
|
||||
{Object.keys(gatewaysByProvider).length > 0 && (
|
||||
{/* Online Payment Methods - Flat list */}
|
||||
{thirdPartyGateways.length > 0 && (
|
||||
<SettingsCard
|
||||
title="Online Payment Methods"
|
||||
description="Accept credit cards, digital wallets, and other online payments"
|
||||
>
|
||||
<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-5 w-5" />
|
||||
<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">
|
||||
<div className={`p-2 rounded-lg ${gateway.enabled ? 'bg-green-500/20 text-green-500' : 'bg-primary/10 text-primary'}`}>
|
||||
<CreditCard className="h-6 w-6" />
|
||||
</div>
|
||||
<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 className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="font-semibold">
|
||||
{gateway.method_title || gateway.title}
|
||||
</h3>
|
||||
</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>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
<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>
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
</SettingsCard>
|
||||
)}
|
||||
</SettingsLayout>
|
||||
|
||||
Reference in New Issue
Block a user