477 lines
15 KiB
TypeScript
477 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import { useEvents } from "@/context/event-context";
|
|
import { useEventThemes } from "@/context/event-theme-context";
|
|
import { format, parseISO } from "date-fns";
|
|
import { Loader2 } from "lucide-react";
|
|
import { motion } from "framer-motion";
|
|
import { Button } from "@/components/ui/button";
|
|
import { RSVPModal } from "@/components/rsvp/rsvp-modal";
|
|
import { useParams } from "next/navigation";
|
|
import { getServerFileUrl } from "@/lib/utils";
|
|
|
|
// Helper function to get server file URL (assuming it exists in your codebase)
|
|
// If not, replace with your actual implementation
|
|
|
|
const InvitationPage = () => {
|
|
const { slug } = useParams<{ slug: string }>();
|
|
const { event, fetchEventBySlug, isLoadingEvent, eventError } = useEvents();
|
|
const [showRSVP, setShowRSVP] = useState(false);
|
|
const { themes, isLoadingThemes } = useEventThemes();
|
|
const guestId = "current-guest-id-placeholder";
|
|
|
|
// Fetch event data when slug is available
|
|
useEffect(() => {
|
|
fetchEventBySlug(slug || "");
|
|
}, [slug, fetchEventBySlug]);
|
|
|
|
// If loading, show a spinner
|
|
if (isLoadingEvent || isLoadingThemes) {
|
|
return (
|
|
<div className="flex h-screen items-center justify-center">
|
|
<Loader2 className="h-12 w-12 animate-spin text-primary" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// If no event found, show not found message
|
|
if (!event) {
|
|
return (
|
|
<div className="flex h-screen flex-col items-center justify-center gap-4 p-4 text-center">
|
|
<h1 className="text-3xl font-bold">Invitation Not Found</h1>
|
|
<p>
|
|
The invitation you're looking for doesn't exist or has been removed.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Find the theme for this event
|
|
const eventTheme = themes?.find((theme) => theme.id === event.theme_id);
|
|
|
|
// Enhanced color palette that works well with safari animals
|
|
const colors = eventTheme?.color_palette || {
|
|
primary: "#90B77D", // Soft jungle green
|
|
secondary: "#D2AB67", // Warm giraffe yellow
|
|
accent: "#B5A9EA", // Soft hippo purple
|
|
accent2: "#8FBDD3", // Elephant blue
|
|
accent3: "#E8B87D", // Lion tan
|
|
background: "#F9F5F0", // Cream paper texture
|
|
backgroundDark: "#F0E9D6", // Slightly darker cream for panels
|
|
text: "#5B4B49", // Warm dark brown
|
|
textLight: "#7D6D6B", // Lighter text variant
|
|
gold: "#D4AF37", // Gold accent for special elements
|
|
};
|
|
|
|
// Font selections
|
|
const fonts = eventTheme?.fonts || {
|
|
heading: "Georgia, serif",
|
|
body: "Arial, sans-serif",
|
|
};
|
|
|
|
// Format date and time for display
|
|
const eventDate = event.event_date
|
|
? format(parseISO(event.event_date), "EEEE, MMMM d, yyyy")
|
|
: null;
|
|
|
|
const displayDay = event.event_date
|
|
? format(parseISO(event.event_date), "EEEE")
|
|
: null;
|
|
|
|
const displayDate = event.event_date
|
|
? format(parseISO(event.event_date), "d")
|
|
: null;
|
|
|
|
const displayMonth = event.event_date
|
|
? format(parseISO(event.event_date), "MMMM")
|
|
: null;
|
|
|
|
const startTime = event.event_start_time
|
|
? format(parseISO(`2000-01-01T${event.event_start_time}`), "HH:mm")
|
|
: null;
|
|
|
|
const endTime = event.event_end_time
|
|
? format(parseISO(`2000-01-01T${event.event_end_time}`), "HH:mm")
|
|
: null;
|
|
|
|
const timeRange =
|
|
startTime && endTime ? `${startTime} - ${endTime}` : startTime;
|
|
|
|
// Format RSVP deadline
|
|
const rsvpDeadline = event.rsvp_deadline
|
|
? format(parseISO(event.rsvp_deadline), "dd.MM.yyyy")
|
|
: null;
|
|
|
|
// Get asset URLs
|
|
const getAssetUrl = (key: string) => {
|
|
if (eventTheme?.asset_image_urls && eventTheme.asset_image_urls[key]) {
|
|
return getServerFileUrl(eventTheme.asset_image_urls[key]);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
// Animation variants
|
|
const archVariants = {
|
|
hidden: { opacity: 0, y: -50 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.8,
|
|
ease: "easeOut",
|
|
},
|
|
},
|
|
};
|
|
|
|
const contentVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.1,
|
|
delayChildren: 0.4,
|
|
duration: 0.5,
|
|
},
|
|
},
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { duration: 0.5 },
|
|
},
|
|
};
|
|
|
|
const animalVariants = {
|
|
hidden: { opacity: 0, y: 50 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
delay: 1.2,
|
|
duration: 0.8,
|
|
ease: "easeOut",
|
|
},
|
|
},
|
|
};
|
|
const foregroundImageUrl = getServerFileUrl(eventTheme?.foreground_image_url);
|
|
const backgroundImageUrl = getServerFileUrl(eventTheme?.background_image_url);
|
|
const threeAnimalsImgUrl = getAssetUrl("three-animals");
|
|
console.log(backgroundImageUrl);
|
|
return (
|
|
<div
|
|
className="min-h-screen overflow-hidden pb-10 pt-0"
|
|
style={{
|
|
backgroundColor: colors.background,
|
|
color: colors.text,
|
|
fontFamily: fonts.body,
|
|
}}
|
|
>
|
|
{/* Top jungle arch */}
|
|
{/* Top arch with background image */}
|
|
{/* Simplest background image approach */}
|
|
<motion.div
|
|
className="relative h-48 w-full md:h-56 lg:h-64"
|
|
variants={archVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
{/* Background image with high transparency (if present) */}
|
|
{eventTheme?.background_image_url && (
|
|
<img
|
|
src={backgroundImageUrl}
|
|
alt=""
|
|
className="absolute inset-0 h-full w-full object-cover"
|
|
style={{ opacity: 0.7 }} // Very subtle background image
|
|
/>
|
|
)}
|
|
|
|
{/* Animals image stacked on top */}
|
|
<img
|
|
src={threeAnimalsImgUrl || ""}
|
|
alt="Three animals"
|
|
className="absolute left-1/2 top-1/2 z-10 h-auto max-h-full w-auto max-w-full -translate-x-1/2 -translate-y-1/2 transform object-contain"
|
|
/>
|
|
</motion.div>
|
|
{/* Main content container */}
|
|
<div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
|
|
<motion.div
|
|
className="flex flex-col items-center"
|
|
variants={contentVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
{/* Title Section */}
|
|
<motion.div variants={itemVariants} className="mb-8 text-center">
|
|
<h2
|
|
className="text-xl font-medium italic sm:text-2xl"
|
|
style={{
|
|
fontFamily: fonts.heading,
|
|
color: colors.primary,
|
|
}}
|
|
>
|
|
wild
|
|
</h2>
|
|
<h1
|
|
className="text-5xl font-bold tracking-wide sm:text-6xl md:text-7xl"
|
|
style={{
|
|
fontFamily: fonts.heading,
|
|
color: colors.secondary,
|
|
}}
|
|
>
|
|
ONE
|
|
</h1>
|
|
{/*<p*/}
|
|
{/* className="mt-4 text-sm uppercase tracking-widest sm:text-base"*/}
|
|
{/* style={{ color: colors.text }}*/}
|
|
{/*>*/}
|
|
{/* SEI INVITATO ALL'EVENTO*/}
|
|
{/*</p>*/}
|
|
<h3
|
|
className="mt-3 text-xl font-bold sm:text-2xl md:text-3xl"
|
|
style={{
|
|
fontFamily: fonts.heading,
|
|
color: colors.text,
|
|
}}
|
|
>
|
|
{event.title}
|
|
</h3>
|
|
</motion.div>
|
|
|
|
{/* Date & Time Section */}
|
|
<motion.div variants={itemVariants} className="mb-8 w-full max-w-md">
|
|
<div
|
|
className="rounded-lg p-5"
|
|
style={{ backgroundColor: colors.backgroundDark }}
|
|
>
|
|
<div className="flex items-center justify-center space-x-4 sm:space-x-6">
|
|
<div className="text-center">
|
|
<p
|
|
className="text-xs uppercase tracking-wide sm:text-sm"
|
|
style={{ color: colors.textLight }}
|
|
>
|
|
{displayDay}
|
|
</p>
|
|
<p
|
|
className="text-xl font-bold sm:text-2xl"
|
|
style={{
|
|
fontFamily: fonts.heading,
|
|
color: colors.text,
|
|
}}
|
|
>
|
|
{displayDate}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className="h-12 w-px sm:h-16"
|
|
style={{ backgroundColor: colors.primary }}
|
|
></div>
|
|
|
|
<div className="text-center">
|
|
<p
|
|
className="text-xl font-bold sm:text-2xl"
|
|
style={{
|
|
fontFamily: fonts.heading,
|
|
color: colors.primary,
|
|
}}
|
|
>
|
|
{displayMonth}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className="h-12 w-px sm:h-16"
|
|
style={{ backgroundColor: colors.primary }}
|
|
></div>
|
|
|
|
<div className="text-center">
|
|
<p
|
|
className="text-xl font-bold sm:text-2xl"
|
|
style={{
|
|
fontFamily: fonts.heading,
|
|
color: colors.text,
|
|
}}
|
|
>
|
|
{timeRange}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Location Section */}
|
|
<motion.div variants={itemVariants} className="mb-8 w-full max-w-md">
|
|
<div
|
|
className="rounded-lg p-5"
|
|
style={{ backgroundColor: colors.backgroundDark }}
|
|
>
|
|
<h4
|
|
className="mb-2 text-center text-lg font-bold sm:text-xl"
|
|
style={{
|
|
fontFamily: fonts.heading,
|
|
color: colors.text,
|
|
}}
|
|
>
|
|
{event.location_name}
|
|
</h4>
|
|
<p
|
|
className="mb-3 text-center text-sm sm:text-base"
|
|
style={{ color: colors.textLight }}
|
|
>
|
|
{event.location_address}
|
|
</p>
|
|
|
|
{event.location_url && (
|
|
<div className="flex justify-center">
|
|
<Button
|
|
className="flex items-center justify-center rounded-md border-2 px-6 py-2 text-sm font-medium transition-all duration-300 hover:scale-105 hover:shadow-md sm:text-base"
|
|
style={{
|
|
borderColor: colors.primary,
|
|
color: colors.primary,
|
|
backgroundColor: "white",
|
|
}}
|
|
onClick={() =>
|
|
window.open(event.location_url || "", "_blank")
|
|
}
|
|
>
|
|
VEDI MAPPA
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Description Section */}
|
|
{event.description && (
|
|
<motion.div
|
|
variants={itemVariants}
|
|
className="mb-8 w-full max-w-2xl"
|
|
>
|
|
<div
|
|
className="rounded-lg p-5 md:p-6"
|
|
style={{ backgroundColor: colors.backgroundDark }}
|
|
>
|
|
<div
|
|
className="whitespace-pre-line text-center text-sm italic sm:text-base"
|
|
style={{ color: colors.textLight }}
|
|
>
|
|
{event.description}
|
|
</div>
|
|
<p
|
|
className="mt-4 font-bold text-center text-sm italic sm:text-base"
|
|
style={{ color: colors.secondary }}
|
|
>
|
|
Con affetto, Emma, Anto & Fely
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
<p
|
|
className="mb-2 text-sm font-medium sm:text-base"
|
|
style={{ color: colors.text }}
|
|
>
|
|
Conferma partecipazione entro {rsvpDeadline}
|
|
</p>
|
|
{/* RSVP and Gift Registry Section */}
|
|
<motion.div
|
|
variants={itemVariants}
|
|
className="mb-12 flex flex-col items-center space-y-6 sm:flex-row sm:justify-center sm:space-x-8 sm:space-y-0"
|
|
>
|
|
{event.rsvp_enabled && (
|
|
<div className="text-center">
|
|
{/*<p*/}
|
|
{/* className="mb-2 text-sm font-medium sm:text-base"*/}
|
|
{/* style={{ color: colors.text }}*/}
|
|
{/*>*/}
|
|
{/* RSVP by {rsvpDeadline}*/}
|
|
{/*</p>*/}
|
|
<Button
|
|
className="rounded-md px-8 py-2 text-sm font-medium transition duration-300 hover:scale-105 sm:text-base"
|
|
style={{
|
|
backgroundColor: colors.accent,
|
|
color: "white",
|
|
}}
|
|
onClick={() => setShowRSVP(true)}
|
|
>
|
|
PRESENZA
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{event.gift_registry_enabled && (
|
|
<div className="text-center">
|
|
{/*<p*/}
|
|
{/* className="mb-2 text-sm font-medium sm:text-base"*/}
|
|
{/* style={{ color: colors.text }}*/}
|
|
{/*>*/}
|
|
{/* List Regali*/}
|
|
{/*</p>*/}
|
|
<Button
|
|
className="rounded-md px-8 py-2 text-sm font-medium transition duration-300 hover:scale-105 sm:text-base"
|
|
style={{
|
|
backgroundColor: colors.secondary,
|
|
color: "white",
|
|
}}
|
|
onClick={() => window.open(`/gifts/${slug}`, "_blank")}
|
|
>
|
|
LISTA REGALI
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Animal Section at Bottom */}
|
|
<motion.div
|
|
className="mb-6 mt-10 flex justify-center" // Increased margins for more space
|
|
variants={animalVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
<div className="relative h-48 w-full max-w-4xl sm:h-64 md:h-80 lg:h-96">
|
|
{" "}
|
|
{eventTheme?.foreground_image_url ? (
|
|
<img
|
|
src={foregroundImageUrl}
|
|
alt="Safari Animals"
|
|
className="h-full w-full object-contain"
|
|
/>
|
|
) : (
|
|
<div
|
|
className="flex h-full w-full items-center justify-center rounded-lg text-sm sm:text-base"
|
|
style={{ backgroundColor: colors.backgroundDark }}
|
|
>
|
|
Safari Animals Illustration
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Bottom arch to frame the animals */}
|
|
</div>
|
|
|
|
{/* RSVP Modal */}
|
|
<RSVPModal
|
|
eventId={event.id}
|
|
guestId={guestId}
|
|
open={showRSVP}
|
|
setOpen={setShowRSVP}
|
|
/>
|
|
|
|
{/*{showRSVP && (*/}
|
|
{/* <RSVP*/}
|
|
{/* eventId={event.id}*/}
|
|
{/* isOpen={showRSVP}*/}
|
|
{/* onClose={() => setShowRSVP(false)}*/}
|
|
{/* />*/}
|
|
{/*)}*/}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InvitationPage;
|