diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-07-04 15:54:27 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-07-04 15:54:27 +0200 |
commit | 268db27162e8d2cd0252b1be9bf69006cf6323ca (patch) | |
tree | 6ca47ee4159ba79f88d8848ac2ba9a8a8a7700da /src/components/services/content/Services.js | |
parent | Merge branch 'release/5.2.0-beta.4' into feature/new-pricing (diff) | |
download | ferdium-app-268db27162e8d2cd0252b1be9bf69006cf6323ca.tar.gz ferdium-app-268db27162e8d2cd0252b1be9bf69006cf6323ca.tar.zst ferdium-app-268db27162e8d2cd0252b1be9bf69006cf6323ca.zip |
Add trial onboarding during signup
Diffstat (limited to 'src/components/services/content/Services.js')
-rw-r--r-- | src/components/services/content/Services.js | 80 |
1 files changed, 62 insertions, 18 deletions
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js index 48de0ebaa..7f1624003 100644 --- a/src/components/services/content/Services.js +++ b/src/components/services/content/Services.js | |||
@@ -3,6 +3,9 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; |
4 | import { Link } from 'react-router'; | 4 | import { Link } from 'react-router'; |
5 | import { defineMessages, intlShape } from 'react-intl'; | 5 | import { defineMessages, intlShape } from 'react-intl'; |
6 | import Confetti from 'react-confetti'; | ||
7 | import ms from 'ms'; | ||
8 | import injectSheet from 'react-jss'; | ||
6 | 9 | ||
7 | import ServiceView from './ServiceView'; | 10 | import ServiceView from './ServiceView'; |
8 | import Appear from '../../ui/effects/Appear'; | 11 | import Appear from '../../ui/effects/Appear'; |
@@ -18,7 +21,16 @@ const messages = defineMessages({ | |||
18 | }, | 21 | }, |
19 | }); | 22 | }); |
20 | 23 | ||
21 | export default @observer class Services extends Component { | 24 | |
25 | const styles = { | ||
26 | confettiContainer: { | ||
27 | position: 'absolute', | ||
28 | width: '100%', | ||
29 | zIndex: 0, | ||
30 | }, | ||
31 | }; | ||
32 | |||
33 | export default @observer @injectSheet(styles) class Services extends Component { | ||
22 | static propTypes = { | 34 | static propTypes = { |
23 | services: MobxPropTypes.arrayOrObservableArray, | 35 | services: MobxPropTypes.arrayOrObservableArray, |
24 | setWebviewReference: PropTypes.func.isRequired, | 36 | setWebviewReference: PropTypes.func.isRequired, |
@@ -28,6 +40,8 @@ export default @observer class Services extends Component { | |||
28 | reload: PropTypes.func.isRequired, | 40 | reload: PropTypes.func.isRequired, |
29 | openSettings: PropTypes.func.isRequired, | 41 | openSettings: PropTypes.func.isRequired, |
30 | update: PropTypes.func.isRequired, | 42 | update: PropTypes.func.isRequired, |
43 | userHasCompletedSignup: PropTypes.bool.isRequired, | ||
44 | classes: PropTypes.object.isRequired, | ||
31 | }; | 45 | }; |
32 | 46 | ||
33 | static defaultProps = { | 47 | static defaultProps = { |
@@ -38,6 +52,18 @@ export default @observer class Services extends Component { | |||
38 | intl: intlShape, | 52 | intl: intlShape, |
39 | }; | 53 | }; |
40 | 54 | ||
55 | state = { | ||
56 | showConfetti: true, | ||
57 | } | ||
58 | |||
59 | componentDidMount() { | ||
60 | window.setTimeout(() => { | ||
61 | this.setState({ | ||
62 | showConfetti: false, | ||
63 | }); | ||
64 | }, ms('8s')); | ||
65 | } | ||
66 | |||
41 | render() { | 67 | render() { |
42 | const { | 68 | const { |
43 | services, | 69 | services, |
@@ -48,29 +74,47 @@ export default @observer class Services extends Component { | |||
48 | reload, | 74 | reload, |
49 | openSettings, | 75 | openSettings, |
50 | update, | 76 | update, |
77 | userHasCompletedSignup, | ||
78 | classes, | ||
51 | } = this.props; | 79 | } = this.props; |
80 | |||
81 | const { | ||
82 | showConfetti, | ||
83 | } = this.state; | ||
84 | |||
52 | const { intl } = this.context; | 85 | const { intl } = this.context; |
53 | 86 | ||
54 | return ( | 87 | return ( |
55 | <div className="services"> | 88 | <div className="services"> |
56 | {services.length === 0 && ( | 89 | {services.length === 0 && ( |
57 | <Appear | 90 | <> |
58 | timeout={1500} | 91 | {userHasCompletedSignup && ( |
59 | transitionName="slideUp" | 92 | <div className={classes.confettiContainer}> |
60 | > | 93 | <Confetti |
61 | <div className="services__no-service"> | 94 | width={window.width} |
62 | <img src="./assets/images/logo.svg" alt="" /> | 95 | height={window.height} |
63 | <h1>{intl.formatMessage(messages.welcome)}</h1> | 96 | numberOfPieces={showConfetti ? 200 : 0} |
64 | <Appear | 97 | /> |
65 | timeout={300} | 98 | </div> |
66 | transitionName="slideUp" | 99 | )} |
67 | > | 100 | <Appear |
68 | <Link to="/settings/recipes" className="button"> | 101 | timeout={1500} |
69 | {intl.formatMessage(messages.getStarted)} | 102 | transitionName="slideUp" |
70 | </Link> | 103 | > |
71 | </Appear> | 104 | <div className="services__no-service"> |
72 | </div> | 105 | <img src="./assets/images/logo.svg" alt="" /> |
73 | </Appear> | 106 | <h1>{intl.formatMessage(messages.welcome)}</h1> |
107 | <Appear | ||
108 | timeout={300} | ||
109 | transitionName="slideUp" | ||
110 | > | ||
111 | <Link to="/settings/recipes" className="button"> | ||
112 | {intl.formatMessage(messages.getStarted)} | ||
113 | </Link> | ||
114 | </Appear> | ||
115 | </div> | ||
116 | </Appear> | ||
117 | </> | ||
74 | )} | 118 | )} |
75 | {services.map(service => ( | 119 | {services.map(service => ( |
76 | <ServiceView | 120 | <ServiceView |