diff options
author | 2019-09-05 09:49:25 +0200 | |
---|---|---|
committer | 2019-09-05 09:49:25 +0200 | |
commit | 24d0223fee38c36ec19d9c662579dba7d787f8b4 (patch) | |
tree | 17a50e725cef1266506fc9ac6352c15a120cba78 /src/components | |
parent | don't warn on react/destructuring-assignment (diff) | |
download | ferdium-app-24d0223fee38c36ec19d9c662579dba7d787f8b4.tar.gz ferdium-app-24d0223fee38c36ec19d9c662579dba7d787f8b4.tar.zst ferdium-app-24d0223fee38c36ec19d9c662579dba7d787f8b4.zip |
polishing
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/settings/team/TeamDashboard.js | 62 | ||||
-rw-r--r-- | src/components/ui/UpgradeButton/index.js | 90 |
2 files changed, 136 insertions, 16 deletions
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js index 990ee52e7..51a3f375d 100644 --- a/src/components/settings/team/TeamDashboard.js +++ b/src/components/settings/team/TeamDashboard.js | |||
@@ -5,10 +5,14 @@ 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 | 7 | ||
8 | import { Badge } from '@meetfranz/ui'; | ||
8 | import Loader from '../../ui/Loader'; | 9 | import Loader from '../../ui/Loader'; |
9 | import Button from '../../ui/Button'; | 10 | import Button from '../../ui/Button'; |
10 | import Infobox from '../../ui/Infobox'; | 11 | import Infobox from '../../ui/Infobox'; |
11 | import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer'; | 12 | import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer'; |
13 | import globalMessages from '../../../i18n/globalMessages'; | ||
14 | import ActivateTrialButton from '../../ui/ActivateTrialButton'; | ||
15 | import UpgradeButton from '../../ui/UpgradeButton'; | ||
12 | 16 | ||
13 | const messages = defineMessages({ | 17 | const messages = defineMessages({ |
14 | headline: { | 18 | headline: { |
@@ -40,6 +44,7 @@ const messages = defineMessages({ | |||
40 | const styles = { | 44 | const styles = { |
41 | cta: { | 45 | cta: { |
42 | margin: [40, 'auto'], | 46 | margin: [40, 'auto'], |
47 | height: 'auto', | ||
43 | }, | 48 | }, |
44 | container: { | 49 | container: { |
45 | display: 'flex', | 50 | display: 'flex', |
@@ -69,6 +74,17 @@ const styles = { | |||
69 | order: 1, | 74 | order: 1, |
70 | }, | 75 | }, |
71 | }, | 76 | }, |
77 | headline: { | ||
78 | marginBottom: 0, | ||
79 | }, | ||
80 | proRequired: { | ||
81 | margin: [10, 0, 40], | ||
82 | height: 'auto', | ||
83 | }, | ||
84 | buttonContainer: { | ||
85 | display: 'flex', | ||
86 | height: 'auto', | ||
87 | }, | ||
72 | }; | 88 | }; |
73 | 89 | ||
74 | 90 | ||
@@ -79,6 +95,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
79 | retryUserInfoRequest: PropTypes.func.isRequired, | 95 | retryUserInfoRequest: PropTypes.func.isRequired, |
80 | openTeamManagement: PropTypes.func.isRequired, | 96 | openTeamManagement: PropTypes.func.isRequired, |
81 | classes: PropTypes.object.isRequired, | 97 | classes: PropTypes.object.isRequired, |
98 | isProUser: PropTypes.bool.isRequired, | ||
82 | }; | 99 | }; |
83 | 100 | ||
84 | static contextTypes = { | 101 | static contextTypes = { |
@@ -91,6 +108,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
91 | userInfoRequestFailed, | 108 | userInfoRequestFailed, |
92 | retryUserInfoRequest, | 109 | retryUserInfoRequest, |
93 | openTeamManagement, | 110 | openTeamManagement, |
111 | isProUser, | ||
94 | classes, | 112 | classes, |
95 | } = this.props; | 113 | } = this.props; |
96 | const { intl } = this.context; | 114 | const { intl } = this.context; |
@@ -123,23 +141,35 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
123 | <> | 141 | <> |
124 | {!isLoading && ( | 142 | {!isLoading && ( |
125 | <> | 143 | <> |
126 | <PremiumFeatureContainer> | 144 | <> |
127 | <> | 145 | <h1 className={classes.headline}>{intl.formatMessage(messages.contentHeadline)}</h1> |
128 | <h1>{intl.formatMessage(messages.contentHeadline)}</h1> | 146 | {!isProUser && ( |
129 | <div className={classes.container}> | 147 | <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge> |
130 | <div className={classes.content}> | 148 | )} |
131 | <p>{intl.formatMessage(messages.intro)}</p> | 149 | <div className={classes.container}> |
132 | <p>{intl.formatMessage(messages.copy)}</p> | 150 | <div className={classes.content}> |
133 | </div> | 151 | <p>{intl.formatMessage(messages.intro)}</p> |
134 | <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" /> | 152 | <p>{intl.formatMessage(messages.copy)}</p> |
135 | </div> | 153 | </div> |
136 | </> | 154 | <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" /> |
137 | </PremiumFeatureContainer> | 155 | </div> |
138 | <Button | 156 | <div className={classes.buttonContainer}> |
139 | label={intl.formatMessage(messages.manageButton)} | 157 | {!isProUser ? ( |
140 | onClick={openTeamManagement} | 158 | <UpgradeButton |
141 | className={classes.cta} | 159 | className={classes.cta} |
142 | /> | 160 | gaEventInfo={{ category: 'Todos', event: 'upgrade' }} |
161 | requiresPro | ||
162 | short | ||
163 | /> | ||
164 | ) : ( | ||
165 | <Button | ||
166 | label={intl.formatMessage(messages.manageButton)} | ||
167 | onClick={openTeamManagement} | ||
168 | className={classes.cta} | ||
169 | /> | ||
170 | )} | ||
171 | </div> | ||
172 | </> | ||
143 | </> | 173 | </> |
144 | )} | 174 | )} |
145 | </> | 175 | </> |
diff --git a/src/components/ui/UpgradeButton/index.js b/src/components/ui/UpgradeButton/index.js new file mode 100644 index 000000000..4aa494e38 --- /dev/null +++ b/src/components/ui/UpgradeButton/index.js | |||
@@ -0,0 +1,90 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { inject, observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | import classnames from 'classnames'; | ||
6 | |||
7 | import { Button } from '@meetfranz/forms'; | ||
8 | import { gaEvent } from '../../../lib/analytics'; | ||
9 | |||
10 | import UserStore from '../../../stores/UserStore'; | ||
11 | import ActivateTrialButton from '../ActivateTrialButton'; | ||
12 | |||
13 | const messages = defineMessages({ | ||
14 | upgradeToPro: { | ||
15 | id: 'global.upgradeButton.upgradeToPro', | ||
16 | defaultMessage: '!!!Upgrade to Franz Professional', | ||
17 | }, | ||
18 | }); | ||
19 | |||
20 | @inject('stores', 'actions') @observer | ||
21 | class UpgradeButton extends Component { | ||
22 | static propTypes = { | ||
23 | // eslint-disable-next-line | ||
24 | classes: PropTypes.object.isRequired, | ||
25 | className: PropTypes.string, | ||
26 | gaEventInfo: PropTypes.shape({ | ||
27 | category: PropTypes.string.isRequired, | ||
28 | event: PropTypes.string.isRequired, | ||
29 | label: PropTypes.string, | ||
30 | }), | ||
31 | requiresPro: PropTypes.bool, | ||
32 | }; | ||
33 | |||
34 | static defaultProps = { | ||
35 | className: '', | ||
36 | gaEventInfo: null, | ||
37 | requiresPro: false, | ||
38 | } | ||
39 | |||
40 | static contextTypes = { | ||
41 | intl: intlShape, | ||
42 | }; | ||
43 | |||
44 | handleCTAClick() { | ||
45 | const { actions, gaEventInfo } = this.props; | ||
46 | |||
47 | actions.ui.openSettings({ path: 'user' }); | ||
48 | if (gaEventInfo) { | ||
49 | const { category, event } = gaEventInfo; | ||
50 | gaEvent(category, event, 'Upgrade Account'); | ||
51 | } | ||
52 | } | ||
53 | |||
54 | render() { | ||
55 | const { stores, requiresPro } = this.props; | ||
56 | const { intl } = this.context; | ||
57 | |||
58 | const { isPremium, isPersonal } = stores.user; | ||
59 | |||
60 | if (isPremium && isPersonal && requiresPro) { | ||
61 | return ( | ||
62 | <Button | ||
63 | label={intl.formatMessage(messages.upgradeToPro)} | ||
64 | onClick={this.handleCTAClick.bind(this)} | ||
65 | className={this.props.className} | ||
66 | buttonType="inverted" | ||
67 | /> | ||
68 | ); | ||
69 | } | ||
70 | |||
71 | if (!isPremium) { | ||
72 | return <ActivateTrialButton {...this.props} />; | ||
73 | } | ||
74 | |||
75 | return null; | ||
76 | } | ||
77 | } | ||
78 | |||
79 | export default UpgradeButton; | ||
80 | |||
81 | UpgradeButton.wrappedComponent.propTypes = { | ||
82 | stores: PropTypes.shape({ | ||
83 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
84 | }).isRequired, | ||
85 | actions: PropTypes.shape({ | ||
86 | ui: PropTypes.shape({ | ||
87 | openSettings: PropTypes.func.isRequired, | ||
88 | }).isRequired, | ||
89 | }).isRequired, | ||
90 | }; | ||