diff options
Diffstat (limited to 'src/features/trialStatusBar/containers/TrialStatusBarScreen.js')
-rw-r--r-- | src/features/trialStatusBar/containers/TrialStatusBarScreen.js | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/src/features/trialStatusBar/containers/TrialStatusBarScreen.js b/src/features/trialStatusBar/containers/TrialStatusBarScreen.js new file mode 100644 index 000000000..eb0aafaea --- /dev/null +++ b/src/features/trialStatusBar/containers/TrialStatusBarScreen.js | |||
@@ -0,0 +1,101 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import { observer, inject } from 'mobx-react'; | ||
3 | import PropTypes from 'prop-types'; | ||
4 | import ms from 'ms'; | ||
5 | |||
6 | import FeaturesStore from '../../../stores/FeaturesStore'; | ||
7 | import UserStore from '../../../stores/UserStore'; | ||
8 | import TrialStatusBar from '../components/TrialStatusBar'; | ||
9 | import ErrorBoundary from '../../../components/util/ErrorBoundary'; | ||
10 | import { trialStatusBarStore } from '..'; | ||
11 | |||
12 | @inject('stores', 'actions') @observer | ||
13 | class TrialStatusBarScreen extends Component { | ||
14 | state = { | ||
15 | showOverlay: true, | ||
16 | percent: 0, | ||
17 | restTime: '', | ||
18 | hasEnded: false, | ||
19 | }; | ||
20 | |||
21 | percentInterval = null; | ||
22 | |||
23 | componentDidMount() { | ||
24 | this.percentInterval = setInterval(() => { | ||
25 | this.calculateRestTime(); | ||
26 | }, ms('1m')); | ||
27 | |||
28 | this.calculateRestTime(); | ||
29 | } | ||
30 | |||
31 | componentWillUnmount() { | ||
32 | clearInterval(this.percentInterval); | ||
33 | } | ||
34 | |||
35 | calculateRestTime() { | ||
36 | const { trialEndTime } = trialStatusBarStore; | ||
37 | const percent = Math.abs(100 - Math.abs(trialEndTime.asMilliseconds()) * 100 / ms('14d')).toFixed(2); | ||
38 | const restTime = trialEndTime.humanize(); | ||
39 | const hasEnded = trialEndTime.asMilliseconds() > 0; | ||
40 | |||
41 | this.setState({ | ||
42 | percent, | ||
43 | restTime, | ||
44 | hasEnded, | ||
45 | }); | ||
46 | } | ||
47 | |||
48 | hideOverlay() { | ||
49 | this.setState({ | ||
50 | showOverlay: false, | ||
51 | }); | ||
52 | } | ||
53 | |||
54 | |||
55 | render() { | ||
56 | const { | ||
57 | showOverlay, | ||
58 | percent, | ||
59 | restTime, | ||
60 | hasEnded, | ||
61 | } = this.state; | ||
62 | |||
63 | if (!trialStatusBarStore || !trialStatusBarStore.isFeatureActive || !showOverlay || !trialStatusBarStore.showTrialStatusBarOverlay) { | ||
64 | return null; | ||
65 | } | ||
66 | |||
67 | const { user } = this.props.stores; | ||
68 | const { upgradeAccount } = this.props.actions.payment; | ||
69 | |||
70 | console.log('hasEnded', hasEnded); | ||
71 | |||
72 | return ( | ||
73 | <ErrorBoundary> | ||
74 | <TrialStatusBar | ||
75 | planName="Professional" | ||
76 | percent={percent < 5 ? 5 : percent} | ||
77 | trialEnd={restTime} | ||
78 | upgradeAccount={() => upgradeAccount({ | ||
79 | planId: user.team.plan, | ||
80 | })} | ||
81 | hideOverlay={() => this.hideOverlay()} | ||
82 | hasEnded={hasEnded} | ||
83 | /> | ||
84 | </ErrorBoundary> | ||
85 | ); | ||
86 | } | ||
87 | } | ||
88 | |||
89 | export default TrialStatusBarScreen; | ||
90 | |||
91 | TrialStatusBarScreen.wrappedComponent.propTypes = { | ||
92 | stores: PropTypes.shape({ | ||
93 | features: PropTypes.instanceOf(FeaturesStore).isRequired, | ||
94 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
95 | }).isRequired, | ||
96 | actions: PropTypes.shape({ | ||
97 | payment: PropTypes.shape({ | ||
98 | upgradeAccount: PropTypes.func.isRequired, | ||
99 | }), | ||
100 | }).isRequired, | ||
101 | }; | ||