From 7ef605b46802c9ce2fb68fd402280a40eebfc877 Mon Sep 17 00:00:00 2001 From: Felipe Cardoso Date: Mon, 17 Mar 2025 08:16:15 +0100 Subject: [PATCH] Translate invite page rsvp components to italian --- frontend/src/components/rsvp/rsvp-form.tsx | 309 +++++++++++++++++--- frontend/src/components/rsvp/rsvp-modal.tsx | 65 +++- 2 files changed, 321 insertions(+), 53 deletions(-) diff --git a/frontend/src/components/rsvp/rsvp-form.tsx b/frontend/src/components/rsvp/rsvp-form.tsx index 1a1ce28..8664328 100644 --- a/frontend/src/components/rsvp/rsvp-form.tsx +++ b/frontend/src/components/rsvp/rsvp-form.tsx @@ -1,6 +1,8 @@ "use client"; import React, { useState, useEffect } from "react"; import { useGuests } from "@/context/guest-context"; +import { useEventThemes } from "@/context/event-theme-context"; +import { useEvents } from "@/context/event-context"; import { Label } from "@/components/ui/label"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; @@ -13,8 +15,9 @@ import { } from "@/components/ui/select"; import { Textarea } from "@/components/ui/textarea"; import { RsvpStatus } from "@/client/types.gen"; -import { useSearchParams } from "next/navigation"; +import { useSearchParams, useParams } from "next/navigation"; import { Loader2 } from "lucide-react"; +import { motion } from "framer-motion"; interface RSVPProps { eventId: string; @@ -29,6 +32,9 @@ export const RSVP: React.FC = ({ eventId, onRSVPSuccess }) => { submitGuestRsvp, } = useGuests(); const searchParams = useSearchParams(); + const { slug } = useParams<{ slug: string }>(); + const { event, fetchEventBySlug, isLoadingEvent } = useEvents(); + const { themes, isLoadingThemes } = useEventThemes(); const [status, setStatus] = useState(RsvpStatus.ATTENDING); const [number_of_guests, setNumberOfGuests] = useState(1); @@ -37,13 +43,64 @@ export const RSVP: React.FC = ({ eventId, onRSVPSuccess }) => { const [guestId, setGuestId] = useState(null); const [isProcessing, setIsProcessing] = useState(false); const [error, setError] = useState(null); + const [success, setSuccess] = useState(false); + + // Load event data based on slug or event ID + useEffect(() => { + if (slug) { + fetchEventBySlug(slug); + } + }, [slug, fetchEventBySlug]); + + // 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", + }; + + // Animation variants + const formVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.4 }, + }, + }; + + const itemVariants = { + hidden: { opacity: 0, y: 10 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.3 }, + }, + }; // Extract invitation code from URL parameters useEffect(() => { const invitationCode = searchParams.get("code"); if (!invitationCode) { setError( - "Missing invitation code. Please use the link provided in your invitation.", + "Codice invito mancante. Si prega di utilizzare il link fornito nell'invito.", ); return; } @@ -57,7 +114,7 @@ export const RSVP: React.FC = ({ eventId, onRSVPSuccess }) => { setGuestId(matchingGuest.id); setError(null); } else { - setError("Invalid invitation code. Please check your invitation link."); + setError("Codice invito non valido. Controlla il link dell'invito."); } } }, [searchParams, guests, findGuestByInvitationCode]); @@ -67,7 +124,7 @@ export const RSVP: React.FC = ({ eventId, onRSVPSuccess }) => { if (!guestId) { setError( - "Cannot identify your invitation. Please check your link or contact the host.", + "Impossibile identificare il tuo invito. Controlla il link o contatta l'organizzatore.", ); return; } @@ -86,13 +143,17 @@ export const RSVP: React.FC = ({ eventId, onRSVPSuccess }) => { dietary_requirements, }); + setSuccess(true); + if (onRSVPSuccess) { - onRSVPSuccess(); + setTimeout(() => { + onRSVPSuccess(); + }, 2000); } } catch (err) { console.error("Error submitting RSVP:", err); setError( - "Failed to submit your RSVP. Please try again or contact the host.", + "Impossibile inviare la tua risposta. Riprova o contatta l'organizzatore.", ); } finally { setIsProcessing(false); @@ -100,10 +161,20 @@ export const RSVP: React.FC = ({ eventId, onRSVPSuccess }) => { }; // Show loading state while checking invitation code - if (isLoadingGuests) { + if (isLoadingGuests || isLoadingEvent || isLoadingThemes) { return ( -
- +
+
); } @@ -111,57 +182,172 @@ export const RSVP: React.FC = ({ eventId, onRSVPSuccess }) => { // Show error if no valid invitation code if (error) { return ( -
+
-

- Invitation Error +

+ Errore Invito

-

{error}

+

+ {error} +

); } + // Show success message + if (success) { + return ( + +
+
+ + + +
+

+ Grazie per la tua risposta! +

+

+ La tua presenza è stata registrata con successo. +

+
+ + ); + } + return ( -
+
-

RSVP to this Event

+

+ Conferma la tua presenza +

+

+ Ti preghiamo di farci sapere se potrai partecipare +

-
-
-
+ -
-
+ -
-