SSF-124 Replacing Browser Alerts

apps/frontend/src/components/floatingAlert.tsx

@@ -0,0 +1,57 @@
+import { Alert } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+
+type FloatingAlertProps = {
+  message?: string | null;
+  status?: 'info' | 'error';
+  timeout?: number;
+};
+
+export function FloatingAlert({
+  message,
+  status,
+  timeout,
+}: FloatingAlertProps) {
+  const [visible, setVisible] = useState(!!message);
+
+  useEffect(() => {
+    if (!message) {
+      setVisible(false);
+      return;
+    }
+
+    setVisible(true);
+
+    if (!timeout) return;
+
+    const timer = setTimeout(() => {
+      setVisible(false);
+    }, timeout);
+
+    return () => clearTimeout(timer);
+  }, [message, timeout]);
+
+  if (!message || !visible) return null;
+
+  return (
+    <Alert.Root
+      color={status === 'info' ? 'neutral.800' : 'red'}
+      status="info"
+      bg="white"
+      variant="subtle"
+      boxShadow="lg"
+      position="fixed"
+      zIndex="toast"
+      top="12px"
+      right="12px"
+      w="fit-content"
+      maxW="400px"
+      p={2}
+    >
+      <Alert.Indicator />
+      <Alert.Title textStyle="p2" fontWeight={500}>
+        {message}
+      </Alert.Title>
+    </Alert.Root>
+  );
+}

apps/frontend/src/components/forms/donationDetailsModal.tsx

