Skip to content

Commit

Permalink
Merge pull request #480 from osu-wams/dd1318-covidz
Browse files Browse the repository at this point in the history
Dd1318 covidz
  • Loading branch information
mxcosu authored Jul 29, 2021
2 parents 43045cd + 4f74281 commit 73cef0f
Show file tree
Hide file tree
Showing 12 changed files with 214 additions and 58 deletions.
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@
"@fortawesome/pro-solid-svg-icons": "^5.12.1",
"@fortawesome/react-fontawesome": "^0.1.11",
"@material-ui/core": "^4.9.9",
"@osu-wams/hooks": "1.0.124",
"@osu-wams/lib": "0.1.81",
"@osu-wams/theme": "0.1.3",
"@osu-wams/utils": "0.0.15",
"@osu-wams/hooks": "1.0.126",
"@osu-wams/lib": "0.1.82",
"@osu-wams/theme": "0.1.5",
"@osu-wams/utils": "0.0.17",
"@reach/accordion": "^0.11.2",
"@reach/dialog": "^0.11.2",
"@reach/menu-button": "0.10.5",
Expand Down
97 changes: 97 additions & 0 deletions src/features/CovidCompliance.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import React, { FC, useContext } from 'react';
import { Loading } from 'src/ui/Loading';
import styled, { ThemeContext } from 'styled-components/macro';
import {
faCheckCircle,
faExclamationCircle,
faNotesMedical,
} from '@fortawesome/pro-light-svg-icons';
import { Card, CardHeader, CardContent, CardIcon } from 'src/ui/Card';
import { fontSize, spacing } from '@osu-wams/theme';
import { useMedical } from '@osu-wams/hooks';
import { ExternalLink } from 'src/ui/Link';
import { Url } from '@osu-wams/utils';
import { Event } from 'src/util/gaTracking';
import { Types } from '@osu-wams/lib';
import Icon from 'src/ui/Icon';

const VaccinationContent = styled.div({
flex: 1,
flexDirection: 'row',
display: 'flex',
paddingBottom: spacing.default,
paddingLeft: spacing.default,
});

const VaccinationContentBody = styled.div(({ theme }) => ({
color: theme.features.covidVaccination.content.color,
display: 'flex',
flexDirection: 'column',
fontSize: fontSize['14'],
paddingLeft: spacing.large,
paddingRight: spacing.xl,
paddingTop: spacing.small,
}));

const hasCovidVaccination = (medical: Types.Medical[]) => {
return medical.some((m: Types.Medical) => m.code === 'COVIDVACC');
};

const CovidCompliance: FC = () => {
const theme = useContext(ThemeContext);
const { data, isSuccess, isLoading } = useMedical();
return (
<Card collapsing={false}>
<CardHeader title="Covid Vaccination" badge={<CardIcon icon={faNotesMedical} />} />
<CardContent>
{isLoading && <Loading lines={5} />}
{isSuccess && data && hasCovidVaccination(data) ? (
<VaccinationContent>
<Icon
icon={faCheckCircle}
color={theme.features.covidVaccination.icon.compliantColor}
size={'4x'}
/>
<VaccinationContentBody>
You are in compliance with the university covid vaccination policy.
</VaccinationContentBody>
</VaccinationContent>
) : (
<VaccinationContent>
<Icon
icon={faExclamationCircle}
color={theme.features.covidVaccination.icon.nonCompliantColor}
size={'4x'}
/>
<VaccinationContentBody>
<b>
You are not in compliance with the university covid vaccination policy. Please take
one of the following actions:
</b>
<ExternalLink
href={Url.covidCompliance.getVaccinated}
onClick={() => Event('covid-compliance', `Clicked get vaccinated`)}
>
• Get the vaccination
</ExternalLink>
<ExternalLink
href={Url.covidCompliance.register}
onClick={() => Event('covid-compliance', `Clicked register my vaccine`)}
>
• Enter your vaccine information
</ExternalLink>
<ExternalLink
href={Url.covidCompliance.decline}
onClick={() => Event('covid-compliance', `Clicked declination form`)}
>
• Complete the declination form
</ExternalLink>
</VaccinationContentBody>
</VaccinationContent>
)}
</CardContent>
</Card>
);
};

