Añadir /trans-history (Historial de transacciones): solo Stripe y SumUp
Dos cajas por pasarela (Stripe mode test/live, SumUp mode sumup) desde home_stripelog, con logo, nota y tabla ID/Estado/Concepto/Fecha/Cantidad. Estado PAID (fulfilled=1) / PENDING. Se omiten dLocal, Crypto y PayPal del diseño original. lib/trans-history.ts (getPaymentTransactions). Django era stub. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,144 @@
|
|||||||
|
import type { Metadata } from 'next'
|
||||||
|
import { setRequestLocale } from 'next-intl/server'
|
||||||
|
import { redirect } from '@/i18n/navigation'
|
||||||
|
import { getSession } from '@/lib/session'
|
||||||
|
import { getPaymentTransactions, type PaymentTx } from '@/lib/trans-history'
|
||||||
|
import { PageShell } from '@/components/PageShell'
|
||||||
|
import { ServiceBox } from '@/components/ServiceBox'
|
||||||
|
|
||||||
|
export const dynamic = 'force-dynamic'
|
||||||
|
|
||||||
|
export const metadata: Metadata = { title: 'Historial de transacciones' }
|
||||||
|
|
||||||
|
/** Fecha en formato DD-MM-YYYY HH:MM:SS. */
|
||||||
|
function fmt(d: Date): string {
|
||||||
|
const p = (n: number) => String(n).padStart(2, '0')
|
||||||
|
return `${p(d.getDate())}-${p(d.getMonth() + 1)}-${d.getFullYear()} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatusBadge({ status }: { status: PaymentTx['status'] }) {
|
||||||
|
return <span className={status === 'PAID' ? 'green-info2' : 'yellow-info'}>{status}</span>
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Caja de una pasarela con su tabla de transacciones (o "No hay movimientos"). */
|
||||||
|
function PlatformBox({
|
||||||
|
name,
|
||||||
|
logo,
|
||||||
|
note,
|
||||||
|
txs,
|
||||||
|
}: {
|
||||||
|
name: string
|
||||||
|
logo: string
|
||||||
|
note: string
|
||||||
|
txs: PaymentTx[]
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="box-content">
|
||||||
|
<div className="title-box-content">
|
||||||
|
<h2>
|
||||||
|
<img src={logo} alt={name} title={name} style={{ height: '22px', verticalAlign: 'middle', marginRight: '6px' }} /> {name}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div className="body-box-content">
|
||||||
|
<p>
|
||||||
|
Recibirás los PD correspondientes a cada transacción sólo cuando esté aprobada y el estado sea{' '}
|
||||||
|
<span className="green-info2">PAID</span> (Pagado).
|
||||||
|
</p>
|
||||||
|
<br />
|
||||||
|
<p>
|
||||||
|
<span className="red-info2">Importante:</span> {note}
|
||||||
|
</p>
|
||||||
|
<br />
|
||||||
|
{txs.length === 0 ? (
|
||||||
|
<table className="max-center-table-aligned">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<span>No hay movimientos</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
) : (
|
||||||
|
<table className="max-center-table-aligned">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>ID de transacción</th>
|
||||||
|
<th>Estado</th>
|
||||||
|
<th className="responsive-td">Concepto</th>
|
||||||
|
<th>Fecha creación</th>
|
||||||
|
<th>Cantidad</th>
|
||||||
|
</tr>
|
||||||
|
{txs.map((t) => (
|
||||||
|
<tr key={t.id}>
|
||||||
|
<td className="long-td">
|
||||||
|
<span>{t.id}</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<StatusBadge status={t.status} />
|
||||||
|
</td>
|
||||||
|
<td className="responsive-td">
|
||||||
|
<span>{t.concept}</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span>{fmt(t.createdAt)}</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span>{t.amount.toFixed(2)} €</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const LOGO_BASE = '/nw-themes/nw-ryu/nw-images/nw-logos'
|
||||||
|
|
||||||
|
export default async function TransHistoryPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||||
|
const { locale } = await params
|
||||||
|
setRequestLocale(locale)
|
||||||
|
|
||||||
|
const session = await getSession()
|
||||||
|
if (!session.bnetId) redirect({ href: '/login', locale })
|
||||||
|
if (!session.username) redirect({ href: '/select-account', locale })
|
||||||
|
|
||||||
|
const txs = await getPaymentTransactions(session.accountId!)
|
||||||
|
const stripe = txs.filter((t) => t.platform === 'Stripe')
|
||||||
|
const sumup = txs.filter((t) => t.platform === 'SumUp')
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageShell title="Historial de transacciones">
|
||||||
|
<ServiceBox>
|
||||||
|
<br />
|
||||||
|
<p>Aquí verás la información que recibimos de nuestras diferentes plataformas de pago automáticas.</p>
|
||||||
|
<br />
|
||||||
|
<p>¿Has tenido algún problema con alguna transacción?</p>
|
||||||
|
<p>
|
||||||
|
Si has tenido un problema con una de las transacciones o no has recibido tus PD, puedes contactarnos en
|
||||||
|
nuestro Discord o a través del correo{' '}
|
||||||
|
<a href="mailto:contacto@ultimowow.com">contacto@ultimowow.com</a>.
|
||||||
|
</p>
|
||||||
|
</ServiceBox>
|
||||||
|
<br />
|
||||||
|
<PlatformBox
|
||||||
|
name="Stripe"
|
||||||
|
logo={`${LOGO_BASE}/stripe-p-logo.svg`}
|
||||||
|
note="Los pagos con tarjeta se aprueban normalmente en unos segundos."
|
||||||
|
txs={stripe}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<hr />
|
||||||
|
<br />
|
||||||
|
<PlatformBox
|
||||||
|
name="SumUp"
|
||||||
|
logo={`${LOGO_BASE}/sumup-p-logo.svg`}
|
||||||
|
note="SumUp puede tardar unos minutos en confirmar el pago tras completar el checkout."
|
||||||
|
txs={sumup}
|
||||||
|
/>
|
||||||
|
</PageShell>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
import type { RowDataPacket } from 'mysql2'
|
||||||
|
import { db, DB } from './db'
|
||||||
|
|
||||||
|
/** Una transacción de pago (Stripe o SumUp) registrada en home_stripelog. */
|
||||||
|
export interface PaymentTx {
|
||||||
|
id: string // referencia de la pasarela (session_id / checkout_reference)
|
||||||
|
platform: 'Stripe' | 'SumUp'
|
||||||
|
status: 'PAID' | 'PENDING'
|
||||||
|
createdAt: Date
|
||||||
|
amount: number // importe en €
|
||||||
|
concept: string
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Transacciones de pago de una cuenta desde `home_stripelog`, limitadas a las
|
||||||
|
* dos pasarelas activas: **Stripe** (mode test/live) y **SumUp** (mode sumup).
|
||||||
|
* `fulfilled` 1 -> PAID (pagado y entregado), 0 -> PENDING. Orden por fecha desc.
|
||||||
|
*/
|
||||||
|
export async function getPaymentTransactions(accountId: number, limit = 200): Promise<PaymentTx[]> {
|
||||||
|
if (!accountId) return []
|
||||||
|
try {
|
||||||
|
const [rows] = await db(DB.default).query<RowDataPacket[]>(
|
||||||
|
"SELECT session_id, product_name, amount, mode, fulfilled, timestamp FROM home_stripelog " +
|
||||||
|
"WHERE account_id = ? AND mode IN ('sumup', 'test', 'live') ORDER BY timestamp DESC LIMIT ?",
|
||||||
|
[accountId, limit],
|
||||||
|
)
|
||||||
|
return rows.map((r) => ({
|
||||||
|
id: String(r.session_id || ''),
|
||||||
|
platform: r.mode === 'sumup' ? 'SumUp' : 'Stripe',
|
||||||
|
status: r.fulfilled ? 'PAID' : 'PENDING',
|
||||||
|
createdAt: new Date(r.timestamp),
|
||||||
|
amount: Number(r.amount),
|
||||||
|
concept: String(r.product_name || '—'),
|
||||||
|
}))
|
||||||
|
} catch {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user