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 /src/features/workspaces/components/WorkspaceDrawer.js | |
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
Diffstat (limited to 'src/features/workspaces/components/WorkspaceDrawer.js')
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawer.js | 81 |
1 files changed, 61 insertions, 20 deletions
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 | ); |