Merge branch 'main' into staging

ITPNYU · Apr 6, 2024 · a6b4d96 · a6b4d96
2 parents 3904b92 + c665be9
commit a6b4d96
Show file tree

Hide file tree

Showing 16 changed files with 339 additions and 113 deletions.
diff --git a/media_commons_booking_app/src/client/routes/admin/components/Bookings.tsx b/media_commons_booking_app/src/client/routes/admin/components/Bookings.tsx
@@ -70,7 +70,7 @@ export const Bookings: React.FC<BookingsProps> = ({
                   {!isUserView && (
                     <BookingActions
                       status={status}
-                      calendarEventId={booking.calendarId}
+                      calendarEventId={booking.calendarEventId}
                     />
                   )}
                   <td className="px-2 py-4 w-24">{status}</td>

diff --git a/media_commons_booking_app/src/client/routes/admin/hooks/getBookingStatus.ts b/media_commons_booking_app/src/client/routes/admin/hooks/getBookingStatus.ts
@@ -6,7 +6,7 @@ export default function getBookingStatus(
 ): BookingStatusLabel {
   const bookingStatusLabel = () => {
     const bookingStatusMatch = bookingStatuses.filter(
-      (row) => row.calendarId === booking.calendarId
+      (row) => row.calendarEventId === booking.calendarEventId
     )[0];
     if (bookingStatusMatch === undefined) return BookingStatusLabel.UNKNOWN;
     if (bookingStatusMatch.checkedInAt !== '') {

diff --git a/media_commons_booking_app/src/client/routes/booking/booking_detail.html b/media_commons_booking_app/src/client/routes/booking/booking_detail.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      .container {
+        width: 100%;
+        padding-right: 15px;
+        padding-left: 15px;
+        margin-right: auto;
+        margin-left: auto;
+      }
+
+      .button {
+        cursor: pointer;
+        outline: 0;
+        display: inline-block;
+        font-weight: 400;
+        line-height: 1.5;
+        text-align: center;
+        background-color: transparent;
+        border: 1px solid transparent;
+        padding: 6px 12px;
+        font-size: 1rem;
+        border-radius: 0.25rem;
+        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+          border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+        color: #0d6efd;
+        border-color: #0d6efd;
+        :hover {
+          color: #fff;
+          background-color: #0d6efd;
+          border-color: #0d6efd;
+        }
+      }
+
+      .button:active {
+        background-color: #3e8e41;
+        box-shadow: 0 5px #666;
+        transform: translateY(4px);
+      }
+
+      .button-red {
+        padding: 8px 12px;
+        border: 1px solid #ed2939;
+        border-radius: 2px;
+        font-family: Helvetica, Arial, sans-serif;
+        font-size: 14px;
+        color: #ffffff;
+        text-decoration: none;
+        font-weight: bold;
+        display: inline-block;
+      }
+
+      .button-red:active {
+        background-color: #8b0000;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="index"></div>
+    <div class="container"></div>
+    <div class="container">
+      <p><?= headerMessage ?></p>
+      <p>
+        Room Number:
+        <?= roomId ?>
+      </p>
+
+      <p>
+        Email:
+        <?= email ?>
+      </p>
+      <p>
+        Start date:
+        <?= startDate ?>
+      </p>
+      <p>
+        End date:
+        <?= endDate ?>
+      </p>
+      <p>
+        Secondary Point of Contact:
+        <?= secondaryName ?>
+      </p>
+      <p>
+        NYU N-number:
+        <?= nNumber ?>
+      </p>
+      <p>
+        Net Id:
+        <?= netId ?>
+      </p>
+      <p>
+        Phone Number:
+        <?= phoneNumber ?>
+      </p>
+      <p>
+        Department:
+        <?= department ?>
+      </p>
+      <p>
+        Requestor's Role:
+        <?= role?>
+      </p>
+      <p>
+        Sponsor First Name:
+        <?= sponsorFirstName ?>
+      </p>
+      <p>
+        Sponsor Last Name:
+        <?= sponsorLastName ?>
+      </p>
+      <p>
+        Sponsor Email:
+        <?= sponsorEmail ?>
+      </p>
+      <p>
+        Reservation Title:
+        <?= title ?>
+      </p>
+      <p>
+        Reservation Description:
+        <?= description ?>
+      </p>
+      <p>
+        Expected Attendance:
+        <?= expectedAttendance ?>
+      </p>
+      <p>
+        Attendee Affiliations:
+        <?= attendeeAffiliation ?>
+      </p>
+      <p>
+        Room setup needed?:
+        <?= roomSetup ?>
+        <?= setupDetails ?>
+      </p>
+      <p>
+        Chartfield for Room setup?:
+        <?= chartFieldForRoomSetup ?>
+      </p>
+      <p>
+        Media Services:
+        <?= mediaServices ?>
+        <?= mediaServicesDetails ?>
+      </p>
+      <p>
+        Catering:
+        <?= catering ?>
+      </p>
+      <p>
+        Catering Details:
+        <?= cateringService ?>
+      </p>
+      <p>
+        Chartfield for Catering?:
+        <?= chartFieldForCatering ?>
+      </p>
+      <p>
+        Hire Security:
+        <?= hireSecurity ?>
+      </p>
+      <p>
+        Chartfield for Hiring Security?:
+        <?= chartFieldForSecurity ?>
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/media_commons_booking_app/src/client/routes/booking/components/CalendarDatePicker.tsx b/media_commons_booking_app/src/client/routes/booking/components/CalendarDatePicker.tsx
@@ -6,7 +6,7 @@ export const CalendarDatePicker = ({ handleChange }) => {
     title: 'Date',
     autoHide: true,
     todayBtn: true,
-    clearBtn: true,
+    clearBtn: false,
     maxDate: new Date('2030-01-01'),
     minDate: new Date('1950-01-01'),
     theme: {
@@ -20,11 +20,6 @@ export const CalendarDatePicker = ({ handleChange }) => {
       inputIcon: '',
       selected: '',
     },
-    icons: {
-      // () => ReactElement | JSX.Element
-      prev: () => <span>Previous</span>,
-      next: () => <span>Next</span>,
-    },
     datepickerClassNames: 'top-12',
     defaultDate: new Date(),
     language: 'en',

diff --git a/media_commons_booking_app/src/client/routes/booking/components/Calendars.tsx b/media_commons_booking_app/src/client/routes/booking/components/Calendars.tsx
@@ -7,9 +7,9 @@ import { RoomSetting } from '../../../../types';
 import { formatDate } from '../../../utils/date';
 
 type CalendarProps = {
-  allRooms: any[];
+  allRooms: RoomSetting[];
   selectedRooms: RoomSetting[];
-  handleSetDate: any;
+  handleSetDate: (x: DateSelectArg) => void;
   refs?: any[];
 };
 
@@ -76,7 +76,10 @@ export const Calendars = ({
 
   const handleChange = (selectedDate: Date) => {
     allRooms.forEach((room) => {
-      room.calendarRef.current.getApi().gotoDate(selectedDate);
+      const roomApi = room.calendarRef.current.getApi();
+      roomApi.unselect();
+      setBookingTimeEvent(null);
+      roomApi.gotoDate(selectedDate);
     });
   };
 

diff --git a/media_commons_booking_app/src/client/routes/booking/components/MultipleCalendars.tsx b/media_commons_booking_app/src/client/routes/booking/components/MultipleCalendars.tsx
@@ -1,10 +1,16 @@
 import React, { useEffect, useState } from 'react';
 
 import { Calendars } from './Calendars';
+import { DateSelectArg } from '@fullcalendar/core';
 import { RoomSetting } from '../../../../types';
 import { SelectRooms } from './SelectRooms';
 
-export const MultipleCalendars = ({ allRooms, handleSetDate }) => {
+interface Props {
+  allRooms: RoomSetting[];
+  handleSetDate: (x: DateSelectArg, y: RoomSetting[]) => void;
+}
+
+export const MultipleCalendars = ({ allRooms, handleSetDate }: Props) => {
   const [calendarRefs, setCalendarRefs] = useState([]);
   const [loading, setLoading] = useState(true);
   const [checkedRoomIds, setCheckedRoomIds] = useState<string[]>([]);
@@ -55,7 +61,7 @@ export const MultipleCalendars = ({ allRooms, handleSetDate }) => {
     }
   };
 
-  const handleSubmit = (bookInfo) => {
+  const handleSubmit = (bookInfo: DateSelectArg) => {
     handleSetDate(bookInfo, checkedRooms);
   };
 

diff --git a/media_commons_booking_app/src/client/routes/booking/components/RoomCalendar.tsx b/media_commons_booking_app/src/client/routes/booking/components/RoomCalendar.tsx
@@ -1,6 +1,11 @@
-import { BookingStatusLabel, CalendarEvent } from '../../../../types';
-import React, { useEffect, useRef, useState } from 'react';
+import {
+  BookingStatusLabel,
+  CalendarEvent,
+  RoomSetting,
+} from '../../../../types';
+import React, { useEffect, useState } from 'react';
 
+import { DateSelectArg } from '@fullcalendar/core';
 import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import googleCalendarPlugin from '@fullcalendar/google-calendar';
@@ -10,14 +15,23 @@ import timeGridPlugin from '@fullcalendar/timegrid'; // a plugin!
 
 const TITLE_TAG = '[Click to Delete]';
 
+interface Props {
+  allRooms: RoomSetting[];
+  bookingTimeEvent: DateSelectArg;
+  isOverlap: (x: DateSelectArg) => boolean;
+  room: RoomSetting;
+  selectedRooms: RoomSetting[];
+  setBookingTimeEvent: (x: DateSelectArg) => void;
+}
+
 export const RoomCalendar = ({
   room,
   selectedRooms,
   allRooms,
   bookingTimeEvent,
   setBookingTimeEvent,
   isOverlap,
-}) => {
+}: Props) => {
   const [events, setEvents] = useState<CalendarEvent[]>([]);
 
   useEffect(() => {
@@ -29,7 +43,7 @@ export const RoomCalendar = ({
     fetchCalendarEvents(
       process.env.CALENDAR_ENV === 'production'
         ? room.calendarIdProd
-        : room.calendarId
+        : room.calendarIdDev
     );
   }, []);
 

diff --git a/media_commons_booking_app/src/client/routes/booking/hooks/useSubmitBooking.tsx b/media_commons_booking_app/src/client/routes/booking/hooks/useSubmitBooking.tsx
@@ -1,5 +1,6 @@
 import {
   Booking,
+  BookingFormDetails,
   BookingStatusLabel,
   Inputs,
   RoomSetting,
@@ -49,12 +50,14 @@ export default function useSubmitBooking(): [
     if (process.env.CALENDAR_ENV === 'production') {
       return room.calendarIdProd;
     } else {
-      return room.calendarId;
+      return room.calendarIdDev;
     }
   };
 
-  const sendApprovalEmail = (recipients: string[], contents: Booking) => {
-    var subject = 'Approval Request';
+  const sendApprovalEmail = (
+    recipients: string[],
+    contents: BookingFormDetails
+  ) => {
     recipients.forEach((recipient) =>
       serverFunctions.sendHTMLEmail(
         'approval_email',
@@ -140,10 +143,10 @@ export default function useSubmitBooking(): [
       const getApprovalUrl = serverFunctions.approvalUrl(calendarEventId);
       const getRejectedUrl = serverFunctions.rejectUrl(calendarEventId);
       Promise.all([getApprovalUrl, getRejectedUrl]).then((values) => {
-        const userEventInputs: Booking = {
-          calendarEventId: calendarEventId,
+        const userEventInputs: BookingFormDetails = {
+          calendarEventId,
           roomId: selectedRoomIds,
-          email: email,
+          email,
           startDate: bookingCalendarInfo?.startStr,
           endDate: bookingCalendarInfo?.endStr,
           approvalUrl: values[0],
@@ -157,12 +160,15 @@ export default function useSubmitBooking(): [
     alert('Your request has been sent.');
     navigate('/');
 
-    serverFunctions.sendTextEmail(
+    const headerMessage =
+      'Your reservation is not yet confirmed. The coordinator will review and finalize your reservation within a few days.';
+    serverFunctions.sendBookingDetailEmail(
+      calendarEventId,
       email,
-      BookingStatusLabel.REQUESTED,
-      data.title,
-      'Your reservation is not yet confirmed. The coordinator will review and finalize your reservation within a few days.'
+      headerMessage,
+      BookingStatusLabel.REQUESTED
     );
+
     setLoading(false);
     reloadBookings();
     reloadBookingStatuses();