diff options
Diffstat (limited to 'src/components/ui/PremiumFeatureContainer')
-rw-r--r-- | src/components/ui/PremiumFeatureContainer/index.js | 101 | ||||
-rw-r--r-- | src/components/ui/PremiumFeatureContainer/styles.js | 34 |
2 files changed, 0 insertions, 135 deletions
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js deleted file mode 100644 index 1e100f9d8..000000000 --- a/src/components/ui/PremiumFeatureContainer/index.js +++ /dev/null | |||
@@ -1,101 +0,0 @@ | |||
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 | import FeaturesStore from '../../../stores/FeaturesStore'; | ||
13 | import UIStore from '../../../stores/UIStore'; | ||
14 | |||
15 | const messages = defineMessages({ | ||
16 | action: { | ||
17 | id: 'premiumFeature.button.upgradeAccount', | ||
18 | defaultMessage: '!!!Upgrade account', | ||
19 | }, | ||
20 | }); | ||
21 | |||
22 | @inject('stores', 'actions') @injectSheet(styles) @observer | ||
23 | class PremiumFeatureContainer extends Component { | ||
24 | static propTypes = { | ||
25 | classes: PropTypes.object.isRequired, | ||
26 | condition: PropTypes.oneOfType([ | ||
27 | PropTypes.bool, | ||
28 | PropTypes.func, | ||
29 | ]), | ||
30 | gaEventInfo: PropTypes.shape({ | ||
31 | category: PropTypes.string.isRequired, | ||
32 | event: PropTypes.string.isRequired, | ||
33 | label: PropTypes.string, | ||
34 | }), | ||
35 | }; | ||
36 | |||
37 | static defaultProps = { | ||
38 | condition: null, | ||
39 | gaEventInfo: null, | ||
40 | }; | ||
41 | |||
42 | static contextTypes = { | ||
43 | intl: intlShape, | ||
44 | }; | ||
45 | |||
46 | render() { | ||
47 | const { | ||
48 | classes, | ||
49 | children, | ||
50 | actions, | ||
51 | condition, | ||
52 | stores, | ||
53 | } = this.props; | ||
54 | |||
55 | const { intl } = this.context; | ||
56 | |||
57 | let showWrapper = !!condition; | ||
58 | |||
59 | if (condition === null) { | ||
60 | showWrapper = !stores.user.data.isPremium; | ||
61 | } else if (typeof condition === 'function') { | ||
62 | showWrapper = condition({ | ||
63 | isPremium: stores.user.data.isPremium, | ||
64 | features: stores.features.features, | ||
65 | }); | ||
66 | } | ||
67 | |||
68 | return showWrapper ? ( | ||
69 | <div className={classes.container}> | ||
70 | <div className={classes.titleContainer}> | ||
71 | <p className={classes.title}>Premium Feature</p> | ||
72 | <button | ||
73 | className={classes.actionButton} | ||
74 | type="button" | ||
75 | onClick={() => { | ||
76 | actions.ui.openSettings({ path: 'user' }); | ||
77 | }} | ||
78 | > | ||
79 | {intl.formatMessage(messages.action)} | ||
80 | </button> | ||
81 | </div> | ||
82 | <div className={classes.content}> | ||
83 | {children} | ||
84 | </div> | ||
85 | </div> | ||
86 | ) : children; | ||
87 | } | ||
88 | } | ||
89 | |||
90 | PremiumFeatureContainer.wrappedComponent.propTypes = { | ||
91 | children: oneOrManyChildElements.isRequired, | ||
92 | stores: PropTypes.shape({ | ||
93 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
94 | features: PropTypes.instanceOf(FeaturesStore).isRequired, | ||
95 | }).isRequired, | ||
96 | actions: PropTypes.shape({ | ||
97 | ui: PropTypes.instanceOf(UIStore).isRequired, | ||
98 | }).isRequired, | ||
99 | }; | ||
100 | |||
101 | export default PremiumFeatureContainer; | ||
diff --git a/src/components/ui/PremiumFeatureContainer/styles.js b/src/components/ui/PremiumFeatureContainer/styles.js deleted file mode 100644 index 41881e044..000000000 --- a/src/components/ui/PremiumFeatureContainer/styles.js +++ /dev/null | |||
@@ -1,34 +0,0 @@ | |||
1 | export default theme => ({ | ||
2 | container: { | ||
3 | background: theme.colorSubscriptionContainerBackground, | ||
4 | border: theme.colorSubscriptionContainerBorder, | ||
5 | margin: [0, 0, 20, -20], | ||
6 | padding: 20, | ||
7 | 'border-radius': theme.borderRadius, | ||
8 | pointerEvents: 'none', | ||
9 | height: 'auto', | ||
10 | }, | ||
11 | titleContainer: { | ||
12 | display: 'flex', | ||
13 | }, | ||
14 | title: { | ||
15 | 'font-weight': 'bold', | ||
16 | color: theme.colorSubscriptionContainerTitle, | ||
17 | }, | ||
18 | actionButton: { | ||
19 | background: theme.colorSubscriptionContainerActionButtonBackground, | ||
20 | color: theme.colorSubscriptionContainerActionButtonColor, | ||
21 | 'margin-left': 'auto', | ||
22 | 'border-radius': theme.borderRadiusSmall, | ||
23 | padding: [4, 8], | ||
24 | 'font-size': 12, | ||
25 | pointerEvents: 'initial', | ||
26 | }, | ||
27 | content: { | ||
28 | opacity: 0.5, | ||
29 | 'margin-top': 20, | ||
30 | '& > :last-child': { | ||
31 | 'margin-bottom': 0, | ||
32 | }, | ||
33 | }, | ||
34 | }); | ||