import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; import injectSheet from 'react-jss'; import { Infobox, Badge } from '@meetfranz/ui'; import Loader from '../../../components/ui/Loader'; import WorkspaceItem from './WorkspaceItem'; import CreateWorkspaceForm from './CreateWorkspaceForm'; import Request from '../../../stores/lib/Request'; import Appear from '../../../components/ui/effects/Appear'; import { workspaceStore } from '../index'; import UIStore from '../../../stores/UIStore'; import globalMessages from '../../../i18n/globalMessages'; import UpgradeButton from '../../../components/ui/UpgradeButton'; const messages = defineMessages({ headline: { id: 'settings.workspaces.headline', defaultMessage: '!!!Your workspaces', }, noServicesAdded: { id: 'settings.workspaces.noWorkspacesAdded', defaultMessage: '!!!You haven\'t added any workspaces yet.', }, workspacesRequestFailed: { id: 'settings.workspaces.workspacesRequestFailed', defaultMessage: '!!!Could not load your workspaces', }, tryReloadWorkspaces: { id: 'settings.workspaces.tryReloadWorkspaces', defaultMessage: '!!!Try again', }, updatedInfo: { id: 'settings.workspaces.updatedInfo', defaultMessage: '!!!Your changes have been saved', }, deletedInfo: { id: 'settings.workspaces.deletedInfo', defaultMessage: '!!!Workspace has been deleted', }, workspaceFeatureInfo: { id: 'settings.workspaces.workspaceFeatureInfo', defaultMessage: '!!!Info about workspace feature', }, workspaceFeatureHeadline: { id: 'settings.workspaces.workspaceFeatureHeadline', defaultMessage: '!!!Less is More: Introducing Franz Workspaces', }, }); const styles = () => ({ table: { width: '100%', '& td': { padding: '10px', }, }, createForm: { height: 'auto', }, appear: { height: 'auto', }, premiumAnnouncement: { height: 'auto', }, premiumAnnouncementContainer: { display: 'flex', }, announcementHeadline: { marginBottom: 0, }, teaserImage: { width: 250, margin: [-8, 0, 0, 20], alignSelf: 'center', }, upgradeCTA: { margin: [40, 'auto'], }, proRequired: { margin: [10, 0, 40], }, }); @inject('stores') @injectSheet(styles) @observer class WorkspacesDashboard extends Component { static propTypes = { classes: PropTypes.object.isRequired, getUserWorkspacesRequest: PropTypes.instanceOf(Request).isRequired, createWorkspaceRequest: PropTypes.instanceOf(Request).isRequired, deleteWorkspaceRequest: PropTypes.instanceOf(Request).isRequired, updateWorkspaceRequest: PropTypes.instanceOf(Request).isRequired, onCreateWorkspaceSubmit: PropTypes.func.isRequired, onWorkspaceClick: PropTypes.func.isRequired, workspaces: MobxPropTypes.arrayOrObservableArray.isRequired, }; static contextTypes = { intl: intlShape, }; render() { const { classes, getUserWorkspacesRequest, createWorkspaceRequest, deleteWorkspaceRequest, updateWorkspaceRequest, onCreateWorkspaceSubmit, onWorkspaceClick, workspaces, } = this.props; const { intl } = this.context; return (
{intl.formatMessage(messages.workspaceFeatureInfo)}
{intl.formatMessage(messages.noServicesAdded)}