diff options
Diffstat (limited to 'src/components/settings/team')
-rw-r--r-- | src/components/settings/team/TeamDashboard.js | 62 |
1 files changed, 46 insertions, 16 deletions
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js index 990ee52e7..51a3f375d 100644 --- a/src/components/settings/team/TeamDashboard.js +++ b/src/components/settings/team/TeamDashboard.js | |||
@@ -5,10 +5,14 @@ import { defineMessages, intlShape } from 'react-intl'; | |||
5 | import ReactTooltip from 'react-tooltip'; | 5 | import ReactTooltip from 'react-tooltip'; |
6 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
7 | 7 | ||
8 | import { Badge } from '@meetfranz/ui'; | ||
8 | import Loader from '../../ui/Loader'; | 9 | import Loader from '../../ui/Loader'; |
9 | import Button from '../../ui/Button'; | 10 | import Button from '../../ui/Button'; |
10 | import Infobox from '../../ui/Infobox'; | 11 | import Infobox from '../../ui/Infobox'; |
11 | import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer'; | 12 | import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer'; |
13 | import globalMessages from '../../../i18n/globalMessages'; | ||
14 | import ActivateTrialButton from '../../ui/ActivateTrialButton'; | ||
15 | import UpgradeButton from '../../ui/UpgradeButton'; | ||
12 | 16 | ||
13 | const messages = defineMessages({ | 17 | const messages = defineMessages({ |
14 | headline: { | 18 | headline: { |
@@ -40,6 +44,7 @@ const messages = defineMessages({ | |||
40 | const styles = { | 44 | const styles = { |
41 | cta: { | 45 | cta: { |
42 | margin: [40, 'auto'], | 46 | margin: [40, 'auto'], |
47 | height: 'auto', | ||
43 | }, | 48 | }, |
44 | container: { | 49 | container: { |
45 | display: 'flex', | 50 | display: 'flex', |
@@ -69,6 +74,17 @@ const styles = { | |||
69 | order: 1, | 74 | order: 1, |
70 | }, | 75 | }, |
71 | }, | 76 | }, |
77 | headline: { | ||
78 | marginBottom: 0, | ||
79 | }, | ||
80 | proRequired: { | ||
81 | margin: [10, 0, 40], | ||
82 | height: 'auto', | ||
83 | }, | ||
84 | buttonContainer: { | ||
85 | display: 'flex', | ||
86 | height: 'auto', | ||
87 | }, | ||
72 | }; | 88 | }; |
73 | 89 | ||
74 | 90 | ||
@@ -79,6 +95,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
79 | retryUserInfoRequest: PropTypes.func.isRequired, | 95 | retryUserInfoRequest: PropTypes.func.isRequired, |
80 | openTeamManagement: PropTypes.func.isRequired, | 96 | openTeamManagement: PropTypes.func.isRequired, |
81 | classes: PropTypes.object.isRequired, | 97 | classes: PropTypes.object.isRequired, |
98 | isProUser: PropTypes.bool.isRequired, | ||
82 | }; | 99 | }; |
83 | 100 | ||
84 | static contextTypes = { | 101 | static contextTypes = { |
@@ -91,6 +108,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
91 | userInfoRequestFailed, | 108 | userInfoRequestFailed, |
92 | retryUserInfoRequest, | 109 | retryUserInfoRequest, |
93 | openTeamManagement, | 110 | openTeamManagement, |
111 | isProUser, | ||
94 | classes, | 112 | classes, |
95 | } = this.props; | 113 | } = this.props; |
96 | const { intl } = this.context; | 114 | const { intl } = this.context; |
@@ -123,23 +141,35 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
123 | <> | 141 | <> |
124 | {!isLoading && ( | 142 | {!isLoading && ( |
125 | <> | 143 | <> |
126 | <PremiumFeatureContainer> | 144 | <> |
127 | <> | 145 | <h1 className={classes.headline}>{intl.formatMessage(messages.contentHeadline)}</h1> |
128 | <h1>{intl.formatMessage(messages.contentHeadline)}</h1> | 146 | {!isProUser && ( |
129 | <div className={classes.container}> | 147 | <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge> |
130 | <div className={classes.content}> | 148 | )} |
131 | <p>{intl.formatMessage(messages.intro)}</p> | 149 | <div className={classes.container}> |
132 | <p>{intl.formatMessage(messages.copy)}</p> | 150 | <div className={classes.content}> |
133 | </div> | 151 | <p>{intl.formatMessage(messages.intro)}</p> |
134 | <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" /> | 152 | <p>{intl.formatMessage(messages.copy)}</p> |
135 | </div> | 153 | </div> |
136 | </> | 154 | <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" /> |
137 | </PremiumFeatureContainer> | 155 | </div> |
138 | <Button | 156 | <div className={classes.buttonContainer}> |
139 | label={intl.formatMessage(messages.manageButton)} | 157 | {!isProUser ? ( |
140 | onClick={openTeamManagement} | 158 | <UpgradeButton |
141 | className={classes.cta} | 159 | className={classes.cta} |
142 | /> | 160 | gaEventInfo={{ category: 'Todos', event: 'upgrade' }} |
161 | requiresPro | ||
162 | short | ||
163 | /> | ||
164 | ) : ( | ||
165 | <Button | ||
166 | label={intl.formatMessage(messages.manageButton)} | ||
167 | onClick={openTeamManagement} | ||
168 | className={classes.cta} | ||
169 | /> | ||
170 | )} | ||
171 | </div> | ||
172 | </> | ||
143 | </> | 173 | </> |
144 | )} | 174 | )} |
145 | </> | 175 | </> |