import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { observer } from 'mobx-react'; import injectSheet from 'react-jss'; import { defineMessages, FormattedHTMLMessage, intlShape } from 'react-intl'; import { H1, Icon } from '@meetfranz/ui'; import { Button } from '@meetfranz/forms/lib'; import ReactTooltip from 'react-tooltip'; import WorkspaceDrawerItem from './WorkspaceDrawerItem'; import { workspaceActions } from '../actions'; import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../index'; import { gaEvent } from '../../../lib/analytics'; const messages = defineMessages({ headline: { id: 'workspaceDrawer.headline', defaultMessage: '!!!Workspaces', }, allServices: { id: 'workspaceDrawer.allServices', defaultMessage: '!!!All services', }, addWorkspaceTooltip: { id: 'workspaceDrawer.addWorkspaceTooltip', defaultMessage: '!!!Add workspace', }, workspaceFeatureInfo: { id: 'workspaceDrawer.workspaceFeatureInfo', defaultMessage: '!!!Info about workspace feature', }, premiumCtaButtonLabel: { id: 'workspaceDrawer.premiumCtaButtonLabel', defaultMessage: '!!!Create your first workspace', }, reactivatePremiumAccount: { id: 'workspaceDrawer.reactivatePremiumAccountLabel', defaultMessage: '!!!Reactivate premium account', }, }); const styles = theme => ({ drawer: { backgroundColor: theme.workspaceDrawerBackground, width: `${theme.workspaceDrawerWidth}px`, }, headline: { fontSize: '24px', marginTop: '38px', marginBottom: '25px', marginLeft: `${theme.workspaceDrawerPadding}px`, }, addWorkspaceButton: { float: 'right', marginRight: `${theme.workspaceDrawerPadding}px`, marginTop: '2px', }, addWorkspaceButtonIcon: { fill: theme.workspaceDrawerAddButtonColor, '&:hover': { fill: theme.workspaceDrawerAddButtonHoverColor, }, }, workspaces: { height: 'auto', }, premiumAnnouncement: { padding: '20px', paddingTop: '0', height: 'auto', }, premiumCtaButton: { marginTop: '20px', width: '100%', color: 'white !important', }, }); @injectSheet(styles) @observer class WorkspaceDrawer extends Component { static propTypes = { classes: PropTypes.object.isRequired, getServicesForWorkspace: PropTypes.func.isRequired, onUpgradeAccountClick: PropTypes.func.isRequired, }; static contextTypes = { intl: intlShape, }; componentDidMount() { ReactTooltip.rebuild(); } render() { const { classes, getServicesForWorkspace, onUpgradeAccountClick, } = this.props; const { intl } = this.context; const { activeWorkspace, isSwitchingWorkspace, nextWorkspace, workspaces, } = workspaceStore; const actualWorkspace = isSwitchingWorkspace ? nextWorkspace : activeWorkspace; return (