diff options
author | 2019-09-05 14:34:13 +0200 | |
---|---|---|
committer | 2019-09-05 14:34:13 +0200 | |
commit | 5336eab8b279eea886d8ce6efb03bd771d65ddc8 (patch) | |
tree | 79ebdf1a60ed0f2f1c8de93c90e90d7d2f5dab47 /src/components | |
parent | Merge branch 'feature/todos' into develop (diff) | |
parent | Fix headline spacing (diff) | |
download | ferdium-app-5336eab8b279eea886d8ce6efb03bd771d65ddc8.tar.gz ferdium-app-5336eab8b279eea886d8ce6efb03bd771d65ddc8.tar.zst ferdium-app-5336eab8b279eea886d8ce6efb03bd771d65ddc8.zip |
Merge branch 'develop' of https://github.com/meetfranz/franz into develop
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/TrialActivationInfoBar.js | 2 | ||||
-rw-r--r-- | src/components/settings/account/AccountDashboard.js | 4 | ||||
-rw-r--r-- | src/components/settings/team/TeamDashboard.js | 73 | ||||
-rw-r--r-- | src/components/ui/UpgradeButton/index.js | 89 |
4 files changed, 149 insertions, 19 deletions
diff --git a/src/components/TrialActivationInfoBar.js b/src/components/TrialActivationInfoBar.js index acdf51d08..77ab97565 100644 --- a/src/components/TrialActivationInfoBar.js +++ b/src/components/TrialActivationInfoBar.js | |||
@@ -20,7 +20,7 @@ const styles = { | |||
20 | position: 'absolute', | 20 | position: 'absolute', |
21 | top: -50, | 21 | top: -50, |
22 | transition: 'top 0.3s', | 22 | transition: 'top 0.3s', |
23 | zIndex: 300, | 23 | zIndex: 500, |
24 | width: 'calc(100% - 300px)', | 24 | width: 'calc(100% - 300px)', |
25 | }, | 25 | }, |
26 | show: { | 26 | show: { |
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index 4fd1e8163..ac2594604 100644 --- a/src/components/settings/account/AccountDashboard.js +++ b/src/components/settings/account/AccountDashboard.js | |||
@@ -97,6 +97,7 @@ const messages = defineMessages({ | |||
97 | class AccountDashboard extends Component { | 97 | class AccountDashboard extends Component { |
98 | static propTypes = { | 98 | static propTypes = { |
99 | user: MobxPropTypes.observableObject.isRequired, | 99 | user: MobxPropTypes.observableObject.isRequired, |
100 | isPremiumOverrideUser: PropTypes.bool.isRequired, | ||
100 | isProUser: PropTypes.bool.isRequired, | 101 | isProUser: PropTypes.bool.isRequired, |
101 | isLoading: PropTypes.bool.isRequired, | 102 | isLoading: PropTypes.bool.isRequired, |
102 | userInfoRequestFailed: PropTypes.bool.isRequired, | 103 | userInfoRequestFailed: PropTypes.bool.isRequired, |
@@ -117,6 +118,7 @@ class AccountDashboard extends Component { | |||
117 | render() { | 118 | render() { |
118 | const { | 119 | const { |
119 | user, | 120 | user, |
121 | isPremiumOverrideUser, | ||
120 | isProUser, | 122 | isProUser, |
121 | isLoading, | 123 | isLoading, |
122 | userInfoRequestFailed, | 124 | userInfoRequestFailed, |
@@ -213,7 +215,7 @@ class AccountDashboard extends Component { | |||
213 | {intl.formatMessage(messages.yourLicense)} | 215 | {intl.formatMessage(messages.yourLicense)} |
214 | </H2> | 216 | </H2> |
215 | <p> | 217 | <p> |
216 | {planName} | 218 | {isPremiumOverrideUser ? 'Franz Premium' : planName} |
217 | {user.team.isTrial && ( | 219 | {user.team.isTrial && ( |
218 | <> | 220 | <> |
219 | {' – '} | 221 | {' – '} |
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js index 990ee52e7..366b0113a 100644 --- a/src/components/settings/team/TeamDashboard.js +++ b/src/components/settings/team/TeamDashboard.js | |||
@@ -4,11 +4,14 @@ import { observer } from 'mobx-react'; | |||
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | 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 | import classnames from 'classnames'; | ||
7 | 8 | ||
9 | import { Badge } from '@meetfranz/ui'; | ||
8 | import Loader from '../../ui/Loader'; | 10 | import Loader from '../../ui/Loader'; |
9 | import Button from '../../ui/Button'; | 11 | import Button from '../../ui/Button'; |
10 | import Infobox from '../../ui/Infobox'; | 12 | import Infobox from '../../ui/Infobox'; |
11 | import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer'; | 13 | import globalMessages from '../../../i18n/globalMessages'; |
14 | import UpgradeButton from '../../ui/UpgradeButton'; | ||
12 | 15 | ||
13 | const messages = defineMessages({ | 16 | const messages = defineMessages({ |
14 | headline: { | 17 | headline: { |
@@ -40,6 +43,7 @@ const messages = defineMessages({ | |||
40 | const styles = { | 43 | const styles = { |
41 | cta: { | 44 | cta: { |
42 | margin: [40, 'auto'], | 45 | margin: [40, 'auto'], |
46 | height: 'auto', | ||
43 | }, | 47 | }, |
44 | container: { | 48 | container: { |
45 | display: 'flex', | 49 | display: 'flex', |
@@ -69,6 +73,20 @@ const styles = { | |||
69 | order: 1, | 73 | order: 1, |
70 | }, | 74 | }, |
71 | }, | 75 | }, |
76 | headline: { | ||
77 | marginBottom: 0, | ||
78 | }, | ||
79 | headlineWithSpacing: { | ||
80 | marginBottom: 'inherit', | ||
81 | }, | ||
82 | proRequired: { | ||
83 | margin: [10, 0, 40], | ||
84 | height: 'auto', | ||
85 | }, | ||
86 | buttonContainer: { | ||
87 | display: 'flex', | ||
88 | height: 'auto', | ||
89 | }, | ||
72 | }; | 90 | }; |
73 | 91 | ||
74 | 92 | ||
@@ -79,6 +97,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
79 | retryUserInfoRequest: PropTypes.func.isRequired, | 97 | retryUserInfoRequest: PropTypes.func.isRequired, |
80 | openTeamManagement: PropTypes.func.isRequired, | 98 | openTeamManagement: PropTypes.func.isRequired, |
81 | classes: PropTypes.object.isRequired, | 99 | classes: PropTypes.object.isRequired, |
100 | isProUser: PropTypes.bool.isRequired, | ||
82 | }; | 101 | }; |
83 | 102 | ||
84 | static contextTypes = { | 103 | static contextTypes = { |
@@ -91,6 +110,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
91 | userInfoRequestFailed, | 110 | userInfoRequestFailed, |
92 | retryUserInfoRequest, | 111 | retryUserInfoRequest, |
93 | openTeamManagement, | 112 | openTeamManagement, |
113 | isProUser, | ||
94 | classes, | 114 | classes, |
95 | } = this.props; | 115 | } = this.props; |
96 | const { intl } = this.context; | 116 | const { intl } = this.context; |
@@ -123,23 +143,42 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
123 | <> | 143 | <> |
124 | {!isLoading && ( | 144 | {!isLoading && ( |
125 | <> | 145 | <> |
126 | <PremiumFeatureContainer> | 146 | <> |
127 | <> | 147 | <h1 className={classnames({ |
128 | <h1>{intl.formatMessage(messages.contentHeadline)}</h1> | 148 | [classes.headline]: true, |
129 | <div className={classes.container}> | 149 | [classes.headlineWithSpacing]: isProUser, |
130 | <div className={classes.content}> | 150 | })} |
131 | <p>{intl.formatMessage(messages.intro)}</p> | 151 | > |
132 | <p>{intl.formatMessage(messages.copy)}</p> | 152 | {intl.formatMessage(messages.contentHeadline)} |
133 | </div> | 153 | |
134 | <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" /> | 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> | ||
135 | </div> | 162 | </div> |
136 | </> | 163 | <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" /> |
137 | </PremiumFeatureContainer> | 164 | </div> |
138 | <Button | 165 | <div className={classes.buttonContainer}> |
139 | label={intl.formatMessage(messages.manageButton)} | 166 | {!isProUser ? ( |
140 | onClick={openTeamManagement} | 167 | <UpgradeButton |
141 | className={classes.cta} | 168 | className={classes.cta} |
142 | /> | 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 | </> | ||
143 | </> | 182 | </> |
144 | )} | 183 | )} |
145 | </> | 184 | </> |
diff --git a/src/components/ui/UpgradeButton/index.js b/src/components/ui/UpgradeButton/index.js new file mode 100644 index 000000000..73762f0bf --- /dev/null +++ b/src/components/ui/UpgradeButton/index.js | |||
@@ -0,0 +1,89 @@ | |||
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 | |||
6 | import { Button } from '@meetfranz/forms'; | ||
7 | import { gaEvent } from '../../../lib/analytics'; | ||
8 | |||
9 | import UserStore from '../../../stores/UserStore'; | ||
10 | import ActivateTrialButton from '../ActivateTrialButton'; | ||
11 | |||
12 | const messages = defineMessages({ | ||
13 | upgradeToPro: { | ||
14 | id: 'global.upgradeButton.upgradeToPro', | ||
15 | defaultMessage: '!!!Upgrade to Franz Professional', | ||
16 | }, | ||
17 | }); | ||
18 | |||
19 | @inject('stores', 'actions') @observer | ||
20 | class UpgradeButton extends Component { | ||
21 | static propTypes = { | ||
22 | // eslint-disable-next-line | ||
23 | classes: PropTypes.object.isRequired, | ||
24 | className: PropTypes.string, | ||
25 | gaEventInfo: PropTypes.shape({ | ||
26 | category: PropTypes.string.isRequired, | ||
27 | event: PropTypes.string.isRequired, | ||
28 | label: PropTypes.string, | ||
29 | }), | ||
30 | requiresPro: PropTypes.bool, | ||
31 | }; | ||
32 | |||
33 | static defaultProps = { | ||
34 | className: '', | ||
35 | gaEventInfo: null, | ||
36 | requiresPro: false, | ||
37 | } | ||
38 | |||
39 | static contextTypes = { | ||
40 | intl: intlShape, | ||
41 | }; | ||
42 | |||
43 | handleCTAClick() { | ||
44 | const { actions, gaEventInfo } = this.props; | ||
45 | |||
46 | actions.ui.openSettings({ path: 'user' }); | ||
47 | if (gaEventInfo) { | ||
48 | const { category, event } = gaEventInfo; | ||
49 | gaEvent(category, event, 'Upgrade Account'); | ||
50 | } | ||
51 | } | ||
52 | |||
53 | render() { | ||
54 | const { stores, requiresPro } = this.props; | ||
55 | const { intl } = this.context; | ||
56 | |||
57 | const { isPremium, isPersonal } = stores.user; | ||
58 | |||
59 | if (isPremium && isPersonal && requiresPro) { | ||
60 | return ( | ||
61 | <Button | ||
62 | label={intl.formatMessage(messages.upgradeToPro)} | ||
63 | onClick={this.handleCTAClick.bind(this)} | ||
64 | className={this.props.className} | ||
65 | buttonType="inverted" | ||
66 | /> | ||
67 | ); | ||
68 | } | ||
69 | |||
70 | if (!isPremium) { | ||
71 | return <ActivateTrialButton {...this.props} />; | ||
72 | } | ||
73 | |||
74 | return null; | ||
75 | } | ||
76 | } | ||
77 | |||
78 | export default UpgradeButton; | ||
79 | |||
80 | UpgradeButton.wrappedComponent.propTypes = { | ||
81 | stores: PropTypes.shape({ | ||
82 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
83 | }).isRequired, | ||
84 | actions: PropTypes.shape({ | ||
85 | ui: PropTypes.shape({ | ||
86 | openSettings: PropTypes.func.isRequired, | ||
87 | }).isRequired, | ||
88 | }).isRequired, | ||
89 | }; | ||