diff options
author | 2019-04-08 15:57:32 +0200 | |
---|---|---|
committer | 2019-04-08 15:57:32 +0200 | |
commit | c41bf73d129d2fba3ec23c1b7b463aaf9dc80dc6 (patch) | |
tree | c24567a5a98c5f53c6ee4ab6230fe730b529c157 /src/components | |
parent | Update strings (diff) | |
download | ferdium-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.js | 11 | ||||
-rw-r--r-- | src/components/settings/team/TeamDashboard.js | 125 | ||||
-rw-r--r-- | src/components/ui/PremiumFeatureContainer/styles.js | 1 |
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 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | import ReactTooltip from 'react-tooltip'; | ||
6 | import injectSheet from 'react-jss'; | ||
7 | |||
8 | import Loader from '../../ui/Loader'; | ||
9 | import Button from '../../ui/Button'; | ||
10 | import Infobox from '../../ui/Infobox'; | ||
11 | import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer'; | ||
12 | |||
13 | const 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 | |||
40 | const styles = theme => ({ | ||
41 | cta: { | ||
42 | marginTop: 40, | ||
43 | }, | ||
44 | }); | ||
45 | |||
46 | |||
47 | export 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', |