import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { defineMessages, intlShape } from 'react-intl'; import { inject, observer } from 'mobx-react'; import { ProBadge } from '@meetfranz/ui'; import Link from '../../ui/Link'; import { workspaceStore } from '../../../features/workspaces'; import UIStore from '../../../stores/UIStore'; const messages = defineMessages({ availableServices: { id: 'settings.navigation.availableServices', defaultMessage: '!!!Available services', }, yourServices: { id: 'settings.navigation.yourServices', defaultMessage: '!!!Your services', }, yourWorkspaces: { id: 'settings.navigation.yourWorkspaces', defaultMessage: '!!!Your workspaces', }, account: { id: 'settings.navigation.account', defaultMessage: '!!!Account', }, team: { id: 'settings.navigation.team', defaultMessage: '!!!Manage Team', }, settings: { id: 'settings.navigation.settings', defaultMessage: '!!!Settings', }, inviteFriends: { id: 'settings.navigation.inviteFriends', defaultMessage: '!!!Invite Friends', }, logout: { id: 'settings.navigation.logout', defaultMessage: '!!!Logout', }, }); export default @inject('stores') @observer class SettingsNavigation extends Component { static propTypes = { stores: PropTypes.shape({ ui: PropTypes.instanceOf(UIStore).isRequired, }).isRequired, serviceCount: PropTypes.number.isRequired, workspaceCount: PropTypes.number.isRequired, }; static contextTypes = { intl: intlShape, }; render() { const { serviceCount, workspaceCount, stores } = this.props; const { isDarkThemeActive } = stores.ui; const { intl } = this.context; return (