From b75206e9a0a2c0c7ffb6052ec0f18c6b9ef5a825 Mon Sep 17 00:00:00 2001 From: Dominik Guzei Date: Wed, 3 Apr 2019 15:14:45 +0200 Subject: add workspace feature info in drawer for free users --- src/features/spellchecker/index.js | 2 - .../workspaces/components/WorkspaceDrawer.js | 81 ++++++++++++++++------ .../workspaces/components/WorkspacesDashboard.js | 15 ++-- src/features/workspaces/store.js | 2 +- src/i18n/locales/defaultMessages.json | 38 ++++++++-- src/i18n/locales/en-US.json | 4 +- .../workspaces/components/WorkspaceDrawer.json | 38 ++++++++-- 7 files changed, 137 insertions(+), 43 deletions(-) (limited to 'src') diff --git a/src/features/spellchecker/index.js b/src/features/spellchecker/index.js index 94883ad17..79a2172b4 100644 --- a/src/features/spellchecker/index.js +++ b/src/features/spellchecker/index.js @@ -14,8 +14,6 @@ export default function init(stores) { autorun(() => { const { isSpellcheckerPremiumFeature } = stores.features.features; - console.log('isSpellcheckerPremiumFeature', isSpellcheckerPremiumFeature); - config.isPremium = isSpellcheckerPremiumFeature !== undefined ? isSpellcheckerPremiumFeature : DEFAULT_FEATURES_CONFIG.isSpellcheckerPremiumFeature; if (!stores.user.data.isPremium && config.isPremium && stores.settings.app.enableSpellchecking) { diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js index 4d48c45ef..6eacafa68 100644 --- a/src/features/workspaces/components/WorkspaceDrawer.js +++ b/src/features/workspaces/components/WorkspaceDrawer.js @@ -2,8 +2,9 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { observer } from 'mobx-react'; import injectSheet from 'react-jss'; -import { defineMessages, intlShape } from 'react-intl'; +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'; @@ -24,6 +25,14 @@ const messages = defineMessages({ id: 'workspaceDrawer.addWorkspaceTooltip', defaultMessage: '!!!Add workspace', }, + workspaceFeatureInfo: { + id: 'workspaceDrawer.workspaceFeatureInfo', + defaultMessage: '!!!Info about workspace feature', + }, + premiumCtaButtonLabel: { + id: 'workspaceDrawer.premiumCtaButtonLabel', + defaultMessage: '!!!Create your first workspace', + }, }); const styles = theme => ({ @@ -48,6 +57,19 @@ const styles = theme => ({ fill: theme.workspaceDrawerAddButtonHoverColor, }, }, + workspaces: { + height: 'auto', + }, + premiumAnnouncement: { + padding: '20px', + paddingTop: '0', + height: 'auto', + }, + premiumCtaButton: { + marginTop: '20px', + width: '100%', + color: 'white !important', + }, }); @injectSheet(styles) @observer @@ -84,7 +106,10 @@ class WorkspaceDrawer extends Component { {intl.formatMessage(messages.headline)} { + workspaceActions.openWorkspaceSettings(); + gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerHeadline'); + }} data-tip={`${intl.formatMessage(messages.addWorkspaceTooltip)}`} > -
- { - workspaceActions.deactivate(); - gaEvent(GA_CATEGORY_WORKSPACES, 'switch', 'drawer'); - }} - services={getServicesForWorkspace(null)} - isActive={actualWorkspace == null} - /> - {workspaces.map(workspace => ( + {workspaceStore.isPremiumUpgradeRequired ? ( +
+ +
+ ) : ( +
{ - workspaceActions.activate({ workspace }); + workspaceActions.deactivate(); gaEvent(GA_CATEGORY_WORKSPACES, 'switch', 'drawer'); }} - services={getServicesForWorkspace(workspace)} + services={getServicesForWorkspace(null)} + isActive={actualWorkspace == null} /> - ))} -
+ {workspaces.map(workspace => ( + { + workspaceActions.activate({ workspace }); + gaEvent(GA_CATEGORY_WORKSPACES, 'switch', 'drawer'); + }} + services={getServicesForWorkspace(workspace)} + /> + ))} +
+ )} ); diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js index 1fad1f71d..b141dc960 100644 --- a/src/features/workspaces/components/WorkspacesDashboard.js +++ b/src/features/workspaces/components/WorkspacesDashboard.js @@ -51,7 +51,6 @@ const messages = defineMessages({ const styles = () => ({ createForm: { height: 'auto', - marginBottom: '20px', }, appear: { height: 'auto', @@ -60,6 +59,7 @@ const styles = () => ({ padding: '20px', backgroundColor: '#3498db', marginLeft: '-20px', + marginBottom: '20px', height: 'auto', }, }); @@ -128,6 +128,13 @@ class WorkspacesDashboard extends Component { )} + {workspaceStore.isPremiumUpgradeRequired && ( +
+

{intl.formatMessage(messages.workspaceFeatureHeadline)}

+

{intl.formatMessage(messages.workspaceFeatureInfo)}

+
+ )} + - {workspaceStore.isUpgradeToPremiumRequired && ( -
-

{intl.formatMessage(messages.workspaceFeatureHeadline)}

-

{intl.formatMessage(messages.workspaceFeatureInfo)}

-
- )} {getUserWorkspacesRequest.isExecuting ? ( ) : ( diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js index 62bf3efb4..712945bdc 100644 --- a/src/features/workspaces/store.js +++ b/src/features/workspaces/store.js @@ -37,7 +37,7 @@ export default class WorkspacesStore extends FeatureStore { return getUserWorkspacesRequest.result || []; } - @computed get isUpgradeToPremiumRequired() { + @computed get isPremiumUpgradeRequired() { return this.isFeatureEnabled && !this.isFeatureActive; } diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json index 1747e1976..a8f4a2cbf 100644 --- a/src/i18n/locales/defaultMessages.json +++ b/src/i18n/locales/defaultMessages.json @@ -3326,39 +3326,65 @@ "defaultMessage": "!!!Workspaces", "end": { "column": 3, - "line": 18 + "line": 19 }, "file": "src/features/workspaces/components/WorkspaceDrawer.js", "id": "workspaceDrawer.headline", "start": { "column": 12, - "line": 15 + "line": 16 } }, { "defaultMessage": "!!!All services", "end": { "column": 3, - "line": 22 + "line": 23 }, "file": "src/features/workspaces/components/WorkspaceDrawer.js", "id": "workspaceDrawer.allServices", "start": { "column": 15, - "line": 19 + "line": 20 } }, { "defaultMessage": "!!!Add workspace", "end": { "column": 3, - "line": 26 + "line": 27 }, "file": "src/features/workspaces/components/WorkspaceDrawer.js", "id": "workspaceDrawer.addWorkspaceTooltip", "start": { "column": 23, - "line": 23 + "line": 24 + } + }, + { + "defaultMessage": "!!!Info about workspace feature", + "end": { + "column": 3, + "line": 31 + }, + "file": "src/features/workspaces/components/WorkspaceDrawer.js", + "id": "workspaceDrawer.workspaceFeatureInfo", + "start": { + "column": 24, + "line": 28 + } + }, + { + "defaultMessage": "!!!Create your first workspace", + "end": { + "column": 3, + "line": 35 + }, + "file": "src/features/workspaces/components/WorkspaceDrawer.js", + "id": "workspaceDrawer.premiumCtaButton", + "start": { + "column": 20, + "line": 32 } } ], diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index 987262c35..981946d00 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json @@ -310,5 +310,7 @@ "workspaceDrawer.allServices": "All services", "workspaceDrawer.headline": "Workspaces", "workspaceDrawer.item.noServicesAddedYet": "No services added yet", + "workspaceDrawer.premiumCtaButtonLabel": "Create your first workspace", + "workspaceDrawer.workspaceFeatureInfo": "

Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.

You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.

", "workspaces.switchingIndicator.switchingTo": "Switching to" -} \ No newline at end of file +} diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json index 7026708e2..acd304253 100644 --- a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json +++ b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json @@ -4,11 +4,11 @@ "defaultMessage": "!!!Workspaces", "file": "src/features/workspaces/components/WorkspaceDrawer.js", "start": { - "line": 15, + "line": 16, "column": 12 }, "end": { - "line": 18, + "line": 19, "column": 3 } }, @@ -17,11 +17,11 @@ "defaultMessage": "!!!All services", "file": "src/features/workspaces/components/WorkspaceDrawer.js", "start": { - "line": 19, + "line": 20, "column": 15 }, "end": { - "line": 22, + "line": 23, "column": 3 } }, @@ -30,11 +30,37 @@ "defaultMessage": "!!!Add workspace", "file": "src/features/workspaces/components/WorkspaceDrawer.js", "start": { - "line": 23, + "line": 24, "column": 23 }, "end": { - "line": 26, + "line": 27, + "column": 3 + } + }, + { + "id": "workspaceDrawer.workspaceFeatureInfo", + "defaultMessage": "!!!Info about workspace feature", + "file": "src/features/workspaces/components/WorkspaceDrawer.js", + "start": { + "line": 28, + "column": 24 + }, + "end": { + "line": 31, + "column": 3 + } + }, + { + "id": "workspaceDrawer.premiumCtaButtonLabel", + "defaultMessage": "!!!Create your first workspace", + "file": "src/features/workspaces/components/WorkspaceDrawer.js", + "start": { + "line": 32, + "column": 25 + }, + "end": { + "line": 35, "column": 3 } } -- cgit v1.2.3-54-g00ecf