mirror of
https://github.com/marcogll/AnchorOS.git
synced 2026-03-15 13:24:27 +00:00
feat: Add Formbricks integration, update forms with webhooks, enhance navigation
- Integrate @formbricks/js for future surveys (FormbricksProvider) - Add WebhookForm component for unified form submission (contact/franchise/membership) - Update contact form with reason dropdown field - Update franchise form with new fields: estado, ciudad, socios checkbox - Update franchise benefits: manuals, training platform, RH system, investment $100k - Add Contacto link to desktop/mobile nav and footer - Update membership form to use WebhookForm with membership_id select - Update hero buttons to use #3E352E color consistently - Refactor contact/franchise pages to use new hero layout and components - Add webhook utility (lib/webhook.ts) for parallel submission to test+prod - Add email receipt hooks to booking endpoints - Update globals.css with new color variables and navigation styles - Docker configuration for deployment
This commit is contained in:
Marco Gallegos
@@ -224,6 +224,19 @@ export async function POST(request: NextRequest) {
|
||||
)
|
||||
}
|
||||
|
||||
// Send receipt email
|
||||
try {
|
||||
await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/receipts/${booking.id}/email`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
} catch (emailError) {
|
||||
console.error('Failed to send receipt email:', emailError)
|
||||
// Don't fail the booking if email fails
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
booking
|
||||
|
||||
@@ -187,6 +187,18 @@ export async function POST(request: NextRequest) {
|
||||
)
|
||||
}
|
||||
|
||||
// Send receipt email
|
||||
try {
|
||||
await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/receipts/${booking.id}/email`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
} catch (emailError) {
|
||||
console.error('Failed to send receipt email:', emailError)
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
booking,
|
||||
|
||||
@@ -149,6 +149,18 @@ export async function POST(request: NextRequest) {
|
||||
)
|
||||
}
|
||||
|
||||
// Send receipt email
|
||||
try {
|
||||
await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/receipts/${booking.id}/email`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
} catch (emailError) {
|
||||
console.error('Failed to send receipt email:', emailError)
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
booking,
|
||||
|
||||
132
app/api/receipts/[bookingId]/email/route.ts
Normal file
132
app/api/receipts/[bookingId]/email/route.ts
Normal file
@@ -0,0 +1,132 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { supabaseAdmin } from '@/lib/supabase/admin'
|
||||
import jsPDF from 'jspdf'
|
||||
import { format } from 'date-fns'
|
||||
import { es } from 'date-fns/locale'
|
||||
import { Resend } from 'resend'
|
||||
|
||||
const resend = new Resend(process.env.RESEND_API_KEY!)
|
||||
|
||||
/** @description Send receipt email for booking */
|
||||
export async function POST(
|
||||
request: NextRequest,
|
||||
{ params }: { params: { bookingId: string } }
|
||||
) {
|
||||
try {
|
||||
// Get booking data
|
||||
const { data: booking, error: bookingError } = await supabaseAdmin
|
||||
.from('bookings')
|
||||
.select(`
|
||||
*,
|
||||
customer:customers(*),
|
||||
service:services(*),
|
||||
staff:staff(*),
|
||||
location:locations(*)
|
||||
`)
|
||||
.eq('id', params.bookingId)
|
||||
.single()
|
||||
|
||||
if (bookingError || !booking) {
|
||||
return NextResponse.json({ error: 'Booking not found' }, { status: 404 })
|
||||
}
|
||||
|
||||
// Generate PDF
|
||||
const doc = new jsPDF()
|
||||
doc.setFont('helvetica')
|
||||
|
||||
// Header
|
||||
doc.setFontSize(20)
|
||||
doc.setTextColor(139, 69, 19)
|
||||
doc.text('ANCHOR:23', 20, 30)
|
||||
|
||||
doc.setFontSize(14)
|
||||
doc.setTextColor(0, 0, 0)
|
||||
doc.text('Recibo de Reserva', 20, 45)
|
||||
|
||||
// Details
|
||||
doc.setFontSize(12)
|
||||
let y = 65
|
||||
doc.text(`Número de Reserva: ${booking.id.slice(-8).toUpperCase()}`, 20, y)
|
||||
y += 10
|
||||
doc.text(`Cliente: ${booking.customer.first_name} ${booking.customer.last_name}`, 20, y)
|
||||
y += 10
|
||||
doc.text(`Servicio: ${booking.service.name}`, 20, y)
|
||||
y += 10
|
||||
doc.text(`Fecha y Hora: ${format(new Date(booking.date), 'PPP p', { locale: es })}`, 20, y)
|
||||
y += 10
|
||||
doc.text(`Total: $${booking.service.price} MXN`, 20, y)
|
||||
|
||||
// Footer
|
||||
y = 250
|
||||
doc.setFontSize(10)
|
||||
doc.setTextColor(128, 128, 128)
|
||||
doc.text('ANCHOR:23 - Belleza anclada en exclusividad', 20, y)
|
||||
|
||||
const pdfBuffer = Buffer.from(doc.output('arraybuffer'))
|
||||
|
||||
// Send email
|
||||
const emailHtml = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Recibo de Reserva - ANCHOR:23</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
|
||||
.container { max-width: 600px; margin: 0 auto; padding: 20px; }
|
||||
.header { text-align: center; margin-bottom: 30px; }
|
||||
.logo { color: #8B4513; font-size: 24px; font-weight: bold; }
|
||||
.details { background: #f9f9f9; padding: 20px; border-radius: 8px; margin: 20px 0; }
|
||||
.footer { text-align: center; margin-top: 30px; font-size: 12px; color: #666; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="logo">ANCHOR:23</div>
|
||||
<h1>Confirmación de Reserva</h1>
|
||||
</div>
|
||||
|
||||
<p>Hola ${booking.customer.first_name},</p>
|
||||
<p>Tu reserva ha sido confirmada. Adjunto el recibo.</p>
|
||||
|
||||
<div class="details">
|
||||
<p><strong>Servicio:</strong> ${booking.service.name}</p>
|
||||
<p><strong>Fecha:</strong> ${format(new Date(booking.date), 'PPP', { locale: es })}</p>
|
||||
<p><strong>Hora:</strong> ${format(new Date(booking.date), 'p', { locale: es })}</p>
|
||||
<p><strong>Total:</strong> $${booking.service.price} MXN</p>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>ANCHOR:23 - Saltillo, Coahuila, México</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
|
||||
const { data: emailResult, error: emailError } = await resend.emails.send({
|
||||
from: 'ANCHOR:23 <noreply@anchor23.mx>',
|
||||
to: booking.customer.email,
|
||||
subject: 'Confirmación de Reserva - ANCHOR:23',
|
||||
html: emailHtml,
|
||||
attachments: [
|
||||
{
|
||||
filename: `recibo-${booking.id.slice(-8)}.pdf`,
|
||||
content: pdfBuffer
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
if (emailError) {
|
||||
console.error('Email error:', emailError)
|
||||
return NextResponse.json({ error: 'Failed to send email' }, { status: 500 })
|
||||
}
|
||||
|
||||
return NextResponse.json({ success: true, emailId: emailResult?.id })
|
||||
|
||||
} catch (error) {
|
||||
console.error('Receipt email error:', error)
|
||||
return NextResponse.json({ error: 'Failed to send receipt email' }, { status: 500 })
|
||||
}
|
||||
}
|
||||
104
app/api/receipts/[bookingId]/route.ts
Normal file
104
app/api/receipts/[bookingId]/route.ts
Normal file
@@ -0,0 +1,104 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { supabaseAdmin } from '@/lib/supabase/admin'
|
||||
import jsPDF from 'jspdf'
|
||||
import { format } from 'date-fns'
|
||||
import { es } from 'date-fns/locale'
|
||||
|
||||
/** @description Generate PDF receipt for booking */
|
||||
export async function GET(
|
||||
request: NextRequest,
|
||||
{ params }: { params: { bookingId: string } }
|
||||
) {
|
||||
try {
|
||||
const supabase = supabaseAdmin
|
||||
|
||||
// Get booking with related data
|
||||
const { data: booking, error: bookingError } = await supabase
|
||||
.from('bookings')
|
||||
.select(`
|
||||
*,
|
||||
customer:customers(*),
|
||||
service:services(*),
|
||||
staff:staff(*),
|
||||
location:locations(*)
|
||||
`)
|
||||
.eq('id', params.bookingId)
|
||||
.single()
|
||||
|
||||
if (bookingError || !booking) {
|
||||
return NextResponse.json({ error: 'Booking not found' }, { status: 404 })
|
||||
}
|
||||
|
||||
// Create PDF
|
||||
const doc = new jsPDF()
|
||||
|
||||
// Set font
|
||||
doc.setFont('helvetica')
|
||||
|
||||
// Header
|
||||
doc.setFontSize(20)
|
||||
doc.setTextColor(139, 69, 19) // Saddle brown
|
||||
doc.text('ANCHOR:23', 20, 30)
|
||||
|
||||
doc.setFontSize(14)
|
||||
doc.setTextColor(0, 0, 0)
|
||||
doc.text('Recibo de Reserva', 20, 45)
|
||||
|
||||
// Booking details
|
||||
doc.setFontSize(12)
|
||||
let y = 65
|
||||
|
||||
doc.text(`Número de Reserva: ${booking.id.slice(-8).toUpperCase()}`, 20, y)
|
||||
y += 10
|
||||
|
||||
doc.text(`Fecha de Reserva: ${format(new Date(booking.created_at), 'PPP', { locale: es })}`, 20, y)
|
||||
y += 10
|
||||
|
||||
doc.text(`Cliente: ${booking.customer.first_name} ${booking.customer.last_name}`, 20, y)
|
||||
y += 10
|
||||
|
||||
doc.text(`Servicio: ${booking.service.name}`, 20, y)
|
||||
y += 10
|
||||
|
||||
doc.text(`Profesional: ${booking.staff.first_name} ${booking.staff.last_name}`, 20, y)
|
||||
y += 10
|
||||
|
||||
doc.text(`Ubicación: ${booking.location.name}`, 20, y)
|
||||
y += 10
|
||||
|
||||
doc.text(`Fecha y Hora: ${format(new Date(booking.date), 'PPP p', { locale: es })}`, 20, y)
|
||||
y += 10
|
||||
|
||||
doc.text(`Duración: ${booking.service.duration} minutos`, 20, y)
|
||||
y += 10
|
||||
|
||||
// Price
|
||||
y += 10
|
||||
doc.setFontSize(14)
|
||||
doc.text(`Total: $${booking.service.price} MXN`, 20, y)
|
||||
|
||||
// Footer
|
||||
y = 250
|
||||
doc.setFontSize(10)
|
||||
doc.setTextColor(128, 128, 128)
|
||||
doc.text('ANCHOR:23 - Belleza anclada en exclusividad', 20, y)
|
||||
y += 5
|
||||
doc.text('Saltillo, Coahuila, México | contacto@anchor23.mx', 20, y)
|
||||
y += 5
|
||||
doc.text('+52 844 123 4567', 20, y)
|
||||
|
||||
// Generate buffer
|
||||
const pdfBuffer = doc.output('arraybuffer')
|
||||
|
||||
return new NextResponse(pdfBuffer, {
|
||||
headers: {
|
||||
'Content-Type': 'application/pdf',
|
||||
'Content-Disposition': `attachment; filename=receipt-${booking.id.slice(-8)}.pdf`
|
||||
}
|
||||
})
|
||||
|
||||
} catch (error) {
|
||||
console.error('Receipt generation error:', error)
|
||||
return NextResponse.json({ error: 'Failed to generate receipt' }, { status: 500 })
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user