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 @@
+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';
+
+@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.shape({
+      upgradeAccount: PropTypes.func.isRequired,
+    }),
+  }).isRequired,
+};