v2.5-staging (#272)

* Feature/photo adherence data (#249)

* Fix reporting streak calculation

* Inital implementation of multi-step linear progress for photo adhernce

* Integrate data and add labels

* Fix spacing at top of patient profile, make each section even width

* Fix layout of adhernce section on patient profile

* Add translations and move details to expansion panel

* Finally found a fix for corner rounding on cohort page

* Sort symptom summmary by number of occurances for beter visual, default to all time

* Move profile options into own card

* Limit size of adherence and symptom summaries flex growth

* Group buttons within PatientInfo component

* Add bottom border to details for better readability

* Restyle adherence details

* i18n for new adhernece vis

Co-authored-by: Kyle Goodwin <kylegoodwin@users.noreply.github.com>

* Compute function for average adherence working

* Add photo adhernce to cohort table

* Fix flex growth on patient info card

* Simple site summary added at the top of asistant home

* Fix spacing on tasks page, reorganize sidebar layout

* Add seperate colored section for site summary

* Remove shadow from practitioner nav

* Fix UX when list of patients is loading

* Fix sizing of site summary cards

* Feature/archive patient (#265)

* Refactor profile dialogs

* Fixed add patient flow that was broken in layout changes

* Base for archive survey added

* Add warning to top of archived patient's profile

* Add spacing to sidebar submission visualization

* Hook up data to diarchive dialog

* Reload profile after successful archive action

* Added list of archived patients to cohort view page

* Fix positioning of warning about archive

* Factor out treatment outcome component for usee in updating treatment outcomes

* Experimental move profile buttons into horizontal format

* Combined card layout to solve button issue on patient profile

* Add title card to patient profile

* Fix bugs on tasks page when information is not loading, limit calendar to treatment_start

* Add archived popup as additional warning on patient profile

* Fix pending patients card on cohort view

* Added click to copy component to activation code popup

* Better copy text component

* Refactor archived component into its own file

* Added method for editing treatment outcome

* Hide completed patients by default

* Translations for hiding / showing patient groups

* Sync with transifex and update site summary title for accuracy

* Add link to survey to test out integration

Co-authored-by: Kyle Goodwin <kylegoodwin@users.noreply.github.com>

* Add development env link to test survey

* Feature/patient side completion (#269)

* Add confetti and link to treatment survey

* Added graphic to the end of treatment screen

* Cleanup treatment end screens

* Update env generation script to use redcap survey environment variable

* Dont allow archived patients to submit back reports

* Limit calendar expectations to final app day when patient is archived

* Finish up env variable for survey link

Co-authored-by: Kyle Goodwin <kylegoodwin@users.noreply.github.com>

* Fix/assistant messaging name display (#271)

* Simplify system for showing names in messaging

* Preliminary lazy loading messages working

* Lazy loading improvements

* Improvements for lazy loading messages

* Add translations and improve styling of load more messages button

* Add loading spinner for loading new messages, clean up use of refs and code organization for channel render

* Checkin before having to restart dev machine. Refactored channel initalization logic into main messaging folder

* Rename getSelectedChannel -> getInitalMessages

* Fix method for fetchign current channel messages, atempt refactor of messaging channel but give up

* Fix logic for displaying loading when inital messages are loading

* Fix state of load more & end of messages components

* Hide load more until intial messages are loaded

* Sort channels by last message time

* Move to right tab based on inital channel selection

* Renmove end of chat duplicated message

* Improve design of loading screen for channel

* Add v2.5 changes to changelog:

Co-authored-by: Kyle Goodwin <kylegoodwin@users.noreply.github.com>

* Quick fix site messaging channel showing up in private list

Co-authored-by: Kyle Goodwin <kylegoodwin@users.noreply.github.com>

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:10.16 as build-deps
+FROM node:14.17 as build-deps
 ARG build_sha
 ARG github_version
 WORKDIR /usr/src/app

bin/generate-env.sh

@@ -6,6 +6,7 @@ URL_CLIENT:"$URL_CLIENT",
 DEFAULT_LOCALE:"$DEFAULT_LOCALE",
 DOCKER_TAG: "$DOCKER_TAG",
 MATOMO_ID: "${MATOMO_ID:-not_set}",
-MATOMO_URL: "${MATOMO_URL:-not_set}"
+MATOMO_URL: "${MATOMO_URL:-not_set}",
+REDCAP_EOT_SURVEY_LINK: "${REDCAP_EOT_SURVEY_LINK:- }"
 };
 EOF

package.json

@@ -35,6 +35,7 @@
     "react-calendar": "^3.0.0",
     "react-circular-progressbar": "^2.0.3",
     "react-code-input": "^3.9.0",
+    "react-confetti": "^6.0.1",
     "react-div-100vh": "^0.5.2",
     "react-dom": "^16.11.0",
     "react-i18next": "^11.2.5",

public/config.js

@@ -1,4 +1,5 @@
 //Environment variables for development, when not using docker
 //These will be overriden when a build artifact is created (see Dockerfile)
 console.log("Using Development Environment Variables. If needed configure /public/config.js")
-const react_env = {URL_API: "http://localhost:5062",URL_CLIENT:"http://localhost:3000", DEFAULT_LOCALE: "es-AR", ENVIRONMENT: "development", DOCKER_TAG: "develop"}
+const react_env = {URL_API: "http://localhost:5062",URL_CLIENT:"http://localhost:3000", DEFAULT_LOCALE: "es-AR", 
+ENVIRONMENT: "development", DOCKER_TAG: "develop", REDCAP_EOT_SURVEY_LINK: "https://google.com"}

src/Basics/DatePicker.js

@@ -4,15 +4,13 @@ import { observer } from 'mobx-react'
 import { DatePicker } from "@material-ui/pickers";
 import { MuiPickersUtilsProvider } from '@material-ui/pickers';
 import DateFnsUtils from '@date-io/luxon';
-import { useTranslation } from 'react-i18next';
 import Cancel from '@material-ui/icons/Cancel'
 import Check from '@material-ui/icons/CheckCircleOutline'
 import Colors from './Colors';
 
 const LocalizedDatePicker = observer((props) => {
 
     const { uiStore } = useStores();
-    const { t, i18n } = useTranslation('translation');
 
     return (
         <MuiPickersUtilsProvider locale={uiStore.locale} utils={DateFnsUtils}>

src/Basics/ReportCalendar.js

@@ -3,11 +3,9 @@ import { makeStyles } from '@material-ui/core/styles';
 import Calendar from 'react-calendar';
 import { DateTime } from 'luxon';
 import Styles from './Styles';
-import useStores from './UseStores';
 import Colors from './Colors';
 import ChevronLeft from '@material-ui/icons/ChevronLeft';
 import ChevronRight from '@material-ui/icons/ChevronRight';
-import { observer } from 'mobx-react'
 
 const CustomCalendar = (props) => {
 

src/Basics/Styles.js

@@ -67,16 +67,13 @@ let Styles = {
         color: Colors.textDarkGray
     },
     profileCard: {
+        backgroundColor: "white",
         boxShadow: "0px 4px 16px rgba(0, 0, 0, 0.1)",
-        borderRadius: "4px",
-        "& > h2": {
-            ...patientPageTitle
-        }
+        borderRadius: "4px"
     },
     patientPageTitle:{
         ...patientPageTitle
     }
-
 }
 
 Styles.alignRight = {

src/Components/AdherenceValue.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import Typography from '@material-ui/core/Typography'
+import Colors from '../Basics/Colors'
+import Grid from '@material-ui/core/Grid'
+
+const useStyles = makeStyles({
+    adherence: {
+        fontWeight: "bold",
+        fontSize: "1.75em",
+        lineHeight: "1em",
+        marginLeft: "auto",
+    },
+    title: {
+        fontSize: "1em",
+        color: Colors.textDarkGray,
+        fontWeight: "bold",
+        padding: 0,
+        margin: 0
+    }
+})
+
+const AdherenceValue = ({ adherence, title, style }) => {
+
+    const classes = useStyles();
+    const value = Math.floor(adherence * 100);
+
+    if(!title) return <Typography style={style} variant="h2" className={classes.adherence}>{value}%</Typography>
+
+    return (<Grid container alignItems="flex-start">
+        <Typography className={classes.title} variant="h2">{title}</Typography>
+        <Typography variant="h2" className={classes.adherence}>{value}%</Typography>
+    </Grid>)
+}
+
+export default AdherenceValue;

src/Components/LightCard.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import Styles from '../Basics/Styles'
+
+const useStyles = makeStyles({
+  lightCard:{
+    ...Styles.profileCard
+  }
+})
+
+const LightCard = (props) => {
+  const {children, className} = props;
+    const classes = useStyles();
+
+    return(<div {...props} className={`${classes.lightCard} ${className}`}>
+        {children}
+    </div>)
+
+}
+
+export default LightCard;

src/Components/Practitioner/SectionTitle.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Styles from '../../Basics/Styles';
+
+
+
+const useStyles = makeStyles({
+    sectionTitle:{
+        ...Styles.header
+    }
+})
+
+const SectionTitle = ({children}) => {
+
+    const classes = useStyles();
+
+    return(<Typography className={classes.sectionTitle} variant="h1">{children}</Typography>)
+
+}
+
+export default SectionTitle;

src/Components/SectionLabel.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography'
+import Styles from '../Basics/Styles';
+
+const useStyles = makeStyles({
+  sectionLabel:{
+      ...Styles.patientPageTitle
+  }
+})
+
+const SectionLabel = (props) => {
+
+    const classes = useStyles();
+
+    return(<Typography className={`${classes.sectionLabel} ${props.className}`} variant="h2" color="initial">{props.children}</Typography>)
+
+}
+
+export default SectionLabel;

src/Components/SimpleExpansionPanel.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react'
+import { makeStyles, Typography } from '@material-ui/core'
+import Down from '@material-ui/icons/KeyboardArrowDown'
+import Up from '@material-ui/icons/KeyboardArrowUp'
+import Grow from '@material-ui/core/Collapse'
+import ButtonBase from '@material-ui/core/ButtonBase'
+
+const useStyles = makeStyles({
+    container: {
+        width: "100%"
+    },
+    preview: {
+        boxSizing: "border-box",
+        fontSize: "1em",
+        display: "flex",
+        "& > span": {
+            margin: "0 auto 0 .5em",
+        },
+        "& > svg": {
+
+        }
+    },
+    grow: {
+        width: "100%"
+    },
+    override: {
+        padding: "5px"
+    }
+})
+
+const ExpansionPanel = (props) => {
+    const classes = useStyles();
+    const [show, setShow] = useState(false)
+
+    const handleClick = () => {
+        setShow(!show);
+
+        if(props.toggleFunction){
+            props.toggleFunction();
+        }
+    }
+
+    return (
+        <div className={classes.container}>
+            <ButtonBase disableRipple onClick={handleClick} className={`${classes.preview} ${props.previewClassName}`}>
+                {props.icon}
+                <Typography variant="body1">{show ? props.previewOpenText : props.previewClosedText}</Typography>
+                {show ? <Up /> : <Down />}
+                </ButtonBase>
+            <Grow in={show} className={classes.grow}>
+                {props.children}
+            </Grow>
+        </div>
+    )
+}
+
+export default ExpansionPanel;

src/Components/StackedLinearProgress.js

@@ -0,0 +1,86 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles';
+import Colors from '../Basics/Colors';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import ExpansionPanel from '../Components/SimpleExpansionPanel'
+import { useTranslation } from 'react-i18next';
+
+const useStyles = makeStyles({
+    container: {
+        margin: "1em auto"
+    },
+    barContainer: {
+        height: "15px",
+        borderRadius: "5px",
+        overflow: "hidden",
+        width: "100%",
+        backgroundColor: Colors.warningRed,
+        display: "flex"
+    },
+
+    colorLabel: {
+        backgroundColor: props => props.color,
+        height: "1em", width: "1em",
+        borderRadius: "2px",
+        marginRight: ".5em"
+    },
+    expansionPanel:{
+        width: "100%",
+        justifyContent: "flex-end",
+        color: Colors.textDarkGray,
+        padding: '.5em 0',
+    },
+    data: {
+        marginLeft: "auto"
+    },
+    label:{
+        width: "100%",
+        borderBottom: `dashed 1px ${Colors.lightgray}`
+    }
+
+})
+
+
+const StackedLinearProgress = ({ partValue, totalValue, detailContent,additionalDetails }) => {
+
+    const classes = useStyles();
+    const { t } = useTranslation('translation');
+
+
+    return (
+        <div className={classes.container}>
+            <div className={classes.barContainer}>
+                {partValue > 0 && <div style={{ backgroundColor: Colors.approvedGreen, width: `${partValue}%` }} />}
+                <div style={{ backgroundColor: Colors.yellow, width: `${totalValue - partValue}%` }} />
+            </div>
+            <ExpansionPanel 
+            previewClassName={classes.expansionPanel} 
+            previewClosedText={t('commonWords.viewDetails')}
+            previewOpenText={t('commonWords.hideDetails')}
+            >
+                <Details content={detailContent} additionalDetails={additionalDetails} />
+            </ExpansionPanel>
+        </div>
+    )
+
+}
+
+const Details = ({ content = {}, additionalDetails }) => {
+    return (<Grid alignItems="flex-end">
+        {additionalDetails}
+        <Label color={Colors.green} {...content.green} />
+        <Label color={Colors.yellow} {...content.yellow} />
+        <Label color={Colors.red} {...content.red} />
+    </Grid>)
+}
+
+const Label = ({color, label, data}) => {
+    const classes = useStyles({ color: color })
+    return (
+        <Grid container className={classes.label} alignItems="center"><div className={classes.colorLabel} /> <Typography>{label}</Typography> <Typography className={classes.data}>{data}</Typography></Grid>
+    )
+}
+
+
+export default StackedLinearProgress;

src/Content/changelog/en.md

@@ -1,3 +1,43 @@
+## v2.5
+
+Planning release for June 24th
+
+Assistant View:
+- Assistants can now archive patients
+	- A treatment outcome and end date can be selected during this process
+	- They will no longer show up in the list of tasks
+	- Added list of archived patients on the patients tab, and you can access their profiles from here
+	- Once archived patients can still access the app + messaging, but can no longer report
+	- Archived patients adherence will not be calculated on a rolling basis, will instead be calculated based on the number of days they used the app
+- Redesign top part of the patient profile to have more options and details
+	- More details about adherence and 
+- Summary of adherence at your site is now available at the top of the tasks list
+- Patients names will now be listed in site level chats ( only visible to assistants )
+
+Patient View:
+- Congrats message when treatment is completed + link to survey
+- Limit reporting after they have been marked as archived
+
+Adherence / Priority Calculations:
+- Add photo adherence number ( positive photos / photos submitted / requested )
+- Calculate adherence from date patient started using the app ( some assistants were putting in a different value for "treatment start date"
+- Missing a photo makes a patient high priority
+
+Other Small Changes:
+- Redesigned sidebar of tasks page to be more consistent with rest of app
+- Moved patients awaiting activation list to top of cohort page
+- Removed site summary from side of cohort view because it was confusing 
+- Limited number of messages loaded at a time to speed up load times for messaging
+- Improved loading UI for messages
+- Added button to copy temporary code for patient activation 
+
+## v2.4.2
+
+API Changes Only:
+
+- Fixed bug where clicking on assistant chat would take you to site group chat
+- Allow hiding messages in site group chat
+
 ## v2.4.1
 
 Changes:
@@ -12,7 +52,7 @@ Bug Fixes:
 
 New Features / Changes
 - Adjust photo request schedules due to logistical issues
-- Tracking push notification delivery and clicks via serviceworker middleware
+- Tracking push notification delivery and clicks via service-worker middleware
 - Reminders to complete a test on a day when it has been requested
     - If not completed, a second reminder will be sent
 - Reminders for patients that have stopped reporting for more than 3 days