Merge pull request #1453 from Northeastern-Electric-Racing/#1310-enforce-secure-settings-on-create-RR-form

#1310 enforce secure settings on create rr form

Author: RChandler234

src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx

@@ -4,11 +4,14 @@ import {
   FormHelperText,
   FormLabel,
   Grid,
+  Link,
   IconButton,
   MenuItem,
   Select,
   TextField,
-  Typography
+  Typography,
+  Snackbar,
+  Alert
 } from '@mui/material';
 import { Box, Stack } from '@mui/system';
 import { Control, Controller, FieldErrors, UseFormHandleSubmit, UseFormSetValue, UseFormWatch } from 'react-hook-form';
@@ -29,6 +32,8 @@ import NERSuccessButton from '../../../components/NERSuccessButton';
 import { ReimbursementRequestFormInput } from './ReimbursementRequestForm';
 import { useState } from 'react';
 import { useToast } from '../../../hooks/toasts.hooks';
+import { Link as RouterLink } from 'react-router-dom';
+import { routes } from '../../../utils/routes';
 import { codeAndRefundSourceName, expenseTypePipe } from '../../../utils/pipes';
 
 interface ReimbursementRequestFormViewProps {
@@ -52,6 +57,7 @@ interface ReimbursementRequestFormViewProps {
   submitText: string;
   previousPage: string;
   setValue: UseFormSetValue<ReimbursementRequestFormInput>;
+  hasSecureSettingsSet: boolean;
 }
 
 const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps> = ({
@@ -71,7 +77,8 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
   watch,
   submitText,
   previousPage,
-  setValue
+  setValue,
+  hasSecureSettingsSet
 }) => {
   const [datePickerOpen, setDatePickerOpen] = useState(false);
   const toast = useToast();
@@ -108,6 +115,18 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
         handleSubmit(onSubmit)(e);
       }}
     >
+      {!hasSecureSettingsSet && (
+        <Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={true}>
+          <Alert variant="filled" severity="warning">
+            Your secure settings must be set to create a reimbursement request, you can set them
+            <Link style={{ color: 'blue' }} component={RouterLink} to={routes.SETTINGS}>
+              {' '}
+              here
+            </Link>
+            .
+          </Alert>
+        </Snackbar>
+      )}
       <Grid container spacing={2}>
         <Grid item container spacing={2} md={6} xs={12}>
           <Grid item xs={12}>
@@ -259,7 +278,7 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
         <NERFailButton variant="contained" href={previousPage} sx={{ mx: 1 }}>
           Cancel
         </NERFailButton>
-        <NERSuccessButton variant="contained" type="submit">
+        <NERSuccessButton variant="contained" type="submit" disabled={!hasSecureSettingsSet}>
           {submitText}
         </NERSuccessButton>
       </Box>

src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementRequestForm.tsx

@@ -15,6 +15,7 @@ import { useAllProjects } from '../../../hooks/projects.hooks';
 import { useHistory } from 'react-router-dom';
 import { routes } from '../../../utils/routes';
 import { getAllWbsElements } from '../../../utils/reimbursement-request.utils';
+import { useCurrentUserSecureSettings } from '../../../hooks/users.hooks';
 
 export interface ReimbursementRequestFormInput {
   vendorId: string;
@@ -120,6 +121,12 @@ const ReimbursementRequestForm: React.FC<ReimbursementRequestFormProps> = ({
     data: allProjects
   } = useAllProjects();
 
+  // checking the data here instead of using isError since function doesn't ever return an error
+  const { data: userSecureSettings, isLoading: checkSecureSettingsIsLoading } = useCurrentUserSecureSettings();
+
+  // checks to make sure none of the secure settings fields are empty, indicating not properly set
+  const hasSecureSettingsSet = Object.values(userSecureSettings ?? {}).every((x) => x !== '') ? true : false;
+
   const toast = useToast();
   const history = useHistory();
 
@@ -133,7 +140,8 @@ const ReimbursementRequestForm: React.FC<ReimbursementRequestFormProps> = ({
     allProjectsIsLoading ||
     !allVendors ||
     !allExpenseTypes ||
-    !allProjects
+    !allProjects ||
+    checkSecureSettingsIsLoading
   )
     return <LoadingIndicator />;
 
@@ -181,6 +189,7 @@ const ReimbursementRequestForm: React.FC<ReimbursementRequestFormProps> = ({
       submitText={submitText}
       previousPage={previousPage}
       setValue={setValue}
+      hasSecureSettingsSet={hasSecureSettingsSet}
     />
   );
 };