@@ -10,6 +10,7 @@ import {
 import ApiClient from '@api/apiClient';
 import { Donation, DonationItem, FoodType } from 'types/types';
 import { formatDate } from '@utils/utils';
+import { FloatingAlert } from '@components/floatingAlert';
 
 interface DonationDetailsModalProps {
   donation: Donation;
@@ -24,6 +25,8 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
 }) => {
   const [items, setItems] = useState<DonationItem[]>([]);
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   const donationId = donation.donationId;
 
   useEffect(() => {
@@ -37,7 +40,7 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
 
         setItems(itemsData);
       } catch (err) {
-        alert('Error fetching donation details: ' + err);
+        setAlertMessage('Error fetching donation details: ' + err);
       }
     };
 
@@ -60,6 +63,9 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
       closeOnInteractOutside
       scrollBehavior="inside"
     >
+      {alertMessage && (
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
       <Portal>
         <Dialog.Backdrop bg="blackAlpha.300" />
 

apps/frontend/src/components/forms/orderDetailsModal.tsx

@@ -3,6 +3,7 @@ import { Text, Dialog, CloseButton, Textarea, Field } from '@chakra-ui/react';
 import ApiClient from '@api/apiClient';
 import { FoodRequest, OrderSummary } from 'types/types';
 import { formatDate } from '@utils/utils';
+import { FloatingAlert } from '@components/floatingAlert';
 import { TagGroup } from './tagGroup';
 
 interface OrderDetailsModalProps {
@@ -18,6 +19,8 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
 }) => {
   const [foodRequest, setFoodRequest] = useState<FoodRequest | null>(null);
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   useEffect(() => {
     if (isOpen) {
       const fetchData = async () => {
@@ -27,7 +30,7 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
           );
           setFoodRequest(foodRequestData);
         } catch (error) {
-          alert('Error fetching food request details:' + error);
+          setAlertMessage('Error fetching food request details:' + error);
         }
       };
 
@@ -44,6 +47,9 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
       }}
       closeOnInteractOutside
     >
+      {alertMessage && (
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
       <Dialog.Backdrop />
       <Dialog.Positioner>
         <Dialog.Content maxW={650}>

apps/frontend/src/components/forms/requestFormModal.tsx

@@ -17,6 +17,7 @@ import {
   RequestSize,
 } from '../../types/types';
 import { ChevronDownIcon } from 'lucide-react';
+import { FloatingAlert } from '@components/floatingAlert';
 import apiClient from '@api/apiClient';
 import { TagGroup } from './tagGroup';
 
@@ -38,8 +39,13 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
   const [selectedItems, setSelectedItems] = useState<string[]>([]);
   const [requestedSize, setRequestedSize] = useState<string>('');
   const [additionalNotes, setAdditionalNotes] = useState<string>('');
-
-  const [alertMessage, setAlertMessage] = useState<string>('');
+  const [alert, setAlert] = useState<{
+    isError: boolean;
+    message: string;
+  }>({
+    isError: true,
+    message: '',
+  });
 
   const isFormValid = requestedSize !== '' && selectedItems.length > 0;
 
@@ -64,10 +70,11 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
 
     try {
       await apiClient.createFoodRequest(foodRequestData);
+      setAlert({ isError: false, message: 'Request Submitted' });
       onClose();
       onSuccess();
     } catch {
-      setAlertMessage('Failed to submit food request');
+      setAlert({ isError: true, message: 'Request could not be submitted.' });
     }
   };
 
@@ -80,10 +87,11 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
       }}
       closeOnInteractOutside
     >
-      {alertMessage && (
-        // TODO: add Justin's alert component/uncomment below out and remove text component
-        // <FloatingAlert message={alertMessage} status="error" timeout={6000} />
-        <Text>{alertMessage}</Text>
+      {alert.message && alert.isError && (
+        <FloatingAlert message={alert.message} status="error" timeout={6000} />
+      )}
+      {alert.message && !alert.isError && (
+        <FloatingAlert message={alert.message} status="info" timeout={6000} />
       )}
       <Dialog.Backdrop />
       <Dialog.Positioner>
@@ -260,7 +268,10 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                     if (words.length <= 250) {
                       setAdditionalNotes(e.target.value);
                     } else {
-                      alert('Exceeded word limit');
+                      setAlert({
+                        isError: true,
+                        message: 'Exceeded word limit',
+                      });
                     }
                   }}
                 />

apps/frontend/src/components/forms/resetPasswordModal.tsx

@@ -10,13 +10,15 @@ import {
   Field,
 } from '@chakra-ui/react';
 import { resetPassword, confirmResetPassword } from 'aws-amplify/auth';
+import { FloatingAlert } from '@components/floatingAlert';
 
 const ResetPasswordModal: React.FC = () => {
   const [email, setEmail] = useState<string>('');
   const [code, setCode] = useState<string>('');
   const [step, setStep] = useState<'reset' | 'new'>('reset');
   const [password, setPassword] = useState<string>('');
   const [confirmPassword, setConfirmPassword] = useState<string>('');
+  const [alertMessage, setAlertMessage] = useState<string>('');
 
   const navigate = useNavigate();
 
@@ -25,27 +27,26 @@ const ResetPasswordModal: React.FC = () => {
       await resetPassword({ username: email });
       setStep('new');
     } catch (error) {
-      alert(error || 'Failed to send verification code');
+      setAlertMessage('Failed to send verification code: ' + error);
     }
   };
 
   const handleResendCode = async () => {
     try {
       await resetPassword({ username: email });
-      alert('Successfully sent verification code');
     } catch (error) {
-      alert(error || 'Failed to send verification code');
+      setAlertMessage('Failed to send verification code: ' + error);
     }
   };
 
   const handleResetPassword = async () => {
     if (password !== confirmPassword) {
-      alert('Passwords need to match');
+      setAlertMessage('Passwords need to match');
       return;
     }
 
     if (password.length < 8) {
-      alert('Password needs to be at least 8 characters');
+      setAlertMessage('Password needs to be at least 8 characters');
       return;
     }
 
@@ -55,10 +56,9 @@ const ResetPasswordModal: React.FC = () => {
         confirmationCode: code,
         newPassword: password,
       });
-      alert('Password reset successful!');
       navigate('/login');
     } catch (error) {
-      alert(error || 'Failed to set new password');
+      setAlertMessage('Failed to set new password: ' + error);
     }
   };
 
