\n
\n );\n }\n}\n\nBreadCrumb.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n levels: PropTypes.array,\n progress: PropTypes.number,\n className: PropTypes.string,\n task: PropTypes.object,\n openSideMenu: PropTypes.func,\n isActiveProgram: PropTypes.bool,\n};\n\nBreadCrumb.defaultProps = {\n levels: null,\n progress: null,\n className: null,\n task: null,\n openSideMenu: null,\n isActiveProgram: false,\n};\n\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n clientConfig: state.auth.clientConfig,\n isActiveProgram: state.programStore.currentProgram?.isActiveProgram,\n});\n\nexport default connect(mapStateToProps)(withStyles(styles)(BreadCrumb));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { Checkbox as CheckboxControl, FormControlLabel } from '@material-ui/core';\n\n\nconst styles = theme => ({\n\n checkbox: {\n margin: 0,\n marginTop: theme.spacing(1),\n },\n checkboxInput: {\n width: 'auto',\n marginRight: theme.spacing(1),\n },\n});\n\nclass Checkbox extends React.Component {\n render() {\n const {\n classes, checked, onChange, label,\n } = this.props;\n\n return (\n \n {levels && levels.map((l, i) => (\n // eslint-disable-next-line react/no-array-index-key\n
\n\n\n \n \n \n {l.text}\n \n \n\n {i < (levels.length - 1) && (\n /\n )}\n
\n ))}\n {!showProgress && (\n <>\n \n \n {this.renderActions()}\n
\n \n )}\n \n {showProgress && (\n <>\n \n {translate('common.progressCompleted', { progress: Math.round(progress * 100) })}\n \n
\n \n {this.renderActions()}\n
\n \n )}\n \n \n
\n );\n};\n\nLine.propTypes = {\n from: PropTypes.string.isRequired,\n to: PropTypes.string.isRequired,\n classes: PropTypes.object.isRequired,\n};\n\nconst ContentCommenting = ({\n classes, className, translate, task, commentElementId, saveTaskComment, clearCommentElement, getTaskComments, comments,\n}) => {\n const send = ({ formValues }) => {\n saveTaskComment({\n taskId: task.id, elementId: commentElementId, comment: formValues.comment, name: formValues.name,\n }, {\n // callback: () => setValues({ name: formValues.name }),\n });\n };\n\n const {\n formValues,\n validationErrors,\n handleChange,\n handleSubmit,\n } = useForm(send, {\n name: validateRequired,\n comment: validateRequired,\n }, {});\n\n useEffect(\n () => getTaskComments(task.id, { reducerParams: { taskId: task.id } }),\n [getTaskComments, task.id],\n );\n\n const elementTitles = task.contentElements?.reduce((prev, curr) => (\n curr ? { ...prev, [curr.id]: getElementTitle(curr) } : prev\n ), {});\n\n return (\n \n \n {translate('taskCommenting.description')}\n \n\n \n\n {comments?.map(c => (\n
\n );\n};\n\nContentCommenting.propTypes = {\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n translate: PropTypes.func.isRequired,\n task: PropTypes.object.isRequired,\n comments: PropTypes.array,\n saveTaskComment: PropTypes.func.isRequired,\n getTaskComments: PropTypes.func.isRequired,\n clearCommentElement: PropTypes.func.isRequired,\n commentElementId: PropTypes.number,\n};\n\nContentCommenting.defaultProps = {\n className: null,\n commentElementId: null,\n comments: null,\n};\n\nconst mapStateToProps = (state, ownProps) => ({\n translate: getTranslate(state.localize),\n comments: state.previewStore.comments[ownProps.task.id],\n commentElementId: state.previewStore.commentElementId,\n});\n\nconst mapDispatchToProps = dispatch => ({\n ...bindActionCreators(PreviewStore.actionCreators, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ContentCommenting));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { isBrowser } from '../../youwell-common/browserUtils';\nimport { datestamp, getAge } from '../../youwell-common/dateUtils';\n\nconst valueFromCommonVariables = (key, patientData, patientProgram) => {\n switch (key) {\n case 'patient_name': return patientData?.name;\n case 'patient_age': return getAge(patientData?.birthDate);\n case 'program_name': return patientProgram?.program?.name;\n case 'program_start': return datestamp(patientProgram?.startDate);\n default: return null;\n }\n}\n\nclass ContentVariableLoader extends React.Component {\n componentDidMount() {\n if (isBrowser) {\n // eslint-disable-next-line no-underscore-dangle\n window.__getYouwellVariable = this.getYouwellVariable;\n }\n }\n\n componentWillUnmount() {\n if (isBrowser) {\n // eslint-disable-next-line no-underscore-dangle\n window.__getYouwellVariable = null;\n }\n }\n\n getYouwellVariable = (variableName) => {\n const { currentProgram, patientData, showVariableNameIfNull, customVariables } = this.props;\n\n let value = customVariables?.[variableName];\n\n if (!value) {\n value = valueFromCommonVariables(variableName, patientData, currentProgram);\n }\n\n if (!value) {\n value = currentProgram?.settings?.keyValues?.[variableName];\n }\n\n if (!value) {\n value = showVariableNameIfNull ? `[${variableName}]` : '';\n }\n\n return value;\n }\n\n render() {\n return null;\n }\n}\n\nContentVariableLoader.propTypes = {\n patientData: PropTypes.object,\n currentProgram: PropTypes.object,\n showVariableNameIfNull: PropTypes.bool,\n customVariables: PropTypes.object,\n};\n\nContentVariableLoader.defaultProps = {\n patientData: null,\n currentProgram: null,\n showVariableNameIfNull: false,\n customVariables: null,\n};\n\nexport default ContentVariableLoader;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\n\nimport {\n Button,\n createStyles,\n makeStyles,\n Typography,\n} from '@material-ui/core';\n\nexport const styles = theme => createStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n button: {\n fontSize: theme.typography.h4.fontSize,\n background: theme.palette.common.white,\n width: 60,\n height: 60,\n borderRadius: '50%',\n },\n display: {\n margin: theme.spacing(2),\n fontSize: theme.typography.h4.fontSize,\n },\n});\n\nconst useStyles = makeStyles(theme => styles(theme), { name: 'Counter' });\n\nconst Counter = ({ onChange, value, ...rest }) => {\n const classes = useStyles();\n const onClick = increase => () => {\n onChange({ target: { value: value + increase } });\n };\n\n return (\n \n \n {c.comment}\n \n \n {c.name}\n \n
\n ))}\n \n \n {timestamp(c.created)}\n \n {c.elementId && (\n \n {elementTitles[c.elementId]}\n \n )}\n
\n \n \n {message}\n {messageKey && translate(messageKey)}\n \n
\n );\n }\n}\n\nInfoMessage.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n messageKey: PropTypes.string,\n message: PropTypes.string,\n};\n\nInfoMessage.defaultProps = {\n message: null,\n messageKey: null,\n};\n\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n});\n\nexport default connect(mapStateToProps)(withStyles(styles)(InfoMessage));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport { isBrowser } from '../../youwell-common/browserUtils';\n\nimport * as ProgramStore from '../../app/store/ProgramStore';\n\nclass InternalLinkLoader extends React.Component {\n componentDidMount() {\n if (isBrowser) {\n // eslint-disable-next-line no-underscore-dangle\n window.__clickInternalLink = this.clickInternalLink;\n }\n }\n\n componentWillUnmount() {\n if (isBrowser) {\n // eslint-disable-next-line no-underscore-dangle\n window.__clickInternalLink = null;\n }\n }\n\n clickInternalLink = (elementId) => {\n const url = this.getLinkUrl({ url: elementId });\n this.props.redirect(url);\n }\n\n getLinkUrl = link => this.props.linkUrlFunction(link)\n\n render() {\n return null;\n }\n}\n\nInternalLinkLoader.propTypes = {\n redirect: PropTypes.func.isRequired,\n linkUrlFunction: PropTypes.func.isRequired,\n};\n\nconst mapStateToProps = state => ({\n clientConfig: state.auth.clientConfig,\n});\n\nconst mapDispatchToProps = dispatch => ({\n ...bindActionCreators(ProgramStore.actionCreators, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(InternalLinkLoader);\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { withLocalize } from 'react-localize-redux';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport {\n IconButton,\n} from '@material-ui/core';\nimport { programLanguages } from '../constants';\nimport * as AuthStore from '../../app/store/AuthStore';\nimport { storeLanguagePreferance } from '../../app/localization';\n\nconst styles = () => ({\n root: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n opacity: '0.8',\n },\n});\n\nconst LanguageToggle = ({\n activeLanguage, setActiveLanguage, classes,\n}) => {\n const dispatch = useDispatch();\n const appConfig = useSelector(state => state.pageSettings.appConfig);\n\n const selectLanguage = languageCode => () => {\n if (languageCode !== activeLanguage.code) {\n setActiveLanguage(languageCode);\n storeLanguagePreferance(languageCode);\n\n const programId = appConfig?.startProgram?.[languageCode];\n if (programId) {\n dispatch(AuthStore.actionCreators.startNewSession({\n orgId: appConfig?.orgId,\n programId,\n programStartDate: new Date(),\n includeCurrentProgramInResponse: true,\n }, { useSessionWithoutLifetime: true }));\n }\n }\n }\n\n return (\n \n {programLanguages.map(lang => (\n \n {lang.code}\n \n ))}\n
\n );\n};\n\nLanguageToggle.propTypes = {\n classes: PropTypes.object.isRequired,\n // languages: PropTypes.array.isRequired, // available languages from react-redux-translate\n activeLanguage: PropTypes.object,\n setActiveLanguage: PropTypes.func.isRequired,\n};\n\nLanguageToggle.defaultProps = {\n activeLanguage: {},\n};\n\nexport default withLocalize(withStyles(styles)(LanguageToggle));\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport {\r\n Hidden, Drawer, Menu, IconButton, makeStyles,\r\n} from '@material-ui/core';\r\n\r\nimport MenuContent from './MenuContent';\r\nimport Header from './Header';\r\nimport { Loading, ErrorMessage, PageNotFound, ErrorBoundary } from '../../youwell-common/components';\r\n\r\nimport * as AuthStore from '../../app/store/AuthStore';\r\nimport { scrollerWidth, headerHeight } from '../../app/style/theme';\r\nimport { CloseIcon } from '../icons';\r\nimport { useYouwellDispatch, useYouwellSelector } from '../../app/store';\r\nimport Footer from './Footer';\r\n\r\nexport const contentWidth = 1080;\r\n\r\nexport const useStyles = makeStyles(theme => ({\r\n root: {\r\n background: theme.palette.background.default,\r\n display: 'flex',\r\n justifyContent: 'center',\r\n },\r\n\r\n header: {\r\n position: 'fixed',\r\n width: '100vw',\r\n paddingRight: scrollerWidth,\r\n height: headerHeight,\r\n background: theme.palette.primary.main,\r\n display: 'flex',\r\n justifyContent: 'center',\r\n zIndex: 100, // must be higher than QuestionnaireTable-stickyHeaderCell\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n paddingRight: 0,\r\n },\r\n\r\n '@media print': {\r\n display: 'none',\r\n },\r\n },\r\n headerContent: {\r\n width: '100%',\r\n maxWidth: contentWidth,\r\n\r\n [theme.breakpoints.up('lg')]: {\r\n width: contentWidth - scrollerWidth,\r\n },\r\n },\r\n\r\n errorMessage: {\r\n maxWidth: 720, // max width for content with side menu..\r\n padding: theme.spacing(2, 4, 0),\r\n\r\n [theme.breakpoints.down('sm')]: {\r\n padding: theme.spacing(2, 4.5, 0),\r\n },\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n padding: theme.spacing(1, 1.5, 0),\r\n },\r\n },\r\n content: {\r\n marginTop: headerHeight,\r\n width: '100%',\r\n minHeight: '100vh',\r\n maxWidth: contentWidth,\r\n // background: theme.palette.common.white,\r\n // boxShadow: theme.shadows[1],\r\n\r\n [theme.breakpoints.up('lg')]: {\r\n width: contentWidth - scrollerWidth,\r\n },\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n boxShadow: 'none',\r\n minHeight: 0,\r\n },\r\n\r\n '@media print': {\r\n marginTop: 0,\r\n minHeight: 0,\r\n },\r\n },\r\n mainContent: {\r\n },\r\n closeButton: {\r\n position: 'absolute',\r\n right: 8,\r\n top: 8,\r\n padding: theme.spacing(1),\r\n zIndex: 1,\r\n },\r\n menu: {\r\n background: theme.palette.common.white,\r\n },\r\n}));\r\n\r\nconst Layout = ({\r\n children, hideHeaderLinks, hideMenu, headerPageTitle, hideAppTitle, muteErrors,\r\n}) => {\r\n const dispatch = useYouwellDispatch();\r\n const classes = useStyles();\r\n\r\n const loading = useYouwellSelector(state => state.auth.loading || state.programStore.loading || state.user.loading || state.publicStore.loading || state.previewStore.loading || state.requestStatusStore.loading);\r\n const errorMessage = useYouwellSelector(state => [].concat(state.auth.errors, state.programStore.errors, state.user.errors, state.publicStore.errors, state.previewStore.errors, state.requestStatusStore.errors).filter(val => val).join(''));\r\n const pageNotFound = useYouwellSelector(state => state.pageSettings.pageNotFound);\r\n\r\n const [menuAnchorElement, setMenuAnchorElement] = React.useState(null);\r\n\r\n const openMenu = (event) => {\r\n setMenuAnchorElement(event.currentTarget);\r\n }\r\n\r\n const closeMenu = () => {\r\n setMenuAnchorElement(null);\r\n }\r\n\r\n const clearErrors = () => {\r\n dispatch(AuthStore.actionCreators.clearError());\r\n }\r\n\r\n const navigateMenu = (event) => {\r\n const key = event.key;\r\n if (key === 'Escape' || key === 'Backspace') {\r\n closeMenu();\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n
\r\n \r\n \r\n\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {pageNotFound ? (\r\n \r\n
\r\n \r\n {children}\r\n
\r\n \r\n )}\r\n \r\n {icon ? (\r\n \r\n {icon}\r\n \r\n ) : (\r\n \r\n {label}\r\n \r\n )}\r\n \r\n {links.map(link => (\r\n \r\n \r\n \r\n ))}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nLinkMenu.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n links: PropTypes.array.isRequired,\r\n icon: PropTypes.node,\r\n label: PropTypes.string,\r\n};\r\n\r\nLinkMenu.defaultProps = {\r\n icon: null,\r\n label: null,\r\n};\r\n\r\nconst WithRef = withStyles(styles)(LinkMenu);\r\n\r\nexport default React.forwardRef((props, ref) => \n \n {`ver. ${appVersion}`}\n \n
\n \n );\n};\n\nMenuContent.propTypes = {\n location: PropTypes.object.isRequired,\n};\n\nconst WithRef = withRouter(MenuContent);\n\nexport default React.forwardRef((props, ref) => \r\n {mainElements.map((element, i) => (\r\n
\r\n );\r\n};\r\n\r\nModuleProgress.propTypes = {\r\n className: PropTypes.string,\r\n};\r\n\r\nModuleProgress.defaultProps = {\r\n className: null,\r\n};\r\n\r\n\r\nexport default ModuleProgress;\r\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport {\n Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button,\n} from '@material-ui/core';\n\nconst styles = theme => ({\n actions: {\n padding: theme.spacing(3),\n },\n saveButton: {\n marginLeft: theme.spacing(2),\n },\n});\n\nclass NavigateDialog extends React.Component {\n render() {\n const {\n classes, translate, open, onCancel, onDiscard, onSave, saveText,\n } = this.props;\n\n return (\n \r\n \r\n {element.module?.moduleImageId ? {element.name?.charAt(0).toUpperCase()} \r\n )}\r\n \r\n
\r\n ))}\r\n \r\n {sideContent && (\r\n \r\n {sideContent}\r\n
\r\n )}\r\n\r\n {sideMenu && (\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n )}\r\n\r\n \r\n \r\n {title}\r\n \r\n )}\r\n\r\n {children}\r\n
\r\n \r\n );\r\n};\r\n\r\nPageLayout.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n clientConfig: PropTypes.object.isRequired,\r\n children: PropTypes.oneOfType([\r\n PropTypes.arrayOf(PropTypes.node),\r\n PropTypes.node,\r\n ]).isRequired,\r\n sideContent: PropTypes.oneOfType([\r\n PropTypes.arrayOf(PropTypes.node),\r\n PropTypes.node,\r\n ]),\r\n translate: PropTypes.func.isRequired,\r\n breadcrumb: PropTypes.array,\r\n sideMenu: PropTypes.object,\r\n title: PropTypes.string,\r\n progress: PropTypes.number,\r\n task: PropTypes.object,\r\n width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired,\r\n};\r\n\r\nPageLayout.defaultProps = {\r\n breadcrumb: null,\r\n title: null,\r\n progress: null,\r\n sideMenu: null,\r\n task: null,\r\n sideContent: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n clientConfig: state.auth.clientConfig,\r\n});\r\n\r\nexport default connect(mapStateToProps)(withWidth()(withStyles(styles)(PageLayout)));\r\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\n\nclass PageTitle extends React.Component {\n state = {\n defaultTitle: document?.title,\n }\n\n componentDidMount() {\n document.title = this.props.title || this.state.defaultTitle;\n }\n\n componentDidUpdate() {\n document.title = this.props.title || this.state.defaultTitle;\n }\n\n render() {\n return null;\n }\n}\n\nPageTitle.propTypes = {\n title: PropTypes.string,\n};\n\nPageTitle.defaultProps = {\n title: null,\n};\n\nconst mapStateToProps = state => ({\n currentPath: state.pageSettings.pathname, // Sets this to trigger update on navigation\n});\n\nexport default connect(mapStateToProps)(PageTitle);\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Typography, Modal, IconButton, makeStyles,\n} from '@material-ui/core';\nimport classnames from 'classnames';\nimport { Fullscreen } from '@material-ui/icons';\n\nimport { Translate } from 'react-localize-redux';\nimport {\n CloseIcon,\n} from '../icons';\n\nimport { isIe } from '../../youwell-common/browserUtils';\n\nconst defaultWidth = 568;\n\nconst useStyles = makeStyles(theme => ({\n root: {\n // z-index is set inline by Modal-component. But must sometimes be overridden by using !important\n },\n modalContainer: {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n minWidth: defaultWidth,\n maxWidth: '100%',\n minHeight: theme.spacing(50),\n maxHeight: '80%',\n background: theme.palette.common.white,\n display: 'flex',\n flexDirection: 'column',\n height: isIe ? '100%' : undefined,\n\n [theme.breakpoints.down('xs')]: {\n minWidth: 0,\n width: `calc(100% - ${theme.spacing(4)}px)`,\n },\n },\n wide: {\n minWidth: '80%',\n },\n fullscreen: {\n top: 0,\n left: 0,\n transform: 'none',\n width: '100vw',\n height: '100vh',\n maxHeight: '100%',\n },\n modalHeader: {\n display: 'flex',\n alignItems: 'center',\n padding: theme.spacing(1, 2),\n background: theme.youwell.colors.secondaryBackground,\n },\n modalHeaderText: {\n flex: '1 1 auto',\n },\n headerMessage: {\n marginRight: theme.spacing(1),\n },\n modalContent: {\n flex: '1 1 auto',\n padding: theme.spacing(2),\n overflowY: 'auto',\n\n [theme.breakpoints.down('xs')]: {\n padding: theme.spacing(2, 1),\n },\n },\n}));\n\nconst PortalModal = ({\n heading, children, open, onClose, wide, showUnsavedMessage, allowZoom, fixedWidth, fixedHeight,\n}) => {\n const classes = useStyles();\n const [fullscreen, setFullscreen] = React.useState(false);\n\n const closeModal = () => {\n setFullscreen(false);\n onClose();\n }\n\n return (\n \r\n {clientConfig.appSetup.features.breadcrumb && breadcrumb && (\r\n
\r\n\r\n {title && (\r\n \n {heading && (\n
\n \n );\n};\n\nPortalModal.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.node),\n PropTypes.node,\n ]),\n heading: PropTypes.node,\n onClose: PropTypes.func.isRequired,\n open: PropTypes.bool.isRequired,\n wide: PropTypes.bool,\n showUnsavedMessage: PropTypes.bool,\n allowZoom: PropTypes.bool,\n fixedWidth: PropTypes.number,\n fixedHeight: PropTypes.number,\n};\n\nPortalModal.defaultProps = {\n children: null,\n heading: null,\n wide: false,\n showUnsavedMessage: false,\n allowZoom: false,\n fixedWidth: null,\n fixedHeight: null,\n};\n\nexport default PortalModal;\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport classnames from 'classnames';\r\n\r\n\r\nconst styles = theme => ({\r\n root: {\r\n backgroundColor: theme.palette.grey[400],\r\n height: 16,\r\n borderRadius: theme.youwell.shapes.borderRadius,\r\n width: 200,\r\n },\r\n fill: {\r\n backgroundColor: theme.palette.primary.main,\r\n borderRadius: theme.youwell.shapes.borderRadius,\r\n height: '100%',\r\n },\r\n});\r\n\r\nconst ProgressBar = (props) => {\r\n const { classes, className, value } = props;\r\n\r\n return (\r\n \n \n {heading}\n \n {showUnsavedMessage && (\n \n \n )}\n {allowZoom && (\n setFullscreen(prev => !prev)}>\n \n )}\n \n \n
\n )}\n \n {open && children}\n
\n \r\n
\r\n );\r\n};\r\n\r\nProgressBar.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n className: PropTypes.string,\r\n value: PropTypes.number,\r\n};\r\n\r\nProgressBar.defaultProps = {\r\n className: null,\r\n value: 0,\r\n};\r\n\r\nexport default withStyles(styles)(ProgressBar);\r\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\nimport classnames from 'classnames';\n\nimport {\n makeStyles,\n Typography,\n} from '@material-ui/core';\n\nimport TrackedLink from './TrackedLink';\nimport { activityLabels } from '../constants';\nimport { scrollerWidth } from '../../app/style/theme';\nimport { parseBoolString } from '../../youwell-common/stringUtils';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n background: theme.palette.primary.main,\n padding: theme.spacing(4, 2),\n paddingRight: theme.spacing(2) + scrollerWidth,\n\n [theme.breakpoints.down('sm')]: {\n padding: theme.spacing(4, 0),\n paddingRight: scrollerWidth,\n },\n\n '$brightBackground&': {\n background: theme.youwell.colors.secondaryBackground,\n },\n },\n brightBackground: { },\n menuItem: {\n display: 'flex',\n marginBottom: theme.spacing(1),\n marginLeft: theme.spacing(1),\n paddingLeft: theme.spacing(1),\n borderLeft: theme.youwell.borders.medium,\n borderColor: 'transparent',\n\n '&$subtask': {\n paddingLeft: theme.spacing(3),\n },\n\n '&hiddenSubtask': {\n display: 'none',\n },\n },\n subtask: {},\n hiddenSubtask: {},\n title: {\n color: theme.palette.common.white,\n marginBottom: theme.spacing(2),\n fontSize: '1rem',\n\n '$brightBackground &': {\n color: theme.youwell.colors.primary,\n },\n },\n current: {\n borderColor: theme.youwell.colors.highlight,\n\n '& $text': {\n color: theme.youwell.colors.highlight,\n fontWeight: theme.typography.fontWeightMedium,\n\n '$brightBackground &': {\n color: theme.palette.text.primary,\n },\n },\n },\n text: {\n display: 'flex',\n alignItems: 'center',\n },\n previous: {\n color: theme.youwell.colors.grayLight,\n\n '$brightBackground &': {\n color: theme.youwell.colors.grayDark,\n },\n },\n whiteText: {\n color: theme.palette.common.white,\n\n '$brightBackground &': {\n color: theme.palette.text.primary,\n },\n },\n notify: {\n width: 8,\n height: 8,\n borderRadius: '100%',\n marginLeft: theme.spacing(1),\n display: 'block',\n background: theme.youwell.colors.highlight,\n },\n}), { name: 'SideMenu' });\n\nconst SideMenu = ({ menu, className, activeSideMenuDivRef }) => {\n const classes = useStyles();\n const translate = useSelector(state => getTranslate(state.localize));\n const clientConfig = useSelector(state => state.auth.clientConfig);\n\n if (!menu) {\n return null;\n }\n\n return (\n \n \n {menu.title}\n \n\n {menu.menuItems.map((item, i) => (\n \n {item.url ? (\n \n menu.currentIndex ? classes.whiteText : classes.previous)}>\n {item.text}\n {item.notify && ()}\n \n \n ) : (\n menu.currentIndex ? classes.whiteText : classes.previous)}>\n {item.text}\n {item.notify && ()}\n \n )}\n
\n ))}\n \n );\n};\n\nSideMenu.propTypes = {\n menu: PropTypes.object,\n className: PropTypes.string,\n activeSideMenuDivRef: PropTypes.object,\n};\n\nSideMenu.defaultProps = {\n menu: null,\n className: null,\n activeSideMenuDivRef: undefined,\n};\n\nexport default SideMenu;\n","import { useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport * as AuthStore from '../../app/store/AuthStore';\nimport useSimpleOffline from '../../youwell-common/useSimpleOffline';\n\nconst StartSession = () => {\n const dispatch = useDispatch();\n const appConfig = useSelector(state => state.pageSettings.appConfig);\n const isOffline = useSimpleOffline();\n\n useEffect(() => {\n if (!isOffline) {\n dispatch(AuthStore.actionCreators.startSession({\n orgId: appConfig.orgId,\n anonymous: appConfig.useAnonymousSessions,\n }, { background: true }));\n }\n }, [appConfig, dispatch, isOffline]);\n\n return null;\n};\n\nexport default StartSession;\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { Translate } from 'react-localize-redux';\r\nimport classnames from 'classnames';\r\nimport { CKEditor } from '@ckeditor/ckeditor5-react';\r\nimport Editors from '@youwell/ckeditor5-builds-youwell';\r\nimport { connect } from 'react-redux';\r\n\r\nimport { Typography, Input } from '@material-ui/core';\r\n\r\nimport TextEditorUploadAdapterPlugin from './TextEditorUploadAdapterPlugin';\r\nimport { isIe, isBrowser } from '../../youwell-common/browserUtils';\r\nimport { htmlContentClassName } from '../../youwell-common/components/HtmlContent';\r\n\r\nconst editorTextColors = [\r\n {\r\n color: 'hsl(0, 0%, 0%)',\r\n label: 'Black',\r\n },\r\n {\r\n color: 'hsl(0, 0%, 30%)',\r\n label: 'Dim grey',\r\n },\r\n {\r\n color: 'hsl(0, 0%, 60%)',\r\n label: 'Grey',\r\n },\r\n {\r\n color: 'hsl(0, 0%, 90%)',\r\n label: 'Light grey',\r\n },\r\n {\r\n color: 'hsl(0, 0%, 100%)',\r\n label: 'White',\r\n hasBorder: true,\r\n },\r\n {\r\n color: '#B91400', // red\r\n },\r\n {\r\n color: 'hsl(0, 75%, 60%)',\r\n label: 'Red',\r\n },\r\n {\r\n color: 'hsl(30, 75%, 60%)',\r\n label: 'Orange',\r\n },\r\n {\r\n color: 'hsl(60, 75%, 60%)',\r\n label: 'Yellow',\r\n },\r\n // {\r\n // color: palette.yellow,\r\n // },\r\n {\r\n color: 'hsl(90, 75%, 60%)',\r\n label: 'Light green',\r\n },\r\n {\r\n color: 'hsl(120, 75%, 60%)',\r\n label: 'Green',\r\n },\r\n {\r\n color: 'hsl(150, 75%, 60%)',\r\n label: 'Aquamarine',\r\n },\r\n {\r\n color: 'hsl(180, 75%, 60%)',\r\n label: 'Turquoise',\r\n },\r\n {\r\n color: '#007C91', // green\r\n },\r\n // {\r\n // color: palette.blue,\r\n // },\r\n {\r\n color: 'hsl(210, 75%, 60%)',\r\n label: 'Light blue',\r\n },\r\n {\r\n color: 'hsl(240, 75%, 60%)',\r\n label: 'Blue',\r\n },\r\n {\r\n color: 'hsl(270, 75%, 60%)',\r\n label: 'Purple',\r\n },\r\n {\r\n color: '#000179',\r\n },\r\n];\r\n\r\nconst styles = theme => ({\r\n root: {\r\n border: theme.youwell.borders.dim,\r\n\r\n '& a': {\r\n color: theme.youwell.colors.hightScore,\r\n textDecoration: 'underline',\r\n cursor: 'text',\r\n },\r\n\r\n '& .ck-content .image': {\r\n clear: 'none', // override ck-content to allow two images beside each other..\r\n },\r\n\r\n },\r\n toolbar: {\r\n padding: theme.spacing(1),\r\n },\r\n htmlEditor: {\r\n padding: theme.spacing(1),\r\n },\r\n});\r\n\r\n\r\nconst ErrorFallback = ({\r\n classes, className, value, onChange, disabled,\r\n}) => (\r\n \r\n
\r\n);\r\n\r\nErrorFallback.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n value: PropTypes.string.isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n disabled: PropTypes.bool,\r\n className: PropTypes.string,\r\n};\r\n\r\nErrorFallback.defaultProps = {\r\n disabled: false,\r\n className: null,\r\n};\r\n\r\nclass TextEditor extends React.Component {\r\n state = {\r\n error: false,\r\n };\r\n\r\n linkAdapterRef = React.createRef();\r\n\r\n componentDidCatch = () => {\r\n this.setState({ error: true });\r\n };\r\n\r\n handleEditorChange = (event, editor) => {\r\n const data = editor.getData();\r\n this.props.onChange({ target: { value: data } });\r\n };\r\n\r\n render() {\r\n const {\r\n classes, disabled, value, className, onChange, allowUpload, appId,\r\n } = this.props;\r\n\r\n if (this.state.error || isIe) {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nTextEditor.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n value: PropTypes.string.isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n disabled: PropTypes.bool,\r\n className: PropTypes.string,\r\n allowUpload: PropTypes.bool,\r\n appId: PropTypes.string.isRequired,\r\n};\r\n\r\nTextEditor.defaultProps = {\r\n disabled: false,\r\n className: null,\r\n allowUpload: false,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n appId: state.pageSettings.appConfig.appId,\r\n});\r\n\r\nconst EditorComponent = connect(mapStateToProps, null)(withStyles(styles)(TextEditor));\r\n\r\nclass EditorErrorBoundary extends React.Component {\r\n static propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n children: PropTypes.oneOfType([\r\n PropTypes.arrayOf(PropTypes.node),\r\n PropTypes.node,\r\n ]),\r\n className: PropTypes.string,\r\n };\r\n\r\n static defaultProps = {\r\n children: null,\r\n className: null,\r\n };\r\n\r\n state = {\r\n hasError: false,\r\n };\r\n\r\n componentDidCatch = (error, info) => {\r\n this.setState({ hasError: true });\r\n // eslint-disable-next-line no-console\r\n console.warn('Editor-error', { error, info });\r\n };\r\n\r\n render() {\r\n const { classes, className } = this.props;\r\n\r\n if (this.state.hasError) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n return this.props.children;\r\n }\r\n}\r\n\r\nconst ErrorBoundaryComponent = withStyles(styles)(EditorErrorBoundary);\r\n\r\nexport default React.forwardRef((props, ref) => (\r\n \r\n \r\n \r\n
\r\n {rest.children}
);\n }\n\n // Pass all remaining props for material-ui focus effects etc...\n return ;\n};\n\nTrackedLink.propTypes = {\n label: PropTypes.string.isRequired,\n to: PropTypes.string,\n children: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.node),\n PropTypes.node,\n ]),\n className: PropTypes.string,\n endId: PropTypes.number,\n patientProgramId: PropTypes.string,\n patientProgramElementId: PropTypes.string,\n taskId: PropTypes.string,\n moduleId: PropTypes.string,\n style: PropTypes.object,\n title: PropTypes.string,\n forwardedRef: PropTypes.func,\n};\n\nTrackedLink.defaultProps = {\n children: null,\n className: null,\n endId: null,\n patientProgramId: null,\n patientProgramElementId: null,\n taskId: null,\n moduleId: null,\n style: null,\n to: null,\n title: null,\n forwardedRef: null,\n};\n\nexport default React.forwardRef((props, ref) => \n {topLabelFormat && (\n \n {topLabelFormat(sliderValue)}\n \n )}\n
\n );\n};\n\nYouwellSlider.propTypes = {\n value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n onChange: PropTypes.func.isRequired,\n topLabelFormat: PropTypes.func,\n className: PropTypes.string,\n marks: PropTypes.arrayOf(object), // { value, label }\n};\n\nYouwellSlider.defaultProps = {\n value: null,\n topLabelFormat: null,\n className: null,\n marks: [],\n};\n\nexport default YouwellSlider;\n","export { default as Checkbox } from './Checkbox';\nexport { default as InfoMessage } from './InfoMessage';\nexport { default as LinkListItem } from './LinkListItem';\nexport { default as TrackActivity } from './TrackActivity';\nexport { default as LinkMenu } from './LinkMenu';\nexport { default as TrackedLink } from './TrackedLink';\nexport { default as BreadCrumb } from './BreadCrumb';\nexport { default as ProgressBar } from './ProgressBar';\nexport { default as PageTitle } from './PageTitle';\nexport { default as NavigateDialog } from './NavigateDialog';\nexport { default as ChoiceNavigationDialog } from './ChoiceNavigationDialog';\nexport { default as StartSession } from './StartSession';\nexport { default as Layout } from './Layout';\nexport { default as PageLayout } from './PageLayout';\nexport { default as MenuContent } from './MenuContent';\nexport { default as Header } from './Header';\nexport { default as ConfirmButton } from './ConfirmButton';\nexport { default as InternalLinkLoader } from './InternalLinkLoader';\nexport { default as ModalAction } from './ModalAction';\nexport { default as PortalModal } from './PortalModal';\nexport { default as Counter } from './Counter';\nexport { default as YouwellSlider } from './YouwellSlider';\nexport { default as TimePicker } from './TimePicker';\nexport { default as LoadAppContent } from './LoadAppContent';\nexport { default as ModuleProgress } from './ModuleProgress';\nexport { default as FeedbackForm } from './FeedbackForm';\nexport { default as LoadOrgConfig } from './LoadOrgConfig';\nexport { default as OverlayModal } from './OverlayModal';\nexport { default as LanguageToggle } from './LanguageToggle';\nexport { default as ContentVariableLoader } from './ContentVariableLoader';\nexport { default as TextEditor } from './TextEditor';\nexport { default as FileUpload } from './FileUpload';\n","\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.programLanguages = exports.activityCategories = exports.patientProgramAppElementSettings = exports.patientProgramElementGroups = exports.activityLabels = exports.notificationKeys = void 0;\nvar constants_1 = require(\"../youwell-common/constants\");\nexports.notificationKeys = {\n unreadMessages: 'unreadMessages',\n overdueTasks: 'overdueTasks',\n program: 'program',\n};\nexports.activityLabels = {\n header: 'header',\n menu: {\n home: 'menu/home',\n calendar: 'menu/calendar',\n videos: 'menu/videos',\n profile: 'menu/profile',\n chat: 'menu/chat',\n videochat: 'menu/videochat',\n logout: 'menu/logout',\n favourites: 'menu/favourites',\n appPage: 'menu/app',\n activityDiary: 'menu/activityDiary',\n page: 'menu/page',\n prints: 'menu/prints',\n feedback: 'menu/feedback',\n org: 'menu/org',\n consent: 'menu/consent',\n },\n dashboard: {\n questionnaires: 'dashboard/questionnaires',\n calendar: 'dashboard/calendar',\n module: 'dashboard/module',\n introModule: 'dashboard/introModule',\n currentModule: 'dashboard/currentModule',\n appointment: 'dashboard/appointment',\n exit: 'exit',\n },\n moduleProgress: {\n link: 'moduleProgress',\n },\n breadcrumb: {\n link: 'breadcrumb',\n home: 'breadcrumb/home',\n module: 'breadcrumb/module',\n task: 'breadcrumb/task',\n },\n sidemenu: {\n link: 'sidemenu',\n },\n taskPreview: {\n goToTask: 'taskPreview/goToTask',\n },\n};\nexports.patientProgramElementGroups = __assign(__assign({}, constants_1.systemElementGroups), { default: 'Default', appointment: 'Appointment' });\nexports.patientProgramAppElementSettings = {\n header: 'header',\n intro: 'intro',\n dashboardInfo: 'info',\n worksheet: 'worksheet',\n hidden: 'hidden',\n};\nexports.activityCategories = {\n physical: 'PhysicalTraining',\n mental: 'MentalTraining',\n dailyRoutine: 'DailyRoutine',\n};\nexports.programLanguages = [\n { code: 'no', name: 'Norsk' },\n // { code: 'en', name: 'English' },\n { code: 'ua', name: 'Українська' },\n { code: 'ru', name: 'Pусский' },\n];\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Build, Pages } from '@material-ui/icons';\n\nimport {\n FoodIcon, BudskapIcon, TrophyIcon,\n} from './index';\n\nexport const getElementIcon = (item) => {\n if (item) {\n const itemName = item.name?.toLowerCase();\n if (item.Icon) {\n return item.Icon;\n } if (itemName.indexOf('trening') > -1) {\n return TrophyIcon;\n } if (itemName.indexOf('budskap') > -1) {\n return BudskapIcon;\n } if (itemName.indexOf('kjøkken') > -1) {\n return FoodIcon;\n } if (itemName.indexOf('hverdagsmat') > -1) {\n return FoodIcon;\n } if (itemName.indexOf('gla:d') > -1) {\n return TrophyIcon;\n } if (itemName.indexOf('verktøy') > -1) {\n return Build;\n }\n }\n return Pages;\n}\n\nconst ElementIconOrDefault = ({ item, ...props }) => {\n const Icon = getElementIcon(item);\n return (\n {marks[0].label} \n {marks[marks.length - 1].label} \n
\n )}\n \n {!image ? (\n <>\n {imageUrl && (\n
\n \n\n \n \n );\n};\n\nProfileImageEditor.propTypes = {\n onSave: PropTypes.func.isRequired,\n onDelete: PropTypes.func.isRequired,\n width: PropTypes.number,\n currentImageId: PropTypes.number,\n};\n\nProfileImageEditor.defaultProps = {\n width: 250,\n currentImageId: null,\n};\n\nexport default ProfileImageEditor;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.getRuleValidators = exports.defaultValidators = void 0;\nvar validationUtils_1 = require(\"../../../youwell-common/validationUtils\");\nvar constants_1 = require(\"../../../youwell-common/constants\");\nexports.defaultValidators = {\n fnr: validationUtils_1.validateFnr,\n email: validationUtils_1.validateEmail,\n userLevel: validationUtils_1.validateRequired,\n newPassword: validationUtils_1.validatePassword,\n newPasswordConfirm: validationUtils_1.validatePasswordConfirm,\n};\nvar getRuleValidators = function (userLevel) {\n switch (userLevel) {\n case constants_1.patientUserLevels.none: {\n return {\n userLevel: validationUtils_1.validateRequired,\n name: validationUtils_1.validateRequired,\n fnr: validationUtils_1.validateFnr,\n email: validationUtils_1.validateEmail,\n };\n }\n case constants_1.patientUserLevels.anonymous: {\n return {\n userLevel: validationUtils_1.validateRequired,\n username: validationUtils_1.validateRequired,\n newPassword: validationUtils_1.validatePassword,\n newPasswordConfirm: validationUtils_1.validatePasswordConfirm,\n };\n }\n case constants_1.patientUserLevels.person: {\n return {\n userLevel: validationUtils_1.validateRequired,\n name: validationUtils_1.validateRequired,\n email: [validationUtils_1.validateEmail, validationUtils_1.validateRequired],\n newPassword: validationUtils_1.validatePassword,\n newPasswordConfirm: validationUtils_1.validatePasswordConfirm,\n };\n }\n case constants_1.patientUserLevels.patient: {\n return {\n userLevel: validationUtils_1.validateRequired,\n name: validationUtils_1.validateRequired,\n fnr: [validationUtils_1.validateFnr, validationUtils_1.validateRequired],\n email: validationUtils_1.validateEmail,\n };\n }\n default: {\n return exports.defaultValidators;\n }\n }\n};\nexports.getRuleValidators = getRuleValidators;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\nimport classnames from 'classnames';\n\nimport {\n withStyles, Typography, Button, LinearProgress,\n} from '@material-ui/core';\n\nimport { hasValue } from '../../youwell-common/objectUtils';\nimport { HtmlContent, TaskContentDisplay } from '../../youwell-common/components';\nimport { activityLabels, patientProgramElementGroups, patientProgramAppElementSettings } from '../../common/constants';\nimport { InfoMessage, ModuleProgress, TrackedLink, LanguageToggle } from '../../common/components';\nimport { getTaskFromElement, hasElementSetting } from '../../common/taskUtils';\nimport { PROGRAM_CURRENTPROGRAM_RECEIVED } from '../../app/store/actions';\nimport UnfinishedTasksBox from './components/UnfinishedTasksBox';\nimport ModuleBoxFlat from './components/ModuleBoxFlat';\nimport CurrentModuleBox from './components/CurrentModuleBox';\nimport ScheduledTasksBox from './components/ScheduledTasksBox';\nimport CalendarBox from './components/CalendarBox';\n\nimport { dashboardItems, dashboardItemsCustom } from '../../app/appSetup';\nimport AppointmentBox from './components/AppointmentBox';\nimport urls from '../../app/urls';\nimport ModuleBoxWithOverlay from './components/ModuleBoxWithOverlay';\n\nconst styles = theme => ({\n root: {\n padding: theme.spacing(6, 12),\n\n [theme.breakpoints.down('sm')]: {\n padding: theme.spacing(3, 4.5),\n },\n\n [theme.breakpoints.down('xs')]: {\n padding: theme.spacing(1.5),\n },\n },\n welcome: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n welcomeContent: {\n flex: '1 1 auto',\n },\n welcomeTitle: {\n fontWeight: 500,\n outline: 'none',\n },\n logo: {\n width: 150,\n\n [theme.breakpoints.down('xs')]: {\n width: 50,\n },\n },\n programDescription: {\n marginTop: theme.spacing(1),\n clear: 'both',\n },\n waitMessage: {\n marginBottom: theme.spacing(8),\n },\n content: {\n marginTop: theme.spacing(8),\n },\n contentBox: {\n marginTop: theme.spacing(8),\n background: theme.palette.background.default,\n boxShadow: theme.youwell.shadows.default,\n borderRadius: theme.youwell.shapes.borderRadius,\n },\n active: {\n // border: theme.youwell.borders.primary,\n },\n moduleTitle: {\n borderLeft: theme.youwell.borders.secondary,\n borderLeftWidth: 4,\n paddingLeft: theme.spacing(2),\n marginBottom: theme.spacing(2),\n outline: 'none',\n },\n modules: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n module: {\n flexBasis: `calc(-${theme.spacing(4)}px + 33.3333%)`, // IE calc. Renders wrong for `calc((100% - ${theme.spacing(12)}px) / 3)`\n marginBottom: theme.spacing(4),\n\n '&:nth-child(3n+2)': {\n [theme.breakpoints.up('md')]: {\n marginLeft: theme.spacing(6),\n marginRight: theme.spacing(6),\n },\n },\n\n [theme.breakpoints.down('sm')]: {\n flexBasis: `calc(-${theme.spacing(2)}px + 50%)`, // IE calc. Renders wrong for `calc((100% - ${theme.spacing(4)}px) / 2)`\n },\n\n '&:nth-child(2n + 1)': {\n [theme.breakpoints.down('sm')]: {\n marginRight: theme.spacing(4),\n },\n [theme.breakpoints.down('xs')]: {\n marginRight: 0,\n },\n },\n\n [theme.breakpoints.down('xs')]: {\n flexBasis: '100%',\n justifyContent: 'center',\n },\n },\n exitButtonContainer: {\n display: 'flex',\n justifyContent: 'center',\n marginTop: theme.spacing(8),\n },\n exitButton: {\n minWidth: 300,\n padding: theme.spacing(1),\n },\n infoContent: {\n margin: theme.spacing(2),\n },\n progressContainer: {\n display: 'flex',\n flexWrap: 'wrap',\n flexGrow: 2,\n alignItems: 'center',\n justifyContent: 'flex-start',\n\n '@media print': {\n display: 'none',\n },\n },\n progressBar: {\n height: 12,\n maxWidth: 200,\n minWidth: 120,\n flexGrow: 1,\n },\n progressBarRounded: {\n background: theme.palette.primary.main,\n borderRadius: theme.youwell.shapes.borderRadius,\n border: '2px solid',\n },\n progressBarFill: {\n background: theme.youwell.colors.highlight,\n borderRadius: theme.youwell.shapes.borderRadius,\n },\n progressText: {\n marginLeft: theme.spacing(1),\n },\n});\n\nclass Dashboard extends React.Component {\n componentDidMount() {\n if (this.props.prevPathname?.startsWith('/inside/program')) {\n if (this.modulesRef) this.modulesRef.focus();\n }\n }\n\n componentDidUpdate(prevProps) {\n // Perform update when hasLoaded changes\n if (prevProps.hasLoaded !== this.props.hasLoaded) {\n if (this.titleRef) this.titleRef.focus();\n }\n }\n\n getNextElementIndex = () => this.props.programDetails.groupedElements[patientProgramElementGroups.main]?.findIndex(d => !d.completed && !d.disabled)\n\n getIntroElement = completed => this.props.programDetails?.appElements?.find(d => hasElementSetting(d, patientProgramAppElementSettings.intro, true) && !d.disabled && (completed ? d.completed : !d.completed));\n\n getDashboardInfoElement = () => this.props.programDetails?.appElements?.find(d => hasElementSetting(d, patientProgramAppElementSettings.dashboardInfo) && !d.disabled);\n\n renderItem = (item) => {\n const {\n classes, translate, programDetails, profileData, clientConfig, appConfig,\n } = this.props;\n\n const mainElements = programDetails.groupedElements[patientProgramElementGroups.main] || [];\n const progress = programDetails.completedModules / programDetails.totalModules;\n const showLanguageToggle = !appConfig.language;\n\n switch (item) {\n case dashboardItems.welcome: {\n const firstVisit = true; // check to be implemented..\n return (\n \n \n \n\n \n \n\n \n \n\n \n\n \n\n \n
\n \n )}\n \n
\n );\n }\n case dashboardItems.programDescription: {\n return (\n <>\n {clientConfig.appSetup.features.progress && (\n \n {profileData?.name ? (\n { this.titleRef = thisRef; }} tabIndex=\"-1\">\n {translate(firstVisit ? 'dashboard.welcomeUser' : 'dashboard.welcomeBackUser', { name: profileData.name || '' })}\n \n ) : (\n { this.titleRef = thisRef; }} tabIndex=\"-1\">\n {translate('dashboard.welcome')}\n \n )}\n
\n \n {hasValue(progress) && programDetails.isActiveProgram && (\n <>\n \n {translate('common.progressCompleted', { progress: Math.round(progress * 100) })}\n \n \n )}\n
\n )}\n \n { this.modulesRef = thisRef; }} tabIndex=\"-1\">\n {translate('dashboard.modules')}\n \n\n
\n );\n }\n case dashboardItemsCustom.unfinished: {\n if (!programDetails.isActiveProgram) return null;\n const unfinishedElements = mainElements.reduce((prev, curr) => {\n if (!curr || !curr.module || !curr.module.tasks || curr.totalTasksVisited < 1) {\n return prev;\n }\n\n const current = {\n id: curr.id,\n indexInGroup: curr.indexInGroup,\n moduleName: curr.name,\n tasks: curr.module.tasks.map((t, taskIndex) => ({\n id: t.id, name: t.name, taskIndex, ok: t.completed || !t.visited,\n })).filter(d => !d.ok),\n };\n\n if (current.tasks.length === 0) {\n return prev;\n }\n\n return prev.length > 0 ? [...prev, current] : [current];\n }, []);\n\n return (\n \n {mainElements.map((element, i) => (\n clientConfig.appSetup.features.useFlatModuleBoxes\n ? (\n
\n \n \n {translate('dashboard.exit')}\n \n
\n );\n }\n case dashboardItemsCustom.info: {\n const infoElement = this.getDashboardInfoElement();\n const task = getTaskFromElement(infoElement);\n\n return task && (\n \n
\n );\n }\n default:\n return null;\n }\n }\n\n render() {\n const {\n classes, programDetails, hasLoaded, clientConfig, appConfig,\n } = this.props;\n\n if (!clientConfig) {\n return null;\n }\n\n const showLanguageToggle = !appConfig.language;\n\n if (!programDetails) {\n if (hasLoaded) {\n return (\n \n
\n );\n }\n return null;\n }\n\n return (\n <>\n {clientConfig.appSetup.features.moduleProgress && \n {clientConfig.appSetup.dashboard.map(item => (\n \n {this.renderItem(item)}\n \n ))}\n
\n \n );\n }\n}\n\nDashboard.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n clientConfig: PropTypes.object,\n programDetails: PropTypes.object,\n hasLoaded: PropTypes.bool,\n prevPathname: PropTypes.string,\n profileData: PropTypes.object,\n appConfig: PropTypes.object,\n};\n\nDashboard.defaultProps = {\n clientConfig: null,\n programDetails: null,\n hasLoaded: false,\n prevPathname: null,\n profileData: null,\n appConfig: null,\n};\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n prevPathname: state.pageSettings.prevPathname,\n profileData: state.auth.profileData,\n clientConfig: state.auth.clientConfig,\n appConfig: state.pageSettings.appConfig,\n programDetails: state.programStore.currentProgram,\n hasLoaded: Boolean(state.programStore.requests[PROGRAM_CURRENTPROGRAM_RECEIVED]\n && state.programStore.requests[PROGRAM_CURRENTPROGRAM_RECEIVED].completed),\n});\n\nexport default connect(mapStateToProps)(withStyles(styles)(Dashboard));\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar react_router_dom_1 = require(\"react-router-dom\");\nvar youwell_common_1 = require(\"../../youwell-common\");\nvar components_1 = require(\"../../youwell-common/components\");\nvar LoadCurrentProgram_1 = __importDefault(require(\"./components/LoadCurrentProgram\"));\nvar constants_1 = require(\"../../youwell-common/constants\");\nvar UserStore = __importStar(require(\"../../app/store/UserStore\"));\nvar AuthStore = __importStar(require(\"../../app/store/AuthStore\"));\nvar Index_1 = __importDefault(require(\"../pages/Index\"));\nvar Index_2 = __importDefault(require(\"../program/Index\"));\nvar MessageList_1 = __importDefault(require(\"../messages/MessageList\"));\nvar Videochat_1 = __importDefault(require(\"../videochat/Videochat\"));\nvar Profile_1 = __importStar(require(\"../home/Profile\"));\nvar Dashboard_1 = __importDefault(require(\"./Dashboard\"));\nvar Consent_1 = __importDefault(require(\"../pages/Consent\"));\nvar urls_1 = __importDefault(require(\"../../app/urls\"));\nvar LoadCurrentProgramResponses_1 = __importDefault(require(\"./components/LoadCurrentProgramResponses\"));\nvar LoadProfileData_1 = __importDefault(require(\"./components/LoadProfileData\"));\nvar objectUtils_1 = require(\"../../youwell-common/objectUtils\");\nvar constants_2 = require(\"../../common/constants\");\nvar components_2 = require(\"../../common/components\");\nvar taskUtils_1 = require(\"../../common/taskUtils\");\nvar store_1 = require(\"../../app/store\");\nvar USER_IDLE_TIMEOUT_IN_MINUTES = 30;\nvar POLLING_INTERVAL_IN_MINUTES = 5;\nvar consentUrl = \"\".concat(urls_1.default.inside.program, \"/\").concat(constants_2.patientProgramElementGroups.consent);\nvar Index = function () {\n var dispatch = (0, store_1.useYouwellDispatch)();\n var clientConfig = (0, store_1.useYouwellSelector)(function (state) { return state.auth.clientConfig; });\n var profileData = (0, store_1.useYouwellSelector)(function (state) { return state.auth.profileData; });\n var hasUnansweredConsents = (0, store_1.useYouwellSelector)(function (state) { return state.auth.hasUnansweredConsents; });\n var unAnsweredConsentIndex = (0, store_1.useYouwellSelector)(function (state) { return (state.programStore.currentProgram && (0, objectUtils_1.hasValue)(state.programStore.currentProgram.unAnsweredConsentIndex)\n ? state.programStore.currentProgram.unAnsweredConsentIndex : -1); });\n var currentProgram = (0, store_1.useYouwellSelector)(function (state) { return state.programStore.currentProgram; });\n var logoutOnIdle = function () {\n dispatch(AuthStore.actionCreators.logout(constants_1.logoutReasons.idleTimeout));\n };\n var getUserState = function () {\n dispatch(UserStore.actionCreators.getUserState());\n };\n var patientDataMissing = clientConfig.appSetup.patient.checkMissingData && (0, Profile_1.hasMissingData)(profileData, clientConfig);\n var showPrePage = patientDataMissing || hasUnansweredConsents || unAnsweredConsentIndex > -1;\n var sessionLifetime = youwell_common_1.Auth.getSessionLifetime();\n var getInternalLink = function (link) {\n if (!(link === null || link === void 0 ? void 0 : link.url))\n return null;\n if (link.url.startsWith('page:')) {\n var pageId = link.url.substring(5);\n return urls_1.default.inside[pageId] || urls_1.default.inside.pages[pageId];\n }\n return (0, taskUtils_1.getProgramContentLink)(link, currentProgram);\n };\n var renderPrePage = function () {\n if (hasUnansweredConsents) {\n return (React.createElement(react_router_dom_1.Switch, null,\n React.createElement(react_router_dom_1.Route, { path: \"\".concat(urls_1.default.inside.pages.consent, \"/:consentId?\"), component: Consent_1.default }),\n React.createElement(react_router_dom_1.Route, { render: function () { return (React.createElement(react_router_dom_1.Redirect, { to: { pathname: urls_1.default.inside.pages.consent } })); } })));\n }\n if (unAnsweredConsentIndex > -1) {\n return (React.createElement(react_router_dom_1.Switch, null,\n React.createElement(react_router_dom_1.Route, { path: consentUrl, component: Index_2.default }),\n React.createElement(react_router_dom_1.Route, { render: function () { return (React.createElement(react_router_dom_1.Redirect, { to: { pathname: \"\".concat(consentUrl, \"/\").concat(unAnsweredConsentIndex, \"/\").concat(urls_1.default.inside.parts.resumeLatest) } })); } })));\n }\n if (patientDataMissing) {\n return (React.createElement(Profile_1.default, null));\n }\n return null;\n };\n return (React.createElement(React.Fragment, null,\n React.createElement(components_1.ErrorBoundary, { id: \"Inside_Top\" },\n React.createElement(components_2.PageTitle, null),\n sessionLifetime > 0 && (React.createElement(components_1.IdleTimer, { timeoutInMinutes: USER_IDLE_TIMEOUT_IN_MINUTES, onIdle: logoutOnIdle, hasInactivityAlert: true })),\n clientConfig.appSetup.patient.pollState && (React.createElement(components_1.PollData, { dataCall: getUserState, pollingIntervalInMinutes: POLLING_INTERVAL_IN_MINUTES }))),\n React.createElement(components_1.ErrorBoundary, { id: \"Inside_Loading\" },\n React.createElement(LoadProfileData_1.default, null),\n React.createElement(LoadCurrentProgram_1.default, null),\n React.createElement(LoadCurrentProgramResponses_1.default, null),\n React.createElement(components_2.InternalLinkLoader, { linkUrlFunction: function (link) { return getInternalLink(link); } }),\n React.createElement(components_2.ContentVariableLoader, { currentProgram: currentProgram, patientData: profileData })),\n React.createElement(components_2.Layout, { hideHeaderLinks: showPrePage, hideMenu: showPrePage }, renderPrePage() || (React.createElement(react_router_dom_1.Switch, null,\n React.createElement(react_router_dom_1.Route, { exact: true, path: urls_1.default.inside.home, component: Dashboard_1.default }),\n React.createElement(react_router_dom_1.Route, { path: urls_1.default.inside.profile, component: Profile_1.default }),\n React.createElement(react_router_dom_1.Route, { path: urls_1.default.inside.chat, component: MessageList_1.default }),\n React.createElement(react_router_dom_1.Route, { path: urls_1.default.inside.videochat, component: Videochat_1.default }),\n React.createElement(react_router_dom_1.Route, { path: urls_1.default.inside.program, component: Index_2.default }),\n React.createElement(react_router_dom_1.Route, { path: urls_1.default.inside.pages.home, component: Index_1.default }),\n React.createElement(react_router_dom_1.Route, { component: Dashboard_1.default }))))));\n};\nexports.default = Index;\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\n\r\nimport {\r\n withStyles, Typography,\r\n} from '@material-ui/core';\r\n\r\nimport * as UserStore from '../../../app/store/UserStore';\r\n\r\nimport { dateWithOptionalTime, isFuture } from '../../../youwell-common/dateUtils';\r\nimport { sortByDateAscending } from '../../../youwell-common/arrayUtils';\r\nimport urls from '../../../app/urls';\r\nimport { TrackedLink } from '../../../common/components';\r\nimport { activityLabels } from '../../../common/constants';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n border: theme.youwell.borders.dim,\r\n padding: theme.spacing(1),\r\n background: theme.palette.grey[50],\r\n },\r\n header: {\r\n display: 'flex',\r\n },\r\n date: {\r\n marginRight: theme.spacing(1),\r\n },\r\n content: {\r\n\r\n },\r\n mapIFrame: {\r\n marginTop: theme.spacing(1),\r\n width: '100%',\r\n height: '400px',\r\n },\r\n});\r\n\r\nclass AppointmentBox extends React.Component {\r\n render() {\r\n const {\r\n classes, translate, className, elements,\r\n } = this.props;\r\n\r\n const futureElements = elements?.filter(d => isFuture(d.startTime, true));\r\n\r\n if (!futureElements?.length) {\r\n return null;\r\n }\r\n\r\n const element = sortByDateAscending(futureElements, 'startTime')[0];\r\n\r\n return (\r\n \r\n \r\n\r\n \r\n {translate('dashboard.nextAppointment')}\r\n \r\n\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nAppointmentBox.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n // clientConfig: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n elements: PropTypes.array,\r\n className: PropTypes.string,\r\n};\r\n\r\nAppointmentBox.defaultProps = {\r\n className: null,\r\n elements: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n clientConfig: state.auth.clientConfig,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(UserStore.actionCreators, dispatch),\r\n});\r\n\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(AppointmentBox));\r\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\nimport classnames from 'classnames';\n\nimport {\n withStyles, Typography,\n} from '@material-ui/core';\n\n\nimport Calendar from '../../pages/Calendar/Calendar';\n\nconst styles = theme => ({\n root: {\n background: theme.palette.grey[100],\n padding: theme.spacing(2),\n\n [theme.breakpoints.down('xs')]: {\n padding: theme.spacing(2, 4),\n },\n },\n topContainer: {\n },\n title: {\n marginBottom: theme.spacing(2),\n fontWeight: 500,\n },\n description: {\n marginBottom: theme.spacing(1),\n },\n content: {\n [theme.breakpoints.down('xs')]: {\n background: theme.palette.grey[100],\n },\n },\n});\n\nclass CalendarBox extends React.Component {\n render() {\n const {\n classes, translate, className,\n } = this.props;\n\n return (\n \r\n \r\n {dateWithOptionalTime(element.startTime, translate)}\r\n \r\n \r\n {element.name}\r\n \r\n
\r\n \n
\n );\n }\n}\n\nCalendarBox.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n className: PropTypes.string,\n};\n\nCalendarBox.defaultProps = {\n className: null,\n};\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n});\n\nexport default connect(mapStateToProps)(withStyles(styles)(CalendarBox));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport { connect } from 'react-redux';\nimport { Translate, getTranslate } from 'react-localize-redux';\nimport { bindActionCreators } from 'redux';\n\nimport {\n withStyles, Typography, Button,\n} from '@material-ui/core';\n\nimport * as ProgramStore from '../../../app/store/ProgramStore';\n\nimport urls from '../../../app/urls';\nimport apiUrls from '../../../youwell-common/apiUrls';\nimport { Image, HtmlContent } from '../../../youwell-common/components';\nimport { TrackedLink, ProgressBar } from '../../../common/components';\nimport MyTaskContent from '../../program/components/MyTaskContent';\n\nconst styles = theme => ({\n root: {\n background: theme.palette.grey[100],\n padding: theme.spacing(2),\n display: 'flex',\n flexWrap: 'wrap',\n\n [theme.breakpoints.down('sm')]: {\n flexDirection: 'column',\n },\n },\n topContainer: {\n flex: '0 0 100%',\n },\n title: {\n marginBottom: theme.spacing(2),\n fontWeight: 500,\n },\n imageContainer: {\n flex: '1 1 50%',\n\n [theme.breakpoints.down('sm')]: {\n alignSelf: 'center',\n },\n },\n content: {\n flex: '1 1 50%',\n paddingLeft: theme.spacing(2),\n display: 'flex',\n flexDirection: 'column',\n\n [theme.breakpoints.down('sm')]: {\n flex: '1 1 100%',\n paddingLeft: 0,\n },\n },\n image: {\n width: '100%',\n },\n moduleTitle: {\n margin: theme.spacing(1),\n fontSize: '1.14rem',\n },\n progressContainer: {\n margin: theme.spacing(1),\n },\n progress: {\n width: '100%',\n },\n description: {\n margin: theme.spacing(1),\n },\n actions: {\n flex: '1 1 auto',\n marginTop: theme.spacing(2),\n display: 'flex',\n justifyContent: 'flex-end',\n alignItems: 'flex-end',\n },\n startButton: {\n padding: theme.spacing(0.5, 2),\n\n [theme.breakpoints.down('xs')]: {\n width: '100%',\n },\n },\n\n});\n\nclass CurrentModuleBox extends React.Component {\n renderModule = (module) => {\n const {\n classes, element, index, trackLabel, currentProgram, hideProgress, translate,\n } = this.props;\n\n const progress = Math.min(currentProgram.completedModules / currentProgram.totalModules, 1) || 0;\n\n return (\n <>\n \n \n {translate('dashboard.calendar')}\n \n \n {translate('dashboard.calendarDescription')}\n \n
\n \n\n
\n \n {module.moduleImageId && (\n
\n\n \n \n {element.name || ( \n\n {!hideProgress && (\n
\n \n );\n }\n\n completeTask = (elementId, taskId, programId) => () => {\n this.props.visitTask({\n ppeId: elementId,\n id: taskId,\n }, { reducerParams: { patientProgramId: programId, taskId } });\n }\n\n render() {\n const {\n classes, element, className, title, currentProgram,\n } = this.props;\n\n if (!element?.module && !element?.task) {\n return null;\n }\n\n return (\n \n \n \n
\n )}\n\n \n \n {element.completed ? (
\n \n
\n );\n }\n}\n\nCurrentModuleBox.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n visitTask: PropTypes.func.isRequired,\n element: PropTypes.object,\n // clientConfig: PropTypes.object.isRequired,\n index: PropTypes.number.isRequired,\n className: PropTypes.string,\n title: PropTypes.string,\n trackLabel: PropTypes.string.isRequired,\n currentProgram: PropTypes.object.isRequired,\n hideProgress: PropTypes.bool,\n};\n\nCurrentModuleBox.defaultProps = {\n className: null,\n title: null,\n element: null,\n hideProgress: false,\n};\n\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n clientConfig: state.auth.clientConfig,\n currentProgram: state.programStore.currentProgram,\n});\n\nconst mapDispatchToProps = dispatch => ({\n ...bindActionCreators(ProgramStore.actionCreators, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(CurrentModuleBox));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport * as ProgramStore from '../../../app/store/ProgramStore';\n\nclass LoadCurrentProgram extends React.Component {\n componentDidMount() {\n if (!this.props.currentProgram) {\n this.props.getCurrentProgram();\n }\n }\n\n render() {\n return null;\n }\n}\n\nLoadCurrentProgram.propTypes = {\n getCurrentProgram: PropTypes.func.isRequired,\n currentProgram: PropTypes.object,\n};\n\nLoadCurrentProgram.defaultProps = {\n currentProgram: null,\n};\n\nconst mapStateToProps = state => ({\n currentProgram: state.programStore.currentProgram,\n});\n\nconst mapDispatchToProps = dispatch => ({\n ...bindActionCreators(ProgramStore.actionCreators, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(LoadCurrentProgram);\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport * as ProgramStore from '../../../app/store/ProgramStore';\nimport { PROGRAM_RESPONSES_RECEIVED } from '../../../app/store/actions';\n\nclass LoadCurrentProgramResponses extends React.Component {\n componentDidMount() {\n const { currentProgramId, currentProgramResponsesLoaded } = this.props;\n\n if (currentProgramId && !currentProgramResponsesLoaded) {\n this.loadResponses(currentProgramId);\n }\n }\n\n componentDidUpdate(prevProps) {\n const { currentProgramId, currentProgramResponsesLoaded } = this.props;\n\n if (currentProgramId && currentProgramId !== prevProps.currentProgramId && !currentProgramResponsesLoaded) {\n this.loadResponses(currentProgramId);\n }\n }\n\n loadResponses(patientProgramId) {\n this.props.getProgramResponses(patientProgramId,\n {\n reducerParams: {\n patientProgramId,\n },\n });\n }\n\n render() {\n return null;\n }\n}\n\nLoadCurrentProgramResponses.propTypes = {\n getProgramResponses: PropTypes.func.isRequired,\n currentProgramResponsesLoaded: PropTypes.bool,\n currentProgramId: PropTypes.string,\n};\n\nLoadCurrentProgramResponses.defaultProps = {\n currentProgramResponsesLoaded: false,\n currentProgramId: null,\n};\n\nconst mapStateToProps = state => ({\n currentProgramId: state.programStore.currentProgram ? state.programStore.currentProgram.id : null,\n currentProgramResponsesLoaded: Boolean(state.programStore.requests[PROGRAM_RESPONSES_RECEIVED]\n && state.programStore.requests[PROGRAM_RESPONSES_RECEIVED].completed),\n});\n\nconst mapDispatchToProps = dispatch => ({\n ...bindActionCreators(ProgramStore.actionCreators, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(LoadCurrentProgramResponses);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport * as AuthStore from '../../../app/store/AuthStore';\nimport Auth, { authTypes } from '../../../youwell-common/Auth';\n\nclass LoadProfileData extends React.Component {\n componentDidMount() {\n if (Auth.isUserAuthenticated(authTypes.user, authTypes.orgSelect) && !this.props.profileData) {\n this.props.getUserProfile();\n }\n }\n\n render() {\n return null;\n }\n}\n\nLoadProfileData.propTypes = {\n getUserProfile: PropTypes.func.isRequired,\n profileData: PropTypes.object,\n};\n\nLoadProfileData.defaultProps = {\n profileData: null,\n};\n\nconst mapStateToProps = state => ({\n profileData: state.auth.profileData,\n});\n\nconst mapDispatchToProps = dispatch => ({\n getUserProfile: bindActionCreators(AuthStore.actionCreators, dispatch).getUserProfile,\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(LoadProfileData);\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport { useDispatch } from 'react-redux';\nimport { Translate } from 'react-localize-redux';\nimport { Link } from 'react-router-dom';\n\nimport {\n Typography, Button, makeStyles, useTheme, CircularProgress,\n} from '@material-ui/core';\n\nimport * as UserStore from '../../../app/store/UserStore';\n\nimport urls from '../../../app/urls';\nimport apiUrls from '../../../youwell-common/apiUrls';\nimport { HtmlContent, Image } from '../../../youwell-common/components';\nimport { activityLabels } from '../../../common/constants';\nimport { useYouwellSelector } from '../../../app/store';\nimport useYouwellTranslate from '../../../app/localization/translate';\nimport { CheckMarkIcon } from '../../../common/icons';\nimport { getElementActionText, moduleBoxStyles } from './ModuleBoxWithOverlay';\n\nconst progressSize = 38;\nconst imageHeight = 180;\nconst defaultDescriptionHeight = 300;\n\nconst styles = theme => ({\n ...moduleBoxStyles(theme),\n root: {\n borderRadius: theme.youwell.shapes.borderRadius,\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n boxShadow: theme.youwell.shadows.default,\n },\n imageWrapper: {\n height: imageHeight,\n textAlign: 'center',\n },\n image: {\n maxWidth: '100%',\n maxheight: '100%',\n },\n colorCard: {\n height: imageHeight,\n },\n card: {\n backgroundColor: theme.palette.common.white,\n height: defaultDescriptionHeight,\n padding: theme.spacing(2),\n\n [theme.breakpoints.down('xs')]: {\n height: 'auto',\n },\n },\n actions: {\n flex: '1 1 auto',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'flex-end',\n },\n});\n\n\nconst useStyles = makeStyles(styles, { name: 'ModuleBoxFlat' });\n\nconst ModuleBoxFlat = ({\n element, index, className, isCurrent, programId, descriptionHeight,\n}) => {\n const dispatch = useDispatch();\n const classes = useStyles();\n const theme = useTheme();\n const translate = useYouwellTranslate();\n const patientId = useYouwellSelector(state => state.auth.profileData.id);\n const isActiveProgram = useYouwellSelector(state => state.programStore.currentProgram?.isActiveProgram);\n\n const clickElement = label => (e) => {\n if (element.disabled) {\n e.preventDefault();\n } else {\n dispatch(UserStore.actionCreators.sendActivity({\n pid: patientId,\n ppid: programId,\n l: label,\n start: new Date(),\n }));\n }\n }\n\n if (!element || !element.module) {\n return null;\n }\n\n const isCompletedElement = isActiveProgram && element.completed;\n const isCurrentElement = isActiveProgram && isCurrent;\n\n const module = element.module;\n const cardColors = [theme.youwell.colors.grayDark, theme.youwell.colors.grayMiddle, theme.youwell.colors.grayLight];\n\n const bottomColor = (isCurrentElement || isCompletedElement) ? theme.youwell.colors.primary : theme.youwell.colors.defaultBackground;\n const heightFromConfig = descriptionHeight?.length > 0 ? Number(descriptionHeight) : null;\n\n return (\n \n \n {title}\n \n
\n {element.module\n ? this.renderModule(element.module)\n : (\n \n
\n )}\n \n \n
\n\n \n
\n );\n}\n\nModuleBoxFlat.propTypes = {\n programId: PropTypes.string.isRequired,\n element: PropTypes.object.isRequired,\n index: PropTypes.number.isRequired,\n isCurrent: PropTypes.bool,\n className: PropTypes.string,\n descriptionHeight: PropTypes.string,\n};\n\nModuleBoxFlat.defaultProps = {\n className: null,\n isCurrent: false,\n descriptionHeight: null,\n};\n\nexport default ModuleBoxFlat;\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.getElementActionText = exports.moduleBoxStyles = void 0;\nvar React = __importStar(require(\"react\"));\nvar classnames_1 = __importDefault(require(\"classnames\"));\nvar react_redux_1 = require(\"react-redux\");\nvar react_localize_redux_1 = require(\"react-localize-redux\");\nvar react_router_dom_1 = require(\"react-router-dom\");\nvar core_1 = require(\"@material-ui/core\");\nvar UserStore = __importStar(require(\"../../../app/store/UserStore\"));\nvar apiUrls_1 = __importDefault(require(\"../../../youwell-common/apiUrls\"));\nvar components_1 = require(\"../../../youwell-common/components\");\nvar constants_1 = require(\"../../../common/constants\");\nvar store_1 = require(\"../../../app/store\");\nvar translate_1 = __importDefault(require(\"../../../app/localization/translate\"));\nvar youwell_common_1 = require(\"../../../youwell-common\");\nvar dateUtils_1 = require(\"../../../youwell-common/dateUtils\");\nvar backgroundColorStop = 180;\nvar progressSize = 38;\nvar moduleBoxStyles = function (theme) { return (0, core_1.createStyles)({\n root: {\n borderRadius: theme.youwell.shapes.borderRadius,\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n boxShadow: theme.youwell.shadows.default,\n minHeight: 400,\n backgroundSize: 'contain',\n backgroundRepeat: 'no-repeat',\n backgroundColor: '#A6D8DB',\n },\n card: {\n marginTop: 160,\n backgroundColor: theme.palette.common.white,\n width: '90%',\n },\n moduleTitle: {\n margin: theme.spacing(1),\n },\n description: {\n margin: theme.spacing(1),\n },\n actions: {\n flex: '1 1 auto',\n marginTop: theme.spacing(2),\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'flex-end',\n },\n startButton: {\n width: '60%',\n margin: theme.spacing(1),\n position: 'relative',\n '&$completed': {\n color: theme.youwell.colors.white,\n },\n },\n completed: {},\n active: {},\n circleProgress: {\n backgroundColor: theme.palette.secondary.main,\n color: theme.youwell.colors.highlight,\n borderRadius: theme.youwell.shapes.borderRadiusRounder,\n position: 'absolute',\n left: -2,\n },\n completeProgress: {\n color: theme.palette.secondary.main,\n },\n checkIcon: {\n color: theme.youwell.colors.white,\n position: 'absolute',\n left: 2,\n zIndex: 1,\n },\n shiftedModuleName: {\n marginLeft: progressSize / 2,\n },\n}); };\nexports.moduleBoxStyles = moduleBoxStyles;\nvar useStyles = (0, core_1.makeStyles)(exports.moduleBoxStyles, { name: 'ModuleBoxWithOverlay' });\nvar getElementActionText = function (el, translate, isCurrent, isActiveProgram) {\n if (!isActiveProgram) {\n return translate('dashboard.open');\n }\n if (el.completed) {\n return translate('dashboard.completed');\n }\n if (el.isNotStarted) {\n return translate('dashboard.moduleOpens', { date: (0, dateUtils_1.datestamp)(el.startTime) });\n }\n if (el.isEnded) {\n return translate('dashboard.moduleEnded');\n }\n if (el.prereqNotCompleted) {\n return translate('dashboard.notAvailableYet');\n }\n return isCurrent ? translate('dashboard.continue') : translate('dashboard.start');\n};\nexports.getElementActionText = getElementActionText;\nvar ModuleBoxWithOverlay = function (_a) {\n var _b;\n var element = _a.element, index = _a.index, className = _a.className, isCurrent = _a.isCurrent, programId = _a.programId, to = _a.to;\n var dispatch = (0, react_redux_1.useDispatch)();\n var classes = useStyles();\n var theme = (0, core_1.useTheme)();\n var translate = (0, translate_1.default)();\n var patientId = (0, store_1.useYouwellSelector)(function (state) { var _a; return (_a = state.auth.profileData) === null || _a === void 0 ? void 0 : _a.id; });\n var isActiveProgram = (0, store_1.useYouwellSelector)(function (state) { var _a; return (_a = state.programStore.currentProgram) === null || _a === void 0 ? void 0 : _a.isActiveProgram; });\n var clickElement = function (label) { return function (e) {\n if (youwell_common_1.Auth.isUserAuthenticated()) {\n if (element.disabled) {\n e.preventDefault();\n }\n else {\n dispatch(UserStore.actionCreators.sendActivity({\n pid: patientId,\n ppid: programId,\n l: label,\n start: new Date(),\n }));\n }\n }\n }; };\n if (!element || !element.module) {\n return null;\n }\n var isCompletedElement = isActiveProgram && element.completed;\n var isCurrentElement = isActiveProgram && isCurrent;\n var module = element.module;\n var cardColors = [theme.youwell.colors.grayDark, theme.youwell.colors.grayMiddle, theme.youwell.colors.grayLight];\n var bottomColor = theme.youwell.colors.defaultBackground;\n var style = {\n backgroundImage: \"linear-gradient(to bottom, \".concat(cardColors[index % cardColors.length], \" \").concat(backgroundColorStop, \"px, \").concat(bottomColor, \" \").concat(backgroundColorStop, \"px)\"),\n };\n if (module.moduleImageId) {\n style.backgroundImage = \"linear-gradient(to bottom, transparent \".concat(backgroundColorStop, \"px, \").concat(bottomColor, \" \").concat(backgroundColorStop, \"px), linear-gradient(to bottom, transparent \").concat(backgroundColorStop, \"px, white \").concat(backgroundColorStop, \"px), url('\").concat(apiUrls_1.default.baseUrl, \"/\").concat(apiUrls_1.default.media.file, \"/\").concat(module.moduleImageId, \"')\");\n }\n return (React.createElement(\"div\", { className: (0, classnames_1.default)(classes.root, className), style: style },\n React.createElement(\"div\", { className: (0, classnames_1.default)(classes.card) },\n React.createElement(core_1.Typography, { variant: \"subtitle2\", className: classes.moduleTitle }, element.name || (React.createElement(react_localize_redux_1.Translate, { id: \"dashboard.module\", data: { index: index + 1 } }))),\n React.createElement(components_1.HtmlContent, { html: module.description, className: classes.description })),\n React.createElement(\"div\", { className: classes.actions },\n React.createElement(core_1.Button, { variant: isCurrentElement ? 'contained' : 'outlined', color: \"secondary\", component: react_router_dom_1.Link, to: to, className: (0, classnames_1.default)(classes.startButton, (_b = {}, _b[classes.completed] = isCompletedElement, _b[classes.active] = isCurrentElement, _b)), size: \"small\", disabled: element.disabled, \"aria-label\": element.disabled ? translate('dashboard.unavailableModuleAria') : undefined, onClick: clickElement(\"\".concat(constants_1.activityLabels.dashboard.module, \"/\").concat(index)) }, translate('dashboard.start')))));\n};\nModuleBoxWithOverlay.defaultProps = {\n className: undefined,\n isCurrent: false,\n};\nexports.default = ModuleBoxWithOverlay;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\nimport classnames from 'classnames';\n\nimport {\n withStyles, Typography,\n} from '@material-ui/core';\n\nimport urls from '../../../app/urls';\nimport { TrackedLink } from '../../../common/components';\nimport { activityLabels } from '../../../common/constants';\n\nconst styles = theme => ({\n root: {\n background: theme.palette.grey[100],\n padding: theme.spacing(2, 4),\n },\n topContainer: {\n },\n title: {\n marginBottom: theme.spacing(2),\n fontWeight: 500,\n borderLeft: theme.youwell.borders.secondary,\n borderLeftWidth: 4,\n paddingLeft: theme.spacing(2),\n },\n description: {\n marginBottom: theme.spacing(4),\n },\n content: {\n },\n linkWrapper: {},\n linkButton: {\n display: 'inline-block',\n padding: theme.spacing(0, 1),\n marginBottom: theme.spacing(2),\n borderBottom: theme.youwell.borders.secondary,\n\n '&:hover': {\n borderColor: theme.youwell.colors.black,\n },\n },\n linkButtonText: {\n lineHeight: 1,\n },\n});\n\nclass ScheduledTasksBox extends React.Component {\n render() {\n const {\n classes, translate, className, elements,\n } = this.props;\n\n if (!elements || elements.length === 0) {\n return null;\n }\n\n return (\n \n {module.moduleImageId ? (\n
\n \n \n {element.name || ( \n\n
\n\n \n \n {isActiveProgram && (\n <>\n {isCompletedElement ? (\n <>\n
\n \n
\n );\n }\n}\n\nScheduledTasksBox.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n elements: PropTypes.array.isRequired,\n className: PropTypes.string,\n};\n\nScheduledTasksBox.defaultProps = {\n className: null,\n};\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n});\n\nexport default connect(mapStateToProps)(withStyles(styles)(ScheduledTasksBox));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\nimport classnames from 'classnames';\n\nimport { Link } from 'react-router-dom';\n\nimport {\n withStyles, Typography,\n} from '@material-ui/core';\n\nimport urls from '../../../app/urls';\nimport { patientProgramElementGroups } from '../../../common/constants';\n\nconst styles = theme => ({\n root: {\n background: theme.palette.grey[100],\n padding: theme.spacing(2),\n },\n topContainer: {\n },\n title: {\n marginBottom: theme.spacing(2),\n fontWeight: 500,\n },\n description: {\n marginBottom: theme.spacing(4),\n },\n content: {\n },\n\n tasks: {\n padding: theme.spacing(2),\n background: theme.palette.grey[100],\n minHeight: 300,\n },\n moduleTitle: {\n marginTop: theme.spacing(2),\n marginBottom: theme.spacing(1),\n borderBottom: theme.youwell.borders.dim,\n fontWeight: 500,\n },\n taskName: {\n paddingBottom: theme.spacing(0.5),\n marginLeft: theme.spacing(2),\n marginBottom: theme.spacing(0.5),\n borderBottom: theme.youwell.borders.dim,\n },\n\n\n});\n\nclass UnfinishedTasksBox extends React.Component {\n render() {\n const {\n classes, translate, className, elements,\n } = this.props;\n\n if (!elements || elements.length === 0) {\n return null;\n }\n\n return (\n \n \n {translate('dashboard.scheduledTasks')}\n \n \n {translate('dashboard.scheduledTasksDescription')}\n \n
\n \n {elements.map((element, index) => (\n
\n \n \n \n {element.name}\n \n \n
\n ))}\n \n
\n );\n }\n}\n\nUnfinishedTasksBox.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n elements: PropTypes.array.isRequired,\n className: PropTypes.string,\n};\n\nUnfinishedTasksBox.defaultProps = {\n className: null,\n};\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n});\n\nexport default connect(mapStateToProps)(withStyles(styles)(UnfinishedTasksBox));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { connect } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\nimport { bindActionCreators } from 'redux';\nimport classnames from 'classnames';\n\nimport {\n Button, Link, Typography,\n} from '@material-ui/core';\n\nimport {\n validateRequired, validateAllFields, validateFieldLecagy_TOBEREMOVED, checkHasErrors,\n} from '../../youwell-common/validationUtils';\n\n// import { UnreadIcon } from '../../common/icons';\n\nimport * as UserStore from '../../app/store/UserStore';\nimport { timestamp } from '../../youwell-common/dateUtils';\nimport { HtmlContent, Image, PollData } from '../../youwell-common/components';\nimport { FileUpload, PageLayout, PortalModal, TextEditor } from '../../common/components';\nimport { getBreadCrumb } from '../../common/breadcrumbUtil';\nimport apiUrls from '../../youwell-common/apiUrls';\nimport { fileTypes } from '../../youwell-common/constants';\n\nconst POLLING_INTERVAL_IN_MINUTES = 1;\nconst NUMBER_OF_MESSAGES_TO_LOAD = 20;\n\nconst styles = theme => ({\n root: {\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n },\n list: {\n flex: '1 1 auto',\n height: '100%',\n overflow: 'auto',\n padding: theme.spacing(2),\n },\n actions: {\n marginTop: theme.spacing(2),\n },\n textInput: {\n background: theme.youwell.colors.inputBackground,\n },\n sendLine: {\n marginTop: theme.spacing(1),\n display: 'flex',\n justifyContent: 'flex-end',\n\n [theme.breakpoints.down('xs')]: {\n flexWrap: 'wrap',\n },\n },\n attachFile: {\n marginRight: theme.spacing(2),\n\n [theme.breakpoints.down('xs')]: {\n marginRight: 0,\n marginBottom: theme.spacing(1),\n width: '100%',\n },\n },\n messageList: {\n\n },\n message: {\n marginBottom: theme.spacing(2),\n },\n textLine: {\n display: 'flex',\n alignItems: 'center',\n },\n lineFill: {\n flex: '1 0 20%',\n },\n textBox: {\n padding: theme.spacing(2),\n borderRadius: theme.youwell.shapes.borderRadius,\n },\n textarea: {\n height: 105,\n [theme.breakpoints.down('xs')]: {\n height: 55,\n },\n },\n fromPatient: {\n background: theme.youwell.colors.secondaryBackground,\n color: theme.palette.common.primary,\n },\n fromOther: {\n background: theme.youwell.colors.white,\n color: theme.youwell.colors.primary,\n },\n date: {\n marginRight: theme.spacing(1),\n marginLeft: theme.spacing(1),\n },\n unreadIcon: {\n opacity: 0.54,\n },\n image: {\n width: '100%',\n },\n attachedFileButton: {\n textTransform: 'none',\n textDecoration: 'underline',\n borderRadius: 0,\n },\n});\n\nconst defaultState = {\n text: '',\n attachmentFileId: '',\n showAttachedFile: null,\n};\n\nconst validators = {\n text: validateRequired,\n};\n\nconst createInitialState = () => ({\n ...defaultState,\n validationErrors: {},\n});\n\nclass MessageList extends React.Component {\n state = createInitialState();\n\n componentDidMount() {\n this.markAsReadIfAny();\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.messagesTimestamp !== prevProps.messagesTimestamp) {\n this.markAsReadIfAny();\n\n setTimeout(() => {\n document.getElementById('scrollList').scroll({\n top: document.getElementById('scrollList').scrollHeight,\n behavior: 'smooth',\n });\n }, 200);\n }\n }\n\n getMessagesInitial = () => {\n this.props.checkForNewMessages({\n requestParams: {\n count: NUMBER_OF_MESSAGES_TO_LOAD,\n },\n });\n }\n\n checkForMessages = () => {\n this.props.checkForNewMessages({\n background: true,\n requestParams: {\n timeStamp: this.props.messagesTimestamp,\n },\n });\n }\n\n fetchMoreMessages = () => {\n this.props.checkForNewMessages({\n requestParams: {\n start: this.props.messageList.length,\n count: NUMBER_OF_MESSAGES_TO_LOAD,\n },\n });\n }\n\n markAsReadIfAny = () => {\n if (this.props.messageList && this.props.messageList.filter(d => !d.patientReadTime).length > 0) {\n this.props.markMessagesAsRead(this.props.messagesTimestamp, {\n background: true,\n reducerParams: { timestamp: this.props.messagesTimestamp },\n });\n }\n }\n\n handleChange = name => (event) => {\n this.setState({ [name]: event.target.value }, () => {\n if (validators[name]) {\n const validationErrors = validateFieldLecagy_TOBEREMOVED(this.state, validators[name], name); // eslint-disable-line react/no-access-state-in-setstate\n this.setState({ validationErrors });\n }\n });\n }\n\n sendMessage = () => {\n const validationErrors = validateAllFields(this.state, validators);\n\n if (!checkHasErrors(validationErrors)) {\n const data = {\n patientId: this.props.profile.id,\n text: this.state.text,\n attachedFileId: this.state.attachmentFileId,\n checkTimeStamp: this.props.messagesTimestamp,\n };\n\n this.props.insertMessage(data, {\n callback: () => {\n this.setState(createInitialState());\n },\n });\n } else {\n this.setState({ validationErrors });\n }\n }\n\n onSelectFile = (file) => {\n this.setState({ attachmentFileId: file?.id });\n }\n\n showAttachedFile = attachedFile => (event) => {\n if (attachedFile?.type === fileTypes.image) {\n this.setState({ showAttachedFile: attachedFile });\n event.preventDefault();\n } else {\n this.setState({ showAttachedFile: null });\n }\n }\n\n render() {\n const {\n classes, translate, messageList, profile, clientConfig, canLoadMoreMessages, appConfig,\n } = this.props;\n\n if (!profile) {\n return null;\n }\n\n return (\n \n \n {translate('dashboard.unfinishedTasks')}\n \n \n {translate('dashboard.unfinishedTasksDescription')}\n \n
\n \n {elements.map(element => (\n
\n \n \n \n {`${this.props.translate('favourites.module')}: ${element.moduleName}`}\n \n \n {element.tasks.map(task => (\n \n \n {task.name}\n \n \n ))}\n
\n ))}\n \n \n {translate('chat.sendMessageToTherapist')}\n \n\n
\n\n \n {clientConfig.appSetup.features.allowFileUpload && (\n
\n \n \n {this.state.showAttachedFile && (\n \n\n {messageList?.map(item => (\n
\n\n {canLoadMoreMessages && (\n \n )}\n\n \n );\n }\n}\n\nMessageList.propTypes = {\n classes: PropTypes.object.isRequired,\n clientConfig: PropTypes.object.isRequired,\n profile: PropTypes.object,\n translate: PropTypes.func.isRequired,\n checkForNewMessages: PropTypes.func.isRequired,\n markMessagesAsRead: PropTypes.func.isRequired,\n messageList: PropTypes.array,\n insertMessage: PropTypes.func.isRequired,\n messagesTimestamp: PropTypes.string,\n canLoadMoreMessages: PropTypes.bool.isRequired,\n appConfig: PropTypes.object.isRequired,\n};\n\nMessageList.defaultProps = {\n messageList: null,\n profile: null,\n messagesTimestamp: null,\n};\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n profile: state.auth.profileData,\n messageList: state.user.messageList,\n canLoadMoreMessages: !state.user.allMessagesFetched,\n clientConfig: state.auth.clientConfig,\n messagesTimestamp: state.user.messagesTimestamp,\n appConfig: state.pageSettings.appConfig,\n});\n\nconst mapDispatchToProps = dispatch => ({\n ...bindActionCreators(UserStore.actionCreators, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(MessageList));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { getTranslate, withLocalize } from 'react-localize-redux';\nimport { useParams } from 'react-router-dom';\nimport {\n Button, Typography, CircularProgress, makeStyles,\n} from '@material-ui/core';\n\nimport * as AuthStore from '../../app/store/AuthStore';\nimport Auth from '../../youwell-common/Auth';\nimport urls from '../../app/urls';\nimport { programLanguages } from '../../common/constants';\nimport { storeLanguagePreferance } from '../../app/localization';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n },\n\n login_container: {\n padding: theme.spacing(2),\n },\n\n loginBox: {\n margin: theme.spacing(2, 0),\n position: 'relative',\n },\n loginButtons: {\n margin: theme.spacing(4, 0),\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n justifyContent: 'center',\n },\n loginButton: {\n flex: '0 0 calc(66% - 16px)',\n margin: theme.spacing(2, 1),\n },\n\n loading: {\n position: 'absolute',\n left: '50%',\n top: '50%',\n transform: 'translate(-50%, 0)',\n },\n infoContainer: {\n marginTop: theme.spacing(4),\n color: theme.youwell.colors.secondary,\n },\n}), { name: 'CountrySelect' });\n\n\nconst CountrySelect = ({ setActiveLanguage }) => {\n const classes = useStyles();\n const params = useParams();\n const dispatch = useDispatch();\n const translate = useSelector(state => getTranslate(state.localize));\n const loading = useSelector(state => state.auth.loading);\n const errorMessage = useSelector(state => [].concat(state.auth.errors).filter(val => val).join('\n {this.state.showAttachedFile.type === fileTypes.image ? (\n
\n )}\n \n {item.attachedFileId && (\n \n {`${translate('chat.attachedFile')}: ${translate(`filetypes.${item.attachedFileType}`)}`}\n \n )}\n\n \n {item.senderIsPatient ? translate('chat.you') : item.senderName}\n \n
\n ))}\n \n {!item.senderIsPatient && (\n <>\n \n \n {timestamp(item.created)}\n \n \n )}\n\n \n \n {timestamp(item.created)}\n \n \n \n )}\n
\n\n '));\n const appConfig = useSelector(state => state.pageSettings.appConfig);\n const logoutReason = useSelector(state => state.auth.logoutReason);\n const redirect = params.redirect ? decodeURIComponent(params.redirect) : urls.inside.home;\n\n const [isLoggingIn, setIsLoggingIn] = React.useState(false);\n\n const startNewSession = language => () => {\n setIsLoggingIn(true);\n setActiveLanguage(language);\n storeLanguagePreferance(language);\n const programId = appConfig?.startProgram?.[language];\n dispatch(AuthStore.actionCreators.startNewSession({\n orgId: appConfig?.orgId,\n programId,\n programStartDate: new Date(),\n includeCurrentProgramInResponse: true,\n }, { redirect, useSessionWithoutLifetime: true }));\n };\n\n const isLoggedIn = Auth.isUserAuthenticated();\n\n React.useEffect(() => {\n if (isLoggingIn) {\n return;\n }\n\n if (isLoggedIn) {\n setIsLoggingIn(true);\n dispatch(AuthStore.actionCreators.getUserProfile({ redirect }));\n }\n }, [appConfig.orgId, dispatch, isLoggedIn, isLoggingIn, redirect]);\n\n return (\n
\n
\n );\n};\n\nCountrySelect.propTypes = {\n setActiveLanguage: PropTypes.func.isRequired,\n};\n\nexport default withLocalize(CountrySelect);\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { withLocalize } from 'react-localize-redux';\nimport { useParams } from 'react-router-dom';\nimport {\n CircularProgress, makeStyles,\n} from '@material-ui/core';\n\nimport * as AuthStore from '../../app/store/AuthStore';\nimport Auth from '../../youwell-common/Auth';\nimport urls from '../../app/urls';\nimport { storeLanguagePreferance } from '../../app/localization';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n },\n\n login_container: {\n padding: theme.spacing(2),\n },\n\n loginBox: {\n margin: theme.spacing(2, 0),\n position: 'relative',\n },\n loginButtons: {\n margin: theme.spacing(4, 0),\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n justifyContent: 'center',\n },\n loginButton: {\n flex: '0 0 calc(66% - 16px)',\n margin: theme.spacing(2, 1),\n },\n\n loading: {\n position: 'absolute',\n left: '50%',\n top: '50%',\n transform: 'translate(-50%, 0)',\n },\n infoContainer: {\n marginTop: theme.spacing(4),\n color: theme.youwell.colors.secondary,\n },\n}), { name: 'GoToCountry' });\n\n\nconst GoToCountry = ({ setActiveLanguage }) => {\n const classes = useStyles();\n const params = useParams();\n const dispatch = useDispatch();\n const appConfig = useSelector(state => state.pageSettings.appConfig);\n const redirect = params.redirect ? decodeURIComponent(params.redirect) : urls.inside.home;\n\n React.useEffect(() => {\n const language = appConfig?.language;\n const programId = appConfig?.startProgram?.[language];\n setActiveLanguage(language);\n storeLanguagePreferance(language);\n const isLoggedIn = Auth.isUserAuthenticated();\n\n if (isLoggedIn) {\n dispatch(AuthStore.actionCreators.getUserProfile({ redirect, programId }));\n } else {\n dispatch(AuthStore.actionCreators.startNewSession({\n orgId: appConfig?.orgId,\n programId,\n programStartDate: new Date(),\n includeCurrentProgramInResponse: true,\n }, { redirect, useSessionWithoutLifetime: true }));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n \n
\n \n {loading && (\n
\n \n
\n )}\n\n \n {programLanguages.map(lang => (\n \n ))}\n
\n\n \n {logoutReason && (\n \n {translate(`errors.${logoutReason}`, null, { onMissingTranslation: () => '' })}\n \n )}\n {errorMessage && (\n \n {translate(`errors.${errorMessage}`, null, { onMissingTranslation: () => `System error (${errorMessage})` })}\n \n )}\n
\n\n \n
\n );\n};\n\nGoToCountry.propTypes = {\n setActiveLanguage: PropTypes.func.isRequired,\n};\n\nexport default withLocalize(GoToCountry);\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport {\n Route, Switch,\n} from 'react-router-dom';\nimport { withStyles } from '@material-ui/core/styles';\nimport { Typography } from '@material-ui/core';\nimport { getTranslate } from 'react-localize-redux';\n\n// import Login from './components/Login';\n// import Logout from './components/Logout';\n// import ResetPassword from './components/ResetPassword';\n// import ForgotPassword from './components/ForgotPassword';\nimport urls from '../../app/urls';\nimport { scrollerWidth } from '../../app/style/theme';\nimport { heightBreak } from './components/constants';\nimport { ErrorBoundary } from '../../youwell-common/components';\nimport CountrySelect from './CountrySelect';\nimport GoToCountry from './GoToCountry';\n// import SelectOrg from './components/SelectOrg';\n\nconst topPadding = 200;\nconst topPaddingHeightBreak = 280;\n\nconst styles = theme => ({\n root: {\n position: 'relative',\n margin: '0 auto',\n height: '100%',\n width: '100%',\n border: theme.youwell.borders.dim,\n background: theme.palette.background.default,\n overflow: 'hidden',\n\n [theme.breakpoints.down('xs')]: {\n border: 'none',\n height: 'auto',\n overflow: 'auto',\n },\n\n [theme.breakpoints.up('lg')]: {\n width: theme.breakpoints.values.lg - scrollerWidth,\n },\n },\n header: {\n height: topPadding,\n background: theme.palette.background.inner,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'flex-end',\n paddingBottom: theme.spacing(5),\n\n [heightBreak]: {\n height: topPaddingHeightBreak,\n },\n\n [theme.breakpoints.down('xs')]: {\n height: 'auto',\n paddingBottom: 0,\n },\n\n },\n titleLogo: {\n maxHeight: 180,\n maxWidth: 500,\n\n [theme.breakpoints.down('xs')]: {\n marginTop: theme.spacing(4),\n maxHeight: 100,\n maxWidth: '90%',\n },\n },\n appTitle: {\n fontWeight: theme.typography.fontWeightMedium,\n paddingTop: 100,\n color: theme.palette.primary.main,\n\n [theme.breakpoints.down('xs')]: {\n paddingTop: 50,\n },\n },\n content: {\n width: 500,\n position: 'absolute',\n zIndex: 10,\n top: topPadding,\n left: '50%',\n backgroundImage: 'linear-gradient(to bottom, white 30%, rgba(255,255,255,0))',\n background: theme.palette.common.white,\n transform: 'translate(-50%, 0)',\n border: theme.youwell.borders.dim,\n borderRadius: 24,\n padding: theme.spacing(4),\n boxShadow: theme.shadows[5],\n minHeight: 300,\n maxHeight: `calc(100vh - ${topPadding}px - 50px)`,\n overflowY: 'auto',\n\n [heightBreak]: {\n maxHeight: `calc(100vh - ${topPaddingHeightBreak}px - 50px)`,\n top: topPaddingHeightBreak,\n },\n\n [theme.breakpoints.down('xs')]: {\n position: 'relative',\n width: '100%',\n left: 0,\n top: 0,\n transform: 'none',\n border: 0,\n borderRadius: 0,\n padding: theme.spacing(2),\n boxShadow: 'none',\n minHeight: 'auto',\n maxHeight: 'none',\n overflowY: 'inherit',\n },\n },\n errorMessage: {\n marginTop: theme.spacing(2),\n },\n appError: {\n },\n});\n\nclass Index extends React.Component {\n render() {\n const { classes, appConfig } = this.props;\n\n const defaultPage = appConfig.language ? GoToCountry : CountrySelect;\n\n return (\n \n
\n \n
\n \n
\n \n {/* \n */}\n\n
\n );\n }\n}\n\nIndex.propTypes = {\n classes: PropTypes.object.isRequired,\n appConfig: PropTypes.object.isRequired,\n // translate: PropTypes.func.isRequired,\n};\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n appConfig: state.pageSettings.appConfig,\n});\n\nexport default connect(mapStateToProps)(withStyles(styles)(Index));\n","\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar react_router_dom_1 = require(\"react-router-dom\");\nvar core_1 = require(\"@material-ui/core\");\nvar AuthStore = __importStar(require(\"../../../app/store/AuthStore\"));\nvar ProgramStore = __importStar(require(\"../../../app/store/ProgramStore\"));\nvar Auth_1 = __importStar(require(\"../../../youwell-common/Auth\"));\nvar urls_1 = __importDefault(require(\"../../../app/urls\"));\nvar apiUrls_1 = __importDefault(require(\"../../../youwell-common/apiUrls\"));\nvar constants_1 = require(\"./constants\");\nvar constants_2 = require(\"../../../youwell-common/constants\");\nvar arrayUtils_1 = require(\"../../../youwell-common/arrayUtils\");\nvar dateUtils_1 = require(\"../../../youwell-common/dateUtils\");\nvar store_1 = require(\"../../../app/store\");\nvar translate_1 = __importDefault(require(\"../../../app/localization/translate\"));\nvar externalUserService_1 = require(\"../../../app/services/externalUserService\");\nvar TABS = __assign(__assign({}, constants_2.loginTypes), { serverLogin: 'serverlogin' });\nvar useStyles = (0, core_1.makeStyles)(function (theme) {\n var _a;\n return ({\n root: {},\n tab: {\n minWidth: 80,\n },\n login_container: (_a = {\n padding: theme.spacing(2, 4, 0)\n },\n _a[constants_1.heightBreak] = {\n padding: theme.spacing(4),\n },\n _a[theme.breakpoints.down('xs')] = {\n padding: theme.spacing(2),\n },\n _a),\n loginHeader: {},\n loginBox: {\n margin: theme.spacing(2, 0),\n position: 'relative',\n },\n loginDescription: {\n color: theme.palette.grey[700],\n marginTop: theme.spacing(3),\n marginBottom: theme.spacing(3),\n },\n textField: {\n marginBottom: theme.spacing(3),\n background: theme.palette.grey[50],\n },\n loginButton: {\n marginTop: theme.spacing(4),\n padding: theme.spacing(1),\n },\n forgotPassword: {\n marginTop: theme.spacing(1),\n marginRight: theme.spacing(1),\n },\n loading: {\n position: 'absolute',\n left: '50%',\n top: '50%',\n transform: 'translate(-50%, 0)',\n },\n infoContainer: {\n marginTop: theme.spacing(4),\n color: theme.youwell.colors.secondary,\n },\n backLinkContainer: {\n marginTop: theme.spacing(6),\n display: 'flex',\n justifyContent: 'flex-end',\n },\n backLink: {\n textDecoration: 'underline',\n },\n });\n}, { name: 'Login' });\nvar Login = function () {\n var _a, _b, _c;\n var classes = useStyles();\n var params = (0, react_router_dom_1.useParams)();\n var dispatch = (0, store_1.useYouwellDispatch)();\n var translate = (0, translate_1.default)();\n var loading = (0, store_1.useYouwellSelector)(function (state) { return state.auth.loading; });\n var errorMessage = (0, store_1.useYouwellSelector)(function (state) { return [].concat(state.auth.errors).filter(function (val) { return val; }).join('\n {appConfig.titleLogo ? (\n \n {translate('header.title')}\n \n )}\n
\n \n \n \n \n \n
\n \n \n {appConfig.appError}\n \n
\n '); });\n var appConfig = (0, store_1.useYouwellSelector)(function (state) { return state.pageSettings.appConfig; });\n var logoutReason = (0, store_1.useYouwellSelector)(function (state) { return state.auth.logoutReason; });\n var redirect = params.redirect ? decodeURIComponent(params.redirect) : urls_1.default.inside.home;\n var externalRouteMatch = (0, react_router_dom_1.useRouteMatch)(\"\".concat(urls_1.default.login, \"/\").concat(urls_1.default.loginParts.external));\n var _d = React.useState(''), email = _d[0], setEmail = _d[1];\n var _e = React.useState(''), password = _e[0], setPassword = _e[1];\n var _f = React.useState((_b = (_a = appConfig === null || appConfig === void 0 ? void 0 : appConfig.allowedLogins) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : TABS.password), tab = _f[0], setTab = _f[1];\n var _g = React.useState(false), isLoggingIn = _g[0], setIsLoggingIn = _g[1];\n var login = function () {\n setIsLoggingIn(true);\n dispatch(AuthStore.actionCreators.login({\n email: email,\n password: password,\n orgId: appConfig === null || appConfig === void 0 ? void 0 : appConfig.orgId,\n }, { redirect: redirect }));\n };\n var startNewSession = function () {\n setIsLoggingIn(true);\n dispatch(AuthStore.actionCreators.startNewSession({\n orgId: appConfig.orgId,\n programId: appConfig.startProgramId,\n programStartDate: (0, dateUtils_1.today)(),\n }, { redirect: redirect }));\n };\n var allowedLogins = (0, arrayUtils_1.toBoolLookup)(appConfig.allowedLogins);\n var isLoggedIn = Auth_1.default.isUserAuthenticated();\n React.useEffect(function () {\n if (isLoggingIn) {\n return;\n }\n if (params.accessKey) {\n setIsLoggingIn(true);\n dispatch(AuthStore.actionCreators.loginWithAccessKey({\n key: params.accessKey,\n orgId: appConfig === null || appConfig === void 0 ? void 0 : appConfig.orgId,\n }, { redirect: redirect }));\n }\n else if (params.code) {\n setIsLoggingIn(true);\n var loginState = {\n code: params.code,\n provider: params.provider,\n state: params.state,\n orgId: appConfig === null || appConfig === void 0 ? void 0 : appConfig.orgId,\n appParameters: params.appParameters,\n day: (0, dateUtils_1.today)(),\n };\n if (params.appParameters === 'ext') {\n (0, externalUserService_1.loginExternalUser)(dispatch, loginState, { redirect: redirect });\n }\n else {\n dispatch(AuthStore.actionCreators.loginWithCode(loginState, { redirect: redirect }));\n }\n }\n else if (isLoggedIn) {\n var loggedInType = Auth_1.default.getLoginType();\n switch (loggedInType) {\n case Auth_1.authTypes.user: {\n setIsLoggingIn(true);\n dispatch(AuthStore.actionCreators.getUserProfile({ redirect: redirect }));\n break;\n }\n case Auth_1.authTypes.external: {\n var extRedirect = params.redirect && params.redirect.startsWith(urls_1.default.external.home) ? decodeURIComponent(params.redirect) : urls_1.default.external.home;\n dispatch(ProgramStore.actionCreators.redirect(extRedirect));\n break;\n }\n case Auth_1.authTypes.orgSelect: {\n dispatch(ProgramStore.actionCreators.redirect(\"\".concat(urls_1.default.login, \"/\").concat(urls_1.default.loginParts.selectOrg)));\n break;\n }\n case Auth_1.authTypes.public:\n default: {\n dispatch(AuthStore.actionCreators.logout(constants_2.logoutReasons.invalidState));\n }\n }\n }\n }, [appConfig === null || appConfig === void 0 ? void 0 : appConfig.orgId, dispatch, isLoggedIn, isLoggingIn, params, params.accessKey, params.code, params.provider, params.state, redirect]);\n var onEnter = function (action) { return function (e) {\n if (e.key === 'Enter' && email && password) {\n action();\n }\n }; };\n var appLoginParameters = externalRouteMatch ? '?appParameters=ext' : '';\n var currentTab = isLoggedIn || params.code || params.accessKey ? TABS.serverLogin : tab;\n var hasMultipleLoginOptions = ((_c = appConfig.allowedLogins) === null || _c === void 0 ? void 0 : _c.length) > 1;\n return (React.createElement(\"div\", { className: classes.root },\n React.createElement(\"div\", { className: classes.login_container },\n hasMultipleLoginOptions && currentTab !== TABS.serverLogin && (React.createElement(core_1.Tabs, { className: classes.tabs, value: currentTab, onChange: function (e, newTab) { return setTab(newTab); }, variant: \"fullWidth\" },\n allowedLogins[constants_2.loginTypes.password] && React.createElement(core_1.Tab, { classes: { root: classes.tab }, label: translate('email'), value: TABS.password }),\n allowedLogins[constants_2.loginTypes.idPorten] && React.createElement(core_1.Tab, { classes: { root: classes.tab }, label: \"IDPorten\", value: TABS.idPorten }),\n allowedLogins[constants_2.loginTypes.selfStart] && React.createElement(core_1.Tab, { classes: { root: classes.tab }, label: translate('start'), value: TABS.selfStart }))),\n React.createElement(\"div\", { className: classes.loginBox },\n loading && (React.createElement(\"div\", { className: classes.loading },\n React.createElement(core_1.CircularProgress, null))),\n currentTab === TABS.password && (React.createElement(React.Fragment, null,\n React.createElement(core_1.TextField, { id: \"email\", type: \"email\", className: classes.textField, value: email, onChange: function (e) { return setEmail(e.target.value); }, variant: \"outlined\", fullWidth: true, InputProps: {\n onKeyPress: onEnter(login),\n startAdornment: React.createElement(core_1.InputAdornment, { disablePointerEvents: true, position: \"start\" }, \"\".concat(translate('email'), \": \")),\n } }),\n React.createElement(core_1.TextField, { id: \"password\", type: \"password\", className: classes.textField, value: password, onChange: function (e) { return setPassword(e.target.value); }, variant: \"outlined\", fullWidth: true, InputProps: {\n onKeyPress: onEnter(login),\n startAdornment: React.createElement(core_1.InputAdornment, { disablePointerEvents: true, position: \"start\" }, \"\".concat(translate('password'), \": \")),\n } }),\n React.createElement(core_1.Button, { onClick: login, variant: \"contained\", fullWidth: true, color: \"primary\", className: classes.loginButton, disabled: loading }, translate('login.login')),\n React.createElement(react_router_dom_1.Link, { to: \"\".concat(urls_1.default.login, \"/\").concat(urls_1.default.loginParts.forgotPassword) },\n React.createElement(core_1.Typography, { variant: \"body2\", align: \"right\", className: classes.forgotPassword, display: \"block\" }, translate('login.forgotPassword'))))),\n currentTab === TABS.idPorten && (React.createElement(React.Fragment, null,\n React.createElement(core_1.Typography, { color: \"inherit\", className: classes.loginDescription }, translate('login.idportenDescription', { appname: appConfig.appName })),\n React.createElement(core_1.Button, { variant: \"contained\", fullWidth: true, color: \"primary\", className: classes.loginButton, href: \"\".concat(apiUrls_1.default.baseUrl, \"/\").concat(apiUrls_1.default.route.oauth, \"/login/\").concat(constants_2.IdProviders.idPorten, \"/\").concat(appLoginParameters), disabled: loading }, translate('login.loginWithIdporten')))),\n currentTab === TABS.selfStart && (React.createElement(React.Fragment, null,\n React.createElement(core_1.Typography, { color: \"inherit\", className: classes.loginDescription }, translate('login.selfStartDescription', { appname: appConfig.appName })),\n React.createElement(core_1.Button, { onClick: startNewSession, variant: \"contained\", fullWidth: true, color: \"primary\", className: classes.loginButton, disabled: loading }, translate('login.start')))),\n currentTab === TABS.serverLogin && (React.createElement(React.Fragment, null,\n React.createElement(core_1.Typography, { color: \"inherit\", className: classes.loginDescription }, translate('login.loginInProgress')))),\n React.createElement(\"div\", { className: classes.infoContainer },\n logoutReason && (React.createElement(core_1.Typography, { color: \"inherit\", gutterBottom: true }, translate(\"errors.\".concat(logoutReason), undefined, { onMissingTranslation: function () { return translate('login.youHaveBeenLoggedOut'); } }))),\n errorMessage && (React.createElement(React.Fragment, null,\n React.createElement(core_1.Typography, { color: \"error\", align: \"center\", display: \"block\" }, errorMessage === '1065' && currentTab === TABS.serverLogin\n ? translate('login.serverLoginFailed')\n : translate(\"errors.\".concat(errorMessage), undefined, { onMissingTranslation: function () { return \"System error (\".concat(errorMessage, \")\"); } })))),\n currentTab === TABS.serverLogin && (React.createElement(\"div\", { className: classes.backLinkContainer },\n React.createElement(\"a\", { href: urls_1.default.logout, className: classes.backLink }, translate('login.backToFrontPage')))))))));\n};\nexports.default = Login;\n","export const tmp = null;\r\nexport const heightBreak = '@media screen and (min-height: 800px)';\r\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.contentWidth = void 0;\nvar React = __importStar(require(\"react\"));\nvar react_router_dom_1 = require(\"react-router-dom\");\nvar core_1 = require(\"@material-ui/core\");\nvar translate_1 = __importDefault(require(\"../../app/localization/translate\"));\nvar TaskPage_1 = __importDefault(require(\"./TaskPage\"));\nvar components_1 = require(\"../../youwell-common/components\");\nvar store_1 = require(\"../../app/store\");\nvar urls_1 = __importDefault(require(\"../../app/urls\"));\nvar ProgramPage_1 = __importDefault(require(\"./ProgramPage\"));\nvar components_2 = require(\"../../common/components\");\nvar theme_1 = require(\"../../app/style/theme\");\nvar appSetup_1 = require(\"../../app/appSetup\");\nvar Login_1 = __importDefault(require(\"../outside/components/Login\"));\nvar ProgramSelect_1 = __importDefault(require(\"./ProgramSelect\"));\nexports.contentWidth = 1080;\nvar useStyles = (0, core_1.makeStyles)(function (theme) {\n var _a, _b, _c;\n return (0, core_1.createStyles)({\n root: {\n background: theme.palette.background.default,\n display: 'flex',\n justifyContent: 'center',\n },\n header: (_a = {\n position: 'fixed',\n width: '100vw',\n paddingRight: theme_1.scrollerWidth,\n height: theme_1.headerHeight,\n background: theme.palette.primary.main,\n display: 'flex',\n justifyContent: 'center',\n zIndex: 100\n },\n _a[theme.breakpoints.down('xs')] = {\n paddingRight: 0,\n },\n _a['@media print'] = {\n display: 'none',\n },\n _a),\n headerContent: (_b = {\n width: '100%',\n maxWidth: exports.contentWidth\n },\n _b[theme.breakpoints.up('lg')] = {\n width: exports.contentWidth - theme_1.scrollerWidth,\n },\n _b),\n content: (_c = {\n marginTop: theme_1.headerHeight,\n width: '100%',\n minHeight: '100vh',\n maxWidth: exports.contentWidth\n },\n // background: theme.palette.common.white,\n // boxShadow: theme.shadows[1],\n _c[theme.breakpoints.up('lg')] = {\n width: exports.contentWidth - theme_1.scrollerWidth,\n },\n _c[theme.breakpoints.down('xs')] = {\n boxShadow: 'none',\n minHeight: 0,\n },\n _c['@media print'] = {\n marginTop: 0,\n minHeight: 0,\n },\n _c),\n mainContent: {},\n });\n});\nvar Index = function () {\n var classes = useStyles();\n var translate = (0, translate_1.default)();\n var pageNotFound = (0, store_1.useYouwellSelector)(function (state) { return state.pageSettings.pageNotFound; });\n var _a = React.useState(false), showLoginBox = _a[0], setShowLoginBox = _a[1];\n return (React.createElement(\"div\", { className: classes.root },\n React.createElement(components_1.ErrorBoundary, { id: \"OutsideLayout_Header\" },\n React.createElement(\"div\", { className: classes.header },\n React.createElement(\"div\", { className: classes.headerContent },\n React.createElement(components_2.Header, { hideMenu: true, hideLinks: true, defaultItems: [appSetup_1.headerItems.title, appSetup_1.headerItems.flex, appSetup_1.headerItems.customActions], headerActions: [{ text: translate('login.login'), action: function () { return setShowLoginBox(true); } }] })))),\n React.createElement(\"div\", { className: classes.content },\n React.createElement(components_1.ErrorBoundary, { id: \"OutsideLayout_Content\" }, pageNotFound ? (React.createElement(components_1.PageNotFound, null)) : (React.createElement(React.Fragment, null,\n React.createElement(\"div\", { className: classes.mainContent },\n React.createElement(react_router_dom_1.Switch, null,\n React.createElement(react_router_dom_1.Route, { path: \"\".concat(urls_1.default.outsideProgram.task, \"/:programId/:moduleIndex/:taskIndex\"), component: TaskPage_1.default }),\n React.createElement(react_router_dom_1.Route, { path: \"\".concat(urls_1.default.outsideProgram.program, \"/:programId?\"), component: ProgramPage_1.default }),\n React.createElement(react_router_dom_1.Route, { path: urls_1.default.outsideProgram.programSelect, component: ProgramSelect_1.default }),\n React.createElement(react_router_dom_1.Route, { component: ProgramSelect_1.default }))))))),\n React.createElement(components_1.ErrorBoundary, { id: \"OutsideLayout_Login\" },\n React.createElement(components_2.PortalModal, { open: showLoginBox, onClose: function () { return setShowLoginBox(false); }, heading: translate('login.login') },\n React.createElement(Login_1.default, null)))));\n};\nexports.default = Index;\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar react_1 = __importStar(require(\"react\"));\nvar core_1 = require(\"@material-ui/core\");\nvar react_router_1 = require(\"react-router\");\nvar components_1 = require(\"../../youwell-common/components\");\nvar urls_1 = __importDefault(require(\"../../app/urls\"));\nvar outsideService_1 = require(\"../../app/services/outsideService\");\nvar store_1 = require(\"../../app/store\");\nvar ModuleBoxWithOverlay_1 = __importDefault(require(\"../inside/components/ModuleBoxWithOverlay\"));\nvar components_2 = require(\"../../common/components\");\nvar useStyles = (0, core_1.makeStyles)(function (theme) {\n var _a, _b, _c, _d;\n return (0, core_1.createStyles)({\n root: (_a = {\n padding: theme.spacing(6, 12)\n },\n _a[theme.breakpoints.down('sm')] = {\n padding: theme.spacing(3, 4.5),\n },\n _a[theme.breakpoints.down('xs')] = {\n padding: theme.spacing(1.5),\n },\n _a),\n content: {\n marginTop: theme.spacing(8),\n },\n modules: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n moduleTitle: {\n borderLeft: theme.youwell.borders.secondary,\n borderLeftWidth: 4,\n paddingLeft: theme.spacing(2),\n marginBottom: theme.spacing(2),\n outline: 'none',\n },\n module: (_b = {\n flexBasis: \"calc(-\".concat(theme.spacing(4), \"px + 33.3333%)\"),\n marginBottom: theme.spacing(4),\n '&:nth-child(3n+2)': (_c = {},\n _c[theme.breakpoints.up('md')] = {\n marginLeft: theme.spacing(6),\n marginRight: theme.spacing(6),\n },\n _c)\n },\n _b[theme.breakpoints.down('sm')] = {\n flexBasis: \"calc(-\".concat(theme.spacing(2), \"px + 50%)\"), // IE calc. Renders wrong for `calc((100% - ${theme.spacing(4)}px) / 2)`\n },\n _b['&:nth-child(2n + 1)'] = (_d = {},\n _d[theme.breakpoints.down('sm')] = {\n marginRight: theme.spacing(4),\n },\n _d[theme.breakpoints.down('xs')] = {\n marginRight: 0,\n },\n _d),\n _b[theme.breakpoints.down('xs')] = {\n flexBasis: '100%',\n justifyContent: 'center',\n },\n _b),\n });\n});\nvar ProgramPage = function () {\n var classes = useStyles();\n var dispatch = (0, store_1.useYouwellDispatch)();\n var programIdFromParams = (0, react_router_1.useParams)().programId;\n var publicProgramId = (0, store_1.useYouwellSelector)(function (state) { var _a; return (_a = state.pageSettings.appConfig) === null || _a === void 0 ? void 0 : _a.publicProgramId; });\n var programId = programIdFromParams !== null && programIdFromParams !== void 0 ? programIdFromParams : publicProgramId;\n var program = (0, store_1.useYouwellSelector)(function (state) { return state.outsideStore.programDetails[programId]; });\n var loading = (0, store_1.useYouwellSelector)(function (state) { return state.requestStatusStore.loading; });\n (0, react_1.useEffect)(function () {\n if (!program && programId) {\n (0, outsideService_1.fetchOutsideProgram)(dispatch, programId);\n }\n }, [dispatch, program, programId]);\n if (!programId) {\n return (react_1.default.createElement(react_router_1.Redirect, { to: urls_1.default.home }));\n }\n return (react_1.default.createElement(\"div\", { className: classes.root },\n react_1.default.createElement(components_1.Loading, { loading: loading }),\n react_1.default.createElement(\"div\", { className: classes.content },\n react_1.default.createElement(core_1.Typography, { variant: \"h6\", className: classes.moduleTitle, tabIndex: -1 }, program === null || program === void 0 ? void 0 : program.name),\n !loading && !program && (react_1.default.createElement(components_2.InfoMessage, { messageKey: \"noContent\" })),\n react_1.default.createElement(\"div\", { className: classes.modules }, program === null || program === void 0 ? void 0 : program.modules.map(function (module, i) { return (react_1.default.createElement(ModuleBoxWithOverlay_1.default, { key: module.id, programId: program.id, element: {\n module: module,\n name: module.name,\n }, index: i, className: classes.module, to: \"\".concat(urls_1.default.outsideProgram.task, \"/\").concat(programId, \"/\").concat(i, \"/0\") })); })))));\n};\nexports.default = ProgramPage;\n","\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar react_1 = __importDefault(require(\"react\"));\nvar core_1 = require(\"@material-ui/core\");\nvar react_router_1 = require(\"react-router\");\nvar react_router_dom_1 = require(\"react-router-dom\");\nvar urls_1 = __importDefault(require(\"../../app/urls\"));\nvar store_1 = require(\"../../app/store\");\nvar components_1 = require(\"../../common/components\");\nvar heightBreak = '@media screen and (min-height: 800px)';\nvar topPadding = 200;\nvar topPaddingHeightBreak = 280;\nvar useStyles = (0, core_1.makeStyles)(function (theme) {\n var _a, _b;\n return (0, core_1.createStyles)({\n root: (_a = {\n padding: theme.spacing(6, 12)\n },\n _a[theme.breakpoints.down('sm')] = {\n padding: theme.spacing(3, 4.5),\n },\n _a[theme.breakpoints.down('xs')] = {\n padding: theme.spacing(1.5),\n },\n _a),\n content: (_b = {\n width: 500,\n position: 'absolute',\n zIndex: 10,\n top: topPadding,\n left: '50%',\n backgroundImage: 'linear-gradient(to bottom, white 30%, rgba(255,255,255,0))',\n background: theme.palette.common.white,\n transform: 'translate(-50%, 0)',\n border: theme.youwell.borders.dim,\n borderRadius: 24,\n padding: theme.spacing(4),\n boxShadow: theme.shadows[5],\n minHeight: 300,\n maxHeight: \"calc(100vh - \".concat(topPadding, \"px - 50px)\"),\n overflowY: 'auto'\n },\n _b[heightBreak] = {\n maxHeight: \"calc(100vh - \".concat(topPaddingHeightBreak, \"px - 50px)\"),\n top: topPaddingHeightBreak,\n },\n _b[theme.breakpoints.down('xs')] = {\n position: 'relative',\n width: '100%',\n left: 0,\n top: 0,\n transform: 'none',\n border: 0,\n borderRadius: 0,\n padding: theme.spacing(2),\n boxShadow: 'none',\n minHeight: 'auto',\n maxHeight: 'none',\n overflowY: 'inherit',\n },\n _b),\n programs: {\n padding: theme.spacing(4),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexWrap: 'wrap',\n },\n program: {\n flex: '1 1 auto',\n background: theme.youwell.colors.secondaryBackground,\n borderRadius: theme.shape.borderRadius,\n padding: theme.spacing(4),\n margin: theme.spacing(2),\n },\n });\n});\nvar ProgramSelect = function () {\n var classes = useStyles();\n var programs = (0, store_1.useYouwellSelector)(function (state) { var _a; return (_a = state.pageSettings.appConfig) === null || _a === void 0 ? void 0 : _a.publicPrograms; });\n var singlePublicProgram = (0, store_1.useYouwellSelector)(function (state) { var _a; return (_a = state.pageSettings.appConfig) === null || _a === void 0 ? void 0 : _a.publicProgramId; });\n if (!programs || programs.length === 0) {\n if (singlePublicProgram) {\n return (react_1.default.createElement(react_router_1.Redirect, { to: urls_1.default.outsideProgram.program }));\n }\n return (react_1.default.createElement(react_router_1.Redirect, { to: urls_1.default.home }));\n }\n if (programs.length === 1) {\n return (react_1.default.createElement(react_router_1.Redirect, { to: urls_1.default.outsideProgram.program }));\n }\n return (react_1.default.createElement(\"div\", { className: classes.root },\n react_1.default.createElement(\"div\", { className: classes.content },\n programs.length < 2 && (react_1.default.createElement(components_1.InfoMessage, { messageKey: \"noContent\" })),\n react_1.default.createElement(\"div\", { className: classes.programs }, programs.map(function (program) { return (react_1.default.createElement(react_router_dom_1.Link, { key: program.id, className: classes.program, to: \"\".concat(urls_1.default.outsideProgram.program, \"/\").concat(program.id) },\n react_1.default.createElement(core_1.Typography, { variant: \"button\", noWrap: true, align: \"center\", display: \"block\" }, program.name))); })))));\n};\nexports.default = ProgramSelect;\n","\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar react_1 = __importStar(require(\"react\"));\nvar react_router_dom_1 = require(\"react-router-dom\");\nvar urls_1 = __importDefault(require(\"../../app/urls\"));\nvar components_1 = require(\"../../common/components\");\nvar TaskNavigation_1 = __importDefault(require(\"./components/TaskNavigation\"));\nvar store_1 = require(\"../../app/store\");\nvar translate_1 = __importDefault(require(\"../../app/localization/translate\"));\nvar OutsideTaskContent_1 = __importDefault(require(\"./components/OutsideTaskContent\"));\nvar outsideService_1 = require(\"../../app/services/outsideService\");\nvar Task = function () {\n var _a, _b;\n var translate = (0, translate_1.default)();\n var dispatch = (0, store_1.useYouwellDispatch)();\n var _c = (0, react_router_dom_1.useParams)(), programId = _c.programId, moduleIndex = _c.moduleIndex, taskIndex = _c.taskIndex;\n var program = (0, store_1.useYouwellSelector)(function (state) { return state.outsideStore.programDetails[programId]; });\n var loadingProgram = (0, store_1.useYouwellSelector)(function (state) { return state.requestStatusStore.loading; });\n var module = (_a = program === null || program === void 0 ? void 0 : program.modules) === null || _a === void 0 ? void 0 : _a[Number(moduleIndex)];\n var task = (_b = module === null || module === void 0 ? void 0 : module.tasks) === null || _b === void 0 ? void 0 : _b[Number(taskIndex) || 0];\n (0, react_1.useEffect)(function () {\n if (!program && programId) {\n (0, outsideService_1.fetchOutsideProgram)(dispatch, programId);\n }\n }, [dispatch, program, programId]);\n if (!task || !module) {\n return loadingProgram ? null : react_1.default.createElement(components_1.InfoMessage, { messageKey: \"noTask\" });\n }\n var sidemenu = {\n currentIndex: Number(taskIndex) || 0,\n title: task.moduleName,\n menuItems: module.tasks.map(function (t, i) { return ({\n text: t.name,\n url: \"\".concat(urls_1.default.outsideProgram.task, \"/\").concat(programId, \"/\").concat(moduleIndex, \"/\").concat(i),\n }); }),\n };\n return (react_1.default.createElement(components_1.PageLayout, { title: task.name, task: task, sideMenu: sidemenu, key: task.id },\n react_1.default.createElement(components_1.PageTitle, { title: \"\".concat(translate('header.title'), \" - \").concat(task.moduleName) }),\n react_1.default.createElement(OutsideTaskContent_1.default, { task: task }),\n react_1.default.createElement(TaskNavigation_1.default, { task: __assign(__assign({}, task), { elementIndex: Number(moduleIndex), currentTaskNr: Number(taskIndex), listLength: module.tasks.length, programId: programId }) })));\n};\nexports.default = Task;\n","\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar prop_types_1 = __importDefault(require(\"prop-types\"));\nvar styles_1 = require(\"@material-ui/core/styles\");\nvar classnames_1 = __importDefault(require(\"classnames\"));\nvar core_1 = require(\"@material-ui/core\");\nvar PreviewStore = __importStar(require(\"../../../app/store/PreviewStore\"));\nvar components_1 = require(\"../../../youwell-common/components\");\nvar urls_1 = __importDefault(require(\"../../../app/urls\"));\nvar taskContentUtils_1 = require(\"../../../common/taskContentUtils\");\nvar responseUtils_1 = require(\"../../../youwell-common/responseUtils\");\nvar store_1 = require(\"../../../app/store\");\nvar useStyles = (0, styles_1.makeStyles)(function () { return (0, core_1.createStyles)({\n root: {\n // Flex-display with wrap needed for card-layout on page\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-between',\n '@media print': {\n display: 'block',\n },\n },\n}); });\nvar OutsideTaskContent = function (_a) {\n var _b;\n var forwardedRef = _a.forwardedRef, task = _a.task;\n var classes = useStyles();\n var dispatch = (0, store_1.useYouwellDispatch)();\n var allTaskResponses = (0, store_1.useYouwellSelector)(function (state) { return state.previewStore.responses; });\n var allTasksDetails = (0, store_1.useYouwellSelector)(function (state) { return state.previewStore.details; });\n // hack because task.patientProgramElementId is \"undefined\".. but this works.. Should maybe make more robust?\n var responsesForCurrentTask = (_b = allTaskResponses === null || allTaskResponses === void 0 ? void 0 : allTaskResponses[undefined]) === null || _b === void 0 ? void 0 : _b[task.id];\n var updateResponse = function (responses) {\n var responseData = {\n taskId: task.id,\n taskVersion: task.version,\n responses: responses,\n };\n dispatch(PreviewStore.actionCreators.updateResponse(responseData));\n };\n var saveChanges = function (callback) {\n if (callback) {\n callback();\n }\n };\n var getLinkUrl = function (link) {\n var _a = (0, taskContentUtils_1.parseInternalLink)(link), taskOrModuleId = _a.taskOrModuleId, hash = _a.hash;\n return \"\".concat(urls_1.default.preview.home, \"/\").concat(taskOrModuleId).concat(hash);\n };\n var getProgramItem = function (id) { return (allTasksDetails && id ? allTasksDetails[id] : null); };\n return (React.createElement(components_1.TaskContent, { ref: forwardedRef, className: (0, classnames_1.default)(classes.root), LinkElementProps: {\n getLinkUrl: getLinkUrl,\n autoplayVideos: true, // clientConfig.appSetup.features.autoplayVideos,\n }, task: task, taskResponses: responsesForCurrentTask, getProgramItem: getProgramItem, getSpecificTaskResponses: (0, responseUtils_1.getSpecificTaskResponses)(allTaskResponses, responsesForCurrentTask), onResponse: updateResponse, onSaveChanges: saveChanges }));\n};\nOutsideTaskContent.propTypes = {\n forwardedRef: prop_types_1.default.object,\n task: prop_types_1.default.object.isRequired,\n};\nOutsideTaskContent.defaultProps = {\n forwardedRef: null,\n};\nvar WithRef = React.forwardRef(function (props, ref) { return React.createElement(OutsideTaskContent, __assign({}, props, { forwardedRef: ref })); });\nexports.default = WithRef;\n","\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar react_1 = __importDefault(require(\"react\"));\nvar styles_1 = require(\"@material-ui/core/styles\");\nvar redux_1 = require(\"redux\");\nvar core_1 = require(\"@material-ui/core\");\nvar translate_1 = __importDefault(require(\"../../../app/localization/translate\"));\nvar store_1 = require(\"../../../app/store\");\nvar ProgramStore_1 = require(\"../../../app/store/ProgramStore\");\nvar urls_1 = __importDefault(require(\"../../../app/urls\"));\nvar useStyles = (0, styles_1.makeStyles)(function (theme) { return (0, styles_1.createStyles)({\n navActions: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n margin: theme.spacing(8, 0),\n '@media print': {\n display: 'none',\n },\n },\n appActions: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n margin: theme.spacing(4, 0),\n '@media print': {\n display: 'none',\n },\n },\n navButton: {\n margin: theme.spacing(0, 6),\n },\n navIconLeft: {\n marginRight: theme.spacing(1),\n },\n navIconRight: {\n marginLeft: theme.spacing(1),\n },\n}); });\nvar TaskNavigation = function (_a) {\n var task = _a.task;\n var classes = useStyles();\n var dispatch = (0, store_1.useYouwellDispatch)();\n var translate = (0, translate_1.default)();\n var redirect = (0, redux_1.bindActionCreators)(ProgramStore_1.actionCreators, dispatch).redirect;\n var elementIndex = task.elementIndex, currentTaskNr = task.currentTaskNr, programId = task.programId;\n var isLastTask = currentTaskNr === task.listLength - 1;\n var isFirstTask = currentTaskNr === 0;\n var clickNext = function (nextDirection) {\n var nextTaskNr = currentTaskNr + nextDirection;\n var redirectUrl = '';\n if (isLastTask && nextDirection > 0) {\n redirectUrl = \"\".concat(urls_1.default.outsideProgram.program, \"/\").concat(programId);\n }\n else if (isFirstTask && nextDirection < 0) {\n redirectUrl = \"\".concat(urls_1.default.outsideProgram.program, \"/\").concat(programId);\n }\n else {\n redirectUrl = \"\".concat(urls_1.default.outsideProgram.task, \"/\").concat(programId, \"/\").concat(elementIndex, \"/\").concat(nextTaskNr);\n }\n redirect(redirectUrl);\n };\n return (react_1.default.createElement(\"div\", { className: classes.navActions },\n react_1.default.createElement(core_1.Button, { variant: \"outlined\", color: \"secondary\", onClick: function () { return clickNext(-1); } }, translate(isFirstTask ? 'cancel' : 'task.goBack')),\n react_1.default.createElement(core_1.Button, { color: \"secondary\", variant: \"contained\", onClick: function () { return clickNext(1); } }, translate(isLastTask ? 'task.completeTask' : 'task.goForward'))));\n};\nexports.default = TaskNavigation;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { connect } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\nimport classnames from 'classnames';\nimport { bindActionCreators } from 'redux';\n\nimport { Link } from 'react-router-dom';\nimport {\n Typography, IconButton,\n} from '@material-ui/core';\n\nimport urls from '../../../app/urls';\nimport {\n datestamp, isSameDate, getWeekStartDate, addDays, timeOnly, hasTime, isToday, today, msInOneWeek, getWeekNumberFromDate,\n} from '../../../youwell-common/dateUtils';\n\nimport * as PageSettingStore from '../../../app/store/PageSettingStore';\n\nimport { PrevIcon, NextIcon, AddIcon } from '../../../common/icons';\nimport { sortByDateAscending } from '../../../youwell-common/arrayUtils';\nimport EditTask from './components/EditTask';\nimport { isTouchDevice } from '../../../youwell-common/browserUtils';\nimport AddCustomTask from './components/AddCustomTask';\nimport { patientProgramElementGroups } from '../../../common/constants';\nimport { ModalAction } from '../../../common/components';\n\nconst styles = theme => ({\n root: {\n },\n header: {\n display: 'flex',\n alignItems: 'center',\n },\n noTasksInWeek: {\n margin: theme.spacing(4, 2),\n padding: theme.spacing(1),\n background: theme.palette.primary.light,\n textAlign: 'center',\n fontSize: theme.typography.body2.fontSize,\n\n [theme.breakpoints.up('sm')]: {\n display: 'none',\n },\n [theme.breakpoints.down('xs')]: {\n margin: theme.spacing(1, 0),\n },\n },\n weekTitle: {\n flex: '1 1 auto',\n },\n calendar: {\n padding: theme.spacing(1),\n border: theme.youwell.borders.normal,\n borderTopColor: theme.palette.primary.main,\n borderTopWidth: 4,\n backgroundColor: theme.palette.common.white,\n\n [theme.breakpoints.down('xs')]: {\n padding: theme.spacing(0),\n border: 0,\n backgroundColor: 'transparent',\n },\n },\n week: {\n display: 'flex',\n flexWrap: 'wrap',\n\n [theme.breakpoints.down('xs')]: {\n flexDirection: 'column',\n\n '$noTasksInWeek + &': {\n display: 'none',\n },\n },\n },\n day: {\n flex: 1,\n padding: theme.spacing(0.5),\n display: 'flex',\n flexDirection: 'column',\n minHeight: 150,\n overflow: 'hidden',\n\n [theme.breakpoints.down('xs')]: {\n padding: 0,\n minHeight: 0,\n },\n },\n outOfDate: {\n [theme.breakpoints.down('xs')]: {\n opacity: 0.5,\n },\n },\n borderLeft: {\n borderLeft: theme.youwell.borders.dim,\n [theme.breakpoints.down('xs')]: {\n borderLeft: 0,\n },\n },\n dayHeader: {\n textTransform: 'uppercase',\n padding: theme.spacing(0, 0.5),\n\n [theme.breakpoints.down('xs')]: {\n padding: theme.spacing(0.5),\n background: theme.palette.primary.light,\n marginTop: theme.spacing(1),\n display: 'flex',\n alignItems: 'center',\n },\n },\n mobileFlex: {\n [theme.breakpoints.down('xs')]: {\n flex: '1 1 auto',\n },\n },\n mobileDate: {\n marginRight: theme.spacing(1),\n [theme.breakpoints.up('sm')]: {\n display: 'none',\n },\n },\n mobileAddTask: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginTop: theme.spacing(4),\n\n [theme.breakpoints.up('sm')]: {\n display: 'none',\n },\n },\n dayHeaderDate: {\n padding: theme.spacing(0, 0.5),\n borderBottom: theme.youwell.borders.dim,\n marginBottom: theme.spacing(0.5),\n\n [theme.breakpoints.down('xs')]: {\n display: 'none',\n },\n },\n taskList: {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n },\n current: {\n backgroundColor: theme.palette.grey[300],\n [theme.breakpoints.down('xs')]: {\n backgroundColor: 'transparent',\n },\n },\n task: {\n position: 'relative',\n userSelect: 'none',\n maxWidth: 150,\n border: theme.youwell.borders.dim,\n padding: theme.spacing(1),\n margin: theme.spacing(0.5),\n backgroundColor: theme.palette.grey[50],\n\n [theme.breakpoints.down('xs')]: {\n maxWidth: '100%',\n margin: theme.spacing(0, 0, 1),\n border: 'none',\n },\n },\n taskTopLine: {\n display: 'flex',\n justifyContent: 'flex-end',\n borderBottom: theme.youwell.borders.dim,\n },\n taskTime: {\n },\n taskName: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n },\n editIcon: {\n position: 'absolute',\n bottom: 2,\n right: 2,\n padding: 4,\n display: 'none',\n color: theme.palette.primary.main,\n\n '$task:hover &': {\n display: 'inline',\n },\n },\n noContent: {\n [theme.breakpoints.down('xs')]: {\n display: 'none',\n },\n },\n addIcon: {\n color: 'transparent',\n alignSelf: 'center',\n\n '&:focus, &:hover, $day:hover &': {\n color: theme.palette.primary.main,\n transition: theme.transitions.create('color', { duration: 200 }),\n },\n\n '$day$touchDevice &': {\n color: theme.palette.primary.main,\n opacity: 0.7,\n },\n '$day$touchDevice:active &, $day$touchDevice:focus &, $day$touchDevice:focus-within &': {\n opacity: 1,\n },\n\n [theme.breakpoints.down('xs')]: {\n display: 'none',\n },\n },\n touchDevice: {\n },\n});\n\n\nclass Calendar extends React.Component {\n state = {\n editItem: null,\n }\n\n setWeek = add => () => {\n const newDate = new Date(this.props.calendarDate.getTime() + (add * msInOneWeek));\n this.props.setCalendarDate(newDate);\n }\n\n clickTask = element => (event) => {\n if (element.createdByPatient) {\n this.setState({ editItem: element });\n event.preventDefault();\n }\n }\n\n closeEditElement = () => {\n this.setState({ editItem: null });\n }\n\n render() {\n const {\n classes, translate, currentProgram, calendarDate,\n } = this.props;\n\n if (!currentProgram) {\n return null;\n }\n\n const elements = currentProgram.groupedElements\n ? [].concat(currentProgram.groupedElements[patientProgramElementGroups.default] || [],\n currentProgram.groupedElements[patientProgramElementGroups.appointment] || [])\n : [];\n\n const currentWeek = getWeekNumberFromDate(calendarDate);\n const weekStartDate = getWeekStartDate(currentWeek);\n const week = [\n { key: '1', elements: [], date: weekStartDate },\n { key: '2', elements: [], date: addDays(weekStartDate, 1) },\n { key: '3', elements: [], date: addDays(weekStartDate, 2) },\n { key: '4', elements: [], date: addDays(weekStartDate, 3) },\n { key: '5', elements: [], date: addDays(weekStartDate, 4) },\n { key: '6', elements: [], date: addDays(weekStartDate, 5) },\n { key: '0', elements: [], date: addDays(weekStartDate, 6) },\n ];\n\n if (elements) {\n for (let i = 0; i < elements.length; i++) {\n if (elements[i].startDay > 0 && elements[i].startDay < 7) {\n week[elements[i].startDay - 1].elements.push(elements[i]);\n } else if (elements[i].startDay === 0) {\n week[6].elements.push(elements[i]);\n } else if (elements[i].startTime) {\n for (let j = 0; j < week.length; j++) {\n if (isSameDate(elements[i].startTime, week[j].date)) {\n week[j].elements.push(elements[i]);\n }\n }\n }\n }\n }\n\n const todayDate = today();\n const noElementsInWeek = week.reduce((prev, curr) => prev + curr.elements.length, 0) < 1;\n\n return (\n
\n
\n\n {this.state.editItem && (\n \n \n {translate('calendar.weekNr', { weekNr: currentWeek })}\n \n
\n \n {noElementsInWeek && (\n \n {translate('calendar.noElementsInWeek')}\n \n )}\n
\n \n {week.map((day, dayIndex) => (\n 0,\n [classes.noContent]: day.elements.length < 1,\n [classes.current]: isToday(day.date),\n [classes.outOfDate]: day.date < todayDate,\n [classes.touchDevice]: isTouchDevice,\n })}\n >\n \n {translate(`time.weekdays.${day.key}`)}\n \n \n {datestamp(day.date)}\n \n \n \n {datestamp(day.date)}\n \n
\n ))}\n \n {sortByDateAscending(day.elements, 'startTime').map(element => (\n \n {hasTime(element.startTime) && (\n \n {element.name}\n \n \n ))}\n
\n \n \n {timeOnly(element.startTime, translate)}\n \n
\n )}\n \n
\n \n
\n );\n }\n}\n\nAddCustomTask.propTypes = {\n translate: PropTypes.func.isRequired,\n classes: PropTypes.object.isRequired,\n insertPatientElement: PropTypes.func.isRequired,\n currentProgram: PropTypes.object.isRequired,\n date: PropTypes.instanceOf(Date),\n disabled: PropTypes.bool,\n onClose: PropTypes.func,\n};\n\nAddCustomTask.defaultProps = {\n disabled: false,\n date: null,\n onClose: null,\n};\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n currentProgram: state.programStore.currentProgram,\n});\n\nconst mapDispatchToProps = dispatch => ({\n ...bindActionCreators(ProgramStore.actionCreators, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(AddCustomTask));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\nimport { withStyles } from '@material-ui/core/styles';\nimport { bindActionCreators } from 'redux';\n\nimport {\n Button, TextField,\n} from '@material-ui/core';\n\nimport * as ProgramStore from '../../../../app/store/ProgramStore';\nimport {\n datestamp, getLocalDate, pad2,\n} from '../../../../youwell-common/dateUtils';\nimport { PortalModal } from '../../../../common/components';\n\nconst styles = theme => ({\n content: {\n padding: theme.spacing(2),\n overflowY: 'auto',\n display: 'flex',\n flexDirection: 'column',\n\n [theme.breakpoints.down('xs')]: {\n overflowY: 'initial',\n },\n },\n taskField: {\n marginBottom: theme.spacing(3),\n },\n actions: {\n marginTop: theme.spacing(2),\n display: 'flex',\n justifyContent: 'space-between',\n },\n});\n\nconst getTimeText = (date) => {\n const startTime = getLocalDate(date);\n return `${pad2(startTime.getHours())}:${pad2(startTime.getMinutes())}`;\n};\n\nclass EditTask extends React.Component {\n state = {\n time: getTimeText(this.props.element.startTime),\n name: this.props.element.name,\n description: this.props.element.properties?.description || '',\n }\n\n closeDialog = () => {\n this.props.onClose();\n }\n\n handleChange = name => (event) => {\n this.setState({ [name]: event.target.value });\n }\n\n update = () => {\n const startTime = getLocalDate(this.props.element.startTime);\n startTime.setHours(this.state.time.slice(0, 2), this.state.time.slice(3, 5), 0, 0);\n\n const elementToUpdate = {\n ...this.props.element,\n displayName: this.state.name,\n properties: {\n description: this.state.description,\n },\n startTime,\n };\n\n this.props.updatePatientElement(elementToUpdate, {\n callback: this.closeDialog,\n reducerParams: { patientProgramId: this.props.currentProgram.id },\n });\n }\n\n delete = () => {\n this.props.deletePatientElement(this.props.element, {\n callback: this.closeDialog,\n reducerParams: { patientProgramId: this.props.currentProgram.id },\n });\n }\n\n render() {\n const {\n classes, translate, disabled, element,\n } = this.props;\n\n return (\n \n
\n\n \n \n
\n \n
\n\n \n \n \n
\n \n );\n }\n}\n\nEditTask.propTypes = {\n translate: PropTypes.func.isRequired,\n classes: PropTypes.object.isRequired,\n updatePatientElement: PropTypes.func.isRequired,\n deletePatientElement: PropTypes.func.isRequired,\n element: PropTypes.object.isRequired,\n onClose: PropTypes.func.isRequired,\n currentProgram: PropTypes.object.isRequired,\n disabled: PropTypes.bool,\n};\n\nEditTask.defaultProps = {\n disabled: false,\n};\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n currentProgram: state.programStore.currentProgram,\n});\n\nconst mapDispatchToProps = dispatch => ({\n ...bindActionCreators(ProgramStore.actionCreators, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(EditTask));\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar react_router_1 = require(\"react-router\");\nvar react_router_dom_1 = require(\"react-router-dom\");\nvar core_1 = require(\"@material-ui/core\");\nvar urls_1 = __importDefault(require(\"../../app/urls\"));\nvar patientConsentService_1 = require(\"../../app/services/patientConsentService\");\nvar components_1 = require(\"../../common/components\");\nvar breadcrumbUtil_1 = require(\"../../common/breadcrumbUtil\");\nvar translate_1 = __importDefault(require(\"../../app/localization/translate\"));\nvar store_1 = require(\"../../app/store\");\nvar components_2 = require(\"../../youwell-common/components\");\nvar icons_1 = require(\"../../youwell-common/icons\");\nvar useStyles = (0, core_1.makeStyles)(function (theme) { return (0, core_1.createStyles)({\n main: {},\n consents: {\n margin: theme.spacing(2, 0),\n },\n consentList: {\n marginTop: theme.spacing(2),\n padding: theme.spacing(2),\n background: theme.palette.common.white,\n },\n greenIcon: {\n color: theme.youwell.colors.green,\n },\n consent: {\n padding: theme.spacing(2),\n background: theme.palette.common.white,\n },\n actions: {\n marginTop: theme.spacing(8),\n borderTop: theme.youwell.borders.dim,\n padding: theme.spacing(4),\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'flex-end',\n },\n consentCheckBox: {\n marginRight: theme.spacing(4),\n },\n sendButton: {\n minWidht: 100,\n },\n radioGroup: {},\n radio: {},\n}); });\nvar Consent = function () {\n var classes = useStyles();\n var dispatch = (0, store_1.useYouwellDispatch)();\n var consentId = (0, react_router_1.useParams)().consentId;\n var translate = (0, translate_1.default)();\n var clientConfig = (0, store_1.useYouwellSelector)(function (state) { return state.auth.clientConfig; });\n var patientConsents = (0, store_1.useYouwellSelector)(function (state) { var _a; return (_a = state.auth.profileData) === null || _a === void 0 ? void 0 : _a.patientConsents; });\n var selectedConsent = consentId ? patientConsents === null || patientConsents === void 0 ? void 0 : patientConsents.find(function (c) { return c.id === Number(consentId); }) : (patientConsents === null || patientConsents === void 0 ? void 0 : patientConsents.length) === 1 ? patientConsents[0] : patientConsents === null || patientConsents === void 0 ? void 0 : patientConsents.find(function (c) { return !c.consentDate; });\n var selectedConsentTask = (0, store_1.useYouwellSelector)(function (state) { var _a; return (selectedConsent ? (_a = state.patientConsentStore.taskDetails) === null || _a === void 0 ? void 0 : _a[selectedConsent.consentTaskId] : null); });\n var _a = React.useState(null), consentChecked = _a[0], setConsentChecked = _a[1];\n var hasUnansweredConsents = (0, store_1.useYouwellSelector)(function (state) { return state.auth.hasUnansweredConsents; });\n var sendResponse = function () {\n if (selectedConsent) {\n var response = {\n consentId: selectedConsent.id,\n consentTaskVersion: selectedConsentTask === null || selectedConsentTask === void 0 ? void 0 : selectedConsentTask.version,\n accept: !!consentChecked,\n };\n var redirect = hasUnansweredConsents ? urls_1.default.inside.home : undefined;\n (0, patientConsentService_1.submitConsents)(dispatch, response, { callback: function () { return setConsentChecked(null); }, redirect: redirect });\n }\n };\n React.useEffect(function () {\n if (selectedConsent && !selectedConsentTask) {\n (0, patientConsentService_1.fetchConsentTaskDetails)(dispatch, selectedConsent.consentTaskId);\n }\n }, [dispatch, selectedConsent, selectedConsentTask]);\n return (React.createElement(components_1.PageLayout\n // title={translate('consentPage.consent')}\n , { \n // title={translate('consentPage.consent')}\n breadcrumb: (0, breadcrumbUtil_1.getBreadCrumb)(translate('consentPage.consent'), translate, clientConfig) },\n React.createElement(\"div\", { className: classes.main }, patientConsents && patientConsents.length > 1 && (React.createElement(\"div\", { className: classes.consents },\n React.createElement(core_1.Typography, { variant: \"subtitle1\", color: \"primary\" }, translate(hasUnansweredConsents ? 'consentPage.youHaveRequiredConsents' : 'consentPage.yourConsents')),\n React.createElement(core_1.List, { className: classes.consentList }, patientConsents.map(function (c) { return (React.createElement(core_1.ListItem, { key: c.id, button: true, component: react_router_dom_1.Link, to: \"\".concat(urls_1.default.inside.pages.consent, \"/\").concat(c.id), selected: Boolean(selectedConsent && c.id === selectedConsent.id) },\n React.createElement(core_1.ListItemIcon, null, c.consent ? React.createElement(icons_1.CheckedIcon, { className: classes.greenIcon }) : React.createElement(icons_1.UncheckedIcon, null)),\n React.createElement(core_1.ListItemText, { primary: c.consentName }))); }))))),\n selectedConsent && selectedConsentTask && (React.createElement(\"div\", { className: classes.consent },\n React.createElement(components_2.TaskContentDisplay, { task: selectedConsentTask }),\n React.createElement(\"div\", { className: classes.actions },\n React.createElement(core_1.RadioGroup, { className: classes.radioGroup, onChange: function (_e, value) { return setConsentChecked(value === 'true'); } },\n React.createElement(core_1.FormControlLabel, { className: classes.radio, value: \"true\", control: React.createElement(core_1.Radio, { checked: consentChecked === null ? selectedConsent.consent : consentChecked }), label: translate('consentPage.yesIConsent') }),\n React.createElement(core_1.FormControlLabel, { className: classes.radio, value: \"false\", control: React.createElement(core_1.Radio, { checked: !(consentChecked === null ? selectedConsent.consent : consentChecked) }), label: translate('consentPage.noIDontConsent') })),\n React.createElement(core_1.Button, { onClick: sendResponse, variant: \"contained\", color: \"primary\", disabled: selectedConsent.consentDate && consentChecked === null, className: classes.sendButton }, translate(selectedConsent.consentDate ? 'consentPage.update' : 'consentPage.send')))))));\n};\nexports.default = Consent;\n","import * as React from 'react';\nimport { useSelector } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\n\nimport {\n makeStyles,\n Typography,\n} from '@material-ui/core';\n\nimport { useParams } from 'react-router';\nimport classnames from 'classnames';\nimport { contentWidth } from '../../common/components/Layout';\nimport { PageLayout } from '../../common/components';\nimport { getBreadCrumb } from '../../common/breadcrumbUtil';\nimport { patientProgramElementGroups } from '../../common/constants';\nimport TaskElement from '../../youwell-common/components/taskElements/TaskElement';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n marginTop: theme.spacing(4),\n },\n element: {\n marginBottom: theme.spacing(4),\n },\n elementHeading: {\n borderBottom: theme.youwell.borders.normal,\n borderBottomColor: theme.palette.secondary.main,\n borderBottomWidth: 4,\n display: 'flex',\n alignItems: 'center',\n },\n elementHeadingTitle: {\n flex: '1 1 auto',\n },\n items: {\n display: 'flex',\n flexDirection: 'column',\n\n '&.et_BullsEye': {\n flexDirection: 'row',\n justifyContent: 'space-between',\n flexWrap: 'wrap',\n maxWidth: contentWidth,\n\n [theme.breakpoints.down('sm')]: {\n justifyContent: 'space-evenly',\n },\n [theme.breakpoints.down('xs')]: {\n justifyContent: 'center',\n },\n },\n },\n item: {\n margin: theme.spacing(2, 0),\n },\n elementTaskTitle: {\n marginBottom: theme.spacing(1),\n },\n noElements: {\n margin: theme.spacing(2, 0),\n },\n}), { name: 'ElementSummary' });\n\nconst getItems = (task, elementType) => task.contentElements\n ?.filter(d => (elementType ? d.elementType === elementType : d.questions?.length))\n .map(d => ({ key: `${task.id}-${d.id}`, element: d, task })) || [];\n\nconst getElements = (element, elementType) => {\n if (element) {\n if (element.task) {\n return getItems(element.task, elementType);\n }\n if (element.module?.tasks) {\n return element.module.tasks.reduce((prev, curr) => [\n ...prev, ...getItems(curr, elementType)], []);\n }\n }\n return [];\n};\n\nconst renderElements = (element, elementType, classes, translate, allTaskResponsesForElement) => {\n const list = getElements(element, elementType);\n\n if (!list.length) {\n return (\n \n \n {item.task.name}\n \n\n {}}\n getSpecificTaskResponses={() => {}}\n element={item.element}\n taskResponses={allTaskResponsesForElement[item.task.id]}\n TaskFormProps={{ readOnly: true, small: true }}\n // LinkElementProps={LinkElementProps}\n elementIndex={i}\n onResponse={() => {}}\n />\n
\n ));\n};\n\nconst ElementSummary = () => {\n const classes = useStyles();\n const { elementType } = useParams();\n const translate = useSelector(state => getTranslate(state.localize));\n const clientConfig = useSelector(state => state.auth.clientConfig);\n const currentProgram = useSelector(state => state.programStore.currentProgram);\n const allTaskResponses = useSelector(state => state.programStore.currentProgramTaskResponses || {});\n\n if (!currentProgram) {\n return null;\n }\n\n const mainElements = (currentProgram.groupedElements && currentProgram.groupedElements[patientProgramElementGroups.main]) || [];\n\n return (\n \n {mainElements.map(element => (\n
\n \n );\n};\n\nexport default ElementSummary;\n","import * as React from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\n\nimport { Link } from 'react-router-dom';\nimport {\n createStyles,\n IconButton,\n makeStyles,\n Typography,\n} from '@material-ui/core';\n\nimport urls from '../../app/urls';\nimport { InfoMessage, PageLayout } from '../../common/components';\nimport { getBreadCrumb } from '../../common/breadcrumbUtil';\nimport apiUrls from '../../youwell-common/apiUrls';\nimport { DeleteIcon } from '../../common/icons';\nimport * as ProgramStore from '../../app/store/ProgramStore';\nimport { Image } from '../../youwell-common/components';\nimport { sortByMany, toLookup } from '../../youwell-common/arrayUtils';\n\nconst useStyles = makeStyles(theme => createStyles({\n main: {\n },\n tasks: {\n paddingTop: theme.spacing(2),\n minHeight: 300,\n },\n task: {\n marginTop: theme.spacing(2),\n background: theme.youwell.colors.inputBackground,\n minHeight: theme.spacing(15),\n wordBreak: 'break-word',\n },\n moduleTitle: {\n paddingTop: theme.spacing(4),\n marginLeft: theme.spacing(20),\n fontWeight: 500,\n\n [theme.breakpoints.down('xs')]: {\n paddingTop: theme.spacing(2),\n marginLeft: theme.spacing(2),\n },\n },\n taskDescription: {\n marginLeft: theme.spacing(20),\n textDecoration: 'underline',\n\n [theme.breakpoints.down('xs')]: {\n marginLeft: theme.spacing(2),\n },\n },\n imageDisplay: {\n margin: theme.spacing(2.5),\n width: 120,\n height: 80,\n objectFit: 'contain',\n float: 'left',\n\n [theme.breakpoints.down('xs')]: {\n width: 60,\n height: 40,\n margin: theme.spacing(2.5, 1),\n },\n },\n deleteButton: {\n float: 'right',\n },\n}));\n\nconst buildFavouriteViewModel = (favTask, elementLookup, groupedElements) => {\n let el = elementLookup[favTask.patientProgramElementId];\n if (!el) {\n return null;\n }\n\n const elementGroup = el.elementGroup;\n el = groupedElements[elementGroup].find(d => d.id === el.id);\n\n let task;\n let elementName;\n let elementSubIndex;\n\n if (el.task && el.task.id === favTask.taskId) {\n task = el.task;\n elementName = el.name || el.task.name;\n } else if (el.module && el.module.tasks) {\n elementSubIndex = el.module.tasks.findIndex(d => d.id === favTask.taskId);\n task = el.module.tasks[elementSubIndex];\n elementName = task?.name;\n }\n\n return {\n task,\n elementName,\n elementGroup,\n indexInGroup: el.indexInGroup,\n elementSubIndex,\n patientProgramElementId: el.id,\n moduleName: el.module?.name,\n moduleImageId: el.module?.moduleImageId,\n };\n};\n\nconst Favourites = () => {\n const classes = useStyles();\n const dispatch = useDispatch();\n const translate = useSelector(state => getTranslate(state.localize));\n const clientConfig = useSelector(state => state.auth.clientConfig);\n const currentProgram = useSelector(state => state.programStore.currentProgram);\n\n const deleteFavourite = favToDelete => () => {\n const data = {\n taskId: favToDelete.task.id,\n patientProgramElementId: favToDelete.patientProgramElementId,\n patientProgramId: currentProgram.id,\n };\n\n dispatch(ProgramStore.actionCreators.toggleFavourite(data, { reducerParams: { patientProgramId: data.patientProgramId } }));\n };\n\n if (!currentProgram) {\n return null;\n }\n\n const elementLookup = toLookup(currentProgram.elements);\n const favouriteList = sortByMany(\n currentProgram.favouriteTasks\n .map(t => buildFavouriteViewModel(t, elementLookup, currentProgram.groupedElements))\n .filter(d => d),\n 'elementGroup', 'indexInGroup', 'elementSubIndex',\n ) || [];\n\n return (\n \n\n
\n ))}\n \n \n {element.name}\n \n
\n\n \n {renderElements(element, elementType, classes, translate, allTaskResponses[element.id] || {})}\n
\n \n {!favouriteList.length && (\n
\n \n );\n};\n\nexport default Favourites;\n","import * as React from 'react';\nimport { useSelector } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\n\nimport {\n createStyles,\n makeStyles,\n} from '@material-ui/core';\n\nimport { FeedbackForm, PageLayout } from '../../common/components';\nimport { getBreadCrumb } from '../../common/breadcrumbUtil';\n\nconst useStyles = makeStyles(() => createStyles({\n main: {\n },\n}));\n\nconst Feedback = () => {\n const classes = useStyles();\n const translate = useSelector(state => getTranslate(state.localize));\n const clientConfig = useSelector(state => state.auth.clientConfig);\n\n return (\n \n {favouriteList.map(fav => (\n
\n \n \n \n {fav.moduleImageId && (\n \n {`${translate('favourites.module')}: ${fav.moduleName}`}\n \n ) }\n \n {fav.elementName}\n \n \n
\n ))}\n \n
\n \n );\n};\n\nexport default Feedback;\n","import * as React from 'react';\nimport { Route, Switch } from 'react-router-dom';\n\nimport { PageNotFound } from '../../youwell-common/components';\nimport urls from '../../app/urls';\nimport Favourites from './Favourites';\nimport Videos from './Videos';\nimport Calendar from './Calendar/Index';\nimport ActivityDiary from './activityDiary/ActivityDiary';\nimport SleepDiary from './sleepDiary/Index';\nimport PrintFiles from './PrintFiles';\nimport ElementSummary from './ElementSummary';\nimport Feedback from './Feedback';\nimport Consent from './Consent';\nimport SingleTaskPage from '../singlepage/SingleTaskPage';\n\nconst Index = () => (\n \n {hasPrints ? printModules.map(module => (\n \n {translate('printFiles.noPrintFilesAvailable')}\n \n )}\n
\n \n );\n }\n}\n\nPrintFiles.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n clientConfig: PropTypes.object.isRequired,\n currentProgram: PropTypes.object,\n};\n\nPrintFiles.defaultProps = {\n currentProgram: null,\n};\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n clientConfig: state.auth.clientConfig,\n currentProgram: state.programStore.currentProgram,\n});\n\n\nexport default connect(mapStateToProps)(withStyles(styles)(PrintFiles));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { connect } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\n\nimport {\n Typography,\n} from '@material-ui/core';\n\nimport { PageLayout } from '../../common/components';\nimport { getVideosForElement } from '../../common/videoUtil';\nimport { getBreadCrumb } from '../../common/breadcrumbUtil';\nimport { patientProgramElementGroups } from '../../common/constants';\n\nconst styles = theme => ({\n root: {\n marginTop: theme.spacing(4),\n },\n element: {\n marginBottom: theme.spacing(4),\n },\n elementHeading: {\n borderBottom: theme.youwell.borders.normal,\n borderBottomColor: theme.palette.secondary.main,\n borderBottomWidth: 4,\n display: 'flex',\n alignItems: 'center',\n },\n elementHeadingTitle: {\n flex: '1 1 auto',\n },\n videos: {\n display: 'flex',\n },\n video: {\n flex: '0 1 50%',\n padding: theme.spacing(2),\n },\n noVideos: {\n margin: theme.spacing(2),\n },\n});\n\n\nclass Videos extends React.Component {\n render() {\n const {\n classes, translate, currentProgram, clientConfig,\n } = this.props;\n\n if (!currentProgram) {\n return null;\n }\n\n const mainElements = (currentProgram.groupedElements && currentProgram.groupedElements[patientProgramElementGroups.main]) || [];\n\n return (\n \n\n
\n )) : (\n \n \n {module.name}\n \n
\n\n \n {module.noPrints && (\n \n {translate('printFiles.noPrintFileForModule')}\n \n )}\n {module.modulePrintFileId && (\n \n \n {translate('printFiles.downloadPdfForModule')}\n \n \n )}\n\n {module.tasksWithPrint?.length > 0 && (\n
\n \n {/* \n {translate('printFiles.pagesInModule')}\n */}\n {module.tasksWithPrint.map(task => (\n \n \n {task.name}\n \n \n ))}\n
\n )}\n \n {mainElements.map(element => (\n
\n \n );\n }\n}\n\nVideos.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n clientConfig: PropTypes.object.isRequired,\n currentProgram: PropTypes.object,\n};\n\nVideos.defaultProps = {\n currentProgram: null,\n};\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n clientConfig: state.auth.clientConfig,\n currentProgram: state.programStore.currentProgram,\n});\n\n\nexport default connect(mapStateToProps)(withStyles(styles)(Videos));\n","\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar react_redux_1 = require(\"react-redux\");\nvar classnames_1 = __importDefault(require(\"classnames\"));\nvar core_1 = require(\"@material-ui/core\");\nvar pickers_1 = require(\"@material-ui/pickers\");\nvar react_1 = require(\"react\");\nvar components_1 = require(\"../../../common/components\");\nvar breadcrumbUtil_1 = require(\"../../../common/breadcrumbUtil\");\nvar dateUtils_1 = require(\"../../../youwell-common/dateUtils\");\nvar image_1 = require(\"../../../common/image\");\nvar ActivityTable_1 = __importDefault(require(\"./components/ActivityTable\"));\nvar AddEditActivityDialog_1 = __importDefault(require(\"./components/AddEditActivityDialog\"));\nvar DateDetails_1 = __importDefault(require(\"./components/DateDetails\"));\nvar objectUtils_1 = require(\"../../../youwell-common/objectUtils\");\nvar ActivityList_1 = __importDefault(require(\"./components/ActivityList\"));\nvar arrayUtils_1 = require(\"../../../youwell-common/arrayUtils\");\nvar constants_1 = require(\"../../../common/constants\");\nvar activityService_1 = require(\"../../../app/services/activityService\");\nvar translate_1 = __importDefault(require(\"../../../app/localization/translate\"));\nvar store_1 = require(\"../../../app/store\");\nvar useStyles = (0, core_1.makeStyles)(function (theme) {\n var _a, _b, _c, _d, _e, _f;\n return (0, core_1.createStyles)({\n top: (_a = {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n marginBottom: theme.spacing(4)\n },\n _a[theme.breakpoints.down('md')] = {\n padding: theme.spacing(3, 3),\n },\n _a[theme.breakpoints.down('xs')] = {\n padding: theme.spacing(1, 0),\n },\n _a),\n sectionTitle: {\n borderLeft: theme.youwell.borders.secondary,\n marginBottom: theme.spacing(3),\n padding: theme.spacing(1, 2),\n },\n tabs: {\n padding: theme.spacing(1, 2),\n },\n followUpActivitiesTableContainer: (_b = {\n backgroundColor: theme.palette.background.default,\n padding: theme.spacing(5, 4),\n borderRadius: theme.youwell.shapes.borderRadiusRounder,\n width: '100%'\n },\n _b[theme.breakpoints.down('sm')] = {\n padding: theme.spacing(2, 2),\n },\n _b[theme.breakpoints.down('xs')] = {\n padding: theme.spacing(2, 1),\n },\n _b),\n flexContainer: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n followUpActivitiesTable: {\n flex: '1 1 auto',\n },\n effortDescription: {\n display: 'flex',\n alignItems: 'center',\n },\n flagIcon: (_c = {\n margin: theme.spacing(4, 5, 0, 5)\n },\n _c[theme.breakpoints.down('sm')] = {\n display: 'none',\n },\n _c),\n flagIconSmall: (_d = {\n margin: theme.spacing(0, 1)\n },\n _d[theme.breakpoints.up('md')] = {\n display: 'none',\n },\n _d),\n content: (_e = {\n padding: theme.spacing(4, 10),\n marginBottom: theme.spacing(4),\n '&:last-child': {\n marginBottom: theme.spacing(12),\n }\n },\n _e[theme.breakpoints.down('md')] = {\n padding: theme.spacing(3, 3),\n },\n _e[theme.breakpoints.down('xs')] = {\n padding: theme.spacing(1, 0),\n },\n _e),\n calendar: {\n background: theme.palette.common.white,\n borderRadius: theme.youwell.shapes.borderRadiusRounder,\n width: '100%',\n minHeight: 340,\n overflowX: 'hidden',\n },\n day: {\n width: 36,\n height: 36,\n margin: 2,\n fontSize: theme.typography.caption.fontSize,\n borderRadius: theme.youwell.shapes.borderRadius,\n color: 'inherit',\n '&:hover': {\n color: theme.palette.common.white,\n background: theme.palette.primary.light,\n },\n },\n notCompleted: {\n background: 'url(\"data:image/svg+xml;utf8,\")',\n backgroundColor: \"\".concat(theme.palette.secondary.main, \"aa\"),\n color: theme.palette.common.white,\n },\n notRegistered: {\n background: theme.palette.grey[200],\n },\n completed: {\n background: theme.palette.secondary.main,\n color: theme.palette.common.white,\n },\n today: {\n fontWeight: theme.typography.fontWeightBold,\n border: theme.youwell.borders.primary,\n },\n futurePlans: {\n background: theme.palette.secondary.dark,\n color: theme.palette.common.white,\n },\n nonCurrentMonthDay: {\n background: theme.palette.common.white,\n color: theme.palette.text.disabled,\n },\n noActivityRegistered: (_f = {\n padding: theme.spacing(3),\n textAlign: 'center'\n },\n _f[theme.breakpoints.down('xs')] = {\n padding: theme.spacing(2),\n },\n _f),\n addActivityModal: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n });\n}, { name: 'ActivityDiary' });\nvar getActivityLookup = function (activities) { return (activities === null || activities === void 0 ? void 0 : activities.reduce(function (prev, activity) {\n var _a;\n var future = (0, dateUtils_1.isFuture)(activity.date);\n return __assign(__assign({}, prev), (_a = {}, _a[(0, dateUtils_1.isoDate)(activity.date)] = {\n entry: activity,\n future: future,\n notCompleted: activity.effortRating === -1,\n notRegistered: !activity.effortRating,\n completed: activity.effortRating && activity.effortRating > 0,\n }, _a));\n}, {})) || {}; };\nvar ActivityDiary = function () {\n var classes = useStyles();\n var dispatch = (0, react_redux_1.useDispatch)();\n var translate = (0, translate_1.default)();\n var clientConfig = (0, store_1.useYouwellSelector)(function (state) { return state.auth.clientConfig; });\n var patientId = (0, store_1.useYouwellSelector)(function (state) { return state.auth.profileData && state.auth.profileData.id; });\n var activities = (0, store_1.useYouwellSelector)(function (state) { return state.activityDataStore.activities; }); // TODO: add || [] in the end? does not work... entries will not load then..\n var activitiesLoadedFrom = (0, store_1.useYouwellSelector)(function (state) { return state.activityDataStore.activitiesLoadedFrom; });\n var _a = React.useState(null), activitiesToFollowUp = _a[0], setActivitiesToFolluwUp = _a[1];\n var _b = React.useState({}), followupHashset = _b[0], setFollowupHashset = _b[1];\n var _c = React.useState(true), showUpcoming = _c[0], setShowUpcoming = _c[1];\n var _d = React.useState(null), addEditActivity = _d[0], setAddEditActivity = _d[1];\n var _e = React.useState(null), selectedDate = _e[0], setSelectedDate = _e[1];\n (0, react_1.useEffect)(function () {\n if (!activities && patientId) {\n (0, activityService_1.fetchActivitiesData)(dispatch);\n }\n }, [dispatch, patientId, activities]);\n var todayDate = React.useMemo(function () { return (0, dateUtils_1.today)(); }, []);\n (0, react_1.useEffect)(function () {\n // Using hashset to set isRated on elements. For fade out visualization after registration of effort\n if (activities && activities.length > 0) {\n var newActivitiesToFollowUp = activities === null || activities === void 0 ? void 0 : activities.filter(function (d) {\n var ld = (0, dateUtils_1.getLocalDate)(d.date);\n return ld !== null && todayDate >= ld && (!d.effortRating || (followupHashset && d.id && followupHashset[d.id]));\n }).map(function (d) { return (__assign(__assign({}, d), { isRated: (0, objectUtils_1.hasValue)(d.effortRating) && (followupHashset && d.id && followupHashset[d.id]) })); });\n var newLookup = newActivitiesToFollowUp.reduce(function (prev, curr) {\n var _a;\n return (curr.id ? __assign(__assign({}, prev), (_a = {}, _a[curr.id.toString()] = true, _a)) : __assign({}, prev));\n }, followupHashset);\n setActivitiesToFolluwUp(newActivitiesToFollowUp);\n setFollowupHashset(newLookup);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activities, todayDate]); // dont depend on followupHashset-changes.\n var dateLookup = React.useMemo(function () { return (activities && activities.length > 0 ? getActivityLookup(activities) : {}); }, [activities]);\n var upcomingActivities = React.useMemo(function () { return (activities && activities.length > 0 ? activities.filter(function (activity) { var _a; return dateLookup && ((_a = dateLookup[(0, dateUtils_1.isoDate)(activity.date)]) === null || _a === void 0 ? void 0 : _a.future); }) : []); }, [activities, dateLookup]);\n var pastActivities = React.useMemo(function () { return (activities && activities.length > 0 ? activities.filter(function (activity) { var _a; return dateLookup && !((_a = dateLookup[(0, dateUtils_1.isoDate)(activity.date)]) === null || _a === void 0 ? void 0 : _a.future); }) : []); }, [activities, dateLookup]);\n var onClickDate = function (date) {\n if (!date) {\n return;\n }\n var dateWithoutTime = new Date(date);\n dateWithoutTime.setHours(0, 0, 0, 0);\n var activitiesOnSelectedDate = activities === null || activities === void 0 ? void 0 : activities.filter(function (a) { return (0, dateUtils_1.isSameDate)(a.date, dateWithoutTime); });\n if (activitiesOnSelectedDate && activitiesOnSelectedDate.length > 0) {\n setSelectedDate(dateWithoutTime);\n }\n else {\n setAddEditActivity({ date: dateWithoutTime, category: constants_1.activityCategories.physical });\n }\n };\n var renderCalendarDay = function (date, _selected, dayInCurrentMonth) {\n var _a;\n var dayClassName;\n if (dateLookup) {\n var d = dateLookup[(0, dateUtils_1.isoDate)(date)] || {};\n dayClassName = (0, classnames_1.default)(classes.day, (_a = {},\n _a[classes.today] = (0, dateUtils_1.isSameDate)(date, todayDate),\n _a[classes.nonCurrentMonthDay] = !dayInCurrentMonth,\n _a[classes.notCompleted] = !d.future && d.notCompleted,\n _a[classes.notRegistered] = !d.future && d.notRegistered,\n _a[classes.completed] = d.completed,\n _a[classes.futurePlans] = d.future,\n _a));\n }\n return (React.createElement(core_1.ButtonBase, { className: dayClassName, disabled: !dayInCurrentMonth },\n React.createElement(\"span\", null, dayInCurrentMonth && date ? date.getDate() : '')));\n };\n var loadMonth = function (date) {\n var d = (0, dateUtils_1.getLocalDate)(activitiesLoadedFrom);\n if (d !== null && date !== null && date < d) {\n (0, activityService_1.fetchActivitiesData)(dispatch, {\n start: (0, dateUtils_1.addDays)(date, -30),\n end: activitiesLoadedFrom,\n });\n }\n };\n var hasActivitiesToFollowUp = Boolean((activitiesToFollowUp === null || activitiesToFollowUp === void 0 ? void 0 : activitiesToFollowUp.length) && activitiesToFollowUp.length > 0);\n return (React.createElement(components_1.PageLayout, { breadcrumb: (0, breadcrumbUtil_1.getBreadCrumb)(translate('activityDiary.header'), translate, clientConfig) },\n hasActivitiesToFollowUp && (React.createElement(\"div\", { className: classes.top },\n React.createElement(\"div\", { className: classes.sectionTitle },\n React.createElement(core_1.Typography, { variant: \"h6\" }, translate('activityDiary.activities'))),\n React.createElement(\"div\", { className: classes.followUpActivitiesTableContainer },\n React.createElement(core_1.Typography, { variant: \"subtitle1\", className: classes.effortDescription },\n React.createElement(\"div\", { className: classes.flagIconSmall },\n React.createElement(image_1.FlagIcon, null)),\n translate('activityDiary.registerYourEffort')),\n React.createElement(\"div\", { className: classes.flexContainer },\n React.createElement(\"div\", { className: classes.flagIcon },\n React.createElement(image_1.FlagIcon, null)),\n React.createElement(\"div\", { className: classes.followUpActivitiesTable },\n React.createElement(ActivityTable_1.default, { data: activitiesToFollowUp, onEditClick: function (activity) { return setAddEditActivity(activity); }, showRating: true })))))),\n React.createElement(\"div\", { className: classes.content },\n React.createElement(\"div\", { className: classes.sectionTitle },\n React.createElement(core_1.Typography, { variant: \"h6\" }, translate('activityDiary.calendar')),\n React.createElement(core_1.Typography, { variant: \"subtitle1\" }, translate('activityDiary.calendarInfo'))),\n React.createElement(\"div\", { className: classes.calendar },\n React.createElement(pickers_1.Calendar, { onMonthChange: loadMonth, date: todayDate, onChange: onClickDate, renderDay: renderCalendarDay, allowKeyboardControl: false }))),\n React.createElement(core_1.Tabs, { className: classes.tabs, value: showUpcoming ? 0 : 1, onChange: function (event, value) { return setShowUpcoming(value === 0); }, variant: \"fullWidth\" },\n React.createElement(core_1.Tab, { label: translate('activityDiary.upcoming'), value: 0 }),\n React.createElement(core_1.Tab, { label: translate('activityDiary.pastActivities'), value: 1 })),\n showUpcoming ? (React.createElement(\"div\", { className: classes.content }, upcomingActivities && upcomingActivities.length > 0 ? (React.createElement(ActivityList_1.default, { data: upcomingActivities, onEditClick: function (activity) { return setAddEditActivity(activity); } }))\n : (React.createElement(core_1.Typography, { className: classes.noActivityRegistered, variant: \"subtitle1\", color: \"textSecondary\" }, translate('activityDiary.noActivitiesRegistered'))))) : (React.createElement(\"div\", { className: classes.content }, pastActivities && pastActivities.length > 0 ? (React.createElement(ActivityList_1.default, { data: (0, arrayUtils_1.reverse)(pastActivities), onEditClick: function (activity) { return setAddEditActivity(activity); }, showRating: true }))\n : (React.createElement(core_1.Typography, { className: classes.noActivityRegistered, variant: \"subtitle1\", color: \"textSecondary\" }, translate('activityDiary.noActivitiesRegistered'))))),\n React.createElement(DateDetails_1.default, { open: Boolean(selectedDate), onClose: function () { return setSelectedDate(null); }, onAddClick: function (date) { return setAddEditActivity({ date: date }); }, onEditClick: function (activity) { return setAddEditActivity(activity); }, date: selectedDate }),\n React.createElement(core_1.Modal, { open: Boolean(addEditActivity), onClose: function () { return setAddEditActivity(null); }, className: classes.addActivityModal },\n React.createElement(\"div\", null, addEditActivity && (React.createElement(AddEditActivityDialog_1.default, { onClose: function () { return setAddEditActivity(null); }, activity: addEditActivity }))))));\n};\nexports.default = ActivityDiary;\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar core_1 = require(\"@material-ui/core\");\nvar Rating_1 = __importDefault(require(\"@material-ui/lab/Rating\"));\nvar React = __importStar(require(\"react\"));\nvar icons_1 = require(\"../../../../common/icons\");\nvar dateUtils_1 = require(\"../../../../youwell-common/dateUtils\");\nvar translate_1 = __importDefault(require(\"../../../../app/localization/translate\"));\nvar useStyles = (0, core_1.makeStyles)(function (theme) {\n var _a;\n return (0, core_1.createStyles)({\n root: {},\n dateCell: (_a = {\n flex: '0 0 100px'\n },\n _a[theme.breakpoints.down('xs')] = {\n flex: '0 0 68px',\n },\n _a),\n item: {\n display: 'flex',\n width: '100%',\n textAlign: 'left',\n justifyContent: 'flex-start',\n background: theme.palette.common.white,\n marginBottom: theme.spacing(1),\n padding: theme.spacing(0.5, 1),\n },\n itemContent: {\n flex: '1 1 auto',\n },\n activityText: {},\n activitySubText: {\n display: 'flex',\n justifyContent: 'space-between',\n },\n loadMore: {\n marginTop: theme.spacing(4),\n display: 'flex',\n justifyContent: 'flex-end',\n },\n });\n}, { name: 'ActivityList' });\nvar defaultShowCount = 10;\nvar ActivityList = function (_a) {\n var data = _a.data, onEditClick = _a.onEditClick, showRating = _a.showRating;\n var classes = useStyles();\n var translate = (0, translate_1.default)();\n var _b = React.useState(defaultShowCount), showCount = _b[0], setShowCount = _b[1];\n if (!data) {\n return null;\n }\n var editActivity = function (activity) { return function () {\n if (onEditClick) {\n onEditClick(activity);\n }\n }; };\n return (React.createElement(\"div\", { className: classes.root }, data === null || data === void 0 ? void 0 :\n data.map(function (activity, i) { return (i < showCount ? (React.createElement(core_1.ButtonBase, { onClick: editActivity(activity), key: activity.id, className: classes.item },\n React.createElement(core_1.Typography, { variant: \"caption\", className: classes.dateCell }, (0, dateUtils_1.shortDate)(activity.date, translate)),\n React.createElement(\"div\", { className: classes.itemContent },\n React.createElement(core_1.Typography, { variant: \"subtitle2\" }, activity.activity),\n React.createElement(\"div\", { className: classes.activitySubText },\n React.createElement(core_1.Typography, { variant: \"body2\", color: \"textSecondary\" }, (0, dateUtils_1.hourCount)(activity.durationInMinutes, translate)),\n showRating && (React.createElement(\"div\", null, activity.effortRating === -1 ? (React.createElement(core_1.Tooltip, { title: translate('activityDiary.notCompleted'), placement: \"top\" },\n React.createElement(icons_1.NotInterestedIcon, { color: \"disabled\" }))) : (React.createElement(Rating_1.default, { size: \"small\", name: \"effortRating-\".concat(activity.id), value: activity.effortRating || 0, color: \"primary\", disabled: true })))))))) : null); }),\n data.length > showCount && (React.createElement(\"div\", { className: classes.loadMore },\n React.createElement(core_1.Button, { size: \"small\", onClick: function () { return setShowCount(function (prev) { return prev + defaultShowCount; }); } }, translate('activityDiary.loadMore'))))));\n};\nActivityList.defaultProps = {\n data: null,\n onEditClick: null,\n showRating: false,\n};\nexports.default = ActivityList;\n","\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar core_1 = require(\"@material-ui/core\");\nvar Rating_1 = __importDefault(require(\"@material-ui/lab/Rating\"));\nvar React = __importStar(require(\"react\"));\nvar classnames_1 = __importDefault(require(\"classnames\"));\nvar react_redux_1 = require(\"react-redux\");\nvar icons_1 = require(\"../../../../common/icons\");\nvar dateUtils_1 = require(\"../../../../youwell-common/dateUtils\");\nvar activityService_1 = require(\"../../../../app/services/activityService\");\nvar translate_1 = __importDefault(require(\"../../../../app/localization/translate\"));\nvar useStyles = (0, core_1.makeStyles)(function (theme) {\n var _a;\n return (0, core_1.createStyles)({\n root: {\n margin: theme.spacing(1, 0),\n },\n item: {\n maxHeight: 1000,\n marginBottom: theme.spacing(2),\n padding: theme.spacing(1),\n '$white &': {\n marginBottom: theme.spacing(3),\n padding: 0,\n },\n },\n hiddenWhenRated: {\n opacity: 0,\n margin: 0,\n padding: 0,\n maxHeight: 0,\n transition: 'all 0.5s linear',\n },\n itemContent: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: theme.palette.common.white,\n padding: theme.spacing(1),\n minHeight: 50,\n '$white &': {\n backgroundColor: theme.palette.common.white,\n },\n },\n dateLabel: {\n display: 'block',\n marginBottom: theme.spacing(0.5),\n '&:first-letter': {\n textTransform: 'capitalize',\n },\n },\n white: {},\n notCompletedIcon: {\n color: theme.palette.error.main,\n },\n activityText: {\n flex: '1 1 auto',\n },\n editIcon: {\n marginLeft: theme.spacing(1),\n },\n actions: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n border: theme.youwell.borders.dotted,\n padding: theme.spacing(0, 1),\n },\n registerLabel: (_a = {\n marginRight: theme.spacing(1)\n },\n _a[theme.breakpoints.down('xs')] = {\n display: 'none',\n },\n _a),\n ratingEffortTitle: {\n padding: theme.spacing(1),\n fontSize: 18,\n },\n });\n}, { name: 'ActivityTable' });\nvar ActivityTable = function (_a) {\n var _b;\n var data = _a.data, onEditClick = _a.onEditClick, white = _a.white, showRating = _a.showRating;\n var dispatch = (0, react_redux_1.useDispatch)();\n var classes = useStyles();\n var translate = (0, translate_1.default)();\n if (!data) {\n return null;\n }\n var editActivity = function (activity) { return function () {\n if (onEditClick) {\n onEditClick(activity);\n }\n }; };\n var handleRatingChange = function (activity, rating) {\n if (rating === null) {\n return;\n }\n var updatedActivity = __assign(__assign({}, activity), { effortRating: rating });\n (0, activityService_1.updateActivitiesData)(dispatch, updatedActivity);\n };\n return (React.createElement(\"div\", { className: (0, classnames_1.default)(classes.root, (_b = {}, _b[classes.white] = white, _b)) }, data.map(function (activity) {\n var _a;\n return (React.createElement(\"div\", { key: activity.id, className: (0, classnames_1.default)(classes.item, (_a = {}, _a[classes.hiddenWhenRated] = activity.isRated, _a)) },\n React.createElement(core_1.Typography, { color: \"primary\", variant: \"caption\", className: classes.dateLabel }, (0, dateUtils_1.shortDate)(activity.date, translate, false, true)),\n React.createElement(\"div\", { className: classes.itemContent },\n React.createElement(\"div\", { className: classes.activityText },\n React.createElement(core_1.Typography, { variant: \"subtitle2\" }, activity.activity),\n React.createElement(core_1.Typography, { variant: \"body2\", color: \"textSecondary\" }, (0, dateUtils_1.hourCount)(activity.durationInMinutes, translate))),\n React.createElement(core_1.IconButton, { className: classes.editIcon, onClick: editActivity(activity) },\n React.createElement(icons_1.EditIcon, null))),\n showRating && (React.createElement(\"div\", { className: classes.actions },\n React.createElement(core_1.Typography, { variant: \"caption\", color: \"primary\", className: classes.registerLabel }, \"\".concat(translate('activityDiary.effort'), \": \")),\n React.createElement(core_1.Tooltip, { title: translate('activityDiary.notCompleted'), placement: \"top\" },\n React.createElement(core_1.IconButton, { className: classes.notCompletedIcon, onClick: function () { return handleRatingChange(activity, -1); } },\n React.createElement(icons_1.NotInterestedIcon, null))),\n React.createElement(Rating_1.default, { name: \"effortRating-\".concat(activity.id), onChange: function (e, r) { return handleRatingChange(activity, r); }, value: activity.effortRating || 0, color: \"primary\" })))));\n })));\n};\nActivityTable.defaultProps = {\n data: null,\n onEditClick: null,\n white: false,\n showRating: false,\n};\nexports.default = ActivityTable;\n","\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar core_1 = require(\"@material-ui/core\");\nvar Rating_1 = __importDefault(require(\"@material-ui/lab/Rating\"));\nvar styles_1 = require(\"@material-ui/core/styles\");\nvar react_redux_1 = require(\"react-redux\");\nvar icons_1 = require(\"../../../../common/icons\");\nvar dateUtils_1 = require(\"../../../../youwell-common/dateUtils\");\nvar constants_1 = require(\"../../../../common/constants\");\nvar activityService_1 = require(\"../../../../app/services/activityService\");\nvar translate_1 = __importDefault(require(\"../../../../app/localization/translate\"));\nvar store_1 = require(\"../../../../app/store\");\nvar useStyles = (0, styles_1.makeStyles)(function (theme) {\n var _a, _b;\n return (0, core_1.createStyles)({\n root: (_a = {\n margin: theme.spacing(1),\n backgroundColor: theme.palette.background.default,\n borderRadius: theme.youwell.shapes.borderRadiusRounder,\n padding: theme.spacing(5, 6)\n },\n _a[theme.breakpoints.down('sm')] = {\n padding: theme.spacing(3),\n },\n _a[theme.breakpoints.down('xs')] = {\n padding: theme.spacing(2, 1),\n },\n _a),\n heading: (_b = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n margin: theme.spacing(0, 0, 4, 0)\n },\n _b[theme.breakpoints.down('sm')] = {\n marginBottom: theme.spacing(3),\n },\n _b),\n title: {\n borderLeft: theme.youwell.borders.secondary,\n padding: theme.spacing(1, 2),\n },\n formInput: {\n margin: theme.spacing(0.5),\n },\n durationTableCell: {\n paddingRight: theme.spacing(1),\n width: 120,\n },\n selectCategory: {\n minWidth: 160,\n '& :focus': {\n backgroundColor: theme.palette.background.default,\n },\n },\n activityActions: {\n display: 'flex',\n justifyContent: 'flex-end',\n marginTop: theme.spacing(6),\n },\n cancelBtn: {\n marginRight: theme.spacing(1),\n },\n form: {\n margin: theme.spacing(1),\n },\n textField: {\n marginBottom: theme.spacing(3),\n },\n durationAdornment: {\n marginLeft: theme.spacing(1),\n },\n effortValues: {\n display: 'flex',\n alignItems: 'center',\n },\n });\n}, { name: 'AddEditActivityDialog' });\nvar AddEditActivityDialog = function (_a) {\n var activity = _a.activity, onClose = _a.onClose;\n var classes = useStyles();\n var dispatch = (0, react_redux_1.useDispatch)();\n var translate = (0, translate_1.default)();\n var patientId = (0, store_1.useYouwellSelector)(function (state) { var _a; return (_a = state.auth.profileData) === null || _a === void 0 ? void 0 : _a.id; });\n var _b = React.useState(__assign({}, activity)), activityData = _b[0], setActivityData = _b[1];\n if (!activity || !patientId) {\n return null;\n }\n var addActivity = function () {\n var newActivity = {\n patientId: patientId,\n category: activityData.category,\n activity: activityData.activity,\n date: activityData.date,\n durationInMinutes: Number(activityData.durationInMinutes) || 0,\n effortRating: activityData.effortRating,\n };\n (0, activityService_1.insertActivityData)(dispatch, newActivity, { callback: onClose });\n };\n var updateActivity = function () {\n var updatedActivity = {\n id: activity.id,\n category: activityData.category,\n activity: activityData.activity,\n date: activityData.date,\n durationInMinutes: Number(activityData.durationInMinutes) || 0,\n effortRating: activityData.effortRating,\n };\n (0, activityService_1.updateActivitiesData)(dispatch, updatedActivity, { callback: onClose });\n };\n var addOrUpdate = function () {\n if (activity.id) {\n updateActivity();\n }\n else {\n addActivity();\n }\n };\n var onEnter = function (e) {\n if (e.key === 'Enter' && activityData.category && activityData.activity && activityData.durationInMinutes) {\n addOrUpdate();\n }\n };\n var today = new Date();\n var todayIso = (0, dateUtils_1.isoDateWithoutTimezone)(today);\n var isPastDate = todayIso >= (0, dateUtils_1.isoDate)(activity.date);\n return (React.createElement(\"div\", { className: classes.root },\n React.createElement(\"div\", { className: classes.heading },\n React.createElement(core_1.Typography, { className: classes.title, variant: \"subtitle2\" }, \"\".concat(translate('activityDiary.addActivity'), \" | \").concat((0, dateUtils_1.datestamp)(activity.date))),\n React.createElement(core_1.IconButton, { onClick: onClose },\n React.createElement(icons_1.CancelOutlinedIcon, null))),\n React.createElement(\"div\", { className: classes.form },\n React.createElement(core_1.TextField, { className: classes.textField, variant: \"outlined\", value: activityData.category || '', onChange: function (e) { return setActivityData(__assign(__assign({}, activityData), { category: e.target.value })); }, select: true, label: translate('activityDiary.category'), InputLabelProps: { shrink: true }, fullWidth: true }, Object.keys(constants_1.activityCategories).map(function (categoryKey) { return (React.createElement(core_1.MenuItem, { key: categoryKey, value: constants_1.activityCategories[categoryKey] }, translate(\"activityDiary.categories.\".concat(constants_1.activityCategories[categoryKey])))); })),\n React.createElement(core_1.TextField, { className: classes.textField, variant: \"outlined\", label: translate('activityDiary.activity'), value: activityData.activity || '', onChange: function (e) { return setActivityData(__assign(__assign({}, activityData), { activity: e.target.value })); }, placeholder: translate('activityDiary.activityPlaceholder'), InputLabelProps: { shrink: true }, fullWidth: true }),\n React.createElement(core_1.TextField, { className: classes.textField, variant: \"outlined\", label: translate('activityDiary.duration'), type: \"number\", value: activityData.durationInMinutes || '', onChange: function (e) { return setActivityData(__assign(__assign({}, activityData), { durationInMinutes: Math.abs(Number(e.target.value)).toString() })); }, placeholder: translate('activityDiary.durationPlaceholder'), onKeyPress: onEnter, InputProps: { endAdornment: React.createElement(\"span\", { className: classes.durationAdornment }, translate('time.minutes')) }, InputLabelProps: { shrink: true }, fullWidth: true }),\n isPastDate && activityData.id && (React.createElement(React.Fragment, null,\n React.createElement(core_1.Typography, { variant: \"caption\" }, \"\".concat(translate('activityDiary.effort'), \": \")),\n React.createElement(\"div\", { className: classes.effortValues },\n React.createElement(core_1.IconButton, { color: activityData.effortRating === -1 ? 'primary' : 'default', onClick: function () { return setActivityData(__assign(__assign({}, activityData), { effortRating: -1 })); } },\n React.createElement(icons_1.NotInterestedIcon, null)),\n React.createElement(Rating_1.default, { name: \"effortRating-edit\", onChange: function (e, r) { return setActivityData(r !== null ? __assign(__assign({}, activityData), { effortRating: r }) : __assign(__assign({}, activityData), { effortRating: undefined })); }, color: \"primary\", value: activityData.effortRating }))))),\n React.createElement(\"div\", { className: classes.activityActions },\n React.createElement(core_1.Button, { className: classes.cancelBtn, variant: \"outlined\", color: \"primary\", onClick: onClose }, translate('activityDiary.cancel')),\n React.createElement(core_1.Button, { disabled: !(activityData.category && activityData.activity), variant: \"contained\", color: \"primary\", onClick: addOrUpdate }, translate('activityDiary.save')))));\n};\nexports.default = AddEditActivityDialog;\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar core_1 = require(\"@material-ui/core\");\nvar react_redux_1 = require(\"react-redux\");\nvar Rating_1 = __importDefault(require(\"@material-ui/lab/Rating\"));\nvar icons_1 = require(\"../../../../common/icons\");\nvar dateUtils_1 = require(\"../../../../youwell-common/dateUtils\");\nvar activityService_1 = require(\"../../../../app/services/activityService\");\nvar translate_1 = __importDefault(require(\"../../../../app/localization/translate\"));\nvar store_1 = require(\"../../../../app/store\");\nvar useStyles = (0, core_1.makeStyles)(function (theme) {\n var _a, _b;\n return (0, core_1.createStyles)({\n editActivityModal: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n content: (_a = {\n margin: theme.spacing(1),\n backgroundColor: theme.palette.background.default,\n borderRadius: theme.youwell.shapes.borderRadiusRounder,\n padding: theme.spacing(5)\n },\n _a[theme.breakpoints.down('sm')] = {\n padding: theme.spacing(3),\n },\n _a[theme.breakpoints.down('xs')] = {\n padding: theme.spacing(2),\n },\n _a),\n header: (_b = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n marginBottom: theme.spacing(4)\n },\n _b[theme.breakpoints.down('sm')] = {\n marginBottom: theme.spacing(3),\n },\n _b),\n editActivityModalTitle: {\n borderLeft: theme.youwell.borders.secondary,\n padding: theme.spacing(1, 2),\n },\n cancelIcon: {},\n item: {\n marginBottom: theme.spacing(3),\n },\n itemTop: {\n display: 'flex',\n justifyContent: 'space-between',\n },\n itemContent: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: theme.palette.common.white,\n paddingLeft: theme.spacing(1),\n },\n activityText: {\n flex: '1 1 auto',\n },\n actions: {\n marginTop: theme.spacing(6),\n display: 'flex',\n justifyContent: 'center',\n },\n });\n}, { name: 'DateDetails' });\nvar DateDetails = function (_a) {\n var open = _a.open, onClose = _a.onClose, date = _a.date, onAddClick = _a.onAddClick, onEditClick = _a.onEditClick;\n var classes = useStyles();\n var dispatch = (0, react_redux_1.useDispatch)();\n var translate = (0, translate_1.default)();\n var allActivities = (0, store_1.useYouwellSelector)(function (state) { return state.activityDataStore.activities; });\n if (!date) {\n return null;\n }\n var activitiesOnSelectedDate = allActivities === null || allActivities === void 0 ? void 0 : allActivities.filter(function (a) { return (0, dateUtils_1.isSameDate)(a.date, date); });\n var addNew = function () {\n onAddClick(date);\n };\n var editActivity = function (activity) { return function () {\n onEditClick(activity);\n }; };\n var deleteActivity = function (activity) { return function () {\n (0, activityService_1.deleteActivityData)(dispatch, activity, { callback: onClose });\n }; };\n return (React.createElement(core_1.Modal, { open: open, onClose: onClose, className: classes.editActivityModal },\n React.createElement(\"div\", { className: classes.content },\n React.createElement(\"div\", { className: classes.header },\n React.createElement(core_1.Typography, { className: classes.editActivityModalTitle, variant: \"subtitle2\" }, \"\".concat(translate('activityDiary.plannedActivities'), \" | \").concat((0, dateUtils_1.datestamp)(date))),\n React.createElement(core_1.IconButton, { onClick: onClose },\n React.createElement(icons_1.CancelOutlinedIcon, { className: classes.cancelIcon }))),\n React.createElement(\"div\", null, activitiesOnSelectedDate && activitiesOnSelectedDate.map(function (activity) { return (React.createElement(\"div\", { key: activity.id, className: classes.item },\n React.createElement(\"div\", { className: classes.itemTop },\n activity.category && (React.createElement(core_1.Typography, { variant: \"body2\" }, translate(\"activityDiary.categories.\".concat(activity.category)))),\n React.createElement(core_1.Typography, { variant: \"body2\" }, (0, dateUtils_1.hourCount)(activity.durationInMinutes, translate))),\n React.createElement(\"div\", { className: classes.itemContent },\n React.createElement(\"div\", { className: classes.activityText },\n React.createElement(core_1.Typography, null, activity.activity),\n activity.effortRating && activity.effortRating > 0 ? (React.createElement(Rating_1.default, { size: \"small\", name: \"effortRating-\".concat(activity.id), value: activity.effortRating, color: \"primary\" })) : activity.effortRating === -1 ? (React.createElement(core_1.Typography, { variant: \"caption\" }, translate('activityDiary.notCompleted'))) : (React.createElement(core_1.Typography, { variant: \"caption\" }, translate('activityDiary.effortNotRegistered')))),\n React.createElement(core_1.IconButton, { onClick: deleteActivity(activity) },\n React.createElement(icons_1.DeleteIcon, null)),\n React.createElement(core_1.IconButton, { onClick: editActivity(activity) },\n React.createElement(icons_1.EditIcon, null))))); })),\n React.createElement(\"div\", { className: classes.actions },\n React.createElement(core_1.Button, { onClick: addNew, color: \"primary\" }, translate('activityDiary.addNewActivity'))))));\n};\nDateDetails.defaultProps = {\n date: null,\n};\nexports.default = DateDetails;\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar react_router_dom_1 = require(\"react-router-dom\");\nvar store_1 = require(\"../../../app/store\");\nvar sleepService_1 = require(\"../../../app/services/sleepService\");\nvar components_1 = require(\"../../../youwell-common/components\");\nvar urls_1 = __importDefault(require(\"../../../app/urls\"));\nvar SleepDiary_1 = __importDefault(require(\"./SleepDiary\"));\nvar LogDay_1 = __importDefault(require(\"./LogDay\"));\nvar Index = function () {\n var dispatch = (0, store_1.useYouwellDispatch)();\n var sleepEntries = (0, store_1.useYouwellSelector)(function (state) { return state.sleepDataStore.entries; });\n React.useEffect(function () {\n if (!sleepEntries) {\n var startDate = new Date();\n startDate.setMonth(startDate.getMonth() - 1);\n (0, sleepService_1.fetchEntriesData)(dispatch, { startDate: startDate });\n }\n }, [dispatch, sleepEntries]);\n if (!sleepEntries) {\n return null;\n }\n return (React.createElement(react_router_dom_1.Switch, null,\n React.createElement(react_router_dom_1.Route, { path: \"\".concat(urls_1.default.inside.pages.sleepDiary, \"/log/:date\"), component: LogDay_1.default }),\n React.createElement(react_router_dom_1.Route, { path: \"\".concat(urls_1.default.inside.pages.sleepDiary) },\n React.createElement(SleepDiary_1.default, null)),\n React.createElement(react_router_dom_1.Route, { component: components_1.PageNotFound })));\n};\nexports.default = Index;\n","\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar classnames_1 = __importDefault(require(\"classnames\"));\nvar core_1 = require(\"@material-ui/core\");\nvar react_router_1 = require(\"react-router\");\nvar colors_1 = require(\"@material-ui/core/colors\");\nvar sleepService_1 = require(\"../../../app/services/sleepService\");\nvar translate_1 = __importDefault(require(\"../../../app/localization/translate\"));\nvar components_1 = require(\"../../../common/components\");\nvar breadcrumbUtil_1 = require(\"../../../common/breadcrumbUtil\");\nvar dateUtils_1 = require(\"../../../youwell-common/dateUtils\");\nvar urls_1 = __importDefault(require(\"../../../app/urls\"));\nvar useAutosaveForm_1 = __importDefault(require(\"../../../youwell-common/useAutosaveForm\"));\nvar constants_1 = require(\"./constants\");\nvar icons_1 = require(\"../../../common/icons\");\nvar validationUtils_1 = require(\"../../../youwell-common/validationUtils\");\nvar utils_1 = require(\"./utils\");\nvar store_1 = require(\"../../../app/store\");\nvar image_1 = require(\"../../../common/image\");\nvar LogWakeups_1 = __importDefault(require(\"./components/LogWakeups\"));\nvar LogNaps_1 = __importDefault(require(\"./components/LogNaps\"));\nvar DayView_1 = __importDefault(require(\"./components/DayView\"));\nvar styles = function (theme) {\n var _a, _b, _c, _d, _e;\n return (0, core_1.createStyles)({\n top: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n marginBottom: theme.spacing(2),\n },\n futureWarning: {\n border: theme.youwell.borders.dim,\n background: theme.palette.grey[100],\n padding: theme.spacing(4, 2),\n margin: theme.spacing(4, 0),\n },\n content: {\n marginTop: theme.spacing(4),\n '&$disabled': {\n opacity: 0.6,\n },\n },\n disabled: {},\n box: (_a = {\n marginBottom: theme.spacing(4),\n boxShadow: theme.shadows[2],\n backgroundColor: colors_1.grey[100],\n borderRadius: theme.youwell.shapes.borderRadius\n },\n _a[theme.breakpoints.down('xs')] = {\n padding: theme.spacing(2),\n },\n _a),\n entry: {\n '&+&': {\n marginTop: theme.spacing(6),\n },\n },\n inline: {\n display: 'flex',\n flexDirection: 'column',\n },\n entryLabelFlexWrapper: (_b = {\n marginBottom: theme.spacing(1),\n display: 'flex'\n },\n _b[theme.breakpoints.down('xs')] = {\n flexDirection: 'column',\n },\n _b),\n textAndIconWrapper: {\n display: 'flex',\n },\n entryLabel: {\n marginRight: theme.spacing(2),\n },\n entryTitle: {},\n timeInput: {\n width: '100%',\n border: theme.youwell.borders.dim,\n padding: theme.spacing(1),\n },\n emptyInput: {\n backgroundColor: theme.palette.common.white,\n },\n filledInInput: {\n background: theme.youwell.colors.inputBackground,\n },\n errorInput: {\n border: theme.youwell.borders.error,\n },\n textInput: {\n border: theme.youwell.borders.dim,\n padding: theme.spacing(1, 3),\n },\n slider: {\n marginTop: theme.spacing(2),\n },\n entryDescription: {\n marginBottom: theme.spacing(1),\n },\n bottom: (_c = {\n margin: theme.spacing(6, 0, 12),\n display: 'flex',\n justifyContent: 'flex-end',\n alignItems: 'center'\n },\n _c[theme.breakpoints.down('xs')] = {\n justifyContent: 'center',\n },\n _c),\n bottomValidation: {\n marginRight: theme.spacing(2),\n },\n doneBtn: {\n padding: theme.spacing(1, 10),\n margin: theme.spacing(2, 0, 2, 1),\n },\n alwaysPresentContent: {\n backgroundColor: theme.palette.background.default,\n padding: theme.spacing(4),\n borderRadius: theme.youwell.shapes.borderRadius,\n },\n ratingSliderIconSection: {\n display: 'flex',\n justifyContent: 'space-between',\n margin: theme.spacing(0, 2),\n },\n remindUserToAnswerText: (_d = {\n color: theme.palette.error.main,\n marginLeft: theme.spacing(1)\n },\n _d[theme.breakpoints.down('xs')] = {\n marginLeft: 0,\n },\n _d),\n remindUserToAnswerTextNextLine: {\n color: theme.palette.error.main,\n },\n skipAnsweringText: (_e = {\n color: theme.palette.error.main,\n textDecoration: 'underline',\n marginLeft: theme.spacing(1),\n '&:hover': {\n cursor: 'pointer',\n }\n },\n _e[theme.breakpoints.down('xs')] = {\n marginLeft: 0,\n },\n _e),\n requiredMessage: {\n marginTop: theme.spacing(1),\n },\n });\n};\nvar useStyles = (0, core_1.makeStyles)(function (theme) { return styles(theme); }, { name: 'LogDay' });\nvar validators = {\n bedTime: validationUtils_1.validateRequired,\n sleepAtemptTime: validationUtils_1.validateRequired,\n sleepTime: validationUtils_1.validateRequired,\n wakeTime: validationUtils_1.validateRequired,\n outOfBedTime: validationUtils_1.validateRequired,\n};\nvar LogDay = function () {\n var _a, _b, _c, _d, _e, _f;\n var _g, _h;\n var classes = useStyles();\n var dispatch = (0, store_1.useYouwellDispatch)();\n var translate = (0, translate_1.default)();\n var theme = (0, core_1.useTheme)();\n var dateString = (0, react_router_1.useParams)().date;\n var clientConfig = (0, store_1.useYouwellSelector)(function (state) { return state.auth.clientConfig; });\n var sleepEntries = (0, store_1.useYouwellSelector)(function (state) { return state.sleepDataStore.entries; });\n var date = React.useMemo(function () { return (0, dateUtils_1.getLocalDate)(dateString); }, [dateString]);\n var currentValues = React.useMemo(function () { return sleepEntries === null || sleepEntries === void 0 ? void 0 : sleepEntries.find(function (d) { return (0, dateUtils_1.isSameDate)(d.date, date); }); }, [date, sleepEntries]);\n var _j = React.useState(false), showDayView = _j[0], setShowDayView = _j[1];\n var _k = React.useState(false), shouldValidate = _k[0], setShouldValidate = _k[1];\n var _l = React.useState({ hasErrors: false }), validationErrors = _l[0], setValidationErrors = _l[1];\n // reset internal state on date change\n React.useEffect(function () {\n setValidationErrors({ hasErrors: false });\n setShowDayView(false);\n setShouldValidate(false);\n }, [dateString]);\n var saveData = React.useCallback(function (updatedValues, callback, background) {\n var _a, _b, _c, _d, _e;\n var lastNightWakeupHasNoWakeTime = (_c = (_a = updatedValues.nightWakeups) === null || _a === void 0 ? void 0 : _a[((_b = updatedValues.nightWakeups) === null || _b === void 0 ? void 0 : _b.length) - 1]) === null || _c === void 0 ? void 0 : _c.wakeTime;\n var nightWakeupsWithWaketime = (_d = updatedValues.nightWakeups) === null || _d === void 0 ? void 0 : _d.filter(function (d) { return d.wakeTime; });\n var allNightWakeupsHaveWakeTime = (nightWakeupsWithWaketime === null || nightWakeupsWithWaketime === void 0 ? void 0 : nightWakeupsWithWaketime.length) === ((_e = updatedValues.nightWakeups) === null || _e === void 0 ? void 0 : _e.length);\n if (allNightWakeupsHaveWakeTime || lastNightWakeupHasNoWakeTime) {\n var sleepData = {\n entry: __assign(__assign({}, updatedValues), { date: date, nightWakeups: lastNightWakeupHasNoWakeTime ? nightWakeupsWithWaketime : updatedValues.nightWakeups }),\n };\n (0, sleepService_1.updateSleepEntry)(dispatch, sleepData, { background: background, callback: callback });\n }\n }, [date, dispatch]);\n var _m = (0, useAutosaveForm_1.default)(saveData, { date: date }, currentValues), values = _m.values, handleSliderChange = _m.handleSliderChange, handleValueChange = _m.handleValueChange, ensureSaved = _m.ensureSaved;\n React.useEffect(function () {\n if (shouldValidate) {\n var allValidationErrors = (0, validationUtils_1.validateAllFields)(values, validators);\n setValidationErrors(allValidationErrors);\n }\n }, [shouldValidate, values]);\n var handleSubPropertyChange = function (name) { return function (event) {\n var _a;\n var updated = __assign(__assign({}, values.sleepProperties), (_a = {}, _a[name] = event.target.value, _a));\n handleValueChange('sleepProperties')(updated);\n }; };\n var handleTimeChange = function (name) { return function (value) {\n var timeWithCorrectDate = (0, utils_1.getTimeWithCorrectDate)(value, date, utils_1.SleepLoggingType.dayLogging);\n handleValueChange(name)(timeWithCorrectDate);\n }; };\n var handleChange = function (name) { return function (value) {\n handleTimeChange(name)(value);\n }; };\n var clickDone = function () {\n var allValidationErrors = (0, validationUtils_1.validateAllFields)(values, validators);\n if (!(0, validationUtils_1.checkHasErrors)(allValidationErrors)) {\n ensureSaved(function () {\n setShowDayView(true);\n });\n }\n else {\n setShouldValidate(true);\n setValidationErrors(allValidationErrors);\n }\n };\n var dateIsFuture = (0, dateUtils_1.isFuture)(date);\n return (React.createElement(components_1.PageLayout, { title: translate('sleepDiary.header'), breadcrumb: (0, breadcrumbUtil_1.getBreadCrumb)(translate('sleepDiary.logNight'), translate, clientConfig, undefined, [{ text: translate('sleepDiary.header'), url: urls_1.default.inside.pages.sleepDiary }]) },\n React.createElement(\"div\", { className: classes.top },\n React.createElement(core_1.Typography, { variant: \"h6\" }, translate('sleepDiary.registrationForDescription', { dateStart: (0, dateUtils_1.longDate)((0, dateUtils_1.addDays)(date, -1), translate), dateEnd: (0, dateUtils_1.longDate)(date, translate) }))),\n dateIsFuture && (React.createElement(core_1.Typography, { className: classes.futureWarning, color: \"primary\" }, translate('sleepDiary.cannotRegisterInFuture'))),\n React.createElement(\"div\", { className: (0, classnames_1.default)(classes.content, (_a = {}, _a[classes.disabled] = dateIsFuture, _a)) },\n React.createElement(\"div\", { className: classes.box },\n React.createElement(\"div\", { className: classes.alwaysPresentContent },\n React.createElement(\"div\", { className: classes.entry },\n React.createElement(core_1.Typography, { variant: \"subtitle2\", className: classes.entryTitle }, translate('sleepDiary.activityRatingTitle')),\n React.createElement(core_1.Typography, { variant: \"body2\", className: classes.entryDescription }, translate('sleepDiary.activityRatingDescription')),\n React.createElement(components_1.YouwellSlider, { disabled: dateIsFuture, className: classes.slider, value: values.daytimeActivityRating, onChange: handleSliderChange('daytimeActivityRating'), min: 1, max: 5, marks: constants_1.daytimeActivityRatings.map(function (d) { return ({ value: d.id, label: translate(d.label) }); }) }),\n React.createElement(\"div\", { className: classes.ratingSliderIconSection },\n React.createElement(image_1.WorkingWithLaptopIcon, { color: theme.palette.primary.main }),\n React.createElement(image_1.WalkingWithDogIcon, { color: theme.palette.primary.main }),\n React.createElement(image_1.PlayingSoccerIcon, { color: theme.palette.primary.main }))),\n React.createElement(\"div\", { className: classes.entry },\n React.createElement(core_1.Typography, { variant: \"subtitle2\", className: classes.entryTitle }, translate('sleepDiary.drugsOrAlcoholUse')),\n React.createElement(core_1.Typography, { variant: \"body2\", className: classes.entryDescription }, translate('sleepDiary.drugsOrAlcoholUseDescription')),\n React.createElement(\"div\", null,\n React.createElement(core_1.Input, { id: \"sleepMedication\", className: (0, classnames_1.default)(classes.textInput, ((_g = values.sleepProperties) === null || _g === void 0 ? void 0 : _g.sleepMedication) ? classes.filledInInput : classes.emptyInput), value: ((_h = values.sleepProperties) === null || _h === void 0 ? void 0 : _h.sleepMedication) || '', placeholder: translate('sleepDiary.drugsOrAlcoholInputPlaceHolder'), onChange: handleSubPropertyChange('sleepMedication'), fullWidth: true, disabled: dateIsFuture, disableUnderline: true, required: true })))),\n React.createElement(LogNaps_1.default, { values: values, date: date, disabled: dateIsFuture, handleValueChange: handleValueChange })),\n React.createElement(\"div\", { className: classes.box },\n React.createElement(\"div\", { className: classes.alwaysPresentContent },\n React.createElement(\"div\", { className: classes.entry },\n React.createElement(\"div\", { className: classes.inline },\n React.createElement(\"div\", { className: classes.entryLabelFlexWrapper },\n React.createElement(\"div\", { className: classes.textAndIconWrapper },\n React.createElement(core_1.Typography, { variant: \"subtitle2\", className: classes.entryLabel }, translate('sleepDiary.whenDidYouGoToSleep')),\n React.createElement(icons_1.SleepIcon, null))),\n React.createElement(components_1.TimePicker, { className: (0, classnames_1.default)(classes.timeInput, values.bedTime ? classes.filledInInput : classes.emptyInput, (_b = {}, _b[classes.errorInput] = !!validationErrors.bedTime, _b)), value: values.bedTime, onChange: handleChange('bedTime'), validation: (0, utils_1.validateTimeBeforeThan)(values.sleepAtemptTime, date, utils_1.SleepLoggingType.nightLogging), validationMessage: \"\".concat(translate('sleepDiary.inCorrectSleepDataInputOrder')), disabled: dateIsFuture, defaultValue: constants_1.defaultSleepTime, disableUnderline: true, inputAdornmentBeforeInput: true }),\n !!validationErrors.bedTime && (React.createElement(core_1.Typography, { variant: \"caption\", color: \"error\", className: classes.requiredMessage }, translate('sleepDiary.rememberToFillOut'))))),\n React.createElement(\"div\", { className: classes.entry },\n React.createElement(\"div\", { className: classes.inline },\n React.createElement(core_1.Typography, { variant: \"subtitle2\", className: classes.entryLabel }, translate('sleepDiary.whenDidYouTryToSleep')),\n React.createElement(components_1.TimePicker, { className: (0, classnames_1.default)(classes.timeInput, values.sleepAtemptTime ? classes.filledInInput : classes.emptyInput, (_c = {}, _c[classes.errorInput] = !!validationErrors.sleepAtemptTime, _c)), value: values.sleepAtemptTime, onChange: handleChange('sleepAtemptTime'), validation: (0, utils_1.validateTimeLaterThan)(values.bedTime, date, utils_1.SleepLoggingType.nightLogging), validationMessage: \"\".concat(translate('sleepDiary.inCorrectSleepDataInputOrder')), disabled: dateIsFuture, defaultValue: constants_1.defaultSleepTime, disableUnderline: true, inputAdornmentBeforeInput: true }),\n !!validationErrors.sleepAtemptTime && (React.createElement(core_1.Typography, { variant: \"caption\", color: \"error\", className: classes.requiredMessage }, translate('sleepDiary.rememberToFillOut'))))),\n React.createElement(\"div\", { className: classes.entry },\n React.createElement(\"div\", { className: classes.inline },\n React.createElement(\"div\", { className: classes.entryLabelFlexWrapper },\n React.createElement(\"div\", { className: classes.textAndIconWrapper },\n React.createElement(core_1.Typography, { variant: \"subtitle2\", className: classes.entryLabel }, translate('sleepDiary.whenDidYouSleep')),\n React.createElement(image_1.SleepSmileyIcon, null))),\n React.createElement(components_1.TimePicker, { className: (0, classnames_1.default)(classes.timeInput, values.sleepTime ? classes.filledInInput : classes.emptyInput, (_d = {}, _d[classes.errorInput] = !!validationErrors.sleepTime, _d)), value: values.sleepTime, onChange: handleChange('sleepTime'), validation: (0, utils_1.validateTimeLaterThan)(values.sleepAtemptTime, date, utils_1.SleepLoggingType.nightLogging), validationMessage: \"\".concat(translate('sleepDiary.inCorrectSleepDataInputOrder')), disabled: dateIsFuture, defaultValue: constants_1.defaultSleepTime, disableUnderline: true, inputAdornmentBeforeInput: true }),\n !!validationErrors.sleepTime && (React.createElement(core_1.Typography, { variant: \"caption\", color: \"error\", className: classes.requiredMessage }, translate('sleepDiary.rememberToFillOut'))))))),\n React.createElement(LogWakeups_1.default, { values: values, handleValueChange: handleValueChange, disabled: dateIsFuture }),\n React.createElement(\"div\", { className: classes.box },\n React.createElement(\"div\", { className: classes.alwaysPresentContent },\n React.createElement(\"div\", { className: classes.entry },\n React.createElement(\"div\", { className: classes.inline },\n React.createElement(core_1.Typography, { variant: \"subtitle2\", className: classes.entryLabel }, translate('sleepDiary.whenDidYouWakeUp')),\n React.createElement(components_1.TimePicker, { className: (0, classnames_1.default)(classes.timeInput, values.wakeTime ? classes.filledInInput : classes.emptyInput, (_e = {}, _e[classes.errorInput] = !!validationErrors.wakeTime, _e)), value: values.wakeTime, onChange: handleTimeChange('wakeTime'), validation: (0, utils_1.validateTimeBeforeThan)(values.outOfBedTime, date, utils_1.SleepLoggingType.dayLogging), validationMessage: \"\".concat(translate('sleepDiary.inCorrectSleepDataInputOrder')), disabled: dateIsFuture, defaultValue: constants_1.defaultWakeTime, disableUnderline: true, inputAdornmentBeforeInput: true }),\n !!validationErrors.wakeTime && (React.createElement(core_1.Typography, { variant: \"caption\", color: \"error\", className: classes.requiredMessage }, translate('sleepDiary.rememberToFillOut'))))),\n React.createElement(\"div\", { className: classes.entry },\n React.createElement(\"div\", { className: classes.inline },\n React.createElement(core_1.Typography, { variant: \"subtitle2\", className: classes.entryLabel }, translate('sleepDiary.whenDidYouGetOutOfBed')),\n React.createElement(components_1.TimePicker, { className: (0, classnames_1.default)(classes.timeInput, values.outOfBedTime ? classes.filledInInput : classes.emptyInput, (_f = {}, _f[classes.errorInput] = !!validationErrors.outOfBedTime, _f)), value: values.outOfBedTime, onChange: handleTimeChange('outOfBedTime'), validation: (0, utils_1.validateTimeLaterThan)(values.wakeTime, date, utils_1.SleepLoggingType.dayLogging), validationMessage: \"\".concat(translate('sleepDiary.inCorrectSleepDataInputOrder')), disabled: dateIsFuture, defaultValue: constants_1.defaultWakeTime, disableUnderline: true, inputAdornmentBeforeInput: true }),\n !!validationErrors.outOfBedTime && (React.createElement(core_1.Typography, { variant: \"caption\", color: \"error\", className: classes.requiredMessage }, translate('sleepDiary.rememberToFillOut'))))),\n React.createElement(\"div\", { className: classes.entry },\n React.createElement(core_1.Typography, { variant: \"subtitle2\", className: classes.entryTitle }, translate('sleepDiary.sleepRating')),\n React.createElement(components_1.YouwellSlider, { className: classes.slider, value: values.sleepRating, onChange: handleSliderChange('sleepRating'), min: 1, max: 5, marks: constants_1.sleepRatings.map(function (d) { return ({ value: d.id, label: translate(d.label) }); }), disabled: dateIsFuture }),\n React.createElement(\"div\", { className: classes.ratingSliderIconSection },\n React.createElement(image_1.BadFaceIcon, { color: theme.palette.primary.main }),\n React.createElement(image_1.OkFaceIcon, { color: theme.palette.primary.main }),\n React.createElement(image_1.HappyFaceIcon, { color: theme.palette.primary.main })))))),\n React.createElement(\"div\", { className: classes.bottom },\n validationErrors.hasErrors && (React.createElement(core_1.Typography, { variant: \"subtitle2\", color: \"error\", className: classes.bottomValidation }, translate('sleepDiary.pleaseFillOutAllFields'))),\n React.createElement(core_1.Button, { className: classes.doneBtn, variant: \"contained\", color: \"secondary\", onClick: clickDone, disabled: dateIsFuture }, translate('sleepDiary.done'))),\n React.createElement(DayView_1.default, { date: date, open: showDayView, onClose: function () { return setShowDayView(false); } })));\n};\nexports.default = LogDay;\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar classnames_1 = __importDefault(require(\"classnames\"));\nvar recharts_1 = require(\"recharts\");\nvar core_1 = require(\"@material-ui/core\");\nvar icons_1 = require(\"../../../common/icons\");\nvar image_1 = require(\"../../../common/image\");\nvar sleepService_1 = require(\"../../../app/services/sleepService\");\nvar translate_1 = __importDefault(require(\"../../../app/localization/translate\"));\nvar components_1 = require(\"../../../common/components\");\nvar breadcrumbUtil_1 = require(\"../../../common/breadcrumbUtil\");\nvar store_1 = require(\"../../../app/store\");\nvar dateUtils_1 = require(\"../../../youwell-common/dateUtils\");\nvar arrayUtils_1 = require(\"../../../youwell-common/arrayUtils\");\nvar browserUtils_1 = require(\"../../../youwell-common/browserUtils\");\nvar RegisterSleepMenu_1 = __importDefault(require(\"./components/RegisterSleepMenu\"));\nvar InfoBox_1 = __importDefault(require(\"./components/InfoBox\"));\nvar utils_1 = require(\"./utils\");\nvar WeekAverageDetails_1 = __importDefault(require(\"./components/WeekAverageDetails\"));\nvar EditBedtimePlan_1 = __importDefault(require(\"./components/EditBedtimePlan\"));\nvar constants_1 = require(\"../../../youwell-common/constants\");\nvar constants_2 = require(\"./constants\");\nvar SleepDetailsTable_1 = __importDefault(require(\"./components/SleepDetailsTable\"));\nvar WeekSelector_1 = __importDefault(require(\"./components/WeekSelector\"));\nvar useStyles = (0, core_1.makeStyles)(function (theme) {\n var _a, _b, _c;\n return (0, core_1.createStyles)({\n top: (_a = {\n marginBottom: theme.spacing(4)\n },\n _a[theme.breakpoints.down('xs')] = {\n marginBottom: theme.spacing(4),\n },\n _a),\n mainHeading: {\n textTransform: 'uppercase',\n marginBottom: theme.spacing(2),\n },\n content: {\n marginBottom: theme.spacing(8),\n '&:last-child': {\n marginBottom: theme.spacing(12),\n },\n },\n infoBoxes: (_b = {\n display: 'flex',\n margin: theme.spacing(4, 0, 8)\n },\n _b[theme.breakpoints.down('xs')] = {\n flexWrap: 'wrap',\n },\n _b),\n chartContent: (_c = {\n boxShadow: theme.shadows[2],\n background: theme.palette.common.white,\n paddingTop: theme.spacing(2)\n },\n _c[theme.breakpoints.down('xs')] = {\n overflowX: 'auto',\n overflowY: 'hidden',\n width: '100%',\n },\n _c),\n chartScrollContainer: {},\n chartTitle: {\n margin: theme.spacing(2),\n },\n chartDetails: {\n marginTop: theme.spacing(2),\n },\n weekSelection: {\n margin: theme.spacing(2, 0),\n display: 'flex',\n justifyContent: 'center',\n },\n infoLine: {\n display: 'flex',\n alignItems: 'center',\n },\n infoIcon: {\n width: 40,\n height: 40,\n marginRight: theme.spacing(2),\n color: theme.palette.secondary.main,\n },\n bedPlanLine: {\n display: 'flex',\n alignItems: 'center',\n marginBottom: theme.spacing(2),\n },\n bedPlanIcon: {\n width: 30,\n height: 30,\n marginRight: theme.spacing(2),\n },\n ratingDescription: {\n marginTop: theme.spacing(4),\n },\n noRegistrations: {\n background: theme.youwell.colors.secondaryBackground,\n padding: theme.spacing(2),\n },\n customTooltip: {\n backgroundColor: theme.youwell.colors.secondaryBackground,\n padding: theme.spacing(2),\n borderRadius: theme.youwell.shapes.borderRadius,\n },\n });\n}, { name: 'SleepDiary' });\nvar SleepDiary = function () {\n var _a;\n var classes = useStyles();\n var dispatch = (0, store_1.useYouwellDispatch)();\n var translate = (0, translate_1.default)();\n var clientConfig = (0, store_1.useYouwellSelector)(function (state) { return state.auth.clientConfig; });\n var sleepEntries = (0, store_1.useYouwellSelector)(function (state) { return (0, arrayUtils_1.sortByDateAscending)(state.sleepDataStore.entries, 'date') || []; });\n var sleepEntriesLoadedFrom = (0, store_1.useYouwellSelector)(function (state) { return state.sleepDataStore.sleepEntriesLoadedFrom; });\n var selectedWeek = (0, store_1.useYouwellSelector)(function (state) { return state.sleepDataStore.selectedWeek; });\n var userData = (0, store_1.useYouwellSelector)(function (state) { var _a; return (_a = state.auth.profileData) === null || _a === void 0 ? void 0 : _a.extendedProperties; });\n var theme = (0, core_1.useTheme)();\n var isMobile = (0, core_1.useMediaQuery)(theme.breakpoints.down('xs'));\n var sleepLookup = React.useMemo(function () { return (0, utils_1.getSleepLookup)(sleepEntries); }, [sleepEntries]);\n var selectedWeekEntries = (0, utils_1.getRegistrationsForWeek)(sleepLookup, selectedWeek);\n var weekAverage = React.useMemo(function () { return (0, utils_1.getWeekAverage)(selectedWeekEntries); }, [selectedWeekEntries]);\n var hasRegistrationsForWeek = weekAverage.count > 0;\n var onWeekSelectionChange = function (week) {\n var localDate = (0, dateUtils_1.getLocalDate)(sleepEntriesLoadedFrom);\n if (sleepEntriesLoadedFrom && localDate && week.start < localDate) {\n localDate.setMonth(localDate.getMonth() - 1);\n (0, sleepService_1.fetchEntriesData)(dispatch, { startDate: localDate, endDate: sleepEntriesLoadedFrom });\n }\n };\n var _b = (0, browserUtils_1.useElementSize)(), contentRef = _b.elementRef, contentSize = _b.elementSize;\n var chartWidth = isMobile ? selectedWeekEntries.length * 80 : contentSize.width;\n var bedtimePlan = {\n bedTime: (userData === null || userData === void 0 ? void 0 : userData[constants_1.userDataProperties.bedtimePlan.bedTime]) || '',\n wakeTime: (userData === null || userData === void 0 ? void 0 : userData[constants_1.userDataProperties.bedtimePlan.wakeTime]) || '',\n };\n var hasBedtimePlan = Boolean(bedtimePlan.bedTime && bedtimePlan.wakeTime);\n var HistoryGraphTooltip = function (_a) {\n var _b, _c, _d, _e, _f, _g, _h, _j, _k;\n var active = _a.active, payload = _a.payload;\n if (active && payload && payload.length) {\n return (React.createElement(\"div\", { className: classes.customTooltip },\n React.createElement(core_1.Typography, { variant: \"subtitle2\" }, (0, dateUtils_1.shortDate)((_c = (_b = payload[0]) === null || _b === void 0 ? void 0 : _b.payload) === null || _c === void 0 ? void 0 : _c.x, translate, false, false, true)),\n React.createElement(core_1.Typography, { variant: \"body2\", color: \"primary\" }, \"\".concat(translate('sleepDiary.totalSleep'), \": \").concat((0, dateUtils_1.hourCount)((_d = payload[0].payload) === null || _d === void 0 ? void 0 : _d.totalSleepMinutes, translate))),\n React.createElement(core_1.Typography, { variant: \"body2\", color: \"primary\" }, \"\".concat(translate('sleepDiary.sleepOnset'), \": \").concat((0, dateUtils_1.hourCount)((0, dateUtils_1.getNumberOfMinutes)((_f = (_e = payload[0]) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f.sleepTime, (_h = (_g = payload[0]) === null || _g === void 0 ? void 0 : _g.payload) === null || _h === void 0 ? void 0 : _h.sleepAtemptTime), translate))),\n React.createElement(core_1.Typography, { variant: \"body2\", color: \"primary\" }, \"\".concat(translate('sleepDiary.sleepEfficiency'), \": \").concat((_k = (_j = payload[0]) === null || _j === void 0 ? void 0 : _j.payload) === null || _k === void 0 ? void 0 : _k.y, \"%\"))));\n }\n return null;\n };\n return (React.createElement(React.Fragment, null,\n React.createElement(components_1.PageLayout, { breadcrumb: (0, breadcrumbUtil_1.getBreadCrumb)(translate('sleepDiary.header'), translate, clientConfig) },\n React.createElement(\"div\", { className: classes.top },\n React.createElement(core_1.Typography, { variant: \"h4\", className: classes.mainHeading }, translate('sleepDiary.header')),\n React.createElement(RegisterSleepMenu_1.default, { isModal: true, numberOfNightCards: 4 })),\n React.createElement(\"div\", { className: classes.weekSelection, ref: contentRef },\n React.createElement(WeekSelector_1.default, { onChange: onWeekSelectionChange })),\n React.createElement(\"div\", { className: classes.infoBoxes },\n React.createElement(InfoBox_1.default, { heading: translate('sleepDiary.sleepEfficiency'), subHeading: translate('sleepDiary.average'), Icon: icons_1.AnalyticsIcon, ActionPopup: hasRegistrationsForWeek ? WeekAverageDetails_1.default : null, ActionPopupProps: { weekAverage: weekAverage }, actionText: translate('sleepDiary.moreInformation'), actionPopupHeading: translate('sleepDiary.weekAverage') },\n React.createElement(\"div\", { className: classes.infoLine }, hasRegistrationsForWeek ? (React.createElement(React.Fragment, null,\n React.createElement(icons_1.DotIcon, { className: classes.infoIcon }),\n React.createElement(core_1.Typography, { variant: \"h6\" }, \"\".concat(Math.round(weekAverage.sleepQuality / weekAverage.count), \" %\")))) : (React.createElement(core_1.Typography, { variant: \"caption\" }, translate('sleepDiary.noEntriesForThisWeek'))))),\n React.createElement(InfoBox_1.default, { heading: translate('sleepDiary.qualityOfSleep'), subHeading: translate('sleepDiary.average'), Icon: icons_1.AnalyticsIcon },\n React.createElement(\"div\", { className: classes.infoLine }, hasRegistrationsForWeek ? (React.createElement(\"div\", null,\n React.createElement(core_1.Typography, { variant: \"h6\", align: \"center\" }, translate(((_a = constants_2.sleepRatings.find(function (d) { return Math.round(weekAverage.sleepRating / weekAverage.count) === d.id; })) === null || _a === void 0 ? void 0 : _a.label) || '', undefined, { onMissingTranslation: function () { return ''; } })),\n React.createElement(core_1.Typography, { variant: \"body1\", align: \"center\" }, \"\".concat((weekAverage.sleepRating / weekAverage.count).toFixed(1))),\n React.createElement(core_1.Typography, { variant: \"caption\", display: \"block\", className: classes.ratingDescription }, translate('sleepDiary.sleepRatingDescription')))) : (React.createElement(core_1.Typography, { variant: \"caption\" }, translate('sleepDiary.noEntriesForThisWeek'))))),\n React.createElement(InfoBox_1.default, { heading: translate('sleepDiary.bedtimePlan'), Icon: icons_1.AlarmIcon, ActionPopup: EditBedtimePlan_1.default, ActionPopupProps: { bedtimePlan: bedtimePlan }, actionText: translate('sleepDiary.editSleepPlan'), actionPopupHeading: translate('sleepDiary.bedtimePlan') }, hasBedtimePlan ? (React.createElement(React.Fragment, null,\n React.createElement(\"div\", { className: classes.bedPlanLine },\n React.createElement(image_1.MoonIcon, { className: classes.bedPlanIcon }),\n React.createElement(core_1.Typography, null, bedtimePlan.bedTime)),\n React.createElement(\"div\", { className: classes.bedPlanLine },\n React.createElement(icons_1.SunIcon, { className: classes.bedPlanIcon }),\n React.createElement(core_1.Typography, null, bedtimePlan.wakeTime)))) : (React.createElement(core_1.Typography, { variant: \"caption\" }, translate('sleepDiary.noSleepPlanCreated'))))),\n React.createElement(\"div\", { className: (0, classnames_1.default)(classes.content, classes.chartContent) },\n React.createElement(core_1.Typography, { variant: \"h5\", className: classes.chartTitle, gutterBottom: true }, translate('sleepDiary.history')),\n React.createElement(\"div\", { className: classes.chartScrollContainer, style: { width: chartWidth } },\n hasRegistrationsForWeek ? (React.createElement(recharts_1.LineChart, { width: chartWidth, height: 300, data: selectedWeekEntries.map(function (d) {\n var _a, _b, _c, _d;\n return ({\n x: d.isoDateString, y: (_a = d.entry) === null || _a === void 0 ? void 0 : _a.sleepQuality, sleepAtemptTime: (_b = d.entry) === null || _b === void 0 ? void 0 : _b.sleepAtemptTime, sleepTime: (_c = d.entry) === null || _c === void 0 ? void 0 : _c.sleepTime, totalSleepMinutes: (_d = d.entry) === null || _d === void 0 ? void 0 : _d.totalSleepMinutes,\n });\n }), margin: { top: 0, right: 16, bottom: 0, left: 160 } },\n React.createElement(recharts_1.YAxis, { domain: [50, 100], ticks: [50, 60, 70, 80, 90, 100], tickFormatter: function (t) { return \"\".concat(t, \" %\"); } }),\n React.createElement(recharts_1.Line, { dataKey: \"y\", strokeWidth: 4, stroke: theme.palette.secondary.main, dot: { stroke: theme.palette.primary.main, fill: theme.palette.primary.main, r: 8 } }),\n React.createElement(recharts_1.CartesianGrid, { vertical: false }),\n React.createElement(recharts_1.Tooltip, { content: React.createElement(HistoryGraphTooltip, null) }))) : (React.createElement(core_1.Typography, { variant: \"body2\", align: \"center\", className: classes.noRegistrations }, \"\".concat(translate('sleepDiary.noEntriesForThisWeek'), \". \").concat(translate('sleepDiary.clickDateToRegister')))),\n React.createElement(SleepDetailsTable_1.default, { data: selectedWeekEntries, hasRegistrations: hasRegistrationsForWeek }))))));\n};\nexports.default = SleepDiary;\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar core_1 = require(\"@material-ui/core\");\nvar classnames_1 = __importDefault(require(\"classnames\"));\nvar translate_1 = __importDefault(require(\"../../../../app/localization/translate\"));\nvar dateUtils_1 = require(\"../../../../youwell-common/dateUtils\");\nvar constants_1 = require(\"../constants\");\nvar icons_1 = require(\"../../../../common/icons\");\nvar image_1 = require(\"../../../../common/image\");\nvar useStyles = (0, core_1.makeStyles)(function (theme) {\n var _a;\n return ({\n root: {\n boxShadow: theme.shadows[2],\n background: theme.palette.common.white,\n },\n labelSection: {\n borderRight: theme.youwell.borders.dim,\n textAlign: 'right',\n fontWeight: 500,\n minWidth: 200,\n },\n valueSection: (_a = {\n textAlign: 'center',\n minWidth: 200\n },\n _a[theme.breakpoints.down('xs')] = {\n minWidth: 100,\n },\n _a),\n labelWrapper: {\n display: 'flex',\n justifyContent: 'end',\n alignItems: 'center',\n },\n sleepEfficiency: {\n borderRadius: theme.youwell.shapes.borderRadiusFlatter,\n color: theme.palette.common.white,\n padding: theme.spacing(2, 4),\n },\n goodSleep: {\n backgroundColor: theme.palette.secondary.main,\n },\n badSleep: {\n backgroundColor: theme.palette.error.main,\n },\n divider: {\n borderBottom: theme.youwell.borders.normal,\n },\n icons: {\n marginLeft: theme.spacing(2),\n verticalAlign: 'middle',\n },\n });\n}, { name: 'DaySummaryTable' });\nvar DaySummaryTable = function (_a) {\n var _b, _c, _d, _e, _f, _g, _h, _j;\n var day = _a.day;\n var classes = useStyles();\n var translate = (0, translate_1.default)();\n var sleepEfficiency = (day.totalSleepMinutes && day.totalBedMinutes) ? Number(((day.totalSleepMinutes / day.totalBedMinutes)) * 100).toFixed(0) : 0;\n return (React.createElement(core_1.Table, { className: classes.root },\n React.createElement(core_1.TableBody, null,\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection }, translate('sleepDiary.sleepQuality')),\n React.createElement(core_1.TableCell, { className: classes.valueSection }, day.totalSleepMinutes && day.totalBedMinutes ? (React.createElement(\"span\", { className: (0, classnames_1.default)(classes.sleepEfficiency, sleepEfficiency < 70 ? classes.badSleep : classes.goodSleep) }, \"\".concat(sleepEfficiency, \"%\"))) : translate('sleepDiary.registrationMissing'))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection }, translate('sleepDiary.totalSleepMinutes')),\n React.createElement(core_1.TableCell, { className: classes.valueSection }, day.totalSleepMinutes ? ((0, dateUtils_1.hourCount)(day.totalSleepMinutes, translate)) : translate('sleepDiary.registrationMissing'))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: (0, classnames_1.default)(classes.labelSection, classes.divider) },\n React.createElement(\"div\", { className: classes.labelWrapper },\n translate('sleepDiary.totalBedMinutes'),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(icons_1.SleepIcon, { className: classes.icons })))),\n React.createElement(core_1.TableCell, { className: (0, classnames_1.default)(classes.valueSection, classes.divider) }, day.totalBedMinutes ? (0, dateUtils_1.hourCount)(day.totalBedMinutes, translate) : (translate('sleepDiary.registrationMissing')))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection }, translate('sleepDiary.dayView.daytimeActivityRatings')),\n React.createElement(core_1.TableCell, { className: classes.valueSection }, constants_1.daytimeActivityRatings.find(function (d) { return d.id === day.daytimeActivityRating; }) ? (translate(\"\".concat((_b = constants_1.daytimeActivityRatings.find(function (d) { return d.id === day.daytimeActivityRating; })) === null || _b === void 0 ? void 0 : _b.label))) : (translate('sleepDiary.registrationMissing')))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null, translate('sleepDiary.dayView.dayTimeNaps')),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(image_1.SleepSmileyIcon, null)))),\n React.createElement(core_1.TableCell, { className: classes.valueSection }, day.daytimeNaps && day.daytimeNaps.length > 0 ? day.daytimeNaps.map(function (nap) {\n var _a;\n return (React.createElement(\"div\", { key: (_a = nap.sleepTime) === null || _a === void 0 ? void 0 : _a.toString() }, nap.wakeTime && nap.sleepTime\n ? (React.createElement(React.Fragment, null,\n React.createElement(\"span\", null, \"\".concat((0, dateUtils_1.hourCount)((0, dateUtils_1.getNumberOfMinutes)(nap.sleepTime, nap.wakeTime), translate), \" \")),\n React.createElement(\"span\", null, \"\".concat(translate('sleepDiary.dayView.at'), \" \").concat((0, dateUtils_1.getTimePartForInput)(nap.sleepTime))))) : (React.createElement(\"span\", null, \" - \".concat(translate('sleepDiary.dayView.at'), \" \").concat((0, dateUtils_1.getTimePartForInput)(nap.sleepTime))))));\n }) : ((_c = day.sleepProperties) === null || _c === void 0 ? void 0 : _c.hasDaytimeNaps) === false ? translate('sleepDiary.none') : translate('sleepDiary.registrationMissing'))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: (0, classnames_1.default)(classes.labelSection, classes.divider) },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null,\n React.createElement(\"div\", null, translate('sleepDiary.dayView.sleepMedication')),\n React.createElement(\"div\", null, translate('sleepDiary.dayView.alcohol'))),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(image_1.MedicineIcon, null)))),\n React.createElement(core_1.TableCell, { className: (0, classnames_1.default)(classes.valueSection, classes.divider) }, ((_d = day.sleepProperties) === null || _d === void 0 ? void 0 : _d.sleepMedication) ? (day.sleepProperties.sleepMedication) : translate('sleepDiary.none'))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null, translate('sleepDiary.dayView.gotToBed')),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(image_1.MoonIcon, null)))),\n React.createElement(core_1.TableCell, { className: classes.valueSection }, day.bedTime ? (0, dateUtils_1.getTimePartForInput)(day.bedTime) : (translate('sleepDiary.registrationMissing')))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null, translate('sleepDiary.dayView.tiredToSleep')),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(image_1.SleepSmileyIcon, null)))),\n React.createElement(core_1.TableCell, { className: classes.valueSection }, day.sleepAtemptTime ? (0, dateUtils_1.getTimePartForInput)(day.sleepAtemptTime) : (translate('sleepDiary.registrationMissing')))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null, translate('sleepDiary.dayView.fellAsleep')),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(image_1.SleepSmileyIcon, null)))),\n React.createElement(core_1.TableCell, { className: classes.valueSection }, day.sleepTime ? (0, dateUtils_1.getTimePartForInput)(day.sleepTime) : translate('sleepDiary.registrationMissing'))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null, translate('sleepDiary.dayView.awake')),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(image_1.AwakeSmileyIcon, null)))),\n React.createElement(core_1.TableCell, { className: classes.valueSection }, ((_e = day.sleepProperties) === null || _e === void 0 ? void 0 : _e.numberOfNightWakeups) ? (\"\".concat((_f = day.sleepProperties) === null || _f === void 0 ? void 0 : _f.numberOfNightWakeups, \" \").concat(translate('sleepDiary.dayView.times'))) : ((_g = day.sleepProperties) === null || _g === void 0 ? void 0 : _g.numberOfNightWakeups) === 0 ? '-' : translate('sleepDiary.registrationMissing'))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: (0, classnames_1.default)(classes.labelSection, classes.divider) },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null, translate('sleepDiary.nightWakeupsTotalMinutes')),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(image_1.AwakeSmileyIcon, null)))),\n React.createElement(core_1.TableCell, { className: (0, classnames_1.default)(classes.valueSection, classes.divider) }, ((_h = day.sleepProperties) === null || _h === void 0 ? void 0 : _h.nightWakeupsTotalMinutes) ? (\"\".concat(day.sleepProperties.nightWakeupsTotalMinutes, \" \").concat(translate('sleepDiary.dayView.min'))) : ('-'))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null, translate('sleepDiary.dayView.youWokeUp')),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(icons_1.SunIcon, null)))),\n React.createElement(core_1.TableCell, { className: classes.valueSection }, day.wakeTime ? ((0, dateUtils_1.getTimePartForInput)(day.wakeTime)) : (translate('sleepDiary.registrationMissing')))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { align: \"center\", className: classes.labelSection },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null, translate('sleepDiary.dayView.youGotOutOfBed')),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(image_1.WakeUpIcon, null)))),\n React.createElement(core_1.TableCell, { className: classes.valueSection }, day.outOfBedTime ? ((0, dateUtils_1.getTimePartForInput)(day.outOfBedTime)) : (translate('sleepDiary.registrationMissing')))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection }, translate('sleepDiary.yourSleepRating')),\n React.createElement(core_1.TableCell, { className: classes.valueSection }, day.sleepRating ? (translate(((_j = constants_1.sleepRatings.find(function (d) { return day.sleepRating === d.id; })) === null || _j === void 0 ? void 0 : _j.label) || '', undefined, { onMissingTranslation: function () { var _a; return ((_a = day.sleepRating) === null || _a === void 0 ? void 0 : _a.toString()) || ''; } })) : (translate('sleepDiary.registrationMissing')))))));\n};\nexports.default = DaySummaryTable;\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar core_1 = require(\"@material-ui/core\");\nvar connected_react_router_1 = require(\"connected-react-router\");\nvar react_router_dom_1 = require(\"react-router-dom\");\nvar translate_1 = __importDefault(require(\"../../../../app/localization/translate\"));\nvar store_1 = require(\"../../../../app/store\");\nvar dateUtils_1 = require(\"../../../../youwell-common/dateUtils\");\nvar urls_1 = __importDefault(require(\"../../../../app/urls\"));\nvar icons_1 = require(\"../../../../common/icons\");\nvar arrayUtils_1 = require(\"../../../../youwell-common/arrayUtils\");\nvar utils_1 = require(\"../utils\");\nvar RegisterSleepMenu_1 = __importDefault(require(\"./RegisterSleepMenu\"));\nvar components_1 = require(\"../../../../common/components\");\nvar sleepService_1 = require(\"../../../../app/services/sleepService\");\nvar DaySummaryTable_1 = __importDefault(require(\"./DaySummaryTable\"));\nvar useStyles = (0, core_1.makeStyles)(function (theme) {\n var _a, _b, _c, _d, _e;\n return ({\n modalContentAndActionsWrapper: (_a = {\n display: 'flex',\n alignItems: 'center'\n },\n _a[theme.breakpoints.down('sm')] = {\n flexDirection: 'column',\n },\n _a),\n modalContent: {\n display: 'flex',\n flexDirection: 'column',\n margin: theme.spacing(1),\n '&:focus': {\n outline: 'none',\n },\n },\n top: (_b = {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n margin: theme.spacing(12, 0, 2, 0)\n },\n _b[theme.breakpoints.down('md')] = {\n margin: theme.spacing(2, 0, 2, 0),\n },\n _b),\n modalActions: (_c = {\n margin: theme.spacing(2)\n },\n _c[theme.breakpoints.down('sm')] = {\n margin: theme.spacing(0, 2, 2, 2),\n width: '75%',\n },\n _c[theme.breakpoints.down('xs')] = {\n width: '100%',\n },\n _c),\n modalActionText: {\n margin: theme.spacing(2, 0, 3, 2),\n },\n modalActionButton: (_d = {\n padding: theme.spacing(1, 4),\n marginLeft: theme.spacing(2)\n },\n _d[theme.breakpoints.down('xs')] = {\n padding: theme.spacing(1, 2),\n },\n _d),\n registerItems: (_e = {\n display: 'inline-block'\n },\n _e[theme.breakpoints.down('xs')] = {\n display: 'block',\n paddingBottom: theme.spacing(5),\n },\n _e),\n btnSection: {\n display: 'flex',\n justifyContent: 'flex-end',\n padding: theme.spacing(2, 1),\n },\n wellDoneTextAndIconWrapper: {\n display: 'flex',\n },\n thumbsUpIcon: {\n color: theme.palette.secondary.main,\n marginRight: theme.spacing(1),\n },\n wellDoneText: {\n fontWeight: 500,\n },\n fillOutMissingNightsText: {\n fontWeight: 500,\n },\n reminderInfo: {\n margin: theme.spacing(2),\n },\n });\n}, { name: 'DayView' });\nvar DayView = function (_a) {\n var dateString = _a.date, open = _a.open, onClose = _a.onClose;\n var classes = useStyles();\n var dispatch = (0, store_1.useYouwellDispatch)();\n var translate = (0, translate_1.default)();\n var _b = React.useState(false), showReminderText = _b[0], setShowReminderText = _b[1];\n var sleepEntries = (0, store_1.useYouwellSelector)(function (state) { return (0, arrayUtils_1.sortByDateAscending)(state.sleepDataStore.entries, 'date') || []; });\n var date = React.useMemo(function () { return (0, dateUtils_1.getLocalDate)(dateString); }, [dateString]);\n var day = sleepEntries.find(function (d) { return (0, dateUtils_1.isSameDate)(d.date, date); }) || { date: date };\n var sleepLookup = (0, utils_1.getSleepLookup)(sleepEntries);\n var missingNights = (0, utils_1.missingRegistrationsLastWeek)(sleepLookup);\n var skipAllMissingNights = function () {\n missingNights.forEach(function (missingNight) {\n var sleepData = {\n entry: {\n date: missingNight,\n sleepProperties: {\n userSkippedRegistering: true,\n },\n },\n };\n (0, sleepService_1.updateSleepEntry)(dispatch, sleepData);\n });\n dispatch((0, connected_react_router_1.push)(urls_1.default.inside.pages.sleepDiary));\n };\n var edit = function () {\n onClose();\n dispatch((0, connected_react_router_1.push)(\"\".concat(urls_1.default.inside.pages.sleepDiary, \"/log/\").concat((0, dateUtils_1.isoDate)(date))));\n };\n var notNow = function () {\n setShowReminderText(false);\n dispatch((0, connected_react_router_1.push)(urls_1.default.inside.pages.sleepDiary));\n };\n return (React.createElement(components_1.OverlayModal, { open: open, \n // onClose={close} // should not be closed by clicking outside\n wide: true },\n React.createElement(\"div\", { className: classes.modalContentAndActionsWrapper },\n React.createElement(\"div\", { className: classes.modalContent },\n React.createElement(\"div\", { className: classes.top },\n React.createElement(\"div\", null,\n React.createElement(core_1.Typography, { variant: \"h6\" }, translate('sleepDiary.registration')),\n React.createElement(core_1.Typography, { variant: \"h6\" }, (0, dateUtils_1.isToday)(date) ? \"\".concat(translate('sleepDiary.lastNight'), \" \").concat((0, dateUtils_1.longDate)(date, translate)) : (0, dateUtils_1.longDate)(date, translate))),\n React.createElement(core_1.Button, { onClick: edit }, translate('sleepDiary.change'))),\n React.createElement(DaySummaryTable_1.default, { day: day })),\n React.createElement(\"div\", { className: classes.modalActions }, (missingNights === null || missingNights === void 0 ? void 0 : missingNights.length) > 0 ? (React.createElement(React.Fragment, null,\n React.createElement(\"div\", { className: classes.modalActionText }, day.totalSleepMinutes ? (React.createElement(\"div\", { className: classes.wellDoneTextAndIconWrapper },\n React.createElement(icons_1.ThumbUpIcon, { className: classes.thumbsUpIcon }),\n React.createElement(core_1.Typography, { className: classes.wellDoneText }, missingNights.length === 1 ? translate('sleepDiary.dayView.wellDoneOneNightMissing') : translate('sleepDiary.dayView.wellDoneMultipleNightsMissing')))) : (React.createElement(core_1.Typography, { className: classes.fillOutMissingNightsText }, translate('sleepDiary.dayView.fillOutMissingNights')))),\n React.createElement(\"div\", { className: classes.registerItems },\n React.createElement(RegisterSleepMenu_1.default, { onClick: onClose, numberOfNightCards: 3 }),\n showReminderText ? (React.createElement(React.Fragment, null,\n React.createElement(\"div\", { className: classes.reminderInfo },\n React.createElement(core_1.Typography, null, translate('sleepDiary.easyToForgetDetails'))),\n React.createElement(\"div\", { className: classes.btnSection },\n React.createElement(core_1.Button, { className: classes.modalActionButton, variant: \"outlined\", color: \"secondary\", onClick: skipAllMissingNights }, translate('sleepDiary.dayView.dontAskMeAgain')),\n React.createElement(core_1.Button, { className: classes.modalActionButton, variant: \"contained\", color: \"secondary\", onClick: notNow }, translate('sleepDiary.dayView.registerLater'))))) : (React.createElement(\"div\", { className: classes.btnSection },\n React.createElement(core_1.Button, { className: classes.modalActionButton, variant: \"outlined\", color: \"secondary\", onClick: function () { return setShowReminderText(true); } }, translate('sleepDiary.dayView.notNow'))))))) : (React.createElement(React.Fragment, null,\n React.createElement(\"div\", { className: classes.modalActionText },\n React.createElement(icons_1.ThumbUpIcon, { className: classes.thumbsUpIcon }),\n React.createElement(core_1.Typography, null, translate('sleepDiary.dayView.wellDone'))),\n React.createElement(core_1.Button, { className: classes.modalActionButton, variant: \"contained\", color: \"primary\", component: react_router_dom_1.Link, to: urls_1.default.inside.pages.sleepDiary }, translate('sleepDiary.dayView.close'))))))));\n};\nexports.default = DayView;\n","\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar core_1 = require(\"@material-ui/core\");\nvar icons_1 = require(\"../../../../common/icons\");\nvar components_1 = require(\"../../../../common/components\");\nvar utils_1 = require(\"../utils\");\nvar constants_1 = require(\"../constants\");\nvar translate_1 = __importDefault(require(\"../../../../app/localization/translate\"));\nvar useStyles = (0, core_1.makeStyles)(function (theme) {\n var _a, _b, _c;\n return ({\n root: (_a = {\n background: theme.palette.common.white,\n color: theme.palette.common.black,\n borderRadius: theme.youwell.shapes.borderRadiusFlatter,\n marginTop: theme.spacing(1),\n padding: theme.spacing(1.5),\n display: 'flex',\n alignItems: 'center',\n width: '100%'\n },\n _a[theme.breakpoints.down('xs')] = {\n flexDirection: 'column',\n justifyContent: 'space-between',\n alignItems: 'flex-end',\n },\n _a),\n entry: (_b = {\n marginRight: theme.spacing(8),\n display: 'flex',\n alignItems: 'center'\n },\n _b[theme.breakpoints.down('xs')] = {\n width: '100%',\n marginRight: theme.spacing(0),\n marginBottom: theme.spacing(1),\n },\n _b),\n entryLabel: (_c = {\n marginRight: theme.spacing(2)\n },\n _c[theme.breakpoints.down('xs')] = {\n flex: '1 1 auto',\n },\n _c),\n flex: {\n flex: '1 1 auto',\n },\n deleteIcon: {\n color: theme.palette.secondary.main,\n },\n notValidInput: {\n color: theme.palette.error.main,\n marginTop: theme.spacing(1),\n },\n });\n}, { name: 'DaytimeNaps' });\nvar DaytimeNap = function (_a) {\n var value = _a.value, onChange = _a.onChange, onDelete = _a.onDelete, date = _a.date, daytimeNaps = _a.daytimeNaps, listIndex = _a.listIndex, validationItem = _a.validationItem;\n var classes = useStyles();\n var translate = (0, translate_1.default)();\n var validateInput = function (name, changedValue) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;\n if (!daytimeNaps)\n return true;\n var currWakeTime = (_b = (_a = daytimeNaps[listIndex]) === null || _a === void 0 ? void 0 : _a.wakeTime) !== null && _b !== void 0 ? _b : null;\n var prevWakeTime = (_d = (_c = daytimeNaps[listIndex - 1]) === null || _c === void 0 ? void 0 : _c.wakeTime) !== null && _d !== void 0 ? _d : null;\n var currSleepTime = (_f = (_e = daytimeNaps[listIndex]) === null || _e === void 0 ? void 0 : _e.sleepTime) !== null && _f !== void 0 ? _f : null;\n var nextSleepTime = (_h = (_g = daytimeNaps[listIndex + 1]) === null || _g === void 0 ? void 0 : _g.sleepTime) !== null && _h !== void 0 ? _h : null;\n var prevSleepTime = (_k = (_j = daytimeNaps[listIndex - 1]) === null || _j === void 0 ? void 0 : _j.sleepTime) !== null && _k !== void 0 ? _k : null;\n var validation = true;\n if (name === utils_1.sleepLoggingItemNames.sleepTime) {\n if (currSleepTime) {\n var isLaterThanPrevWakeTimeOrPrevSleepTime = prevWakeTime ? (0, utils_1.validateTimeLaterThanWithActualDate)(prevWakeTime, date, utils_1.SleepLoggingType.dayLogging)(changedValue) : prevSleepTime ? (0, utils_1.validateTimeLaterThanWithActualDate)(prevSleepTime, date, utils_1.SleepLoggingType.dayLogging)(changedValue) : true;\n var isLaterThanCurrWakeTimeOrNextSleepTime = currWakeTime ? (0, utils_1.validateTimeLaterThanWithActualDate)(currWakeTime, date, utils_1.SleepLoggingType.dayLogging)(changedValue) : nextSleepTime ? (0, utils_1.validateTimeLaterThanWithActualDate)(nextSleepTime, date, utils_1.SleepLoggingType.dayLogging)(changedValue) : false;\n validation = isLaterThanPrevWakeTimeOrPrevSleepTime && !isLaterThanCurrWakeTimeOrNextSleepTime;\n }\n }\n if (name === utils_1.sleepLoggingItemNames.wakeTime) {\n if (currWakeTime) {\n var isLaterThanNextSleepTime = nextSleepTime ? (0, utils_1.validateTimeLaterThanWithActualDate)(nextSleepTime, date, utils_1.SleepLoggingType.dayLogging)(changedValue) : false;\n var isLaterThanCurrSleepTime = currSleepTime ? (0, utils_1.validateTimeLaterThanWithActualDate)(currSleepTime, date, utils_1.SleepLoggingType.dayLogging)(changedValue) : true;\n validation = isLaterThanCurrSleepTime && !isLaterThanNextSleepTime;\n }\n }\n return validation;\n };\n var handleChange = function (name) { return function (changedValue) {\n var _a;\n onChange(__assign(__assign({}, value), (_a = {}, _a[name] = (0, utils_1.getTimeWithActualDate)(changedValue, date), _a)));\n }; };\n var validation = function (name, newValue) {\n var _a, _b;\n if ((validationItem === null || validationItem === void 0 ? void 0 : validationItem.length) > 0) {\n if (name === utils_1.sleepLoggingItemNames.sleepTime && ((_a = validationItem[0]) === null || _a === void 0 ? void 0 : _a.validation.sleep) === false) {\n return validateInput(utils_1.sleepLoggingItemNames.sleepTime, value.sleepTime);\n }\n if (name === utils_1.sleepLoggingItemNames.wakeTime && ((_b = validationItem[0]) === null || _b === void 0 ? void 0 : _b.validation.wake) === false) {\n return validateInput(utils_1.sleepLoggingItemNames.wakeTime, value.wakeTime);\n }\n }\n return validateInput(name, newValue);\n };\n return (React.createElement(React.Fragment, null,\n value.wakeTime && !value.sleepTime && (React.createElement(core_1.Typography, { className: classes.notValidInput }, translate('sleepDiary.mustApplySleepTime'))),\n React.createElement(\"div\", { className: classes.root },\n React.createElement(\"div\", { className: classes.entry },\n React.createElement(core_1.Typography, { variant: \"subtitle1\", className: classes.entryLabel }, translate('sleepDiary.fellAsleep')),\n React.createElement(components_1.TimePicker, { value: value.sleepTime, onChange: handleChange(utils_1.sleepLoggingItemNames.sleepTime), validation: function (d) { return validation(utils_1.sleepLoggingItemNames.sleepTime, d); }, defaultValue: constants_1.defaultDaytimeSleepTime, validateWithoutValueChange: true })),\n React.createElement(\"div\", { className: classes.entry },\n React.createElement(core_1.Typography, { variant: \"subtitle1\", className: classes.entryLabel }, translate('sleepDiary.wokeUp')),\n React.createElement(components_1.TimePicker, { value: value.wakeTime, onChange: handleChange(utils_1.sleepLoggingItemNames.wakeTime), validation: function (d) { return validation(utils_1.sleepLoggingItemNames.wakeTime, d); }, defaultValue: constants_1.defaultDaytimeWakeTime, validateWithoutValueChange: true })),\n React.createElement(\"div\", { className: classes.flex }),\n React.createElement(core_1.IconButton, { onClick: onDelete, size: \"small\" },\n React.createElement(icons_1.DeleteIcon, { className: classes.deleteIcon })))));\n};\nDaytimeNap.defaultProps = {\n daytimeNaps: null,\n};\nexports.default = DaytimeNap;\n","\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar core_1 = require(\"@material-ui/core\");\nvar translate_1 = __importDefault(require(\"../../../../app/localization/translate\"));\nvar store_1 = require(\"../../../../app/store\");\nvar AuthStore = __importStar(require(\"../../../../app/store/AuthStore\"));\nvar constants_1 = require(\"../../../../youwell-common/constants\");\nvar components_1 = require(\"../../../../common/components\");\nvar constants_2 = require(\"../constants\");\nvar dateUtils_1 = require(\"../../../../youwell-common/dateUtils\");\nvar useStyles = (0, core_1.makeStyles)(function (theme) { return (0, core_1.createStyles)({\n root: {},\n table: {\n margin: theme.spacing(8, 0),\n },\n timePicker: {\n marginBottom: -38, // removes unused space for validation-message..\n },\n actions: {\n marginTop: theme.spacing(15),\n display: 'flex',\n justifyContent: 'flex-end',\n },\n}); }, { name: 'EditBedtimePlan' });\nvar EditBedtimePlan = function (_a) {\n var bedtimePlan = _a.bedtimePlan, onClose = _a.onClose;\n var classes = useStyles();\n var translate = (0, translate_1.default)();\n var dispatch = (0, store_1.useYouwellDispatch)();\n var profileData = (0, store_1.useYouwellSelector)(function (state) { return state.auth.profileData; });\n var _b = React.useState({ bedTime: null, wakeTime: null }), planDetails = _b[0], setPlanDetails = _b[1];\n var _c = React.useState(false), hasChanged = _c[0], setHasChanged = _c[1];\n var handleChange = function (name) { return function (date) {\n setPlanDetails(function (prev) {\n var _a;\n return (__assign(__assign({}, prev), (_a = {}, _a[name] = date, _a)));\n });\n setHasChanged(true);\n }; };\n React.useEffect(function () {\n if (bedtimePlan) {\n setPlanDetails({\n bedTime: (0, dateUtils_1.getLocalDate)(bedtimePlan.bedTime, false),\n wakeTime: (0, dateUtils_1.getLocalDate)(bedtimePlan.wakeTime, false),\n });\n }\n }, [bedtimePlan]);\n var save = function () {\n var _a;\n var userData = __assign(__assign({}, profileData === null || profileData === void 0 ? void 0 : profileData.extendedProperties), (_a = {}, _a[constants_1.userDataProperties.bedtimePlan.bedTime] = (0, dateUtils_1.timeOnly)(planDetails.bedTime), _a[constants_1.userDataProperties.bedtimePlan.wakeTime] = (0, dateUtils_1.timeOnly)(planDetails.wakeTime), _a));\n dispatch(AuthStore.actionCreators.updateUserData(userData, { callback: onClose }));\n };\n return (React.createElement(\"div\", { className: classes.root },\n React.createElement(core_1.Table, { className: classes.table },\n React.createElement(core_1.TableBody, null,\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, null, translate('sleepDiary.plannedBedTime')),\n React.createElement(core_1.TableCell, { align: \"right\" },\n React.createElement(components_1.TimePicker, { className: classes.timePicker, value: planDetails.bedTime, onChange: handleChange('bedTime'), defaultValue: constants_2.defaultSleepTime, disableUnderline: true, inputAdornmentBeforeInput: true }))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, null, translate('sleepDiary.plannedWakeTime')),\n React.createElement(core_1.TableCell, { align: \"right\" },\n React.createElement(components_1.TimePicker, { className: classes.timePicker, value: planDetails.wakeTime, onChange: handleChange('wakeTime'), defaultValue: constants_2.defaultWakeTime, disableUnderline: true, inputAdornmentBeforeInput: true }))))),\n React.createElement(\"div\", { className: classes.actions },\n React.createElement(core_1.Button, { onClick: save, disabled: !hasChanged }, translate('common.save')))));\n};\nEditBedtimePlan.defaultProps = {\n onClose: null,\n};\nexports.default = EditBedtimePlan;\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar core_1 = require(\"@material-ui/core\");\nvar components_1 = require(\"../../../../common/components\");\nvar useStyles = (0, core_1.makeStyles)(function (theme) {\n var _a;\n return (0, core_1.createStyles)({\n root: (_a = {\n flex: '1 1 30%',\n background: theme.youwell.colors.defaultBackground,\n borderRadius: theme.youwell.shapes.borderRadius,\n boxShadow: theme.shadows[3],\n padding: theme.spacing(2, 4),\n display: 'flex',\n flexDirection: 'column',\n '&:nth-child(2)': {\n margin: theme.spacing(0, 2),\n }\n },\n _a[theme.breakpoints.down('xs')] = {\n flexBasis: '80%',\n margin: theme.spacing(2),\n },\n _a),\n icon: {\n margin: theme.spacing(1, 0),\n },\n heading: {},\n subHeading: {},\n content: {\n flex: '1 1 auto',\n marginTop: theme.spacing(2),\n },\n actionButton: {\n marginTop: theme.spacing(2),\n },\n });\n}, { name: 'InfoBox' });\nvar InfoBox = function (_a) {\n var heading = _a.heading, subHeading = _a.subHeading, Icon = _a.Icon, children = _a.children, ActionPopup = _a.ActionPopup, ActionPopupProps = _a.ActionPopupProps, actionText = _a.actionText, actionPopupHeading = _a.actionPopupHeading, backgroundColor = _a.backgroundColor;\n var classes = useStyles();\n return (React.createElement(\"div\", { className: classes.root, style: { background: backgroundColor } },\n Icon && React.createElement(Icon, { className: classes.icon }),\n React.createElement(core_1.Typography, { variant: \"h6\", className: classes.heading }, heading),\n subHeading && (React.createElement(core_1.Typography, { className: classes.subHeading }, subHeading)),\n React.createElement(\"div\", { className: classes.content }, children),\n ActionPopup && (React.createElement(components_1.ModalAction, { modalHeading: actionPopupHeading || '', buttonProps: { className: classes.actionButton, variant: 'contained', color: 'secondary' }, buttonText: actionText, Modal: ActionPopup, ModalProps: ActionPopupProps }))));\n};\nInfoBox.defaultProps = {\n Icon: null,\n subHeading: null,\n ActionPopup: null,\n ActionPopupProps: null,\n actionText: null,\n actionPopupHeading: null,\n backgroundColor: null,\n};\nexports.default = InfoBox;\n","\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar core_1 = require(\"@material-ui/core\");\nvar React = __importStar(require(\"react\"));\nvar classnames_1 = __importDefault(require(\"classnames\"));\nvar translate_1 = __importDefault(require(\"../../../../app/localization/translate\"));\nvar DaytimeNap_1 = __importDefault(require(\"./DaytimeNap\"));\nvar utils_1 = require(\"../utils\");\nvar icons_1 = require(\"../../../../common/icons\");\nvar styles = function (theme) {\n var _a, _b, _c;\n return (0, core_1.createStyles)({\n root: {\n backgroundColor: theme.palette.background.default,\n },\n box: (_a = {\n backgroundColor: theme.palette.background.default,\n marginBottom: theme.spacing(4),\n boxShadow: theme.shadows[2],\n borderRadius: theme.youwell.shapes.borderRadius\n },\n _a[theme.breakpoints.down('xs')] = {\n padding: theme.spacing(2),\n },\n _a),\n entry: {\n '&+&': {\n marginTop: theme.spacing(6),\n },\n },\n entryTitle: {},\n dayTimeNapWrapper: (_b = {},\n _b[theme.breakpoints.down('xs')] = {\n display: 'flex',\n flexDirection: 'column',\n },\n _b),\n yesNoRadioBtns: {\n border: theme.youwell.borders.secondary,\n margin: theme.spacing(2, 2, 2, 0),\n padding: theme.spacing(1, 16, 1, 1),\n },\n input: {\n backgroundColor: theme.palette.common.white,\n },\n alwaysPresentContent: {\n padding: theme.spacing(4),\n borderRadius: theme.youwell.shapes.borderRadius,\n },\n toggleableContent: (_c = {\n backgroundColor: \"\".concat(theme.palette.secondary.main, \"20\"),\n padding: theme.spacing(5),\n margin: '0 auto'\n },\n _c[theme.breakpoints.down('xs')] = {\n maxWidth: '100%',\n padding: theme.spacing(2, 1),\n },\n _c),\n radioGroup: {\n display: 'flex',\n flexDirection: 'row',\n padding: theme.spacing(1, 0, 3, 0),\n },\n addDayTimeNapsBtnSection: {\n display: 'flex',\n justifyContent: 'flex-end',\n marginTop: theme.spacing(2),\n },\n notValidTimeInputOrder: {\n color: theme.palette.error.main,\n marginTop: theme.spacing(1),\n },\n });\n};\nvar useStyles = (0, core_1.makeStyles)(function (theme) { return styles(theme); }, { name: 'LogNaps' });\nvar LogNaps = function (_a) {\n var _b, _c, _d;\n var values = _a.values, date = _a.date, disabled = _a.disabled, handleValueChange = _a.handleValueChange;\n var classes = useStyles();\n var translate = (0, translate_1.default)();\n var addDaytimeNap = function () {\n var updated = __spreadArray(__spreadArray([], values.daytimeNaps || [], true), [{\n wakeTime: undefined,\n sleepTime: undefined,\n }], false);\n handleValueChange('daytimeNaps')(updated);\n };\n var removeDaytimeNap = function (indexToRemove) { return function () {\n var _a;\n var updated = (_a = values.daytimeNaps) === null || _a === void 0 ? void 0 : _a.filter(function (d, i) { return i !== indexToRemove; });\n handleValueChange('daytimeNaps')(updated);\n }; };\n var handleWakeupValueChange = function (wakeUpIndex) { return function (updatedValue) {\n var updated = values.daytimeNaps && values.daytimeNaps.map(function (d, i) { return (i === wakeUpIndex ? updatedValue : d); });\n handleValueChange('daytimeNaps')(updated);\n }; };\n var handleDayTimeNapChange = function (event) {\n var hasDaytimeNaps = event.target.value === 'true';\n var updated = __assign(__assign({}, values.sleepProperties), { hasDaytimeNaps: hasDaytimeNaps });\n handleValueChange('sleepProperties')(updated);\n if (hasDaytimeNaps) {\n addDaytimeNap();\n }\n else {\n handleValueChange('daytimeNaps')([]);\n }\n };\n var unValidDaytimeNaps = (0, utils_1.dayTimeNapsUnValidItems)(date, values.daytimeNaps);\n var hasDaytimeNaps = !!((_b = values.sleepProperties) === null || _b === void 0 ? void 0 : _b.hasDaytimeNaps);\n var hasNoDaytimeNaps = ((_c = values.sleepProperties) === null || _c === void 0 ? void 0 : _c.hasDaytimeNaps) !== undefined && !values.sleepProperties.hasDaytimeNaps;\n return (React.createElement(\"div\", { className: classes.root },\n React.createElement(\"div\", { className: classes.alwaysPresentContent },\n React.createElement(\"div\", { className: classes.entry },\n React.createElement(core_1.Typography, { variant: \"subtitle2\", className: classes.entryTitle }, translate('sleepDiary.dayTimeNaps')),\n React.createElement(core_1.RadioGroup, { className: classes.radioGroup, onChange: handleDayTimeNapChange },\n React.createElement(core_1.FormControlLabel, { disabled: disabled, className: (0, classnames_1.default)(classes.yesNoRadioBtns, classes.input), value: \"false\", control: React.createElement(core_1.Radio, { checked: hasNoDaytimeNaps }), label: translate('sleepDiary.no') }),\n React.createElement(core_1.FormControlLabel, { disabled: disabled, className: (0, classnames_1.default)(classes.yesNoRadioBtns, classes.input), value: \"true\", control: React.createElement(core_1.Radio, { checked: hasDaytimeNaps }), label: translate('sleepDiary.yes') })))),\n hasDaytimeNaps && (React.createElement(\"div\", { className: classes.toggleableContent },\n React.createElement(core_1.Typography, { variant: \"subtitle2\", className: classes.entryTitle }, translate('sleepDiary.dayTimeNapsDescription')),\n unValidDaytimeNaps.length > 0 && (React.createElement(core_1.Typography, { className: classes.notValidTimeInputOrder }, translate('sleepDiary.inCorrectSleepDataInputOrder'))),\n React.createElement(\"div\", { className: classes.dayTimeNapWrapper }, (_d = values.daytimeNaps) === null || _d === void 0 ? void 0 :\n _d.map(function (item, i) { return (React.createElement(DaytimeNap_1.default\n // eslint-disable-next-line react/no-array-index-key\n , { \n // eslint-disable-next-line react/no-array-index-key\n key: i, value: item, date: date, onChange: handleWakeupValueChange(i), onDelete: removeDaytimeNap(i), daytimeNaps: values.daytimeNaps, listIndex: i, validationItem: unValidDaytimeNaps === null || unValidDaytimeNaps === void 0 ? void 0 : unValidDaytimeNaps.filter(function (d) { return d.index === i; }) })); }),\n React.createElement(\"div\", { className: classes.addDayTimeNapsBtnSection },\n React.createElement(core_1.Button, { variant: \"contained\", color: \"secondary\", onClick: addDaytimeNap, startIcon: React.createElement(icons_1.AddIcon, null), disabled: disabled }, translate('sleepDiary.addSleepTime'))))))));\n};\nexports.default = LogNaps;\n","\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar core_1 = require(\"@material-ui/core\");\nvar classnames_1 = __importDefault(require(\"classnames\"));\nvar React = __importStar(require(\"react\"));\nvar translate_1 = __importDefault(require(\"../../../../app/localization/translate\"));\nvar dateUtils_1 = require(\"../../../../youwell-common/dateUtils\");\nvar image_1 = require(\"../../../../common/image\");\nvar styles = function (theme) {\n var _a, _b, _c;\n return (0, core_1.createStyles)({\n box: (_a = {\n marginBottom: theme.spacing(4),\n boxShadow: theme.shadows[2],\n backgroundColor: theme.palette.background.default,\n borderRadius: theme.youwell.shapes.borderRadius\n },\n _a[theme.breakpoints.down('xs')] = {\n padding: theme.spacing(2),\n },\n _a),\n entry: {\n '&+&': {\n marginTop: theme.spacing(6),\n },\n },\n entryLabelFlexWrapper: (_b = {\n marginBottom: theme.spacing(1),\n display: 'flex'\n },\n _b[theme.breakpoints.down('xs')] = {\n flexDirection: 'column',\n },\n _b),\n textAndIconWrapper: {\n display: 'flex',\n },\n entryLabel: {\n marginRight: theme.spacing(2),\n },\n entryTitle: {},\n input: {\n backgroundColor: theme.palette.common.white,\n },\n selectInput: {\n border: theme.youwell.borders.dim,\n width: 200,\n height: 50,\n textAlign: 'center',\n margin: theme.spacing(1, 2, 1, 0),\n '& .MuiSelect-selectMenu': {\n display: 'flex',\n justifyContent: 'center',\n },\n },\n selectInputMenuItem: {\n display: 'flex',\n justifyContent: 'center',\n },\n yesNoRadioBtns: {\n border: theme.youwell.borders.secondary,\n margin: theme.spacing(2, 2, 2, 0),\n padding: theme.spacing(1, 16, 1, 1),\n },\n alwaysPresentContent: {\n padding: theme.spacing(4),\n borderRadius: theme.youwell.shapes.borderRadius,\n },\n toggleableContent: (_c = {\n backgroundColor: \"\".concat(theme.palette.secondary.main, \"20\"),\n padding: theme.spacing(5),\n margin: '0 auto'\n },\n _c[theme.breakpoints.down('xs')] = {\n maxWidth: '100%',\n padding: theme.spacing(2, 1),\n },\n _c),\n radioGroup: {\n display: 'flex',\n padding: theme.spacing(1, 0, 3, 0),\n },\n rowContainer: {\n flexDirection: 'row',\n },\n hoursAndMinutesInput: {\n display: 'flex',\n alignItems: 'center',\n },\n hoursAndMinutesInputHelperText: {\n padding: theme.spacing(0, 2, 0, 1),\n },\n numberOfWakeups: {\n backgroundColor: theme.palette.common.white,\n marginLeft: theme.spacing(1),\n },\n });\n};\nvar useStyles = (0, core_1.makeStyles)(function (theme) { return styles(theme); }, { name: 'LogWakeups' });\nvar numberOfWakeups = [1, 2, 3, 4, 5];\nvar hours = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nvar minutes = [0, 10, 20, 30, 40, 50];\nvar LogWakeups = function (_a) {\n var _b, _c, _d;\n var values = _a.values, handleValueChange = _a.handleValueChange, disabled = _a.disabled;\n var classes = useStyles();\n var translate = (0, translate_1.default)();\n var timeValues = (0, dateUtils_1.getTimeValues)((_b = values.sleepProperties) === null || _b === void 0 ? void 0 : _b.nightWakeupsTotalMinutes);\n var handleNumberOfWakeupsChange = function (event) {\n var _a;\n var val = Number(event.target.value) || 0;\n var updated = __assign(__assign({}, values.sleepProperties), { numberOfNightWakeups: val, nightWakeupsTotalMinutes: val === 0 ? 0 : (_a = values.sleepProperties) === null || _a === void 0 ? void 0 : _a.nightWakeupsTotalMinutes });\n handleValueChange('sleepProperties')(updated);\n };\n var handleHoursChange = function (event) {\n var val = Number(event.target.value) || 0;\n var updated = __assign(__assign({}, values.sleepProperties), { nightWakeupsTotalMinutes: val * 60 + timeValues.minutes });\n handleValueChange('sleepProperties')(updated);\n };\n var handleMinutesChange = function (event) {\n var val = Number(event.target.value) || 0;\n var updated = __assign(__assign({}, values.sleepProperties), { nightWakeupsTotalMinutes: timeValues.hours * 60 + val });\n handleValueChange('sleepProperties')(updated);\n };\n var hasNighWakeups = ((_c = values.sleepProperties) === null || _c === void 0 ? void 0 : _c.numberOfNightWakeups) !== undefined && values.sleepProperties.numberOfNightWakeups > 0;\n var hasNoNighWakeups = ((_d = values.sleepProperties) === null || _d === void 0 ? void 0 : _d.numberOfNightWakeups) !== undefined && values.sleepProperties.numberOfNightWakeups === 0;\n return (React.createElement(\"div\", { className: classes.box },\n React.createElement(\"div\", { className: classes.alwaysPresentContent },\n React.createElement(\"div\", { className: classes.entry },\n React.createElement(\"div\", { className: classes.entryLabelFlexWrapper },\n React.createElement(\"div\", { className: classes.textAndIconWrapper },\n React.createElement(core_1.Typography, { variant: \"subtitle2\", className: classes.entryLabel }, translate('sleepDiary.nightWakeups')),\n React.createElement(image_1.AwakeSmileyIcon, null))),\n React.createElement(core_1.RadioGroup, { className: (0, classnames_1.default)(classes.radioGroup, classes.rowContainer), onChange: handleNumberOfWakeupsChange },\n React.createElement(core_1.FormControlLabel, { className: (0, classnames_1.default)(classes.yesNoRadioBtns, classes.input), value: 0, control: React.createElement(core_1.Radio, { checked: hasNoNighWakeups }), label: translate('sleepDiary.no'), disabled: disabled }),\n React.createElement(core_1.FormControlLabel, { className: (0, classnames_1.default)(classes.yesNoRadioBtns, classes.input), value: 1, control: React.createElement(core_1.Radio, { checked: hasNighWakeups }), label: translate('sleepDiary.yes'), disabled: disabled })))),\n hasNighWakeups && (React.createElement(\"div\", { className: classes.toggleableContent },\n React.createElement(core_1.Typography, { variant: \"subtitle2\", className: classes.entryTitle }, translate('sleepDiary.howManyTimesAwakeAtNight')),\n React.createElement(core_1.RadioGroup, { className: classes.radioGroup, onChange: handleNumberOfWakeupsChange }, numberOfWakeups.map(function (value) {\n var _a;\n return (React.createElement(core_1.FormControlLabel, { className: classes.numberOfWakeups, disabled: disabled, key: value, value: value, control: React.createElement(core_1.Radio, { checked: ((_a = values.sleepProperties) === null || _a === void 0 ? void 0 : _a.numberOfNightWakeups) === value }), label: translate(\"sleepDiary.howOftenAwake.\".concat(value)) }));\n })),\n React.createElement(core_1.Typography, { variant: \"subtitle2\", className: classes.entryTitle }, translate('sleepDiary.howLongAwakeAtNight')),\n React.createElement(\"div\", { className: classes.hoursAndMinutesInput },\n React.createElement(core_1.Select, { type: \"number\", className: (0, classnames_1.default)(classes.selectInput, classes.input), value: timeValues.hours, onChange: handleHoursChange, disabled: disabled, disableUnderline: true, MenuProps: {\n anchorOrigin: {\n vertical: 'bottom',\n horizontal: 'left',\n },\n transformOrigin: {\n vertical: 'top',\n horizontal: 'left',\n },\n getContentAnchorEl: null,\n } }, hours === null || hours === void 0 ? void 0 : hours.map(function (item) { return (React.createElement(core_1.MenuItem, { className: classes.selectInputMenuItem, key: item, value: item },\n item,\n item === 1 ? (React.createElement(core_1.Typography, { className: classes.hoursAndMinutesInputHelperText, variant: \"body2\" }, translate('time.hour')))\n : (React.createElement(core_1.Typography, { className: classes.hoursAndMinutesInputHelperText, variant: \"body2\" }, translate('time.hours'))))); })),\n React.createElement(core_1.Select, { type: \"number\", className: (0, classnames_1.default)(classes.selectInput, classes.input), value: timeValues.minutes, onChange: handleMinutesChange, disabled: disabled, disableUnderline: true, MenuProps: {\n anchorOrigin: {\n vertical: 'bottom',\n horizontal: 'left',\n },\n transformOrigin: {\n vertical: 'top',\n horizontal: 'left',\n },\n getContentAnchorEl: null,\n } }, minutes === null || minutes === void 0 ? void 0 : minutes.map(function (item) { return (React.createElement(core_1.MenuItem, { className: classes.selectInputMenuItem, key: item, value: item },\n item,\n item === 1 ? (React.createElement(core_1.Typography, { className: classes.hoursAndMinutesInputHelperText, variant: \"body2\" }, translate('time.minute')))\n : (React.createElement(core_1.Typography, { className: classes.hoursAndMinutesInputHelperText, variant: \"body2\" }, translate('time.minutes'))))); })))))));\n};\nexports.default = LogWakeups;\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar core_1 = require(\"@material-ui/core\");\nvar react_router_dom_1 = require(\"react-router-dom\");\nvar connected_react_router_1 = require(\"connected-react-router\");\nvar classnames_1 = __importDefault(require(\"classnames\"));\nvar translate_1 = __importDefault(require(\"../../../../app/localization/translate\"));\nvar icons_1 = require(\"../../../../common/icons\");\nvar urls_1 = __importDefault(require(\"../../../../app/urls\"));\nvar dateUtils_1 = require(\"../../../../youwell-common/dateUtils\");\nvar store_1 = require(\"../../../../app/store\");\nvar arrayUtils_1 = require(\"../../../../youwell-common/arrayUtils\");\nvar utils_1 = require(\"../utils\");\nvar components_1 = require(\"../../../../common/components\");\nvar useStyles = (0, core_1.makeStyles)(function (theme) {\n var _a, _b, _c, _d, _e, _f;\n return ({\n modalContent: (_a = {},\n _a[theme.breakpoints.down('xs')] = {\n margin: theme.spacing(2, 1),\n },\n _a),\n header: {\n borderLeft: theme.youwell.borders.secondary,\n borderLeftWidth: 4,\n paddingLeft: theme.spacing(2),\n },\n headerTitle: {\n fontWeight: 500,\n },\n infoSection: (_b = {\n marginBottom: theme.spacing(2)\n },\n _b[theme.breakpoints.down('xs')] = {\n marginBottom: theme.spacing(0),\n },\n _b),\n infoSectionText: {\n margin: theme.spacing(0, 0, 2, 2),\n },\n infoSectionTextCaption: {\n fontWeight: 500,\n },\n importanceOfRegistrationInfoText: {\n marginTop: theme.spacing(2),\n },\n standaloneButtons: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n registerButtons: (_c = {\n display: 'inline-block',\n marginTop: theme.spacing(2)\n },\n _c[theme.breakpoints.down('xs')] = {\n width: '100%',\n },\n _c),\n registerButtonsWrapper: (_d = {\n display: 'flex',\n flexWrap: 'wrap'\n },\n _d[theme.breakpoints.down('xs')] = {\n justifyContent: 'center',\n },\n _d),\n missingNightCard: (_e = {\n padding: theme.spacing(3, 2),\n margin: theme.spacing(1),\n width: 200,\n borderRadius: theme.youwell.shapes.borderRadiusFlatter\n },\n _e[theme.breakpoints.down('sm')] = {\n width: 180,\n },\n _e[theme.breakpoints.down('xs')] = {\n width: 260,\n },\n _e),\n lastCard: {\n WebkitMaskImage: '-webkit-gradient(linear, left top, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.3)))',\n },\n missingCardFlexWrapper: {\n display: 'flex',\n },\n missingCardTextFlexWrapper: {\n display: 'flex',\n flexDirection: 'column',\n textTransform: 'capitalize',\n },\n nightText: {\n textTransform: 'capitalize',\n },\n btnSection: (_f = {\n display: 'flex',\n justifyContent: 'flex-end',\n marginTop: theme.spacing(1),\n padding: theme.spacing(1)\n },\n _f[theme.breakpoints.down('xs')] = {\n justifyContent: 'center',\n },\n _f),\n notNowBtn: {\n padding: theme.spacing(2, 6),\n minWidth: 196,\n borderRadius: 40,\n background: theme.palette.common.white,\n '&:hover': {\n background: theme.palette.common.white,\n },\n },\n addIcons: {\n fontSize: 40,\n marginRight: theme.spacing(2),\n },\n registerSleep: {\n width: '100%',\n padding: theme.spacing(6),\n },\n registerSleepFlexWrapper: {\n display: 'flex',\n },\n registerSleepBtnText: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n marginLeft: theme.spacing(2),\n },\n registerSleepBtnCaption: {\n textTransform: 'initial',\n textAlign: 'left',\n },\n });\n}, { name: 'RegisterSleepMenu' });\nvar RegisterSleepMenu = function (_a) {\n var isModal = _a.isModal, onClick = _a.onClick, numberOfNightCards = _a.numberOfNightCards;\n var translate = (0, translate_1.default)();\n var classes = useStyles();\n var dispatch = (0, store_1.useYouwellDispatch)();\n var _b = React.useState(false), showSleepMenu = _b[0], setShowSleepMenu = _b[1];\n var sleepEntries = (0, store_1.useYouwellSelector)(function (state) { return (0, arrayUtils_1.sortByDateAscending)(state.sleepDataStore.entries, 'date') || []; });\n var sleepLookup = (0, utils_1.getSleepLookup)(sleepEntries);\n var missingNights = (0, utils_1.missingRegistrationsLastWeek)(sleepLookup);\n var goToLogDay = function (night) {\n if (onClick) {\n onClick();\n }\n dispatch((0, connected_react_router_1.push)(\"\".concat(urls_1.default.inside.pages.sleepDiary, \"/log/\").concat(night)));\n };\n var closeMenu = function () {\n setShowSleepMenu(false);\n };\n return (React.createElement(React.Fragment, null, isModal ? (React.createElement(React.Fragment, null,\n (missingNights === null || missingNights === void 0 ? void 0 : missingNights.length) > 0 && (React.createElement(core_1.Button, { className: classes.registerSleep, variant: \"contained\", color: \"primary\", onClick: function () { return setShowSleepMenu(true); } },\n React.createElement(\"div\", { className: classes.registerSleepFlexWrapper },\n React.createElement(icons_1.AddIcon, { className: classes.addIcons }),\n React.createElement(\"div\", { className: classes.registerSleepBtnText },\n React.createElement(core_1.Typography, { variant: \"h6\" }, translate('sleepDiary.registerSleep')),\n React.createElement(core_1.Typography, { className: classes.registerSleepBtnCaption, variant: \"body2\" }, (missingNights === null || missingNights === void 0 ? void 0 : missingNights.length) > 1\n ? \"\".concat(missingNights === null || missingNights === void 0 ? void 0 : missingNights.length, \" \").concat(translate('sleepDiary.missingRegistrations'), \" \")\n : \"\".concat(translate('sleepDiary.missingRegistration'))))))),\n React.createElement(components_1.OverlayModal, { open: showSleepMenu && (missingNights === null || missingNights === void 0 ? void 0 : missingNights.length) > 0, onClose: closeMenu },\n React.createElement(\"div\", { className: classes.modalContent },\n React.createElement(\"div\", { className: classes.header },\n React.createElement(core_1.Typography, { variant: \"h5\", className: classes.headerTitle }, translate('sleepDiary.registerSleep')),\n React.createElement(core_1.Typography, { className: classes.infoSectionTextCaption, variant: \"body1\" }, (missingNights === null || missingNights === void 0 ? void 0 : missingNights.length) > 1\n ? \"\".concat(missingNights.length, \" \").concat(translate('sleepDiary.missingRegistrations'), \" \")\n : \"\".concat(translate('sleepDiary.missingRegistration'), \" \"))),\n React.createElement(\"div\", { className: classes.infoSection },\n React.createElement(\"div\", { className: classes.infoSectionText },\n React.createElement(core_1.Typography, { className: classes.importanceOfRegistrationInfoText }, translate('sleepDiary.yourRegistrationIsImportantToUs')),\n missingNights && missingNights.length === 1 ? (React.createElement(core_1.Typography, null, translate('sleepDiary.easyToForgetDetailsOneNight'))) : (React.createElement(core_1.Typography, null, translate('sleepDiary.easyToForgetDetails'))))),\n React.createElement(\"div\", { className: classes.registerButtons },\n React.createElement(\"div\", { className: classes.registerButtonsWrapper }, missingNights === null || missingNights === void 0 ? void 0 : missingNights.slice(0, numberOfNightCards).map(function (night, i) {\n var _a;\n var _b;\n return (React.createElement(core_1.Button, { key: night, className: (0, classnames_1.default)(classes.missingNightCard, (_a = {}, _a[classes.lastCard] = i === numberOfNightCards - 1, _a)), variant: \"contained\", color: i ? 'primary' : 'secondary', component: react_router_dom_1.Link, to: \"\".concat(urls_1.default.inside.pages.sleepDiary, \"/log/\").concat(night) },\n React.createElement(\"div\", { className: classes.missingCardFlexWrapper },\n React.createElement(icons_1.AddIcon, { className: classes.addIcons }),\n React.createElement(\"div\", { className: classes.missingCardTextFlexWrapper },\n React.createElement(core_1.Typography, { variant: \"h6\" }, (0, dateUtils_1.datestamp)(night)),\n React.createElement(core_1.Typography, { variant: \"body1\", color: i ? 'secondary' : 'primary', className: classes.nightText }, \"\".concat(translate(\"time.weekdays_short.\".concat((_b = (0, dateUtils_1.getLocalDate)(night)) === null || _b === void 0 ? void 0 : _b.getDay())), \".\"))))));\n })),\n React.createElement(\"div\", { className: classes.btnSection },\n React.createElement(core_1.Button, { className: classes.notNowBtn, variant: \"outlined\", color: \"secondary\", onClick: closeMenu }, translate('sleepDiary.notNow')))))))) : (React.createElement(\"div\", { className: classes.standaloneButtons }, missingNights === null || missingNights === void 0 ? void 0 : missingNights.slice(0, numberOfNightCards).map(function (night, i) {\n var _a;\n var _b;\n return (React.createElement(core_1.Button, { key: night, className: (0, classnames_1.default)(classes.missingNightCard, (_a = {}, _a[classes.lastCard] = i === numberOfNightCards - 1, _a)), variant: \"contained\", color: \"primary\", onClick: function () { return goToLogDay(night); } },\n React.createElement(\"div\", { className: classes.missingCardFlexWrapper },\n React.createElement(icons_1.AddIcon, { className: classes.addIcons }),\n React.createElement(\"div\", { className: classes.missingCardTextFlexWrapper },\n React.createElement(core_1.Typography, { variant: \"h6\" }, (0, dateUtils_1.datestamp)(night)),\n React.createElement(core_1.Typography, { variant: \"body1\", color: i ? 'secondary' : 'primary', className: classes.nightText }, \"\".concat(translate(\"time.weekdays_short.\".concat((_b = (0, dateUtils_1.getLocalDate)(night)) === null || _b === void 0 ? void 0 : _b.getDay())), \".\"))))));\n })))));\n};\nRegisterSleepMenu.defaultProps = {\n isModal: false,\n onClick: null,\n};\nexports.default = RegisterSleepMenu;\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar react_router_dom_1 = require(\"react-router-dom\");\nvar core_1 = require(\"@material-ui/core\");\nvar classnames_1 = __importDefault(require(\"classnames\"));\nvar translate_1 = __importDefault(require(\"../../../../app/localization/translate\"));\nvar dateUtils_1 = require(\"../../../../youwell-common/dateUtils\");\nvar constants_1 = require(\"../constants\");\nvar icons_1 = require(\"../../../../common/icons\");\nvar image_1 = require(\"../../../../common/image\");\nvar urls_1 = __importDefault(require(\"../../../../app/urls\"));\nvar useStyles = (0, core_1.makeStyles)(function (theme) { return ({\n root: {\n marginTop: theme.spacing(2),\n },\n headerCell: {\n color: theme.palette.primary.main,\n padding: 0,\n },\n padCell: {\n minWidth: 30,\n height: theme.spacing(3),\n },\n noRegistrationsHeader: {\n border: 'none',\n },\n dateLink: {\n display: 'inline-block',\n textAlign: 'left',\n padding: theme.spacing(0.5, 1),\n width: '100%',\n borderRadius: theme.youwell.shapes.borderRadiusFlatter,\n '&:hover': {\n background: theme.youwell.colors.secondaryBackground,\n boxShadow: theme.shadows[2],\n },\n },\n headerDay: {\n textTransform: 'capitalize',\n },\n labelSection: {\n textAlign: 'center',\n fontWeight: 500,\n width: 200,\n },\n valueSection: {\n textAlign: 'center',\n borderLeft: theme.youwell.borders.dim,\n },\n noPadding: {\n padding: 0,\n },\n labelWrapper: {\n display: 'flex',\n justifyContent: 'end',\n alignItems: 'center',\n },\n sleepEfficiency: {\n width: 'calc(100% - 16px)',\n display: 'inline-block',\n borderRadius: theme.youwell.shapes.borderRadiusFlatter,\n color: theme.palette.common.white,\n margin: theme.spacing(1),\n padding: theme.spacing(1, 0),\n '&$high': {\n background: theme.youwell.colors.hightScore,\n },\n '&$mid': {\n background: theme.youwell.colors.midScore,\n },\n '&$low': {\n background: theme.youwell.colors.lowScore,\n },\n },\n high: {},\n mid: {},\n low: {},\n divider: {\n borderBottom: theme.youwell.borders.normal,\n },\n icons: {\n marginLeft: theme.spacing(2),\n verticalAlign: 'middle',\n },\n actionRow: {\n cursor: 'pointer',\n background: theme.youwell.colors.defaultBackground,\n '&:hover': {\n background: theme.youwell.colors.secondaryBackground,\n },\n },\n}); }, { name: 'SleepDetailsTable' });\nvar SleepDetailsTable = function (_a) {\n var data = _a.data, hasRegistrations = _a.hasRegistrations;\n var classes = useStyles();\n var translate = (0, translate_1.default)();\n var _b = React.useState(false), showFullDetails = _b[0], setShowFullDetails = _b[1];\n var getQualityScore = function (day) {\n var score = Number((day.totalSleepMinutes || 0) / (day.totalBedMinutes || 1));\n if (score >= 0.85)\n return classes.high;\n if (score >= 0.80)\n return classes.mid;\n return classes.low;\n };\n return (React.createElement(core_1.Table, { className: classes.root },\n React.createElement(core_1.TableHead, null,\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.headerCell }),\n data.map(function (day) {\n var _a;\n var _b;\n return (React.createElement(core_1.TableCell, { key: day.isoDateString, className: (0, classnames_1.default)(classes.labelSection, classes.headerCell, (_a = {}, _a[classes.noRegistrationsHeader] = !hasRegistrations, _a)) },\n React.createElement(core_1.ButtonBase, { className: classes.dateLink, component: react_router_dom_1.Link, to: \"\".concat(urls_1.default.inside.pages.sleepDiary, \"/log/\").concat(day.isoDateString), title: translate('sleepDiary.editDetailsFor', { date: (0, dateUtils_1.longDate)(day.isoDateString, translate) }) },\n React.createElement(core_1.Typography, { variant: \"body2\", color: \"inherit\", className: classes.headerDay }, translate(\"time.weekdays_short.\".concat((_b = (0, dateUtils_1.getLocalDate)(day.isoDateString)) === null || _b === void 0 ? void 0 : _b.getDay()))),\n React.createElement(core_1.Typography, { variant: \"body2\", color: \"inherit\" }, (0, dateUtils_1.shortDate)(day.isoDateString, translate, false, false, true)))));\n }))),\n React.createElement(core_1.TableBody, null, !hasRegistrations ? (React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.padCell }),\n React.createElement(core_1.TableCell, { colSpan: data.length }),\n React.createElement(core_1.TableCell, { className: classes.padCell }))) : (React.createElement(React.Fragment, null,\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection }, translate('sleepDiary.sleepQuality')),\n data.map(function (day) {\n var _a, _b;\n return (React.createElement(core_1.TableCell, { key: day.isoDateString, className: (0, classnames_1.default)(classes.valueSection, classes.noPadding) }, ((_a = day.entry) === null || _a === void 0 ? void 0 : _a.totalSleepMinutes) && ((_b = day.entry) === null || _b === void 0 ? void 0 : _b.totalBedMinutes) ? (React.createElement(\"span\", { className: (0, classnames_1.default)(classes.sleepEfficiency, getQualityScore(day.entry)) }, \"\".concat(Number(((day.entry.totalSleepMinutes / day.entry.totalBedMinutes)) * 100).toFixed(0), \"%\"))) : '-'));\n })),\n showFullDetails ? (React.createElement(React.Fragment, null,\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection }, translate('sleepDiary.totalSleepMinutes')),\n data.map(function (day) {\n var _a;\n return (React.createElement(core_1.TableCell, { key: day.isoDateString, className: classes.valueSection }, ((_a = day.entry) === null || _a === void 0 ? void 0 : _a.totalSleepMinutes) ? ((0, dateUtils_1.hourCount)(day.entry.totalSleepMinutes, translate)) : '-'));\n })),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: (0, classnames_1.default)(classes.labelSection, classes.divider) },\n React.createElement(\"div\", { className: classes.labelWrapper },\n translate('sleepDiary.totalBedMinutes'),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(icons_1.SleepIcon, { className: classes.icons })))),\n data.map(function (day) {\n var _a;\n return (React.createElement(core_1.TableCell, { key: day.isoDateString, className: (0, classnames_1.default)(classes.valueSection, classes.divider) }, ((_a = day.entry) === null || _a === void 0 ? void 0 : _a.totalBedMinutes) ? (0, dateUtils_1.hourCount)(day.entry.totalBedMinutes, translate) : ('-')));\n })),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection }, translate('sleepDiary.dayView.daytimeActivityRatings')),\n data.map(function (day) {\n var _a, _b;\n return (React.createElement(core_1.TableCell, { key: day.isoDateString, className: classes.valueSection }, ((_a = day.entry) === null || _a === void 0 ? void 0 : _a.daytimeActivityRating) ? (translate(\"\".concat((_b = constants_1.daytimeActivityRatings.find(function (d) { var _a; return d.id === ((_a = day.entry) === null || _a === void 0 ? void 0 : _a.daytimeActivityRating); })) === null || _b === void 0 ? void 0 : _b.label))) : ('-')));\n })),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null, translate('sleepDiary.dayView.dayTimeNaps')),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(image_1.SleepSmileyIcon, null)))),\n data.map(function (day) {\n var _a, _b, _c;\n return (React.createElement(core_1.TableCell, { key: day.isoDateString, className: classes.valueSection }, ((_a = day.entry) === null || _a === void 0 ? void 0 : _a.daytimeNaps) && day.entry.daytimeNaps.length > 0 ? day.entry.daytimeNaps.map(function (nap) {\n var _a;\n return (React.createElement(\"div\", { key: (_a = nap.sleepTime) === null || _a === void 0 ? void 0 : _a.toString() }, nap.wakeTime && nap.sleepTime\n ? (React.createElement(React.Fragment, null,\n React.createElement(\"span\", null, \"\".concat((0, dateUtils_1.hourCount)((0, dateUtils_1.getNumberOfMinutes)(nap.sleepTime, nap.wakeTime), translate), \" \")),\n React.createElement(\"span\", null, \"\".concat(translate('sleepDiary.dayView.at'), \" \").concat((0, dateUtils_1.getTimePartForInput)(nap.sleepTime))))) : (React.createElement(\"span\", null, \" - \".concat(translate('sleepDiary.dayView.at'), \" \").concat((0, dateUtils_1.getTimePartForInput)(nap.sleepTime))))));\n }) : ((_c = (_b = day.entry) === null || _b === void 0 ? void 0 : _b.sleepProperties) === null || _c === void 0 ? void 0 : _c.hasDaytimeNaps) === false ? translate('sleepDiary.none') : '-'));\n })),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: (0, classnames_1.default)(classes.labelSection, classes.divider) },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null,\n React.createElement(\"div\", null, translate('sleepDiary.dayView.sleepMedication')),\n React.createElement(\"div\", null, translate('sleepDiary.dayView.alcohol'))),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(image_1.MedicineIcon, null)))),\n data.map(function (day) {\n var _a, _b;\n return (React.createElement(core_1.TableCell, { key: day.isoDateString, className: (0, classnames_1.default)(classes.valueSection, classes.divider) }, ((_b = (_a = day.entry) === null || _a === void 0 ? void 0 : _a.sleepProperties) === null || _b === void 0 ? void 0 : _b.sleepMedication) ? (day.entry.sleepProperties.sleepMedication) : ('-')));\n })),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null, translate('sleepDiary.dayView.gotToBed')),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(image_1.MoonIcon, null)))),\n data.map(function (day) {\n var _a;\n return (React.createElement(core_1.TableCell, { key: day.isoDateString, className: (0, classnames_1.default)(classes.valueSection) }, ((_a = day.entry) === null || _a === void 0 ? void 0 : _a.bedTime) ? (0, dateUtils_1.getTimePartForInput)(day.entry.bedTime) : ('-')));\n })),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null, translate('sleepDiary.dayView.tiredToSleep')),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(image_1.SleepSmileyIcon, null)))),\n data.map(function (day) {\n var _a;\n return (React.createElement(core_1.TableCell, { key: day.isoDateString, className: (0, classnames_1.default)(classes.valueSection) }, ((_a = day.entry) === null || _a === void 0 ? void 0 : _a.sleepAtemptTime) ? (0, dateUtils_1.getTimePartForInput)(day.entry.sleepAtemptTime) : ('-')));\n })),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null, translate('sleepDiary.dayView.fellAsleep')),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(image_1.SleepSmileyIcon, null)))),\n data.map(function (day) {\n var _a;\n return (React.createElement(core_1.TableCell, { key: day.isoDateString, className: (0, classnames_1.default)(classes.valueSection) }, ((_a = day.entry) === null || _a === void 0 ? void 0 : _a.sleepTime) ? (0, dateUtils_1.getTimePartForInput)(day.entry.sleepTime) : '-'));\n })),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null, translate('sleepDiary.dayView.awake')),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(image_1.AwakeSmileyIcon, null)))),\n data.map(function (day) {\n var _a, _b, _c;\n return (React.createElement(core_1.TableCell, { key: day.isoDateString, className: (0, classnames_1.default)(classes.valueSection) }, ((_b = (_a = day.entry) === null || _a === void 0 ? void 0 : _a.sleepProperties) === null || _b === void 0 ? void 0 : _b.numberOfNightWakeups) ? (\"\".concat((_c = day.entry.sleepProperties) === null || _c === void 0 ? void 0 : _c.numberOfNightWakeups, \" \").concat(translate('sleepDiary.dayView.times'))) : '-'));\n })),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: (0, classnames_1.default)(classes.labelSection, classes.divider) },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null, translate('sleepDiary.nightWakeupsTotalMinutes')),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(image_1.AwakeSmileyIcon, null)))),\n data.map(function (day) {\n var _a, _b;\n return (React.createElement(core_1.TableCell, { key: day.isoDateString, className: (0, classnames_1.default)(classes.valueSection, classes.divider) }, ((_b = (_a = day.entry) === null || _a === void 0 ? void 0 : _a.sleepProperties) === null || _b === void 0 ? void 0 : _b.nightWakeupsTotalMinutes) ? (\"\".concat(day.entry.sleepProperties.nightWakeupsTotalMinutes, \" \").concat(translate('sleepDiary.dayView.min'))) : ('-')));\n })),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null, translate('sleepDiary.dayView.youWokeUp')),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(icons_1.SunIcon, null)))),\n data.map(function (day) {\n var _a;\n return (React.createElement(core_1.TableCell, { key: day.isoDateString, className: (0, classnames_1.default)(classes.valueSection) }, ((_a = day.entry) === null || _a === void 0 ? void 0 : _a.wakeTime) ? ((0, dateUtils_1.getTimePartForInput)(day.entry.wakeTime)) : ('-')));\n })),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { align: \"center\", className: classes.labelSection },\n React.createElement(\"div\", { className: classes.labelWrapper },\n React.createElement(\"div\", null, translate('sleepDiary.dayView.youGotOutOfBed')),\n React.createElement(\"span\", { className: classes.icons },\n React.createElement(image_1.WakeUpIcon, null)))),\n data.map(function (day) {\n var _a;\n return (React.createElement(core_1.TableCell, { key: day.isoDateString, className: (0, classnames_1.default)(classes.valueSection) }, ((_a = day.entry) === null || _a === void 0 ? void 0 : _a.outOfBedTime) ? ((0, dateUtils_1.getTimePartForInput)(day.entry.outOfBedTime)) : ('-')));\n })),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.labelSection }, translate('sleepDiary.yourSleepRating')),\n data.map(function (day) {\n var _a, _b;\n return (React.createElement(core_1.TableCell, { key: day.isoDateString, className: (0, classnames_1.default)(classes.valueSection) }, ((_a = day.entry) === null || _a === void 0 ? void 0 : _a.sleepRating) ? (translate(((_b = constants_1.sleepRatings.find(function (d) { var _a; return ((_a = day.entry) === null || _a === void 0 ? void 0 : _a.sleepRating) === d.id; })) === null || _b === void 0 ? void 0 : _b.label) || '', undefined, { onMissingTranslation: function () { var _a, _b; return ((_b = (_a = day.entry) === null || _a === void 0 ? void 0 : _a.sleepRating) === null || _b === void 0 ? void 0 : _b.toString()) || ''; } })) : ('-')));\n })),\n React.createElement(core_1.TableRow, { className: classes.actionRow },\n React.createElement(core_1.TableCell, { colSpan: data.length + 1, onClick: function () { return setShowFullDetails(false); }, align: \"center\" },\n React.createElement(core_1.Typography, { variant: \"button\" }, translate('sleepDiary.hideDetails')))))) : (React.createElement(core_1.TableRow, { className: classes.actionRow },\n React.createElement(core_1.TableCell, { colSpan: data.length + 1, onClick: function () { return setShowFullDetails(true); }, align: \"center\" },\n React.createElement(core_1.Typography, { variant: \"button\" }, translate('sleepDiary.showFullDetails'))))))))));\n};\nexports.default = SleepDetailsTable;\n","\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar core_1 = require(\"@material-ui/core\");\nvar recharts_1 = require(\"recharts\");\nvar date_fns_1 = require(\"date-fns\");\nvar lodash_1 = require(\"lodash\");\nvar browserUtils_1 = require(\"../../../../youwell-common/browserUtils\");\nvar arrayUtils_1 = require(\"../../../../youwell-common/arrayUtils\");\nvar store_1 = require(\"../../../../app/store\");\nvar translate_1 = __importDefault(require(\"../../../../app/localization/translate\"));\nvar dateUtils_1 = require(\"../../../../youwell-common/dateUtils\");\nvar utils_1 = require(\"../utils\");\nvar useStyles = (0, core_1.makeStyles)(function (theme) {\n var _a;\n return (0, core_1.createStyles)({\n detailTable: {\n marginBottom: theme.spacing(4),\n },\n detailTableHeaderCell: {},\n chartTitle: {\n marginBottom: theme.spacing(2),\n },\n chart: (_a = {\n margin: theme.spacing(4)\n },\n _a[theme.breakpoints.down('xs')] = {\n margin: theme.spacing(2, 0),\n },\n _a),\n customTooltip: {\n backgroundColor: theme.youwell.colors.secondaryBackground,\n padding: theme.spacing(2),\n borderRadius: theme.youwell.shapes.borderRadius,\n },\n tooltipHeader: {\n textTransform: 'capitalize',\n },\n chartDescription: {\n margin: theme.spacing(2, 2, 4),\n },\n });\n}, { name: 'WeekAverageDetails' });\nvar generateWeeklySummaryGraphData = function (sleepEntries) {\n var sleepLookup = (0, utils_1.getSleepLookup)(sleepEntries);\n var summary = sleepEntries === null || sleepEntries === void 0 ? void 0 : sleepEntries.reduce(function (prev, sleepEntry) {\n var _a;\n var weekNumber = (0, dateUtils_1.getWeekNumberFromDate)(new Date(sleepEntry.date));\n var yearWeek = \"\".concat(weekNumber, \" - \").concat((0, date_fns_1.getYear)(new Date(sleepEntry.date)));\n var selectedWeek = { weekNo: weekNumber, start: (0, date_fns_1.startOfISOWeek)(new Date(sleepEntry.date)), end: (0, date_fns_1.endOfISOWeek)(new Date(sleepEntry.date)) };\n var selectedWeekEntries = (0, utils_1.getRegistrationsForWeek)(sleepLookup, selectedWeek);\n var currentWeekAverage = (0, utils_1.getWeekAverage)(selectedWeekEntries);\n if (currentWeekAverage.totalSleepMinutes && currentWeekAverage.sleepQuality && currentWeekAverage.sleepRating) {\n currentWeekAverage.tick = new Date(sleepEntry.date).getTime();\n currentWeekAverage.week = weekNumber;\n return __assign(__assign({}, prev), (_a = {}, _a[yearWeek] = currentWeekAverage, _a));\n }\n return prev;\n }, {});\n var sortedSummary = (0, lodash_1.sortBy)(Object.values(summary || []), 'tick');\n var graphData = sortedSummary.map(function (d) { return ({\n week: d.week,\n totalSleepMinutes: (d.totalSleepMinutes / d.count) / 60,\n sleepQuality: ((d.sleepRating / d.count) / 5) * 100,\n sleepEfficiency: d.sleepQuality / d.count,\n }); });\n return graphData;\n};\nvar WeekAverageDetails = function (_a) {\n var weekAverage = _a.weekAverage;\n var classes = useStyles();\n var translate = (0, translate_1.default)();\n var theme = (0, core_1.useTheme)();\n var sleepEntries = (0, store_1.useYouwellSelector)(function (state) { return (0, arrayUtils_1.sortByDateAscending)(state.sleepDataStore.entries, 'date') || []; });\n var width = (0, browserUtils_1.useWindowSize)().width;\n var weeklySleepSummary = generateWeeklySummaryGraphData(sleepEntries);\n var WeekAverageGraphTooltip = function (_a) {\n var _b, _c, _d, _e, _f, _g;\n var active = _a.active, payload = _a.payload;\n if (active && payload && payload.length) {\n return (React.createElement(\"div\", { className: classes.customTooltip },\n React.createElement(core_1.Typography, { variant: \"subtitle2\", className: classes.tooltipHeader }, \"\".concat(translate('time.week'), \" \").concat((_c = (_b = payload[0]) === null || _b === void 0 ? void 0 : _b.payload) === null || _c === void 0 ? void 0 : _c.week)),\n React.createElement(core_1.Typography, { variant: \"body2\", color: \"primary\" }, \"\".concat(translate('sleepDiary.totalSleepMinutes'), \": \").concat((0, dateUtils_1.hourCount)(((_d = payload[0].payload) === null || _d === void 0 ? void 0 : _d.totalSleepMinutes) * 60, translate, true))),\n React.createElement(core_1.Typography, { variant: \"body2\", color: \"primary\" }, \"\".concat(translate('sleepDiary.yourSleepRating'), \": \").concat(Math.round(5 * ((_e = payload[0].payload) === null || _e === void 0 ? void 0 : _e.sleepQuality) / 10) / 10)),\n React.createElement(core_1.Typography, { variant: \"body2\", color: \"primary\" }, \"\".concat(translate('sleepDiary.sleepEfficiency'), \": \").concat(Math.round((_g = (_f = payload[0]) === null || _f === void 0 ? void 0 : _f.payload) === null || _g === void 0 ? void 0 : _g.sleepEfficiency), \"%\"))));\n }\n return null;\n };\n return (React.createElement(\"div\", null,\n React.createElement(core_1.Table, { className: classes.detailTable },\n React.createElement(core_1.TableBody, null,\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.detailTableHeaderCell }, translate('sleepDiary.totalSleepMinutes')),\n React.createElement(core_1.TableCell, { align: \"right\" }, (0, dateUtils_1.hourCount)(weekAverage.totalSleepMinutes / weekAverage.count, translate))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.detailTableHeaderCell }, translate('sleepDiary.awakeBedMinutes')),\n React.createElement(core_1.TableCell, { align: \"right\" }, (0, dateUtils_1.hourCount)(weekAverage.awakeBedMinutes / weekAverage.count, translate))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.detailTableHeaderCell }, translate('sleepDiary.totalBedMinutes')),\n React.createElement(core_1.TableCell, { align: \"right\" }, (0, dateUtils_1.hourCount)(weekAverage.totalBedMinutes / weekAverage.count, translate))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.detailTableHeaderCell }, translate('sleepDiary.sleepQuality')),\n React.createElement(core_1.TableCell, { align: \"right\" }, \"\".concat(Math.round(weekAverage.sleepQuality / weekAverage.count), \" %\"))),\n React.createElement(core_1.TableRow, null,\n React.createElement(core_1.TableCell, { className: classes.detailTableHeaderCell },\n translate('sleepDiary.yourSleepRating'),\n React.createElement(\"br\", null),\n React.createElement(core_1.Typography, { variant: \"caption\" }, translate('sleepDiary.sleepRatingDescription'))),\n React.createElement(core_1.TableCell, { align: \"right\" }, \"\".concat((weekAverage.sleepRating / weekAverage.count).toFixed(1)))))),\n React.createElement(core_1.Typography, { variant: \"h6\", className: classes.chartTitle }, translate('sleepDiary.weeklyProgression')),\n React.createElement(\"div\", { className: classes.chart },\n React.createElement(recharts_1.ComposedChart, { width: (width && width * 0.7) || 600, height: 300, data: weeklySleepSummary, margin: {\n top: 5,\n bottom: 5,\n } },\n React.createElement(recharts_1.CartesianGrid, { vertical: false }),\n React.createElement(recharts_1.XAxis, { dataKey: \"week\", tickFormatter: function (weekNumber) { return \"\".concat(translate('time.week'), \" \").concat(weekNumber); }, tickMargin: 8 }),\n React.createElement(recharts_1.YAxis, { yAxisId: \"left\", orientation: \"left\", tickFormatter: function (decimal) { return \"\".concat(Math.round(decimal), \"%\"); } }),\n React.createElement(recharts_1.Tooltip, { content: React.createElement(WeekAverageGraphTooltip, null) }),\n React.createElement(recharts_1.Line, { strokeWidth: 4, stroke: theme.youwell.colors.primary, dot: { fill: theme.youwell.colors.primary, r: 5 }, yAxisId: \"left\", type: \"monotone\", dataKey: \"sleepEfficiency\", name: translate('sleepDiary.sleepQuality') }),\n React.createElement(recharts_1.Legend, { verticalAlign: \"top\", wrapperStyle: { top: -20 } }))),\n React.createElement(core_1.Typography, { variant: \"body2\", color: \"textSecondary\", className: classes.chartDescription }, translate('sleepDiary.hooverToSeeDetails'))));\n};\nexports.default = WeekAverageDetails;\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar core_1 = require(\"@material-ui/core\");\nvar React = __importStar(require(\"react\"));\nvar dateUtils_1 = require(\"../../../../youwell-common/dateUtils\");\nvar translate_1 = __importDefault(require(\"../../../../app/localization/translate\"));\nvar icons_1 = require(\"../../../../common/icons\");\nvar store_1 = require(\"../../../../app/store\");\nvar SleepDataStore_1 = require(\"../../../../app/store/SleepDataStore\");\nvar styles = function (theme) { return (0, core_1.createStyles)({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n iconButton: {},\n label: {\n margin: theme.spacing(0, 1),\n padding: theme.spacing(0, 4),\n textTransform: 'capitalize',\n },\n description: {\n color: theme.youwell.colors.secondary,\n },\n}); };\nvar useStyles = (0, core_1.makeStyles)(function (theme) { return styles(theme); }, { name: 'WeekSelector' });\nvar WeekSelector = function (_a) {\n var onChange = _a.onChange;\n var classes = useStyles();\n var translate = (0, translate_1.default)();\n var dispatch = (0, store_1.useYouwellDispatch)();\n var selectedWeek = (0, store_1.useYouwellSelector)(function (state) { return state.sleepDataStore.selectedWeek; });\n var setWeek = function (week) {\n dispatch((0, SleepDataStore_1.setSelectedWeek)(week));\n if (onChange) {\n onChange(week);\n }\n };\n var next = function () {\n setWeek((0, dateUtils_1.getWeek)((0, dateUtils_1.addDays)(selectedWeek.start, 7)));\n };\n var prev = function () {\n setWeek((0, dateUtils_1.getWeek)((0, dateUtils_1.addDays)(selectedWeek.start, -7)));\n };\n return (React.createElement(\"div\", { className: classes.root },\n React.createElement(core_1.IconButton, { color: \"secondary\", onClick: prev, className: classes.iconButton },\n React.createElement(icons_1.PrevIcon, null)),\n React.createElement(\"div\", { className: classes.label },\n React.createElement(core_1.Typography, { variant: \"h6\", color: \"primary\", align: \"center\" }, \"\".concat(translate('time.week'), \" \").concat(selectedWeek.weekNo)),\n React.createElement(core_1.Typography, { className: classes.description }, \"\".concat((0, dateUtils_1.shortDate)(selectedWeek.start), \" - \").concat((0, dateUtils_1.shortDate)(selectedWeek.end)))),\n React.createElement(core_1.IconButton, { color: \"secondary\", onClick: next, className: classes.iconButton },\n React.createElement(icons_1.NextIcon, null))));\n};\nexports.default = WeekSelector;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.defaultDaytimeWakeTime = exports.defaultDaytimeSleepTime = exports.defaultWakeTime = exports.defaultSleepTime = exports.daytimeActivityRatings = exports.sleepRatings = void 0;\nexports.sleepRatings = [\n { id: 1, label: 'sleepDiary.rating.1' },\n { id: 2, label: 'sleepDiary.rating.2' },\n { id: 3, label: 'sleepDiary.rating.3' },\n { id: 4, label: 'sleepDiary.rating.4' },\n { id: 5, label: 'sleepDiary.rating.5' },\n];\nexports.daytimeActivityRatings = [\n { id: 1, label: 'sleepDiary.activityRating.veryLow' },\n { id: 2, label: 'sleepDiary.activityRating.low' },\n { id: 3, label: 'sleepDiary.activityRating.medium' },\n { id: 4, label: 'sleepDiary.activityRating.some' },\n { id: 5, label: 'sleepDiary.activityRating.very' },\n];\nexports.defaultSleepTime = '22:00';\nexports.defaultWakeTime = '07:00';\nexports.defaultDaytimeSleepTime = '13:00';\nexports.defaultDaytimeWakeTime = '13:30';\n","\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.getWeekAverage = exports.getSleepLookup = exports.getRegistrationsForWeek = exports.missingRegistrationsLastWeek = exports.dayTimeNapsUnValidItems = exports.validateDayTimeNapInputs = exports.validateTimeLaterThanWithActualDate = exports.getTimeWithActualDate = exports.validateTimeBeforeThan = exports.validateTimeLaterThan = exports.getTimeWithCorrectDate = exports.sleepLoggingItemNames = exports.SleepLoggingType = void 0;\nvar objectUtils_1 = require(\"../../../youwell-common/objectUtils\");\nvar arrayUtils_1 = require(\"../../../youwell-common/arrayUtils\");\nvar dateUtils_1 = require(\"../../../youwell-common/dateUtils\");\nvar SleepLoggingType;\n(function (SleepLoggingType) {\n SleepLoggingType[SleepLoggingType[\"dayLogging\"] = 0] = \"dayLogging\";\n SleepLoggingType[SleepLoggingType[\"nightLogging\"] = 1] = \"nightLogging\";\n})(SleepLoggingType = exports.SleepLoggingType || (exports.SleepLoggingType = {}));\nexports.sleepLoggingItemNames = {\n sleepTime: 'sleepTime',\n wakeTime: 'wakeTime',\n};\nvar getTimeWithCorrectDate = function (time, date, loggingType) {\n var timeString = (0, dateUtils_1.getTimePartForInput)(time);\n if (!timeString) {\n return timeString;\n }\n if (!date) {\n return timeString;\n }\n var isoDateString = (0, dateUtils_1.isoDate)(date);\n if (Number(timeString.substring(0, 2) >= 17)) { // Evening (day before) for hours after 17:00\n isoDateString = (0, dateUtils_1.isoDate)((0, dateUtils_1.addDays)(date, -1));\n }\n if (loggingType === SleepLoggingType.nightLogging && Number(timeString.substring(0, 2) >= 15)) { // Hours from 15:00-23:00 set to be the day before\n isoDateString = (0, dateUtils_1.isoDate)((0, dateUtils_1.addDays)(date, -1));\n }\n return \"\".concat(isoDateString, \"T\").concat(timeString);\n};\nexports.getTimeWithCorrectDate = getTimeWithCorrectDate;\nvar validateTimeLaterThan = function (valueToCompare, date, loggingType) { return function (value) {\n if (valueToCompare) {\n return new Date((0, exports.getTimeWithCorrectDate)(value, date, loggingType)) >= new Date((0, exports.getTimeWithCorrectDate)(valueToCompare, date, loggingType));\n }\n return true;\n}; };\nexports.validateTimeLaterThan = validateTimeLaterThan;\nvar validateTimeBeforeThan = function (valueToCompare, date, loggingType) { return function (value) {\n if (valueToCompare) {\n return new Date((0, exports.getTimeWithCorrectDate)(value, date, loggingType)) <= new Date((0, exports.getTimeWithCorrectDate)(valueToCompare, date, loggingType));\n }\n return true;\n}; };\nexports.validateTimeBeforeThan = validateTimeBeforeThan;\nvar getTimeWithActualDate = function (time, date) {\n var timeString = (0, dateUtils_1.getTimePartForInput)(time);\n if (!timeString) {\n return null;\n }\n if (!date) {\n return timeString;\n }\n return \"\".concat((0, dateUtils_1.isoDate)(date), \"T\").concat(timeString);\n};\nexports.getTimeWithActualDate = getTimeWithActualDate;\n// eslint-disable-next-line arrow-body-style\nvar validateTimeLaterThanWithActualDate = function (valueToCompare, date, loggingType) { return function (value) {\n return new Date((0, exports.getTimeWithActualDate)(value, date)) >= new Date((0, exports.getTimeWithCorrectDate)(valueToCompare, date, loggingType));\n}; };\nexports.validateTimeLaterThanWithActualDate = validateTimeLaterThanWithActualDate;\nvar validateDayTimeNapInputs = function (i, date, daytimeNaps) {\n var _a, _b, _c, _d, _e, _f, _g, _h;\n var validation = { sleep: true, wake: true };\n if (!daytimeNaps) {\n return validation;\n }\n var sleepTime = (_b = (_a = daytimeNaps[i]) === null || _a === void 0 ? void 0 : _a.sleepTime) !== null && _b !== void 0 ? _b : null;\n var nextSleepTime = (_d = (_c = daytimeNaps[i + 1]) === null || _c === void 0 ? void 0 : _c.sleepTime) !== null && _d !== void 0 ? _d : null;\n var wakeTime = (_f = (_e = daytimeNaps[i]) === null || _e === void 0 ? void 0 : _e.wakeTime) !== null && _f !== void 0 ? _f : null;\n var prevWakeTime = (_h = (_g = daytimeNaps[i - 1]) === null || _g === void 0 ? void 0 : _g.wakeTime) !== null && _h !== void 0 ? _h : null;\n if (sleepTime) {\n var isLaterThanPrevDaytimeNapWakeTime = prevWakeTime ? (0, exports.validateTimeLaterThan)(prevWakeTime, date, SleepLoggingType.dayLogging)(sleepTime) : true;\n var isLaterThanCurrWakeTime = wakeTime ? (0, exports.validateTimeLaterThan)(wakeTime, date, SleepLoggingType.dayLogging)(sleepTime) : false;\n validation.sleep = isLaterThanPrevDaytimeNapWakeTime && !isLaterThanCurrWakeTime;\n }\n if (wakeTime) {\n var isLaterThanNextDaytimeNapSleepTime = nextSleepTime ? (0, exports.validateTimeLaterThan)(nextSleepTime, date, SleepLoggingType.dayLogging)(wakeTime) : false;\n var isLaterThanCurrDaytimeNapSleepTime = sleepTime ? (0, exports.validateTimeLaterThan)(sleepTime, date, SleepLoggingType.dayLogging)(wakeTime) : true;\n validation.wake = isLaterThanCurrDaytimeNapSleepTime && !isLaterThanNextDaytimeNapSleepTime;\n }\n return validation;\n};\nexports.validateDayTimeNapInputs = validateDayTimeNapInputs;\nvar dayTimeNapsUnValidItems = function (date, daytimeNaps) {\n var _a;\n var validationList = daytimeNaps === null || daytimeNaps === void 0 ? void 0 : daytimeNaps.map(function (dayTimeNap, index) { return ({ index: index, validation: (0, exports.validateDayTimeNapInputs)(index, date, daytimeNaps) }); });\n return (_a = validationList === null || validationList === void 0 ? void 0 : validationList.filter(function (d) { return !d.validation.sleep || !d.validation.wake; })) !== null && _a !== void 0 ? _a : [];\n};\nexports.dayTimeNapsUnValidItems = dayTimeNapsUnValidItems;\nvar missingRegistrationsLastWeek = function (sleepLookup) {\n var currentDate = (0, dateUtils_1.addDays)(null, -6);\n var missingEntries = [];\n while (currentDate <= (0, dateUtils_1.tomorrow)()) {\n var d = (0, dateUtils_1.isoDate)(currentDate);\n if (!sleepLookup[d] || !(sleepLookup[d].skipped || sleepLookup[d].completed)) {\n missingEntries.push(d);\n }\n currentDate = (0, dateUtils_1.addDays)(currentDate, 1);\n }\n return (0, arrayUtils_1.reverse)(missingEntries);\n};\nexports.missingRegistrationsLastWeek = missingRegistrationsLastWeek;\nvar getRegistrationsForWeek = function (sleepLookup, week) {\n var currentDate = week.start;\n var entries = [];\n while (currentDate < week.end) {\n var d = (0, dateUtils_1.isoDateWithoutTimezone)(currentDate);\n if (sleepLookup[d]) {\n entries.push(sleepLookup[d]);\n }\n else {\n entries.push({\n isoDateString: d,\n completed: false,\n partial: false,\n skipped: false,\n evening: false,\n night: false,\n });\n }\n currentDate = (0, dateUtils_1.addDays)(currentDate, 1);\n }\n return entries;\n};\nexports.getRegistrationsForWeek = getRegistrationsForWeek;\nvar getSleepLookup = function (sleepEntries) { return sleepEntries.reduce(function (prev, curr) {\n var _a;\n var _b, _c, _d;\n return (__assign(__assign({}, prev), (_a = {}, _a[(0, dateUtils_1.isoDate)(curr.date)] = {\n isoDateString: (0, dateUtils_1.isoDate)(curr.date),\n entry: curr,\n completed: curr.totalBedMinutes && curr.totalSleepMinutes,\n partial: !(curr.daytimeActivityRating && (0, objectUtils_1.hasValue)((_b = curr.sleepProperties) === null || _b === void 0 ? void 0 : _b.hasDaytimeNaps) && curr.bedTime && curr.sleepAtemptTime && curr.sleepTime && (0, objectUtils_1.hasValue)((_c = curr.sleepProperties) === null || _c === void 0 ? void 0 : _c.numberOfNightWakeups) && curr.outOfBedTime && curr.wakeTime && curr.sleepRating),\n skipped: !!((_d = curr.sleepProperties) === null || _d === void 0 ? void 0 : _d.userSkippedRegistering),\n evening: curr.bedTime || curr.sleepAtemptTime || curr.sleepTime,\n night: curr.outOfBedTime || curr.wakeTime,\n }, _a)));\n}, {}) || {}; };\nexports.getSleepLookup = getSleepLookup;\nvar getWeekAverage = function (sleepEntries) { return sleepEntries.reduce(function (prev, curr) {\n var _a, _b, _c, _d, _e;\n if (curr.entry && curr.completed) {\n return {\n start: prev.start || curr.isoDateString,\n end: curr.isoDateString,\n count: prev.count + 1,\n totalSleepMinutes: prev.totalSleepMinutes + ((_a = curr.entry.totalSleepMinutes) !== null && _a !== void 0 ? _a : 0),\n totalBedMinutes: prev.totalBedMinutes + ((_b = curr.entry.totalBedMinutes) !== null && _b !== void 0 ? _b : 0),\n awakeBedMinutes: prev.awakeBedMinutes + ((_c = curr.entry.awakeBedMinutes) !== null && _c !== void 0 ? _c : 0),\n sleepQuality: prev.sleepQuality + ((_d = curr.entry.sleepQuality) !== null && _d !== void 0 ? _d : 0),\n sleepRating: prev.sleepRating + ((_e = curr.entry.sleepRating) !== null && _e !== void 0 ? _e : 0),\n };\n }\n return __assign(__assign({}, prev), { start: prev.start || curr.isoDateString, end: curr.isoDateString });\n}, {\n count: 0,\n totalSleepMinutes: 0,\n totalBedMinutes: 0,\n awakeBedMinutes: 0,\n sleepQuality: 0,\n sleepRating: 0,\n}); };\nexports.getWeekAverage = getWeekAverage;\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport {\r\n Route, Switch,\r\n} from 'react-router-dom';\r\n\r\nimport urls from '../../app/urls';\r\nimport { PageNotFound } from '../../youwell-common/components';\r\n\r\nimport PreviewTask from './PreviewTask';\r\nimport LoadPreviewTask from './components/LoadPreviewTask';\r\nimport { InternalLinkLoader, Layout } from '../../common/components';\r\nimport { parseInternalLink } from '../../common/taskContentUtils';\r\n\r\nclass Index extends React.Component {\r\n getLinkUrl = (link) => {\r\n const { taskOrModuleId, hash } = parseInternalLink(link);\r\n return `${urls.preview.home}/${taskOrModuleId}${hash}`;\r\n }\r\n\r\n render() {\r\n return (\r\n \n\n
\n ))}\n \n \n {element.name}\n \n
\n\n \n {getVideosForElement(element).map((video, cI) => (\n // eslint-disable-next-line react/no-array-index-key\n \n {video.html && (\n /* eslint-disable react/no-danger */\n \n /* eslint-enable react/no-danger */\n )}\n {video.Component && (\n \n {translate('videos.noVideosForModule')}\n \n )}\n \n ))}\n
\n \n {video.Component}\n
\n )}\n {video.none && (\n \r\n {task.contentElements?.some(e => e.elementStates) && (\r\n \r\n \r\n \r\n
\r\n\r\n {showComments && (\r\n \n {currentProgram.groupedElements[elementGroup].length > 0 ? (\n <>\n \n {translate('noTasksAssigned')}\n \n )}\n
\n \n {currentProgram.groupedElements[elementGroup].map(element => (\n \n \n {element.name}\n \n {element.isNotStarted && (\n \n {dateWithOptionalTime(element.startTime)}\n \n )}\n \n ))}\n
\n \n ) : (\n \n <>\n {element.completed &&
\n \n \n \n \n {translate('scheduledTasks.elementNotAvailable')}\n \n \n {translate('scheduledTasks.elementNotAvailableDescription')}\n \n
\n \n \n );\n }\n}\n\nTaskGroup.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n clientConfig: PropTypes.object.isRequired,\n currentProgram: PropTypes.object.isRequired,\n match: PropTypes.shape({\n params: PropTypes.shape({\n elementGroup: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n};\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n clientConfig: state.auth.clientConfig,\n currentProgram: state.programStore.currentProgram,\n});\n\n\nexport default connect(mapStateToProps)(withStyles(styles)(TaskGroup));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { connect, useSelector } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\nimport { bindActionCreators } from 'redux';\nimport { Redirect, useParams } from 'react-router-dom';\n\nimport { Button } from '@material-ui/core';\n\nimport * as ProgramStore from '../../app/store/ProgramStore';\nimport urls from '../../app/urls';\nimport {\n TrackActivity, InfoMessage, PageTitle, PageLayout,\n} from '../../common/components';\nimport { DelayedFetch } from '../../youwell-common/components';\nimport MyTaskContent from './components/MyTaskContent';\nimport TaskNavigation from './components/TaskNavigation';\nimport { getBreadCrumb } from '../../common/breadcrumbUtil';\nimport { listFromCommaStrings } from '../../youwell-common/stringUtils';\nimport { getTask } from '../../common/taskUtils';\n\nconst styles = theme => ({\n previousResponses: {\n marginTop: theme.spacing(2),\n },\n navigation: {\n\n },\n print: {\n display: 'flex',\n justifyContent: 'center',\n\n '@media print': {\n display: 'none',\n },\n },\n});\n\nexport const TaskPageRedirect = () => {\n const {\n elementGroup, elementIndex,\n } = useParams();\n\n const currentProgram = useSelector(state => state.programStore.currentProgram);\n\n const task = getTask(currentProgram, elementGroup, elementIndex);\n\n if (!task) {\n return \n \n
\n )}\n\n \n );\n }\n}\n\nTask.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n match: PropTypes.shape({\n params: PropTypes.shape({\n elementGroup: PropTypes.string.isRequired,\n elementIndex: PropTypes.string.isRequired,\n subIndex: PropTypes.string,\n }).isRequired,\n }).isRequired,\n visitTask: PropTypes.func.isRequired,\n currentProgram: PropTypes.object.isRequired,\n clientConfig: PropTypes.object.isRequired,\n};\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n currentProgram: state.programStore.currentProgram,\n clientConfig: state.auth.clientConfig,\n});\n\nconst mapDispatchToProps = dispatch => ({\n ...bindActionCreators(ProgramStore.actionCreators, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Task));\n","\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.AUTOSAVE_TIMEOUT_INTERVAL = void 0;\nvar React = __importStar(require(\"react\"));\nvar prop_types_1 = __importDefault(require(\"prop-types\"));\nvar styles_1 = require(\"@material-ui/core/styles\");\nvar react_redux_1 = require(\"react-redux\");\nvar classnames_1 = __importDefault(require(\"classnames\"));\n// import { Prompt } from 'react-router';\nvar ProgramStore = __importStar(require(\"../../../app/store/ProgramStore\"));\nvar components_1 = require(\"../../../youwell-common/components\");\nvar taskContentUtils_1 = require(\"../../../common/taskContentUtils\");\nvar taskUtils_1 = require(\"../../../common/taskUtils\");\nvar responseUtils_1 = require(\"../../../youwell-common/responseUtils\");\nvar WorkSheet_1 = __importDefault(require(\"./WorkSheet\"));\nvar store_1 = require(\"../../../app/store\");\nvar useStyles = (0, styles_1.makeStyles)(({\n root: {\n // Flex-display with wrap needed for card-layout on page\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-between',\n '@media print': {\n display: 'block',\n },\n },\n}), { name: 'MyTaskContent' });\nexports.AUTOSAVE_TIMEOUT_INTERVAL = 1000; // miliseconds\nvar MyTaskContent = function (_a) {\n var _b;\n var task = _a.task, patientProgramElementId = _a.patientProgramElementId, className = _a.className, forwardedRef = _a.forwardedRef;\n var classes = useStyles();\n var dispatch = (0, react_redux_1.useDispatch)();\n var saveTimer = React.useRef();\n var clientConfig = (0, store_1.useYouwellSelector)(function (state) { return state.auth.clientConfig; });\n var currentProgram = (0, store_1.useYouwellSelector)(function (state) { return state.programStore.currentProgram; });\n var allTaskResponses = (0, store_1.useYouwellSelector)(function (state) { return state.programStore.currentProgramTaskResponses; });\n var _c = React.useState(null), changeId = _c[0], setChangeId = _c[1];\n var responsesForCurrentTask = task.patientProgramElementId ? (_b = allTaskResponses === null || allTaskResponses === void 0 ? void 0 : allTaskResponses[task.patientProgramElementId]) === null || _b === void 0 ? void 0 : _b[task.id] : null;\n var formId = responsesForCurrentTask === null || responsesForCurrentTask === void 0 ? void 0 : responsesForCurrentTask.formId;\n var updateResponse = function (responses) {\n var responseData = {\n taskId: task.id,\n taskVersion: task.version,\n patientProgramElementId: patientProgramElementId,\n formId: formId,\n responses: responses,\n };\n setChangeId(Date.now());\n dispatch(ProgramStore.actionCreators.updateResponse(responseData));\n };\n var saveResponses = React.useCallback(function (taskResponses, callback, background, submitForm) {\n var responseData = (changeId || submitForm) && (0, responseUtils_1.getUpdatedResponsesForTask)(taskResponses, patientProgramElementId, task.id, task.version, formId, submitForm);\n if (responseData) {\n dispatch(ProgramStore.actionCreators.saveResponse(responseData, {\n background: background,\n callback: function () {\n setChangeId(function (prevId) { return (prevId === changeId ? null : prevId); });\n if (callback) {\n callback();\n }\n },\n }));\n }\n else if (callback) {\n callback();\n }\n }, [changeId, patientProgramElementId, task.id, task.version, formId, dispatch]);\n var saveChanges = function (callback, submitForm) {\n if (responsesForCurrentTask || submitForm) {\n clearTimeout(saveTimer.current);\n saveResponses(responsesForCurrentTask, callback, false, (submitForm && !(responsesForCurrentTask === null || responsesForCurrentTask === void 0 ? void 0 : responsesForCurrentTask.submitted)));\n }\n else if (callback) {\n callback();\n }\n };\n React.useEffect(function () {\n if (responsesForCurrentTask && changeId) {\n if (saveTimer.current) {\n clearTimeout(saveTimer.current);\n }\n saveTimer.current = setTimeout(function () {\n saveResponses(responsesForCurrentTask, null, true);\n }, exports.AUTOSAVE_TIMEOUT_INTERVAL);\n }\n }, [changeId, responsesForCurrentTask, saveResponses, task.id]);\n var getLinkUrl = function (link) { return (0, taskUtils_1.getProgramContentLink)(link, currentProgram); };\n var getProgramItem = function (id) { return (0, taskContentUtils_1.getItemFromPatientProgram)(currentProgram, id); };\n return (React.createElement(React.Fragment, null,\n React.createElement(components_1.TaskContent, { ref: forwardedRef, className: (0, classnames_1.default)(classes.root, className), TaskFormProps: {\n disabled: !!(responsesForCurrentTask === null || responsesForCurrentTask === void 0 ? void 0 : responsesForCurrentTask.submitted),\n readOnly: !(currentProgram === null || currentProgram === void 0 ? void 0 : currentProgram.isActiveProgram),\n }, LinkElementProps: {\n getLinkUrl: getLinkUrl,\n autoplayVideos: clientConfig.appSetup.features.autoplayVideos,\n }, task: task, taskResponses: responsesForCurrentTask, getProgramItem: getProgramItem, getSpecificTaskResponses: (0, responseUtils_1.getSpecificTaskResponses)(allTaskResponses, responsesForCurrentTask), onResponse: updateResponse, onSaveChanges: saveChanges, changeId: changeId }),\n task.isWorkSheet && (React.createElement(WorkSheet_1.default, { task: task, currentForm: responsesForCurrentTask, taskContentRef: forwardedRef }))));\n};\nMyTaskContent.propTypes = {\n task: prop_types_1.default.object.isRequired,\n patientProgramElementId: prop_types_1.default.string.isRequired,\n className: prop_types_1.default.string,\n forwardedRef: prop_types_1.default.object,\n};\nMyTaskContent.defaultProps = {\n className: null,\n forwardedRef: null,\n};\nvar WithRef = React.forwardRef(function (props, ref) { return React.createElement(MyTaskContent, __assign({}, props, { forwardedRef: ref })); });\nexports.default = WithRef;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { connect } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\n\nimport { Link } from 'react-router-dom';\nimport {\n Typography, NoSsr,\n} from '@material-ui/core';\n\nimport { FowardIcon } from '../../../common/icons';\nimport urls from '../../../app/urls';\nimport { PROGRAM_CURRENTPROGRAM_RECEIVED } from '../../../app/store/actions';\n\n\nconst styles = theme => ({\n root: {\n margin: theme.spacing(4),\n padding: theme.spacing(2),\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n },\n title: {\n marginBottom: theme.spacing(2),\n },\n link: {\n display: 'flex',\n alignItems: 'center',\n },\n icon: {\n marginLeft: theme.spacing(1),\n },\n});\n\n\nclass ProgramError extends React.Component {\n render() {\n const {\n classes, translate, hasLoaded,\n } = this.props;\n\n if (!hasLoaded) {\n return null;\n }\n\n return (\n \n \n {translate('program.couldNotFindProgram')}\n \n \n \n {translate('program.goToStartPage')}\n \n \n
\n \n \n {translate(prevText)}\n \n {!hideCompleteButton && (\n \n {translate(nextText)}\n \n )}\n
\n )}\n\n \n {task.showBackNavigation && (\n \n {translate('task.goBack')}\n \n )}\n {task.showHomeNavigation && !task.saveAndAbortNavigation && (\n \n {translate('task.goToHomePage')}\n \n )}\n
\n\n\n \n {forms?.length > 0 && (\n
\n );\n};\n\nWorkSheet.propTypes = {\n task: PropTypes.object.isRequired,\n currentForm: PropTypes.object,\n taskContentRef: PropTypes.object,\n};\n\nWorkSheet.defaultProps = {\n currentForm: null,\n taskContentRef: null,\n};\n\nexport default WorkSheet;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { connect } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\n\nimport apiUrls from '../../youwell-common/apiUrls';\nimport { DefaultProgramImage } from '../../common/image';\nimport { Image } from '../../youwell-common/components';\n\nconst styles = () => ({\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n image: {\n width: '50%',\n marginTop: '10%',\n },\n});\n\nclass Home extends React.Component {\n render() {\n const {\n classes, currentProgram,\n } = this.props;\n\n const programImageUrl = currentProgram && currentProgram.frontImageId ? `${apiUrls.baseUrl}/${apiUrls.media.file}/${currentProgram.frontImageId}` : null;\n\n return (\n \n \n {translate('worksheet.previous')}\n \n
\n )}\n\n - \n {forms.map(r => (\n
\n \n
\n \n {programImageUrl ? (\n
\n );\n }\n}\n\nHome.propTypes = {\n classes: PropTypes.object.isRequired,\n // translate: PropTypes.func.isRequired,\n currentProgram: PropTypes.object,\n};\n\nHome.defaultProps = {\n currentProgram: null,\n};\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n currentProgram: state.publicStore.currentProgramId && state.publicStore.details && state.publicStore.details[state.publicStore.currentProgramId],\n});\n\nexport default connect(mapStateToProps)(withStyles(styles)(Home));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Redirect,\n Route, Switch,\n} from 'react-router-dom';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\n\nimport { IdleTimer } from '../../youwell-common/components';\nimport { logoutReasons } from '../../youwell-common/constants';\nimport Auth, { authTypes } from '../../youwell-common/Auth';\n\nimport * as AuthStore from '../../app/store/AuthStore';\n\nimport urls from '../../app/urls';\nimport { InternalLinkLoader, Layout } from '../../common/components';\nimport LoadProgram from './components/LoadProgram';\nimport Program from './Program';\nimport Module from './Module';\nimport Task from './Task';\nimport Home from './Home';\nimport { getPublicProgramContentLink } from '../../common/taskUtils';\nimport Footer from './components/Footer';\n\nconst USER_IDLE_TIMEOUT_IN_MINUTES = 30;\n\nclass Index extends React.Component {\n logoutOnIdle = () => {\n if (Auth.isUserAuthenticated(authTypes.public)) {\n this.props.logout(logoutReasons.idleTimeout, urls.public.home);\n }\n }\n\n render() {\n const { program } = this.props;\n\n return (\n <>\n \n
\n\n \n {moduleImage ?
\n\n \n
\n \n \n {module.name}\n \n
\n\n \n
\n \n );\n }\n}\n\nModule.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n match: PropTypes.shape({\n params: PropTypes.shape({\n programId: PropTypes.string.isRequired,\n moduleIndex: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n hasLoaded: PropTypes.bool.isRequired,\n program: PropTypes.object,\n};\n\nModule.defaultProps = {\n program: null,\n};\n\nconst mapStateToProps = (state, ownProps) => ({\n translate: getTranslate(state.localize),\n program: state.publicStore.details && state.publicStore.details[ownProps.match.params.programId],\n hasLoaded: Boolean(state.publicStore.requests[`${PUBLIC_PROGRAM_RECEIVED}/${ownProps.match.params.programId}`]\n && state.publicStore.requests[`${PUBLIC_PROGRAM_RECEIVED}/${ownProps.match.params.programId}`].completed),\n});\n\nexport default connect(mapStateToProps)(withStyles(styles)(Module));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { connect } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\nimport classnames from 'classnames';\n\nimport { Link, Redirect } from 'react-router-dom';\nimport {\n Typography,\n} from '@material-ui/core';\n\nimport urls from '../../app/urls';\nimport apiUrls from '../../youwell-common/apiUrls';\nimport { Image, HtmlContent } from '../../youwell-common/components';\nimport { DefaultProgramImage } from '../../common/image';\nimport { elementInfoClasses, tableListClasses } from '../../app/style/sharedClasses';\nimport { InfoMessage, PageLayout } from '../../common/components';\nimport { PUBLIC_PROGRAM_RECEIVED } from '../../app/store/actions';\n\nconst styles = theme => ({\n ...tableListClasses(theme),\n ...elementInfoClasses(theme),\n main: {\n display: 'flex',\n flexDirection: 'column',\n\n [theme.breakpoints.down('xs')]: {\n paddingTop: theme.spacing(1),\n },\n },\n programHeader: {\n marginBottom: theme.spacing(8),\n },\n programImage: {\n float: 'left',\n width: '50%',\n marginRight: theme.spacing(2),\n },\n programDescription: {\n\n },\n});\n\nclass Program extends React.Component {\n render() {\n const {\n classes, translate, program, hasLoaded,\n } = this.props;\n\n\n if (!program) {\n return hasLoaded ? (\n \n \n {translate('content')}\n \n \n {module.name}\n \n \n
\n\n \n {module.tasks && module.tasks.map((task, i) => (\n \n
\n \n \n {i + 1}\n \n
\n \n \n {task.name}\n \n
\n \n ))}\n \n
\n \n
\n\n \n {programImage ?
\n\n \n
\n \n \n {program.name}\n \n
\n\n \n
\n \n \n {translate('modules')}\n \n
\n\n \n {program.modules && program.modules.map((module, i) => (\n \n
\n \n \n {i + 1}\n \n
\n \n \n {module.name}\n \n
\n \n ))}\n \n {!isFirstTask && (\n \n \n {translate('next')}\n
\n )}\n \n );\n }\n}\n\nTask.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n clientConfig: PropTypes.object.isRequired,\n match: PropTypes.shape({\n params: PropTypes.shape({\n programId: PropTypes.string.isRequired,\n moduleIndex: PropTypes.string.isRequired,\n taskIndex: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n completeTask: PropTypes.func.isRequired,\n visitTask: PropTypes.func.isRequired,\n hasLoaded: PropTypes.bool.isRequired,\n latestCompletedStep: PropTypes.number.isRequired,\n program: PropTypes.object,\n patientProgramElementId: PropTypes.string,\n endSession: PropTypes.func.isRequired,\n};\n\nTask.defaultProps = {\n program: null,\n patientProgramElementId: null,\n};\n\nconst mapStateToProps = (state, ownProps) => ({\n translate: getTranslate(state.localize),\n clientConfig: state.auth.clientConfig,\n program: state.publicStore.details && state.publicStore.details[ownProps.match.params.programId],\n patientProgramElementId: state.publicStore.patientProgramElementId,\n hasLoaded: Boolean(state.publicStore.requests[`${PUBLIC_PROGRAM_RECEIVED}/${ownProps.match.params.programId}`]\n && state.publicStore.requests[`${PUBLIC_PROGRAM_RECEIVED}/${ownProps.match.params.programId}`].completed),\n latestCompletedStep: state.publicStore.latestCompletedStep,\n});\n\nconst mapDispatchToProps = dispatch => ({\n ...bindActionCreators(PublicStore.actionCreators, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Task));\n","import * as React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\nimport { Button } from '@material-ui/core';\n\nimport * as PublicStore from '../../../app/store/PublicStore';\nimport urls from '../../../app/urls';\n\nconst styles = theme => ({\n root: {\n margin: theme.spacing(4, 0, 2),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n button: {\n textTransform: 'none',\n },\n});\n\nconst useStyles = makeStyles(theme => styles(theme), { name: 'Footer' });\n\nconst Footer = () => {\n const classes = useStyles();\n const dispatch = useDispatch();\n\n const translate = useSelector(state => getTranslate(state.localize));\n const currentProgramId = useSelector(state => state.publicStore.currentProgramId);\n const patientProgramElementId = useSelector(state => state.publicStore.patientProgramElementId);\n\n if (!patientProgramElementId) {\n return null;\n }\n\n const endSession = () => {\n const redirect = `${urls.public.program}/${currentProgramId}`;\n dispatch(PublicStore.actionCreators.endSession(PublicStore.endSessionReasons.manualEnd, redirect));\n };\n\n return (\n \n \n
\n );\n};\n\nexport default Footer;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport * as PublicStore from '../../../app/store/PublicStore';\nimport Auth, { authTypes } from '../../../youwell-common/Auth';\nimport { hasValue } from '../../../youwell-common/objectUtils';\n\nclass LoadProgram extends React.Component {\n componentDidMount() {\n if (!this.props.currentProgram) {\n this.props.getElement(this.props.programId, { isPage: this.props.isPage });\n }\n if (Auth.isUserAuthenticated(authTypes.public) && !this.props.hasSessionData) {\n this.props.getSession(this.props.programId);\n }\n this.props.setCurrentProgram(this.props.programId);\n }\n\n render() {\n return null;\n }\n}\n\nLoadProgram.propTypes = {\n getElement: PropTypes.func.isRequired,\n getSession: PropTypes.func.isRequired,\n setCurrentProgram: PropTypes.func.isRequired,\n currentProgram: PropTypes.object,\n hasSessionData: PropTypes.bool.isRequired,\n programId: PropTypes.string.isRequired,\n isPage: PropTypes.bool.isRequired,\n};\n\nLoadProgram.defaultProps = {\n currentProgram: null,\n};\n\nconst mapStateToProps = (state, ownProps) => {\n const programId = ownProps.programId || ownProps.match?.params.programId;\n const isPage = ownProps.isPage || hasValue(ownProps.match?.params.programId);\n\n return {\n programId,\n isPage,\n currentProgram: state.publicStore.details && state.publicStore.details[programId],\n hasSessionData: Boolean(state.publicStore.patientId && state.publicStore.progress),\n };\n};\n\nconst mapDispatchToProps = dispatch => ({\n ...bindActionCreators(PublicStore.actionCreators, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(LoadProgram);\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useDispatch, useSelector } from 'react-redux';\nimport classnames from 'classnames';\n\nimport * as PublicStore from '../../../app/store/PublicStore';\n\nimport { Loading, TaskContent } from '../../../youwell-common/components';\nimport { AUTOSAVE_TIMEOUT_INTERVAL } from '../../program/components/MyTaskContent';\nimport Auth, { authTypes } from '../../../youwell-common/Auth';\nimport { getItemFromProgram } from '../../../common/taskContentUtils';\nimport { getPublicProgramContentLink } from '../../../common/taskUtils';\nimport { getSpecificTaskResponses, getUpdatedResponsesForTask } from '../../../youwell-common/responseUtils';\n\nconst styles = () => ({\n root: {\n // Flex-display with wrap needed for card-layout on page\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-between',\n\n '@media print': {\n display: 'block',\n },\n },\n});\n\nconst useStyles = makeStyles(theme => styles(theme), { name: 'PublicTaskContent' });\n\nconst PublicTaskContent = ({\n forwardedRef, program, task, moduleId,\n}) => {\n const classes = useStyles();\n const dispatch = useDispatch();\n\n const saveTimer = React.useRef();\n\n const allTaskResponses = useSelector(state => state.publicStore.responses);\n const patientProgramElementId = useSelector(state => state.publicStore.patientProgramElementId);\n const completedTasks = useSelector(state => state.publicStore.completedTasks);\n const [changeId, setChangeId] = React.useState(null);\n const [showSavingId, setShowSavingId] = React.useState(false);\n\n const responsesForCurrentTask = allTaskResponses && allTaskResponses[patientProgramElementId]\n && allTaskResponses[patientProgramElementId][task.id];\n const formId = responsesForCurrentTask?.formId;\n\n const updateResponse = (responses) => {\n const responseData = {\n programId: program.id,\n moduleId,\n taskId: task.id,\n taskVersion: task.version,\n patientProgramElementId,\n formId,\n responses,\n };\n\n setChangeId(Date.now());\n dispatch(PublicStore.actionCreators.updateResponse(responseData));\n };\n\n const saveResponses = React.useCallback((taskResponses, callback, showIsSaving) => {\n const responseData = changeId && getUpdatedResponsesForTask(taskResponses, patientProgramElementId, task.id, task.version, formId);\n\n if (responseData) {\n if (showIsSaving) {\n setShowSavingId(changeId);\n }\n dispatch(PublicStore.actionCreators.saveResponse(responseData, {\n background: true,\n callback: () => {\n setChangeId(prevId => (prevId === changeId ? null : prevId));\n setShowSavingId(prevId => (prevId === changeId ? null : prevId));\n\n if (callback) {\n callback();\n }\n },\n }));\n } else if (callback) {\n callback();\n }\n }, [changeId, dispatch, formId, patientProgramElementId, task.id, task.version]);\n\n const saveChanges = (callback) => {\n if (responsesForCurrentTask) {\n if (Auth.isUserAuthenticated(authTypes.public)) {\n clearTimeout(saveTimer.current);\n saveResponses(responsesForCurrentTask, callback, true);\n } else {\n const responseData = {\n ...getUpdatedResponsesForTask(responsesForCurrentTask, null, task.id, task.version, null),\n programId: program.id,\n moduleId,\n completedTasks: completedTasks ? Object.keys(completedTasks) : null,\n };\n\n dispatch(PublicStore.actionCreators.sendFirstResponse(responseData, { callback }));\n }\n } else if (callback) {\n callback();\n }\n };\n\n React.useEffect(() => {\n if (responsesForCurrentTask && changeId && Auth.isUserAuthenticated(authTypes.public)) {\n if (saveTimer.current) {\n clearTimeout(saveTimer.current);\n }\n saveTimer.current = setTimeout(() => {\n saveResponses(responsesForCurrentTask);\n }, AUTOSAVE_TIMEOUT_INTERVAL);\n }\n }, [changeId, responsesForCurrentTask, saveResponses, task.id]);\n\n const getLinkUrl = link => getPublicProgramContentLink(link, program);\n\n const getProgramItem = id => getItemFromProgram(program, id);\n\n return (\n <>\n \n {this.state.isInTheCall ? (\n \n \n ) : (\n
\n );\n }\n}\n\nVideochat.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n profile: PropTypes.object,\n};\n\nVideochat.defaultProps = {\n profile: null,\n};\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n profile: state.auth.profileData,\n});\n\nconst mapDispatchToProps = dispatch => ({\n ...bindActionCreators(UserStore.actionCreators, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Videochat));\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nvar _a, _b, _c;\nObject.defineProperty(exports, \"__esModule\", { value: true });\nrequire(\"core-js/stable\");\nrequire(\"regenerator-runtime/runtime\");\nvar React = __importStar(require(\"react\"));\nvar ReactDOM = __importStar(require(\"react-dom\"));\nvar react_redux_1 = require(\"react-redux\");\nvar connected_react_router_1 = require(\"connected-react-router\");\nvar styles_1 = require(\"@material-ui/core/styles\");\nvar react_localize_redux_1 = require(\"react-localize-redux\");\nvar date_fns_1 = __importDefault(require(\"@date-io/date-fns\"));\n// import enLocale from \"date-fns/locale/en-US\";\nvar nb_1 = __importDefault(require(\"date-fns/locale/nb\"));\nvar pickers_1 = require(\"@material-ui/pickers\");\nvar core_1 = require(\"@material-ui/core\");\nrequire(\"./app/style/styles.less\");\nvar theme_1 = __importDefault(require(\"./app/style/theme\"));\nvar App_1 = __importDefault(require(\"./app/App\"));\nvar PageSettingStore_1 = require(\"./app/store/PageSettingStore\");\nvar apiUrls_1 = require(\"./youwell-common/apiUrls\");\nvar reduxUtils_1 = require(\"./youwell-common/reduxUtils\");\nvar store_1 = __importStar(require(\"./app/store\"));\nvar localization_1 = require(\"./app/localization\");\nvar apiUrl = (_a = document.getElementById('react-app')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-api-url');\nvar appVersion = (_b = document.getElementById('react-app')) === null || _b === void 0 ? void 0 : _b.getAttribute('data-app-version');\nvar appConfig = JSON.parse(((_c = document.getElementById('react-app')) === null || _c === void 0 ? void 0 : _c.getAttribute('data-app-config')) || '');\nif (!apiUrl) {\n throw new Error('Missing asp-prerender parameter: data-apiUrl');\n}\n(0, apiUrls_1.setApiRoot)(apiUrl);\nPageSettingStore_1.actionCreators.setVersion(appVersion)(store_1.default.dispatch);\nPageSettingStore_1.actionCreators.setAppConfig(appConfig)(store_1.default.dispatch);\nvar localizationInitialization = (0, localization_1.translateInitialization)(appConfig.language);\nvar MainApp = function () {\n var prefersDarkMode = (0, core_1.useMediaQuery)('(prefers-color-scheme: dark)');\n var theme = React.useMemo(function () { return (0, theme_1.default)(appConfig, prefersDarkMode); }, [prefersDarkMode]);\n return (React.createElement(styles_1.MuiThemeProvider, { theme: theme },\n React.createElement(pickers_1.MuiPickersUtilsProvider, { utils: date_fns_1.default, locale: nb_1.default },\n React.createElement(react_localize_redux_1.LocalizeProvider, { store: store_1.default, initialize: localizationInitialization },\n React.createElement(react_redux_1.Provider, { store: store_1.default },\n React.createElement(connected_react_router_1.ConnectedRouter, { history: store_1.history },\n React.createElement(App_1.default, null)))))));\n};\nvar renderApp = function () {\n ReactDOM.render(React.createElement(MainApp, null), document.getElementById('react-app'));\n};\nif (module.hot) {\n module.hot.accept('./app/store', function () {\n (0, reduxUtils_1.updateStore)(store_1.default, store_1.reducers, store_1.history);\n });\n}\nrenderApp();\n","export const APPMessages = {\r\n LoggedInLevel: 'LoggedInLevel',\r\n CurrentLanguage: 'CurrentLanguage',\r\n};\r\n\r\nexport const PostAppMessage = (key, value) => {\r\n if (window.ywAppMessage?.postMessage) {\r\n window.ywAppMessage.postMessage(`${key}:${value}`);\r\n }\r\n if (window.ReactNativeWebView?.postMessage) {\r\n window.ReactNativeWebView.postMessage(`${key}:${value}`);\r\n }\r\n};\r\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.storageProviders = exports.authTypes = void 0;\nvar AppUtil_1 = require(\"./AppUtil\");\nvar LOGINLEVEL_KEY = 'yw_ll';\nvar SESSION_LIFETIME_KEY = 'yw_sl';\nvar LOGINTYPE_KEY = 'yw_lt';\nexports.authTypes = {\n user: 'usr',\n orgSelect: 'org',\n external: 'ext',\n public: 'pub',\n};\nexports.storageProviders = {\n session: 'Session',\n local: 'Local',\n};\nvar storageProvider = window.localStorage;\nvar initialized = false;\nvar Auth = /** @class */ (function () {\n function Auth() {\n }\n Auth.setStorageProvider = function (provider) {\n switch (provider) {\n case exports.storageProviders.local:\n storageProvider = window.localStorage;\n break;\n case exports.storageProviders.session:\n storageProvider = window.sessionStorage;\n break;\n default:\n storageProvider = window.localStorage;\n break;\n }\n };\n Auth.isUserAuthenticated = function () {\n var acceptedTypes = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n acceptedTypes[_i] = arguments[_i];\n }\n if (!initialized) {\n // Check to see if old session is stored in sessionStorage\n if (Number(window.sessionStorage.getItem(LOGINLEVEL_KEY)) > 0) {\n this.setStorageProvider(exports.storageProviders.session);\n }\n initialized = true;\n }\n var hasLoginLevel = this.getLoginLevel() > 0;\n if (!hasLoginLevel)\n return false;\n if ((acceptedTypes === null || acceptedTypes === void 0 ? void 0 : acceptedTypes.length) > 0) {\n var loggedInType = this.getLoginType();\n return acceptedTypes.indexOf(loggedInType) > -1;\n }\n return true;\n };\n Auth.deauthenticateUser = function () {\n window.localStorage.setItem(LOGINLEVEL_KEY, '');\n window.sessionStorage.setItem(LOGINLEVEL_KEY, '');\n window.localStorage.setItem(SESSION_LIFETIME_KEY, '');\n window.sessionStorage.setItem(SESSION_LIFETIME_KEY, '');\n window.localStorage.setItem(LOGINTYPE_KEY, '');\n window.sessionStorage.setItem(LOGINTYPE_KEY, '');\n (0, AppUtil_1.PostAppMessage)(AppUtil_1.APPMessages.LoggedInLevel, 0);\n };\n Auth.getLoginLevel = function () {\n return Number(storageProvider.getItem(LOGINLEVEL_KEY)) || 0;\n };\n Auth.getSessionLifetime = function () {\n return Number(storageProvider.getItem(SESSION_LIFETIME_KEY)) || 0;\n };\n Auth.getLoginType = function () {\n return storageProvider.getItem(LOGINTYPE_KEY);\n };\n Auth.setLoginInfo = function (level, sessionLifetime, authType, useSessionWithoutLifetime) {\n if (sessionLifetime || useSessionWithoutLifetime) {\n this.setStorageProvider(exports.storageProviders.session);\n }\n else {\n this.setStorageProvider(exports.storageProviders.local);\n }\n storageProvider.setItem(LOGINLEVEL_KEY, (level === null || level === void 0 ? void 0 : level.toString()) || '');\n storageProvider.setItem(SESSION_LIFETIME_KEY, (sessionLifetime === null || sessionLifetime === void 0 ? void 0 : sessionLifetime.toString()) || '');\n storageProvider.setItem(LOGINTYPE_KEY, authType || '');\n (0, AppUtil_1.PostAppMessage)(AppUtil_1.APPMessages.LoggedInLevel, level);\n };\n return Auth;\n}());\nexports.default = Auth;\n","\nconst inMemoryCookies = {};\n\nexport const CookieNames = {\n csrf: '__Secure-yw_rf',\n};\n\nclass Cookie {\n /**\n * Gets the value of the given cookie.\n *\n * @param {string} cname Name of a cookie\n */\n static getValue(cname) {\n if (typeof document === 'undefined') {\n return inMemoryCookies[cname] ?? null;\n }\n const name = `${cname}=`;\n const decodedCookie = decodeURIComponent(document.cookie);\n const ca = decodedCookie.split(';');\n\n for (let i = 0; i < ca.length; i++) {\n let c = ca[i];\n while (c.charAt(0) === ' ') {\n c = c.substring(1);\n }\n if (c.indexOf(name) === 0) {\n return c.substring(name.length, c.length);\n }\n }\n return null;\n }\n\n /**\n * Deletes the given cookie.\n *\n * @param {string} cname Name of a cookie\n */\n static delete(cname) {\n if (typeof document === 'undefined') {\n delete inMemoryCookies[cname];\n } else {\n document.cookie = `${cname}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/`;\n }\n }\n}\n\nexport default Cookie;\n","import { push, replace, LOCATION_CHANGE, goBack } from 'connected-react-router';\n\nimport apiUrls from './apiUrls';\nimport {\n youwellFetch, dispatchError, handleErrors, json, blob, jsonHeader, downloadBlobAsFile, createRequestParams,\n} from './fetchUtils';\nimport { mergePatchChangesInStore } from './objectUtils';\n\nexport const CLEAR_ERROR = 'APP/CLEAR_ERROR';\nexport const LOGOUT = 'APP/LOGOUT';\n\nexport const REQUEST_START = 'REQUEST_START';\nexport const REQUEST_FAILED = 'REQUEST_FAILED';\nexport const REQUEST_COMPLETE = 'REQUEST_COMPLETE';\nexport const LIST_RECIEVED = 'LIST_RECIEVED';\nexport const DETAILS_RECIEVED = 'DETAILS_RECIEVED';\nexport const INSERTED = 'INSERTED';\nexport const DELETED = 'DELETED';\nexport const UPDATED = 'UPDATED';\nexport const PATCHED = 'PATCHED';\n\nexport const handleOptions = (options, data, dispatch) => {\n if (!options) {\n return;\n }\n if (options.callback) {\n options.callback(data);\n }\n if (options.redirectWithElementId) {\n dispatch(push(`${options.redirectWithElementId}/${data.id}`));\n } else if (options.redirect) {\n dispatch(push(options.redirect));\n } else if (options.redirectExternal) {\n window.location = options.redirectExternal;\n }\n};\n\nconst handleCatch = (params, dispatch, storePrefix) => (error) => {\n if (params.onError) {\n params.onError(error);\n }\n\n dispatchError(dispatch, `${storePrefix}/${REQUEST_FAILED}`, params.options, params.requestId || params.completeAction, error, params.onUnauthorized);\n if (params.options && params.options.errorCallback) {\n params.options.errorCallback();\n }\n};\n\nconst handleData = (params, dispatch, storePrefix) => (responseData) => {\n if (params.completeAction) {\n dispatch({\n type: params.completeAction,\n data: responseData,\n reducerParams: params.options?.reducerParams,\n requestParams: params.options?.requestParams,\n inputData: params.body,\n });\n }\n\n if (params.onData) {\n params.onData(responseData);\n }\n\n dispatch({ type: `${storePrefix}/${REQUEST_COMPLETE}`, requestId: params.requestId || params.completeAction });\n handleOptions(params.options, responseData, dispatch);\n};\n\nconst appendUrlData = (options) => {\n if (!options || !options.urlData) {\n return '';\n }\n\n return `/${options.urlData}`;\n};\n\nconst setRequests = (state, requestId, options, current) => {\n if (!requestId) {\n return { ...state };\n }\n\n const requests = {\n ...state.requests,\n [requestId]: {\n ...current,\n background: options && options.background,\n },\n };\n const errors = Object.values(requests).reduce((prev, curr) => (curr.error && !curr.background ? [...prev, curr.error] : prev), []);\n\n return {\n ...state,\n requests,\n errors: errors.length > 0 ? errors : null,\n loading: Object.values(requests).reduce((prev, curr) => prev || (curr.loading && !curr.background), false),\n };\n};\n\nconst clearErrors = state => ({\n ...state,\n requests: state.requests ? Object.keys(state.requests).reduce((prev, curr) => ({ ...prev, [curr]: { ...state.requests[curr], error: null } }), {}) : {},\n errors: null,\n});\n\nexport default class ReduxStoreHelper {\n constructor(STORE_PREFIX) {\n this.STORE_PREFIX = STORE_PREFIX;\n }\n\n fetch = (dispatch, params) => {\n youwellFetch(`${apiUrls.baseUrl}/${params.url}${appendUrlData(params.options)}${createRequestParams(params.options?.requestParams)}`, {\n headers: { ...jsonHeader },\n method: params.method || 'GET',\n body: params.body ? JSON.stringify(params.body) : undefined,\n })\n .then(handleErrors(dispatch))\n .then(json)\n .then(handleData(params, dispatch, this.STORE_PREFIX))\n .catch(handleCatch(params, dispatch, this.STORE_PREFIX));\n\n dispatch({\n type: `${this.STORE_PREFIX}/${REQUEST_START}`, requestId: params.requestId || params.completeAction, options: params.options,\n });\n };\n\n fetchFile = (dispatch, params) => {\n const formData = new FormData();\n formData.append('file', params.file);\n\n youwellFetch(`${apiUrls.baseUrl}/${params.url}${appendUrlData(params.options)}${createRequestParams(params.options?.requestParams)}`, {\n headers: { },\n method: 'POST',\n body: formData,\n })\n .then(handleErrors(dispatch))\n .then(json)\n .then(handleData(params, dispatch, this.STORE_PREFIX))\n .catch(handleCatch(params, dispatch, this.STORE_PREFIX));\n\n dispatch({\n type: `${this.STORE_PREFIX}/${REQUEST_START}`, requestId: params.requestId || params.completeAction, options: params.options,\n });\n };\n\n fetchBlob = (dispatch, params) => {\n youwellFetch(`${apiUrls.baseUrl}/${params.url}${appendUrlData(params.options)}${createRequestParams(params.options?.requestParams)}`, {\n headers: { ...jsonHeader },\n method: params.method || 'GET',\n body: params.body ? JSON.stringify(params.body) : undefined,\n })\n .then(handleErrors(dispatch))\n .then(blob)\n .then(handleData(params, dispatch, this.STORE_PREFIX))\n .catch(handleCatch(params, dispatch, this.STORE_PREFIX));\n\n dispatch({\n type: `${this.STORE_PREFIX}/${REQUEST_START}`, requestId: params.requestId || params.completeAction, options: params.options,\n });\n };\n\n createGetListActionCreator = (urlPart, COMPLETE_ACTION, requestParameters) => options => (dispatch) => {\n this.fetch(dispatch, {\n url: urlPart,\n options: { ...options, requestParams: { ...requestParameters, ...options ? options.requestParams : {} } },\n completeAction: `${this.STORE_PREFIX}/${COMPLETE_ACTION}`,\n requestId: `${this.STORE_PREFIX}/${COMPLETE_ACTION}`,\n });\n };\n\n createGetElementActionCreator = (urlPart, COMPLETE_ACTION, requestParameters) => (elementId, options) => (dispatch) => {\n this.fetch(dispatch, {\n url: `${urlPart}/${elementId}`,\n options: { ...options, requestParams: { ...requestParameters, ...options ? options.requestParams : {} } },\n completeAction: `${this.STORE_PREFIX}/${COMPLETE_ACTION}`,\n requestId: `${this.STORE_PREFIX}/${COMPLETE_ACTION}/${elementId}`,\n });\n };\n\n createPatchActionCreator = (urlPart, COMPLETE_ACTION, requestParameters) => (body, options) => (dispatch) => {\n this.fetch(dispatch, {\n url: urlPart,\n options: {\n ...options,\n requestParams: { ...requestParameters, ...options ? options.requestParams : {} },\n reducerParams: { id: body.id, changes: body.changes, ...options ? options.reducerParams : {} },\n },\n completeAction: `${this.STORE_PREFIX}/${COMPLETE_ACTION}`,\n method: 'PATCH',\n body,\n });\n };\n\n createInsertActionCreator = (urlPart, COMPLETE_ACTION, requestParameters) => this.createActionCreator(urlPart, COMPLETE_ACTION, 'POST', requestParameters);\n\n createUpdateActionCreator = (urlPart, COMPLETE_ACTION, requestParameters) => this.createActionCreator(urlPart, COMPLETE_ACTION, 'PUT', requestParameters);\n\n\n createDeleteActionCreator = (urlPart, COMPLETE_ACTION, requestParameters) => (elementToDelete, options) => (dispatch) => {\n this.fetch(dispatch, {\n url: `${urlPart}/${elementToDelete.id}`,\n options: { ...options, requestParams: { ...requestParameters, ...options ? options.requestParams : {} } },\n method: 'DELETE',\n requestId: (options && options.requestId) || COMPLETE_ACTION,\n onData: (dataFromServer) => {\n dispatch({ type: `${this.STORE_PREFIX}/${COMPLETE_ACTION}`, data: dataFromServer || elementToDelete, reducerParams: options?.reducerParams, requestParams: options?.requestParams });\n },\n });\n };\n\n createFileUploadActionCreator = (urlPart, COMPLETE_ACTION) => (file, options) => (dispatch) => {\n this.fetchFile(dispatch, {\n url: urlPart,\n options,\n completeAction: `${this.STORE_PREFIX}/${COMPLETE_ACTION}`,\n file,\n });\n };\n\n createFileDownloadActionCreator = (urlPart, COMPLETE_ACTION, fileName) => options => (dispatch) => {\n this.fetchBlob(dispatch, {\n url: urlPart,\n completeAction: `${this.STORE_PREFIX}/${COMPLETE_ACTION}`,\n onData: (data) => {\n downloadBlobAsFile(fileName || data.filename || 'Unnamed export.zip_or_csv', data.contentType, data.blobData);\n },\n options,\n });\n };\n\n createActionCreator = (urlPart, COMPLETE_ACTION, method, requestParameters) => (body, options) => (dispatch) => {\n this.fetch(dispatch, {\n url: urlPart,\n options: { ...options, requestParams: { ...requestParameters, ...options ? options.requestParams : {} } },\n completeAction: `${this.STORE_PREFIX}/${COMPLETE_ACTION}`,\n method: method || 'POST',\n body,\n });\n };\n\n defaultActionCreators = urlPart => ({\n redirect: (url, replaceHistory) => (dispatch) => {\n if (replaceHistory) {\n dispatch(replace(url));\n } else {\n dispatch(push(url));\n }\n },\n goBack: () => (dispatch) => {\n dispatch(goBack());\n },\n getList: this.createGetListActionCreator(urlPart, LIST_RECIEVED),\n getElement: this.createGetElementActionCreator(urlPart, DETAILS_RECIEVED),\n insertElement: this.createActionCreator(urlPart, INSERTED),\n deleteElement: this.createDeleteActionCreator(urlPart, DELETED),\n updateElement: this.createUpdateActionCreator(urlPart, UPDATED),\n patchElement: this.createPatchActionCreator(urlPart, PATCHED),\n });\n\n defaultInitialState = {\n errors: [],\n loading: false,\n list: null,\n details: null,\n requests: {},\n };\n\n defaultReducer = (state, action, initialState) => {\n switch (action.type) {\n case LOCATION_CHANGE: {\n return clearErrors(state);\n }\n case CLEAR_ERROR: {\n return clearErrors(state);\n }\n case LOGOUT: {\n return initialState;\n }\n case `${this.STORE_PREFIX}/${REQUEST_START}`: {\n return setRequests(state, action.requestId, action.options, {\n loading: true,\n completed: false,\n error: null,\n });\n }\n case `${this.STORE_PREFIX}/${REQUEST_COMPLETE}`: {\n return setRequests(state, action.requestId, action.options, {\n loading: false,\n completed: true,\n error: null,\n });\n }\n case `${this.STORE_PREFIX}/${REQUEST_FAILED}`: {\n /* eslint-disable no-console */\n if (console?.error && action?.error) {\n console.error(action.error);\n }\n /* eslint-enable no-console */\n\n return setRequests(state, action.requestId, action.options, {\n loading: false,\n completed: true,\n error: action.error,\n });\n }\n case `${this.STORE_PREFIX}/${LIST_RECIEVED}`: {\n return {\n ...state,\n list: action.data,\n };\n }\n case `${this.STORE_PREFIX}/${DETAILS_RECIEVED}`: {\n return {\n ...state,\n details: {\n ...state.details || {},\n [action.data.id]: action.data,\n },\n };\n }\n case `${this.STORE_PREFIX}/${INSERTED}`: {\n return {\n ...state,\n list: state.list ? [...state.list, action.data] : null,\n details: {\n ...state.details || {},\n [action.data.id]: action.data,\n },\n };\n }\n case `${this.STORE_PREFIX}/${DELETED}`: {\n return {\n ...state,\n list: state.list ? state.list.filter(e => e.id !== action.data.id) : null,\n details: {\n ...state.details || {},\n [action.data.id]: undefined,\n },\n };\n }\n case `${this.STORE_PREFIX}/${UPDATED}`: {\n return {\n ...state,\n details: {\n ...state.details || {},\n [action.data.id]: action.data,\n },\n list: state.list ? state.list.map(e => (e.id === action.data.id ? action.data : e)) : null,\n };\n }\n case `${this.STORE_PREFIX}/${PATCHED}`: {\n if (!action.reducerParams || !state.details || !state.details[action.reducerParams.id]) {\n return state || initialState;\n }\n const newData = mergePatchChangesInStore(state.details[action.reducerParams.id], action.reducerParams.changes, action.data);\n\n return {\n ...state,\n details: {\n ...state.details || {},\n [action.reducerParams.id]: {\n ...newData,\n __changes: {}, // Todo - must check which changes should be cleared!\n __hasChanges: false, // todo ...\n },\n },\n list: state.list ? state.list.map(e => (e.id === action.reducerParams.id ? newData : e)) : null,\n };\n }\n default: {\n return null;\n }\n }\n };\n}\n","\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.currentRoot = exports.setApiRoot = void 0;\nvar urlvalues = {\n baseUrl: '',\n admin: {\n admin: 'api/admin/admin',\n log: 'api/admin/log',\n organization: 'api/admin/organization',\n stats: 'api/admin/stats',\n taskEngine: 'api/admin/taskEngine',\n },\n app: {\n auth: 'api/app/auth',\n message: 'api/app/message',\n program: 'api/app/program',\n public: 'api/app/public',\n preview: 'api/app/preview',\n user: 'api/app/user',\n sensor: 'api/app/sensor',\n sleep: 'api/app/sleep',\n activity: 'api/app/activity',\n media: 'api/app/media',\n external: 'api/app/external/user',\n },\n fihr: {\n observation: 'api/fihr/observation',\n },\n portal: {\n patient: 'api/portal/patient',\n patientSensor: 'api/portal/patient/sensor',\n patientExport: 'api/portal/patient/export',\n patientFitbit: 'api/portal/patient/fitbit',\n patientGarmin: 'api/portal/patient/garmin',\n patientMessage: 'api/portal/patient/message',\n patientGroupMessage: 'api/portal/patient/message/group',\n patientEvent: 'api/portal/patient/event',\n patientNotification: 'api/portal/patient/notifications',\n patientMedia: 'api/portal/patient/media',\n patientAdmin: 'api/portal/patient/admin',\n module: 'api/portal/program/module',\n program: 'api/portal/program/program',\n task: 'api/portal/program/task',\n import: 'api/portal/program/import',\n programExport: 'api/portal/program/export',\n auth: 'api/portal/auth',\n media: 'api/portal/media',\n registration: 'api/portal/registration',\n user: 'api/portal/user',\n users: 'api/portal/users',\n content: 'api/portal/content',\n analytics: 'api/portal/analytics',\n organization: 'api/portal/organization',\n },\n public: {\n program: 'api/public/program',\n },\n media: {\n file: 'media/file',\n video: 'media/video',\n },\n route: {\n callback: 'route/callback',\n oauth: 'route/oauth',\n },\n socket: {\n videoChat: 'socket/videochat/hub',\n },\n};\nvar apiUrls = __assign({}, urlvalues);\nvar setApiRoot = function (baseUrl) {\n apiUrls.baseUrl = baseUrl;\n};\nexports.setApiRoot = setApiRoot;\nvar currentRoot = function () { return \"\".concat(window.location.protocol, \"//\").concat(window.location.host); };\nexports.currentRoot = currentRoot;\nexports.default = apiUrls;\n","import { getLocalDate } from './dateUtils';\nimport { getValueByDotNotation } from './objectUtils';\n\nexport const toLookup = (array, keyName = 'id') => (array\n ? array.reduce((prev, curr) => (\n curr ? { ...prev, [getValueByDotNotation(curr, keyName)]: curr } : prev\n ), {}) : {}\n);\n\nexport const toLookupMultiple = (array, keyName = 'id', initialValue = {}) => (array\n ? array.reduce((prev, curr) => (\n { ...prev, [curr[keyName]]: [...prev[curr[keyName]] || [], curr] }\n ), initialValue || {}) : initialValue || {}\n);\n\nexport const toBoolLookup = (array, keyName = '') => (array\n ? array.reduce((prev, curr) => (\n { ...prev, [keyName ? curr[keyName] : curr]: true }\n ), {}) : {}\n);\n\nexport const GUID_LENGTH = 36;\n\nexport const toGuidLookup = (array, trimKey) => (array ? array.reduce((prev, curr) => (\n curr.startsWith(trimKey)\n ? { ...prev, [curr.slice(trimKey.length, GUID_LENGTH + trimKey.length)]: true }\n : prev\n), {}) : {});\n\nexport const toCommaList = (array, keyName = 'name') => (array\n ? array.reduce((prev, curr) => (curr ? `${prev ? `${prev}, ` : ''}${curr[keyName]}` : prev), '') : null\n);\n\nexport const findMax = (array, keyName, startValue = 0) => (array\n ? array.reduce((prev, curr) => (curr && curr[keyName] ? Math.max(prev, Number(curr[keyName]) || startValue) : prev), startValue) : startValue\n);\n\nexport const findMaxDate = (array, keyName = 'created', startValue = null) => (array\n ? array.reduce((prev, curr) => (curr && curr[keyName] ? Math.max(prev, getLocalDate(curr[keyName]) || startValue) : prev), startValue) : startValue\n);\n\nexport const reorderElements = (array, fromIndex, toIndex) => {\n const reordered = [...array];\n const [removed] = reordered.splice(fromIndex, 1);\n reordered.splice(toIndex, 0, removed);\n return reordered;\n};\n\nexport const insertAtIndex = (array, index, elementToInsert) => {\n const reordered = [...array];\n reordered.splice(index, 0, elementToInsert);\n return reordered;\n};\n\nexport const sortByDate = (array, propName = 'created') => (array ? [...array].sort((a, b) => new Date(b[propName]) - new Date(a[propName])) : null);\nexport const sortByDateAscending = (array, propName = 'created') => (array ? [...array].sort((a, b) => new Date(a[propName]) - new Date(b[propName])) : null);\nexport const sortByString = (array, propName = 'name') => (array ? [...array].sort((a, b) => `${a[propName] || ''}`.localeCompare(b[propName])) : null);\n\nconst sortComp = (a, b) => (a > b) - (a < b);\nconst sortCompDate = (a, b) => new Date(a) - new Date(b);\nexport const sortByMany = (array, ...sortProps) => (array ? array.sort((a, b) => sortProps.reduce((prev, curr) => prev || sortComp(a[curr], b[curr]), 0)) : null);\nexport const sortByManyAdvanced = (array, ...sortProps) => (array ? [...array].sort((a, b) => sortProps.reduce((prev, curr) => prev || ((p) => {\n switch (p.type) {\n case 'date':\n return p.desc ? sortCompDate(b[p.name], a[p.name]) : sortCompDate(a[p.name], b[p.name]);\n case 'func':\n return p.desc ? p.sortFunc(b, a) : p.sortFunc(a, b);\n default:\n return p.desc ? sortComp(b[p.name], a[p.name]) : sortComp(a[p.name], b[p.name]);\n }\n})(curr),\n0)) : null);\n\nexport const distinct = (array, distinctBy = d => d.id) => {\n const set = {};\n return array?.filter((d) => { if (set[distinctBy(d)]) return false; set[distinctBy(d)] = true; return true; });\n};\n\n// Merge two arrays and filter out duplicates by key (item from B is preserved)\nexport const mergeWithFilter = (a, b, key = 'id') => {\n const bDict = toBoolLookup(b, key);\n return (a || []).filter(elem => !bDict[elem[key]])\n .concat(b || []);\n};\n\nexport const reverse = (array) => {\n const clone = [...array];\n clone.reverse();\n return clone;\n};\n\nexport const fillArrayToLength = (inputDataArray, fillLength, fillElement) => [...inputDataArray || [], ...Array(Math.max(fillLength - (inputDataArray?.length || 0), 0)).fill(fillElement)];\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.useScrollEffect = exports.useElementSize = exports.useWindowSize = exports.isTouchDevice = exports.isInStandaloneMode = exports.isChromeOnIos = exports.isIos = exports.isEdge = exports.isIe = exports.isBrowser = void 0;\nvar react_1 = require(\"react\");\nexports.isBrowser = typeof window === 'object';\n// @ts-ignore documentMode not in default types, it is only used by IE\nexports.isIe = exports.isBrowser && !!document.documentMode;\nexports.isEdge = exports.isBrowser && window.navigator.userAgent.indexOf('Edge') > -1;\nvar isIos = function () { return exports.isBrowser && (/iphone|ipad|ipod/.test(window.navigator.userAgent.toLowerCase())\n // iPad on iOS 13 detection\n || (navigator.userAgent.includes('Mac') && 'ontouchend' in document)); };\nexports.isIos = isIos;\nvar isChromeOnIos = function () { return (0, exports.isIos)() && /CriOS/i.test(navigator.userAgent); };\nexports.isChromeOnIos = isChromeOnIos;\nvar isInStandaloneMode = function () {\n var isStandalone = window.matchMedia('(display-mode: standalone)').matches;\n // @ts-ignore navigator.standalone is only available on iOs Safari\n if (navigator.standalone || isStandalone) {\n return true; // 'standalone';\n }\n if (document.referrer.startsWith('android-app://')) {\n return true; // 'twa';\n }\n return false; // 'browser';\n};\nexports.isInStandaloneMode = isInStandaloneMode;\nexports.isTouchDevice = exports.isBrowser && (('ontouchstart' in window)\n || (navigator.maxTouchPoints > 0)\n // @ts-ignore msMaxTouchPoints not in default types, it is only used by IE\n || (navigator.msMaxTouchPoints > 0));\nvar useWindowSize = function () {\n var _a = (0, react_1.useState)({\n width: undefined,\n height: undefined,\n }), windowSize = _a[0], setWindowSize = _a[1];\n (0, react_1.useEffect)(function () {\n function handleResize() {\n setWindowSize({\n width: window.innerWidth,\n height: window.innerHeight,\n });\n }\n window.addEventListener('resize', handleResize);\n handleResize();\n return function () { return window.removeEventListener('resize', handleResize); };\n }, []);\n return windowSize;\n};\nexports.useWindowSize = useWindowSize;\nvar useElementSize = function () {\n var _a = (0, react_1.useState)({\n width: undefined,\n height: undefined,\n }), elementSize = _a[0], setElementSize = _a[1];\n var elementRef = (0, react_1.useCallback)(function (node) {\n function handleResize() {\n if (node !== null) {\n setElementSize({\n width: node.getBoundingClientRect().width,\n height: node.getBoundingClientRect().height,\n });\n }\n }\n window.addEventListener('resize', handleResize);\n handleResize();\n return function () { return window.removeEventListener('resize', handleResize); };\n }, []);\n return { elementRef: elementRef, elementSize: elementSize };\n};\nexports.useElementSize = useElementSize;\nvar useScrollEffect = function (onScrollUp, onScrollDown) {\n var scrollY = (0, react_1.useRef)(0);\n (0, react_1.useEffect)(function () {\n scrollY.current = window.pageYOffset;\n var update = function () {\n var prevScrollY = scrollY.current;\n var currentScroll = window.pageYOffset;\n if (prevScrollY > currentScroll) {\n // console.log('scrolling up - show menu');\n onScrollUp();\n }\n else if (currentScroll > 0) {\n // Must check > 0 to account for \"scroll to refresh\" functionality (which sets Y-pos negative on iphone)\n // console.log('scrolling down - hide menu');\n onScrollDown();\n }\n scrollY.current = currentScroll;\n };\n window.addEventListener('scroll', update);\n return function () {\n window.removeEventListener('scroll', update);\n };\n }, [onScrollDown, onScrollUp]);\n};\nexports.useScrollEffect = useScrollEffect;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n makeStyles,\n TextField,\n} from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n disabledReadonlyInput: {\n color: theme.palette.text.primary,\n },\n}));\n\nconst AsyncTextField = ({\n label, value, onChange, delay, readOnly, shrink, ...props\n}) => {\n const classes = useStyles();\n const [inputValue, setInputValue] = React.useState(null);\n const updateAsyncTimer = React.useRef();\n\n const handleChange = (event) => {\n const updatedValue = event.target.value;\n setInputValue(updatedValue);\n\n if (updateAsyncTimer.current) clearTimeout(updateAsyncTimer.current);\n\n updateAsyncTimer.current = setTimeout(() => {\n onChange(updatedValue);\n }, delay);\n };\n\n return (\n \n
\n \n \n
\n \n {this.state.isBeingCalled ? (\n \n\n \n )}\n
\n )}\n \n \n
\n ) : (\n \n
\n\n {this.state.isReady ? (\n <>\n ) : (\n <>\n {this.state.infoText}
\n\n \n
\n \n )}\n \n \n \n {translate('dev.underDevelopment')}\n \n \n \n \n {translate('dev.underDevelopmentShort')}\n \n \n
\n )}\n \n ) : (\n \n
\n )\n );\n }\n}\n\nDevelopmentBanner.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n password: PropTypes.string,\n passwordDate: PropTypes.number,\n disabled: PropTypes.bool,\n showBanner: PropTypes.bool,\n};\n\nDevelopmentBanner.defaultProps = {\n password: '',\n passwordDate: 0,\n disabled: false,\n showBanner: false,\n};\n\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n});\n\nexport default connect(mapStateToProps)(withStyles(styles)(DevelopmentBanner));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\n\nimport {\n Button,\n Dialog,\n DialogContent,\n DialogTitle,\n DialogActions,\n} from '@material-ui/core';\n\n\nclass DialogButton extends React.Component {\n state = {\n isDialogOpen: false,\n }\n\n openDialog = () => {\n this.setState({ isDialogOpen: true });\n }\n\n closeDialog = () => {\n this.setState({ isDialogOpen: false });\n }\n\n ok = () => {\n this.setState({ isDialogOpen: false }, this.props.dialogOkAction);\n }\n\n\n render() {\n const {\n buttonText, dialogTitle, dialogCancelText, buttonProps,\n } = this.props;\n\n return (\n <>\n \n \n {translate('dev.underDevelopment')}\n \n \n {translate('dev.pleaseLogInToContinue')}\n \n\n \n\n \n
\n \r\n
\r\n );\r\n }\r\n return this.props.children;\r\n }\r\n}\r\n\r\nErrorBoundary.propTypes = {\r\n children: PropTypes.oneOfType([\r\n PropTypes.arrayOf(PropTypes.node),\r\n PropTypes.node,\r\n ]),\r\n id: PropTypes.string.isRequired,\r\n};\r\n\r\nErrorBoundary.defaultProps = {\r\n children: null,\r\n};\r\n\r\nexport default ErrorBoundary;\r\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\nimport { withStyles } from '@material-ui/core/styles';\nimport classnames from 'classnames';\n\nimport { Typography, IconButton } from '@material-ui/core';\nimport { ClearIcon } from '../icons';\nimport { isBrowser } from '../browserUtils';\n\nconst styles = theme => ({\n root: {\n padding: theme.spacing(2),\n marginBottom: theme.spacing(2),\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n text: {\n flex: '1 1 auto',\n },\n icon: {\n height: 'auto',\n width: 'auto',\n },\n});\n\nclass ErrorMessage extends React.Component {\n errorElement = React.createRef();\n\n componentDidUpdate(prevProps) {\n if (this.props.message && this.props.message !== prevProps.message) {\n const scrollEl = this.errorElement.current;\n\n if (scrollEl && isBrowser && window.scrollY > 10) {\n setTimeout(() => {\n scrollEl.scrollIntoView({ behavior: 'smooth' });\n }, 200);\n }\n }\n }\n\n render() {\n const {\n classes, translate, message, onClear, className, muteErrors, scrollMarginTop,\n } = this.props;\n\n if (!message) {\n return null;\n }\n\n const filteredMessages = [...new Set(message.split('Something went wrong. Refresh page to try again..
\r\n'))].filter(d => !muteErrors?.includes(d));\n\n if (!filteredMessages.length) {\n return null;\n }\n return (\n
\n {filteredMessages.map(msg => (\n \n {translate(`errors.${msg}`, null, { onMissingTranslation: () => `System error (${msg})` })}\n \n ))}\n {onClear && (\n \n \n )}\n
\n );\n }\n}\n\nErrorMessage.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n className: PropTypes.string,\n message: PropTypes.string,\n onClear: PropTypes.func,\n muteErrors: PropTypes.array,\n scrollMarginTop: PropTypes.number,\n};\n\nErrorMessage.defaultProps = {\n message: null,\n className: null,\n onClear: null,\n muteErrors: null,\n scrollMarginTop: null,\n};\n\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n});\n\nexport default connect(mapStateToProps)(withStyles(styles)(ErrorMessage));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\n\nimport {\n Button,\n} from '@material-ui/core';\n\n\nclass FormLink extends React.Component {\n render() {\n const {\n buttonText, buttonProps, params, to,\n } = this.props;\n\n return (\n \n );\n }\n}\n\nFormLink.propTypes = {\n buttonText: PropTypes.string.isRequired,\n buttonProps: PropTypes.object,\n to: PropTypes.string.isRequired,\n params: PropTypes.arrayOf(PropTypes.shape({\n key: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n })),\n};\n\nFormLink.defaultProps = {\n buttonProps: null,\n params: null,\n};\n\nexport default FormLink;\n","\"use strict\";\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.htmlContentClassName = void 0;\nvar React = __importStar(require(\"react\"));\nvar classnames_1 = __importDefault(require(\"classnames\"));\nvar htmlUtils_1 = require(\"../htmlUtils\");\nvar utils_1 = require(\"../types/utils\");\nexports.htmlContentClassName = 'htmlcontent';\nvar HtmlContent = function (_a) {\n var html = _a.html, className = _a.className, addNoContextForImages = _a.addNoContextForImages, style = _a.style;\n var appId = (0, utils_1.useYouwellCommonSelector)(function (state) { return state.pageSettings.appConfig.appId; });\n if ((0, htmlUtils_1.isEmptyHtml)(html)) {\n return null;\n }\n return (\n /* eslint-disable react/no-danger */\n React.createElement(\"div\", { dangerouslySetInnerHTML: { __html: (0, htmlUtils_1.replaceEmbedContent)(html, addNoContextForImages, appId) }, className: (0, classnames_1.default)(exports.htmlContentClassName, className), style: style })\n /* eslint-enable react/no-danger */\n );\n};\nHtmlContent.defaultProps = {\n html: null,\n className: null,\n addNoContextForImages: false,\n style: null,\n};\nexports.default = HtmlContent;\n","// Stripped and adjusted from https://github.com/SupremeTechnopriest/react-idle-timer\n\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport InactivityAlert from './InactivityAlert';\n\nconst IS_BROWSER = (typeof window === 'undefined' ? 'undefined' : typeof window) === 'object';\nconst DEFAULT_ELEMENT = IS_BROWSER ? document : {};\nconst DEFAULT_EVENTS = [\n 'mousemove',\n 'keydown',\n 'wheel',\n 'DOMMouseScroll',\n 'mouseWheel',\n 'mousedown',\n 'touchstart',\n 'touchmove',\n 'MSPointerDown',\n 'MSPointerMove',\n];\n\nclass IdleTimer extends React.Component {\n tId = null\n\n state = {\n idle: false,\n oldDate: +new Date(),\n lastActive: +new Date(),\n pageX: null,\n pageY: null,\n }\n\n componentDidMount() {\n if (!IS_BROWSER) return;\n\n DEFAULT_EVENTS.forEach((e) => {\n DEFAULT_ELEMENT.addEventListener(e, this.handleEvent, {\n capture: true,\n passive: true,\n });\n });\n\n this.reset();\n }\n\n componentWillUnmount() {\n clearTimeout(this.tId);\n if (!IS_BROWSER) return;\n DEFAULT_EVENTS.forEach((e) => {\n DEFAULT_ELEMENT.removeEventListener(e, this.handleEvent, {\n capture: true,\n passive: true,\n });\n });\n }\n\n toggleIdleState = (e) => {\n const { idle } = this.state;\n this.setState({\n idle: !idle,\n });\n\n const { onActive, onIdle } = this.props;\n if (idle) {\n onActive(e);\n } else {\n onIdle(e);\n }\n }\n\n handleEvent = (e) => {\n const { pageX, pageY } = this.state;\n\n // Mousemove event\n if (e.type === 'mousemove') {\n // If coord are same, it didn't move\n if (e.pageX === pageX && e.pageY === pageY) {\n return;\n }\n // If coord don't exist how could it move\n if (typeof e.pageX === 'undefined' && typeof e.pageY === 'undefined') {\n return;\n }\n // Under 200 ms is hard to do\n // continuous activity will bypass this\n const elapsed = this.getElapsedTime();\n if (elapsed < 200) {\n return;\n }\n }\n\n // Clear any existing timeout\n clearTimeout(this.tId);\n\n // If the idle timer is enabled, flip\n if (this.state.idle) {\n this.toggleIdleState(e);\n }\n\n // Store when the user was last active\n // and update the mouse coordinates\n this.setState({\n lastActive: +new Date(), // store when user was last active\n pageX: e.pageX, // update mouse coord\n pageY: e.pageY,\n });\n\n // Set a new timeout\n const { timeoutInMinutes } = this.props;\n this.tId = setTimeout(this.toggleIdleState, timeoutInMinutes * 60 * 1000); // set a new timeout\n }\n\n reset = () => {\n // Clear timeout\n clearTimeout(this.tId);\n\n // Reset state\n this.setState(prevState => ({\n idle: false,\n oldDate: +new Date(),\n lastActive: prevState.oldDate,\n }));\n\n // Set new timeout\n const { timeoutInMinutes } = this.props;\n this.tId = setTimeout(this.toggleIdleState, timeoutInMinutes * 60 * 1000); // set a new timeout\n }\n\n getRemainingTime = () => {\n const { idle, lastActive } = this.state;\n // If idle there is no time remaining\n if (idle) {\n return 0;\n }\n\n // Determine remaining, if negative idle didn't finish flipping, just return 0\n const { timeoutInMinutes } = this.props;\n let timeLeft = (timeoutInMinutes * 60 * 1000) - (+new Date() - lastActive);\n if (timeLeft < 0) {\n timeLeft = 0;\n }\n return timeLeft;\n }\n\n getElapsedTime = () => {\n const { oldDate } = this.state;\n return +new Date() - oldDate;\n }\n\n getLastActiveTime = () => {\n const { lastActive } = this.state;\n return lastActive;\n }\n\n isIdle = () => this.state.idle\n\n render() {\n const { hasInactivityAlert, timeoutInMinutes } = this.props;\n\n return hasInactivityAlert ? \n \n {translate('common.fileNotFound')}\n \n {/* \n {`(${src})`}\n */}\n
\n );\n }\n\n let srcWithAppId = src;\n if (srcWithAppId?.startsWith('http') && srcWithAppId?.indexOf('xAppId=') < 0) {\n const prefix = srcWithAppId?.indexOf('?') < 0 ? '?' : '&';\n srcWithAppId = `${src}${prefix}xAppId=${appConfig.appId}`;\n }\n\n const style = { opacity: this.state.loaded ? 1 : 0, transition: 'opacity 0.1s', ...imageStyle };\n\n return (\n \n {translate('inactivityMessage')} \n
\n \n {languages.map(lang => (\n setActiveLanguage(lang.code)} disabled={activeLanguage && lang.code === activeLanguage.code}>\n \n ))}\n
\n);\n\nLanguageToggle.propTypes = {\n classes: PropTypes.object.isRequired,\n languages: PropTypes.array.isRequired,\n activeLanguage: PropTypes.object,\n setActiveLanguage: PropTypes.func.isRequired,\n className: PropTypes.string,\n};\n\nLanguageToggle.defaultProps = {\n activeLanguage: {},\n className: null,\n};\n\nexport default withLocalize(withStyles(styles)(LanguageToggle));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withLocalize } from 'react-localize-redux';\n\nclass LoadLanguageData extends React.Component {\n componentDidUpdate(prevProps) {\n if (!prevProps.clientConfig?.textTemplates && this.props.clientConfig?.textTemplates) {\n const parsedTemplates = this.props.clientConfig.textTemplates ?? {};\n\n if (parsedTemplates?.client) {\n Object.keys(parsedTemplates.client).forEach((lang) => {\n this.props.addTranslationForLanguage(parsedTemplates.client[lang], lang);\n });\n }\n }\n }\n\n render() {\n return null;\n }\n}\n\nLoadLanguageData.propTypes = {\n addTranslationForLanguage: PropTypes.func.isRequired,\n clientConfig: PropTypes.object,\n};\n\nLoadLanguageData.defaultProps = {\n clientConfig: null,\n};\n\nconst mapStateToProps = state => ({\n clientConfig: state.auth.clientConfig,\n});\n\nexport default connect(mapStateToProps)(withLocalize(LoadLanguageData));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\nimport classnames from 'classnames';\n\nimport { withStyles } from '@material-ui/core/styles';\nimport { Typography, CircularProgress, NoSsr } from '@material-ui/core';\n\nconst styles = theme => ({\n root: {\n position: 'fixed',\n zIndex: 1500,\n top: 0,\n left: 0,\n bottom: 0,\n width: '100%',\n textAlign: 'center',\n backgroundColor: '#f0fbff82',\n },\n rootInline: {\n position: 'relative',\n },\n content: {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n },\n progress: {\n color: '#05325a',\n },\n message: {\n color: '#05325a',\n marginTop: theme.spacing(1),\n },\n error: {\n marginTop: theme.spacing(1),\n },\n});\n\nclass Loading extends React.Component {\n state = {\n show: false,\n }\n\n componentDidMount() {\n this.timer = setTimeout(() => {\n this.setState({ show: true });\n }, 500);\n }\n\n componentWillUnmount() {\n clearTimeout(this.timer);\n }\n\n render() {\n const {\n classes, loadingMessage, loading, translate, className, inline, delayed,\n } = this.props;\n\n if (!loading || (delayed && !this.state.show)) {\n return null;\n }\n\n return (\n \n
\n \n \n {loadingMessage || translate('common.loading', null, { onMissingTranslation: () => 'loading' })}\n \n )}\n
\n \n \n {translate('common.pageNotFound')}\n \n
\n );\n }\n}\n\nPageNotFound.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n};\n\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n});\n\nexport default connect(mapStateToProps)(withStyles(styles)(PageNotFound));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\n\nclass PollData extends React.Component {\n componentDidMount() {\n if (this.props.callImediately) {\n if (this.props.initialdataCall) {\n this.props.initialdataCall();\n } else {\n this.props.dataCall();\n }\n }\n\n this.pollState();\n }\n\n componentDidUpdate() {\n this.pollState();\n }\n\n componentWillUnmount() {\n this.clearTimeout();\n }\n\n clearTimeout = () => {\n if (this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n }\n }\n\n pollState = () => {\n if (this.props.pollCondition && !this.timer) {\n this.timer = setTimeout(() => {\n this.clearTimeout();\n if (this.props.pollCondition) {\n this.props.dataCall();\n this.pollState();\n }\n }, this.props.pollingIntervalInMinutes * 60 * 1000);\n }\n }\n\n render() {\n return null;\n }\n}\n\nPollData.propTypes = {\n initialdataCall: PropTypes.func,\n dataCall: PropTypes.func.isRequired,\n pollCondition: PropTypes.bool,\n callImediately: PropTypes.bool,\n pollingIntervalInMinutes: PropTypes.number.isRequired,\n};\n\nPollData.defaultProps = {\n callImediately: true,\n initialdataCall: null,\n pollCondition: true,\n};\n\nexport default PollData;\n","import * as React from 'react';\nimport { Route, Redirect } from 'react-router-dom';\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\n\nimport Auth, { authTypes } from '../Auth';\n\nconst PrivateRoute = ({\n component: Component, loginUrl, selectOrgUrl, requiredAuthType, ...rest\n}) => (\n \n {question.type !== formAnswerTypes.action && question.type !== formAnswerTypes.switch && (\n
\n );\n};\n\nFormQuestion.propTypes = {\n handleResponseUpdate: PropTypes.func.isRequired,\n question: PropTypes.object.isRequired,\n response: PropTypes.object,\n showRequired: PropTypes.bool,\n disabled: PropTypes.bool,\n contentState: PropTypes.string,\n ScaleResponseProps: PropTypes.object,\n showScores: PropTypes.bool,\n readOnly: PropTypes.bool,\n elementSettings: PropTypes.object,\n};\n\nFormQuestion.defaultProps = {\n response: null,\n showRequired: false,\n disabled: false,\n contentState: null,\n ScaleResponseProps: null,\n showScores: false,\n readOnly: false,\n elementSettings: null,\n};\n\nexport default FormQuestion;\n","\"use strict\";\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar react_localize_redux_1 = require(\"react-localize-redux\");\nvar core_1 = require(\"@material-ui/core\");\nvar FormQuestion_1 = require(\"./FormQuestion\");\nvar elementStateUtils_1 = require(\"../../elementStateUtils\");\nvar constants_1 = require(\"../../constants\");\nvar styles = function (theme) { return ({\n validationText: {\n marginTop: theme.spacing(4),\n textAlign: 'center',\n width: '100%',\n outline: 'none',\n },\n}); };\nvar FormValidation = /** @class */ (function (_super) {\n __extends(FormValidation, _super);\n function FormValidation() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.state = {\n missingRequiredQuestions: false,\n changeId: null,\n };\n _this.validationErrorRef = React.createRef();\n _this.validate = function () {\n var _a;\n var _b = _this.props, task = _b.task, responses = _b.responses, getProgramItem = _b.getProgramItem, getSpecificTaskResponses = _b.getSpecificTaskResponses, changeId = _b.changeId;\n if (!((_a = task.contentElements) === null || _a === void 0 ? void 0 : _a.length)) {\n return true;\n }\n var missingRequiredQuestions = task.contentElements.map(function (e) {\n var _a;\n var contentState = (0, elementStateUtils_1.getElementConditionState)(e, getSpecificTaskResponses, task, getProgramItem);\n if ((contentState === null || contentState === void 0 ? void 0 : contentState.state) === constants_1.elementConditionStates.hidden) {\n return false;\n }\n return (_a = e.questions) === null || _a === void 0 ? void 0 : _a.reduce(function (prev, curr) {\n var _a;\n return prev\n || (curr.required && (!responses || !(0, FormQuestion_1.hasValueForQuestionType)(curr.type, (_a = responses[curr.id]) === null || _a === void 0 ? void 0 : _a.response)));\n }, false);\n }).some(function (d) { return d; });\n _this.setState({ missingRequiredQuestions: missingRequiredQuestions, changeId: changeId });\n return !missingRequiredQuestions;\n };\n return _this;\n }\n FormValidation.prototype.componentDidUpdate = function (prevProps, prevState) {\n // Focus on validation error when appearing\n if (!prevState.missingRequiredQuestions && this.state.missingRequiredQuestions) {\n if (this.validationErrorRef.current)\n this.validationErrorRef.current.focus();\n }\n if (prevState.missingRequiredQuestions && this.props.changeId && prevState.changeId !== this.props.changeId) {\n this.validate();\n }\n };\n FormValidation.prototype.render = function () {\n var _a = this.props, classes = _a.classes, task = _a.task, showValidations = _a.showValidations;\n if (!task) {\n return null;\n }\n if (!this.state.missingRequiredQuestions || !showValidations) {\n return null;\n }\n return (React.createElement(core_1.Typography, { color: \"error\", tabIndex: -1, ref: this.validationErrorRef, className: classes.validationText },\n React.createElement(react_localize_redux_1.Translate, { id: \"taskContent.pleaseAnswerRequiredQuestions\" })));\n };\n return FormValidation;\n}(React.Component));\n// @ts-ignore // Typescript doesn't recognise defaultProps for Class Components??\nFormValidation.defaultProps = {\n showValidations: false,\n responses: null,\n changeId: null,\n ref: null,\n};\nexports.default = (0, core_1.withStyles)(styles)(FormValidation);\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classnames from 'classnames';\nimport { Translate } from 'react-localize-redux';\n\nimport { Link } from 'react-router-dom';\nimport OpenInNewWindowIcon from '@material-ui/icons/OpenInNew';\nimport { Typography } from '@material-ui/core';\n\nimport { linkTypes } from '../../constants';\nimport apiUrls from '../../apiUrls';\nimport Image from '../Image';\n\nconst styles = theme => ({\n image: {\n width: '100%',\n },\n audio: {\n width: '100%',\n },\n link: {\n display: 'inline',\n borderBottom: `1px solid ${theme.palette.grey[200]}`,\n },\n fileLink: {\n },\n internalLink: {\n },\n externalLink: {\n\n },\n icon: {\n marginLeft: theme.spacing(1),\n },\n missingContent: {\n background: theme.palette.grey[100],\n padding: theme.spacing(2),\n },\n});\n\nclass LinkElement extends React.Component {\n state = {\n paddingBottom: null,\n };\n\n componentDidMount() {\n window.addEventListener('message', this.handlePostMessage);\n }\n\n componentWillUnmount() {\n window.removeEventListener('message', this.handlePostMessage);\n }\n\n handlePostMessage = (event) => {\n if (event.origin === apiUrls.baseUrl && event.data?.source === 'yw@videoPlayer') {\n const aspectRatio = event.data.height / event.data.width;\n if (aspectRatio > 0) {\n this.setState({ paddingBottom: `${aspectRatio * 100}%` });\n }\n }\n }\n\n render() {\n const {\n classes, link, className, getLinkUrl, autoplayVideos,\n } = this.props;\n\n if (!link || !link.url) {\n return null;\n }\n\n const autoplay = autoplayVideos ? '&autoplaymuted=true' : '';\n\n return (\n \n
\n )}\n\n {question.type === formAnswerTypes.freetext && (\n \n \n \n
\n )}\n\n \n {getLinkUrl && (link.linkType === linkTypes.task || link.linkType === linkTypes.module || link.linkType === linkTypes.internal) && (\n \n \n {link.name }\n \n \n )}\n\n {link.linkType === linkTypes.image && (\n \n {link.name || ( \n \n )}\n\n {link.linkType === linkTypes.url && (\n \n \n {link.name || ( \n
\n );\n }\n}\n\nLinkElement.propTypes = {\n classes: PropTypes.object.isRequired,\n link: PropTypes.object,\n className: PropTypes.string,\n getLinkUrl: PropTypes.func,\n autoplayVideos: PropTypes.bool,\n};\n\nLinkElement.defaultProps = {\n link: null,\n className: null,\n getLinkUrl: null,\n autoplayVideos: false,\n};\n\nexport default withStyles(styles)(LinkElement);\n","\"use strict\";\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar core_1 = require(\"@material-ui/core\");\nvar elementStateUtils_1 = require(\"../../elementStateUtils\");\n// eslint-disable-next-line import/no-cycle -- ok because ReadMore can display content via TaskContent\nvar TaskElement_1 = __importDefault(require(\"./TaskElement\"));\nvar FormValidation_1 = __importDefault(require(\"./FormValidation\"));\nvar styles = function (theme) { return (0, core_1.createStyles)({\n validationText: {\n marginTop: theme.spacing(4),\n textAlign: 'center',\n width: '100%',\n outline: 'none',\n },\n}); };\nvar TaskContent = /** @class */ (function (_super) {\n __extends(TaskContent, _super);\n function TaskContent() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.state = {\n showValidationErrors: false,\n };\n _this.validationRef = React.createRef();\n _this.validate = function () {\n var _a;\n _this.setState({ showValidationErrors: true });\n return (_a = _this.validationRef.current) === null || _a === void 0 ? void 0 : _a.validate();\n };\n _this.validateAndSave = function (callback, submit) {\n if (_this.validate()) {\n if (_this.props.onSaveChanges) {\n _this.props.onSaveChanges(callback, submit);\n }\n }\n };\n _this.submitForm = function (callback) {\n if (_this.validate()) {\n if (_this.props.onSaveChanges) {\n _this.props.onSaveChanges(function () {\n _this.setState({ showValidationErrors: false });\n if (callback) {\n callback();\n }\n }, true);\n }\n }\n };\n _this.saveWithoutValidation = function (callback) {\n if (_this.props.onSaveChanges) {\n _this.props.onSaveChanges(callback);\n }\n };\n return _this;\n }\n TaskContent.prototype.render = function () {\n var _this = this;\n var _a = this.props, className = _a.className, classes = _a.classes, task = _a.task, taskResponses = _a.taskResponses, noContent = _a.noContent, TaskFormProps = _a.TaskFormProps, LinkElementProps = _a.LinkElementProps, showTitle = _a.showTitle, getProgramItem = _a.getProgramItem, getSpecificTaskResponses = _a.getSpecificTaskResponses, onResponse = _a.onResponse, TaskElementProps = _a.TaskElementProps, changeId = _a.changeId;\n if (!task) {\n return null;\n }\n var taskElements = task.contentElements || [];\n (0, elementStateUtils_1.updateAllOthersAreHiddenProperties)(task, getSpecificTaskResponses, getProgramItem);\n return (React.createElement(\"div\", { className: className },\n React.createElement(React.Fragment, null,\n showTitle && (React.createElement(core_1.Typography, { variant: \"h4\", className: classes.title }, task.name)),\n taskElements.length === 0\n ? noContent\n : taskElements.map(function (item, index) { return (React.createElement(TaskElement_1.default, __assign({ key: \"\".concat(task.elementId, \"-\").concat(task.id, \"-\").concat(item.id), task: task, getProgramItem: getProgramItem, getSpecificTaskResponses: getSpecificTaskResponses, element: item, taskResponses: taskResponses, TaskFormProps: TaskFormProps, LinkElementProps: LinkElementProps, elementIndex: index, onResponse: onResponse, showValidationErrors: _this.state.showValidationErrors }, TaskElementProps))); })),\n React.createElement(FormValidation_1.default, { ref: this.validationRef, task: task, responses: taskResponses, changeId: changeId, showValidations: this.state.showValidationErrors, getProgramItem: getProgramItem, getSpecificTaskResponses: getSpecificTaskResponses })));\n };\n return TaskContent;\n}(React.Component));\n// @ts-ignore // Typescript doesn't recognise defaultProps for Class Components??\nTaskContent.defaultProps = {\n className: null,\n noContent: null,\n taskResponses: null,\n TaskFormProps: null,\n LinkElementProps: null,\n showTitle: false,\n elementPreContent: null,\n task: null,\n TaskElementProps: null,\n changeId: null,\n onSaveChanges: null,\n ref: null,\n};\nexports.default = (0, core_1.withStyles)(styles)(TaskContent);\n","\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar prop_types_1 = __importDefault(require(\"prop-types\"));\nvar TaskContent_1 = __importDefault(require(\"./TaskContent\"));\nvar TaskContentDisplay = function (_a) {\n var task = _a.task, _b = _a.elementResponses, elementResponses = _b === void 0 ? null : _b, rest = __rest(_a, [\"task\", \"elementResponses\"]);\n return (task\n ? (React.createElement(TaskContent_1.default, __assign({ task: task, getProgramItem: function () { return null; }, getSpecificTaskResponses: function () { return null; }, taskResponses: elementResponses, TaskFormProps: { readOnly: true }, onResponse: function () { }, onSaveChanges: function () { } }, rest))) : null);\n};\nTaskContentDisplay.propTypes = {\n task: prop_types_1.default.object,\n elementResponses: prop_types_1.default.object,\n};\nTaskContentDisplay.defaultProps = {\n task: null,\n elementResponses: null,\n};\nexports.default = TaskContentDisplay;\n","\"use strict\";\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar React = __importStar(require(\"react\"));\nvar styles_1 = require(\"@material-ui/core/styles\");\nvar classnames_1 = __importDefault(require(\"classnames\"));\nvar core_1 = require(\"@material-ui/core\");\nvar HtmlContent_1 = __importDefault(require(\"../HtmlContent\"));\nvar constants_1 = require(\"../../constants\");\n// eslint-disable-next-line import/no-cycle -- ok because ReadMore can display content via TaskContent\nvar taskElementContent_1 = __importStar(require(\"./taskElementContent\"));\nvar LinkElement_1 = __importDefault(require(\"./LinkElement\"));\nvar elementStateUtils_1 = require(\"../../elementStateUtils\");\nvar utils_1 = require(\"./utils\");\nvar stringUtils_1 = require(\"../../stringUtils\");\nvar styles = function (theme) {\n var _a, _b, _c;\n return (0, core_1.createStyles)({\n root: (_a = {\n position: 'relative',\n clear: 'both',\n width: '100%',\n flex: '0 0 100%',\n '&+&': {\n marginTop: theme.spacing(8),\n }\n },\n _a[theme.breakpoints.down('sm')] = {\n wordBreak: 'break-word',\n '&+&': {\n marginTop: theme.spacing(6),\n },\n },\n _a['&$selected'] = {\n border: \"2px solid \".concat(theme.palette.primary.main),\n padding: theme.spacing(1),\n },\n _a[\"&.et_\".concat(constants_1.defaultContentElementTypes.box)] = {\n marginTop: theme.spacing(4),\n background: theme.youwell.colors.secondaryBackground,\n color: theme.palette.grey[900],\n boxShadow: theme.shadows[3],\n borderRadius: theme.youwell.shapes.borderRadiusFlatter,\n padding: theme.spacing(2),\n alignSelf: 'flex-start',\n '$root+&': (_b = {\n marginTop: theme.spacing(8)\n },\n _b[theme.breakpoints.down('sm')] = {\n marginTop: theme.spacing(6),\n },\n _b),\n '& figure.table': {\n margin: '1em -16px',\n width: 'calc(100% + 32px)',\n },\n '& .htmlcontent a': {\n color: 'var(--primary-color)',\n },\n },\n _a[\"&.et_\".concat(constants_1.defaultContentElementTypes.card)] = (_c = {\n flex: '0 0 auto',\n width: '31%',\n padding: theme.spacing(1),\n background: theme.youwell.colors.secondaryBackground,\n borderRadius: theme.youwell.shapes.borderRadiusFlatter\n },\n _c[theme.breakpoints.down('xs')] = {\n flex: '0 0 100%',\n },\n _c),\n _a),\n hoveredElement: {\n visibility: 'hidden',\n '$root:hover &': {\n visibility: 'visible',\n },\n },\n header: {\n display: 'flex',\n alignItems: 'center',\n marginBottom: theme.spacing(2),\n },\n title: {\n fontSize: '1.25em',\n flex: '1 1 auto',\n },\n content: {\n '&+&': {\n marginTop: theme.spacing(4),\n },\n '&:empty': {\n display: 'none',\n },\n },\n htmlContent: {},\n linkContent: {},\n accepted: {},\n rejected: {},\n selected: {},\n });\n};\nvar TaskElement = /** @class */ (function (_super) {\n __extends(TaskElement, _super);\n function TaskElement() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.scrolled = false;\n _this.checkScroll = function () {\n var _a;\n if (((_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.hash) && _this.props.element && !_this.scrolled) {\n if (\"\".concat(_this.props.element.id) === window.location.hash.substring(1)) {\n var el_1 = document.getElementById(\"\".concat(constants_1.contentElemenIdPrefix).concat(window.location.hash.substring(1)));\n if (el_1) {\n _this.scrolled = true;\n setTimeout(function () {\n var yOffset = -90; // (isDesktop ? -headerHeight : 0) - 10;\n var y = el_1.getBoundingClientRect().top + window.scrollY + yOffset;\n if (window.scrollTo) {\n window.scrollTo({ top: y });\n }\n else {\n document.documentElement.scrollTop = y;\n }\n // el.scrollIntoView();\n // el.scrollIntoView({ behavior: 'smooth' });\n }, 200);\n }\n }\n }\n };\n return _this;\n }\n TaskElement.prototype.componentDidMount = function () {\n this.checkScroll();\n };\n TaskElement.prototype.componentDidUpdate = function () {\n this.checkScroll();\n };\n TaskElement.prototype.render = function () {\n var _a;\n var _b, _c;\n var _d = this.props, classes = _d.classes, task = _d.task, taskResponses = _d.taskResponses, element = _d.element, TaskFormProps = _d.TaskFormProps, customElementHandler = _d.customElementHandler, getSpecificTaskResponses = _d.getSpecificTaskResponses, showValidationErrors = _d.showValidationErrors, className = _d.className, onResponse = _d.onResponse, LinkElementProps = _d.LinkElementProps, getProgramItem = _d.getProgramItem, noHiddenStates = _d.noHiddenStates, HoveredElement = _d.HoveredElement, selectedElementId = _d.selectedElementId, addNoContextForImages = _d.addNoContextForImages, elementPreContent = _d.elementPreContent, elementIndex = _d.elementIndex;\n var contentStateContidion = (0, elementStateUtils_1.getElementConditionState)(element, getSpecificTaskResponses, task, getProgramItem);\n var contentState = contentStateContidion === null || contentStateContidion === void 0 ? void 0 : contentStateContidion.state;\n if (contentState === constants_1.elementConditionStates.hidden && !noHiddenStates) {\n return React.createElement(\"div\", { className: classes.hiddenByState, \"data-csid\": contentStateContidion === null || contentStateContidion === void 0 ? void 0 : contentStateContidion.id });\n }\n var htmlContentPosition = (0, taskElementContent_1.getHtmlContentPosition)(element.elementType, (_b = element.settings) === null || _b === void 0 ? void 0 : _b.contentPosition);\n var showContent = htmlContentPosition > -1;\n // Set as exitNode for early exit from module (used in i.e. public screening programs)\n window.__youwellExitNode = (0, stringUtils_1.parseBoolString)((_c = element.settings) === null || _c === void 0 ? void 0 : _c.exitNode);\n return (React.createElement(React.Fragment, null,\n elementPreContent && elementPreContent(element, elementIndex),\n React.createElement(\"div\", { id: \"\".concat(constants_1.contentElemenIdPrefix).concat(element.id), \"data-csid\": contentStateContidion === null || contentStateContidion === void 0 ? void 0 : contentStateContidion.id, className: (0, classnames_1.default)(classes.root, className, (_a = {},\n _a[classes.accepted] = contentState === constants_1.elementConditionStates.accepted,\n _a[classes.rejected] = contentState === constants_1.elementConditionStates.rejected,\n _a[classes.selected] = selectedElementId && element.id === selectedElementId,\n _a[\"et_\".concat(element.elementType)] = element.elementType && element.elementType !== constants_1.defaultContentElementTypes.default,\n _a)), style: (0, utils_1.getStylesFromSettings)((element === null || element === void 0 ? void 0 : element.settings) ? element.settings : {}) },\n HoveredElement && (React.createElement(HoveredElement, { taskId: task.id, elementId: element.id, className: classes.hoveredElement })),\n showContent && element.title && (React.createElement(\"div\", { className: classes.header },\n React.createElement(core_1.Typography, { variant: \"subtitle2\", className: classes.title }, element.title))),\n htmlContentPosition === 0 && (React.createElement(HtmlContent_1.default, { html: element.htmlContent, className: (0, classnames_1.default)(classes.content, classes.htmlContent), addNoContextForImages: addNoContextForImages })),\n showContent && (React.createElement(LinkElement_1.default, __assign({ link: element.link, className: (0, classnames_1.default)(classes.content, classes.linkContent) }, LinkElementProps))),\n htmlContentPosition === 1 && (React.createElement(HtmlContent_1.default, { html: element.htmlContent, className: (0, classnames_1.default)(classes.content, classes.htmlContent), addNoContextForImages: addNoContextForImages })),\n React.createElement(taskElementContent_1.default, { className: classes.content, task: task, element: element, getProgramItem: getProgramItem, getSpecificTaskResponses: getSpecificTaskResponses, contentState: contentState, customElementHandler: customElementHandler, taskResponses: taskResponses, showValidationErrors: showValidationErrors, onResponse: onResponse, TaskFormProps: TaskFormProps }),\n htmlContentPosition === 2 && (React.createElement(HtmlContent_1.default, { html: element.htmlContent, className: (0, classnames_1.default)(classes.content, classes.htmlContent), addNoContextForImages: addNoContextForImages })))));\n };\n return TaskElement;\n}(React.Component));\n// @ts-ignore // Typescript doesn't recognise defaultProps for Class Components??\nTaskElement.defaultProps = {\n TaskFormProps: null,\n customElementHandler: null,\n LinkElementProps: null,\n taskResponses: null,\n noHiddenStates: false,\n HoveredElement: null,\n selectedElementId: null,\n addNoContextForImages: false,\n elementPreContent: null,\n showValidationErrors: false,\n className: null,\n};\nexports.default = (0, styles_1.withStyles)(styles)(TaskElement);\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\n\nimport FormQuestion from './FormQuestion';\nimport { customContentElementTypes, questionContentElementTypes } from '../../constants';\nimport QuestionnaireTable from './formResponseTypes/customTypes/QuestionnaireTable';\nimport BullsEyeQuestions from './formResponseTypes/customTypes/BullsEyeQuestions';\nimport BubbleChoiceQuestions from './formResponseTypes/customTypes/BubbleChoiceQuestions';\nimport QuizResponse from './formResponseTypes/customTypes/QuizResponse';\nimport Quiz from './formResponseTypes/customTypes/Quiz';\nimport RouteSelection from './formResponseTypes/customTypes/RouteSelection';\nimport CollapsedTable from './formResponseTypes/customTypes/CollapsedTable';\n\nclass TaskForm extends React.Component {\n handleResponseUpdate = question => (responseName, value) => {\n if (this.props.readOnly) {\n return;\n }\n\n this.props.onResponse([{ questionId: question.id, questionKey: question.key, [responseName]: value }]);\n }\n\n render() {\n const {\n element, disabled, readOnly,\n FormQuestionProps, QuestionnaireTableProps, contentState, showValidationErrors,\n taskResponses, getProgramItem, getSpecificTaskResponses, taskId, small,\n } = this.props;\n\n const questions = element.questions || [];\n const responses = taskResponses || {};\n const elementSettings = element.settings || {};\n\n switch (element.elementType) {\n case questionContentElementTypes.bullseye:\n return (\n \n
\n )}\n\n {link.linkType === linkTypes.vimeo && (\n \n
\n )}\n\n {link.linkType === linkTypes.youtube && (\n \n
\n )}\n \n \n
\n );\n};\n\nActionButton.propTypes = {\n handleResponseUpdate: PropTypes.func,\n question: PropTypes.object.isRequired,\n scaleResponse: PropTypes.number,\n disabled: PropTypes.bool,\n readOnly: PropTypes.bool,\n contentState: PropTypes.string,\n};\n\nActionButton.defaultProps = {\n disabled: false,\n readOnly: false,\n handleResponseUpdate: null,\n scaleResponse: null,\n contentState: null,\n};\n\nexport default ActionButton;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\n\nimport {\n TextField, Typography, makeStyles,\n} from '@material-ui/core';\n\nimport {\n KeyboardTimePicker, KeyboardDateTimePicker, KeyboardDatePicker,\n} from '@material-ui/pickers';\nimport { TimeIcon, CalendarIcon } from '../../../../common/icons';\nimport { validateEmail } from '../../../validationUtils';\nimport { freetextInputTypes } from '../../../constants';\nimport { getLocalDate, isDateObject, pad2 } from '../../../dateUtils';\nimport { TextEditor } from '../../../../common/components';\nimport HtmlContent from '../../HtmlContent';\n\nconst useStyles = makeStyles(theme => ({\n inputResponse: {\n border: theme.youwell.borders.inputBox,\n backgroundColor: theme.youwell.colors.inputBackground,\n padding: theme.spacing(2),\n },\n disabledReadonlyInput: {\n color: theme.palette.text.primary,\n },\n htmlContent: {\n border: theme.youwell.borders.dim,\n padding: theme.spacing(1),\n },\n}));\n\nexport const getInputType = (inputType) => {\n switch (inputType) {\n case freetextInputTypes.email:\n return 'email';\n case freetextInputTypes.phone:\n return 'tel';\n case freetextInputTypes.number:\n return 'number';\n case freetextInputTypes.date:\n return 'date';\n case freetextInputTypes.dateAndTime:\n return 'datetime-local';\n case freetextInputTypes.time:\n return 'time';\n case freetextInputTypes.default:\n case freetextInputTypes.singleLineText:\n default:\n return 'text';\n }\n};\n\nconst validators = {\n [freetextInputTypes.email]: validateEmail,\n};\n\nconst FreetextResponse = ({\n freetextResponse, handleResponseUpdate, freetextConfig, disabled, readOnly, onCompletedValid,\n}) => {\n const classes = useStyles();\n const translate = useSelector(state => getTranslate(state.localize));\n const [validationError, setValidationError] = React.useState(null);\n const [freetextStateValue, setFreetextStateValue] = React.useState(null);\n const [showValidation, setShowValidation] = React.useState(false);\n const updateAsyncTimer = React.useRef();\n\n const freetextType = (freetextConfig && freetextConfig.inputType) || freetextInputTypes.default;\n\n const validate = (value) => {\n if (validators[freetextType]) {\n const validation = validators[freetextType](value);\n setValidationError(validation.valid ? null : validation.errorTextKey);\n return validation.valid;\n }\n return true;\n };\n\n const handleChange = (event) => {\n if (readOnly) {\n return;\n }\n const value = event.target.value;\n setFreetextStateValue(value);\n\n if (showValidation) {\n validate(value);\n }\n clearTimeout(updateAsyncTimer.current);\n updateAsyncTimer.current = setTimeout(() => {\n handleResponseUpdate(value);\n }, 200);\n };\n\n const handleDateTimeChange = (date) => {\n if (readOnly) {\n return;\n }\n\n setFreetextStateValue(date);\n\n if (showValidation) {\n validate(date);\n }\n if (date === null || isDateObject(date)) {\n let valueString;\n if (date === null) {\n valueString = null;\n } else {\n switch (freetextType) {\n case freetextInputTypes.time:\n valueString = `${pad2(date.getHours())}:${pad2(date.getMinutes())}`;\n break;\n case freetextInputTypes.dateAndTime:\n valueString = `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())} ${pad2(date.getHours())}:${pad2(date.getMinutes())}`;\n break;\n case freetextInputTypes.date:\n default:\n valueString = `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;\n break;\n }\n }\n\n handleResponseUpdate(valueString);\n }\n };\n\n React.useEffect(() => {\n if (readOnly) {\n // reset text if switching from editing to readonly\n setFreetextStateValue(null);\n }\n }, [readOnly]);\n\n React.useEffect(() => {\n if (!freetextResponse) {\n // reset text if response is cleared from \"outside\" of component\n setFreetextStateValue(null);\n }\n }, [freetextResponse]);\n\n const value = freetextStateValue !== null ? freetextStateValue : freetextResponse; // comparing with null to keep empty ('') value\n\n const onBlur = () => {\n if (value) {\n setShowValidation(true);\n const valid = validate(value);\n if (valid && onCompletedValid) {\n onCompletedValid();\n }\n }\n };\n\n const sharedPickerProps = {\n className: classes.inputResponse,\n onChange: handleDateTimeChange,\n fullWidth: true,\n autoOk: true,\n clearable: true,\n disableToolbar: true,\n ampm: false,\n minutesStep: 5,\n disabled,\n clearLabel: translate('clear'),\n cancelLabel: translate('cancel'),\n okLabel: translate('ok'),\n invalidDateMessage: translate('time.invalidFormat'),\n };\n\n switch (freetextType) {\n case freetextInputTypes.date:\n return (\n \n \n {question.answers?.map(item => (\n
\n );\n};\n\nMultipleChoice.propTypes = {\n handleResponseUpdate: PropTypes.func,\n question: PropTypes.object.isRequired,\n choiceConfig: PropTypes.object,\n selectedChoices: PropTypes.array,\n disabled: PropTypes.bool,\n readOnly: PropTypes.bool,\n showScores: PropTypes.bool,\n onCompletedValid: PropTypes.func,\n};\n\nMultipleChoice.defaultProps = {\n choiceConfig: null,\n selectedChoices: null,\n disabled: false,\n readOnly: false,\n handleResponseUpdate: null,\n showScores: false,\n onCompletedValid: null,\n};\n\nexport default MultipleChoice;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classnames from 'classnames';\n\nimport {\n Typography, Button, Slider,\n} from '@material-ui/core';\n\nimport { hasValue } from '../../../objectUtils';\nimport { with1dArrowNavigation } from '../../accessibility/ArrowNavigation';\n\nconst styles = theme => ({\n root: {\n display: 'flex',\n flexDirection: 'column-reverse', // labels are positioned first but displayed last. To help for screen readers\n flexWrap: 'wrap',\n border: theme.youwell.borders.inputBox,\n backgroundColor: theme.youwell.colors.inputBackground,\n padding: theme.spacing(2),\n\n '&$vertical': {\n height: 400,\n flexDirection: 'column',\n },\n },\n vertical: {\n },\n scale: {\n width: '100%',\n padding: theme.spacing(3, 0, 2),\n\n '$vertical &': {\n width: '50%',\n height: '100%',\n },\n },\n divider: {\n flex: '1 1 auto',\n margin: theme.spacing(1),\n borderBottom: theme.youwell.borders.normal,\n\n [theme.breakpoints.down(700)]: {\n margin: 4,\n },\n [theme.breakpoints.down(650)]: {\n margin: 2,\n },\n [theme.breakpoints.down(620)]: {\n margin: 0,\n },\n [theme.breakpoints.down('xs')]: {\n border: 0,\n margin: 0,\n },\n },\n dividerSmall: {\n margin: theme.spacing(0.5),\n\n [theme.breakpoints.down('xs')]: {\n margin: 0,\n },\n },\n noLine: {\n borderBottom: 'none',\n },\n step: {\n width: '100%',\n minWidth: 0,\n maxWidth: 64,\n wordBreak: 'normal', // override setting from TaskElement\n\n [theme.breakpoints.down('xs')]: {\n maxWidth: 48,\n },\n },\n buttons: {\n width: '100%',\n padding: theme.spacing(3, 0, 2),\n display: 'flex',\n alignItems: 'center',\n\n '$vertical &': {\n width: '50%',\n height: '100%',\n },\n },\n smallButtons: {\n },\n scaleLabels: {\n width: '100%',\n display: 'flex',\n justifyContent: 'space-between',\n\n '$vertical &': {\n padding: theme.spacing(1, 0),\n textAlign: 'right',\n width: '50%',\n flexDirection: 'column-reverse',\n alignItems: 'flex-end',\n height: '100%',\n },\n },\n label: {\n flex: '1 1 30%',\n\n '$vertical &': {\n flex: '0 0 auto',\n },\n },\n lastLabel: {\n marginLeft: theme.spacing(1),\n textAlign: 'right',\n },\n slider: {\n margin: theme.spacing(0, 1, 2),\n width: 'calc(100% - 16px)',\n },\n showThumb: {\n display: 'block',\n },\n hideThumb: {\n display: 'none',\n },\n});\n\nclass ScaleResponse extends React.Component {\n state = {\n sliderValue: undefined,\n }\n\n handleChange = value => () => {\n if (this.props.readOnly) return;\n\n this.props.handleResponseUpdate(value);\n }\n\n handleSliderChange = (event, value) => {\n if (this.props.readOnly) return;\n\n this.setState({ sliderValue: value }, () => {\n if (this.updateTimeout) {\n clearTimeout(this.updateTimeout);\n }\n this.updateTimeout = setTimeout(this.updateSliderValue, 500);\n });\n };\n\n updateSliderValue = () => {\n this.props.handleResponseUpdate(this.state.sliderValue);\n }\n\n renderLabels = (scaleConfig, classes) => {\n if (scaleConfig.minLabel && scaleConfig.maxLabel) {\n return (\n \n \n {choiceConfig.freetextChoiceLabel || translate('taskContent.freetextChoiceLabel')}\n \n
\n )}\n />\n )}\n \n \n \n {scaleConfig.minLabel}\n \n \n {scaleConfig.midLabel}\n \n \n {scaleConfig.maxLabel}\n \n
\n );\n }\n return null;\n }\n\n render() {\n const {\n classes, scaleConfig, response, disabled, navigation,\n } = this.props;\n\n const range = Math.abs(scaleConfig.max - scaleConfig.min);\n\n if (range >= 10) {\n const sliderValue = hasValue(this.state.sliderValue) ? this.state.sliderValue : response;\n const rangeStep = Math.ceil(range / 5);\n const marks = [];\n marks.push({ value: scaleConfig.min, label: scaleConfig.min });\n for (let value = rangeStep; value < scaleConfig.max; value += rangeStep) {\n marks.push({ value, label: value });\n }\n marks.push({ value: scaleConfig.max, label: scaleConfig.max });\n return (\n \n {this.renderLabels(scaleConfig, classes)}\n\n
\n );\n }\n\n const steps = [];\n for (let i = scaleConfig.min; i <= scaleConfig.max; i += scaleConfig.step) {\n steps.push(i);\n }\n\n const smallButtons = steps.length > 5;\n\n return (\n \n
\n \n {this.renderLabels(scaleConfig, classes)}\n\n
\n );\n }\n}\n\nScaleResponse.propTypes = {\n navigation: PropTypes.object.isRequired,\n classes: PropTypes.object.isRequired,\n handleResponseUpdate: PropTypes.func.isRequired,\n scaleConfig: PropTypes.object.isRequired,\n response: PropTypes.number,\n disabled: PropTypes.bool,\n readOnly: PropTypes.bool,\n};\n\nScaleResponse.defaultProps = {\n response: null,\n disabled: false,\n readOnly: false,\n};\n\nexport default withStyles(styles)(with1dArrowNavigation(ScaleResponse));\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\n\nimport {\n FormControlLabel, RadioGroup, Radio, Button, Input, Typography, makeStyles,\n} from '@material-ui/core';\nimport { useSelector } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\n\nconst useStyles = makeStyles(theme => ({\n choiceResponse: {\n border: theme.youwell.borders.inputBox,\n backgroundColor: theme.youwell.colors.inputBackground,\n padding: theme.spacing(2),\n },\n horizontal: {\n },\n radioGroup: {\n flexDirection: 'column',\n '&$horizontal': {\n flexDirection: 'row',\n },\n },\n formControlRoot: {\n '$readOnly &': {\n cursor: 'text',\n },\n },\n formControlLabel: {\n margin: theme.spacing(1, 0),\n flex: '1 1 auto',\n\n '$correct &': {\n color: theme.youwell.colors.green,\n },\n '$inCorrect &': {\n color: theme.youwell.colors.red,\n },\n },\n choiceButtonContainer: {\n border: theme.youwell.borders.inputBox,\n backgroundColor: theme.youwell.colors.inputBackground,\n padding: theme.spacing(2),\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n\n '&$horizontal': {\n flexDirection: 'row',\n },\n },\n choiceButton: {\n margin: theme.spacing(1, 2),\n },\n choiceFreetextInput: {\n border: `1px solid ${theme.palette.grey[200]}`,\n padding: theme.spacing(0, 1),\n },\n radio: {\n color: theme.palette.primary.main,\n '$correct &': {\n color: theme.youwell.colors.green,\n },\n '$inCorrect &': {\n color: theme.youwell.colors.red,\n },\n '$readOnly &': {\n cursor: 'default',\n },\n },\n correct: {\n color: theme.youwell.colors.green,\n },\n inCorrect: {\n color: theme.youwell.colors.red,\n },\n freetextLabel: {\n display: 'flex',\n alignItems: 'center',\n },\n freetextLabelText: {\n marginRight: theme.spacing(1),\n minWidth: 80,\n },\n readOnly: {\n },\n}));\n\nconst SingleChoice = ({\n choiceConfig, selectedChoice, handleResponseUpdate, showScores, question, disabled, onCompletedValid, readOnly,\n}) => {\n const classes = useStyles();\n const isDisabled = disabled || showScores;\n const translate = useSelector(state => getTranslate(state.localize));\n\n const handleSingleSelectChange = answers => (event) => {\n const id = Number(event.target.value);\n const answer = answers.find(d => d.id === id) || { id, value: '' };\n\n handleResponseUpdate([answer]);\n if (onCompletedValid) onCompletedValid();\n };\n\n const handleSelectFreetextChange = freetextId => (event) => {\n handleResponseUpdate([{ id: Number(freetextId), score: 0, value: event.target.value }]);\n };\n\n const handleClickResponse = value => () => {\n handleResponseUpdate([value]);\n if (onCompletedValid) onCompletedValid();\n };\n\n const onFreetextBlur = () => {\n if (selectedChoice?.value) {\n if (onCompletedValid) onCompletedValid();\n }\n };\n\n const getScoreClass = (item) => {\n if (!showScores) {\n return null;\n }\n\n if (item.score > 0) {\n return classes.correct;\n }\n if (selectedChoice?.id === item.id) {\n return classes.inCorrect;\n }\n return null;\n };\n\n return (\n <>\n {question.type === 'ActionChoice' || choiceConfig?.showAsButtons ? (\n \n {steps.map((step, index) => (\n \n {index > 0 && }\n \n {step}\n \n \n ))}\n
\n \n {question.answers?.map(answer => (\n \n {answer.value}\n \n ))}\n
\n ) : (\n \n \n {question.answers?.map(item => (\n
\n )}\n \n );\n};\n\nSingleChoice.propTypes = {\n handleResponseUpdate: PropTypes.func,\n question: PropTypes.object.isRequired,\n choiceConfig: PropTypes.object,\n selectedChoice: PropTypes.object,\n disabled: PropTypes.bool,\n showScores: PropTypes.bool,\n onCompletedValid: PropTypes.func,\n readOnly: PropTypes.bool,\n};\n\nSingleChoice.defaultProps = {\n choiceConfig: null,\n selectedChoice: null,\n disabled: false,\n handleResponseUpdate: null,\n showScores: false,\n onCompletedValid: null,\n readOnly: false,\n};\n\nexport default SingleChoice;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport classnames from 'classnames';\n\nimport {\n Typography, Table, TableHead, TableBody, TableRow, TableCell, Input, Hidden, IconButton, TextField,\n} from '@material-ui/core';\nimport { AddIcon } from '../../../../common/icons';\nimport { hasValue } from '../../../objectUtils';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n backgroundColor: theme.youwell.colors.inputBackground,\n },\n desktopTable: {\n '&$fixedWidth': {\n overflowX: 'auto',\n paddingBottom: theme.spacing(4),\n },\n '&$fixedHeight': {\n overflowY: 'auto',\n height: 600,\n },\n },\n fixedWidth: {\n },\n fixedHeight: {\n\n },\n table: {\n tableLayout: 'fixed',\n\n '$fixedWidth &': {\n tableLayout: 'auto',\n width: 1200,\n },\n '$fixedHeight &': {\n tableLayout: 'auto',\n },\n },\n mobileTable: {\n\n },\n mobileRow: {\n marginBottom: theme.spacing(2),\n border: `1px solid ${theme.palette.grey[400]}`,\n backgroundColor: theme.palette.grey[200],\n },\n mobileRowHeader: {\n padding: theme.spacing(1),\n backgroundColor: theme.palette.primary.light,\n color: theme.palette.common.white,\n },\n mobileCell: {\n marginBottom: theme.spacing(2),\n padding: theme.spacing(1),\n },\n tableRow: {\n height: theme.spacing(4),\n },\n tableHeaderRow: {\n },\n tableHeaderCell: {\n backgroundColor: theme.youwell.colors.secondaryBackground,\n border: 0,\n borderRight: `1px solid ${theme.palette.grey[200]}`,\n fontSize: '1.1em',\n color: theme.palette.grey[900],\n padding: theme.spacing(1),\n overflowWrap: 'anywhere',\n\n '&:last-child': {\n borderRight: `1px solid ${theme.palette.grey[300]}`,\n padding: theme.spacing(0, 1),\n },\n\n '$fixedWidth &': {\n overflowWrap: 'normal',\n },\n '$fixedHeight &': {\n position: 'sticky',\n top: 0,\n zIndex: 50,\n },\n },\n rowHeaderCell: {\n backgroundColor: theme.youwell.colors.secondaryBackground,\n padding: theme.spacing(2, 1),\n },\n tableCell: {\n padding: theme.spacing(1, 1, 0, 1),\n verticalAlign: 'top',\n borderRight: `1px solid ${theme.palette.grey[300]}`,\n\n '&:first-child': {\n borderLeft: `1px solid ${theme.palette.grey[300]}`,\n },\n '&:last-child': {\n padding: theme.spacing(0, 1),\n paddingTop: theme.spacing(1),\n },\n },\n multiQuestionCell: {\n },\n multiInput: {\n marginBottom: theme.spacing(0.5),\n },\n addRowContainer: {\n display: 'flex',\n justifyContent: 'center',\n },\n addRowButton: {\n marginTop: theme.spacing(1),\n },\n disabledReadonlyInput: {\n color: theme.palette.text.primary,\n },\n}));\n\n\nconst padRow = (row, length) => row.concat(Array(length).fill('')).slice(0, length);\n\nfunction TableResponse({\n tableConfig, response, disabled, handleResponseUpdate, translate, elementSettings, readOnly,\n}) {\n const theme = useTheme();\n const classes = useStyles();\n const isMobile = useMediaQuery(theme.breakpoints.down('xs'));\n const [multiTableValues, setMultiTableValues] = React.useState({});\n const [updateIndex, setUpdateIndex] = React.useState({});\n const updateAsyncTimer = React.useRef();\n const [responseState, setResponseState] = React.useState({});\n\n const fixedNumberOfRows = tableConfig?.rowHeaders?.length;\n const fixedColumns = tableConfig?.columnHeaders?.length;\n\n const emptyColumns = () => {\n if (tableConfig?.columnHeaders?.length) {\n return [];\n }\n\n if (response?.[0]?.length) {\n const count = response.reduce((prev, curr) => {\n const max = Math.max(prev.max, curr.length);\n return {\n hasValueInLast: prev.hasValueInLast || !!curr?.[max - 1],\n max,\n };\n }, { hasValueInLast: false, max: 0 });\n const headers = Array(count.max).fill('').map((_, i) => `${i + 1}`);\n return count.hasValueInLast ? [...headers, `${count.max + 1}`] : headers;\n }\n\n return ['1'];\n };\n\n const tableColumns = [...tableConfig?.columnHeaders || [], ...emptyColumns()];\n\n const emptyRows = () => {\n if (fixedNumberOfRows) {\n if (response?.length >= fixedNumberOfRows) {\n return [];\n }\n return [...Array(fixedNumberOfRows).keys()].map(() => tableColumns.map(() => ''));\n }\n\n if (readOnly) {\n return [];\n }\n\n if (isMobile) {\n if (!response || response.length === 0) {\n return [tableColumns.map(() => '')];\n }\n return [];\n }\n\n return [tableColumns.map(() => '')];\n };\n\n const addRow = () => {\n const currResponse = [...response || [], ...emptyRows()];\n const addedResponse = [...currResponse, ...[tableColumns.map(() => '')]];\n\n handleResponseUpdate(addedResponse);\n };\n\n // const deleteColumn = columnIndex => () => {\n // // NOT updating correctly..\n // const removedColumn = response.map(r => r.filter((_, i) => i !== columnIndex));\n // handleResponseUpdate(removedColumn);\n // }\n\n const handleTableCellChange = (rowIndex, cellIndex) => (event) => {\n if (readOnly) return;\n\n let prevResponse = response || [];\n if (rowIndex >= prevResponse.length) {\n prevResponse = [...prevResponse, ...emptyRows()];\n }\n\n handleResponseUpdate(prevResponse.map((row, ri) => (\n ri === rowIndex ? padRow(row, tableColumns.length).map((cell, ci) => (\n ci === cellIndex ? event.target.value : cell\n )) : row\n )));\n\n // Fix for text-fields. To avoid loosing marker-position value is copied to internal state on first change.\n setResponseState(prevState => ({ ...prevState, [`${rowIndex}-${cellIndex}`]: event.target.value }));\n };\n\n const handleTableMultiCellChange = (rowIndex, cellIndex, questionIndex, curr) => (event) => {\n if (readOnly) return;\n\n const val = event.target.value;\n setMultiTableValues(prev => ({\n ...prev,\n [`${rowIndex}-${cellIndex}`]: {\n ...curr,\n ...prev && prev[`${rowIndex}-${cellIndex}`],\n [questionIndex]: val,\n },\n }));\n setUpdateIndex({ rowIndex, cellIndex });\n };\n\n React.useEffect(() => {\n if (hasValue(updateIndex)) {\n clearTimeout(updateAsyncTimer.current);\n updateAsyncTimer.current = setTimeout(() => {\n handleTableCellChange(updateIndex.rowIndex, updateIndex.cellIndex)({\n target: { value: JSON.stringify(multiTableValues[`${updateIndex.rowIndex}-${updateIndex.cellIndex}`]) },\n });\n }, 200);\n }\n // Only fire on updateIndex-change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [updateIndex]);\n\n const getCellValue = (rowIndex, cellIndex, questionIndex, cell) => (multiTableValues[`${rowIndex}-${cellIndex}`] && multiTableValues[`${rowIndex}-${cellIndex}`][questionIndex])\n || (cell && JSON.parse(cell)[questionIndex])\n || '';\n\n const renderCells = (ri, ci, cell, mobile) => (\n tableConfig.cellQuestions ? (\n \n \n {choiceConfig.freetextChoiceLabel || translate('taskContent.freetextChoiceLabel')}\n \n
\n )}\n />\n )}\n \n \n {tableConfig.cellQuestions.map((q, qi) => (\n
\n ) : (\n \n \n \n\n \n \n
\n );\n}\n\nTableResponse.propTypes = {\n // navigation: PropTypes.object.isRequired, // with2dArrowNavigation\n translate: PropTypes.func.isRequired,\n handleResponseUpdate: PropTypes.func.isRequired,\n tableConfig: PropTypes.object,\n response: PropTypes.array,\n disabled: PropTypes.bool,\n readOnly: PropTypes.bool,\n elementSettings: PropTypes.object,\n};\n\nTableResponse.defaultProps = {\n response: null,\n disabled: false,\n readOnly: false,\n tableConfig: {},\n elementSettings: null,\n};\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n});\n\n// export default connect(mapStateToProps)(with2dArrowNavigation(TableResponse));\nexport default connect(mapStateToProps)(TableResponse);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Button, createStyles } from '@material-ui/core';\nimport classnames from 'classnames';\nimport HtmlContent from '../../../HtmlContent';\n\nconst useStyles = makeStyles(theme => createStyles({\n question: {\n marginBottom: theme.spacing(1),\n },\n buttonStyle: {\n borderRadius: '100%',\n margin: theme.spacing(1),\n width: 'calc(33% - 16px)',\n minHeight: 150,\n fontWeight: 500,\n\n [theme.breakpoints.down('xs')]: {\n width: 'calc(50% - 16px)',\n },\n },\n unChecked: {\n background: theme.youwell.colors.secondaryBackground,\n '&:hover': {\n background: theme.youwell.colors.secondaryBackground,\n },\n },\n longText: {\n fontSize: '0.8rem',\n },\n}));\n\n\nconst BubbleChoiceQuestions = ({\n question, response, handleResponseUpdate,\n}) => {\n const classes = useStyles();\n\n const onBubbleClick = (answer, isChecked) => () => {\n const responses = (response?.choiceResponse || []).filter(d => d.id !== answer.id);\n handleResponseUpdate('choiceResponse', isChecked ? responses : [...responses, answer]);\n };\n\n const checkedResponses = response?.choiceResponse?.reduce((prev, curr) => (\n { ...prev, [curr.id]: curr.value }\n ), {}) || {};\n\n return (\n \n \n
\n
\n \n {tableResponses?.map((row, ri) => (\n // eslint-disable-next-line react/no-array-index-key\n
\n \n
\n ))}\n\n {!fixedNumberOfRows && !readOnly && (\n \n \n {hasRowHeaders ? tableConfig.rowHeaders[ri] : `${ri + 1}.`}\n \n
\n {row.map((cell, ci) => (\n // eslint-disable-next-line react/no-array-index-key\n \n
\n ))}\n \n \n {`${tableColumns[ci]}:`}\n \n
\n {renderCells(ri, ci, cell, true)}\n \n \n \n
\n )}\n\n \n 45 })}\n variant=\"contained\"\n color={checkedResponses[item.id] ? 'primary' : 'default'}\n onClick={onBubbleClick(item, checkedResponses[item.id])}\n key={item.id}\n >\n {item.value}\n \n ))}\n
\n );\n};\n\nBubbleChoiceQuestions.propTypes = {\n question: PropTypes.object.isRequired,\n response: PropTypes.object,\n handleResponseUpdate: PropTypes.func.isRequired,\n};\n\nBubbleChoiceQuestions.defaultProps = {\n response: null,\n};\n\nexport default BubbleChoiceQuestions;\n","import { makeStyles, useTheme } from '@material-ui/core/styles';\nimport React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Button, createStyles, useMediaQuery } from '@material-ui/core';\nimport classnames from 'classnames';\nimport HtmlContent from '../../../HtmlContent';\n\nconst useStyles = makeStyles(theme => createStyles({\n root: {\n position: 'relative',\n border: theme.youwell.borders.inputBox,\n backgroundColor: theme.youwell.colors.inputBackground,\n padding: theme.spacing(2),\n },\n bullsEyeContainer: {\n display: 'flex',\n height: 550,\n alignItems: 'center',\n justifyContent: 'center',\n margin: theme.spacing(1),\n\n [theme.breakpoints.down('xs')]: {\n height: 360,\n },\n\n '&$small': {\n height: 360,\n },\n },\n small: {},\n readOnly: {},\n bullsEye: {\n position: 'relative',\n padding: 0,\n width: 500,\n height: 500,\n borderRadius: '100%',\n cursor: 'crosshair',\n\n [theme.breakpoints.down('xs')]: {\n width: 300,\n height: 300,\n },\n\n '$small &': {\n width: 272,\n height: 272,\n },\n\n '$readOnly &': {\n cursor: 'default',\n },\n },\n questionLabel: {\n position: 'absolute',\n zIndex: 2,\n color: 'black',\n wordBreak: 'break-word',\n },\n scoreCircle: {\n position: 'absolute',\n background: theme.youwell.colors.secondaryBackground,\n border: theme.youwell.borders.primary,\n borderRadius: '100%',\n },\n line: {\n position: 'absolute',\n background: 'black',\n border: '1px solid black',\n height: '50%',\n },\n scorePoint: {\n height: 25,\n width: 25,\n backgroundColor: 'black',\n borderRadius: '100%',\n transform: 'translate(-50%, 50%)',\n position: 'absolute',\n\n [theme.breakpoints.down('xs')]: {\n width: 16,\n height: 16,\n },\n\n '$small &': {\n width: 16,\n height: 16,\n },\n },\n}), { name: 'BullsEyeQuestion' });\n\nconst calculateScore = (xPos, yPos, width, numberOfCircles) => {\n const circleSize = (100 / numberOfCircles) / 100;\n const diagonalFromSenter = Math.sqrt((xPos ** 2) + (yPos ** 2));\n const radius = width / 2;\n let i;\n for (i = 0; i < numberOfCircles; i++) {\n const circleScoreWidth = circleSize * (i + 1);\n if (diagonalFromSenter <= circleScoreWidth * radius) {\n return numberOfCircles - i;\n }\n }\n return -1;\n};\n\nconst questionSeparatorLineTopPositions = ['25%', '50%', '0%', '25%'];\nconst questionSeparatorLineLeftPositions = ['25%', '50%', '50%', '75%'];\nconst questionSeparatorLineTransform = ['rotate(90deg)', 'rotate(0deg)', 'rotate(0deg)', 'rotate(90deg)'];\n\nconst createLines = questions => questions.map((q, index) => ({\n style: {\n top: questionSeparatorLineTopPositions[index],\n left: questionSeparatorLineLeftPositions[index],\n transform: questionSeparatorLineTransform[index],\n },\n key: q.id,\n}));\n\nconst createCircles = (numberOfCircles) => {\n const circles = [];\n const circleSize = 100 / numberOfCircles;\n let number = numberOfCircles;\n let i;\n for (i = 0; i < numberOfCircles; i++) {\n circles.push({\n style: {\n width: `${number * circleSize}%`,\n height: `${number * circleSize}%`,\n },\n key: i,\n });\n number -= 1;\n }\n return circles;\n};\n\nconst labelPositionOffset = 24;\nconst labelPositionOffsetSmall = 12;\n\nconst getQuestionLabelPositionStyle = offset => ({\n 0: { top: offset, right: offset },\n 1: { top: offset, left: offset },\n 2: { bottom: offset, left: offset },\n 3: { bottom: offset, right: offset },\n});\n\nconst getQuadrantPosition = (mouseClickX, mouseClickY, circleDiameter) => {\n const center = circleDiameter / 2;\n\n let index; let fromPosX; let fromPosY;\n if (mouseClickX > center && mouseClickY < center) {\n index = 0;\n fromPosX = mouseClickX - center;\n fromPosY = center - mouseClickY;\n } else if (mouseClickX < center && mouseClickY < center) {\n index = 1;\n fromPosX = center - mouseClickX;\n fromPosY = center - mouseClickY;\n } else if (mouseClickX < center && mouseClickY > center) {\n index = 2;\n fromPosX = center - mouseClickX;\n fromPosY = mouseClickY - center;\n } else if (mouseClickX > center && mouseClickY > center) {\n index = 3;\n fromPosX = mouseClickX - center;\n fromPosY = mouseClickY - center;\n }\n return { index, fromPosX, fromPosY };\n};\n\nconst BullsEyeQuestions = ({\n questions, handleResponseUpdate, responses, readOnly, small,\n}) => {\n const classes = useStyles();\n const [pointPositions, setPointPositions] = useState({});\n\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('xs'));\n const useSmallLayout = small || isMobile;\n\n if (questions?.length !== 4) return null;\n\n const numberOfCircles = questions[0].scaleConfig.max;\n\n const onSetPoint = (event) => {\n if (readOnly) return;\n\n const currentTargetRect = event.currentTarget.getBoundingClientRect();\n const circleDiameter = event.currentTarget.clientHeight;\n const mouseClickX = parseFloat(event.pageX - window.pageXOffset - currentTargetRect.left);\n const mouseClickY = parseFloat(event.pageY - window.pageYOffset - currentTargetRect.top);\n\n const quadrantPosition = getQuadrantPosition(mouseClickX, mouseClickY, circleDiameter);\n const score = calculateScore(quadrantPosition.fromPosX, quadrantPosition.fromPosY, circleDiameter, numberOfCircles);\n const question = questions[quadrantPosition.index];\n\n setPointPositions(prevState => ({\n ...prevState,\n [question.id]: {\n left: (mouseClickX / circleDiameter) * 100,\n bottom: ((circleDiameter - mouseClickY) / circleDiameter) * 100,\n },\n }));\n\n handleResponseUpdate(question)('scaleResponse', score);\n };\n\n const getPointPosition = (questionResponse) => {\n const scaleResponse = questionResponse.response.scaleResponse;\n if (!scaleResponse) {\n return null;\n }\n\n // if presice position exists, use this\n if (pointPositions[questionResponse.questionId]) {\n return {\n left: `${pointPositions[questionResponse.questionId].left}%`,\n bottom: `${pointPositions[questionResponse.questionId].bottom}%`,\n };\n }\n\n // Otherwise calculate center position for score\n const circleRadius = numberOfCircles;\n const circleDiameter = circleRadius * 2;\n const pointRadius = numberOfCircles - scaleResponse + 0.5; // half way between lines -> scaleResponse should be minimum 1 (not 0)\n\n const questionIndex = questions.findIndex(d => d.id === questionResponse.questionId);\n const angleInDegrees = 45 - (questionIndex * 90);\n const xPos = pointRadius * Math.sin(angleInDegrees * Math.PI / 180) + circleRadius;\n const yPos = pointRadius * Math.cos(angleInDegrees * Math.PI / 180) + circleRadius;\n\n return {\n left: `${(xPos / circleDiameter) * 100}%`,\n bottom: `${(yPos / circleDiameter) * 100}%`,\n };\n };\n\n const circles = createCircles(numberOfCircles);\n const lines = createLines(questions);\n const questionResponses = questions.map(q => ({ questionId: q.id, response: responses[q.id]?.response }))\n .filter(d => d.response);\n\n return (\n \n {questions.map((question, i) => (\n
\n );\n};\n\nBullsEyeQuestions.propTypes = {\n questions: PropTypes.array.isRequired,\n handleResponseUpdate: PropTypes.func.isRequired,\n responses: PropTypes.object,\n readOnly: PropTypes.bool,\n small: PropTypes.bool,\n};\n\nBullsEyeQuestions.defaultProps = {\n responses: null,\n readOnly: false,\n small: false,\n};\n\nexport default BullsEyeQuestions;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n makeStyles, Accordion, AccordionSummary, Typography, AccordionDetails,\n} from '@material-ui/core';\nimport { CheckCircleRounded } from '@material-ui/icons';\nimport { useSelector } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\n\nimport { fillArrayToLength } from '../../../../arrayUtils';\nimport AsyncTextField from '../../../AsyncTextField';\n\nconst useStyles = makeStyles(theme => ({\n accordionDetails: {\n padding: theme.spacing(3, 2),\n gap: theme.spacing(3, 2),\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n\n [theme.breakpoints.down('xs')]: {\n padding: theme.spacing(1),\n gap: theme.spacing(2, 1),\n },\n },\n rowHeader: {\n backgroundColor: theme.palette.grey[50],\n },\n rowFilledIcon: {\n position: 'absolute',\n right: theme.spacing(1.5),\n color: theme.youwell.colors.green,\n },\n cell: {\n width: 'calc((100% - (3 * 16px))/4)',\n padding: theme.spacing(0.5),\n\n [theme.breakpoints.down('xs')]: {\n width: 'calc((100% - (2 * 8px))/3)',\n },\n },\n cellHeader: {\n backgroundColor: theme.palette.grey[100],\n color: theme.palette.grey[700],\n marginBottom: theme.spacing(1),\n padding: theme.spacing(0.5),\n },\n cellTextField: {\n marginTop: theme.spacing(1),\n },\n}));\n\n\nconst ColumnQuestions = ({\n header, cellQuestions, onChange, responses, readOnly,\n}) => {\n const classes = useStyles();\n const cellData = responses ? JSON.parse(responses) : {};\n\n const handleQuestionChange = questionIndex => (updatedValue) => {\n if (readOnly) return;\n const updatedData = {\n ...cellData,\n [questionIndex]: updatedValue,\n };\n onChange(updatedData);\n };\n\n return (\n \n \n
\n \n \n {header}\n \n {cellQuestions.map((question, questionIndex) => (\n \n
\n ))}\n \n );\n};\n\nColumnQuestions.propTypes = {\n header: PropTypes.string.isRequired,\n cellQuestions: PropTypes.array.isRequired,\n responses: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n readOnly: PropTypes.bool,\n};\n\nColumnQuestions.defaultProps = {\n readOnly: false,\n}\n\nconst TableRow = ({\n expanded, onChange, onClick, columnHeaders, cellQuestions, header, responses, readOnly,\n}) => {\n const classes = useStyles();\n const translate = useSelector(state => getTranslate(state.localize));\n const rowData = fillArrayToLength(responses, columnHeaders.length, '');\n\n const cellCheck = (cellData, compareLength) => {\n if (!cellData) return false;\n\n const cellDataValues = Object.values(JSON.parse(cellData));\n if (cellDataValues.length !== compareLength || cellDataValues.includes('')) return false;\n\n return true;\n }\n\n const rowIsFilled = rowData.every(cellData => cellCheck(cellData, cellQuestions.length));\n\n const handleCellChange = columnIndex => (data) => {\n const updatedRowData = rowData.map((row, i) => (\n i === columnIndex ? JSON.stringify(data) : row\n ));\n onChange(updatedRowData);\n }\n\n return (\n \n {rowHeaders.map((rowHeader, rowIndex) => (\n setExpandedIndex(expandedIndex === rowIndex ? -1 : rowIndex)}\n header={rowHeader}\n columnHeaders={columnHeaders}\n cellQuestions={cellQuestions}\n onChange={handleRowChange(rowIndex)}\n responses={tableData[rowIndex] || []}\n readOnly={readOnly}\n />\n ))}\n
\n );\n};\n\nCollapsedTable.propTypes = {\n question: PropTypes.object.isRequired,\n handleResponseUpdate: PropTypes.func.isRequired,\n responses: PropTypes.object,\n readOnly: PropTypes.bool,\n};\n\nCollapsedTable.defaultProps = {\n responses: null,\n readOnly: false,\n};\n\nexport default CollapsedTable;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classnames from 'classnames';\n\nimport {\n Typography, Table, TableHead, TableRow, TableCell, TableBody, ButtonBase, TextField,\n} from '@material-ui/core';\n\nimport HtmlContent from '../../../HtmlContent';\nimport { CheckedIcon } from '../../../../../common/icons';\nimport { isEmpty } from '../../../../objectUtils';\nimport { isEdge } from '../../../../browserUtils';\nimport { with2dArrowNavigation } from '../../../accessibility/ArrowNavigation';\nimport { formAnswerTypes } from '../../../../constants';\nimport { getInputType } from '../FreetextResponse';\nimport { parseBoolString } from '../../../../stringUtils';\nimport { getStylesFromSettings } from '../../utils';\n\nconst cellWidth = 40;\nconst cellWidthSmall = 30;\nconst maxContentWidth = 1080;\n\nconst styles = theme => ({\n table: {\n width: '100%',\n height: '100%',\n border: `1px solid ${theme.palette.grey[100]}`,\n background: theme.palette.common.white,\n\n [theme.breakpoints.down('xs')]: {\n tableLayout: 'fixed',\n },\n },\n stickyHeaderCell: {\n position: 'sticky',\n top: 49,\n background: theme.palette.common.white,\n boxShadow: `0 2px 2px -2px ${theme.palette.grey[600]}`,\n zIndex: 50,\n },\n headerCell: {\n border: `1px solid ${theme.palette.grey[200]}`,\n borderBottom: '1px solid #e0e0e0',\n padding: theme.spacing(1),\n textAlign: 'center',\n\n '$rotate &': {\n verticalAlign: 'bottom',\n width: cellWidth,\n minHeight: 140, // iOs/Safari fix - height auto is not working.. Should have a better fix, or be removed when iOs is updated!\n\n [theme.breakpoints.down('xs')]: {\n padding: theme.spacing(1, 0),\n width: cellWidthSmall,\n },\n },\n\n },\n answerTextCell: {\n [theme.breakpoints.down('xs')]: {\n padding: theme.spacing(1, 0.5),\n },\n overflowWrap: 'anywhere',\n },\n answerCell: {\n border: `1px solid ${theme.palette.grey[200]}`,\n borderBottom: '1px solid #e0e0e0',\n padding: theme.spacing(0.5),\n textAlign: 'center',\n height: '100%',\n\n '$rotate &': {\n width: cellWidth,\n\n [theme.breakpoints.down('xs')]: {\n padding: 1,\n width: cellWidthSmall,\n },\n },\n },\n scoreCell: {\n background: theme.palette.grey[300],\n },\n invalidRow: {\n borderLeft: `2px solid ${theme.palette.error.main}`,\n },\n answerOption: {\n\n '$rotate &': {\n display: 'inline-block',\n writingMode: 'vertical-lr',\n transform: 'rotate(180deg)',\n whiteSpace: 'nowrap',\n maxHeight: 300,\n overflow: 'hidden',\n },\n },\n rotate: {\n\n },\n answerButton: {\n // width: cellWidth,\n // height: cellWidth,\n width: '100%',\n height: '100%',\n\n '&:focus': {\n background: theme.palette.grey[200],\n },\n\n '&:hover': {\n background: theme.palette.grey[300],\n },\n\n // [theme.breakpoints.down('xs')]: {\n // width: cellWidthSmall - 2,\n // height: cellWidthSmall - 2,\n // },\n },\n cellMarker: {\n opacity: 0,\n\n [theme.breakpoints.down('xs')]: {\n opacity: 0.2,\n },\n },\n});\n\nconst colStyle = (elementSettings, colIndex) => getStylesFromSettings(elementSettings, `col${colIndex + 1}style.`)\n\nclass QuestionnaireTable extends React.Component {\n selectAnswer = (question, answer) => () => {\n const selectedChoices = this.props.responses?.[question.id]?.response?.choiceResponse || [];\n const wasCheckedBefore = selectedChoices.findIndex(d => d.id === answer.id) > -1;\n\n if (question.type === formAnswerTypes.multipleChoice) {\n const values = wasCheckedBefore ? selectedChoices.filter(d => d.id !== answer.id) : [...selectedChoices, answer];\n this.props.onChange(question)('choiceResponse', values);\n } else {\n const values = wasCheckedBefore ? null : [answer];\n this.props.onChange(question)('choiceResponse', values);\n }\n }\n\n handleFreetextChange = question => (event) => {\n this.props.onChange(question)('freetextResponse', event.target.value);\n }\n\n render() {\n const {\n classes, questions, responses, disabled, showScoreMarks, validationError, navigation, elementSettings, readOnly,\n } = this.props;\n\n if (!questions || questions.length < 1 || !questions[0].answers) {\n return null;\n }\n\n const respondedAnswers = questions.reduce((prev, curr) => ({\n ...prev,\n [curr.id]: responses?.[curr.id]?.response.choiceResponse?.length > 0\n ? responses[curr.id].response.choiceResponse.map(d => d.id)\n : [responses?.[curr.id]?.response?.freetextResponse],\n }), {});\n\n\n const verticalText = parseBoolString(elementSettings?.flipLabels) || (document.documentElement.clientWidth < 930 && !parseBoolString(elementSettings?.dontFlipLabels));\n const firstColWidth = verticalText ? document.documentElement.clientWidth - (questions[0].answers.length * cellWidthSmall) - 16 - 16\n : Number(elementSettings?.firstColWidth) || '';\n // Writing mode fix for Edge - until https://github.com/cssinjs/css-vendor/issues/172 is merged into Material UI/Jss\n const ieFix = verticalText && isEdge ? { 'writing-mode': 'vertical-lr' } : null;\n const answerCellMinWidthDefault = Number(elementSettings?.answerCellMinWidth) || (firstColWidth ? 40 : 100);\n const answerCellMinWidth = verticalText\n ? null\n : Math.min(Math.min(document.documentElement.clientWidth, maxContentWidth) / (questions[0].answers.length * 2), answerCellMinWidthDefault);\n\n return (\n \n {questions.map(q => (\n
\n );\n};\n\n\nQuiz.propTypes = {\n element: PropTypes.object.isRequired,\n taskId: PropTypes.string.isRequired,\n getProgramItem: PropTypes.func.isRequired,\n getSpecificTaskResponses: PropTypes.func.isRequired,\n handleResponseUpdate: PropTypes.func.isRequired,\n contentState: PropTypes.string,\n responses: PropTypes.object.isRequired,\n disabled: PropTypes.bool,\n FormQuestionProps: PropTypes.object,\n readOnly: PropTypes.bool,\n};\n\nQuiz.defaultProps = {\n contentState: null,\n FormQuestionProps: null,\n readOnly: false,\n disabled: false,\n};\n\nexport default Quiz;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { connect } from 'react-redux';\nimport { getTranslate } from 'react-localize-redux';\n\nimport { Button, Typography } from '@material-ui/core';\nimport { contentElemenIdPrefix } from '../../../../constants';\nimport FormQuestion from '../../FormQuestion';\nimport { isEmpty } from '../../../../objectUtils';\nimport { InfoMessage } from '../../../../../common/components';\n\nconst styles = theme => ({\n root: {\n\n },\n results: {\n margin: theme.spacing(4, 0),\n boxShadow: theme.shadows[4],\n padding: theme.spacing(4, 2),\n background: theme.palette.common.white,\n display: 'flex',\n alignItems: 'center',\n\n [theme.breakpoints.down('xs')]: {\n flexDirection: 'column',\n },\n },\n scoreHeading: {\n flex: '1 1 auto',\n color: theme.youwell.colors.green,\n },\n resetButton: {\n marginLeft: theme.spacing(1),\n\n [theme.breakpoints.down('xs')]: {\n marginTop: theme.spacing(2),\n },\n },\n});\n\n// How to use a Quiz\n// On the content-page:\n// 1. Add a default element with all the questions\n// 2. Add a default element with a Button-question. Text: \"Show answers\"\n// 3. Add a \"QuizResponse\"-element with no content\n// 4. Settings for element 3: elementId = id of element 1\n// 5. Set the following conditional states:\n// Element 1: Default visible, hidden when \"Show answers\" is activated\n// Element 2: same as above (or keep always visible..)\n// Element 3: Default hidden, visible when \"Show answers\" is activated\n\nclass QuizResponse extends React.Component {\n resetQuiz = () => {\n const quizElement = this.getQuizElement();\n\n quizElement?.questions?.forEach((q) => {\n this.props.handleResponseUpdate(q)('choiceResponse', null);\n });\n\n if (window.scrollTo) {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n } else {\n document.documentElement.scrollTop = 0;\n }\n };\n\n getQuizElement = () => {\n const {\n element, taskId, getProgramItem,\n } = this.props;\n\n const elementSettings = element.settings || {};\n const quizTaskId = elementSettings.taskId || taskId;\n const quizTask = getProgramItem(quizTaskId);\n const elementId = elementSettings.elementId;\n\n if (!quizTask || !elementId) {\n return null;\n }\n\n return quizTask.contentElements?.find(e => e.id === Number(elementId));\n }\n\n render() {\n const {\n classes, element, taskId, translate, getSpecificTaskResponses, contentState,\n } = this.props;\n\n if (!element) {\n return null;\n }\n\n const elementSettings = element.settings || {};\n const quizTaskId = elementSettings.taskId || taskId;\n const quizElement = this.getQuizElement();\n\n if (!quizElement) {\n return \n {scoring.score === scoring.max ? (\n <>\n \n {translate('taskContent.fullScore', scoring)}\n \n \n \n {translate('taskContent.retakeQuiz')}\n \n \n \n ) : (\n <>\n \n {translate('taskContent.youGotxOfXScore', scoring)}\n \n \n \n )}\n
\n ) : (\n \n \n
\n )}\n\n \n {questionsWithAnswers.map(q => (\n {}}\n />\n ))}\n\n
\n );\n }\n}\n\n\nQuizResponse.propTypes = {\n classes: PropTypes.object.isRequired,\n translate: PropTypes.func.isRequired,\n element: PropTypes.object.isRequired,\n taskId: PropTypes.string.isRequired,\n getProgramItem: PropTypes.func.isRequired,\n getSpecificTaskResponses: PropTypes.func.isRequired,\n handleResponseUpdate: PropTypes.func.isRequired,\n contentState: PropTypes.string,\n};\n\nQuizResponse.defaultProps = {\n contentState: null,\n};\n\nconst mapStateToProps = state => ({\n translate: getTranslate(state.localize),\n});\n\nexport default connect(mapStateToProps)(withStyles(styles)(QuizResponse));\n","import { makeStyles } from '@material-ui/core/styles';\nimport React, { useState } from 'react';\nimport { createStyles, Input, Typography } from '@material-ui/core';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport { getTranslate } from 'react-localize-redux';\nimport { useSelector } from 'react-redux';\nimport { stripHtml } from '../../../../htmlUtils';\n\nimport Arrow from '../../../../../common/image/Arrow.png';\n\nconst useStyles = makeStyles(theme => createStyles({\n imageContainer: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n },\n column: {\n margin: theme.spacing(1),\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n },\n left: {\n backgroundColor: '#778689',\n },\n right: {\n backgroundColor: '#e94f11',\n },\n circle: {\n display: 'flex',\n justifyContent: 'center',\n borderRadius: '100%',\n alignItems: 'center',\n width: 190,\n height: 190,\n color: theme.palette.common.white,\n\n [theme.breakpoints.down('xs')]: {\n width: 155,\n height: 155,\n\n '& p': {\n fontSize: '1rem',\n },\n },\n },\n bottomContainer: {\n marginTop: theme.spacing(4),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n arrowImage: {\n margin: theme.spacing(4, 0, 0),\n },\n triangle: {\n display: 'flex',\n justifyContent: 'center',\n textAlign: 'center',\n position: 'relative',\n width: 200,\n height: 200,\n\n '&:after': {\n content: '\"\"',\n position: 'absolute',\n borderLeft: '150px solid transparent',\n borderRight: '150px solid transparent',\n borderBottom: '200px solid #2b7b90',\n },\n\n [theme.breakpoints.down('xs')]: {\n '& p': {\n fontSize: '1rem',\n },\n },\n\n '& + $input': {\n width: 300,\n },\n },\n triangleText: {\n zIndex: 1,\n marginTop: 100,\n color: theme.palette.common.white,\n },\n input: {\n marginTop: theme.spacing(2),\n border: theme.youwell.borders.inputBox,\n backgroundColor: theme.youwell.colors.inputBackground,\n padding: theme.spacing(2),\n },\n}));\n\nconst RouteSelection = ({\n questions, handleResponseUpdate, responses, readOnly,\n}) => {\n const [leftValue, setLeftValue] = useState(null);\n const [rightValue, setRightValue] = useState(null);\n const [bottomValue, setBottomValue] = useState(null);\n const classes = useStyles();\n const updateAsyncTimer = React.useRef();\n const translate = useSelector(state => getTranslate(state.localize));\n\n if (questions?.length !== 3) return null;\n\n const handleChange = key => (event) => {\n if (readOnly) {\n return;\n }\n const value = event.target.value;\n switch (key) {\n case 0:\n setLeftValue(value);\n break;\n case 1:\n setRightValue(value);\n break;\n case 2:\n setBottomValue(value);\n break;\n default:\n return;\n }\n\n clearTimeout(updateAsyncTimer.current);\n updateAsyncTimer.current = setTimeout(() => {\n handleResponseUpdate(questions[key])('freetextResponse', value);\n }, 200);\n };\n\n const answerLeft = leftValue !== null ? leftValue : responses && responses[questions[0].id]?.response?.freetextResponse;\n const answerRight = rightValue !== null ? rightValue : responses && responses[questions[1].id]?.response?.freetextResponse;\n const answerBottom = bottomValue !== null ? bottomValue : responses && responses[questions[2].id]?.response?.freetextResponse;\n\n return (\n \n \n {translate('taskContent.youGotxOfXScore', scoring)}\n \n\n \n
\n\n \n
\n );\n};\n\nRouteSelection.propTypes = {\n questions: PropTypes.array.isRequired,\n handleResponseUpdate: PropTypes.func.isRequired,\n responses: PropTypes.object,\n readOnly: PropTypes.bool,\n};\nRouteSelection.defaultProps = {\n responses: null,\n readOnly: false,\n};\n\nexport default RouteSelection;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\n\nimport {\n Backdrop,\n Button,\n makeStyles,\n} from '@material-ui/core';\nimport HtmlContent from '../../HtmlContent';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n position: 'relative',\n },\n box: {\n width: 160,\n height: 80,\n background: theme.youwell.colors.secondaryBackground,\n\n [theme.breakpoints.down('xs')]: {\n width: 115,\n height: 60,\n },\n },\n inActive: {\n cursor: 'default',\n pointerEvents: 'none',\n },\n empty: {\n visibility: 'hidden',\n },\n boxRow: {\n display: 'flex',\n justifyContent: 'space-between',\n },\n first: {\n marginBottom: theme.spacing(8),\n [theme.breakpoints.down('xs')]: {\n marginBottom: theme.spacing(4),\n },\n },\n last: {\n marginTop: theme.spacing(8),\n [theme.breakpoints.down('xs')]: {\n marginTop: theme.spacing(4),\n },\n },\n detailsBackdrop: {\n zIndex: 1,\n },\n detailsBox: {\n zIndex: 2,\n position: 'absolute',\n top: theme.spacing(4),\n right: theme.spacing(4),\n left: theme.spacing(4),\n minHeight: `calc(100% - ${2 * theme.spacing(4)}px)`,\n border: theme.youwell.borders.primary,\n borderRadius: theme.youwell.shapes.borderRadius,\n background: theme.palette.background.paper,\n padding: theme.spacing(3),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n [theme.breakpoints.down('xs')]: {\n top: theme.spacing(2),\n right: theme.spacing(2),\n left: theme.spacing(2),\n minHeight: `calc(100% - ${2 * theme.spacing(2)}px)`,\n padding: theme.spacing(2),\n },\n },\n lineWrapper: {\n position: 'fixed',\n top: 0,\n left: 0,\n height: '100vh',\n width: '100vw',\n pointerEvents: 'none',\n color: theme.palette.primary.main,\n },\n}), { name: 'ConnectedBoxes' });\n\nconst arrowDirections = {\n BottomToTop: 1,\n LeftToRight: 2,\n RightToLeft: 3,\n TopToBottom: 4,\n LeftToTop: 5,\n RightToTop: 6,\n BottomToRight: 7,\n BottomToLeft: 8,\n TopToRight: 9,\n Self: 10,\n};\n\nconst getDirection = (from, to) => {\n if (from === to) return arrowDirections.Self;\n\n switch (from) {\n case 0: {\n switch (to) {\n case 1: case 2:\n return arrowDirections.RightToLeft;\n default:\n return arrowDirections.BottomToTop;\n }\n }\n case 1: {\n switch (to) {\n case 2:\n return arrowDirections.RightToLeft;\n case 3:\n return arrowDirections.LeftToTop;\n case 4:\n return arrowDirections.BottomToTop;\n case 5:\n return arrowDirections.RightToTop;\n default:\n return arrowDirections.BottomToTop;\n }\n }\n case 3: {\n switch (to) {\n case 4: case 5:\n return arrowDirections.RightToLeft;\n case 6:\n return arrowDirections.BottomToTop;\n default:\n return arrowDirections.BottomToLeft;\n }\n }\n case 4: {\n switch (to) {\n case 5:\n return arrowDirections.RightToLeft;\n case 6:\n return arrowDirections.LeftToTop;\n case 7:\n return arrowDirections.BottomToTop;\n default:\n return arrowDirections.RightToTop;\n }\n }\n case 5: {\n switch (to) {\n case 6:\n return arrowDirections.LeftToTop;\n case 7:\n return arrowDirections.BottomToRight;\n default:\n return arrowDirections.BottomToTop;\n }\n }\n default:\n return arrowDirections.BottomToTop;\n }\n}\n\nconst calculate = (from, to, direction) => {\n const fromEl = document.getElementById(from);\n const toEl = document.getElementById(to);\n\n if (!fromEl || !toEl) {\n return '';\n }\n\n const fromPosRect = fromEl.getBoundingClientRect();\n const toPosRect = toEl.getBoundingClientRect();\n\n const spacing = 8;\n let fromPos;\n let toPos;\n switch (direction) {\n case arrowDirections.BottomToTop:\n fromPos = { x: fromPosRect.left + fromEl.offsetWidth / 2, y: fromPosRect.bottom + spacing };\n toPos = { x: toPosRect.left + fromEl.offsetWidth / 2, y: toPosRect.top - spacing * 1.5 };\n break;\n case arrowDirections.TopToBottom:\n fromPos = { x: fromPosRect.left + fromEl.offsetWidth / 2, y: fromPosRect.top + spacing };\n toPos = { x: toPosRect.left + fromEl.offsetWidth / 2, y: toPosRect.bottom + spacing };\n break;\n case arrowDirections.LeftToRight:\n fromPos = { x: fromPosRect.left - spacing, y: fromPosRect.top + fromEl.offsetHeight / 2 };\n toPos = { x: toPosRect.right + spacing * 1.5, y: toPosRect.top + toEl.offsetHeight / 2 };\n break;\n case arrowDirections.RightToLeft:\n fromPos = { x: fromPosRect.right + spacing, y: fromPosRect.top + fromEl.offsetHeight / 2 };\n toPos = { x: toPosRect.left - spacing, y: toPosRect.top + toEl.offsetHeight / 2 };\n break;\n case arrowDirections.LeftToTop:\n fromPos = { x: fromPosRect.left - spacing, y: fromPosRect.top + fromEl.offsetHeight / 2 };\n toPos = { x: toPosRect.left + fromEl.offsetWidth / 2, y: toPosRect.top - spacing };\n break;\n case arrowDirections.RightToTop:\n fromPos = { x: fromPosRect.right + spacing, y: fromPosRect.top + fromEl.offsetHeight / 2 };\n toPos = { x: toPosRect.left + fromEl.offsetWidth / 2, y: toPosRect.top - spacing };\n break;\n case arrowDirections.BottomToRight:\n fromPos = { x: fromPosRect.left + fromEl.offsetWidth / 2, y: fromPosRect.bottom + spacing };\n toPos = { x: toPosRect.right + spacing * 1.5, y: toPosRect.top + toEl.offsetHeight / 2 };\n break;\n case arrowDirections.BottomToLeft:\n fromPos = { x: fromPosRect.left + fromEl.offsetWidth / 2, y: fromPosRect.bottom + spacing };\n toPos = { x: toPosRect.left - spacing, y: toPosRect.top + toEl.offsetHeight / 2 };\n break;\n case arrowDirections.TopToRight:\n fromPos = { x: fromPosRect.left + fromEl.offsetWidth / 2, y: fromPosRect.top + spacing };\n toPos = { x: toPosRect.right + spacing * 1.5, y: toPosRect.top + toEl.offsetHeight / 2 };\n break;\n case arrowDirections.Self:\n fromPos = { x: fromPosRect.left + fromEl.offsetWidth / 2, y: fromPosRect.top + spacing };\n toPos = { x: toPosRect.right + spacing * 1.5, y: toPosRect.top + toEl.offsetHeight / 2 };\n break;\n default:\n fromPos = { x: fromPosRect.left - spacing, y: fromPosRect.top + fromEl.offsetHeight / 2 };\n toPos = { x: toPosRect.right + spacing, y: toPosRect.top + toEl.offsetHeight / 2 };\n break;\n }\n\n return `M${fromPos.x},${fromPos.y} Q${fromPos.x},${fromPos.y} ${toPos.x},${toPos.y}`;\n // return `M${fromPos.x},${fromPos.y} C${fromPos.x - 80},${fromPos.y} ${toPos.x + 80},${toPos.y} ${toPos.x},${toPos.y}`;\n};\n\nconst ConnectingLine = ({ line }) => {\n const classes = useStyles();\n const lineEl = React.useRef(null);\n const { from, to, direction, type } = line;\n\n const update = React.useCallback(() => {\n if (lineEl.current) {\n lineEl.current.setAttribute('d', calculate(from, to, direction));\n }\n }, [from, to, direction]);\n\n React.useEffect(() => {\n update();\n }, [update]);\n\n React.useEffect(() => {\n window.addEventListener('scroll', update);\n window.addEventListener('resize', update);\n\n return () => {\n window.removeEventListener('scroll', update);\n window.removeEventListener('resize', update);\n };\n }, [update]);\n\n\n const showLeftArrow = !type || type === 'left' || type === 'both';\n const showRightArrow = !type || type === 'right' || type === 'both';\n\n return (\n \n
\n\n \n {translate('routeSelection.awayValues')} \n 
\n
\n \n {translate('routeSelection.towardsValues')} \n \n
\n \n
\n \n {translate('routeSelection.psychologicalFlex')} \n
\n \n \n
\n );\n};\n\nConnectingLine.propTypes = {\n line: PropTypes.object.isRequired,\n};\n\nconst ConnectedBoxes = ({\n task, element, className,\n}) => {\n const classes = useStyles();\n const [showDetailsBoxIx, setShowDetailsBoxIx] = React.useState(null)\n\n if (!element.settings) {\n return null;\n }\n\n const boxes = [];\n const connectingLines = [];\n Object.entries(element.settings).forEach(([key, value], i) => {\n if (key.startsWith('box-nr-') && value) { // box-nr-1 -> Box index = 0\n const boxNr = Number(key.substring(7)) - 1;\n const box = task.contentElements?.find(e => e.id === Number(value));\n if (!Number.isNaN(boxNr) && box) {\n boxes[boxNr] = {\n ...box,\n tagId: `connectedBox_${element.id}_box${box.id}`,\n };\n }\n }\n if (key.startsWith('line-')) { // line-X-Y -> From X to Y\n const from = Number(key.substring(5, 6)) - 1;\n const to = Number(key.substring(7, 8)) - 1;\n if (!Number.isNaN(from) && !Number.isNaN(to)) {\n connectingLines.push({\n id: i,\n from: boxes[from]?.tagId,\n to: boxes[to]?.tagId,\n direction: getDirection(from, to),\n type: value, // Direction for arrow or type: left, right, both, none, .. dotted?\n });\n }\n }\n });\n\n const renderBox = (index) => {\n const box = boxes[index];\n const hasContent = box?.htmlContent;\n\n if (box) {\n return (\n \n );\n }\n return \n }\n\n return (\n \n \n setShowDetailsBoxIx(null)} className={classes.detailsBackdrop} />\n
\n );\n}\n\nConnectedBoxes.propTypes = {\n element: PropTypes.object.isRequired,\n task: PropTypes.object.isRequired,\n className: PropTypes.string,\n};\n\nConnectedBoxes.defaultProps = {\n className: null,\n};\n\nexport default ConnectedBoxes;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\n\nimport {\n makeStyles,\n} from '@material-ui/core';\n\nimport TaskForm from '../TaskForm';\n\nconst useStyles = makeStyles(() => ({\n taskForm: {\n },\n}), { name: 'DefaultElementContent' });\n\n\nconst DefaultElementContent = ({\n element, task, className, taskResponses, contentState, onResponse, getProgramItem, getSpecificTaskResponses, showValidationErrors, TaskFormProps,\n}) => {\n const classes = useStyles();\n\n return (\n \n {renderBox(0)}\n {renderBox(1)}\n {renderBox(2)}\n
\n \n {renderBox(3)}\n {renderBox(4)}\n {renderBox(5)}\n
\n \n {renderBox(6)}\n {renderBox(7)}\n {renderBox(8)}\n
\n\n {connectingLines.map(line => (\n \n
\n \n )}\n \n
\n );\n}\n\nDefaultElementContent.propTypes = {\n element: PropTypes.object.isRequired,\n task: PropTypes.object.isRequired,\n TaskFormProps: PropTypes.object,\n customElementHandler: PropTypes.func,\n onResponse: PropTypes.func.isRequired,\n LinkElementProps: PropTypes.object,\n taskResponses: PropTypes.object,\n getProgramItem: PropTypes.func.isRequired,\n getSpecificTaskResponses: PropTypes.func.isRequired,\n noHiddenStates: PropTypes.bool,\n HoveredElement: PropTypes.object,\n selectedElementId: PropTypes.number,\n addNoContextForImages: PropTypes.bool,\n elementPreContent: PropTypes.func,\n showValidationErrors: PropTypes.bool,\n className: PropTypes.string,\n contentState: PropTypes.string,\n};\n\nDefaultElementContent.defaultProps = {\n contentState: null,\n TaskFormProps: null,\n customElementHandler: null,\n LinkElementProps: null,\n taskResponses: null,\n noHiddenStates: false,\n HoveredElement: null,\n selectedElementId: null,\n addNoContextForImages: false,\n elementPreContent: null,\n showValidationErrors: false,\n className: null,\n};\n\nexport default DefaultElementContent;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\n\nimport {\n List,\n ListItem,\n ListItemText,\n makeStyles,\n} from '@material-ui/core';\n\nimport TaskForm from '../TaskForm';\nimport { stripHtml } from '../../../htmlUtils';\nimport { questionContentElementTypes } from '../../../constants';\nimport HtmlContent from '../../HtmlContent';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n background: theme.palette.background.paper,\n padding: theme.spacing(1),\n },\n list: {\n width: '100%',\n },\n question: {\n '&+&': {\n marginTop: theme.spacing(1),\n },\n },\n}), { name: 'LinkedResponse' });\n\n\nconst LinkedResponse = ({\n task, element, getProgramItem, getSpecificTaskResponses, contentState,\n}) => {\n const classes = useStyles();\n\n if (!element?.settings) {\n return null;\n }\n\n const linkedTaskId = element.settings.linkedPageId || element.settings.linkedElementTaskId; // linkedElementTaskId is obsolete (old setting used in emeistring Depresjon)\n const linkedElementId = element.settings.linkedElementId || element.settings.linkedElementElementId; // linkedElementElementId is obsolete (old setting..)\n\n const refTask = getProgramItem(linkedTaskId);\n if (!refTask) {\n return null;\n }\n\n let refElement = refTask.contentElements?.find(e => e.id === Number(linkedElementId));\n const refTaskResponses = getSpecificTaskResponses(linkedTaskId);\n\n if (!refElement) {\n return null;\n }\n\n if (element.settings.threshold?.length > 0) {\n const threshold = Number(element.settings.threshold);\n\n refElement = {\n ...refElement,\n questions: refTaskResponses && !Number.isNaN(threshold) ? refElement.questions\n ?.filter(d => refTaskResponses[d.id]?.response?.choiceResponse?.some(r => r.score >= threshold)) : null,\n }\n }\n\n switch (element.settings.view) {\n case 'list':\n switch (refElement.elementType) {\n case questionContentElementTypes.questionnaire:\n return (\n \n
\n );\n default:\n return (\n - \n {refElement.questions?.map(d => (\n
\n {refElement.questions?.map(d => (\n
\n );\n }\n case 'default':\n default:\n return (\n \n {refElement.questions.length > 1 &&
\n ))}\n - \n {refTaskResponses?.[d.id]?.response?.choiceResponse?.map(r => (\n
\n
\n \n {renderContent()}\n
\n \n
\n \n );\n }\n }\n\n return (\n \n \n {headerText}\n \n setShowReadMore(false)}>\n \n
\n \n {renderContent()}\n
\n \n
\n );\n}\n\nReadMore.propTypes = {\n element: PropTypes.object.isRequired,\n getProgramItem: PropTypes.func.isRequired,\n};\n\nexport default ReadMore;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { defaultContentElementTypes, specialContentElementTypes } from '../../../constants';\n\n// eslint-disable-next-line import/no-cycle -- ok because ReadMore can display content via TaskContent\nimport ReadMore from './ReadMore';\nimport LinkedResponse from './LinkedResponse';\nimport DefaultElementContent from './DefaultElementContent';\nimport ConnectedBoxes from './ConnectedBoxes';\n\nexport const getHtmlContentPosition = (elementType, contentPositionFromSetting) => {\n switch (elementType) {\n case specialContentElementTypes.hidden:\n case defaultContentElementTypes.readMore:\n return -1;\n default:\n return Number(contentPositionFromSetting || 0);\n }\n}\n\n\nconst TaskElementContent = ({ element, customElementHandler, ...props }) => {\n switch (element.elementType) {\n case specialContentElementTypes.hidden:\n return null;\n case defaultContentElementTypes.readMore:\n return \n {ingressImage && !activeInline &&
\n {renderContainerElement()}\n <\\/figure>/g;\nconst imgRegex = /![]()
/g;\nconst srcRegex = /src=\"([^\"]*)\".*?/;\nconst internalLinkRegex = /]*>(.*?)<\\/a>/g;\nconst stringVariableRegex = /{{(.*?)}}/g;\nconst elementIdRegex = /data-elementid=\"([^\"]*)\".*?/;\nconst tableFigureRegex = /]+class=\"table.*?><\\/figure>/g;\nconst tableRegex = //g;\nconst firstStyleWidthRegex = /style=\"[^\"]*width:([^;]*);\"/;\nconst styleRegex = /style=\"([^\"]*)\"/;\n\nconst videoProviders = [\n {\n name: 'dailymotion',\n url: /^dailymotion\\.com\\/video\\/(\\w+)/,\n html: url => '![]()
{\n if (!appId) return html;\n\n const match = html.match(imgRegex);\n\n if (!match) {\n return html;\n }\n let replaced = html;\n\n for (let m = 0; m < match.length; m++) {\n const urlMatch = match[m].match(srcRegex);\n if (urlMatch?.[1]) {\n const ampOrQuestion = urlMatch[1].indexOf('?') > -1 ? '&' : '?';\n const withAppId = match[m].replace(urlMatch[1], `${urlMatch[1]}${ampOrQuestion}xAppId=${appId}`);\n replaced = replaced.replace(match[m], withAppId);\n }\n }\n\n for (let m = 0; m < match.length; m++) {\n const withNoContext = match[m].replace('![]()
{\n const match = html.match(tableFigureRegex);\n\n if (!match) {\n return html;\n }\n let replaced = html;\n\n for (let m = 0; m < match.length; m++) {\n const figureStyleMatch = match[m].match(firstStyleWidthRegex);\n\n if (figureStyleMatch) {\n const width = figureStyleMatch[1];\n const tableMatch = match[m].match(tableRegex);\n if (tableMatch) {\n const existingTableStyle = tableMatch[0].match(styleRegex);\n\n let tableReplaced = match[m].replace(firstStyleWidthRegex, figureStyleMatch[0].replace(`width:${width};`, ''));\n if (existingTableStyle) {\n tableReplaced = tableReplaced.replace(existingTableStyle[1], `${existingTableStyle[1]};width:${width};\" `);\n } else {\n // match both open and closed table-tag.. rewrite to 1 regex?\n tableReplaced = tableReplaced.replace('', ``);\n }\n\n replaced = replaced.replace(match[m], tableReplaced);\n }\n }\n }\n\n return replaced;\n};\n\nconst replaceInternalLinks = (html) => {\n const match = html.match(internalLinkRegex);\n\n if (!match) {\n return html;\n }\n let replaced = html;\n\n for (let m = 0; m < match.length; m++) {\n const idMatch = match[m].match(elementIdRegex);\n if (idMatch) {\n const elementId = idMatch[1]?.trim();\n\n const withAction = match[m].replace(idMatch[0], `onclick=\"__clickInternalLink('${elementId}')\"`);\n replaced = replaced.replace(match[m], withAction);\n }\n }\n\n return replaced;\n};\n\nconst replaceStringVariables = (html) => {\n const match = html.match(stringVariableRegex);\n\n if (!match) {\n return html;\n }\n let replaced = html;\n\n for (let m = 0; m < match.length; m++) {\n if (window.__getYouwellVariable) {\n const variable = match[m].slice(2, -2);\n replaced = replaced.replace(match[m], `${window.__getYouwellVariable(variable)}`);\n }\n }\n\n return replaced;\n};\n\nexport const replaceEmbedContent = (html, addNoContextForImages = false, xAppId) => {\n let replaced = replaceVideo(html);\n if (addNoContextForImages) {\n replaced = addNoContextMenu(html);\n }\n replaced = addAppIdToImages(replaced, xAppId);\n replaced = fixTableWidthLayout(replaced);\n replaced = replaceInternalLinks(replaced);\n replaced = replaceStringVariables(replaced);\n return replaced;\n};\n\nexport const isEmptyHtml = html => !html || html.trim() === '
'\n + `'\n + '
'\n ,\n },\n {\n name: 'youtube',\n url: [\n /^youtube\\.com\\/watch\\?v=([\\w-]+)/,\n /^youtube\\.com\\/v\\/([\\w-]+)/,\n /^youtube\\.com\\/embed\\/([\\w-]+)/,\n /^youtu\\.be\\/([\\w-]+)/,\n ],\n html: url => ''\n + `'\n + '
'\n ,\n },\n {\n name: 'vimeo',\n url: [\n /^vimeo\\.com\\/(\\d+)/,\n /^vimeo\\.com\\/[^/]+\\/[^/]+\\/video\\/(\\d+)/,\n /^vimeo\\.com\\/album\\/[^/]+\\/video\\/(\\d+)/,\n /^vimeo\\.com\\/channels\\/[^/]+\\/(\\d+)/,\n /^vimeo\\.com\\/groups\\/[^/]+\\/videos\\/(\\d+)/,\n /^vimeo\\.com\\/ondemand\\/[^/]+\\/(\\d+)/,\n /^player\\.vimeo\\.com\\/video\\/(\\d+)/,\n ],\n html: url => ''\n + `'\n + '
'\n ,\n },\n {\n name: 'matterport',\n url: /my\\.matterport\\.com\\/show\\/\\?m=(\\w+)/,\n html: url => ''\n + `'\n + '
'\n ,\n },\n // {\n // name: 'spotify',\n // url: [\n // /^open\\.spotify\\.com\\/(artist\\/\\w+)/,\n // /^open\\.spotify\\.com\\/(album\\/\\w+)/,\n // /^open\\.spotify\\.com\\/(track\\/\\w+)/,\n // ],\n // html: url => ''\n // + `'\n // + '
'\n // ,\n // },\n // {\n // name: 'instagram',\n // url: /^instagram\\.com\\/p\\/(\\w+)/,\n // },\n // {\n // name: 'twitter',\n // url: /^twitter\\.com/,\n // },\n // {\n // name: 'googleMaps',\n // url: /^google\\.com\\/maps/,\n // },\n // {\n // name: 'flickr',\n // url: /^flickr\\.com/,\n // },\n // {\n // name: 'facebook',\n // url: /^facebook\\.com/,\n // },\n];\n\n/**\n * Tries to match `url` to `pattern`.\n *\n * @param {String} url The URL of the media.\n * @param {RegExp} pattern The pattern that should accept the media URL.\n * @returns {Array|null}\n */\nconst getUrlMatches = (url, pattern) => {\n // 1. Try to match without stripping the protocol and \"www\" subdomain.\n let match = url.match(pattern);\n\n if (match) {\n return match;\n }\n\n // 2. Try to match after stripping the protocol.\n let rawUrl = url.replace(/^https?:\\/\\//, '');\n match = rawUrl.match(pattern);\n\n if (match) {\n return match;\n }\n\n // 3. Try to match after stripping the \"www\" subdomain.\n rawUrl = rawUrl.replace(/^www\\./, '');\n match = rawUrl.match(pattern);\n\n if (match) {\n return match;\n }\n\n return null;\n};\n\nexport const detectPattern = (patterns, url) => {\n for (let i = 0; i < patterns.length; i++) {\n const match = getUrlMatches(url, patterns[i]);\n\n if (match) {\n return match;\n }\n }\n return null;\n};\n\nconst replaceVideo = (html) => {\n const match = html.match(oembedRegex);\n\n if (!match) {\n return html;\n }\n\n let replaced = html;\n\n for (let m = 0; m < match.length; m++) {\n const urlMatch = match[m].match(urlRegex);\n const url = urlMatch?.[1].trim();\n\n for (let i = 0; i < videoProviders.length; i++) {\n let pattern = videoProviders[i].url;\n\n if (!Array.isArray(pattern)) {\n pattern = [pattern];\n }\n\n const patternMatch = detectPattern(pattern, url);\n if (patternMatch?.[1]) {\n replaced = replaced.replace(match[m], videoProviders[i].html(patternMatch[1]));\n }\n }\n }\n\n return replaced;\n};\n\nconst addNoContextMenu = (html) => {\n const match = html.match(imgRegex);\n\n if (!match) {\n return html;\n }\n let replaced = html;\n\n for (let m = 0; m < match.length; m++) {\n const withNoContext = match[m].replace('