diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-06-13 15:16:57 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-06-13 15:16:57 +0200 |
commit | 97852499feba82003021c501b97b075e11647f5e (patch) | |
tree | 1cbd4031cc8a3910e511a1013a2af54fc38bc353 /src/components/services | |
parent | Improve serviceLimit implementation (diff) | |
download | ferdium-app-97852499feba82003021c501b97b075e11647f5e.tar.gz ferdium-app-97852499feba82003021c501b97b075e11647f5e.tar.zst ferdium-app-97852499feba82003021c501b97b075e11647f5e.zip |
Add "service limit reached" screen
Diffstat (limited to 'src/components/services')
-rw-r--r-- | src/components/services/content/ServiceRestricted.js | 54 | ||||
-rw-r--r-- | src/components/services/content/ServiceView.js | 25 | ||||
-rw-r--r-- | src/components/services/content/Services.js | 1 |
3 files changed, 74 insertions, 6 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 | } | ||
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js index 13148b9b3..18279fd06 100644 --- a/src/components/services/content/ServiceView.js +++ b/src/components/services/content/ServiceView.js | |||
@@ -10,6 +10,7 @@ import WebviewLoader from '../../ui/WebviewLoader'; | |||
10 | import WebviewCrashHandler from './WebviewCrashHandler'; | 10 | import WebviewCrashHandler from './WebviewCrashHandler'; |
11 | import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler'; | 11 | import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler'; |
12 | import ServiceDisabled from './ServiceDisabled'; | 12 | import ServiceDisabled from './ServiceDisabled'; |
13 | import ServiceRestricted from './ServiceRestricted'; | ||
13 | import ServiceWebview from './ServiceWebview'; | 14 | import ServiceWebview from './ServiceWebview'; |
14 | 15 | ||
15 | export default @observer class ServiceView extends Component { | 16 | export default @observer class ServiceView extends Component { |
@@ -21,6 +22,7 @@ export default @observer class ServiceView extends Component { | |||
21 | edit: PropTypes.func.isRequired, | 22 | edit: PropTypes.func.isRequired, |
22 | enable: PropTypes.func.isRequired, | 23 | enable: PropTypes.func.isRequired, |
23 | isActive: PropTypes.bool, | 24 | isActive: PropTypes.bool, |
25 | upgrade: PropTypes.func.isRequired, | ||
24 | }; | 26 | }; |
25 | 27 | ||
26 | static defaultProps = { | 28 | static defaultProps = { |
@@ -72,6 +74,7 @@ export default @observer class ServiceView extends Component { | |||
72 | reload, | 74 | reload, |
73 | edit, | 75 | edit, |
74 | enable, | 76 | enable, |
77 | upgrade, | ||
75 | } = this.props; | 78 | } = this.props; |
76 | 79 | ||
77 | const webviewClasses = classnames({ | 80 | const webviewClasses = classnames({ |
@@ -99,7 +102,7 @@ export default @observer class ServiceView extends Component { | |||
99 | reload={reload} | 102 | reload={reload} |
100 | /> | 103 | /> |
101 | )} | 104 | )} |
102 | {service.isEnabled && service.isLoading && service.isFirstLoad && ( | 105 | {service.isEnabled && service.isLoading && service.isFirstLoad && !service.isServiceAccessRestricted && ( |
103 | <WebviewLoader | 106 | <WebviewLoader |
104 | loaded={false} | 107 | loaded={false} |
105 | name={service.name} | 108 | name={service.name} |
@@ -126,11 +129,21 @@ export default @observer class ServiceView extends Component { | |||
126 | )} | 129 | )} |
127 | </Fragment> | 130 | </Fragment> |
128 | ) : ( | 131 | ) : ( |
129 | <ServiceWebview | 132 | <> |
130 | service={service} | 133 | {service.isServiceAccessRestricted ? ( |
131 | setWebviewReference={setWebviewReference} | 134 | <ServiceRestricted |
132 | detachService={detachService} | 135 | name={service.recipe.name} |
133 | /> | 136 | webview={service.webview} |
137 | upgrade={upgrade} | ||
138 | /> | ||
139 | ) : ( | ||
140 | <ServiceWebview | ||
141 | service={service} | ||
142 | setWebviewReference={setWebviewReference} | ||
143 | detachService={detachService} | ||
144 | /> | ||
145 | )} | ||
146 | </> | ||
134 | )} | 147 | )} |
135 | {statusBar} | 148 | {statusBar} |
136 | </div> | 149 | </div> |
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js index 8f8c38a11..48de0ebaa 100644 --- a/src/components/services/content/Services.js +++ b/src/components/services/content/Services.js | |||
@@ -89,6 +89,7 @@ export default @observer class Services extends Component { | |||
89 | }, | 89 | }, |
90 | redirect: false, | 90 | redirect: false, |
91 | })} | 91 | })} |
92 | upgrade={() => openSettings({ path: 'user' })} | ||
92 | /> | 93 | /> |
93 | ))} | 94 | ))} |
94 | </div> | 95 | </div> |