@@ -92,6 +92,9 @@ const ResetPasswordModal: React.FC = () => {
       borderRadius="xl"
       boxShadow="xl"
     >
+      {alertMessage && (
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
       <VStack gap={5} align="stretch">
         <Box mb={4}>
           <Text textStyle="h1">

apps/frontend/src/containers/adminDonation.tsx

@@ -15,6 +15,7 @@ import { Donation } from 'types/types';
 import DonationDetailsModal from '@components/forms/donationDetailsModal';
 import ApiClient from '@api/apiClient';
 import { formatDate } from '@utils/utils';
+import { FloatingAlert } from '@components/floatingAlert';
 
 const AdminDonation: React.FC = () => {
   const [donations, setDonations] = useState<Donation[]>([]);
@@ -28,13 +29,15 @@ const AdminDonation: React.FC = () => {
     null,
   );
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   useEffect(() => {
     const fetchDonations = async () => {
       try {
         const data = await ApiClient.getAllDonations();
         setDonations(data);
       } catch (error) {
-        alert('Error fetching donations: ' + error);
+        setAlertMessage('Error fetching donations: ' + error);
       }
     };
     fetchDonations();
@@ -99,6 +102,9 @@ const AdminDonation: React.FC = () => {
       <Heading textStyle="h1" color="gray.600" mb={6}>
         Donation Management
       </Heading>
+      {alertMessage && (
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
       <Box display="flex" gap={2} mb={6} fontFamily="'Inter', sans-serif">
         <Box position="relative">
           <Button

apps/frontend/src/containers/adminOrderManagement.tsx

@@ -24,6 +24,7 @@ import { capitalize, formatDate } from '@utils/utils';
 import ApiClient from '@api/apiClient';
 import { OrderStatus, OrderSummary } from '../types/types';
 import OrderDetailsModal from '@components/forms/orderDetailsModal';
+import { FloatingAlert } from '@components/floatingAlert';
 
 // Extending the OrderSummary type to include assignee color for display
 type OrderWithColor = OrderSummary & { assigneeColor?: string };
@@ -50,6 +51,8 @@ const AdminOrderManagement: React.FC = () => {
     },
   );
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   // State to hold filter state per status
   type FilterState = {
     selectedPantries: string[];
@@ -137,7 +140,7 @@ const AdminOrderManagement: React.FC = () => {
         };
         setCurrentPages(initialPages);
       } catch (error) {
-        alert('Error fetching orders: ' + error);
+        setAlertMessage('Error fetching orders: ' + error);
       }
     };
 
@@ -162,6 +165,10 @@ const AdminOrderManagement: React.FC = () => {
         Order Management
       </Heading>
 
+      {alertMessage && (
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
+
       {Object.values(OrderStatus).map((status) => {
         const allOrders = statusOrders[status] || [];
         const filterState = filterStates[status];

apps/frontend/src/containers/formRequests.tsx

@@ -19,6 +19,7 @@ import { OrderStatus, FoodRequest } from '../types/types';
 import RequestDetailsModal from '@components/forms/requestDetailsModal';
 import { formatDate } from '@utils/utils';
 import ApiClient from '@api/apiClient';
+import { FloatingAlert } from '@components/floatingAlert';
 import { useAuthenticator } from '@aws-amplify/ui-react';
 
 const FormRequests: React.FC = () => {
@@ -36,6 +37,8 @@ const FormRequests: React.FC = () => {
   const [openReadOnlyRequest, setOpenReadOnlyRequest] =
     useState<FoodRequest | null>(null);
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   const pageSize = 10;
 
   const fetchRequests = useCallback(async () => {
@@ -52,10 +55,10 @@ const FormRequests: React.FC = () => {
           setPreviousRequest(sortedData[0]);
         }
       } catch (error) {
-        console.log(error);
+        setAlertMessage('Error fetching requests: ' + error);
       }
     } else {
-      alert('No pantry associated with this account.');
+      setAlertMessage('No pantry associated with this account.');
     }
   }, []);
 
@@ -74,6 +77,9 @@ const FormRequests: React.FC = () => {
       <Text textStyle="h1" color="#515151">
         Food Request Management
       </Text>
+      {alertMessage && (
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
       <HStack gap={3} my={5}>
         <Button
           fontFamily="ibm"