export default CovidCompliance;
56 changes: 56 additions & 0 deletions src/features/__tests__/CovidCompliance.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import React from 'react';
import { renderWithAllContexts as render } from 'src/util/test-utils';
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Person } from '@osu-wams/hooks';
import CovidCompliance from '../CovidCompliance';
import { mockGAEvent } from 'src/setupTests';

const mockMedical = Person.Medical.mockMedical;
const mockUseMedical = jest.fn();

jest.mock('@osu-wams/hooks', () => {
return {
...jest.requireActual('@osu-wams/hooks'),
useMedical: () => mockUseMedical(),
};
});

describe('<CovidCompliance />', () => {
beforeEach(() => {
mockUseMedical.mockReturnValue(mockMedical);
});

it('should have title: "Covid Vaccination"', () => {
render(<CovidCompliance />);

expect(screen.getByText(/covid vaccination/i, { selector: 'h2 > span' })).toBeInTheDocument();
});

it('should have a positive vaccination message', () => {
render(<CovidCompliance />);

expect(screen.getByText(/you are in compliance/i)).toBeInTheDocument();
});

it('should find links to become compliant', async () => {
mockUseMedical.mockReturnValue({ ...mockMedical, data: [] });
render(<CovidCompliance />);
const getVaccinated = screen.getByText(/get the vaccination/i);
const register = screen.getByText(/enter your vaccine information/i);
const decline = screen.getByText(/complete the declination form/i);
userEvent.click(getVaccinated);
expect(mockGAEvent).toHaveBeenCalledTimes(1);
userEvent.click(register);
expect(mockGAEvent).toHaveBeenCalledTimes(2);
userEvent.click(decline);
expect(mockGAEvent).toHaveBeenCalledTimes(3);
});

it('should show a negative vaccination message', async () => {
mockUseMedical.mockReturnValue({ ...mockMedical, data: [] });
render(<CovidCompliance />);

expect(screen.getByText(/you are not in compliance/i)).toBeInTheDocument();
});
});
20 changes: 10 additions & 10 deletions src/features/__tests__/__snapshots__/PlannerItems.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ exports[`<PlannerItems /> should have a "My Awesome Planner Note" note on our mo
.c1 .MuiCheckbox-root {
width: 48px;
height: 48px;
font-size: 1.8rem;
font-size: 18px;
margin-right: 5px;
}
Expand All @@ -98,28 +98,28 @@ exports[`<PlannerItems /> should have a "My Awesome Planner Note" note on our mo
.c7 {
color: #7B746F;
font-size: 1.4rem;
font-size: 14px;
line-height: 1.6rem;
}
.c3 {
line-height: 1.4rem;
line-height: 14px;
text-align: center;
padding: 0 16px 0 0;
color: #D73F09;
width: 5.8rem;
width: 58px;
}
.c3 strong {
line-height: 2.0rem;
font-size: 2.0rem;
line-height: 20px;
font-size: 20px;
}
.c8 {
background: #E9E5E4;
border-radius: 4px;
color: #2E2B2A;
font-size: 1.2rem;
font-size: 12px;
padding: 2px 4px;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
Expand Down Expand Up @@ -282,7 +282,7 @@ exports[`<PlannerItems /> should have a "Week 5 Lab Discussion" assignment on ou
.c1 .MuiCheckbox-root {
width: 48px;
height: 48px;
font-size: 1.8rem;
font-size: 18px;
margin-right: 5px;
}
Expand All @@ -305,15 +305,15 @@ exports[`<PlannerItems /> should have a "Week 5 Lab Discussion" assignment on ou
.c10 {
color: #7B746F;
font-size: 1.4rem;
font-size: 14px;
line-height: 1.6rem;
}
.c11 {
background: #E9E5E4;
border-radius: 4px;
color: #2E2B2A;
font-size: 1.2rem;
font-size: 12px;
padding: 2px 4px;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
Expand Down
2 changes: 2 additions & 0 deletions src/pages/Dashboard/StudentDashboard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { TrendingResources } from 'src/features/TrendingResources';
import { useRecoilValue } from 'recoil';
import { DynamicCard } from 'src/ui/Card/variants/DynamicCard';
import { ITSystemStatus } from 'src/features/it-systems-status/ITSystemStatus';
import CovidCompliance from 'src/features/CovidCompliance';

const { ANNOUNCEMENT_PAGES, filteredCards } = State;

Expand All @@ -24,6 +25,7 @@ const StudentDashboard = () => {
<Masonry>
<>
<ScheduleCard />
<CovidCompliance />
<ITSystemStatus />
</>
<FavoriteResources />
Expand Down
12 changes: 6 additions & 6 deletions src/ui/__tests__/__snapshots__/Bubble.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`Renders default bubble 1`] = `
background: #E9E5E4;
border-radius: 4px;
color: #2E2B2A;
font-size: 1.2rem;
font-size: 12px;
padding: 2px 4px;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
Expand All @@ -29,7 +29,7 @@ exports[`Renders external link bubble 1`] = `
background: #E9E5E4;
border-radius: 4px;
color: #2E2B2A;
font-size: 1.2rem;
font-size: 12px;
padding: 2px 4px;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
Expand All @@ -42,13 +42,13 @@ exports[`Renders external link bubble 1`] = `
.c1 {
background: #FFF2D5;
color: #915513;
font-size: 1.2rem;
font-size: 12px;
font-weight: bold;
}
.c1 > svg {
margin-left: 4px;
font-size: 1rem;
font-size: 10px;
color: #915513;
}
Expand All @@ -66,7 +66,7 @@ exports[`Renders internal link bubble 1`] = `
background: #E9E5E4;
border-radius: 4px;
color: #2E2B2A;
font-size: 1.2rem;
font-size: 12px;
padding: 2px 4px;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
Expand All @@ -79,7 +79,7 @@ exports[`Renders internal link bubble 1`] = `
.c1 {
background: #ECF5F6;
color: #007082;
font-size: 1.2rem;
font-size: 12px;
font-weight: bold;
}
Expand Down
6 changes: 3 additions & 3 deletions src/ui/__tests__/__snapshots__/Button.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ exports[`Renders a large button with default colors 1`] = `
border-radius: 4px;
cursor: pointer;
padding: 1rem 1.8rem;
font-size: 1.8rem;
font-size: 18px;
}
.c0 + .c0 {
Expand All @@ -109,7 +109,7 @@ exports[`Renders a small button with default colors 1`] = `
border-radius: 4px;
cursor: pointer;
padding: .2rem .3rem;
font-size: 1.4rem;
font-size: 14px;
}
.c0 + .c0 {
Expand All @@ -135,7 +135,7 @@ exports[`Renders a super button with all the props changed: bg, fg, size 1`] = `
border-radius: 4px;
cursor: pointer;
padding: 1rem 1.8rem;
font-size: 1.8rem;
font-size: 18px;
}
.c0 + .c0 {
Expand Down
6 changes: 3 additions & 3 deletions src/ui/__tests__/__snapshots__/Input.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`LargeInput gets rendered with large font size CSS 1`] = `
border-radius: 8px;
border: 1px solid #D4CFCD;
padding: 16px 32px;
font-size: 1.8rem;
font-size: 18px;
}
<div>
Expand Down Expand Up @@ -42,7 +42,7 @@ exports[`NormalInput gets rendered with default font size CSS 1`] = `
border-radius: 8px;
border: 1px solid #D4CFCD;
padding: 8px 16px;
font-size: 1.6rem;
font-size: 16px;
}
<div>
Expand Down Expand Up @@ -72,7 +72,7 @@ exports[`SmallInput gets rendered with small font size CSS 1`] = `
border-radius: 8px;
border: 1px solid #D4CFCD;
padding: 2px 4px;
font-size: 1.4rem;
font-size: 14px;
color: #006A8E;
}
Expand Down
6 changes: 3 additions & 3 deletions src/ui/__tests__/__snapshots__/List.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ exports[`An icon on the right 1`] = `
.c6 {
color: #7B746F;
font-size: 1.4rem;
font-size: 14px;
line-height: 1.6rem;
}
Expand Down Expand Up @@ -219,7 +219,7 @@ exports[`Default style with icon on left 1`] = `
.c7 {
color: #7B746F;
font-size: 1.4rem;
font-size: 14px;
line-height: 1.6rem;
}
Expand Down Expand Up @@ -354,7 +354,7 @@ exports[`Icon on both left and right 1`] = `
.c7 {
color: #7B746F;
font-size: 1.4rem;
font-size: 14px;
line-height: 1.6rem;
}
Expand Down
Loading

0 comments on commit 73cef0f

Please sign in to comment.