{button}
\n \n \n {icon}\n \n
\n \n );\n }\n}\n\nexport default Icon;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport locale from 'util/locale';\nimport Icon from './Icon';\nimport WithTooltip from 'ui/WithTooltip';\n\nclass BirthdayIcon extends Component {\n static propTypes = {\n birthDate: PropTypes.instanceOf(Date),\n currentDate: PropTypes.instanceOf(Date),\n showWhenNear: PropTypes.bool,\n size: PropTypes.oneOf(['normal', 'small']),\n hideTooltip: PropTypes.bool,\n };\n\n static defaultProps = {\n showWhenNear: true,\n size: 'normal',\n hideTooltip: false,\n };\n\n _sizes = {\n normal: 21,\n small: 16,\n };\n\n render() {\n const { birthDate, showWhenNear, size, hideTooltip } = this.props;\n const currentDate = this.props.currentDate || new Date();\n\n if (!birthDate) {\n return null;\n }\n\n const birthday = new Date();\n birthday.setMonth(birthDate.getMonth());\n birthday.setDate(birthDate.getDate());\n\n const delta = currentDate.daysTo(birthday);\n let birthdayMessage, color;\n\n if (delta === 0) {\n birthdayMessage = locale().patients.birthday_today;\n color = '#F47983';\n } else if (Math.abs(delta) > 3) {\n return null;\n } else if (!showWhenNear) {\n return null;\n } else if (delta > 0) {\n birthdayMessage = locale().patients.birthday_soon;\n color = '#949bac';\n } else {\n birthdayMessage = locale().patients.birthday_recently;\n color = '#dce0e7';\n }\n\n const icon = \n
\n \n {items.map((item, i) => (\n
\n ))}\n \n \n {item.label}\n {\n item.onClick();\n this._hideItems();\n }}\n >\n
\n \n
\n );\n }\n}\n\nexport default EmptyState;\n","import EmptyState from './EmptyState';\n\nexport default EmptyState;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport PropTypes from 'prop-types';\nimport styles from './_View.module.scss';\nimport classNames from 'classnames';\nimport Icon from 'ui/Icon';\nimport LoadingIndicator from 'ui/Activity/LoadingIndicator';\nimport { connect, actions } from 'util/redux';\n\nclass View extends Component {\n static propTypes = {\n notification: PropTypes.object.isRequired,\n onConfirm: PropTypes.func,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n isSaving: false,\n seen: true,\n errors: {},\n };\n }\n\n componentDidMount() {\n const { notification, seenNotification } = this.props;\n\n this.setState({ seen: !!notification.seen_at }, () => {\n if (!notification.seen_at) {\n seenNotification(notification.id);\n }\n });\n }\n\n _confirm = () => {\n const { notification, onConfirm, reloadNotification } = this.props;\n\n this.setState({ isSaving: true });\n onConfirm()\n .then(() => reloadNotification(notification.id))\n .then(() => this.setState({ isSaving: false }))\n .catch(this._handleError);\n };\n\n _cancel = () => {\n const { acknowledgeNotification, notification } = this.props;\n\n this.setState({ isSaving: true });\n acknowledgeNotification(notification.id)\n .then(() => this.setState({ isSaving: false }))\n .catch(this._handleError);\n };\n\n _handleError = response => {\n console.error(response);\n this.setState({\n isSaving: false,\n errors: { _global: locale().system.global_error },\n });\n };\n\n render() {\n const { notification, onConfirm } = this.props;\n const { isSaving, errors, seen } = this.state;\n\n return (\n {heading}
\n \n
\n {intro}
\n \n
\n \n {!errors._global && this.props.children}\n {errors._global && (\n
\n {errors._global}
\n )}\n \n {!isSaving && (\n \n {onConfirm && (\n \n )}\n {isSaving &&
\n \n {notification.created_at.format('dd.MM.yyyy. HH:mm ')}\n
\n \n );\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n reloadNotification: id => dispatch(actions.fetchOneNotification(id)),\n acknowledgeNotification: id =>\n dispatch(actions.acknowledgeNotification(id)),\n seenNotification: id => dispatch(actions.seenNotification(id)),\n };\n};\n\nView = connect(null, mapDispatchToProps)(View);\n\nexport default View;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport PropTypes from 'prop-types';\nimport View from './_View';\nimport viewStyles from './_View.module.scss';\nimport { connect, actions } from 'util/redux';\n\nclass PatientInactive extends Component {\n static propTypes = {\n notification: PropTypes.object.isRequired,\n closeMenu: PropTypes.func.isRequired,\n };\n\n _showPatient = () => {\n const { notification, showPatient, closeMenu } = this.props;\n\n closeMenu();\n showPatient(notification.notifiable.id);\n };\n\n _archivePatient = () => {\n const { notification, archivePatient } = this.props;\n return archivePatient(notification.notifiable.id);\n };\n\n render() {\n const { notification } = this.props;\n const patient = notification.notifiable;\n\n return (\n \n {locale().notifications.patient_inactive.title}\n
\n \n \n {patient.name}\n \n \n \n {patient.archived\n ? '- ' + locale().patients.patient_archived\n : locale().notifications.patient_inactive.content}\n \n
\n \n );\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n showPatient: id => dispatch(actions.showPatient(id)),\n archivePatient: id => dispatch(actions.archivePatient(id)),\n };\n};\n\nPatientInactive = connect(null, mapDispatchToProps)(PatientInactive);\n\nexport default PatientInactive;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport PropTypes from 'prop-types';\nimport View from './_View';\nimport viewStyles from './_View.module.scss';\nimport { connect, actions } from 'util/redux';\n\nclass PostCreated extends Component {\n static propTypes = {\n notification: PropTypes.object.isRequired,\n closeMenu: PropTypes.func.isRequired,\n };\n\n _openPostsPage = () => {\n const { openPostsPage, closeMenu } = this.props;\n\n closeMenu();\n openPostsPage();\n };\n\n render() {\n const { notification } = this.props;\n const post = notification.notifiable;\n\n return (\n \n {locale().notifications.post_created.title}\n
\n \n \n {post.title}\n \n
\n \n {indicator !== 0 && (\n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n notifications: selectors.getNotifications(state),\n };\n};\n\nconst mapDispatchToProps = dispatch => {\n return {\n fetchNotifications: () =>\n dispatch(actions.fetchNotifications({ unacknowledged_only: true })),\n };\n};\n\nNotificationsIcon = connect(\n mapStateToProps,\n mapDispatchToProps\n)(NotificationsIcon);\n\nexport default NotificationsIcon;\n","import NotificationsIcon from './NotificationsIcon';\n\nexport default NotificationsIcon;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport styles from './NotificationsMenu.module.scss';\nimport LoadingIndicator from 'ui/Activity/LoadingIndicator';\nimport FailureInfo from 'ui/Activity/FailureInfo';\nimport EmptyState from 'ui/EmptyState';\nimport Notification from 'notifications/Notification';\nimport emptyStateImg from 'media/images/notifications/emptyState.png';\nimport NotificationsIcon from 'notifications/NotificationsIcon';\nimport { loadingStates, connect, actions, selectors } from 'util/redux';\n\nclass NotificationsMenu extends Component {\n constructor(props) {\n super(props);\n this.state = {\n loadingState: loadingStates.fetching,\n open: false,\n };\n }\n\n _fetch = () => {\n const { fetchNotifications } = this.props;\n\n this.setState({ loadingState: loadingStates.fetching });\n fetchNotifications()\n .then(() => this.setState({ loadingState: loadingStates.present }))\n .catch(() => this.setState({ loadingState: loadingStates.failed }));\n };\n\n _open = () => {\n this.setState({ open: true }, () => this._fetch());\n document.addEventListener('click', this._close);\n };\n\n _close = () => {\n this.setState({ open: false });\n document.removeEventListener('click', this._close);\n };\n\n render() {\n const { notifications } = this.props;\n const { loadingState, open } = this.state;\n\n let bodyNode;\n if (open) {\n if (loadingState === loadingStates.fetching) {\n bodyNode = (\n {indicator}
\n )}\n \n
\n );\n } else if (loadingState === loadingStates.failed) {\n bodyNode = (\n \n
\n );\n } else if (notifications.length === 0) {\n bodyNode = (\n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n notifications: selectors.getNotifications(state),\n };\n};\n\nconst mapDispatchToProps = dispatch => {\n return {\n fetchNotifications: () =>\n dispatch(actions.fetchNotifications({ unacknowledged_only: true })),\n };\n};\n\nNotificationsMenu = connect(\n mapStateToProps,\n mapDispatchToProps\n)(NotificationsMenu);\n\nexport default NotificationsMenu;\n","import NotificationsMenu from './NotificationsMenu';\n\nexport default NotificationsMenu;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport classNames from 'classnames';\nimport styles from './_AccountMenu.module.scss';\nimport { connect, actions, selectors } from 'util/redux';\n\nclass AccountMenu extends Component {\n constructor(props) {\n super(props);\n this.state = {\n open: false,\n };\n\n this._items = [\n {\n title: locale().account.title,\n onClick: props.openUserAccountPage,\n show: true,\n },\n {\n title: locale().subscription.title,\n buildTitle: this._subscriptionTitle,\n onClick: props.openUserSubscriptionPage,\n show: props.user.permissions.manage_subscription,\n accent: true,\n },\n {\n title: locale().system.help,\n onClick: () => window.open('https://logovel.com/help'),\n show: true,\n },\n {\n title: locale().actions.log_out,\n onClick: props.logout,\n show: true,\n },\n ];\n }\n\n _subscriptionTitle = () => {\n const { user } = this.props;\n const subscription = user.organisation.subscription;\n\n let subscriptionTitle = locale().subscription.title;\n if (!subscription) {\n return subscriptionTitle;\n }\n\n const daysDiff = new Date().daysTo(subscription.valid_until);\n if (daysDiff >= 0) {\n subscriptionTitle = `${subscriptionTitle} [${locale().subscription.valid_until(\n daysDiff\n )}]`;\n }\n\n return subscriptionTitle;\n };\n\n _open = () => {\n this.setState({ open: true });\n document.addEventListener('click', this._close);\n };\n\n _close = () => {\n this.setState({ open: false });\n document.removeEventListener('click', this._close);\n };\n\n render() {\n const { user } = this.props;\n const { open } = this.state;\n\n let dropdownNode;\n if (open) {\n dropdownNode = (\n {user.name}
\n {user.organisation.name}
\n \n {this._items\n .filter(item => item.show)\n .map(item => (\n {\n this._close();\n item.onClick();\n }}\n >\n {item.buildTitle ? item.buildTitle() : item.title}\n
\n ))}\n \n \n );\n }\n\n return (\n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n user: selectors.getCurrentUser(state),\n };\n};\n\nconst mapDispatchToProps = dispatch => {\n return {\n logout: () => dispatch(actions.logout()),\n openUserAccountPage: () => dispatch(actions.openUserAccountPage()),\n openUserSubscriptionPage: () =>\n dispatch(actions.openUserSubscriptionPage()),\n };\n};\n\nAccountMenu = connect(mapStateToProps, mapDispatchToProps)(AccountMenu);\n\nexport default AccountMenu;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport styles from './DesktopNav.module.scss';\nimport classNames from 'classnames';\nimport MobileDesktopRender from 'ui/MobileDesktopRender';\nimport logo from 'media/images/logo.png';\nimport NotificationsMenu from 'notifications/NotificationsMenu';\nimport AccountMenu from './_AccountMenu';\nimport { connect, actions, selectors } from 'util/redux';\n\nclass DesktopNav extends Component {\n _navItems = () => [\n {\n title: locale().schedule.title,\n onClick: this.props.openSchedulePage,\n pages: ['schedule'],\n show: true,\n items: [],\n },\n {\n title: locale().patients.title,\n onClick: this.props.openPatientsPage,\n pages: ['patients'],\n show: true,\n items: [],\n },\n {\n title: locale().practice.title,\n onClick: this.props.openTreatmentsPage,\n pages: ['treatments', 'finances', 'employees', 'locations'],\n show: true,\n items: [\n {\n title: locale().services.title,\n onClick: this.props.openTreatmentsPage,\n page: 'treatments',\n show: true,\n },\n {\n title: locale().finances.title,\n onClick: this.props.openFinancesPage,\n page: 'finances',\n show: this.props.user.permissions.finance_overview,\n },\n {\n title: locale().employees.title,\n onClick: this.props.openEmployeesPage,\n page: 'employees',\n show: this.props.user.permissions.manage_employees,\n },\n {\n title: locale().locations.title,\n onClick: this.props.openLocationsPage,\n page: 'locations',\n show: this.props.user.permissions.manage_locations,\n },\n ],\n },\n {\n title: locale().posts.title,\n onClick: this.props.openPostsPage,\n pages: ['posts'],\n show: true,\n items: [],\n },\n ];\n\n _render = () => {\n const { activePage, openDashboardPage, user } = this.props;\n\n let extraTitle;\n if (document.title !== 'Logovel') {\n extraTitle = \n {user.initials}\n
\n {dropdownNode}\n {document.title}
;\n }\n\n return (\n \n
\n );\n })}\n \n
\n \n {}\n }\n >\n 
\n Logovel\n
\n {extraTitle}\n \n {this._navItems()\n .filter(item => item.show)\n .map(navItem => {\n const isActive = navItem.pages.includes(activePage);\n const items = navItem.items.filter(item => item.show);\n return (\n \n {navItem.title}\n {items.length > 1 && (\n
\n )}\n \n \n {navItem.items\n .filter(item => item.show)\n .map(item => (\n {\n e.stopPropagation();\n item.onClick();\n }}\n >\n {item.title}\n
\n ))}\n \n
\n \n \n \n );\n };\n\n render() {\n return e.stopPropagation()}>\n
\n \n {children}\n
\n {children}
;\n }\n}\n\nexport default FormRow;\n","import React, { Component } from 'react';\nimport styles from './FormColumn.module.scss';\n\nclass FormColumn extends Component {\n render() {\n const { children } = this.props;\n\n return {children}
;\n }\n}\n\nexport default FormColumn;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './TextInput.module.scss';\n\nclass TextInput extends Component {\n static propTypes = {\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n onChange: PropTypes.func.isRequired,\n placeholder: PropTypes.string,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func,\n type: PropTypes.oneOf(['text', 'number', 'password', 'email']),\n prefix: PropTypes.node,\n provideController: PropTypes.func,\n };\n\n static defaultProps = {\n value: '',\n onFocus: () => {},\n onBlur: () => {},\n type: 'text',\n prefix: null,\n provideController: () => {},\n };\n\n constructor(props) {\n super(props);\n this._input = React.createRef();\n }\n\n componentDidMount() {\n const { provideController } = this.props;\n provideController({\n select: () => this._input.current.select(),\n });\n }\n\n _onChange = e => {\n const { onChange } = this.props;\n onChange(e.target.value);\n };\n\n render() {\n const { value, placeholder, onFocus, onBlur, type, prefix } = this.props;\n\n let prefixNode;\n if (prefix) {\n prefixNode = {prefix}
;\n }\n\n return (\n \n {prefixNode}\n
\n );\n }\n}\n\nexport default TextInput;\n","import React, { Component } from 'react';\nimport AutosizeTextArea from 'react-textarea-autosize';\nimport PropTypes from 'prop-types';\nimport styles from './TextArea.module.scss';\nimport classNames from 'classnames';\n\nclass TextArea extends Component {\n static propTypes = {\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n onBlur: PropTypes.func,\n autofocus: PropTypes.bool,\n placeholder: PropTypes.string,\n className: PropTypes.string,\n };\n\n static defaultProps = {\n autofocus: false,\n };\n\n _onChange = e => {\n const { onChange } = this.props;\n onChange(e.target.value);\n };\n\n render() {\n const { value, placeholder, className, onBlur, autofocus } = this.props;\n\n return (\n {value}
;\n }\n\n return (\n \n {valueHint}\n \n {error || value}\n {newFeature && (\n
\n );\n }\n}\n\nexport default FormLabel;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './Checkbox.module.scss';\nimport classNames from 'classnames';\nimport Icon from 'ui/Icon';\n\nclass Checkbox extends Component {\n static propTypes = {\n value: PropTypes.bool.isRequired,\n onChange: PropTypes.func.isRequired,\n label: PropTypes.node,\n };\n\n static defaultProps = {\n label: '',\n };\n\n _onChange = e => {\n const { value, onChange } = this.props;\n\n e.stopPropagation();\n e.nativeEvent.stopImmediatePropagation();\n\n onChange(!value);\n };\n\n render() {\n const { value, label } = this.props;\n\n return (\n {locale().system.new}
\n )}\n \n \n \n
\n \n
\n {label}
\n \n );\n }\n}\n\nexport default Checkbox;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport PropTypes from 'prop-types';\nimport styles from './BottomSheet.module.scss';\nimport classNames from 'classnames';\nimport Dialog from './_Dialog';\n\nclass BottomSheet extends Component {\n static propTypes = {\n open: PropTypes.bool.isRequired,\n onClose: PropTypes.func.isRequired,\n items: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string.isRequired,\n value: PropTypes.any,\n onClick: PropTypes.func,\n type: PropTypes.oneOf(['normal', 'attention']),\n })\n ).isRequired,\n itemRenderer: PropTypes.func,\n onSelect: PropTypes.func, // Fallback to this if onClick not provided\n selectedItem: PropTypes.any, // item.value\n };\n\n static defaultProps = {\n selectedItem: null, // item.value is undefined by default so nothing will be selected\n onSelect: () => {},\n };\n\n constructor(props) {\n super(props);\n this._dialog = React.createRef();\n }\n\n _startClosing = () => {\n if (this._dialog) {\n this._dialog.current.classList.add(styles['closing']);\n }\n };\n\n _onClick = (callback, value) => {\n const { onClose } = this.props;\n onClose();\n callback(value);\n };\n\n render() {\n const {\n open,\n onClose,\n items,\n itemRenderer,\n selectedItem,\n onSelect,\n } = this.props;\n\n return (\n \n );\n }\n}\n\nexport default BottomSheet;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './Select.module.scss';\nimport ReSelect, { components } from 'react-select';\nimport MobileDesktopRender from 'ui/MobileDesktopRender';\nimport BottomSheet from 'ui/Dialog/BottomSheet';\nimport Icon from 'ui/Icon';\n\nclass Select extends Component {\n static propTypes = {\n value: PropTypes.any,\n onChange: PropTypes.func.isRequired,\n options: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.any,\n label: PropTypes.string.isRequired,\n })\n ).isRequired,\n optionRenderer: PropTypes.func,\n placeholder: PropTypes.string,\n clearable: PropTypes.bool,\n searchable: PropTypes.bool,\n };\n\n static defaultProps = {\n value: null,\n optionRenderer: null,\n placeholder: '',\n clearable: true,\n searchable: true,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n bottomSheetOpen: false,\n };\n }\n\n _openBottomSheet = () => this.setState({ bottomSheetOpen: true });\n\n _closeBottomSheet = () => this.setState({ bottomSheetOpen: false });\n\n _arrow = () => \n
\n \n {item ? item.label : placeholder}\n
\n {this._arrow()}\n \n {options\n .filter(option => this._valueIncluded(option.value))\n .map((option, i) => (\n this._removeValue(option.value)}\n >\n
\n ))}\n \n {option.label}
\n \n
\n \n
\n );\n\n _options = () =>\n Object.keys(supportedLanguages).map(ln => ({\n value: supportedLanguages[ln].value,\n label: supportedLanguages[ln].label,\n icon: supportedLanguages[ln].icon,\n }));\n\n render() {\n const { value, onChange } = this.props;\n\n return (\n {option.icon}
\n {option.label}
\n \n
\n );\n }\n}\n\nexport default RadioButton;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './FilePicker.module.scss';\nimport Icon from 'ui/Icon';\n\nclass FilePicker extends Component {\n static propTypes = {\n placeholder: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n };\n\n constructor(props) {\n super(props);\n this._picker = React.createRef();\n }\n\n _triggerFilePicker = () => {\n if (this._picker) {\n this._picker.current.click();\n }\n };\n\n _onChange = e => {\n const { onChange } = this.props;\n const file = e.target.files[0];\n\n onChange(file);\n };\n\n render() {\n const { placeholder } = this.props;\n\n return (\n \n
\n {label}\n \n
\n );\n }\n}\n\nexport default FilePicker;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './RatePicker.module.scss';\nimport Icon from 'ui/Icon';\n\nclass RatePicker extends Component {\n static propTypes = {\n value: PropTypes.number,\n onChange: PropTypes.func,\n readOnly: PropTypes.bool,\n max: PropTypes.number,\n size: PropTypes.oneOf(['large', 'small']),\n };\n\n static defaultProps = {\n value: 0,\n readOnly: false,\n max: 5,\n size: 'large',\n };\n\n constructor(props) {\n super(props);\n this.state = {\n hoveredStarInd: -1,\n };\n }\n\n _sizes = {\n large: 32,\n small: 16,\n };\n\n _colors = {\n star: '#d4b51c',\n star_outline: '#dce0e7',\n };\n\n _starHovered = ind => {\n const { readOnly } = this.props;\n\n if (readOnly) {\n return;\n }\n\n this.setState({ hoveredStarInd: ind });\n };\n\n _starLeaved = () => {\n const { readOnly } = this.props;\n\n if (readOnly) {\n return;\n }\n\n this.setState({ hoveredStarInd: -1 });\n };\n\n _onChange = ind => {\n const { readOnly, onChange } = this.props;\n\n if (readOnly) {\n return;\n }\n\n onChange(ind + 1);\n };\n\n _icon = ind => {\n const { value } = this.props;\n const { hoveredStarInd } = this.state;\n\n if (hoveredStarInd >= ind || (hoveredStarInd === -1 && value - 1 >= ind)) {\n return 'star';\n } else {\n return 'star_outline';\n }\n };\n\n render() {\n const { size, max } = this.props;\n\n return (\n {placeholder}
\n \n
\n \n {Array(max)\n .fill(0)\n .map((_, ind) => {\n const icon = this._icon(ind);\n return (\n this._starHovered(ind)}\n onMouseLeave={this._starLeaved}\n onClick={() => this._onChange(ind)}\n >\n
\n );\n })}\n \n );\n }\n}\n\nexport default RatePicker;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './HeaderBar.module.scss';\nimport classNames from 'classnames';\nimport Icon from 'ui/Icon';\nimport { TextInput } from 'ui/Form';\n\nclass HeaderBar extends Component {\n static propTypes = {\n title: PropTypes.string.isRequired,\n rightContent: PropTypes.node,\n onBack: PropTypes.func,\n historyBack: PropTypes.bool,\n rightPadding: PropTypes.bool,\n search: PropTypes.shape({\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n placeholder: PropTypes.string,\n }),\n };\n\n static defaultProps = {\n onBack: null,\n historyBack: false,\n rightPadding: false,\n search: null,\n };\n\n _goBack = () => window.history.back();\n\n render() {\n const {\n title,\n rightContent,\n onBack,\n historyBack,\n rightPadding,\n search,\n } = this.props;\n\n let backArrowNode;\n if (onBack !== null || historyBack) {\n backArrowNode = (\n {rightContent}
;\n }\n\n return (\n \n \n
\n {search && (\n \n {backArrowNode}\n
\n {rightContentNode}\n {title}
\n \n \n
\n }\n />\n \n )}\n \n {children}
;\n }\n}\n\nexport default EllipsisText;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport PropTypes from 'prop-types';\nimport styles from './SidebarDialog.module.scss';\nimport classNames from 'classnames';\nimport Dialog from './_Dialog';\nimport MobileDesktopRender from 'ui/MobileDesktopRender';\nimport HeaderBar from 'ui/HeaderBar';\nimport { Form } from 'ui/Form';\nimport EllipsisText from 'ui/Text/EllipsisText';\nimport { Button } from 'ui/Button';\nimport LoadingIndicator from 'ui/Activity/LoadingIndicator';\nimport FailureInfo from 'ui/Activity/FailureInfo';\nimport { loadingStates } from 'util/redux';\n\nclass SidebarDialog extends Component {\n static propTypes = {\n open: PropTypes.bool.isRequired,\n onClose: PropTypes.func.isRequired,\n onSave: PropTypes.func,\n saveText: PropTypes.string,\n title: PropTypes.string.isRequired,\n loadingState: PropTypes.string,\n error: PropTypes.string,\n inProgress: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),\n padding: PropTypes.bool,\n footer: PropTypes.node,\n width: PropTypes.oneOf(['normal', 'extended']),\n };\n\n static defaultProps = {\n onSave: null,\n error: null,\n loadingState: loadingStates.present,\n inProgress: false,\n padding: true,\n width: 'normal',\n };\n\n _startClosing = () => {\n if (this._dialog) {\n this._dialog.classList.add(styles['closing']);\n }\n };\n\n _saveText = () => {\n const { inProgress, saveText } = this.props;\n return Number.isInteger(inProgress)\n ? `${inProgress}%`\n : saveText || locale().actions.save;\n };\n\n _mobileHeader = () => {\n const { title, onClose, onSave, inProgress } = this.props;\n\n let saveButton;\n\n if (onSave) {\n saveButton = (\n \n
\n );\n\n _children = () => {\n const { padding, children } = this.props;\n\n return (\n \n {this.props.title} \n
\n \n
\n {error}
;\n }\n\n bodyNode = (\n \n
\n );\n } else {\n boxOpenerNode = this._icons()[icon];\n }\n\n return (\n {title}
\n \n {extra}\n
\n );\n }\n\n return (\n \n {leftContent && (\n
\n {leftContent}
\n )}\n \n {extraNode}\n
\n \n {title}\n
\n \n {extraRightContent && (\n
\n {onMoreClick && (\n {extraRightContent}
\n )}\n {rightContent}\n \n {tabItems.map(item => {\n const isActive = item.page === activePage;\n const Component = item.component ? item.component : Icon;\n\n return (\n \n \n {item.title}\n
\n \n );\n })}\n \n {moreOptionsNeeded && (\n \n
\n \n
\n {title}
\n {description}
\n \n
\n \n
\n );\n }\n\n return (\n {leftHeadline}
\n {rightHeadline}
\n {children}
\n {dropdownNode}\n \n );\n }\n}\n\nexport default CardRow;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './CardHeader.module.scss';\n\nclass CardHeader extends Component {\n static propTypes = {\n title: PropTypes.string.isRequired,\n };\n\n render() {\n const { title } = this.props;\n\n return {title}
;\n }\n}\n\nexport default CardHeader;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport SidebarDialog from 'ui/Dialog/SidebarDialog';\nimport ConfirmationDialog from 'ui/Dialog/ConfirmationDialog';\nimport { CardRow } from 'ui/Card';\nimport { FormColumn, FormLabel, FormRow, TextInput } from 'ui/Form';\nimport { loadingStates, actions, connect, selectors } from 'util/redux';\n\nclass PatientReferralDialog extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: { ...props.patientReferral },\n isSaving: false,\n errors: {},\n loadingState: loadingStates.fetching,\n confirmationDialogOpen: false,\n referralId: null,\n };\n }\n\n componentDidUpdate(prevProps) {\n const { fetchPatientReferrals } = this.props;\n\n if (!prevProps.open && this.props.open) {\n this.setState({\n data: { ...this.props.patientReferral },\n errors: {},\n loadingState: loadingStates.fetching,\n });\n fetchPatientReferrals()\n .then(() => this.setState({ loadingState: loadingStates.present }))\n .catch(response => {\n console.error(response);\n this.setState({ loadingState: loadingStates.failed });\n });\n }\n }\n\n _openConfirmationDialog = referralId =>\n this.setState({ confirmationDialogOpen: true, referralId });\n\n _closeConfirmationDialog = () =>\n this.setState({ confirmationDialogOpen: false, referralId: null });\n\n _changeData = (field, value) => {\n const { data } = this.state;\n this.setState({\n data: {\n ...data,\n [field]: value,\n },\n });\n };\n\n _save = () => {\n const { createPatientReferral, onClose } = this.props;\n const { data } = this.state;\n\n this.setState({ isSaving: true, errors: {} });\n createPatientReferral(data)\n .then(() => {\n this.setState({ isSaving: false });\n onClose();\n })\n .catch(response => {\n console.error(response);\n if (response.isValidationError && response.isValidationError()) {\n this.setState({\n errors: response.validationErrors().errorPerField(),\n });\n } else {\n this.setState({\n errors: {\n _global: locale().system.global_error,\n },\n });\n }\n this.setState({ isSaving: false });\n });\n };\n\n _destroyPatientReferral = () => {\n const { destroyPatientReferral } = this.props;\n const { referralId } = this.state;\n\n this.setState({ errors: {} });\n destroyPatientReferral(referralId).catch(response => {\n console.error(response);\n this.setState({\n errors: {\n _global: locale().system.global_error,\n },\n });\n });\n };\n\n render() {\n const { patientReferrals, open, onClose } = this.props;\n const {\n data,\n isSaving,\n loadingState,\n confirmationDialogOpen,\n referralId,\n errors,\n } = this.state;\n\n return (\n \n {value ? value.format(this._dateFormat()) : ''}\n
\n );\n };\n\n _picker = () => {\n const { value, dateOnly, showMonthYearDropdown } = this.props;\n\n let monthYearDropDownProps = {};\n if (showMonthYearDropdown) {\n monthYearDropDownProps = {\n peekNextMonth: true,\n showMonthDropdown: true,\n showYearDropdown: true,\n dropdownMode: 'select',\n };\n }\n\n return (\n \n {this._shouldUseNative ? this._native() : this._picker()}\n
\n );\n }\n}\n\nexport default DatePicker;\n","import DatePicker from './DatePicker';\n\nexport default DatePicker;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { SelectNBottomSheet } from 'ui/Form';\n\nclass DiagnoseSelectUI extends Component {\n static propTypes = {\n diagnoses: PropTypes.array.isRequired,\n };\n\n _options = () => {\n const { diagnoses } = this.props;\n\n return diagnoses.sortBy('name').map(diagnose => ({\n value: diagnose.id,\n label: diagnose.name,\n }));\n };\n\n render() {\n return \n
\n \n \n {option.label}\n
\n );\n\n _options = () => {\n const { employees } = this.props;\n\n return employees.sortBy('name').map(employee => ({\n value: employee.id,\n label: employee.name,\n color: employee.color,\n }));\n };\n\n _mobile = () => {\n const {\n value,\n placeholder,\n mobileOpen,\n onMobileClose,\n onChange,\n mobileClearable,\n } = this.props;\n\n let options = this._options();\n if (mobileClearable) {\n options = [\n { value: null, label: placeholder, color: '#949bac' },\n ...options,\n ];\n }\n\n return (\n \n {formatMoney(finalValue, currency || currentUser.organisation.currency)}\n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n currentUser: selectors.getCurrentUser(state),\n };\n};\n\nMoneyText = connect(mapStateToProps)(MoneyText);\n\nexport default MoneyText;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { TextInput } from 'ui/Form';\nimport { formatMoney } from 'util/helpers';\nimport { connect, selectors } from 'util/redux';\n\nconst hideStyle = { position: 'fixed', top: '-10000px', left: '-10000px' };\n\nclass MoneyInput extends Component {\n static propTypes = {\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n onChange: PropTypes.func.isRequired,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n innerValue: props.value || 0,\n focused: false,\n };\n }\n\n _onChange = value => {\n const { onChange } = this.props;\n this.setState({ innerValue: value });\n onChange(parseFloat(value || 0).toFixed(2));\n };\n\n _onFocus = () => {\n this.setState({ focused: true });\n setTimeout(() => this._ctrl.select(), 10);\n };\n\n _onBlur = () => {\n const { innerValue } = this.state;\n this.setState({ focused: false });\n\n if (!innerValue) {\n this.setState({ innerValue: 0 });\n }\n };\n\n render() {\n const { currentUser } = this.props;\n const { innerValue, focused } = this.state;\n\n return (\n \n {}}\n onFocus={this._onFocus}\n type={'text'}\n />\n
\n \n (this._ctrl = ctrl)}\n />\n
\n \n
\n );\n\n render() {\n const { value, onChange } = this.props;\n const currencies = supportedCurrencies();\n\n return (\n {option.icon}
\n {option.label}
\n \n
\n );\n }\n\n return (\n {leftHeadline}
\n {rightHeadline}
\n \n {number} x \n
\n );\n\n _treatments = () => this.props.treatments.sortBy('name');\n\n _mobile = () => {\n const { data } = this.state;\n\n return (\n \n
\n );\n })}\n \n );\n };\n\n render() {\n const { open, onClose } = this.props;\n const { data, errors, isSaving, loadingState } = this.state;\n\n return (\n \n {this._treatmentsHeaderNode()}\n {this.includedTreatmentsCostNode()}\n
\n {this._treatments().map(treatment => {\n let includedTreatment = data.items.find(\n item => item.treatment_id === treatment.id\n );\n let numberOfIncludedTreatments = includedTreatment\n ? includedTreatment.amount\n : 0;\n\n return (\n \n 0,\n })}\n >\n {this._numberOfIncludedTreatmentsLabel(\n numberOfIncludedTreatments,\n treatment.price\n )}\n
\n \n {treatment.name} \n
\n \n this._includeTreatment(treatment.id)}\n />\n this._removeTreatments(treatment.id)}\n />\n
\n \n \n \n this._changeData('name', value)}\n />\n \n \n \n \n this._changeData('price', value)}\n />\n \n \n
\n \n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n open: selectors.isEditingPackage(state),\n package_treatment: selectors.getEditingPackage(state),\n treatments: selectors.getTreatments(state), // They are not being fetched in this component but in ServicesOverview\n };\n};\n\nconst mapDispatchToProps = dispatch => {\n return {\n onClose: () => dispatch(actions.finishPackageEditing()),\n fetchTreatments: () => dispatch(actions.fetchTreatments()),\n createPackage: data => dispatch(actions.createPackage(data)),\n updatePackage: data => dispatch(actions.updatePackage(data)),\n };\n};\n\nPackageDialog = connect(mapStateToProps, mapDispatchToProps)(PackageDialog);\n\nexport default PackageDialog;\n","import PackageDialog from './PackageDialog';\n\nexport default PackageDialog;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport SidebarDialog from 'ui/Dialog/SidebarDialog';\nimport { FormRow, FormColumn, FormLabel, TextArea } from 'ui/Form';\nimport DatePicker from 'ui/DatePicker';\nimport RatePicker from 'ui/Form/RatePicker';\nimport { connect, actions, selectors } from 'util/redux';\n\nclass PatientNoteDialog extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isSaving: false,\n errors: {},\n note: { ...props.note },\n };\n }\n\n componentDidUpdate(prevProps) {\n if (!prevProps.open && this.props.open) {\n this.setState({\n isSaving: false,\n errors: {},\n note: { ...this.props.note },\n });\n }\n }\n\n _changeNote = (key, field) => {\n const { note } = this.state;\n this.setState({\n note: {\n ...note,\n [key]: field,\n },\n });\n };\n\n _saveNotes = () => {\n const { createPatientNote, updatePatientNote, onClose } = this.props;\n const { note } = this.state;\n\n const saveAction = !!note.id ? updatePatientNote : createPatientNote;\n\n this.setState({ isSaving: true, errors: {} });\n saveAction(note)\n .then(() => {\n this.setState({ isSaving: false });\n onClose();\n })\n .catch(response => {\n console.error(response);\n if (response.isValidationError && response.isValidationError()) {\n this.setState({\n errors: response.validationErrors().errorPerField(),\n });\n } else {\n this.setState({\n errors: {\n _global: locale().system.global_error,\n },\n });\n }\n this.setState({ isSaving: false });\n });\n };\n\n render() {\n const { open, onClose } = this.props;\n const { isSaving, errors, note } = this.state;\n\n return (\n \n \n {payments.sortBy('date').map(payment => (\n \n
\n );\n };\n\n _desktopFooter = () => {\n const { payments } = this.props;\n\n return (\n \n {payments.sortBy('date').map(payment => (\n
\n );\n };\n\n _dateInputNode = () => {\n const { errors, data } = this.state;\n\n return (\n \n
\n ))}\n \n {this._paymentTypeIcon(payment.payment_type)}\n
\n\n \n {payment.date.format('dd.MM.yyyy.')}\n
\n \n
\n \n this._destroyPayment(payment.id)}\n />\n
\n \n
\n ),\n });\n\n _options = () => {\n const { patients } = this.props;\n\n return patients.sortBy('name').map(patient => ({\n value: patient.id,\n label: patient.name,\n debt: patient.debt,\n }));\n };\n\n render() {\n const { value, onChange, renderer } = this.props;\n\n return (\n {patient.label}
\n {patient.debt > 0 && (\n \n
\n )}\n \n this._selectService(item, type)}\n />\n
\n );\n\n _services = () => {\n const { treatments, packages } = this.props;\n const { searchQuery } = this.state;\n\n return [\n ...treatments\n .sortBy('name')\n .map(t => ({ type: 'treatment', service: t })),\n ...packages.sortBy('name').map(p => ({ type: 'package', service: p })),\n ].filter(data =>\n data.service.name.toLowerCase().includes(searchQuery.toLowerCase())\n );\n };\n\n _renderRow = (item, type) => (\n \n
\n \n {locale().services.no_services_notice()}\n
\n );\n } else {\n bodyNode = (\n \n
\n {this._services().map(data =>\n this._renderRow(data.service, data.type)\n )}\n \n
\n );\n };\n\n render() {\n return (\n \n \n Logovel\n
\n \n
\n {actionQuestion}
\n \n \n {header &&
\n );\n }\n}\n\nexport default Box;\n","import ErrorBox from './_ErrorBox';\n\nexport default ErrorBox;\n","import React, { Component } from 'react';\nimport styles from './_ErrorBox.module.scss';\n\nclass ErrorBox extends Component {\n render() {\n const { children } = this.props;\n\n if (children) {\n return {header}
}\n {intro && {intro}
}\n {this.props.children}\n {children}
;\n } else {\n return null;\n }\n }\n}\n\nexport default ErrorBox;\n","import React, { PureComponent } from 'react';\nimport locale from 'util/locale';\nimport styles from './LoginOverview.module.scss';\nimport MobileDesktopRender from 'ui/MobileDesktopRender';\nimport OnboardNav from './../_OnboardNav';\nimport Box from './../_Box';\nimport ErrorBox from './../_ErrorBox';\nimport { Form, FormRow, FormColumn, FormLabel, TextInput } from 'ui/Form';\nimport { Button } from 'ui/Button';\nimport { connect, actions } from 'util/redux';\n\nclass LoginOverview extends PureComponent {\n constructor(props) {\n super(props);\n this.state = {\n data: {\n email: '',\n password: '',\n },\n errors: {},\n isSaving: false,\n };\n }\n\n _changeData = (key, value) => {\n this.setState({\n data: {\n ...this.state.data,\n [key]: value,\n },\n });\n };\n\n _login = () => {\n const { login } = this.props;\n const { email, password } = this.state.data;\n\n this.setState({ isSaving: true, errors: {} });\n login(email, password).catch(response => {\n console.error(response);\n if (response.isValidationError && response.isValidationError()) {\n this.setState({ errors: response.validationErrors().errorPerField() });\n } else if (response.isToManyRequests && response.isToManyRequests()) {\n this.setState({\n errors: {\n _global: locale().system.too_many_requests,\n },\n });\n } else {\n this.setState({\n errors: { _global: locale().onboard.invalid_email_or_password_error },\n });\n }\n this.setState({ isSaving: false });\n });\n };\n\n _globalError = () => \n {this._globalError()}\n {this._form()}\n
\n );\n\n _desktop = () => (\n \n {locale().onboard.registration_through_invitation_info}\n
\n );\n }\n\n return (\n \n );\n };\n\n _mobile = () => (\n \n {this._globalError()}\n {this._form()}\n
\n );\n\n _desktop = () => (\n \n
\n );\n\n render() {\n const { openLoginPage } = this.props;\n\n return (\n \n 
\n
\n \n
\n \n
\n \n {locale().onboard.registration_head}\n
\n \n {locale().onboard.registration_intro}\n
\n \n
\n \n {locale().onboard.registration_small_head}\n
\n \n {locale().onboard.registration_small_intro}\n
\n {this._globalError()}\n {this._form()}\n \n {locale().onboard.reset_password_instructions_sent}\n
\n );\n\n _form = () => {\n const { data, errors, isSaving } = this.state;\n\n return (\n \n );\n };\n\n _mobile = () => {\n const { showMessage } = this.state;\n\n let body;\n if (showMessage) {\n body = this._successMessage();\n } else {\n body = (\n {body}
;\n };\n\n _desktop = () => {\n const { showMessage } = this.state;\n\n if (showMessage) {\n return \n {locale().onboard.reset_password_successful_info}\n
\n );\n\n _form = () => {\n const { data, errors, isSaving } = this.state;\n\n return (\n \n );\n };\n\n _mobile = () => {\n const { showMessage } = this.state;\n\n let body;\n if (showMessage) {\n body = this._successMessage();\n } else {\n body = (\n {body}
;\n };\n\n _desktop = () => {\n const { showMessage } = this.state;\n\n if (showMessage) {\n return {children}
;\n }\n}\n\nexport default Toolbar;\n","import React, { Component } from 'react';\nimport styles from './ToolbarGroup.module.scss';\n\nclass ToolbarGroup extends Component {\n render() {\n const { children } = this.props;\n\n return {children}
;\n }\n}\n\nexport default ToolbarGroup;\n","import DashboardBox from './_DashboardBox';\n\nexport default DashboardBox;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './_DashboardBox.module.scss';\n\nclass DashboardBox extends Component {\n static propTypes = {\n title: PropTypes.string.isRequired,\n titleClassName: PropTypes.string,\n };\n\n render() {\n const { title, titleClassName } = this.props;\n\n let className;\n if (titleClassName) {\n className = titleClassName;\n } else {\n className = styles['title'];\n }\n\n return (\n \n
\n );\n }\n}\n\nexport default DashboardBox;\n","import FinancialStats from './_FinancialStats';\n\nexport default FinancialStats;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport PropTypes from 'prop-types';\nimport styles from './_FinancialStats.module.scss';\nimport { MoneyText } from 'ui/Money';\n\nclass FinancialStats extends Component {\n static propTypes = {\n incomeStats: PropTypes.object.isRequired,\n expenseStats: PropTypes.object.isRequired,\n stats: PropTypes.arrayOf(\n PropTypes.shape({\n color: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n value: PropTypes.node.isRequired,\n }).isRequired\n ),\n };\n\n _stats = () => {\n const { incomeStats, expenseStats } = this.props;\n\n let currentMonthIncome = incomeStats.payments.find(p =>\n p.date.isAtSameYearAndMonth(new Date())\n );\n let currentMonthExpense = expenseStats.expenses.find(p =>\n p.date.isAtSameYearAndMonth(new Date())\n );\n\n return [\n {\n color: '#46ac5a',\n label: locale().dashboard.finance_income,\n value: (\n \n
\n {this.props.children}\n {title}
\n \n
\n ))}\n \n
\n {stat.value}\n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n user: selectors.getCurrentUser(state),\n };\n};\n\nGreetingNode = connect(mapStateToProps)(GreetingNode);\n\nexport default GreetingNode;\n","import GreetingNode from './_GreetingNode';\n\nexport default GreetingNode;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Line as ChartJsLine, Bar } from 'react-chartjs-2';\nimport MobileDesktopRender from 'ui/MobileDesktopRender';\n\nclass Line extends Component {\n static propTypes = {\n listOfDataForEntities: PropTypes.arrayOf(\n PropTypes.shape({\n entities: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.any.isRequired,\n }).isRequired\n ).isRequired,\n label: PropTypes.string.isRequired,\n colors: PropTypes.shape({\n border: PropTypes.string.isRequired,\n background: PropTypes.string.isRequired,\n point: PropTypes.string.isRequired,\n }).isRequired,\n })\n ).isRequired,\n labels: PropTypes.shape({\n values: PropTypes.arrayOf(PropTypes.any),\n mobileFormat: PropTypes.func,\n desktopFormat: PropTypes.func,\n }).isRequired,\n ticks: PropTypes.shape({\n format: PropTypes.func,\n minFallback: PropTypes.number.isRequired,\n maxFallback: PropTypes.number.isRequired,\n stepFallback: PropTypes.number.isRequired,\n }).isRequired,\n tooltip: PropTypes.shape({\n format: PropTypes.func,\n }),\n };\n\n static defaultProps = {\n tooltip: {},\n };\n\n _formatTicks = value => {\n const { format } = this.props.ticks;\n\n if (format) {\n return format(value);\n } else {\n return value;\n }\n };\n\n _formatTooltip = value => {\n const { format } = this.props.tooltip;\n\n if (format) {\n return format(value);\n } else {\n return value;\n }\n };\n\n _formatLabel = (label, mobileFormat, desktopFormat, isMobile) => {\n if (isMobile && mobileFormat) {\n return mobileFormat(label);\n } else if (!isMobile && desktopFormat) {\n return desktopFormat(label);\n } else {\n return label;\n }\n };\n\n _options() {\n const { listOfDataForEntities, ticks } = this.props;\n\n let theTicks = {\n max: ticks.maxFallback,\n min: ticks.minFallback,\n stepSize: ticks.stepFallback,\n display: true,\n fontColor: '#6E7482',\n callback: this._formatTicks,\n };\n\n if (\n listOfDataForEntities.some(data =>\n data.entities.some(entity => entity.value !== 0)\n )\n ) {\n theTicks = {\n ...theTicks,\n max: undefined,\n min: 0,\n stepSize: undefined,\n maxTicksLimit: 5,\n };\n }\n\n return {\n title: {\n display: false,\n },\n tooltips: {\n enabled: true,\n backgroundColor: '#1A1C1F',\n titleFontSize: 10,\n bodyFontSize: 20,\n titleFontColor: '#FFFFFF',\n callbacks: {\n label: tooltipItems => this._formatTooltip(tooltipItems.yLabel),\n },\n },\n legend: {\n display: false,\n },\n scales: {\n xAxes: [\n {\n gridLines: {\n display: false,\n },\n ticks: {\n fontColor: '#6E7482',\n },\n },\n ],\n yAxes: [\n {\n gridLines: {\n color: 'rgba(220, 224, 231, 1)',\n zeroLineColor: 'rgba(220, 224, 231, 1)',\n },\n ticks: theTicks,\n },\n ],\n },\n };\n }\n\n _chartProps = isMobile => {\n const { listOfDataForEntities, labels } = this.props;\n\n return {\n data: {\n labels: labels.values.map(labelValue =>\n this._formatLabel(\n labelValue,\n labels.mobileFormat,\n labels.desktopFormat,\n isMobile\n )\n ),\n datasets: listOfDataForEntities.map(data => ({\n label: data.label,\n data: data.entities.map(p => p.value),\n borderColor: data.colors.border,\n backgroundColor: data.colors.background,\n pointBackgroundColor: data.colors.point,\n borderWidth: 3,\n })),\n },\n options: this._options(),\n };\n };\n\n _mobile = () => {user.initials}
\n \n
\n {user.name.capitalize()}
\n {locale().dashboard.greeting}
\n \n
\n \n \n {this._moneyFlowChart()}\n \n
\n {this._financialStatsNode()}
\n \n {showResourcesHeader && (\n \n \n {cellInfo.nameExtractor(resourceData.resource)}\n
\n ))}\n \n )}\n \n {times.map(time => {\n return (\n \n \n {String.timeAt(time)}\n
\n {resourcesData.map(resourceData =>\n this._renderCell(resourceData, time)\n )}\n \n );\n })}\n \n
\n );\n }\n };\n\n render() {\n const {\n showAppointment,\n appointment,\n labelExtractor,\n indexInCell,\n height,\n widthCoef,\n } = this.props;\n const isIndividualAppointment = appointment.events.length === 1;\n const isOneUserParticipating = appointment.users.length === 1;\n\n const labelInfo = labelExtractor(appointment);\n\n let event;\n if (isIndividualAppointment) {\n event = appointment.events[0];\n } else {\n event = {\n patient_name: `${locale().schedule.number_of_participants}: ${\n appointment.events.length\n }`,\n name: locale().appointments.group_treatment,\n };\n }\n\n const width = 100 / widthCoef;\n\n return (\n \n {locale().appointments.cancelled}\n
\n )}\n \n
\n \n\n \n {Date.formatAppointment(appointment.date, appointment.duration)}\n
\n \n {labelInfo && (\n
\n )}\n {this._birthdayIcon()}\n \n \n {labelInfo.label}\n
\n \n
\n \n );\n }\n}\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n showAppointment: () =>\n dispatch(actions.showAppointment(ownProps.appointment.id)),\n };\n};\n\nAppointment = connect(null, mapDispatchToProps)(Appointment);\n\nexport default Appointment;\n","import Appointment from './_Appointment';\n\nexport default Appointment;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './_OccypuingBlock.module.scss';\n\nclass OccupyingBlock extends Component {\n static propTypes = {\n appointments: PropTypes.array.isRequired,\n };\n\n render() {\n // NOT YET IMPLEMENTED\n return ;\n }\n}\n\nexport default OccupyingBlock;\n","import CalendarResources from './_CalendarResources';\nimport Appointment from './_Appointment';\nimport OccupyingBlock from './_OccupyingBlock';\n\nexport default CalendarResources;\n\nexport { Appointment, OccupyingBlock };\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport PropTypes from 'prop-types';\nimport styles from './_CalendarView.module.scss';\nimport PageContainer from 'ui/PageContainer';\nimport { Card } from 'ui/Card';\nimport Icon from 'ui/Icon';\nimport CalendarResources, {\n Appointment,\n OccupyingBlock,\n} from './_CalendarResources';\nimport { connect, selectors } from 'util/redux';\n\nconst HOURS_CHUNK = 4; // Works properly only with 4 for now\n\n// When choosing height make sure time and patient name fits to 30 min appointments\nconst CELL_INFO = {\n appointment: {\n component: Appointment,\n itemsGrouped: false,\n nameExtractor: resource => resource.name,\n optimal_width: 150,\n max_optimal_width: 1135,\n height: 32,\n margin: 4,\n time: 75,\n },\n occupation: {\n component: OccupyingBlock,\n itemsGrouped: true,\n nameExtractor: resource => resource.short_name,\n optimal_width: 70,\n max_optimal_width: 70,\n height: 32,\n margin: 4,\n time: 75,\n },\n};\n\nconst RESOURCE_INFO = {\n user: {\n resourcesToShow: props => {\n let usersToShow;\n if (!props.selectedUserId) {\n usersToShow = props.users.sortBy(user =>\n user.id === props.currentUser.id ? ' ' : user.name\n );\n } else {\n usersToShow = props.users.filter(\n user => user.id === props.selectedUserId\n );\n }\n\n return usersToShow;\n },\n appointmentsForResource: (props, resource) =>\n props.appointments.filter(\n appointment =>\n appointment.users.filter(u => u.id === resource.id).length > 0\n ),\n labelExtractor: appointment =>\n appointment.location\n ? {\n label: appointment.location.short_name,\n color: appointment.location.color,\n }\n : null,\n },\n location: {\n resourcesToShow: props => {\n let locationsToShow;\n if (!props.selectedLocationId) {\n const noLocation = {\n id: null,\n name: locale().schedule.no_location_name,\n short_name: locale().schedule.no_location_short_name,\n };\n locationsToShow = props.locations.sortBy('name');\n locationsToShow = [...locationsToShow, noLocation];\n } else {\n locationsToShow = props.locations.filter(\n location => location.id === props.selectedLocationId\n );\n }\n\n return locationsToShow;\n },\n appointmentsForResource: (props, resource) =>\n props.appointments.filter(appointment =>\n resource.id\n ? appointment.location && appointment.location.id === resource.id\n : !appointment.location\n ),\n labelExtractor: appointment => ({\n label: appointment.users[0].short_name,\n color: appointment.users[0].color,\n }),\n },\n};\n\nclass CalendarView extends Component {\n static CELL_TYPES = Object.keys(CELL_INFO);\n static RESOURCE_TYPES = Object.keys(RESOURCE_INFO);\n\n static propTypes = {\n users: PropTypes.array.isRequired,\n locations: PropTypes.array.isRequired,\n appointments: PropTypes.array.isRequired,\n selectedUserId: PropTypes.string,\n selectedLocationId: PropTypes.string,\n date: PropTypes.object.isRequired,\n cellType: PropTypes.oneOf(CalendarView.CELL_TYPES).isRequired,\n resourcesType: PropTypes.oneOf(CalendarView.RESOURCE_TYPES).isRequired,\n };\n\n static defaultProps = {\n selectedUserId: null,\n selectedLocationId: null,\n };\n\n constructor(props) {\n super(props);\n this.state = this._calculatePagination();\n }\n\n componentDidUpdate(prevProps) {\n const { selectedUserId, selectedLocationId, resourcesType } = this.props;\n\n if (\n prevProps.selectedUserId !== selectedUserId ||\n prevProps.selectedLocationId !== selectedLocationId ||\n prevProps.resourcesType !== resourcesType\n ) {\n this.setState(this._calculatePagination());\n }\n }\n\n // Fallback infos to *default* in case it is changed somehow to invalid value (from url)\n _cellInfo = () => CELL_INFO[this.props.cellType] || CELL_INFO.appointment;\n\n _resourceInfo = () =>\n RESOURCE_INFO[this.props.resourcesType] || RESOURCE_INFO.user;\n\n _calculatePagination = () => {\n const cellInfo = this._cellInfo();\n const resourceInfo = this._resourceInfo();\n\n // Calculating free screen size\n let screenSize;\n if (window.innerWidth > PageContainer.SCREEN_SIZE_WITH_NO_PADDING) {\n screenSize = PageContainer.MAX_WIDTH;\n } else {\n screenSize =\n window.innerWidth > PageContainer.MAX_WIDTH\n ? PageContainer.MAX_WIDTH\n : window.innerWidth;\n screenSize -= 2 * PageContainer.MAX_PADDING;\n screenSize -= 8; // Scrollbar\n }\n screenSize -= cellInfo.time; // Sub time cell size\n\n const numberOfResources = resourceInfo.resourcesToShow(this.props).length;\n const margins = 2 * cellInfo.margin;\n\n // Calculating optimal width cell for free screen\n let maxCellWidth =\n (screenSize - margins * numberOfResources) / numberOfResources;\n\n if (maxCellWidth > cellInfo.max_optimal_width) {\n maxCellWidth = cellInfo.max_optimal_width;\n } else if (maxCellWidth < cellInfo.optimal_width) {\n maxCellWidth = cellInfo.optimal_width;\n } else {\n maxCellWidth = Math.floor(maxCellWidth);\n }\n maxCellWidth += margins;\n\n // Calculating pagination - number of visible resources in view\n let paginationSize = Math.floor(screenSize / maxCellWidth);\n if (paginationSize < 1) {\n paginationSize = 1;\n }\n\n return {\n start: 0,\n end: paginationSize,\n paginationSize: paginationSize,\n };\n };\n\n _moveLeft = () => {\n const { start, end } = this.state;\n if (start > 0) {\n this.setState({ start: start - 1, end: end - 1 });\n }\n };\n\n _moveRight = () => {\n const { start, end } = this.state;\n\n if (end < this._resourceInfo().resourcesToShow(this.props).length) {\n this.setState({ start: start + 1, end: end + 1 });\n }\n };\n\n _getNearestChunk = decimalTime =>\n parseFloat(\n (Math.round(decimalTime * HOURS_CHUNK) / HOURS_CHUNK).toFixed(2)\n );\n\n _resourcesData = () => {\n const resourceInfo = this._resourceInfo();\n let minStartTime = 23.99,\n maxEndTime = 0;\n\n const resourcesData = resourceInfo\n .resourcesToShow(this.props)\n .map(resource => {\n const appointments = resourceInfo.appointmentsForResource(\n this.props,\n resource\n );\n\n // Finding min and max time\n const firstAppointmentForResource = appointments.sortBy(appointment =>\n appointment.date.getDecimalHours()\n )[0];\n\n if (firstAppointmentForResource) {\n const lastAppointmentForResource = appointments.sortBy(appointment =>\n appointment.date.addMinutes(appointment.duration).getDecimalHours()\n )[appointments.length - 1];\n\n const startTime = this._getNearestChunk(\n firstAppointmentForResource.date.getDecimalHours()\n );\n let endTime = lastAppointmentForResource.date\n .addMinutes(lastAppointmentForResource.duration)\n .getDecimalHours();\n\n // When it breaks over midnight\n if (endTime < lastAppointmentForResource.date.getDecimalHours()) {\n endTime = 23.99;\n }\n\n if (startTime < minStartTime) {\n minStartTime = startTime;\n }\n if (endTime > maxEndTime) {\n maxEndTime = endTime;\n }\n }\n\n return { resource, appointments };\n });\n\n return { resourcesData, minStartTime, maxEndTime };\n };\n\n render() {\n const { date } = this.props;\n const { start, end, paginationSize } = this.state;\n const { resourcesData, minStartTime, maxEndTime } = this._resourcesData();\n const arrowsVisible = resourcesData.length > paginationSize;\n\n const cellInfo = this._cellInfo();\n const resourceInfo = this._resourceInfo();\n\n return (\n {event.patient_name}
\n {event.diagnose_name && {event.diagnose_name}
}\n {event.name}
\n \n
\n \n {date.format('EEEE, dd. MMMM yyyy.').capitalize()}\n
\n {arrowsVisible && (\n \n
\n )}\n \n \n {option.label}\n
\n );\n\n _options = () => {\n const { locations, personalLocation } = this.props;\n\n let options = [...locations.sortBy('name')];\n if (personalLocation) {\n options.push({ id: null, name: locale().locations.personal_location });\n }\n\n return options.map(location => ({\n value: location.id,\n label: location.name,\n color: location.color,\n }));\n };\n\n _placeholder = () => locale().locations.all_locations;\n\n _mobile = () => {\n const {\n value,\n mobileOpen,\n onMobileClose,\n onChange,\n mobileClearable,\n } = this.props;\n\n let options = this._options();\n if (mobileClearable) {\n options = [\n { value: null, label: this._placeholder(), color: '#949bac' },\n ...options,\n ];\n }\n\n return (\n \n {option.label}\n
\n );\n\n _options = () => {\n const { value, serviceItems } = this.props;\n\n return serviceItems\n .filter(item => !item.appointment_date || item.id === value)\n .map(serviceItem => ({\n value: serviceItem.id,\n label: serviceItem.name,\n attention: !!serviceItem.appointments.find(a => a.cancelled),\n }));\n };\n\n render() {\n const { value, onChange } = this.props;\n\n return (\n \n
\n );\n }\n}\n\nexport default AddCircle;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport PropTypes from 'prop-types';\nimport MobileDesktopRender from 'ui/MobileDesktopRender';\nimport ServiceSelect from './_ServiceSelect';\nimport ServiceItemSelect from './_ServiceItemSelect';\nimport AddCircle from './../_AddCircle';\nimport { FormRow, FormColumn, FormLabel } from 'ui/Form';\nimport { connect, actions, selectors } from 'util/redux';\n\nclass TreatmentSelect extends Component {\n static propTypes = {\n patientId: PropTypes.string.isRequired,\n serviceId: PropTypes.string,\n serviceItemId: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n selectClassName: PropTypes.string,\n };\n\n static defaultProps = {\n serviceId: null,\n serviceItemId: null,\n selectClassName: null,\n };\n\n componentDidMount() {\n const { fetchServicesForPatient, serviceId } = this.props;\n\n fetchServicesForPatient();\n this._fetchItems(serviceId);\n }\n\n componentDidUpdate(prevProps) {\n const { serviceId } = this.props;\n\n if (prevProps.serviceId !== serviceId) {\n this._fetchItems(serviceId);\n }\n }\n\n _fetchItems = serviceId => {\n const { fetchItemsForService } = this.props;\n\n if (serviceId) {\n fetchItemsForService(serviceId).then(serviceItems => {\n if (serviceItems.length === 1) {\n this._changeServiceItemId(serviceItems[0].id);\n }\n });\n }\n };\n\n _changeServiceId = serviceId => {\n const { onChange } = this.props;\n const currentServiceId = this.props.serviceId;\n\n // We don't wanna reset serviceItemId if same service is selected twice\n if (currentServiceId !== serviceId) {\n onChange(serviceId, null);\n }\n };\n\n _changeServiceItemId = serviceItemId => {\n const { onChange, serviceId } = this.props;\n\n onChange(serviceId, serviceItemId);\n };\n\n _serviceSelectNode = () => {\n const { services, serviceId, selectClassName } = this.props;\n\n return (\n \n
\n \n
\n );\n };\n\n _addNewServiceNode = () => {\n const { patientId, startAssigningService } = this.props;\n\n return \n
\n )}\n \n this._removePatient(data.key)}\n />\n
\n \n this._changePatientId(data.key, value)}\n autoSelectOnCreation={true}\n />\n
\n );\n };\n\n _addNewPatientNode = () => {\n const { newPatient } = this.props;\n\n return \n {this._removePatientNode(data)} \n \n {this._selectPatientNode(data)} \n {this._addNewPatientNode()}\n \n {data.patientId && this._selectTreatmentNode(data)}\n
\n ))}\n \n \n {this._removePatientNode(data)}\n {this._selectPatientNode(data)} \n {this._addNewPatientNode()} \n {data.patientId && this._selectTreatmentNode(data)}\n \n
\n ))}\n \n
\n \n {locale().appointments.add_patient}\n
\n \n {errors._global}\n
\n );\n }\n\n return (\n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n currentUser: selectors.getCurrentUser(state),\n employees: selectors.getEmployees(state),\n locations: selectors.getLocations(state),\n };\n};\n\nconst mapDispatchToProps = dispatch => {\n return {\n fetchEmployees: () => dispatch(actions.fetchEmployees({ archived: false })),\n fetchLocations: () => dispatch(actions.fetchLocations()),\n predictAppointment: data => dispatch(actions.predictAppointment(data)),\n };\n};\n\nAppointmentForm = connect(mapStateToProps, mapDispatchToProps)(AppointmentForm);\n\nexport default AppointmentForm;\n","import AppointmentForm from './AppointmentForm';\n\nexport default AppointmentForm;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './DateRange.module.scss';\nimport DatePicker from 'ui/DatePicker';\nimport { Select } from 'ui/Form';\nimport Icon from 'ui/Icon';\n\nclass DateRange extends Component {\n static propTypes = {\n range: PropTypes.shape({\n from_date: PropTypes.instanceOf(Date).isRequired,\n to_date: PropTypes.instanceOf(Date).isRequired,\n }).isRequired,\n ranges: PropTypes.array.isRequired,\n onChange: PropTypes.func.isRequired,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n customVisible: false,\n };\n }\n\n _valueFromRange = () => {\n const { ranges, range } = this.props;\n\n const rangeOfInterest = ranges\n .filter(r => r.value)\n .find(\n r =>\n r.value.from_date.effectivelySame(range.from_date) &&\n r.value.to_date.effectivelySame(range.to_date)\n );\n\n return rangeOfInterest ? rangeOfInterest.value : null;\n };\n\n _onChange = range => {\n const { onChange } = this.props;\n\n if (range === null) {\n this.setState({ customVisible: true });\n } else {\n onChange(range);\n }\n };\n\n _triggerCustomChange = (fromDate, toDate) =>\n this.props.onChange({\n from_date: fromDate,\n to_date: toDate,\n });\n\n _changeCustomFrom = fromDate => {\n let toDate = this.props.range.to_date;\n if (fromDate > toDate) {\n toDate = fromDate.endOfWork();\n }\n\n this._triggerCustomChange(fromDate, toDate);\n };\n\n _changeCustomTo = toDate => {\n let fromDate = this.props.range.from_date;\n if (fromDate > toDate) {\n fromDate = toDate.startOfWork();\n }\n\n this._triggerCustomChange(fromDate, toDate);\n };\n\n _closeCustom = () => {\n const { ranges } = this.props;\n this.setState({ customVisible: false }, () =>\n this._onChange(ranges[0].value)\n );\n };\n\n render() {\n const { range, ranges } = this.props;\n const { customVisible } = this.state;\n const value = this._valueFromRange();\n\n if (customVisible || !value) {\n return (\n \n \n \n \n \n
\n {locations.length > 0 && (\n \n \n \n \n \n
\n )}\n {employees.length > 1 && (\n \n \n \n \n \n
\n )}\n {errorNode}\n \n
\n \n
\n );\n } else {\n return (\n \n
\n \n
\n \n
\n \n
\n );\n };\n\n _filters = () => {\n const { employees, locations, query } = this.props;\n const {\n resourcesTypeBottomSheetOpen,\n employeesFilterBottomSheetOpen,\n locationFilterBottomSheetOpen,\n } = this.state;\n\n return (\n \n window.history.back() // Scheduling from PatientService page\n }\n onDateChange={this._changeAppointmentDate}\n onLocationChange={this._changeLocation}\n />\n
\n );\n };\n\n _mobileHeader = () => {\n const { employees, locations, query } = this.props;\n const { dateRangeBottomSheetOpen, formVisible } = this.state;\n\n return (\n \n
\n \n \n {this._filters()}\n {locations.length === 0 && this._dateFilter()}\n \n \n \n
\n {locations.length > 0 && this._dateFilter()}\n \n \n
\n {note.content}
\n \n \n {note.user_name}\n \n {note.date.format('dd.MM.yyyy.')}\n {note.progress_rate && (\n
\n \n );\n };\n\n render() {\n const { notes } = this.props;\n const { confirmationDialogOpen } = this.state;\n\n if (notes.length === 0) {\n return null;\n } else {\n return (\n \n {notes.sortBy('date').reverse().map(this._renderNote)}\n
\n );\n }\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n editNote: note => dispatch(actions.editPatientNote(note)),\n destroyNote: id => dispatch(actions.destroyPatientNote(id)),\n };\n};\n\nPatientNotesList = connect(null, mapDispatchToProps)(PatientNotesList);\n\nexport default PatientNotesList;\n","import PatientNotesList from './PatientNotesList';\n\nexport default PatientNotesList;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport styles from './AppointmentShow.module.scss';\nimport LoadingIndicator from 'ui/Activity/LoadingIndicator';\nimport FailureInfo from 'ui/Activity/FailureInfo';\nimport MobileDesktopRender from 'ui/MobileDesktopRender';\nimport Icon, { BirthdayIcon } from 'ui/Icon';\nimport HeaderBar from 'ui/HeaderBar';\nimport Dropdown from 'ui/Dropdown';\nimport CancelConfirmationDialog from './_CancelConfirmationDialog';\nimport ActionCenter from 'util/action_center';\nimport PatientNotesList from 'patients/PatientNotesList';\nimport AppointmentForm from 'schedule/AppointmentForm';\nimport { loadingStates, connect, actions, selectors } from 'util/redux';\n\nclass AppointmentShow extends Component {\n constructor(props) {\n super(props);\n this.state = {\n loadingState: loadingStates.fetching,\n cancelConfirmationDialogOpen: false,\n editingMode: false,\n };\n }\n\n componentDidMount() {\n this._fetch();\n ActionCenter.subscribe('createPatientNote', this._fetch);\n ActionCenter.subscribe('updatePatientNote', this._fetch);\n ActionCenter.subscribe('destroyPatientNote', this._fetch);\n }\n\n componentWillUnmount() {\n ActionCenter.unsubscribe('createPatientNote', this._fetch);\n ActionCenter.unsubscribe('updatePatientNote', this._fetch);\n ActionCenter.unsubscribe('destroyPatientNote', this._fetch);\n }\n\n _isCancelled = () => this.props.appointment.cancelled;\n\n _contextMenuItems = () => {\n if (this._isCancelled()) {\n return null;\n } else {\n return [\n {\n label: locale().actions.edit,\n onClick: this._enterEditingMode,\n },\n {\n label: locale().appointments.cancel_appointment,\n onClick: this._openCancelConfirmationDialog,\n type: 'attention',\n },\n ];\n }\n };\n\n _enterEditingMode = () => this.setState({ editingMode: true });\n\n _quitEditingMode = () => this.setState({ editingMode: false });\n\n _openCancelConfirmationDialog = () =>\n this.setState({ cancelConfirmationDialogOpen: true });\n\n _closeCancelConfirmationDialog = () =>\n this.setState({ cancelConfirmationDialogOpen: false });\n\n _fetch = () => {\n const { fetchAppointment } = this.props;\n\n this.setState({ loadingState: loadingStates.fetching });\n fetchAppointment()\n .then(() => this.setState({ loadingState: loadingStates.present }))\n .catch(response => {\n console.error(response);\n if (response.isNotFound && response.isNotFound()) {\n this.setState({ loadingState: loadingStates.missing });\n } else {\n this.setState({ loadingState: loadingStates.failed });\n }\n });\n };\n\n _goBack = () => window.history.back();\n\n _cancelAppointment = data => {\n const { cancelAppointment } = this.props;\n cancelAppointment(data);\n };\n\n _newPatientNote = serviceItem => {\n const { newPatientNote } = this.props;\n\n newPatientNote({\n service_item_id: serviceItem.id,\n patient_id: serviceItem.patient_id,\n });\n };\n\n _mobileHeader = () => {\n const { appointment } = this.props;\n const title = appointment\n ? appointment.date.format('dd.MM.yyyy. HH:mm')\n : '';\n\n return \n
\n )}\n \n
\n \n \n updateAppointment({ id: appointment.id, ...data })\n }\n onFinish={this._quitEditingMode}\n date={appointment.date}\n locationId={appointment.location ? appointment.location.id : null}\n userIds={appointment.users.map(u => u.id)}\n patientsData={appointment.events.map(si => ({\n patientId: si.patient_id,\n serviceId: si.service_id,\n serviceItemId: si.id,\n }))}\n editingMode={true}\n />\n
\n );\n };\n\n _presenter = () => {\n const {\n appointment,\n newServicePayment,\n showPatient,\n showService,\n } = this.props;\n\n // Can be null for a moment when destroyed\n if (!appointment) {\n return null;\n }\n\n const contextMenuItems = this._contextMenuItems();\n\n return (\n \n {this._isCancelled() && (\n
\n \n \n ))}\n \n \n \n
\n )}\n \n {locale().appointments.cancelled} \n {appointment.cancelled_by &&\n `- ${appointment.cancelled_by.name}`}\n
\n {appointment.cancel_reason && (\n \n {appointment.cancel_reason}\n
\n )}\n \n \n {appointment.date.format('EEEE, dd. MMMM yyyy.').capitalize()}\n \n
\n \n {contextMenuItems &&
\n \n {Date.formatAppointment(appointment.date, appointment.duration)}\n {appointment.location && ` | ${appointment.location.name}`}\n
\n \n {appointment.users.map(user => (\n
\n \n
\n ))}\n \n {appointment.events.map(event => (\n this._newPatientNote(event)}\n >\n {locale().patient_notes.add_notes}\n
\n \n
\n \n showPatient(event.patient_id)}\n >\n {event.display_name}\n
\n \n
\n {event.name}
\n {event.notes.length > 0 && (\n \n
\n )}\n \n showService(event.service_id)}\n >\n {locale().appointments.show_service}\n
\n \n newServicePayment(event.service_id)}\n >\n {locale().service_payments.title}\n
\n \n {activityNode}\n
\n )}\n {this._canLoadMore() && (\n \n
\n );\n } else {\n return locale().patients.no_debt;\n }\n };\n\n _openConfirmationDialog = () =>\n this.setState({ confirmationDialogOpen: true });\n\n _closeConfirmationDialog = () =>\n this.setState({ confirmationDialogOpen: false });\n\n _changeActiveState = () => {\n const { patient, activatePatient, archivePatient } = this.props;\n\n if (patient.archived) {\n activatePatient(patient.id);\n } else {\n archivePatient(patient.id);\n }\n };\n\n _showPatient = () => this.props.showPatient(this.props.patient.id);\n\n _onDestroy = () => {\n const { patient, destroyPatient } = this.props;\n destroyPatient(patient.id);\n };\n\n _circle = () => (\n \n
\n );\n };\n\n render() {\n const { patient } = this.props;\n const { confirmationDialogOpen } = this.state;\n\n return (\n \n
\n \n
\n \n
\n \n {this._circle()}\n
\n {patient.name}
\n \n {patient.diagnose && patient.diagnose.name}\n
\n \n
\n \n
\n \n {patient.birth_date\n ? patient.birth_date.format('d. MMMM yyyy.')\n : '-'}\n
\n \n
\n \n {patient.parent_name || '-'}\n
\n \n
\n \n {patient.phone_number || '-'}\n
\n \n
\n {patient.notes || '-'}
\n \n
\n {this._debtNode()}
\n {this._body()}
;\n\n render() {\n const { patients } = this.props;\n\n if (patients.length === 0) {\n return null;\n }\n\n return (\n \n \n {diagnoses.map(diagnose => (\n this._openBottomSheet(diagnose.id)}\n />\n ))}\n \n
\n );\n };\n\n _desktopFooter = () => {\n const { diagnoses } = this.props;\n\n return (\n \n {diagnoses.map(diagnose => (\n
\n );\n };\n\n render() {\n const { open, onClose, diagnoses } = this.props;\n const {\n loadingState,\n data,\n isSaving,\n errors,\n confirmationDialogOpen,\n diagnoseId,\n } = this.state;\n\n return (\n \n
\n ))}\n {diagnose.name}
\n \n this._openConfirmationDialog(diagnose.id)}\n />\n
\n \n \n
\n \n );\n }\n}\n\nexport default Doughnut;\n","import DiagnoseDoughnut from './_DiagnoseDoughnut';\n\nexport default DiagnoseDoughnut;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport PropTypes from 'prop-types';\nimport Doughnut from 'ui/Chart/Doughnut';\n\nclass DiagnoseDoughnut extends Component {\n static propTypes = {\n stats: PropTypes.array.isRequired,\n };\n\n render() {\n const { stats } = this.props;\n\n return (\n \n
\n \n {statsData.map((data, i) => (\n \n \n ))}\n
\n \n
\n \n
\n );\n };\n\n render() {\n const { patients, fetchPatients, newPatient } = this.props;\n const { loadingState, diagnosesDialogOpen } = this.state;\n const query = this._cleanedQuery();\n\n // user_id is always present so we can not check it here\n const shouldShowEmptyState =\n loadingState === loadingStates.present &&\n patients.length === 0 &&\n !query.archived &&\n !query.search_str &&\n !query.diagnose_id &&\n !query.patient_referral_id;\n\n return (\n \n
\n {this._filters()}
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n );\n };\n\n render() {\n const { treatment } = this.props;\n const { confirmationDialogOpen } = this.state;\n\n return (\n {treatment.name}
\n \n
\n {treatment.duration} min
\n \n
\n \n
\n \n );\n };\n\n render() {\n const { packageTreatment } = this.props;\n const { confirmationDialogOpen } = this.state;\n\n return (\n {packageTreatment.name}
\n \n
\n \n {this._numberOfTreatmentsLabel()}\n
\n \n
\n \n
\n );\n } else {\n return (\n \n {locale().packages.new}\n
\n )\n }\n />\n );\n };\n\n _mobile = () => \n \n \n ))}\n
\n );\n };\n\n _mobile = () => (\n {this._headline()}
\n {this._items().map(item => (\n \n {item.title}\n
\n \n
\n \n {item.chartStats\n .sortBy('amount')\n .reverse()\n .map((elem, i) => (\n
\n \n
\n ))}\n {elem.label}
\n \n
\n \n
\n \n
\n \n
\n \n
\n {expense.description && (\n {expense.expense_type.name}
\n {this._expenseDate()}
\n \n \n
\n )}\n {expense.description}
\n \n
\n \n
\n {open && \n \n
\n {mainDetails}
\n {this.props.children}
}\n \n );\n };\n\n _desktop = () => this.props.children;\n\n render() {\n return (\n \n \n
\n \n \n \n \n \n
\n \n {patient.name}\n
\n {patient.diagnose && (\n {patient.diagnose.name}
\n )}\n \n {this._renderUsers(patient.users.filter(u => !u.archived))}\n {this._renderUsers(patient.users.filter(u => u.archived))}\n
\n \n {patient.archived && (\n
\n \n
\n )}\n \n
\n \n
\n \n {patient.parent_name && (\n
\n \n );\n };\n\n _mobile = () => {\n const { patient, navigation } = this.props;\n const { bottomSheetOpen } = this.state;\n\n return (\n \n
\n )}\n {patient.email && (\n \n
\n )}\n {patient.phone_number && (\n \n
\n )}\n \n {this._content()}\n {navigation}\n
\n );\n };\n\n render() {\n const { patient } = this.props;\n const { confirmationDialogOpen } = this.state;\n\n return (\n \n {alwaysOpened && item.content}\n {!alwaysOpened && (\n
\n )}\n {expanded && item.content}\n \n );\n })}\n \n this._toggle(item.id)}\n >\n {item.title}\n {!expanded && (\n
\n {item.extra}\n {intro}
\n \n );\n }\n}\n\nexport default EmptyState;\n","import EmptyState from './_EmptyState';\n\nexport default EmptyState;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './_AppointmentsListItem.module.scss';\nimport classNames from 'classnames';\nimport MultiOrgRender from 'ui/MultiOrgRender';\nimport Icon from 'ui/Icon';\nimport { connect, actions } from 'util/redux';\n\nclass AppointmentsListItem extends Component {\n static propTypes = {\n patientId: PropTypes.string.isRequired,\n appointment: PropTypes.object.isRequired,\n };\n\n _serviceItemForPatient = () => {\n const { patientId, appointment } = this.props;\n\n return appointment.events.find(e => e.patient_id === patientId);\n };\n\n render() {\n const { appointment, showAppointment } = this.props;\n const serviceItem = this._serviceItemForPatient();\n\n const isCancelled = appointment.cancelled;\n\n return (\n \n
\n {serviceItem.name}
\n \n {appointment.users.map(user => (\n \n {user.name}\n
\n ))}\n \n \n \n {\n const date = new Date.fromString(dateKey);\n\n return {\n id: dateKey,\n title: date.format('MMMM yyyy').capitalize(),\n content: (\n
\n );\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n const patientId = ownProps.patientId;\n\n return {\n appointments: selectors.getAppointmentsForPatient(state, patientId),\n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n const patientId = ownProps.patientId;\n\n return {\n fetchAppointmentsForPatient: ({ clearOld, page }) =>\n dispatch(\n actions.fetchAppointmentsForPatient({ patientId, clearOld, page })\n ),\n showService: id => dispatch(actions.showService(id)),\n openSchedulePage: data => dispatch(actions.openSchedulePage(data)),\n };\n};\n\nAppointmentsList = connect(\n mapStateToProps,\n mapDispatchToProps\n)(AppointmentsList);\n\nexport default AppointmentsList;\n","import AppointmentsList from './_AppointmentsList';\n\nexport default AppointmentsList;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport PropTypes from 'prop-types';\nimport styles from './_ServicesListItem.module.scss';\nimport classNames from 'classnames';\nimport MobileDesktopRender from 'ui/MobileDesktopRender';\nimport { SectionListItem } from 'ui/SectionList';\nimport { CardRow } from 'ui/Card';\nimport { MoneyText } from 'ui/Money';\nimport { Checkbox } from 'ui/Form';\nimport Icon from 'ui/Icon';\nimport ConfirmationDialog from 'ui/Dialog/ConfirmationDialog';\nimport { connect, actions, selectors } from 'util/redux';\n\nclass ServicesListItem extends Component {\n static propTypes = {\n service: PropTypes.object.isRequired,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n confirmationDialogOpen: false,\n };\n }\n\n _openConfirmationDialog = () =>\n this.setState({ confirmationDialogOpen: true });\n\n _closeConfirmationDialog = () =>\n this.setState({ confirmationDialogOpen: false });\n\n _destroyService = () => {\n const { destroyService, service } = this.props;\n\n destroyService(service.id);\n };\n\n _moreOptions = () => {\n const { service, newServicePayment } = this.props;\n\n return [\n {\n label: locale().service_payments.title,\n onClick: () => newServicePayment(service.id),\n },\n {\n label: locale().actions.destroy,\n onClick: () => this._openConfirmationDialog(service.id),\n type: 'attention',\n },\n ];\n };\n\n _isPackage = () => this.props.service.number_of_treatments > 1;\n\n _isEverythingScheduled = () =>\n this.props.service.number_of_treatments ===\n this.props.service.number_of_active_appointments;\n\n _scheduledText = () => {\n const { service } = this.props;\n\n if (this._isPackage()) {\n return locale().services.appointments_scheduled(\n service.number_of_active_appointments,\n service.number_of_treatments\n );\n } else if (service.last_appointment_cancelled) {\n return locale().appointments.cancelled;\n } else if (!this._isEverythingScheduled()) {\n return locale().appointments.not_scheduled;\n }\n\n return undefined;\n };\n\n _debtNode = () => {\n const { service } = this.props;\n\n if (service.debt > 0) {\n return (\n \n {appointmentMap[dateKey].sortBy('date').map(appointment => (\n
\n ),\n };\n })}\n firstOpened={hasAppointmentsInFirstMonth}\n />\n \n {firstFetchCompleted && this.props.appointments.length === 0 && (\n \n
\n );\n } else {\n return null;\n }\n };\n\n _mobile = () => {\n const { showService, service } = this.props;\n\n return (\n \n
\n \n \n {this._scheduledText()}\n
\n \n {service.invoiced && (\n toggleServiceForInvoicing(service.id)}\n value={serviceIdsForInvoicing.includes(service.id)}\n />\n )}\n {service.name}\n
\n \n
\n )}\n {!service.invoiced && (\n \n {this._debtNode()}\n {service.patient_invoice && (\n {\n e.stopPropagation();\n e.nativeEvent.stopImmediatePropagation();\n\n showPatientInvoice(service.patient_invoice.id);\n }}\n >\n {service.patient_invoice.number}\n
\n )}\n \n {service.effectively_active_from.format('dd.MM.yyyy.')}\n
\n \n \n \n );\n };\n\n render() {\n const { confirmationDialogOpen } = this.state;\n\n return (\n \n
\n );\n } else {\n return null;\n }\n };\n\n render() {\n const { loadingState } = this.state;\n const firstFetchCompleted = loadingState === loadingStates.present;\n\n const serviceMap = this._serviceMap();\n const dateKeys = Object.keys(serviceMap).sortBy('').reverse();\n\n return (\n \n \n {\n const date = new Date.fromString(dateKey);\n const services = serviceMap[dateKey];\n\n return {\n id: dateKey,\n title: date.format('MMMM yyyy').capitalize(),\n extra: this._debtForMonth(services),\n content: (\n \n {services\n .sortBy('effectively_active_from')\n .reverse()\n .map(service => (\n \n ),\n };\n })}\n titleClassName={styles['groupTitle']}\n />\n \n {firstFetchCompleted && this.props.services.length === 0 && (\n
\n );\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n const patientId = ownProps.patientId;\n\n return {\n services: selectors.getServicesForPatient(state, patientId),\n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n const patientId = ownProps.patientId;\n\n return {\n fetchServicesForPatient: ({ clearOld, page }) =>\n dispatch(actions.fetchServicesForPatient({ patientId, clearOld, page })),\n fetchOneService: id => dispatch(actions.fetchOneService(id)),\n clearServicesForInvoicing: () =>\n dispatch(actions.clearServicesForInvoicing()),\n };\n};\n\nServicesList = connect(mapStateToProps, mapDispatchToProps)(ServicesList);\n\nexport default ServicesList;\n","import ServicesList from './_ServicesList';\n\nexport default ServicesList;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport PropTypes from 'prop-types';\nimport styles from './_ServicePaymentsList.module.scss';\nimport MobileDesktopRender from 'ui/MobileDesktopRender';\nimport Paginator from 'navigation/Paginator';\nimport Accordion from 'ui/Accordion';\nimport EmptyState from './../_EmptyState';\nimport { SectionListItem } from 'ui/SectionList';\nimport { CardRow } from 'ui/Card';\nimport { MoneyText } from 'ui/Money';\nimport { PaymentIcon } from 'ui/Icon';\nimport MultiOrgRender from 'ui/MultiOrgRender';\nimport paymentsImg from 'media/images/patients/payments.png';\nimport { loadingStates, connect, actions, selectors } from 'util/redux';\n\nclass ServicePaymentsList extends Component {\n static propTypes = {\n patientId: PropTypes.string.isRequired,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n loadingState: loadingStates.fetching,\n };\n }\n\n _onFirstLoad = () => this.setState({ loadingState: loadingStates.present });\n\n _paymentTypeIcon = payment => (\n \n
\n \n );\n };\n\n _paymentsMap = () => {\n const { servicePayments } = this.props;\n const paymentsMap = {};\n\n servicePayments.forEach(payment => {\n const key = payment.date.format('yyyy-MM');\n\n paymentsMap[key] = [...(paymentsMap[key] || []), payment];\n });\n\n return paymentsMap;\n };\n\n render() {\n const { loadingState } = this.state;\n\n const firstFetchCompleted = loadingState === loadingStates.present;\n\n const paymentsMap = this._paymentsMap();\n const dateKeys = Object.keys(paymentsMap).sortBy('').reverse();\n\n return (\n \n {this._paymentTypeIcon(payment)}\n {payment.service.name}\n
\n \n \n \n
\n \n {payment.created_by.name}\n
\n \n {payment.date.format('dd.MM.yyyy.')}\n
\n \n
\n \n \n {\n const date = new Date.fromString(dateKey);\n\n return {\n id: dateKey,\n title: date.format('MMMM yyyy').capitalize(),\n content: (\n \n {paymentsMap[dateKey]\n .sortBy('date')\n .reverse()\n .map(payment => (\n this._mobileItem(payment)}\n desktop={() => this._desktopItem(payment)}\n />\n ))}\n \n ),\n };\n })}\n titleClassName={styles['groupTitle']}\n />\n \n {firstFetchCompleted && this.props.servicePayments.length === 0 && (\n
\n );\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n const patientId = ownProps.patientId;\n\n return {\n servicePayments: selectors.getPaymentsForPatient(state, patientId),\n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n const patientId = ownProps.patientId;\n\n return {\n fetchPaymentsForPatient: ({ clearOld, page }) =>\n dispatch(actions.fetchPaymentsForPatient({ patientId, clearOld, page })),\n showService: serviceId => dispatch(actions.showService(serviceId)),\n };\n};\n\nServicePaymentsList = connect(\n mapStateToProps,\n mapDispatchToProps\n)(ServicePaymentsList);\n\nexport default ServicePaymentsList;\n","import ServicePaymentsList from './_ServicePaymentsList';\n\nexport default ServicePaymentsList;\n","import ProgressChart from './_ProgressChart';\n\nexport default ProgressChart;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Line from 'ui/Chart/Line';\n\nclass ProgressChart extends Component {\n static propTypes = {\n notes: PropTypes.array.isRequired,\n };\n\n _labelFormat = date => date.format('dd. MMM');\n\n render() {\n const notes = this.props.notes.sortBy('date').slice(-20);\n\n return (\n \n {notesWithProgressRate.length > 1 && (\n
\n );\n }\n\n return bodyNode;\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n const patientId = ownProps.patientId;\n\n return {\n notes: selectors.getNotesForPatient(state, patientId),\n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n const patientId = ownProps.patientId;\n\n return {\n fetchNotesForPatient: () =>\n dispatch(actions.fetchNotesForPatient(patientId)),\n };\n};\n\nNotesList = connect(mapStateToProps, mapDispatchToProps)(NotesList);\n\nexport default NotesList;\n","import NotesList from './_NotesList';\n\nexport default NotesList;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport PropTypes from 'prop-types';\nimport styles from './_ReportsList.module.scss';\nimport LoadingIndicator from 'ui/Activity/LoadingIndicator';\nimport FailureInfo from 'ui/Activity/FailureInfo';\nimport EmptyState from './../_EmptyState';\nimport { CardRow } from 'ui/Card';\nimport reportImg from 'media/images/patients/report.jpg';\nimport { loadingStates, connect, actions, selectors } from 'util/redux';\n\nclass ReportsList extends Component {\n static propTypes = {\n patientId: PropTypes.string.isRequired,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n loadingState: loadingStates.fetching,\n };\n }\n\n componentDidMount() {\n const { fetchReportsForPatient } = this.props;\n\n this.setState({ loadingState: loadingStates.fetching });\n fetchReportsForPatient()\n .then(() => this.setState({ loadingState: loadingStates.present }))\n .catch(response => {\n console.error(response);\n this.setState({ loadingState: loadingStates.failed });\n });\n }\n\n render() {\n const { reports, showPatientReport } = this.props;\n const { loadingState } = this.state;\n\n let bodyNode;\n if (loadingState === loadingStates.fetching) {\n bodyNode = \n
\n )}\n \n
\n \n {reports\n .sortBy('date')\n .reverse()\n .map(report => (\n showPatientReport(report.id)}\n >\n
\n );\n }\n\n return bodyNode;\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n const patientId = ownProps.patientId;\n\n return {\n reports: selectors.getReportsForPatient(state, patientId),\n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n const patientId = ownProps.patientId;\n\n return {\n showPatientReport: id => dispatch(actions.showPatientReport(id)),\n fetchReportsForPatient: () =>\n dispatch(actions.fetchReportsForPatient(patientId)),\n };\n};\n\nReportsList = connect(mapStateToProps, mapDispatchToProps)(ReportsList);\n\nexport default ReportsList;\n","import ReportsList from './_ReportsList';\n\nexport default ReportsList;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport PropTypes from 'prop-types';\nimport styles from './_DocumentsListItem.module.scss';\nimport MobileDesktopRender from 'ui/MobileDesktopRender';\nimport { SectionListItem } from 'ui/SectionList';\nimport { CardRow } from 'ui/Card';\nimport ConfirmationDialog from 'ui/Dialog/ConfirmationDialog';\nimport { connect, actions } from 'util/redux';\n\nclass DocumentsListItem extends Component {\n static propTypes = {\n document: PropTypes.object.isRequired,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n confirmationDialogOpen: false,\n };\n this._contextMenuItems = [\n {\n label: locale().actions.edit,\n onClick: this._editDocument,\n },\n {\n label: locale().actions.download,\n onClick: this._openFile,\n },\n {\n label: locale().actions.destroy,\n onClick: this._openConfirmationDialog,\n type: 'attention',\n },\n ];\n }\n\n _openConfirmationDialog = () =>\n this.setState({ confirmationDialogOpen: true });\n\n _closeConfirmationDialog = () =>\n this.setState({ confirmationDialogOpen: false });\n\n _openFile = () => window.open(this.props.document.file_url, '_blank');\n\n _editDocument = () => this.props.editDocument(this.props.document);\n\n _mobile = () => {\n const { document } = this.props;\n\n return (\n \n {report.report_type || '-'}\n
\n \n {report.date.format('dd. MMM yyyy.')}\n
\n \n ))}\n {document.title}
\n \n {document.date.format('dd. MMM yyyy.')}\n
\n {this._documentsList()}
;\n };\n\n render() {\n const { documents } = this.props;\n const { loadingState } = this.state;\n\n let bodyNode;\n if (loadingState === loadingStates.fetching) {\n bodyNode = \n
\n );\n };\n\n _page = nav => {\n const { showPatient, patient, visibleView } = this.props;\n\n const View = this._nav()[visibleView].view;\n\n const navItems = Object.keys(nav).map(view => {\n const item = nav[view];\n\n return {\n label: item.label,\n onClick: () => showPatient(view),\n selected: view === visibleView,\n };\n });\n\n return (\n \n {navItems.map((item, i) => (\n \n {item.label}\n
\n ))}\n \n \n
\n \n {label}: {appointment.date.format('dd.MM.yyyy. HH:mm')}\n \n showAppointment(appointment.id)}>\n {locale().appointments.details}\n \n
\n \n );\n };\n\n _appointments = () => {\n const { appointments } = this.props.item;\n\n // There can be only one active and multiple cancelled\n // But for sake of simplicity, we're using map for both\n\n return (\n \n
\n );\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n openSchedulePage: data => dispatch(actions.openSchedulePage(data)),\n showAppointment: id => dispatch(actions.showAppointment(id)),\n destroyServiceItem: id => dispatch(actions.destroyServiceItem(id)),\n newPatientNote: data => dispatch(actions.newPatientNote(data)),\n };\n};\n\nPatientServiceItem = connect(null, mapDispatchToProps)(PatientServiceItem);\n\nexport default PatientServiceItem;\n","import PatientServiceItem from './_PatientServiceItem';\n\nexport default PatientServiceItem;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Select } from 'ui/Form';\nimport BottomSheet from 'ui/Dialog/BottomSheet';\nimport MobileDesktopRender from 'ui/MobileDesktopRender';\n\nclass TreatmentSelectUI extends Component {\n static propTypes = {\n value: PropTypes.string,\n treatments: PropTypes.array.isRequired,\n onChange: PropTypes.func.isRequired,\n renderOnMobile: PropTypes.bool,\n mobileOpen: PropTypes.bool,\n onMobileClose: PropTypes.func,\n };\n\n static defaultProps = {\n renderOnMobile: true,\n mobileOpen: false,\n onMobileClose: () => {},\n };\n\n _options = () => {\n const { treatments } = this.props;\n\n return treatments.sortBy('name').map(treatment => ({\n value: treatment.id,\n label: treatment.name,\n }));\n };\n\n _mobile = () => {\n const { value, mobileOpen, onMobileClose, onChange } = this.props;\n\n return (\n \n {item.name}\n {deletable && (\n
\n {this._appointments()}\n \n {!item.appointment_date && (\n \n newPatientNote({\n service_item_id: item.id,\n patient_id: patientId,\n })\n }\n />\n
\n \n
\n \n
\n \n window.history.back()}\n >\n
\n \n
\n \n {isPackage && (\n \n \n )}\n
\n {this._renderItems()}\n \n {service.name}
\n \n {locale().services.activated_on}:{' '}\n {service.created_at.format('dd.MM.yyyy.')}\n
\n \n newServicePayment(service.id)}\n />\n
\n \n {locale().services.payed_amount}\n : \n
\n \n
\n \n \n \n
\n );\n } else {\n imageNode = {progress}%
;\n }\n\n return (\n \n {imageNode}\n {errors.logo &&
\n );\n }\n}\n\nexport default ImagePicker;\n","import ImagePicker from './ImagePicker';\n\nexport default ImagePicker;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './_DocumentInput.module.scss';\nimport classNames from 'classnames';\n\nclass DocumentInput extends Component {\n static propTypes = {\n value: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n placeholder: PropTypes.string,\n kind: PropTypes.oneOf(['normal', 'title']),\n color: PropTypes.string,\n alignRight: PropTypes.bool,\n };\n\n static defaultProps = {\n value: '',\n kind: 'normal',\n alignRight: false,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n value: props.value,\n };\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.value !== this.props.value) {\n this.setState({ value: this.props.value });\n }\n }\n\n _onChange = e => this.setState({ value: e.target.value });\n\n _onBlur = () => {\n const { onChange } = this.props;\n const { value } = this.state;\n\n if (this.props.value !== value) {\n onChange(value);\n }\n };\n\n render() {\n const { placeholder, kind, color, alignRight } = this.props;\n const { value } = this.state;\n\n return (\n {errors.logo}
}\n \n
\n \n
\n \n
\n \n
\n \n {patientReport.organisation_email ||\n locale().account.organisation_email}\n
\n \n
\n \n {patientReport.organisation_website ||\n locale().account.organisation_website}\n
\n \n
\n \n {patientReport.organisation_address ||\n locale().account.organisation_address}\n
\n \n
\n \n {patientReport.organisation_phone ||\n locale().account.organisation_phone}\n
\n \n
\n \n \n {patientReport.organisation_name ||\n locale().account.organisation_name}\n
\n \n {locale().account.company_identifier_short}:{' '}\n {patientReport.company_identifier || '-'}\n
\n \n {locale().account.tax_number}: {patientReport.tax_number || '-'}\n
\n {patientReport.user_name}
\n \n {patientReport.user_title || locale().account.user_title}\n
\n \n \n {patientReport.date.format('dd.MM.yyyy.')}\n
\n \n {locale().patient_reports.patient_name}:{' '}\n {patientReport.patient_name}\n
\n {patientReport.patient_birth_date && (\n \n {locale().patient_reports.patient_birth_date}:{' '}\n {patientReport.patient_birth_date.format('dd.MM.yyyy.')}\n
\n )}\n \n onUpdate('report_type', value)}\n alignRight={true}\n />\n
\n \n \n {patientReport.sections.sortBy('ordinal').map(section => (\n \n
\n ))}\n \n
\n \n \n onSectionUpdate(section.ordinal, 'title', title)\n }\n placeholder={`${locale().patient_reports.section_title}...`}\n kind={'title'}\n color={patientReport.color}\n />\n
\n \n onSectionRemove(section.ordinal)}\n />\n
\n \n \n onSectionUpdate(section.ordinal, 'content', content)\n }\n />\n
\n \n
\n \n {ColorPicker.colors.map(c => (\n onChange(c)}\n >\n {color === c && }\n
\n ))}\n \n );\n }\n}\n\nexport default ColorPicker;\n","import ColorPicker from './ColorPicker';\n\nexport default ColorPicker;\n","import Sidebar from './_Sidebar';\n\nexport default Sidebar;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport PropTypes from 'prop-types';\nimport styles from './_Sidebar.module.scss';\nimport classNames from 'classnames';\nimport Icon from 'ui/Icon';\nimport ConfirmationDialog from 'ui/Dialog/ConfirmationDialog';\nimport ColorPicker from 'ui/ColorPicker';\n\nclass Sidebar extends Component {\n static propTypes = {\n document: PropTypes.object.isRequired,\n sideContent: PropTypes.node,\n onUpdate: PropTypes.func.isRequired,\n isSaving: PropTypes.bool.isRequired,\n errorOccurred: PropTypes.bool.isRequired,\n onDestroy: PropTypes.func.isRequired,\n destroyConfirmation: PropTypes.shape({\n headText: PropTypes.string.isRequired,\n noticeText: PropTypes.string.isRequired,\n }).isRequired,\n pdfUrl: PropTypes.string.isRequired,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n confirmationDialogOpen: false,\n colorPickerVisible: false,\n };\n }\n\n _openConfirmationDialog = () =>\n this.setState({ confirmationDialogOpen: true });\n\n _closeConfirmationDialog = () =>\n this.setState({ confirmationDialogOpen: false });\n\n _showColorPicker = () => {\n document.addEventListener('click', this._hideColorPicker);\n this.setState({ colorPickerVisible: true });\n };\n\n _hideColorPicker = () => {\n document.removeEventListener('click', this._hideColorPicker);\n this.setState({ colorPickerVisible: false });\n };\n\n _updateColor = color => {\n const { onUpdate } = this.props;\n onUpdate('color', color);\n };\n\n _openPdf = () => {\n const { isSaving } = this.props;\n\n if (!isSaving) {\n window.open(this.props.pdfUrl, '_blank');\n }\n };\n\n render() {\n const {\n document,\n sideContent,\n isSaving,\n errorOccurred,\n onDestroy,\n destroyConfirmation,\n } = this.props;\n const { confirmationDialogOpen, colorPickerVisible } = this.state;\n\n return (\n \n \n
\n \n {colorPickerVisible && (\n \n \n
\n {locale().actions.get_pdf}
\n \n
\n \n {locale().common_labels.choose_color}\n
\n {locale().actions.destroy}
\n \n
\n )}\n {sideContent && (\n {sideContent}
\n )}\n \n {isSaving && (\n
\n \n {locale().system.saving}\n ...\n
\n )}\n {errorOccurred && (\n \n {locale().system.global_error}\n ...\n
\n )}\n \n
\n \n
\n \n \n {this.props.children}\n
\n \n {locale().common_labels.organisation_data_notice}\n
\n \n
\n \n \n
\n \n
\n \n {invoice.organisation_name ||\n locale().account.organisation_name}\n
\n \n {locale().account.company_identifier_short}:{' '}\n {invoice.company_identifier || '-'}\n
\n \n {locale().account.tax_number}: {invoice.tax_number || '-'}\n
\n \n {invoice.organisation_address ||\n locale().account.organisation_address}\n
\n \n {invoice.organisation_email ||\n locale().account.organisation_email}\n
\n \n {invoice.organisation_website ||\n locale().account.organisation_website}\n
\n \n {invoice.organisation_phone ||\n locale().account.organisation_phone}\n
\n \n
\n \n \n {locale().patient_invoices.invoice} #{invoice.number}\n
\n \n {locale().patient_invoices.date}:{' '}\n {invoice.date.format('dd.MM.yyyy.')}\n
\n {invoice.due_date && (\n \n {locale().patient_invoices.due_date}:{' '}\n {invoice.due_date.format('dd.MM.yyyy.')}\n
\n )}\n \n onUpdate('receiver_details', value)}\n alignRight={true}\n />\n
\n \n {!lineItem && (\n
\n \n {!lineItem &&\n invoice.services.sortBy('effectively_active_from').map(service => (\n
\n \n {service.name}\n
\n ))}\n {lineItem && (\n \n
\n \n {service.effectively_active_from.format('dd.MM.yyyy.')}\n
\n \n
\n \n {lineItem.name}\n
\n )}\n \n
\n \n
\n \n
\n \n onUpdate('instructions', value)}\n />\n
\n {userErrors._global}
\n \n \n \n this._changeData('name', value)}\n />\n \n \n \n \n this._changeData('email', value)}\n />\n \n \n \n \n this._changeData('title', value)}\n />\n \n \n {userGlobalErrorNode}\n \n \n \n \n
\n );\n };\n\n _organisationForm = () => {\n const {\n organisationData,\n organisationErrors,\n isOrganisationSaving,\n } = this.state;\n\n let organisationGlobalErrorNode;\n if (organisationErrors._global) {\n organisationGlobalErrorNode = (\n {organisationErrors._global}
\n \n \n \n this._changeOrganisationData('name', value)}\n />\n \n \n \n \n this._changeOrganisationData('email', value)}\n />\n \n \n \n \n this._changeOrganisationData('website', value)}\n />\n \n \n \n \n this._changeOrganisationData('address', value)}\n />\n \n \n \n \n this._changeOrganisationData('phone', value)}\n />\n \n \n \n \n \n this._changeOrganisationData('company_identifier', value)\n }\n />\n \n \n \n \n \n this._changeOrganisationData('tax_number', value)\n }\n />\n \n \n {organisationGlobalErrorNode}\n \n \n \n \n
\n );\n };\n\n _passwordForm = () => {\n const { passwordData, passwordErrors, isPasswordSaving } = this.state;\n\n let passwordGlobalErorNode;\n if (passwordErrors._global) {\n passwordGlobalErorNode = (\n {passwordErrors._global}
\n \n \n \n \n this._changePasswordData('current_password', value)\n }\n type={'password'}\n />\n \n \n \n \n this._changePasswordData('password', value)}\n type={'password'}\n />\n \n \n {passwordGlobalErorNode}\n \n \n \n \n
\n );\n };\n\n _mobile = () => {\n const { logout } = this.props;\n\n return (\n \n \n \n \n \n \n \n \n \n
\n );\n };\n\n render() {\n return (\n \n
\n \n {this._roles().map(role => (\n
\n \n
\n ))}\n \n
\n {role.name}
\n {role.payed_count}
\n \n
\n \n {locale().subscription.included.map((included, i) => {\n const notIncluded = included.admin && !role.admin;\n\n return (\n
\n \n
\n );\n })}\n \n \n
\n }\n />\n \n
\n \n {locale().subscription.save_money} \n
\n {locale().subscription.with_yearly_subscription}
\n \n {locale().subscription.contact_for_payment_instructions(\n INSTRUCTIONS_EMAIL_CONTACT\n )}\n
\n \n );\n }\n}\n\nexport default PlanOverview;\n","import React, { Component } from 'react';\nimport locale from 'util/locale';\nimport styles from './UserSubscriptionOverview.module.scss';\nimport Navigator from 'navigation/Navigator';\nimport MobileDesktopRender from 'ui/MobileDesktopRender';\nimport PermissionsRender from 'ui/PermissionsRender';\nimport HeaderBar from 'ui/HeaderBar';\nimport LoadingIndicator from 'ui/Activity/LoadingIndicator';\nimport FailureInfo from 'ui/Activity/FailureInfo';\nimport PlansOverview from './_PlansOverview';\nimport { loadingStates, connect, actions, selectors } from 'util/redux';\n\nclass UserSubscriptionOverview extends Component {\n constructor(props) {\n super(props);\n this.state = {\n loadingState: loadingStates.fetching,\n };\n }\n\n componentDidMount() {\n const { fetchSubscriptionPlans } = this.props;\n\n this.setState({ loadingState: loadingStates.fetching });\n fetchSubscriptionPlans()\n .then(() => this.setState({ loadingState: loadingStates.present }))\n .catch(() => this.setState({ loadingState: loadingStates.failed }));\n }\n\n _mobileHeader = () => \n {locale().subscription.intro_1}\n
\n \n {locale().subscription.intro_2}\n
\n \n \n \n
\n \n
\n {title}
\n {intro}\n \n
\n \n
\n \n \n {employee.initials}\n
\n \n
\n \n {!employee.archived && (\n {employee.name}
\n {employee.title && (\n {employee.title}
\n )}\n {employee.email}
\n \n
\n \n {Date.formatMinutes(stats.minutes_working)}\n
\n \n {locale().employees.assessment}\n
\n \n
\n \n {locale().system.show_more}\n
\n )}\n {this._expanded() && (\n \n {locale().employees.worked_with_patients} (\n {stats.patients_in_period.length})\n
\n \n {stats.patients_in_period.sortBy('name').map(patient => (\n showPatient(patient.id)}\n >\n {patient.name}\n
\n ))}\n \n {errors._global}
\n );\n }\n\n return (\n \n
\n \n
\n \n {locale().employees.send_invitation}\n
\n \n {!globalErrorNode && locale().employees.send_invitation_info}\n {globalErrorNode}\n
\n\n \n \n
\n \n \n {location.name}
\n \n
\n \n {locale().locations.capacity}\n : \n {location.capacity}\n
\n \n \n {location.short_name}\n
\n \n {locale().locations.location_label}\n : \n
\n \n \n
\n );\n }\n}\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n const postId = ownProps.post.id;\n\n return {\n editPost: post => dispatch(actions.editPost(post)),\n destroyPost: () => dispatch(actions.destroyPost(postId)),\n };\n};\n\nPostsListItem = connect(null, mapDispatchToProps)(PostsListItem);\n\nexport default PostsListItem;\n","import PostsList from './_PostsList';\n\nexport default PostsList;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport PostsListItem from './_PostsListItem';\n\nclass PostsList extends Component {\n static propTypes = {\n posts: PropTypes.array.isRequired,\n };\n\n render() {\n const { posts } = this.props;\n\n return (\n {post.created_by.name}
\n \n {post.updated_at.format('dd.MM.yyyy. HH:mm')}\n
\n {post.title}
\n {post.content}
\n \n