diff options
Diffstat (limited to 'src/features/workspaces/components/WorkspaceDrawer.js')
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawer.js | 246 |
1 files changed, 246 insertions, 0 deletions
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js new file mode 100644 index 000000000..684e50dd0 --- /dev/null +++ b/src/features/workspaces/components/WorkspaceDrawer.js | |||
@@ -0,0 +1,246 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import { defineMessages, FormattedHTMLMessage, intlShape } from 'react-intl'; | ||
6 | import { H1, Icon, ProBadge } from '@meetfranz/ui'; | ||
7 | import { Button } from '@meetfranz/forms/lib'; | ||
8 | import ReactTooltip from 'react-tooltip'; | ||
9 | |||
10 | import WorkspaceDrawerItem from './WorkspaceDrawerItem'; | ||
11 | import { workspaceActions } from '../actions'; | ||
12 | import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../index'; | ||
13 | import { gaEvent } from '../../../lib/analytics'; | ||
14 | |||
15 | const messages = defineMessages({ | ||
16 | headline: { | ||
17 | id: 'workspaceDrawer.headline', | ||
18 | defaultMessage: '!!!Workspaces', | ||
19 | }, | ||
20 | allServices: { | ||
21 | id: 'workspaceDrawer.allServices', | ||
22 | defaultMessage: '!!!All services', | ||
23 | }, | ||
24 | workspacesSettingsTooltip: { | ||
25 | id: 'workspaceDrawer.workspacesSettingsTooltip', | ||
26 | defaultMessage: '!!!Workspaces settings', | ||
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 | }, | ||
36 | reactivatePremiumAccount: { | ||
37 | id: 'workspaceDrawer.reactivatePremiumAccountLabel', | ||
38 | defaultMessage: '!!!Reactivate premium account', | ||
39 | }, | ||
40 | addNewWorkspaceLabel: { | ||
41 | id: 'workspaceDrawer.addNewWorkspaceLabel', | ||
42 | defaultMessage: '!!!add new workspace', | ||
43 | }, | ||
44 | premiumFeatureBadge: { | ||
45 | id: 'workspaceDrawer.proFeatureBadge', | ||
46 | defaultMessage: '!!!Premium feature', | ||
47 | }, | ||
48 | }); | ||
49 | |||
50 | const styles = theme => ({ | ||
51 | drawer: { | ||
52 | background: theme.workspaces.drawer.background, | ||
53 | width: `${theme.workspaces.drawer.width}px`, | ||
54 | }, | ||
55 | headline: { | ||
56 | fontSize: '24px', | ||
57 | marginTop: '38px', | ||
58 | marginBottom: '25px', | ||
59 | marginLeft: theme.workspaces.drawer.padding, | ||
60 | }, | ||
61 | headlineProBadge: { | ||
62 | marginRight: 15, | ||
63 | }, | ||
64 | workspacesSettingsButton: { | ||
65 | float: 'right', | ||
66 | marginRight: theme.workspaces.drawer.padding, | ||
67 | marginTop: '2px', | ||
68 | }, | ||
69 | workspacesSettingsButtonIcon: { | ||
70 | fill: theme.workspaces.drawer.buttons.color, | ||
71 | '&:hover': { | ||
72 | fill: theme.workspaces.drawer.buttons.hoverColor, | ||
73 | }, | ||
74 | }, | ||
75 | workspaces: { | ||
76 | height: 'auto', | ||
77 | }, | ||
78 | premiumAnnouncement: { | ||
79 | padding: '20px', | ||
80 | paddingTop: '0', | ||
81 | height: 'auto', | ||
82 | }, | ||
83 | premiumCtaButton: { | ||
84 | marginTop: '20px', | ||
85 | width: '100%', | ||
86 | color: 'white !important', | ||
87 | }, | ||
88 | addNewWorkspaceLabel: { | ||
89 | height: 'auto', | ||
90 | color: theme.workspaces.drawer.buttons.color, | ||
91 | marginTop: 40, | ||
92 | textAlign: 'center', | ||
93 | '& > svg': { | ||
94 | fill: theme.workspaces.drawer.buttons.color, | ||
95 | }, | ||
96 | '& > span': { | ||
97 | fontSize: '13px', | ||
98 | marginLeft: 10, | ||
99 | position: 'relative', | ||
100 | top: -3, | ||
101 | }, | ||
102 | '&:hover': { | ||
103 | color: theme.workspaces.drawer.buttons.hoverColor, | ||
104 | '& > svg': { | ||
105 | fill: theme.workspaces.drawer.buttons.hoverColor, | ||
106 | }, | ||
107 | }, | ||
108 | }, | ||
109 | }); | ||
110 | |||
111 | @injectSheet(styles) @observer | ||
112 | class WorkspaceDrawer extends Component { | ||
113 | static propTypes = { | ||
114 | classes: PropTypes.object.isRequired, | ||
115 | getServicesForWorkspace: PropTypes.func.isRequired, | ||
116 | onUpgradeAccountClick: PropTypes.func.isRequired, | ||
117 | }; | ||
118 | |||
119 | static contextTypes = { | ||
120 | intl: intlShape, | ||
121 | }; | ||
122 | |||
123 | componentDidMount() { | ||
124 | ReactTooltip.rebuild(); | ||
125 | } | ||
126 | |||
127 | render() { | ||
128 | const { | ||
129 | classes, | ||
130 | getServicesForWorkspace, | ||
131 | onUpgradeAccountClick, | ||
132 | } = this.props; | ||
133 | const { intl } = this.context; | ||
134 | const { | ||
135 | activeWorkspace, | ||
136 | isSwitchingWorkspace, | ||
137 | nextWorkspace, | ||
138 | workspaces, | ||
139 | } = workspaceStore; | ||
140 | const actualWorkspace = isSwitchingWorkspace ? nextWorkspace : activeWorkspace; | ||
141 | return ( | ||
142 | <div className={classes.drawer}> | ||
143 | <H1 className={classes.headline}> | ||
144 | {workspaceStore.isPremiumUpgradeRequired && ( | ||
145 | <span | ||
146 | className={classes.headlineProBadge} | ||
147 | data-tip={`${intl.formatMessage(messages.premiumFeatureBadge)}`} | ||
148 | > | ||
149 | <ProBadge /> | ||
150 | </span> | ||
151 | )} | ||
152 | {intl.formatMessage(messages.headline)} | ||
153 | <span | ||
154 | className={classes.workspacesSettingsButton} | ||
155 | onClick={() => { | ||
156 | workspaceActions.openWorkspaceSettings(); | ||
157 | gaEvent(GA_CATEGORY_WORKSPACES, 'settings', 'drawerHeadline'); | ||
158 | }} | ||
159 | data-tip={`${intl.formatMessage(messages.workspacesSettingsTooltip)}`} | ||
160 | > | ||
161 | <Icon | ||
162 | icon="mdiSettings" | ||
163 | size={1.5} | ||
164 | className={classes.workspacesSettingsButtonIcon} | ||
165 | /> | ||
166 | </span> | ||
167 | </H1> | ||
168 | {workspaceStore.isPremiumUpgradeRequired ? ( | ||
169 | <div className={classes.premiumAnnouncement}> | ||
170 | <FormattedHTMLMessage {...messages.workspaceFeatureInfo} /> | ||
171 | {workspaceStore.userHasWorkspaces ? ( | ||
172 | <Button | ||
173 | className={classes.premiumCtaButton} | ||
174 | buttonType="primary" | ||
175 | label={intl.formatMessage(messages.reactivatePremiumAccount)} | ||
176 | icon="mdiStar" | ||
177 | onClick={() => { | ||
178 | onUpgradeAccountClick(); | ||
179 | gaEvent('User', 'upgrade', 'workspaceDrawer'); | ||
180 | }} | ||
181 | /> | ||
182 | ) : ( | ||
183 | <Button | ||
184 | className={classes.premiumCtaButton} | ||
185 | buttonType="primary" | ||
186 | label={intl.formatMessage(messages.premiumCtaButtonLabel)} | ||
187 | icon="mdiPlusBox" | ||
188 | onClick={() => { | ||
189 | workspaceActions.openWorkspaceSettings(); | ||
190 | gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerPremiumCta'); | ||
191 | }} | ||
192 | /> | ||
193 | )} | ||
194 | </div> | ||
195 | ) : ( | ||
196 | <div className={classes.workspaces}> | ||
197 | <WorkspaceDrawerItem | ||
198 | name={intl.formatMessage(messages.allServices)} | ||
199 | onClick={() => { | ||
200 | workspaceActions.deactivate(); | ||
201 | workspaceActions.toggleWorkspaceDrawer(); | ||
202 | gaEvent(GA_CATEGORY_WORKSPACES, 'switch', 'drawer'); | ||
203 | }} | ||
204 | services={getServicesForWorkspace(null)} | ||
205 | isActive={actualWorkspace == null} | ||
206 | /> | ||
207 | {workspaces.map(workspace => ( | ||
208 | <WorkspaceDrawerItem | ||
209 | key={workspace.id} | ||
210 | name={workspace.name} | ||
211 | isActive={actualWorkspace === workspace} | ||
212 | onClick={() => { | ||
213 | if (actualWorkspace === workspace) return; | ||
214 | workspaceActions.activate({ workspace }); | ||
215 | workspaceActions.toggleWorkspaceDrawer(); | ||
216 | gaEvent(GA_CATEGORY_WORKSPACES, 'switch', 'drawer'); | ||
217 | }} | ||
218 | onContextMenuEditClick={() => workspaceActions.edit({ workspace })} | ||
219 | services={getServicesForWorkspace(workspace)} | ||
220 | /> | ||
221 | ))} | ||
222 | <div | ||
223 | className={classes.addNewWorkspaceLabel} | ||
224 | onClick={() => { | ||
225 | workspaceActions.openWorkspaceSettings(); | ||
226 | gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerAddLabel'); | ||
227 | }} | ||
228 | > | ||
229 | <Icon | ||
230 | icon="mdiPlusBox" | ||
231 | size={1} | ||
232 | className={classes.workspacesSettingsButtonIcon} | ||
233 | /> | ||
234 | <span> | ||
235 | {intl.formatMessage(messages.addNewWorkspaceLabel)} | ||
236 | </span> | ||
237 | </div> | ||
238 | </div> | ||
239 | )} | ||
240 | <ReactTooltip place="right" type="dark" effect="solid" /> | ||
241 | </div> | ||
242 | ); | ||
243 | } | ||
244 | } | ||
245 | |||
246 | export default WorkspaceDrawer; | ||