Update the join mcdi and donate buttons

client/package.json

@@ -13,7 +13,9 @@
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "react-modal": "^3.14.4",
+    "@types/react-modal": "^3.13.1"
   },
   "scripts": {
     "build:css": "postcss src/index.css -o src/tailwind.css",

client/src/App.tsx

@@ -9,7 +9,7 @@ import Footer from './components/Footer';
 import Bylaws from './components/Bylaws';
 import Sponsors from './components/Sponsors';
 import MeetBoard from './components/Meet-Board';
-import ComingSoon from './components/ComingSoon';
+/* import ComingSoon from './components/ComingSoon'; */
 import JoinMCDi from './components/JoinMCDi';
 
 const App: React.FC = () => {

client/src/components/Header.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
+import Modal from 'react-modal';
 
 const Header: React.FC = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -114,19 +115,52 @@ const DropdownItem: React.FC<NavItemProps> = ({ href, children }) => (
   </Link>
 );
 
-const DonateButton: React.FC<{ onClick?: () => void }> = ({ onClick }) => (
+const DonateButton: React.FC<{ onClick?: () => void }> = ({ onClick }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleDonateClick = () => {
+    setIsModalOpen(true);
+    if (onClick) onClick();
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
     <motion.div
       whileHover={{ scale: 1.05 }}
       whileTap={{ scale: 0.95 }}
     >
       <button
-      zeffy-form-link="https://www.zeffy.com/embed/donation-form/1cbff18e-c057-4fa6-8276-a993037de0bb?modal=true"
-      onClick={onClick}
+        onClick={handleDonateClick}
         className="inline-block bg-yellow-400 text-[#8C1D40] font-bold py-2 px-4 rounded-full hover:bg-yellow-300 transition-colors duration-200 shadow-md"
       >
         Donate
       </button>
+      <Modal
+        isOpen={isModalOpen}
+        onRequestClose={closeModal}
+        contentLabel="Donate to MCDi"
+        className="modal"
+        overlayClassName="overlay"
+      >
+        <h2 className="text-2xl font-bold text-[#8C1D40] mb-4">Donate to MCDi</h2>
+        <iframe
+          src="https://www.zeffy.com/embed/donation-form/1cbff18e-c057-4fa6-8276-a993037de0bb"
+          width="100%"
+          height="600px"
+          frameBorder="0"
+        ></iframe>
+        <button
+          onClick={closeModal}
+          className="mt-4 bg-[#8C1D40] text-white font-bold py-2 px-4 rounded"
+        >
+          Close
+        </button>
+      </Modal>
     </motion.div>
   );
+};
 
 export default Header;

client/src/components/JoinMCDi.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
+import Modal from 'react-modal';
 
 interface CardProps {
   title: string;
@@ -18,14 +19,14 @@ const Card: React.FC<CardProps> = ({ title, content, className }) => (
   </motion.div>
 );
 
-const JoinButton: React.FC = () => (
+const JoinButton: React.FC<{ onClick: () => void }> = ({ onClick }) => (
   <motion.div
     whileHover={{ scale: 1.05 }}
     whileTap={{ scale: 0.95 }}
     className="text-center"
   >
     <button
-      zeffy-form-link="https://www.zeffy.com/embed/ticketing/ec0af9d1-4f07-4156-a6cc-0fa0878b512b?modal=true"
+      onClick={onClick}
       className="inline-block bg-yellow-400 text-[#8C1D40] font-bold py-2 px-4 rounded-full hover:bg-yellow-300 transition-colors duration-200 shadow-md"
     >
       Join MCDi
@@ -34,6 +35,25 @@ const JoinButton: React.FC = () => (
 );
 
 const JoinMCDi: React.FC = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    Modal.setAppElement('#root');
+  }, []);
+
+  const handleJoinClick = () => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      setIsModalOpen(true);
+    }, 500);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
   const cards = [
     {
       title: "People Who Are Deaf",
@@ -109,9 +129,8 @@ const JoinMCDi: React.FC = () => {
                 <li>No voting rights</li>
               </ul>
             </div>
-
           </div>
-          <JoinButton />
+          <JoinButton onClick={handleJoinClick} />
         </div>
 
         <div className="mb-8">
@@ -137,8 +156,42 @@ const JoinMCDi: React.FC = () => {
           </p>
         </div>
 
-        <JoinButton />
+        <JoinButton onClick={handleJoinClick} />
+
+        <Modal
+        isOpen={isModalOpen}
+        onRequestClose={closeModal}
+        contentLabel="Join MCDi Membership Form"
+        className="modal"
+        overlayClassName="overlay"
+        style={{content: {overflow: 'hidden'}}}
+        >
+        <div className="h-full flex flex-col">
+            <h2 className="text-2xl font-bold text-[#8C1D40] mb-4">Join MCDi Membership Form</h2>
+            <div className="flex-grow overflow-y-auto">
+            <iframe
+                src="https://www.zeffy.com/embed/ticketing/ec0af9d1-4f07-4156-a6cc-0fa0878b512b"
+                width="100%"
+                height="100%"
+                frameBorder="0"
+            ></iframe>
+            </div>
+            <button
+            onClick={closeModal}
+            className="mt-4 bg-[#8C1D40] text-white font-bold py-2 px-4 rounded"
+            >
+            Close
+            </button>
+        </div>
+        </Modal>
+
+
       </motion.div>
+      {isLoading && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+          <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-[#8C1D40]"></div>
+        </div>
+      )}
     </div>
   );
 };

client/src/index.css

@@ -107,3 +107,26 @@ html {
 .animate-fadeIn {
   animation: fadeIn 0.5s ease-in-out;
 }
+
+/* Modal styles */
+.modal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  width: 60vw;
+  height: 60vh;
+  overflow-y: hidden;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.75);
+}