diff options
Diffstat (limited to 'src/features/serviceLimit/components/LimitReachedInfobox.js')
-rw-r--r-- | src/features/serviceLimit/components/LimitReachedInfobox.js | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/src/features/serviceLimit/components/LimitReachedInfobox.js b/src/features/serviceLimit/components/LimitReachedInfobox.js new file mode 100644 index 000000000..ee0d7cb27 --- /dev/null +++ b/src/features/serviceLimit/components/LimitReachedInfobox.js | |||
@@ -0,0 +1,74 @@ | |||
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 injectSheet from 'react-jss'; | ||
6 | import { Infobox } from '@meetfranz/ui'; | ||
7 | |||
8 | import { gaEvent } from '../../../lib/analytics'; | ||
9 | |||
10 | const messages = defineMessages({ | ||
11 | limitReached: { | ||
12 | id: 'feature.serviceLimit.limitReached', | ||
13 | defaultMessage: '!!!You have added {amount} of {limit} services. Please upgrade your account to add more services.', | ||
14 | }, | ||
15 | action: { | ||
16 | id: 'premiumFeature.button.upgradeAccount', | ||
17 | defaultMessage: '!!!Upgrade account', | ||
18 | }, | ||
19 | }); | ||
20 | |||
21 | const styles = theme => ({ | ||
22 | container: { | ||
23 | height: 'auto', | ||
24 | background: theme.styleTypes.primary.accent, | ||
25 | color: theme.styleTypes.primary.contrast, | ||
26 | borderRadius: 0, | ||
27 | marginBottom: 0, | ||
28 | |||
29 | '& button': { | ||
30 | color: theme.styleTypes.primary.contrast, | ||
31 | }, | ||
32 | }, | ||
33 | }); | ||
34 | |||
35 | |||
36 | @inject('stores', 'actions') @injectSheet(styles) @observer | ||
37 | class LimitReachedInfobox extends Component { | ||
38 | static propTypes = { | ||
39 | classes: PropTypes.object.isRequired, | ||
40 | stores: PropTypes.object.isRequired, | ||
41 | actions: PropTypes.object.isRequired, | ||
42 | }; | ||
43 | |||
44 | static contextTypes = { | ||
45 | intl: intlShape, | ||
46 | }; | ||
47 | |||
48 | render() { | ||
49 | const { classes, stores, actions } = this.props; | ||
50 | const { intl } = this.context; | ||
51 | |||
52 | const { | ||
53 | serviceLimit, | ||
54 | } = stores; | ||
55 | |||
56 | if (!serviceLimit.userHasReachedServiceLimit) return null; | ||
57 | |||
58 | return ( | ||
59 | <Infobox | ||
60 | icon="mdiInformation" | ||
61 | className={classes.container} | ||
62 | ctaLabel={intl.formatMessage(messages.action)} | ||
63 | ctaOnClick={() => { | ||
64 | actions.ui.openSettings({ path: 'user' }); | ||
65 | gaEvent('Service Limit', 'upgrade', 'Upgrade account'); | ||
66 | }} | ||
67 | > | ||
68 | {intl.formatMessage(messages.limitReached, { amount: serviceLimit.serviceCount, limit: serviceLimit.serviceLimit })} | ||
69 | </Infobox> | ||
70 | ); | ||
71 | } | ||
72 | } | ||
73 | |||
74 | export default LimitReachedInfobox; | ||