diff options
Diffstat (limited to 'src/components/services/content/Services.js')
-rw-r--r-- | src/components/services/content/Services.js | 48 |
1 files changed, 47 insertions, 1 deletions
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js index 5fad070f0..1afbaabc4 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'; |
@@ -26,7 +29,17 @@ const messages = defineMessages({ | |||
26 | }, | 29 | }, |
27 | }); | 30 | }); |
28 | 31 | ||
29 | export default @observer class Services extends Component { | 32 | |
33 | const styles = { | ||
34 | confettiContainer: { | ||
35 | position: 'absolute', | ||
36 | width: '100%', | ||
37 | zIndex: 9999, | ||
38 | pointerEvents: 'none', | ||
39 | }, | ||
40 | }; | ||
41 | |||
42 | export default @observer @injectSheet(styles) class Services extends Component { | ||
30 | static propTypes = { | 43 | static propTypes = { |
31 | services: MobxPropTypes.arrayOrObservableArray, | 44 | services: MobxPropTypes.arrayOrObservableArray, |
32 | setWebviewReference: PropTypes.func.isRequired, | 45 | setWebviewReference: PropTypes.func.isRequired, |
@@ -36,6 +49,9 @@ export default @observer class Services extends Component { | |||
36 | reload: PropTypes.func.isRequired, | 49 | reload: PropTypes.func.isRequired, |
37 | openSettings: PropTypes.func.isRequired, | 50 | openSettings: PropTypes.func.isRequired, |
38 | update: PropTypes.func.isRequired, | 51 | update: PropTypes.func.isRequired, |
52 | userHasCompletedSignup: PropTypes.bool.isRequired, | ||
53 | hasActivatedTrial: PropTypes.bool.isRequired, | ||
54 | classes: PropTypes.object.isRequired, | ||
39 | }; | 55 | }; |
40 | 56 | ||
41 | static defaultProps = { | 57 | static defaultProps = { |
@@ -46,6 +62,18 @@ export default @observer class Services extends Component { | |||
46 | intl: intlShape, | 62 | intl: intlShape, |
47 | }; | 63 | }; |
48 | 64 | ||
65 | state = { | ||
66 | showConfetti: true, | ||
67 | } | ||
68 | |||
69 | componentDidMount() { | ||
70 | window.setTimeout(() => { | ||
71 | this.setState({ | ||
72 | showConfetti: false, | ||
73 | }); | ||
74 | }, ms('8s')); | ||
75 | } | ||
76 | |||
49 | render() { | 77 | render() { |
50 | const { | 78 | const { |
51 | services, | 79 | services, |
@@ -56,12 +84,29 @@ export default @observer class Services extends Component { | |||
56 | reload, | 84 | reload, |
57 | openSettings, | 85 | openSettings, |
58 | update, | 86 | update, |
87 | userHasCompletedSignup, | ||
88 | hasActivatedTrial, | ||
89 | classes, | ||
59 | } = this.props; | 90 | } = this.props; |
91 | |||
92 | const { | ||
93 | showConfetti, | ||
94 | } = this.state; | ||
95 | |||
60 | const { intl } = this.context; | 96 | const { intl } = this.context; |
61 | const isLoggedIn = Boolean(localStorage.getItem('authToken')); | 97 | const isLoggedIn = Boolean(localStorage.getItem('authToken')); |
62 | 98 | ||
63 | return ( | 99 | return ( |
64 | <div className="services"> | 100 | <div className="services"> |
101 | {(userHasCompletedSignup || hasActivatedTrial) && ( | ||
102 | <div className={classes.confettiContainer}> | ||
103 | <Confetti | ||
104 | width={window.width} | ||
105 | height={window.height} | ||
106 | numberOfPieces={showConfetti ? 200 : 0} | ||
107 | /> | ||
108 | </div> | ||
109 | )} | ||
65 | {services.length === 0 && ( | 110 | {services.length === 0 && ( |
66 | <Appear | 111 | <Appear |
67 | timeout={1500} | 112 | timeout={1500} |
@@ -104,6 +149,7 @@ export default @observer class Services extends Component { | |||
104 | }, | 149 | }, |
105 | redirect: false, | 150 | redirect: false, |
106 | })} | 151 | })} |
152 | upgrade={() => openSettings({ path: 'user' })} | ||
107 | /> | 153 | /> |
108 | ))} | 154 | ))} |
109 | </div> | 155 | </div> |