diff options
Diffstat (limited to 'src/features/workspaces/components/WorkspacesDashboard.js')
-rw-r--r-- | src/features/workspaces/components/WorkspacesDashboard.js | 50 |
1 files changed, 39 insertions, 11 deletions
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js index 09c98ab8c..9e06a78e3 100644 --- a/src/features/workspaces/components/WorkspacesDashboard.js +++ b/src/features/workspaces/components/WorkspacesDashboard.js | |||
@@ -1,6 +1,6 @@ | |||
1 | import React, { Component, Fragment } from 'react'; | 1 | import React, { Component, Fragment } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import injectSheet from 'react-jss'; | 5 | import injectSheet from 'react-jss'; |
6 | import { Infobox } from '@meetfranz/ui'; | 6 | import { Infobox } from '@meetfranz/ui'; |
@@ -12,6 +12,8 @@ import Request from '../../../stores/lib/Request'; | |||
12 | import Appear from '../../../components/ui/effects/Appear'; | 12 | import Appear from '../../../components/ui/effects/Appear'; |
13 | import { workspaceStore } from '../index'; | 13 | import { workspaceStore } from '../index'; |
14 | import PremiumFeatureContainer from '../../../components/ui/PremiumFeatureContainer'; | 14 | import PremiumFeatureContainer from '../../../components/ui/PremiumFeatureContainer'; |
15 | import UIStore from '../../../stores/UIStore'; | ||
16 | import ActivateTrialButton from '../../../components/ui/activateTrialButton'; | ||
15 | 17 | ||
16 | const messages = defineMessages({ | 18 | const messages = defineMessages({ |
17 | headline: { | 19 | headline: { |
@@ -62,17 +64,27 @@ const styles = theme => ({ | |||
62 | height: 'auto', | 64 | height: 'auto', |
63 | }, | 65 | }, |
64 | premiumAnnouncement: { | 66 | premiumAnnouncement: { |
65 | padding: '20px', | 67 | padding: 20, |
66 | backgroundColor: '#3498db', | 68 | // backgroundColor: '#3498db', |
67 | marginLeft: '-20px', | 69 | marginLeft: -20, |
68 | marginBottom: '20px', | 70 | marginBottom: 40, |
71 | paddingBottom: 40, | ||
69 | height: 'auto', | 72 | height: 'auto', |
70 | color: 'white', | 73 | display: 'flex', |
71 | borderRadius: theme.borderRadius, | 74 | borderBottom: [1, 'solid', theme.inputBackground], |
75 | }, | ||
76 | teaserImage: { | ||
77 | width: 200, | ||
78 | height: '100%', | ||
79 | float: 'left', | ||
80 | margin: [-8, 0, 0, -20], | ||
81 | }, | ||
82 | upgradeCTA: { | ||
83 | marginTop: 20, | ||
72 | }, | 84 | }, |
73 | }); | 85 | }); |
74 | 86 | ||
75 | @injectSheet(styles) @observer | 87 | @inject('stores') @injectSheet(styles) @observer |
76 | class WorkspacesDashboard extends Component { | 88 | class WorkspacesDashboard extends Component { |
77 | static propTypes = { | 89 | static propTypes = { |
78 | classes: PropTypes.object.isRequired, | 90 | classes: PropTypes.object.isRequired, |
@@ -100,7 +112,9 @@ class WorkspacesDashboard extends Component { | |||
100 | onWorkspaceClick, | 112 | onWorkspaceClick, |
101 | workspaces, | 113 | workspaces, |
102 | } = this.props; | 114 | } = this.props; |
115 | |||
103 | const { intl } = this.context; | 116 | const { intl } = this.context; |
117 | |||
104 | return ( | 118 | return ( |
105 | <div className="settings__main"> | 119 | <div className="settings__main"> |
106 | <div className="settings__header"> | 120 | <div className="settings__header"> |
@@ -138,13 +152,21 @@ class WorkspacesDashboard extends Component { | |||
138 | 152 | ||
139 | {workspaceStore.isPremiumUpgradeRequired && ( | 153 | {workspaceStore.isPremiumUpgradeRequired && ( |
140 | <div className={classes.premiumAnnouncement}> | 154 | <div className={classes.premiumAnnouncement}> |
141 | <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2> | 155 | <img src={`./assets/images/workspaces/teaser_${this.props.stores.ui.isDarkThemeActive ? 'dark' : 'light'}.png`} className={classes.teaserImage} alt="" /> |
142 | <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p> | 156 | <div> |
157 | <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2> | ||
158 | <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p> | ||
159 | <ActivateTrialButton | ||
160 | className={classes.upgradeCTA} | ||
161 | gaEventInfo={{ category: 'Workspaces', event: 'upgrade' }} | ||
162 | short | ||
163 | /> | ||
164 | </div> | ||
143 | </div> | 165 | </div> |
144 | )} | 166 | )} |
145 | 167 | ||
146 | <PremiumFeatureContainer | 168 | <PremiumFeatureContainer |
147 | condition={workspaceStore.isPremiumFeature} | 169 | condition={() => workspaceStore.isPremiumUpgradeRequired} |
148 | gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }} | 170 | gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }} |
149 | > | 171 | > |
150 | {/* ===== Create workspace form ===== */} | 172 | {/* ===== Create workspace form ===== */} |
@@ -207,3 +229,9 @@ class WorkspacesDashboard extends Component { | |||
207 | } | 229 | } |
208 | 230 | ||
209 | export default WorkspacesDashboard; | 231 | export default WorkspacesDashboard; |
232 | |||
233 | WorkspacesDashboard.wrappedComponent.propTypes = { | ||
234 | stores: PropTypes.shape({ | ||
235 | ui: PropTypes.instanceOf(UIStore).isRequired, | ||
236 | }).isRequired, | ||
237 | }; | ||