diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/services/content/ConnectionLostBanner.js | 119 | ||||
-rw-r--r-- | src/components/services/content/ServiceView.js | 8 | ||||
-rw-r--r-- | src/components/services/tabs/TabItem.js | 2 | ||||
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 14 | ||||
-rw-r--r-- | src/components/ui/FeatureList.js | 5 |
5 files changed, 146 insertions, 2 deletions
diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.js new file mode 100644 index 000000000..9609a65b1 --- /dev/null +++ b/src/components/services/content/ConnectionLostBanner.js | |||
@@ -0,0 +1,119 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import { Icon } from '@meetfranz/ui'; | ||
6 | import { intlShape, defineMessages } from 'react-intl'; | ||
7 | |||
8 | import { | ||
9 | mdiAlert, | ||
10 | } from '@mdi/js'; | ||
11 | import { LIVE_API_WEBSITE } from '../../../config'; | ||
12 | // import { Button } from '@meetfranz/forms'; | ||
13 | |||
14 | const messages = defineMessages({ | ||
15 | text: { | ||
16 | id: 'connectionLostBanner.message', | ||
17 | defaultMessage: '!!!Oh no! Franz lost the connection to {name}.', | ||
18 | }, | ||
19 | moreInformation: { | ||
20 | id: 'connectionLostBanner.informationLink', | ||
21 | defaultMessage: '!!!What happened?', | ||
22 | }, | ||
23 | cta: { | ||
24 | id: 'connectionLostBanner.cta', | ||
25 | defaultMessage: '!!!Reload Service', | ||
26 | }, | ||
27 | }); | ||
28 | |||
29 | const styles = theme => ({ | ||
30 | root: { | ||
31 | background: theme.colorBackground, | ||
32 | borderRadius: theme.borderRadius, | ||
33 | position: 'absolute', | ||
34 | zIndex: 300, | ||
35 | height: 50, | ||
36 | display: 'flex', | ||
37 | flexDirection: 'row', | ||
38 | alignItems: 'center', | ||
39 | bottom: 10, | ||
40 | right: 10, | ||
41 | justifyContent: 'center', | ||
42 | padding: 10, | ||
43 | fontSize: 12, | ||
44 | }, | ||
45 | link: { | ||
46 | display: 'inline-flex', | ||
47 | opacity: 0.7, | ||
48 | }, | ||
49 | button: { | ||
50 | transition: 'opacity 0.25s', | ||
51 | color: theme.colorText, | ||
52 | border: [1, 'solid', theme.colorText], | ||
53 | borderRadius: theme.borderRadiusSmall, | ||
54 | padding: 4, | ||
55 | fontSize: 12, | ||
56 | marginLeft: 15, | ||
57 | |||
58 | '&:hover': { | ||
59 | opacity: 0.8, | ||
60 | }, | ||
61 | }, | ||
62 | icon: { | ||
63 | marginRight: 10, | ||
64 | fill: theme.styleTypes.danger.accent, | ||
65 | }, | ||
66 | }); | ||
67 | |||
68 | @injectSheet(styles) @observer | ||
69 | class ConnectionLostBanner extends Component { | ||
70 | static propTypes = { | ||
71 | classes: PropTypes.object.isRequired, | ||
72 | name: PropTypes.string.isRequired, | ||
73 | reload: PropTypes.func.isRequired, | ||
74 | } | ||
75 | |||
76 | static contextTypes = { | ||
77 | intl: intlShape, | ||
78 | }; | ||
79 | |||
80 | inputRef = React.createRef(); | ||
81 | |||
82 | render() { | ||
83 | const { | ||
84 | classes, | ||
85 | name, | ||
86 | reload, | ||
87 | } = this.props; | ||
88 | |||
89 | const { intl } = this.context; | ||
90 | |||
91 | return ( | ||
92 | <div className={classes.root}> | ||
93 | <Icon | ||
94 | icon={mdiAlert} | ||
95 | className={classes.icon} | ||
96 | /> | ||
97 | <p> | ||
98 | {intl.formatMessage(messages.text, { name })} | ||
99 | <br /> | ||
100 | <a | ||
101 | href={`${LIVE_API_WEBSITE}/support#what-does-franz-lost-the-connection-to-service-mean`} | ||
102 | className={classes.link} | ||
103 | > | ||
104 | {intl.formatMessage(messages.moreInformation)} | ||
105 | </a> | ||
106 | </p> | ||
107 | <button | ||
108 | type="button" | ||
109 | className={classes.button} | ||
110 | onClick={reload} | ||
111 | > | ||
112 | {intl.formatMessage(messages.cta)} | ||
113 | </button> | ||
114 | </div> | ||
115 | ); | ||
116 | } | ||
117 | } | ||
118 | |||
119 | export default ConnectionLostBanner; | ||
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js index f6832038a..d91016c71 100644 --- a/src/components/services/content/ServiceView.js +++ b/src/components/services/content/ServiceView.js | |||
@@ -193,7 +193,7 @@ export default @inject('stores', 'actions') @observer class ServiceView extends | |||
193 | </Fragment> | 193 | </Fragment> |
194 | ) : ( | 194 | ) : ( |
195 | <> | 195 | <> |
196 | {!service.isHibernating ? ( | 196 | {(!service.isHibernating || service.disableHibernation) ? ( |
197 | <> | 197 | <> |
198 | {showNavBar && ( | 198 | {showNavBar && ( |
199 | <WebControlsScreen service={service} /> | 199 | <WebControlsScreen service={service} /> |
@@ -203,6 +203,12 @@ export default @inject('stores', 'actions') @observer class ServiceView extends | |||
203 | setWebviewReference={setWebviewReference} | 203 | setWebviewReference={setWebviewReference} |
204 | detachService={detachService} | 204 | detachService={detachService} |
205 | /> | 205 | /> |
206 | {/* {service.lostRecipeConnection && ( | ||
207 | <ConnectionLostBanner | ||
208 | name={service.name} | ||
209 | reload={reload} | ||
210 | /> | ||
211 | )} */} | ||
206 | </> | 212 | </> |
207 | ) : ( | 213 | ) : ( |
208 | <div> | 214 | <div> |
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js index 36338a910..ea7a66a62 100644 --- a/src/components/services/tabs/TabItem.js +++ b/src/components/services/tabs/TabItem.js | |||
@@ -145,7 +145,7 @@ class TabItem extends Component { | |||
145 | • | 145 | • |
146 | </span> | 146 | </span> |
147 | )} | 147 | )} |
148 | {service.isHibernating && ( | 148 | {service.isHibernating && !service.disableHibernation && ( |
149 | <span className="tab-item__message-count hibernating"> | 149 | <span className="tab-item__message-count hibernating"> |
150 | • | 150 | • |
151 | </span> | 151 | </span> |
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index bb4f4a76f..4fd1f99ef 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js | |||
@@ -94,6 +94,10 @@ const messages = defineMessages({ | |||
94 | id: 'settings.service.form.isMutedInfo', | 94 | id: 'settings.service.form.isMutedInfo', |
95 | defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted', | 95 | defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted', |
96 | }, | 96 | }, |
97 | disableHibernationInfo: { | ||
98 | id: 'settings.service.form.disableHibernationInfo', | ||
99 | defaultMessage: '!!!You currently have hibernation enabled but you can disable hibernation for individual services using this option.', | ||
100 | }, | ||
97 | headlineNotifications: { | 101 | headlineNotifications: { |
98 | id: 'settings.service.form.headlineNotifications', | 102 | id: 'settings.service.form.headlineNotifications', |
99 | defaultMessage: '!!!Notifications', | 103 | defaultMessage: '!!!Notifications', |
@@ -154,6 +158,7 @@ export default @observer class EditServiceForm extends Component { | |||
154 | isProxyFeatureEnabled: PropTypes.bool.isRequired, | 158 | isProxyFeatureEnabled: PropTypes.bool.isRequired, |
155 | isServiceProxyIncludedInCurrentPlan: PropTypes.bool.isRequired, | 159 | isServiceProxyIncludedInCurrentPlan: PropTypes.bool.isRequired, |
156 | isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired, | 160 | isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired, |
161 | isHibernationFeatureActive: PropTypes.bool.isRequired, | ||
157 | }; | 162 | }; |
158 | 163 | ||
159 | static defaultProps = { | 164 | static defaultProps = { |
@@ -219,6 +224,7 @@ export default @observer class EditServiceForm extends Component { | |||
219 | isProxyFeatureEnabled, | 224 | isProxyFeatureEnabled, |
220 | isServiceProxyIncludedInCurrentPlan, | 225 | isServiceProxyIncludedInCurrentPlan, |
221 | isSpellcheckerIncludedInCurrentPlan, | 226 | isSpellcheckerIncludedInCurrentPlan, |
227 | isHibernationFeatureActive, | ||
222 | } = this.props; | 228 | } = this.props; |
223 | const { intl } = this.context; | 229 | const { intl } = this.context; |
224 | 230 | ||
@@ -365,6 +371,14 @@ export default @observer class EditServiceForm extends Component { | |||
365 | <div className="settings__settings-group"> | 371 | <div className="settings__settings-group"> |
366 | <h3>{intl.formatMessage(messages.headlineGeneral)}</h3> | 372 | <h3>{intl.formatMessage(messages.headlineGeneral)}</h3> |
367 | <Toggle field={form.$('isEnabled')} /> | 373 | <Toggle field={form.$('isEnabled')} /> |
374 | {isHibernationFeatureActive && ( | ||
375 | <> | ||
376 | <Toggle field={form.$('disableHibernation')} /> | ||
377 | <p className="settings__help"> | ||
378 | {intl.formatMessage(messages.disableHibernationInfo)} | ||
379 | </p> | ||
380 | </> | ||
381 | )} | ||
368 | <Toggle field={form.$('isDarkModeEnabled')} /> | 382 | <Toggle field={form.$('isDarkModeEnabled')} /> |
369 | {form.$('isDarkModeEnabled').value | 383 | {form.$('isDarkModeEnabled').value |
370 | && ( | 384 | && ( |
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js index f1039709c..dbc2a9078 100644 --- a/src/components/ui/FeatureList.js +++ b/src/components/ui/FeatureList.js | |||
@@ -66,6 +66,10 @@ const messages = defineMessages({ | |||
66 | id: 'pricing.features.adFree', | 66 | id: 'pricing.features.adFree', |
67 | defaultMessage: '!!!Forever ad-free', | 67 | defaultMessage: '!!!Forever ad-free', |
68 | }, | 68 | }, |
69 | appDelayEnabled: { | ||
70 | id: 'pricing.features.appDelaysEnabled', | ||
71 | defaultMessage: '!!!Occasional Waiting Screens', | ||
72 | }, | ||
69 | }); | 73 | }); |
70 | 74 | ||
71 | export class FeatureList extends Component { | 75 | export class FeatureList extends Component { |
@@ -96,6 +100,7 @@ export class FeatureList extends Component { | |||
96 | const features = []; | 100 | const features = []; |
97 | if (plan === PLANS.FREE) { | 101 | if (plan === PLANS.FREE) { |
98 | features.push( | 102 | features.push( |
103 | messages.appDelayEnabled, | ||
99 | messages.upToThreeServices, | 104 | messages.upToThreeServices, |
100 | messages.availableRecipes, | 105 | messages.availableRecipes, |
101 | messages.accountSync, | 106 | messages.accountSync, |