diff --git a/frontend/src/app/(public)/invite/[slug]/gifts/page.tsx b/frontend/src/app/(public)/invite/[slug]/gifts/page.tsx index cdd2c1d..4e2e13e 100644 --- a/frontend/src/app/(public)/invite/[slug]/gifts/page.tsx +++ b/frontend/src/app/(public)/invite/[slug]/gifts/page.tsx @@ -5,6 +5,8 @@ import React, { useEffect, useState } from "react"; import { useParams, useSearchParams } from "next/navigation"; import { useGifts } from "@/context/gift-context"; import { useGuests } from "@/context/guest-context"; +import { useEventThemes } from "@/context/event-theme-context"; +import { useEvents } from "@/context/event-context"; import { GiftItem, GiftPurchase } from "@/client/types.gen"; import { Button } from "@/components/ui/button"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; @@ -34,10 +36,11 @@ import { import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Badge } from "@/components/ui/badge"; import { AlertCircle, ExternalLink, Gift, Loader2 } from "lucide-react"; +import Link from "next/link"; +import { motion } from "framer-motion"; export default function GiftRegistryPage() { const { slug } = useParams<{ slug: string }>(); - const searchParams = useSearchParams(); const invitationCode = searchParams.get("code"); @@ -64,6 +67,15 @@ export default function GiftRegistryPage() { } = useGifts(); const { findGuestByInvitationCode, guests, isLoadingGuests } = useGuests(); + const { themes, isLoadingThemes } = useEventThemes(); + const { event, fetchEventBySlug, isLoadingEvent } = useEvents(); + + // Load event data based on slug + useEffect(() => { + if (slug) { + fetchEventBySlug(slug); + } + }, [slug, fetchEventBySlug]); // Find current guest based on invitation code const currentGuest = invitationCode @@ -76,7 +88,7 @@ export default function GiftRegistryPage() { if (!currentGuest) { setErrorMessage( - "Invalid invitation code. Please check your invitation link.", + "Codice invito non valido. Controlla il link dell'invito.", ); setIsLoading(false); return; @@ -90,7 +102,7 @@ export default function GiftRegistryPage() { .catch((error) => { console.error("Error fetching gifts:", error); setErrorMessage( - "Unable to load gift registry. Please try again later.", + "Impossibile caricare la lista regali. Riprova più tardi.", ); }) .finally(() => { @@ -108,7 +120,7 @@ export default function GiftRegistryPage() { console.error("Error fetching guest purchases:", error); }); } else { - setErrorMessage("No event found for this invitation."); + setErrorMessage("Nessun evento trovato per questo invito."); setIsLoading(false); } }, [ @@ -148,33 +160,58 @@ export default function GiftRegistryPage() { setReservedGifts(reserved); } }, [items, guestPurchases]); + + // Find the theme for this event + const eventTheme = + event && 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 priority for display const formatPriority = (priority: string) => { switch (priority) { case "must_have": return { - label: "Must Have", - color: "bg-red-100 text-red-800 border-red-200", + label: "Obbligatorio", + color: `bg-opacity-20 text-opacity-90 bg-red-100 text-red-800 border-red-200`, }; case "high": return { - label: "High", - color: "bg-orange-100 text-orange-800 border-orange-200", + label: "Alta", + color: `bg-opacity-20 text-opacity-90 bg-orange-100 text-orange-800 border-orange-200`, }; case "medium": return { - label: "Medium", - color: "bg-blue-100 text-blue-800 border-blue-200", + label: "Media", + color: `bg-opacity-20 text-opacity-90 bg-blue-100 text-blue-800 border-blue-200`, }; case "low": return { - label: "Low", - color: "bg-green-100 text-green-800 border-green-200", + label: "Bassa", + color: `bg-opacity-20 text-opacity-90 bg-green-100 text-green-800 border-green-200`, }; default: return { label: priority, - color: "bg-gray-100 text-gray-800 border-gray-200", + color: `bg-opacity-20 text-opacity-90 bg-gray-100 text-gray-800 border-gray-200`, }; } }; @@ -189,7 +226,7 @@ export default function GiftRegistryPage() { // Remove reservation handler const handleRemoveReservation = async (gift: GiftItem) => { if (!currentGuest) { - setErrorMessage("Guest information not found."); + setErrorMessage("Informazioni ospite non trovate."); return; } @@ -206,14 +243,14 @@ export default function GiftRegistryPage() { } } catch (error) { console.error("Error removing reservation:", error); - setErrorMessage("Unable to remove reservation. Please try again."); + setErrorMessage("Impossibile rimuovere la prenotazione. Riprova."); } }; // Confirm reservation handler const handleConfirmReservation = async () => { if (!selectedGift || !currentGuest) { - setErrorMessage("Required information missing."); + setErrorMessage("Informazioni richieste mancanti."); return; } @@ -235,7 +272,7 @@ export default function GiftRegistryPage() { } } catch (error) { console.error("Error reserving gift:", error); - setErrorMessage("Unable to reserve gift. Please try again."); + setErrorMessage("Impossibile prenotare il regalo. Riprova."); } }; @@ -256,12 +293,46 @@ export default function GiftRegistryPage() { ); }; + // Animation variants + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.1, + delayChildren: 0.2, + duration: 0.5, + }, + }, + }; + + const itemVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.5 }, + }, + }; + // Loading state - if (isLoading || isLoadingGuests || isLoadingItems) { + if ( + isLoading || + isLoadingGuests || + isLoadingItems || + isLoadingEvent || + isLoadingThemes + ) { return ( -
Loading gift registry...
+Caricamento lista regali...
- Choose a gift from the wishlist to help celebrate Emma's 1st birthday -
-+ Scegli un regalo dalla lista per festeggiare il primo compleanno di + Emma +
+ +