Patient checkin

packages/app/src/App.tsx

@@ -3,6 +3,9 @@ import { useAuth0 } from '@auth0/auth0-react';
 import { ScrollToTop } from './components';
 import { IntakeThemeProvider } from './IntakeThemeProvider';
 import Version from './pages/Version';
+import ProviderRegistration from './pages/ProviderRegistration';
+import PatientCheckIn from './pages/PatientCheckin';
+import CheckInPermission from './pages/CheckInPermission';
 import ProviderDashboard from './pages/ProviderDashboard';
 import ProviderSettings from './pages/ProviderSettings';
 
@@ -16,6 +19,9 @@ function App(): JSX.Element {
         {!isAuthenticated ? (
           <Routes>
             <Route path={'/'} element={<Version />} />;
+            <Route path={'/registration'} element={<ProviderRegistration />} />;
+            <Route path={'/checkin-permission'} element={<CheckInPermission />} />;
+            <Route path={'/checkin'} element={<PatientCheckIn />} />;
             <Route path={'/dashboard'} element={<ProviderDashboard />} />;
             <Route path={'/ProviderProfile'} element={<ProviderSettings />} />;
           </Routes>

packages/app/src/IntakeThemeProvider.tsx

@@ -45,6 +45,7 @@ export const otherColors = {
   wrongPatient: '#8F9AA7',
   cardBackground: '#F7F8F9',
   footerBackground: '#202A3E',
+  darkBackgroundPaper: '#263954',
 };
 
 export const typography: TypographyOptions = {

packages/app/src/components/TopSection.tsx

@@ -0,0 +1,48 @@
+import { Typography } from '@mui/material';
+import WaitingRoomLogo from '../assets/icons/waitingRoomLogo.png';
+import { Box } from '@mui/system';
+
+//To do: export types to another folder
+interface TopSectionProps {
+  roomName: string;
+}
+
+const TopSection: React.FC<TopSectionProps> = ({ roomName }) => {
+  return (
+    <Box
+      sx={{
+        background: 'linear-gradient(89deg, rgba(40, 160, 198, 0.60) 5.05%, rgba(80, 96, 241, 0.17) 50.42%), #263954',
+      }}
+    >
+      <Typography
+        sx={{
+          color: 'white',
+          textAlign: 'left',
+          fontWeight: 'bold',
+          fontSize: '1.25rem',
+          pt: 1.4,
+          pl: 2.74,
+          position: 'absolute',
+        }}
+      >
+        NEW LOGO
+      </Typography>
+      <Box sx={{ display: 'flex', justifyContent: 'center', px: 46, py: 5 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <img src={WaitingRoomLogo} style={{ width: '6.25rem', height: '6.25rem' }} />
+          <Box sx={{ ml: 3 }}>
+            <Typography sx={{ color: '#4AC0F2', fontSize: 24, width: 376 }}>{roomName}</Typography>
+            <Typography sx={{ color: 'white', fontSize: '2.125rem' }}>Dr. Smith</Typography>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default TopSection;

packages/app/src/pages/CheckInPermission.tsx

@@ -0,0 +1,96 @@
+import { Button, Typography, Box } from '@mui/material';
+import VideocamOffIcon from '@mui/icons-material/VideocamOff';
+import React from 'react';
+import TopSection from '../components/TopSection';
+import Footer from '../components/Footer';
+
+const CheckInPermission = (): JSX.Element => {
+  const enableCamMic = (): void => {
+    // TODO: form submission structure
+  };
+
+  const continueWithoutCamMic = (): void => {
+    // TODO: Logic for continuing without camera and mic
+  };
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', justifyContent: 'space-between' }}>
+      <TopSection roomName="Waiting Room" />
+
+      {/* Middle Section */}
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          backgroundColor: '#fff',
+          height: '35rem',
+          py: 7.5,
+          px: 12.5,
+          gap: 2,
+        }}
+      >
+        <Box sx={{ width: '31.3rem', display: 'flex', flexDirection: 'column', gap: 1 }}>
+          <Typography sx={{ fontSize: '1.5rem' }}>Enable your camera and mic</Typography>
+          <Typography sx={{ fontSize: '1rem' }}>
+            Please give us access to your camera and mic for a video call
+          </Typography>
+        </Box>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <Box
+            sx={{
+              width: '31.25rem',
+              height: '14.125rem',
+              borderRadius: 2,
+              backgroundColor: 'rgba(50, 63, 83, 0.87)',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <VideocamOffIcon sx={{ color: '#FFF' }} />
+            <Typography
+              sx={{
+                color: '#FFF',
+                fontSize: '16px',
+                textAlign: 'center',
+                opacity: '0.5',
+              }}
+            >
+              Enable camera in your browser
+            </Typography>
+          </Box>
+          <Button
+            onClick={enableCamMic}
+            variant="contained"
+            sx={{
+              width: '31.3rem',
+              backgroundColor: '#2896C6',
+              color: 'white',
+              borderRadius: '4px',
+            }}
+          >
+            ENABLE CAMERA AND MIC
+          </Button>
+          <Typography
+            sx={{
+              textAlign: 'center',
+              color: '#2896C6',
+              fontSize: '15px',
+              cursor: 'pointer',
+              mt: 2,
+            }}
+            onClick={continueWithoutCamMic}
+          >
+            CONTINUE WITHOUT CAMERA AND MIC
+          </Typography>
+        </Box>
+      </Box>
+
+      <Footer />
+    </Box>
+  );
+};
+
+export default CheckInPermission;

packages/app/src/pages/PatientCheckin.tsx

@@ -0,0 +1,63 @@
+import { Button, TextField, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import React from 'react';
+import TopSection from '../components/TopSection';
+import Footer from '../components/Footer';
+
+const PatientCheckIn = (): JSX.Element => {
+  const handleSubmit = (event: any): void => {
+    event.preventDefault();
+    // TODO: form submission structure
+  };
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', justifyContent: 'space-between' }}>
+      <TopSection roomName="Waiting Room" />
+
+      {/* Middle Section */}
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          backgroundColor: '#fff',
+          height: '35rem',
+          paddingY: '3.75rem',
+          paddingX: '6.25rem',
+        }}
+      >
+        <Box sx={{ width: '31.3rem' }}>
+          <Typography sx={{ fontSize: '1.5rem', paddingBottom: '0.5rem' }}>Check in</Typography>
+          <Typography sx={{ fontSize: '1rem', paddingBottom: '1.5rem' }}>
+            Please enter your name to join the call line of Dr. Olivia Smith
+          </Typography>
+        </Box>
+        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+          <form onSubmit={handleSubmit}>
+            <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'left' }}>
+              <TextField variant="outlined" label="Your Name" sx={{ width: '31.3rem', paddingBottom: '1rem' }} />
+
+              <Button
+                type="submit"
+                variant="contained"
+                sx={{
+                  width: '31.3rem',
+                  backgroundColor: '#2896C6',
+                  color: 'white',
+                  marginTop: '1rem',
+                  textTransform: 'uppercase',
+                  borderRadius: '4px',
+                }}
+              >
+                Check In
+              </Button>
+            </Box>
+          </form>
+        </Box>
+      </Box>
+
+      <Footer />
+    </Box>
+  );
+};
+
+export default PatientCheckIn;