Actualizar plan-tranquilidad.html

This commit is contained in:
2026-03-29 22:31:28 +00:00
parent b1695d5f74
commit 65cbe81b17

View File

@@ -162,7 +162,7 @@
</main> </main>
<div id="pdf-contract-template" class="hidden"> <div id="pdf-contract-template" class="hidden">
<div style="padding: 50px; font-family: 'Helvetica', Arial, sans-serif; color: #1e293b; line-height: 1.5; font-size: 11px;"> <div style="padding: 20px 40px; font-family: 'Helvetica', Arial, sans-serif; color: #1e293b; line-height: 1.5; font-size: 11px; background: white;">
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #2563eb; padding-bottom: 20px; margin-bottom: 30px;"> <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #2563eb; padding-bottom: 20px; margin-bottom: 30px;">
<div style="flex-grow: 1;"> <div style="flex-grow: 1;">
@@ -311,7 +311,7 @@
document.querySelector('#radio-yearly div').classList.toggle('hidden', type !== 'yearly'); document.querySelector('#radio-yearly div').classList.toggle('hidden', type !== 'yearly');
} }
async function processContract() { async function processContract() {
const blank = document.createElement('canvas'); const blank = document.createElement('canvas');
blank.width = canvas.width; blank.height = canvas.height; blank.width = canvas.width; blank.height = canvas.height;
if (canvas.toDataURL() === blank.toDataURL()) { if (canvas.toDataURL() === blank.toDataURL()) {
@@ -324,48 +324,45 @@
btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> Generando Contrato Firmado...'; btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> Generando Contrato Firmado...';
lucide.createIcons(); lucide.createIcons();
// 1. Inyectar datos dinámicos en la PLANTILLA PDF (Oculta) // 1. Inyectar datos
// Se inyecta la firma tal cual la dibujó el usuario
document.getElementById('pdf-signature-img').src = canvas.toDataURL("image/png"); document.getElementById('pdf-signature-img').src = canvas.toDataURL("image/png");
// Texto del plan elegido
const planText = selectedPlan === 'yearly' ? 'Plan Anual (59,95€ IVA Incl.)' : 'Suscripción Mensual (6,90€ + IVA)'; const planText = selectedPlan === 'yearly' ? 'Plan Anual (59,95€ IVA Incl.)' : 'Suscripción Mensual (6,90€ + IVA)';
document.getElementById('pdf-plan-name').innerText = planText; document.getElementById('pdf-plan-name').innerText = planText;
// Fecha y hora exacta de la firma
const timestamp = "Documento firmado digitalmente el " + new Date().toLocaleDateString('es-ES') + " a las " + new Date().toLocaleTimeString('es-ES'); const timestamp = "Documento firmado digitalmente el " + new Date().toLocaleDateString('es-ES') + " a las " + new Date().toLocaleTimeString('es-ES');
document.getElementById('pdf-timestamp').innerText = timestamp; document.getElementById('pdf-timestamp').innerText = timestamp;
// 2. Generar el PDF
const element = document.getElementById('pdf-contract-template'); const element = document.getElementById('pdf-contract-template');
element.classList.remove('hidden'); // Mostrar temporalmente para el generador element.classList.remove('hidden');
// 2. Opciones del PDF mejoradas para quitar márgenes fantasmas
const opt = { const opt = {
margin: 0, margin: [0.3, 0, 0.3, 0], // Margen superior, izquierdo, inferior, derecho (en pulgadas)
filename: `Contrato_Plan_Tranquilidad_${(new Date().toISOString()).split('T')[0]}.pdf`, filename: `Contrato_Plan_Tranquilidad_${(new Date().toISOString()).split('T')[0]}.pdf`,
image: { type: 'jpeg', quality: 0.98 }, image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, useCORS: true }, html2canvas: {
scale: 2,
useCORS: true,
scrollY: 0, // 👈 ESTO quita el margen de arriba si habías hecho scroll
windowHeight: element.scrollHeight
},
jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' } jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
}; };
try { try {
// Se genera y descarga automáticamente
await html2pdf().set(opt).from(element).save(); await html2pdf().set(opt).from(element).save();
setTimeout(() => { setTimeout(() => {
alert("✅ Contrato firmado y descargado con éxito.\n\nEl PDF se ha guardado en tu dispositivo. Ahora te redirigimos a la pasarela de pago para activar tu protección."); alert("✅ Contrato generado con éxito.\n\nAhora vamos a conectar con Stripe para formalizar el pago seguro.");
// window.location.href = "TU_URL_DE_COBRO_STRIPE";
btn.disabled = false; btn.disabled = false;
btn.innerHTML = '<i data-lucide="crown" class="w-5 h-5"></i> Firmar y Activar Mi Plan'; btn.innerHTML = '<i data-lucide="crown" class="w-5 h-5"></i> Firmar y Activar Mi Plan';
lucide.createIcons(); lucide.createIcons();
}, 1500); }, 1500);
} catch (err) { } catch (err) {
alert("❌ Error al crear el contrato PDF. Por favor, reintenta."); alert("❌ Error al crear el contrato PDF.");
console.error(err);
btn.disabled = false; btn.disabled = false;
} finally { } finally {
element.classList.add('hidden'); // Ocultar de nuevo element.classList.add('hidden');
} }
} }
</script> </script>