RSVP Flow (Display the AcceptRSVPForm)

app/profile/page.tsx

@@ -111,6 +111,18 @@ const Profile: React.FC = () => {
         });
     }, [pathname, router]);
 
+    useEffect(() => {
+        // Ensure that the background content does not scroll
+        // when the modal is displayed
+        if (modalOpen) {
+            document.body.style.overflow = "hidden";
+            document.documentElement.style.overflow = "hidden";
+        } else {
+            document.body.style.overflow = "unset";
+            document.documentElement.style.overflow = "unset";
+        }
+    }, [modalOpen]);
+
     return (
         <>
             {isLoading && <Loading />}
@@ -145,6 +157,7 @@ const Profile: React.FC = () => {
                             isProApplicant={isProApplicant}
                             qrUrl={qrCodeURL}
                             reimburse={RSVP.reimbursementValue}
+                            onRequestClose={() => setModalOpen(false)}
                         />
                     </div>
                 </Modal>
@@ -266,6 +279,7 @@ type ModalContentProps = {
     isProApplicant: boolean;
     qrUrl: string | null;
     reimburse: number;
+    onRequestClose: () => void;
 };
 
 const ModalContent: React.FC<ModalContentProps> = ({
@@ -274,7 +288,8 @@ const ModalContent: React.FC<ModalContentProps> = ({
     isPro,
     isProApplicant,
     qrUrl,
-    reimburse
+    reimburse,
+    onRequestClose
 }) => {
     switch (status) {
         case "ACCEPTED":
@@ -283,19 +298,32 @@ const ModalContent: React.FC<ModalContentProps> = ({
             }
 
             if (isPro) {
-                return <Accepted acceptedType={"PRO"} reimburse={reimburse} />;
+                return (
+                    <Accepted
+                        acceptedType={"PRO"}
+                        reimburse={reimburse}
+                        onRequestClose={onRequestClose}
+                    />
+                );
             }
 
             if (isProApplicant) {
                 return (
                     <Accepted
                         acceptedType={"PRO_TO_GENERAL"}
                         reimburse={reimburse}
+                        onRequestClose={onRequestClose}
                     />
                 );
             }
 
-            return <Accepted acceptedType={"GENERAL"} reimburse={reimburse} />;
+            return (
+                <Accepted
+                    acceptedType={"GENERAL"}
+                    reimburse={reimburse}
+                    onRequestClose={onRequestClose}
+                />
+            );
         case "REJECTED":
             return <Rejected />;
         case "WAITLISTED":

components/Profile/RSVP/ModalViews/Accepted.tsx

@@ -1,24 +1,39 @@
-import React from "react";
-import styles from "./styles.module.scss";
+import AcceptRSVPForm from "@/components/AcceptRSVPForm/AcceptRSVPForm";
 import OlympianButton from "@/components/OlympianButton/OlympianButton";
 import { RSVPDecideAccept, RSVPDecideDecline } from "@/util/api";
+import { useState } from "react";
+import styles from "./styles.module.scss";
 
 type AcceptedType = "PRO" | "PRO_TO_GENERAL" | "GENERAL";
 
 type AcceptedProps = {
     acceptedType: AcceptedType;
     reimburse: number;
+    onRequestClose: () => void;
 };
 
-export default function Accepted({ acceptedType, reimburse }: AcceptedProps) {
+export default function Accepted({
+    acceptedType,
+    reimburse,
+    onRequestClose
+}: AcceptedProps) {
+    const [accepted, setAccepted] = useState(false);
     const handleConfirm = async () => {
+        // TODO: Add a loading state and disable the buttons while loading
         await RSVPDecideAccept();
+        setAccepted(true);
     };
 
     const handleDecline = async () => {
+        // TODO: Add a loading state and disable the buttons while loading
         await RSVPDecideDecline();
+        window.location.reload();
     };
 
+    if (accepted) {
+        return <AcceptRSVPForm closeModal={onRequestClose} />;
+    }
+
     return (
         <ChooseRSVP
             acceptedType={acceptedType}