From 71544483caadbdd240f423e7660c242ef458a1d2 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Wed, 4 Sep 2019 11:51:28 +0200 Subject: Add pre-launch notice --- src/features/todos/components/TodosWebview.js | 104 +++++++++++++++++---- src/features/todos/containers/TodosScreen.js | 19 +++- src/features/todos/store.js | 1 + .../workspaces/components/WorkspaceDrawer.js | 7 +- .../components/WorkspaceSwitchingIndicator.js | 8 +- 5 files changed, 112 insertions(+), 27 deletions(-) (limited to 'src/features') diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js index 288c1906f..d8d96ba85 100644 --- a/src/features/todos/components/TodosWebview.js +++ b/src/features/todos/components/TodosWebview.js @@ -4,12 +4,31 @@ import { observer } from 'mobx-react'; import injectSheet from 'react-jss'; import Webview from 'react-electron-web-view'; import { Icon } from '@meetfranz/ui'; +import { defineMessages, intlShape } from 'react-intl'; +import { mdiChevronRight, mdiCheckAll } from '@mdi/js'; +import { Button } from '@meetfranz/forms'; import * as environment from '../../../environment'; +import Appear from '../../../components/ui/effects/Appear'; const OPEN_TODOS_BUTTON_SIZE = 45; const CLOSE_TODOS_BUTTON_SIZE = 35; +const messages = defineMessages({ + premiumInfo: { + id: 'feature.todos.premium.info', + defaultMessage: '!!!The Franz Todos Preview is currently only available for Franz Premium accounts.', + }, + upgradeCTA: { + id: 'feature.todos.premium.upgrade', + defaultMessage: '!!!Upgrade Account', + }, + rolloutInfo: { + id: 'feature.todos.premium.rollout', + defaultMessage: '!!!Franz Todos will be available to everyone soon.', + }, +}); + const styles = theme => ({ root: { background: theme.colorBackground, @@ -78,7 +97,7 @@ const styles = theme => ({ bottom: 80, right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2), borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2, - opacity: 0, + opacity: ({ isTodosIncludedInCurrentPlan }) => (!isTodosIncludedInCurrentPlan ? 1 : 0), transition: 'opacity 0.5s', zIndex: 600, display: 'flex', @@ -90,6 +109,26 @@ const styles = theme => ({ fill: theme.todos.toggleButton.textColor, }, }, + premiumContainer: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + width: '80%', + maxWidth: 300, + margin: [-50, 'auto', 0], + textAlign: 'center', + }, + premiumIcon: { + marginBottom: 40, + background: theme.styleTypes.primary.accent, + fill: theme.styleTypes.primary.contrast, + padding: 10, + borderRadius: 10, + }, + premiumCTA: { + marginTop: 40, + }, }); @injectSheet(styles) @observer @@ -103,6 +142,8 @@ class TodosWebview extends Component { resize: PropTypes.func.isRequired, width: PropTypes.number.isRequired, minWidth: PropTypes.number.isRequired, + isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired, + upgradeAccount: PropTypes.func.isRequired, }; state = { @@ -110,6 +151,10 @@ class TodosWebview extends Component { width: 300, }; + static contextTypes = { + intl: intlShape, + }; + componentWillMount() { const { width } = this.props; @@ -186,9 +231,20 @@ class TodosWebview extends Component { render() { const { - classes, isVisible, togglePanel, + classes, + isVisible, + togglePanel, + isTodosIncludedInCurrentPlan, + upgradeAccount, } = this.props; - const { width, delta, isDragging } = this.state; + + const { + width, + delta, + isDragging, + } = this.state; + + const { intl } = this.context; return ( <> @@ -203,7 +259,7 @@ class TodosWebview extends Component { className={isVisible ? classes.closeTodosButton : classes.openTodosButton} type="button" > - +
)} - { - const { setTodosWebview } = this.props; - setTodosWebview(this.webview); - this.startListeningToIpcMessages(); - }} - partition="persist:todos" - preload="./features/todos/preload.js" - ref={(webview) => { this.webview = webview ? webview.view : null; }} - src={environment.TODOS_FRONTEND} - /> + {isTodosIncludedInCurrentPlan ? ( + { + const { setTodosWebview } = this.props; + setTodosWebview(this.webview); + this.startListeningToIpcMessages(); + }} + partition="persist:todos" + preload="./features/todos/preload.js" + ref={(webview) => { this.webview = webview ? webview.view : null; }} + src={environment.TODOS_FRONTEND} + /> + ) : ( + +
+ +

{intl.formatMessage(messages.premiumInfo)}

+

{intl.formatMessage(messages.rolloutInfo)}

+
+ + )}
); diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js index d071d0677..7f3688828 100644 --- a/src/features/todos/containers/TodosScreen.js +++ b/src/features/todos/containers/TodosScreen.js @@ -1,12 +1,14 @@ import React, { Component } from 'react'; -import { observer } from 'mobx-react'; +import { observer, inject } from 'mobx-react'; +import PropTypes from 'prop-types'; +import FeaturesStore from '../../../stores/FeaturesStore'; import TodosWebview from '../components/TodosWebview'; import ErrorBoundary from '../../../components/util/ErrorBoundary'; import { TODOS_MIN_WIDTH, todosStore } from '..'; import { todoActions } from '../actions'; -@observer +@inject('stores', 'actions') @observer class TodosScreen extends Component { render() { if (!todosStore || !todosStore.isFeatureActive) { @@ -23,6 +25,8 @@ class TodosScreen extends Component { width={todosStore.width} minWidth={TODOS_MIN_WIDTH} resize={width => todoActions.resize({ width })} + isTodosIncludedInCurrentPlan={this.props.stores.features.features.isTodosIncludedInCurrentPlan || false} + upgradeAccount={() => this.props.actions.ui.openSettings({ path: 'user' })} /> ); @@ -30,3 +34,14 @@ class TodosScreen extends Component { } export default TodosScreen; + +TodosScreen.wrappedComponent.propTypes = { + stores: PropTypes.shape({ + features: PropTypes.instanceOf(FeaturesStore).isRequired, + }).isRequired, + actions: PropTypes.shape({ + ui: PropTypes.shape({ + openSettings: PropTypes.func.isRequired, + }).isRequired, + }).isRequired, +}; diff --git a/src/features/todos/store.js b/src/features/todos/store.js index acf95df0d..7da3b7f49 100644 --- a/src/features/todos/store.js +++ b/src/features/todos/store.js @@ -29,6 +29,7 @@ export default class TodoStore extends FeatureStore { } @computed get isTodosPanelVisible() { + if (this.stores.services.all.length === 0) return false; if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE; return this.settings.isTodosPanelVisible; diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js index 684e50dd0..e7bc0b157 100644 --- a/src/features/workspaces/components/WorkspaceDrawer.js +++ b/src/features/workspaces/components/WorkspaceDrawer.js @@ -7,6 +7,7 @@ import { H1, Icon, ProBadge } from '@meetfranz/ui'; import { Button } from '@meetfranz/forms/lib'; import ReactTooltip from 'react-tooltip'; +import { mdiPlusBox, mdiSettings } from '@mdi/js'; import WorkspaceDrawerItem from './WorkspaceDrawerItem'; import { workspaceActions } from '../actions'; import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../index'; @@ -159,7 +160,7 @@ class WorkspaceDrawer extends Component { data-tip={`${intl.formatMessage(messages.workspacesSettingsTooltip)}`} > @@ -184,7 +185,7 @@ class WorkspaceDrawer extends Component { className={classes.premiumCtaButton} buttonType="primary" label={intl.formatMessage(messages.premiumCtaButtonLabel)} - icon="mdiPlusBox" + icon={mdiPlusBox} onClick={() => { workspaceActions.openWorkspaceSettings(); gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerPremiumCta'); @@ -227,7 +228,7 @@ class WorkspaceDrawer extends Component { }} > diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js index c4a800a7b..a70d1d66f 100644 --- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js +++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js @@ -21,11 +21,8 @@ const styles = theme => ({ alignItems: 'flex-start', position: 'absolute', transition: 'width 0.5s ease', - width: '100%', - marginTop: '20px', - }, - wrapperWhenDrawerIsOpen: { width: `calc(100% - ${theme.workspaces.drawer.width}px)`, + marginTop: '20px', }, component: { background: 'rgba(20, 20, 20, 0.4)', @@ -64,14 +61,13 @@ class WorkspaceSwitchingIndicator extends Component { render() { const { classes, theme } = this.props; const { intl } = this.context; - const { isSwitchingWorkspace, isWorkspaceDrawerOpen, nextWorkspace } = workspaceStore; + const { isSwitchingWorkspace, nextWorkspace } = workspaceStore; if (!isSwitchingWorkspace) return null; const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services'; return (
-- cgit v1.2.3-70-g09d2