diff options
Diffstat (limited to 'src/features/todos/components/TodosWebview.js')
-rw-r--r-- | src/features/todos/components/TodosWebview.js | 105 |
1 files changed, 87 insertions, 18 deletions
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js index 9dd313109..143955a7b 100644 --- a/src/features/todos/components/TodosWebview.js +++ b/src/features/todos/components/TodosWebview.js | |||
@@ -4,12 +4,31 @@ import { observer } from 'mobx-react'; | |||
4 | import injectSheet from 'react-jss'; | 4 | import injectSheet from 'react-jss'; |
5 | import Webview from 'react-electron-web-view'; | 5 | import Webview from 'react-electron-web-view'; |
6 | import { Icon } from '@meetfranz/ui'; | 6 | import { Icon } from '@meetfranz/ui'; |
7 | import { defineMessages, intlShape } from 'react-intl'; | ||
7 | 8 | ||
9 | import { mdiChevronRight, mdiCheckAll } from '@mdi/js'; | ||
8 | import * as environment from '../../../environment'; | 10 | import * as environment from '../../../environment'; |
11 | import Appear from '../../../components/ui/effects/Appear'; | ||
12 | import ActivateTrialButton from '../../../components/ui/ActivateTrialButton'; | ||
9 | 13 | ||
10 | const OPEN_TODOS_BUTTON_SIZE = 45; | 14 | const OPEN_TODOS_BUTTON_SIZE = 45; |
11 | const CLOSE_TODOS_BUTTON_SIZE = 35; | 15 | const CLOSE_TODOS_BUTTON_SIZE = 35; |
12 | 16 | ||
17 | const messages = defineMessages({ | ||
18 | premiumInfo: { | ||
19 | id: 'feature.todos.premium.info', | ||
20 | defaultMessage: '!!!The Franz Todos Preview is currently only available for Franz Premium accounts.', | ||
21 | }, | ||
22 | upgradeCTA: { | ||
23 | id: 'feature.todos.premium.upgrade', | ||
24 | defaultMessage: '!!!Upgrade Account', | ||
25 | }, | ||
26 | rolloutInfo: { | ||
27 | id: 'feature.todos.premium.rollout', | ||
28 | defaultMessage: '!!!Franz Todos will be available to everyone soon.', | ||
29 | }, | ||
30 | }); | ||
31 | |||
13 | const styles = theme => ({ | 32 | const styles = theme => ({ |
14 | root: { | 33 | root: { |
15 | background: theme.colorBackground, | 34 | background: theme.colorBackground, |
@@ -47,7 +66,7 @@ const styles = theme => ({ | |||
47 | height: OPEN_TODOS_BUTTON_SIZE, | 66 | height: OPEN_TODOS_BUTTON_SIZE, |
48 | background: theme.todos.toggleButton.background, | 67 | background: theme.todos.toggleButton.background, |
49 | position: 'absolute', | 68 | position: 'absolute', |
50 | bottom: 80, | 69 | bottom: 120, |
51 | right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)), | 70 | right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)), |
52 | borderRadius: OPEN_TODOS_BUTTON_SIZE / 2, | 71 | borderRadius: OPEN_TODOS_BUTTON_SIZE / 2, |
53 | opacity: props => (props.isVisible ? 0 : 1), | 72 | opacity: props => (props.isVisible ? 0 : 1), |
@@ -71,10 +90,10 @@ const styles = theme => ({ | |||
71 | height: CLOSE_TODOS_BUTTON_SIZE, | 90 | height: CLOSE_TODOS_BUTTON_SIZE, |
72 | background: theme.todos.toggleButton.background, | 91 | background: theme.todos.toggleButton.background, |
73 | position: 'absolute', | 92 | position: 'absolute', |
74 | bottom: 80, | 93 | bottom: 120, |
75 | right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2), | 94 | right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2), |
76 | borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2, | 95 | borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2, |
77 | opacity: 0, | 96 | opacity: ({ isTodosIncludedInCurrentPlan }) => (!isTodosIncludedInCurrentPlan ? 1 : 0), |
78 | transition: 'opacity 0.5s', | 97 | transition: 'opacity 0.5s', |
79 | zIndex: 600, | 98 | zIndex: 600, |
80 | display: 'flex', | 99 | display: 'flex', |
@@ -86,6 +105,26 @@ const styles = theme => ({ | |||
86 | fill: theme.todos.toggleButton.textColor, | 105 | fill: theme.todos.toggleButton.textColor, |
87 | }, | 106 | }, |
88 | }, | 107 | }, |
108 | premiumContainer: { | ||
109 | display: 'flex', | ||
110 | flexDirection: 'column', | ||
111 | justifyContent: 'center', | ||
112 | alignItems: 'center', | ||
113 | width: '80%', | ||
114 | maxWidth: 300, | ||
115 | margin: [-50, 'auto', 0], | ||
116 | textAlign: 'center', | ||
117 | }, | ||
118 | premiumIcon: { | ||
119 | marginBottom: 40, | ||
120 | background: theme.styleTypes.primary.accent, | ||
121 | fill: theme.styleTypes.primary.contrast, | ||
122 | padding: 10, | ||
123 | borderRadius: 10, | ||
124 | }, | ||
125 | premiumCTA: { | ||
126 | marginTop: 40, | ||
127 | }, | ||
89 | }); | 128 | }); |
90 | 129 | ||
91 | @injectSheet(styles) @observer | 130 | @injectSheet(styles) @observer |
@@ -99,6 +138,7 @@ class TodosWebview extends Component { | |||
99 | resize: PropTypes.func.isRequired, | 138 | resize: PropTypes.func.isRequired, |
100 | width: PropTypes.number.isRequired, | 139 | width: PropTypes.number.isRequired, |
101 | minWidth: PropTypes.number.isRequired, | 140 | minWidth: PropTypes.number.isRequired, |
141 | isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired, | ||
102 | }; | 142 | }; |
103 | 143 | ||
104 | state = { | 144 | state = { |
@@ -106,6 +146,10 @@ class TodosWebview extends Component { | |||
106 | width: 300, | 146 | width: 300, |
107 | }; | 147 | }; |
108 | 148 | ||
149 | static contextTypes = { | ||
150 | intl: intlShape, | ||
151 | }; | ||
152 | |||
109 | componentWillMount() { | 153 | componentWillMount() { |
110 | const { width } = this.props; | 154 | const { width } = this.props; |
111 | 155 | ||
@@ -182,9 +226,19 @@ class TodosWebview extends Component { | |||
182 | 226 | ||
183 | render() { | 227 | render() { |
184 | const { | 228 | const { |
185 | classes, isVisible, togglePanel, | 229 | classes, |
230 | isVisible, | ||
231 | togglePanel, | ||
232 | isTodosIncludedInCurrentPlan, | ||
186 | } = this.props; | 233 | } = this.props; |
187 | const { width, delta, isDragging } = this.state; | 234 | |
235 | const { | ||
236 | width, | ||
237 | delta, | ||
238 | isDragging, | ||
239 | } = this.state; | ||
240 | |||
241 | const { intl } = this.context; | ||
188 | 242 | ||
189 | return ( | 243 | return ( |
190 | <div | 244 | <div |
@@ -198,7 +252,7 @@ class TodosWebview extends Component { | |||
198 | className={isVisible ? classes.closeTodosButton : classes.openTodosButton} | 252 | className={isVisible ? classes.closeTodosButton : classes.openTodosButton} |
199 | type="button" | 253 | type="button" |
200 | > | 254 | > |
201 | <Icon icon={isVisible ? 'mdiChevronRight' : 'mdiCheckAll'} size={2} /> | 255 | <Icon icon={isVisible ? mdiChevronRight : mdiCheckAll} size={2} /> |
202 | </button> | 256 | </button> |
203 | <div | 257 | <div |
204 | className={classes.resizeHandler} | 258 | className={classes.resizeHandler} |
@@ -211,18 +265,33 @@ class TodosWebview extends Component { | |||
211 | style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad | 265 | style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad |
212 | /> | 266 | /> |
213 | )} | 267 | )} |
214 | <Webview | 268 | {isTodosIncludedInCurrentPlan ? ( |
215 | className={classes.webview} | 269 | <Webview |
216 | onDidAttach={() => { | 270 | className={classes.webview} |
217 | const { setTodosWebview } = this.props; | 271 | onDidAttach={() => { |
218 | setTodosWebview(this.webview); | 272 | const { setTodosWebview } = this.props; |
219 | this.startListeningToIpcMessages(); | 273 | setTodosWebview(this.webview); |
220 | }} | 274 | this.startListeningToIpcMessages(); |
221 | partition="persist:todos" | 275 | }} |
222 | preload="./features/todos/preload.js" | 276 | partition="persist:todos" |
223 | ref={(webview) => { this.webview = webview ? webview.view : null; }} | 277 | preload="./features/todos/preload.js" |
224 | src={environment.TODOS_FRONTEND} | 278 | ref={(webview) => { this.webview = webview ? webview.view : null; }} |
225 | /> | 279 | src={environment.TODOS_FRONTEND} |
280 | /> | ||
281 | ) : ( | ||
282 | <Appear> | ||
283 | <div className={classes.premiumContainer}> | ||
284 | <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={5} /> | ||
285 | <p>{intl.formatMessage(messages.premiumInfo)}</p> | ||
286 | <p>{intl.formatMessage(messages.rolloutInfo)}</p> | ||
287 | <ActivateTrialButton | ||
288 | className={classes.premiumCTA} | ||
289 | gaEventInfo={{ category: 'Todos', event: 'upgrade' }} | ||
290 | short | ||
291 | /> | ||
292 | </div> | ||
293 | </Appear> | ||
294 | )} | ||
226 | </div> | 295 | </div> |
227 | ); | 296 | ); |
228 | } | 297 | } |