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 + 3 files changed, 106 insertions(+), 18 deletions(-) (limited to 'src/features/todos') 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; -- cgit v1.2.3-54-g00ecf