Merge branch 'release/5.4.0-beta.3' into i18n

15 files changed, 90 insertions, 51 deletions

diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index 86b6a4263..53ae046a0 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -150,6 +150,7 @@ export default @observer @injectSheet(styles) class Signup extends Component {
     classes: PropTypes.object.isRequired,
     currency: PropTypes.string.isRequired,
     price: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
   };
 
   static contextTypes = {
@@ -166,6 +167,7 @@ export default @observer @injectSheet(styles) class Signup extends Component {
       classes,
       currency,
       price,
+      name,
     } = this.props;
     const { intl } = this.context;
 
@@ -182,7 +184,7 @@ export default @observer @injectSheet(styles) class Signup extends Component {
                 alt=""
               />
             )}
-            <h1>{intl.formatMessage(messages.headline, { name: 'Stefan' })}</h1>
+            <h1>{intl.formatMessage(messages.headline, { name })}</h1>
             <div className="auth__letter">
               <p>
                 {intl.formatMessage(messages.specialTreat)}
diff --git a/src/containers/auth/PricingScreen.js b/src/containers/auth/PricingScreen.js
index 55811ed23..21c859c12 100644
--- a/src/containers/auth/PricingScreen.js
+++ b/src/containers/auth/PricingScreen.js
@@ -42,7 +42,7 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
       stores,
     } = this.props;
 
-    const { getUserInfoRequest, activateTrialRequest } = stores.user;
+    const { getUserInfoRequest, activateTrialRequest, data } = stores.user;
     const { featuresRequest, features } = stores.features;
 
     const { pricingConfig } = features;
@@ -64,6 +64,7 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
         error={error}
         currency={currency}
         price={price}
+        name={data.firstname}
       />
     );
   }
