Merge pull request #2234 from Northeastern-Electric-Racing/#2228-confirm-availability-flow

#2228 - update slack ping, setup confirm availability flow

Author: walker-sean

src/backend/src/services/design-reviews.services.ts

@@ -162,7 +162,11 @@ export default class DesignReviewsService {
     for (const memberUserSetting of memberUserSettings) {
       if (memberUserSetting.slackId) {
         try {
-          await sendSlackDesignReviewNotification(memberUserSetting.slackId, designReview.designReviewId);
+          await sendSlackDesignReviewNotification(
+            memberUserSetting.slackId,
+            designReview.designReviewId,
+            designReview.wbsElement.name
+          );
         } catch (err: unknown) {
           if (err instanceof Error) {
             throw new HttpException(500, `Failed to send slack notification: ${err.message}`);
@@ -321,19 +325,22 @@ export default class DesignReviewsService {
     if (!isUserOnDesignReview(submitter, designReviewTransformer(designReview)))
       throw new HttpException(400, 'Current user is not in the list of this design reviews members');
 
-    // Update user schedule settings
-    const validAvailability = validateMeetingTimes(availability);
+    availability.forEach((time) => {
+      if (time < 0 || time > 83) {
+        throw new HttpException(400, 'Availability times have to be in range 0-83');
+      }
+    });
 
     await prisma.schedule_Settings.upsert({
       where: { userId: submitter.userId },
       update: {
-        availability: validAvailability
+        availability
       },
       create: {
         userId: submitter.userId,
         personalGmail: '',
         personalZoomLink: '',
-        availability: validAvailability
+        availability
       }
     });
 
@@ -353,7 +360,7 @@ export default class DesignReviewsService {
 
       // If all requested attendees have confirmed their schedule, mark design review as confirmed
       if (
-        designReview.confirmedMembers.length ===
+        updatedDesignReview.confirmedMembers.length ===
         designReview.requiredMembers.length + designReview.optionalMembers.length
       ) {
         await prisma.design_Review.update({

src/backend/src/utils/slack.utils.ts

@@ -91,11 +91,15 @@ export const sendReimbursementRequestDeniedNotification = async (slackId: string
   }
 };
 
-export const sendSlackDesignReviewNotification = async (slackId: string, designReviewId: string) => {
+export const sendSlackDesignReviewNotification = async (
+  slackId: string,
+  designReviewId: string,
+  designReviewName: string
+) => {
   if (process.env.NODE_ENV !== 'production') return; // don't send msgs unless in prod
-  const msg = `You have been invited to a Design Review!`;
-  const fullLink = `https://finishlinebyner.com/design-reviews/${designReviewId}`;
-  const linkButtonText = 'RSVP for the Design Review';
+  const msg = `You have been invited to the ${designReviewName} Design Review!`;
+  const fullLink = `https://finishlinebyner.com/settings/preferences?drId=${designReviewId}`;
+  const linkButtonText = 'Confirm Availability';
 
   try {
     await sendMessage(slackId, msg, fullLink, linkButtonText);

src/backend/tests/design-reviews.test.ts

@@ -535,14 +535,7 @@ describe('Design Reviews', () => {
       vi.spyOn(prisma.design_Review, 'findUnique').mockResolvedValue(prismaDesignReview5);
       await expect(() =>
         DesignReviewsService.markUserConfirmed(prismaDesignReview5.designReviewId, [0, 85], batman)
-      ).rejects.toThrow(new HttpException(400, 'Meeting times have to be in range 0-83'));
-    });
-
-    test('Availabilities were invalid - non-consecutive', async () => {
-      vi.spyOn(prisma.design_Review, 'findUnique').mockResolvedValue(prismaDesignReview5);
-      await expect(() =>
-        DesignReviewsService.markUserConfirmed(prismaDesignReview5.designReviewId, [1, 3], batman)
-      ).rejects.toThrow(new HttpException(400, 'Meeting times have to be consecutive'));
+      ).rejects.toThrow(new HttpException(400, 'Availability times have to be in range 0-83'));
     });
   });
 });

src/frontend/src/apis/design-reviews.api.ts

@@ -57,3 +57,7 @@ export const getSingleDesignReview = async (id: string) => {
     transformResponse: (data) => designReviewTransformer(JSON.parse(data))
   });
 };
+
+export const markUserConfirmed = async (id: string, payload: { availability: number[] }) => {
+  return axios.post<DesignReview>(apiUrls.designReviewMarkUserConfirmed(id), payload);
+};

src/frontend/src/hooks/design-reviews.hooks.ts

@@ -9,8 +9,10 @@ import {
   createDesignReviews,
   getAllDesignReviews,
   getAllTeamTypes,
-  getSingleDesignReview
+  getSingleDesignReview,
+  markUserConfirmed
 } from '../apis/design-reviews.api';
+import { useCurrentUser } from './users.hooks';
 
 export interface CreateDesignReviewsPayload {
   dateScheduled: Date;
@@ -101,9 +103,31 @@ export const useAllTeamTypes = () => {
  *
  * @returns a single design review
  */
-export const useSingleDesignReview = (id: string) => {
-  return useQuery<DesignReview, Error>(['design-reviews', id], async () => {
-    const { data } = await getSingleDesignReview(id);
-    return data;
-  });
+export const useSingleDesignReview = (id?: string) => {
+  return useQuery<DesignReview, Error>(
+    ['design-reviews', id],
+    async () => {
+      const { data } = await getSingleDesignReview(id!);
+      return data;
+    },
+    { enabled: !!id }
+  );
+};
+
+export const useMarkUserConfirmed = (id: string) => {
+  const user = useCurrentUser();
+  const queryClient = useQueryClient();
+  return useMutation<DesignReview, Error, { availability: number[] }>(
+    ['design-reviews', 'mark-confirmed'],
+    async (designReviewPayload: { availability: number[] }) => {
+      const { data } = await markUserConfirmed(id, designReviewPayload);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['design-reviews']);
+        queryClient.invalidateQueries(['users', user.userId, 'schedule-settings']);
+      }
+    }
+  );
 };

src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/AvailabilityEditModal.tsx

@@ -7,13 +7,21 @@ interface DRCEditModalProps {
   availabilites: number[];
   setAvailabilities: (availabilities: number[]) => void;
   onHide: () => void;
+  onSubmit: () => void;
 }
 
-const AvailabilityEditModal: React.FC<DRCEditModalProps> = ({ open, onHide, header, availabilites, setAvailabilities }) => {
+const AvailabilityEditModal: React.FC<DRCEditModalProps> = ({
+  open,
+  onHide,
+  header,
+  availabilites,
+  setAvailabilities,
+  onSubmit
+}) => {
   const existingMeetingData = new Map<number, string>();
 
   return (
-    <NERModal open={open} onHide={onHide} title={header} onSubmit={onHide} submitText="Save">
+    <NERModal open={open} onHide={onHide} title={header} onSubmit={onSubmit} submitText="Save">
       <EditAvailability
         selectedTimes={availabilites}
         setSelectedTimes={setAvailabilities}

src/frontend/src/pages/SettingsPage/UserScheduleSettings/UserScheduleSettings.tsx

@@ -16,6 +16,8 @@ import { useUpdateUserScheduleSettings, useUserScheduleSettings } from '../../..
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import ErrorPage from '../../ErrorPage';
 import { useToast } from '../../../hooks/toasts.hooks';
+import { useSingleDesignReview } from '../../../hooks/design-reviews.hooks';
+import { useQuery } from '../../../hooks/utils.hooks';
 
 export interface ScheduleSettingsFormInput {
   personalGmail: string;
@@ -29,6 +31,8 @@ export interface ScheduleSettingsPayload extends ScheduleSettingsFormInput {
 const UserScheduleSettings = ({ user }: { user: User }) => {
   const [edit, setEdit] = useState(false);
   const toast = useToast();
+  const query = useQuery();
+  const designReviewId = query.get('drId');
 
   const { data, isLoading, isError, error } = useUserScheduleSettings(user.userId);
   const {
@@ -37,9 +41,17 @@ const UserScheduleSettings = ({ user }: { user: User }) => {
     isError: updateUserScheduleSettingsIsError,
     error: updateUserScheduleSettingsError
   } = useUpdateUserScheduleSettings();
+  const {
+    data: designReview,
+    isError: designReviewIsError,
+    error: designReviewError,
+    isLoading: designReviewIsLoading
+  } = useSingleDesignReview(designReviewId ?? undefined);
 
+  if (designReviewId && (!designReview || designReviewIsLoading)) return <LoadingIndicator />;
   if (!data || isLoading || updateUserScheduleSettingsIsLoading) return <LoadingIndicator />;
 
+  if (designReviewId && designReviewIsError) return <ErrorPage message={designReviewError.message} />;
   if (isError) return <ErrorPage error={error} message={error.message} />;
   if (updateUserScheduleSettingsIsError)
     return <ErrorPage error={updateUserScheduleSettingsError!} message={updateUserScheduleSettingsError?.message} />;
@@ -81,7 +93,7 @@ const UserScheduleSettings = ({ user }: { user: User }) => {
       }
     >
       {!edit ? (
-        <UserScheduleSettingsView scheduleSettings={data} />
+        <UserScheduleSettingsView scheduleSettings={data} designReview={designReview} />
       ) : (
         <UserScheduleSettingsEdit onSubmit={handleConfirm} defaultValues={data} />
       )}

src/frontend/src/pages/SettingsPage/UserScheduleSettings/UserScheduleSettingsEdit.tsx

@@ -53,6 +53,7 @@ const UserScheduleSettingsEdit: React.FC<UserScheduleSettingsEditProps> = ({ onS
         <AvailabilityEditModal
           open={editAvailabilityOpen}
           onHide={() => setEditAvailability(false)}
+          onSubmit={() => setEditAvailability(false)}
           header="Edit Availability"
           availabilites={availabilities}
           setAvailabilities={setAvailabilities}

src/frontend/src/pages/SettingsPage/UserScheduleSettings/UserScheduleSettingsView.tsx

@@ -6,12 +6,45 @@
 import { Grid } from '@mui/material';
 import DetailDisplay from '../../../components/DetailDisplay';
 import { NERButton } from '../../../components/NERButton';
-import { UserScheduleSettings } from 'shared';
+import { DesignReview, UserScheduleSettings } from 'shared';
 import { useState } from 'react';
 import SingleAvailabilityModal from './Availability/SingleAvailabilityModal';
+import { useCurrentUser } from '../../../hooks/users.hooks';
+import AvailabilityEditModal from './Availability/AvailabilityEditModal';
+import { useMarkUserConfirmed } from '../../../hooks/design-reviews.hooks';
+import { useToast } from '../../../hooks/toasts.hooks';
 
-const UserScheduleSettingsView = ({ scheduleSettings }: { scheduleSettings: UserScheduleSettings }) => {
+const UserScheduleSettingsView = ({
+  scheduleSettings,
+  designReview
+}: {
+  scheduleSettings: UserScheduleSettings;
+  designReview?: DesignReview;
+}) => {
   const [availabilityOpen, setAvailabilityOpen] = useState(false);
+  const toast = useToast();
+  const user = useCurrentUser();
+  const defaultOpen = designReview && !designReview.confirmedMembers.map((user) => user.userId).includes(user.userId);
+  const [confirmAvailabilityOpen, setConfirmAvailabilityOpen] = useState(defaultOpen || false);
+  const [confirmedAvailabilities, setConfirmedAvailabilities] = useState(scheduleSettings.availability);
+  const { mutateAsync } = useMarkUserConfirmed(designReview?.designReviewId || '');
+  const confirmModalTitle = designReview
+    ? `Update your availability for the ${designReview?.wbsName} Design Review on the week of ${new Date(
+        designReview.dateScheduled.getTime() - designReview.dateScheduled.getTimezoneOffset() * -60000
+      ).toLocaleDateString()}`
+    : '';
+
+  const handleConfirm = async (payload: { availability: number[] }) => {
+    setConfirmAvailabilityOpen(false);
+    try {
+      await mutateAsync(payload);
+      toast.success('Availability Confirmed!');
+    } catch (e) {
+      if (e instanceof Error) {
+        toast.error(e.message);
+      }
+    }
+  };
 
   return (
     <Grid container spacing={6} sx={{ pt: '10px' }}>
@@ -21,6 +54,14 @@ const UserScheduleSettingsView = ({ scheduleSettings }: { scheduleSettings: User
         header={'Availability'}
         availabilites={scheduleSettings.availability}
       />
+      <AvailabilityEditModal
+        open={confirmAvailabilityOpen}
+        onHide={() => setConfirmAvailabilityOpen(false)}
+        header={confirmModalTitle}
+        availabilites={confirmedAvailabilities}
+        setAvailabilities={setConfirmedAvailabilities}
+        onSubmit={() => handleConfirm({ availability: confirmedAvailabilities })}
+      />
       <Grid item xs={12} sm={6} lg={4}>
         <DetailDisplay label="Personal Google Email" content={scheduleSettings.personalGmail} />
       </Grid>

src/frontend/src/utils/urls.ts

@@ -137,6 +137,7 @@ const designReviewsCreate = () => `${designReviews()}/create`;
 const teamTypes = () => `${designReviews()}/teamType/all`;
 const designReviewsEdit = (designReviewId: string) => `${designReviews()}/${designReviewId}/edit`;
 const designReviewById = (id: string) => `${designReviews()}/${id}`;
+const designReviewMarkUserConfirmed = (id: string) => `${designReviewById(id)}/confirm-schedule`;
 
 /**************** Other Endpoints ****************/
 const version = () => `https://api.github.com/repos/Northeastern-Electric-Racing/FinishLine/releases/latest`;
@@ -248,6 +249,7 @@ export const apiUrls = {
   designReviewsCreate,
   designReviewById,
   designReviewsEdit,
+  designReviewMarkUserConfirmed,
   teamTypes,
 
   version