golomazov/hotelsync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: deposit release lock + billing fixes + centralized payment gateway

Browse Source 
- Add releaseRequiresCheckout toggle in DepositSettingsPage (UI + payload)
- Migration 066: release_requires_checkout column on hotel_deposit_settings
- Migration 065: hotel_payment_gateways table for centralized YooKassa config
- Block deposit release buttons when releaseRequiresCheckout && not checked_out
- Fix billing calculation: use Number() to prevent PostgreSQL NUMERIC string concat
- Fix minibar billing: show current price (JOIN minibar_items.price) not recorded price
- Auto-poll deposit status every 5s while hold_created; clear QR message on confirmation
- Add billing/folio tab in BookingDetailPanel (room charges + minibar + payments + balance)
- PaymentSettingsPage: new "Онлайн-оплата (ЮКасса)" section with gateway CRUD
- DepositSettingsPage: replace YooKassa fields with link to centralized payment settings
- BookingWidgetPage: connect to real API, gateway status banner, async booking submission
- New backend routes: paymentGateways, publicWidget
- YooKassa service: add createCharge() for immediate payment (online bookings)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HotelSync
2026-04-06 20:47:52 +03:00
parent 6859817bdf
commit bddfa355f2
6 changed files with 62 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/bookings/BookingDetailPanel.tsx
View File

