diff options
author | 2019-10-24 15:15:42 +0200 | |
---|---|---|
committer | 2019-10-24 15:15:42 +0200 | |
commit | 54f8b191a94bd78a85b046bbf21dd2245d3a6f3e (patch) | |
tree | ada5876f0e8a697ba4693bba07f5e0f31fea1fc9 /src/features/trialStatusBar/containers/TrialStatusBarScreen.js | |
parent | Update submodules (diff) | |
parent | bump version to 5.4.0 (diff) | |
download | ferdium-app-54f8b191a94bd78a85b046bbf21dd2245d3a6f3e.tar.gz ferdium-app-54f8b191a94bd78a85b046bbf21dd2245d3a6f3e.tar.zst ferdium-app-54f8b191a94bd78a85b046bbf21dd2245d3a6f3e.zip |
Merge https://github.com/meetfranz/franz into franz-5.4.0-release
Diffstat (limited to 'src/features/trialStatusBar/containers/TrialStatusBarScreen.js')
-rw-r--r-- | src/features/trialStatusBar/containers/TrialStatusBarScreen.js | 109 |
1 files changed, 109 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..e15a1204f --- /dev/null +++ b/src/features/trialStatusBar/containers/TrialStatusBarScreen.js | |||
@@ -0,0 +1,109 @@ | |||
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 | import { intlShape } from 'react-intl'; | ||
6 | |||
7 | import FeaturesStore from '../../../stores/FeaturesStore'; | ||
8 | import UserStore from '../../../stores/UserStore'; | ||
9 | import TrialStatusBar from '../components/TrialStatusBar'; | ||
10 | import ErrorBoundary from '../../../components/util/ErrorBoundary'; | ||
11 | import { trialStatusBarStore } from '..'; | ||
12 | import { i18nPlanName } from '../../../helpers/plan-helpers'; | ||
13 | |||
14 | @inject('stores', 'actions') @observer | ||
15 | class TrialStatusBarScreen extends Component { | ||
16 | static contextTypes = { | ||
17 | intl: intlShape, | ||
18 | }; | ||
19 | |||
20 | state = { | ||
21 | showOverlay: true, | ||
22 | percent: 0, | ||
23 | restTime: '', | ||
24 | hasEnded: false, | ||
25 | }; | ||
26 | |||
27 | percentInterval = null; | ||
28 | |||
29 | componentDidMount() { | ||
30 | this.percentInterval = setInterval(() => { | ||
31 | this.calculateRestTime(); | ||
32 | }, ms('1m')); | ||
33 | |||
34 | this.calculateRestTime(); | ||
35 | } | ||
36 | |||
37 | componentWillUnmount() { | ||
38 | clearInterval(this.percentInterval); | ||
39 | } | ||
40 | |||
41 | calculateRestTime() { | ||
42 | const { trialEndTime } = trialStatusBarStore; | ||
43 | const percent = Math.abs(100 - Math.abs(trialEndTime.asMilliseconds()) * 100 / ms('14d')).toFixed(2); | ||
44 | const restTime = trialEndTime.humanize(); | ||
45 | const hasEnded = trialEndTime.asMilliseconds() > 0; | ||
46 | |||
47 | this.setState({ | ||
48 | percent, | ||
49 | restTime, | ||
50 | hasEnded, | ||
51 | }); | ||
52 | } | ||
53 | |||
54 | hideOverlay() { | ||
55 | this.setState({ | ||
56 | showOverlay: false, | ||
57 | }); | ||
58 | } | ||
59 | |||
60 | |||
61 | render() { | ||
62 | const { intl } = this.context; | ||
63 | |||
64 | const { | ||
65 | showOverlay, | ||
66 | percent, | ||
67 | restTime, | ||
68 | hasEnded, | ||
69 | } = this.state; | ||
70 | |||
71 | if (!trialStatusBarStore || !trialStatusBarStore.isFeatureActive || !showOverlay || !trialStatusBarStore.showTrialStatusBarOverlay) { | ||
72 | return null; | ||
73 | } | ||
74 | |||
75 | const { user } = this.props.stores; | ||
76 | const { upgradeAccount } = this.props.actions.payment; | ||
77 | |||
78 | const planName = i18nPlanName(user.team.plan, intl); | ||
79 | |||
80 | return ( | ||
81 | <ErrorBoundary> | ||
82 | <TrialStatusBar | ||
83 | planName={planName} | ||
84 | percent={parseFloat(percent < 5 ? 5 : percent)} | ||
85 | trialEnd={restTime} | ||
86 | upgradeAccount={() => upgradeAccount({ | ||
87 | planId: user.team.plan, | ||
88 | })} | ||
89 | hideOverlay={() => this.hideOverlay()} | ||
90 | hasEnded={hasEnded} | ||
91 | /> | ||
92 | </ErrorBoundary> | ||
93 | ); | ||
94 | } | ||
95 | } | ||
96 | |||
97 | export default TrialStatusBarScreen; | ||
98 | |||
99 | TrialStatusBarScreen.wrappedComponent.propTypes = { | ||
100 | stores: PropTypes.shape({ | ||
101 | features: PropTypes.instanceOf(FeaturesStore).isRequired, | ||
102 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
103 | }).isRequired, | ||
104 | actions: PropTypes.shape({ | ||
105 | payment: PropTypes.shape({ | ||
106 | upgradeAccount: PropTypes.func.isRequired, | ||
107 | }), | ||
108 | }).isRequired, | ||
109 | }; | ||