Integrate RSVP context and enhance form responsiveness

Added RSVP context to manage current guest and RSVP data, ensuring dynamic updates based on state changes. Adjusted styling to improve button responsiveness and removed redundant borders for a cleaner UI. These updates enhance functionality and provide a more seamless user experience.

frontend/src/components/rsvp/rsvp-form.tsx

@@ -19,6 +19,7 @@ import { useSearchParams, useParams } from "next/navigation";
 import { Loader2, Plus, Minus } from "lucide-react";
 import { motion } from "framer-motion";
 import { useTheme } from "next-themes";
+import { useRSVPs } from "@/context/rsvp-context";
 
 interface RSVPProps {
   eventId: string;
@@ -32,6 +33,8 @@ export const RSVP: React.FC<RSVPProps> = ({ eventId, onRSVPSuccess }) => {
     findGuestByInvitationCode,
     submitGuestRsvp,
   } = useGuests();
+
+  const { rsvps } = useRSVPs();
   const searchParams = useSearchParams();
   const { slug } = useParams<{ slug: string }>();
   const { event, fetchEventBySlug, isLoadingEvent } = useEvents();
@@ -45,6 +48,9 @@ export const RSVP: React.FC<RSVPProps> = ({ eventId, onRSVPSuccess }) => {
   const [isProcessing, setIsProcessing] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<boolean>(false);
+  const [currentGuest, setCurrentGuest] = useState<any | null>(null);
+  const [currentRSVP, setCurrentRSVP] = useState<any | null>(null);
+
   const { setTheme } = useTheme();
 
   useEffect(() => {
@@ -58,6 +64,21 @@ export const RSVP: React.FC<RSVPProps> = ({ eventId, onRSVPSuccess }) => {
     }
   }, [slug, fetchEventBySlug]);
 
+  useEffect(() => {
+    if (rsvps && currentGuest) {
+      setCurrentRSVP(rsvps.find((rsvp) => rsvp.guest_id === currentGuest?.id));
+    }
+  }, [rsvps, currentGuest]);
+
+  useEffect(() => {
+    if (currentRSVP) {
+      setStatus(currentRSVP.status);
+      setNumberOfGuests(currentRSVP.number_of_guests);
+      setResponseMessage(currentRSVP.response_message);
+      setDietaryRequirements(currentRSVP.dietary_requirements);
+    }
+  }, [currentRSVP]);
+
   // Find the theme for this event
   const eventTheme =
     event && themes?.find((theme) => theme.id === event.theme_id);
@@ -114,7 +135,7 @@ export const RSVP: React.FC<RSVPProps> = ({ eventId, onRSVPSuccess }) => {
     // Find the guest with matching invitation code
     if (guests) {
       const matchingGuest = findGuestByInvitationCode(invitationCode);
-
+      setCurrentGuest(matchingGuest);
       if (matchingGuest) {
         console.log("matchingGuest ", matchingGuest);
         setGuestId(matchingGuest.id);
@@ -248,13 +269,12 @@ export const RSVP: React.FC<RSVPProps> = ({ eventId, onRSVPSuccess }) => {
   if (success) {
     return (
       <motion.div
-        className="w-full rounded-lg border shadow-sm p-8 text-center"
+        className="w-full rounded-lg shadow-sm p-8 text-center"
         initial={{ opacity: 0, scale: 0.9 }}
         animate={{ opacity: 1, scale: 1 }}
         transition={{ duration: 0.5 }}
         style={{
           backgroundColor: colors.background,
-          borderColor: colors.primary,
           color: colors.text,
         }}
       >
@@ -298,13 +318,12 @@ export const RSVP: React.FC<RSVPProps> = ({ eventId, onRSVPSuccess }) => {
 
   return (
     <motion.div
-      className="w-full rounded-lg border shadow-sm"
+      className="w-full rounded-lg shadow-sm"
       initial="hidden"
       animate="visible"
       variants={formVariants}
       style={{
         backgroundColor: colors.background,
-        borderColor: colors.backgroundDark,
         color: colors.text,
       }}
     >
@@ -466,12 +485,15 @@ export const RSVP: React.FC<RSVPProps> = ({ eventId, onRSVPSuccess }) => {
           <motion.div className="flex justify-end mt-6" variants={itemVariants}>
             <Button
               type="submit"
-              className="w-full md:w-auto"
+              className="w-full md:w-auto text-white transition-colors duration-300"
               disabled={isProcessing}
-              style={{
-                backgroundColor: colors.accent,
-                color: "white",
-              }}
+              style={{ backgroundColor: colors.accent }}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.backgroundColor = colors.accent2)
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.backgroundColor = colors.accent)
+              }
             >
               {isProcessing ? (
                 <>