diff --git a/src/features/planSelection/components/PlanItem.js b/src/features/planSelection/components/PlanItem.js
index ea04c8448..ec061377b 100644
--- a/src/features/planSelection/components/PlanItem.js
+++ b/src/features/planSelection/components/PlanItem.js
@@ -38,7 +38,7 @@ const styles = theme => ({
 
     '& h2': {
       textAlign: 'center',
-      marginBottom: 20,
+      marginBottom: 10,
       fontSize: 30,
       color: theme.styleTypes.primary.contrast,
     },
@@ -48,6 +48,7 @@ const styles = theme => ({
   },
   priceWrapper: {
     height: 50,
+    marginBottom: 0,
   },
   price: {
     fontSize: 50,
@@ -69,7 +70,7 @@ const styles = theme => ({
     width: 40,
     border: 0,
     borderTop: [1, 'solid', theme.styleTypes.primary.contrast],
-    margin: [30, 'auto'],
+    margin: [15, 'auto', 20],
   },
   header: {
     padding: 20,
@@ -78,7 +79,7 @@ const styles = theme => ({
     position: 'relative',
   },
   content: {
-    padding: 20,
+    padding: [10, 20, 20],
     background: '#EFEFEF',
   },
   simpleCTA: {
diff --git a/src/features/planSelection/components/PlanSelection.js b/src/features/planSelection/components/PlanSelection.js
index 9407f6dd3..355187516 100644
--- a/src/features/planSelection/components/PlanSelection.js
+++ b/src/features/planSelection/components/PlanSelection.js
@@ -72,6 +72,7 @@ const styles = theme => ({
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 999999,
+    overflowY: 'scroll',
   },
   container: {
     width: '80%',
@@ -111,6 +112,7 @@ const styles = theme => ({
 
     '& svg': {
       width: '80px !important',
+      height: '80px !important',
       filter: 'drop-shadow( 0px 2px 3px rgba(0, 0, 0, 0.3))',
       fill: theme.styleTypes.danger.contrast,
     },
diff --git a/src/features/trialStatusBar/containers/TrialStatusBarScreen.js b/src/features/trialStatusBar/containers/TrialStatusBarScreen.js
index 15201496b..e15a1204f 100644
--- a/src/features/trialStatusBar/containers/TrialStatusBarScreen.js
+++ b/src/features/trialStatusBar/containers/TrialStatusBarScreen.js
@@ -2,15 +2,21 @@ 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,
@@ -53,6 +59,8 @@ class TrialStatusBarScreen extends Component {
 
 
   render() {
+    const { intl } = this.context;
+
     const {
       showOverlay,
       percent,
@@ -67,11 +75,13 @@ class TrialStatusBarScreen extends Component {
     const { user } = this.props.stores;
     const { upgradeAccount } = this.props.actions.payment;
 
+    const planName = i18nPlanName(user.team.plan, intl);
+
     return (
       <ErrorBoundary>
         <TrialStatusBar
-          planName="Professional"
-          percent={percent < 5 ? 5 : percent}
+          planName={planName}
+          percent={parseFloat(percent < 5 ? 5 : percent)}
           trialEnd={restTime}
           upgradeAccount={() => upgradeAccount({
             planId: user.team.plan,
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index ee6f8416c..07100f5a1 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -7,7 +7,7 @@ import { H1, Icon, ProBadge } from '@meetfranz/ui';
 import { Button } from '@meetfranz/forms/lib';
 import ReactTooltip from 'react-tooltip';
 
-import { mdiPlusBox, mdiSettings } from '@mdi/js';
+import { mdiPlusBox, mdiSettings, mdiStar } from '@mdi/js';
 import WorkspaceDrawerItem from './WorkspaceDrawerItem';
 import { workspaceActions } from '../actions';
 import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../index';
@@ -52,6 +52,8 @@ const styles = theme => ({
   drawer: {
     background: theme.workspaces.drawer.background,
     width: `${theme.workspaces.drawer.width}px`,
+    display: 'flex',
+    flexDirection: 'column',
   },
   headline: {
     fontSize: '24px',
@@ -75,6 +77,7 @@ const styles = theme => ({
   },
   workspaces: {
     height: 'auto',
+    overflowY: 'scroll',
   },
   premiumAnnouncement: {
     padding: '20px',
@@ -89,7 +92,7 @@ const styles = theme => ({
   addNewWorkspaceLabel: {
     height: 'auto',
     color: theme.workspaces.drawer.buttons.color,
-    marginTop: 40,
+    margin: [40, 0],
     textAlign: 'center',
     '& > svg': {
       fill: theme.workspaces.drawer.buttons.color,
@@ -174,7 +177,7 @@ class WorkspaceDrawer extends Component {
                 className={classes.premiumCtaButton}
                 buttonType="primary"
                 label={intl.formatMessage(messages.reactivatePremiumAccount)}
-                icon="mdiStar"
+                icon={mdiStar}
                 onClick={() => {
                   onUpgradeAccountClick();
                   gaEvent('User', 'upgrade', 'workspaceDrawer');
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 70e213912..4fb302be2 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -5,6 +5,7 @@ import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
 import { Infobox, Badge } from '@meetfranz/ui';
 
+import { mdiCheckboxMarkedCircleOutline } from '@mdi/js';
 import Loader from '../../../components/ui/Loader';
 import WorkspaceItem from './WorkspaceItem';
 import CreateWorkspaceForm from './CreateWorkspaceForm';
@@ -128,7 +129,7 @@ class WorkspacesDashboard extends Component {
             <Appear className={classes.appear}>
               <Infobox
                 type="success"
-                icon="mdiCheckboxMarkedCircleOutline"
+                icon={mdiCheckboxMarkedCircleOutline}
                 dismissable
                 onUnmount={updateWorkspaceRequest.reset}
               >
@@ -142,7 +143,7 @@ class WorkspacesDashboard extends Component {
             <Appear className={classes.appear}>
               <Infobox
                 type="success"
-                icon="mdiCheckboxMarkedCircleOutline"
+                icon={mdiCheckboxMarkedCircleOutline}
                 dismissable
                 onUnmount={deleteWorkspaceRequest.reset}
               >
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index e283614d2..9818dca87 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -4861,104 +4861,104 @@
         "defaultMessage": "!!!Your workspaces",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 23
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.headline",
         "start": {
           "column": 12,
-          "line": 19
+          "line": 20
         }
       },
       {
         "defaultMessage": "!!!You haven't added any workspaces yet.",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 27
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.noWorkspacesAdded",
         "start": {
           "column": 19,
-          "line": 23
+          "line": 24
         }
       },
       {
         "defaultMessage": "!!!Could not load your workspaces",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 31
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.workspacesRequestFailed",
         "start": {
           "column": 27,
-          "line": 27
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!Try again",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 35
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.tryReloadWorkspaces",
         "start": {
           "column": 23,
-          "line": 31
+          "line": 32
         }
       },
       {
         "defaultMessage": "!!!Your changes have been saved",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 39
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.updatedInfo",
         "start": {
           "column": 15,
-          "line": 35
+          "line": 36
         }
       },
       {
         "defaultMessage": "!!!Workspace has been deleted",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 43
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.deletedInfo",
         "start": {
           "column": 15,
-          "line": 39
+          "line": 40
         }
       },
       {
         "defaultMessage": "!!!Info about workspace feature",
         "end": {
           "column": 3,
-          "line": 46
+          "line": 47
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.workspaceFeatureInfo",
         "start": {
           "column": 24,
-          "line": 43
+          "line": 44
         }
       },
       {
         "defaultMessage": "!!!Less is More: Introducing Franz Workspaces",
         "end": {
           "column": 3,
-          "line": 50
+          "line": 51
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.workspaceFeatureHeadline",
         "start": {
           "column": 28,
-          "line": 47
+          "line": 48
         }
       }
     ],
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json b/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
index 7eb4fab50..8a20eb8e8 100644
--- a/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 19,
+      "line": 20,
       "column": 12
     },
     "end": {
-      "line": 22,
+      "line": 23,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!You haven't added any workspaces yet.",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 23,
+      "line": 24,
       "column": 19
     },
     "end": {
-      "line": 26,
+      "line": 27,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Could not load your workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 27,
+      "line": 28,
       "column": 27
     },
     "end": {
-      "line": 30,
+      "line": 31,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Try again",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 31,
+      "line": 32,
       "column": 23
     },
     "end": {
-      "line": 34,
+      "line": 35,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Your changes have been saved",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 35,
+      "line": 36,
       "column": 15
     },
     "end": {
-      "line": 38,
+      "line": 39,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Workspace has been deleted",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 39,
+      "line": 40,
       "column": 15
     },
     "end": {
-      "line": 42,
+      "line": 43,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Info about workspace feature",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 43,
+      "line": 44,
       "column": 24
     },
     "end": {
-      "line": 46,
+      "line": 47,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Less is More: Introducing Franz Workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 47,
+      "line": 48,
       "column": 28
     },
     "end": {
-      "line": 50,
+      "line": 51,
       "column": 3
     }
   }
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index cda33baef..c0c9d940d 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -636,7 +636,9 @@ export default class FranzMenu {
     // need to clone object so we don't modify computed (cached) object
     const serviceTpl = Object.assign([], this.serviceTpl());
 
-    if (window.franz === undefined) {
+    // Don't initialize when window.franz is undefined or when we are on a payment window route
+    if (window.franz === undefined || this.stores.router.location.pathname.startsWith('/payment/')) {
+      console.log('skipping menu init');
       return;
     }
 
diff --git a/src/lib/TouchBar.js b/src/lib/TouchBar.js
index 1de46d2a3..32f546644 100644
--- a/src/lib/TouchBar.js
+++ b/src/lib/TouchBar.js
@@ -24,6 +24,10 @@ export default class FranzTouchBar {
   _build() {
     const currentWindow = remote.getCurrentWindow();
 
+    if (this.stores.router.location.pathname.startsWith('/payment/')) {
+      return;
+    }
+
     if (this.stores.user.isLoggedIn) {
       const { TouchBar } = remote;
       const { TouchBarButton, TouchBarSpacer } = TouchBar;
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index ca5cad836..0a6309092 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -207,10 +207,9 @@ export default class AppStore extends Store {
       if (this.timeSuspensionStart.add(10, 'm').isBefore(moment())) {
         debug('Reloading services, user info and features');
 
-        this.actions.service.reloadAll();
-
-        this.stores.user.getUserInfoRequest.invalidate({ immediately: true });
-        this.stores.features.featuresRequest.invalidate({ immediately: true });
+        setTimeout(() => {
+          window.location.reload();
+        }, ms('2s'));
 
         statsEvent('resumed-app');
       }
diff --git a/src/stores/PaymentStore.js b/src/stores/PaymentStore.js
index b90e8f006..eb42ae10e 100644
--- a/src/stores/PaymentStore.js
+++ b/src/stores/PaymentStore.js
@@ -53,6 +53,7 @@ export default class PaymentStore extends Store {
       height: window.innerHeight - 100,
       maxWidth: 800,
       minWidth: 600,
+      autoHideMenuBar: true,
       webPreferences: {
         nodeIntegration: true,
         webviewTag: true,
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 70b775503..65e68e4d7 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -6,6 +6,7 @@ import {
 } from 'mobx';
 import { debounce, remove } from 'lodash';
 import ms from 'ms';
+import { remote } from 'electron';
 
 import Store from './lib/Store';
 import Request from './lib/Request';
@@ -18,6 +19,8 @@ import { RESTRICTION_TYPES } from '../models/Service';
 
 const debug = require('debug')('Franz:ServiceStore');
 
+const { app } = remote;
+
 export default class ServicesStore extends Store {
   @observable allServicesRequest = new CachedRequest(this.api.services, 'all');
 
@@ -728,7 +731,9 @@ export default class ServicesStore extends Store {
 
     if (service.webview) {
       debug('Initialize recipe', service.recipe.id, service.name);
-      service.webview.send('initialize-recipe', service.shareWithWebview, service.recipe);
+      service.webview.send('initialize-recipe', Object.assign({
+        franzVersion: app.getVersion(),
+      }, service.shareWithWebview), service.recipe);
     }
   }
 
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js
index be29142af..859f7787f 100644
--- a/src/webview/lib/RecipeWebview.js
+++ b/src/webview/lib/RecipeWebview.js
@@ -1,7 +1,8 @@
-// @flow
 const { ipcRenderer } = require('electron');
 const fs = require('fs-extra');
 
+const debug = require('debug')('Franz:Plugin:RecipeWebview');
+
 class RecipeWebview {
   constructor() {
     this.countCache = {
@@ -11,6 +12,8 @@ class RecipeWebview {
 
     ipcRenderer.on('poll', () => {
       this.loopFunc();
+
+      debug('Poll event');
     });
   }
 
@@ -44,8 +47,11 @@ class RecipeWebview {
       indirect: indirect > 0 ? indirect : 0,
     };
 
+
     ipcRenderer.sendToHost('messages', count);
     Object.assign(this.countCache, count);
+
+    debug('Sending badge count to host', count);
   }
 
   /**
@@ -61,6 +67,8 @@ class RecipeWebview {
       styles.innerHTML = data.toString();
 
       document.querySelector('head').appendChild(styles);
+
+      debug('Append styles', styles);
     });
   }