diff options
-rw-r--r-- | src/components/settings/team/TeamDashboard.js | 149 | ||||
-rw-r--r-- | src/containers/settings/TeamScreen.js | 4 | ||||
-rw-r--r-- | src/i18n/messages/src/components/settings/team/TeamDashboard.json | 26 |
3 files changed, 117 insertions, 62 deletions
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js index 2bf46b48d..3a38d682b 100644 --- a/src/components/settings/team/TeamDashboard.js +++ b/src/components/settings/team/TeamDashboard.js | |||
@@ -38,6 +38,14 @@ const messages = defineMessages({ | |||
38 | id: 'settings.team.upgradeAction', | 38 | id: 'settings.team.upgradeAction', |
39 | defaultMessage: '!!!Upgrade your Account', | 39 | defaultMessage: '!!!Upgrade your Account', |
40 | }, | 40 | }, |
41 | teamsUnavailible: { | ||
42 | id: 'settings.team.teamsUnavailible', | ||
43 | defaultMessage: '!!!Teams are unavailible', | ||
44 | }, | ||
45 | teamsUnavailibleInfo: { | ||
46 | id: 'settings.team.teamsUnavailibleInfo', | ||
47 | defaultMessage: '!!!Teams are currently only availible when using the Franz Server and after paying for Franz Professional. Please change your server to https://api.franzinfra.com to use teams.', | ||
48 | }, | ||
41 | }); | 49 | }); |
42 | 50 | ||
43 | const styles = { | 51 | const styles = { |
@@ -98,6 +106,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
98 | openTeamManagement: PropTypes.func.isRequired, | 106 | openTeamManagement: PropTypes.func.isRequired, |
99 | classes: PropTypes.object.isRequired, | 107 | classes: PropTypes.object.isRequired, |
100 | isProUser: PropTypes.bool.isRequired, | 108 | isProUser: PropTypes.bool.isRequired, |
109 | server: PropTypes.string.isRequired, | ||
101 | }; | 110 | }; |
102 | 111 | ||
103 | static contextTypes = { | 112 | static contextTypes = { |
@@ -112,9 +121,84 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
112 | openTeamManagement, | 121 | openTeamManagement, |
113 | isProUser, | 122 | isProUser, |
114 | classes, | 123 | classes, |
124 | server, | ||
115 | } = this.props; | 125 | } = this.props; |
116 | const { intl } = this.context; | 126 | const { intl } = this.context; |
117 | 127 | ||
128 | if (server === 'https://api.franzinfra.com') { | ||
129 | return ( | ||
130 | <div className="settings__main"> | ||
131 | <div className="settings__header"> | ||
132 | <span className="settings__header-item"> | ||
133 | {intl.formatMessage(messages.headline)} | ||
134 | </span> | ||
135 | </div> | ||
136 | <div className="settings__body"> | ||
137 | {isLoading && ( | ||
138 | <Loader /> | ||
139 | )} | ||
140 | |||
141 | {!isLoading && userInfoRequestFailed && ( | ||
142 | <Infobox | ||
143 | icon="alert" | ||
144 | type="danger" | ||
145 | ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)} | ||
146 | ctaLoading={isLoading} | ||
147 | ctaOnClick={retryUserInfoRequest} | ||
148 | > | ||
149 | {intl.formatMessage(messages.userInfoRequestFailed)} | ||
150 | </Infobox> | ||
151 | )} | ||
152 | |||
153 | {!userInfoRequestFailed && ( | ||
154 | <> | ||
155 | {!isLoading && ( | ||
156 | <> | ||
157 | <> | ||
158 | <h1 className={classnames({ | ||
159 | [classes.headline]: true, | ||
160 | [classes.headlineWithSpacing]: isProUser, | ||
161 | })} | ||
162 | > | ||
163 | {intl.formatMessage(messages.contentHeadline)} | ||
164 | |||
165 | </h1> | ||
166 | {!isProUser && ( | ||
167 | <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge> | ||
168 | )} | ||
169 | <div className={classes.container}> | ||
170 | <div className={classes.content}> | ||
171 | <p>{intl.formatMessage(messages.intro)}</p> | ||
172 | <p>{intl.formatMessage(messages.copy)}</p> | ||
173 | </div> | ||
174 | <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" /> | ||
175 | </div> | ||
176 | <div className={classes.buttonContainer}> | ||
177 | {!isProUser ? ( | ||
178 | <UpgradeButton | ||
179 | className={classes.cta} | ||
180 | gaEventInfo={{ category: 'Todos', event: 'upgrade' }} | ||
181 | requiresPro | ||
182 | short | ||
183 | /> | ||
184 | ) : ( | ||
185 | <Button | ||
186 | label={intl.formatMessage(messages.manageButton)} | ||
187 | onClick={openTeamManagement} | ||
188 | className={classes.cta} | ||
189 | /> | ||
190 | )} | ||
191 | </div> | ||
192 | </> | ||
193 | </> | ||
194 | )} | ||
195 | </> | ||
196 | )} | ||
197 | </div> | ||
198 | <ReactTooltip place="right" type="dark" effect="solid" /> | ||
199 | </div> | ||
200 | ); | ||
201 | } | ||
118 | return ( | 202 | return ( |
119 | <div className="settings__main"> | 203 | <div className="settings__main"> |
120 | <div className="settings__header"> | 204 | <div className="settings__header"> |
@@ -123,68 +207,11 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
123 | </span> | 207 | </span> |
124 | </div> | 208 | </div> |
125 | <div className="settings__body"> | 209 | <div className="settings__body"> |
126 | {isLoading && ( | 210 | <h1 className={classes.headline}> |
127 | <Loader /> | 211 | {intl.formatMessage(messages.teamsUnavailible)} |
128 | )} | 212 | </h1> |
129 | 213 | {intl.formatMessage(messages.teamsUnavailibleInfo)} | |
130 | {!isLoading && userInfoRequestFailed && ( | ||
131 | <Infobox | ||
132 | icon="alert" | ||
133 | type="danger" | ||
134 | ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)} | ||
135 | ctaLoading={isLoading} | ||
136 | ctaOnClick={retryUserInfoRequest} | ||
137 | > | ||
138 | {intl.formatMessage(messages.userInfoRequestFailed)} | ||
139 | </Infobox> | ||
140 | )} | ||
141 | |||
142 | {!userInfoRequestFailed && ( | ||
143 | <> | ||
144 | {!isLoading && ( | ||
145 | <> | ||
146 | <> | ||
147 | <h1 className={classnames({ | ||
148 | [classes.headline]: true, | ||
149 | [classes.headlineWithSpacing]: isProUser, | ||
150 | })} | ||
151 | > | ||
152 | {intl.formatMessage(messages.contentHeadline)} | ||
153 | |||
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> | ||
162 | </div> | ||
163 | <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" /> | ||
164 | </div> | ||
165 | <div className={classes.buttonContainer}> | ||
166 | {!isProUser ? ( | ||
167 | <UpgradeButton | ||
168 | className={classes.cta} | ||
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 | </> | ||
182 | </> | ||
183 | )} | ||
184 | </> | ||
185 | )} | ||
186 | </div> | 214 | </div> |
187 | <ReactTooltip place="right" type="dark" effect="solid" /> | ||
188 | </div> | 215 | </div> |
189 | ); | 216 | ); |
190 | } | 217 | } |
diff --git a/src/containers/settings/TeamScreen.js b/src/containers/settings/TeamScreen.js index f600c9947..1172125fe 100644 --- a/src/containers/settings/TeamScreen.js +++ b/src/containers/settings/TeamScreen.js | |||
@@ -19,9 +19,10 @@ export default @inject('stores', 'actions') @observer class TeamScreen extends C | |||
19 | } | 19 | } |
20 | 20 | ||
21 | render() { | 21 | render() { |
22 | const { user } = this.props.stores; | 22 | const { user, settings } = this.props.stores; |
23 | 23 | ||
24 | const isLoadingUserInfo = user.getUserInfoRequest.isExecuting; | 24 | const isLoadingUserInfo = user.getUserInfoRequest.isExecuting; |
25 | const { server } = settings.app; | ||
25 | 26 | ||
26 | return ( | 27 | return ( |
27 | <ErrorBoundary> | 28 | <ErrorBoundary> |
@@ -31,6 +32,7 @@ export default @inject('stores', 'actions') @observer class TeamScreen extends C | |||
31 | retryUserInfoRequest={() => this.reloadData()} | 32 | retryUserInfoRequest={() => this.reloadData()} |
32 | openTeamManagement={() => this.handleWebsiteLink('/user/team')} | 33 | openTeamManagement={() => this.handleWebsiteLink('/user/team')} |
33 | isProUser={user.isPro} | 34 | isProUser={user.isPro} |
35 | server={server} | ||
34 | /> | 36 | /> |
35 | </ErrorBoundary> | 37 | </ErrorBoundary> |
36 | ); | 38 | ); |
diff --git a/src/i18n/messages/src/components/settings/team/TeamDashboard.json b/src/i18n/messages/src/components/settings/team/TeamDashboard.json index 80adadb67..64693933c 100644 --- a/src/i18n/messages/src/components/settings/team/TeamDashboard.json +++ b/src/i18n/messages/src/components/settings/team/TeamDashboard.json | |||
@@ -76,5 +76,31 @@ | |||
76 | "line": 40, | 76 | "line": 40, |
77 | "column": 3 | 77 | "column": 3 |
78 | } | 78 | } |
79 | }, | ||
80 | { | ||
81 | "id": "settings.team.teamsUnavailible", | ||
82 | "defaultMessage": "!!!Teams are unavailible", | ||
83 | "file": "src/components/settings/team/TeamDashboard.js", | ||
84 | "start": { | ||
85 | "line": 41, | ||
86 | "column": 20 | ||
87 | }, | ||
88 | "end": { | ||
89 | "line": 44, | ||
90 | "column": 3 | ||
91 | } | ||
92 | }, | ||
93 | { | ||
94 | "id": "settings.team.teamsUnavailibleInfo", | ||
95 | "defaultMessage": "!!!Teams are currently only availible when using the Franz Server and after paying for Franz Professional. Please change your server to https://api.franzinfra.com to use teams.", | ||
96 | "file": "src/components/settings/team/TeamDashboard.js", | ||
97 | "start": { | ||
98 | "line": 45, | ||
99 | "column": 24 | ||
100 | }, | ||
101 | "end": { | ||
102 | "line": 48, | ||
103 | "column": 3 | ||
104 | } | ||
79 | } | 105 | } |
80 | ] \ No newline at end of file | 106 | ] \ No newline at end of file |