Refactor frontend

packages/app/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "zapEHR Telehealth",
+  "name": "zapEHR Telehealth",
   "icons": [
     {
       "src": "favicon.png",

packages/app/src/App.tsx

@@ -1,22 +1,24 @@
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { useAuth0 } from '@auth0/auth0-react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { OttEHRThemeProvider } from './OttEHRThemeProvider';
 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';
-import WaitingRoom from './pages/WaitingRoom';
-import PostCall from './pages/PostCall';
-import { PatientProvider } from './store/IntakeContext';
+import {
+  CheckInPermission,
+  PatientCheckIn,
+  PostCall,
+  ProviderDashboard,
+  ProviderRegistration,
+  ProviderSettings,
+  Version,
+  WaitingRoom,
+} from './pages';
+import { PatientProvider } from './store';
 
-function App(): JSX.Element {
+export default function App(): JSX.Element {
   const { isAuthenticated } = useAuth0();
 
   return (
-    <IntakeThemeProvider>
+    <OttEHRThemeProvider>
       <Router>
         <ScrollToTop />
         {!isAuthenticated ? (
@@ -26,20 +28,18 @@ function App(): JSX.Element {
               <Route path={'/registration'} element={<ProviderRegistration />} />;
               <Route path={'/checkin'} element={<PatientCheckIn />} />;
               <Route path={'/checkin-permission'} element={<CheckInPermission />} />;
-              <Route path={'/postcall'} element={<PostCall />} />;
-              <Route path={'/waitingroom'} element={<WaitingRoom />} />;
+              <Route path={'/post-call'} element={<PostCall />} />;
+              <Route path={'/waiting-room'} element={<WaitingRoom />} />;
             </Route>
             <Route path={'/dashboard'} element={<ProviderDashboard />} />;
-            <Route path={'/ProviderProfile'} element={<ProviderSettings />} />;
+            <Route path={'/provider-profile'} element={<ProviderSettings />} />;
           </Routes>
         ) : (
           <Routes>
             <Route path={'/'} element={<Version />} />;
           </Routes>
         )}
       </Router>
-    </IntakeThemeProvider>
+    </OttEHRThemeProvider>
   );
 }
-
-export default App;

packages/app/src/IntakeThemeProvider.tsx → packages/app/src/OttEHRThemeProvider.tsx

@@ -1,6 +1,6 @@
-import { FC, ReactNode } from 'react';
-import { BreakpointsOptions, Components, createTheme, PaletteColor, ThemeProvider } from '@mui/material';
+import { BreakpointsOptions, Components, PaletteColor, ThemeProvider, createTheme } from '@mui/material';
 import { TypographyOptions } from '@mui/material/styles/createTypography';
+import { FC, ReactNode } from 'react';
 
 export const textFonts = ['Work Sans'];
 export const headerFonts = ['Work Sans'];
@@ -20,32 +20,31 @@ export const otherColors = {
   background: '#5324BE',
   borderGray: '#D6D8DF',
   borderLightBlue: '#4294F3',
+  brown: '#604203',
+  cardBackground: '#F7F8F9',
   checkIcon: '#7045F2',
   clearImage: '#EB5757',
   coachingVisit: '#EDE8FF',
-  lightBlue: '#CFF5FF',
-  darkPurple: '#301367',
+  darkBackgroundPaper: '#263954',
   darkGreen: '#0F5A4C',
-  lightGreen: '#C1FBEA',
-  purple: '#4D15B7',
-  brown: '#604203',
-  lightPurple: '#F5F2FF',
+  darkPurple: '#301367',
+  footerBackground: '#202A3E',
   languageIcon: 'rgba(15, 229, 189, 1)',
-  lightblue: '#ECF5FF',
+  lightBlue: '#CFF5FF',
   lightGray: '#CED4DA',
+  lightGreen: '#C1FBEA',
+  lightPurple: '#F5F2FF',
+  patientGreen: '#C7FDD3',
+  patientSubtitle: '#545454',
   placeholder: '#A9A9A9',
-  primaryBackground: '#F5F2FF',
   popupBackground: 'rgba(97, 97, 97, 0.9)',
+  primaryBackground: '#F5F2FF',
   primaryBoxShadow: 'rgba(77, 21, 183, 0.25)',
+  purple: '#4D15B7',
   scheduleBorder: '#8F9AA7',
   translateIcon: '#0FE5BD',
   transparent: 'rgba(0, 0, 0, 0)',
-  patientGreen: '#C7FDD3',
-  patientSubtitle: '#545454',
   wrongPatient: '#8F9AA7',
-  cardBackground: '#F7F8F9',
-  footerBackground: '#202A3E',
-  darkBackgroundPaper: '#263954',
 };
 
 export const typography: TypographyOptions = {
@@ -195,7 +194,6 @@ export const components: Components = {
         '&:not($sizeLarge):not($sizeSmall) $label': {
           fontSize: 16,
         },
-        // borderRadius: 49,
       },
       sizeLarge: {
         '& $label': {
@@ -293,11 +291,11 @@ export const components: Components = {
   },
 };
 
-interface IntakeThemeProviderProps {
+interface OttEHRThemeProviderProps {
   children: ReactNode;
 }
 
-export const IntakeThemeProvider: FC<IntakeThemeProviderProps> = ({ children }) => {
+export const OttEHRThemeProvider: FC<OttEHRThemeProviderProps> = ({ children }) => {
   const theme = createTheme({
     palette: palette,
     components: components,

packages/app/src/api/index.ts

@@ -1,2 +1,2 @@
-export { apiErrorToThrow } from './apiErrorToThrow';
-export { default as zapehrApi } from './zapehrApi';
+export * from './apiErrorToThrow';
+export * from './zapehrApi';

packages/app/src/api/zapehrApi.ts

@@ -110,6 +110,4 @@ class API {
   }
 }
 
-const api = new API();
-
-export default api;
+export const zapehrApi = new API();

packages/app/src/assets/icons/index.ts

@@ -1,13 +1,25 @@
+export { default as cancel } from './cancel.png';
+export { default as checkCircle } from './checkCircle.png';
 export { default as clipboard } from './clipboard.png';
+export { default as customRadioButtonCheckedIcon } from './customRadioButtonCheckedIcon.svg';
+export { default as customRadioButtonUncheckedIcon } from './customRadioButtonUncheckedIcon.svg';
+export { default as dashboardLogo } from './dashboardLogo.svg';
+export { default as ellipse4 } from './ellipse4.png';
+export { default as ellipse5 } from './ellipse5.png';
+export { default as footerLogo } from './footerLogo.svg';
 export { default as inPersonInfo } from './inPersonInfo.svg';
 export { default as insuranceCard } from './insuranceCard.png';
 export { default as introGroup } from './introGroup.svg';
+export { default as ottEHRDefaultPatient } from './ottEHRDefaultPatient.svg';
+export { default as ottEHRDefaultProvider } from './ottEHRDefaultProvider.svg';
+export { default as ottEHRPatientIcon } from './ottEHRPatientIcon.svg';
+export { default as ottEHRProviderIcon } from './ottEHRProviderIcon.svg';
+export { default as ottEHRRegistrationLogo } from './ottEHRRegistrationLogo.svg';
+export { default as people } from './people.png';
 export { default as speechBubbles } from './speechBubbles.png';
+export { default as stethoscope } from './stethoscope.png';
 export { default as sun } from './sun.png';
 export { default as sun2 } from './sun2.png';
-export { default as virtualVisit } from './virtual-visit.png';
-export { default as people } from './people.png';
-export { default as customRadioButtonUncheckedIcon } from './custom-radio-button-unchecked-icon.svg';
-export { default as customRadioButtonCheckedIcon } from './custom-radio-button-checked-icon.svg';
-export { default as stethiscope } from './stethiscope.png';
 export { default as videoCallMock } from './videoCallMock.png';
+export { default as virtualVisit } from './virtualVisit.png';
+export { default as waitingRoomLogo } from './waitingRoomLogo.png';

packages/app/src/components/BoldPurpleInputLabel.tsx → packages/app/src/components/BoldPrimaryInputLabel.tsx

@@ -1,6 +1,6 @@
 import { InputLabel, styled } from '@mui/material';
 
-export const BoldPurpleInputLabel = styled(InputLabel)(({ theme }) => ({
+export const BoldPrimaryInputLabel = styled(InputLabel)(({ theme }) => ({
   fontWeight: 700,
   fontSize: 16,
   transform: 'translate(0, -9px) scale(1)',

packages/app/src/components/CardComponent.tsx

@@ -1,7 +1,7 @@
-import { FC } from 'react';
 import { Box, Button, useTheme } from '@mui/material';
+import { FC } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { otherColors } from '../IntakeThemeProvider';
+import { otherColors } from '../OttEHRThemeProvider';
 
 interface CardComponentProps {
   name: string;
@@ -12,7 +12,7 @@ interface CardComponentProps {
   onClear: () => void;
 }
 
-const CardComponent: FC<CardComponentProps> = ({
+export const CardComponent: FC<CardComponentProps> = ({
   name,
   previewUrl,
   objectName,
@@ -55,5 +55,3 @@ const CardComponent: FC<CardComponentProps> = ({
     </Box>
   );
 };
-
-export default CardComponent;

packages/app/src/components/CardWithDescription.tsx

@@ -1,7 +1,7 @@
-import { FC } from 'react';
 import { Box, Card, Grid, Typography, useTheme } from '@mui/material';
+import { FC } from 'react';
 
-export interface CardWithDescriptionProps {
+interface CardWithDescriptionProps {
   icon: string;
   iconAlt: string;
   iconHeight: string;
@@ -10,7 +10,7 @@ export interface CardWithDescriptionProps {
   bgColor: string;
 }
 
-const CardWithDescription: FC<CardWithDescriptionProps> = ({
+export const CardWithDescription: FC<CardWithDescriptionProps> = ({
   icon,
   iconAlt,
   iconHeight,
@@ -39,5 +39,3 @@ const CardWithDescription: FC<CardWithDescriptionProps> = ({
     </Card>
   );
 };
-
-export default CardWithDescription;

packages/app/src/components/CardWithLink.tsx

@@ -1,7 +1,7 @@
-import { FC } from 'react';
 import { Box, Card, Grid, Link as MuiLink, Typography, useTheme } from '@mui/material';
+import { FC } from 'react';
 
-export interface CardWithLinkProps {
+interface CardWithLinkProps {
   icon: string;
   iconAlt: string;
   iconHeight: string;
@@ -11,7 +11,15 @@ export interface CardWithLinkProps {
   bgColor: string;
 }
 
-const CardWithLink: FC<CardWithLinkProps> = ({ icon, iconAlt, iconHeight, mainText, linkText, link, bgColor }) => {
+export const CardWithLink: FC<CardWithLinkProps> = ({
+  icon,
+  iconAlt,
+  iconHeight,
+  mainText,
+  linkText,
+  link,
+  bgColor,
+}) => {
   const theme = useTheme();
   return (
     <Card sx={{ mt: 2, borderRadius: 2, backgroundColor: bgColor, [theme.breakpoints.down('md')]: { mx: 2 } }}>
@@ -42,5 +50,3 @@ const CardWithLink: FC<CardWithLinkProps> = ({ icon, iconAlt, iconHeight, mainTe
     </Card>
   );
 };
-
-export default CardWithLink;

packages/app/src/components/CheckIconWithText.tsx

@@ -1,13 +1,13 @@
-import { FC, ReactNode } from 'react';
-import { Stack, Typography } from '@mui/material';
 import CheckIcon from '@mui/icons-material/Check';
-import { otherColors } from '../IntakeThemeProvider';
+import { Stack, Typography } from '@mui/material';
+import { FC, ReactNode } from 'react';
+import { otherColors } from '../OttEHRThemeProvider';
 
 interface CheckIconWithTextProps {
   children: ReactNode;
 }
 
-const CheckIconWithText: FC<CheckIconWithTextProps> = ({ children }) => {
+export const CheckIconWithText: FC<CheckIconWithTextProps> = ({ children }) => {
   return (
     <Stack direction="row" spacing={2}>
       <CheckIcon sx={{ color: otherColors.checkIcon }} />
@@ -17,4 +17,3 @@ const CheckIconWithText: FC<CheckIconWithTextProps> = ({ children }) => {
     </Stack>
   );
 };
-export default CheckIconWithText;

packages/app/src/components/ControlButtons.tsx

@@ -1,8 +1,8 @@
 import LoadingButton from '@mui/lab/LoadingButton';
 import { Box, Button } from '@mui/material';
 import { FC } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 /**
  * Navigation Buttons.
@@ -21,7 +21,12 @@ export interface ControlButtonsProps {
   loading?: boolean;
 }
 
-const ControlButtons: FC<ControlButtonsProps> = ({ submitDisabled, submitLabel, backButton = true, loading }) => {
+export const ControlButtons: FC<ControlButtonsProps> = ({
+  submitDisabled,
+  submitLabel,
+  backButton = true,
+  loading,
+}) => {
   const navigate = useNavigate();
   const { t } = useTranslation();
 
@@ -57,4 +62,3 @@ const ControlButtons: FC<ControlButtonsProps> = ({ submitDisabled, submitLabel,
     </Box>
   );
 };
-export default ControlButtons;

packages/app/src/components/ControlledCheckBox.tsx

@@ -1,7 +1,7 @@
+import { Checkbox, FormControlLabel } from '@mui/material';
+import { Box } from '@mui/system';
 import { FC, ReactElement } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
-import { FormControlLabel, Checkbox } from '@mui/material';
-import { Box } from '@mui/system';
 
 interface ControlledCheckBoxProps {
   name: string;
@@ -11,7 +11,7 @@ interface ControlledCheckBoxProps {
   document: ReactElement | undefined;
 }
 
-const ControlledCheckBox: FC<ControlledCheckBoxProps> = ({ name, label, defaultValue, required, document }) => {
+export const ControlledCheckBox: FC<ControlledCheckBoxProps> = ({ name, label, defaultValue, required, document }) => {
   const { control } = useFormContext();
   return (
     <FormControlLabel
@@ -59,4 +59,3 @@ const ControlledCheckBox: FC<ControlledCheckBoxProps> = ({ name, label, defaultV
     />
   );
 };
-export default ControlledCheckBox;

packages/app/src/components/CustomContainer.tsx

@@ -1,10 +1,8 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useAuth0 } from '@auth0/auth0-react';
 import { AppBar, Box, Button, Card, Container, Grid, Typography, useTheme } from '@mui/material';
 import { FC, ReactElement } from 'react';
-import { bg1, bg3, bg4, bg5 } from '../assets';
-import { otherColors } from '../IntakeThemeProvider';
-import Footer from './Footer';
-import { useAuth0 } from '@auth0/auth0-react';
+import { bg1 } from '../assets';
+import { Footer } from './Footer';
 
 interface ContainerProps {
   title: string;
@@ -18,7 +16,7 @@ interface ContainerProps {
   children: any;
 }
 
-const CustomContainer: FC<ContainerProps> = ({
+export const CustomContainer: FC<ContainerProps> = ({
   title,
   subtitle,
   isFirstPage,
@@ -156,4 +154,3 @@ const CustomContainer: FC<ContainerProps> = ({
     </Container>
   );
 };
-export default CustomContainer;