Ichitux/lambada-fiesta-live
1
0
Fork 0
mirror of https://github.com/Ichitux/lambada-fiesta-live.git synced 2026-05-15 15:12:19 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Mail & Fixes
All checks were successful
Deploy NPM app / Deploy NPM (push) Successful in 52s
Details

Browse Source
This commit is contained in:
Antoni Nuñez Romeu
2026-03-20 02:57:46 +01:00
parent b87443f0e5
commit 5b663be89f
3 changed files with 161 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/BookingSection.tsx
View File

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from "react";
import { motion } from "framer-motion";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import { WEBHOOK_URL } from "@/data/event-data";
import { WEBHOOK_URL, WEBHOOK_SECRET } from "@/data/event-data";
import { CheckCircle, Loader2, AlertCircle, Search } from "lucide-react";
/**
@@ -135,6 +135,10 @@ const BookingSection = () => {
console.log("[Booking] Sending to:", WEBHOOK_URL);
const res = await fetch(WEBHOOK_URL, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-Webhook-Secret": WEBHOOK_SECRET,
},
body: JSON.stringify(result.data),
});
console.log("[Booking] Response status:", res.status);

7
src/data/event-data.ts
View File

@@ -57,6 +57,13 @@ export const EVENT_INFO = {
* }
*/
export const WEBHOOK_URL = "https://n8n.hacecalor.net/webhook/event-reservation";
/**
* CLAVE DE AUTENTICACIÓN:
*
* Si activas "Header Auth" en n8n, asegúrate de que el nombre del header
* sea "X-Webhook-Secret" y que este valor coincida con el que pongas allí.
*/
export const WEBHOOK_SECRET = "oWkS4cAgj0LVgIbnO3cGKTePPLnRAIAa5NTvXahx5z0=";
// ---- SOBRE EL EVENTO ----
export const ABOUT_EVENT = {

149
ticket-template.html Normal file
View File

@@ -0,0 +1,149 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registro de Ticket - ZoukLambadaBCN</title>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
/* Email client resets */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; background-color: #fcf6ef; }
/* Custom Styles */
.primary-text { color: #fb923c !important; }
.font-display { font-family: 'Pacifico', cursive; }
.font-body { font-family: 'Noto Sans', 'Helvetica', 'Arial', sans-serif; }
</style>
</head>
<body style="margin: 0; padding: 0; background-color: #fcf6ef;">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px; background-color: #ffffff; margin-top: 40px; margin-bottom: 40px; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(90, 62, 30, 0.05);">
<!-- Header with Wave/Beach style -->
<tr>
<td align="center" style="background: linear-gradient(135deg, #fb923c, #f97316); padding: 40px 20px;">
<h1 class="font-display" style="color: #ffffff; margin: 0; font-size: 36px; text-shadow: 2px 2px 0px rgba(0,0,0,0.1);">
ZoukLambadaBCN
</h1>
<p class="font-body" style="color: #ffe7d1; margin: 10px 0 0; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700;">
Beach Festival 2026
</p>
</td>
</tr>
<!-- Content Area -->
<tr>
<td align="center" style="padding: 40px 30px;" class="font-body">
<h2 style="color: #5a3e1e; margin: 0 0 15px; font-size: 24px;">¡Hola, {{name}}! 👋</h2>
<p style="color: #7c5a3d; line-height: 1.6; margin: 0 0 30px; font-size: 16px;">
Tu registro para el <strong>ZoukLambadaBCN Beach Festival</strong> ha sido recibido correctamente. Estamos emocionados de tenerte con nosotros este Septiembre.
</p>
<!-- Ticket Information Box -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #fdf8f4; border: 1px dashed #fb923c; border-radius: 15px; padding: 25px;">
<tr>
<td align="left" style="padding-bottom: 10px; border-bottom: 1px solid #eee;">
<span style="font-size: 12px; color: #9a7a5c; text-transform: uppercase; font-weight: bold;">Ticket de Referencia:</span><br>
<span style="font-size: 18px; color: #5a3e1e; font-weight: 700;">#{{requestId}}</span>
</td>
</tr>
<tr>
<td align="left" style="padding: 15px 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="color: #5a3e1e; font-size: 16px;">{{passType}} x{{amount}}</td>
<td align="right" style="color: #fb923c; font-size: 20px; font-weight: 800;">{{price}}€</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: #ffffff; border-radius: 8px; padding: 10px; border: 1px solid #eee;">
<p style="margin: 0; font-size: 13px; color: #9a7a5c; font-style: italic;">
⚠️ Recuerda: No se requiere pago online. El pago total de <strong>{{price}}€</strong> se realizará directamente en el mostrador del evento.
</p>
</td>
</tr>
</table>
<!-- Location / Date summary -->
<p style="margin: 30px 0 0; font-size: 14px; color: #9a7a5c;">
📅 <strong>04 - 07 Sept, 2026</strong><br>
📍 Santa Susana, Barcelona
</p>
</td>
</tr>
<!-- Separator -->
<tr>
<td align="center" style="padding: 0 30px;">
<hr style="border: 0; border-top: 1px solid #eee; margin: 0;">
</td>
</tr>
<!-- Content Area (English) -->
<tr>
<td align="center" style="padding: 40px 30px;" class="font-body">
<h2 style="color: #5a3e1e; margin: 0 0 15px; font-size: 24px;">Hi, {{name}}! 👋</h2>
<p style="color: #7c5a3d; line-height: 1.6; margin: 0 0 30px; font-size: 16px;">
Your registration for the <strong>ZoukLambadaBCN Beach Festival</strong> has been successfully received. We are excited to have you with us this September.
</p>
<!-- Ticket Information Box -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #fdf8f4; border: 1px dashed #fb923c; border-radius: 15px; padding: 25px;">
<tr>
<td align="left" style="padding-bottom: 10px; border-bottom: 1px solid #eee;">
<span style="font-size: 12px; color: #9a7a5c; text-transform: uppercase; font-weight: bold;">Reference Ticket:</span><br>
<span style="font-size: 18px; color: #5a3e1e; font-weight: 700;">#{{requestId}}</span>
</td>
</tr>
<tr>
<td align="left" style="padding: 15px 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="color: #5a3e1e; font-size: 16px;">{{passType}} x{{amount}}</td>
<td align="right" style="color: #fb923c; font-size: 20px; font-weight: 800;">{{price}}€</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: #ffffff; border-radius: 8px; padding: 10px; border: 1px solid #eee;">
<p style="margin: 0; font-size: 13px; color: #9a7a5c; font-style: italic;">
⚠️ Remember: No online payment required. The total payment of <strong>{{price}}€</strong> will be made directly at the event's front desk.
</p>
</td>
</tr>
</table>
<!-- Location / Date summary -->
<p style="margin: 30px 0 0; font-size: 14px; color: #9a7a5c;">
📅 <strong>04 - 07 Sept, 2026</strong><br>
📍 Santa Susana, Barcelona
</p>
</td>
</tr>
<!-- Social / Footer -->
<tr>
<td align="center" style="background-color: #fdf8f4; padding: 30px; border-top: 1px solid #efefef;">
<p style="margin: 0 0 15px; font-size: 14px; color: #7c5a3d; font-weight: bold;">¡Síguenos y prepárate! / Follow us and get ready!</p>
<a href="https://instagram.com/zouklambadabcn" style="text-decoration: none; display: inline-block; margin: 0 5px;">
<img src="https://cdn-icons-png.flaticon.com/32/174/174855.png" width="24" height="24" alt="Instagram">
</a>
<p style="margin: 20px 0 0; font-size: 12px; color: #9a7a5c;">
© 2026 ZoukLambadaBCN. Todos los derechos reservados.<br>
Si no realizaste este registro, por favor ignora este correo.<br>
<em>If you did not perform this registration, please ignore this email.</em>
</p>
</td>
</tr>
</table>
</center>
</body>
</html>