c7f241b30a
Translate all hardcoded English strings to use i18n translation keys: Components: - TransactionDetailModal: payment details, refunds, technical info - ConnectOnboarding/ConnectOnboardingEmbed: Stripe Connect setup - StripeApiKeysForm: API key management - DomainPurchase: domain registration flow - Sidebar: navigation labels - Schedule/Sidebar, PendingSidebar: scheduler UI - MasqueradeBanner: masquerade status - Dashboard widgets: metrics, capacity, customers, tickets - Marketing: PricingTable, PluginShowcase, BenefitsSection - ConfirmationModal, ServiceList: common UI Pages: - Staff: invitation flow, role management - Customers: form placeholders - Payments: transactions, payouts, billing - BookingSettings: URL and redirect configuration - TrialExpired: upgrade prompts and features - PlatformSettings, PlatformBusinesses: admin UI - HelpApiDocs: API documentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
552 lines
23 KiB
TypeScript
552 lines
23 KiB
TypeScript
/**
|
|
* Transaction Detail Modal
|
|
*
|
|
* Displays comprehensive transaction information and provides refund functionality.
|
|
* Supports both partial and full refunds with reason selection.
|
|
*/
|
|
|
|
import React, { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {
|
|
X,
|
|
CreditCard,
|
|
User,
|
|
Mail,
|
|
Calendar,
|
|
DollarSign,
|
|
RefreshCcw,
|
|
CheckCircle,
|
|
Clock,
|
|
XCircle,
|
|
AlertCircle,
|
|
Receipt,
|
|
ExternalLink,
|
|
Loader2,
|
|
ArrowLeftRight,
|
|
Percent,
|
|
} from 'lucide-react';
|
|
import { TransactionDetail, RefundInfo, RefundRequest } from '../api/payments';
|
|
import { useTransactionDetail, useRefundTransaction } from '../hooks/useTransactionAnalytics';
|
|
import Portal from './Portal';
|
|
|
|
interface TransactionDetailModalProps {
|
|
transactionId: number | null;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
|
|
transactionId,
|
|
onClose,
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const { data: transaction, isLoading, error } = useTransactionDetail(transactionId);
|
|
const refundMutation = useRefundTransaction();
|
|
|
|
// Refund form state
|
|
const [showRefundForm, setShowRefundForm] = useState(false);
|
|
const [refundType, setRefundType] = useState<'full' | 'partial'>('full');
|
|
const [refundAmount, setRefundAmount] = useState('');
|
|
const [refundReason, setRefundReason] = useState<RefundRequest['reason']>('requested_by_customer');
|
|
const [refundError, setRefundError] = useState<string | null>(null);
|
|
|
|
if (!transactionId) return null;
|
|
|
|
const handleRefund = async () => {
|
|
if (!transaction) return;
|
|
|
|
setRefundError(null);
|
|
|
|
const request: RefundRequest = {
|
|
reason: refundReason,
|
|
};
|
|
|
|
// For partial refunds, include the amount
|
|
if (refundType === 'partial') {
|
|
const amountCents = Math.round(parseFloat(refundAmount) * 100);
|
|
if (isNaN(amountCents) || amountCents <= 0) {
|
|
setRefundError(t('payments.enterValidRefundAmount'));
|
|
return;
|
|
}
|
|
if (amountCents > transaction.refundable_amount) {
|
|
setRefundError(t('payments.amountExceedsRefundable', { max: (transaction.refundable_amount / 100).toFixed(2) }));
|
|
return;
|
|
}
|
|
request.amount = amountCents;
|
|
}
|
|
|
|
try {
|
|
await refundMutation.mutateAsync({
|
|
transactionId: transaction.id,
|
|
request,
|
|
});
|
|
setShowRefundForm(false);
|
|
setRefundAmount('');
|
|
} catch (err: any) {
|
|
setRefundError(err.response?.data?.error || t('payments.failedToProcessRefund'));
|
|
}
|
|
};
|
|
|
|
// Status badge helper
|
|
const getStatusBadge = (status: string) => {
|
|
const styles: Record<string, { bg: string; text: string; icon: React.ReactNode }> = {
|
|
succeeded: { bg: 'bg-green-100', text: 'text-green-800', icon: <CheckCircle size={14} /> },
|
|
pending: { bg: 'bg-yellow-100', text: 'text-yellow-800', icon: <Clock size={14} /> },
|
|
failed: { bg: 'bg-red-100', text: 'text-red-800', icon: <XCircle size={14} /> },
|
|
refunded: { bg: 'bg-gray-100', text: 'text-gray-800', icon: <RefreshCcw size={14} /> },
|
|
partially_refunded: { bg: 'bg-orange-100', text: 'text-orange-800', icon: <RefreshCcw size={14} /> },
|
|
};
|
|
const style = styles[status] || styles.pending;
|
|
return (
|
|
<span className={`inline-flex items-center gap-1.5 px-3 py-1 text-sm font-medium rounded-full ${style.bg} ${style.text}`}>
|
|
{style.icon}
|
|
{status.replace('_', ' ').replace(/\b\w/g, (c) => c.toUpperCase())}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
// Format date helper
|
|
const formatDate = (dateStr: string | number) => {
|
|
const date = typeof dateStr === 'number' ? new Date(dateStr * 1000) : new Date(dateStr);
|
|
return date.toLocaleDateString('en-US', {
|
|
month: 'long',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
});
|
|
};
|
|
|
|
// Format timestamp for refunds
|
|
const formatRefundDate = (timestamp: number) => {
|
|
const date = new Date(timestamp * 1000);
|
|
return date.toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
});
|
|
};
|
|
|
|
// Get payment method display
|
|
const getPaymentMethodDisplay = () => {
|
|
if (!transaction?.payment_method_info) return null;
|
|
|
|
const pm = transaction.payment_method_info;
|
|
if (pm.type === 'card') {
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-gray-100 rounded-lg">
|
|
<CreditCard className="text-gray-600" size={20} />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-gray-900">
|
|
{pm.brand} **** {pm.last4}
|
|
</p>
|
|
{pm.exp_month && pm.exp_year && (
|
|
<p className="text-sm text-gray-500">
|
|
{t('payments.expires')} {pm.exp_month}/{pm.exp_year}
|
|
{pm.funding && ` (${pm.funding})`}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-gray-100 rounded-lg">
|
|
<DollarSign className="text-gray-600" size={20} />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-gray-900 capitalize">{pm.type.replace('_', ' ')}</p>
|
|
{pm.bank_name && <p className="text-sm text-gray-500">{pm.bank_name}</p>}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Portal>
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
|
|
<div
|
|
className="w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{/* Header */}
|
|
<div className="sticky top-0 z-10 flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
{t('payments.transactionDetails')}
|
|
</h3>
|
|
{transaction && (
|
|
<p className="text-sm text-gray-500 font-mono">
|
|
{transaction.stripe_payment_intent_id}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-6 space-y-6">
|
|
{isLoading && (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="animate-spin text-gray-400" size={32} />
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 text-red-700">
|
|
<AlertCircle size={18} />
|
|
<p className="font-medium">{t('payments.failedToLoadTransaction')}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{transaction && (
|
|
<>
|
|
{/* Status & Amount */}
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
{getStatusBadge(transaction.status)}
|
|
<p className="text-3xl font-bold text-gray-900 dark:text-white mt-2">
|
|
{transaction.amount_display}
|
|
</p>
|
|
<p className="text-sm text-gray-500">
|
|
{transaction.transaction_type.replace('_', ' ').replace(/\b\w/g, (c) => c.toUpperCase())}
|
|
</p>
|
|
</div>
|
|
{transaction.can_refund && !showRefundForm && (
|
|
<button
|
|
onClick={() => setShowRefundForm(true)}
|
|
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors"
|
|
>
|
|
<RefreshCcw size={16} />
|
|
{t('payments.issueRefund')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Refund Form */}
|
|
{showRefundForm && (
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4 space-y-4">
|
|
<div className="flex items-center gap-2 text-red-800">
|
|
<RefreshCcw size={18} />
|
|
<h4 className="font-semibold">{t('payments.issueRefund')}</h4>
|
|
</div>
|
|
|
|
{/* Refund Type */}
|
|
<div className="flex gap-4">
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
name="refundType"
|
|
checked={refundType === 'full'}
|
|
onChange={() => setRefundType('full')}
|
|
className="text-red-600 focus:ring-red-500"
|
|
/>
|
|
<span className="text-sm text-gray-700">
|
|
{t('payments.fullRefundAmount', { amount: (transaction.refundable_amount / 100).toFixed(2) })}
|
|
</span>
|
|
</label>
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
name="refundType"
|
|
checked={refundType === 'partial'}
|
|
onChange={() => setRefundType('partial')}
|
|
className="text-red-600 focus:ring-red-500"
|
|
/>
|
|
<span className="text-sm text-gray-700">{t('payments.partialRefund')}</span>
|
|
</label>
|
|
</div>
|
|
|
|
{/* Partial Amount */}
|
|
{refundType === 'partial' && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('payments.refundAmountMax', { max: (transaction.refundable_amount / 100).toFixed(2) })}
|
|
</label>
|
|
<div className="relative">
|
|
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">$</span>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
min="0.01"
|
|
max={(transaction.refundable_amount / 100).toFixed(2)}
|
|
value={refundAmount}
|
|
onChange={(e) => setRefundAmount(e.target.value)}
|
|
placeholder="0.00"
|
|
className="w-full pl-7 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Reason */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('payments.refundReason')}
|
|
</label>
|
|
<select
|
|
value={refundReason}
|
|
onChange={(e) => setRefundReason(e.target.value as RefundRequest['reason'])}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500"
|
|
>
|
|
<option value="requested_by_customer">{t('payments.requestedByCustomer')}</option>
|
|
<option value="duplicate">{t('payments.duplicate')}</option>
|
|
<option value="fraudulent">{t('payments.fraudulent')}</option>
|
|
</select>
|
|
</div>
|
|
|
|
{refundError && (
|
|
<div className="flex items-center gap-2 text-red-600 text-sm">
|
|
<AlertCircle size={16} />
|
|
{refundError}
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={handleRefund}
|
|
disabled={refundMutation.isPending}
|
|
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{refundMutation.isPending ? (
|
|
<>
|
|
<Loader2 className="animate-spin" size={16} />
|
|
{t('payments.processing')}
|
|
</>
|
|
) : (
|
|
<>
|
|
<RefreshCcw size={16} />
|
|
{t('payments.processRefund')}
|
|
</>
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setShowRefundForm(false);
|
|
setRefundError(null);
|
|
setRefundAmount('');
|
|
}}
|
|
disabled={refundMutation.isPending}
|
|
className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg"
|
|
>
|
|
{t('common.cancel')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Details Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{/* Customer Info */}
|
|
<div className="space-y-4">
|
|
<h4 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
|
<User size={16} />
|
|
{t('payments.customer')}
|
|
</h4>
|
|
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 space-y-3">
|
|
{transaction.customer_name && (
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<User size={14} className="text-gray-400" />
|
|
<span className="text-gray-900 dark:text-white font-medium">
|
|
{transaction.customer_name}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{transaction.customer_email && (
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<Mail size={14} className="text-gray-400" />
|
|
<span className="text-gray-600 dark:text-gray-300">
|
|
{transaction.customer_email}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Amount Breakdown */}
|
|
<div className="space-y-4">
|
|
<h4 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
|
<DollarSign size={16} />
|
|
{t('payments.amountBreakdown')}
|
|
</h4>
|
|
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-600">{t('payments.grossAmount')}</span>
|
|
<span className="font-medium">{transaction.amount_display}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-600">{t('payments.platformFee')}</span>
|
|
<span className="text-red-600">-{transaction.fee_display}</span>
|
|
</div>
|
|
{transaction.total_refunded > 0 && (
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-600">{t('payments.refunded')}</span>
|
|
<span className="text-orange-600">
|
|
-${(transaction.total_refunded / 100).toFixed(2)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div className="border-t border-gray-200 dark:border-gray-600 pt-2 mt-2 flex justify-between">
|
|
<span className="font-medium text-gray-900 dark:text-white">{t('payments.netAmount')}</span>
|
|
<span className="font-bold text-green-600">
|
|
${(transaction.net_amount / 100).toFixed(2)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Payment Method */}
|
|
{transaction.payment_method_info && (
|
|
<div className="space-y-4">
|
|
<h4 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
|
<CreditCard size={16} />
|
|
{t('payments.paymentMethod')}
|
|
</h4>
|
|
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
|
|
{getPaymentMethodDisplay()}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Description */}
|
|
{transaction.description && (
|
|
<div className="space-y-4">
|
|
<h4 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
|
<Receipt size={16} />
|
|
{t('payments.description')}
|
|
</h4>
|
|
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
|
|
<p className="text-gray-700 dark:text-gray-300">{transaction.description}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Refund History */}
|
|
{transaction.refunds && transaction.refunds.length > 0 && (
|
|
<div className="space-y-4">
|
|
<h4 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
|
<RefreshCcw size={16} />
|
|
{t('payments.refundHistory')}
|
|
</h4>
|
|
<div className="space-y-3">
|
|
{transaction.refunds.map((refund: RefundInfo) => (
|
|
<div
|
|
key={refund.id}
|
|
className="bg-orange-50 border border-orange-200 rounded-lg p-4 flex items-center justify-between"
|
|
>
|
|
<div>
|
|
<p className="font-medium text-orange-800">{refund.amount_display}</p>
|
|
<p className="text-sm text-orange-600">
|
|
{refund.reason
|
|
? refund.reason.replace('_', ' ').replace(/\b\w/g, (c) => c.toUpperCase())
|
|
: t('payments.noReasonProvided')}
|
|
</p>
|
|
<p className="text-xs text-orange-500 mt-1">
|
|
{formatRefundDate(refund.created)}
|
|
</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className={`inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full ${
|
|
refund.status === 'succeeded'
|
|
? 'bg-green-100 text-green-800'
|
|
: 'bg-yellow-100 text-yellow-800'
|
|
}`}>
|
|
{refund.status === 'succeeded' ? (
|
|
<CheckCircle size={12} />
|
|
) : (
|
|
<Clock size={12} />
|
|
)}
|
|
{refund.status}
|
|
</span>
|
|
<p className="text-xs text-gray-500 mt-1 font-mono">{refund.id}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Timeline */}
|
|
<div className="space-y-4">
|
|
<h4 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
|
<Calendar size={16} />
|
|
{t('payments.timeline')}
|
|
</h4>
|
|
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 space-y-3">
|
|
<div className="flex items-center gap-3 text-sm">
|
|
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
|
<span className="text-gray-600">{t('payments.created')}</span>
|
|
<span className="ml-auto text-gray-900 dark:text-white">
|
|
{formatDate(transaction.created_at)}
|
|
</span>
|
|
</div>
|
|
{transaction.updated_at !== transaction.created_at && (
|
|
<div className="flex items-center gap-3 text-sm">
|
|
<div className="w-2 h-2 bg-blue-500 rounded-full"></div>
|
|
<span className="text-gray-600">{t('payments.lastUpdated')}</span>
|
|
<span className="ml-auto text-gray-900 dark:text-white">
|
|
{formatDate(transaction.updated_at)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Technical Details */}
|
|
<div className="space-y-4">
|
|
<h4 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
|
<ArrowLeftRight size={16} />
|
|
{t('payments.technicalDetails')}
|
|
</h4>
|
|
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 space-y-2 font-mono text-xs">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">{t('payments.paymentIntent')}</span>
|
|
<span className="text-gray-700 dark:text-gray-300">
|
|
{transaction.stripe_payment_intent_id}
|
|
</span>
|
|
</div>
|
|
{transaction.stripe_charge_id && (
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">{t('payments.chargeId')}</span>
|
|
<span className="text-gray-700 dark:text-gray-300">
|
|
{transaction.stripe_charge_id}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">{t('payments.transactionId')}</span>
|
|
<span className="text-gray-700 dark:text-gray-300">{transaction.id}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">{t('payments.currency')}</span>
|
|
<span className="text-gray-700 dark:text-gray-300 uppercase">
|
|
{transaction.currency}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Portal>
|
|
);
|
|
};
|
|
|
|
export default TransactionDetailModal;
|