diff options
Diffstat (limited to 'src/components/services/content/Services.js')
-rw-r--r-- | src/components/services/content/Services.js | 50 |
1 files changed, 49 insertions, 1 deletions
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js index 8f8c38a11..b71ddd8e6 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,17 @@ 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: 9999, | ||
30 | pointerEvents: 'none', | ||
31 | }, | ||
32 | }; | ||
33 | |||
34 | export default @observer @injectSheet(styles) class Services extends Component { | ||
22 | static propTypes = { | 35 | static propTypes = { |
23 | services: MobxPropTypes.arrayOrObservableArray, | 36 | services: MobxPropTypes.arrayOrObservableArray, |
24 | setWebviewReference: PropTypes.func.isRequired, | 37 | setWebviewReference: PropTypes.func.isRequired, |
@@ -28,6 +41,9 @@ export default @observer class Services extends Component { | |||
28 | reload: PropTypes.func.isRequired, | 41 | reload: PropTypes.func.isRequired, |
29 | openSettings: PropTypes.func.isRequired, | 42 | openSettings: PropTypes.func.isRequired, |
30 | update: PropTypes.func.isRequired, | 43 | update: PropTypes.func.isRequired, |
44 | userHasCompletedSignup: PropTypes.bool.isRequired, | ||
45 | hasActivatedTrial: PropTypes.bool.isRequired, | ||
46 | classes: PropTypes.object.isRequired, | ||
31 | }; | 47 | }; |
32 | 48 | ||
33 | static defaultProps = { | 49 | static defaultProps = { |
@@ -38,6 +54,18 @@ export default @observer class Services extends Component { | |||
38 | intl: intlShape, | 54 | intl: intlShape, |
39 | }; | 55 | }; |
40 | 56 | ||
57 | state = { | ||
58 | showConfetti: true, | ||
59 | } | ||
60 | |||
61 | componentDidMount() { | ||
62 | window.setTimeout(() => { | ||
63 | this.setState({ | ||
64 | showConfetti: false, | ||
65 | }); | ||
66 | }, ms('8s')); | ||
67 | } | ||
68 | |||
41 | render() { | 69 | render() { |
42 | const { | 70 | const { |
43 | services, | 71 | services, |
@@ -48,11 +76,30 @@ export default @observer class Services extends Component { | |||
48 | reload, | 76 | reload, |
49 | openSettings, | 77 | openSettings, |
50 | update, | 78 | update, |
79 | userHasCompletedSignup, | ||
80 | hasActivatedTrial, | ||
81 | classes, | ||
51 | } = this.props; | 82 | } = this.props; |
83 | |||
84 | const { | ||
85 | showConfetti, | ||
86 | } = this.state; | ||
87 | |||
52 | const { intl } = this.context; | 88 | const { intl } = this.context; |
53 | 89 | ||
90 | console.log('hasActivatedTrial', hasActivatedTrial, (userHasCompletedSignup || hasActivatedTrial)); | ||
91 | |||
54 | return ( | 92 | return ( |
55 | <div className="services"> | 93 | <div className="services"> |
94 | {(userHasCompletedSignup || hasActivatedTrial) && ( | ||
95 | <div className={classes.confettiContainer}> | ||
96 | <Confetti | ||
97 | width={window.width} | ||
98 | height={window.height} | ||
99 | numberOfPieces={showConfetti ? 200 : 0} | ||
100 | /> | ||
101 | </div> | ||
102 | )} | ||
56 | {services.length === 0 && ( | 103 | {services.length === 0 && ( |
57 | <Appear | 104 | <Appear |
58 | timeout={1500} | 105 | timeout={1500} |
@@ -89,6 +136,7 @@ export default @observer class Services extends Component { | |||
89 | }, | 136 | }, |
90 | redirect: false, | 137 | redirect: false, |
91 | })} | 138 | })} |
139 | upgrade={() => openSettings({ path: 'user' })} | ||
92 | /> | 140 | /> |
93 | ))} | 141 | ))} |
94 | </div> | 142 | </div> |