#2228 - update slack ping, setup confirm availability flow

Author: RChandler234

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

@@ -158,11 +158,16 @@ export default class DesignReviewsService {
       throw new NotFoundException('User Settings', 'Cannot find settings of members');
     }
 
+    console.log(memberUserSettings);
     // send a slack message to all leadership invited to the design review
     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 +326,16 @@ 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);
-
     await prisma.schedule_Settings.upsert({
       where: { userId: submitter.userId },
       update: {
-        availability: validAvailability
+        availability
       },
       create: {
         userId: submitter.userId,
         personalGmail: '',
         personalZoomLink: '',
-        availability: validAvailability
+        availability
       }
     });
 

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/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;
@@ -107,3 +109,21 @@ export const useSingleDesignReview = (id: string) => {
     return data;
   });
 };
+
+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 || '');
 
+  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,43 @@
 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 = `Update your availability for the ${
+    designReview?.wbsName
+  } Design Review on the week of ${designReview?.dateScheduled.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 +52,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