feat: deposit — history page, card info, cancel button, webhook notice, online booking email
- Migration 060: card_last4, card_brand columns in booking_deposits - Backend: webhook saves card brand/last4 from YooKassa notification - Backend: GET /api/hotels/:slug/deposits — payment history with guest/room info - Backend: DELETE /api/hotels/:slug/bookings/:bookingId/deposit — cancel hold_created or paid_cash deposit - Backend: auto-create YooKassa hold + send deposit email for source='online' bookings - Frontend: DepositHistoryPage with filters, card display, retention reasons - Frontend: deposit cancel button for hold_created and paid_cash states - Frontend: show card last4/brand in hold_confirmed status - Frontend: release form presets (full return / hold all) + improved UX - Frontend: webhook setup instructions in DepositSettingsPage - Frontend: "История платежей" link in deposit settings header Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
165
src/pages/DepositHistoryPage.tsx
Normal file
165
src/pages/DepositHistoryPage.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Loader2, ShieldCheck, CreditCard, Banknote, RefreshCw } from 'lucide-react'
|
||||
import { api, type BookingDeposit } from '../lib/api'
|
||||
import { useAuth } from '../contexts/AuthContext'
|
||||
import { cn, formatCurrency } from '../lib/utils'
|
||||
import { format } from 'date-fns'
|
||||
|
||||
const STATUS_LABEL: Record<string, { label: string; cls: string }> = {
|
||||
hold_created: { label: 'Ожидает оплаты', cls: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400' },
|
||||
hold_confirmed: { label: 'Холд подтверждён', cls: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400' },
|
||||
paid_cash: { label: 'Наличными', cls: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400' },
|
||||
captured: { label: 'Списано', cls: 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300' },
|
||||
refunded: { label: 'Возвращён', cls: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' },
|
||||
cancelled: { label: 'Отменён', cls: 'bg-slate-100 text-slate-500 dark:bg-slate-700 dark:text-slate-400' },
|
||||
}
|
||||
|
||||
export function DepositHistoryPage() {
|
||||
const { user } = useAuth()
|
||||
const slug = user?.hotelSlug ?? ''
|
||||
|
||||
const [deposits, setDeposits] = useState<BookingDeposit[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [filter, setFilter] = useState<string>('all')
|
||||
|
||||
const load = () => {
|
||||
if (!slug) return
|
||||
setLoading(true)
|
||||
api.deposits.history(slug)
|
||||
.then(setDeposits)
|
||||
.catch(() => setDeposits([]))
|
||||
.finally(() => setLoading(false))
|
||||
}
|
||||
|
||||
useEffect(() => { load() }, [slug])
|
||||
|
||||
const filtered = filter === 'all'
|
||||
? deposits
|
||||
: deposits.filter(d => d.status === filter)
|
||||
|
||||
return (
|
||||
<div className="p-4 md:p-6 space-y-5 max-w-4xl">
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
<h1 className="text-xl font-bold text-slate-900 dark:text-slate-100 flex items-center gap-2">
|
||||
<ShieldCheck size={22} className="text-brand-600" />
|
||||
История депозитов
|
||||
</h1>
|
||||
<button
|
||||
onClick={load}
|
||||
className="btn-secondary flex items-center gap-1.5 text-sm"
|
||||
>
|
||||
<RefreshCw size={14} />
|
||||
Обновить
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filter tabs */}
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{[
|
||||
{ id: 'all', label: 'Все' },
|
||||
{ id: 'hold_created', label: 'Ожидают' },
|
||||
{ id: 'hold_confirmed', label: 'Холд' },
|
||||
{ id: 'paid_cash', label: 'Наличные' },
|
||||
{ id: 'captured', label: 'Списаны' },
|
||||
{ id: 'refunded', label: 'Возвращены' },
|
||||
].map(f => (
|
||||
<button
|
||||
key={f.id}
|
||||
onClick={() => setFilter(f.id)}
|
||||
className={cn(
|
||||
'px-3 py-1.5 rounded-lg text-xs font-medium transition-colors',
|
||||
filter === f.id
|
||||
? 'bg-brand-600 text-white'
|
||||
: 'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-600',
|
||||
)}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-10">
|
||||
<Loader2 size={24} className="animate-spin text-brand-600" />
|
||||
</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<p className="text-sm text-slate-400 dark:text-slate-500 py-8 text-center">
|
||||
Нет депозитов
|
||||
</p>
|
||||
) : (
|
||||
<div className="card overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-100 dark:border-slate-700 text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wide">
|
||||
<th className="text-left px-4 py-3 font-medium">Дата</th>
|
||||
<th className="text-left px-4 py-3 font-medium">Номер</th>
|
||||
<th className="text-left px-4 py-3 font-medium">Гость</th>
|
||||
<th className="text-left px-4 py-3 font-medium">Метод</th>
|
||||
<th className="text-right px-4 py-3 font-medium">Сумма</th>
|
||||
<th className="text-left px-4 py-3 font-medium">Статус</th>
|
||||
<th className="text-right px-4 py-3 font-medium">Удержано</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-50 dark:divide-slate-800">
|
||||
{filtered.map(dep => {
|
||||
const st = STATUS_LABEL[dep.status] ?? { label: dep.status, cls: 'bg-slate-100 text-slate-600' }
|
||||
return (
|
||||
<tr key={dep.id} className="hover:bg-slate-50 dark:hover:bg-slate-800/40 transition-colors">
|
||||
<td className="px-4 py-3 text-slate-600 dark:text-slate-300 whitespace-nowrap">
|
||||
{format(new Date(dep.createdAt), 'dd.MM.yyyy')}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-700 dark:text-slate-200 font-medium whitespace-nowrap">
|
||||
{dep.roomNumber ? `№${dep.roomNumber}` : '—'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-700 dark:text-slate-200">
|
||||
<div>{dep.guestName ?? '—'}</div>
|
||||
{dep.guestEmail && (
|
||||
<div className="text-xs text-slate-400">{dep.guestEmail}</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 whitespace-nowrap">
|
||||
{dep.paymentMethod === 'yookassa_hold' ? (
|
||||
<div className="flex items-center gap-1.5 text-slate-600 dark:text-slate-300">
|
||||
<CreditCard size={13} />
|
||||
<span>
|
||||
{dep.cardBrand ? `${dep.cardBrand} ` : ''}
|
||||
{dep.cardLast4 ? `•••• ${dep.cardLast4}` : 'ЮКасса'}
|
||||
</span>
|
||||
</div>
|
||||
) : dep.paymentMethod === 'cash' ? (
|
||||
<div className="flex items-center gap-1.5 text-slate-600 dark:text-slate-300">
|
||||
<Banknote size={13} />
|
||||
<span>Наличные</span>
|
||||
</div>
|
||||
) : '—'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right font-medium text-slate-900 dark:text-slate-100 whitespace-nowrap">
|
||||
{formatCurrency(dep.amount)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={cn('inline-flex items-center text-xs px-2 py-0.5 rounded-full font-medium', st.cls)}>
|
||||
{st.label}
|
||||
</span>
|
||||
{dep.retentionReason && (
|
||||
<div className="text-xs text-slate-400 mt-0.5 max-w-[160px] truncate" title={dep.retentionReason}>
|
||||
{dep.retentionReason}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-slate-600 dark:text-slate-300 whitespace-nowrap">
|
||||
{dep.capturedAmount != null && dep.capturedAmount > 0
|
||||
? formatCurrency(dep.capturedAmount)
|
||||
: dep.status === 'refunded' ? '0 ₽' : '—'}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user