213 candidate view application

apps/frontend/src/api/apiClient.ts

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from 'react';
 import {
   Application,
   AvailabilityFields,
+  CandidateInfo,
   LearnerInfo,
   User,
   VolunteerInfo,
@@ -72,6 +73,12 @@ export class ApiClient {
     return this.get(`/api/learner_info/${appId}`) as Promise<LearnerInfo>;
   }
 
+  public async getCandidateInfoByEmail(email: string): Promise<CandidateInfo> {
+    return this.get(
+      `/api/CandidateInfo/email/${encodeURIComponent(email)}`,
+    ) as Promise<CandidateInfo>;
+  }
+
   public async updateAvailability(
     appId: number,
     availability: Partial<AvailabilityFields>,

apps/frontend/src/api/types.ts

@@ -167,3 +167,8 @@ export interface User {
   lastName: string;
   userType: UserType;
 }
+
+export interface CandidateInfo {
+  email: string;
+  appId: number;
+}

apps/frontend/src/app.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Outlet, Route, Routes } from 'react-router-dom';
 import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
 import AdminLanding from './containers/AdminLanding';
 import AdminViewApplication from './containers/AdminViewApplication';
+import CandidateViewApplication from './containers/CandidateViewApplication';
 import NotFound from './containers/404';
 import RequireAuth from './auth/RequireAuth';
 import RequireRole from './auth/RequireRole';
@@ -45,7 +46,10 @@ export const App: React.FC = () => {
               element={<RequireRole allowedUserTypes={[UserType.STANDARD]} />}
             >
               <Route path="candidate" element={<Outlet />}>
-                <Route path="view-application" />
+                <Route
+                  path="view-application"
+                  element={<CandidateViewApplication />}
+                />
                 <Route path="upload-forms" />
                 <Route path="settings" />
               </Route>

apps/frontend/src/auth/cognito.ts

@@ -69,6 +69,8 @@ export const getIdToken = async (): Promise<string | undefined> => {
 };
 
 export const isAuthenticated = async (): Promise<boolean> => {
+  if (import.meta.env.VITE_DEV_AUTH_EMAIL) return true;
+
   try {
     await getCurrentUser();
     return true;

apps/frontend/src/auth/current-session-user-type.ts

@@ -50,6 +50,11 @@ export const fetchAndStoreCurrentSessionUserType =
   };
 
 export const getCurrentSessionUserType = async (): Promise<UserType | null> => {
+  const devUserType = import.meta.env.VITE_DEV_AUTH_USER_TYPE as string;
+  if (devUserType === UserType.ADMIN || devUserType === UserType.STANDARD) {
+    return devUserType;
+  }
+
   // Prefer the cached role first so route guards do not call the backend on
   // every render, but only if Cognito still considers the session valid.
   const storedUserType = getCurrentSessionUserTypeFromStorage();

apps/frontend/src/components/EmergencyContactFrame.tsx

@@ -0,0 +1,110 @@
+import { Box, Flex, Text } from '@chakra-ui/react';
+import personIcon from '../assets/icons/personIcon.svg?url';
+
+interface EmergencyContactFrameProps {
+  name: string;
+  phone: string;
+  relationship: string;
+}
+
+const EmergencyContactFrame = ({
+  name,
+  phone,
+  relationship,
+}: EmergencyContactFrameProps) => {
+  return (
+    <Flex
+      align="center"
+      gap="26px"
+      bg="#F5F5F5"
+      borderRadius="md"
+      px="20px"
+      py="50px"
+      w="100%"
+    >
+      <Flex
+        w="100px"
+        h="100px"
+        borderRadius="200px"
+        bg="#013594"
+        align="center"
+        justify="center"
+        flexShrink={0}
+        p="29px"
+      >
+        <img
+          src={personIcon}
+          alt="Emergency contact avatar"
+          style={{
+            width: '100%',
+            height: '100%',
+            filter: 'brightness(0) invert(1)',
+          }}
+        />
+      </Flex>
+
+      <Box
+        display="grid"
+        gridTemplateColumns="1fr 1fr"
+        gridTemplateRows="auto auto auto"
+        gap="4px"
+        flex={1}
+        alignItems="start"
+      >
+        <Text
+          fontSize="20px"
+          fontFamily="Lato, sans-serif"
+          fontWeight="700"
+          color="#000"
+          lineHeight="normal"
+          gridRow="1"
+          gridColumn="1"
+        >
+          Emergency Contact
+        </Text>
+
+        <Flex
+          align="center"
+          justify="center"
+          px="12px"
+          py="6px"
+          borderRadius="20px"
+          border="1px solid #013594"
+          bg="#008CA7"
+          gridRow="1"
+          gridColumn="2"
+          alignSelf="center"
+          w="fit-content"
+        >
+          <Text color="white" fontWeight="600" fontSize="sm">
+            {relationship}
+          </Text>
+        </Flex>
+
+        <Text
+          fontSize="18px"
+          fontFamily="Lato, sans-serif"
+          fontWeight="400"
+          color="#000"
+          gridRow="2"
+          gridColumn="1 / span 2"
+        >
+          {name}
+        </Text>
+
+        <Text
+          fontSize="18px"
+          fontFamily="Lato, sans-serif"
+          fontWeight="400"
+          color="gray.600"
+          gridRow="3"
+          gridColumn="1"
+        >
+          {phone}
+        </Text>
+      </Box>
+    </Flex>
+  );
+};
+
+export default EmergencyContactFrame;

apps/frontend/src/components/NavBar/NavBar.tsx

@@ -40,13 +40,17 @@ export default function NavBar({ logo, userType }: NavBarProps) {
           )}
           {userType === UserType.STANDARD && (
             <NavbarItem
-              href="#myapplication"
+              href="/candidate/view-application"
               label="My Application"
               icon={<FaPerson />}
             />
           )}
           {userType === UserType.STANDARD && (
-            <NavbarItem href="#myforms" label="My Forms" icon={<FaRegFile />} />
+            <NavbarItem
+              href="/candidate/upload-forms"
+              label="My Forms"
+              icon={<FaRegFile />}
+            />
           )}
           <NavbarItem
             href="#settings"

apps/frontend/src/containers/AdminViewApplication.tsx

@@ -12,11 +12,12 @@ import {
   LearnerInfo,
   UserType,
   VolunteerInfo,
-} from '../api/types';
-import QuestionFrame from '../components/QuestionFrame';
-import RequirementsFrame from '../components/RequirementsFrame';
-import UploadedMaterial from '../components/UploadedMaterial';
-import SchoolAffiliationFrame from '../components/SchoolAffiliationFrame';
+} from '@api/types';
+import QuestionFrame from '@components/QuestionFrame';
+import RequirementsFrame from '@components/RequirementsFrame';
+import UploadedMaterial from '@components/UploadedMaterial';
+import SchoolAffiliationFrame from '@components/SchoolAffiliationFrame';
+import EmergencyContactFrame from '@components/EmergencyContactFrame';
 
 const AdminViewApplication: React.FC = () => {
   const { appId } = useParams<{ appId: string }>();
@@ -213,6 +214,11 @@ const AdminViewApplication: React.FC = () => {
             }}
           />
         )}
+        <EmergencyContactFrame
+          name={application.emergencyContactName}
+          phone={application.emergencyContactPhone}
+          relationship={application.emergencyContactRelationship}
+        />
       </Box>
     </div>
   );