\r\n {label && (\r\n \r\n {`${label}:`}\r\n \r\n )}\r\n
\r\n {validationError && (\r\n \r\n {task.name.slice(0, 1)} \r\n \r\n {task.name}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nTaskName.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n task: PropTypes.object.isRequired,\r\n className: PropTypes.string,\r\n};\r\n\r\nTaskName.defaultProps = {\r\n className: null,\r\n};\r\n\r\nexport default withStyles(styles)(TaskName);\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport classnames from 'classnames';\r\n\r\nimport { Typography, Grid, Hidden } from '@material-ui/core';\r\n\r\nimport apiUrls from '../../youwell-common/apiUrls';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n },\r\n stepHeader: {\r\n background: theme.colors.grey1,\r\n padding: theme.spacing(1, 4),\r\n },\r\n step: {\r\n marginBottom: theme.spacing(4),\r\n },\r\n stepContent: {\r\n padding: theme.spacing(1, 4),\r\n },\r\n textContent: {\r\n },\r\n imageContent: {\r\n },\r\n padRight: {\r\n paddingRight: theme.spacing(1),\r\n },\r\n image: {\r\n width: '100%',\r\n },\r\n text: {\r\n marginBottom: theme.spacing(3),\r\n },\r\n});\r\n\r\nclass TaskScript extends React.Component {\r\n render() {\r\n const {\r\n classes, translate, script,\r\n } = this.props;\r\n\r\n if (script === null) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {script.steps && script.steps.map((step, index) => (\r\n
\r\n );\r\n }\r\n}\r\n\r\nTaskScript.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n script: PropTypes.object.isRequired,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(TaskScript));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n withStyles, Typography, Button,\r\n} from '@material-ui/core';\r\nimport { connect } from 'react-redux';\r\nimport { Link, Prompt } from 'react-router-dom';\r\nimport { getTranslate, Translate } from 'react-localize-redux';\r\n\r\nimport { BackIcon } from '../icons';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n minHeight: 70,\r\n background: theme.colors.grey2,\r\n marginBottom: theme.spacing(2),\r\n padding: theme.spacing(2, 4),\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n mainTitle: {\r\n flex: '1 1 auto',\r\n },\r\n button: {\r\n marginLeft: theme.spacing(2),\r\n '@media print': {\r\n display: 'none',\r\n },\r\n },\r\n backLink: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n marginLeft: theme.spacing(2),\r\n\r\n '@media print': {\r\n display: 'none',\r\n },\r\n },\r\n underline: {\r\n lineHeight: '1.2rem',\r\n borderBottom: theme.borders.normal,\r\n borderBottomColor: theme.colors.blue4,\r\n },\r\n backIcon: {\r\n marginRight: theme.spacing(1),\r\n },\r\n});\r\n\r\nclass TopActionBar extends React.Component {\r\n clickBack = () => {\r\n if (this.props.backLink?.navigateBack) {\r\n window.history.back();\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n translate, classes, title, onSave, saveEnabled, linkAction, linkActionText, studentData, backLink,\r\n } = this.props;\r\n\r\n return (\r\n \r\n \r\n \r\n {`${translate('common.step')} ${index + 1}`}\r\n \r\n \r\n \r\n {!(index % 2) && (\r\n \r\n 
\r\n \r\n )}\r\n\r\n \r\n \r\n \r\n {`${translate('common.step')} ${index + 1}`}\r\n \r\n \r\n \r\n {step.text}\r\n \r\n \r\n\r\n {!!(index % 2) && (\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n ))}\r\n \r\n \r\n {linkActionText}\r\n \r\n )}\r\n {backLink && (\r\n \r\n \r\n \r\n \r\n )}\r\n {onSave && saveEnabled && (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nTopActionBar.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n onSave: PropTypes.func,\r\n title: PropTypes.string,\r\n saveEnabled: PropTypes.bool,\r\n linkAction: PropTypes.string,\r\n linkActionText: PropTypes.string,\r\n studentData: PropTypes.object,\r\n backLink: PropTypes.object,\r\n};\r\n\r\nTopActionBar.defaultProps = {\r\n onSave: null,\r\n title: null,\r\n saveEnabled: true,\r\n linkAction: null,\r\n linkActionText: null,\r\n studentData: null,\r\n backLink: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(TopActionBar));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useSelector } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport classnames from 'classnames/bind';\r\n\r\nimport {\r\n FormControl, FormLabel, Input, Select, MenuItem, FormHelperText, InputAdornment, IconButton, makeStyles,\r\n} from '@material-ui/core';\r\n\r\nimport { ClearIcon } from '../icons';\r\n\r\nconst combineClasses = (classes1, classes2) => {\r\n if (!classes1) { return classes2; }\r\n if (!classes2) { return classes1; }\r\n\r\n return [...Object.keys(classes1), ...Object.keys(classes2)]\r\n .reduce((prev, current) => ({ ...prev, [current]: classnames(classes1[current], classes2[current]) }), {});\r\n};\r\n\r\nconst useStyles = makeStyles((theme) => {\r\n const inputCommon = {\r\n marginLeft: theme.spacing(2),\r\n flex: '1 1 auto',\r\n '&$disabled': {\r\n color: theme.palette.common.black,\r\n },\r\n };\r\n\r\n return {\r\n root: {\r\n background: theme.palette.common.white,\r\n padding: theme.spacing(2),\r\n border: theme.borders.thickSecondary,\r\n borderColor: theme.colors.transparent,\r\n\r\n '&:focus-within': {\r\n border: theme.borders.thickSecondary,\r\n\r\n '& $endAdornment': {\r\n visibility: 'visible',\r\n },\r\n },\r\n },\r\n error: {\r\n border: theme.borders.normal,\r\n borderColor: theme.palette.error.main,\r\n },\r\n inner: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'baseline',\r\n },\r\n label: {\r\n '&$focused': {\r\n color: theme.palette.grey[600],\r\n },\r\n },\r\n inputText: {\r\n ...inputCommon,\r\n },\r\n inputSelect: {\r\n ...inputCommon,\r\n // Overriding margin added by MUI for inputs with labels\r\n 'label + &': { marginTop: 0 },\r\n },\r\n inputForm: {\r\n // Overriding margin added by MUI for inputs with labels\r\n 'label + &': { marginTop: 0 },\r\n },\r\n endAdornment: {\r\n visibility: 'hidden',\r\n },\r\n inputInput: {\r\n padding: 0,\r\n },\r\n selectInput: {\r\n padding: `0 ${theme.spacing(3)}px 0 0`,\r\n '&:focus': {\r\n backgroundColor: theme.palette.common.white,\r\n },\r\n },\r\n focused: {\r\n },\r\n disabled: {\r\n },\r\n };\r\n});\r\n\r\nconst VimoInput = ({\r\n className, hideIfNoValue, id, label, value, type, readOnly, selects, onChange, InputProps, validationError,\r\n autoFocus, onClear, defaultText, multiline, onEnter, inputSuffix, labelNoTranslate,\r\n}) => {\r\n const classes = useStyles();\r\n const translate = useSelector(state => getTranslate(state.localize));\r\n\r\n const handleKeyPress = (e) => {\r\n if (e.key === 'Enter') {\r\n onEnter();\r\n }\r\n };\r\n\r\n if (readOnly && hideIfNoValue && !value) {\r\n return null;\r\n }\r\n\r\n const formLabel = labelNoTranslate || (label && `${translate(label)}:`);\r\n\r\n return (\r\n \r\n \r\n {studentData ? studentData.name : title}\r\n \r\n {studentData?.extendedProperties && studentData?.extendedProperties.class && (\r\n \r\n \r\n )}\r\n
\r\n\r\n {linkAction && (\r\n \r\n {formLabel && (\r\n \r\n {formLabel}\r\n \r\n )}\r\n\r\n { readOnly || !selects || selects.length === 0 ? (\r\n v.key === value) || {}).value) || value || ''}\r\n disableUnderline\r\n type={type}\r\n disabled={readOnly}\r\n onChange={onChange}\r\n classes={combineClasses(\r\n { formControl: classes.inputForm, disabled: classes.disabled, input: classes.inputInput },\r\n InputProps && InputProps.classes,\r\n )}\r\n autoFocus={autoFocus}\r\n endAdornment={inputSuffix ? (\r\n \r\n {inputSuffix}\r\n \r\n ) : onClear && !readOnly && (\r\n \r\n \r\n \r\n )}\r\n placeholder={defaultText}\r\n multiline={multiline}\r\n minRows={5}\r\n onKeyPress={onEnter ? handleKeyPress : null}\r\n {...(InputProps || {})}\r\n />\r\n ) : (\r\n
\r\n {validationError && (\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n )}\r\n \r\n \r\n {heading && (\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nVimoModal.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n children: PropTypes.node,\r\n heading: PropTypes.node,\r\n onClose: PropTypes.func.isRequired,\r\n open: PropTypes.bool.isRequired,\r\n wide: PropTypes.bool,\r\n};\r\n\r\nVimoModal.defaultProps = {\r\n children: null,\r\n heading: null,\r\n wide: false,\r\n};\r\n\r\nexport default withStyles(styles)(VimoModal);\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport classnames from 'classnames';\r\nimport { Typography } from '@material-ui/core';\r\n\r\nimport { TaskContent } from '../../youwell-common/components';\r\nimport TaskScript from './TaskScript';\r\nimport { parseInternalLink } from '../../youwell-common/taskContentUtils';\r\nimport urls from '../../app/urls';\r\n\r\nimport * as PatientStore from '../../app/store/PatientStore';\r\nimport { isBrowser } from '../../youwell-common/browserUtils';\r\n\r\nexport const AUTOSAVE_TIMEOUT_INTERVAL = 1000; // miliseconds\r\n\r\nexport const styles = theme => ({\r\n root: {\r\n },\r\n noContent: {\r\n padding: theme.spacing(4),\r\n margin: theme.spacing(2),\r\n },\r\n htmlContent: {\r\n color: theme.colors.blue4,\r\n },\r\n elementRoot: {\r\n\r\n },\r\n elementContent: {\r\n\r\n },\r\n elementHeader: {\r\n background: theme.colors.grey2,\r\n padding: theme.spacing(1, 2),\r\n },\r\n});\r\n\r\nconst useStyles = makeStyles(theme => styles(theme), { name: 'VimoTaskContent' });\r\n\r\nconst handleScripts = (element) => {\r\n if (element.script) {\r\n return (\r\n \r\n {heading}\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n {children}\r\n
\r\n \r\n \r\n {translate('dashboard.noLicenseNotification')}\r\n \r\n )}\r\n\r\n
\r\n );\r\n};\r\n\r\nDashboard.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n profileData: PropTypes.object,\r\n studentList: PropTypes.array,\r\n};\r\n\r\nDashboard.defaultProps = {\r\n profileData: null,\r\n studentList: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n profileData: state.auth.profileData,\r\n studentList: state.patient.list,\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Dashboard));\r\n","import * as React from 'react';\r\nimport {\r\n Route, Switch,\r\n} from 'react-router-dom';\r\n\r\nimport urls from '../../app/urls';\r\nimport Dashboard from './Dashboard';\r\nimport Profile from './Profile';\r\nimport Page from './Page';\r\nimport NewForm from './NewForm';\r\n\r\nclass Index extends React.Component {\r\n render() {\r\n return (\r\n \r\n \r\n {translate('dashboard.content')}\r\n \r\n\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n {translate('dashboard.students')}\r\n \r\n \r\n\r\n {canEdit && (\r\n \r\n
\r\n \r\n {studentList && studentList.length > 0 ? studentList.map(student => (\r\n \r\n {translate('dashboard.noStudentsDescription')}\r\n \r\n )}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nNewForm.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n hasLoaded: PropTypes.bool.isRequired,\r\n task: PropTypes.object,\r\n};\r\n\r\nNewForm.defaultProps = {\r\n task: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n const itemId = ownProps?.match?.params?.taskId;\r\n const task = itemId && state.program.content && state.program.content[state.pageSettings.appConfig?.contentProgramId]?.modules\r\n ?.reduce((prev, curr) => prev || curr.tasks?.find(d => d.id === itemId)\r\n , null);\r\n\r\n return {\r\n translate: getTranslate(state.localize),\r\n clientConfig: state.auth.clientConfig,\r\n hasLoaded: Boolean(state.program.content && state.program.content[state.pageSettings.appConfig?.contentProgramId]),\r\n task,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(NewForm));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { Typography } from '@material-ui/core';\r\n\r\nimport { InfoMessage, TopActionBar } from '../../common/components';\r\nimport urls from '../../app/urls';\r\nimport ResourceTaskContent from '../resource/components/ResourceTaskContent';\r\nimport apiUrls from '../../youwell-common/apiUrls';\r\nimport { PrintIcon } from '../../common/icons';\r\n\r\nexport const styles = theme => ({\r\n root: {\r\n },\r\n content: {\r\n minHeight: '80vh',\r\n padding: theme.spacing(2, 4),\r\n\r\n [theme.breakpoints.up('sm')]: {\r\n padding: theme.spacing(4),\r\n },\r\n },\r\n print: {\r\n marginBottom: theme.spacing(2),\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n\r\n '@media print': {\r\n display: 'none',\r\n },\r\n },\r\n file: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n icon: {\r\n marginLeft: theme.spacing(1),\r\n },\r\n underline: {\r\n borderBottom: '1px solid',\r\n },\r\n});\r\n\r\nconst Task = ({\r\n classes, translate, task, hasLoaded,\r\n}) => {\r\n if (!task) {\r\n return hasLoaded ? (\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nTask.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n hasLoaded: PropTypes.bool.isRequired,\r\n task: PropTypes.object,\r\n};\r\n\r\nTask.defaultProps = {\r\n task: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n const itemId = ownProps?.match?.params?.taskId;\r\n const task = itemId && state.program.content && state.program.content[state.pageSettings.appConfig?.contentProgramId]?.modules\r\n ?.reduce((prev, curr) => prev || curr.tasks?.find(d => d.id === itemId)\r\n , null);\r\n\r\n return {\r\n translate: getTranslate(state.localize),\r\n clientConfig: state.auth.clientConfig,\r\n hasLoaded: Boolean(state.program.content && state.program.content[state.pageSettings.appConfig?.contentProgramId]),\r\n task,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Task));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { Prompt } from 'react-router-dom';\r\n\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport {\r\n Typography, IconButton, ListItem, ListItemText, List, TextField, Button,\r\n} from '@material-ui/core';\r\n\r\nimport {\r\n validateEmail, validateRequired, validatePassword, validatePasswordConfirm, validateAllFields, validateField,\r\n} from '../../youwell-common/validationUtils';\r\nimport * as AuthStore from '../../app/store/AuthStore';\r\nimport { hasValue } from '../../youwell-common/objectUtils';\r\nimport Auth from '../../youwell-common/Auth';\r\nimport { loginLevels } from '../../youwell-common/constants';\r\nimport { CancelIcon, SaveIcon, EditIcon } from '../../common/icons';\r\nimport { timestamp } from '../../youwell-common/dateUtils';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n padding: theme.spacing(1),\r\n },\r\n details: {\r\n display: 'flex',\r\n padding: theme.spacing(2),\r\n },\r\n imageContainer: {\r\n margin: theme.spacing(1),\r\n },\r\n imageField: {\r\n background: theme.palette.common.white,\r\n },\r\n textFields: {\r\n flex: '1 1 auto',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n row: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n field: {\r\n margin: theme.spacing(1),\r\n flexGrow: 1,\r\n },\r\n actionContainer: {\r\n margin: theme.spacing(1),\r\n marginLeft: -theme.spacing(1),\r\n border: '2px solid transparent',\r\n background: theme.palette.common.white,\r\n },\r\n infoMessage: {\r\n flex: '1 1 auto',\r\n margin: theme.spacing(1),\r\n padding: theme.spacing(2),\r\n background: theme.palette.common.white,\r\n border: theme.borders.mediumSecondary,\r\n borderColor: theme.colors.blue,\r\n color: theme.colors.blue,\r\n },\r\n actions: {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n margin: `${theme.spacing(2)}px ${theme.spacing(1)}px`,\r\n },\r\n button: {\r\n marginLeft: theme.spacing(1),\r\n },\r\n buttonIcon: {\r\n marginRight: theme.spacing(1),\r\n },\r\n section: {\r\n marginTop: theme.spacing(2),\r\n background: theme.palette.common.white,\r\n padding: theme.spacing(2),\r\n },\r\n sectionHeader: {\r\n marginBottom: theme.spacing(1),\r\n },\r\n roleText: {\r\n display: 'flex',\r\n },\r\n roleOrganization: {\r\n marginRight: theme.spacing(1),\r\n marginBottom: theme.spacing(0.5),\r\n },\r\n});\r\n\r\nconst defaultState = {\r\n name: '',\r\n email: '',\r\n phone: '',\r\n newPassword: '',\r\n newPasswordConfirm: '',\r\n imageFileId: '',\r\n userSettings: {},\r\n};\r\n\r\nconst validators = {\r\n name: validateRequired,\r\n email: validateEmail,\r\n newPassword: validatePassword,\r\n newPasswordConfirm: validatePasswordConfirm,\r\n};\r\n\r\nconst stateFromData = (data) => {\r\n const initialState = {\r\n ...defaultState,\r\n hasUnsavedChanges: false,\r\n editing: false,\r\n validationErrors: {},\r\n id: data ? data.id : null,\r\n };\r\n\r\n if (!data) {\r\n return initialState;\r\n }\r\n\r\n return Object.keys(defaultState).reduce(\r\n (obj, key) => (hasValue(data[key]) ? { ...obj, [key]: data[key] } : { ...obj }),\r\n {\r\n ...initialState,\r\n },\r\n );\r\n};\r\n\r\n\r\nclass Profile extends React.Component {\r\n state = stateFromData(this.props.userProfile);\r\n\r\n\r\n componentDidMount() {\r\n this.props.getAllTrustedDevicesForUser();\r\n }\r\n\r\n static getDerivedStateFromProps(props, state) {\r\n if (props.userProfile && !state.id) {\r\n return stateFromData(props.userProfile);\r\n }\r\n return null;\r\n }\r\n\r\n handleChange = name => (event) => {\r\n this.setState({ [name]: event.target.value, hasUnsavedChanges: true }, () => {\r\n if (validators[name]) {\r\n const validationErrors = validateField(this.state, validators[name], name); // eslint-disable-line react/no-access-state-in-setstate\r\n this.setState({ validationErrors });\r\n }\r\n });\r\n }\r\n\r\n handleConfigChange = name => (event) => {\r\n this.setState(prevState => ({\r\n editing: true,\r\n hasUnsavedChanges: true,\r\n userSettings: {\r\n ...prevState.userSettings,\r\n [name]: event.target.value,\r\n },\r\n }));\r\n }\r\n\r\n startEdit = () => {\r\n this.setState({ editing: true });\r\n }\r\n\r\n cancel = () => {\r\n this.setState(stateFromData(this.props.userProfile));\r\n }\r\n\r\n saveChanges = () => {\r\n const validationErrors = validateAllFields(this.state, validators);\r\n\r\n if (!validationErrors.hasErrors) {\r\n const saveData = Object.keys(defaultState).reduce(\r\n (obj, key) => (this.state[key] ? { ...obj, [key]: this.state[key] } : { ...obj }),\r\n {\r\n id: this.props.userProfile.id,\r\n },\r\n );\r\n\r\n this.props.saveUserProfile(saveData, { callback: this.setState({ editing: false, hasUnsavedChanges: false }) });\r\n } else {\r\n this.setState({ validationErrors });\r\n }\r\n }\r\n\r\n handleRemoveTrustedDevicesOK = () => {\r\n this.props.removeAllTrustedDevices();\r\n }\r\n\r\n render() {\r\n const {\r\n classes, translate, userProfile, trustedDevices,\r\n } = this.props;\r\n\r\n if (!userProfile) {\r\n return null;\r\n }\r\n\r\n const loginLevel = Auth.getLoginLevel();\r\n const isLoggedInLevel4 = loginLevel === loginLevels.level4;\r\n const readOnly = !this.state.editing;\r\n\r\n return (\r\n \r\n {task.printFileId && (\r\n \r\n )}\r\n\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nProfile.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n userProfile: PropTypes.object.isRequired,\r\n saveUserProfile: PropTypes.func.isRequired,\r\n trustedDevices: PropTypes.array.isRequired,\r\n getAllTrustedDevicesForUser: PropTypes.func.isRequired,\r\n removeAllTrustedDevices: PropTypes.func.isRequired,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n userProfile: state.auth.profileData,\r\n trustedDevices: state.auth.trustedDevices,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(AuthStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Profile));\r\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 { Link } from 'react-router-dom';\r\nimport classnames from 'classnames';\r\n\r\nimport { withStyles, Typography } from '@material-ui/core';\r\n\r\nimport { ForwardIcon } from '../../../common/icons';\r\nimport urls from '../../../app/urls';\r\nimport { Image } from '../../../youwell-common/components';\r\n\r\nimport flagImage from '../../../common/image/icon_flag.png';\r\nimport contentImage from '../../../common/image/icon_contents.png';\r\nimport kiteImage from '../../../common/image/icon_kite.png';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n paddingBottom: theme.spacing(2),\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n flexDirection: 'column',\r\n paddingBottom: theme.spacing(1),\r\n },\r\n },\r\n infoBox: {\r\n flexBasis: `calc(100% / 4 - ${theme.spacing(2)}px)`,\r\n margin: theme.spacing(1),\r\n background: theme.colors.grey2,\r\n position: 'relative',\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n margin: theme.spacing(0, 0, 1, 0),\r\n },\r\n },\r\n header: {\r\n padding: theme.spacing(1, 2),\r\n background: theme.colors.blue4,\r\n color: theme.palette.common.white,\r\n },\r\n links: {\r\n padding: theme.spacing(2),\r\n },\r\n link: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n marginBottom: theme.spacing(1),\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n justifyContent: 'space-between',\r\n },\r\n '&$disabled': {\r\n color: theme.palette.text.secondary,\r\n cursor: 'initial',\r\n },\r\n },\r\n linksImage: {\r\n position: 'absolute',\r\n bottom: theme.spacing(1),\r\n right: theme.spacing(1),\r\n width: 75,\r\n\r\n [theme.breakpoints.down('sm')]: {\r\n position: 'static',\r\n },\r\n [theme.breakpoints.down('xs')]: {\r\n display: 'none',\r\n },\r\n },\r\n linksImageTop: {\r\n position: 'absolute',\r\n top: -16,\r\n right: -20,\r\n width: 90,\r\n\r\n [theme.breakpoints.down('sm')]: {\r\n position: 'static',\r\n },\r\n [theme.breakpoints.down('xs')]: {\r\n display: 'none',\r\n },\r\n },\r\n underline: {\r\n borderBottom: '1px solid',\r\n },\r\n icon: {\r\n marginLeft: theme.spacing(1),\r\n },\r\n disabled: {\r\n\r\n },\r\n});\r\n\r\nconst ContentBox = ({ classes, module, image }) => module && (\r\n \r\n {/*
\r\n\r\n\r\n {trustedDevices?.length > 0 && (\r\n \r\n
*/}\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n {!isLoggedInLevel4 && (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n )}\r\n\r\n \r\n {this.state.editing ? (\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 {translate('profile.myTrustedDevices')}\r\n \r\n\r\n
\r\n )}\r\n\r\n - \r\n {trustedDevices.map(device => (\r\n
\r\n \r\n {translate('profile.removeTrustedDevices')}\r\n \r\n
\r\n \r\n \r\n {module.name}\r\n \r\n
\r\n);\r\n\r\nContentBox.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n module: PropTypes.object,\r\n image: PropTypes.string,\r\n};\r\n\r\nContentBox.defaultProps = {\r\n module: null,\r\n image: null,\r\n};\r\n\r\nconst ProgramInformation = ({\r\n className, classes, translate, methodModule, teachingModule, formsModule, resourceProgram, hasLicense,\r\n// eslint-disable-next-line arrow-body-style\r\n}) => {\r\n return (\r\n \r\n {module.tasks?.map(task => (\r\n \r\n \r\n {task.name}\r\n \r\n \r\n ))}\r\n
\r\n {image && \r\n
\r\n );\r\n};\r\n\r\nProgramInformation.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n methodModule: PropTypes.object,\r\n teachingModule: PropTypes.object,\r\n resourceProgram: PropTypes.object,\r\n formsModule: PropTypes.object,\r\n className: PropTypes.string,\r\n hasLicense: PropTypes.bool,\r\n};\r\n\r\nProgramInformation.defaultProps = {\r\n methodModule: null,\r\n teachingModule: null,\r\n resourceProgram: null,\r\n formsModule: null,\r\n className: null,\r\n hasLicense: false,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n methodModule: state.program.content && state.program.content[state.pageSettings.appConfig?.contentProgramId]?.modules?.find(d => d.id === state.pageSettings.appConfig?.methodModuleId),\r\n teachingModule: state.program.content && state.program.content[state.pageSettings.appConfig?.contentProgramId]?.modules?.find(d => d.id === state.pageSettings.appConfig?.teachingModuleId),\r\n resourceProgram: state.program.content && state.program.content[state.pageSettings.appConfig?.resourcesProgramId],\r\n formsModule: state.program.content && state.program.content[state.pageSettings.appConfig?.contentProgramId]?.modules?.find(d => d.id === state.pageSettings.appConfig?.formsModuleId),\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(ProgramInformation));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport classnames from 'classnames';\r\n\r\nimport faceImage from '../../../common/image/Face.svg';\r\nimport {\r\n InfoBox, TaskLink, VimoLink, SkillLink,\r\n} from '../../../common/components';\r\nimport {\r\n getProgram, getCurrentSkills, getTodaysTasks,\r\n} from '../../../common/utils/programUtils';\r\nimport urls from '../../../app/urls';\r\nimport { green3 } from '../../../app/style/theme';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n paddingBottom: theme.spacing(2),\r\n marginBottom: theme.spacing(2),\r\n borderBottom: theme.borders.normal,\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n flexDirection: 'column',\r\n paddingBottom: theme.spacing(1),\r\n },\r\n },\r\n infoBox: {\r\n flexBasis: `calc(100% / 2 - ${theme.spacing(2)}px)`,\r\n overflow: 'hidden',\r\n margin: theme.spacing(1),\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n flexBasis: `calc(100% - ${theme.spacing(1)}px)`,\r\n margin: theme.spacing(0, 0, 1, 0),\r\n },\r\n },\r\n hideOnSmall: {\r\n [theme.breakpoints.down('xs')]: {\r\n display: 'none',\r\n },\r\n },\r\n firstBox: {\r\n flex: '0 0 calc(50% - 16px)',\r\n display: 'flex',\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n flex: '0 0 calc(50% - 8px)',\r\n },\r\n },\r\n firstContentBox: {\r\n background: theme.colors.green3,\r\n marginRight: 0,\r\n },\r\n links: {\r\n flex: '1 1 auto',\r\n margin: theme.spacing(1, 1, 1, 0),\r\n background: theme.colors.grey2,\r\n padding: theme.spacing(2),\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n margin: theme.spacing(0, 0, 1, 0),\r\n },\r\n },\r\n link: {\r\n marginBottom: theme.spacing(1),\r\n },\r\n});\r\n\r\nclass StudentLine extends React.Component {\r\n render() {\r\n const {\r\n classes, translate, studentData, hasLicense,\r\n } = this.props;\r\n\r\n const programData = getProgram(studentData);\r\n const currentSkills = getCurrentSkills(programData);\r\n const todaysTasks = getTodaysTasks(programData);\r\n\r\n return (\r\n \r\n \r\n {translate('dashboard.aboutTheProgramHeader')}\r\n \r\n
\r\n\r\n \r\n {formsModule?.tasks.map(form => (\r\n \r\n \r\n {form.name}\r\n \r\n \r\n ))}\r\n \r\n \r\n {translate('dashboard.70skills')}\r\n \r\n \r\n
\r\n \r\n \r\n {translate('dashboard.resourcesHeader')}\r\n \r\n
\r\n \r\n {resourceProgram?.modules?.map(m => (\r\n \r\n \r\n {m.name}\r\n \r\n \r\n ))}\r\n
\r\n \r\n \r\n {currentSkills.map(skill => \r\n {todaysTasks.map(task =>
\r\n );\r\n }\r\n}\r\n\r\nStudentLine.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n studentData: PropTypes.object.isRequired,\r\n hasLicense: PropTypes.bool,\r\n};\r\n\r\nStudentLine.defaultProps = {\r\n hasLicense: false,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(StudentLine));\r\n","import * as React from 'react';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { Button, makeStyles, MobileStepper } from '@material-ui/core';\r\n\r\nimport * as AuthStore from '../../../app/store/AuthStore';\r\nimport * as PageSettingStore from '../../../app/store/PageSettingStore';\r\n\r\nimport { VimoModal, VimoTaskContent } from '../../../common/components';\r\nimport { NextIcon, PrevIcon } from '../../../common/icons';\r\nimport { preloadImagesInModule } from '../../../youwell-common/taskContentUtils';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n modalContainer: {\r\n width: 700,\r\n // height: 700,\r\n\r\n '@media screen and (max-height: 700px)': {\r\n width: 'auto',\r\n // height: 'auto',\r\n },\r\n\r\n [theme.breakpoints.down('sm')]: {\r\n width: `calc(100% - ${theme.spacing(4)}px)`,\r\n },\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n // height: 'auto',\r\n },\r\n\r\n },\r\n modalContent: {\r\n padding: '0 2px',\r\n },\r\n content: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n maxHeight: '60vh',\r\n },\r\n task: {\r\n flex: '1 1 auto',\r\n overflowY: 'auto',\r\n },\r\n navigation: {\r\n padding: theme.spacing(2),\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n background: theme.colors.grey1,\r\n },\r\n navigationProgress: {\r\n background: theme.colors.grey1,\r\n },\r\n navigationDot: {\r\n width: theme.spacing(4),\r\n height: theme.spacing(4),\r\n },\r\n navSpacer: {\r\n width: 64,\r\n },\r\n taskElementRoot: {\r\n marginBottom: 0,\r\n background: theme.colors.grey2,\r\n },\r\n taskElementContent: {\r\n marginBottom: 0,\r\n\r\n '&.htmlcontent figure.image img': {\r\n maxHeight: '48vh',\r\n },\r\n },\r\n}));\r\n\r\nconst VimoIntroTour = () => {\r\n const dispatch = useDispatch();\r\n const classes = useStyles();\r\n const translate = useSelector(state => getTranslate(state.localize));\r\n const profileData = useSelector(state => state.auth.profileData);\r\n const showIntroTourFromState = useSelector(state => state.pageSettings.showIntroTour);\r\n const introModule = useSelector(state => state.program.content\r\n && state.program.content[state.pageSettings.appConfig?.contentProgramId]?.modules\r\n ?.find(d => d.id === state.pageSettings.appConfig?.introTourModuleId));\r\n\r\n const [showIntro, setShowIntro] = React.useState(false);\r\n const [page, setPage] = React.useState(0);\r\n\r\n React.useEffect(() => {\r\n setShowIntro(profileData?.userSettings?.showIntroTour || showIntroTourFromState);\r\n }, [profileData?.userSettings?.showIntroTour, showIntroTourFromState]);\r\n\r\n React.useEffect(() => {\r\n if (showIntro && introModule) {\r\n preloadImagesInModule(introModule);\r\n }\r\n }, [introModule, showIntro]);\r\n\r\n if (!introModule) {\r\n return null;\r\n }\r\n\r\n const navigate = step => () => {\r\n setPage(prev => prev + step);\r\n };\r\n\r\n const close = () => {\r\n setShowIntro(false);\r\n dispatch(PageSettingStore.actionCreators.showIntroTour(false));\r\n\r\n if (profileData?.userSettings?.showIntroTour) {\r\n dispatch(AuthStore.actionCreators.setConfig({ key: 'showIntroTour', value: false }));\r\n }\r\n };\r\n\r\n const tasks = introModule?.tasks || [];\r\n\r\n return (\r\n \r\n
\r\n\r\n {currentSkills?.length ? (\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default VimoIntroTour;\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Route, Switch,\r\n} from 'react-router-dom';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport { IdleTimer } from '../../youwell-common/components';\r\nimport { logoutReasons } from '../../youwell-common/constants';\r\n\r\nimport * as AuthStore from '../../app/store/AuthStore';\r\n\r\nimport LoadStudents from './components/LoadStudents';\r\nimport LoadProgramDetails from './components/LoadProgramDetails';\r\n\r\nimport Layout from './Layout';\r\nimport Home from '../home/Index';\r\nimport Student from '../student/Index';\r\nimport Program from '../program/Index';\r\nimport Resource from '../resource/Index';\r\nimport SelectSchool from './components/SelectSchool';\r\nimport RegisterSchool from './components/RegisterSchool';\r\nimport Users from '../users/Index';\r\n\r\nimport urls from '../../app/urls';\r\nimport LoadProfileData from '../../common/components/LoadProfileData';\r\n\r\nconst USER_IDLE_TIMEOUT_IN_MINUTES = 30;\r\n\r\nclass Index extends React.Component {\r\n logoutOnIdle = () => {\r\n this.props.logout(logoutReasons.idleTimeout);\r\n }\r\n\r\n render() {\r\n const {\r\n match, appConfig,\r\n } = this.props;\r\n\r\n // Old code.. All parts should be removed\r\n // if (profileData?.selectedRole?.organizationName === 'Ukjent skole'\r\n // && !location.pathname.startsWith(urls.inside.school.home)) {\r\n // return \r\n {page > 0 ? (\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\nLayout.propTypes = {\r\n children: PropTypes.oneOfType([\r\n PropTypes.arrayOf(PropTypes.node),\r\n PropTypes.node,\r\n ]),\r\n classes: PropTypes.object.isRequired,\r\n loading: PropTypes.bool,\r\n errorMessage: PropTypes.string,\r\n studentId: PropTypes.string,\r\n};\r\n\r\nLayout.defaultProps = {\r\n children: null,\r\n loading: false,\r\n errorMessage: null,\r\n studentId: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n loading: state.auth.loading || state.patient.loading || state.program.loading || state.teacher.loading,\r\n errorMessage: [].concat(state.auth.errors, state.patient.errors, state.program.errors, state.teacher.errors).filter(val => val).join(''),\r\n});\r\n\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Layout));\r\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 { withStyles } from '@material-ui/core/styles';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport { Typography } from '@material-ui/core';\r\n\r\nimport * as AuthStore from '../../../app/store/AuthStore';\r\nimport { ErrorMessage } from '../../../youwell-common/components';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n margin: theme.spacing(2),\r\n border: theme.borders.normal,\r\n padding: theme.spacing(2),\r\n },\r\n text: {\r\n color: theme.colors.blue2,\r\n },\r\n});\r\n\r\nclass ErrorDescription extends React.Component {\r\n render() {\r\n const {\r\n classes, translate, errorMessage,\r\n } = this.props;\r\n\r\n if (!errorMessage) {\r\n return null;\r\n }\r\n\r\n const description = translate(`errorDescriptions.${errorMessage}`, null, { onMissingTranslation: () => null });\r\n\r\n if (!description) {\r\n return (
\r\n \r\n {description}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nErrorDescription.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n clearError: PropTypes.func.isRequired,\r\n errorMessage: PropTypes.string,\r\n};\r\n\r\nErrorDescription.defaultProps = {\r\n errorMessage: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(AuthStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ErrorDescription));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Link } from 'react-router-dom';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Translate } from 'react-localize-redux';\r\n\r\nimport {\r\n Typography, Menu, MenuItem, IconButton, Hidden, Divider,\r\n} from '@material-ui/core';\r\n\r\nimport {\r\n GridIcon, LogoutIcon, PersonIcon, ExpandIcon, CollapseIcon, RoleIcon,\r\n} from '../../../common/icons';\r\n\r\nimport logo from '../../../common/image/logo negativ stor.svg';\r\nimport * as AuthStore from '../../../app/store/AuthStore';\r\nimport * as PageSettingStore from '../../../app/store/PageSettingStore';\r\nimport urls from '../../../app/urls';\r\nimport { Image } from '../../../youwell-common/components';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n height: theme.sizes.headerHeight,\r\n padding: `0 ${theme.spacing(4)}px`,\r\n display: 'flex',\r\n flexShrink: 0,\r\n alignItems: 'center',\r\n color: theme.colors.grey1,\r\n background: theme.colors.blue4,\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n padding: theme.spacing(0, 1),\r\n },\r\n },\r\n titleLogo: {\r\n flex: '1 1 auto',\r\n textAlign: 'center',\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n textAlign: 'left',\r\n },\r\n },\r\n logo: {\r\n width: 100,\r\n },\r\n menuContainer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n\r\n '@media print': {\r\n display: 'none',\r\n },\r\n },\r\n iconLabelDiv: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n icon: {\r\n marginRight: theme.spacing(1),\r\n },\r\n dropMenu: {\r\n top: 40,\r\n },\r\n menuItem: {\r\n borderBottom: theme.borders.normal,\r\n },\r\n studentName: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n student: {\r\n minWidth: 150,\r\n },\r\n activeStudent: {\r\n background: theme.colors.grey2,\r\n },\r\n underline: {\r\n borderBottom: '1px solid',\r\n },\r\n});\r\n\r\nclass Header extends React.Component {\r\n state = {\r\n studentMenuAnchorEl: null,\r\n };\r\n\r\n changeRole = () => {\r\n this.props.logoutRole();\r\n };\r\n\r\n openMenu = name => (event) => {\r\n this.setState({ [name]: event.currentTarget });\r\n };\r\n\r\n closeMenu = name => () => {\r\n this.setState({ [name]: null });\r\n };\r\n\r\n showIntroPopup = () => {\r\n this.closeMenu('studentMenuAnchorEl')();\r\n this.props.showIntroTour();\r\n }\r\n\r\n render() {\r\n const {\r\n classes, profileData, studentList, studentData, clientConfig,\r\n } = this.props;\r\n\r\n const hasMoreStudents = studentList && studentList.length > 1;\r\n\r\n return (\r\n \r\n {profileData && (\r\n \r\n \r\n )}\r\n\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nHeader.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n profileData: PropTypes.object,\r\n clientConfig: PropTypes.object.isRequired,\r\n studentData: PropTypes.object,\r\n studentList: PropTypes.array,\r\n // studentId: PropTypes.string,\r\n logoutRole: PropTypes.func.isRequired,\r\n showIntroTour: PropTypes.func.isRequired,\r\n};\r\n\r\nHeader.defaultProps = {\r\n profileData: null,\r\n studentList: null,\r\n studentData: null,\r\n // studentId: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n profileData: state.auth.profileData,\r\n clientConfig: state.auth.clientConfig,\r\n studentList: state.patient.list,\r\n studentData: ownProps.studentId && state.patient.details && state.patient.details[ownProps.studentId],\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(AuthStore.actionCreators, dispatch),\r\n showIntroTour: bindActionCreators(PageSettingStore.actionCreators, dispatch).showIntroTour,\r\n});\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps,\r\n)(withStyles(styles)(Header));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport * as ProgramStore from '../../../app/store/ProgramStore';\r\n\r\nclass LoadProgramDetails extends React.Component {\r\n componentDidMount() {\r\n if (!this.props.hasLoaded) {\r\n if (this.props.content) {\r\n this.props.getPageContent(this.props.programId);\r\n } else {\r\n this.props.getProgramDetails(this.props.programId);\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return null;\r\n }\r\n}\r\n\r\nLoadProgramDetails.propTypes = {\r\n getProgramDetails: PropTypes.func.isRequired,\r\n getPageContent: PropTypes.func.isRequired,\r\n programId: PropTypes.string.isRequired,\r\n hasLoaded: PropTypes.bool.isRequired,\r\n content: PropTypes.bool,\r\n};\r\n\r\nLoadProgramDetails.defaultProps = {\r\n content: false,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n hasLoaded: ownProps.content ? Boolean(state.program.content && state.program.content[ownProps.programId])\r\n : Boolean(state.program.programDetails),\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(ProgramStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LoadProgramDetails);\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport * as PatientStore from '../../../app/store/PatientStore';\r\n\r\nclass LoadPatients extends React.Component {\r\n componentDidMount() {\r\n if (!this.props.studentList) {\r\n this.props.getStudentList();\r\n }\r\n }\r\n\r\n render() {\r\n return null;\r\n }\r\n}\r\n\r\nLoadPatients.propTypes = {\r\n getStudentList: PropTypes.func.isRequired,\r\n studentList: PropTypes.array,\r\n};\r\n\r\nLoadPatients.defaultProps = {\r\n studentList: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n studentList: state.patient.list,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(PatientStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LoadPatients);\r\n","import * as React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport {\r\n Button, Typography, CircularProgress, TextField, NoSsr,\r\n} from '@material-ui/core';\r\n\r\nimport classnames from 'classnames';\r\nimport * as AuthStore from '../../../app/store/AuthStore';\r\nimport urls from '../../../app/urls';\r\nimport {\r\n validateAllFields, validateField, validateRequired, validateEmail,\r\n} from '../../../youwell-common/validationUtils';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n padding: theme.spacing(3),\r\n background: theme.colors.grey1,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n header: {\r\n marginBottom: theme.spacing(3),\r\n },\r\n textField: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n actionButtons: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n marginTop: theme.spacing(3),\r\n },\r\n infoContainer: {\r\n marginTop: theme.spacing(3),\r\n },\r\n loading: {\r\n height: 340,\r\n flex: '1 1 auto',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n hidden: {\r\n display: 'none',\r\n },\r\n});\r\n\r\nconst defaultState = {\r\n school: '',\r\n address: '',\r\n name: '',\r\n email: '',\r\n phone: '',\r\n};\r\n\r\nconst validators = {\r\n school: validateRequired,\r\n address: validateRequired,\r\n name: validateRequired,\r\n email: [validateEmail, validateRequired],\r\n phone: validateRequired,\r\n};\r\n\r\nclass RegisterSchool extends React.Component {\r\n state = {\r\n ...defaultState,\r\n validationErrors: {},\r\n };\r\n\r\n handleChange = name => (event) => {\r\n this.setState({ [name]: event.target.value }, () => {\r\n if (validators[name]) {\r\n const validationErrors = validateField(this.state, validators[name], name); // eslint-disable-line react/no-access-state-in-setstate\r\n this.setState({ validationErrors });\r\n }\r\n });\r\n };\r\n\r\n registerSchool = () => {\r\n const validationErrors = validateAllFields(this.state, validators);\r\n\r\n if (!validationErrors.hasErrors) {\r\n const registerData = {\r\n name: this.state.school,\r\n contactInfo: {\r\n name: this.state.name,\r\n email: this.state.email,\r\n phone: this.state.phone,\r\n address: this.state.address,\r\n },\r\n };\r\n\r\n this.props.registerSchool(registerData, { redirect: urls.inside.home });\r\n } else {\r\n this.setState({ validationErrors });\r\n }\r\n };\r\n\r\n render() {\r\n const {\r\n classes, translate, errorMessage, loading, history,\r\n } = this.props;\r\n\r\n return (\r\n \r\n \r\n {profileData.name}\r\n \r\n
\r\n \r\n\r\n {studentData && (\r\n \r\n \r\n \r\n {studentData.name}\r\n \r\n \r\n \r\n )}\r\n\r\n \r\n {this.state.studentMenuAnchorEl ? \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n {profileData?.userAccess?.editUsers && (\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 \r\n \r\n\r\n {hasMoreStudents && studentList.map(student => (\r\n \r\n \r\n {student.name}\r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n )}\r\n {profileData?.roles?.length > 1 && (\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 {translate('register.contactInformation')}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nRegisterSchool.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n registerSchool: PropTypes.func.isRequired,\r\n history: PropTypes.object.isRequired,\r\n loading: PropTypes.bool,\r\n errorMessage: PropTypes.string,\r\n};\r\n\r\nRegisterSchool.defaultProps = {\r\n loading: false,\r\n errorMessage: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n loading: state.auth.loading,\r\n errorMessage: [].concat(state.auth.errors).filter(val => val).join('\r\n \r\n {translate('register.school')}\r\n \r\n
\r\n\r\n {loading ? (\r\n \r\n
\r\n ) : (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n {errorMessage && (\r\n \r\n \r\n {translate(`errors.${errorMessage}`, null, { onMissingTranslation: ({ translationId }) => translationId })}\r\n \r\n \r\n )}\r\n
\r\n \r\n )}\r\n '),\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n registerSchool: bindActionCreators(AuthStore.actionCreators, dispatch).registerOrganization,\r\n});\r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(RegisterSchool)));\r\n","// Copied from Youwell.Platform.Web\r\nimport * as React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { Translate } from 'react-localize-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport {\r\n Typography, CircularProgress, List, ListItem, ListItemText, ListItemIcon,\r\n} from '@material-ui/core';\r\n\r\nimport * as AuthStore from '../../../app/store/AuthStore';\r\nimport urls from '../../../app/urls';\r\nimport { OrgIcon, PlusIcon } from '../../../common/icons';\r\nimport { withSchools } from '../../../common/withSchools';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n padding: theme.spacing(3),\r\n background: theme.colors.grey1,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n\r\n content: {\r\n marginTop: theme.spacing(3),\r\n minHeight: 300,\r\n },\r\n\r\n header: {\r\n marginBottom: theme.spacing(3),\r\n },\r\n\r\n description: {\r\n marginBottom: theme.spacing(3),\r\n },\r\n\r\n select: {\r\n background: theme.palette.common.white,\r\n },\r\n\r\n progress: {\r\n marginTop: theme.spacing(1),\r\n },\r\n error: {\r\n marginTop: theme.spacing(1),\r\n },\r\n});\r\n\r\nclass SelectSchool extends React.Component {\r\n onSelect = schoolId => () => this.props.selectSchool(schoolId, { redirect: urls.inside.home });\r\n\r\n onSelectNew = () => this.props.history.push(urls.inside.school.new);\r\n\r\n render() {\r\n const {\r\n classes, errorMessage, loading, schools,\r\n } = this.props;\r\n\r\n return (\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nSelectSchool.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n selectSchool: PropTypes.func.isRequired,\r\n schools: PropTypes.array.isRequired,\r\n loading: PropTypes.bool,\r\n errorMessage: PropTypes.string,\r\n history: PropTypes.object.isRequired,\r\n};\r\n\r\nSelectSchool.defaultProps = {\r\n loading: false,\r\n errorMessage: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n loading: state.auth.loading,\r\n errorMessage: [].concat(state.auth.errors).filter(val => val).join('\r\n \r\n \r\n\r\n \r\n {errorMessage}\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 {loading && - \r\n {schools.map(({ id, name }) => (\r\n
'),\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n selectSchool: bindActionCreators(AuthStore.actionCreators, dispatch).selectOrganization,\r\n});\r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(withSchools(SelectSchool))));\r\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 classnames from 'classnames';\r\nimport { Link } from 'react-router-dom';\r\n\r\nimport {\r\n Button, Typography, withStyles,\r\n} from '@material-ui/core';\r\n\r\nimport Header from './components/Header';\r\nimport Footer from './components/Footer';\r\nimport { VimoLink } from '../../common/components';\r\nimport urls from '../../app/urls';\r\nimport Auth from '../../youwell-common/Auth';\r\n\r\nimport frontImage from '../../common/image/Photo.jpg';\r\nimport tryButtonImage from '../../common/image/icon_elever.png';\r\nimport { Image } from '../../youwell-common/components';\r\nimport VideoListing from './components/VideoListing';\r\nimport PriceMatrix from './components/PriceMatrix';\r\nimport PublicTaskContent from './components/PublicTaskContent';\r\nimport HomeContent from './components/HomeContent';\r\nimport FaqContent from './components/Faq';\r\nimport { getStylesFromSettings } from '../../youwell-common/components/taskElements/TaskElement';\r\n\r\nexport const contentWidth = 1080;\r\nexport const contentLeftMargin = 200;\r\nconst headerHeight = 80;\r\n\r\nconst styles = theme => ({\r\n root: {\r\n },\r\n header: {\r\n top: 0,\r\n width: '100%',\r\n height: headerHeight,\r\n },\r\n content: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n background: theme.palette.common.white,\r\n padding: theme.spacing(8),\r\n [theme.breakpoints.down('xs')]: {\r\n padding: theme.spacing(6, 2, 3),\r\n },\r\n },\r\n blueWhite: {\r\n background: `linear-gradient(180deg, ${theme.colors.blue4} 0%, ${theme.colors.blue4} 44%, ${theme.palette.common.white} 44%, ${theme.palette.common.white} 100%)`,\r\n // color: theme.palette.common.white,\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n background: `linear-gradient(180deg, ${theme.colors.blue4} 0%, ${theme.colors.blue4} 42%, ${theme.palette.common.white} 42%, ${theme.palette.common.white} 100%)`,\r\n },\r\n },\r\n grey: {\r\n background: theme.colors.grey2,\r\n },\r\n center: {\r\n width: '100%',\r\n maxWidth: contentWidth,\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n minHeight: 0,\r\n },\r\n },\r\n firstContent: {\r\n position: 'relative',\r\n padding: 0,\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n flexDirection: 'column',\r\n },\r\n },\r\n frontImage: {\r\n width: '100%',\r\n },\r\n topContent: {\r\n position: 'absolute',\r\n width: contentWidth,\r\n left: '50%',\r\n top: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n display: 'flex',\r\n\r\n [theme.breakpoints.down(contentWidth)]: {\r\n width: '100%',\r\n justifyContent: 'center',\r\n },\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n position: 'relative',\r\n left: '0',\r\n top: '0',\r\n transform: 'none',\r\n },\r\n },\r\n introBox: {\r\n width: '50%',\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n width: '100%',\r\n marginBottom: theme.spacing(2),\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n },\r\n },\r\n introText: {\r\n marginBottom: theme.spacing(2),\r\n padding: theme.spacing(1),\r\n background: '#ffffff7a',\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n padding: theme.spacing(3),\r\n },\r\n },\r\n flexOnLarge: {\r\n display: 'flex',\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n flexDirection: 'column',\r\n },\r\n },\r\n leftMargin: {\r\n flex: `0 0 ${contentLeftMargin}px`,\r\n\r\n [theme.breakpoints.down('sm')]: {\r\n flex: `0 0 ${contentLeftMargin / 2}px`,\r\n },\r\n [theme.breakpoints.down('xs')]: {\r\n flex: '1 1 auto',\r\n },\r\n },\r\n bigButton: {\r\n width: 300,\r\n padding: theme.spacing(3),\r\n marginBottom: theme.spacing(1),\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n width: 200,\r\n },\r\n },\r\n buttonSubText: {\r\n width: 300,\r\n textAlign: 'center',\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n width: '100%',\r\n },\r\n },\r\n tryNow: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n marginBottom: theme.spacing(1),\r\n },\r\n tryButtonImage: {\r\n marginBottom: -25,\r\n zIndex: 1,\r\n pointerEvents: 'none',\r\n },\r\n bookMeeting: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n marginTop: theme.spacing(2),\r\n marginBottom: theme.spacing(10),\r\n },\r\n bookMeetingButton: {\r\n background: theme.colors.green3,\r\n color: theme.palette.primary.main,\r\n },\r\n priceMatrix: {\r\n marginTop: theme.spacing(4),\r\n },\r\n twoColumn: {\r\n width: '50%',\r\n\r\n '&:first-child': {\r\n paddingRight: theme.spacing(2),\r\n [theme.breakpoints.down('sm')]: {\r\n paddingRight: 0,\r\n },\r\n },\r\n '&:last-child': {\r\n paddingLeft: theme.spacing(2),\r\n [theme.breakpoints.down('sm')]: {\r\n paddingLeft: 0,\r\n },\r\n },\r\n\r\n [theme.breakpoints.down('sm')]: {\r\n width: '100%',\r\n },\r\n },\r\n topHtmlContent: {\r\n '& figure.media': {\r\n marginRight: contentLeftMargin,\r\n\r\n [theme.breakpoints.down('sm')]: {\r\n marginRight: 50,\r\n },\r\n [theme.breakpoints.down('xs')]: {\r\n marginRight: 0,\r\n },\r\n },\r\n '& a': {\r\n color: theme.colors.green3,\r\n },\r\n },\r\n doubleLineHeight: {\r\n lineHeight: '2em',\r\n },\r\n loggedInBox: {\r\n width: 400,\r\n padding: theme.spacing(3),\r\n background: theme.colors.grey2,\r\n },\r\n loggedInName: {\r\n margin: theme.spacing(2, 0, 4),\r\n },\r\n priceContent: {\r\n color: theme.palette.primary.main,\r\n '& p': {\r\n marginBottom: '0.5em',\r\n },\r\n },\r\n faq: {\r\n marginTop: theme.spacing(6),\r\n },\r\n});\r\n\r\nclass Home extends React.Component {\r\n render() {\r\n const {\r\n classes, translate, profileData, content,\r\n } = this.props;\r\n\r\n const isLoggedIn = Auth.isUserAuthenticated();\r\n\r\n return (\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nHome.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n profileData: PropTypes.object,\r\n content: PropTypes.array.isRequired,\r\n};\r\n\r\nHome.defaultProps = {\r\n profileData: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n profileData: state.auth.profileData,\r\n appConfig: state.pageSettings.appConfig,\r\n content: (state.program.content && state.program.content[state.pageSettings.appConfig?.contentProgramId]?.modules?.find(d => d.id === state.pageSettings.appConfig?.frontpageModuleId)?.tasks) || [],\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Home));\r\n","import * as React from 'react';\r\nimport {\r\n Route, Switch,\r\n} from 'react-router-dom';\r\n\r\nimport Home from './Home';\r\nimport Logout from './components/Logout';\r\nimport SelectRole from './components/SelectRole';\r\n\r\nimport urls from '../../app/urls';\r\nimport Login from './components/Login';\r\nimport ResetPassword from './components/ResetPassword';\r\nimport ForgotPassword from './components/ForgotPassword';\r\nimport RegisterUser from './components/RegisterUser';\r\nimport Layout from './components/Layout';\r\nimport Page from './Page';\r\nimport StudentLogin from './components/StudentLogin';\r\nimport LoadProfileData from '../../common/components/LoadProfileData';\r\n\r\nconst Pages = () => (\r\n \r\n
\r\n\r\n \r\n {isLoggedIn && profileData ? (\r\n
\r\n \r\n \r\n {translate('frontpage.youAreLoggedIn')}\r\n \r\n \r\n {profileData.name}\r\n \r\n
\r\n ) : (\r\n \r\n \r\n {translate('frontpage.aboutVimoShort')}\r\n \r\n \r\n \r\n {translate('frontpage.30DaysFreeTest')}\r\n \r\n
\r\n )}\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n {translate('frontpage.aboutVimo')}\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\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 \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nTask.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n hasLoaded: PropTypes.bool.isRequired,\r\n task: PropTypes.object,\r\n};\r\n\r\nTask.defaultProps = {\r\n task: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n const itemId = ownProps?.match?.params?.taskId;\r\n const task = itemId && state.program.content && state.program.content[state.pageSettings.appConfig?.contentProgramId]?.modules\r\n ?.reduce((prev, curr) => prev || curr.tasks?.find(d => d.id === itemId)\r\n , null);\r\n\r\n return {\r\n clientConfig: state.auth.clientConfig,\r\n hasLoaded: Boolean(state.program.content && state.program.content[state.pageSettings.appConfig?.contentProgramId]),\r\n task,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Task));\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useSelector } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\n\r\nimport Accordion from '@material-ui/core/Accordion';\r\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\r\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\n\r\nimport HtmlContent from '../../../youwell-common/components/HtmlContent';\r\n\r\nconst FaqContent = ({ task, className }) => {\r\n const translate = useSelector(state => getTranslate(state.localize));\r\n\r\n if (!task) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nFooter.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n appConfig: PropTypes.object.isRequired,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n appConfig: state.pageSettings.appConfig,\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Footer));\r\n","import React, { useState } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { withRouter, Link } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport {\r\n Button, Typography, TextField, CircularProgress,\r\n} from '@material-ui/core';\r\nimport { bindActionCreators } from 'redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport * as AuthStore from '../../../app/store/AuthStore';\r\nimport urls from '../../../app/urls';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n header: {\r\n marginBottom: theme.spacing(3),\r\n },\r\n textField: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n actionButtons: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n marginTop: theme.spacing(3),\r\n },\r\n subActions: {\r\n },\r\n infoContainer: {\r\n marginTop: theme.spacing(3),\r\n },\r\n loading: {\r\n height: 200,\r\n flex: '1 1 auto',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n completedMessageContainer: {\r\n margin: theme.spacing(2, 0, 4),\r\n color: theme.colors.green2,\r\n },\r\n homeLink: {\r\n marginTop: theme.spacing(2),\r\n },\r\n});\r\n\r\nconst ForgotPassword = ({\r\n translate, forgotPassword, loading, errorMessage, classes,\r\n}) => {\r\n const [{ email, submitted }, setState] = useState({ email: '', submitted: false });\r\n\r\n const handleForgotPassword = (e) => {\r\n e.preventDefault();\r\n forgotPassword(email, {\r\n callback: () => {\r\n setState({\r\n submitted: true,\r\n });\r\n },\r\n });\r\n };\r\n\r\n if (submitted && !loading && !errorMessage) {\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 {contactEmail}\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 {translate('login.sentForgotPasswordEmail')}\r\n \r\n\r\n
\r\n );\r\n }\r\n return (\r\n \r\n );\r\n};\r\n\r\nForgotPassword.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n loading: PropTypes.bool.isRequired,\r\n forgotPassword: PropTypes.func.isRequired,\r\n errorMessage: PropTypes.string,\r\n};\r\n\r\nForgotPassword.defaultProps = {\r\n errorMessage: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n loading: state.auth.loading,\r\n sentForgotPasswordEmail: state.auth.sentForgotPasswordEmail,\r\n errorMessage: [].concat(state.auth.errors).filter(val => val).join('\r\n \r\n {translate('login.forgotPassword')}\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n {translate('register.goToLogin')}\r\n \r\n \r\n
\r\n '),\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(AuthStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default withRouter(\r\n connect(\r\n mapStateToProps,\r\n mapDispatchToProps,\r\n )(withStyles(styles)(ForgotPassword)),\r\n);\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport { Link } from 'react-router-dom';\r\nimport { getTranslate, Translate } from 'react-localize-redux';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport classnames from 'classnames';\r\n\r\nimport { Typography } from '@material-ui/core';\r\n\r\nimport urls from '../../../app/urls';\r\nimport logo from '../../../common/image/logo negativ stor.svg';\r\nimport { Image } from '../../../youwell-common/components';\r\nimport Auth from '../../../youwell-common/Auth';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n color: theme.colors.grey1,\r\n background: theme.colors.blue4,\r\n padding: theme.spacing(0, 6),\r\n },\r\n\r\n logo: {\r\n width: 100,\r\n marginRight: theme.spacing(6),\r\n },\r\n title: {\r\n display: 'flex',\r\n\r\n [theme.breakpoints.down('sm')]: {\r\n display: 'none',\r\n },\r\n },\r\n flex: {\r\n flex: '1 1 auto',\r\n },\r\n titleText: {\r\n width: 150,\r\n },\r\n link: {\r\n marginLeft: theme.spacing(2),\r\n },\r\n hideOnSmall: {\r\n [theme.breakpoints.down('xs')]: {\r\n display: 'none',\r\n },\r\n },\r\n});\r\n\r\nclass Header extends React.Component {\r\n render() {\r\n const {\r\n classes, className, hideHeaderLinks, headerPageTitle, profileData,\r\n } = this.props;\r\n\r\n const isLoggedIn = Auth.isUserAuthenticated() && profileData;\r\n\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n {headerPageTitle && (\r\n \r\n {headerPageTitle}\r\n \r\n )}\r\n\r\n {!hideHeaderLinks && (\r\n <>\r\n
\r\n );\r\n }\r\n}\r\n\r\nHeader.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n className: PropTypes.string,\r\n hideHeaderLinks: PropTypes.bool,\r\n headerPageTitle: PropTypes.string,\r\n profileData: PropTypes.object,\r\n};\r\n\r\nHeader.defaultProps = {\r\n className: null,\r\n hideHeaderLinks: false,\r\n headerPageTitle: null,\r\n profileData: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n profileData: state.auth.profileData,\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Header));\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { createStyles } from '@material-ui/core';\r\n\r\nimport HtmlContent from '../../../youwell-common/components/HtmlContent';\r\nimport { getStylesFromSettings } from '../../../youwell-common/components/taskElements/TaskElement';\r\n\r\n\r\nconst useStyles = makeStyles(theme => createStyles({\r\n blueBox: {\r\n backgroundColor: '#FFFFFF25',\r\n margin: theme.spacing(8, -12, 16, -20),\r\n padding: theme.spacing(6, 12, 6, 20),\r\n\r\n '& p': {\r\n color: theme.palette.primary.main,\r\n },\r\n\r\n '& figure.image.image-style-align-left': {\r\n marginRight: theme.spacing(8),\r\n },\r\n\r\n [theme.breakpoints.down('sm')]: {\r\n margin: theme.spacing(8, -1, 16, -1),\r\n padding: theme.spacing(4, 0, 8, 0),\r\n '& figure.image.image-style-align-left': {\r\n display: 'none',\r\n },\r\n },\r\n },\r\n tanBox: {\r\n backgroundColor: '#FFDECC76',\r\n margin: theme.spacing(8, -12, 16, -20),\r\n padding: theme.spacing(4, 12, 8, 20),\r\n\r\n '& figure.image figcaption': {\r\n background: 'transparent',\r\n fontWeight: theme.typography.fontWeightMedium,\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n margin: theme.spacing(8, -2, 16, -2),\r\n padding: theme.spacing(4, 0, 8, 0),\r\n },\r\n },\r\n flexContent: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n\r\n '& h3, & h4, & h5, & h6': {\r\n width: '100%',\r\n },\r\n '& figure': {\r\n flex: '1 1 auto',\r\n },\r\n '& img': {\r\n maxWidth: '100%',\r\n width: 140,\r\n },\r\n '& figcaption': {\r\n maxWidth: '100%',\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n '& img': {\r\n width: 100,\r\n },\r\n },\r\n [theme.breakpoints.down('xs')]: {\r\n display: 'block',\r\n },\r\n },\r\n content: {\r\n marginTop: theme.spacing(4),\r\n },\r\n htmlContent: {\r\n '& h3': {\r\n fontWeight: 500,\r\n marginBottom: theme.spacing(4),\r\n '&:first-child': {\r\n marginTop: 0,\r\n },\r\n },\r\n '& ul': {\r\n padding: theme.spacing(4),\r\n },\r\n '& li': {\r\n marginBottom: theme.spacing(4),\r\n },\r\n '& ul li::marker': {\r\n color: 'black',\r\n fontSize: '1em',\r\n },\r\n },\r\n}));\r\n\r\n\r\nconst HomeContent = ({ task }) => {\r\n const classes = useStyles();\r\n if (!task) {\r\n return null;\r\n }\r\n const choosenHtmlContent = (element) => {\r\n switch (element.settings?.styleId) {\r\n case 'bluebox':\r\n return (\r\n \r\n
\r\n );\r\n case 'tanbox':\r\n return (\r\n \r\n
\r\n\r\n );\r\n default:\r\n return (\r\n {choosenHtmlContent(el)}\r\n
\r\n ))}\r\n \r\n );\r\n};\r\n\r\nHomeContent.propTypes = {\r\n task: PropTypes.object,\r\n};\r\nHomeContent.defaultProps = {\r\n task: null,\r\n};\r\n\r\nexport default HomeContent;\r\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 classnames from 'classnames';\r\n\r\nimport {\r\n withStyles,\r\n} from '@material-ui/core';\r\n\r\nimport Header from './Header';\r\nimport Footer from './Footer';\r\n\r\nexport const contentWidth = 1080;\r\nexport const headerHeight = 80;\r\n\r\nconst styles = theme => ({\r\n root: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n minHeight: '100vh',\r\n },\r\n header: {\r\n width: '100%',\r\n height: headerHeight,\r\n },\r\n content: {\r\n flex: '1 1 auto',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n background: theme.colors.grey2,\r\n padding: theme.spacing(8),\r\n\r\n '&$fullPage': {\r\n alignItems: 'normal',\r\n },\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n padding: theme.spacing(6, 2),\r\n },\r\n },\r\n fullPage: {\r\n },\r\n center: {\r\n border: theme.borders.green,\r\n padding: theme.spacing(3),\r\n background: theme.colors.grey1,\r\n minWidth: 400,\r\n maxWidth: contentWidth,\r\n minHeight: 260,\r\n\r\n '$fullPage &': {\r\n flex: '1 1 auto',\r\n },\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n minWidth: 0,\r\n width: '100%',\r\n },\r\n },\r\n});\r\n\r\nclass Layout extends React.Component {\r\n render() {\r\n const {\r\n classes, children, headerProps, fullPage,\r\n } = this.props;\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nLayout.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n children: PropTypes.oneOfType([\r\n PropTypes.arrayOf(PropTypes.node),\r\n PropTypes.node,\r\n ]).isRequired,\r\n headerProps: PropTypes.object,\r\n fullPage: PropTypes.bool,\r\n};\r\n\r\nLayout.defaultProps = {\r\n headerProps: null,\r\n fullPage: false,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Layout));\r\n","import * as React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { withRouter, Link } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport {\r\n Button, Typography, CircularProgress, TextField, ButtonBase, Switch, FormControlLabel,\r\n} from '@material-ui/core';\r\nimport { contactEmail } from '../../../common/constants';\r\n\r\nimport * as AuthStore from '../../../app/store/AuthStore';\r\nimport Auth from '../../../youwell-common/Auth';\r\nimport urls from '../../../app/urls';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n maxWidth: 400,\r\n },\r\n header: {\r\n marginBottom: theme.spacing(3),\r\n },\r\n loginDescription: {\r\n marginTop: theme.spacing(3),\r\n marginBottom: theme.spacing(3),\r\n },\r\n textField: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n textFieldPin: {\r\n marginRight: theme.spacing(8),\r\n width: 100,\r\n },\r\n actionButtons: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n marginTop: theme.spacing(3),\r\n },\r\n pinLogin: {\r\n padding: theme.spacing(2),\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n marginBottom: theme.spacing(2),\r\n },\r\n subActions: {\r\n },\r\n infoContainer: {\r\n marginTop: theme.spacing(3),\r\n },\r\n loading: {\r\n height: 200,\r\n flex: '1 1 auto',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n patientLogin: {\r\n marginTop: theme.spacing(8),\r\n borderTop: theme.borders.green,\r\n paddingTop: theme.spacing(8),\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n },\r\n studentLoginButton: {\r\n alignSelf: 'center',\r\n },\r\n});\r\n\r\nconst getErrorMessage = (translate, errorMessage, is2FALogin) => {\r\n switch (errorMessage) {\r\n case '1065':\r\n if (is2FALogin) {\r\n return translate('login.twoFactorPinFailed');\r\n }\r\n break;\r\n case '1106':\r\n case '1107':\r\n return translate('login.missingPhoneFor2FA', { contactEmail });\r\n default:\r\n break;\r\n }\r\n return translate(`errors.${errorMessage}`, null, { onMissingTranslation: () => `System error (${errorMessage})` });\r\n};\r\n\r\n\r\nclass Login extends React.Component {\r\n state = {\r\n email: '',\r\n password: '',\r\n pin: '',\r\n addToTrustedDevices: false,\r\n patientCode: '',\r\n };\r\n\r\n componentDidMount() {\r\n const redirect = this.props.match.params.redirect ? decodeURIComponent(this.props.match.params.redirect) : urls.inside.home;\r\n if (this.props.match.params.code) {\r\n this.props.loginWithCode(this.props.match.params.code, this.props.match.params.provider, this.props.match.params.state, { redirect });\r\n } else if (Auth.isUserAuthenticated()) {\r\n this.props.getUserProfile({ redirect });\r\n }\r\n }\r\n\r\n handleChange = name => (event) => {\r\n this.setState({ [name]: event.target.value });\r\n };\r\n\r\n handleAddToTrustedDevicesChange = (e) => {\r\n this.setState({\r\n addToTrustedDevices: e.target.checked,\r\n });\r\n };\r\n\r\n handleTabChange = name => (event, value) => {\r\n this.setState({\r\n [name]: value,\r\n });\r\n }\r\n\r\n handleKeyPressUserPwd = (e) => {\r\n if (e.key === 'Enter' && this.state.email && this.state.password) {\r\n this.login();\r\n }\r\n };\r\n\r\n handleKeyPressPin = (e) => {\r\n if (e.key === 'Enter' && this.state.pin) {\r\n this.login();\r\n }\r\n };\r\n\r\n handleKeyPressPatientCode = (e) => {\r\n if (e.key === 'Enter' && this.state.patientCode) {\r\n this.loginPatientCode();\r\n }\r\n };\r\n\r\n loginPatientCode = () => {\r\n if (this.state.patientCode) {\r\n this.props.redirect(`${urls.studentCode.home}/${this.state.patientCode}`);\r\n }\r\n }\r\n\r\n login = () => {\r\n const redirect = this.props.match.params.redirect ? decodeURIComponent(this.props.match.params.redirect) : urls.inside.home;\r\n\r\n if (this.props.twoFactorId) {\r\n if (!this.state.pin) {\r\n return;\r\n }\r\n this.props.loginWithPin(this.state.pin, this.props.twoFactorId, this.state.addToTrustedDevices, { redirect });\r\n } else {\r\n if (!this.state.email || !this.state.password) {\r\n return;\r\n }\r\n const email = this.state.email.indexOf('@') > -1 ? this.state.email : `${this.state.email}@vimo.no`;\r\n this.props.login(email, this.state.password, { redirect });\r\n }\r\n };\r\n\r\n cancelTwoFactorLogin = () => {\r\n this.props.cancelTwoFactor();\r\n }\r\n\r\n render() {\r\n const {\r\n classes, translate, errorMessage, loading, match, logoutReason, twoFactorId,\r\n } = this.props;\r\n\r\n const showTwoFactorPinLogin = !!twoFactorId;\r\n const serverLogin = match.params.code || Auth.isUserAuthenticated();\r\n const showStudentLogin = match.params.redirect === 'student';\r\n\r\n return (\r\n \r\n {children && (\r\n
\r\n\r\n \r\n \r\n {children}\r\n
\r\n )}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nLogin.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n match: PropTypes.object.isRequired,\r\n getUserProfile: PropTypes.func.isRequired,\r\n login: PropTypes.func.isRequired,\r\n loginWithPin: PropTypes.func.isRequired,\r\n loginWithCode: PropTypes.func.isRequired,\r\n cancelTwoFactor: PropTypes.func.isRequired,\r\n redirect: PropTypes.func.isRequired,\r\n loading: PropTypes.bool,\r\n errorMessage: PropTypes.string,\r\n twoFactorId: PropTypes.string,\r\n logoutReason: PropTypes.string,\r\n};\r\n\r\nLogin.defaultProps = {\r\n loading: false,\r\n errorMessage: null,\r\n logoutReason: null,\r\n twoFactorId: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n loading: state.auth.loading,\r\n errorMessage: [].concat(state.auth.errors).filter(val => val).join('\r\n \r\n {translate('login.heading')}\r\n \r\n
\r\n\r\n {loading ? (\r\n \r\n \r\n {translate('login.loginInProgress')}\r\n \r\n )}\r\n
\r\n ) : (\r\n <>\r\n {showTwoFactorPinLogin ? (\r\n \r\n \r\n {translate('login.twoFactorPinDescription')}\r\n \r\n
\r\n ) : (\r\n <>\r\n \r\n
\r\n \r\n \r\n \r\n {translate('login.cancel')}\r\n \r\n \r\n
\r\n ) : (\r\n <>\r\n \r\n \r\n \r\n {translate('login.registerNewUser')}\r\n \r\n \r\n\r\n \r\n
\r\n \r\n \r\n \r\n {translate('login.forgotPassword')}\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n )}\r\n\r\n \r\n {logoutReason && (\r\n \r\n {translate(`errors.${logoutReason}`, null, { onMissingTranslation: () => translate('login.youHaveBeenLoggedOut') })}\r\n \r\n )}\r\n {errorMessage && (\r\n \r\n {getErrorMessage(translate, errorMessage, showTwoFactorPinLogin)}\r\n \r\n )}\r\n
\r\n\r\n {showStudentLogin && (\r\n \r\n
\r\n )}\r\n \r\n \r\n {translate('login.studentLogin')}\r\n \r\n
\r\n '),\r\n logoutReason: state.auth.logoutReason,\r\n twoFactorId: state.auth.twoFactorId,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(AuthStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Login)));\r\n","import * as React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { bindActionCreators } from 'redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\n\r\nimport Loading from '../../../youwell-common/components/Loading';\r\nimport * as AuthStore from '../../../app/store/AuthStore';\r\n\r\nconst styles = () => ({\r\n root: {\r\n },\r\n});\r\n\r\nclass Logout extends React.Component {\r\n componentDidMount() {\r\n this.props.logout(this.props.match.params.reason);\r\n }\r\n\r\n render() {\r\n const { classes, translate } = this.props;\r\n\r\n return (\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nLogout.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n logout: PropTypes.func.isRequired,\r\n match: PropTypes.shape({\r\n params: PropTypes.shape({\r\n reason: PropTypes.string,\r\n }).isRequired,\r\n }).isRequired,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(AuthStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Logout)));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\n\r\nimport {\r\n Typography,\r\n} from '@material-ui/core';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n },\r\n matrix: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n marginBottom: theme.spacing(2),\r\n\r\n [theme.breakpoints.down('sm')]: {\r\n flexWrap: 'wrap',\r\n },\r\n },\r\n item: {\r\n flex: '1 1 20%',\r\n margin: theme.spacing(1),\r\n borderRadius: theme.spacing(1),\r\n background: theme.colors.green3,\r\n '&:nth-child(even)': {\r\n background: theme.palette.common.white,\r\n },\r\n padding: theme.spacing(2, 2, 4, 2),\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n padding: theme.spacing(2),\r\n },\r\n },\r\n itemTopLine: {\r\n textTransform: 'uppercase',\r\n fontWeight: 500,\r\n },\r\n price: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n fontSize: '1.5rem',\r\n fontWeight: 500,\r\n marginTop: theme.spacing(4),\r\n },\r\n priceStart: {\r\n fontSize: '1.5em',\r\n fontWeight: 600,\r\n marginRight: theme.spacing(0.5),\r\n },\r\n number: {\r\n fontSize: '2em',\r\n fontWeight: 600,\r\n marginRight: theme.spacing(1),\r\n color: theme.colors.green1,\r\n },\r\n priceEnd: {\r\n alignSelf: 'flex-end',\r\n },\r\n subline: {\r\n marginTop: theme.spacing(4),\r\n textAlign: 'center',\r\n },\r\n license: {\r\n display: 'flex',\r\n [theme.breakpoints.down('xs')]: {\r\n flexDirection: 'column-reverse',\r\n },\r\n },\r\n licenseLink: {\r\n justifySelf: 'flex-end',\r\n },\r\n flex: {\r\n flex: '1 1 auto',\r\n },\r\n underline: {\r\n borderBottom: '1px solid',\r\n },\r\n});\r\n\r\nconst PriceItem = ({\r\n classes, translate, users, price, privateUser, name,\r\n}) => (\r\n \r\n \r\n {name}\r\n \r\n \r\n kr\r\n {price}\r\n /mnd\r\n \r\n \r\n {privateUser ? translate('priceMatrix.privateUser') : users === 1 ? translate('priceMatrix.limitOneStudent') : translate('priceMatrix.limitStudents', { users }) }\r\n \r\n \r\n {!privateUser && translate('priceMatrix.minMonthInvoice', { months: users > 1 ? 6 : 12 }) }\r\n \r\n
\r\n);\r\n\r\nPriceItem.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n users: PropTypes.number.isRequired,\r\n price: PropTypes.number.isRequired,\r\n name: PropTypes.string.isRequired,\r\n privateUser: PropTypes.bool,\r\n};\r\n\r\nPriceItem.defaultProps = {\r\n privateUser: false,\r\n};\r\n\r\nconst PriceMatrix = ({\r\n className, classes, translate,\r\n}) => (\r\n \r\n \r\n {translate('priceMatrix.price')}\r\n \r\n
\r\n);\r\n\r\nPriceMatrix.propTypes = {\r\n className: PropTypes.string,\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n};\r\n\r\nPriceMatrix.defaultProps = {\r\n className: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(PriceMatrix));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport classnames from 'classnames';\r\n\r\nimport * as PageSettingStore from '../../../app/store/PageSettingStore';\r\n\r\nimport { TaskContent } from '../../../youwell-common/components';\r\nimport urls from '../../../app/urls';\r\nimport { isBrowser } from '../../../youwell-common/browserUtils';\r\nimport { parseInternalLink } from '../../../youwell-common/taskContentUtils';\r\nimport { getContentTranslations } from '../../../common/components/VimoTaskContent';\r\n\r\nexport const styles = theme => ({\r\n root: {\r\n },\r\n htmlContent: {\r\n color: theme.colors.blue4,\r\n },\r\n taskTitle: {\r\n color: theme.palette.primary.main,\r\n marginBottom: theme.spacing(4),\r\n },\r\n});\r\n\r\n\r\nclass PublicTaskContent extends React.Component {\r\n componentDidMount() {\r\n if (isBrowser) {\r\n // eslint-disable-next-line no-underscore-dangle\r\n window.__clickInternalLink = this.clickInternalLink;\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n if (isBrowser) {\r\n // eslint-disable-next-line no-underscore-dangle\r\n window.__clickInternalLink = null;\r\n }\r\n }\r\n\r\n clickInternalLink = (elementId) => {\r\n const url = this.getLinkUrl({ url: elementId });\r\n this.props.redirect(url);\r\n }\r\n\r\n getLinkUrl = (link) => {\r\n const { taskOrModuleId, hash } = parseInternalLink(link);\r\n return `${urls.page}/${taskOrModuleId}${hash}`;\r\n }\r\n\r\n getProgramItem = id => (this.props.allContent ? this.props.allContent[id] : null)\r\n\r\n render() {\r\n const {\r\n classes, translate, task, showTitle,\r\n } = this.props;\r\n\r\n if (!task) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n {translate('register.registrationCompleteDescription')}\r\n \r\n\r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n \r\n {translate('register.registrationComplete')}\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n {translate('register.goToLogin')}\r\n \r\n \r\n
\r\n \r\n \r\n {translate('register.registrationDescription')}\r\n \r\n \r\n {translate('register.registrationSchoolAffiliation')}\r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nRegisterUser.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n registerUser: PropTypes.func.isRequired,\r\n loading: PropTypes.bool,\r\n errorMessage: PropTypes.string,\r\n appConfig: PropTypes.object.isRequired,\r\n};\r\n\r\nRegisterUser.defaultProps = {\r\n loading: false,\r\n errorMessage: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n loading: state.auth.loading,\r\n errorMessage: [].concat(state.auth.errors).filter(val => val).join('\r\n \r\n {translate('register.user')}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {translate('register.openPrivacyPolicy')}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {translate('register.cancel')}\r\n \r\n \r\n \r\n
\r\n \r\n {errorMessage && (\r\n \r\n \r\n {translate(`errors.${errorMessage}`, { contactEmail }, { onMissingTranslation: ({ translationId }) => translationId })}\r\n {errorMessage === '1035' && (\r\n \r\n {translate('login.forgotPassword')}\r\n \r\n )}\r\n \r\n \r\n )}\r\n
\r\n '),\r\n appConfig: state.pageSettings.appConfig,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(AuthStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(RegisterUser)));\r\n","import React, { useState } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { withRouter, Link } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { bindActionCreators } from 'redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport {\r\n Button, Typography, CircularProgress, TextField,\r\n} from '@material-ui/core';\r\nimport * as AuthStore from '../../../app/store/AuthStore';\r\nimport urls from '../../../app/urls';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n header: {\r\n marginBottom: theme.spacing(3),\r\n },\r\n loginDescription: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n textField: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n actionButtons: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n marginTop: theme.spacing(3),\r\n },\r\n subActions: {\r\n },\r\n infoContainer: {\r\n marginTop: theme.spacing(3),\r\n },\r\n loading: {\r\n height: 200,\r\n flex: '1 1 auto',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n completedMessageContainer: {\r\n marginTop: theme.spacing(2),\r\n background: theme.palette.grey[50],\r\n color: theme.colors.blue,\r\n padding: theme.spacing(2),\r\n borderRadius: theme.spacing(0.5),\r\n border: theme.borders.dim,\r\n },\r\n homeLink: {\r\n marginTop: theme.spacing(2),\r\n },\r\n});\r\n\r\nconst ResetPassword = ({\r\n match, translate, loading, resetPassword, errorMessage, classes,\r\n}) => {\r\n const [{ password, submitted }, setState] = useState({\r\n password: '',\r\n submitted: false,\r\n });\r\n\r\n const handleResetPassword = (e) => {\r\n e.preventDefault();\r\n if (!loading) {\r\n resetPassword({\r\n newPassword: password,\r\n token: match.params.token,\r\n }, {\r\n callback: () => {\r\n setState({\r\n submitted: true,\r\n });\r\n },\r\n });\r\n }\r\n };\r\n\r\n const completed = submitted && !loading && !errorMessage;\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nResetPassword.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n match: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n loading: PropTypes.bool.isRequired,\r\n resetPassword: PropTypes.func.isRequired,\r\n errorMessage: PropTypes.string,\r\n};\r\n\r\nResetPassword.defaultProps = {\r\n errorMessage: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n loading: state.auth.loading,\r\n errorMessage: [].concat(state.auth.errors).filter(val => val).join('
'),\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(AuthStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default withRouter(\r\n connect(\r\n mapStateToProps,\r\n mapDispatchToProps,\r\n )(withStyles(styles)(ResetPassword)),\r\n);\r\n","// Copied from Youwell.Platform.Web\r\nimport * as React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { Translate } from 'react-localize-redux';\r\nimport { withRouter, Redirect } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport {\r\n Typography, CircularProgress, List, ListItem, ListItemText, ListItemIcon,\r\n} from '@material-ui/core';\r\n\r\nimport * as AuthStore from '../../../app/store/AuthStore';\r\nimport urls from '../../../app/urls';\r\nimport { OrgIcon } from '../../../common/icons';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n\r\n loginHeader: {\r\n },\r\n\r\n content: {\r\n },\r\n\r\n progress: {\r\n marginTop: theme.spacing(1),\r\n },\r\n error: {\r\n marginTop: theme.spacing(1),\r\n },\r\n});\r\n\r\nclass SelectRole extends React.Component {\r\n onSelect = roleId => () => {\r\n this.props.selectRole(roleId, { redirect: urls.inside.home });\r\n };\r\n\r\n render() {\r\n const {\r\n classes, errorMessage, loading, roles,\r\n } = this.props;\r\n\r\n if (!roles || roles.length === 0) {\r\n return (\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nSelectRole.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n // match: PropTypes.object.isRequired,\r\n selectRole: PropTypes.func.isRequired,\r\n roles: PropTypes.array,\r\n loading: PropTypes.bool,\r\n errorMessage: PropTypes.string,\r\n};\r\n\r\nSelectRole.defaultProps = {\r\n loading: false,\r\n errorMessage: null,\r\n roles: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n roles: state.auth.profileData?.roles,\r\n loading: state.auth.loading,\r\n errorMessage: [].concat(state.auth.errors).filter(val => val).join('\r\n \r\n \r\n\r\n \r\n {errorMessage}\r\n \r\n )}\r\n
\r\n - \r\n {roles && roles.map(role => (\r\n
'),\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(AuthStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SelectRole)));\r\n","import * as React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport {\r\n Button, Typography, TextField,\r\n} from '@material-ui/core';\r\n\r\nimport * as AuthStore from '../../../app/store/AuthStore';\r\nimport urls from '../../../app/urls';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n maxWidth: 400,\r\n },\r\n header: {\r\n marginBottom: theme.spacing(3),\r\n },\r\n loginDescription: {\r\n marginTop: theme.spacing(3),\r\n marginBottom: theme.spacing(3),\r\n },\r\n textField: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n codeInput: {\r\n textTransform: 'uppercase',\r\n },\r\n studentLoginButton: {\r\n alignSelf: 'center',\r\n },\r\n});\r\n\r\n\r\nclass Login extends React.Component {\r\n state = {\r\n patientCode: '',\r\n };\r\n\r\n handleChange = name => (event) => {\r\n this.setState({ [name]: event.target.value });\r\n };\r\n\r\n handleKeyPressPatientCode = (e) => {\r\n if (e.key === 'Enter' && this.state.patientCode) {\r\n this.loginPatientCode();\r\n }\r\n };\r\n\r\n loginPatientCode = () => {\r\n if (this.state.patientCode) {\r\n this.props.redirect(`${urls.studentCode.home}/${this.state.patientCode}`);\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n classes, translate, loading,\r\n } = this.props;\r\n\r\n return (\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nLogin.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n redirect: PropTypes.func.isRequired,\r\n loading: PropTypes.bool,\r\n};\r\n\r\nLogin.defaultProps = {\r\n loading: false,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n loading: state.auth.loading,\r\n errorMessage: [].concat(state.auth.errors).filter(val => val).join('\r\n
\r\n \r\n \r\n {translate('login.studentLogin')}\r\n \r\n \r\n {translate('login.studentLoginDescription')}\r\n \r\n
\r\n\r\n '),\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(AuthStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Login)));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\n\r\nimport {\r\n Typography,\r\n} from '@material-ui/core';\r\nimport TaskElementLink from '../../../youwell-common/components/taskElements/TaskElementLink';\r\nimport { getVideos } from '../../../youwell-common/htmlUtils';\r\nimport { linkTypes } from '../../../youwell-common/constants';\r\nimport { HtmlContent } from '../../../youwell-common/components';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n },\r\n elementHeading: {\r\n borderBottom: theme.borders.normal,\r\n borderBottomColor: theme.palette.secondary.main,\r\n borderBottomWidth: 4,\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n elementHeadingTitle: {\r\n flex: '1 1 auto',\r\n },\r\n videos: {\r\n display: 'flex',\r\n marginTop: theme.spacing(4),\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n flexDirection: 'column',\r\n },\r\n },\r\n video: {\r\n flex: '0 1 50%',\r\n '&:first-child': {\r\n paddingRight: theme.spacing(2),\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n paddingRight: 0,\r\n },\r\n },\r\n '&:last-child': {\r\n paddingLeft: theme.spacing(2),\r\n [theme.breakpoints.down('xs')]: {\r\n paddingLeft: 0,\r\n },\r\n },\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n padding: theme.spacing(0, 0, 2),\r\n },\r\n },\r\n noVideos: {\r\n margin: theme.spacing(2),\r\n },\r\n description: {\r\n marginBottom: theme.spacing(1),\r\n color: theme.colors.blue4,\r\n },\r\n});\r\n\r\nconst getTaskVideosFromHtmlContent = task => (task && task.contentElements && task.contentElements.reduce((prev, curr) => [...prev, ...getVideos(curr.htmlContent)], [])) || [];\r\nconst getTaskVideosFromLink = task => (task && task.contentElements && task.contentElements.reduce((prev, curr) => (curr.link && (curr.link.linkType === linkTypes.youtube || curr.link.linkType === linkTypes.vimeo || curr.link.linkType === linkTypes.video)\r\n ? [...prev, { Component:
\r\n \r\n {task.name}\r\n \r\n\r\n {descriptionContent && (\r\n
\r\n );\r\n};\r\n\r\nVideoListing.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n task: PropTypes.object,\r\n};\r\n\r\nVideoListing.defaultProps = {\r\n task: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(VideoListing));\r\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 Layout from '../outside/components/Layout';\r\nimport { InternalLinkLoader } from '../../common/components';\r\nimport { parseInternalLink } from '../../youwell-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 \r\n {getTaskVideos(task).map((video, cI) => (\r\n // eslint-disable-next-line react/no-array-index-key\r\n \r\n {video.html && (\r\n /* eslint-disable react/no-danger */\r\n \r\n /* eslint-enable react/no-danger */\r\n )}\r\n {video.Component && (\r\n \r\n {translate('videos.noVideosForModule')}\r\n \r\n )}\r\n \r\n ))}\r\n
\r\n \r\n {video.Component}\r\n
\r\n )}\r\n {video.none && (\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nPreviewTask.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n hasLoaded: PropTypes.bool.isRequired,\r\n toggleComments: PropTypes.func.isRequired,\r\n showComments: PropTypes.bool.isRequired,\r\n taskDetails: PropTypes.object,\r\n};\r\n\r\nPreviewTask.defaultProps = {\r\n taskDetails: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n const taskId = ownProps?.match?.params?.taskId;\r\n\r\n return {\r\n translate: getTranslate(state.localize),\r\n taskDetails: state.previewStore.details && state.previewStore.details[taskId],\r\n clientConfig: state.auth.clientConfig,\r\n hasLoaded: Boolean(state.previewStore.requests[`${PREVIEW_TASK_RECEIVED}/${taskId}`]\r\n && state.previewStore.requests[`${PREVIEW_TASK_RECEIVED}/${taskId}`].completed),\r\n showComments: state.previewStore.showComments,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(PreviewStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(PreviewTask));\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport { ButtonBase, Typography } from '@material-ui/core';\r\n\r\nimport * as PreviewStore from '../../../app/store/PreviewStore';\r\nimport { CommentIcon } from '../../../common/icons';\r\n\r\n\r\nconst styles = theme => ({\r\n root: {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n width: '100%',\r\n zIndex: 101,\r\n background: `${theme.palette.grey[300]}aa`,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n});\r\n\r\nfunction AddCommentOverlay({\r\n classes, translate, className, taskId, elementId, startComment, enableComments,\r\n}) {\r\n if (!enableComments) {\r\n return null;\r\n }\r\n const onClick = () => {\r\n startComment({ taskId, elementId });\r\n };\r\n\r\n return (\r\n \r\n {title && (\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\n\r\nPageLayout.propTypes = {\r\n classes: 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 sideMenu: PropTypes.object,\r\n title: PropTypes.string,\r\n task: PropTypes.object,\r\n showComments: PropTypes.bool,\r\n};\r\n\r\nPageLayout.defaultProps = {\r\n title: null,\r\n sideMenu: null,\r\n task: null,\r\n sideContent: null,\r\n showComments: false,\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)(withStyles(styles)(PageLayout));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport classnames from 'classnames';\r\n\r\nimport { Button } from '@material-ui/core';\r\nimport * as PreviewStore from '../../../app/store/PreviewStore';\r\n\r\nimport { TaskContent } from '../../../youwell-common/components';\r\nimport urls from '../../../app/urls';\r\nimport { styles as defaultStyles, getContentTranslations } from '../../../common/components/VimoTaskContent';\r\nimport { parseInternalLink } from '../../../youwell-common/taskContentUtils';\r\nimport AddCommentOverlay from './AddCommentOverlay';\r\nimport { getSpecificTaskResponses } from '../../../youwell-common/responseUtils';\r\n\r\nconst styles = theme => ({\r\n ...defaultStyles(theme),\r\n showHiddenElementsBtn: {\r\n display: 'none', // tmp hidden..\r\n float: 'right',\r\n top: -50,\r\n right: 50,\r\n },\r\n\r\n});\r\n\r\nconst useStyles = makeStyles(theme => styles(theme), { name: 'PreviewTaskContent' });\r\n\r\n\r\nconst PreviewTaskContent = ({ forwardedRef, task }) => {\r\n const [noHiddenStateValue, setNohiddenStateValue] = React.useState(false);\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n\r\n const translate = useSelector(state => getTranslate(state.localize));\r\n const allTaskResponses = useSelector(state => state.previewStore.responses);\r\n const allTasksDetails = useSelector(state => state.previewStore.details);\r\n const commentElementId = useSelector(state => state.previewStore.commentElementId);\r\n\r\n // task.patientProgramElementId is \"undefined\" but this works.. Should maybe make more robust?\r\n const responsesForCurrentTask = allTaskResponses && allTaskResponses[task.patientProgramElementId]\r\n && allTaskResponses[task.patientProgramElementId][task.id];\r\n\r\n const updateResponse = (responses) => {\r\n const responseData = {\r\n taskId: task.id,\r\n taskVersion: task.version,\r\n responses,\r\n };\r\n\r\n dispatch(PreviewStore.actionCreators.updateResponse(responseData));\r\n };\r\n\r\n const saveChanges = (callback) => {\r\n if (callback) {\r\n callback();\r\n }\r\n };\r\n\r\n const getLinkUrl = (link) => {\r\n const { taskOrModuleId, hash } = parseInternalLink(link);\r\n return `${urls.preview.home}/${taskOrModuleId}${hash}`;\r\n };\r\n\r\n const getProgramItem = id => (allTasksDetails ? allTasksDetails[id] : null);\r\n\r\n const toggleHiddenStates = () => {\r\n setNohiddenStateValue(prevState => !prevState);\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\nProgram.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n programData: PropTypes.object,\r\n};\r\n\r\nProgram.defaultProps = {\r\n programData: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n programData: state.program.programDetails,\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Program));\r\n","import * as React from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { useParams } from 'react-router';\r\nimport {\r\n makeStyles,\r\n Typography,\r\n} from '@material-ui/core/';\r\nimport { Link } from 'react-router-dom';\r\nimport classnames from 'classnames';\r\n\r\n\r\nimport { TopActionBar, TaskName, VimoTaskContent } from '../../common/components';\r\nimport AboutTheExercises from './components/AboutTheExercises';\r\n\r\nimport urls from '../../app/urls';\r\nimport { isNullOrUndefined } from '../../youwell-common/stringUtils';\r\nimport RedirectIfNoLicense from '../../common/components/RedirectIfNoLicense';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n\r\n },\r\n content: {\r\n padding: theme.spacing(4),\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n padding: theme.spacing(1),\r\n },\r\n },\r\n tasksHeader: {\r\n marginTop: theme.spacing(4),\r\n padding: `${theme.spacing(2)}px ${theme.spacing(3)}px`,\r\n background: theme.colors.grey2,\r\n },\r\n stepHeading: {\r\n minHeight: theme.spacing(3),\r\n marginTop: theme.spacing(1),\r\n marginBottom: theme.spacing(1),\r\n },\r\n steps: {\r\n display: 'flex',\r\n padding: theme.spacing(1),\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n flexDirection: 'column',\r\n },\r\n },\r\n step: {\r\n flex: '1 1 auto',\r\n padding: theme.spacing(1),\r\n },\r\n borderLeft: {\r\n borderLeft: theme.borders.normal,\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n borderLeft: 0,\r\n },\r\n },\r\n skillDescription: {\r\n flex: '1 1 auto',\r\n },\r\n imageContainer: {\r\n width: `calc(50% - ${theme.spacing(1)}px)`,\r\n marginLeft: theme.spacing(1),\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n width: `calc(100% - ${theme.spacing(4)}px)`,\r\n margin: theme.spacing(2),\r\n },\r\n },\r\n image: {\r\n width: '100%',\r\n },\r\n task: {\r\n padding: theme.spacing(0.5),\r\n borderRadius: theme.spacing(0.5),\r\n marginBottom: theme.spacing(2),\r\n\r\n '&:hover': {\r\n background: theme.colors.grey1,\r\n },\r\n },\r\n aboutTasks: {\r\n margin: theme.spacing(3),\r\n marginTop: theme.spacing(10),\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n margin: 0,\r\n marginTop: theme.spacing(10),\r\n },\r\n },\r\n aboutTasksHeader: {\r\n margin: theme.spacing(1),\r\n marginBottom: theme.spacing(2),\r\n padding: `${theme.spacing(2)}px ${theme.spacing(3)}px`,\r\n background: theme.colors.grey2,\r\n },\r\n}));\r\n\r\nconst Skill = () => {\r\n const { skillId } = useParams();\r\n const skillData = useSelector(state => state.program.skillDetails && state.program.skillDetails[skillId]);\r\n const skillContentModule = useSelector(state => state.program.content\r\n && state.program.content[state.pageSettings.appConfig?.contentProgramId]?.modules\r\n ?.find(d => d.id === state.pageSettings.appConfig?.skillContentModuleId));\r\n const classes = useStyles();\r\n const translate = useSelector(state => getTranslate(state.localize));\r\n\r\n if (!skillData || !skillContentModule) {\r\n return null;\r\n }\r\n\r\n const skillDescription = skillContentModule.tasks?.find(d => d.name.toLowerCase().indexOf('intro tekst') > -1);\r\n\r\n const steps = skillData.tasks.reduce((prev, curr) => (\r\n {\r\n ...prev,\r\n [curr.label]: prev[curr.label] ? [...prev[curr.label], curr] : [curr],\r\n }\r\n ), {});\r\n\r\n const stepWidth = 100 / Object.entries(steps).length;\r\n\r\n return (\r\n \r\n \r\n {translate('program.skillsHeader', { n: programData.modules.length })}\r\n \r\n\r\n
\r\n - \r\n {programData.modules && programData.modules.map(item => (\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default Skill;\r\n","import * as React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles, Typography } from '@material-ui/core';\r\n\r\nimport { TopActionBar, VimoTaskContent, TaskName } from '../../common/components';\r\nimport urls from '../../app/urls';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n\r\n },\r\n title: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: theme.spacing(4),\r\n\r\n '@media print': {\r\n padding: theme.spacing(1, 4),\r\n },\r\n },\r\n content: {\r\n padding: theme.spacing(4),\r\n\r\n '@media print': {\r\n padding: theme.spacing(1, 4),\r\n },\r\n },\r\n});\r\n\r\nclass Task extends React.Component {\r\n render() {\r\n const {\r\n translate, classes, taskData, skillData,\r\n } = this.props;\r\n\r\n if (!taskData || !skillData) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {skillDescription && (\r\n \r\n {translate('program.availableTasks')}\r\n \r\n\r\n
\r\n\r\n \r\n {Object.entries(steps).map(([name, tasks], index) => (\r\n
\r\n 0 })} style={{ flexBasis: `${stepWidth}%` }}>\r\n \r\n {isNullOrUndefined(name) ? '' : name}\r\n \r\n {tasks && tasks.map(task => (\r\n \r\n
\r\n ))}\r\n \r\n \r\n {translate('methodsAndTechniques.aboutTheExercisesHeading')}\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\nTask.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n match: PropTypes.shape({\r\n params: PropTypes.shape({\r\n skillId: PropTypes.string.isRequired,\r\n taskId: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n taskData: PropTypes.object,\r\n skillData: PropTypes.object,\r\n};\r\n\r\nTask.defaultProps = {\r\n skillData: null,\r\n taskData: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n translate: getTranslate(state.localize),\r\n taskData: state.program.taskDetails && state.program.taskDetails[ownProps.match.params.taskId],\r\n skillData: state.program.skillDetails && state.program.skillDetails[ownProps.match.params.skillId],\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Task));\r\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 classnames from 'classnames';\r\nimport {\r\n withStyles, Typography, Avatar,\r\n} from '@material-ui/core';\r\n\r\nimport { getElementTitle } from '../../../youwell-common/contentUtils';\r\nimport HtmlContent from '../../../youwell-common/components/HtmlContent';\r\nimport { getTaskColorByName } from '../../../common/utils/programUtils';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n display: 'flex',\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n flexDirection: 'column',\r\n },\r\n },\r\n aboutColumn: {\r\n flex: '1 1 25%',\r\n margin: theme.spacing(1),\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n aboutColumnHeader: {\r\n background: theme.colors.blue4,\r\n color: theme.palette.common.white,\r\n padding: theme.spacing(1),\r\n },\r\n aboutTaskBox: {\r\n marginTop: theme.spacing(1),\r\n background: theme.colors.grey2,\r\n padding: theme.spacing(1),\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n main: {\r\n flex: '1 1 auto',\r\n padding: theme.spacing(1),\r\n marginBottom: theme.spacing(1),\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n },\r\n avatar: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n content: {\r\n textAlign: 'center',\r\n color: theme.colors.blue4,\r\n },\r\n});\r\n\r\n\r\nconst Box = ({ classes, title, content }) => (\r\n \r\n
\r\n \r\n
\r\n);\r\n\r\nBox.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n title: PropTypes.string.isRequired,\r\n content: PropTypes.string.isRequired,\r\n};\r\n\r\n\r\nclass AboutTheExercises extends React.Component {\r\n render() {\r\n const {\r\n classes, className, overviewModule,\r\n } = this.props;\r\n\r\n return (\r\n \r\n {title.slice(0, 1)} \r\n
\r\n \r\n {overviewModule?.tasks?.map(task => (\r\n
\r\n );\r\n }\r\n}\r\n\r\nAboutTheExercises.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n overviewModule: PropTypes.object,\r\n className: PropTypes.string,\r\n};\r\n\r\nAboutTheExercises.defaultProps = {\r\n className: null,\r\n overviewModule: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n overviewModule: state.program.content && state.program.content[state.pageSettings.appConfig?.contentProgramId]?.modules?.find(d => d.id === state.pageSettings.appConfig?.teachingShortModuleId),\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(AboutTheExercises));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\n\r\nimport apiUrls from '../../youwell-common/apiUrls';\r\nimport { Image } from '../../youwell-common/components';\r\n\r\nconst styles = () => ({\r\n root: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n image: {\r\n width: '50%',\r\n marginTop: '10%',\r\n },\r\n});\r\n\r\nclass Home extends React.Component {\r\n render() {\r\n const {\r\n classes, currentProgram,\r\n } = this.props;\r\n\r\n const programImageUrl = currentProgram && currentProgram.frontImageId ? `${apiUrls.baseUrl}/${apiUrls.media.file}/${currentProgram.frontImageId}` : null;\r\n\r\n return (\r\n \r\n \r\n {task.name}\r\n \r\n {task.contentElements?.map(element => (\r\n
\r\n ))}\r\n \r\n {programImageUrl && (\r\n
\r\n );\r\n }\r\n}\r\n\r\nHome.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n // translate: PropTypes.func.isRequired,\r\n currentProgram: PropTypes.object,\r\n};\r\n\r\nHome.defaultProps = {\r\n currentProgram: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n currentProgram: state.publicStore.currentProgramId && state.publicStore.details && state.publicStore.details[state.publicStore.currentProgramId],\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Home));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Redirect,\r\n Route, Switch,\r\n} from 'react-router-dom';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport { IdleTimer } from '../../youwell-common/components';\r\nimport { logoutReasons } from '../../youwell-common/constants';\r\nimport Auth from '../../youwell-common/Auth';\r\n\r\nimport * as AuthStore from '../../app/store/AuthStore';\r\n\r\nimport urls from '../../app/urls';\r\nimport Layout from '../outside/components/Layout';\r\nimport { InternalLinkLoader } from '../../common/components';\r\nimport LoadProgram from './components/LoadProgram';\r\nimport Program from './Program';\r\nimport Module from './Module';\r\nimport Task from './Task';\r\nimport Home from './Home';\r\nimport { getPublicProgramContentLink } from '../../common/taskUtils';\r\nimport Footer from './components/Footer';\r\n\r\nconst USER_IDLE_TIMEOUT_IN_MINUTES = 30;\r\n\r\nclass Index extends React.Component {\r\n logoutOnIdle = () => {\r\n if (Auth.isUserAuthenticated()) {\r\n this.props.logout(logoutReasons.idleTimeout, urls.public.home);\r\n }\r\n }\r\n\r\n render() {\r\n const { program } = this.props;\r\n\r\n return (\r\n <>\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nModule.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n match: PropTypes.shape({\r\n params: PropTypes.shape({\r\n programId: PropTypes.string.isRequired,\r\n moduleIndex: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n hasLoaded: PropTypes.bool.isRequired,\r\n program: PropTypes.object,\r\n};\r\n\r\nModule.defaultProps = {\r\n program: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n translate: getTranslate(state.localize),\r\n program: state.publicStore.details && state.publicStore.details[ownProps.match.params.programId],\r\n hasLoaded: Boolean(state.publicStore.requests[`${PUBLIC_PROGRAM_RECEIVED}/${ownProps.match.params.programId}`]\r\n && state.publicStore.requests[`${PUBLIC_PROGRAM_RECEIVED}/${ownProps.match.params.programId}`].completed),\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(ModalStore.actionCreators, dispatch),\r\n});\r\n\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Module));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport classnames from 'classnames';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport { Link, Redirect } from 'react-router-dom';\r\nimport {\r\n Typography,\r\n} from '@material-ui/core';\r\n\r\nimport * as ModalStore from '../../app/store/ModalStore';\r\nimport urls from '../../app/urls';\r\nimport apiUrls from '../../youwell-common/apiUrls';\r\nimport { Image, HtmlContent } from '../../youwell-common/components';\r\nimport { InfoMessage } from '../../common/components';\r\nimport { PUBLIC_PROGRAM_RECEIVED } from '../../app/store/actions';\r\nimport { elementInfoClasses, tableListClasses } from './components/sharedStyles';\r\n\r\nconst styles = theme => ({\r\n ...tableListClasses(theme),\r\n ...elementInfoClasses(theme),\r\n main: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n paddingTop: theme.spacing(1),\r\n },\r\n },\r\n});\r\n\r\nclass Program extends React.Component {\r\n render() {\r\n const {\r\n classes, translate, program, hasLoaded,\r\n } = this.props;\r\n\r\n\r\n if (!program) {\r\n return hasLoaded ? (\r\n
\r\n\r\n \r\n {moduleImage &&
\r\n\r\n \r\n
\r\n \r\n \r\n {module.name}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n {translate('content')}\r\n \r\n \r\n {module.name}\r\n \r\n \r\n
\r\n\r\n \r\n {module.tasks && module.tasks.map((task, i) => (\r\n \r\n
\r\n \r\n \r\n {i + 1}\r\n \r\n
\r\n \r\n \r\n {task.name}\r\n \r\n
\r\n \r\n ))}\r\n \r\n
\r\n\r\n );\r\n }\r\n}\r\n\r\nProgram.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n program: PropTypes.object,\r\n hasLoaded: PropTypes.bool.isRequired,\r\n};\r\n\r\nProgram.defaultProps = {\r\n program: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n translate: getTranslate(state.localize),\r\n program: state.publicStore.details && state.publicStore.details[ownProps.match.params.programId],\r\n hasLoaded: Boolean(state.publicStore.requests[`${PUBLIC_PROGRAM_RECEIVED}/${ownProps.match.params.programId}`]\r\n && state.publicStore.requests[`${PUBLIC_PROGRAM_RECEIVED}/${ownProps.match.params.programId}`].completed),\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(ModalStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Program));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { Button, Typography } from '@material-ui/core';\r\nimport { Redirect } from 'react-router';\r\nimport { PrevIcon, NextIcon } from '../../common/icons';\r\n\r\nimport * as PublicStore from '../../app/store/PublicStore';\r\nimport urls from '../../app/urls';\r\nimport { InfoMessage } from '../../common/components';\r\nimport PublicTaskContent from './components/PublicTaskContent';\r\nimport { PUBLIC_PROGRAM_RECEIVED } from '../../app/store/actions';\r\nimport { DelayedFetch } from '../../youwell-common/components';\r\n\r\nconst styles = theme => ({\r\n content: {\r\n border: theme.borders.dim,\r\n },\r\n taskTitle: {\r\n marginBottom: theme.spacing(4),\r\n },\r\n actions: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n margin: `${theme.spacing(4)}px 0`,\r\n },\r\n singleactions: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n margin: `${theme.spacing(4)}px 0`,\r\n },\r\n navIconLeft: {\r\n marginRight: theme.spacing(1),\r\n },\r\n navIconRight: {\r\n marginLeft: theme.spacing(1),\r\n },\r\n});\r\n\r\nclass Task extends React.Component {\r\n taskContentRef = React.createRef()\r\n\r\n clickNext = nextDirection => () => {\r\n const { program, match } = this.props;\r\n const { programId, moduleIndex, taskIndex } = match.params;\r\n\r\n const module = program && program.modules && program.modules[moduleIndex];\r\n const task = module && module.tasks && module.tasks[taskIndex];\r\n\r\n const currentStep = Number(taskIndex);\r\n const nextTaskNr = currentStep + nextDirection;\r\n const isLastTask = nextTaskNr > module.tasks.length - 1;\r\n\r\n let redirect = '';\r\n if (isLastTask || nextTaskNr < 0) redirect = `${urls.public.home}/${programId}`;\r\n else redirect = `${urls.public.program}/${programId}/${moduleIndex}/${nextTaskNr}`;\r\n\r\n const go = () => {\r\n this.props.completeTask({ taskId: task.id, stepNr: currentStep }, redirect);\r\n };\r\n\r\n if (nextDirection > 0) {\r\n this.taskContentRef.current?.validateAndSave(go);\r\n } else {\r\n this.taskContentRef.current?.saveWithoutValidation(go);\r\n }\r\n }\r\n\r\n visitTask = () => {\r\n const { program, match, patientProgramElementId } = this.props;\r\n const { moduleIndex, taskIndex } = match.params;\r\n\r\n const module = program && program.modules && program.modules[moduleIndex];\r\n const task = module && module.tasks && module.tasks[taskIndex];\r\n\r\n if (patientProgramElementId && task) {\r\n this.props.visitTask({\r\n ppeId: patientProgramElementId,\r\n id: task.id,\r\n });\r\n }\r\n }\r\n\r\n endSession = () => {\r\n this.props.endSession(PublicStore.endSessionReasons.completed);\r\n }\r\n\r\n render() {\r\n const {\r\n classes, translate, program, match, hasLoaded, latestCompletedStep, clientConfig,\r\n } = this.props;\r\n const { moduleIndex, taskIndex } = match.params;\r\n\r\n const module = program && program.modules && program.modules[moduleIndex];\r\n const task = module && module.tasks && module.tasks[taskIndex];\r\n\r\n if (!task) {\r\n return hasLoaded ? (\r\n
\r\n \r\n
\r\n\r\n \r\n {programImage &&
\r\n\r\n \r\n
\r\n \r\n \r\n {program.name}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n {translate('modules')}\r\n \r\n
\r\n\r\n \r\n {program.modules && program.modules.map((module, i) => (\r\n \r\n
\r\n \r\n \r\n {i + 1}\r\n \r\n
\r\n \r\n \r\n {module.name}\r\n \r\n
\r\n \r\n ))}\r\n \r\n \r\n {task.name}\r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nTask.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n clientConfig: PropTypes.object.isRequired,\r\n match: PropTypes.shape({\r\n params: PropTypes.shape({\r\n programId: PropTypes.string.isRequired,\r\n moduleIndex: PropTypes.string.isRequired,\r\n taskIndex: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n completeTask: PropTypes.func.isRequired,\r\n visitTask: PropTypes.func.isRequired,\r\n hasLoaded: PropTypes.bool.isRequired,\r\n latestCompletedStep: PropTypes.number.isRequired,\r\n program: PropTypes.object,\r\n patientProgramElementId: PropTypes.string,\r\n endSession: PropTypes.func.isRequired,\r\n};\r\n\r\nTask.defaultProps = {\r\n program: null,\r\n patientProgramElementId: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n translate: getTranslate(state.localize),\r\n clientConfig: state.auth.clientConfig,\r\n program: state.publicStore.details && state.publicStore.details[ownProps.match.params.programId],\r\n patientProgramElementId: state.publicStore.patientProgramElementId,\r\n hasLoaded: Boolean(state.publicStore.requests[`${PUBLIC_PROGRAM_RECEIVED}/${ownProps.match.params.programId}`]\r\n && state.publicStore.requests[`${PUBLIC_PROGRAM_RECEIVED}/${ownProps.match.params.programId}`].completed),\r\n latestCompletedStep: state.publicStore.latestCompletedStep,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(PublicStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Task));\r\n","import * as React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { Button } from '@material-ui/core';\r\n\r\nimport * as PublicStore from '../../../app/store/PublicStore';\r\nimport urls from '../../../app/urls';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n margin: theme.spacing(4, 0, 2),\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n button: {\r\n textTransform: 'none',\r\n },\r\n});\r\n\r\nconst useStyles = makeStyles(theme => styles(theme), { name: 'Footer' });\r\n\r\nconst Footer = () => {\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n\r\n const translate = useSelector(state => getTranslate(state.localize));\r\n const currentProgramId = useSelector(state => state.publicStore.currentProgramId);\r\n const patientProgramElementId = useSelector(state => state.publicStore.patientProgramElementId);\r\n\r\n if (!patientProgramElementId) {\r\n return null;\r\n }\r\n\r\n const endSession = () => {\r\n const redirect = `${urls.public.program}/${currentProgramId}`;\r\n dispatch(PublicStore.actionCreators.endSession(PublicStore.endSessionReasons.manualEnd, redirect));\r\n };\r\n\r\n return (\r\n \r\n {!isFirstTask && (\r\n \r\n \r\n {translate('next')}\r\n
\r\n )}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Footer;\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport * as PublicStore from '../../../app/store/PublicStore';\r\nimport Auth from '../../../youwell-common/Auth';\r\nimport { hasValue } from '../../../youwell-common/objectUtils';\r\n\r\nclass LoadProgram extends React.Component {\r\n componentDidMount() {\r\n if (!this.props.currentProgram) {\r\n this.props.getElement(this.props.programId, { isPage: this.props.isPage });\r\n }\r\n if (Auth.isUserAuthenticated() && !this.props.hasSessionData) {\r\n this.props.getSession(this.props.programId);\r\n }\r\n this.props.setCurrentProgram(this.props.programId);\r\n }\r\n\r\n render() {\r\n return null;\r\n }\r\n}\r\n\r\nLoadProgram.propTypes = {\r\n getElement: PropTypes.func.isRequired,\r\n getSession: PropTypes.func.isRequired,\r\n setCurrentProgram: PropTypes.func.isRequired,\r\n currentProgram: PropTypes.object,\r\n hasSessionData: PropTypes.bool.isRequired,\r\n programId: PropTypes.string.isRequired,\r\n isPage: PropTypes.bool.isRequired,\r\n};\r\n\r\nLoadProgram.defaultProps = {\r\n currentProgram: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n const programId = ownProps.programId || ownProps.match?.params.programId;\r\n const isPage = ownProps.isPage || hasValue(ownProps.match?.params.programId);\r\n\r\n return {\r\n programId,\r\n isPage,\r\n currentProgram: state.publicStore.details && state.publicStore.details[programId],\r\n hasSessionData: Boolean(state.publicStore.patientId && state.publicStore.progress),\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(PublicStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LoadProgram);\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport classnames from 'classnames';\r\n\r\nimport * as PublicStore from '../../../app/store/PublicStore';\r\n\r\nimport { Loading, TaskContent } from '../../../youwell-common/components';\r\nimport { getContentTranslations, AUTOSAVE_TIMEOUT_INTERVAL, styles as defaultStyles } from '../../../common/components/VimoTaskContent';\r\nimport Auth from '../../../youwell-common/Auth';\r\nimport { getItemFromProgram } from '../../../youwell-common/taskContentUtils';\r\nimport { getPublicProgramContentLink } from '../../../common/taskUtils';\r\nimport { getSpecificTaskResponses, getUpdatedResponsesForTask } from '../../../youwell-common/responseUtils';\r\n\r\nconst styles = theme => ({\r\n ...defaultStyles(theme),\r\n});\r\n\r\nconst useStyles = makeStyles(theme => styles(theme), { name: 'PublicTaskContent' });\r\n\r\nconst PublicTaskContent = ({\r\n forwardedRef, program, task, moduleId,\r\n}) => {\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n\r\n const saveTimer = React.useRef();\r\n\r\n const translate = useSelector(state => getTranslate(state.localize));\r\n const allTaskResponses = useSelector(state => state.publicStore.responses);\r\n const patientProgramElementId = useSelector(state => state.publicStore.patientProgramElementId);\r\n const completedTasks = useSelector(state => state.publicStore.completedTasks);\r\n const [changeId, setChangeId] = React.useState(null);\r\n const [showSavingId, setShowSavingId] = React.useState(false);\r\n\r\n const responsesForCurrentTask = allTaskResponses && allTaskResponses[patientProgramElementId]\r\n && allTaskResponses[patientProgramElementId][task.id];\r\n const formId = responsesForCurrentTask?.formId;\r\n\r\n const updateResponse = (responses) => {\r\n const responseData = {\r\n programId: program.id,\r\n moduleId,\r\n taskId: task.id,\r\n taskVersion: task.version,\r\n patientProgramElementId,\r\n formId,\r\n responses,\r\n };\r\n\r\n setChangeId(Date.now());\r\n dispatch(PublicStore.actionCreators.updateResponse(responseData));\r\n };\r\n\r\n const saveResponses = React.useCallback((taskResponses, callback, showIsSaving) => {\r\n const responseData = changeId && getUpdatedResponsesForTask(taskResponses, patientProgramElementId, task.id, task.version, formId);\r\n\r\n if (responseData) {\r\n if (showIsSaving) {\r\n setShowSavingId(changeId);\r\n }\r\n dispatch(PublicStore.actionCreators.saveResponse(responseData, {\r\n background: true,\r\n callback: () => {\r\n setChangeId(prevId => (prevId === changeId ? null : prevId));\r\n setShowSavingId(prevId => (prevId === changeId ? null : prevId));\r\n\r\n if (callback) {\r\n callback();\r\n }\r\n },\r\n }));\r\n } else if (callback) {\r\n callback();\r\n }\r\n }, [changeId, dispatch, formId, patientProgramElementId, task.id, task.version]);\r\n\r\n const saveChanges = (callback) => {\r\n if (responsesForCurrentTask) {\r\n if (Auth.isUserAuthenticated()) {\r\n clearTimeout(saveTimer.current);\r\n saveResponses(responsesForCurrentTask, callback, true);\r\n } else {\r\n const responseData = {\r\n ...getUpdatedResponsesForTask(responsesForCurrentTask, null, task.id, task.version, null),\r\n programId: program.id,\r\n moduleId,\r\n completedTasks: completedTasks ? Object.keys(completedTasks) : null,\r\n };\r\n\r\n dispatch(PublicStore.actionCreators.sendFirstResponse(responseData, { callback }));\r\n }\r\n } else if (callback) {\r\n callback();\r\n }\r\n };\r\n\r\n React.useEffect(() => {\r\n if (responsesForCurrentTask && changeId && Auth.isUserAuthenticated()) {\r\n if (saveTimer.current) {\r\n clearTimeout(saveTimer.current);\r\n }\r\n saveTimer.current = setTimeout(() => {\r\n saveResponses(responsesForCurrentTask);\r\n }, AUTOSAVE_TIMEOUT_INTERVAL);\r\n }\r\n }, [changeId, responsesForCurrentTask, saveResponses, task.id]);\r\n\r\n const getLinkUrl = link => getPublicProgramContentLink(link, program);\r\n\r\n const getProgramItem = id => getItemFromProgram(program, id);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n );\r\n};\r\n\r\nModule.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n hasLoaded: PropTypes.bool.isRequired,\r\n module: PropTypes.object,\r\n};\r\n\r\nModule.defaultProps = {\r\n module: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n const itemId = ownProps?.match?.params?.moduleId;\r\n const module = itemId && state.program.content && state.program.content[state.pageSettings.appConfig?.resourcesProgramId]?.modules\r\n ?.find(d => d.id === itemId);\r\n\r\n return {\r\n translate: getTranslate(state.localize),\r\n clientConfig: state.auth.clientConfig,\r\n hasLoaded: Boolean(state.program.content && state.program.content[state.pageSettings.appConfig?.resourcesProgramId]),\r\n module,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Module));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { Fab } from '@material-ui/core';\r\n\r\nimport { InfoMessage, TopActionBar } from '../../common/components';\r\nimport ResourceTaskContent from './components/ResourceTaskContent';\r\nimport { PrintIcon } from '../../common/icons';\r\nimport { headerHeight } from '../outside/components/Layout';\r\n\r\nexport const styles = theme => ({\r\n root: {\r\n },\r\n content: {\r\n minHeight: '80vh',\r\n padding: theme.spacing(2, 4),\r\n\r\n [theme.breakpoints.up('sm')]: {\r\n padding: theme.spacing(4),\r\n },\r\n },\r\n printFab: {\r\n display: 'none', // tmp..\r\n position: 'absolute',\r\n right: 0 + theme.spacing(2) + 70,\r\n top: headerHeight + theme.spacing(2),\r\n zIndex: 101,\r\n\r\n [theme.breakpoints.down('sm')]: {\r\n display: 'none',\r\n },\r\n },\r\n});\r\n\r\nconst Task = ({\r\n classes, translate, task, hasLoaded,\r\n}) => {\r\n if (!task) {\r\n return hasLoaded ? (\r\n {moduleImage && (\r\n
\r\n \r\n
\r\n )}\r\n\r\n \r\n {module.tasks?.map(task => (\r\n \r\n \r\n {task.name}\r\n \r\n \r\n ))}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nTask.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n hasLoaded: PropTypes.bool.isRequired,\r\n task: PropTypes.object,\r\n};\r\n\r\nTask.defaultProps = {\r\n task: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n const itemId = ownProps?.match?.params?.taskId;\r\n const task = itemId && state.program.content && state.program.content[state.pageSettings.appConfig?.resourcesProgramId]?.modules\r\n ?.reduce((prev, curr) => {\r\n if (prev) return prev;\r\n const ct = curr.tasks?.find(d => d.id === itemId);\r\n if (ct) return { ...ct, moduleId: curr.id, moduleName: curr.name };\r\n return null;\r\n }\r\n , null);\r\n\r\n return {\r\n translate: getTranslate(state.localize),\r\n clientConfig: state.auth.clientConfig,\r\n hasLoaded: Boolean(state.program.content && state.program.content[state.pageSettings.appConfig?.resourcesProgramId]),\r\n task,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Task));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport classnames from 'classnames';\r\n\r\nimport * as PageSettingStore from '../../../app/store/PageSettingStore';\r\n\r\nimport { TaskContent } from '../../../youwell-common/components';\r\nimport urls from '../../../app/urls';\r\nimport { isBrowser } from '../../../youwell-common/browserUtils';\r\nimport { parseInternalLink } from '../../../youwell-common/taskContentUtils';\r\nimport { getContentTranslations, styles as defaultStyles } from '../../../common/components/VimoTaskContent';\r\n\r\nexport const styles = theme => ({\r\n ...defaultStyles,\r\n taskTitle: {\r\n color: theme.palette.primary.main,\r\n marginBottom: theme.spacing(4),\r\n },\r\n});\r\n\r\n\r\nclass ResourceTaskContent extends React.Component {\r\n componentDidMount() {\r\n if (isBrowser) {\r\n // eslint-disable-next-line no-underscore-dangle\r\n window.__clickInternalLink = this.clickInternalLink;\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n if (isBrowser) {\r\n // eslint-disable-next-line no-underscore-dangle\r\n window.__clickInternalLink = null;\r\n }\r\n }\r\n\r\n clickInternalLink = (elementId) => {\r\n const url = this.getLinkUrl({ url: elementId });\r\n this.props.redirect(url);\r\n }\r\n\r\n getLinkUrl = (link) => {\r\n const { taskOrModuleId, hash } = parseInternalLink(link);\r\n return `${urls.inside.resource.task}/${taskOrModuleId}${hash}`;\r\n }\r\n\r\n getProgramItem = id => (this.props.allContent ? this.props.allContent[id] : null)\r\n\r\n render() {\r\n const {\r\n classes, translate, task, showTitle,\r\n } = this.props;\r\n\r\n if (!task) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n window.print()}\r\n className={classes.printFab}\r\n color=\"primary\"\r\n title={translate('taskCommenting.print')}\r\n >\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nEditStudent.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n clientConfig: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n insertElement: PropTypes.func.isRequired,\r\n updateElement: PropTypes.func.isRequired,\r\n studentData: PropTypes.object,\r\n match: PropTypes.shape({\r\n params: PropTypes.shape({\r\n studentId: PropTypes.string,\r\n }).isRequired,\r\n }).isRequired,\r\n};\r\n\r\nEditStudent.defaultProps = {\r\n studentData: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n translate: getTranslate(state.localize),\r\n clientConfig: state.auth.clientConfig,\r\n studentData: state.patient.details && state.patient.details[ownProps.match.params.studentId],\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(PatientStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(EditStudent));\r\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 { Link } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport classnames from 'classnames';\r\nimport {\r\n withStyles,\r\n Typography,\r\n Stepper,\r\n Step,\r\n StepLabel,\r\n Button,\r\n LinearProgress,\r\n} from '@material-ui/core';\r\n\r\nimport ContactPersonList from './components/ContactPersonList';\r\nimport StudentTeacherList from './components/StudentTeacherList';\r\nimport EditTeachers from './components/EditTeachers';\r\nimport SkillInfo from './components/SkillInfo';\r\nimport WeekOverview from './components/WeekOverview';\r\nimport EditDetails from './components/EditDetails';\r\n\r\nimport {\r\n InfoBox, TopActionBar, NoContentClickToAdd, VimoLink, AddForm,\r\n} from '../../common/components';\r\nimport { SkillIcon } from '../../common/icons';\r\nimport * as PatientStore from '../../app/store/PatientStore';\r\nimport { getNumberOfWeeks, getWeekNumber } from '../../youwell-common/dateUtils';\r\nimport { DialogButton } from '../../youwell-common/components';\r\n\r\nimport urls from '../../app/urls';\r\nimport { green3 } from '../../app/style/theme';\r\nimport ResourceStudentList from './components/ResourceStudentList';\r\nimport FormList from './components/FormList';\r\nimport EditContactPerson from './components/EditContactPerson';\r\nimport { appRoles, orgLicence } from '../../youwell-common/constants';\r\nimport EditStudentAccessCode from './components/EditStudentAccessCode';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n },\r\n content: {\r\n padding: theme.spacing(3),\r\n display: 'flex',\r\n\r\n [theme.breakpoints.down('sm')]: {\r\n flexWrap: 'wrap',\r\n },\r\n [theme.breakpoints.down('xs')]: {\r\n flexDirection: 'column',\r\n padding: theme.spacing(1),\r\n },\r\n },\r\n column: {\r\n width: `calc(100% / 3 - ${theme.spacing(2)}px)`,\r\n margin: theme.spacing(1),\r\n display: 'flex',\r\n flexDirection: 'column',\r\n\r\n [theme.breakpoints.down('sm')]: {\r\n width: `calc(100% / 2 - ${theme.spacing(2)}px)`,\r\n flex: '1 1 auto',\r\n marginTop: 0,\r\n },\r\n [theme.breakpoints.down('xs')]: {\r\n width: '100%',\r\n margin: 0,\r\n },\r\n },\r\n mergedOnSmall: {\r\n [theme.breakpoints.only('sm')]: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n },\r\n },\r\n infoBox: {\r\n marginBottom: theme.spacing(2),\r\n flex: '1 1 auto',\r\n },\r\n infoBoxMergedOnSmall: {\r\n [theme.breakpoints.only('sm')]: {\r\n width: `calc(100% / 2 - ${theme.spacing(1)}px)`,\r\n flex: 'none',\r\n },\r\n },\r\n progress: {\r\n background: 'transparent',\r\n width: '100%',\r\n overflow: 'hidden',\r\n },\r\n mobileStepper: {\r\n marginTop: theme.spacing(2),\r\n padding: theme.spacing(1),\r\n },\r\n linearProgress: {\r\n marginBottom: theme.spacing(1),\r\n },\r\n actionButtons: {\r\n margin: theme.spacing(4),\r\n borderTop: theme.borders.normal,\r\n paddingTop: theme.spacing(4),\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n },\r\n actionButton: {\r\n marginLeft: theme.spacing(2),\r\n },\r\n deleteButton: {\r\n marginLeft: theme.spacing(2),\r\n color: theme.colors.red1,\r\n borderColor: theme.colors.red1,\r\n '&:hover': {\r\n backgroundColor: theme.colors.red2,\r\n },\r\n },\r\n weekplan: {\r\n margin: theme.spacing(2, 4),\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n margin: 0,\r\n padding: theme.spacing(1),\r\n },\r\n },\r\n accessCode: {\r\n marginLeft: theme.spacing(1),\r\n fontSize: 'larger',\r\n textTransform: 'uppercase',\r\n },\r\n});\r\n\r\nclass Home extends React.Component {\r\n deleteStudent = () => {\r\n this.props.deleteElement(this.props.studentData, {\r\n redirect: urls.inside.home,\r\n });\r\n }\r\n\r\n render() {\r\n const {\r\n classes, translate, profileData, studentData, appConfig, clientConfig,\r\n } = this.props;\r\n\r\n if (!studentData) {\r\n return null;\r\n }\r\n\r\n const isTeacher = appRoles.isTherapist([profileData?.selectedRole?.role]);\r\n const hasOrgLicense = profileData?.selectedRole.license >= orgLicence.Trial;\r\n\r\n const { currentSkills } = studentData;\r\n const resourceStudentList = studentData?.extendedProperties?.resourceStudents && JSON.parse(studentData.extendedProperties.resourceStudents);\r\n\r\n const weeksList = currentSkills?.map(skill => skill && getNumberOfWeeks(skill.startTime, skill.endTime));\r\n const currentWeeks = currentSkills?.map(skill => skill && ((getWeekNumber() - getWeekNumber(skill.startTime) + 52) % 52) + 1);\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 {translate('studentEdit.resourceStudents')} \r\n {translate('studentEdit.resourceStudentsDescription')} \r\n
\r\n\r\n {!clientConfig.u_AnonymousOnly && (\r\n \r\n {translate('studentEdit.contacts')} \r\n {translate('studentEdit.contactsDescription')} \r\n
\r\n )}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nHome.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n clientConfig: PropTypes.object.isRequired,\r\n match: PropTypes.shape({\r\n params: PropTypes.shape({\r\n studentId: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n profileData: PropTypes.object,\r\n studentData: PropTypes.object,\r\n deleteElement: PropTypes.func.isRequired,\r\n appConfig: PropTypes.object.isRequired,\r\n};\r\n\r\nHome.defaultProps = {\r\n profileData: null,\r\n studentData: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n translate: getTranslate(state.localize),\r\n appConfig: state.pageSettings.appConfig,\r\n clientConfig: state.auth.clientConfig,\r\n profileData: state.auth.profileData,\r\n studentData: state.patient.details && state.patient.details[ownProps.match.params.studentId],\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(PatientStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Home));\r\n","import * as React from 'react';\r\nimport {\r\n Route, Switch, Redirect,\r\n} from 'react-router-dom';\r\n\r\nimport Home from './Home';\r\nimport EditStudent from './EditStudent';\r\nimport Skills from './Skills';\r\nimport Plan from './Plan';\r\nimport Today from './Today';\r\nimport Task from './Task';\r\n\r\nimport LoadStudent from './components/LoadStudent';\r\n\r\nimport urls from '../../app/urls';\r\nimport { PageNotFound } from '../../youwell-common/components';\r\nimport Progress from './Progress';\r\n\r\nconst RedirectToHome = ({ ...rest }) => (\r\n \r\n {currentSkills?.map((skill, index) => (\r\n
\r\n\r\n \r\n
\r\n\r\n {isTeacher && (\r\n \r\n {currentSkills?.length\r\n ? currentSkills.map((skill, index) => (\r\n \r\n {weeksList[index] > 5 ? (\r\n \r\n {[...Array(weeksList[index]).keys()].map(i => (\r\n \r\n {`${i + 1}/${weeksList[index]}`} \r\n \r\n ))}\r\n \r\n )}\r\n \r\n ))\r\n\r\n : (\r\n \r\n \r\n \r\n {studentData.programData?.accessCode ? (\r\n \r\n {`${translate('student.accessCode')}:`}\r\n {studentData.programData.accessCode}\r\n \r\n ) : (\r\n \r\n {translate('student.noAccessCodeRegistered')}\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n {translate('student.weekXofX', { current: currentWeeks[index], total: weeksList[index] })}\r\n \r\n
\r\n ) : (\r\n \r\n {!clientConfig.u_AnonymousOnly && (\r\n \r\n {studentData.contactPersons?.length > 0 ? (\r\n \r\n {translate('student.noContacts')}\r\n \r\n )}\r\n \r\n )}\r\n\r\n \r\n {resourceStudentList && resourceStudentList.length > 0 ? (\r\n \r\n {translate('student.noResourceStudents')}\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n {studentData.extendedProperties?.behaviour}\r\n \r\n \r\n \r\n \r\n {studentData.extendedProperties?.hypothesis}\r\n \r\n \r\n \r\n \r\n {studentData.extendedProperties?.socialSkill}\r\n \r\n \r\n \r\n \r\n {studentData.extendedProperties?.environmentAdjustments}\r\n \r\n \r\n
\r\n \r\n {appConfig.mappingFormTaskId && (\r\n \r\n \r\n \r\n {studentData.description}\r\n \r\n \r\n\r\n \r\n \r\n \r\n {studentData.extendedProperties?.motivation}\r\n \r\n \r\n
\r\n \r\n \r\n {translate('student.editPlan')}\r\n \r\n \r\n {translate('student.editStudent')}\r\n \r\n
\r\n )}\r\n \r\n
\r\n\r\n {canEdit && (\r\n \r\n {currentSkill\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 \r\n {currentSkill.module ? currentSkill.module.name : ''}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {currentSkill.startTime ? (\r\n <>\r\n \r\n {translate('studentPlan.planDescription')}\r\n \r\n \r\n ) : (\r\n \r\n {translate('studentPlan.planDescriptionStart')}\r\n \r\n )}\r\n\r\n \r\n \r\n {currentSkill.startTime && (\r\n \r\n {translate('studentPlan.planDescriptionDragItems')}\r\n \r\n )}\r\n \r\n {(provided, snapshot) => (\r\n \r\n {currentSkill?.module?.tasks?.map((task, i) => (\r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n {translate('studentPlan.noSkillsSelected')}\r\n \r\n \r\n {translate('studentPlan.noSkillsSelectedDescription')}\r\n \r\n
\r\n )}\r\n \r\n \r\n {translate('studentPlan.selectSkills')}\r\n \r\n
\r\n \r\n \r\n {translate('studentPlan.aboutTheExercises')}\r\n \r\n\r\n
\r\n\r\n {this.state.showModal && (\r\n \r\n \r\n {translate('progress.problemArea')}\r\n \r\n
\r\n );\r\n};\r\n\r\nProblemArea.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n sensor: PropTypes.object.isRequired,\r\n studentId: PropTypes.string.isRequired,\r\n readOnly: PropTypes.bool,\r\n};\r\n\r\nProblemArea.defaultProps = {\r\n readOnly: false,\r\n};\r\nconst Progress = ({\r\n classes, translate, studentData, profileData,\r\n}) => {\r\n const [newSensorName, setNewSensorName] = React.useState('');\r\n const dispatch = useDispatch();\r\n const canEdit = profileData?.userAccess?.editPatients;\r\n\r\n if (!studentData) {\r\n return null;\r\n }\r\n\r\n const addArea = () => {\r\n const data = {\r\n patientId: studentData.id,\r\n name: newSensorName,\r\n };\r\n if (newSensorName) {\r\n dispatch(PatientStore.actionCreators.insertProblemArea(data, { reducerParams: { patientId: studentData.id } }));\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n\r\n {!readOnly && (\r\n \r\n \r\n {sensor.name}\r\n \r\n
\r\n\r\n {!readOnly && (\r\n \r\n \r\n {translate('student.addObservation')}\r\n \r\n
\r\n )}\r\n\r\n \r\n setDate(e.target.value)}\r\n InputLabelProps={{ shrink: true }}\r\n className={classes.input}\r\n />\r\n setCount(e.target.value)}\r\n InputLabelProps={{ shrink: true }}\r\n className={classes.inputCount}\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 )}\r\n \r\n {studentData && (\r\n
\r\n );\r\n};\r\n\r\nProgress.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n studentData: PropTypes.object,\r\n profileData: PropTypes.object,\r\n};\r\n\r\nProgress.defaultProps = {\r\n profileData: null,\r\n studentData: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n translate: getTranslate(state.localize),\r\n profileData: state.auth.profileData,\r\n studentData: state.patient.details && state.patient.details[ownProps.match.params.studentId],\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Progress));\r\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 { DragDropContext, Droppable } from 'react-beautiful-dnd';\r\nimport { bindActionCreators } from 'redux';\r\nimport classnames from 'classnames';\r\nimport {\r\n withStyles, Typography, Accordion, AccordionSummary, AccordionDetails,\r\n} from '@material-ui/core';\r\n\r\nimport {\r\n ContentBox, TopActionBar, BottomActionBar, VimoModal,\r\n} from '../../common/components';\r\nimport { getTrainingModules } from '../../common/utils/programUtils';\r\nimport { Loading } from '../../youwell-common/components';\r\nimport { toLookup } from '../../youwell-common/arrayUtils';\r\nimport { ExpandIcon } from '../../common/icons';\r\nimport urls from '../../app/urls';\r\n\r\nimport * as PatientStore from '../../app/store/PatientStore';\r\n\r\nimport DragableSkill from './components/DragableSkill';\r\nimport SelectedSkill from './components/SelectedSkill';\r\nimport SkillInfo from './components/SkillInfo';\r\nimport { vimoElementGroups } from '../../common/constants';\r\nimport { today } from '../../youwell-common/dateUtils';\r\n\r\nconst SELECTED_SKILLS_DROP_ID = 'SELECTED_SKILLS_DROP_ID';\r\nconst ALL_SKILLS_DROP_ID = 'ALL_SKILLS_DROP_ID';\r\nconst taskWidth = 120;\r\n\r\nconst styles = theme => ({\r\n root: {\r\n },\r\n content: {\r\n padding: theme.spacing(4),\r\n },\r\n skillsSelection: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n margin: `${theme.spacing(4)}px ${-theme.spacing(1)}px`,\r\n },\r\n selectedSkills: {\r\n },\r\n selectedSkillsContent: {\r\n border: theme.borders.dashed,\r\n width: (taskWidth * 2) + theme.spacing(4) + 4,\r\n minHeight: 200,\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n position: 'relative',\r\n },\r\n allSkills: {\r\n },\r\n allSkillsContent: {\r\n width: (taskWidth * 3) + theme.spacing(6) + 4,\r\n },\r\n expansionPanelExpanded: {\r\n border: theme.borders.dashed,\r\n },\r\n allSkillsContentModules: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n padding: 0,\r\n },\r\n skillsTask: {\r\n width: taskWidth,\r\n margin: theme.spacing(1),\r\n },\r\n selectedSkillPlaceholder: {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n width: '100%',\r\n height: '100%',\r\n opacity: 0.1,\r\n },\r\n isDraggingOver: {\r\n background: theme.colors.green1,\r\n },\r\n description: {\r\n margin: theme.spacing(2),\r\n },\r\n\r\n});\r\n\r\nconst initialState = {\r\n studentId: '',\r\n updated: '',\r\n selectedModules: [],\r\n hasUnsavedChanges: false,\r\n saveMessage: '',\r\n};\r\n\r\nconst getStateFromData = (studentData) => {\r\n const deafultState = {\r\n ...initialState,\r\n studentId: studentData && studentData.id,\r\n updated: studentData && studentData.updated,\r\n };\r\n\r\n if (!studentData || !studentData.programData) {\r\n return deafultState;\r\n }\r\n\r\n return {\r\n ...deafultState,\r\n completeDetailsLoaded: studentData.programData && !studentData.programData.limitedDetails,\r\n visibleCategory: false,\r\n selectedModules: getTrainingModules(studentData.programData) || [],\r\n };\r\n};\r\n\r\nclass Skills extends React.Component {\r\n state = getStateFromData(this.props.studentData)\r\n\r\n static getDerivedStateFromProps(props, state) {\r\n if (props.studentData\r\n && (props.studentData.id !== state.studentId\r\n || props.studentData.updated !== state.updated\r\n || (props.studentData.programData && !state.completeDetailsLoaded && !props.studentData.programData.limitedDetails))) {\r\n return getStateFromData(props.studentData);\r\n }\r\n return null;\r\n }\r\n\r\n toggleCategory = category => (event, expanded) => {\r\n this.setState({\r\n visibleCategory: expanded ? category : false,\r\n });\r\n }\r\n\r\n showModuleInfo = module => () => {\r\n this.setState({ showModuleInfo: module });\r\n }\r\n\r\n hideModuleInfo = () => {\r\n this.setState({ showModuleInfo: null });\r\n }\r\n\r\n removeSkill = moduleId => () => {\r\n this.setState(prevState => ({\r\n selectedModules: prevState.selectedModules.filter(d => d.id !== moduleId),\r\n hasUnsavedChanges: true,\r\n saveMessage: '',\r\n }));\r\n }\r\n\r\n addSkill = moduleIndex => () => {\r\n this.setState(prevState => ({\r\n selectedModules: [...prevState.selectedModules, this.props.moduleList[moduleIndex]],\r\n hasUnsavedChanges: true,\r\n saveMessage: '',\r\n }));\r\n }\r\n\r\n onDragEnd = (result) => {\r\n const { source, destination, draggableId } = result;\r\n\r\n if (!destination) {\r\n if (source.droppableId === SELECTED_SKILLS_DROP_ID) {\r\n this.removeSkill(draggableId)();\r\n }\r\n } else if (destination.droppableId === SELECTED_SKILLS_DROP_ID) {\r\n if (source.droppableId === ALL_SKILLS_DROP_ID) {\r\n this.addSkill(source.index)();\r\n }\r\n }\r\n }\r\n\r\n save = () => {\r\n const programData = this.props.studentData.programData || {\r\n patientId: this.props.studentData.id,\r\n programId: this.props.vimoProgramId,\r\n startDate: today(),\r\n elements: [],\r\n };\r\n const existingElements = programData.elements || [];\r\n const otherElements = existingElements.filter(d => d.elementGroup !== vimoElementGroups.main);\r\n\r\n const selectedModulesLookup = toLookup(this.state.selectedModules);\r\n const existingModulesLookup = existingElements\r\n .reduce((prev, curr) => (\r\n curr.module ? { ...prev, [curr.module.id]: true } : prev\r\n ), {});\r\n\r\n const newElements = this.state.selectedModules.filter(d => !existingModulesLookup[d.id]).map(module => (\r\n { module: { id: module.id }, sorting: module.sorting, elementGroup: vimoElementGroups.main }\r\n ));\r\n\r\n const patientProgram = {\r\n ...programData,\r\n elements: [\r\n ...otherElements,\r\n ...existingElements\r\n .filter(d => d.module && selectedModulesLookup[d.module.id]),\r\n ...newElements,\r\n ],\r\n };\r\n\r\n if (programData.id) {\r\n this.props.updateProgramForPatient(patientProgram, {\r\n callback: () => {\r\n this.setState({\r\n hasUnsavedChanges: false,\r\n saveMessage: this.props.translate('studentPlan.allChangesSaved'),\r\n });\r\n },\r\n redirect: `${urls.inside.student.home}/${this.props.studentData.id}/${urls.inside.student.parts.plan}`,\r\n reducerParams: { patientId: this.props.studentData.id },\r\n });\r\n } else {\r\n this.props.insertProgramForPatient(patientProgram, {\r\n callback: () => {\r\n this.setState({\r\n hasUnsavedChanges: false,\r\n saveMessage: this.props.translate('studentPlan.allChangesSaved'),\r\n });\r\n },\r\n redirect: `${urls.inside.student.home}/${this.props.studentData.id}/${urls.inside.student.parts.plan}`,\r\n reducerParams: { patientId: this.props.studentData.id },\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n classes, translate, studentData, moduleList, profileData,\r\n } = this.props;\r\n\r\n if (!studentData) {\r\n return null;\r\n }\r\n\r\n const selectedLookup = toLookup(this.state.selectedModules);\r\n\r\n const moduleCategories = [\r\n { id: 'communication', modules: [] },\r\n { id: 'play', modules: [] },\r\n { id: 'friendship', modules: [] },\r\n { id: 'selfcontrol', modules: [] },\r\n { id: 'conflicts', modules: [] },\r\n ];\r\n\r\n if (moduleList) {\r\n for (let i = 0; i < moduleList.length; i++) {\r\n const el = { ...moduleList[i], index: i };\r\n if (i < 23) {\r\n moduleCategories[0].modules.push(el);\r\n } else if (i < 32) {\r\n moduleCategories[1].modules.push(el);\r\n } else if (i < 47) {\r\n moduleCategories[2].modules.push(el);\r\n } else if (i < 60) {\r\n moduleCategories[3].modules.push(el);\r\n } else {\r\n moduleCategories[4].modules.push(el);\r\n }\r\n }\r\n }\r\n\r\n const canEdit = profileData?.userAccess?.editPatients;\r\n\r\n return (\r\n \r\n \r\n {translate('progress.heading')}\r\n \r\n \r\n {translate('progress.description')}\r\n \r\n\r\n
\r\n \r\n {studentData.sensors?.length > 0 ? studentData.sensors.map(\r\n sensor => (\r\n \r\n {translate('student.noProblemAreasDefined')}\r\n \r\n )}\r\n
\r\n\r\n \r\n\r\n {canEdit && (\r\n \r\n setNewSensorName(e.target.value)} />\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n\r\n {canEdit && (\r\n \r\n \r\n {translate('studentSkills.selectSkillsDescription')}\r\n \r\n \r\n \r\n {provided => (\r\n \r\n {moduleList ? moduleCategories.map(category => (\r\n \r\n {translate(`moduleCategories.${category.id}`)} \r\n \r\n \r\n {category.modules.map(module => (\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 \r\n \r\n {(provided, snapshot) => (\r\n \r\n {provided.placeholder}\r\n
\r\n )}\r\n \r\n {this.state.selectedModules.map(module => (\r\n \r\n {studentData && (\r\n \r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nTask.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n studentData: PropTypes.object,\r\n taskData: PropTypes.object,\r\n};\r\n\r\nTask.defaultProps = {\r\n studentData: null,\r\n taskData: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n translate: getTranslate(state.localize),\r\n studentData: state.patient.details && state.patient.details[ownProps.match.params.studentId],\r\n taskData: state.program.taskDetails && state.program.taskDetails[ownProps.match.params.taskId],\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Task));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles, Typography, Divider } from '@material-ui/core';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { connect } from 'react-redux';\r\n\r\nimport { TopActionBar, VimoTaskContent } from '../../common/components';\r\n\r\nimport TaskAvatar from './components/TaskAvatar';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n },\r\n content: {\r\n padding: theme.spacing(4),\r\n },\r\n title: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n marginBottom: theme.spacing(2),\r\n },\r\n avatar: {\r\n marginRight: theme.spacing(1),\r\n },\r\n task: {\r\n marginBottom: theme.spacing(4),\r\n },\r\n divider: {\r\n backgroundColor: theme.colors.grey3,\r\n marginBottom: theme.spacing(4),\r\n },\r\n});\r\n\r\nclass Today extends React.Component {\r\n render() {\r\n const {\r\n classes, translate, studentData, taskDetails,\r\n } = this.props;\r\n\r\n return (\r\n \r\n
\r\n\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nToday.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n studentData: PropTypes.object,\r\n taskDetails: PropTypes.object,\r\n};\r\n\r\nToday.defaultProps = {\r\n studentData: null,\r\n taskDetails: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n translate: getTranslate(state.localize),\r\n studentData: state.patient.details && state.patient.details[ownProps.match.params.studentId],\r\n taskDetails: state.program.taskDetails,\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Today));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n withStyles,\r\n Typography,\r\n List,\r\n ListItem,\r\n} from '@material-ui/core';\r\n\r\nimport { useSelector } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport {\r\n PersonIcon,\r\n PhoneIcon,\r\n EmailIcon,\r\n UserAccessIcon,\r\n} from '../../../common/icons';\r\nimport { VimoModal } from '../../../common/components';\r\nimport EditContactPerson from './EditContactPerson';\r\n\r\nconst styles = theme => ({\r\n listItem: {\r\n marginBottom: theme.spacing(1),\r\n padding: theme.spacing(1, 0.5),\r\n },\r\n text: {\r\n flex: '1 1 auto',\r\n },\r\n role: {\r\n color: theme.colors.grey3,\r\n },\r\n personIcon: {\r\n fontSize: theme.sizes.mediumIcon,\r\n marginRight: theme.spacing(1),\r\n },\r\n icon: {\r\n marginLeft: theme.spacing(0.5),\r\n\r\n [theme.breakpoints.down('md')]: {\r\n display: 'none',\r\n },\r\n },\r\n});\r\n\r\nconst ContactOverview = ({\r\n classes, contactData, patientId, readOnly,\r\n}) => {\r\n const [showModal, setShowModal] = React.useState(false);\r\n const translate = useSelector(state => getTranslate(state.localize));\r\n\r\n const onClick = () => {\r\n setShowModal(true);\r\n };\r\n\r\n const closeModal = () => {\r\n setShowModal(false);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {studentData && studentData.todaysTasks.map((task, i) => (\r\n \r\n {i > 0 && \r\n ))}\r\n\r\n
\r\n\r\n \r\n \r\n \r\n {taskDetails && taskDetails[task.id] &&
\r\n \r\n { contactData.name} \r\n { contactData.role} \r\n
\r\n {contactData.phone && (\r\n - \r\n {persons.map(person => (\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nContactPersons.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n values: PropTypes.array.isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(ContactPersons));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Draggable } from 'react-beautiful-dnd';\r\nimport {\r\n withStyles, Typography, IconButton, Fab,\r\n} from '@material-ui/core';\r\nimport classnames from 'classnames';\r\n\r\nimport { SkillIcon, InfoIcon, PlusIcon } from '../../../common/icons';\r\n\r\nconst styles = theme => ({\r\n module: {\r\n padding: theme.spacing(1),\r\n overflow: 'hidden',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'flex-start',\r\n background: theme.colors.grey2,\r\n position: 'relative',\r\n },\r\n disabled: {\r\n background: theme.palette.common.white,\r\n border: theme.borders.normal,\r\n },\r\n moduleIcon: {\r\n fontSize: theme.sizes.largeIcon,\r\n marginBottom: theme.spacing(1),\r\n },\r\n actionButton: {\r\n margin: theme.spacing(1),\r\n },\r\n infoIcon: {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n padding: theme.spacing(0.5),\r\n },\r\n name: {\r\n wordBreak: 'break-word',\r\n },\r\n});\r\n\r\nconst getItemStyle = (draggableStyle, isDragging) => ({\r\n userSelect: 'none',\r\n background: isDragging ? '#efefef' : '',\r\n ...draggableStyle,\r\n});\r\n\r\nclass DragableSkill extends React.Component {\r\n render() {\r\n const {\r\n classes, className, module, index, draggableId, disabled, showInfo, onAdd,\r\n } = this.props;\r\n\r\n if (!module) {\r\n return null;\r\n }\r\n\r\n return (\r\n - \r\n {values.map((value, index) => (\r\n
\r\n {translate('studentEdit.contactPersonDescription')} \r\n\r\n \r\n \r\n {translate('studentEdit.userRemoveAccessDisclaimer')}\r\n \r\n ) : (\r\n \r\n {translate('studentEdit.userAccessDisclaimer')}\r\n \r\n )}\r\n \r\n )}\r\n\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nEditContactPerson.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n patientId: PropTypes.string.isRequired,\r\n contactData: PropTypes.object,\r\n updateContact: PropTypes.func.isRequired,\r\n insertContact: PropTypes.func.isRequired,\r\n deleteContact: PropTypes.func.isRequired,\r\n onClose: PropTypes.func.isRequired,\r\n profileData: PropTypes.object.isRequired,\r\n};\r\n\r\nEditContactPerson.defaultProps = {\r\n contactData: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n profileData: state.auth.profileData,\r\n clientConfig: state.auth.clientConfig,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(PatientStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(EditContactPerson)));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport { withStyles, TextField, Button } from '@material-ui/core';\r\n\r\nimport * as PatientStore from '../../../app/store/PatientStore';\r\nimport { getValueByDotNotation } from '../../../youwell-common/objectUtils';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n },\r\n actions: {\r\n marginTop: theme.spacing(2),\r\n padding: theme.spacing(1),\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n },\r\n addIcon: {\r\n marginRight: theme.spacing(1),\r\n },\r\n divider: {\r\n marginTop: theme.spacing(1),\r\n },\r\n});\r\n\r\nconst stateFromData = (data, name) => ({\r\n validationErrors: {},\r\n hasUnsavedChanges: false,\r\n saveMessage: '',\r\n value: getValueByDotNotation(data, name),\r\n});\r\n\r\nclass EditDetails extends React.Component {\r\n state = stateFromData(this.props.studentData, this.props.detailName);\r\n\r\n handleChange = (event) => {\r\n this.setState({ value: event.target.value, hasUnsavedChanges: true });\r\n }\r\n\r\n save = () => {\r\n const { studentData, detailName, onClose } = this.props;\r\n\r\n const data = {\r\n id: studentData.id,\r\n rev: studentData.rev,\r\n changes: {\r\n [detailName]: this.state.value,\r\n },\r\n };\r\n\r\n this.props.patchElement(data, { callback: onClose });\r\n }\r\n\r\n render() {\r\n const {\r\n classes, translate, studentData,\r\n } = this.props;\r\n\r\n if (!studentData) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n
\r\n\r\n {hasOrgLicense && (\r\n \r\n {contactData && (\r\n \r\n {translate('common.cancel')}\r\n \r\n \r\n {translate('common.save')}\r\n \r\n\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nEditDetails.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n match: PropTypes.shape({\r\n params: PropTypes.shape({\r\n studentId: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n studentData: PropTypes.object.isRequired,\r\n detailName: PropTypes.string.isRequired,\r\n patchElement: PropTypes.func.isRequired,\r\n onClose: PropTypes.func.isRequired,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n translate: getTranslate(state.localize),\r\n studentData: state.patient.details && state.patient.details[ownProps.match.params.studentId],\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(PatientStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(EditDetails)));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\n\r\nimport { Button, Typography, makeStyles } from '@material-ui/core';\r\n\r\nimport * as PatientStore from '../../../app/store/PatientStore';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n },\r\n actions: {\r\n marginTop: theme.spacing(2),\r\n padding: theme.spacing(1),\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n },\r\n addIcon: {\r\n marginRight: theme.spacing(1),\r\n },\r\n divider: {\r\n marginTop: theme.spacing(1),\r\n },\r\n currentCode: {\r\n margin: theme.spacing(4),\r\n display: 'flex',\r\n justifyContent: 'center',\r\n textTransform: 'uppercase',\r\n },\r\n deleteButton: {\r\n color: theme.palette.error.main,\r\n },\r\n}));\r\n\r\nconst EditStudentAccessCode = ({ patientId, programData }) => {\r\n const dispatch = useDispatch();\r\n const classes = useStyles();\r\n const translate = useSelector(state => getTranslate(state.localize));\r\n\r\n const generateNewCode = () => {\r\n dispatch(PatientStore.actionCreators.generateNewAccessCode(programData.id, {\r\n // callback: onClose,\r\n reducerParams: { patientId },\r\n }));\r\n };\r\n\r\n const removeCode = () => {\r\n dispatch(PatientStore.actionCreators.removeAccessCode(programData.id, {\r\n // callback: onClose,\r\n reducerParams: { patientId },\r\n }));\r\n };\r\n\r\n if (!programData) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n\r\n \r\n \r\n {translate('student.accessCodeDescription')}\r\n \r\n\r\n {programData.accessCode ? (\r\n \r\n {translate('student.noAccessCodeRegistered')}\r\n \r\n )}\r\n\r\n
\r\n );\r\n};\r\n\r\nEditStudentAccessCode.propTypes = {\r\n patientId: PropTypes.string.isRequired,\r\n programData: PropTypes.object.isRequired,\r\n // onClose: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default EditStudentAccessCode;\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport {\r\n withStyles, Typography, List, ListItem, ListItemText, ListItemAvatar, ListItemSecondaryAction, IconButton, Avatar, ListItemIcon, Divider,\r\n} from '@material-ui/core';\r\n\r\nimport { AddIcon, RemoveIcon, PersonIcon } from '../../../common/icons';\r\n\r\nimport * as PatientStore from '../../../app/store/PatientStore';\r\nimport * as TeacherStore from '../../../app/store/TeacherStore';\r\nimport { appRoles } from '../../../youwell-common/constants';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n },\r\n actions: {\r\n marginTop: theme.spacing(2),\r\n padding: theme.spacing(1),\r\n },\r\n addIcon: {\r\n marginRight: theme.spacing(1),\r\n },\r\n divider: {\r\n marginTop: theme.spacing(1),\r\n },\r\n});\r\n\r\nclass EditTeachers extends React.Component {\r\n componentDidMount() {\r\n if (!this.props.teacherList) {\r\n this.props.fetchTeacherList({ requestParams: { minimumRole: appRoles.therapist } });\r\n }\r\n }\r\n\r\n add = therapistId => () => {\r\n const data = {\r\n patientId: this.props.studentData.id,\r\n therapistId,\r\n };\r\n this.props.insertPatientTherapist(data);\r\n }\r\n\r\n remove = id => () => {\r\n const data = {\r\n patientId: this.props.studentData.id,\r\n therapistId: id,\r\n };\r\n this.props.deletePatientTherapist(data);\r\n }\r\n\r\n render() {\r\n const {\r\n classes, translate, studentData, teacherList,\r\n } = this.props;\r\n\r\n if (!studentData) {\r\n return null;\r\n }\r\n\r\n const studentTeachers = (studentData.therapists || {}).reduce((prev, curr) => (\r\n { ...prev, [curr.therapistId]: true }\r\n ), {});\r\n\r\n return (\r\n \r\n \r\n {programData.accessCode}\r\n \r\n
\r\n ) : (\r\n \r\n {programData.accessCode ? (\r\n \r\n ) : (\r\n \r\n )}\r\n
\r\n\r\n \r\n \r\n {translate('student.assignedTeachers')}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nEditTeachers.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n match: PropTypes.shape({\r\n params: PropTypes.shape({\r\n studentId: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n studentData: PropTypes.object.isRequired,\r\n insertPatientTherapist: PropTypes.func.isRequired,\r\n deletePatientTherapist: PropTypes.func.isRequired,\r\n fetchTeacherList: PropTypes.func.isRequired,\r\n teacherList: PropTypes.array,\r\n};\r\n\r\nEditTeachers.defaultProps = {\r\n teacherList: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n translate: getTranslate(state.localize),\r\n studentData: state.patient.details && state.patient.details[ownProps.match.params.studentId],\r\n teacherList: state.teacher.list,\r\n profileData: state.auth.profileData,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(PatientStore.actionCreators, dispatch),\r\n fetchTeacherList: bindActionCreators(TeacherStore.actionCreators, dispatch).getList,\r\n});\r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(EditTeachers)));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { Typography, ButtonBase, makeStyles } from '@material-ui/core';\r\nimport { datestamp } from '../../../youwell-common/dateUtils';\r\nimport { AddForm, VimoModal } from '../../../common/components';\r\nimport * as PatientStore from '../../../app/store/PatientStore';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n },\r\n item: {\r\n marginBottom: theme.spacing(1),\r\n display: 'flex',\r\n textAlign: 'left',\r\n width: '100%',\r\n },\r\n itemText: {\r\n flex: '1 1 auto',\r\n },\r\n underline: {\r\n borderBottom: '1px solid',\r\n },\r\n}));\r\n\r\nconst FormList = ({\r\n studentId, patientProgramId,\r\n}) => {\r\n const dispatch = useDispatch();\r\n const classes = useStyles();\r\n const translate = useSelector(state => getTranslate(state.localize));\r\n const formElements = useSelector(state => state.patient.details && state.patient.details[studentId]?.therapistTasks);\r\n const [selectedElement, setSelectedElement] = React.useState(null);\r\n\r\n React.useEffect(() => {\r\n if (!formElements) {\r\n dispatch(PatientStore.actionCreators.getTherapistTasks({\r\n requestParams: {\r\n patientId: studentId,\r\n },\r\n reducerParams: {\r\n patientId: studentId,\r\n },\r\n }));\r\n }\r\n }, [dispatch, formElements, studentId]);\r\n\r\n if (!formElements?.length) {\r\n return (\r\n - \r\n {studentData.therapists && studentData.therapists.map(item => (\r\n
\r\n \r\n {translate('student.addTeacher')}\r\n \r\n\r\n
\r\n\r\n - \r\n {teacherList && teacherList.filter(d => !studentTeachers[d.id]).map(item => (\r\n
\r\n {formElements.map(item => (\r\n setSelectedElement(item)}>\r\n \r\n \r\n {item.task?.name}\r\n \r\n \r\n \r\n {datestamp(item.latestResponse || item.completedDate)}\r\n \r\n \r\n ))}\r\n\r\n setSelectedElement(null)}\r\n heading={selectedElement?.task?.name}\r\n >\r\n {selectedElement && (\r\n setSelectedElement(null)}\r\n />\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nFormList.propTypes = {\r\n studentId: PropTypes.string.isRequired,\r\n patientProgramId: PropTypes.string,\r\n};\r\n\r\nFormList.defaultProps = {\r\n patientProgramId: null,\r\n};\r\n\r\nexport default FormList;\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useParams } from 'react-router';\r\n\r\nimport * as PatientStore from '../../../app/store/PatientStore';\r\n\r\nconst LoadPatientProgram = ({ patientId, patientProgramId }) => {\r\n const { patientId: patientIdFromUrl, patientProgramId: patientProgramIdFromUrl } = useParams();\r\n const dispatch = useDispatch();\r\n\r\n const pId = patientId || patientIdFromUrl;\r\n const ppId = patientProgramId || patientProgramIdFromUrl;\r\n\r\n const hasLoadedPatient = useSelector(state => Boolean(pId && state.patient.details && state.patient.details[pId]));\r\n const isLoading = useSelector(state => Boolean(state.patient.requests[`${PatientStore.PATIENT_PROGRAM_DETAILS_RECIEVED}/${ppId}`]\r\n && (state.patient.requests[`${PatientStore.PATIENT_PROGRAM_DETAILS_RECIEVED}/${ppId}`].loading\r\n || state.patient.requests[`${PatientStore.PATIENT_PROGRAM_DETAILS_RECIEVED}/${ppId}`].completed)));\r\n\r\n const hasLoaded = useSelector((state) => {\r\n const patientProgramData = state.patient.details && state.patient.details[pId] && state.patient.details[pId].programs\r\n && state.patient.details[pId].programs[ppId];\r\n\r\n return patientProgramData && !patientProgramData.limitedDetails;\r\n });\r\n\r\n React.useEffect(() => {\r\n if (hasLoadedPatient && ppId && !isLoading && !hasLoaded) {\r\n dispatch(PatientStore.actionCreators.getPatientProgram(ppId, { reducerParams: { patientId: pId } }));\r\n }\r\n }, [dispatch, hasLoaded, hasLoadedPatient, isLoading, pId, ppId]);\r\n\r\n return null;\r\n};\r\n\r\nLoadPatientProgram.propTypes = {\r\n patientProgramId: PropTypes.string,\r\n patientId: PropTypes.string,\r\n};\r\n\r\nexport default LoadPatientProgram;\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport * as PatientStore from '../../../app/store/PatientStore';\r\nimport LoadPatientProgram from './LoadPatientProgram';\r\n\r\nclass LoadStudent extends React.Component {\r\n componentDidMount() {\r\n if (this.props.match.params.studentId && !this.props.studentData) {\r\n this.props.getStudentData(this.props.match.params.studentId);\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if ((prevProps.match.params.studentId !== this.props.match.params.studentId)\r\n && (!this.props.studentData || this.props.studentData.id !== this.props.match.params.studentId)) {\r\n this.props.getStudentData(this.props.match.params.studentId);\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n studentData,\r\n } = this.props;\r\n\r\n if (!studentData) {\r\n return null;\r\n }\r\n return (\r\n - \r\n {persons.map(person => (\r\n
\r\n { person.name} \r\n
\r\n {person.class && (\r\n \r\n {descriptionTask && (\r\n <>\r\n \r\n {descriptionTask.name}\r\n \r\n \r\n {translate('program.availableTasks')}\r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nSkillInfo.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n skillData: PropTypes.object,\r\n hideLink: PropTypes.bool,\r\n};\r\n\r\nSkillInfo.defaultProps = {\r\n skillData: null,\r\n hideLink: false,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n translate: getTranslate(state.localize),\r\n skillData: state.program.skillDetails && state.program.skillDetails[ownProps.skillId],\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(SkillInfo));\r\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 { Link } from 'react-router-dom';\r\nimport {\r\n withStyles, Typography, Button, IconButton,\r\n} from '@material-ui/core';\r\n\r\nimport { EditIcon } from '../../../common/icons';\r\n\r\nimport urls from '../../../app/urls';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n },\r\n buttons: {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n alignItems: 'center',\r\n flexWrap: 'wrap',\r\n },\r\n header: {\r\n marginRight: theme.spacing(2),\r\n },\r\n item: {\r\n marginRight: theme.spacing(1),\r\n marginBottom: theme.spacing(0.5),\r\n height: 36,\r\n borderRadius: 20,\r\n },\r\n editButton: {\r\n height: 36,\r\n },\r\n caption: {\r\n marginTop: theme.spacing(1),\r\n height: '1rem',\r\n },\r\n});\r\n\r\nclass SkillNavigation extends React.Component {\r\n state = {\r\n info: '',\r\n }\r\n\r\n showInfo = info => () => {\r\n this.setState({ info });\r\n }\r\n\r\n hideInfo = () => {\r\n this.setState({ info: '' });\r\n }\r\n\r\n render() {\r\n const {\r\n classes, translate, studentId, selectedSkills, currentSkillNr, disabled,\r\n } = this.props;\r\n\r\n return (\r\n \r\n {Object.entries(steps).map(([name, tasks], index) => (\r\n
\r\n\r\n {!hideLink && (\r\n 0 })} style={{ flexBasis: `${stepWidth}%` }}>\r\n \r\n {isNullOrUndefined(name) ? '' : name}\r\n \r\n {tasks && tasks.map(task => (\r\n
\r\n ))}\r\n \r\n \r\n {this.state.info}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nSkillNavigation.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n studentId: PropTypes.string.isRequired,\r\n selectedSkills: PropTypes.array.isRequired,\r\n currentSkillNr: PropTypes.number.isRequired,\r\n disabled: PropTypes.bool,\r\n};\r\n\r\nSkillNavigation.defaultProps = {\r\n disabled: false,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(SkillNavigation));\r\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 { withStyles, Typography } from '@material-ui/core';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n },\r\n therapist: {\r\n marginBottom: theme.spacing(1),\r\n },\r\n});\r\n\r\nclass StudentTeacherList extends React.Component {\r\n render() {\r\n const {\r\n classes, translate, studentData,\r\n } = this.props;\r\n\r\n if (!studentData) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n \r\n {`${translate('studentPlan.selectedSkills')}:`}\r\n \r\n {selectedSkills.map((skill, i) => (\r\n \r\n {i + 1}\r\n \r\n ))}\r\n {!disabled && (\r\n \r\n
\r\n \r\n {studentData.therapists ? studentData.therapists.map(therapist => (\r\n \r\n {translate('student.noTeachersAssigned')}\r\n \r\n )}\r\n
\r\n );\r\n }\r\n}\r\n\r\nStudentTeacherList.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n studentData: PropTypes.object.isRequired,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(StudentTeacherList));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles, Avatar } from '@material-ui/core';\r\nimport classnames from 'classnames';\r\n\r\nimport { getTaskColor } from '../../../common/utils/programUtils';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n fontSize: theme.sizes.largeAvatar,\r\n },\r\n});\r\n\r\nclass TaskAvatar extends React.Component {\r\n render() {\r\n const {\r\n classes, task, className,\r\n } = this.props;\r\n\r\n return (\r\n \r\n \r\n {therapist.therapistName}\r\n \r\n
\r\n )) : (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nTimePeriod.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n skill: PropTypes.object.isRequired,\r\n disabled: PropTypes.bool,\r\n};\r\n\r\nTimePeriod.defaultProps = {\r\n disabled: false,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(TimePeriod));\r\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 { withStyles, Typography } from '@material-ui/core';\r\n\r\nimport { toLookup, toBoolLookup } from '../../../youwell-common/arrayUtils';\r\nimport WeekPlan from './WeekPlan';\r\nimport { getLocalDateOnlyString, getSkillWeeks } from './utils';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n week: {\r\n width: `calc(50% - ${theme.spacing(2)}px)`,\r\n margin: theme.spacing(1),\r\n\r\n [theme.breakpoints.down('sm')]: {\r\n width: `calc(100% - ${theme.spacing(2)}px)`,\r\n },\r\n },\r\n weekTitle: {\r\n marginBottom: theme.spacing(1),\r\n },\r\n});\r\n\r\nclass TrainingPlan extends React.Component {\r\n render() {\r\n const {\r\n classes, translate, skill, availableDays, disabled,\r\n } = this.props;\r\n\r\n if (!skill) {\r\n return null;\r\n }\r\n\r\n const { weekArray } = getSkillWeeks(skill);\r\n\r\n const tasksByDate = skill.moduleSchedule ? skill.moduleSchedule.tasks.reduce((prev, curr) => (\r\n {\r\n ...prev,\r\n [getLocalDateOnlyString(curr.date)]: [...prev[getLocalDateOnlyString(curr.date)] || [], curr],\r\n }\r\n ), {}) : {};\r\n\r\n const taskNameLookup = skill.module ? toLookup(skill.module.tasks) : { [skill.taskId]: skill.task };\r\n const availableDaysLookup = toBoolLookup(availableDays);\r\n\r\n return (\r\n \r\n \r\n {translate('studentPlan.weekNumber')}\r\n \r\n \r\n {numberOfWeeks > 1 ? `${fromWeek} - ${toWeek}` : fromWeek}\r\n \r\n
\r\n )}\r\n \r\n {weekArray.map(week => (\r\n
\r\n );\r\n }\r\n}\r\n\r\nTrainingPlan.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n skill: PropTypes.object.isRequired,\r\n availableDays: PropTypes.array,\r\n disabled: PropTypes.bool,\r\n};\r\n\r\nTrainingPlan.defaultProps = {\r\n availableDays: null,\r\n disabled: false,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(TrainingPlan));\r\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 classnames from 'classnames';\r\nimport {\r\n withStyles, Typography, ButtonBase, useTheme, useMediaQuery,\r\n} from '@material-ui/core';\r\n\r\nimport {\r\n getWeekStartDate, datestamp, getWeekNumber,\r\n} from '../../../youwell-common/dateUtils';\r\nimport { toLookup, toBoolLookup } from '../../../youwell-common/arrayUtils';\r\n\r\nimport { TaskName, VimoModal } from '../../../common/components';\r\nimport TaskInfo from './TaskInfo';\r\n\r\nconst itemHeight = 50;\r\n\r\nconst styles = theme => ({\r\n root: {\r\n width: '100%',\r\n borderBottom: theme.borders.green,\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n border: 0,\r\n },\r\n },\r\n calendar: {\r\n width: '100%',\r\n display: 'flex',\r\n position: 'relative',\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n flexDirection: 'column',\r\n },\r\n },\r\n day: {\r\n flex: '1 1 calc(20% - 1px)',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n },\r\n dayHeader: {\r\n height: itemHeight,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n color: theme.palette.common.white,\r\n background: theme.colors.blue4,\r\n borderRight: theme.borders.normal,\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n flexDirection: 'row-reverse',\r\n justifyContent: 'space-evenly',\r\n height: 'auto',\r\n padding: theme.spacing(1),\r\n border: 0,\r\n },\r\n },\r\n firstDayHeader: {\r\n borderLeft: theme.borders.normal,\r\n [theme.breakpoints.down('xs')]: {\r\n border: 0,\r\n },\r\n },\r\n dayTasks: {\r\n flex: '1 1 auto',\r\n borderRight: theme.borders.normal,\r\n [theme.breakpoints.down('xs')]: {\r\n border: 0,\r\n },\r\n minHeight: itemHeight * 2,\r\n },\r\n firstDay: {\r\n borderLeft: theme.borders.normal,\r\n [theme.breakpoints.down('xs')]: {\r\n border: 0,\r\n },\r\n },\r\n availableDay: {\r\n background: theme.colors.grey1,\r\n },\r\n dayLetter: {\r\n '&:first-letter': {\r\n textTransform: 'uppercase',\r\n },\r\n },\r\n task: {\r\n margin: theme.spacing(2),\r\n },\r\n noTasksThisWeek: {\r\n position: 'absolute',\r\n top: '40%',\r\n width: `calc(100% - ${theme.spacing(1)}px)`,\r\n opacity: 0.5,\r\n },\r\n skillName: {\r\n margin: theme.spacing(2, 1),\r\n },\r\n});\r\n\r\nconst WeekOverview = ({\r\n classes, translate, skill, studentData, showDayHeadings,\r\n}) => {\r\n const theme = useTheme();\r\n const isMobile = useMediaQuery(theme.breakpoints.down('xs'));\r\n\r\n const [showModal, setShowModal] = React.useState(null);\r\n const tasks = skill?.moduleSchedule?.tasks.reduce((prev, curr) => (\r\n {\r\n ...prev,\r\n [new Date(curr.date).toISOString()]: [...prev[new Date(curr.date).toISOString()] || [], curr],\r\n }\r\n ), {}) || {};\r\n\r\n const taskNames = toLookup(skill?.module?.tasks) || { [skill.taskId]: skill.task };\r\n const availableDays = toBoolLookup(studentData?.extendedProperties?.availableWeekdays?.split(','));\r\n const weekNumber = getWeekNumber(new Date());\r\n const startDate = getWeekStartDate(weekNumber);\r\n\r\n let hasTasksThisWeek = false;\r\n const weekArray = Array.from(Array(5).keys(), (n) => {\r\n const d = new Date(startDate.getTime());\r\n d.setDate(d.getDate() + n);\r\n d.setHours(d.getHours() + 1); // Adding one hour to compensate for the 01:00 start time of tasks in local time\r\n hasTasksThisWeek = hasTasksThisWeek || !!tasks[d.toISOString()];\r\n return {\r\n date: d,\r\n datestamp: d.toISOString(),\r\n tasks: tasks[d.toISOString()],\r\n };\r\n });\r\n\r\n return (\r\n \r\n \r\n {`${translate('studentPlan.week')} ${week.weekNr}`}\r\n \r\n
\r\n ))}\r\n \r\n
\r\n\r\n \r\n {!hasTasksThisWeek ? (\r\n \r\n {translate('student.noTasksThisWeek')}\r\n \r\n ) : (\r\n <>\r\n
\r\n ))}\r\n \r\n )}\r\n \r\n {(showDayHeadings || isMobile) && (\r\n \r\n {skill?.module?.name}\r\n \r\n
\r\n {weekArray.map((day, i) => (\r\n \r\n \r\n {translate('student.skill')}\r\n \r\n
\r\n )}\r\n \r\n {(showDayHeadings || isMobile) && (\r\n \r\n {day.tasks && day.tasks.map(taskDay => (\r\n setShowModal(taskDay.taskId)}>\r\n \r\n ))}\r\n
\r\n \r\n \r\n {datestamp(day.date).slice(0, 5)}\r\n \r\n \r\n {translate(`time.weekdays.${day.date.getDay()}`)}\r\n \r\n
\r\n )}\r\n \r\n {weekArray.map((day, i) => (\r\n
\r\n )}\r\n \r\n \r\n ))}\r\n \r\n );\r\n }\r\n}\r\n\r\nWeekPlan.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n weekStart: PropTypes.object.isRequired,\r\n tasks: PropTypes.object.isRequired,\r\n taskNames: PropTypes.object.isRequired,\r\n availableDays: PropTypes.object.isRequired,\r\n disabled: PropTypes.bool,\r\n};\r\n\r\nWeekPlan.defaultProps = {\r\n disabled: false,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(WeekPlan));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport classnames from 'classnames';\r\n\r\nimport {\r\n withStyles,\r\n Select,\r\n MenuItem,\r\n FormControl,\r\n InputLabel,\r\n} from '@material-ui/core';\r\nimport { getTranslate } from 'react-localize-redux';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n width: theme.spacing(23),\r\n },\r\n selectMenu: {\r\n top: 50,\r\n },\r\n});\r\n\r\nconst weekDays = ['1', '2', '3', '4', '5'];\r\n\r\nclass WeekdaySelect extends React.Component {\r\n renderWeekdays = (days) => {\r\n const trim = days.length < 3 ? undefined : 3;\r\n return days\r\n .map(day => this.props.translate(`time.weekdays.${day}`).slice(0, trim))\r\n .join(', ');\r\n }\r\n\r\n render() {\r\n const {\r\n classes, className, translate, value, onChange,\r\n } = this.props;\r\n\r\n return (\r\n \r\n \r\n {(provided, snapshot) => (\r\n \r\n {day?.tasks?.map((task, taskIndex) => (\r\n \r\n {dragProvided => (\r\n \r\n
\r\n )}\r\n \r\n ))}\r\n {provided.placeholder}\r\n \r\n \r\n {datestamp(day.date).slice(0, 5)}\r\n \r\n \r\n {translate(`time.weekdays.${day.date.getDay()}`).slice(0, 1)}\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Home;\r\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 { Loading, PageNotFound } from '../../youwell-common/components';\r\n\r\nimport LoadProgramDetails from '../inside/components/LoadProgramDetails';\r\nimport LoadStudentProgram from './components/LoadStudentProgram';\r\nimport Layout from '../outside/components/Layout';\r\nimport Home from './Home';\r\nimport Skill from './Skill';\r\nimport Task from './Task';\r\n\r\nclass Index extends React.Component {\r\n render() {\r\n const {\r\n appConfig, loading,\r\n } = this.props;\r\n\r\n return (\r\n \r\n {currentSkills?.length ? (\r\n \r\n {currentSkills.map(skill => \r\n {todaysTasks.map(task => (\r\n
\r\n \r\n\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nSkill.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n match: PropTypes.shape({\r\n params: PropTypes.shape({\r\n code: PropTypes.string.isRequired,\r\n skillId: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n skillData: PropTypes.object,\r\n};\r\n\r\nSkill.defaultProps = {\r\n skillData: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n translate: getTranslate(state.localize),\r\n skillData: state.program.skillDetails && state.program.skillDetails[ownProps.match.params.skillId],\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Skill));\r\n","import * as React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles, Typography } from '@material-ui/core';\r\n\r\nimport { TopActionBar, VimoTaskContent, TaskName } from '../../common/components';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n\r\n },\r\n title: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: theme.spacing(4),\r\n\r\n '@media print': {\r\n padding: theme.spacing(1, 4),\r\n },\r\n },\r\n content: {\r\n padding: theme.spacing(4),\r\n\r\n '@media print': {\r\n padding: theme.spacing(1, 4),\r\n },\r\n },\r\n});\r\n\r\nclass Task extends React.Component {\r\n render() {\r\n const {\r\n translate, classes, taskData, skillData,\r\n } = this.props;\r\n\r\n if (!taskData || !skillData) {\r\n return null;\r\n }\r\n\r\n // const { code } = match.params;\r\n\r\n return (\r\n \r\n {descriptionTask && (\r\n <>\r\n \r\n {descriptionTask.name}\r\n \r\n \r\n {translate('program.availableTasks')}\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 {Object.entries(steps).map(([name, tasks], index) => (\r\n
\r\n 0 })} style={{ flexBasis: `${stepWidth}%` }}>\r\n \r\n {isNullOrUndefined(name) ? '' : name}\r\n \r\n {tasks?.map(task => (\r\n \r\n
\r\n ))}\r\n \r\n \r\n {translate('methodsAndTechniques.aboutTheExercisesHeading')}\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\nTask.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n match: PropTypes.shape({\r\n params: PropTypes.shape({\r\n code: PropTypes.string.isRequired,\r\n skillId: PropTypes.string.isRequired,\r\n taskId: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n taskData: PropTypes.object,\r\n skillData: PropTypes.object,\r\n};\r\n\r\nTask.defaultProps = {\r\n skillData: null,\r\n taskData: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n translate: getTranslate(state.localize),\r\n taskData: state.program.taskDetails && state.program.taskDetails[ownProps.match.params.taskId],\r\n skillData: state.program.skillDetails && state.program.skillDetails[ownProps.match.params.skillId],\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Task));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport * as StudentCodeStore from '../../../app/store/StudentCodeStore';\r\n\r\nclass LoadStudentProgram extends React.Component {\r\n componentDidMount() {\r\n if (!this.props.program) {\r\n this.getElement();\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n const { studentCode, program } = this.props;\r\n\r\n if (studentCode !== prevProps.studentCode && !program) {\r\n this.getElement();\r\n }\r\n }\r\n\r\n getElement = () => {\r\n this.props.getProgramFromCode(this.props.studentCode, { reducerParams: { code: this.props.studentCode } });\r\n }\r\n\r\n render() {\r\n return null;\r\n }\r\n}\r\n\r\nLoadStudentProgram.propTypes = {\r\n getProgramFromCode: PropTypes.func.isRequired,\r\n studentCode: PropTypes.string.isRequired,\r\n program: PropTypes.object,\r\n};\r\n\r\nLoadStudentProgram.defaultProps = {\r\n program: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n const studentCode = ownProps?.match?.params?.code;\r\n\r\n return {\r\n studentCode,\r\n program: state.studentCodeStore.details && state.studentCodeStore.details[studentCode],\r\n clientConfig: state.auth.clientConfig,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(StudentCodeStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LoadStudentProgram);\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Route, Switch } from 'react-router-dom';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\n\r\nimport { PageNotFound } from '../../youwell-common/components';\r\nimport urls from '../../app/urls';\r\nimport User from './User';\r\nimport UserList from './UserList';\r\nimport NewUser from './NewUser';\r\nimport LoadUsers from './components/LoadUsers';\r\nimport { TopActionBar } from '../../common/components';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n\r\n },\r\n content: {\r\n padding: theme.spacing(3),\r\n paddingBottom: theme.spacing(8),\r\n\r\n [theme.breakpoints.down('sm')]: {\r\n flexWrap: 'wrap',\r\n },\r\n [theme.breakpoints.down('xs')]: {\r\n flexDirection: 'column',\r\n padding: theme.spacing(1),\r\n },\r\n },\r\n});\r\n\r\n\r\nclass Index extends React.Component {\r\n render() {\r\n const {\r\n classes, translate, location,\r\n } = this.props;\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nIndex.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n location: PropTypes.object.isRequired,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(Index));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\n\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\n\r\nimport { Typography } from '@material-ui/core';\r\n\r\nimport UserDetails from './components/UserDetails';\r\nimport { vimoCreateRoles } from '../../common/constants';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n\r\n },\r\n roleDescriptions: {\r\n marginTop: theme.spacing(2),\r\n padding: theme.spacing(3),\r\n },\r\n roleDescription: {\r\n marginBottom: theme.spacing(2),\r\n background: theme.palette.common.white,\r\n padding: theme.spacing(1),\r\n },\r\n});\r\n\r\nclass NewUser extends React.Component {\r\n render() {\r\n const {\r\n classes, translate, profileData,\r\n } = this.props;\r\n\r\n if (!profileData || !profileData.selectedRole) {\r\n return null;\r\n }\r\n\r\n const showRoleDescriptions = false;\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\nNewUser.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n profileData: PropTypes.object.isRequired,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n profileData: state.auth.profileData,\r\n clientConfig: state.auth.clientConfig,\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(NewUser));\r\n","import * as React from 'react';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport * as UserStore from '../../app/store/UserStore';\r\nimport UserDetails from './components/UserDetails';\r\n\r\n\r\nconst styles = theme => ({\r\n root: {\r\n\r\n },\r\n header: {\r\n display: 'flex',\r\n },\r\n flex: {\r\n flex: '1 1 auto',\r\n },\r\n action: {\r\n [theme.breakpoints.down('xs')]: {\r\n height: 30,\r\n minHeight: 30,\r\n width: 30,\r\n },\r\n },\r\n});\r\n\r\n\r\nclass User extends React.Component {\r\n componentDidMount() {\r\n if (this.props.match.params.id && !this.props.userData) {\r\n this.props.getElement(this.props.match.params.id);\r\n }\r\n }\r\n\r\n render() {\r\n const { classes, userData } = this.props;\r\n\r\n if (!userData) {\r\n return null;\r\n }\r\n return (\r\n \r\n \r\n {translate('user.roleDescriptions')}\r\n \r\n {vimoCreateRoles.map(role => (\r\n
\r\n )}\r\n \r\n \r\n {translate(`user.appRoles_${role}`)}\r\n \r\n \r\n {translate(`user.appRoles_${role}_Description`)}\r\n \r\n
\r\n ))}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nUser.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n // translate: PropTypes.func.isRequired,\r\n getElement: PropTypes.func.isRequired,\r\n match: PropTypes.object.isRequired,\r\n userData: PropTypes.object,\r\n};\r\n\r\nUser.defaultProps = {\r\n userData: null,\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n translate: getTranslate(state.localize),\r\n userData: state.user.details && state.user.details[ownProps.match.params.id],\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)(User));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport {\r\n Table, TableHead, TableRow, TableCell, TableBody, Typography, TableFooter, TablePagination,\r\n} from '@material-ui/core';\r\n\r\nimport * as PageSettingStore from '../../app/store/PageSettingStore';\r\nimport urls from '../../app/urls';\r\nimport {\r\n InfoMessage, SortableTableCell,\r\n} from '../../common/components';\r\n\r\nimport { sortByColumn } from '../../youwell-common/tableUtils';\r\nimport { defaultRowsPrPage, userSortColumns } from '../../common/constants';\r\nimport UserListFilter from './components/UserListFilter';\r\nimport { caseInsensitiveContains } from '../../youwell-common/stringUtils';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n },\r\n table: {\r\n '& td': {\r\n border: 0,\r\n paddingLeft: 0,\r\n },\r\n },\r\n headerRow: {\r\n height: theme.spacing(4),\r\n },\r\n headerCell: {\r\n padding: 0,\r\n fontSize: theme.typography.subtitle2.fontSize,\r\n fontWeight: theme.typography.subtitle2.fontWeight,\r\n color: theme.palette.text.primary,\r\n borderBottomColor: theme.palette.secondary.main,\r\n },\r\n row: {\r\n height: theme.spacing(8),\r\n borderBottom: theme.borders.normal,\r\n cursor: 'pointer',\r\n\r\n '&:hover': {\r\n background: theme.palette.grey[100],\r\n borderBottomColor: theme.palette.secondary.main,\r\n },\r\n },\r\n hiddenOnSmall: {\r\n [theme.breakpoints.down('xs')]: {\r\n display: 'none',\r\n },\r\n },\r\n mainNameText: {\r\n fontSize: theme.typography.subtitle2.fontSize,\r\n fontWeight: theme.typography.subtitle2.fontWeight,\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n chip: {\r\n marginLeft: theme.spacing(1),\r\n },\r\n icon: {\r\n marginLeft: theme.spacing(1),\r\n color: theme.palette.text.secondary,\r\n },\r\n spacingCell: {\r\n width: theme.spacing(8),\r\n padding: 0,\r\n\r\n [theme.breakpoints.down('md')]: {\r\n width: theme.spacing(4),\r\n },\r\n\r\n [theme.breakpoints.down('sm')]: {\r\n width: theme.spacing(2),\r\n },\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n width: 0,\r\n },\r\n },\r\n paginationSelect: {\r\n paddingRight: theme.spacing(3),\r\n },\r\n filter: {\r\n marginTop: theme.spacing(2),\r\n marginBottom: theme.spacing(4),\r\n },\r\n actions: {\r\n marginTop: theme.spacing(6),\r\n },\r\n});\r\n\r\n\r\nclass UserList extends React.Component {\r\n handleChangePage = (event, page) => {\r\n this.props.setUserPage(page);\r\n }\r\n\r\n handleChangeRowsPerPage = (event) => {\r\n this.props.setUserRowsPerPage(event.target.value);\r\n }\r\n\r\n redirect = to => () => {\r\n this.props.redirect(to);\r\n }\r\n\r\n onfilterUpdate = (filter) => {\r\n this.props.setUserFilter(filter);\r\n }\r\n\r\n filterUsers = (user) => {\r\n const { filter } = this.props;\r\n if (!filter) {\r\n return true;\r\n }\r\n if (filter.search) {\r\n let result = true;\r\n result = caseInsensitiveContains(user.name, filter.search.toLowerCase());\r\n if (!result) {\r\n return false;\r\n }\r\n }\r\n if (filter.role) {\r\n if (user.roles?.indexOf(filter.role) < 0) {\r\n return false;\r\n }\r\n }\r\n\r\n return true;\r\n };\r\n\r\n render() {\r\n const {\r\n classes, translate, userList, rowsPerPage, page, sorting, filter,\r\n } = this.props;\r\n\r\n const filteredUsers = sortByColumn(userList, sorting)\r\n .filter(this.filterUsers);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {filteredUsers\r\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\r\n .map(item => (\r\n \r\n \r\n \r\n {item.name}\r\n \r\n \r\n \r\n \r\n {item.roles?.map(role => translate(`user.appRoles_${role}`, null, { onMissingTranslation: () => '' })).join(', ')}\r\n \r\n \r\n \r\n \r\n {item.email}\r\n \r\n \r\n \r\n \r\n {item.phone}\r\n \r\n \r\n {/* \r\n \r\n {timestamp(item.updated)}\r\n \r\n */}\r\n \r\n ))}\r\n \r\n \r\n \r\n {filteredUsers.length > defaultRowsPrPage && (\r\n translate('user.displayedRows', displayedRows)}\r\n classes={{ select: classes.paginationSelect }}\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\nUserList.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n userList: PropTypes.array,\r\n // clientConfig: PropTypes.object.isRequired,\r\n redirect: PropTypes.func.isRequired,\r\n rowsPerPage: PropTypes.number.isRequired,\r\n setUserRowsPerPage: PropTypes.func.isRequired,\r\n setUserSorting: PropTypes.func.isRequired,\r\n setUserFilter: PropTypes.func.isRequired,\r\n page: PropTypes.number.isRequired,\r\n setUserPage: PropTypes.func.isRequired,\r\n sorting: PropTypes.object.isRequired,\r\n filter: PropTypes.object.isRequired,\r\n};\r\n\r\nUserList.defaultProps = {\r\n userList: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n userList: state.user.list,\r\n clientConfig: state.auth.clientConfig,\r\n rowsPerPage: state.pageSettings.userRowsPerPage,\r\n page: state.pageSettings.userPage,\r\n sorting: state.pageSettings.userSorting,\r\n filter: state.pageSettings.userFilter,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(PageSettingStore.actionCreators, dispatch),\r\n});\r\n\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(UserList));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport * as UserStore from '../../../app/store/UserStore';\r\n\r\nclass LoadUsers extends React.Component {\r\n componentDidMount() {\r\n if (!this.props.userList) {\r\n this.props.getList();\r\n }\r\n }\r\n\r\n render() {\r\n return null;\r\n }\r\n}\r\n\r\nLoadUsers.propTypes = {\r\n getList: PropTypes.func.isRequired,\r\n userList: PropTypes.array,\r\n};\r\n\r\nLoadUsers.defaultProps = {\r\n userList: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n userList: state.user.list,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n ...bindActionCreators(UserStore.actionCreators, dispatch),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LoadUsers);\r\n","import * as React from 'react';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { Link, Prompt } from 'react-router-dom';\r\n\r\nimport {\r\n IconButton, Button, Typography, FormControlLabel, Checkbox,\r\n} from '@material-ui/core';\r\nimport * as UserStore from '../../../app/store/UserStore';\r\nimport {\r\n validateAllFields, validateField,\r\n} from '../../../youwell-common/validationUtils';\r\n\r\nimport { getValidators } from './validation';\r\nimport { VimoInput, Selector } from '../../../common/components';\r\nimport { appRoles, loginLevels } from '../../../youwell-common/constants';\r\nimport { SaveIcon, CancelIcon } from '../../../common/icons';\r\nimport { hasValue } from '../../../youwell-common/objectUtils';\r\nimport urls from '../../../app/urls';\r\nimport Auth from '../../../youwell-common/Auth';\r\nimport UserMenu from './UserMenu';\r\nimport { vimoCreateRoles } from '../../../common/constants';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n display: 'flex',\r\n padding: theme.spacing(2),\r\n background: theme.palette.grey[50],\r\n },\r\n textFields: {\r\n flex: '1 1 auto',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n row: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n field: {\r\n margin: theme.spacing(1),\r\n flexGrow: 1,\r\n },\r\n actionContainer: {\r\n margin: theme.spacing(1),\r\n marginLeft: -theme.spacing(1),\r\n border: '2px solid transparent',\r\n background: theme.palette.common.white,\r\n },\r\n infoMessage: {\r\n flex: '1 1 auto',\r\n margin: theme.spacing(1),\r\n padding: theme.spacing(2),\r\n background: theme.palette.common.white,\r\n border: theme.borders.green,\r\n color: theme.colors.blue4,\r\n },\r\n actions: {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n margin: `${theme.spacing(2)}px ${theme.spacing(1)}px`,\r\n },\r\n button: {\r\n marginLeft: theme.spacing(1),\r\n },\r\n buttonIcon: {\r\n marginRight: theme.spacing(1),\r\n },\r\n role: {\r\n display: 'flex',\r\n },\r\n});\r\n\r\n\r\nconst defaultState = {\r\n name: '',\r\n fnr: '',\r\n email: '',\r\n phone: '',\r\n extendedProperties: null,\r\n sendWelcomeEmail: true,\r\n};\r\n\r\nconst stateFromData = (data, clientConfig) => {\r\n const initialState = {\r\n ...defaultState,\r\n hasUnsavedChanges: false,\r\n rolesUpdated: false,\r\n mappedRoles: [],\r\n roleForNewUser: appRoles.therapist,\r\n editing: !data.id,\r\n validators: getValidators(clientConfig, !data?.id),\r\n validationErrors: {},\r\n };\r\n\r\n if (!data) {\r\n return initialState;\r\n }\r\n\r\n return Object.keys(defaultState).reduce(\r\n (obj, key) => (hasValue(data[key]) ? { ...obj, [key]: data[key] } : { ...obj }),\r\n {\r\n ...initialState,\r\n mappedRoles: data.roles?.map(d => ({ id: d })),\r\n },\r\n );\r\n};\r\n\r\nclass UserDetails extends React.Component {\r\n state = stateFromData(this.props.userData, this.props.clientConfig);\r\n\r\n handleChange = name => (event) => {\r\n this.setState({\r\n [name]: event.target.value,\r\n hasUnsavedChanges: true,\r\n }, () => {\r\n if (this.state.validators[name]) {\r\n const validationErrors = validateField(this.state, this.state.validators[name], name); // eslint-disable-line react/no-access-state-in-setstate\r\n this.setState({ validationErrors });\r\n }\r\n });\r\n }\r\n\r\n handleRolesChange = (event) => {\r\n this.setState({ mappedRoles: event.target.value, rolesUpdated: true }, () => {\r\n const validationErrors = validateField(this.state, this.state.validators.mappedRoles, 'mappedRoles'); // eslint-disable-line react/no-access-state-in-setstate\r\n this.setState({ validationErrors });\r\n });\r\n }\r\n\r\n toggleCheckedChange = name => (event) => {\r\n this.setState({\r\n [name]: event.target.checked,\r\n hasUnsavedChanges: true,\r\n });\r\n }\r\n\r\n handleExtendePropsChange = name => (event) => {\r\n const value = event.target.value;\r\n\r\n this.setState(prevState => ({\r\n extendedProperties: {\r\n ...prevState.extendedProperties,\r\n [name]: value,\r\n },\r\n hasUnsavedChanges: true,\r\n }));\r\n }\r\n\r\n startEdit = () => {\r\n this.setState({ editing: true });\r\n }\r\n\r\n cancel = () => {\r\n this.setState(stateFromData(this.props.userData, this.props.clientConfig));\r\n }\r\n\r\n saveChanges = () => {\r\n // eslint-disable-next-line react/no-access-state-in-setstate\r\n const validationErrors = validateAllFields(this.state, this.state.validators);\r\n\r\n if (!validationErrors.hasErrors) {\r\n const saveData = Object.keys(defaultState).reduce(\r\n (obj, key) => (this.state[key] ? { ...obj, [key]: this.state[key] } : { ...obj }),\r\n {\r\n id: this.props.userData.id,\r\n },\r\n );\r\n\r\n const callback = () => {\r\n this.setState({ editing: false, hasUnsavedChanges: false, rolesUpdated: false });\r\n };\r\n\r\n if (this.props.userData.id) {\r\n if (this.state.rolesUpdated) {\r\n saveData.updatedRoles = this.state.mappedRoles.map(d => d.id);\r\n }\r\n this.props.updateElement(saveData, { callback });\r\n } else {\r\n saveData.role = this.state.roleForNewUser;\r\n this.props.insertElement(saveData, { callback, redirectWithElementId: urls.inside.users.home });\r\n }\r\n }\r\n this.setState({ validationErrors });\r\n }\r\n\r\n render() {\r\n const {\r\n classes, userData, translate, profileData,\r\n } = this.props;\r\n\r\n if (!userData || !profileData) {\r\n return null;\r\n }\r\n\r\n const roles = vimoCreateRoles\r\n .map(item => ({ id: item, name: translate(`user.appRoles_${item}`) }));\r\n\r\n const loginLevel = Auth.getLoginLevel();\r\n const isLoggedInLevel4 = loginLevel === loginLevels.level4;\r\n const readOnly = !this.state.editing;\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nUserDetails.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n clientConfig: PropTypes.object.isRequired,\r\n profileData: PropTypes.object.isRequired,\r\n insertElement: PropTypes.func.isRequired,\r\n updateElement: PropTypes.func.isRequired,\r\n userData: PropTypes.object.isRequired,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n profileData: state.auth.profileData,\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)(UserDetails));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport classnames from 'classnames';\r\n\r\nimport { Selector } from '../../../common/components';\r\nimport { vimoRoles } from '../../../common/constants';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n flexDirection: 'column',\r\n alignItems: 'flex-start',\r\n },\r\n },\r\n filter: {\r\n marginRight: theme.spacing(2),\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n width: '100%',\r\n },\r\n },\r\n flex: {\r\n flex: '1 1 auto',\r\n },\r\n addLinkIcon: {\r\n color: theme.palette.secondary.main,\r\n },\r\n action: {\r\n [theme.breakpoints.down('xs')]: {\r\n height: 30,\r\n minHeight: 30,\r\n width: 30,\r\n },\r\n },\r\n});\r\n\r\nclass UserListFilter extends React.Component {\r\n handleChange = name => (event) => {\r\n this.props.onUpdate({\r\n ...this.props.filter,\r\n [name]: event.target.value,\r\n });\r\n }\r\n\r\n render() {\r\n const {\r\n classes, translate, className, filter,\r\n } = this.props;\r\n\r\n const roles = vimoRoles.map(item => ({ id: item, name: translate(`user.appRoles_${item}`) }));\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n\r\n {isLoggedInLevel4 && (\r\n \r\n
\r\n )}\r\n \r\n
\r\n )}\r\n\r\n \r\n
\r\n\r\n \r\n {userData.id ? (\r\n
\r\n\r\n {!userData.id && (\r\n \r\n
\r\n )}\r\n\r\n {this.state.extendedProperties && (\r\n \r\n {Object.keys(this.state.extendedProperties).map(key => (\r\n
\r\n )}\r\n\r\n {userData.generatedPassword && (\r\n \r\n
\r\n ))}\r\n \r\n \r\n {`${translate('user.temporaryPassword', { password: userData.generatedPassword })}`}\r\n \r\n
\r\n )}\r\n {userData.addedExistingUser && (\r\n \r\n \r\n {`${translate('user.addedExistingUser')}`}\r\n \r\n
\r\n )}\r\n\r\n \r\n {/* {!this.state.editing && (\r\n \r\n \r\n )} */}\r\n {this.state.editing && (\r\n userData.id ? (\r\n \r\n \r\n ) : (\r\n \r\n )\r\n )}\r\n {this.state.editing && (\r\n userData.id ? (\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\nUserListFilter.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n filter: PropTypes.object.isRequired,\r\n onUpdate: PropTypes.func.isRequired,\r\n className: PropTypes.string,\r\n};\r\n\r\nUserListFilter.defaultProps = {\r\n className: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n profileData: state.auth.profileData,\r\n clientConfig: state.auth.clientConfig,\r\n});\r\n\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(UserListFilter));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\n\r\nimport * as UserStore from '../../../app/store/UserStore';\r\nimport { VimoMenu } from '../../../common/components';\r\nimport urls from '../../../app/urls';\r\n\r\n\r\nclass UserMenu extends React.Component {\r\n deleteUser = (callback) => {\r\n this.props.deleteElement(this.props.userData, { callback, errorCallback: callback, redirect: urls.inside.users.home });\r\n }\r\n\r\n generateNewPassword = (callback) => {\r\n const saveData = {\r\n ...this.props.userData,\r\n generateNewPassword: true,\r\n };\r\n\r\n this.props.updateElement(saveData, { callback, errorCallback: callback });\r\n }\r\n\r\n render() {\r\n const {\r\n translate, clientConfig, className, startEditDetails,\r\n } = this.props;\r\n\r\n return (\r\n \r\n \r\n \r\n {translate('dev.underDevelopment')}\r\n \r\n \r\n \r\n \r\n {translate('dev.underDevelopmentShort')}\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\nDevelopmentBanner.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n password: PropTypes.string,\r\n passwordDate: PropTypes.number,\r\n disabled: PropTypes.bool,\r\n showBanner: PropTypes.bool,\r\n};\r\n\r\nDevelopmentBanner.defaultProps = {\r\n password: '',\r\n passwordDate: 0,\r\n disabled: false,\r\n showBanner: false,\r\n};\r\n\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(DevelopmentBanner));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport {\r\n Button,\r\n Dialog,\r\n DialogContent,\r\n DialogTitle,\r\n DialogActions,\r\n} from '@material-ui/core';\r\n\r\n\r\nclass DialogButton extends React.Component {\r\n state = {\r\n isDialogOpen: false,\r\n }\r\n\r\n openDialog = () => {\r\n this.setState({ isDialogOpen: true });\r\n }\r\n\r\n closeDialog = () => {\r\n this.setState({ isDialogOpen: false });\r\n }\r\n\r\n ok = () => {\r\n this.setState({ isDialogOpen: false }, this.props.dialogOkAction);\r\n }\r\n\r\n\r\n render() {\r\n const {\r\n buttonText, dialogTitle, dialogCancelText, buttonProps,\r\n } = this.props;\r\n\r\n return (\r\n <>\r\n \r\n \r\n {translate('dev.underDevelopment')}\r\n \r\n \r\n {translate('dev.pleaseLogInToContinue')}\r\n \r\n\r\n \r\n\r\n \r\n
\r\n '))].filter(d => !muteErrors?.includes(d));\r\n\r\n if (!filteredMessages.length) {\r\n return null;\r\n }\r\n return (\r\n
\r\n {filteredMessages.map(msg => (\r\n \r\n {translate(`errors.${msg}`, null, { onMissingTranslation: () => `System error (${msg})` })}\r\n \r\n ))}\r\n {onClear && (\r\n \r\n \r\n )}\r\n
\r\n );\r\n }\r\n}\r\n\r\nErrorMessage.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n className: PropTypes.string,\r\n message: PropTypes.string,\r\n onClear: PropTypes.func,\r\n muteErrors: PropTypes.array,\r\n scrollMarginTop: PropTypes.number,\r\n};\r\n\r\nErrorMessage.defaultProps = {\r\n message: null,\r\n className: null,\r\n onClear: null,\r\n muteErrors: null,\r\n scrollMarginTop: null,\r\n};\r\n\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(ErrorMessage));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport {\r\n Button,\r\n} from '@material-ui/core';\r\n\r\n\r\nclass FormLink extends React.Component {\r\n render() {\r\n const {\r\n buttonText, buttonProps, params, to,\r\n } = this.props;\r\n\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nFormLink.propTypes = {\r\n buttonText: PropTypes.string.isRequired,\r\n buttonProps: PropTypes.object,\r\n to: PropTypes.string.isRequired,\r\n params: PropTypes.arrayOf(PropTypes.shape({\r\n key: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n })),\r\n};\r\n\r\nFormLink.defaultProps = {\r\n buttonProps: null,\r\n params: null,\r\n};\r\n\r\nexport default FormLink;\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nimport { replaceEmbedContent, isEmptyHtml } from '../htmlUtils';\r\n\r\nexport const htmlContentClassName = 'htmlcontent';\r\n\r\nclass HtmlContent extends React.Component {\r\n render() {\r\n const {\r\n html, className, addNoContextForImages, style,\r\n } = this.props;\r\n\r\n if (isEmptyHtml(html)) {\r\n return null;\r\n }\r\n\r\n return (\r\n /* eslint-disable react/no-danger */\r\n \r\n /* eslint-enable react/no-danger */\r\n );\r\n }\r\n}\r\n\r\n\r\nHtmlContent.propTypes = {\r\n html: PropTypes.string,\r\n className: PropTypes.string,\r\n addNoContextForImages: PropTypes.bool,\r\n style: PropTypes.object,\r\n};\r\n\r\nHtmlContent.defaultProps = {\r\n html: null,\r\n className: null,\r\n addNoContextForImages: false,\r\n style: null,\r\n};\r\n\r\nexport default HtmlContent;\r\n","// Stripped and adjusted from https://github.com/SupremeTechnopriest/react-idle-timer\r\n\r\nimport * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst IS_BROWSER = (typeof window === 'undefined' ? 'undefined' : typeof window) === 'object';\r\nconst DEFAULT_ELEMENT = IS_BROWSER ? document : {};\r\nconst DEFAULT_EVENTS = [\r\n 'mousemove',\r\n 'keydown',\r\n 'wheel',\r\n 'DOMMouseScroll',\r\n 'mouseWheel',\r\n 'mousedown',\r\n 'touchstart',\r\n 'touchmove',\r\n 'MSPointerDown',\r\n 'MSPointerMove',\r\n];\r\n\r\nexport default class IdleTimer extends React.Component {\r\n tId = null\r\n\r\n static propTypes = {\r\n timeoutInMinutes: PropTypes.number,\r\n onIdle: PropTypes.func,\r\n onActive: PropTypes.func,\r\n }\r\n\r\n static defaultProps = {\r\n timeoutInMinutes: 60,\r\n onIdle: () => {},\r\n onActive: () => {},\r\n }\r\n\r\n state = {\r\n idle: false,\r\n oldDate: +new Date(),\r\n lastActive: +new Date(),\r\n pageX: null,\r\n pageY: null,\r\n }\r\n\r\n componentDidMount() {\r\n if (!IS_BROWSER) return;\r\n\r\n DEFAULT_EVENTS.forEach((e) => {\r\n DEFAULT_ELEMENT.addEventListener(e, this.handleEvent, {\r\n capture: true,\r\n passive: true,\r\n });\r\n });\r\n\r\n this.reset();\r\n }\r\n\r\n componentWillUnmount() {\r\n clearTimeout(this.tId);\r\n if (!IS_BROWSER) return;\r\n DEFAULT_EVENTS.forEach((e) => {\r\n DEFAULT_ELEMENT.removeEventListener(e, this.handleEvent, {\r\n capture: true,\r\n passive: true,\r\n });\r\n });\r\n }\r\n\r\n toggleIdleState = (e) => {\r\n const { idle } = this.state;\r\n this.setState({\r\n idle: !idle,\r\n });\r\n\r\n const { onActive, onIdle } = this.props;\r\n if (idle) {\r\n onActive(e);\r\n } else {\r\n onIdle(e);\r\n }\r\n }\r\n\r\n handleEvent = (e) => {\r\n const { pageX, pageY } = this.state;\r\n\r\n // Mousemove event\r\n if (e.type === 'mousemove') {\r\n // If coord are same, it didn't move\r\n if (e.pageX === pageX && e.pageY === pageY) {\r\n return;\r\n }\r\n // If coord don't exist how could it move\r\n if (typeof e.pageX === 'undefined' && typeof e.pageY === 'undefined') {\r\n return;\r\n }\r\n // Under 200 ms is hard to do\r\n // continuous activity will bypass this\r\n const elapsed = this.getElapsedTime();\r\n if (elapsed < 200) {\r\n return;\r\n }\r\n }\r\n\r\n // Clear any existing timeout\r\n clearTimeout(this.tId);\r\n\r\n // If the idle timer is enabled, flip\r\n if (this.state.idle) {\r\n this.toggleIdleState(e);\r\n }\r\n\r\n // Store when the user was last active\r\n // and update the mouse coordinates\r\n this.setState({\r\n lastActive: +new Date(), // store when user was last active\r\n pageX: e.pageX, // update mouse coord\r\n pageY: e.pageY,\r\n });\r\n\r\n // Set a new timeout\r\n const { timeoutInMinutes } = this.props;\r\n this.tId = setTimeout(this.toggleIdleState, timeoutInMinutes * 60 * 1000); // set a new timeout\r\n }\r\n\r\n reset = () => {\r\n // Clear timeout\r\n clearTimeout(this.tId);\r\n\r\n // Reset state\r\n this.setState(prevState => ({\r\n idle: false,\r\n oldDate: +new Date(),\r\n lastActive: prevState.oldDate,\r\n }));\r\n\r\n // Set new timeout\r\n const { timeoutInMinutes } = this.props;\r\n this.tId = setTimeout(this.toggleIdleState, timeoutInMinutes * 60 * 1000); // set a new timeout\r\n }\r\n\r\n getRemainingTime = () => {\r\n const { idle, lastActive } = this.state;\r\n // If idle there is no time remaining\r\n if (idle) {\r\n return 0;\r\n }\r\n\r\n // Determine remaining, if negative idle didn't finish flipping, just return 0\r\n const { timeoutInMinutes } = this.props;\r\n let timeLeft = (timeoutInMinutes * 60 * 1000) - (+new Date() - lastActive);\r\n if (timeLeft < 0) {\r\n timeLeft = 0;\r\n }\r\n return timeLeft;\r\n }\r\n\r\n getElapsedTime = () => {\r\n const { oldDate } = this.state;\r\n return +new Date() - oldDate;\r\n }\r\n\r\n getLastActiveTime = () => {\r\n const { lastActive } = this.state;\r\n return lastActive;\r\n }\r\n\r\n isIdle = () => this.state.idle\r\n\r\n render() {\r\n return null;\r\n }\r\n}\r\n","import * as React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport classnames from 'classnames';\r\n\r\nimport { Typography } from '@material-ui/core';\r\n// import { placeHolderImage } from '../../common/image';\r\n\r\nconst styles = theme => ({\r\n error: {\r\n padding: theme.spacing(2),\r\n border: theme.borders.dim,\r\n background: theme.palette.grey[50],\r\n color: theme.palette.grey[500],\r\n wordBreak: 'break-word',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n overflow: 'hidden',\r\n },\r\n});\r\n\r\nclass Image extends React.Component {\r\n state = {\r\n fileNotFound: false,\r\n loaded: false,\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.src !== this.props.src) {\r\n // eslint-disable-next-line react/no-did-update-set-state\r\n this.setState({\r\n fileNotFound: false,\r\n loaded: false,\r\n });\r\n }\r\n }\r\n\r\n onImageNotFound = (e) => {\r\n e.target.onerror = null;\r\n // e.target.src = placeHolderImage;\r\n this.setState({ fileNotFound: true });\r\n }\r\n\r\n onImageLoaded = () => {\r\n this.setState({ loaded: true });\r\n }\r\n\r\n render() {\r\n const {\r\n classes, translate, className, src, alt, hideOnNotFound,\r\n } = this.props;\r\n\r\n if (this.state.fileNotFound) {\r\n return hideOnNotFound ? null : (\r\n \r\n \r\n {translate('common.fileNotFound')}\r\n \r\n {/* \r\n {`(${src})`}\r\n */}\r\n
\r\n );\r\n }\r\n\r\n const style = { opacity: this.state.loaded ? 1 : 0, transition: 'opacity 0.1s' };\r\n\r\n return (\r\n \r\n {languages.map(lang => (\r\n setActiveLanguage(lang.code)} disabled={activeLanguage && lang.code === activeLanguage.code}>\r\n \r\n ))}\r\n
\r\n);\r\n\r\nLanguageToggle.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n languages: PropTypes.array.isRequired,\r\n activeLanguage: PropTypes.object,\r\n setActiveLanguage: PropTypes.func.isRequired,\r\n className: PropTypes.string,\r\n};\r\n\r\nLanguageToggle.defaultProps = {\r\n activeLanguage: {},\r\n className: null,\r\n};\r\n\r\nexport default withLocalize(withStyles(styles)(LanguageToggle));\r\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 classnames from 'classnames';\r\n\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { Typography, CircularProgress, NoSsr } from '@material-ui/core';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n position: 'fixed',\r\n zIndex: 1500,\r\n top: 0,\r\n left: 0,\r\n bottom: 0,\r\n width: '100%',\r\n textAlign: 'center',\r\n backgroundColor: '#f0fbff82',\r\n color: '#05325a',\r\n },\r\n rootInline: {\r\n position: 'relative',\r\n width: '100%',\r\n minWidth: 100,\r\n height: '100%',\r\n minHeight: 100,\r\n textAlign: 'center',\r\n backgroundColor: '#f0fbff82',\r\n color: '#05325a',\r\n },\r\n content: {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n },\r\n progress: {\r\n color: '#05325a',\r\n },\r\n message: {\r\n marginTop: theme.spacing(1),\r\n },\r\n error: {\r\n marginTop: theme.spacing(1),\r\n },\r\n});\r\n\r\nclass Loading extends React.Component {\r\n state = {\r\n show: false,\r\n }\r\n\r\n componentDidMount() {\r\n this.timer = setTimeout(() => {\r\n this.setState({ show: true });\r\n }, 500);\r\n }\r\n\r\n componentWillUnmount() {\r\n clearTimeout(this.timer);\r\n }\r\n\r\n render() {\r\n const {\r\n classes, loadingMessage, loading, translate, className, inline,\r\n } = this.props;\r\n\r\n if (!loading || !this.state.show) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n {loadingMessage || translate('common.loading')}\r\n \r\n
\r\n \r\n \r\n {translate('common.pageNotFound')}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nPageNotFound.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translate: PropTypes.func.isRequired,\r\n};\r\n\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\nexport default connect(mapStateToProps)(withStyles(styles)(PageNotFound));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nclass PollData extends React.Component {\r\n componentDidMount() {\r\n if (this.props.callImediately) {\r\n if (this.props.initialdataCall) {\r\n this.props.initialdataCall();\r\n } else {\r\n this.props.dataCall();\r\n }\r\n }\r\n\r\n this.pollState();\r\n }\r\n\r\n componentDidUpdate() {\r\n this.pollState();\r\n }\r\n\r\n componentWillUnmount() {\r\n this.clearTimeout();\r\n }\r\n\r\n clearTimeout = () => {\r\n if (this.timer) {\r\n clearTimeout(this.timer);\r\n this.timer = null;\r\n }\r\n }\r\n\r\n pollState = () => {\r\n if (this.props.pollCondition && !this.timer) {\r\n this.timer = setTimeout(() => {\r\n this.clearTimeout();\r\n if (this.props.pollCondition) {\r\n this.props.dataCall();\r\n this.pollState();\r\n }\r\n }, this.props.pollingIntervalInMinutes * 60 * 1000);\r\n }\r\n }\r\n\r\n render() {\r\n return null;\r\n }\r\n}\r\n\r\nPollData.propTypes = {\r\n initialdataCall: PropTypes.func,\r\n dataCall: PropTypes.func.isRequired,\r\n pollCondition: PropTypes.bool,\r\n callImediately: PropTypes.bool,\r\n pollingIntervalInMinutes: PropTypes.number.isRequired,\r\n};\r\n\r\nPollData.defaultProps = {\r\n callImediately: true,\r\n initialdataCall: null,\r\n pollCondition: true,\r\n};\r\n\r\nexport default PollData;\r\n","import * as React from 'react';\r\nimport { Route, Redirect } from 'react-router-dom';\r\nimport { connect } from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Auth from '../Auth';\r\nimport { logoutReasons } from '../constants';\r\n\r\nconst PrivateRoute = ({\r\n component: Component, loginUrl, roleLoginUrl, profileData, changeRole, ...rest\r\n}) => (\r\n \r\n {question.type !== formAnswerTypes.action && question.type !== formAnswerTypes.switch && (\r\n
\r\n );\r\n};\r\n\r\nFormQuestion.propTypes = {\r\n translations: PropTypes.object,\r\n handleResponseUpdate: PropTypes.func.isRequired,\r\n question: PropTypes.object.isRequired,\r\n response: PropTypes.object,\r\n showRequired: PropTypes.bool,\r\n disabled: PropTypes.bool,\r\n contentState: PropTypes.string,\r\n ScaleResponseProps: PropTypes.object,\r\n showScores: PropTypes.bool,\r\n readOnly: PropTypes.bool,\r\n elementSettings: PropTypes.object,\r\n};\r\n\r\nFormQuestion.defaultProps = {\r\n response: null,\r\n showRequired: false,\r\n disabled: false,\r\n contentState: null,\r\n translations: null,\r\n ScaleResponseProps: null,\r\n showScores: false,\r\n readOnly: false,\r\n elementSettings: null,\r\n};\r\n\r\nexport default FormQuestion;\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { Typography, withStyles } from '@material-ui/core';\r\nimport { hasValueForQuestionType } from './FormQuestion';\r\nimport { getElementConditionState } from '../../elementStateUtils';\r\nimport { elementConditionStates } from '../../constants';\r\n\r\nconst styles = theme => ({\r\n validationText: {\r\n marginTop: theme.spacing(4),\r\n textAlign: 'center',\r\n width: '100%',\r\n outline: 'none',\r\n },\r\n});\r\n\r\nclass FormValidation extends React.Component {\r\n state = {\r\n missingRequiredQuestions: false,\r\n }\r\n\r\n validationErrorRef = React.createRef()\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n // Focus on validation error when appearing\r\n if (!prevState.missingRequiredQuestions && this.state.missingRequiredQuestions) {\r\n if (this.validationErrorRef.current) this.validationErrorRef.current.focus();\r\n }\r\n }\r\n\r\n validate = () => {\r\n const {\r\n task, responses, getProgramItem, getSpecificTaskResponses,\r\n } = this.props;\r\n\r\n if (!task.contentElements?.length) {\r\n return true;\r\n }\r\n const missingRequiredQuestions = task.contentElements.map((e) => {\r\n const contentState = getElementConditionState(e, getSpecificTaskResponses, task, getProgramItem);\r\n if (contentState === elementConditionStates.hidden) {\r\n return false;\r\n }\r\n return e.questions?.reduce((prev, curr) => prev\r\n || (curr.required && (!responses || !hasValueForQuestionType(curr.type, responses[curr.id]?.response))),\r\n false\r\n );\r\n }).some(d => d);\r\n\r\n this.setState({ missingRequiredQuestions });\r\n return !missingRequiredQuestions;\r\n }\r\n\r\n render() {\r\n const {\r\n classes, task, translations, showValidations,\r\n } = this.props;\r\n\r\n if (!task) {\r\n return null;\r\n }\r\n\r\n if (!this.state.missingRequiredQuestions || !showValidations) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n )}\r\n\r\n \r\n {showTitle && (\r\n \r\n {task.name}\r\n \r\n )}\r\n\r\n {taskElements.length === 0\r\n ? noContent\r\n : taskElements.map((item, index) => (\r\n
\r\n );\r\n }\r\n}\r\n\r\nTaskContent.propTypes = {\r\n className: PropTypes.string,\r\n classes: PropTypes.object.isRequired,\r\n task: PropTypes.object,\r\n TaskFormProps: PropTypes.object,\r\n LinkElementProps: PropTypes.object,\r\n noContent: PropTypes.node,\r\n taskResponses: PropTypes.object,\r\n showTitle: PropTypes.bool,\r\n elementPreContent: PropTypes.func,\r\n getProgramItem: PropTypes.func.isRequired,\r\n getSpecificTaskResponses: PropTypes.func.isRequired,\r\n translations: PropTypes.object,\r\n onResponse: PropTypes.func.isRequired,\r\n onSaveChanges: PropTypes.func.isRequired,\r\n TaskElementProps: PropTypes.object,\r\n};\r\n\r\nTaskContent.defaultProps = {\r\n className: null,\r\n noContent: null,\r\n taskResponses: null,\r\n TaskFormProps: null,\r\n LinkElementProps: null,\r\n showTitle: false,\r\n elementPreContent: null,\r\n task: null,\r\n translations: null,\r\n TaskElementProps: null,\r\n};\r\n\r\nexport default withStyles(styles)(TaskContent);\r\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\nimport {\r\n Typography,\r\n} from '@material-ui/core';\r\n\r\nimport HtmlContent from '../HtmlContent';\r\nimport {\r\n elementConditionStates, contentElemenIdPrefix, systemContentElementTypes,\r\n} from '../../constants';\r\n\r\nimport TaskForm from './TaskForm';\r\nimport TaskElementLink from './TaskElementLink';\r\nimport { getElementConditionState } from '../../elementStateUtils';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n position: 'relative',\r\n clear: 'both', // needed in case of 'float: left' from htmlcontent (image-alignment)\r\n width: '100%', // needed to allow sub-elements to overflow individualy (ex. table)\r\n flex: '0 0 100%', // Parent is Flex + Wrap but normal items should fill width\r\n\r\n '&+&': {\r\n marginTop: theme.spacing(8),\r\n },\r\n\r\n [theme.breakpoints.down('sm')]: {\r\n wordBreak: 'break-word', // to avoid width overflow on small screens. (using overflow: hidden will break sticky headers)\r\n\r\n '&+&': {\r\n marginBottom: theme.spacing(6),\r\n },\r\n },\r\n\r\n '&$selected': {\r\n border: `2px solid ${theme.palette.primary.main}`,\r\n padding: theme.spacing(1),\r\n },\r\n\r\n [`&.et_${systemContentElementTypes.box}`]: {\r\n background: theme.colors.highlightBackground,\r\n boxShadow: theme.shadows[3],\r\n borderRadius: theme.spacing(0.5),\r\n padding: theme.spacing(2),\r\n alignSelf: 'flex-start',\r\n\r\n '&$collapsed $htmlContent': {\r\n '&:before': {\r\n background: `linear-gradient(transparent 120px, ${theme.colors.dimBackground})`,\r\n },\r\n },\r\n },\r\n\r\n [`&.et_${systemContentElementTypes.card}`]: {\r\n flex: '0 0 auto',\r\n width: '31%', // Does not work properly on all screens with just flex-basis 31%\r\n padding: theme.spacing(1),\r\n background: theme.colors.dimBackground,\r\n borderRadius: theme.spacing(0.5),\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n flex: '0 0 100%',\r\n },\r\n },\r\n },\r\n hoveredElement: {\r\n visibility: 'hidden',\r\n '$root:hover &': {\r\n visibility: 'visible',\r\n },\r\n },\r\n header: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n marginBottom: theme.spacing(2),\r\n },\r\n title: {\r\n fontSize: '1.25em',\r\n flex: '1 1 auto',\r\n },\r\n content: {\r\n '&+&': {\r\n marginTop: theme.spacing(4),\r\n '$collapsed &': {\r\n marginTop: 0,\r\n },\r\n },\r\n '&:empty': {\r\n display: 'none',\r\n },\r\n },\r\n htmlContent: {\r\n '$collapsed &': {\r\n maxHeight: 200,\r\n overflow: 'hidden',\r\n position: 'relative',\r\n\r\n '&:before': {\r\n content: '\"\"',\r\n width: '100%',\r\n height: '100%',\r\n position: 'absolute',\r\n left: 0,\r\n top: 0,\r\n background: 'linear-gradient(transparent 120px, white)',\r\n },\r\n },\r\n },\r\n linkContent: {\r\n },\r\n taskForm: {\r\n },\r\n collapsed: {\r\n },\r\n expanded: {\r\n },\r\n accepted: {\r\n },\r\n rejected: {\r\n },\r\n selected: {\r\n },\r\n});\r\n\r\nexport const getStylesFromSettings = settings => Object.keys(settings || {}).reduce((prev, curr) => (\r\n curr.startsWith('style.') ? {\r\n ...prev,\r\n [curr.substring(6)]: settings[curr],\r\n } : prev), {});\r\n\r\nclass TaskElement extends React.Component {\r\n scrolled = false;\r\n\r\n componentDidMount() {\r\n this.checkScroll();\r\n }\r\n\r\n componentDidUpdate() {\r\n this.checkScroll();\r\n }\r\n\r\n checkScroll = () => {\r\n if (window?.location?.hash && this.props.element) {\r\n if (`${this.props.element.id}` === window.location.hash.substring(1)) {\r\n const el = document.getElementById(`${contentElemenIdPrefix}${window.location.hash.substring(1)}`);\r\n if (el) {\r\n this.scrolled = true;\r\n setTimeout(() => {\r\n el.scrollIntoView();\r\n // el.scrollIntoView({ behavior: 'smooth' });\r\n }, 200);\r\n }\r\n }\r\n }\r\n }\r\n\r\n getLinkedElementReference = (settings) => {\r\n if (!settings?.linkedElementTaskId) {\r\n return null;\r\n }\r\n\r\n const refTask = this.props.getProgramItem(settings.linkedElementTaskId);\r\n const refElement = refTask.contentElements?.find(e => e.id === Number(settings.linkedElementElementId));\r\n const refTaskResponses = this.props.getSpecificTaskResponses(settings.linkedElementTaskId);\r\n\r\n return {\r\n element: refElement,\r\n taskResponses: refTaskResponses,\r\n };\r\n }\r\n\r\n render() {\r\n const {\r\n classes, translations, task, taskResponses, element, TaskFormProps, customElementHandler, getSpecificTaskResponses, showValidationErrors, className,\r\n onResponse, LinkElementProps, getProgramItem, noHiddenStates, HoveredElement, selectedElementId, addNoContextForImages, elementPreContent, elementIndex,\r\n } = this.props;\r\n\r\n const contentState = getElementConditionState(element, getSpecificTaskResponses, task, getProgramItem);\r\n const customHandled = customElementHandler && customElementHandler(element, contentState);\r\n const linkedElementReference = this.getLinkedElementReference(element.settings);\r\n\r\n if (customHandled) {\r\n return customHandled;\r\n }\r\n\r\n if (contentState === elementConditionStates.hidden && !noHiddenStates) {\r\n return null;\r\n }\r\n\r\n return (\r\n <>\r\n {\r\n elementPreContent && elementPreContent(element, elementIndex)\r\n }\r\n \r\n \r\n {element.title}\r\n \r\n
\r\n )}\r\n\r\n {linkedElementReference && (\r\n \r\n {}}\r\n translations={translations}\r\n getProgramItem={getProgramItem}\r\n getSpecificTaskResponses={getSpecificTaskResponses}\r\n taskId={task.id}\r\n readOnly\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\nTaskElement.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translations: PropTypes.object,\r\n element: PropTypes.object.isRequired,\r\n task: PropTypes.object.isRequired,\r\n TaskFormProps: PropTypes.object,\r\n customElementHandler: PropTypes.func,\r\n onResponse: PropTypes.func.isRequired,\r\n LinkElementProps: PropTypes.object,\r\n taskResponses: PropTypes.object,\r\n getProgramItem: PropTypes.func.isRequired,\r\n getSpecificTaskResponses: PropTypes.func.isRequired,\r\n noHiddenStates: PropTypes.bool,\r\n HoveredElement: PropTypes.object,\r\n selectedElementId: PropTypes.number,\r\n addNoContextForImages: PropTypes.bool,\r\n elementIndex: PropTypes.number.isRequired,\r\n elementPreContent: PropTypes.func,\r\n showValidationErrors: PropTypes.bool,\r\n className: PropTypes.string,\r\n};\r\n\r\nTaskElement.defaultProps = {\r\n TaskFormProps: null,\r\n customElementHandler: null,\r\n LinkElementProps: null,\r\n translations: null,\r\n taskResponses: null,\r\n noHiddenStates: false,\r\n HoveredElement: null,\r\n selectedElementId: null,\r\n addNoContextForImages: false,\r\n elementPreContent: null,\r\n showValidationErrors: false,\r\n className: null,\r\n};\r\n\r\n\r\nexport default withStyles(styles)(TaskElement);\r\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\nimport { Link } from 'react-router-dom';\r\nimport OpenInNewWindowIcon from '@material-ui/icons/OpenInNew';\r\nimport { Typography } from '@material-ui/core';\r\n\r\nimport { linkTypes } from '../../constants';\r\nimport apiUrls from '../../apiUrls';\r\nimport Image from '../Image';\r\n\r\nconst styles = theme => ({\r\n image: {\r\n width: '100%',\r\n },\r\n audio: {\r\n width: '100%',\r\n },\r\n link: {\r\n display: 'inline',\r\n borderBottom: `1px solid ${theme.palette.grey[200]}`,\r\n },\r\n fileLink: {\r\n },\r\n internalLink: {\r\n },\r\n externalLink: {\r\n\r\n },\r\n icon: {\r\n marginLeft: theme.spacing(1),\r\n },\r\n missingContent: {\r\n background: theme.palette.grey[100],\r\n padding: theme.spacing(2),\r\n },\r\n});\r\n\r\nconst getVideoFrameUrl = url => `${apiUrls.baseUrl}/${apiUrls.media.video}/${url}?referer=${window.location.origin}`;\r\n\r\nclass TaskElementLink extends React.Component {\r\n state = {\r\n paddingBottom: null,\r\n };\r\n\r\n componentDidMount() {\r\n window.addEventListener('message', this.handlePostMessage);\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener('message', this.handlePostMessage);\r\n }\r\n\r\n handlePostMessage = (event) => {\r\n if (event.origin === apiUrls.baseUrl && event.data?.source === 'yw@videoPlayer') {\r\n const aspectRatio = event.data.height / event.data.width;\r\n if (aspectRatio > 0) {\r\n this.setState({ paddingBottom: `${aspectRatio * 100}%` });\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n classes, translations, link, className, getLinkUrl,\r\n } = this.props;\r\n\r\n if (!link || !link.url) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {getLinkUrl && (link.linkType === linkTypes.task || link.linkType === linkTypes.module || link.linkType === linkTypes.internal) && (\r\n \r\n \r\n {link.name }\r\n \r\n \r\n )}\r\n\r\n {link.linkType === linkTypes.image && (\r\n \r\n {link.name || (translations && translations.openFile)}\r\n \r\n \r\n )}\r\n\r\n {link.linkType === linkTypes.url && (\r\n \r\n \r\n {link.name || (translations && translations.openLinkInNewWindow) }\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nTaskElementLink.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translations: PropTypes.object,\r\n link: PropTypes.object,\r\n className: PropTypes.string,\r\n getLinkUrl: PropTypes.func,\r\n};\r\n\r\nTaskElementLink.defaultProps = {\r\n link: null,\r\n className: null,\r\n translations: null,\r\n getLinkUrl: null,\r\n};\r\n\r\nexport default withStyles(styles)(TaskElementLink);\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport FormQuestion from './FormQuestion';\r\nimport { systemContentElementTypes } from '../../constants';\r\nimport QuestionnaireTable from './customTypes/QuestionnaireTable';\r\nimport BullsEyeQuestions from './customTypes/BullsEyeQuestions';\r\nimport BubbleChoiceQuestions from './customTypes/BubbleChoiceQuestions';\r\nimport QuizResponse from './customTypes/QuizResponse';\r\nimport RouteSelection from './customTypes/RouteSelection';\r\n\r\nclass TaskForm extends React.Component {\r\n handleResponseUpdate = question => (responseName, value) => {\r\n if (this.props.readOnly) {\r\n return;\r\n }\r\n\r\n this.props.onResponse([{ questionId: question.id, [responseName]: value }]);\r\n }\r\n\r\n render() {\r\n const {\r\n translations, element, disabled, readOnly,\r\n FormQuestionProps, QuestionnaireTableProps, contentState, showValidationErrors,\r\n taskResponses, getProgramItem, getSpecificTaskResponses, taskId, small,\r\n } = this.props;\r\n\r\n const questions = element.questions || [];\r\n const responses = taskResponses || {};\r\n const elementSettings = element.settings || {};\r\n\r\n switch (element.elementType) {\r\n case systemContentElementTypes.bullseye:\r\n return (\r\n \r\n
\r\n )}\r\n\r\n {link.linkType === linkTypes.vimeo && (\r\n \r\n
\r\n )}\r\n\r\n {link.linkType === linkTypes.youtube && (\r\n \r\n
\r\n )}\r\n \r\n {question.answers?.map(item => (\r\n 45 })}\r\n variant=\"contained\"\r\n color={checkedResponses[item.id] ? 'primary' : 'default'}\r\n onClick={onBubbleClick(item, checkedResponses[item.id])}\r\n key={item.id}\r\n >\r\n {item.value}\r\n \r\n ))}\r\n
\r\n );\r\n};\r\n\r\nBubbleChoiceQuestions.propTypes = {\r\n question: PropTypes.object.isRequired,\r\n response: PropTypes.object,\r\n handleResponseUpdate: PropTypes.func.isRequired,\r\n};\r\n\r\nBubbleChoiceQuestions.defaultProps = {\r\n response: null,\r\n};\r\n\r\nexport default BubbleChoiceQuestions;\r\n","import { makeStyles, useTheme } from '@material-ui/core/styles';\r\nimport React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Button, createStyles, useMediaQuery } from '@material-ui/core';\r\nimport classnames from 'classnames';\r\nimport HtmlContent from '../../HtmlContent';\r\n\r\nconst useStyles = makeStyles(theme => createStyles({\r\n root: {\r\n position: 'relative',\r\n background: theme.palette.grey[100],\r\n },\r\n bullsEyeContainer: {\r\n display: 'flex',\r\n height: 550,\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n margin: theme.spacing(1),\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n height: 360,\r\n },\r\n\r\n '&$small': {\r\n height: 360,\r\n },\r\n },\r\n small: {},\r\n readOnly: {},\r\n bullsEye: {\r\n position: 'relative',\r\n padding: 0,\r\n width: 500,\r\n height: 500,\r\n borderRadius: '50%',\r\n cursor: 'crosshair',\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n width: 300,\r\n height: 300,\r\n },\r\n\r\n '$small &': {\r\n width: 272,\r\n height: 272,\r\n },\r\n\r\n '$readOnly &': {\r\n cursor: 'default',\r\n },\r\n },\r\n questionLabel: {\r\n position: 'absolute',\r\n zIndex: 2,\r\n color: 'black',\r\n wordBreak: 'break-word',\r\n },\r\n scoreCircle: {\r\n position: 'absolute',\r\n background: theme.palette.grey[200],\r\n border: theme.borders.primary,\r\n borderRadius: '50%',\r\n },\r\n line: {\r\n position: 'absolute',\r\n background: 'black',\r\n border: '1px solid black',\r\n height: '50%',\r\n },\r\n scorePoint: {\r\n height: 25,\r\n width: 25,\r\n backgroundColor: 'black',\r\n borderRadius: '50%',\r\n transform: 'translate(-50%, 50%)',\r\n position: 'absolute',\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n width: 16,\r\n height: 16,\r\n },\r\n\r\n '$small &': {\r\n width: 16,\r\n height: 16,\r\n },\r\n },\r\n}), { name: 'BullsEyeQuestion' });\r\n\r\nconst calculateScore = (xPos, yPos, width, numberOfCircles) => {\r\n const circleSize = (100 / numberOfCircles) / 100;\r\n const diagonalFromSenter = Math.sqrt((xPos ** 2) + (yPos ** 2));\r\n const radius = width / 2;\r\n let i;\r\n for (i = 0; i < numberOfCircles; i++) {\r\n const circleScoreWidth = circleSize * (i + 1);\r\n if (diagonalFromSenter <= circleScoreWidth * radius) {\r\n return numberOfCircles - i;\r\n }\r\n }\r\n return -1;\r\n};\r\n\r\nconst questionSeparatorLineTopPositions = ['25%', '50%', '0%', '25%'];\r\nconst questionSeparatorLineLeftPositions = ['25%', '50%', '50%', '75%'];\r\nconst questionSeparatorLineTransform = ['rotate(90deg)', 'rotate(0deg)', 'rotate(0deg)', 'rotate(90deg)'];\r\n\r\nconst createLines = questions => questions.map((q, index) => ({\r\n style: {\r\n top: questionSeparatorLineTopPositions[index],\r\n left: questionSeparatorLineLeftPositions[index],\r\n transform: questionSeparatorLineTransform[index],\r\n },\r\n key: q.id,\r\n}));\r\n\r\nconst createCircles = (numberOfCircles) => {\r\n const circles = [];\r\n const circleSize = 100 / numberOfCircles;\r\n let number = numberOfCircles;\r\n let i;\r\n for (i = 0; i < numberOfCircles; i++) {\r\n circles.push({\r\n style: {\r\n width: `${number * circleSize}%`,\r\n height: `${number * circleSize}%`,\r\n },\r\n key: i,\r\n });\r\n number -= 1;\r\n }\r\n return circles;\r\n};\r\n\r\nconst labelPositionOffset = 24;\r\nconst labelPositionOffsetSmall = 12;\r\n\r\nconst getQuestionLabelPositionStyle = offset => ({\r\n 0: { top: offset, right: offset },\r\n 1: { top: offset, left: offset },\r\n 2: { bottom: offset, left: offset },\r\n 3: { bottom: offset, right: offset },\r\n});\r\n\r\nconst getQuadrantPosition = (mouseClickX, mouseClickY, circleDiameter) => {\r\n const center = circleDiameter / 2;\r\n\r\n let index; let fromPosX; let fromPosY;\r\n if (mouseClickX > center && mouseClickY < center) {\r\n index = 0;\r\n fromPosX = mouseClickX - center;\r\n fromPosY = center - mouseClickY;\r\n } else if (mouseClickX < center && mouseClickY < center) {\r\n index = 1;\r\n fromPosX = center - mouseClickX;\r\n fromPosY = center - mouseClickY;\r\n } else if (mouseClickX < center && mouseClickY > center) {\r\n index = 2;\r\n fromPosX = center - mouseClickX;\r\n fromPosY = mouseClickY - center;\r\n } else if (mouseClickX > center && mouseClickY > center) {\r\n index = 3;\r\n fromPosX = mouseClickX - center;\r\n fromPosY = mouseClickY - center;\r\n }\r\n return { index, fromPosX, fromPosY };\r\n};\r\n\r\nconst BullsEyeQuestions = ({\r\n questions, handleResponseUpdate, responses, readOnly, small,\r\n}) => {\r\n const classes = useStyles();\r\n const [pointPositions, setPointPositions] = useState({});\r\n\r\n const theme = useTheme();\r\n const isMobile = useMediaQuery(theme.breakpoints.down('xs'));\r\n const useSmallLayout = small || isMobile;\r\n\r\n if (questions?.length !== 4) return null;\r\n\r\n const numberOfCircles = questions[0].scaleConfig.max;\r\n\r\n const onSetPoint = (event) => {\r\n if (readOnly) return;\r\n\r\n const currentTargetRect = event.currentTarget.getBoundingClientRect();\r\n const circleDiameter = event.currentTarget.clientHeight;\r\n const mouseClickX = parseFloat(event.pageX - window.pageXOffset - currentTargetRect.left);\r\n const mouseClickY = parseFloat(event.pageY - window.pageYOffset - currentTargetRect.top);\r\n\r\n const quadrantPosition = getQuadrantPosition(mouseClickX, mouseClickY, circleDiameter);\r\n const score = calculateScore(quadrantPosition.fromPosX, quadrantPosition.fromPosY, circleDiameter, numberOfCircles);\r\n const question = questions[quadrantPosition.index];\r\n\r\n setPointPositions(prevState => ({\r\n ...prevState,\r\n [question.id]: {\r\n left: (mouseClickX / circleDiameter) * 100,\r\n bottom: ((circleDiameter - mouseClickY) / circleDiameter) * 100,\r\n },\r\n }));\r\n\r\n handleResponseUpdate(question)('scaleResponse', score);\r\n };\r\n\r\n const getPointPosition = (questionResponse) => {\r\n const scaleResponse = questionResponse.response.scaleResponse;\r\n if (!scaleResponse) {\r\n return null;\r\n }\r\n\r\n // if presice position exists, use this\r\n if (pointPositions[questionResponse.questionId]) {\r\n return {\r\n left: `${pointPositions[questionResponse.questionId].left}%`,\r\n bottom: `${pointPositions[questionResponse.questionId].bottom}%`,\r\n };\r\n }\r\n\r\n // Otherwise calculate center position for score\r\n const circleRadius = numberOfCircles;\r\n const circleDiameter = circleRadius * 2;\r\n const pointRadius = numberOfCircles - scaleResponse + 0.5; // half way between lines -> scaleResponse should be minimum 1 (not 0)\r\n\r\n const questionIndex = questions.findIndex(d => d.id === questionResponse.questionId);\r\n const angleInDegrees = 45 - (questionIndex * 90);\r\n const xPos = pointRadius * Math.sin(angleInDegrees * Math.PI / 180) + circleRadius;\r\n const yPos = pointRadius * Math.cos(angleInDegrees * Math.PI / 180) + circleRadius;\r\n\r\n return {\r\n left: `${(xPos / circleDiameter) * 100}%`,\r\n bottom: `${(yPos / circleDiameter) * 100}%`,\r\n };\r\n };\r\n\r\n const circles = createCircles(numberOfCircles);\r\n const lines = createLines(questions);\r\n const questionResponses = questions.map(q => ({ questionId: q.id, response: responses[q.id]?.response }))\r\n .filter(d => d.response);\r\n\r\n return (\r\n \r\n {questions.map((question, i) => (\r\n
\r\n );\r\n};\r\n\r\nBullsEyeQuestions.propTypes = {\r\n questions: PropTypes.array.isRequired,\r\n handleResponseUpdate: PropTypes.func.isRequired,\r\n responses: PropTypes.object,\r\n readOnly: PropTypes.bool,\r\n small: PropTypes.bool,\r\n};\r\n\r\nBullsEyeQuestions.defaultProps = {\r\n responses: null,\r\n readOnly: false,\r\n small: false,\r\n};\r\n\r\nexport default BullsEyeQuestions;\r\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\nimport {\r\n Typography, Table, TableHead, TableRow, TableCell, TableBody, ButtonBase, TextField,\r\n} from '@material-ui/core';\r\n\r\nimport HtmlContent from '../../HtmlContent';\r\nimport { CheckedIcon } from '../../../../common/icons';\r\nimport { isEmpty } from '../../../objectUtils';\r\nimport { isEdge } from '../../../browserUtils';\r\nimport { with2dArrowNavigation } from '../../accessibility/ArrowNavigation';\r\nimport { formAnswerTypes } from '../../../constants';\r\nimport { getInputType } from '../formResponseTypes/FreetextResponse';\r\n\r\nconst cellWidth = 40;\r\nconst cellWidthSmall = 30;\r\nconst maxContentWidth = 1080;\r\n\r\nconst styles = theme => ({\r\n table: {\r\n width: '100%',\r\n height: '100%',\r\n border: `1px solid ${theme.palette.grey[100]}`,\r\n background: theme.palette.common.white,\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n tableLayout: 'fixed',\r\n },\r\n },\r\n stickyHeaderCell: {\r\n position: 'sticky',\r\n top: 49,\r\n background: theme.palette.common.white,\r\n boxShadow: `0 2px 2px -2px ${theme.palette.grey[600]}`,\r\n zIndex: 50,\r\n },\r\n headerCell: {\r\n border: `1px solid ${theme.palette.grey[200]}`,\r\n borderBottom: '1px solid #e0e0e0',\r\n padding: theme.spacing(1),\r\n textAlign: 'center',\r\n\r\n '$rotate &': {\r\n verticalAlign: 'bottom',\r\n width: cellWidth,\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n padding: theme.spacing(1, 0),\r\n width: cellWidthSmall,\r\n },\r\n },\r\n\r\n },\r\n answerTextCell: {\r\n [theme.breakpoints.down('xs')]: {\r\n padding: theme.spacing(1, 0.5),\r\n },\r\n overflowWrap: 'anywhere',\r\n },\r\n answerCell: {\r\n border: `1px solid ${theme.palette.grey[200]}`,\r\n borderBottom: '1px solid #e0e0e0',\r\n padding: theme.spacing(0.5),\r\n textAlign: 'center',\r\n height: '100%',\r\n\r\n '$rotate &': {\r\n width: cellWidth,\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n padding: 1,\r\n width: cellWidthSmall,\r\n },\r\n },\r\n },\r\n scoreCell: {\r\n background: theme.palette.grey[300],\r\n },\r\n invalidRow: {\r\n borderLeft: `2px solid ${theme.palette.error.main}`,\r\n },\r\n answerOption: {\r\n\r\n '$rotate &': {\r\n display: 'inline-block',\r\n writingMode: 'vertical-lr',\r\n transform: 'rotate(180deg)',\r\n overflow: 'unset', // Fix for mac/safari on vertical text (when used in combination with \"noWrap\")\r\n },\r\n },\r\n rotate: {\r\n\r\n },\r\n answerButton: {\r\n // width: cellWidth,\r\n // height: cellWidth,\r\n width: '100%',\r\n height: '100%',\r\n\r\n '&:focus': {\r\n background: theme.palette.grey[200],\r\n },\r\n\r\n '&:hover': {\r\n background: theme.palette.grey[300],\r\n },\r\n\r\n // [theme.breakpoints.down('xs')]: {\r\n // width: cellWidthSmall - 2,\r\n // height: cellWidthSmall - 2,\r\n // },\r\n },\r\n cellMarker: {\r\n opacity: 0,\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n opacity: 0.2,\r\n },\r\n },\r\n});\r\n\r\nclass QuestionnaireTable extends React.Component {\r\n selectAnswer = (question, value) => () => {\r\n this.props.onChange(question)('choiceResponse', [value]);\r\n }\r\n\r\n handleFreetextChange = question => (event) => {\r\n this.props.onChange(question)('freetextResponse', event.target.value);\r\n }\r\n\r\n render() {\r\n const {\r\n classes, questions, responses, disabled, showScoreMarks, validationError, navigation, elementSettings,\r\n } = this.props;\r\n\r\n if (!questions || questions.length < 1 || !questions[0].answers) {\r\n return null;\r\n }\r\n\r\n const answers = questions.reduce((prev, curr) => ({\r\n ...prev,\r\n [curr.id]: responses && responses[curr.id]\r\n && ((responses[curr.id].response?.choiceResponse && responses[curr.id].response.choiceResponse[0]?.id)\r\n || responses[curr.id].response?.freetextResponse),\r\n }), {});\r\n\r\n\r\n const verticalText = elementSettings?.flipLabels || document.documentElement.clientWidth < 930;\r\n const firstColWidth = verticalText ? document.documentElement.clientWidth - (questions[0].answers.length * cellWidthSmall) - 16 - 16\r\n : Number(elementSettings?.firstColWidth) || '';\r\n // Writing mode fix for Edge - until https://github.com/cssinjs/css-vendor/issues/172 is merged into Material UI/Jss\r\n const ieFix = verticalText && isEdge ? { 'writing-mode': 'vertical-lr' } : null;\r\n const answerCellMinWidth = verticalText ? null : Math.min(Math.min(document.documentElement.clientWidth, maxContentWidth) / (questions[0].answers.length * 2), 100);\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n {translations && translations.youGotxOfXScore ? translations.youGotxOfXScore(scoring) : `Score: ${scoring.score} / ${scoring.max}`}\r\n \r\n\r\n {questionsWithAnswers.map(q => (\r\n {}}\r\n />\r\n ))}\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nQuizResponse.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n translations: PropTypes.object,\r\n element: PropTypes.object.isRequired,\r\n taskId: PropTypes.string.isRequired,\r\n getProgramItem: PropTypes.func.isRequired,\r\n getSpecificTaskResponses: PropTypes.func.isRequired,\r\n contentState: PropTypes.string,\r\n};\r\n\r\nQuizResponse.defaultProps = {\r\n contentState: null,\r\n translations: null,\r\n};\r\n\r\nexport default withStyles(styles)(QuizResponse);\r\n","import { makeStyles } from '@material-ui/core/styles';\r\nimport React, { useState } from 'react';\r\nimport { createStyles, Input, Typography } from '@material-ui/core';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { getTranslate } from 'react-localize-redux';\r\nimport { useSelector } from 'react-redux';\r\nimport { stripHtml } from '../../../htmlUtils';\r\n\r\nimport Arrow from '../../../../common/image/Arrow.png';\r\n\r\nconst useStyles = makeStyles(theme => createStyles({\r\n imageContainer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n },\r\n column: {\r\n margin: theme.spacing(1),\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n },\r\n left: {\r\n backgroundColor: '#778689',\r\n },\r\n right: {\r\n backgroundColor: '#e94f11',\r\n },\r\n circle: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n borderRadius: '50%',\r\n alignItems: 'center',\r\n width: 190,\r\n height: 190,\r\n color: theme.palette.common.white,\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n width: 155,\r\n height: 155,\r\n\r\n '& p': {\r\n fontSize: '1rem',\r\n },\r\n },\r\n },\r\n bottomContainer: {\r\n marginTop: theme.spacing(4),\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n arrowImage: {\r\n margin: theme.spacing(4, 0, 0),\r\n },\r\n triangle: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n textAlign: 'center',\r\n position: 'relative',\r\n width: 200,\r\n height: 200,\r\n\r\n '&:after': {\r\n content: '\"\"',\r\n position: 'absolute',\r\n borderLeft: '150px solid transparent',\r\n borderRight: '150px solid transparent',\r\n borderBottom: '200px solid #2b7b90',\r\n },\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n '& p': {\r\n fontSize: '1rem',\r\n },\r\n },\r\n\r\n '& + $input': {\r\n width: 300,\r\n },\r\n },\r\n triangleText: {\r\n zIndex: 1,\r\n marginTop: 100,\r\n color: theme.palette.common.white,\r\n },\r\n input: {\r\n marginTop: theme.spacing(2),\r\n background: theme.palette.grey[200],\r\n borderRadius: 8,\r\n padding: theme.spacing(1, 2),\r\n },\r\n}));\r\n\r\nconst RouteSelection = ({\r\n questions, handleResponseUpdate, responses, readOnly,\r\n}) => {\r\n const [leftValue, setLeftValue] = useState(null);\r\n const [rightValue, setRightValue] = useState(null);\r\n const [bottomValue, setBottomValue] = useState(null);\r\n const classes = useStyles();\r\n const updateAsyncTimer = React.useRef();\r\n const translate = useSelector(state => getTranslate(state.localize));\r\n\r\n if (questions?.length !== 3) return null;\r\n\r\n const handleChange = key => (event) => {\r\n if (readOnly) {\r\n return;\r\n }\r\n const value = event.target.value;\r\n switch (key) {\r\n case 0:\r\n setLeftValue(value);\r\n break;\r\n case 1:\r\n setRightValue(value);\r\n break;\r\n case 2:\r\n setBottomValue(value);\r\n break;\r\n default:\r\n return;\r\n }\r\n\r\n clearTimeout(updateAsyncTimer.current);\r\n updateAsyncTimer.current = setTimeout(() => {\r\n handleResponseUpdate(questions[key])('freetextResponse', value);\r\n }, 200);\r\n };\r\n\r\n const answerLeft = leftValue !== null ? leftValue : responses && responses[questions[0].id]?.response?.freetextResponse;\r\n const answerRight = rightValue !== null ? rightValue : responses && responses[questions[1].id]?.response?.freetextResponse;\r\n const answerBottom = bottomValue !== null ? bottomValue : responses && responses[questions[2].id]?.response?.freetextResponse;\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nRouteSelection.propTypes = {\r\n questions: PropTypes.array.isRequired,\r\n handleResponseUpdate: PropTypes.func.isRequired,\r\n responses: PropTypes.object,\r\n readOnly: PropTypes.bool,\r\n};\r\nRouteSelection.defaultProps = {\r\n responses: null,\r\n readOnly: false,\r\n};\r\n\r\nexport default RouteSelection;\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nimport {\r\n ButtonBase,\r\n makeStyles,\r\n} from '@material-ui/core';\r\n\r\nimport HtmlContent from '../../HtmlContent';\r\nimport { elementConditionStates } from '../../../constants';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n accepted: {\r\n },\r\n rejected: {\r\n },\r\n collapsed: {\r\n },\r\n expanded: {\r\n },\r\n actionButtonContainer: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n\r\n // Disabled hiding when expanded.. Needs better functionality\r\n // '&$expanded': {\r\n // display: 'none',\r\n // },\r\n },\r\n actionButton: {\r\n width: '100%',\r\n padding: theme.spacing(2),\r\n boxShadow: theme.shadows[3],\r\n border: `4px solid ${theme.palette.primary.main}`,\r\n\r\n '$accepted &': {\r\n background: theme.palette.primary.main,\r\n borderColor: theme.palette.primary.main,\r\n color: theme.palette.common.white,\r\n },\r\n\r\n '$rejected &': {\r\n background: 'darkgrey',\r\n borderColor: 'transparent',\r\n color: 'whitesmoke',\r\n opacity: 1,\r\n },\r\n\r\n '$collapsed &, $expanded &': {\r\n padding: theme.spacing(1),\r\n borderWidth: 0,\r\n },\r\n },\r\n actionButtonHtml: {\r\n width: '100%',\r\n color: 'inherit',\r\n '$rejected &': {\r\n color: 'whitesmoke',\r\n\r\n '& > h2, & > h3, & > h4': {\r\n fontWeight: theme.typography.fontWeightMedium,\r\n },\r\n },\r\n\r\n '$accepted &': {\r\n color: theme.palette.common.white,\r\n\r\n '& > h2, & > h3, & > h4': {\r\n fontWeight: theme.typography.fontWeightMedium,\r\n },\r\n },\r\n },\r\n}));\r\n\r\nconst ActionButton = ({\r\n scaleResponse, contentState, handleResponseUpdate, question, disabled, readOnly,\r\n}) => {\r\n const classes = useStyles();\r\n\r\n const handleClickResponse = value => () => {\r\n if (readOnly) return;\r\n\r\n handleResponseUpdate(value);\r\n };\r\n\r\n return (\r\n \r\n
\r\n\r\n \r\n {translate('routeSelection.awayValues')} \r\n 
\r\n
\r\n \r\n {translate('routeSelection.towardsValues')} \r\n \r\n
\r\n \r\n
\r\n \r\n {translate('routeSelection.psychologicalFlex')} \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nActionButton.propTypes = {\r\n handleResponseUpdate: PropTypes.func,\r\n question: PropTypes.object.isRequired,\r\n scaleResponse: PropTypes.number,\r\n disabled: PropTypes.bool,\r\n readOnly: PropTypes.bool,\r\n contentState: PropTypes.string,\r\n};\r\n\r\nActionButton.defaultProps = {\r\n disabled: false,\r\n readOnly: false,\r\n handleResponseUpdate: null,\r\n scaleResponse: null,\r\n contentState: null,\r\n};\r\n\r\nexport default ActionButton;\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useSelector } from 'react-redux';\r\nimport { getTranslate } from 'react-localize-redux';\r\n\r\nimport {\r\n TextField, Typography, makeStyles,\r\n} from '@material-ui/core';\r\n\r\nimport {\r\n KeyboardTimePicker, KeyboardDateTimePicker, KeyboardDatePicker,\r\n} from '@material-ui/pickers';\r\nimport { TimeIcon, CalendarIcon } from '../../../../common/icons';\r\nimport { validateEmail } from '../../../validationUtils';\r\nimport { freetextInputTypes } from '../../../constants';\r\nimport { getLocalDate, isDateObject, pad2 } from '../../../dateUtils';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n inputResponse: {\r\n border: `1px solid ${theme.palette.primary.main}`,\r\n padding: theme.spacing(2),\r\n backgroundColor: theme.palette.common.white,\r\n },\r\n disabledReadonlyInput: {\r\n color: theme.palette.text.primary,\r\n },\r\n}));\r\n\r\nexport const getInputType = (inputType) => {\r\n switch (inputType) {\r\n case freetextInputTypes.email:\r\n return 'email';\r\n case freetextInputTypes.phone:\r\n return 'tel';\r\n case freetextInputTypes.number:\r\n return 'number';\r\n case freetextInputTypes.date:\r\n return 'date';\r\n case freetextInputTypes.dateAndTime:\r\n return 'datetime-local';\r\n case freetextInputTypes.time:\r\n return 'time';\r\n case freetextInputTypes.default:\r\n case freetextInputTypes.singleLineText:\r\n default:\r\n return 'text';\r\n }\r\n};\r\n\r\nconst validators = {\r\n [freetextInputTypes.email]: validateEmail,\r\n};\r\n\r\nconst FreetextResponse = ({\r\n freetextResponse, handleResponseUpdate, translations, freetextConfig, disabled, readOnly,\r\n}) => {\r\n const classes = useStyles();\r\n const translate = useSelector(state => getTranslate(state.localize));\r\n const [validationError, setValidationError] = React.useState(null);\r\n const [freetextStateValue, setFreetextStateValue] = React.useState(null);\r\n const [showValidation, setShowValidation] = React.useState(false);\r\n const updateAsyncTimer = React.useRef();\r\n\r\n const freetextType = (freetextConfig && freetextConfig.inputType) || freetextInputTypes.default;\r\n\r\n const validate = (value) => {\r\n if (validators[freetextType]) {\r\n const validation = validators[freetextType](value);\r\n setValidationError(validation.valid ? null : validation.errorTextKey);\r\n }\r\n };\r\n\r\n const handleChange = (event) => {\r\n if (readOnly) {\r\n return;\r\n }\r\n const value = event.target.value;\r\n setFreetextStateValue(value);\r\n\r\n if (showValidation) {\r\n validate(value);\r\n }\r\n clearTimeout(updateAsyncTimer.current);\r\n updateAsyncTimer.current = setTimeout(() => {\r\n handleResponseUpdate(value);\r\n }, 200);\r\n };\r\n\r\n const handleDateTimeChange = (date) => {\r\n if (readOnly) {\r\n return;\r\n }\r\n\r\n setFreetextStateValue(date);\r\n\r\n if (showValidation) {\r\n validate(date);\r\n }\r\n if (date === null || isDateObject(date)) {\r\n let valueString;\r\n if (date === null) {\r\n valueString = null;\r\n } else {\r\n switch (freetextType) {\r\n case freetextInputTypes.time:\r\n valueString = `${date.getHours()}:${date.getMinutes()}`;\r\n break;\r\n case freetextInputTypes.dateAndTime:\r\n valueString = `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())} ${date.getHours()}:${date.getMinutes()}`;\r\n break;\r\n case freetextInputTypes.date:\r\n default:\r\n valueString = `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;\r\n break;\r\n }\r\n }\r\n\r\n handleResponseUpdate(valueString);\r\n }\r\n };\r\n\r\n React.useEffect(() => {\r\n if (readOnly) {\r\n // reset text if switching from editing to readonly\r\n setFreetextStateValue(null);\r\n }\r\n }, [readOnly]);\r\n\r\n const value = freetextStateValue !== null ? freetextStateValue : freetextResponse; // comparing with null to keep empty ('') value\r\n\r\n const onBlur = () => {\r\n if (value) {\r\n setShowValidation(true);\r\n validate(value);\r\n }\r\n };\r\n\r\n const sharedPickerProps = {\r\n className: classes.inputResponse,\r\n onChange: handleDateTimeChange,\r\n fullWidth: true,\r\n autoOk: true,\r\n clearable: true,\r\n disableToolbar: true,\r\n ampm: false,\r\n minutesStep: 5,\r\n disabled,\r\n clearLabel: translate('clear'),\r\n cancelLabel: translate('cancel'),\r\n okLabel: translate('ok'),\r\n invalidDateMessage: translate('time.invalidFormat'),\r\n };\r\n\r\n switch (freetextType) {\r\n case freetextInputTypes.date:\r\n return (\r\n \r\n \r\n {question.answers?.map(item => (\r\n \r\n
\r\n );\r\n};\r\n\r\nMultipleChoice.propTypes = {\r\n translations: PropTypes.object,\r\n handleResponseUpdate: PropTypes.func,\r\n question: PropTypes.object.isRequired,\r\n choiceConfig: PropTypes.object,\r\n selectedChoices: PropTypes.array,\r\n disabled: PropTypes.bool,\r\n showScores: PropTypes.bool,\r\n};\r\n\r\nMultipleChoice.defaultProps = {\r\n choiceConfig: null,\r\n selectedChoices: null,\r\n disabled: false,\r\n translations: null,\r\n handleResponseUpdate: null,\r\n showScores: false,\r\n};\r\n\r\nexport default MultipleChoice;\r\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\nimport {\r\n Typography, Button, Slider,\r\n} from '@material-ui/core';\r\n\r\nimport { hasValue } from '../../../objectUtils';\r\nimport { with1dArrowNavigation } from '../../accessibility/ArrowNavigation';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n display: 'flex',\r\n flexFlow: 'column-reverse', // labels are positioned first but displayed last. To help for screen readers\r\n flexWrap: 'wrap',\r\n '& div': {\r\n width: '100%',\r\n },\r\n backgroundColor: theme.palette.common.white,\r\n border: `1px solid ${theme.palette.primary.main}`,\r\n padding: theme.spacing(2),\r\n },\r\n scale: {\r\n padding: theme.spacing(3, 0, 2),\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n divider: {\r\n flex: '1 1 auto',\r\n margin: theme.spacing(1),\r\n borderBottom: theme.borders.normal,\r\n\r\n [theme.breakpoints.down(700)]: {\r\n margin: 4,\r\n },\r\n [theme.breakpoints.down(650)]: {\r\n margin: 2,\r\n },\r\n [theme.breakpoints.down(620)]: {\r\n margin: 0,\r\n },\r\n [theme.breakpoints.down('xs')]: {\r\n border: 0,\r\n margin: 0,\r\n },\r\n },\r\n dividerSmall: {\r\n margin: theme.spacing(0.5),\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n margin: 0,\r\n },\r\n },\r\n noLine: {\r\n borderBottom: 'none',\r\n },\r\n step: {\r\n width: '100%',\r\n minWidth: 0,\r\n maxWidth: 64,\r\n wordBreak: 'normal', // override setting from TaskElement\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n maxWidth: 48,\r\n },\r\n },\r\n smallButtons: {\r\n },\r\n scaleLabels: {\r\n width: '100%',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n },\r\n lastLabel: {\r\n marginLeft: theme.spacing(1),\r\n textAlign: 'right',\r\n },\r\n slider: {\r\n margin: theme.spacing(0, 1, 2),\r\n },\r\n showThumb: {\r\n display: 'block',\r\n },\r\n hideThumb: {\r\n display: 'none',\r\n },\r\n});\r\n\r\nclass ScaleResponse extends React.Component {\r\n state={\r\n sliderValue: undefined,\r\n }\r\n\r\n handleChange = value => () => {\r\n if (this.props.readOnly) return;\r\n\r\n this.props.handleResponseUpdate(value);\r\n }\r\n\r\n handleSliderChange = (event, value) => {\r\n if (this.props.readOnly) return;\r\n\r\n this.setState({ sliderValue: value }, () => {\r\n if (this.updateTimeout) {\r\n clearTimeout(this.updateTimeout);\r\n }\r\n this.updateTimeout = setTimeout(this.updateSliderValue, 500);\r\n });\r\n };\r\n\r\n updateSliderValue = () => {\r\n this.props.handleResponseUpdate(this.state.sliderValue);\r\n }\r\n\r\n renderLabels = (scaleConfig, classes) => {\r\n if (scaleConfig.minLabel && scaleConfig.maxLabel) {\r\n return (\r\n \r\n \r\n {choiceConfig.freetextChoiceLabel || translations?.freetextChoiceLabel}\r\n \r\n
\r\n )}\r\n />\r\n )}\r\n \r\n \r\n {scaleConfig.minLabel}\r\n \r\n \r\n {scaleConfig.maxLabel}\r\n \r\n
\r\n );\r\n }\r\n return null;\r\n }\r\n\r\n render() {\r\n const {\r\n classes, scaleConfig, response, disabled, navigation,\r\n } = this.props;\r\n\r\n const range = Math.abs(scaleConfig.max - scaleConfig.min);\r\n\r\n if (range >= 10) {\r\n const sliderValue = hasValue(this.state.sliderValue) ? this.state.sliderValue : response;\r\n const rangeStep = Math.ceil(range / 5);\r\n const marks = [];\r\n marks.push({ value: scaleConfig.min, label: scaleConfig.min });\r\n for (let value = rangeStep; value < scaleConfig.max; value += rangeStep) {\r\n marks.push({ value, label: value });\r\n }\r\n marks.push({ value: scaleConfig.max, label: scaleConfig.max });\r\n return (\r\n \r\n {this.renderLabels(scaleConfig, classes)}\r\n\r\n
\r\n );\r\n }\r\n\r\n const steps = [];\r\n for (let i = scaleConfig.min; i <= scaleConfig.max; i += scaleConfig.step) {\r\n steps.push(i);\r\n }\r\n\r\n const smallButtons = steps.length > 5;\r\n\r\n return (\r\n \r\n
\r\n \r\n {this.renderLabels(scaleConfig, classes)}\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nScaleResponse.propTypes = {\r\n navigation: PropTypes.object.isRequired,\r\n classes: PropTypes.object.isRequired,\r\n handleResponseUpdate: PropTypes.func.isRequired,\r\n scaleConfig: PropTypes.object.isRequired,\r\n response: PropTypes.number,\r\n disabled: PropTypes.bool,\r\n readOnly: PropTypes.bool,\r\n};\r\n\r\nScaleResponse.defaultProps = {\r\n response: null,\r\n disabled: false,\r\n readOnly: false,\r\n};\r\n\r\nexport default withStyles(styles)(with1dArrowNavigation(ScaleResponse));\r\n","import * as React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport {\r\n FormControlLabel, RadioGroup, Radio, Button, Input, Typography, makeStyles,\r\n} from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n choiceResponse: {\r\n border: `1px solid ${theme.palette.primary.main}`,\r\n padding: theme.spacing(2),\r\n backgroundColor: theme.palette.common.white,\r\n },\r\n formControlRoot: {\r\n },\r\n formControlLabel: {\r\n margin: theme.spacing(1, 0),\r\n flex: '1 1 auto',\r\n\r\n '$correct &': {\r\n color: theme.colors.green,\r\n },\r\n '$inCorrect &': {\r\n color: theme.colors.red,\r\n },\r\n },\r\n choiceButtonContainer: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n },\r\n choiceButton: {\r\n margin: theme.spacing(1, 2),\r\n },\r\n choiceFreetextInput: {\r\n border: `1px solid ${theme.palette.grey[200]}`,\r\n padding: theme.spacing(0, 1),\r\n },\r\n radio: {\r\n color: theme.colors.primary,\r\n '$correct &': {\r\n color: theme.colors.green,\r\n },\r\n '$inCorrect &': {\r\n color: theme.colors.red,\r\n },\r\n },\r\n correct: {\r\n color: `${theme.colors.green}`,\r\n },\r\n inCorrect: {\r\n color: `${theme.colors.red}`,\r\n },\r\n freetextLabel: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n freetextLabelText: {\r\n marginRight: theme.spacing(1),\r\n minWidth: 80,\r\n },\r\n}));\r\n\r\nconst SingleChoice = ({\r\n choiceConfig, selectedChoice, handleResponseUpdate, showScores, translations, question, disabled,\r\n}) => {\r\n const classes = useStyles();\r\n\r\n const isDisabled = disabled || showScores;\r\n\r\n const handleSingleSelectChange = answers => (event) => {\r\n const id = Number(event.target.value);\r\n const answer = answers.find(d => d.id === id) || { id, value: '' };\r\n\r\n handleResponseUpdate([answer]);\r\n };\r\n\r\n const handleSelectFreetextChange = freetextId => (event) => {\r\n handleResponseUpdate([{ id: Number(freetextId), score: 0, value: event.target.value }]);\r\n };\r\n\r\n const handleClickResponse = value => () => {\r\n handleResponseUpdate([value]);\r\n };\r\n\r\n const getScoreClass = (item) => {\r\n if (!showScores) {\r\n return null;\r\n }\r\n\r\n if (item.score > 0) {\r\n return classes.correct;\r\n }\r\n if (selectedChoice?.id === item.id) {\r\n return classes.inCorrect;\r\n }\r\n return null;\r\n };\r\n\r\n return (\r\n <>\r\n {question.type === 'ActionChoice' || choiceConfig?.showAsButtons ? (\r\n \r\n {steps.map((step, index) => (\r\n \r\n {index > 0 && }\r\n \r\n {step}\r\n \r\n \r\n ))}\r\n
\r\n \r\n {question.answers?.map(answer => (\r\n \r\n {answer.value}\r\n \r\n ))}\r\n
\r\n ) : (\r\n \r\n \r\n {question.answers?.map(item => (\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nSingleChoice.propTypes = {\r\n translations: PropTypes.object,\r\n handleResponseUpdate: PropTypes.func,\r\n question: PropTypes.object.isRequired,\r\n choiceConfig: PropTypes.object,\r\n selectedChoice: PropTypes.object,\r\n disabled: PropTypes.bool,\r\n showScores: PropTypes.bool,\r\n};\r\n\r\nSingleChoice.defaultProps = {\r\n choiceConfig: null,\r\n selectedChoice: null,\r\n disabled: false,\r\n translations: null,\r\n handleResponseUpdate: null,\r\n showScores: false,\r\n};\r\n\r\nexport default SingleChoice;\r\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 { makeStyles, useTheme } from '@material-ui/core/styles';\r\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\r\nimport classnames from 'classnames';\r\n\r\nimport {\r\n Typography, Table, TableHead, TableBody, TableRow, TableCell, Input, Hidden, IconButton, TextField,\r\n} from '@material-ui/core';\r\nimport { AddIcon } from '../../../../common/icons';\r\n// import { with2dArrowNavigation } from '../accessibility/ArrowNavigation';\r\nimport { hasValue } from '../../../objectUtils';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n backgroundColor: theme.palette.common.white,\r\n },\r\n desktopTable: {\r\n '&$fixedWidth': {\r\n overflowX: 'auto',\r\n paddingBottom: theme.spacing(4),\r\n },\r\n '&$fixedHeight': {\r\n overflowY: 'auto',\r\n height: 600,\r\n },\r\n },\r\n fixedWidth: {\r\n },\r\n fixedHeight: {\r\n\r\n },\r\n table: {\r\n tableLayout: 'fixed',\r\n\r\n '$fixedWidth &': {\r\n tableLayout: 'auto',\r\n width: 1200,\r\n },\r\n '$fixedHeight &': {\r\n tableLayout: 'auto',\r\n },\r\n },\r\n mobileTable: {\r\n\r\n },\r\n mobileRow: {\r\n marginBottom: theme.spacing(2),\r\n border: `1px solid ${theme.palette.grey[400]}`,\r\n backgroundColor: theme.palette.grey[200],\r\n },\r\n mobileRowHeader: {\r\n padding: theme.spacing(1),\r\n backgroundColor: theme.palette.primary.light,\r\n color: theme.palette.common.white,\r\n },\r\n mobileCell: {\r\n marginBottom: theme.spacing(2),\r\n padding: theme.spacing(1),\r\n },\r\n tableRow: {\r\n height: theme.spacing(4),\r\n },\r\n tableHeaderRow: {\r\n },\r\n tableHeaderCell: {\r\n backgroundColor: theme.palette.grey[200],\r\n border: 0,\r\n borderRight: `1px solid ${theme.palette.grey[200]}`,\r\n fontSize: '1.1em',\r\n color: theme.palette.grey[900],\r\n padding: `0 ${theme.spacing(1)}px`,\r\n overflowWrap: 'anywhere',\r\n\r\n '&:last-child': {\r\n borderRight: `1px solid ${theme.palette.grey[300]}`,\r\n padding: `0 ${theme.spacing(1)}px`,\r\n },\r\n\r\n '$fixedWidth &': {\r\n overflowWrap: 'normal',\r\n },\r\n '$fixedHeight &': {\r\n position: 'sticky',\r\n top: 0,\r\n zIndex: 50,\r\n },\r\n },\r\n rowHeaderCell: {\r\n backgroundColor: theme.palette.grey[200],\r\n },\r\n tableCell: {\r\n padding: `0 ${theme.spacing(1)}px`,\r\n paddingTop: theme.spacing(1),\r\n verticalAlign: 'top',\r\n borderRight: `1px solid ${theme.palette.grey[300]}`,\r\n\r\n '&:first-child': {\r\n borderLeft: `1px solid ${theme.palette.grey[300]}`,\r\n },\r\n '&:last-child': {\r\n padding: `0 ${theme.spacing(1)}px`,\r\n paddingTop: theme.spacing(1),\r\n },\r\n },\r\n multiQuestionCell: {\r\n },\r\n multiInput: {\r\n marginBottom: theme.spacing(0.5),\r\n },\r\n addRowContainer: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n },\r\n addRowButton: {\r\n marginTop: theme.spacing(1),\r\n },\r\n disabledReadonlyInput: {\r\n color: theme.palette.text.primary,\r\n },\r\n}));\r\n\r\n\r\nconst padRow = (row, length) => row.concat(Array(length).fill('')).slice(0, length);\r\n\r\nfunction TableResponse({\r\n tableConfig, response, disabled, handleResponseUpdate, translate, elementSettings, readOnly,\r\n}) {\r\n const theme = useTheme();\r\n const classes = useStyles();\r\n const isMobile = useMediaQuery(theme.breakpoints.down('xs'));\r\n const [multiTableValues, setMultiTableValues] = React.useState({});\r\n const [updateIndex, setUpdateIndex] = React.useState({});\r\n const updateAsyncTimer = React.useRef();\r\n const [responseState, setResponseState] = React.useState({});\r\n\r\n const fixedNumberOfRows = tableConfig?.rowHeaders?.length;\r\n\r\n const emptyRows = () => {\r\n if (fixedNumberOfRows) {\r\n if (response?.length >= fixedNumberOfRows) {\r\n return [];\r\n }\r\n return [...Array(fixedNumberOfRows).keys()].map(() => tableConfig.columnHeaders.map(() => ''));\r\n }\r\n\r\n if (isMobile) {\r\n if (!response || response.length === 0) {\r\n return [tableConfig.columnHeaders.map(() => '')];\r\n }\r\n return [];\r\n }\r\n\r\n return [tableConfig.columnHeaders.map(() => '')];\r\n };\r\n\r\n const addRow = () => {\r\n const currResponse = [...response || [], ...emptyRows()];\r\n const addedResponse = [...currResponse, ...[tableConfig.columnHeaders.map(() => '')]];\r\n\r\n handleResponseUpdate(addedResponse);\r\n };\r\n\r\n const handleTableCellChange = (rowIndex, cellIndex) => (event) => {\r\n if (readOnly) return;\r\n\r\n let prevResponse = response || [];\r\n if (rowIndex >= prevResponse.length) {\r\n prevResponse = [...prevResponse, ...emptyRows()];\r\n }\r\n\r\n handleResponseUpdate(prevResponse.map((row, ri) => (\r\n ri === rowIndex ? padRow(row, tableConfig.columnHeaders.length).map((cell, ci) => (\r\n ci === cellIndex ? event.target.value : cell\r\n )) : row\r\n )));\r\n\r\n // Fix for text-fields. To avoid loosing marker-position value is copied to internal state on first change.\r\n // textfield has prop value={this.state.freetextResponse || response?.freetextResponse || ''}\r\n setResponseState(prevState => ({ ...prevState, [`${rowIndex}-${cellIndex}`]: event.target.value }));\r\n };\r\n\r\n const handleTableMultiCellChange = (rowIndex, cellIndex, questionIndex, curr) => (event) => {\r\n if (readOnly) return;\r\n\r\n const val = event.target.value;\r\n setMultiTableValues(prev => ({\r\n ...prev,\r\n [`${rowIndex}-${cellIndex}`]: {\r\n ...curr,\r\n ...prev && prev[`${rowIndex}-${cellIndex}`],\r\n [questionIndex]: val,\r\n },\r\n }));\r\n setUpdateIndex({ rowIndex, cellIndex });\r\n };\r\n\r\n React.useEffect(() => {\r\n if (hasValue(updateIndex)) {\r\n clearTimeout(updateAsyncTimer.current);\r\n updateAsyncTimer.current = setTimeout(() => {\r\n handleTableCellChange(updateIndex.rowIndex, updateIndex.cellIndex)({\r\n target: { value: JSON.stringify(multiTableValues[`${updateIndex.rowIndex}-${updateIndex.cellIndex}`]) },\r\n });\r\n }, 200);\r\n }\r\n // Only fire on updateIndex-change\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [updateIndex]);\r\n\r\n if (!tableConfig?.columnHeaders) {\r\n return null;\r\n }\r\n\r\n const getCellValue = (rowIndex, cellIndex, questionIndex, cell) => (multiTableValues[`${rowIndex}-${cellIndex}`] && multiTableValues[`${rowIndex}-${cellIndex}`][questionIndex])\r\n || (cell && JSON.parse(cell)[questionIndex])\r\n || '';\r\n\r\n const renderCells = (ri, ci, cell, mobile) => (\r\n tableConfig.cellQuestions ? (\r\n \r\n \r\n {choiceConfig.freetextChoiceLabel || translations?.freetextChoiceLabel}\r\n \r\n
\r\n )}\r\n />\r\n )}\r\n \r\n \r\n {tableConfig.cellQuestions.map((q, qi) => (\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\nTableResponse.propTypes = {\r\n // navigation: PropTypes.object.isRequired, // with2dArrowNavigation\r\n translate: PropTypes.func.isRequired,\r\n handleResponseUpdate: PropTypes.func.isRequired,\r\n tableConfig: PropTypes.object,\r\n response: PropTypes.array,\r\n disabled: PropTypes.bool,\r\n readOnly: PropTypes.bool,\r\n elementSettings: PropTypes.object,\r\n};\r\n\r\nTableResponse.defaultProps = {\r\n response: null,\r\n disabled: false,\r\n readOnly: false,\r\n tableConfig: {},\r\n elementSettings: null,\r\n};\r\n\r\nconst mapStateToProps = state => ({\r\n translate: getTranslate(state.localize),\r\n});\r\n\r\n// export default connect(mapStateToProps)(with2dArrowNavigation(TableResponse));\r\nexport default connect(mapStateToProps)(TableResponse);\r\n","export const elementTypes = {\r\n html: 'Html',\r\n text: 'Text',\r\n audio: 'Audio',\r\n video: 'Video',\r\n image: 'Image',\r\n file: 'File',\r\n link: 'Link',\r\n form: 'Form',\r\n script: 'Script',\r\n reference: 'Reference',\r\n};\r\n\r\nexport const linkTypes = {\r\n internal: 'Internal',\r\n task: 'Task',\r\n module: 'Module',\r\n program: 'Program',\r\n file: 'File',\r\n url: 'ExternalPage',\r\n youtube: 'Youtube',\r\n vimeo: 'Vimeo',\r\n audio: 'Audio',\r\n video: 'Video',\r\n image: 'Image',\r\n};\r\n\r\nexport const formAnswerTypes = {\r\n freetext: 'Freetext',\r\n singleChoice: 'SingleChoice',\r\n multipleChoice: 'MultipleChoice',\r\n scale: 'Scale',\r\n table: 'Table',\r\n switch: 'Switch',\r\n action: 'Action',\r\n};\r\n\r\nexport const appRoles = {\r\n portalAdmin: 'PortalAdmin',\r\n organizationAdmin: 'OrganizationAdmin',\r\n patientAdmin: 'PatientAdmin',\r\n programAdmin: 'ProgramAdmin',\r\n userAdmin: 'UserAdmin',\r\n therapistAndCreator: 'TherapistAndCreator',\r\n therapist: 'Therapist',\r\n contentCreator: 'ContentCreator',\r\n user: 'User',\r\n contactPerson: 'ContactPerson',\r\n none: 'None',\r\n\r\n isTherapist: roles => roles?.reduce((prev, r) => prev\r\n || r === 'Therapist' || r === 'TherapistAndCreator' || r === 'PatientAdmin' || r === 'OrganizationAdmin' || r === 'PortalAdmin'\r\n , false),\r\n isEditor: roles => roles?.reduce((prev, r) => prev\r\n || r === 'ContentCreator' || r === 'TherapistAndCreator' || r === 'ProgramAdmin' || r === 'OrganizationAdmin' || r === 'PortalAdmin'\r\n , false),\r\n // eslint-disable-next-line no-use-before-define\r\n isLimitedPatientAccess: role => !(appRoleLevels[role] >= appRoleLevels[appRoles.therapist]),\r\n};\r\n\r\nexport const appRoleLevels = {\r\n [appRoles.portalAdmin]: 100,\r\n [appRoles.organizationAdmin]: 90,\r\n [appRoles.patientAdmin]: 60,\r\n [appRoles.programAdmin]: 50,\r\n [appRoles.userAdmin]: 40,\r\n [appRoles.therapistAndCreator]: 35,\r\n [appRoles.therapist]: 30,\r\n [appRoles.contentCreator]: 25,\r\n [appRoles.user]: 20,\r\n [appRoles.contactPerson]: 10,\r\n};\r\n\r\nexport const elementSizes = {\r\n default: 'Default',\r\n small: 'Small',\r\n medium: 'Medium',\r\n large: 'Large',\r\n};\r\n\r\nexport const loginLevels = {\r\n none: 0,\r\n key: 1,\r\n password: 2,\r\n twoFactor: 3,\r\n level4: 4,\r\n};\r\n\r\nexport const patientUserLevels = {\r\n none: 'None',\r\n anonymous: 'Anonymous',\r\n person: 'Person',\r\n patient: 'Patient',\r\n};\r\n\r\nexport const systemElementGroups = {\r\n main: 'Main',\r\n default: 'Default',\r\n app: 'App',\r\n therapist: 'Therapist',\r\n scheduled: 'Scheduled',\r\n consent: 'Consent',\r\n appointment: 'Appointment',\r\n};\r\n\r\nexport const scheduleRepeatPeriod = {\r\n day: 'Day',\r\n week: 'Week',\r\n month: 'Month',\r\n};\r\n\r\nexport const accessRoles = {\r\n none: 'None',\r\n read: 'Read',\r\n write: 'Write',\r\n owner: 'Owner',\r\n admin: 'Admin',\r\n isOwnPatient: role => role === 'Write' || role === 'Owner',\r\n hasWriteAccess: role => role === 'Write' || role === 'Owner' || role === 'Admin',\r\n};\r\n\r\nexport const logoutReasons = {\r\n tokenExpired: '910',\r\n idleTimeout: '911',\r\n changeRole: '10101',\r\n};\r\n\r\nexport const fileTypes = {\r\n file: 'File', // Any/Unknown..\r\n image: 'Image',\r\n audio: 'Audio',\r\n video: 'Video',\r\n document: 'Document',\r\n};\r\n\r\nexport const elementConditionStates = {\r\n none: 'None',\r\n visible: 'Visible',\r\n hidden: 'Hidden',\r\n accepted: 'Accepted',\r\n rejected: 'Rejected',\r\n collapsed: 'Collapsed',\r\n expanded: 'Expanded',\r\n};\r\n\r\nexport const sortDirection = {\r\n asc: 'asc',\r\n desc: 'desc',\r\n};\r\n\r\nexport const sortDataType = {\r\n default: 'default',\r\n number: 'number',\r\n date: 'date',\r\n};\r\n\r\nexport const patientFlagTypes = {\r\n criticalScore: 'CriticalScore',\r\n inactivePatient: 'InactivePatient',\r\n messageFollowup: 'MessageFollowup',\r\n responseFollowup: 'ResponseFollowup',\r\n};\r\n\r\nexport const sensorTypes = {\r\n unknown: 'Unknown',\r\n fitbit: 'Fitbit',\r\n garmin: 'Garmin',\r\n};\r\n\r\nexport const IdProviders = {\r\n youwell: 'Youwell',\r\n idPorten: 'IdPorten',\r\n};\r\n\r\nexport const loginTypes = {\r\n password: 'Password',\r\n idPorten: 'IdPorten',\r\n twoFactor: 'twoFactor',\r\n selfStart: 'SelfStart',\r\n};\r\n\r\nexport const freetextInputTypes = {\r\n default: 'Default',\r\n singleLineText: 'SingleLineText',\r\n email: 'Email',\r\n phone: 'Phone',\r\n number: 'Number',\r\n date: 'Date',\r\n dateAndTime: 'DateAndTime',\r\n time: 'Time',\r\n};\r\n\r\nexport const patientDialogChannels = {\r\n chat: 'YouwellChat',\r\n sms: 'Sms',\r\n};\r\n\r\nexport const patientPatchOperations = {\r\n addGroupMembership: 'AddGroupMembership',\r\n removeGroupMembership: 'RemoveGroupMembership',\r\n};\r\n\r\nexport const contentPatchOperations = {\r\n changeOwner: 'ChangeOwner',\r\n};\r\n\r\nexport const systemContentElementTypes = {\r\n default: 'Default',\r\n questionnaire: 'Questionnaire',\r\n bullseye: 'BullsEye',\r\n card: 'Card',\r\n box: 'Box',\r\n quizResponse: 'QuizResponse',\r\n bubbleChoice: 'BubbleChoice',\r\n routeSelection: 'RouteSelection',\r\n};\r\n\r\nexport const systemTaskLabels = {\r\n subtask: 'subtask',\r\n};\r\n\r\nexport const thresholdTypes = {\r\n lessThan: 'LessThan',\r\n moreThan: 'MoreThan',\r\n equals: 'Equals',\r\n none: 'None',\r\n};\r\n\r\nexport const workflowStatuses = {\r\n progress: 100,\r\n review: 300,\r\n ready: 500,\r\n\r\n parse: config => config?.map((item) => {\r\n const kv = item.split(':');\r\n return {\r\n id: Number(kv[0]),\r\n name: kv[1],\r\n };\r\n }) || [],\r\n};\r\n\r\nexport const contentElemenIdPrefix = 'ywE';\r\n\r\nexport const orgLicence = {\r\n None: 0,\r\n Trial: 5,\r\n Limited: 10,\r\n Unlimited: 100,\r\n};\r\n\r\nexport const systemProgramProfiles = {\r\n Default: 'Default',\r\n Empty: 'Empty',\r\n All: 'All',\r\n};\r\n\r\nexport const elementSettingKeys = {\r\n firstColWidth: '1st-col-width',\r\n};\r\n\r\nexport const taskSettingKeys = {\r\n exportLabel: 'export-label',\r\n};\r\n","import { textpart } from './htmlUtils';\r\n\r\nexport const findModule = (program, moduleId) => (program && moduleId ? program.modules.reduce((p, c) => (c.id === moduleId ? c : p), null) : null);\r\n\r\nexport const findTask = (program, moduleId, taskId) => (\r\n program && moduleId && taskId\r\n ? program.modules.reduce((p, module) => (module.id === moduleId\r\n ? module.tasks.reduce((pt, task) => (task.id === taskId ? task : pt), null)\r\n : p), null)\r\n : null\r\n);\r\n\r\nconst firstQuestionText = questions => (\r\n questions && questions.length > 0 ? textpart(questions[0].question) : null\r\n);\r\n\r\nconst firstHeaderOrText = (htmlContent, length = 50) => {\r\n const doc = new DOMParser().parseFromString(htmlContent, 'text/html');\r\n const t = doc.body.children[0]?.textContent || '';\r\n return t.length > length ? `${t.slice(0, length)}...` : t;\r\n};\r\n\r\nexport const getElementTitle = element => element.title\r\n || firstHeaderOrText(element.htmlContent)\r\n || firstQuestionText(element.questions)\r\n || '\\u00A0';\r\n","import { hasValue } from './objectUtils';\r\n\r\nexport const msInOneWeek = 1000 * 60 * 60 * 24 * 7;\r\nexport const msInOneDay = 1000 * 60 * 60 * 24;\r\nexport const minutesInOneDay = 60 * 24;\r\n\r\nexport const pad2 = number => (\r\n number < 10 ? `0${number}` : number\r\n);\r\n\r\n// Allow global isNaN to check for Invalid Date object type\r\n// eslint-disable-next-line no-restricted-globals\r\nexport const isDateObject = input => input?.getDate && !input.slice && !isNaN(input);\r\n\r\n// Get local datetime object from UTC-datetime string\r\nexport const getLocalDate = (dateString, inputIsUtc = true) => {\r\n if (!dateString) {\r\n return null;\r\n }\r\n\r\n if (isDateObject(dateString)) {\r\n return dateString; // dateString is actually Date\r\n }\r\n if (!dateString.slice) { // dateString is object or function..\r\n // eslint-disable-next-line no-console\r\n console.warn('Date-util: Invalid date object', dateString);\r\n return null;\r\n }\r\n\r\n const timeZonestring = inputIsUtc ? 'Z' : '';\r\n\r\n let date;\r\n if (dateString.slice(-1).toLowerCase() === 'z' || dateString.slice(-6, -5) === '+') {\r\n // datestring already contains Timezone-info -> create Date object\r\n date = new Date(dateString);\r\n } else if (dateString.includes('T')) {\r\n // full date and time string date. Set UTC timezone\r\n date = new Date(`${dateString}${timeZonestring}`);\r\n } else if (dateString.length === 10) { // yyyy-mm-dd\r\n // only date - Add timestamp and set UTC timezone\r\n date = new Date(`${dateString}T00:00:00${timeZonestring}`);\r\n } else if (dateString.length === 5) { // HH:MM\r\n // only time - Add date and set UTC timezone\r\n date = new Date(`1970-01-01T${dateString}${timeZonestring}`);\r\n } else {\r\n // unknown format - trying to parse directly\r\n date = new Date(`${dateString}${timeZonestring}`);\r\n }\r\n\r\n if (date && !date.getTime()) { // parsing has failed. invalid date\r\n // eslint-disable-next-line no-console\r\n console.warn('Date-util: Parsing datestring failed', dateString);\r\n return null;\r\n }\r\n\r\n return date;\r\n};\r\n\r\nexport const isoDateWithoutTimezone = date => `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;\r\n\r\nexport const isoDate = date => getLocalDate(date)?.toISOString().substring(0, 10);\r\n\r\nexport const today = (hour = 0, minute = 0, second = 0) => {\r\n const d = new Date();\r\n d.setHours(hour, minute, second, 0);\r\n return d;\r\n};\r\n\r\nexport const tomorrow = (hour = 0, minute = 0, second = 0) => {\r\n const d = new Date();\r\n d.setHours(hour, minute, second, 0);\r\n d.setDate(d.getDate() + 1);\r\n return d;\r\n};\r\n\r\nexport const yesterday = (hour = 0, minute = 0, second = 0) => {\r\n const d = new Date();\r\n d.setHours(hour, minute, second, 0);\r\n d.setDate(d.getDate() - 1);\r\n return d;\r\n};\r\n\r\nexport const isSameDate = (datetime1, datetime2) => {\r\n if (!datetime1 || !datetime2) return false;\r\n const d1 = getLocalDate(datetime1);\r\n const d2 = getLocalDate(datetime2);\r\n\r\n return d1.toLocaleDateString() === d2.toLocaleDateString();\r\n};\r\n\r\nexport const isToday = dateString => isSameDate(dateString, today());\r\n\r\nexport const isYesterday = dateString => isSameDate(dateString, yesterday());\r\n\r\nexport const isFuture = (dateString, includeToday) => {\r\n const date = getLocalDate(dateString);\r\n\r\n if (!date) {\r\n return false;\r\n }\r\n\r\n if (includeToday) {\r\n return date.getTime() >= today().getTime();\r\n }\r\n\r\n return date.getTime() > Date.now();\r\n};\r\n\r\nexport const addDays = (initialDate, days) => {\r\n const date = initialDate ? new Date(initialDate) : new Date();\r\n date.setDate(date.getDate() + days);\r\n return date;\r\n};\r\n\r\nexport const addMonths = (initialDate, months) => {\r\n const date = new Date(initialDate);\r\n date.setMonth(date.getMonth() + months);\r\n return date;\r\n};\r\n\r\nexport const fullDateTime = dateString => getLocalDate(dateString)?.toString();\r\n\r\nexport const timeOnly = (dateOrString, translate) => {\r\n const date = getLocalDate(dateOrString);\r\n\r\n if (!date) {\r\n return null;\r\n }\r\n return `${translate ? `${translate('time.at')} ` : ''}${pad2(date.getHours())}:${pad2(date.getMinutes())}`;\r\n};\r\n\r\nexport const getTimePartForInput = (datetime) => {\r\n if (!datetime) {\r\n return '';\r\n }\r\n if (datetime.length === 5 && datetime[2] === ':') {\r\n return datetime;\r\n }\r\n\r\n const date = new Date(datetime);\r\n return `${pad2(date.getHours())}:${pad2(date.getMinutes())}`;\r\n};\r\n\r\nexport const hasTime = (dateOrString) => {\r\n const date = getLocalDate(dateOrString);\r\n\r\n if (!date) {\r\n return false;\r\n }\r\n\r\n return date.getHours() !== 0 || date.getMinutes() !== 0;\r\n};\r\n\r\n// Get date or time-string from UTC-datetime string\r\nexport const timestamp = (dateOrString, translate) => {\r\n const date = getLocalDate(dateOrString);\r\n\r\n if (!date) {\r\n return null;\r\n }\r\n\r\n if (isToday(date)) {\r\n if (translate && date.getHours() === 0 && date.getMinutes() === 0) {\r\n return translate('time.today');\r\n }\r\n return `${translate ? translate('time.todayAt') : ''} ${pad2(date.getHours())}:${pad2(date.getMinutes())}`;\r\n }\r\n if (isYesterday(date)) {\r\n if (translate && date.getHours() === 0 && date.getMinutes() === 0) {\r\n return translate('time.yesterday');\r\n }\r\n return `${translate ? translate('time.yesterdayAt') : `${pad2(date.getDate())}.${pad2(date.getMonth() + 1)}`} ${pad2(date.getHours())}:${pad2(date.getMinutes())}`;\r\n }\r\n if (date.getFullYear() === new Date().getFullYear()) {\r\n if (date.getHours() === 0 && date.getMinutes() === 0) {\r\n return `${pad2(date.getDate())}.${pad2(date.getMonth() + 1)}`;\r\n }\r\n return `${pad2(date.getDate())}.${pad2(date.getMonth() + 1)} ${translate ? translate('time.at') : ''} ${pad2(date.getHours())}:${pad2(date.getMinutes())}`;\r\n }\r\n if (date.getHours() === 0 && date.getMinutes() === 0) {\r\n return `${pad2(date.getDate())}.${pad2(date.getMonth() + 1)}.${date.getFullYear()}`;\r\n }\r\n return `${pad2(date.getDate())}.${pad2(date.getMonth() + 1)}.${date.getFullYear()} ${translate ? translate('time.at') : ''} ${pad2(date.getHours())}:${pad2(date.getMinutes())}`;\r\n};\r\n\r\nexport const datestamp = (dateOrString) => {\r\n const date = getLocalDate(dateOrString);\r\n\r\n if (!date) {\r\n return null;\r\n }\r\n\r\n if (date.getFullYear() === new Date().getFullYear()) {\r\n return `${pad2(date.getDate())}.${pad2(date.getMonth() + 1)}`;\r\n }\r\n return `${pad2(date.getDate())}.${pad2(date.getMonth() + 1)}.${date.getFullYear()}`;\r\n};\r\n\r\nexport const longDate = (dateOrString, translate, alwaysIncludeYear = false) => {\r\n const date = getLocalDate(dateOrString);\r\n\r\n if (!date) {\r\n return null;\r\n }\r\n\r\n const year = alwaysIncludeYear || date.getFullYear() !== new Date().getFullYear() ? ` ${date.getFullYear()}` : '';\r\n\r\n return `${date.getDate()}. ${translate(`time.months.${date.getMonth()}`)}${year}`;\r\n};\r\n\r\nexport const shortDate = (dateOrString, translate) => {\r\n const date = getLocalDate(dateOrString);\r\n\r\n if (!date) {\r\n return null;\r\n }\r\n if (isToday(date)) {\r\n return translate('time.today');\r\n }\r\n if (isToday(addDays(date, 1))) {\r\n return translate('time.yesterday');\r\n }\r\n\r\n const year = date.getFullYear() === new Date().getFullYear() ? '' : ` ${date.getFullYear()}`;\r\n\r\n return `${date.getDate()}. ${translate(`time.months.${date.getMonth()}`)}${year}`;\r\n};\r\n\r\nexport const mondayZeroIndex = n => (((n - 1) % 7) + 7) % 7;\r\n\r\nexport const getTimeStringFromDayOfWeek = (day) => {\r\n const a = new Date();\r\n const dayOffset = (a.getDay() - day) * 1000 * 60 * 60 * 24 * -1;\r\n const d = new Date(a.getTime() + dayOffset);\r\n d.setHours(0, 0, 0, 0);\r\n return d.toISOString();\r\n};\r\n\r\nexport const dateWithOptionalTime = (dateOrString) => {\r\n const date = getLocalDate(dateOrString);\r\n\r\n if (!date) {\r\n return null;\r\n }\r\n\r\n if (date.getHours() === 0 && date.getMinutes() === 0) {\r\n return date.toLocaleDateString();\r\n }\r\n return date.toLocaleString().slice(0, -3);\r\n};\r\n\r\nexport const dateWithTimeIfToday = (dateOrString) => {\r\n const date = getLocalDate(dateOrString);\r\n\r\n if (!date) {\r\n return null;\r\n }\r\n\r\n // eslint-disable-next-line no-use-before-define\r\n if (!isToday(date)) {\r\n return date.toLocaleDateString();\r\n }\r\n return date.toLocaleString().slice(0, -3);\r\n};\r\n\r\n// returns string to set in input type=date\r\nexport const getTextfieldDateString = (dateOrString) => {\r\n const d = dateOrString ? getLocalDate(dateOrString) : new Date();\r\n return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;\r\n};\r\n\r\n// returns string to set in input type=datetime-local\r\nexport const getTextfieldDateTimeString = (dateOrString, setNoon = false) => {\r\n const d = dateOrString ? getLocalDate(dateOrString) : new Date();\r\n if (setNoon) {\r\n d.setHours(12, 0, 0, 0);\r\n }\r\n return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}T${pad2(d.getHours())}:${pad2(d.getMinutes())}`;\r\n};\r\n\r\n// returns string to save in database\r\nexport const getDateTimeSaveString = (date) => {\r\n let d;\r\n if (!date) {\r\n return null;\r\n }\r\n\r\n if (date.length === 10) {\r\n d = new Date(`${date}T00:00`);\r\n } else {\r\n d = new Date(date);\r\n }\r\n return d.toISOString();\r\n};\r\n\r\nexport const getWeekNumberFromDate = (dateIn) => {\r\n const date = dateIn ? new Date(Date.UTC(dateIn.getFullYear(), dateIn.getMonth(), dateIn.getDate())) : new Date();\r\n\r\n // Thursday in current week decides the year.\r\n date.setDate(date.getDate() + 3 - ((date.getDay() + 6) % 7));\r\n // January 4 is always in week 1.\r\n const week1 = new Date(date.getFullYear(), 0, 4);\r\n // Adjust to Thursday in week 1 and count number of weeks from date to week1.\r\n return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + ((week1.getDay() + 6) % 7)) / 7);\r\n};\r\n\r\nexport const getWeekNumber = (dateString) => {\r\n const date = getLocalDate(dateString);\r\n\r\n return getWeekNumberFromDate(date);\r\n};\r\n\r\nexport const getNumberOfWeeks = (startTime, endTime) => {\r\n if (!startTime || !endTime) {\r\n return 0;\r\n }\r\n\r\n return Math.floor(Math.abs(new Date(startTime) - new Date(endTime)) / msInOneWeek) || 0;\r\n};\r\n\r\nexport const getNumberOfWeeksCeiled = (startTime, endTime) => {\r\n if (!startTime || !endTime) {\r\n return 0;\r\n }\r\n\r\n return Math.ceil(Math.abs(new Date(startTime) - new Date(endTime)) / msInOneWeek) || 0;\r\n};\r\n\r\nexport const getNumberOfDays = (startTime, endTime) => {\r\n if (!startTime || !endTime) {\r\n return 0;\r\n }\r\n\r\n return Math.floor(Math.abs(new Date(startTime) - new Date(endTime)) / msInOneDay);\r\n};\r\n\r\nexport const getWeekStartDate = (weekNumber, year) => {\r\n const weekYear = year || new Date().getFullYear();\r\n const simple = new Date(weekYear, 0, 1 + (weekNumber - 1) * 7);\r\n const dow = simple.getDay();\r\n const ISOweekStart = simple;\r\n if (dow <= 4) ISOweekStart.setDate(simple.getDate() - simple.getDay() + 1);\r\n else ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay());\r\n return ISOweekStart;\r\n};\r\n\r\nexport const getNumberOfSeconds = (startTime, endTime) => {\r\n if (!startTime || !endTime) {\r\n return 0;\r\n }\r\n\r\n return Math.floor(Math.abs(new Date(startTime) - new Date(endTime)) / 1000);\r\n};\r\n\r\nexport const getNumberOfMinutes = (startTime, endTime) => getNumberOfSeconds(startTime, endTime) / 60;\r\n\r\nexport const getDatePart = (dateOrString) => {\r\n const d = getLocalDate(dateOrString);\r\n d.setHours(0, 0, 0, 0);\r\n return d;\r\n};\r\n\r\nexport const compareDates = (date, daysToAddForCompare) => {\r\n const date1 = getLocalDate(date) || { getTime: () => 0 };\r\n return date1.getTime() > addDays(Date.now(), daysToAddForCompare).getTime();\r\n};\r\n\r\nexport const getDateFormatted = (dateOrString, translateFunc) => {\r\n const d = getLocalDate(dateOrString);\r\n return `${translateFunc(`calendar.shortMonth${d.getMonth() + 1}`)}. ${d.getDate()}`;\r\n};\r\n\r\nexport const getMinsToMidnight = () => {\r\n const d = new Date();\r\n return (-d + d.setHours(24, 0, 0, 0)) / 6e4;\r\n};\r\n\r\nexport const getMillisecondsInADay = () => 1000 * 60 * 60 * 24;\r\n\r\nexport const hourCount = (minutes, translate, longLabels = false) => {\r\n if (!hasValue(minutes) || Number.isNaN(minutes) || minutes === 'NaN') return '';\r\n const minLabel = translate ? translate(longLabels ? 'time.minutes' : 'time.minutesShort') : 'm';\r\n if (minutes < 60) return `${Math.round(minutes % 60)} ${minLabel}`;\r\n\r\n const hours = Math.floor(minutes / 60);\r\n const hourLabel = translate ? translate(longLabels ? hours > 1 ? 'time.hours' : 'time.hour' : 'time.hoursShort') : 'h';\r\n if (minutes % 60 === 0) return `${hours} ${hourLabel}`;\r\n return `${hours} ${hourLabel} ${Math.round(minutes % 60)} ${minLabel}`;\r\n};\r\n","import { elementConditionStates, formAnswerTypes } from './constants';\r\nimport { hasValue, isEmpty } from './objectUtils';\r\nimport { calculateResponseScore } from './responseUtils';\r\n\r\n// Needed in IMMG? Set in app-config?\r\nconst dontUseConditionsFromHiddenElements = false;\r\n\r\nexport const ANY_ANSWER_CONDITION = 'ANY_ANSWER_CONDITION';\r\n\r\nconst getQuestionInCondition = (condition, currentTask, getProgramItem, getSpecificTaskResponses, currentElementId, parentElementId) => {\r\n // If question in condition is in a different task than currentTask we get this task here\r\n const taskInCondition = condition.taskId === currentTask.id || !condition.taskId // No taskId = current Task\r\n ? currentTask\r\n : getProgramItem ? getProgramItem(condition.taskId) : null;\r\n\r\n if (taskInCondition) {\r\n if (dontUseConditionsFromHiddenElements) {\r\n const elementInCondition = taskInCondition.contentElements\r\n .find(element => element.questions?.find(question => question.id === condition.questionId));\r\n\r\n if (elementInCondition && elementInCondition.id !== currentElementId && elementInCondition.id !== parentElementId) {\r\n // Dont include condition if elementInCondition is hidden\r\n\r\n // elementInCondition.id !== currentElementId\r\n // - don't check state if elementInCondition is same as currentElement -> Will get recursive loop..\r\n\r\n // elementInCondition.id !== parentElementId\r\n // - don't check state if elementInCondition is same as parentElement (looped conditions - exist in ADHD program..)\r\n // TODO - fix this.. Rewrite show/hide logic. Use separate label-logic for accepted/expanded/rejected/...\r\n\r\n // eslint-disable-next-line no-use-before-define\r\n const conditionForElementInCondition = getElementConditionState(elementInCondition, getSpecificTaskResponses, taskInCondition, getProgramItem, currentElementId);\r\n\r\n if (conditionForElementInCondition === elementConditionStates.hidden) {\r\n return null;\r\n }\r\n }\r\n }\r\n\r\n return taskInCondition.contentElements\r\n .reduce((prev, curr) => (\r\n prev != null ? prev : curr.questions?.find(question => question.id === condition.questionId)\r\n ), null);\r\n }\r\n return null;\r\n};\r\n\r\nconst meetsConditionForQuestion = (condition, questionResponse, currentTask, getProgramItem, getSpecificTaskResponses, currentElementId, parentElementId) => {\r\n const questionInCondition = getQuestionInCondition(condition, currentTask, getProgramItem, getSpecificTaskResponses, currentElementId, parentElementId);\r\n\r\n // If condition is a multiple- action or single choice question with no expected answers,\r\n // return true if no answers has been chosen for the question in the condition\r\n if (condition.questionId && !condition.expectedAnswers) {\r\n if (!questionInCondition) return false;\r\n\r\n if (questionInCondition.type === formAnswerTypes.multipleChoice\r\n || questionInCondition.type === formAnswerTypes.singleChoice) {\r\n return !questionResponse?.response?.choiceResponse?.length;\r\n }\r\n }\r\n\r\n if (!questionResponse) {\r\n // If question in the condition is one of the following:\r\n // - A switch toggle question\r\n // - An action question with toggle\r\n // - A scale/action scale\r\n // and the condition is \"inactive\" (for toggle questions) and \"min = 0\" for scale questions,\r\n // and we don't have a response for the question we return true.\r\n // Toggle is false = condition is met.\r\n // Scale is 0 = condition is met.\r\n // User has to toggle question on and off for questionResponse to be set.\r\n // User has to explicitly set scale to 0 for questionResponse to be set.\r\n if (questionInCondition) {\r\n if (questionInCondition.type === formAnswerTypes.switch) {\r\n return condition?.scoreMin === 0 && condition?.scoreMax === 0;\r\n }\r\n\r\n if (questionInCondition.type === formAnswerTypes.action) {\r\n return condition?.scoreMin === 0 && condition?.scoreMax === 0;\r\n }\r\n\r\n if (questionInCondition.type === formAnswerTypes.scale) {\r\n return condition?.scoreMin === 0;\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n if (condition.expectedAnswers != null && condition.expectedAnswers.length > 0) {\r\n // If question in condition is hidden questionInCondition will be null and we return false.\r\n if (questionInCondition) {\r\n if (condition.expectedAnswers.length === 1 && condition.expectedAnswers[0] === ANY_ANSWER_CONDITION) {\r\n return questionResponse.response?.choiceResponse?.length > 0;\r\n }\r\n\r\n return questionResponse.response?.choiceResponse?.some(c => condition.expectedAnswers.filter(d => d === c.value).length > 0) || false;\r\n }\r\n return false;\r\n }\r\n\r\n if (hasValue(condition.scoreMin) || hasValue(condition.scoreMax)) {\r\n const score = calculateResponseScore(questionResponse.response);\r\n return hasValue(score)\r\n && ((isEmpty(condition.scoreMin) || score >= condition.scoreMin)\r\n && (isEmpty(condition.scoreMax) || score <= condition.scoreMax)\r\n );\r\n }\r\n\r\n return true;\r\n};\r\n\r\nconst meetsCondition = (condition, responsesForTaskInCondition, currentTask, getProgramItem, getSpecificTaskResponses, currentElementId, parentElementId) => {\r\n if (condition.questionId) {\r\n const responseForQuestion = responsesForTaskInCondition && responsesForTaskInCondition[condition.questionId];\r\n return meetsConditionForQuestion(condition, responseForQuestion, currentTask, getProgramItem, getSpecificTaskResponses, currentElementId, parentElementId);\r\n }\r\n\r\n if (condition.subtotalId) {\r\n const responseForSubtotal = responsesForTaskInCondition && responsesForTaskInCondition[condition.subtotalId];\r\n return meetsConditionForQuestion(condition, responseForSubtotal, currentTask, getProgramItem, getSpecificTaskResponses, currentElementId, parentElementId);\r\n }\r\n\r\n if (condition.ifAllOthersAreHidden) {\r\n return condition.allOthersAreHidden;\r\n }\r\n\r\n // Condition is met if any respons on task\r\n return hasValue(responsesForTaskInCondition);\r\n};\r\n\r\nconst checkConditions = (elementState, getSpecificTaskResponses, currentTask, getProgramItem, currentElementId, parentElementId) => {\r\n if (!elementState.conditions?.length) {\r\n return true; // default true if no conditions\r\n }\r\n\r\n return elementState.conditions.reduce((prev, curr) => {\r\n if (!prev) {\r\n // all conditions must be satisfied, no need to check the rest..\r\n return false;\r\n }\r\n\r\n // if no taskId is specified, assume current task\r\n const responsesForTaskInCondition = getSpecificTaskResponses(curr.taskId || currentTask.id);\r\n return meetsCondition(curr, responsesForTaskInCondition, currentTask, getProgramItem, getSpecificTaskResponses, currentElementId, parentElementId);\r\n }, true);\r\n};\r\n\r\n// eslint-disable-next-line arrow-body-style\r\nexport const getElementConditionState = (element, getSpecificTaskResponses, currentTask, getProgramItem, parentElementId) => {\r\n return element?.elementStates?.reduce((prev, curr) => {\r\n if (prev) { return prev; } // returns first condition that matches\r\n const isMet = checkConditions(curr, getSpecificTaskResponses, currentTask, getProgramItem, element.id, parentElementId);\r\n return isMet ? curr.state : null;\r\n }, null);\r\n};\r\n\r\nexport const updateAllOthersAreHiddenProperties = (currentTask, getSpecificTaskResponses, getProgramItem) => {\r\n if (!getSpecificTaskResponses) {\r\n return;\r\n }\r\n // Get elements with an element state which has a condition with ifAllOthersAreHidden === true\r\n const elementsWithAllOthersAreHiddenCondition = currentTask.contentElements?.filter(\r\n e => e.elementStates?.some(s => s?.conditions?.some(c => c.ifAllOthersAreHidden)),\r\n );\r\n\r\n if (elementsWithAllOthersAreHiddenCondition) {\r\n elementsWithAllOthersAreHiddenCondition.forEach((element) => {\r\n // Get the elementState which contains a condition with ifAllOthersAreHidden === true\r\n const elementState = element.elementStates?.find(\r\n state => state?.conditions?.some(c => c.ifAllOthersAreHidden));\r\n\r\n // Get the condition with ifAllOthersAreHidden === true\r\n const condition = elementState?.conditions?.find(c => c.ifAllOthersAreHidden);\r\n\r\n // The condition could be \"if all elements are hidden in another task than the current task\"\r\n // so we get the task in the condition\r\n const taskInCondition = condition?.taskId === currentTask.id\r\n ? currentTask\r\n : getProgramItem ? getProgramItem(condition.taskId) : null;\r\n\r\n // Get all elements in the task in the condition wich do not have a ifAllOthersAreHidden condition\r\n const allOtherElements = taskInCondition?.contentElements?.filter(\r\n e => !e.elementStates?.some(s => s?.conditions?.some(c => c.ifAllOthersAreHidden)),\r\n );\r\n\r\n if (allOtherElements\r\n .every(e => getElementConditionState(e, getSpecificTaskResponses, currentTask, getProgramItem) === elementConditionStates.hidden)) {\r\n // All other elements are currently hidden\r\n condition.allOthersAreHidden = true;\r\n } else {\r\n // All other elements are currently not hidden\r\n condition.allOthersAreHidden = false;\r\n }\r\n });\r\n }\r\n};\r\n","import Cookie, { CookieNames } from './Cookie';\r\nimport apiUrls from './apiUrls';\r\nimport { hasValue } from './objectUtils';\r\n\r\nconst HTTP_STATUS_CODES = {\r\n Unauthorized: 401,\r\n Forbidden: 403,\r\n NotFound: 404,\r\n TooManyRequests: 429,\r\n};\r\n\r\nconst YOUWELL_ERROR_CODES = {\r\n ElementNotFound: 1078,\r\n};\r\n\r\nexport const VERSION_EXPIRED = 'APP/VERSION_EXPIRED';\r\nexport const PAGE_NOTFOUND = 'APP/PAGE_NOTFOUND';\r\n\r\nconst appSettings = {};\r\n\r\nexport const setAppVersion = (version) => {\r\n appSettings.version = version;\r\n};\r\n\r\nclass FetchError extends Error {\r\n constructor(url, status, data) {\r\n super(data);\r\n this.url = url;\r\n this.status = status;\r\n\r\n if (!data) {\r\n this.errorCode = status;\r\n } else {\r\n try {\r\n const json = JSON.parse(data);\r\n this.errorCode = json.errorCode;\r\n } catch (e) {\r\n this.errorCode = status;\r\n }\r\n }\r\n }\r\n}\r\n\r\nexport const handleErrors = dispatch => (response) => {\r\n if (!response.ok) {\r\n return response.text().then(data => Promise.reject(new FetchError(response.url, response.status, data)));\r\n }\r\n\r\n if (dispatch) {\r\n const version = response && response.headers && response.headers.get('X-Portal-Version');\r\n if (version && version !== appSettings.version) {\r\n dispatch({ type: VERSION_EXPIRED, previous: appSettings.version, newAvailableVersion: version });\r\n }\r\n }\r\n return Promise.resolve(response);\r\n};\r\n\r\nexport const json = response => (response.status === 204 ? response.text() : response.json());\r\n\r\nexport const text = response => response.text();\r\n\r\nexport const blob = (response) => {\r\n const disposition = response.headers.get('content-disposition');\r\n const contentType = response.headers.get('content-type');\r\n const filenameValues = disposition && disposition.match(/filename[^;=\\n]*=((['\"]).*?\\2|[^;\\n]*)/);\r\n const filename = filenameValues && filenameValues[1];\r\n\r\n return response.blob().then(blobData => Promise.resolve({ blobData, filename, contentType }));\r\n};\r\n\r\nexport const jsonHeader = {\r\n Accept: 'application/json',\r\n 'Content-Type': 'application/json',\r\n};\r\n\r\nexport const getErrorMessageOrKey = (error) => {\r\n if (!error) {\r\n return '901';\r\n }\r\n if (error.message === 'Failed to fetch') {\r\n return '920';\r\n }\r\n\r\n return error instanceof Error ? (error.errorCode && error.errorCode.toString()) || error.message || '903' : '902';\r\n};\r\n\r\nexport const dispatchError = (dispatch, type, options, requestId, error, onUnauthorized) => {\r\n const err = error?.error || error?.errorCode;\r\n\r\n if (err === HTTP_STATUS_CODES.Unauthorized) {\r\n dispatch({\r\n type, options, requestId, tokenExpired: true,\r\n }); // Not sending error with REQUEST_FAILED dispatch\r\n if (onUnauthorized) {\r\n onUnauthorized();\r\n }\r\n } else if (err === HTTP_STATUS_CODES.TooManyRequests) {\r\n dispatch({\r\n type, options, requestId, error: '921',\r\n });\r\n } else if (options?.isPage && (err === YOUWELL_ERROR_CODES.ElementNotFound || err === HTTP_STATUS_CODES.NotFound)) {\r\n dispatch({\r\n type, options, requestId, tokenExpired: true,\r\n }); // Not sending error with REQUEST_FAILED dispatch\r\n dispatch({ type: PAGE_NOTFOUND });\r\n } else {\r\n const errorMessageKey = getErrorMessageOrKey(error);\r\n\r\n dispatch({\r\n type, options, requestId, error: errorMessageKey,\r\n });\r\n }\r\n};\r\n\r\nexport const downloadBlobAsFile = (filename, contentType, blobData) => {\r\n // It is necessary to create a new blob object with mime-type explicitly set\r\n // otherwise only Chrome works like it should\r\n const newBlob = new Blob([blobData], { type: contentType });\r\n\r\n // IE doesn't allow using a blob object directly as link href\r\n // instead it is necessary to use msSaveOrOpenBlob\r\n if (window.navigator && window.navigator.msSaveOrOpenBlob) {\r\n window.navigator.msSaveOrOpenBlob(newBlob, filename);\r\n return;\r\n }\r\n\r\n // For other browsers:\r\n // Create a link pointing to the ObjectURL containing the blob.\r\n const data = window.URL.createObjectURL(newBlob);\r\n const link = document.createElement('a');\r\n link.href = data;\r\n link.download = filename;\r\n link.click();\r\n setTimeout(() => {\r\n // For Firefox it is necessary to delay revoking the ObjectURL\r\n window.URL.revokeObjectURL(data);\r\n }, 100);\r\n};\r\n\r\n// This prevents multiple simultaneous calls to `/refreshToken`\r\nlet refreshPromise = null;\r\nconst withRefreshToken = async (fetch, refreshUrl) => {\r\n if (refreshPromise == null) {\r\n refreshPromise = fetch(`${apiUrls.baseUrl}/${refreshUrl}`, {\r\n headers: jsonHeader,\r\n method: 'POST',\r\n });\r\n }\r\n const result = await refreshPromise;\r\n refreshPromise = null;\r\n return result;\r\n};\r\n\r\nconst fetchWithDefaults = async (url, { headers, ...options }) => fetch(url, {\r\n headers: {\r\n ...headers,\r\n 'X-CSRF-TOKEN': Cookie.getValue(CookieNames.csrf),\r\n },\r\n credentials: 'include',\r\n method: 'GET',\r\n ...options,\r\n});\r\n\r\nexport const fetchWithRefresh = async (dispatch, url, options) => {\r\n const response = await fetchWithDefaults(url, options);\r\n\r\n if (response.status === HTTP_STATUS_CODES.Unauthorized) {\r\n if (response.headers.has('X-REFRESH-TOKEN')) {\r\n const refresh = await withRefreshToken(fetchWithDefaults, response.headers.get('X-REFRESH-TOKEN'));\r\n\r\n if (refresh.ok) {\r\n return fetchWithDefaults(url, options);\r\n }\r\n }\r\n\r\n // handleCatch->dispatchError() is always called after this, so maybe this redirect should be there?\r\n // dispatch(push(`/logout/${logoutReasons.tokenExpired}`));\r\n }\r\n return response;\r\n};\r\n\r\nexport const mapToQueryString = requestParams => Object.keys(requestParams).reduce((prev, key) => (hasValue(requestParams[key]) ? `${prev || '?'}${key}=${requestParams[key]}&` : prev), '');\r\n","export const us = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAWCAYAAAChWZ5EAAABT0lEQVRIS2PMFlaJ3SwbPO8dqwgLAwgwM4Ephr//IDQRfCYONobqI7kQ9cSDl///M6QyyhmU/37LKAixnEzAyM7KUHummBzdLxl5TLv////zl2HnvBQGRkYGhpiGC2CDFtcbEM1nZmNhODXXgiQHTJm3FKwe7oBd81MYGBkYGKKhDljSYEA0n5mVheHUPHIdYNH7///P3wxi8iYk+xzmZVZudoZtpyJJCoG1959AQwDNAaT4HGYjGzc7w1ayHTCaBkbTwGgaQEsDJGVmqGKKygE+h8n///34xSAhZ8zA8J+BgYmNGVwC/v39l2g+Oy8Hw/q9gSS5HV4QNU2c+5+dnY0hNTqUJAMoVQyvCwbcAZ0soIBnYAhWlKHUUyTph0fBgDtgwKNgwB3QycLwgoGBQZykCKSe4meMHcwMvoyMDHMYGBjEqGcuUSY9+/+fIQMA7YEh8yRPGe0AAAAASUVORK5CYII=';\r\nexport const no = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAzUlEQVRIS2Ocyszg+5+RYTYDA4M4AxbwrncuWHTSitsosnkRqmC+UHEyNm3EiL1k/M+QyjiFheEFLstBptDQASDjX4Ic8B/ECmVjwepqtucfweIGaftR5C/McgTzf0nyE+NbDDWrf/0Bi406YDQEBj4EmibOBeeC3IQIvKkZVy4gKwswMDBMXrACkgsG3AEilhXgEOCWsyHXM2Tp+/roCCQERh0w4CEw4IlwwB0wWhuOhsBoCAxoo/Q/wzNGaLN8DgMDgxhdm+UgyxkYMgAjmNy/ZTS38QAAAABJRU5ErkJggg==';\r\nexport const en = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAG70lEQVRYR+2Xe1BU9R7AP2d32WV5LAihSOADUUADbjrKJavR0SvqVOggWr5Kr4boTXwNamVkTVpcGB9dKjVresxV6uarUpTCxuZGt7naFUUPig9YDJV4wy7LPs6d3zlbSFM3/KPrP31nds45u7/v9/c53+dvJe6wSHd4f34HEB7QAybv9f8ZETfgEAB9Gt77oLHP7HQknQ5Zvk5BQTFW600v161MQkdPcXE2l6c8hmQQ7KC43UQf3sPkydsAJ+DzkxdxEBkzgJULRhN+ZB/NZd8QMnsWIXMzQgTAoOops64EzssgcPJEDH2CsNudlJaeo6LiGqDzfoRNDSAnZxI3/1qIpBe/geJR6LtmKXl5xwAXYPACeNTriJGDeHCgGc+J4zi73FimTMI4KApJkgYLgFjrP7+VgyrLaa+qJnjGNMz3JqiKp07VcPDgKdrabUiKD4rkRkJPQUEG363OBYMBFAU8HiLyn2fVqg+RBIAkAJz4Bwcxbeo9DG+5SvPhY/iMGE6fGWnoAgNoaLRxV6h/nAqQMW+3nLvmT0Rf/pbGki/wu38swemPIBl9uFnfRtHefyHLtV5PGCgsnE3tX9Yh6bU3FSGI/Ntmli37uzcEEJs0hJljI/D/rJiWi1cISp9G4Pix6vrz5+vYsuUYu3Y9oQGMHbtJHp0czR8fiGNquAv73iJcgRZC58/GNDQaj6Jw6OB/OHTo34CRt956HOvCFd054HET9eZWFi58B3QuHp6eTGpQO21FH+IJ66faMQ6KxOn2sP+jk5SVVVFVVc8nn2RrAMnJm+WEhP60trYxLCmGrLQ4/PftpensefrMm0PQQ5NU8pMnr5KXV0JR0WKqH80EbxLidjNwzw5mzdrFyuzxJF78mvrDxQSmTiFk/qPquhs32igs/JzKSisWi4Xa2haRzBrAqFHPyzExfWlv7xSVgTkojCVPJPOH2tO0fLQf/5QUQhfNx9Av7MfsvvLQHPDxJpvLzeCP38f9fQMNm/LpqLYSlpVJwMQHcHkUTnxRyY4dx+noaFU9GBDgS319C6Wl6zWApKRcOSIimI6Orh7lk7NuKpNi/LBXVWEaGoNP5N3ofEXLgEvjpiN5ARS3iyGl+3FcuoLjUhV+947EEBaqrvv0yFnyXi7uYdff30hzcydlZWs1AEVR5NvtQBfGpCLpu/vAsG+O3q4JUYYawPnYFFnyM6N0OjQjkqSV1w/3t5oW30sSko+32XifFZerW+eXUH7QNRnB6SLu7AkvwLD7ZNFvFKfoYr0UAflTsN6qCni9nviKLzWAc0PGyJ72jtsD6OVmP7dMeE8fFEj8ha81gPLwOJl2O6obeyV6dL5G70rNEx41fKJV/7pIBgNSYAAJdRUagNvtlnU6ra/3VsrNA37MAwGeaKvuraoG7PGg1+s1gOCgp+QuJ3R19fTAzjfnsuDx+1QFxemi87woFh3mxOGUG+9GMmpeELmT6BCtGjwdNjWZHTXV+EZF8c6nlTy56P0ecEajAaNRorl5uwbg758pK4oOh0MAdGE0+rJ58wwyl4zD12Sg7bMvqV60DD+LH4OOHUAXHk65T4Q6K1DELHCR6BCTU5Ouy1exZq/HVnqcuzZu4IAlkbVP78PW3KiOeJPJgF6v0Nb2hgZgMmXKer0Bu72F2NiBvPvunxk9erBq7MamLdQ9u4EBs9I5PXMpE9LfxuN5g9P6/hqA8IDLRZLzO3S6JZSUZDNhQrw6Ies25nH9xReImp5GzdK1LHiuhDNl5ZjNFjweF52dOzUAg2GBbDTqSEsbw9Zts+kbFkDXVSvW5Tk4io8SuSmXPcGjWJWzF1uTE0XZwWldeE8AVx2SlInJ1EVe3lyWL5+gwrUcLMa6bCUBZh+Mefk8c7yFD3Z/jtPZhdP5tgZgsSyW8/Pnsnjxg6pS8z8+pubJpwgOD0H30is8XdLIe6+LdipC5Pc/AcAmOhkZGSls3z6H8HALrvoGrFmrsB04RNSLz7A/8n5Wry+i4dpWDeCrr87JKSnx0OnAumYDTYWvM2BFFifHzWTZC0epPCWSz+yd9cZfARDlKOaFjejoCF57bT6pqSPUF/u+cDfXVq0j4uGJnJuxgHGPpWoATU1NsslahzVrJbraGkJefolt1QFsLziCu9OuTjBveqn3ra3bOBMU0yMECU0XsViy1WmqAQhxIso7K2s8z+U+gtnXB/vpCmoyV9B2oYrRTVdVgJiLBYUXr2/cRED8UOxrnmX1zlOUlZz0bnxrf9AOnI2NWzgbGtsD4J56mZCQlWoVdQOrhalCjRwZw6uvziE+vj8em5263FdI2L19qADoB4hDYPew71G1v9lDPXBGAAh/Bf7MGfw329lrWMSq7fe/ZnfcA/8FQrvAmhBApt4AAAAASUVORK5CYII=';\r\n\r\nexport default { no, us, en };\r\n","// Logic adapted from CKEditor\r\n// https://github.com/ckeditor/ckeditor5-media-embed\r\n\r\n// const oembedRegex = /\r\n \r\n
\r\n
\r\n \r\n {tableResponses?.map((row, ri) => (\r\n // eslint-disable-next-line react/no-array-index-key\r\n
\r\n \r\n
\r\n ))}\r\n\r\n {!fixedNumberOfRows && !readOnly && (\r\n \r\n \r\n {tableConfig.rowHeaders\r\n ? tableConfig.rowHeaders[ri]\r\n : `${ri + 1}.`\r\n }\r\n \r\n
\r\n {row.map((cell, ci) => (\r\n // eslint-disable-next-line react/no-array-index-key\r\n \r\n
\r\n ))}\r\n \r\n \r\n {`${tableConfig.columnHeaders[ci]}:`}\r\n \r\n
\r\n {renderCells(ri, ci, cell, true)}\r\n \r\n \r\n \r\n
\r\n )}\r\n\r\n <\\/figure>/g;\r\nconst imgRegex = /![]()
/g;\r\nconst srcRegex = /src=\"([^\"]*)\".*?/;\r\nconst internalLinkRegex = /]*>(.*?)<\\/a>/g;\r\nconst elementIdRegex = /data-elementid=\"([^\"]*)\".*?/;\r\nconst tableFigureRegex = /<\\/figure>/g;\r\nconst tableRegex = //g;\r\nconst firstStyleWidthRegex = /style=\"[^\"]*width:([^;]*);\"/;\r\nconst styleRegex = /style=\"([^\"]*)\"/;\r\n\r\nconst videoProviders = [\r\n {\r\n name: 'dailymotion',\r\n url: /^dailymotion\\.com\\/video\\/(\\w+)/,\r\n html: url => '![]()
{\r\n const match = html.match(tableFigureRegex);\r\n\r\n if (!match) {\r\n return html;\r\n }\r\n let replaced = html;\r\n\r\n for (let m = 0; m < match.length; m++) {\r\n const figureStyleMatch = match[m].match(firstStyleWidthRegex);\r\n\r\n if (figureStyleMatch) {\r\n const width = figureStyleMatch[1];\r\n const tableMatch = match[m].match(tableRegex);\r\n if (tableMatch) {\r\n const existingTableStyle = tableMatch[0].match(styleRegex);\r\n\r\n let tableReplaced = match[m].replace(firstStyleWidthRegex, figureStyleMatch[0].replace(`width:${width};`, ''));\r\n if (existingTableStyle) {\r\n tableReplaced = tableReplaced.replace(existingTableStyle[1], `${existingTableStyle[1]};width:${width};\" `);\r\n } else {\r\n tableReplaced = tableReplaced.replace(' {\r\n const match = html.match(internalLinkRegex);\r\n\r\n if (!match) {\r\n return html;\r\n }\r\n let replaced = html;\r\n\r\n for (let m = 0; m < match.length; m++) {\r\n const idMatch = match[m].match(elementIdRegex);\r\n if (idMatch) {\r\n const elementId = idMatch[1]?.trim();\r\n\r\n const withAction = match[m].replace(idMatch[0], `onclick=\"__clickInternalLink('${elementId}')\"`);\r\n replaced = replaced.replace(match[m], withAction);\r\n }\r\n }\r\n\r\n return replaced;\r\n};\r\n\r\nexport const replaceEmbedContent = (html, addNoContextForImages = false) => {\r\n let replaced = replaceVideo(html);\r\n if (addNoContextForImages) {\r\n replaced = addNoContextMenu(html);\r\n }\r\n replaced = fixTableWidthLayout(replaced);\r\n replaced = replaceInternalLinks(replaced);\r\n return replaced;\r\n};\r\n\r\nexport const isEmptyHtml = html => !html || html.trim() === '
'\r\n + `'\r\n + '
'\r\n ,\r\n },\r\n {\r\n name: 'youtube',\r\n url: [\r\n /^youtube\\.com\\/watch\\?v=([\\w-]+)/,\r\n /^youtube\\.com\\/v\\/([\\w-]+)/,\r\n /^youtube\\.com\\/embed\\/([\\w-]+)/,\r\n /^youtu\\.be\\/([\\w-]+)/,\r\n ],\r\n html: url => ''\r\n + `'\r\n + '
'\r\n ,\r\n },\r\n {\r\n name: 'vimeo',\r\n url: [\r\n /^vimeo\\.com\\/(\\d+)/,\r\n /^vimeo\\.com\\/[^/]+\\/[^/]+\\/video\\/(\\d+)/,\r\n /^vimeo\\.com\\/album\\/[^/]+\\/video\\/(\\d+)/,\r\n /^vimeo\\.com\\/channels\\/[^/]+\\/(\\d+)/,\r\n /^vimeo\\.com\\/groups\\/[^/]+\\/videos\\/(\\d+)/,\r\n /^vimeo\\.com\\/ondemand\\/[^/]+\\/(\\d+)/,\r\n /^player\\.vimeo\\.com\\/video\\/(\\d+)/,\r\n ],\r\n html: url => ''\r\n + `'\r\n + '
'\r\n ,\r\n },\r\n // {\r\n // name: 'spotify',\r\n // url: [\r\n // /^open\\.spotify\\.com\\/(artist\\/\\w+)/,\r\n // /^open\\.spotify\\.com\\/(album\\/\\w+)/,\r\n // /^open\\.spotify\\.com\\/(track\\/\\w+)/,\r\n // ],\r\n // html: url => ''\r\n // + `'\r\n // + '
'\r\n // ,\r\n // },\r\n // {\r\n // name: 'instagram',\r\n // url: /^instagram\\.com\\/p\\/(\\w+)/,\r\n // },\r\n // {\r\n // name: 'twitter',\r\n // url: /^twitter\\.com/,\r\n // },\r\n // {\r\n // name: 'googleMaps',\r\n // url: /^google\\.com\\/maps/,\r\n // },\r\n // {\r\n // name: 'flickr',\r\n // url: /^flickr\\.com/,\r\n // },\r\n // {\r\n // name: 'facebook',\r\n // url: /^facebook\\.com/,\r\n // },\r\n];\r\n\r\n/**\r\n * Tries to match `url` to `pattern`.\r\n *\r\n * @param {String} url The URL of the media.\r\n * @param {RegExp} pattern The pattern that should accept the media URL.\r\n * @returns {Array|null}\r\n */\r\nconst getUrlMatches = (url, pattern) => {\r\n // 1. Try to match without stripping the protocol and \"www\" subdomain.\r\n let match = url.match(pattern);\r\n\r\n if (match) {\r\n return match;\r\n }\r\n\r\n // 2. Try to match after stripping the protocol.\r\n let rawUrl = url.replace(/^https?:\\/\\//, '');\r\n match = rawUrl.match(pattern);\r\n\r\n if (match) {\r\n return match;\r\n }\r\n\r\n // 3. Try to match after stripping the \"www\" subdomain.\r\n rawUrl = rawUrl.replace(/^www\\./, '');\r\n match = rawUrl.match(pattern);\r\n\r\n if (match) {\r\n return match;\r\n }\r\n\r\n return null;\r\n};\r\n\r\nexport const detectPattern = (patterns, url) => {\r\n for (let i = 0; i < patterns.length; i++) {\r\n const match = getUrlMatches(url, patterns[i]);\r\n\r\n if (match) {\r\n return match;\r\n }\r\n }\r\n return null;\r\n};\r\n\r\nconst replaceVideo = (html) => {\r\n const match = html.match(oembedRegex);\r\n\r\n if (!match) {\r\n return html;\r\n }\r\n\r\n let replaced = html;\r\n\r\n for (let m = 0; m < match.length; m++) {\r\n const urlMatch = match[m].match(urlRegex);\r\n const url = urlMatch && urlMatch[1].trim();\r\n\r\n for (let i = 0; i < videoProviders.length; i++) {\r\n let pattern = videoProviders[i].url;\r\n\r\n if (!Array.isArray(pattern)) {\r\n pattern = [pattern];\r\n }\r\n\r\n const patternMatch = detectPattern(pattern, url);\r\n if (patternMatch) {\r\n replaced = replaced.replace(match[m], videoProviders[i].html(patternMatch[1]));\r\n }\r\n }\r\n }\r\n\r\n return replaced;\r\n};\r\n\r\nconst addNoContextMenu = (html) => {\r\n const match = html.match(imgRegex);\r\n\r\n if (!match) {\r\n return html;\r\n }\r\n let replaced = html;\r\n\r\n for (let m = 0; m < match.length; m++) {\r\n const withNoContext = match[m].replace('