added calendar event confirmation

Author: shema-surge

src/Mutations/event.tsx

@@ -117,3 +117,28 @@ export const CANCEL_EVENT = gql`
     }
   }
 `
+
+export const RESPOND_TO_EVENT_INVITATION = gql`
+  mutation RespondToEventInvitation(
+    $eventId: String!
+    $inviteeResponse: String!
+    $authToken: String!
+  ) {
+    respondToEventInvitation(
+      eventId: $eventId,
+      inviteeResponse: $inviteeResponse,
+      authToken: $authToken
+    ) {
+      end
+      hostName
+      start
+      timeToEnd
+      title
+      timeToStart
+      invitees {
+        email,
+        status
+      }
+    }
+  }
+`

src/components/CalendarConfirmation.tsx

@@ -0,0 +1,91 @@
+import { useMutation } from "@apollo/client";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "react-toastify"
+import moment from "moment";
+import { RESPOND_TO_EVENT_INVITATION } from "../Mutations/event";
+import { Link } from "react-router-dom";
+
+const CalendarConfirmation = () => {
+    const { t } = useTranslation()
+    const [respondToEventInvitation] = useMutation(RESPOND_TO_EVENT_INVITATION)
+    const params = new URLSearchParams(window.location.search)
+
+    if (!params.get('eventId') || !params.get('response')) toast.error("Missing URL Parameters")
+
+    const [event, setEvent] = useState({
+        title: '',
+        hostName: '',
+        start: '',
+        end: '',
+        timeToStart: '',
+        timeToEnd: '',
+        invitees: []
+    })
+    const respond = async () => {
+        try {
+            const { data } = await respondToEventInvitation({
+                variables: {
+                    eventId: params.get('eventId'),
+                    inviteeResponse: params.get('response'),
+                    authToken: localStorage.getItem('auth_token'),
+                },
+            })
+            setEvent({
+                title: data.respondToEventInvitation.title,
+                hostName: data.respondToEventInvitation.hostName,
+                start: data.respondToEventInvitation.start,
+                end: data.respondToEventInvitation.end,
+                timeToStart: data.respondToEventInvitation.timeToStart,
+                timeToEnd: data.respondToEventInvitation.timeToEnd,
+                invitees: data.respondToEventInvitation.invitees
+            })
+            toast.success("Successfully responded to invitation")
+        } catch (err: any) {
+            toast.error(err.message)
+        }
+    }
+    useEffect(() => {
+        respond()
+    }, [])
+    return (
+        <div className="flex items-center justify-center">
+            <div className="bg-indigo-100 dark:bg-dark-bg w-full sm:w-3/4 md:w-1/2  xl:w-4/12 rounded-lg p-4 pb-8 my-2">
+                <div className="card-title w-full flex  flex-wrap justify-center items-center  ">
+                    <h3 className="font-bold text-sm dark:text-white text-center w-11/12">
+                        {t('Event Response')}
+                    </h3>
+                    <hr className=" bg-primary border-gray-300 my-3 w-full" />
+                </div>
+                <div className="my-6">
+                    <ul className="">
+                        <li className="text-sm dark:text-white w-11/12 mb-2">
+                            <span className="font-bold">Title:</span> {event.title}
+                        </li>
+                        <li className="text-sm dark:text-white w-11/12 mb-2">
+                            <span className="font-bold">Hostname:</span> {event.hostName}
+                        </li>
+                        <li className="text-sm dark:text-white w-11/12 mb-2">
+                            <span className="font-bold">When:</span> {moment(event.start).format("YYYY-MM-DD")} to {moment(event.end).format("YYYY-MM-DD")}
+                        </li>
+                        <li className="text-sm dark:text-white w-11/12 mb-2">
+                            <span className="font-bold">Time:</span> {event.timeToStart} to {event.timeToEnd}
+                        </li>
+                        <li className="text-sm dark:text-white flex gap-x-2 w-11/12 mb-2">
+                            <span className="font-bold">Guests:</span>
+                            <ul>
+                                {event.invitees?.map((invitee: any)=>(
+                                    <li key={invitee.email}>{invitee.email} {invitee.status}</li>
+                                ))}
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
+                <Link to="/calendar" className="text-white py-2 px-4 w-1/2 md:w-1/3 bg-primary rounded">Go to calendar</Link>
+            </div>
+        </div>
+
+    )
+}
+
+export default CalendarConfirmation

src/components/EventGuestList.tsx

@@ -14,6 +14,8 @@ const EventGuestList = ({ selectedGuests, handleAddGuest }: { selectedGuests: st
         return 'bg-green-500';
       case 'coordinator':
         return 'bg-blue-500';
+      case 'manager':
+        return 'bg-violet-500';
       default:
         return 'bg-gray-500';
     }
@@ -29,6 +31,8 @@ const EventGuestList = ({ selectedGuests, handleAddGuest }: { selectedGuests: st
         return 'Trainees';
       case 'coordinator':
         return 'Coordinators';
+      case 'manager':
+        return 'Managers';
       default:
         return 'Others';
     }
@@ -48,7 +52,7 @@ const EventGuestList = ({ selectedGuests, handleAddGuest }: { selectedGuests: st
     },
   );
 
-  const roles = ["admin", "trainee", "ttl", "coordinator"]
+  const roles = ["admin", "trainee", "ttl", "coordinator","manager"]
   const authUser = JSON.parse(localStorage.getItem('auth')!)
 
   return (

src/containers/Routes.tsx

@@ -38,6 +38,7 @@ import Noredirect from '../pages/Noredirect';
 import ProtectedRoutes from '../ProtectedRoute';
 import RemoveTokenPage from '../utils/RemoveTokenPage';
 import DashRoutes from '../containers/DashRoutes';
+import CalendarConfirmation from '../components/CalendarConfirmation';
 
 function MainRoutes() {
   return (
@@ -93,6 +94,7 @@ function MainRoutes() {
             <Route path="/docs/org-signin" element={<SigninOrgDocs />} />
             <Route path='/docs/getting-started' element={< UsersDocs />} />
             <Route path="/noredirect" element={<Noredirect />} />
+            <Route path="/calendar/confirm" element={<CalendarConfirmation/>}></Route>
           </Route>
           <Route path="*" element={<Error />} />
         </Routes>