diff options
Diffstat (limited to 'src/features/todos')
-rw-r--r-- | src/features/todos/components/TodosWebview.js | 19 | ||||
-rw-r--r-- | src/features/todos/containers/TodosScreen.js | 6 | ||||
-rw-r--r-- | src/features/todos/store.js | 19 |
3 files changed, 26 insertions, 18 deletions
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js index d8d96ba85..fa530daed 100644 --- a/src/features/todos/components/TodosWebview.js +++ b/src/features/todos/components/TodosWebview.js | |||
@@ -7,9 +7,9 @@ import { Icon } from '@meetfranz/ui'; | |||
7 | import { defineMessages, intlShape } from 'react-intl'; | 7 | import { defineMessages, intlShape } from 'react-intl'; |
8 | 8 | ||
9 | import { mdiChevronRight, mdiCheckAll } from '@mdi/js'; | 9 | import { mdiChevronRight, mdiCheckAll } from '@mdi/js'; |
10 | import { Button } from '@meetfranz/forms'; | ||
11 | import * as environment from '../../../environment'; | 10 | import * as environment from '../../../environment'; |
12 | import Appear from '../../../components/ui/effects/Appear'; | 11 | import Appear from '../../../components/ui/effects/Appear'; |
12 | import UpgradeButton from '../../../components/ui/UpgradeButton'; | ||
13 | 13 | ||
14 | const OPEN_TODOS_BUTTON_SIZE = 45; | 14 | const OPEN_TODOS_BUTTON_SIZE = 45; |
15 | const CLOSE_TODOS_BUTTON_SIZE = 35; | 15 | const CLOSE_TODOS_BUTTON_SIZE = 35; |
@@ -70,7 +70,7 @@ const styles = theme => ({ | |||
70 | height: OPEN_TODOS_BUTTON_SIZE, | 70 | height: OPEN_TODOS_BUTTON_SIZE, |
71 | background: theme.todos.toggleButton.background, | 71 | background: theme.todos.toggleButton.background, |
72 | position: 'absolute', | 72 | position: 'absolute', |
73 | bottom: 80, | 73 | bottom: 120, |
74 | right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)), | 74 | right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)), |
75 | borderRadius: OPEN_TODOS_BUTTON_SIZE / 2, | 75 | borderRadius: OPEN_TODOS_BUTTON_SIZE / 2, |
76 | opacity: props => (props.isVisible ? 0 : 1), | 76 | opacity: props => (props.isVisible ? 0 : 1), |
@@ -94,7 +94,7 @@ const styles = theme => ({ | |||
94 | height: CLOSE_TODOS_BUTTON_SIZE, | 94 | height: CLOSE_TODOS_BUTTON_SIZE, |
95 | background: theme.todos.toggleButton.background, | 95 | background: theme.todos.toggleButton.background, |
96 | position: 'absolute', | 96 | position: 'absolute', |
97 | bottom: 80, | 97 | bottom: 120, |
98 | right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2), | 98 | right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2), |
99 | borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2, | 99 | borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2, |
100 | opacity: ({ isTodosIncludedInCurrentPlan }) => (!isTodosIncludedInCurrentPlan ? 1 : 0), | 100 | opacity: ({ isTodosIncludedInCurrentPlan }) => (!isTodosIncludedInCurrentPlan ? 1 : 0), |
@@ -116,7 +116,7 @@ const styles = theme => ({ | |||
116 | alignItems: 'center', | 116 | alignItems: 'center', |
117 | width: '80%', | 117 | width: '80%', |
118 | maxWidth: 300, | 118 | maxWidth: 300, |
119 | margin: [-50, 'auto', 0], | 119 | margin: [0, 'auto'], |
120 | textAlign: 'center', | 120 | textAlign: 'center', |
121 | }, | 121 | }, |
122 | premiumIcon: { | 122 | premiumIcon: { |
@@ -143,7 +143,6 @@ class TodosWebview extends Component { | |||
143 | width: PropTypes.number.isRequired, | 143 | width: PropTypes.number.isRequired, |
144 | minWidth: PropTypes.number.isRequired, | 144 | minWidth: PropTypes.number.isRequired, |
145 | isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired, | 145 | isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired, |
146 | upgradeAccount: PropTypes.func.isRequired, | ||
147 | }; | 146 | }; |
148 | 147 | ||
149 | state = { | 148 | state = { |
@@ -235,7 +234,6 @@ class TodosWebview extends Component { | |||
235 | isVisible, | 234 | isVisible, |
236 | togglePanel, | 235 | togglePanel, |
237 | isTodosIncludedInCurrentPlan, | 236 | isTodosIncludedInCurrentPlan, |
238 | upgradeAccount, | ||
239 | } = this.props; | 237 | } = this.props; |
240 | 238 | ||
241 | const { | 239 | const { |
@@ -288,14 +286,13 @@ class TodosWebview extends Component { | |||
288 | ) : ( | 286 | ) : ( |
289 | <Appear> | 287 | <Appear> |
290 | <div className={classes.premiumContainer}> | 288 | <div className={classes.premiumContainer}> |
291 | <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={5} /> | 289 | <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={4} /> |
292 | <p>{intl.formatMessage(messages.premiumInfo)}</p> | 290 | <p>{intl.formatMessage(messages.premiumInfo)}</p> |
293 | <p>{intl.formatMessage(messages.rolloutInfo)}</p> | 291 | <p>{intl.formatMessage(messages.rolloutInfo)}</p> |
294 | <Button | 292 | <UpgradeButton |
295 | label={intl.formatMessage(messages.upgradeCTA)} | ||
296 | className={classes.premiumCTA} | 293 | className={classes.premiumCTA} |
297 | onClick={upgradeAccount} | 294 | gaEventInfo={{ category: 'Todos', event: 'upgrade' }} |
298 | buttonType="inverted" | 295 | short |
299 | /> | 296 | /> |
300 | </div> | 297 | </div> |
301 | </Appear> | 298 | </Appear> |
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js index 7f3688828..65afc985b 100644 --- a/src/features/todos/containers/TodosScreen.js +++ b/src/features/todos/containers/TodosScreen.js | |||
@@ -26,7 +26,6 @@ class TodosScreen extends Component { | |||
26 | minWidth={TODOS_MIN_WIDTH} | 26 | minWidth={TODOS_MIN_WIDTH} |
27 | resize={width => todoActions.resize({ width })} | 27 | resize={width => todoActions.resize({ width })} |
28 | isTodosIncludedInCurrentPlan={this.props.stores.features.features.isTodosIncludedInCurrentPlan || false} | 28 | isTodosIncludedInCurrentPlan={this.props.stores.features.features.isTodosIncludedInCurrentPlan || false} |
29 | upgradeAccount={() => this.props.actions.ui.openSettings({ path: 'user' })} | ||
30 | /> | 29 | /> |
31 | </ErrorBoundary> | 30 | </ErrorBoundary> |
32 | ); | 31 | ); |
@@ -39,9 +38,4 @@ TodosScreen.wrappedComponent.propTypes = { | |||
39 | stores: PropTypes.shape({ | 38 | stores: PropTypes.shape({ |
40 | features: PropTypes.instanceOf(FeaturesStore).isRequired, | 39 | features: PropTypes.instanceOf(FeaturesStore).isRequired, |
41 | }).isRequired, | 40 | }).isRequired, |
42 | actions: PropTypes.shape({ | ||
43 | ui: PropTypes.shape({ | ||
44 | openSettings: PropTypes.func.isRequired, | ||
45 | }).isRequired, | ||
46 | }).isRequired, | ||
47 | }; | 41 | }; |
diff --git a/src/features/todos/store.js b/src/features/todos/store.js index 7da3b7f49..5c6abff4c 100644 --- a/src/features/todos/store.js +++ b/src/features/todos/store.js | |||
@@ -12,6 +12,7 @@ import { createReactions } from '../../stores/lib/Reaction'; | |||
12 | import { createActionBindings } from '../utils/ActionBinding'; | 12 | import { createActionBindings } from '../utils/ActionBinding'; |
13 | import { DEFAULT_TODOS_WIDTH, TODOS_MIN_WIDTH, DEFAULT_TODOS_VISIBLE } from '.'; | 13 | import { DEFAULT_TODOS_WIDTH, TODOS_MIN_WIDTH, DEFAULT_TODOS_VISIBLE } from '.'; |
14 | import { IPC } from './constants'; | 14 | import { IPC } from './constants'; |
15 | import { state as delayAppState } from '../delayApp'; | ||
15 | 16 | ||
16 | const debug = require('debug')('Franz:feature:todos:store'); | 17 | const debug = require('debug')('Franz:feature:todos:store'); |
17 | 18 | ||
@@ -29,7 +30,7 @@ export default class TodoStore extends FeatureStore { | |||
29 | } | 30 | } |
30 | 31 | ||
31 | @computed get isTodosPanelVisible() { | 32 | @computed get isTodosPanelVisible() { |
32 | if (this.stores.services.all.length === 0) return false; | 33 | if (delayAppState.isDelayAppScreenVisible) return false; |
33 | if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE; | 34 | if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE; |
34 | 35 | ||
35 | return this.settings.isTodosPanelVisible; | 36 | return this.settings.isTodosPanelVisible; |
@@ -60,6 +61,7 @@ export default class TodoStore extends FeatureStore { | |||
60 | 61 | ||
61 | this._allReactions = createReactions([ | 62 | this._allReactions = createReactions([ |
62 | this._setFeatureEnabledReaction, | 63 | this._setFeatureEnabledReaction, |
64 | this._firstLaunchReaction, | ||
63 | ]); | 65 | ]); |
64 | 66 | ||
65 | this._registerReactions(this._allReactions); | 67 | this._registerReactions(this._allReactions); |
@@ -145,4 +147,19 @@ export default class TodoStore extends FeatureStore { | |||
145 | 147 | ||
146 | this.isFeatureEnabled = isTodosEnabled; | 148 | this.isFeatureEnabled = isTodosEnabled; |
147 | }; | 149 | }; |
150 | |||
151 | _firstLaunchReaction = () => { | ||
152 | const { stats } = this.stores.settings.all; | ||
153 | |||
154 | // Hide todos layer on first app start but show on second | ||
155 | if (stats.appStarts <= 1) { | ||
156 | this._updateSettings({ | ||
157 | isTodosPanelVisible: false, | ||
158 | }); | ||
159 | } else if (stats.appStarts <= 2) { | ||
160 | this._updateSettings({ | ||
161 | isTodosPanelVisible: true, | ||
162 | }); | ||
163 | } | ||
164 | }; | ||
148 | } | 165 | } |