460 lines
28 KiB
HTML
460 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
<title>Plan Tranquilidad - Protege tu Hogar</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
|
|
<style>
|
|
:root { --primary: #2563eb; --secondary: #f59e0b; --app-bg: #f8fafc; }
|
|
body { background-color: var(--app-bg); -webkit-tap-highlight-color: transparent; }
|
|
|
|
.hero-bg {
|
|
background-image: linear-gradient(to bottom, rgba(30, 58, 138, 0.85), rgba(37, 99, 235, 0.95)), url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=1000&q=80');
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.plan-card { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 2px solid transparent; }
|
|
.plan-card.active { border-color: var(--primary); background-color: #fff; transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
|
|
|
|
#signature-pad { background: #fff; touch-action: none; cursor: crosshair; border: 2px dashed #cbd5e1; }
|
|
|
|
@keyframes pulse-soft { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }
|
|
.animate-offer { animation: pulse-soft 2s infinite; }
|
|
.fade-in { animation: fadeIn 0.5s ease-out forwards; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
|
|
|
|
.benefit-icon { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); }
|
|
</style>
|
|
</head>
|
|
<body class="text-slate-800 font-sans antialiased pb-20 min-h-screen flex flex-col max-w-md mx-auto bg-white shadow-2xl relative">
|
|
|
|
<header class="hero-bg text-white px-6 pt-10 pb-28 rounded-b-[2.5rem] relative shadow-lg shrink-0">
|
|
<button onclick="goBackToPortal()" class="absolute top-6 left-6 w-10 h-10 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-md active:scale-90 transition-transform z-10 border border-white/30">
|
|
<i data-lucide="chevron-left" class="w-6 h-6"></i>
|
|
</button>
|
|
|
|
<div class="relative z-10 text-center space-y-3 mt-8">
|
|
<span id="company-name-badge" class="bg-blue-400/40 text-blue-50 text-[10px] font-black px-4 py-1.5 rounded-full uppercase tracking-widest backdrop-blur-md border border-blue-300/30 shadow-sm">
|
|
Cargando...
|
|
</span>
|
|
<h1 class="text-4xl font-black tracking-tight leading-tight mt-4">
|
|
Plan <span class="text-amber-400">Tranquilidad</span>
|
|
</h1>
|
|
<p class="text-blue-100 text-sm font-medium px-4 leading-relaxed">
|
|
El seguro de mantenimiento que evita facturas sorpresa y te da prioridad absoluta.
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="px-5 -mt-16 relative z-20 flex-1 flex flex-col space-y-6">
|
|
|
|
<div id="loader" class="bg-white p-10 rounded-[2rem] shadow-xl text-center space-y-4 border border-slate-100">
|
|
<i data-lucide="loader-2" class="w-8 h-8 text-blue-600 animate-spin mx-auto"></i>
|
|
<p class="text-xs font-bold text-slate-500 uppercase tracking-widest">Cargando ofertas...</p>
|
|
</div>
|
|
|
|
<div id="already-subscribed-container" class="hidden bg-white p-8 rounded-[2rem] shadow-xl text-center space-y-6 fade-in flex-1 border border-slate-100">
|
|
<div class="w-24 h-24 bg-emerald-50 text-emerald-500 rounded-full flex items-center justify-center mx-auto shadow-inner border border-emerald-100">
|
|
<i data-lucide="shield-check" class="w-12 h-12"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-black tracking-tight text-slate-800">¡Ya estás protegido!</h2>
|
|
<p class="text-sm text-slate-500 mt-2 font-medium">Actualmente tienes activo el <strong id="active-plan-name" class="text-blue-600">Plan</strong>.</p>
|
|
<div class="text-xs text-slate-500 mt-6 bg-slate-50 p-4 rounded-2xl border border-slate-100 text-left space-y-2">
|
|
<p class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-500"></i> Cobertura de urgencias activa</p>
|
|
<p class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-500"></i> Desplazamientos gratuitos</p>
|
|
<p class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-500"></i> Prioridad en la agenda</p>
|
|
</div>
|
|
</div>
|
|
<button onclick="goBackToPortal()" class="w-full bg-slate-900 text-white font-black py-4 rounded-2xl shadow-lg active:scale-95 transition-all uppercase tracking-widest text-xs mt-4">
|
|
Volver a mi Portal
|
|
</button>
|
|
</div>
|
|
|
|
<div id="contract-container" class="hidden space-y-8 fade-in pb-10">
|
|
|
|
<div class="bg-white p-6 rounded-[2rem] shadow-xl border border-slate-100 mt-2">
|
|
<h2 class="text-lg font-black text-slate-800 mb-5 text-center tracking-tight">¿Por qué necesitas este plan?</h2>
|
|
|
|
<div class="space-y-5">
|
|
<div class="flex items-start gap-4">
|
|
<div class="benefit-icon w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 border border-blue-100">
|
|
<i data-lucide="zap" class="text-blue-600 w-5 h-5"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-black text-slate-800 text-sm">Urgencias sin sustos</h3>
|
|
<p class="text-xs text-slate-500 mt-1 leading-relaxed">Si te quedas sin luz o hay riesgo de avería grave, acudimos en menos de 3h. <b>Desplazamiento y mano de obra a 0€.</b></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-12 h-12 bg-amber-50 rounded-2xl flex items-center justify-center shrink-0 border border-amber-100">
|
|
<i data-lucide="hammer" class="text-amber-500 w-5 h-5"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-black text-slate-800 text-sm">Tu Manitas Privado</h3>
|
|
<p class="text-xs text-slate-500 mt-1 leading-relaxed">¿Necesitas cambiar un enchufe, colgar una lámpara o instalar un ventilador? Tienes servicios de bricolaje incluidos al año.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-12 h-12 bg-emerald-50 rounded-2xl flex items-center justify-center shrink-0 border border-emerald-100">
|
|
<i data-lucide="check-square" class="text-emerald-600 w-5 h-5"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-black text-slate-800 text-sm">Revisión Preventiva</h3>
|
|
<p class="text-xs text-slate-500 mt-1 leading-relaxed">Chequeo anual de tu instalación eléctrica para evitar cortocircuitos e incendios. Duerme tranquilo.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-[2rem] overflow-hidden shadow-md relative h-32">
|
|
<img src="https://images.unsplash.com/photo-1581141849291-1125c7b692b5?auto=format&fit=crop&w=800&q=80" alt="Técnico" class="w-full h-full object-cover">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-blue-900/80 to-transparent flex items-center px-6">
|
|
<p class="text-white font-black text-lg w-2/3 leading-tight">Profesionales de confianza en tu hogar.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between ml-2">
|
|
<h3 class="text-[11px] font-black text-slate-400 uppercase tracking-[0.15em]">Elige tu suscripción</h3>
|
|
<span class="text-[9px] font-bold text-emerald-500 bg-emerald-50 px-2 py-1 rounded-md">Cancelable cuando quieras</span>
|
|
</div>
|
|
|
|
<div id="plans-wrapper" class="space-y-4">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-[2.5rem] shadow-xl border border-slate-100 space-y-5">
|
|
<div class="text-center">
|
|
<div class="w-10 h-10 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-2 text-slate-400"><i data-lucide="pen-tool" class="w-5 h-5"></i></div>
|
|
<h3 class="text-sm font-black text-slate-800 uppercase tracking-tight">Firma el Contrato</h3>
|
|
<p class="text-[11px] text-slate-400 mt-1">Dibuja tu firma en el recuadro gris con tu dedo</p>
|
|
</div>
|
|
|
|
<div class="bg-slate-50 rounded-3xl p-1">
|
|
<canvas id="signature-pad" class="w-full h-40 rounded-3xl bg-white"></canvas>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center px-2">
|
|
<button onclick="clearSignature()" class="flex items-center gap-1.5 text-[10px] font-black text-rose-500 uppercase tracking-tighter bg-rose-50 px-3 py-1.5 rounded-lg active:scale-95 transition-transform">
|
|
<i data-lucide="eraser" class="w-3.5 h-3.5"></i> Borrar
|
|
</button>
|
|
<div class="flex items-center gap-1.5 text-blue-600 bg-blue-50 px-3 py-1.5 rounded-lg">
|
|
<i data-lucide="lock" class="w-3.5 h-3.5"></i>
|
|
<span class="text-[9px] font-black uppercase">Pago Seguro Stripe®</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="py-2 sticky bottom-4 z-50 space-y-3">
|
|
<div class="bg-white/90 backdrop-blur-md p-4 rounded-2xl shadow-lg border border-slate-200">
|
|
<label class="flex items-start gap-3 cursor-pointer">
|
|
<input type="checkbox" id="terms-checkbox" class="mt-0.5 w-5 h-5 text-blue-600 rounded border-slate-300 focus:ring-blue-500" onchange="toggleDniField()">
|
|
<span class="text-xs text-slate-600 font-medium leading-tight">
|
|
He leído y acepto las <a href="#" onclick="showContractModal(event)" class="text-blue-600 font-black underline">Condiciones del Contrato</a>.
|
|
</span>
|
|
</label>
|
|
|
|
<div id="dni-container" class="hidden mt-4 pt-4 border-t border-slate-100 transition-all fade-in">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest">DNI / NIE del Titular (Obligatorio)</label>
|
|
<input type="text" id="client-dni" placeholder="Ej: 12345678Z" class="w-full mt-1.5 px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl font-black text-sm text-slate-800 uppercase focus:ring-2 focus:ring-blue-500 outline-none placeholder-slate-300">
|
|
</div>
|
|
</div>
|
|
|
|
<button onclick="processContract()" id="btnAction" class="w-full bg-blue-600 text-white font-black py-5 rounded-[2rem] shadow-[0_15px_30px_-5px_rgba(37,99,235,0.4)] active:scale-95 transition-all uppercase tracking-widest text-sm flex justify-center items-center gap-3 border-2 border-blue-500 disabled:opacity-50">
|
|
<i data-lucide="credit-card" class="w-5 h-5"></i> Confirmar y Pagar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div id="contract-modal" class="hidden fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm transition-opacity fade-in">
|
|
<div class="bg-white w-full max-w-lg rounded-3xl shadow-2xl overflow-hidden flex flex-col max-h-[80vh]">
|
|
<div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50">
|
|
<h3 class="font-black text-slate-800 uppercase tracking-widest text-xs">Condiciones Generales</h3>
|
|
<button onclick="closeContractModal()" class="text-slate-400 hover:text-rose-500"><i data-lucide="x" class="w-6 h-6"></i></button>
|
|
</div>
|
|
<div class="p-6 overflow-y-auto text-xs text-slate-600 leading-relaxed whitespace-pre-wrap font-medium" id="modal-contract-text"></div>
|
|
<div class="p-4 border-t border-slate-100 bg-slate-50">
|
|
<button onclick="acceptFromModal()" class="w-full bg-blue-600 text-white font-black py-3.5 rounded-xl shadow-md active:scale-95 transition-all uppercase tracking-widest text-xs">Entendido y Aceptar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pdf-contract-template" class="hidden">
|
|
<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="flex-grow: 1;">
|
|
<h2 id="pdf-company-name" style="margin:0; color:#2563eb; font-size: 28px; font-weight: 900; letter-spacing: -1.5px;">Empresa</h2>
|
|
<p id="pdf-company-details" style="margin: 3px 0 0 0; color: #64748b; font-size: 10px;">Email: - | Tel: -</p>
|
|
</div>
|
|
<div style="text-align: right; font-size: 10px; color: #64748b; width: 250px;">
|
|
<strong style="color: #0f172a; font-size: 14px;">CONTRATO DE SUSCRIPCIÓN</strong><br>
|
|
<span id="pdf-client-name" style="font-weight: bold;">Cliente</span><br>
|
|
<span id="pdf-client-dni">DNI: -</span><br>
|
|
<span id="pdf-client-phone">Tel: -</span>
|
|
</div>
|
|
</div>
|
|
<div id="pdf-dynamic-text" style="margin-bottom: 25px; background: #f8fafc; padding: 25px; border-radius: 12px; border: 1px solid #e2e8f0; white-space: pre-wrap;"></div>
|
|
<div style="margin-top: 15px; border: 1px solid #e2e8f0; padding: 15px; border-radius: 8px; font-size: 10px;">
|
|
<p style="margin: 0;"><strong>Modalidad contratada:</strong> <span id="pdf-plan-name" style="color:#2563eb; font-weight:900;">...</span></p>
|
|
<p id="pdf-timestamp" style="margin: 3px 0 0 0;">Documento firmado digitalmente el ...</p>
|
|
</div>
|
|
<div style="margin-top: 50px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
|
|
<div style="width: 280px; text-align: center;">
|
|
<p style="font-size: 10px; text-transform: uppercase; font-weight: 800; color: #94a3b8; margin-bottom: 15px; text-align: left;">Firma del Titular:</p>
|
|
<img id="pdf-signature-img" style="width: 220px; height: 110px; border-bottom: 2px solid #0f172a;">
|
|
</div>
|
|
<div style="width: 220px; text-align: right;">
|
|
<div style="border: 3px double #2563eb; color: #2563eb; padding: 15px; border-radius: 15px; font-weight: 900; font-size: 12px; text-align: center; transform: rotate(-8deg);">
|
|
SISTEMA VERIFICADO<br>
|
|
<span id="pdf-stamp-company" style="font-size: 16px;">EMPRESA</span><br>
|
|
VALIDADO DIGITALMENTE
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 50px; text-align: center; color: #94a3b8; font-size: 9px; border-top: 1px solid #e2e8f0; padding-top: 20px;">
|
|
Este documento tiene validez legal como contrato de prestación de servicios bajo firma digital verificada.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
|
|
? 'http://localhost:3000' : 'https://integrarepara-api.integrarepara.es';
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const token = urlParams.get('token');
|
|
|
|
let loadedPlans = [];
|
|
let globalConfig = {};
|
|
let clientData = {};
|
|
let selectedPlanId = null;
|
|
|
|
const canvas = document.getElementById('signature-pad');
|
|
const ctx = canvas.getContext('2d');
|
|
let drawing = false;
|
|
|
|
function setupCanvas() {
|
|
const ratio = Math.max(window.devicePixelRatio || 1, 1);
|
|
canvas.width = canvas.offsetWidth * ratio;
|
|
canvas.height = canvas.offsetHeight * ratio;
|
|
ctx.scale(ratio, ratio);
|
|
ctx.strokeStyle = "#1e293b";
|
|
ctx.lineWidth = 3;
|
|
ctx.lineCap = "round";
|
|
}
|
|
|
|
function getPos(e) {
|
|
const rect = canvas.getBoundingClientRect();
|
|
const clientX = e.clientX || (e.touches && e.touches[0].clientX);
|
|
const clientY = e.clientY || (e.touches && e.touches[0].clientY);
|
|
return { x: clientX - rect.left, y: clientY - rect.top };
|
|
}
|
|
function startDrawing(e) { if (e.touches && e.touches.length > 1) return; drawing = true; const pos = getPos(e); ctx.beginPath(); ctx.moveTo(pos.x, pos.y); }
|
|
function draw(e) { if (!drawing) return; e.preventDefault(); const pos = getPos(e); ctx.lineTo(pos.x, pos.y); ctx.stroke(); }
|
|
|
|
canvas.addEventListener('mousedown', startDrawing); canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseup', () => drawing = false);
|
|
canvas.addEventListener('touchstart', startDrawing); canvas.addEventListener('touchmove', draw); canvas.addEventListener('touchend', () => drawing = false);
|
|
function clearSignature() { ctx.clearRect(0, 0, canvas.width, canvas.height); }
|
|
|
|
function toggleDniField() {
|
|
const isChecked = document.getElementById('terms-checkbox').checked;
|
|
const dniContainer = document.getElementById('dni-container');
|
|
if(isChecked) dniContainer.classList.remove('hidden');
|
|
else dniContainer.classList.add('hidden');
|
|
}
|
|
|
|
function showContractModal(e) {
|
|
e.preventDefault();
|
|
document.getElementById('modal-contract-text').innerText = globalConfig.contract_text || "Condiciones no disponibles.";
|
|
document.getElementById('contract-modal').classList.remove('hidden');
|
|
}
|
|
function closeContractModal() { document.getElementById('contract-modal').classList.add('hidden'); }
|
|
function acceptFromModal() {
|
|
closeContractModal();
|
|
document.getElementById('terms-checkbox').checked = true;
|
|
toggleDniField();
|
|
}
|
|
|
|
function goBackToPortal() {
|
|
window.location.href = `index.html?token=${token}`;
|
|
}
|
|
|
|
async function init() {
|
|
if(!token) return alert("Enlace inválido. Falta el token de seguridad.");
|
|
lucide.createIcons();
|
|
|
|
try {
|
|
const res = await fetch(`${API_URL}/public/portal/${token}/protection`);
|
|
const data = await res.json();
|
|
|
|
if (!data.ok) throw new Error(data.error || "Error de conexión");
|
|
|
|
document.getElementById('company-name-badge').innerText = data.company.name;
|
|
document.getElementById('loader').classList.add('hidden');
|
|
|
|
if (data.hasActivePlan && data.activePlanDetails) {
|
|
document.getElementById('active-plan-name').innerText = data.activePlanDetails.plan_name;
|
|
document.getElementById('already-subscribed-container').classList.remove('hidden');
|
|
return;
|
|
}
|
|
|
|
loadedPlans = data.plans;
|
|
globalConfig = data.config;
|
|
clientData = data.client;
|
|
|
|
document.getElementById('pdf-company-name').innerText = data.company.name;
|
|
document.getElementById('pdf-company-details').innerText = `Email: ${globalConfig.email || '-'} | Tel: ${globalConfig.phone || '-'}`;
|
|
document.getElementById('pdf-stamp-company').innerText = data.company.name.toUpperCase();
|
|
document.getElementById('pdf-client-name').innerText = `Asegurado: ${clientData.name}`;
|
|
document.getElementById('pdf-client-phone').innerText = `Tel: ${clientData.phone || '-'}`;
|
|
document.getElementById('pdf-dynamic-text').innerText = globalConfig.contract_text || "El mantenimiento y asistencia quedan cubiertos por las condiciones de la empresa proveedora.";
|
|
|
|
renderPlans();
|
|
document.getElementById('contract-container').classList.remove('hidden');
|
|
|
|
setTimeout(() => {
|
|
setupCanvas();
|
|
window.addEventListener('resize', setupCanvas);
|
|
}, 100);
|
|
|
|
lucide.createIcons();
|
|
|
|
} catch(e) {
|
|
document.getElementById('loader').innerHTML = `<p class="text-rose-500 font-bold uppercase text-center">${e.message}</p>`;
|
|
}
|
|
}
|
|
|
|
function renderPlans() {
|
|
const wrapper = document.getElementById('plans-wrapper');
|
|
if (loadedPlans.length === 0) {
|
|
wrapper.innerHTML = `<p class="text-center text-xs font-bold text-slate-400 bg-slate-50 p-6 rounded-3xl border border-slate-100">El catálogo de planes se está actualizando. Vuelve pronto.</p>`;
|
|
return;
|
|
}
|
|
|
|
wrapper.innerHTML = loadedPlans.map((p, index) => {
|
|
const isRecommended = p.type === 'anual';
|
|
return `
|
|
<div onclick="selectPlan(${p.id})" id="card-${p.id}" class="plan-card ${index === 0 ? 'active' : 'bg-slate-50 border-slate-200'} p-5 rounded-[2rem] shadow-sm flex justify-between items-center cursor-pointer overflow-hidden relative">
|
|
${isRecommended ? `<div class="absolute top-0 right-0 bg-amber-500 text-white text-[9px] font-black px-4 py-1 rounded-bl-2xl uppercase tracking-widest animate-offer shadow-sm">Ahorras dinero</div>` : ''}
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-5 h-5 rounded-full border-2 ${index === 0 ? 'border-blue-600' : 'border-slate-300'} flex items-center justify-center indicator-circle shrink-0">
|
|
<div class="w-2.5 h-2.5 bg-blue-600 rounded-full ${index === 0 ? '' : 'hidden'} indicator-dot"></div>
|
|
</div>
|
|
<div>
|
|
<p class="font-black text-slate-800 text-sm leading-tight">${p.name}</p>
|
|
<p class="text-[9px] text-slate-500 font-bold uppercase tracking-widest mt-0.5">${p.urgencies_limit} Urg | ${p.bricos_limit} Bricos</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right pl-3 border-l border-slate-100 shrink-0">
|
|
<p class="text-xl font-black text-blue-600 leading-none">${p.price}€</p>
|
|
<p class="text-[8px] font-black text-slate-400 uppercase mt-1 tracking-widest">/ ${p.type}</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
if (loadedPlans.length > 0) selectPlan(loadedPlans[0].id);
|
|
}
|
|
|
|
function selectPlan(id) {
|
|
selectedPlanId = id;
|
|
document.querySelectorAll('.plan-card').forEach(c => {
|
|
c.classList.remove('active', 'bg-white', 'shadow-xl');
|
|
c.classList.add('bg-slate-50', 'border-slate-200');
|
|
c.querySelector('.indicator-circle').classList.replace('border-blue-600', 'border-slate-300');
|
|
c.querySelector('.indicator-dot').classList.add('hidden');
|
|
});
|
|
|
|
const activeCard = document.getElementById(`card-${id}`);
|
|
activeCard.classList.add('active', 'bg-white', 'shadow-xl');
|
|
activeCard.classList.remove('bg-slate-50', 'border-slate-200');
|
|
activeCard.querySelector('.indicator-circle').classList.replace('border-slate-300', 'border-blue-600');
|
|
activeCard.querySelector('.indicator-dot').classList.remove('hidden');
|
|
}
|
|
|
|
async function processContract() {
|
|
if (!selectedPlanId) return alert("Por favor, selecciona un plan.");
|
|
|
|
if (!document.getElementById('terms-checkbox').checked) {
|
|
return alert("⚠️ Debes leer y aceptar las Condiciones del Contrato marcando la casilla.");
|
|
}
|
|
|
|
const dniVal = document.getElementById('client-dni').value.trim().toUpperCase();
|
|
if (!dniVal || dniVal.length < 5) {
|
|
return alert("⚠️ Por favor, introduce un DNI/NIE válido para formalizar el contrato.");
|
|
}
|
|
|
|
const blank = document.createElement('canvas');
|
|
blank.width = canvas.width; blank.height = canvas.height;
|
|
if (canvas.toDataURL() === blank.toDataURL()) return alert("⚠️ Firma requerida: Por favor, firma el contrato en el recuadro con rayas.");
|
|
|
|
const btn = document.getElementById('btnAction');
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> Preparando pasarela...';
|
|
lucide.createIcons();
|
|
|
|
const planSeleccionado = loadedPlans.find(p => p.id === selectedPlanId);
|
|
document.getElementById('pdf-signature-img').src = canvas.toDataURL("image/png");
|
|
document.getElementById('pdf-plan-name').innerText = `${planSeleccionado.name} (${planSeleccionado.price}€ / ${planSeleccionado.type})`;
|
|
document.getElementById('pdf-timestamp').innerText = "Documento firmado digitalmente el " + new Date().toLocaleDateString('es-ES') + " a las " + new Date().toLocaleTimeString('es-ES');
|
|
document.getElementById('pdf-client-dni').innerText = `DNI: ${dniVal}`; // Inyectar DNI
|
|
|
|
const element = document.getElementById('pdf-contract-template');
|
|
element.classList.remove('hidden');
|
|
|
|
const opt = {
|
|
margin: [0.3, 0, 0.3, 0],
|
|
filename: `Contrato_Proteccion_${new Date().getTime()}.pdf`,
|
|
image: { type: 'jpeg', quality: 0.98 },
|
|
html2canvas: { scale: 2, useCORS: true, scrollY: 0, windowHeight: element.scrollHeight },
|
|
jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
|
|
};
|
|
|
|
try {
|
|
const pdfBase64 = await html2pdf().set(opt).from(element).output('datauristring');
|
|
|
|
const payload = {
|
|
plan_id: selectedPlanId,
|
|
signature: canvas.toDataURL("image/png"),
|
|
pdf_document: pdfBase64,
|
|
dni: dniVal
|
|
};
|
|
|
|
const res = await fetch(`${API_URL}/public/portal/${token}/protection/subscribe`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
const apiData = await res.json();
|
|
|
|
if (apiData.ok && apiData.checkout_url) {
|
|
window.location.href = apiData.checkout_url;
|
|
} else {
|
|
throw new Error(apiData.error || "No se pudo conectar con la pasarela de pago segura.");
|
|
}
|
|
|
|
} catch (err) {
|
|
alert("❌ Error: " + err.message);
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<i data-lucide="credit-card" class="w-5 h-5"></i> Confirmar y Pagar';
|
|
lucide.createIcons();
|
|
} finally {
|
|
element.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
</script>
|
|
</body>
|
|
</html> |