aboutsummaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
authorLibravatar Stefan Malzner <stefan@adlk.io>2019-04-08 15:57:32 +0200
committerLibravatar Stefan Malzner <stefan@adlk.io>2019-04-08 15:57:32 +0200
commitc41bf73d129d2fba3ec23c1b7b463aaf9dc80dc6 (patch)
treec24567a5a98c5f53c6ee4ab6230fe730b529c157 /src/components
parentUpdate strings (diff)
downloadferdium-app-c41bf73d129d2fba3ec23c1b7b463aaf9dc80dc6.tar.gz
ferdium-app-c41bf73d129d2fba3ec23c1b7b463aaf9dc80dc6.tar.zst
ferdium-app-c41bf73d129d2fba3ec23c1b7b463aaf9dc80dc6.zip
Add new Team page in settings
Diffstat (limited to 'src/components')
-rw-r--r--src/components/settings/navigation/SettingsNavigation.js11
-rw-r--r--src/components/settings/team/TeamDashboard.js125
-rw-r--r--src/components/ui/PremiumFeatureContainer/styles.js1
3 files changed, 137 insertions, 0 deletions
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 953f702f8..0be1a22ba 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -18,6 +18,10 @@ const messages = defineMessages({
18 id: 'settings.navigation.account', 18 id: 'settings.navigation.account',
19 defaultMessage: '!!!Account', 19 defaultMessage: '!!!Account',
20 }, 20 },
21 team: {
22 id: 'settings.navigation.team',
23 defaultMessage: '!!!Manage Team',
24 },
21 settings: { 25 settings: {
22 id: 'settings.navigation.settings', 26 id: 'settings.navigation.settings',
23 defaultMessage: '!!!Settings', 27 defaultMessage: '!!!Settings',
@@ -71,6 +75,13 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
71 {intl.formatMessage(messages.account)} 75 {intl.formatMessage(messages.account)}
72 </Link> 76 </Link>
73 <Link 77 <Link
78 to="/settings/team"
79 className="settings-navigation__link"
80 activeClassName="is-active"
81 >
82 {intl.formatMessage(messages.team)}
83 </Link>
84 <Link
74 to="/settings/app" 85 to="/settings/app"
75 className="settings-navigation__link" 86 className="settings-navigation__link"
76 activeClassName="is-active" 87 activeClassName="is-active"
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
new file mode 100644
index 000000000..a29a262e9
--- /dev/null
+++ b/src/components/settings/team/TeamDashboard.js
@@ -0,0 +1,125 @@
1import React, { Component } from 'react';
2import PropTypes from 'prop-types';
3import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
4import { defineMessages, intlShape } from 'react-intl';
5import ReactTooltip from 'react-tooltip';
6import injectSheet from 'react-jss';
7
8import Loader from '../../ui/Loader';
9import Button from '../../ui/Button';
10import Infobox from '../../ui/Infobox';
11import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
12
13const messages = defineMessages({
14 headline: {
15 id: 'settings.team.headline',
16 defaultMessage: '!!!Team',
17 },
18 contentHeadline: {
19 id: 'settings.team.contentHeadline',
20 defaultMessage: '!!!Franz for Teams',
21 },
22 intro: {
23 id: 'settings.team.intro',
24 defaultMessage: '!!!You and your team use Franz? You can now manage Premium subscriptions for as many colleagues, friends or family members as you want, all from within one account.',
25 },
26 copy: {
27 id: 'settings.team.copy',
28 defaultMessage: '!!!Franz for Teams gives you the option to invite co-workers to your team by sending them email invitations and manage their subscriptions in your account’s preferences. Don’t waste time setting up subscriptions for every team member individually, forget about multiple invoices and different billing cycles - one team to rule them all!',
29 },
30 manageButton: {
31 id: 'settings.team.manageAction',
32 defaultMessage: '!!!Manage your Team',
33 },
34 upgradeButton: {
35 id: 'settings.team.upgradeAction',
36 defaultMessage: '!!!Upgrade your Account',
37 },
38});
39
40const styles = theme => ({
41 cta: {
42 marginTop: 40,
43 },
44});
45
46
47export default @injectSheet(styles) @observer class TeamDashboard extends Component {
48 static propTypes = {
49 user: MobxPropTypes.observableObject.isRequired,
50 isLoading: PropTypes.bool.isRequired,
51 userInfoRequestFailed: PropTypes.bool.isRequired,
52 retryUserInfoRequest: PropTypes.func.isRequired,
53 openTeamManagement: PropTypes.func.isRequired,
54 upgradeAccount: PropTypes.func.isRequired,
55 classes: PropTypes.object.isRequired,
56 };
57
58 static contextTypes = {
59 intl: intlShape,
60 };
61
62 render() {
63 const {
64 user,
65 isLoading,
66 userInfoRequestFailed,
67 retryUserInfoRequest,
68 openTeamManagement,
69 upgradeAccount,
70 classes,
71 } = this.props;
72 const { intl } = this.context;
73
74 return (
75 <div className="settings__main">
76 <div className="settings__header">
77 <span className="settings__header-item">
78 {intl.formatMessage(messages.headline)}
79 </span>
80 </div>
81 <div className="settings__body">
82 {isLoading && (
83 <Loader />
84 )}
85
86 {!isLoading && userInfoRequestFailed && (
87 <Infobox
88 icon="alert"
89 type="danger"
90 ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
91 ctaLoading={isLoading}
92 ctaOnClick={retryUserInfoRequest}
93 >
94 {intl.formatMessage(messages.userInfoRequestFailed)}
95 </Infobox>
96 )}
97
98 {!userInfoRequestFailed && (
99 <>
100 {!isLoading && (
101 <>
102 <PremiumFeatureContainer>
103 <>
104 <h1>{intl.formatMessage(messages.contentHeadline)}</h1>
105 <p>{intl.formatMessage(messages.intro)}</p>
106 <p>{intl.formatMessage(messages.copy)}</p>
107 {user.isSubscriptionOwner && (
108 <Button
109 label={intl.formatMessage(messages.manageButton)}
110 onClick={openTeamManagement}
111 className={classes.cta}
112 />
113 )}
114 </>
115 </PremiumFeatureContainer>
116 </>
117 )}
118 </>
119 )}
120 </div>
121 <ReactTooltip place="right" type="dark" effect="solid" />
122 </div>
123 );
124 }
125}
diff --git a/src/components/ui/PremiumFeatureContainer/styles.js b/src/components/ui/PremiumFeatureContainer/styles.js
index 81d6666c6..11cbfbb90 100644
--- a/src/components/ui/PremiumFeatureContainer/styles.js
+++ b/src/components/ui/PremiumFeatureContainer/styles.js
@@ -6,6 +6,7 @@ export default theme => ({
6 padding: 20, 6 padding: 20,
7 'border-radius': theme.borderRadius, 7 'border-radius': theme.borderRadius,
8 pointerEvents: 'none', 8 pointerEvents: 'none',
9 height: 'auto',
9 }, 10 },
10 titleContainer: { 11 titleContainer: {
11 display: 'flex', 12 display: 'flex',