Ver historial

Consulta todas las facturas y transacciones de tu suscripción.

Pasos

1. Ve a la pestaña “Historial”
2. Se muestra una tabla con:
   • Fecha de la transacción
   • Descripción (nombre del plan)
   • Monto cobrado
   • Estado del pago (Pagada / Pendiente / Fallida)
   • Enlace a factura en Stripe
3. Clic en “Ver factura” para abrir el PDF en Stripe
4. Usa los filtros para buscar por fecha o estado

Errores comunes

“No hay facturas disponibles”

Causa: Estás en plan Free o aún en período de prueba.

Solución:

• Las facturas solo se generan cuando hay pagos procesados
• El primer pago se genera al finalizar el trial o al hacer upgrade

Detalles técnicos

Implementación del historial

Componente: PaymentHistoryTable

Ubicación: src/panels/owner/subscriptions/components/management/PaymentHistoryTable.tsx

Query para obtener facturas:

// Opción A: Desde Stripe API (recomendado para datos en tiempo real)
const invoices = await stripe.invoices.list({
  customer: stripeCustomerId,
  limit: 100,
});

// Opción B: Desde base de datos local (más rápido pero puede estar desactualizado)
const { data: localInvoices } = await supabase
  .from('stripe_invoices')
  .select('*')
  .eq('customer_id', stripeCustomerId)
  .order('created', { ascending: false });

Estructura de datos de invoice:

interface StripeInvoice {
  id: string;
  number: string;                 // INV-001
  created: number;                // Unix timestamp
  amount_paid: number;            // En centavos (4900 = 49.00 EUR)
  currency: string;               // 'eur'
  status: 'paid' | 'open' | 'void' | 'uncollectible';
  hosted_invoice_url: string;     // URL del PDF
  invoice_pdf: string;            // URL del PDF para descarga directa
  lines: {
    data: [{
      description: string;        // "Plan Premium - Subscription"
      amount: number;
      period: {
        start: number;
        end: number;
      }
    }]
  };
}

Formateo de datos para la tabla:

const formattedInvoices = invoices.map(invoice => ({
  id: invoice.id,
  date: new Date(invoice.created * 1000).toLocaleDateString('es-ES'),
  description: invoice.lines.data[0]?.description || 'Suscripción',
  amount: new Intl.NumberFormat('es-ES', {
    style: 'currency',
    currency: invoice.currency.toUpperCase()
  }).format(invoice.amount_paid / 100),
  status: invoice.status,
  statusLabel: {
    paid: 'Pagada',
    open: 'Pendiente',
    void: 'Anulada',
    uncollectible: 'Fallida'
  }[invoice.status],
  pdfUrl: invoice.hosted_invoice_url
}));

Columnas de la tabla:

Columna	Descripción	Formato
Fecha	Fecha de emisión	DD/MM/YYYY
Descripción	Nombre del plan	Texto
Monto	Importe cobrado	€XX.XX
Estado	Estado del pago	Badge con color
Acciones	Enlace al PDF	Botón “Ver factura”

---