diff options
Diffstat (limited to 'src/features/workspaces/components/WorkspaceDrawer.js')
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawer.js | 141 |
1 files changed, 39 insertions, 102 deletions
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js index bf7016e2f..3ddc9cf16 100644 --- a/src/features/workspaces/components/WorkspaceDrawer.js +++ b/src/features/workspaces/components/WorkspaceDrawer.js | |||
@@ -2,12 +2,11 @@ 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, FormattedHTMLMessage, intlShape } from 'react-intl'; | 5 | import { defineMessages, intlShape } from 'react-intl'; |
6 | import { H1, Icon, ProBadge } from '@meetfranz/ui'; | 6 | import { H1, Icon } from '@meetfranz/ui'; |
7 | import { Button } from '@meetfranz/forms/lib'; | ||
8 | import ReactTooltip from 'react-tooltip'; | 7 | import ReactTooltip from 'react-tooltip'; |
9 | 8 | ||
10 | import { mdiPlusBox, mdiSettings, mdiStar } from '@mdi/js'; | 9 | import { mdiPlusBox, mdiSettings } from '@mdi/js'; |
11 | import WorkspaceDrawerItem from './WorkspaceDrawerItem'; | 10 | import WorkspaceDrawerItem from './WorkspaceDrawerItem'; |
12 | import { workspaceActions } from '../actions'; | 11 | import { workspaceActions } from '../actions'; |
13 | import { workspaceStore } from '../index'; | 12 | import { workspaceStore } from '../index'; |
@@ -29,22 +28,10 @@ const messages = defineMessages({ | |||
29 | id: 'workspaceDrawer.workspaceFeatureInfo', | 28 | id: 'workspaceDrawer.workspaceFeatureInfo', |
30 | defaultMessage: '!!!Info about workspace feature', | 29 | defaultMessage: '!!!Info about workspace feature', |
31 | }, | 30 | }, |
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: { | 31 | addNewWorkspaceLabel: { |
41 | id: 'workspaceDrawer.addNewWorkspaceLabel', | 32 | id: 'workspaceDrawer.addNewWorkspaceLabel', |
42 | defaultMessage: '!!!add new workspace', | 33 | defaultMessage: '!!!add new workspace', |
43 | }, | 34 | }, |
44 | premiumFeatureBadge: { | ||
45 | id: 'workspaceDrawer.proFeatureBadge', | ||
46 | defaultMessage: '!!!Premium feature', | ||
47 | }, | ||
48 | }); | 35 | }); |
49 | 36 | ||
50 | const styles = theme => ({ | 37 | const styles = theme => ({ |
@@ -60,9 +47,6 @@ const styles = theme => ({ | |||
60 | marginBottom: '25px', | 47 | marginBottom: '25px', |
61 | marginLeft: theme.workspaces.drawer.padding, | 48 | marginLeft: theme.workspaces.drawer.padding, |
62 | }, | 49 | }, |
63 | headlineProBadge: { | ||
64 | marginRight: 15, | ||
65 | }, | ||
66 | workspacesSettingsButton: { | 50 | workspacesSettingsButton: { |
67 | float: 'right', | 51 | float: 'right', |
68 | marginRight: theme.workspaces.drawer.padding, | 52 | marginRight: theme.workspaces.drawer.padding, |
@@ -78,16 +62,6 @@ const styles = theme => ({ | |||
78 | height: 'auto', | 62 | height: 'auto', |
79 | overflowY: 'auto', | 63 | overflowY: 'auto', |
80 | }, | 64 | }, |
81 | premiumAnnouncement: { | ||
82 | padding: '20px', | ||
83 | paddingTop: '0', | ||
84 | height: 'auto', | ||
85 | }, | ||
86 | premiumCtaButton: { | ||
87 | marginTop: '20px', | ||
88 | width: '100%', | ||
89 | color: 'white !important', | ||
90 | }, | ||
91 | addNewWorkspaceLabel: { | 65 | addNewWorkspaceLabel: { |
92 | height: 'auto', | 66 | height: 'auto', |
93 | color: theme.workspaces.drawer.buttons.color, | 67 | color: theme.workspaces.drawer.buttons.color, |
@@ -116,7 +90,6 @@ class WorkspaceDrawer extends Component { | |||
116 | static propTypes = { | 90 | static propTypes = { |
117 | classes: PropTypes.object.isRequired, | 91 | classes: PropTypes.object.isRequired, |
118 | getServicesForWorkspace: PropTypes.func.isRequired, | 92 | getServicesForWorkspace: PropTypes.func.isRequired, |
119 | onUpgradeAccountClick: PropTypes.func.isRequired, | ||
120 | }; | 93 | }; |
121 | 94 | ||
122 | static contextTypes = { | 95 | static contextTypes = { |
@@ -131,7 +104,6 @@ class WorkspaceDrawer extends Component { | |||
131 | const { | 104 | const { |
132 | classes, | 105 | classes, |
133 | getServicesForWorkspace, | 106 | getServicesForWorkspace, |
134 | onUpgradeAccountClick, | ||
135 | } = this.props; | 107 | } = this.props; |
136 | const { intl } = this.context; | 108 | const { intl } = this.context; |
137 | const { | 109 | const { |
@@ -144,14 +116,6 @@ class WorkspaceDrawer extends Component { | |||
144 | return ( | 116 | return ( |
145 | <div className={`${classes.drawer} workspaces-drawer`}> | 117 | <div className={`${classes.drawer} workspaces-drawer`}> |
146 | <H1 className={classes.headline}> | 118 | <H1 className={classes.headline}> |
147 | {workspaceStore.isPremiumUpgradeRequired && ( | ||
148 | <span | ||
149 | className={classes.headlineProBadge} | ||
150 | data-tip={`${intl.formatMessage(messages.premiumFeatureBadge)}`} | ||
151 | > | ||
152 | <ProBadge /> | ||
153 | </span> | ||
154 | )} | ||
155 | {intl.formatMessage(messages.headline)} | 119 | {intl.formatMessage(messages.headline)} |
156 | <span | 120 | <span |
157 | className={classes.workspacesSettingsButton} | 121 | className={classes.workspacesSettingsButton} |
@@ -167,75 +131,48 @@ class WorkspaceDrawer extends Component { | |||
167 | /> | 131 | /> |
168 | </span> | 132 | </span> |
169 | </H1> | 133 | </H1> |
170 | {workspaceStore.isPremiumUpgradeRequired ? ( | 134 | <div className={classes.workspaces}> |
171 | <div className={classes.premiumAnnouncement}> | 135 | <WorkspaceDrawerItem |
172 | <FormattedHTMLMessage {...messages.workspaceFeatureInfo} /> | 136 | name={intl.formatMessage(messages.allServices)} |
173 | {workspaceStore.userHasWorkspaces ? ( | 137 | onClick={() => { |
174 | <Button | 138 | workspaceActions.deactivate(); |
175 | className={classes.premiumCtaButton} | 139 | workspaceActions.toggleWorkspaceDrawer(); |
176 | buttonType="primary" | 140 | }} |
177 | label={intl.formatMessage(messages.reactivatePremiumAccount)} | 141 | services={getServicesForWorkspace(null)} |
178 | icon={mdiStar} | 142 | isActive={actualWorkspace == null} |
179 | onClick={() => { | 143 | shortcutIndex={0} |
180 | onUpgradeAccountClick(); | 144 | /> |
181 | }} | 145 | {workspaces.map((workspace, index) => ( |
182 | /> | ||
183 | ) : ( | ||
184 | <Button | ||
185 | className={classes.premiumCtaButton} | ||
186 | buttonType="primary" | ||
187 | label={intl.formatMessage(messages.premiumCtaButtonLabel)} | ||
188 | icon={mdiPlusBox} | ||
189 | onClick={() => { | ||
190 | workspaceActions.openWorkspaceSettings(); | ||
191 | }} | ||
192 | /> | ||
193 | )} | ||
194 | </div> | ||
195 | ) : ( | ||
196 | <div className={classes.workspaces}> | ||
197 | <WorkspaceDrawerItem | 146 | <WorkspaceDrawerItem |
198 | name={intl.formatMessage(messages.allServices)} | 147 | key={workspace.id} |
148 | name={workspace.name} | ||
149 | isActive={actualWorkspace === workspace} | ||
199 | onClick={() => { | 150 | onClick={() => { |
200 | workspaceActions.deactivate(); | 151 | if (actualWorkspace === workspace) return; |
152 | workspaceActions.activate({ workspace }); | ||
201 | workspaceActions.toggleWorkspaceDrawer(); | 153 | workspaceActions.toggleWorkspaceDrawer(); |
202 | }} | 154 | }} |
203 | services={getServicesForWorkspace(null)} | 155 | onContextMenuEditClick={() => workspaceActions.edit({ workspace })} |
204 | isActive={actualWorkspace == null} | 156 | services={getServicesForWorkspace(workspace)} |
205 | shortcutIndex={0} | 157 | shortcutIndex={index + 1} |
206 | /> | 158 | /> |
207 | {workspaces.map((workspace, index) => ( | 159 | ))} |
208 | <WorkspaceDrawerItem | 160 | <div |
209 | key={workspace.id} | 161 | className={classes.addNewWorkspaceLabel} |
210 | name={workspace.name} | 162 | onClick={() => { |
211 | isActive={actualWorkspace === workspace} | 163 | workspaceActions.openWorkspaceSettings(); |
212 | onClick={() => { | 164 | }} |
213 | if (actualWorkspace === workspace) return; | 165 | > |
214 | workspaceActions.activate({ workspace }); | 166 | <Icon |
215 | workspaceActions.toggleWorkspaceDrawer(); | 167 | icon={mdiPlusBox} |
216 | }} | 168 | size={1} |
217 | onContextMenuEditClick={() => workspaceActions.edit({ workspace })} | 169 | className={classes.workspacesSettingsButtonIcon} |
218 | services={getServicesForWorkspace(workspace)} | 170 | /> |
219 | shortcutIndex={index + 1} | 171 | <span> |
220 | /> | 172 | {intl.formatMessage(messages.addNewWorkspaceLabel)} |
221 | ))} | 173 | </span> |
222 | <div | ||
223 | className={classes.addNewWorkspaceLabel} | ||
224 | onClick={() => { | ||
225 | workspaceActions.openWorkspaceSettings(); | ||
226 | }} | ||
227 | > | ||
228 | <Icon | ||
229 | icon={mdiPlusBox} | ||
230 | size={1} | ||
231 | className={classes.workspacesSettingsButtonIcon} | ||
232 | /> | ||
233 | <span> | ||
234 | {intl.formatMessage(messages.addNewWorkspaceLabel)} | ||
235 | </span> | ||
236 | </div> | ||
237 | </div> | 174 | </div> |
238 | )} | 175 | </div> |
239 | <ReactTooltip place="right" type="dark" effect="solid" /> | 176 | <ReactTooltip place="right" type="dark" effect="solid" /> |
240 | </div> | 177 | </div> |
241 | ); | 178 | ); |