Merge pull request #3056 from Northeastern-Electric-Racing/#3007-crea…

…te-onboarding-block

#3007 Onboarding Block Component

src/backend/src/prisma/seed.ts

@@ -1899,6 +1899,12 @@ const performSeed: () => Promise<void> = async () => {
     }
   ]);
 
+  await OrganizationsService.setOnboardingText(
+    batman,
+    ner,
+    'Thank you for applying to Northeastern Electric Racing! After reviewing your application, we are very excited to officially welcome you to our team.'
+  );
+
   await RecruitmentServices.createMilestone(batman, 'Club fair!', 'Also meet us at:', new Date('9/3/24'), ner);
   await RecruitmentServices.createMilestone(batman, 'Applications Open', '', new Date('11/13/24'), ner);
   await RecruitmentServices.createMilestone(batman, 'Applications Close', '', new Date('11/27/24'), ner);

src/frontend/src/components/OnboardingBlock.tsx

@@ -0,0 +1,40 @@
+import { Box, Grid, Typography, useTheme } from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
+import { Organization } from 'shared';
+
+interface OnboardingBlockProps {
+  organization: Organization;
+  isAdmin?: boolean;
+}
+
+const OnboardingBlock: React.FC<OnboardingBlockProps> = ({ organization, isAdmin }) => {
+  const theme = useTheme();
+  const handleEdit = () => {
+    console.log('clicked');
+  };
+
+  return (
+    <Grid item>
+      <Box
+        sx={{
+          height: '25vh',
+          borderRadius: '10px',
+          width: '100%',
+          background: theme.palette.background.paper
+        }}
+      >
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Typography variant="h5" ml={2} pt={2}>
+            Onboarding
+          </Typography>
+          {isAdmin && <EditIcon sx={{ marginRight: '15px', marginTop: '20px' }} onClick={handleEdit}></EditIcon>}
+        </Box>
+        <Typography sx={{ mt: 1, mb: -1, ml: 2, fontSize: { xs: 16, sm: 16, md: 18 }, marginRight: '15px' }}>
+          {organization.onboardingText}
+        </Typography>
+      </Box>
+    </Grid>
+  );
+};
+
+export default OnboardingBlock;

src/frontend/src/pages/AdminToolsPage/OnboardingConfig/OnboardingInfoSection.tsx

@@ -1,21 +1,27 @@
 import { Grid, Typography } from '@mui/material';
 import { Box } from '@mui/system';
+import { useCurrentOrganization } from '../../../hooks/organizations.hooks';
+import ErrorPage from '../../ErrorPage';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import OnboardingBlock from '../../../components/OnboardingBlock';
 
 const OnboardingInfoSection: React.FC = () => {
+  const {
+    data: organization,
+    isLoading: organizationIsLoading,
+    isError: organizationIsError,
+    error: organizationError
+  } = useCurrentOrganization();
+
+  if (organizationIsError) {
+    return <ErrorPage message={organizationError.message} />;
+  }
+
+  if (!organization || organizationIsLoading) return <LoadingIndicator />;
+
   return (
     <Grid container item xs={12} md={5} sx={{ display: 'flex', flexDirection: 'column', gap: 2.5, mt: 4 }}>
-      {/* This will be replaced with the 'Onboarding' block*/}
-      <Grid item>
-        <Box
-          sx={{
-            backgroundColor: 'gray',
-            height: '25vh',
-            borderRadius: '10px'
-          }}
-        >
-          <Typography>Onboarding</Typography>
-        </Box>
-      </Grid>
+      <OnboardingBlock organization={organization} isAdmin={true} />
       {/* This will be replaced with the 'Useful Links' block*/}
       <Grid item>
         <Box

src/frontend/src/pages/HomePage/components/OnboardingInfoSection.tsx

@@ -1,8 +1,10 @@
 import { Grid, Typography, ListItem, List, useTheme, Button } from '@mui/material';
 import { Box } from '@mui/system';
-import { useAllUsefulLinks } from '../../../hooks/projects.hooks';
-import LoadingIndicator from '../../../components/LoadingIndicator';
+import { useCurrentOrganization } from '../../../hooks/organizations.hooks';
 import ErrorPage from '../../ErrorPage';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import OnboardingBlock from '../../../components/OnboardingBlock';
+import { useAllUsefulLinks } from '../../../hooks/projects.hooks';
 
 const OnboardingInfoSection: React.FC = () => {
   const theme = useTheme();
@@ -11,32 +13,26 @@ const OnboardingInfoSection: React.FC = () => {
     'Chief Mechanical Engineer - Max Boone [email protected]',
     'Chief Software Engineer - Peyton Mckee [email protected]'
   ];
+  const {
+    data: organization,
+    isLoading: organizationIsLoading,
+    isError: organizationIsError,
+    error: organizationError
+  } = useCurrentOrganization();
 
   const { data: links, isError: linksIsError, error: linksError, isLoading: linksIsLoading } = useAllUsefulLinks();
 
-  if (!links || linksIsLoading) return <LoadingIndicator />;
+  if (organizationIsError) {
+    return <ErrorPage message={organizationError.message} />;
+  }
+
   if (linksIsError) return <ErrorPage message={linksError?.message} />;
 
+  if (!organization || organizationIsLoading || !links || linksIsLoading) return <LoadingIndicator />;
+
   return (
     <Grid container item sx={{ display: 'flex', flexDirection: 'column', gap: 2.5 }}>
-      <Grid item>
-        <Box
-          sx={{
-            height: '25vh',
-            borderRadius: '10px',
-            width: '100%',
-            background: theme.palette.background.paper
-          }}
-        >
-          <Typography variant="h5" ml={2} pt={2}>
-            Onboarding
-          </Typography>
-          <Typography sx={{ mt: 1, mb: -1, ml: 2 }}>
-            Thank you for applying to Northeastern Electric Racing! After reviewing your application, we are very excited to
-            officially welcome you to our team.
-          </Typography>
-        </Box>
-      </Grid>
+      <OnboardingBlock organization={organization} />
       <Grid item>
         <Box
           sx={{

src/shared/src/types/user-types.ts

@@ -44,6 +44,7 @@ export interface Organization {
   advisor?: UserPreview;
   description: string;
   applicationLink: string;
+  onboardingText?: string;
 }
 
 /**