diff options
Diffstat (limited to 'src/components/services/content/ConnectionLostBanner.js')
-rw-r--r-- | src/components/services/content/ConnectionLostBanner.js | 119 |
1 files changed, 119 insertions, 0 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; | ||