diff options
author | 2019-09-07 15:50:23 +0200 | |
---|---|---|
committer | 2019-09-07 15:50:23 +0200 | |
commit | e7a74514c1e7c3833dfdcf5900cb87f9e6e8354e (patch) | |
tree | b8314e4155503b135dcb07e8b4a0e847e25c19cf /src/components/settings/team/TeamDashboard.js | |
parent | Update CHANGELOG.md (diff) | |
parent | Update CHANGELOG.md (diff) | |
download | ferdium-app-e7a74514c1e7c3833dfdcf5900cb87f9e6e8354e.tar.gz ferdium-app-e7a74514c1e7c3833dfdcf5900cb87f9e6e8354e.tar.zst ferdium-app-e7a74514c1e7c3833dfdcf5900cb87f9e6e8354e.zip |
Merge branch 'master' of https://github.com/meetfranz/franz into franz-5.3.0
Diffstat (limited to 'src/components/settings/team/TeamDashboard.js')
-rw-r--r-- | src/components/settings/team/TeamDashboard.js | 73 |
1 files changed, 56 insertions, 17 deletions
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js index 05c942a11..2bf46b48d 100644 --- a/src/components/settings/team/TeamDashboard.js +++ b/src/components/settings/team/TeamDashboard.js | |||
@@ -4,11 +4,14 @@ import { observer } from 'mobx-react'; | |||
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | 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 | import classnames from 'classnames'; | ||
7 | 8 | ||
9 | import { Badge } from '@meetfranz/ui'; | ||
8 | import Loader from '../../ui/Loader'; | 10 | import Loader from '../../ui/Loader'; |
9 | import Button from '../../ui/Button'; | 11 | import Button from '../../ui/Button'; |
10 | import Infobox from '../../ui/Infobox'; | 12 | import Infobox from '../../ui/Infobox'; |
11 | import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer'; | 13 | import globalMessages from '../../../i18n/globalMessages'; |
14 | import UpgradeButton from '../../ui/UpgradeButton'; | ||
12 | 15 | ||
13 | const messages = defineMessages({ | 16 | const messages = defineMessages({ |
14 | headline: { | 17 | headline: { |
@@ -40,6 +43,7 @@ const messages = defineMessages({ | |||
40 | const styles = { | 43 | const styles = { |
41 | cta: { | 44 | cta: { |
42 | margin: [40, 'auto'], | 45 | margin: [40, 'auto'], |
46 | height: 'auto', | ||
43 | }, | 47 | }, |
44 | container: { | 48 | container: { |
45 | display: 'flex', | 49 | display: 'flex', |
@@ -69,6 +73,20 @@ const styles = { | |||
69 | order: 1, | 73 | order: 1, |
70 | }, | 74 | }, |
71 | }, | 75 | }, |
76 | headline: { | ||
77 | marginBottom: 0, | ||
78 | }, | ||
79 | headlineWithSpacing: { | ||
80 | marginBottom: 'inherit', | ||
81 | }, | ||
82 | proRequired: { | ||
83 | margin: [10, 0, 40], | ||
84 | height: 'auto', | ||
85 | }, | ||
86 | buttonContainer: { | ||
87 | display: 'flex', | ||
88 | height: 'auto', | ||
89 | }, | ||
72 | }; | 90 | }; |
73 | 91 | ||
74 | 92 | ||
@@ -79,6 +97,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
79 | retryUserInfoRequest: PropTypes.func.isRequired, | 97 | retryUserInfoRequest: PropTypes.func.isRequired, |
80 | openTeamManagement: PropTypes.func.isRequired, | 98 | openTeamManagement: PropTypes.func.isRequired, |
81 | classes: PropTypes.object.isRequired, | 99 | classes: PropTypes.object.isRequired, |
100 | isProUser: PropTypes.bool.isRequired, | ||
82 | }; | 101 | }; |
83 | 102 | ||
84 | static contextTypes = { | 103 | static contextTypes = { |
@@ -91,6 +110,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
91 | userInfoRequestFailed, | 110 | userInfoRequestFailed, |
92 | retryUserInfoRequest, | 111 | retryUserInfoRequest, |
93 | openTeamManagement, | 112 | openTeamManagement, |
113 | isProUser, | ||
94 | classes, | 114 | classes, |
95 | } = this.props; | 115 | } = this.props; |
96 | const { intl } = this.context; | 116 | const { intl } = this.context; |
@@ -123,23 +143,42 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
123 | <> | 143 | <> |
124 | {!isLoading && ( | 144 | {!isLoading && ( |
125 | <> | 145 | <> |
126 | <PremiumFeatureContainer> | 146 | <> |
127 | <> | 147 | <h1 className={classnames({ |
128 | <h1>{intl.formatMessage(messages.contentHeadline)}</h1> | 148 | [classes.headline]: true, |
129 | <div className={classes.container}> | 149 | [classes.headlineWithSpacing]: isProUser, |
130 | <div className={classes.content}> | 150 | })} |
131 | <p>{intl.formatMessage(messages.intro)}</p> | 151 | > |
132 | <p>{intl.formatMessage(messages.copy)}</p> | 152 | {intl.formatMessage(messages.contentHeadline)} |
133 | </div> | 153 | |
134 | <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Ferdi for Teams" /> | 154 | </h1> |
155 | {!isProUser && ( | ||
156 | <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge> | ||
157 | )} | ||
158 | <div className={classes.container}> | ||
159 | <div className={classes.content}> | ||
160 | <p>{intl.formatMessage(messages.intro)}</p> | ||
161 | <p>{intl.formatMessage(messages.copy)}</p> | ||
135 | </div> | 162 | </div> |
136 | <Button | 163 | <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" /> |
137 | label={intl.formatMessage(messages.manageButton)} | 164 | </div> |
138 | onClick={openTeamManagement} | 165 | <div className={classes.buttonContainer}> |
139 | className={classes.cta} | 166 | {!isProUser ? ( |
140 | /> | 167 | <UpgradeButton |
141 | </> | 168 | className={classes.cta} |
142 | </PremiumFeatureContainer> | 169 | gaEventInfo={{ category: 'Todos', event: 'upgrade' }} |
170 | requiresPro | ||
171 | short | ||
172 | /> | ||
173 | ) : ( | ||
174 | <Button | ||
175 | label={intl.formatMessage(messages.manageButton)} | ||
176 | onClick={openTeamManagement} | ||
177 | className={classes.cta} | ||
178 | /> | ||
179 | )} | ||
180 | </div> | ||
181 | </> | ||
143 | </> | 182 | </> |
144 | )} | 183 | )} |
145 | </> | 184 | </> |