Merge tag 'v5.1.0'

# Conflicts:
#	README.md
#	src/components/layout/AppLayout.js

9 files changed, 121 insertions, 126 deletions

diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index d681d5226..b3f967353 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -1,4 +1,3 @@
-import { remote } from 'electron';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
@@ -6,92 +5,55 @@ import { inject, observer } from 'mobx-react';
 import PaymentStore from '../../stores/PaymentStore';
 import UserStore from '../../stores/UserStore';
 import AppStore from '../../stores/AppStore';
-import { gaPage } from '../../lib/analytics';
 
 import AccountDashboard from '../../components/settings/account/AccountDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
-
-const { BrowserWindow } = remote;
+import { WEBSITE } from '../../environment';
 
 export default @inject('stores', 'actions') @observer class AccountScreen extends Component {
-  componentWillMount() {
-    const {
-      user,
-    } = this.props.stores;
-
-    user.getUserInfoRequest.invalidate({ immediately: true });
-  }
-
-  componentDidMount() {
-    gaPage('Settings/Account Dashboard');
-  }
-
   onCloseWindow() {
-    const { user, payment } = this.props.stores;
+    const { user } = this.props.stores;
     user.getUserInfoRequest.invalidate({ immediately: true });
-    payment.ordersDataRequest.invalidate({ immediately: true });
   }
 
   reloadData() {
     const { user, payment } = this.props.stores;
 
     user.getUserInfoRequest.reload();
-    payment.ordersDataRequest.reload();
     payment.plansRequest.reload();
   }
 
-  async handlePaymentDashboard() {
+  handleWebsiteLink(route) {
     const { actions, stores } = this.props;
 
-    actions.payment.createDashboardUrl();
-
-    const dashboard = await stores.payment.createDashboardUrlRequest;
-
-    if (dashboard.url) {
-      const paymentWindow = new BrowserWindow({
-        title: '🔒 Franz Subscription Dashboard',
-        parent: remote.getCurrentWindow(),
-        modal: false,
-        width: 900,
-        minWidth: 600,
-        webPreferences: {
-          nodeIntegration: false,
-        },
-      });
-      paymentWindow.loadURL(dashboard.url);
+    const url = `${WEBSITE}${route}?authToken=${stores.user.authToken}&utm_source=app&utm_medium=account_dashboard`;
+    console.log(url);
 
-      paymentWindow.on('closed', () => {
-        this.onCloseWindow();
-      });
-    }
+    actions.app.openExternalUrl({ url });
   }
 
   render() {
     const { user, payment } = this.props.stores;
-    const { openExternalUrl } = this.props.actions.app;
     const { user: userActions } = this.props.actions;
 
     const isLoadingUserInfo = user.getUserInfoRequest.isExecuting;
-    const isLoadingOrdersInfo = payment.ordersDataRequest.isExecuting;
     const isLoadingPlans = payment.plansRequest.isExecuting;
 
     return (
       <ErrorBoundary>
         <AccountDashboard
           user={user.data}
-          orders={payment.orders}
           isLoading={isLoadingUserInfo}
-          isLoadingOrdersInfo={isLoadingOrdersInfo}
           isLoadingPlans={isLoadingPlans}
           userInfoRequestFailed={user.getUserInfoRequest.wasExecuted && user.getUserInfoRequest.isError}
           retryUserInfoRequest={() => this.reloadData()}
-          isCreatingPaymentDashboardUrl={payment.createDashboardUrlRequest.isExecuting}
-          openDashboard={price => this.handlePaymentDashboard(price)}
-          openExternalUrl={url => openExternalUrl({ url })}
           onCloseSubscriptionWindow={() => this.onCloseWindow()}
           deleteAccount={userActions.delete}
           isLoadingDeleteAccount={user.deleteAccountRequest.isExecuting}
           isDeleteAccountSuccessful={user.deleteAccountRequest.wasExecuted && !user.deleteAccountRequest.isError}
+          openEditAccount={() => this.handleWebsiteLink('/user/profile')}
+          openBilling={() => this.handleWebsiteLink('/user/billing')}
+          openInvoices={() => this.handleWebsiteLink('/user/invoices')}
         />
       </ErrorBoundary>
     );
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index b46908344..870ca4ecd 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -9,7 +9,6 @@ import ServicesStore from '../../stores/ServicesStore';
 import SettingsStore from '../../stores/SettingsStore';
 import FeaturesStore from '../../stores/FeaturesStore';
 import Form from '../../lib/Form';
-import { gaPage } from '../../lib/analytics';
 
 import ServiceError from '../../components/settings/services/ServiceError';
 import EditServiceForm from '../../components/settings/services/EditServiceForm';
@@ -19,9 +18,12 @@ import { required, url, oneRequired } from '../../helpers/validation-helpers';
 import { getSelectOptions } from '../../helpers/i18n-helpers';
 
 import { config as proxyFeature } from '../../features/serviceProxy';
+import { config as spellcheckerFeature } from '../../features/spellchecker';
 
 import { SPELLCHECKER_LOCALES } from '../../i18n/languages';
 
+import globalMessages from '../../i18n/globalMessages';
+
 const messages = defineMessages({
   name: {
     id: 'settings.service.form.name',
@@ -83,14 +85,6 @@ const messages = defineMessages({
     id: 'settings.service.form.proxy.password',
     defaultMessage: '!!!Password',
   },
-  spellcheckerLanguage: {
-    id: 'settings.service.form.spellcheckerLanguage',
-    defaultMessage: '!!!Spell checking Language',
-  },
-  spellcheckerSystemDefault: {
-    id: 'settings.service.form.spellcheckerLanguage.default',
-    defaultMessage: '!!!Use System Default ({default})',
-  },
 });
 
 export default @inject('stores', 'actions') @observer class EditServiceScreen extends Component {
@@ -98,10 +92,6 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
     intl: intlShape,
   };
 
-  componentDidMount() {
-    gaPage('Settings/Service/Edit');
-  }
-
   onSubmit(data) {
     const { action } = this.props.router.params;
     const { recipes, services } = this.props.stores;
@@ -118,12 +108,26 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
   }
 
   prepareForm(recipe, service, proxy) {
+    const {
+      intl,
+    } = this.context;
+
+    const {
+      stores,
+    } = this.props;
+
+    let defaultSpellcheckerLanguage = SPELLCHECKER_LOCALES[stores.settings.app.spellcheckerLanguage];
+
+    if (stores.settings.app.spellcheckerLanguage === 'automatic') {
+      defaultSpellcheckerLanguage = intl.formatMessage(globalMessages.spellcheckerAutomaticDetectionShort);
+    }
+
     const spellcheckerLanguage = getSelectOptions({
       locales: SPELLCHECKER_LOCALES,
-      resetToDefaultText: this.context.intl.formatMessage(messages.spellcheckerSystemDefault, { default: SPELLCHECKER_LOCALES[this.props.stores.settings.app.spellcheckerLanguage] }),
+      resetToDefaultText: intl.formatMessage(globalMessages.spellcheckerSystemDefault, { default: defaultSpellcheckerLanguage }),
+      automaticDetectionText: stores.settings.app.spellcheckerLanguage !== 'automatic' ? intl.formatMessage(globalMessages.spellcheckerAutomaticDetection) : '',
     });
 
-    const { intl } = this.context;
     const config = {
       fields: {
         name: {
@@ -160,13 +164,13 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
         isDarkModeEnabled: {
           label: intl.formatMessage(messages.enableDarkMode),
           value: service.isDarkModeEnabled,
-          default: this.props.stores.settings.app.darkMode,
+          default: stores.settings.app.darkMode,
         },
         spellcheckerLanguage: {
-          label: intl.formatMessage(messages.spellcheckerLanguage),
+          label: intl.formatMessage(globalMessages.spellcheckerLanguage),
           value: service.spellcheckerLanguage,
           options: spellcheckerLanguage,
-          disabled: !this.props.stores.settings.app.enableSpellchecking,
+          disabled: !stores.settings.app.enableSpellchecking,
         },
       },
     };
@@ -220,7 +224,7 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
     }
 
     if (proxy.isEnabled) {
-      const serviceProxyConfig = this.props.stores.settings.proxy[service.id] || {};
+      const serviceProxyConfig = stores.settings.proxy[service.id] || {};
 
       Object.assign(config.fields, {
         proxy: {
@@ -326,7 +330,8 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
           onSubmit={d => this.onSubmit(d)}
           onDelete={() => this.deleteService()}
           isProxyFeatureEnabled={proxyFeature.isEnabled}
-          isProxyFeaturePremiumFeature={proxyFeature.isPremium}
+          isProxyPremiumFeature={proxyFeature.isPremium}
+          isSpellcheckerPremiumFeature={spellcheckerFeature.isPremium}
         />
       </ErrorBoundary>
     );
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index f1706a721..97c1fa3b1 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -8,16 +8,16 @@ import SettingsStore from '../../stores/SettingsStore';
 import UserStore from '../../stores/UserStore';
 import Form from '../../lib/Form';
 import { APP_LOCALES, SPELLCHECKER_LOCALES } from '../../i18n/languages';
-import { gaPage } from '../../lib/analytics';
 import { DEFAULT_APP_SETTINGS } from '../../config';
 import { config as spellcheckerConfig } from '../../features/spellchecker';
 
 import { getSelectOptions } from '../../helpers/i18n-helpers';
 
-
 import EditSettingsForm from '../../components/settings/settings/EditSettingsForm';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 
+import globalMessages from '../../i18n/globalMessages';
+
 const messages = defineMessages({
   autoLaunchOnStart: {
     id: 'settings.app.form.autoLaunchOnStart',
@@ -63,10 +63,6 @@ const messages = defineMessages({
     id: 'settings.app.form.enableGPUAcceleration',
     defaultMessage: '!!!Enable GPU Acceleration',
   },
-  spellcheckerLanguage: {
-    id: 'settings.app.form.spellcheckerLanguage',
-    defaultMessage: '!!!Language for spell checking',
-  },
   beta: {
     id: 'settings.app.form.beta',
     defaultMessage: '!!!Include beta versions',
@@ -78,10 +74,6 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
     intl: intlShape,
   };
 
-  componentDidMount() {
-    gaPage('Settings/App');
-  }
-
   onSubmit(settingsData) {
     const { app, settings, user } = this.props.actions;
 
@@ -125,6 +117,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
 
     const spellcheckingLanguages = getSelectOptions({
       locales: SPELLCHECKER_LOCALES,
+      automaticDetectionText: this.context.intl.formatMessage(globalMessages.spellcheckerAutomaticDetection),
     });
 
     const config = {
@@ -166,11 +159,11 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
         },
         enableSpellchecking: {
           label: intl.formatMessage(messages.enableSpellchecking),
-          value: !this.props.stores.user.data.isPremium && spellcheckerConfig.isPremiumFeature ? false : settings.all.app.enableSpellchecking,
-          default: !this.props.stores.user.data.isPremium && spellcheckerConfig.isPremiumFeature ? false : DEFAULT_APP_SETTINGS.enableSpellchecking,
+          value: !this.props.stores.user.data.isPremium && spellcheckerConfig.isPremium ? false : settings.all.app.enableSpellchecking,
+          default: !this.props.stores.user.data.isPremium && spellcheckerConfig.isPremium ? false : DEFAULT_APP_SETTINGS.enableSpellchecking,
         },
         spellcheckerLanguage: {
-          label: intl.formatMessage(messages.spellcheckerLanguage),
+          label: intl.formatMessage(globalMessages.spellcheckerLanguage),
           value: settings.all.app.spellcheckerLanguage,
           options: spellcheckingLanguages,
           default: DEFAULT_APP_SETTINGS.spellcheckerLanguage,
@@ -230,7 +223,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           cacheSize={cacheSize}
           isClearingAllCache={isClearingAllCache}
           onClearAllCache={clearAllCache}
-          isSpellcheckerPremiumFeature={spellcheckerConfig.isPremiumFeature}
+          isSpellcheckerPremiumFeature={spellcheckerConfig.isPremium}
         />
       </ErrorBoundary>
     );
diff --git a/src/containers/settings/EditUserScreen.js b/src/containers/settings/EditUserScreen.js
index 3d35effc5..81f689400 100644
--- a/src/containers/settings/EditUserScreen.js
+++ b/src/containers/settings/EditUserScreen.js
@@ -9,7 +9,6 @@ import EditUserForm from '../../components/settings/user/EditUserForm';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 
 import { required, email, minLength } from '../../helpers/validation-helpers';
-import { gaPage } from '../../lib/analytics';
 
 const messages = defineMessages({
   firstname: {
@@ -24,23 +23,21 @@ const messages = defineMessages({
     id: 'settings.user.form.email',
     defaultMessage: '!!!Email',
   },
-  accountType: {
-    label: {
-      id: 'settings.user.form.accountType.label',
-      defaultMessage: '!!!Account type',
-    },
-    individual: {
-      id: 'settings.user.form.accountType.individual',
-      defaultMessage: '!!!Individual',
-    },
-    nonProfit: {
-      id: 'settings.user.form.accountType.non-profit',
-      defaultMessage: '!!!Non-Profit',
-    },
-    company: {
-      id: 'settings.user.form.accountType.company',
-      defaultMessage: '!!!Company',
-    },
+  accountTypeLabel: {
+    id: 'settings.user.form.accountType.label',
+    defaultMessage: '!!!Account type',
+  },
+  accountTypeIndividual: {
+    id: 'settings.user.form.accountType.individual',
+    defaultMessage: '!!!Individual',
+  },
+  accountTypeNonProfit: {
+    id: 'settings.user.form.accountType.non-profit',
+    defaultMessage: '!!!Non-Profit',
+  },
+  accountTypeCompany: {
+    id: 'settings.user.form.accountType.company',
+    defaultMessage: '!!!Company',
   },
   currentPassword: {
     id: 'settings.user.form.currentPassword',
@@ -57,10 +54,6 @@ export default @inject('stores', 'actions') @observer class EditUserScreen exten
     intl: intlShape,
   };
 
-  componentDidMount() {
-    gaPage('Settings/Account/Edit');
-  }
-
   componentWillUnmount() {
     this.props.actions.user.resetStatus();
   }
@@ -99,21 +92,21 @@ export default @inject('stores', 'actions') @observer class EditUserScreen exten
         accountType: {
           value: user.accountType,
           validators: [required],
-          label: intl.formatMessage(messages.accountType.label),
+          label: intl.formatMessage(messages.accountTypeLabel),
           options: [{
             value: 'individual',
-            label: intl.formatMessage(messages.accountType.individual),
+            label: intl.formatMessage(messages.accountTypeIndividual),
           }, {
             value: 'non-profit',
-            label: intl.formatMessage(messages.accountType.nonProfit),
+            label: intl.formatMessage(messages.accountTypeNonProfit),
           }, {
             value: 'company',
-            label: intl.formatMessage(messages.accountType.company),
+            label: intl.formatMessage(messages.accountTypeCompany),
           }],
         },
         organization: {
-          label: intl.formatMessage(messages.accountType.company),
-          placeholder: intl.formatMessage(messages.accountType.company),
+          label: intl.formatMessage(messages.accountTypeCompany),
+          placeholder: intl.formatMessage(messages.accountTypeCompany),
           value: user.organization,
         },
         oldPassword: {
diff --git a/src/containers/settings/InviteScreen.js b/src/containers/settings/InviteScreen.js
index cd36610e4..cc36849e8 100644
--- a/src/containers/settings/InviteScreen.js
+++ b/src/containers/settings/InviteScreen.js
@@ -5,13 +5,7 @@ import { inject, observer } from 'mobx-react';
 import Invite from '../../components/auth/Invite';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 
-import { gaPage } from '../../lib/analytics';
-
 export default @inject('stores', 'actions') @observer class InviteScreen extends Component {
-  componentDidMount() {
-    gaPage('Settings/Invite');
-  }
-
   componentWillUnmount() {
     this.props.stores.user.inviteRequest.reset();
   }
diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js
index b3d758c87..eda5ae54c 100644
--- a/src/containers/settings/RecipesScreen.js
+++ b/src/containers/settings/RecipesScreen.js
@@ -7,7 +7,6 @@ import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
 import RecipeStore from '../../stores/RecipesStore';
 import ServiceStore from '../../stores/ServicesStore';
 import UserStore from '../../stores/UserStore';
-import { gaPage } from '../../lib/analytics';
 
 import RecipesDashboard from '../../components/settings/recipes/RecipesDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
@@ -33,20 +32,15 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
   autorunDisposer = null;
 
   componentDidMount() {
-    gaPage('Settings/Recipe Dashboard/Featured');
-
     this.autorunDisposer = autorun(() => {
       const { filter } = this.props.params;
       const { currentFilter } = this.state;
 
       if (filter === 'all' && currentFilter !== 'all') {
-        gaPage('Settings/Recipe Dashboard/All');
         this.setState({ currentFilter: 'all' });
       } else if (filter === 'featured' && currentFilter !== 'featured') {
-        gaPage('Settings/Recipe Dashboard/Featured');
         this.setState({ currentFilter: 'featured' });
       } else if (filter === 'dev' && currentFilter !== 'dev') {
-        gaPage('Settings/Recipe Dashboard/Dev');
         this.setState({ currentFilter: 'dev' });
       }
     });
diff --git a/src/containers/settings/ServicesScreen.js b/src/containers/settings/ServicesScreen.js
index b70a5506e..a501bf530 100644
--- a/src/containers/settings/ServicesScreen.js
+++ b/src/containers/settings/ServicesScreen.js
@@ -6,16 +6,11 @@ import { RouterStore } from 'mobx-react-router';
 // import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
 import UserStore from '../../stores/UserStore';
 import ServiceStore from '../../stores/ServicesStore';
-import { gaPage } from '../../lib/analytics';
 
 import ServicesDashboard from '../../components/settings/services/ServicesDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 
 export default @inject('stores', 'actions') @observer class ServicesScreen extends Component {
-  componentDidMount() {
-    gaPage('Settings/Service Dashboard');
-  }
-
   componentWillUnmount() {
     this.props.actions.service.resetFilter();
     this.props.actions.service.resetStatus();
diff --git a/src/containers/settings/SettingsWindow.js b/src/containers/settings/SettingsWindow.js
index 6d9e0ee77..663b9e2e4 100644
--- a/src/containers/settings/SettingsWindow.js
+++ b/src/containers/settings/SettingsWindow.js
@@ -7,6 +7,7 @@ import ServicesStore from '../../stores/ServicesStore';
 import Layout from '../../components/settings/SettingsLayout';
 import Navigation from '../../components/settings/navigation/SettingsNavigation';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
+import { workspaceStore } from '../../features/workspaces';
 
 export default @inject('stores', 'actions') @observer class SettingsContainer extends Component {
   render() {
@@ -16,6 +17,7 @@ export default @inject('stores', 'actions') @observer class SettingsContainer ex
     const navigation = (
       <Navigation
         serviceCount={stores.services.all.length}
+        workspaceCount={workspaceStore.workspaces.length}
       />
     );
 
diff --git a/src/containers/settings/TeamScreen.js b/src/containers/settings/TeamScreen.js
new file mode 100644
index 000000000..c69d5ad08
--- /dev/null
+++ b/src/containers/settings/TeamScreen.js
@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+
+import UserStore from '../../stores/UserStore';
+import AppStore from '../../stores/AppStore';
+
+import TeamDashboard from '../../components/settings/team/TeamDashboard';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
+import { WEBSITE } from '../../environment';
+
+export default @inject('stores', 'actions') @observer class TeamScreen extends Component {
+  handleWebsiteLink(route) {
+    const { actions, stores } = this.props;
+
+    const url = `${WEBSITE}${route}?authToken=${stores.user.authToken}&utm_source=app&utm_medium=account_dashboard`;
+    console.log(url);
+
+    actions.app.openExternalUrl({ url });
+  }
+
+  render() {
+    const { user } = this.props.stores;
+
+    const isLoadingUserInfo = user.getUserInfoRequest.isExecuting;
+
+    return (
+      <ErrorBoundary>
+        <TeamDashboard
+          isLoading={isLoadingUserInfo}
+          userInfoRequestFailed={user.getUserInfoRequest.wasExecuted && user.getUserInfoRequest.isError}
+          retryUserInfoRequest={() => this.reloadData()}
+          openTeamManagement={() => this.handleWebsiteLink('/user/team')}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+
+TeamScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+    app: PropTypes.instanceOf(AppStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    payment: PropTypes.shape({
+      createDashboardUrl: PropTypes.func.isRequired,
+    }).isRequired,
+    app: PropTypes.shape({
+      openExternalUrl: PropTypes.func.isRequired,
+    }).isRequired,
+    user: PropTypes.shape({
+      update: PropTypes.func.isRequired,
+      delete: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};