feature/support-reminder-message (#351)

* Remove box shadow on task list * Add confirmatino of issue recieved on reporting layout * Add interval date check back to sdaily report area * Sync state of issues to display of message Co-authored-by: Kyle Goodwin <kylegoodwin@users.noreply.github.com>
uwcirg · Dec 24, 2021 · 03dda3a · 03dda3a
1 parent 37f0f5a
commit 03dda3a
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 22 deletions.
diff --git a/src/Components/Patient/ConfirmationLayout.js b/src/Components/Patient/ConfirmationLayout.js
@@ -1,7 +1,5 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import useStores from '../../Basics/UseStores';
-import { observer } from 'mobx-react';
 import Styles from '../../Basics/Styles';
 import { ReactComponent as DoctorIcon } from '../../Basics/Icons/doctor.svg';
 import CheckIcon from '@material-ui/icons/Check';
@@ -33,7 +31,7 @@ const useStyles = makeStyles({
     },
 })
 
-const CompName = ({title,subtitle}) => {
+const ConfirmationLayout = ({title,subtitle}) => {
 
     const classes = useStyles();
 
@@ -47,4 +45,4 @@ const CompName = ({title,subtitle}) => {
 
 }
 
-export default CompName;
+export default ConfirmationLayout;
diff --git a/src/DataStores/patientStore.js b/src/DataStores/patientStore.js
@@ -503,5 +503,9 @@ export class PatientStore extends UserStore {
         this.savedReports[`${report.date}`] = report;
     }
 
+    @computed get todaysReportHasIssue(){
+        return(this.report.selectedSymptoms.length > 0 || !this.report.tookMedication || !this.report.doingOkay)
+    }
+
 
 }
diff --git a/src/Language/Locales/en/translation.json b/src/Language/Locales/en/translation.json
@@ -278,6 +278,7 @@
             "completed": {
                 "title": "Complete",
                 "subtitle": "Todays Report Has Been Submitted",
+                "issue": "We have recieved your issue and your assistant will be in touch soon",
                 "modify": "Modify Your Report"
             },
             "cardTitles": {

diff --git a/src/Language/Locales/es-AR/translation.json b/src/Language/Locales/es-AR/translation.json
@@ -277,7 +277,7 @@
             },
             "completed": {
                 "title": "Completo",
-                "subtitle": "Su Reporte de Hoy Fue Enviado",
+                "subtitle": "Su reporte de hoy fue enviado",
                 "modify": "Editar su Reporte"
             },
             "cardTitles": {

diff --git a/src/Patient/Home/OneStepActions/index.js b/src/Patient/Home/OneStepActions/index.js
@@ -27,7 +27,7 @@ const ButtonLabel = ({ text, icon }) => {
     </Grid>
 }
 
-const OneStepActions = observer(({setCompletedNow}) => {
+const OneStepActions = observer(({ setCompletedNow }) => {
 
     const { patientStore, patientUIStore } = useStores();
     const classes = useStyles();
@@ -76,22 +76,32 @@ const OneStepActions = observer(({setCompletedNow}) => {
 const ActionBox = observer(() => {
     const { patientStore } = useStores();
     const { t } = useTranslation('translation');
+
     const [completedNow, setCompletedNow] = useState(false);
+    const [counter, changeCounter] = useState(0);
 
     const isVisible = usePageVisibility();
     const classes = useStyles();
 
+    useEffect(() => {
+        const interval = setInterval(() => {
+            changeCounter(prevCounter => prevCounter + 1);
+            patientStore.loadDailyReport();
+        }, 6000);
+
+        return () => clearInterval(interval);
+    }, []);
+
     useEffect(() => {
         if (isVisible) {
             patientStore.loadDailyReport(); //Ensure that we check if the date has changed
         }
-
     }, [isVisible])
 
     return (
         <InteractionCard id="intro-tasks" className={classes.card} upperText={<><CheckBox />{t('patient.home.cardTitles.todaysTasks')}</>}>
             <Box width="100%" padding="1em" style={{ boxSizing: "border-box" }}>
-                {!patientStore.reportStore.allReportComplete ? <div>
+                {(counter >=0 && !patientStore.reportStore.allReportComplete) ? <div>
                     {(patientStore.isPhotoDay && !patientStore.reportStore.photoReportComplete) && <PhotoRequestArea />}
                     <OneStepActions setCompletedNow={setCompletedNow} />
                     {patientStore.reportStore.photoReportComplete && <PartialConfirmation isPhoto />}
@@ -116,13 +126,21 @@ const ActionBox = observer(() => {
     )
 });
 
-const Confirmation = () => {
+const Confirmation = observer(() => {
+
     const classes = useStyles();
     const { t } = useTranslation('translation');
+    const {patientStore} = useStores();
 
     return (
         <div className={classes.confirmationSuperContainer}>
             <ConfirmationLayout title={t("patient.home.completed.title")} subtitle={t("patient.home.completed.subtitle")} />
+            {patientStore.todaysReportHasIssue && <p style={{
+                    textAlign: "center",
+                    backgroundColor: `${Colors.highlightYellow}`,
+                    borderRadius: "5px",
+                    padding: ".5em"
+                }}>{t('patient.home.completed.issue')}</p>}
             <ExpansionPanel
                 previewClassName={classes.reportPreview}
                 preview={t("patient.reportConfirmation.viewOrEdit")}
@@ -131,6 +149,6 @@ const Confirmation = () => {
             </ExpansionPanel>
         </div>
     )
-}
+})
 
 export default ActionBox;
diff --git a/src/Practitioner/Home/index.js b/src/Practitioner/Home/index.js
@@ -1,21 +1,21 @@
 import React, { useEffect } from 'react'
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles'
 import useStores from '../../Basics/UseStores'
 import { observer } from 'mobx-react'
 import HomePageCard from '../Shared/HomePageCard'
-import AlertIcon from '@material-ui/icons/Error';
-import ListIcon from '@material-ui/icons/PlaylistAddCheck';
+import AlertIcon from '@material-ui/icons/Error'
+import ListIcon from '@material-ui/icons/PlaylistAddCheck'
 import PillIcon from '../../Basics/Icons/Pill.js'
 import PhotoSidebar from './PhotoSideBar'
 import SymptomSidebar from './SymptomSideBar'
 import MedicationSideBar from './MedicationSideBar'
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next'
 import TaskSideBar from './TaskSidebar'
-import SupportSidebar from './SupportSidebar';
+import SupportSidebar from './SupportSidebar'
 import useResize from '../../Hooks/Resize'
 import MissedPhotoSideBar from './MissedPhotoSideBar'
 import CohortSummary from './CohortSummary'
-import SectionTitle from '../../Components/Practitioner/SectionTitle';
+import SectionTitle from '../../Components/Practitioner/SectionTitle'
 
 const useStyles = makeStyles({
     left: {
@@ -30,7 +30,6 @@ const useStyles = makeStyles({
         display: "flex",
         flexDirection: "column",
         overflowX: "hidden",
-
     },
     container: {
         width: "100%",
@@ -55,9 +54,8 @@ const useStyles = makeStyles({
         "& > div": {
             marginTop: "1.5em",
             "&:last-of-type": { marginBottom: "2em" }
-        },
+        }
     }
-
 })
 
 const Home = observer(() => {

diff --git a/src/Practitioner/Shared/Card.js b/src/Practitioner/Shared/Card.js
@@ -12,7 +12,7 @@ const useStyles = makeStyles({
         borderRadius: "1em",
         backgroundColor: "white",
         width: "90%",
-        boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.25);"
+        border: `solid 1px ${Colors.lightgray}`
     },
     header: {
         display: "flex",
@@ -55,9 +55,9 @@ const Card = (props) => {
             {props.icon}
             <h2>{props.title}</h2>
             {visible && props.headerChildren}
-            <Button className={classes.collapse} onClick={toggleVisibility}>{!visible ? <>{t('patient.home.progress.viewAll')}<DownIcon /></>
+            <Button className={classes.collapse} onClick={toggleVisibility}>{!visible ? <DownIcon />
                 :
-                <>{t('patient.home.progress.close')} <UpIcon /></>
+                <><UpIcon /></>
             }</Button>
         </div>
         <div className={props.bodyClassName}>