From 24d0223fee38c36ec19d9c662579dba7d787f8b4 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Thu, 5 Sep 2019 09:49:25 +0200 Subject: polishing --- src/assets/images/workspaces/teaser_dark.png | Bin 179047 -> 0 bytes src/assets/images/workspaces/teaser_light.png | Bin 182321 -> 0 bytes src/components/settings/team/TeamDashboard.js | 62 ++++++-- src/components/ui/UpgradeButton/index.js | 90 +++++++++++ src/config.js | 2 +- src/containers/settings/TeamScreen.js | 1 + .../subscription/SubscriptionFormScreen.js | 2 +- src/environment.js | 6 +- src/features/todos/components/TodosWebview.js | 8 +- src/features/todos/store.js | 18 ++- .../workspaces/components/WorkspacesDashboard.js | 167 +++++++++++---------- .../workspaces/containers/WorkspacesScreen.js | 13 +- src/i18n/globalMessages.js | 4 + src/i18n/locales/defaultMessages.json | 67 ++++++--- src/i18n/locales/en-US.json | 4 +- .../components/settings/team/TeamDashboard.json | 24 +-- .../src/components/ui/UpgradeButton/index.json | 15 ++ src/i18n/messages/src/i18n/globalMessages.json | 13 ++ src/stores/UIStore.js | 1 - src/stores/UserStore.js | 4 +- 20 files changed, 360 insertions(+), 141 deletions(-) delete mode 100644 src/assets/images/workspaces/teaser_dark.png delete mode 100644 src/assets/images/workspaces/teaser_light.png create mode 100644 src/components/ui/UpgradeButton/index.js create mode 100644 src/i18n/messages/src/components/ui/UpgradeButton/index.json (limited to 'src') diff --git a/src/assets/images/workspaces/teaser_dark.png b/src/assets/images/workspaces/teaser_dark.png deleted file mode 100644 index 5b6d7334b..000000000 Binary files a/src/assets/images/workspaces/teaser_dark.png and /dev/null differ diff --git a/src/assets/images/workspaces/teaser_light.png b/src/assets/images/workspaces/teaser_light.png deleted file mode 100644 index 635af43fa..000000000 Binary files a/src/assets/images/workspaces/teaser_light.png and /dev/null differ diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js index 990ee52e7..51a3f375d 100644 --- a/src/components/settings/team/TeamDashboard.js +++ b/src/components/settings/team/TeamDashboard.js @@ -5,10 +5,14 @@ import { defineMessages, intlShape } from 'react-intl'; import ReactTooltip from 'react-tooltip'; import injectSheet from 'react-jss'; +import { Badge } from '@meetfranz/ui'; import Loader from '../../ui/Loader'; import Button from '../../ui/Button'; import Infobox from '../../ui/Infobox'; import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer'; +import globalMessages from '../../../i18n/globalMessages'; +import ActivateTrialButton from '../../ui/ActivateTrialButton'; +import UpgradeButton from '../../ui/UpgradeButton'; const messages = defineMessages({ headline: { @@ -40,6 +44,7 @@ const messages = defineMessages({ const styles = { cta: { margin: [40, 'auto'], + height: 'auto', }, container: { display: 'flex', @@ -69,6 +74,17 @@ const styles = { order: 1, }, }, + headline: { + marginBottom: 0, + }, + proRequired: { + margin: [10, 0, 40], + height: 'auto', + }, + buttonContainer: { + display: 'flex', + height: 'auto', + }, }; @@ -79,6 +95,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon retryUserInfoRequest: PropTypes.func.isRequired, openTeamManagement: PropTypes.func.isRequired, classes: PropTypes.object.isRequired, + isProUser: PropTypes.bool.isRequired, }; static contextTypes = { @@ -91,6 +108,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon userInfoRequestFailed, retryUserInfoRequest, openTeamManagement, + isProUser, classes, } = this.props; const { intl } = this.context; @@ -123,23 +141,35 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon <> {!isLoading && ( <> - - <> -

{intl.formatMessage(messages.contentHeadline)}

-
-
-

{intl.formatMessage(messages.intro)}

-

{intl.formatMessage(messages.copy)}

-
- Franz for Teams + <> +

{intl.formatMessage(messages.contentHeadline)}

+ {!isProUser && ( + {intl.formatMessage(globalMessages.proRequired)} + )} +
+
+

{intl.formatMessage(messages.intro)}

+

{intl.formatMessage(messages.copy)}

- - -
+
+ {!isProUser ? ( + + ) : ( +
+ )} diff --git a/src/components/ui/UpgradeButton/index.js b/src/components/ui/UpgradeButton/index.js new file mode 100644 index 000000000..4aa494e38 --- /dev/null +++ b/src/components/ui/UpgradeButton/index.js @@ -0,0 +1,90 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { inject, observer } from 'mobx-react'; +import { defineMessages, intlShape } from 'react-intl'; +import classnames from 'classnames'; + +import { Button } from '@meetfranz/forms'; +import { gaEvent } from '../../../lib/analytics'; + +import UserStore from '../../../stores/UserStore'; +import ActivateTrialButton from '../ActivateTrialButton'; + +const messages = defineMessages({ + upgradeToPro: { + id: 'global.upgradeButton.upgradeToPro', + defaultMessage: '!!!Upgrade to Franz Professional', + }, +}); + +@inject('stores', 'actions') @observer +class UpgradeButton extends Component { + static propTypes = { + // eslint-disable-next-line + classes: PropTypes.object.isRequired, + className: PropTypes.string, + gaEventInfo: PropTypes.shape({ + category: PropTypes.string.isRequired, + event: PropTypes.string.isRequired, + label: PropTypes.string, + }), + requiresPro: PropTypes.bool, + }; + + static defaultProps = { + className: '', + gaEventInfo: null, + requiresPro: false, + } + + static contextTypes = { + intl: intlShape, + }; + + handleCTAClick() { + const { actions, gaEventInfo } = this.props; + + actions.ui.openSettings({ path: 'user' }); + if (gaEventInfo) { + const { category, event } = gaEventInfo; + gaEvent(category, event, 'Upgrade Account'); + } + } + + render() { + const { stores, requiresPro } = this.props; + const { intl } = this.context; + + const { isPremium, isPersonal } = stores.user; + + if (isPremium && isPersonal && requiresPro) { + return ( +