diff options
Diffstat (limited to 'src/components/settings/team')
-rw-r--r-- | src/components/settings/team/TeamDashboard.js | 54 |
1 files changed, 30 insertions, 24 deletions
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js index 437225058..176365fa8 100644 --- a/src/components/settings/team/TeamDashboard.js +++ b/src/components/settings/team/TeamDashboard.js | |||
@@ -1,7 +1,7 @@ | |||
1 | import React, { Component } from 'react'; | 1 | 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 { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, injectIntl } 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 | import classnames from 'classnames'; |
@@ -14,31 +14,34 @@ import { LIVE_FRANZ_API } from '../../../config'; | |||
14 | const messages = defineMessages({ | 14 | const messages = defineMessages({ |
15 | headline: { | 15 | headline: { |
16 | id: 'settings.team.headline', | 16 | id: 'settings.team.headline', |
17 | defaultMessage: '!!!Team', | 17 | defaultMessage: 'Team', |
18 | }, | 18 | }, |
19 | contentHeadline: { | 19 | contentHeadline: { |
20 | id: 'settings.team.contentHeadline', | 20 | id: 'settings.team.contentHeadline', |
21 | defaultMessage: '!!!Franz Team Management', | 21 | defaultMessage: 'Franz Team Management', |
22 | }, | 22 | }, |
23 | intro: { | 23 | intro: { |
24 | id: 'settings.team.intro', | 24 | id: 'settings.team.intro', |
25 | defaultMessage: '!!!Your are currently using Franz Servers, which is why you have access to Team Management.', | 25 | defaultMessage: |
26 | 'Your are currently using Franz Servers, which is why you have access to Team Management.', | ||
26 | }, | 27 | }, |
27 | copy: { | 28 | copy: { |
28 | id: 'settings.team.copy', | 29 | id: 'settings.team.copy', |
29 | defaultMessage: '!!!Franz\'s Team Management allows you to manage Franz Subscriptions for multiple users. Please keep in mind that having a Franz Premium subscription will give you no advantages in using Ferdi: The only reason you still have access to Team Management is so you can manage your legacy Franz Teams and so that you don\'t loose any functionality in managing your account.', | 30 | defaultMessage: |
31 | "Franz's Team Management allows you to manage Franz Subscriptions for multiple users. Please keep in mind that having a Franz Premium subscription will give you no advantages in using Ferdi: The only reason you still have access to Team Management is so you can manage your legacy Franz Teams and so that you don't loose any functionality in managing your account.", | ||
30 | }, | 32 | }, |
31 | manageButton: { | 33 | manageButton: { |
32 | id: 'settings.team.manageAction', | 34 | id: 'settings.team.manageAction', |
33 | defaultMessage: '!!!Manage your Team on meetfranz.com', | 35 | defaultMessage: 'Manage your Team on meetfranz.com', |
34 | }, | 36 | }, |
35 | teamsUnavailable: { | 37 | teamsUnavailable: { |
36 | id: 'settings.team.teamsUnavailable', | 38 | id: 'settings.team.teamsUnavailable', |
37 | defaultMessage: '!!!Teams are unavailable', | 39 | defaultMessage: 'Teams are unavailable', |
38 | }, | 40 | }, |
39 | teamsUnavailableInfo: { | 41 | teamsUnavailableInfo: { |
40 | id: 'settings.team.teamsUnavailableInfo', | 42 | id: 'settings.team.teamsUnavailableInfo', |
41 | defaultMessage: '!!!Teams are currently only available when using the Franz Server and after paying for Franz Professional. Please change your server to https://api.franzinfra.com to use teams.', | 43 | defaultMessage: |
44 | 'Teams are currently only available when using the Franz Server and after paying for Franz Professional. Please change your server to https://api.franzinfra.com to use teams.', | ||
42 | }, | 45 | }, |
43 | }); | 46 | }); |
44 | 47 | ||
@@ -87,7 +90,9 @@ const styles = { | |||
87 | }, | 90 | }, |
88 | }; | 91 | }; |
89 | 92 | ||
90 | export default @injectSheet(styles) @observer class TeamDashboard extends Component { | 93 | @injectSheet(styles) |
94 | @observer | ||
95 | class TeamDashboard extends Component { | ||
91 | static propTypes = { | 96 | static propTypes = { |
92 | isLoading: PropTypes.bool.isRequired, | 97 | isLoading: PropTypes.bool.isRequired, |
93 | userInfoRequestFailed: PropTypes.bool.isRequired, | 98 | userInfoRequestFailed: PropTypes.bool.isRequired, |
@@ -97,10 +102,6 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
97 | server: PropTypes.string.isRequired, | 102 | server: PropTypes.string.isRequired, |
98 | }; | 103 | }; |
99 | 104 | ||
100 | static contextTypes = { | ||
101 | intl: intlShape, | ||
102 | }; | ||
103 | |||
104 | render() { | 105 | render() { |
105 | const { | 106 | const { |
106 | isLoading, | 107 | isLoading, |
@@ -110,7 +111,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
110 | classes, | 111 | classes, |
111 | server, | 112 | server, |
112 | } = this.props; | 113 | } = this.props; |
113 | const { intl } = this.context; | 114 | const { intl } = this.props; |
114 | 115 | ||
115 | if (server === LIVE_FRANZ_API) { | 116 | if (server === LIVE_FRANZ_API) { |
116 | return ( | 117 | return ( |
@@ -121,9 +122,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
121 | </span> | 122 | </span> |
122 | </div> | 123 | </div> |
123 | <div className="settings__body"> | 124 | <div className="settings__body"> |
124 | {isLoading && ( | 125 | {isLoading && <Loader />} |
125 | <Loader /> | ||
126 | )} | ||
127 | 126 | ||
128 | {!isLoading && userInfoRequestFailed && ( | 127 | {!isLoading && userInfoRequestFailed && ( |
129 | <Infobox | 128 | <Infobox |
@@ -142,20 +141,24 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
142 | {!isLoading && ( | 141 | {!isLoading && ( |
143 | <> | 142 | <> |
144 | <> | 143 | <> |
145 | <h1 className={classnames({ | 144 | <h1 |
146 | [classes.headline]: true, | 145 | className={classnames({ |
147 | [classes.headlineWithSpacing]: true, | 146 | [classes.headline]: true, |
148 | })} | 147 | [classes.headlineWithSpacing]: true, |
148 | })} | ||
149 | > | 149 | > |
150 | {intl.formatMessage(messages.contentHeadline)} | 150 | {intl.formatMessage(messages.contentHeadline)} |
151 | |||
152 | </h1> | 151 | </h1> |
153 | <div className={classes.container}> | 152 | <div className={classes.container}> |
154 | <div className={classes.content}> | 153 | <div className={classes.content}> |
155 | <p>{intl.formatMessage(messages.intro)}</p> | 154 | <p>{intl.formatMessage(messages.intro)}</p> |
156 | <p>{intl.formatMessage(messages.copy)}</p> | 155 | <p>{intl.formatMessage(messages.copy)}</p> |
157 | </div> | 156 | </div> |
158 | <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Ferdi for Teams" /> | 157 | <img |
158 | className={classes.image} | ||
159 | src="https://cdn.franzinfra.com/announcements/assets/teams.png" | ||
160 | alt="Ferdi for Teams" | ||
161 | /> | ||
159 | </div> | 162 | </div> |
160 | <div className={classes.buttonContainer}> | 163 | <div className={classes.buttonContainer}> |
161 | <Button | 164 | <Button |
@@ -188,7 +191,8 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
188 | <p | 191 | <p |
189 | className="settings__message" | 192 | className="settings__message" |
190 | style={{ | 193 | style={{ |
191 | borderTop: 0, marginTop: 0, | 194 | borderTop: 0, |
195 | marginTop: 0, | ||
192 | }} | 196 | }} |
193 | > | 197 | > |
194 | {intl.formatMessage(messages.teamsUnavailableInfo)} | 198 | {intl.formatMessage(messages.teamsUnavailableInfo)} |
@@ -198,3 +202,5 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
198 | ); | 202 | ); |
199 | } | 203 | } |
200 | } | 204 | } |
205 | |||
206 | export default injectIntl(TeamDashboard); | ||