Michilis/Spanglish
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Allow Lightning invoice reuse and re-payment from the dashboard.

Browse Source 
Store LNbits invoice data on payments, add an invoice endpoint that reuses valid invoices or regenerates expired ones, and wire the booking payment page to fetch and display invoices via a shared watcher hook.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Michilis
2026-07-01 16:48:28 +00:00
co-authored by Cursor
parent 09bfb17f03
commit 78ffd0ae52
10 changed files with 331 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/(public)/book/[eventId]/page.tsx
+8 -4
View File
@@ -16,7 +16,7 @@ import type {
PaymentMethod,
} from './_types';
import { buildPaymentMethods, formatRuc, rucPattern } from './_logic/booking';
import { useLightningWatcher } from './_hooks/useLightningWatcher';
import { useLightningWatcher } from '@/hooks/useLightningWatcher';
import { PayingStep } from './_steps/PayingStep';
import { ManualPaymentStep } from './_steps/ManualPaymentStep';
import { PendingApprovalStep } from './_steps/PendingApprovalStep';
@@ -35,7 +35,6 @@ export default function BookingPage() {
const [step, setStep] = useState<BookingStep>('form');
const [submitting, setSubmitting] = useState(false);
const [bookingResult, setBookingResult] = useState<BookingResult | null>(null);
const [, setPaymentPending] = useState(false);
const [markingPaid, setMarkingPaid] = useState(false);
// State for payer name (when paid under different name)
@@ -245,7 +244,13 @@ export default function BookingPage() {
};
// Watch for Lightning payment confirmation while on the paying step.
useLightningWatcher(step, bookingResult?.ticketId, locale, setPaymentPending, setStep);
useLightningWatcher(
step === 'paying',
bookingResult?.ticketId,
locale,
() => setStep('success'),
() => {}
);
// Handle "I Have Paid" button click
const handleMarkPaymentSent = async () => {
@@ -330,7 +335,6 @@ export default function BookingPage() {
};
setBookingResult(result);
setStep('paying');
setPaymentPending(true);
// Payment confirmation is handled by the paying-step watcher effect.
} else if (formData.paymentMethod === 'bank_transfer' || formData.paymentMethod === 'tpago') {
// Manual payment methods - show payment details
frontend/src/app/(public)/booking/[ticketId]/page.tsx
+103 -9
View File
@@ -1,15 +1,17 @@
'use client';
import { useState, useEffect } from 'react';
import { useState, useEffect, useCallback } from 'react';
import { useParams, useSearchParams } from 'next/navigation';
import Link from 'next/link';
import { useLanguage } from '@/context/LanguageContext';
import { ticketsApi, paymentOptionsApi, Ticket, PaymentOptionsConfig } from '@/lib/api';
import { ticketsApi, paymentOptionsApi, Ticket, PaymentOptionsConfig, LightningInvoice } from '@/lib/api';
import { formatPrice, formatDateLong, formatTime, getTpagoLink } from '@/lib/utils';
import { useLightningWatcher } from '@/hooks/useLightningWatcher';
import { PayingStep } from '@/app/(public)/book/[eventId]/_steps/PayingStep';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import {
CheckCircleIcon,
import {
CheckCircleIcon,
ClockIcon,
XCircleIcon,
TicketIcon,
@@ -22,7 +24,7 @@ import {
} from '@heroicons/react/24/outline';
import toast from 'react-hot-toast';
type PaymentStep = 'loading' | 'manual_payment' | 'pending_approval' | 'confirmed' | 'error';
type PaymentStep = 'loading' | 'manual_payment' | 'lightning_payment' | 'pending_approval' | 'confirmed' | 'error';
export default function BookingPaymentPage() {
const params = useParams();
@@ -33,10 +35,36 @@ export default function BookingPaymentPage() {
const [step, setStep] = useState<PaymentStep>('loading');
const [markingPaid, setMarkingPaid] = useState(false);
const [error, setError] = useState<string | null>(null);
const [lightningInvoice, setLightningInvoice] = useState<LightningInvoice | null>(null);
const [invoiceExpired, setInvoiceExpired] = useState(false);
const [fetchingInvoice, setFetchingInvoice] = useState(false);
const ticketId = params.ticketId as string;
const requestedStep = searchParams.get('step');
// Get (or refresh) the Lightning invoice for this ticket - reuses the
// stored invoice if still valid, otherwise the backend generates a new one.
const fetchLightningInvoice = useCallback(async () => {
setFetchingInvoice(true);
try {
const result = await ticketsApi.getLightningInvoice(ticketId);
if (result.alreadyPaid) {
setStep('confirmed');
return;
}
if (result.invoice) {
setLightningInvoice(result.invoice);
setInvoiceExpired(false);
setStep('lightning_payment');
}
} catch (err: any) {
setError(err.message || 'Failed to load Lightning invoice');
setStep('error');
} finally {
setFetchingInvoice(false);
}
}, [ticketId]);
// Fetch ticket and payment config
useEffect(() => {
if (!ticketId) return;
@@ -45,7 +73,7 @@ export default function BookingPaymentPage() {
try {
// Get ticket with event and payment info
const { ticket: ticketData } = await ticketsApi.getById(ticketId);
if (!ticketData) {
setError('Booking not found');
setStep('error');
@@ -54,10 +82,24 @@ export default function BookingPaymentPage() {
setTicket(ticketData);
// Only proceed for manual payment methods
const paymentMethod = ticketData.payment?.provider;
if (paymentMethod === 'lightning') {
if (ticketData.status === 'confirmed' || ticketData.payment?.status === 'paid') {
setStep('confirmed');
} else if (ticketData.status === 'cancelled') {
setError(locale === 'es'
? 'Esta reserva ya no está activa. Por favor realiza una nueva reserva.'
: 'This booking is no longer active. Please make a new booking.');
setStep('error');
} else {
await fetchLightningInvoice();
}
return;
}
if (!['bank_transfer', 'tpago'].includes(paymentMethod || '')) {
// Not a manual payment method, redirect to success page or show appropriate state
// Not a manual or Lightning payment method, show appropriate state
if (ticketData.status === 'confirmed' || ticketData.payment?.status === 'paid') {
setStep('confirmed');
} else {
@@ -75,7 +117,7 @@ export default function BookingPaymentPage() {
// Determine which step to show based on payment status
const paymentStatus = ticketData.payment?.status;
if (paymentStatus === 'paid' || ticketData.status === 'confirmed') {
setStep('confirmed');
} else if (paymentStatus === 'pending_approval') {
@@ -96,6 +138,15 @@ export default function BookingPaymentPage() {
loadBookingData();
}, [ticketId]);
// Watch for Lightning payment confirmation while the invoice is on screen.
useLightningWatcher(
step === 'lightning_payment' && !invoiceExpired,
ticketId,
locale,
() => setStep('confirmed'),
() => setInvoiceExpired(true)
);
// Handle "I Have Paid" button click
const handleMarkPaymentSent = async () => {
if (!ticket) return;
@@ -301,6 +352,49 @@ export default function BookingPaymentPage() {
);
}
// Lightning payment step - show the (reused or freshly generated) invoice
if (step === 'lightning_payment' && ticket) {
if (invoiceExpired) {
return (
<div className="section-padding">
<div className="container-page max-w-xl">
<Card className="p-8 text-center">
<div className="w-16 h-16 rounded-full bg-orange-100 flex items-center justify-center mx-auto mb-6">
<ClockIcon className="w-10 h-10 text-orange-600" />
</div>
<h1 className="text-2xl font-bold text-primary-dark mb-2">
{locale === 'es' ? 'La factura expiró' : 'Invoice expired'}
</h1>
<p className="text-gray-600 mb-6">
{locale === 'es'
? 'Genera una nueva factura Lightning para continuar con el pago.'
: 'Generate a new Lightning invoice to continue with payment.'}
</p>
<Button onClick={fetchLightningInvoice} isLoading={fetchingInvoice} size="lg">
{locale === 'es' ? 'Generar Nueva Factura' : 'Generate New Invoice'}
</Button>
</Card>
</div>
</div>
);
}
if (!lightningInvoice) {
return (
<div className="section-padding">
<div className="container-page max-w-xl text-center">
<div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full mx-auto" />
<p className="mt-4 text-gray-600">
{locale === 'es' ? 'Preparando tu factura...' : 'Preparing your invoice...'}
</p>
</div>
</div>
);
}
return <PayingStep invoice={lightningInvoice} qrCode={ticket.qrCode} locale={locale} />;
}
// Manual payment step - show payment details and "I have paid" button
if (step === 'manual_payment' && ticket && paymentConfig) {
const isBankTransfer = ticket.payment?.provider === 'bank_transfer';
frontend/src/app/(public)/book/[eventId]/_hooks/useLightningWatcher.ts → frontend/src/hooks/useLightningWatcher.ts
+8 -10
View File
@@ -1,22 +1,21 @@
import { useEffect } from 'react';
import toast from 'react-hot-toast';
import { ticketsApi } from '@/lib/api';
import type { BookingStep } from '../_types';
/**
* Watch for Lightning payment confirmation while on the paying step.
* Watch for Lightning payment confirmation while an invoice is on screen.
* SSE gives instant updates; a 3s poll runs in parallel as a safety net so a
* buffered/stuck stream (e.g. a proxy that doesn't flush SSE) can't strand the UI.
*/
export function useLightningWatcher(
step: BookingStep,
active: boolean,
ticketId: string | undefined,
locale: string,
setPaymentPending: (value: boolean) => void,
setStep: (value: BookingStep) => void
onPaid: () => void,
onExpired: () => void
) {
useEffect(() => {
if (step !== 'paying' || !ticketId) return;
if (!active || !ticketId) return;
let settled = false;
let pollTimer: ReturnType<typeof setTimeout> | null = null;
@@ -25,15 +24,14 @@ export function useLightningWatcher(
if (settled) return;
settled = true;
toast.success(locale === 'es' ? '¡Pago confirmado!' : 'Payment confirmed!');
setPaymentPending(false);
setStep('success');
onPaid();
};
const expire = () => {
if (settled) return;
settled = true;
toast.error(locale === 'es' ? 'La factura ha expirado' : 'Invoice has expired');
setPaymentPending(false);
onExpired();
};
// Always same-origin so the streaming proxy route handler is used (it
@@ -79,5 +77,5 @@ export function useLightningWatcher(
eventSource.close();
if (pollTimer) clearTimeout(pollTimer);
};
}, [step, ticketId, locale]);
}, [active, ticketId, locale]);
}
frontend/src/lib/api/tickets.ts
+9
View File
@@ -6,6 +6,7 @@ import type {
TicketValidationResult,
TicketSearchResult,
LiveSearchResult,
LightningInvoice,
} from './types';
export const ticketsApi = {
@@ -137,6 +138,14 @@ export const ticketsApi = {
`/api/lnbits/status/${ticketId}`
),
// Get a Lightning invoice to pay/re-pay a ticket - reuses the stored invoice
// if it's still valid, otherwise generates a fresh one.
getLightningInvoice: (ticketId: string) =>
fetchApi<{ invoice?: LightningInvoice; reused?: boolean; alreadyPaid?: boolean }>(
`/api/lnbits/invoice/${ticketId}`,
{ method: 'POST' }
),
// Get PDF download URL (returns the URL, not the PDF itself)
getPdfUrl: (id: string) => `${API_BASE}/api/tickets/${id}/pdf`,
};
frontend/src/lib/api/types.ts
+9
View File
@@ -25,6 +25,15 @@ export interface Event {
updatedAt: string;
}
export interface LightningInvoice {
paymentHash: string;
paymentRequest: string; // BOLT11 invoice
amount: number; // Amount in satoshis
fiatAmount?: number; // Original fiat amount
fiatCurrency?: string; // Original fiat currency
expiresAt?: string;
}
export interface Ticket {
id: string;
bookingId?: string; // Groups multiple tickets from same booking