@@ -60,7 +60,7 @@ const DOCUMENTS = [
type ReleaseItem = { id: string; name: string; amount: string }
function DepositWidget({ slug, bookingId, onDepositChange }: { slug: string; bookingId: string; onDepositChange?: (d: BookingDeposit | null) => void }) {
function DepositWidget({ slug, bookingId, bookingStatus, onDepositChange }: { slug: string; bookingId: string; bookingStatus: string; onDepositChange?: (d: BookingDeposit | null) => void }) {
const [depositSettings, setDepositSettings] = useState<DepositSettings | null>(null)
const [deposit, setDeposit] = useState<BookingDeposit | null>(null)
const [depositLoading, setDepositLoading] = useState(true)
@@ -197,6 +197,7 @@ function DepositWidget({ slug, bookingId, onDepositChange }: { slug: string; boo
if (!depositSettings?.isEnabled) return null
const badgeBase = 'inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full font-medium'
const releaseBlocked = depositSettings?.releaseRequiresCheckout && bookingStatus !== 'checked_out'
return (
<div>
@@ -285,12 +286,18 @@ function DepositWidget({ slug, bookingId, onDepositChange }: { slug: string; boo
</span>
<p className="text-xs text-slate-600 dark:text-slate-300">{formatCurrency(deposit.amount)}</p>
{!showReleaseForm && (
<button
onClick={() => setShowReleaseForm(true)}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-xs font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-600 transition-colors"
>
Вернуть / Списать депозит
</button>
releaseBlocked ? (
<p className="text-xs text-amber-600 dark:text-amber-400 flex items-center gap-1">
<Ban size={11} /> Возврат заблокирован до выезда
</p>
) : (
<button
onClick={() => setShowReleaseForm(true)}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-xs font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-600 transition-colors"
>
Вернуть / Списать депозит
</button>
)
)}
</div>
)}
@@ -312,12 +319,18 @@ function DepositWidget({ slug, bookingId, onDepositChange }: { slug: string; boo
<p className="text-xs text-slate-600 dark:text-slate-300">{formatCurrency(deposit.amount)}</p>
{!showReleaseForm && (
<div className="flex gap-2">
<button
onClick={() => setShowReleaseForm(true)}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-xs font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-600 transition-colors"
>
Вернуть / Списать
</button>
{releaseBlocked ? (
<p className="text-xs text-amber-600 dark:text-amber-400 flex items-center gap-1">
<Ban size={11} /> Возврат заблокирован до выезда
</p>
) : (
<button
onClick={() => setShowReleaseForm(true)}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-xs font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-600 transition-colors"
>
Вернуть / Списать
</button>
)}
<button
onClick={handleCancel}
disabled={depositCancelling}
@@ -971,7 +984,7 @@ export function BookingDetailPanel({ booking, room, rooms, allBookings, slug, on
}, [slug])
// Billing tab
const [billingMinibar, setBillingMinibar] = useState<Array<{ itemName: string; quantity: number; pricePerUnit: number; total: number; recordedAt: string }>>([])
const [billingMinibar, setBillingMinibar] = useState<Array<{ itemName: string; quantity: number; pricePerUnit: number; currentPrice?: number; total: number; recordedAt: string }>>([])
const [billingLoaded, setBillingLoaded] = useState(false)
useEffect(() => {
@@ -1866,7 +1879,7 @@ export function BookingDetailPanel({ booking, room, rooms, allBookings, slug, on
{/* Правая колонка — депозит */}
{slug && (
<div>
<DepositWidget slug={slug} bookingId={booking.id} onDepositChange={setActiveDeposit} />
<DepositWidget slug={slug} bookingId={booking.id} bookingStatus={booking.status} onDepositChange={setActiveDeposit} />
</div>
)}
</div>
@@ -1874,16 +1887,17 @@ export function BookingDetailPanel({ booking, room, rooms, allBookings, slug, on
{/* ── Счёт (фолио) ─────────────────────────────────────────────────── */}
{tab === 'billing' && (() => {
const minibarTotal = billingMinibar.reduce((s, i) => s + i.total, 0)
const charges = finalTotal + minibarTotal
// Use Number() to prevent string concatenation from PostgreSQL NUMERIC fields
const minibarTotal = billingMinibar.reduce((s, i) => s + Number(i.currentPrice ?? i.pricePerUnit) * Number(i.quantity), 0)
const charges = Number(finalTotal) + minibarTotal
const paidPositive = payments.filter(p => Number(p.amount) > 0).reduce((s, p) => s + Number(p.amount), 0)
const paidNegative = payments.filter(p => Number(p.amount) < 0).reduce((s, p) => s + Number(p.amount), 0)
const depositBadge = activeDeposit?.status === 'hold_confirmed'
? `Удержание ${formatCurrency(activeDeposit.amount)} (ЮКасса)`
? `Удержание ${formatCurrency(Number(activeDeposit.amount))} (ЮКасса)`
: activeDeposit?.status === 'paid_cash'
? `Депозит наличными ${formatCurrency(activeDeposit?.amount ?? 0)}`
? `Депозит наличными ${formatCurrency(Number(activeDeposit?.amount ?? 0))}`
: activeDeposit?.status === 'captured'
? `Депозит списан ${formatCurrency(activeDeposit.capturedAmount ?? 0)}`
? `Депозит списан ${formatCurrency(Number(activeDeposit.capturedAmount ?? 0))}`
: null
const billingBalance = charges - paidPositive + paidNegative

3
src/lib/api.ts
View File

@@ -1450,6 +1450,7 @@ export interface MinibarBookingCharge {
itemName: string
quantity: number
pricePerUnit: number
currentPrice: number
total: number
recordedAt: string
recordedByName: string | null
@@ -1553,6 +1554,7 @@ export interface DepositSettings {
amount: number
yookassaShopId: string | null
yookassaSecretKey: string | null
releaseRequiresCheckout: boolean
updatedAt?: string
}
@@ -1561,6 +1563,7 @@ export interface DepositSettingsPayload {
amount?: number
yookassa_shop_id?: string
yookassa_secret_key?: string
release_requires_checkout?: boolean
}
export interface BookingDeposit {

13
src/pages/DepositSettingsPage.tsx
View File

@@ -29,6 +29,7 @@ export function DepositSettingsPage() {
const [isEnabled, setIsEnabled] = useState(false)
const [amount, setAmount] = useState('5000')
const [releaseRequiresCheckout, setReleaseRequiresCheckout] = useState(false)
const [shopId, setShopId] = useState('')
const [secretKey, setSecretKey] = useState('')
const [showSecret, setShowSecret] = useState(false)
@@ -51,6 +52,7 @@ export function DepositSettingsPage() {
setSettings(s)
setIsEnabled(s.isEnabled)
setAmount(String(s.amount))
setReleaseRequiresCheckout(s.releaseRequiresCheckout ?? false)
setShopId(s.yookassaShopId ?? '')
setSecretKey(s.yookassaSecretKey ?? '')
setPresets(p)
@@ -69,6 +71,7 @@ export function DepositSettingsPage() {
const payload: Record<string, unknown> = {
is_enabled: isEnabled,
amount: parseFloat(amount) || 5000,
release_requires_checkout: releaseRequiresCheckout,
}
if (shopId) payload.yookassa_shop_id = shopId
if (secretKey && secretKey !== '••••••••') payload.yookassa_secret_key = secretKey
@@ -182,6 +185,16 @@ export function DepositSettingsPage() {
/>
</div>
<div className="flex items-start justify-between gap-4">
<div>
<p className="text-sm font-medium text-slate-800 dark:text-slate-200">Запретить возврат депозита до выезда</p>
<p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
Кнопки «Вернуть» и «Списать» будут заблокированы, пока гость не выехал
</p>
</div>
<Toggle on={releaseRequiresCheckout} onChange={() => setReleaseRequiresCheckout(v => !v)} />
</div>
<div className="rounded-lg bg-violet-50 dark:bg-violet-900/10 border border-violet-200 dark:border-violet-700 p-3 space-y-1.5">
<p className="text-xs font-semibold text-violet-800 dark:text-violet-300">ЮКасса настраивается в одном месте</p>
<p className="text-xs text-violet-700 dark:text-violet-400">