import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { useTranslation } from '@/hooks/use-translation'; import AppLayout from '@/layouts/app-layout'; import { ClicToPayTransactionDetail, type BreadcrumbItem } from '@/types'; import { Head, Link, router, usePage } from '@inertiajs/react'; import { ArrowLeft, Copy, ExternalLink, RefreshCw, Undo2 } from 'lucide-react'; import { useEffect, useState } from 'react'; import { toast } from 'sonner'; interface PageProps { transaction: ClicToPayTransactionDetail; canRefund: boolean; flash?: { type: string; message: string }; [key: string]: unknown; } type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline'; function statusBadgeProps(status: string): { variant: BadgeVariant; className: string } { switch (status) { case 'paid': return { variant: 'default', className: 'border-transparent bg-green-600 text-white' }; case 'declined': case 'failed': case 'init_failed': return { variant: 'destructive', className: '' }; case 'refunded': return { variant: 'default', className: 'border-transparent bg-blue-600 text-white' }; default: return { variant: 'secondary', className: 'border-transparent bg-amber-100 text-amber-800' }; } } function formatDate(value: string | null): string { if (!value) return '—'; const d = new Date(value); return Number.isNaN(d.getTime()) ? '—' : d.toLocaleString(); } export default function Show() { const { t } = useTranslation(); const { transaction: txn, canRefund, flash } = usePage().props; const [refundOpen, setRefundOpen] = useState(false); const [refundAmount, setRefundAmount] = useState(''); const [refunding, setRefunding] = useState(false); const breadcrumbs: BreadcrumbItem[] = [ { title: t('clictopay', 'title'), href: '/paiements/en-ligne' }, { title: t('clictopay', 'detail_title'), href: `/paiements/en-ligne/${txn.id}` }, ]; useEffect(() => { if (flash?.type === 'success') toast.success(flash.message); else if (flash?.type === 'error') toast.error(flash.message); }, [flash]); const { variant, className } = statusBadgeProps(txn.status); const copyLink = () => { if (!txn.form_url) return; navigator.clipboard.writeText(txn.form_url); toast.success(t('clictopay', 'copied')); }; const handleRefresh = () => { router.post(route('clictopay.refresh', txn.id), {}, { preserveScroll: true }); }; const handleRefund = () => { setRefunding(true); router.post( route('clictopay.refund', txn.id), refundAmount ? { amount: refundAmount } : {}, { preserveScroll: true, onFinish: () => setRefunding(false), onSuccess: () => { setRefundOpen(false); setRefundAmount(''); }, }, ); }; const detailRow = (label: string, value: React.ReactNode) => (

{label} {value ?? '—'}

); return (

{t('clictopay', 'title')}

{txn.amount.toFixed(3)} TND {t('clictopay', `status_${txn.status}`)}

{canRefund && txn.status === 'paid' && ( )}

{t('clictopay', 'col_order_number')}: {txn.order_number}

{txn.form_url && (

{t('clictopay', 'payment_link')}


                                        {txn.form_url}

)} {(txn.error_code || txn.error_message) && ( {t('clictopay', 'error')} {txn.error_code && [{txn.error_code}] } {txn.error_message} )} {t('clictopay', 'created_information')} {detailRow(t('clictopay', 'gateway_order_id'), txn.order_id)} {detailRow(t('clictopay', 'order_status_code'), txn.order_status_code)} {detailRow(t('clictopay', 'action_code'), txn.action_code_description ?? txn.action_code)} {detailRow(t('clictopay', 'approval_code'), txn.approval_code)} {detailRow(t('clictopay', 'masked_pan'), txn.masked_pan)} {detailRow(t('clictopay', 'cardholder'), txn.cardholder_name)} {detailRow(t('clictopay', 'payer_ip'), txn.payer_ip)} {detailRow(t('clictopay', 'eci'), txn.eci)} {detailRow(t('clictopay', 'description'), txn.description)} {detailRow(t('clictopay', 'col_created_by'), txn.created_by)} {detailRow(t('clictopay', 'col_created_at'), formatDate(txn.created_at))} {detailRow(t('clictopay', 'col_paid_at'), formatDate(txn.paid_at))} {detailRow(t('clictopay', 'expires_at'), formatDate(txn.expires_at))} {detailRow(t('clictopay', 'last_checked'), formatDate(txn.last_status_checked_at))} {txn.refunded_amount != null && detailRow(t('clictopay', 'refunded_amount'), `${txn.refunded_amount.toFixed(3)} TND`)} {txn.refunded_at && detailRow(t('clictopay', 'status_refunded'), formatDate(txn.refunded_at))} {txn.reservation_id && detailRow( t('clictopay', 'col_reservation'), #{txn.reservation_id} , )}

); }