Add trialStatusBar & polishing

23 files changed, 695 insertions, 68 deletions

diff --git a/src/actions/index.js b/src/actions/index.js
index 1c033fb96..9d3684edc 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -15,6 +15,7 @@ import announcements from '../features/announcements/actions';
 import workspaces from '../features/workspaces/actions';
 import todos from '../features/todos/actions';
 import planSelection from '../features/planSelection/actions';
+import trialStatusBar from '../features/trialStatusBar/actions';
 
 const actions = Object.assign({}, {
   service,
@@ -35,4 +36,5 @@ export default Object.assign(
   { workspaces },
   { todos },
   { planSelection },
+  { trialStatusBar },
 );
diff --git a/src/actions/payment.js b/src/actions/payment.js
index 2aaefc025..f61faf197 100644
--- a/src/actions/payment.js
+++ b/src/actions/payment.js
@@ -4,5 +4,9 @@ export default {
   createHostedPage: {
     planId: PropTypes.string.isRequired,
   },
+  upgradeAccount: {
+    planId: PropTypes.string.isRequired,
+    onCloseWindow: PropTypes.func,
+  },
   createDashboardUrl: {},
 };
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index fe81b1911..9b110262a 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -20,6 +20,7 @@ import AppUpdateInfoBar from '../AppUpdateInfoBar';
 import TrialActivationInfoBar from '../TrialActivationInfoBar';
 import Todos from '../../features/todos/containers/TodosScreen';
 import PlanSelection from '../../features/planSelection/containers/PlanSelectionScreen';
+import TrialStatusBar from '../../features/trialStatusBar/containers/TrialStatusBarScreen';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -174,6 +175,7 @@ class AppLayout extends Component {
               <ShareFranz />
               {services}
               {children}
+              <TrialStatusBar />
             </div>
             <Todos />
           </div>
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js
index 732b40e40..7ba8b54d7 100644
--- a/src/components/ui/FeatureList.js
+++ b/src/components/ui/FeatureList.js
@@ -72,12 +72,13 @@ export class FeatureList extends Component {
   static propTypes = {
     className: PropTypes.string,
     featureClassName: PropTypes.string,
-    plan: PropTypes.oneOf(PLANS).isRequired,
+    plan: PropTypes.oneOf(PLANS),
   };
 
   static defaultProps = {
     className: '',
     featureClassName: '',
+    plan: false,
   }
 
   static contextTypes = {
diff --git a/src/features/planSelection/actions.js b/src/features/planSelection/actions.js
index 21aa38ace..83f58bfd7 100644
--- a/src/features/planSelection/actions.js
+++ b/src/features/planSelection/actions.js
@@ -2,10 +2,6 @@ import PropTypes from 'prop-types';
 import { createActionsFromDefinitions } from '../../actions/lib/actions';
 
 export const planSelectionActions = createActionsFromDefinitions({
-  upgradeAccount: {
-    planId: PropTypes.string.isRequired,
-    onCloseWindow: PropTypes.func.isRequired,
-  },
   downgradeAccount: {},
   hideOverlay: {},
 }, PropTypes.checkPropTypes);
diff --git a/src/features/planSelection/components/PlanSelection.js b/src/features/planSelection/components/PlanSelection.js
index 1a45cf035..cf4474114 100644
--- a/src/features/planSelection/components/PlanSelection.js
+++ b/src/features/planSelection/components/PlanSelection.js
@@ -205,7 +205,7 @@ class PlanSelection extends Component {
                 price={plans.pro.yearly.price}
                 currency={currency}
                 ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)}
-                upgrade={() => upgradeAccount(plans.personal.yearly.id)}
+                upgrade={() => upgradeAccount(plans.pro.yearly.id)}
                 className={classes.featuredPlan}
                 perUser
                 bestValue
diff --git a/src/features/planSelection/containers/PlanSelectionScreen.js b/src/features/planSelection/containers/PlanSelectionScreen.js
index dff9051d8..6e8cdbf47 100644
--- a/src/features/planSelection/containers/PlanSelectionScreen.js
+++ b/src/features/planSelection/containers/PlanSelectionScreen.js
@@ -43,13 +43,10 @@ class PlanSelectionScreen extends Component {
   }
 
   upgradeAccount(planId) {
-    const { upgradeAccount, hideOverlay } = this.props.actions.planSelection;
+    const { upgradeAccount } = this.props.actions.payment;
 
     upgradeAccount({
       planId,
-      onCloseWindow: () => {
-        hideOverlay();
-      },
     });
   }
 
@@ -63,7 +60,7 @@ class PlanSelectionScreen extends Component {
     const { user, features } = this.props.stores;
     const { plans, currency } = features.features.pricingConfig;
     const { activateTrial } = this.props.actions.user;
-    const { upgradeAccount, downgradeAccount, hideOverlay } = this.props.actions.planSelection;
+    const { downgradeAccount, hideOverlay } = this.props.actions.planSelection;
 
     return (
       <ErrorBoundary>
@@ -102,7 +99,7 @@ class PlanSelectionScreen extends Component {
               downgradeAccount();
               hideOverlay();
             } else {
-              upgradeAccount(plans.personal.yearly.id);
+              this.upgradeAccount(plans.personal.yearly.id);
 
               gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', 'Revoke');
             }
@@ -123,8 +120,10 @@ PlanSelectionScreen.wrappedComponent.propTypes = {
     user: PropTypes.instanceOf(UserStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
-    planSelection: PropTypes.shape({
+    payment: PropTypes.shape({
       upgradeAccount: PropTypes.func.isRequired,
+    }),
+    planSelection: PropTypes.shape({
       downgradeAccount: PropTypes.func.isRequired,
       hideOverlay: PropTypes.func.isRequired,
     }),
diff --git a/src/features/planSelection/store.js b/src/features/planSelection/store.js
index e229c37e5..0d4672722 100644
--- a/src/features/planSelection/store.js
+++ b/src/features/planSelection/store.js
@@ -42,7 +42,6 @@ export default class PlanSelectionStore extends FeatureStore {
     // ACTIONS
 
     this._registerActions(createActionBindings([
-      [planSelectionActions.upgradeAccount, this._upgradeAccount],
       [planSelectionActions.downgradeAccount, this._downgradeAccount],
       [planSelectionActions.hideOverlay, this._hideOverlay],
     ]));
@@ -64,47 +63,12 @@ export default class PlanSelectionStore extends FeatureStore {
   @action stop() {
     super.stop();
     debug('PlanSelectionStore::stop');
-    this.reset();
     this.isFeatureActive = false;
   }
 
   // ========== PRIVATE METHODS ========= //
 
   // Actions
-
-  @action _upgradeAccount = ({ planId, onCloseWindow = () => null }) => {
-    let hostedPageURL = this.stores.features.features.subscribeURL;
-
-    const parsedUrl = new URL(hostedPageURL);
-    const params = new URLSearchParams(parsedUrl.search.slice(1));
-
-    params.set('plan', planId);
-
-    hostedPageURL = this.stores.user.getAuthURL(`${parsedUrl.origin}${parsedUrl.pathname}?${params.toString()}`);
-
-    const win = new BrowserWindow({
-      parent: remote.getCurrentWindow(),
-      modal: true,
-      title: '🔒 Upgrade Your Franz Account',
-      width: 800,
-      height: window.innerHeight - 100,
-      maxWidth: 800,
-      minWidth: 600,
-      webPreferences: {
-        nodeIntegration: true,
-        webviewTag: true,
-      },
-    });
-    win.loadURL(`file://${__dirname}/../../index.html#/payment/${encodeURIComponent(hostedPageURL)}`);
-
-    win.on('closed', () => {
-      this.stores.user.getUserInfoRequest.invalidate({ immediately: true });
-      this.stores.features.featuresRequest.invalidate({ immediately: true });
-
-      onCloseWindow();
-    });
-  };
-
   @action _downgradeAccount = () => {
     downgradeUserRequest.execute();
   }
@@ -112,4 +76,8 @@ export default class PlanSelectionStore extends FeatureStore {
   @action _hideOverlay = () => {
     this.hideOverlay = true;
   }
+
+  @action _showOverlay = () => {
+    this.hideOverlay = false;
+  }
 }
diff --git a/src/features/trialStatusBar/actions.js b/src/features/trialStatusBar/actions.js
new file mode 100644
index 000000000..38df76458
--- /dev/null
+++ b/src/features/trialStatusBar/actions.js
@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+
+export const trialStatusBarActions = createActionsFromDefinitions({
+  upgradeAccount: {
+    planId: PropTypes.string.isRequired,
+    onCloseWindow: PropTypes.func.isRequired,
+  },
+  downgradeAccount: {},
+  hideOverlay: {},
+}, PropTypes.checkPropTypes);
+
+export default trialStatusBarActions;
diff --git a/src/features/trialStatusBar/components/ProgressBar.js b/src/features/trialStatusBar/components/ProgressBar.js
new file mode 100644
index 000000000..80d478d8c
--- /dev/null
+++ b/src/features/trialStatusBar/components/ProgressBar.js
@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+
+const styles = theme => ({
+  root: {
+    background: theme.trialStatusBar.progressBar.background,
+    width: '25%',
+    maxWidth: 200,
+    height: 8,
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: theme.borderRadius,
+    overflow: 'hidden',
+  },
+  progress: {
+    background: theme.trialStatusBar.progressBar.progressIndicator,
+    width: ({ percent }) => `${percent}%`,
+    height: '100%',
+  },
+});
+
+@injectSheet(styles) @observer
+class ProgressBar extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    percent: PropTypes.number.isRequired,
+  };
+
+  render() {
+    const {
+      classes,
+    } = this.props;
+
+    return (
+      <div
+        className={classes.root}
+      >
+        <div className={classes.progress} />
+      </div>
+    );
+  }
+}
+
+export default ProgressBar;
diff --git a/src/features/trialStatusBar/components/TrialStatusBar.js b/src/features/trialStatusBar/components/TrialStatusBar.js
new file mode 100644
index 000000000..b8fe4acc9
--- /dev/null
+++ b/src/features/trialStatusBar/components/TrialStatusBar.js
@@ -0,0 +1,135 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import { defineMessages, intlShape } from 'react-intl';
+import { Icon } from '@meetfranz/ui';
+import { mdiArrowRight, mdiWindowClose } from '@mdi/js';
+import classnames from 'classnames';
+
+import ProgressBar from './ProgressBar';
+
+const messages = defineMessages({
+  restTime: {
+    id: 'feature.trialStatusBar.restTime',
+    defaultMessage: '!!!Your Free Franz {plan} Trial ends in {time}.',
+  },
+  expired: {
+    id: 'feature.trialStatusBar.expired',
+    defaultMessage: '!!!Your free Franz {plan} Trial has expired, please upgrade your account.',
+  },
+  cta: {
+    id: 'feature.trialStatusBar.cta',
+    defaultMessage: '!!!Upgrade now',
+  },
+});
+
+const styles = theme => ({
+  root: {
+    background: theme.trialStatusBar.bar.background,
+    width: '100%',
+    height: 25,
+    order: 10,
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: 12,
+    padding: [0, 10],
+    justifyContent: 'flex-end',
+  },
+  ended: {
+    background: theme.styleTypes.warning.accent,
+    color: theme.styleTypes.warning.contrast,
+  },
+  message: {
+    marginLeft: 20,
+  },
+  action: {
+    marginLeft: 20,
+    fontSize: 12,
+    color: theme.colorText,
+    textDecoration: 'underline',
+    display: 'flex',
+
+    '& svg': {
+      margin: [1, 2, 0, 0],
+    },
+  },
+});
+
+@injectSheet(styles) @observer
+class TrialStatusBar extends Component {
+  static propTypes = {
+    planName: PropTypes.string.isRequired,
+    percent: PropTypes.number.isRequired,
+    upgradeAccount: PropTypes.func.isRequired,
+    hideOverlay: PropTypes.func.isRequired,
+    trialEnd: PropTypes.string.isRequired,
+    hasEnded: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      planName,
+      percent,
+      upgradeAccount,
+      hideOverlay,
+      trialEnd,
+      hasEnded,
+      classes,
+    } = this.props;
+
+    const { intl } = this.context;
+
+    return (
+      <div
+        className={classnames({
+          [classes.root]: true,
+          [classes.ended]: hasEnded,
+        })}
+      >
+        <ProgressBar
+          percent={percent}
+        />
+        {' '}
+        <span className={classes.message}>
+          {!hasEnded ? (
+            intl.formatMessage(messages.restTime, {
+              plan: planName,
+              time: trialEnd,
+            })
+          ) : (
+            intl.formatMessage(messages.expired, {
+              plan: planName,
+            })
+          )}
+        </span>
+        <button
+          className={classes.action}
+          type="button"
+          onClick={() => {
+            upgradeAccount();
+          }}
+        >
+          <Icon icon={mdiArrowRight} />
+          {intl.formatMessage(messages.cta)}
+        </button>
+        <button
+          className={classes.action}
+          type="button"
+          onClick={() => {
+            hideOverlay();
+          }}
+        >
+          <Icon icon={mdiWindowClose} />
+        </button>
+      </div>
+    );
+  }
+}
+
+export default TrialStatusBar;
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 @@
+import React, { Component } from 'react';
+import { observer, inject } from 'mobx-react';
+import PropTypes from 'prop-types';
+import ms from 'ms';
+
+import FeaturesStore from '../../../stores/FeaturesStore';
+import UserStore from '../../../stores/UserStore';
+import TrialStatusBar from '../components/TrialStatusBar';
+import ErrorBoundary from '../../../components/util/ErrorBoundary';
+import { trialStatusBarStore } from '..';
+
+@inject('stores', 'actions') @observer
+class TrialStatusBarScreen extends Component {
+  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 {
+      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;
+
+    console.log('hasEnded', hasEnded);
+
+    return (
+      <ErrorBoundary>
+        <TrialStatusBar
+          planName="Professional"
+          percent={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,
+};
diff --git a/src/features/trialStatusBar/index.js b/src/features/trialStatusBar/index.js
new file mode 100644
index 000000000..ec84cdfd7
--- /dev/null
+++ b/src/features/trialStatusBar/index.js
@@ -0,0 +1,30 @@
+import { reaction } from 'mobx';
+import TrialStatusBarStore from './store';
+
+const debug = require('debug')('Franz:feature:trialStatusBar');
+
+export const GA_CATEGORY_TRIAL_STATUS_BAR = 'trialStatusBar';
+
+export const trialStatusBarStore = new TrialStatusBarStore();
+
+export default function initTrialStatusBar(stores, actions) {
+  stores.trialStatusBar = trialStatusBarStore;
+  const { features } = stores;
+
+  // Toggle trialStatusBar feature
+  reaction(
+    () => features.features.isTrialStatusBarEnabled,
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `trialStatusBar` feature');
+        trialStatusBarStore.start(stores, actions);
+      } else if (trialStatusBarStore.isFeatureActive) {
+        debug('Disabling `trialStatusBar` feature');
+        trialStatusBarStore.stop();
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/trialStatusBar/store.js b/src/features/trialStatusBar/store.js
new file mode 100644
index 000000000..89cf32392
--- /dev/null
+++ b/src/features/trialStatusBar/store.js
@@ -0,0 +1,72 @@
+import {
+  action,
+  observable,
+  computed,
+} from 'mobx';
+import moment from 'moment';
+
+import { trialStatusBarActions } from './actions';
+import { FeatureStore } from '../utils/FeatureStore';
+import { createActionBindings } from '../utils/ActionBinding';
+
+const debug = require('debug')('Franz:feature:trialStatusBar:store');
+
+export default class TrialStatusBarStore extends FeatureStore {
+  @observable isFeatureActive = false;
+
+  @observable isFeatureEnabled = false;
+
+  @computed get showTrialStatusBarOverlay() {
+    if (this.isFeatureActive) {
+      const { team } = this.stores.user;
+      if (team && !this.hideOverlay) {
+        return team.state !== 'expired' && team.isTrial;
+      }
+    }
+
+    return false;
+  }
+
+  @computed get trialEndTime() {
+    if (this.isFeatureActive) {
+      const { team } = this.stores.user;
+
+      if (team && !this.hideOverlay) {
+        return moment.duration(moment().diff(team.trialEnd));
+      }
+    }
+
+    return moment.duration();
+  }
+
+  // ========== PUBLIC API ========= //
+
+  @action start(stores, actions, api) {
+    debug('TrialStatusBarStore::start');
+    this.stores = stores;
+    this.actions = actions;
+    this.api = api;
+
+    // ACTIONS
+
+    this._registerActions(createActionBindings([
+      [trialStatusBarActions.hideOverlay, this._hideOverlay],
+    ]));
+
+    this.isFeatureActive = true;
+  }
+
+  @action stop() {
+    super.stop();
+    debug('TrialStatusBarStore::stop');
+    this.isFeatureActive = false;
+  }
+
+  // ========== PRIVATE METHODS ========= //
+
+  // Actions
+
+  @action _hideOverlay = () => {
+    this.hideOverlay = true;
+  }
+}
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index eafac1f87..98f37cf8a 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -734,39 +734,39 @@
         "defaultMessage": "!!!Your services have been updated.",
         "end": {
           "column": 3,
-          "line": 32
+          "line": 33
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.servicesUpdated",
         "start": {
           "column": 19,
-          "line": 29
+          "line": 30
         }
       },
       {
         "defaultMessage": "!!!Reload services",
         "end": {
           "column": 3,
-          "line": 36
+          "line": 37
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonReloadServices",
         "start": {
           "column": 24,
-          "line": 33
+          "line": 34
         }
       },
       {
         "defaultMessage": "!!!Could not load services and user information",
         "end": {
           "column": 3,
-          "line": 40
+          "line": 41
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.requiredRequestsFailed",
         "start": {
           "column": 26,
-          "line": 37
+          "line": 38
         }
       }
     ],
@@ -3915,39 +3915,39 @@
         "defaultMessage": "!!!per month",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 18
         },
         "file": "src/features/planSelection/components/PlanItem.js",
         "id": "subscription.interval.perMonth",
         "start": {
           "column": 12,
-          "line": 19
+          "line": 15
         }
       },
       {
         "defaultMessage": "!!!per month & user",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 22
         },
         "file": "src/features/planSelection/components/PlanItem.js",
         "id": "subscription.interval.perMonthPerUser",
         "start": {
           "column": 19,
-          "line": 23
+          "line": 19
         }
       },
       {
         "defaultMessage": "!!!Best value",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 26
         },
         "file": "src/features/planSelection/components/PlanItem.js",
         "id": "subscription.bestValue",
         "start": {
           "column": 13,
-          "line": 27
+          "line": 23
         }
       }
     ],
@@ -4381,6 +4381,107 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!Your Free Franz {plan} Trial ends in {time}.",
+        "end": {
+          "column": 3,
+          "line": 16
+        },
+        "file": "src/features/trialStatusBar/components/TrialStatusBar.js",
+        "id": "feature.trialStatusBar.restTime",
+        "start": {
+          "column": 12,
+          "line": 13
+        }
+      },
+      {
+        "defaultMessage": "!!!Your free Franz {plan} Trial has expired, please upgrade your account.",
+        "end": {
+          "column": 3,
+          "line": 20
+        },
+        "file": "src/features/trialStatusBar/components/TrialStatusBar.js",
+        "id": "feature.trialStatusBar.expired",
+        "start": {
+          "column": 11,
+          "line": 17
+        }
+      },
+      {
+        "defaultMessage": "!!!Upgrade now",
+        "end": {
+          "column": 3,
+          "line": 24
+        },
+        "file": "src/features/trialStatusBar/components/TrialStatusBar.js",
+        "id": "feature.trialStatusBar.cta",
+        "start": {
+          "column": 7,
+          "line": 21
+        }
+      }
+    ],
+    "path": "src/features/trialStatusBar/components/TrialStatusBar.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Downgrade your Franz Plan",
+        "end": {
+          "column": 3,
+          "line": 19
+        },
+        "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+        "id": "feature.trialStatusBar.fullscreen.dialog.title",
+        "start": {
+          "column": 15,
+          "line": 16
+        }
+      },
+      {
+        "defaultMessage": "!!!You're about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.",
+        "end": {
+          "column": 3,
+          "line": 23
+        },
+        "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+        "id": "feature.trialStatusBar.fullscreen.dialog.message",
+        "start": {
+          "column": 17,
+          "line": 20
+        }
+      },
+      {
+        "defaultMessage": "!!!Downgrade to Free",
+        "end": {
+          "column": 3,
+          "line": 27
+        },
+        "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+        "id": "feature.trialStatusBar.fullscreen.dialog.cta.downgrade",
+        "start": {
+          "column": 22,
+          "line": 24
+        }
+      },
+      {
+        "defaultMessage": "!!!Choose Personal",
+        "end": {
+          "column": 3,
+          "line": 31
+        },
+        "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+        "id": "feature.trialStatusBar.fullscreen.dialog.cta.upgrade",
+        "start": {
+          "column": 20,
+          "line": 28
+        }
+      }
+    ],
+    "path": "src/features/trialStatusBar/containers/TrialStatusBarScreen.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Home",
         "end": {
           "column": 3,
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 6977ec096..1ba91bdfa 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -35,6 +35,13 @@
   "feature.todos.premium.info": "Franz Todos are available to premium users now!",
   "feature.todos.premium.rollout": "Everyone else will have to wait a little longer.",
   "feature.todos.premium.upgrade": "Upgrade Account",
+  "feature.trialStatusBar.cta": "Upgrade now",
+  "feature.trialStatusBar.expired": "Your free Franz {plan} Trial has expired, please upgrade your account.",
+  "feature.trialStatusBar.fullscreen.dialog.cta.downgrade": "Downgrade to Free",
+  "feature.trialStatusBar.fullscreen.dialog.cta.upgrade": "Choose Personal",
+  "feature.trialStatusBar.fullscreen.dialog.message": "You're about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.",
+  "feature.trialStatusBar.fullscreen.dialog.title": "Downgrade your Franz Plan",
+  "feature.trialStatusBar.restTime": "Your Free Franz {plan} Trial ends in {time}.",
   "global.api.unhealthy": "Can't connect to Franz online services",
   "global.franzProRequired": "Franz Professional Required",
   "global.notConnectedToTheInternet": "You are not connected to the internet.",
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json
index 22f11cedd..95da24042 100644
--- a/src/i18n/messages/src/components/layout/AppLayout.json
+++ b/src/i18n/messages/src/components/layout/AppLayout.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your services have been updated.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 29,
+      "line": 30,
       "column": 19
     },
     "end": {
-      "line": 32,
+      "line": 33,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Reload services",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 33,
+      "line": 34,
       "column": 24
     },
     "end": {
-      "line": 36,
+      "line": 37,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Could not load services and user information",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 37,
+      "line": 38,
       "column": 26
     },
     "end": {
-      "line": 40,
+      "line": 41,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/trialStatusBar/components/TrialStatusBar.json b/src/i18n/messages/src/features/trialStatusBar/components/TrialStatusBar.json
new file mode 100644
index 000000000..bf211a016
--- /dev/null
+++ b/src/i18n/messages/src/features/trialStatusBar/components/TrialStatusBar.json
@@ -0,0 +1,41 @@
+[
+  {
+    "id": "feature.trialStatusBar.restTime",
+    "defaultMessage": "!!!Your Free Franz {plan} Trial ends in {time}.",
+    "file": "src/features/trialStatusBar/components/TrialStatusBar.js",
+    "start": {
+      "line": 13,
+      "column": 12
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.trialStatusBar.expired",
+    "defaultMessage": "!!!Your free Franz {plan} Trial has expired, please upgrade your account.",
+    "file": "src/features/trialStatusBar/components/TrialStatusBar.js",
+    "start": {
+      "line": 17,
+      "column": 11
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.trialStatusBar.cta",
+    "defaultMessage": "!!!Upgrade now",
+    "file": "src/features/trialStatusBar/components/TrialStatusBar.js",
+    "start": {
+      "line": 21,
+      "column": 7
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/trialStatusBar/containers/TrialStatusBarScreen.json b/src/i18n/messages/src/features/trialStatusBar/containers/TrialStatusBarScreen.json
new file mode 100644
index 000000000..306cd0fee
--- /dev/null
+++ b/src/i18n/messages/src/features/trialStatusBar/containers/TrialStatusBarScreen.json
@@ -0,0 +1,54 @@
+[
+  {
+    "id": "feature.trialStatusBar.fullscreen.dialog.title",
+    "defaultMessage": "!!!Downgrade your Franz Plan",
+    "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+    "start": {
+      "line": 16,
+      "column": 15
+    },
+    "end": {
+      "line": 19,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.trialStatusBar.fullscreen.dialog.message",
+    "defaultMessage": "!!!You're about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.",
+    "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+    "start": {
+      "line": 20,
+      "column": 17
+    },
+    "end": {
+      "line": 23,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.trialStatusBar.fullscreen.dialog.cta.downgrade",
+    "defaultMessage": "!!!Downgrade to Free",
+    "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+    "start": {
+      "line": 24,
+      "column": 22
+    },
+    "end": {
+      "line": 27,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.trialStatusBar.fullscreen.dialog.cta.upgrade",
+    "defaultMessage": "!!!Choose Personal",
+    "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+    "start": {
+      "line": 28,
+      "column": 20
+    },
+    "end": {
+      "line": 31,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index f102fc370..329c43f32 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -81,6 +81,8 @@ export default class AppStore extends Store {
 
   dictionaries = [];
 
+  fetchDataInterval = null;
+
   constructor(...args) {
     super(...args);
 
@@ -102,6 +104,7 @@ export default class AppStore extends Store {
       this._setLocale.bind(this),
       this._muteAppHandler.bind(this),
       this._handleFullScreen.bind(this),
+      this._handleLogout.bind(this),
     ]);
   }
 
@@ -129,6 +132,11 @@ export default class AppStore extends Store {
     this._systemDND();
     setInterval(() => this._systemDND(), ms('5s'));
 
+    this.fetchDataInterval = setInterval(() => {
+      this.stores.user.getUserInfoRequest.invalidate({ immediately: true });
+      this.stores.features.featuresRequest.invalidate({ immediately: true });
+    }, ms('10s'));
+
     // Check for updates once every 4 hours
     setInterval(() => this._checkForUpdates(), CHECK_INTERVAL);
     // Check for an update in 30s (need a delay to prevent Squirrel Installer lock file issues)
@@ -430,6 +438,12 @@ export default class AppStore extends Store {
     }
   }
 
+  _handleLogout() {
+    if (!this.stores.user.isLoggedIn) {
+      clearInterval(this.fetchDataInterval);
+    }
+  }
+
   // Helpers
   _appStartsCounter() {
     this.actions.settings.update({
diff --git a/src/stores/FeaturesStore.js b/src/stores/FeaturesStore.js
index bffcb01bc..5d379fd3e 100644
--- a/src/stores/FeaturesStore.js
+++ b/src/stores/FeaturesStore.js
@@ -20,6 +20,7 @@ import serviceLimit from '../features/serviceLimit';
 import communityRecipes from '../features/communityRecipes';
 import todos from '../features/todos';
 import planSelection from '../features/planSelection';
+import trialStatusBar from '../features/trialStatusBar';
 
 import { DEFAULT_FEATURES_CONFIG } from '../config';
 
@@ -83,5 +84,6 @@ export default class FeaturesStore extends Store {
     communityRecipes(this.stores, this.actions);
     todos(this.stores, this.actions);
     planSelection(this.stores, this.actions);
+    trialStatusBar(this.stores, this.actions);
   }
 }
diff --git a/src/stores/PaymentStore.js b/src/stores/PaymentStore.js
index d4de476c8..b90e8f006 100644
--- a/src/stores/PaymentStore.js
+++ b/src/stores/PaymentStore.js
@@ -1,10 +1,13 @@
 import { action, observable, computed } from 'mobx';
+import { remote } from 'electron';
 
 import Store from './lib/Store';
 import CachedRequest from './lib/CachedRequest';
 import Request from './lib/Request';
 import { gaEvent } from '../lib/analytics';
 
+const { BrowserWindow } = remote;
+
 export default class PaymentStore extends Store {
   @observable plansRequest = new CachedRequest(this.api.payment, 'plans');
 
@@ -14,6 +17,7 @@ export default class PaymentStore extends Store {
     super(...args);
 
     this.actions.payment.createHostedPage.listen(this._createHostedPage.bind(this));
+    this.actions.payment.upgradeAccount.listen(this._upgradeAccount.bind(this));
   }
 
   @computed get plan() {
@@ -30,4 +34,37 @@ export default class PaymentStore extends Store {
 
     return request;
   }
+
+  @action _upgradeAccount({ planId, onCloseWindow = () => null }) {
+    let hostedPageURL = this.stores.features.features.subscribeURL;
+
+    const parsedUrl = new URL(hostedPageURL);
+    const params = new URLSearchParams(parsedUrl.search.slice(1));
+
+    params.set('plan', planId);
+
+    hostedPageURL = this.stores.user.getAuthURL(`${parsedUrl.origin}${parsedUrl.pathname}?${params.toString()}`);
+
+    const win = new BrowserWindow({
+      parent: remote.getCurrentWindow(),
+      modal: true,
+      title: '🔒 Upgrade Your Franz Account',
+      width: 800,
+      height: window.innerHeight - 100,
+      maxWidth: 800,
+      minWidth: 600,
+      webPreferences: {
+        nodeIntegration: true,
+        webviewTag: true,
+      },
+    });
+    win.loadURL(`file://${__dirname}/../index.html#/payment/${encodeURIComponent(hostedPageURL)}`);
+
+    win.on('closed', () => {
+      this.stores.user.getUserInfoRequest.invalidate({ immediately: true });
+      this.stores.features.featuresRequest.invalidate({ immediately: true });
+
+      onCloseWindow();
+    });
+  }
 }
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index b652098f9..735e8f886 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -77,6 +77,8 @@ export default class UserStore extends Store {
 
   @observable logoutReason = null;
 
+  fetchUserInfoInterval = null;
+
   constructor(...args) {
     super(...args);
 
@@ -161,7 +163,7 @@ export default class UserStore extends Store {
   }
 
   @computed get isPremiumOverride() {
-    return ((!this.team || !this.team.plan) && this.isPremium) || (this.team.state === 'expired' && this.isPremium);
+    return ((!this.team || !this.team.plan) && this.isPremium) || (this.team && this.team.state === 'expired' && this.isPremium);
   }
 
   @computed get isPersonal() {