Lots of UI fixes

This commit is contained in:
Jennie Robinson Faber 2025-10-08 19:02:24 +01:00
parent 1f7a0f40c0
commit e8e3b84276
24 changed files with 3652 additions and 1770 deletions

View file

@ -0,0 +1,62 @@
import Series from '../../models/series.js'
import Event from '../../models/event.js'
import { connectDB } from '../../utils/mongoose.js'
export default defineEventHandler(async (event) => {
try {
await connectDB()
const body = await readBody(event)
const { id, title, description, type, totalEvents } = body
if (!id || !title) {
throw createError({
statusCode: 400,
statusMessage: 'Series ID and title are required'
})
}
// Update the series record
const updatedSeries = await Series.findOneAndUpdate(
{ id },
{
title,
description,
type,
totalEvents: totalEvents || null
},
{ new: true }
)
if (!updatedSeries) {
throw createError({
statusCode: 404,
statusMessage: 'Series not found'
})
}
// Update all events in this series with the new metadata
await Event.updateMany(
{
'series.id': id,
'series.isSeriesEvent': true
},
{
$set: {
'series.title': title,
'series.description': description,
'series.type': type,
'series.totalEvents': totalEvents || null
}
}
)
return updatedSeries
} catch (error) {
console.error('Error updating series:', error)
throw createError({
statusCode: 500,
statusMessage: 'Failed to update series'
})
}
})

View file

