diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-03 15:14:45 +0200 |
---|---|---|
committer | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-03 15:14:45 +0200 |
commit | b75206e9a0a2c0c7ffb6052ec0f18c6b9ef5a825 (patch) | |
tree | 25dffecdc5de5d60a77fd4ec5a0cd506517710f1 | |
parent | add workspace premium notice to dashboard (diff) | |
download | ferdium-app-b75206e9a0a2c0c7ffb6052ec0f18c6b9ef5a825.tar.gz ferdium-app-b75206e9a0a2c0c7ffb6052ec0f18c6b9ef5a825.tar.zst ferdium-app-b75206e9a0a2c0c7ffb6052ec0f18c6b9ef5a825.zip |
add workspace feature info in drawer for free users
-rw-r--r-- | src/features/spellchecker/index.js | 2 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawer.js | 81 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspacesDashboard.js | 15 | ||||
-rw-r--r-- | src/features/workspaces/store.js | 2 | ||||
-rw-r--r-- | src/i18n/locales/defaultMessages.json | 38 | ||||
-rw-r--r-- | src/i18n/locales/en-US.json | 4 | ||||
-rw-r--r-- | src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json | 38 |
7 files changed, 137 insertions, 43 deletions
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) { | |||
14 | autorun(() => { | 14 | autorun(() => { |
15 | const { isSpellcheckerPremiumFeature } = stores.features.features; | 15 | const { isSpellcheckerPremiumFeature } = stores.features.features; |
16 | 16 | ||
17 | console.log('isSpellcheckerPremiumFeature', isSpellcheckerPremiumFeature); | ||
18 | |||
19 | config.isPremium = isSpellcheckerPremiumFeature !== undefined ? isSpellcheckerPremiumFeature : DEFAULT_FEATURES_CONFIG.isSpellcheckerPremiumFeature; | 17 | config.isPremium = isSpellcheckerPremiumFeature !== undefined ? isSpellcheckerPremiumFeature : DEFAULT_FEATURES_CONFIG.isSpellcheckerPremiumFeature; |
20 | 18 | ||
21 | if (!stores.user.data.isPremium && config.isPremium && stores.settings.app.enableSpellchecking) { | 19 | 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'; | |||
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import injectSheet from 'react-jss'; | 4 | import injectSheet from 'react-jss'; |
5 | import { defineMessages, intlShape } from 'react-intl'; | 5 | import { defineMessages, FormattedHTMLMessage, intlShape } from 'react-intl'; |
6 | import { H1, Icon } from '@meetfranz/ui'; | 6 | import { H1, Icon } from '@meetfranz/ui'; |
7 | import { Button } from '@meetfranz/forms/lib'; | ||
7 | import ReactTooltip from 'react-tooltip'; | 8 | import ReactTooltip from 'react-tooltip'; |
8 | 9 | ||
9 | import WorkspaceDrawerItem from './WorkspaceDrawerItem'; | 10 | import WorkspaceDrawerItem from './WorkspaceDrawerItem'; |
@@ -24,6 +25,14 @@ const messages = defineMessages({ | |||
24 | id: 'workspaceDrawer.addWorkspaceTooltip', | 25 | id: 'workspaceDrawer.addWorkspaceTooltip', |
25 | defaultMessage: '!!!Add workspace', | 26 | defaultMessage: '!!!Add workspace', |
26 | }, | 27 | }, |
28 | workspaceFeatureInfo: { | ||
29 | id: 'workspaceDrawer.workspaceFeatureInfo', | ||
30 | defaultMessage: '!!!Info about workspace feature', | ||
31 | }, | ||
32 | premiumCtaButtonLabel: { | ||
33 | id: 'workspaceDrawer.premiumCtaButtonLabel', | ||
34 | defaultMessage: '!!!Create your first workspace', | ||
35 | }, | ||
27 | }); | 36 | }); |
28 | 37 | ||
29 | const styles = theme => ({ | 38 | const styles = theme => ({ |
@@ -48,6 +57,19 @@ const styles = theme => ({ | |||
48 | fill: theme.workspaceDrawerAddButtonHoverColor, | 57 | fill: theme.workspaceDrawerAddButtonHoverColor, |
49 | }, | 58 | }, |
50 | }, | 59 | }, |
60 | workspaces: { | ||
61 | height: 'auto', | ||
62 | }, | ||
63 | premiumAnnouncement: { | ||
64 | padding: '20px', | ||
65 | paddingTop: '0', | ||
66 | height: 'auto', | ||
67 | }, | ||
68 | premiumCtaButton: { | ||
69 | marginTop: '20px', | ||
70 | width: '100%', | ||
71 | color: 'white !important', | ||
72 | }, | ||
51 | }); | 73 | }); |
52 | 74 | ||
53 | @injectSheet(styles) @observer | 75 | @injectSheet(styles) @observer |
@@ -84,7 +106,10 @@ class WorkspaceDrawer extends Component { | |||
84 | {intl.formatMessage(messages.headline)} | 106 | {intl.formatMessage(messages.headline)} |
85 | <span | 107 | <span |
86 | className={classes.addWorkspaceButton} | 108 | className={classes.addWorkspaceButton} |
87 | onClick={workspaceActions.openWorkspaceSettings} | 109 | onClick={() => { |
110 | workspaceActions.openWorkspaceSettings(); | ||
111 | gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerHeadline'); | ||
112 | }} | ||
88 | data-tip={`${intl.formatMessage(messages.addWorkspaceTooltip)}`} | 113 | data-tip={`${intl.formatMessage(messages.addWorkspaceTooltip)}`} |
89 | > | 114 | > |
90 | <Icon | 115 | <Icon |
@@ -94,29 +119,45 @@ class WorkspaceDrawer extends Component { | |||
94 | /> | 119 | /> |
95 | </span> | 120 | </span> |
96 | </H1> | 121 | </H1> |
97 | <div className={classes.workspaces}> | 122 | {workspaceStore.isPremiumUpgradeRequired ? ( |
98 | <WorkspaceDrawerItem | 123 | <div className={classes.premiumAnnouncement}> |
99 | name={intl.formatMessage(messages.allServices)} | 124 | <FormattedHTMLMessage {...messages.workspaceFeatureInfo} /> |
100 | onClick={() => { | 125 | <Button |
101 | workspaceActions.deactivate(); | 126 | className={classes.premiumCtaButton} |
102 | gaEvent(GA_CATEGORY_WORKSPACES, 'switch', 'drawer'); | 127 | buttonType="primary" |
103 | }} | 128 | label={intl.formatMessage(messages.premiumCtaButtonLabel)} |
104 | services={getServicesForWorkspace(null)} | 129 | icon="mdiPlusBox" |
105 | isActive={actualWorkspace == null} | 130 | onClick={() => { |
106 | /> | 131 | workspaceActions.openWorkspaceSettings(); |
107 | {workspaces.map(workspace => ( | 132 | gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerPremiumCta'); |
133 | }} | ||
134 | /> | ||
135 | </div> | ||
136 | ) : ( | ||
137 | <div className={classes.workspaces}> | ||
108 | <WorkspaceDrawerItem | 138 | <WorkspaceDrawerItem |
109 | key={workspace.id} | 139 | name={intl.formatMessage(messages.allServices)} |
110 | name={workspace.name} | ||
111 | isActive={actualWorkspace === workspace} | ||
112 | onClick={() => { | 140 | onClick={() => { |
113 | workspaceActions.activate({ workspace }); | 141 | workspaceActions.deactivate(); |
114 | gaEvent(GA_CATEGORY_WORKSPACES, 'switch', 'drawer'); | 142 | gaEvent(GA_CATEGORY_WORKSPACES, 'switch', 'drawer'); |
115 | }} | 143 | }} |
116 | services={getServicesForWorkspace(workspace)} | 144 | services={getServicesForWorkspace(null)} |
145 | isActive={actualWorkspace == null} | ||
117 | /> | 146 | /> |
118 | ))} | 147 | {workspaces.map(workspace => ( |
119 | </div> | 148 | <WorkspaceDrawerItem |
149 | key={workspace.id} | ||
150 | name={workspace.name} | ||
151 | isActive={actualWorkspace === workspace} | ||
152 | onClick={() => { | ||
153 | workspaceActions.activate({ workspace }); | ||
154 | gaEvent(GA_CATEGORY_WORKSPACES, 'switch', 'drawer'); | ||
155 | }} | ||
156 | services={getServicesForWorkspace(workspace)} | ||
157 | /> | ||
158 | ))} | ||
159 | </div> | ||
160 | )} | ||
120 | <ReactTooltip place="right" type="dark" effect="solid" /> | 161 | <ReactTooltip place="right" type="dark" effect="solid" /> |
121 | </div> | 162 | </div> |
122 | ); | 163 | ); |
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({ | |||
51 | const styles = () => ({ | 51 | const styles = () => ({ |
52 | createForm: { | 52 | createForm: { |
53 | height: 'auto', | 53 | height: 'auto', |
54 | marginBottom: '20px', | ||
55 | }, | 54 | }, |
56 | appear: { | 55 | appear: { |
57 | height: 'auto', | 56 | height: 'auto', |
@@ -60,6 +59,7 @@ const styles = () => ({ | |||
60 | padding: '20px', | 59 | padding: '20px', |
61 | backgroundColor: '#3498db', | 60 | backgroundColor: '#3498db', |
62 | marginLeft: '-20px', | 61 | marginLeft: '-20px', |
62 | marginBottom: '20px', | ||
63 | height: 'auto', | 63 | height: 'auto', |
64 | }, | 64 | }, |
65 | }); | 65 | }); |
@@ -128,6 +128,13 @@ class WorkspacesDashboard extends Component { | |||
128 | </Appear> | 128 | </Appear> |
129 | )} | 129 | )} |
130 | 130 | ||
131 | {workspaceStore.isPremiumUpgradeRequired && ( | ||
132 | <div className={classes.premiumAnnouncement}> | ||
133 | <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2> | ||
134 | <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p> | ||
135 | </div> | ||
136 | )} | ||
137 | |||
131 | <PremiumFeatureContainer | 138 | <PremiumFeatureContainer |
132 | condition={workspaceStore.isPremiumFeature} | 139 | condition={workspaceStore.isPremiumFeature} |
133 | gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }} | 140 | gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }} |
@@ -140,12 +147,6 @@ class WorkspacesDashboard extends Component { | |||
140 | /> | 147 | /> |
141 | </div> | 148 | </div> |
142 | </PremiumFeatureContainer> | 149 | </PremiumFeatureContainer> |
143 | {workspaceStore.isUpgradeToPremiumRequired && ( | ||
144 | <div className={classes.premiumAnnouncement}> | ||
145 | <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2> | ||
146 | <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p> | ||
147 | </div> | ||
148 | )} | ||
149 | {getUserWorkspacesRequest.isExecuting ? ( | 150 | {getUserWorkspacesRequest.isExecuting ? ( |
150 | <Loader /> | 151 | <Loader /> |
151 | ) : ( | 152 | ) : ( |
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 { | |||
37 | return getUserWorkspacesRequest.result || []; | 37 | return getUserWorkspacesRequest.result || []; |
38 | } | 38 | } |
39 | 39 | ||
40 | @computed get isUpgradeToPremiumRequired() { | 40 | @computed get isPremiumUpgradeRequired() { |
41 | return this.isFeatureEnabled && !this.isFeatureActive; | 41 | return this.isFeatureEnabled && !this.isFeatureActive; |
42 | } | 42 | } |
43 | 43 | ||
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 @@ | |||
3326 | "defaultMessage": "!!!Workspaces", | 3326 | "defaultMessage": "!!!Workspaces", |
3327 | "end": { | 3327 | "end": { |
3328 | "column": 3, | 3328 | "column": 3, |
3329 | "line": 18 | 3329 | "line": 19 |
3330 | }, | 3330 | }, |
3331 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", | 3331 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", |
3332 | "id": "workspaceDrawer.headline", | 3332 | "id": "workspaceDrawer.headline", |
3333 | "start": { | 3333 | "start": { |
3334 | "column": 12, | 3334 | "column": 12, |
3335 | "line": 15 | 3335 | "line": 16 |
3336 | } | 3336 | } |
3337 | }, | 3337 | }, |
3338 | { | 3338 | { |
3339 | "defaultMessage": "!!!All services", | 3339 | "defaultMessage": "!!!All services", |
3340 | "end": { | 3340 | "end": { |
3341 | "column": 3, | 3341 | "column": 3, |
3342 | "line": 22 | 3342 | "line": 23 |
3343 | }, | 3343 | }, |
3344 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", | 3344 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", |
3345 | "id": "workspaceDrawer.allServices", | 3345 | "id": "workspaceDrawer.allServices", |
3346 | "start": { | 3346 | "start": { |
3347 | "column": 15, | 3347 | "column": 15, |
3348 | "line": 19 | 3348 | "line": 20 |
3349 | } | 3349 | } |
3350 | }, | 3350 | }, |
3351 | { | 3351 | { |
3352 | "defaultMessage": "!!!Add workspace", | 3352 | "defaultMessage": "!!!Add workspace", |
3353 | "end": { | 3353 | "end": { |
3354 | "column": 3, | 3354 | "column": 3, |
3355 | "line": 26 | 3355 | "line": 27 |
3356 | }, | 3356 | }, |
3357 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", | 3357 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", |
3358 | "id": "workspaceDrawer.addWorkspaceTooltip", | 3358 | "id": "workspaceDrawer.addWorkspaceTooltip", |
3359 | "start": { | 3359 | "start": { |
3360 | "column": 23, | 3360 | "column": 23, |
3361 | "line": 23 | 3361 | "line": 24 |
3362 | } | ||
3363 | }, | ||
3364 | { | ||
3365 | "defaultMessage": "!!!Info about workspace feature", | ||
3366 | "end": { | ||
3367 | "column": 3, | ||
3368 | "line": 31 | ||
3369 | }, | ||
3370 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", | ||
3371 | "id": "workspaceDrawer.workspaceFeatureInfo", | ||
3372 | "start": { | ||
3373 | "column": 24, | ||
3374 | "line": 28 | ||
3375 | } | ||
3376 | }, | ||
3377 | { | ||
3378 | "defaultMessage": "!!!Create your first workspace", | ||
3379 | "end": { | ||
3380 | "column": 3, | ||
3381 | "line": 35 | ||
3382 | }, | ||
3383 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", | ||
3384 | "id": "workspaceDrawer.premiumCtaButton", | ||
3385 | "start": { | ||
3386 | "column": 20, | ||
3387 | "line": 32 | ||
3362 | } | 3388 | } |
3363 | } | 3389 | } |
3364 | ], | 3390 | ], |
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 @@ | |||
310 | "workspaceDrawer.allServices": "All services", | 310 | "workspaceDrawer.allServices": "All services", |
311 | "workspaceDrawer.headline": "Workspaces", | 311 | "workspaceDrawer.headline": "Workspaces", |
312 | "workspaceDrawer.item.noServicesAddedYet": "No services added yet", | 312 | "workspaceDrawer.item.noServicesAddedYet": "No services added yet", |
313 | "workspaceDrawer.premiumCtaButtonLabel": "Create your first workspace", | ||
314 | "workspaceDrawer.workspaceFeatureInfo": "<p>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.</p><p>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.</p>", | ||
313 | "workspaces.switchingIndicator.switchingTo": "Switching to" | 315 | "workspaces.switchingIndicator.switchingTo": "Switching to" |
314 | } \ No newline at end of file | 316 | } |
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 @@ | |||
4 | "defaultMessage": "!!!Workspaces", | 4 | "defaultMessage": "!!!Workspaces", |
5 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", | 5 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", |
6 | "start": { | 6 | "start": { |
7 | "line": 15, | 7 | "line": 16, |
8 | "column": 12 | 8 | "column": 12 |
9 | }, | 9 | }, |
10 | "end": { | 10 | "end": { |
11 | "line": 18, | 11 | "line": 19, |
12 | "column": 3 | 12 | "column": 3 |
13 | } | 13 | } |
14 | }, | 14 | }, |
@@ -17,11 +17,11 @@ | |||
17 | "defaultMessage": "!!!All services", | 17 | "defaultMessage": "!!!All services", |
18 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", | 18 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", |
19 | "start": { | 19 | "start": { |
20 | "line": 19, | 20 | "line": 20, |
21 | "column": 15 | 21 | "column": 15 |
22 | }, | 22 | }, |
23 | "end": { | 23 | "end": { |
24 | "line": 22, | 24 | "line": 23, |
25 | "column": 3 | 25 | "column": 3 |
26 | } | 26 | } |
27 | }, | 27 | }, |
@@ -30,11 +30,37 @@ | |||
30 | "defaultMessage": "!!!Add workspace", | 30 | "defaultMessage": "!!!Add workspace", |
31 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", | 31 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", |
32 | "start": { | 32 | "start": { |
33 | "line": 23, | 33 | "line": 24, |
34 | "column": 23 | 34 | "column": 23 |
35 | }, | 35 | }, |
36 | "end": { | 36 | "end": { |
37 | "line": 26, | 37 | "line": 27, |
38 | "column": 3 | ||
39 | } | ||
40 | }, | ||
41 | { | ||
42 | "id": "workspaceDrawer.workspaceFeatureInfo", | ||
43 | "defaultMessage": "!!!Info about workspace feature", | ||
44 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", | ||
45 | "start": { | ||
46 | "line": 28, | ||
47 | "column": 24 | ||
48 | }, | ||
49 | "end": { | ||
50 | "line": 31, | ||
51 | "column": 3 | ||
52 | } | ||
53 | }, | ||
54 | { | ||
55 | "id": "workspaceDrawer.premiumCtaButtonLabel", | ||
56 | "defaultMessage": "!!!Create your first workspace", | ||
57 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", | ||
58 | "start": { | ||
59 | "line": 32, | ||
60 | "column": 25 | ||
61 | }, | ||
62 | "end": { | ||
63 | "line": 35, | ||
38 | "column": 3 | 64 | "column": 3 |
39 | } | 65 | } |
40 | } | 66 | } |