diff options
author | 2019-04-10 16:27:44 +0200 | |
---|---|---|
committer | 2019-04-10 16:27:44 +0200 | |
commit | 4c762972ab51e6017607f0450c2647f4c0e5660f (patch) | |
tree | 59948fab0c62952e079b183e5242b003f6886590 | |
parent | added generic pro badge component for settings nav (diff) | |
download | ferdium-app-4c762972ab51e6017607f0450c2647f4c0e5660f.tar.gz ferdium-app-4c762972ab51e6017607f0450c2647f4c0e5660f.tar.zst ferdium-app-4c762972ab51e6017607f0450c2647f4c0e5660f.zip |
add premium badge to workspace drawer headline
-rw-r--r-- | packages/ui/src/badge/ProBadge.tsx | 1 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawer.js | 49 | ||||
-rw-r--r-- | src/i18n/locales/defaultMessages.json | 13 | ||||
-rw-r--r-- | src/i18n/locales/en-US.json | 1 | ||||
-rw-r--r-- | src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json | 13 |
5 files changed, 59 insertions, 18 deletions
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx index eb00e156d..612e23210 100644 --- a/packages/ui/src/badge/ProBadge.tsx +++ b/packages/ui/src/badge/ProBadge.tsx | |||
@@ -47,7 +47,6 @@ class ProBadgeComponent extends Component<IProps> { | |||
47 | inverted && classes.invertedBadge, | 47 | inverted && classes.invertedBadge, |
48 | badgeClasses, | 48 | badgeClasses, |
49 | ])} | 49 | ])} |
50 | data-type="franz-badge" | ||
51 | > | 50 | > |
52 | <Icon | 51 | <Icon |
53 | icon="mdiStar" | 52 | icon="mdiStar" |
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js index d48b55f12..64c98dc63 100644 --- a/src/features/workspaces/components/WorkspaceDrawer.js +++ b/src/features/workspaces/components/WorkspaceDrawer.js | |||
@@ -3,7 +3,7 @@ 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, FormattedHTMLMessage, intlShape } from 'react-intl'; |
6 | import { H1, Icon } from '@meetfranz/ui'; | 6 | import { H1, Icon, ProBadge } from '@meetfranz/ui'; |
7 | import { Button } from '@meetfranz/forms/lib'; | 7 | import { Button } from '@meetfranz/forms/lib'; |
8 | import ReactTooltip from 'react-tooltip'; | 8 | import ReactTooltip from 'react-tooltip'; |
9 | 9 | ||
@@ -41,6 +41,10 @@ const messages = defineMessages({ | |||
41 | id: 'workspaceDrawer.addNewWorkspaceLabel', | 41 | id: 'workspaceDrawer.addNewWorkspaceLabel', |
42 | defaultMessage: '!!!add new workspace', | 42 | defaultMessage: '!!!add new workspace', |
43 | }, | 43 | }, |
44 | premiumFeatureBadge: { | ||
45 | id: 'workspaceDrawer.proFeatureBadge', | ||
46 | defaultMessage: '!!!Premium feature', | ||
47 | }, | ||
44 | }); | 48 | }); |
45 | 49 | ||
46 | const styles = theme => ({ | 50 | const styles = theme => ({ |
@@ -54,6 +58,9 @@ const styles = theme => ({ | |||
54 | marginBottom: '25px', | 58 | marginBottom: '25px', |
55 | marginLeft: theme.workspaces.drawer.padding, | 59 | marginLeft: theme.workspaces.drawer.padding, |
56 | }, | 60 | }, |
61 | headlineProBadge: { | ||
62 | marginRight: 15, | ||
63 | }, | ||
57 | workspacesSettingsButton: { | 64 | workspacesSettingsButton: { |
58 | float: 'right', | 65 | float: 'right', |
59 | marginRight: theme.workspaces.drawer.padding, | 66 | marginRight: theme.workspaces.drawer.padding, |
@@ -134,6 +141,14 @@ class WorkspaceDrawer extends Component { | |||
134 | return ( | 141 | return ( |
135 | <div className={classes.drawer}> | 142 | <div className={classes.drawer}> |
136 | <H1 className={classes.headline}> | 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 | )} | ||
137 | {intl.formatMessage(messages.headline)} | 152 | {intl.formatMessage(messages.headline)} |
138 | <span | 153 | <span |
139 | className={classes.workspacesSettingsButton} | 154 | className={classes.workspacesSettingsButton} |
@@ -203,24 +218,24 @@ class WorkspaceDrawer extends Component { | |||
203 | services={getServicesForWorkspace(workspace)} | 218 | services={getServicesForWorkspace(workspace)} |
204 | /> | 219 | /> |
205 | ))} | 220 | ))} |
221 | <div | ||
222 | className={classes.addNewWorkspaceLabel} | ||
223 | onClick={() => { | ||
224 | workspaceActions.openWorkspaceSettings(); | ||
225 | gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerAddLabel'); | ||
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> | ||
206 | </div> | 237 | </div> |
207 | )} | 238 | )} |
208 | <div | ||
209 | className={classes.addNewWorkspaceLabel} | ||
210 | onClick={() => { | ||
211 | workspaceActions.openWorkspaceSettings(); | ||
212 | gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerAddLabel'); | ||
213 | }} | ||
214 | > | ||
215 | <Icon | ||
216 | icon="mdiPlusBox" | ||
217 | size={1} | ||
218 | className={classes.workspacesSettingsButtonIcon} | ||
219 | /> | ||
220 | <span> | ||
221 | {intl.formatMessage(messages.addNewWorkspaceLabel)} | ||
222 | </span> | ||
223 | </div> | ||
224 | <ReactTooltip place="right" type="dark" effect="solid" /> | 239 | <ReactTooltip place="right" type="dark" effect="solid" /> |
225 | </div> | 240 | </div> |
226 | ); | 241 | ); |
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json index 791c4dd53..11a23805c 100644 --- a/src/i18n/locales/defaultMessages.json +++ b/src/i18n/locales/defaultMessages.json | |||
@@ -3412,6 +3412,19 @@ | |||
3412 | "column": 24, | 3412 | "column": 24, |
3413 | "line": 40 | 3413 | "line": 40 |
3414 | } | 3414 | } |
3415 | }, | ||
3416 | { | ||
3417 | "defaultMessage": "!!!Premium feature", | ||
3418 | "end": { | ||
3419 | "column": 3, | ||
3420 | "line": 47 | ||
3421 | }, | ||
3422 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", | ||
3423 | "id": "workspaceDrawer.proFeatureBadge", | ||
3424 | "start": { | ||
3425 | "column": 23, | ||
3426 | "line": 44 | ||
3427 | } | ||
3415 | } | 3428 | } |
3416 | ], | 3429 | ], |
3417 | "path": "src/features/workspaces/components/WorkspaceDrawer.json" | 3430 | "path": "src/features/workspaces/components/WorkspaceDrawer.json" |
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index 6591af2e2..a2f460f67 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -311,6 +311,7 @@ | |||
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", | 313 | "workspaceDrawer.premiumCtaButtonLabel": "Create your first workspace", |
314 | "workspaceDrawer.proFeatureBadge": "Premium feature", | ||
314 | "workspaceDrawer.reactivatePremiumAccountLabel": "Reactivate premium account", | 315 | "workspaceDrawer.reactivatePremiumAccountLabel": "Reactivate premium account", |
315 | "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>", | 316 | "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>", |
316 | "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings", | 317 | "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings", |
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json index d347622d2..9f0935620 100644 --- a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json +++ b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json | |||
@@ -89,5 +89,18 @@ | |||
89 | "line": 43, | 89 | "line": 43, |
90 | "column": 3 | 90 | "column": 3 |
91 | } | 91 | } |
92 | }, | ||
93 | { | ||
94 | "id": "workspaceDrawer.proFeatureBadge", | ||
95 | "defaultMessage": "!!!Premium feature", | ||
96 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", | ||
97 | "start": { | ||
98 | "line": 44, | ||
99 | "column": 23 | ||
100 | }, | ||
101 | "end": { | ||
102 | "line": 47, | ||
103 | "column": 3 | ||
104 | } | ||
92 | } | 105 | } |
93 | ] \ No newline at end of file | 106 | ] \ No newline at end of file |