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