Expanding pathway logic

codersagainstcovidorg · May 13, 2020 · f333ccc · f333ccc
1 parent 8be7714
commit f333ccc
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 45 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -14,7 +14,7 @@ import getViewportHeight from './utils/getViewportHeight';
 import { trackGuideStatus } from './utils/tracking';
 import GuideModal from './Components/GuideModal';
 import Map from './Components/Map/Map';
-import CheckSymptomsFlow from './Components/CheckSymptomsFlow';
+import PathwayFlow from './Components/PathwayFlow';
 import AppointmentFlow from './Components/AppointmentFlow';
 import ActionType from './Components/Types/ActionType';
 import LabelMapType from './Components/Types/LabelMapType';
@@ -74,7 +74,7 @@ const App = () => {
   const [selectedPlace, setSelectedPlace] = useState(null);
   const [guideModalOpen, setGuideModalOpen] = useState(false);
   const [globalMap, setGlobalMap] = useState<any>([]);
-  const [showCheckSymptomsFlow, setShowCheckSymptomsFlow] = useState(false);
+  const [showPathwayFlow, setShowPathwayFlow] = useState(false);
   const [showAppointmentFlow, setShowAppointmentFlow] = useState(false);
   const [showLocationModal, setShowLocationModal] = useState(true);
   const [filters, setFilters] = useState(defaultFilters);
@@ -156,7 +156,7 @@ const App = () => {
             }}
             handleNoResponse={() => {
               setFromAssistant(true);
-              setShowCheckSymptomsFlow(true);
+              setShowPathwayFlow(true);
               setGuideModalOpen(false);
             }}
             handleClose={() => {
@@ -183,18 +183,18 @@ const App = () => {
               onClose={() => {
                 setSelectedPlace(null);
               }}
-              showCheckSymptomsFlow={(shouldShowCheckSymptomsFlow: boolean) => {
-                if (shouldShowCheckSymptomsFlow) {
+              showPathwayFlow={(shouldShowPathwayFlow: boolean) => {
+                if (shouldShowPathwayFlow) {
                   setShowLocationModal(false);
-                  setShowCheckSymptomsFlow(shouldShowCheckSymptomsFlow);
+                  setShowPathwayFlow(shouldShowPathwayFlow);
                 }
               }}
               runAppointmentFlow={runAppointmentFlow}
               filterApplied={filterApplied}
             />
           )}
-          {showCheckSymptomsFlow && (
-            <CheckSymptomsFlow
+          {showPathwayFlow && (
+            <PathwayFlow
               fromAssistant={fromAssistant}
               location={selectedPlace}
               setFilter={(
@@ -220,7 +220,7 @@ const App = () => {
               setFlowFinished={() => {
                 setShowLocationModal(true);
                 setSelectedPlace(null);
-                setShowCheckSymptomsFlow(false);
+                setShowPathwayFlow(false);
               }}
             />
           )}

diff --git a/src/Components/GuideModal.tsx b/src/Components/GuideModal.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { Card, createStyles, Modal } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import { labelMap } from '../App';
-import DoctorCard from './DoctorCard';
+import PathwayCard from './PathwayCard';
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -82,7 +82,7 @@ const GuideModal = ({
       }}
     >
       <Card className={classes.card}>
-        <DoctorCard onResponseClick={closeModal} />
+        <PathwayCard onResponseClick={closeModal} />
       </Card>
     </Modal>
   );

diff --git a/src/Components/LocationModal/LocationModal.tsx b/src/Components/LocationModal/LocationModal.tsx
@@ -125,7 +125,7 @@ const useStyles = makeStyles((theme: Theme) =>
 interface LocationModalProps {
   location: any;
   onClose: Function;
-  showCheckSymptomsFlow: Function;
+  showPathwayFlow: Function;
   runAppointmentFlow: Function;
   filterApplied: boolean;
 };
@@ -145,7 +145,7 @@ interface ChipData {
 const LocationModal = ({
   location,
   onClose,
-  showCheckSymptomsFlow,
+  showPathwayFlow,
   filterApplied,
   runAppointmentFlow,
 }: LocationModalProps) => {
@@ -271,9 +271,10 @@ const LocationModal = ({
     });
   }
 
-  function handleCheckSymptomsClicked() {
-    showCheckSymptomsFlow(true);
+  function handlePathwayClicked() {
+    showPathwayFlow(true);
   }
+
   function loadNextStepButton(locationToRender: any): any {
     let ctaText = '';
     let ctaLink = '';
@@ -485,7 +486,7 @@ const LocationModal = ({
               color="primary"
               className={classes.callToAction}
               onClick={() => {
-                handleCheckSymptomsClicked();
+                handlePathwayClicked();
                 handleLinkClicked(location.location_id, 'Website Click');
               }}
               style={{ marginTop: '20px', marginBottom: '5px' }}

diff --git a/src/Components/Map/MapPins.tsx b/src/Components/Map/MapPins.tsx
@@ -8,7 +8,7 @@ interface GoogleMapPinsProps {
   onClickPin: Function;
 }
 
-interface MarkerIconProps {
+export interface MarkerIconProps {
   path: string;
   fillColor: string;
   fillOpacity?: number;
@@ -17,7 +17,7 @@ interface MarkerIconProps {
   strokeWeight?: number | null;
 }
 
-const statusToColor = [
+export const statusToColor = [
   {key: "Closed", value: { color: "#4f5d75", opacity: 0.5, scale: 0.8, path: 'M16.37,16.1L11.75,11.47L11.64,11.36L3.27,3L2,4.27L5.18,7.45C5.06,7.95 5,8.46 5,9C5,14.25 12,22 12,22C12,22 13.67,20.15 15.37,17.65L18.73,21L16,15.72M12,6.5A2.5,2.5 0 0,1 14.5,9C14.5,9.73 14.17,10.39 13.67,10.85L17.3,14.5C18.28,12.62 19,10.68 19,9A7,7 0 0,0 12,2C10,2 8.24,2.82 6.96,4.14L10.15,7.33C10.61,6.82 11.26,6.5 12,6.5Z' }},
   {key: "Impacted", value: { color: "#540d6e", opacity: 0.4, scale: 1.0, path: 'M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z' }},
   {key: "Open", value: { color: "#540d6e", opacity: 0.8, scale: 1.0, path: 'M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z' }},

diff --git a/src/Components/DoctorCard.tsx → src/Components/PathwayCard.tsx b/src/Components/DoctorCard.tsx → src/Components/PathwayCard.tsx
@@ -12,12 +12,14 @@ import {
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import AssistantIcon from '@material-ui/icons/Assistant';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-  faCircle,
-  faTasks,
-} from '@fortawesome/free-solid-svg-icons';
+import { Icon, Stack } from '@mdi/react';
+import { 
+  mdiCircle,
+  mdiFormatListChecks,
+  mdiDoctor,
+} from '@mdi/js';
 import { labelMap } from '../App';
+// import { statusToColor, MarkerIconProps } from '../Components/Map/MapPins';
 import { trackUiClick } from '../utils/tracking';
 
 const useStyles = makeStyles(() =>
@@ -53,11 +55,11 @@ const useStyles = makeStyles(() =>
   })
 );
 
-interface DoctorStepProps {
+interface PathwayStepProps {
   onResponseClick: Function;
 }
 
-const DoctorCard = ({ onResponseClick }: DoctorStepProps) => {
+const PathwayCard = ({ onResponseClick }: PathwayStepProps) => {
   const classes = useStyles();
   const details: any = [];
   Object.keys(labelMap).forEach((key: string) => {
@@ -70,7 +72,7 @@ const DoctorCard = ({ onResponseClick }: DoctorStepProps) => {
   });
 
   const handleResponseClick = (value: boolean) => {
-    trackUiClick('DoctorCard', value ? 'yes' : 'no');
+    trackUiClick('Pathway', value ? 'yes' : 'no');
     onResponseClick(value);
   };
 
@@ -94,30 +96,59 @@ const DoctorCard = ({ onResponseClick }: DoctorStepProps) => {
           Step-by-step guide
         </Typography>
         <Typography style={{ fontStyle: 'italic', color: 'gray' }}>
-          Select the option to begin:
+          Select from the following options:
         </Typography>
         <List component="nav">
-          <ListItem
-            button
-            onClick={() => {
+          <ListItem button onClick={() => {
               handleResponseClick(false);
-            }}
-          >
+            }}>
             <ListItemIcon>
-              <span className="fa-layers fa-fw fa-2x" style={{ width: '100%' }}>
-                <FontAwesomeIcon icon={faCircle} color="lightgray" />
-                <FontAwesomeIcon
-                  icon={faTasks}
-                  transform="shrink-7"
-                  color="white"
-                />
+              <span style={{ width: '100%' }}>
+                <Stack>
+                  <Icon path={mdiCircle}
+                    size={0.8}
+                    rotate={0}
+                    color="#540d6e"
+                    />
+                  <Icon path={mdiFormatListChecks}
+                    title="May have symptoms"
+                    size={0.55}
+                    rotate={0}
+                    color="#fff"
+                    />
+                </Stack>
               </span>
             </ListItemIcon>
             <ListItemText
               primary="I may have symptoms, but I'm unsure"
               secondary="Check your symptoms using the CDC's online self-assessment tool"
             />
           </ListItem>
+          <ListItem button onClick={() => {
+              handleResponseClick(false);
+            }}>
+            <ListItemIcon>
+              <span style={{ width: '100%' }}>
+                <Stack>
+                  <Icon path={mdiCircle}
+                    size={0.8}
+                    rotate={0}
+                    color={ "#fa7921" }
+                    />
+                  <Icon path={mdiDoctor}
+                    title="High priority"
+                    size={0.55}
+                    rotate={0}
+                    color="#fff"
+                    />
+                </Stack>
+              </span>
+            </ListItemIcon>
+            <ListItemText
+              primary="I work in healthcare"
+              secondary="For symptomatic healthcare workers/first responders only"
+            />
+          </ListItem>
           {/* <ListItem button>
             <ListItemIcon>
               <span className="fa-layers fa-fw fa-2x" style={{ width: '100%' }}>
@@ -133,7 +164,8 @@ const DoctorCard = ({ onResponseClick }: DoctorStepProps) => {
               primary="I meet CDC criteria for high-risk individuals"
               secondary="Find testing locations serving healthcare providers, first responders and essential workers"
             />
-          </ListItem>
+          </ListItem> */}
+          {/* 
           <ListItem button>
             <ListItemIcon>
               <span className="fa-layers fa-fw fa-2x" style={{ width: '100%' }}>
@@ -156,4 +188,4 @@ const DoctorCard = ({ onResponseClick }: DoctorStepProps) => {
   );
 };
 
-export default DoctorCard;
+export default PathwayCard;
diff --git a/src/Components/CheckSymptomsFlow.tsx → src/Components/PathwayFlow.tsx b/src/Components/CheckSymptomsFlow.tsx → src/Components/PathwayFlow.tsx
@@ -9,7 +9,7 @@ interface SymptomsFlowProps {
   fromAssistant: boolean;
 }
 
-function CheckSymptomsFlow({
+function PathwayFlow({
   location,
   setFilter,
   setFlowFinished,
@@ -88,12 +88,14 @@ function CheckSymptomsFlow({
     }
     setShowSelfAssessmentCompletedAlert(true);
   }
+
   function navigateAdditionalAgreed() {
     setShowAdditionalAssessmentCheck(false);
     window.open('https://www.apple.com/covid19/');
     setAppleVisited(true);
     setShowSelfAssessmentCompletedAlert(true);
   }
+
   function navigateAdditionalRefused() {
     setShowAdditionalAssessmentCheck(false);
     setShowAdditionalRefusedInfo(true);
@@ -179,4 +181,4 @@ function CheckSymptomsFlow({
   );
 }
 
-export default CheckSymptomsFlow;
+export default PathwayFlow;
diff --git a/src/Components/Types/SearchFilterType.tsx b/src/Components/Types/SearchFilterType.tsx
@@ -1,4 +1,20 @@
-type SearchFilterType = {
+export interface RawDataType {
+  is_flagged?: boolean;
+  is_temporary?: boolean;
+  is_drive_through?: boolean;
+  is_same_day_result?: boolean;
+  is_scheduled_to_open?: boolean;
+  is_scheduled_to_close?: boolean;
+  does_offer_antibody_test?: boolean;
+  days_remaining_until_open?: number;
+  does_offer_molecular_test?: boolean;
+  days_remaining_until_close?: number;
+  period_start?: string;
+  period_end?: string;
+};
+
+
+export type SearchFilterType = {
   location_id?: string;
   location_name?: string;
   location_address_street?: string;
@@ -32,7 +48,7 @@ type SearchFilterType = {
   additional_information_for_patients?: string;
   reference_publisher_of_criteria?: string;
   data_source?: string;
-  raw_data?: string;
+  raw_data?: RawDataType;
   created_on?: string;
   updated_on?: string;
   location_status?: string;