diff options
Diffstat (limited to 'src/components/services/content/ServiceRestricted.js')
-rw-r--r-- | src/components/services/content/ServiceRestricted.js | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/src/components/services/content/ServiceRestricted.js b/src/components/services/content/ServiceRestricted.js new file mode 100644 index 000000000..9fb7d0961 --- /dev/null +++ b/src/components/services/content/ServiceRestricted.js | |||
@@ -0,0 +1,54 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | |||
6 | import { serviceLimitStore } from '../../../features/serviceLimit'; | ||
7 | import Button from '../../ui/Button'; | ||
8 | |||
9 | const messages = defineMessages({ | ||
10 | headline: { | ||
11 | id: 'service.restrictedHandler.headline', | ||
12 | defaultMessage: '!!!You have reached your service limit.', | ||
13 | }, | ||
14 | text: { | ||
15 | id: 'service.restrictedHandler.text', | ||
16 | defaultMessage: '!!!Please upgrade your account to use more than {count} services.', | ||
17 | }, | ||
18 | action: { | ||
19 | id: 'service.restrictedHandler.action', | ||
20 | defaultMessage: '!!!Upgrade Account', | ||
21 | }, | ||
22 | }); | ||
23 | |||
24 | export default @observer class ServiceRestricted extends Component { | ||
25 | static propTypes = { | ||
26 | name: PropTypes.string.isRequired, | ||
27 | upgrade: PropTypes.func.isRequired, | ||
28 | }; | ||
29 | |||
30 | static contextTypes = { | ||
31 | intl: intlShape, | ||
32 | }; | ||
33 | |||
34 | countdownInterval = null; | ||
35 | |||
36 | countdownIntervalTimeout = 1000; | ||
37 | |||
38 | render() { | ||
39 | const { name, upgrade } = this.props; | ||
40 | const { intl } = this.context; | ||
41 | |||
42 | return ( | ||
43 | <div className="services__info-layer"> | ||
44 | <h1>{intl.formatMessage(messages.headline)}</h1> | ||
45 | <p>{intl.formatMessage(messages.text, { count: serviceLimitStore.serviceLimit })}</p> | ||
46 | <Button | ||
47 | label={intl.formatMessage(messages.action, { name })} | ||
48 | buttonType="inverted" | ||
49 | onClick={() => upgrade()} | ||
50 | /> | ||
51 | </div> | ||
52 | ); | ||
53 | } | ||
54 | } | ||