diff options
Diffstat (limited to 'src/components/ui/PremiumFeatureContainer/index.js')
-rw-r--r-- | src/components/ui/PremiumFeatureContainer/index.js | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js new file mode 100644 index 000000000..73984be94 --- /dev/null +++ b/src/components/ui/PremiumFeatureContainer/index.js | |||
@@ -0,0 +1,76 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import { inject, observer } from 'mobx-react'; | ||
3 | import PropTypes from 'prop-types'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | import injectSheet from 'react-jss'; | ||
6 | |||
7 | import { oneOrManyChildElements } from '../../../prop-types'; | ||
8 | |||
9 | import UserStore from '../../../stores/UserStore'; | ||
10 | |||
11 | import styles from './styles'; | ||
12 | |||
13 | const messages = defineMessages({ | ||
14 | action: { | ||
15 | id: 'premiumFeature.button.upgradeAccount', | ||
16 | defaultMessage: '!!!Upgrade account', | ||
17 | }, | ||
18 | }); | ||
19 | |||
20 | export default @inject('stores', 'actions') @injectSheet(styles) @observer class PremiumFeatureContainer extends Component { | ||
21 | static propTypes = { | ||
22 | classes: PropTypes.object.isRequired, | ||
23 | condition: PropTypes.bool, | ||
24 | }; | ||
25 | |||
26 | static defaultProps = { | ||
27 | condition: true, | ||
28 | }; | ||
29 | |||
30 | static contextTypes = { | ||
31 | intl: intlShape, | ||
32 | }; | ||
33 | |||
34 | render() { | ||
35 | const { | ||
36 | classes, | ||
37 | children, | ||
38 | actions, | ||
39 | condition, | ||
40 | stores, | ||
41 | } = this.props; | ||
42 | |||
43 | const { intl } = this.context; | ||
44 | |||
45 | return !stores.user.data.isPremium && !!condition ? ( | ||
46 | <div className={classes.container}> | ||
47 | <div className={classes.titleContainer}> | ||
48 | <p className={classes.title}>Premium Feature</p> | ||
49 | <button | ||
50 | className={classes.actionButton} | ||
51 | type="button" | ||
52 | onClick={() => actions.ui.openSettings({ path: 'user' })} | ||
53 | > | ||
54 | {intl.formatMessage(messages.action)} | ||
55 | </button> | ||
56 | </div> | ||
57 | <div className={classes.content}> | ||
58 | {children} | ||
59 | </div> | ||
60 | </div> | ||
61 | ) : children; | ||
62 | } | ||
63 | } | ||
64 | |||
65 | PremiumFeatureContainer.wrappedComponent.propTypes = { | ||
66 | children: oneOrManyChildElements.isRequired, | ||
67 | stores: PropTypes.shape({ | ||
68 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
69 | }).isRequired, | ||
70 | actions: PropTypes.shape({ | ||
71 | ui: PropTypes.shape({ | ||
72 | openSettings: PropTypes.func.isRequired, | ||
73 | }).isRequired, | ||
74 | }).isRequired, | ||
75 | }; | ||
76 | |||