@ -1,14 +1,15 @@
import Event from '../../../models/event';
import Event from "../../../models/event";
import { sendEventCancellationEmail } from "../../../utils/resend.js";
export default defineEventHandler(async (event) => {
const id = getRouterParam(event, 'id');
const id = getRouterParam(event, "id");
const body = await readBody(event);
const { email } = body;
if (!email) {
throw createError({
statusCode: 400,
statusMessage: 'Email is required'
statusMessage: "Email is required",
});
}
@ -24,22 +25,31 @@ export default defineEventHandler(async (event) => {
if (!eventDoc) {
throw createError({
statusCode: 404,
statusMessage: 'Event not found'
statusMessage: "Event not found",
});
}
// Find the registration index
const registrationIndex = eventDoc.registrations.findIndex(
registration => registration.email.toLowerCase() === email.toLowerCase()
(registration) =>
registration.email.toLowerCase() === email.toLowerCase(),
);
if (registrationIndex === -1) {
throw createError({
statusCode: 404,
statusMessage: 'Registration not found'
statusMessage: "Registration not found",
});
}
// Store registration data before removing (convert to plain object)
const registration = {
name: eventDoc.registrations[registrationIndex].name,
email: eventDoc.registrations[registrationIndex].email,
membershipLevel:
eventDoc.registrations[registrationIndex].membershipLevel,
};
// Remove the registration
eventDoc.registrations.splice(registrationIndex, 1);
@ -48,13 +58,26 @@ export default defineEventHandler(async (event) => {
await eventDoc.save();
// Send cancellation confirmation email
try {
const eventData = {
title: eventDoc.title,
slug: eventDoc.slug,
_id: eventDoc._id,
};
await sendEventCancellationEmail(registration, eventData);
} catch (emailError) {
// Log error but don't fail the cancellation
console.error("Failed to send cancellation email:", emailError);
}
return {
success: true,
message: 'Registration cancelled successfully',
registeredCount: eventDoc.registeredCount
message: "Registration cancelled successfully",
registeredCount: eventDoc.registeredCount,
};
} catch (error) {
console.error('Error cancelling registration:', error);
console.error("Error cancelling registration:", error);
// Re-throw known errors
if (error.statusCode) {
@ -63,7 +86,7 @@ export default defineEventHandler(async (event) => {
throw createError({
statusCode: 500,
statusMessage: 'Failed to cancel registration'
statusMessage: "Failed to cancel registration",
});
}
});

View file

@ -1,6 +1,7 @@
import Event from "../../../models/event.js";
import Member from "../../../models/member.js";
import { connectDB } from "../../../utils/mongoose.js";
import { sendEventRegistrationEmail } from "../../../utils/resend.js";
import mongoose from "mongoose";
export default defineEventHandler(async (event) => {
@ -102,7 +103,7 @@ export default defineEventHandler(async (event) => {
}
// Add registration
eventData.registrations.push({
const registration = {
memberId: member ? member._id : null,
name: body.name,
email: body.email.toLowerCase(),
@ -112,13 +113,20 @@ export default defineEventHandler(async (event) => {
amountPaid: 0,
dietary: body.dietary || false,
registeredAt: new Date(),
});
};
eventData.registrations.push(registration);
// Save the updated event
await eventData.save();
// TODO: Send confirmation email using Resend
// await sendEventRegistrationEmail(body.email, eventData)
// Send confirmation email using Resend
try {
await sendEventRegistrationEmail(registration, eventData);
} catch (emailError) {
// Log error but don't fail the registration
console.error("Failed to send confirmation email:", emailError);
}
return {
success: true,

View file

@ -0,0 +1,114 @@
import Event from "../../models/event";
import Member from "../../models/member";
export default defineEventHandler(async (event) => {
const query = getQuery(event);
const { memberId } = query;
if (!memberId) {
throw createError({
statusCode: 400,
statusMessage: "Member ID is required",
});
}
try {
// Verify member exists
const member = await Member.findById(memberId);
if (!member) {
throw createError({
statusCode: 404,
statusMessage: "Member not found",
});
}
// Find all events where the user is registered
const events = await Event.find({
"registrations.memberId": memberId,
isCancelled: { $ne: true },
})
.select("title slug description startDate endDate location")
.sort({ startDate: 1 });
// Generate iCal format
const ical = generateICalendar(events, member);
// Set headers for calendar subscription (not download)
setHeader(event, "Content-Type", "text/calendar; charset=utf-8");
setHeader(event, "Cache-Control", "no-cache, no-store, must-revalidate");
setHeader(event, "Pragma", "no-cache");
setHeader(event, "Expires", "0");
return ical;
} catch (error) {
console.error("Error generating calendar:", error);
if (error.statusCode) {
throw error;
}
throw createError({
statusCode: 500,
statusMessage: "Failed to generate calendar",
});
}
});
function generateICalendar(events, member) {
const now = new Date();
const timestamp = now
.toISOString()
.replace(/[-:]/g, "")
.replace(/\.\d{3}/, "");
let ical = [
"BEGIN:VCALENDAR",
"VERSION:2.0",
"PRODID:-//Ghost Guild//Events Calendar//EN",
"CALSCALE:GREGORIAN",
"METHOD:PUBLISH",
"X-WR-CALNAME:Ghost Guild - My Events",
"X-WR-TIMEZONE:UTC",
"X-WR-CALDESC:Your registered Ghost Guild events",
"REFRESH-INTERVAL;VALUE=DURATION:PT1H",
"X-PUBLISHED-TTL:PT1H",
];
events.forEach((evt) => {
const eventStart = new Date(evt.startDate);
const eventEnd = new Date(evt.endDate);
const dtstart = eventStart
.toISOString()
.replace(/[-:]/g, "")
.replace(/\.\d{3}/, "");
const dtend = eventEnd
.toISOString()
.replace(/[-:]/g, "")
.replace(/\.\d{3}/, "");
const dtstamp = timestamp;
// Clean description for iCal format
const description = (evt.description || "")
.replace(/\n/g, "\\n")
.replace(/,/g, "\\,");
const eventUrl = `https://ghostguild.org/events/${evt.slug || evt._id}`;
ical.push("BEGIN:VEVENT");
ical.push(`UID:${evt._id}@ghostguild.org`);
ical.push(`DTSTAMP:${dtstamp}`);
ical.push(`DTSTART:${dtstart}`);
ical.push(`DTEND:${dtend}`);
ical.push(`SUMMARY:${evt.title}`);
ical.push(`DESCRIPTION:${description}\\n\\nView event: ${eventUrl}`);
ical.push(`LOCATION:${evt.location || "Online"}`);
ical.push(`URL:${eventUrl}`);
ical.push(`STATUS:CONFIRMED`);
ical.push("END:VEVENT");
});
ical.push("END:VCALENDAR");
return ical.join("\r\n");
}

View file

@ -9,19 +9,13 @@ export const CONTRIBUTION_TIERS = {
label: "$0 - I need support right now",
tier: "free",
helcimPlanId: null, // No Helcim plan needed for free tier
features: ["Access to basic resources", "Community forum access"],
},
SUPPORTER: {
value: "5",
amount: 5,
label: "$5 - I can contribute a little",
label: "$5 - I can contribute",
tier: "supporter",
helcimPlanId: 20162,
features: [
"All Free Membership benefits",
"Priority community support",
"Early access to events",
],
},
MEMBER: {
value: "15",
@ -29,12 +23,6 @@ export const CONTRIBUTION_TIERS = {
label: "$15 - I can sustain the community",
tier: "member",
helcimPlanId: 21596,
features: [
"All Supporter benefits",
"Access to premium workshops",
"Monthly 1-on-1 sessions",
"Advanced resource library",
],
},
ADVOCATE: {
value: "30",
@ -42,12 +30,6 @@ export const CONTRIBUTION_TIERS = {
label: "$30 - I can support others too",
tier: "advocate",
helcimPlanId: 21597,
features: [
"All Member benefits",
"Weekly group mentoring",
"Access to exclusive events",
"Direct messaging with experts",
],
},
CHAMPION: {
value: "50",
@ -55,13 +37,6 @@ export const CONTRIBUTION_TIERS = {
label: "$50 - I want to sponsor multiple members",
tier: "champion",
helcimPlanId: 21598,
features: [
"All Advocate benefits",
"Personal mentoring sessions",
"VIP event access",
"Custom project support",
"Annual strategy session",
],
},
};

263
server/utils/resend.js Normal file
View file

@ -0,0 +1,263 @@
import { Resend } from "resend";
const resend = new Resend(process.env.RESEND_API_KEY);
/**
* Send event registration confirmation email
*/
export async function sendEventRegistrationEmail(registration, eventData) {
const formatDate = (dateString) => {
const date = new Date(dateString);
return new Intl.DateTimeFormat("en-US", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
}).format(date);
};
const formatTime = (startDate, endDate) => {
const start = new Date(startDate);
const end = new Date(endDate);
const timeFormat = new Intl.DateTimeFormat("en-US", {
hour: "numeric",
minute: "2-digit",
timeZoneName: "short",
});
return `${timeFormat.format(start)} - ${timeFormat.format(end)}`;
};
try {
const { data, error } = await resend.emails.send({
from: "Ghost Guild <events@babyghosts.org>",
to: [registration.email],
subject: `You're registered for ${eventData.title}`,
html: `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.header {
background-color: #1a1a2e;
color: #fff;
padding: 30px;
text-align: center;
border-radius: 8px 8px 0 0;
}
.content {
background-color: #f9f9f9;
padding: 30px;
border-radius: 0 0 8px 8px;
}
.event-details {
background-color: #fff;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
border-left: 4px solid #3b82f6;
}
.detail-row {
margin: 10px 0;
}
.label {
font-weight: 600;
color: #666;
font-size: 14px;
}
.value {
color: #1a1a2e;
font-size: 16px;
}
.button {
display: inline-block;
background-color: #3b82f6;
color: #fff;
padding: 12px 30px;
text-decoration: none;
border-radius: 6px;
margin: 20px 0;
}
.footer {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #ddd;
color: #666;
font-size: 14px;
}
</style>
</head>
<body>
<div class="header">
<h1 style="margin: 0;">You're Registered! 🎉</h1>
</div>
<div class="content">
<p>Hi ${registration.name},</p>
<p>Thank you for registering for <strong>${eventData.title}</strong>!</p>
<div class="event-details">
<div class="detail-row">
<div class="label">Date</div>
<div class="value">${formatDate(eventData.startDate)}</div>
</div>
<div class="detail-row">
<div class="label">Time</div>
<div class="value">${formatTime(eventData.startDate, eventData.endDate)}</div>
</div>
<div class="detail-row">
<div class="label">Location</div>
<div class="value">${eventData.location}</div>
</div>
</div>
${eventData.description ? `<p>${eventData.description}</p>` : ""}
<center>
<a href="${process.env.BASE_URL || "https://ghostguild.org"}/events/${eventData.slug || eventData._id}" class="button">
View Event Details
</a>
</center>
<p style="margin-top: 30px; font-size: 14px; color: #666;">
<strong>Need to cancel?</strong><br>
Visit the event page and click "Cancel Registration" to remove yourself from the attendee list.
</p>
</div>
<div class="footer">
<p>Ghost Guild</p>
<p>
Questions? Email us at
<a href="mailto:events@babyghosts.org">events@babyghosts.org</a>
</p>
</div>
</body>
</html>
`,
});
if (error) {
console.error("Failed to send registration email:", error);
return { success: false, error };
}
return { success: true, data };
} catch (error) {
console.error("Error sending registration email:", error);
return { success: false, error };
}
}
/**
* Send event cancellation confirmation email
*/
export async function sendEventCancellationEmail(registration, eventData) {
try {
const { data, error } = await resend.emails.send({
from: "Ghost Guild <events@ghostguild.org>",
to: [registration.email],
subject: `Registration cancelled: ${eventData.title}`,
html: `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.header {
background-color: #1a1a2e;
color: #fff;
padding: 30px;
text-align: center;
border-radius: 8px 8px 0 0;
}
.content {
background-color: #f9f9f9;
padding: 30px;
border-radius: 0 0 8px 8px;
}
.button {
display: inline-block;
background-color: #3b82f6;
color: #fff;
padding: 12px 30px;
text-decoration: none;
border-radius: 6px;
margin: 20px 0;
}
.footer {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #ddd;
color: #666;
font-size: 14px;
}
</style>
</head>
<body>
<div class="header">
<h1 style="margin: 0;">Registration Cancelled</h1>
</div>
<div class="content">
<p>Hi ${registration.name},</p>
<p>Your registration for <strong>${eventData.title}</strong> has been cancelled.</p>
<p>We're sorry you can't make it. You can always register again if your plans change.</p>
<center>
<a href="${process.env.BASE_URL || "https://ghostguild.org"}/events" class="button">
Browse Other Events
</a>
</center>
</div>
<div class="footer">
<p>Ghost Guild</p>
<p>
Questions? Email us at
<a href="mailto:events@babyghosts.org">events@babyghosts.org</a>
</p>
</div>
</body>
</html>
`,
});
if (error) {
console.error("Failed to send cancellation email:", error);
return { success: false, error };
}
return { success: true, data };
} catch (error) {
console.error("Error sending cancellation email:", error);
return { success: false, error };
}
}