5 files changed, 92 insertions, 16 deletions

diff --git a/src/containers/auth/PricingScreen.js b/src/containers/auth/PricingScreen.js
index af1651931..21c859c12 100644
--- a/src/containers/auth/PricingScreen.js
+++ b/src/containers/auth/PricingScreen.js
@@ -20,14 +20,19 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
     } = this.props;
 
     const { activateTrialRequest } = stores.user;
-    const { defaultTrialPlan } = stores.features.features;
+    const { defaultTrialPlan, canSkipTrial } = stores.features.anonymousFeatures;
 
-    actions.user.activateTrial({ planId: defaultTrialPlan });
-    await activateTrialRequest._promise;
-
-    if (!activateTrialRequest.isError) {
+    if (!canSkipTrial) {
       stores.router.push('/');
       stores.user.hasCompletedSignup = true;
+    } else {
+      actions.user.activateTrial({ planId: defaultTrialPlan });
+      await activateTrialRequest._promise;
+
+      if (!activateTrialRequest.isError) {
+        stores.router.push('/');
+        stores.user.hasCompletedSignup = true;
+      }
     }
   }
 
@@ -37,8 +42,17 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
       stores,
     } = this.props;
 
-    const { getUserInfoRequest, activateTrialRequest } = stores.user;
-    const { featuresRequest } = stores.features;
+    const { getUserInfoRequest, activateTrialRequest, data } = stores.user;
+    const { featuresRequest, features } = stores.features;
+
+    const { pricingConfig } = features;
+
+    let currency = '$';
+    let price = 5.99;
+    if (pricingConfig) {
+      ({ currency } = pricingConfig);
+      ({ price } = pricingConfig.plans.pro.yearly);
+    }
 
     return (
       <Pricing
@@ -46,7 +60,11 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
         isLoadingRequiredData={(getUserInfoRequest.isExecuting || !getUserInfoRequest.wasExecuted) || (featuresRequest.isExecuting || !featuresRequest.wasExecuted)}
         isActivatingTrial={activateTrialRequest.isExecuting}
         trialActivationError={activateTrialRequest.isError}
+        canSkipTrial={features.canSkipTrial}
         error={error}
+        currency={currency}
+        price={price}
+        name={data.firstname}
       />
     );
   }
diff --git a/src/containers/auth/SignupScreen.js b/src/containers/auth/SignupScreen.js
index efc7ea4c1..f93498be2 100644
--- a/src/containers/auth/SignupScreen.js
+++ b/src/containers/auth/SignupScreen.js
@@ -4,6 +4,7 @@ import { inject, observer } from 'mobx-react';
 
 import Signup from '../../components/auth/Signup';
 import UserStore from '../../stores/UserStore';
+import FeaturesStore from '../../stores/FeaturesStore';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 
@@ -12,11 +13,27 @@ export default @inject('stores', 'actions') @observer class SignupScreen extends
     error: globalErrorPropType.isRequired,
   };
 
+  onSignup(values) {
+    const { actions, stores } = this.props;
+
+    const { canSkipTrial, defaultTrialPlan, pricingConfig } = stores.features.anonymousFeatures;
+
+    if (!canSkipTrial) {
+      Object.assign(values, {
+        plan: defaultTrialPlan,
+        currency: pricingConfig.currencyID,
+      });
+    }
+
+    actions.user.signup(values);
+  }
+
   render() {
-    const { actions, stores, error } = this.props;
+    const { stores, error } = this.props;
+
     return (
       <Signup
-        onSubmit={actions.user.signup}
+        onSubmit={values => this.onSignup(values)}
         isSubmitting={stores.user.signupRequest.isExecuting}
         loginRoute={stores.user.loginRoute}
         error={error}
@@ -33,5 +50,6 @@ SignupScreen.wrappedComponent.propTypes = {
   }).isRequired,
   stores: PropTypes.shape({
     user: PropTypes.instanceOf(UserStore).isRequired,
+    features: PropTypes.instanceOf(FeaturesStore).isRequired,
   }).isRequired,
 };
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 95fbd109f..a4312d9de 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -24,6 +24,7 @@ import { state as delayAppState } from '../../features/delayApp';
 import { workspaceActions } from '../../features/workspaces/actions';
 import WorkspaceDrawer from '../../features/workspaces/components/WorkspaceDrawer';
 import { workspaceStore } from '../../features/workspaces';
+import WorkspacesStore from '../../features/workspaces/store';
 
 export default @inject('stores', 'actions') @observer class AppLayoutContainer extends Component {
   static defaultProps = {
@@ -41,6 +42,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
       globalError,
       requests,
       user,
+      workspaces,
     } = this.props.stores;
 
     const {
@@ -79,7 +81,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
     const isLoadingServices = services.allServicesRequest.isExecuting
       && services.allServicesRequest.isExecutingFirstTime;
 
-    if (isLoadingFeatures || isLoadingServices) {
+    if (isLoadingFeatures || isLoadingServices || workspaces.isLoadingWorkspaces) {
       return (
         <ThemeProvider theme={ui.theme}>
           <AppLoader />
@@ -175,6 +177,7 @@ AppLayoutContainer.wrappedComponent.propTypes = {
     user: PropTypes.instanceOf(UserStore).isRequired,
     requests: PropTypes.instanceOf(RequestStore).isRequired,
     globalError: PropTypes.instanceOf(GlobalErrorStore).isRequired,
+    workspaces: PropTypes.instanceOf(WorkspacesStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
     service: PropTypes.shape({
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 41cdeb79a..93ab44690 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -5,6 +5,7 @@ import { inject, observer } from 'mobx-react';
 import PaymentStore from '../../stores/PaymentStore';
 import UserStore from '../../stores/UserStore';
 import AppStore from '../../stores/AppStore';
+import FeaturesStore from '../../stores/FeaturesStore';
 
 import AccountDashboard from '../../components/settings/account/AccountDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
@@ -12,8 +13,9 @@ import { WEBSITE } from '../../environment';
 
 export default @inject('stores', 'actions') @observer class AccountScreen extends Component {
   onCloseWindow() {
-    const { user } = this.props.stores;
+    const { user, features } = this.props.stores;
     user.getUserInfoRequest.invalidate({ immediately: true });
+    features.featuresRequest.invalidate({ immediately: true });
   }
 
   reloadData() {
@@ -39,12 +41,17 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
   }
 
   render() {
-    const { user, payment } = this.props.stores;
-    const { user: userActions } = this.props.actions;
+    const { user, payment, features } = this.props.stores;
+    const {
+      user: userActions,
+      payment: paymentActions,
+    } = this.props.actions;
 
     const isLoadingUserInfo = user.getUserInfoRequest.isExecuting;
     const isLoadingPlans = payment.plansRequest.isExecuting;
 
+    const { upgradeAccount } = paymentActions;
+
     return (
       <ErrorBoundary>
         <AccountDashboard
@@ -60,7 +67,7 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
           isLoadingDeleteAccount={user.deleteAccountRequest.isExecuting}
           isDeleteAccountSuccessful={user.deleteAccountRequest.wasExecuted && !user.deleteAccountRequest.isError}
           openEditAccount={() => this.handleWebsiteLink('/user/profile')}
-          upgradeToPro={() => this.handleWebsiteLink('/inapp/user/licenses')}
+          upgradeToPro={() => upgradeAccount({ planId: features.features.pricingConfig.plans.pro.yearly.id })}
           openBilling={() => this.handleWebsiteLink('/user/billing')}
           openInvoices={() => this.handleWebsiteLink('/user/invoices')}
         />
@@ -72,12 +79,14 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
 AccountScreen.wrappedComponent.propTypes = {
   stores: PropTypes.shape({
     user: PropTypes.instanceOf(UserStore).isRequired,
+    features: PropTypes.instanceOf(FeaturesStore).isRequired,
     payment: PropTypes.instanceOf(PaymentStore).isRequired,
     app: PropTypes.instanceOf(AppStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
     payment: PropTypes.shape({
       createDashboardUrl: PropTypes.func.isRequired,
+      upgradeAccount: PropTypes.func.isRequired,
     }).isRequired,
     app: PropTypes.shape({
       openExternalUrl: PropTypes.func.isRequired,
diff --git a/src/containers/subscription/SubscriptionFormScreen.js b/src/containers/subscription/SubscriptionFormScreen.js
index 726b10628..38e46a7ba 100644
--- a/src/containers/subscription/SubscriptionFormScreen.js
+++ b/src/containers/subscription/SubscriptionFormScreen.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { remote } from 'electron';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
@@ -7,11 +8,21 @@ import PaymentStore from '../../stores/PaymentStore';
 import SubscriptionForm from '../../components/subscription/SubscriptionForm';
 import TrialForm from '../../components/subscription/TrialForm';
 
+const { BrowserWindow } = remote;
+
 export default @inject('stores', 'actions') @observer class SubscriptionFormScreen extends Component {
+  static propTypes = {
+    onCloseWindow: PropTypes.func,
+  }
+
+  static defaultProps = {
+    onCloseWindow: () => null,
+  }
+
   async openBrowser() {
     const {
-      actions,
       stores,
+      onCloseWindow,
     } = this.props;
 
     const {
@@ -22,7 +33,24 @@ export default @inject('stores', 'actions') @observer class SubscriptionFormScre
     let hostedPageURL = features.features.planSelectionURL;
     hostedPageURL = user.getAuthURL(hostedPageURL);
 
-    actions.app.openExternalUrl({ url: hostedPageURL });
+    const paymentWindow = new BrowserWindow({
+      parent: remote.getCurrentWindow(),
+      modal: true,
+      title: '🔒 Franz Supporter License',
+      width: 800,
+      height: window.innerHeight - 100,
+      maxWidth: 800,
+      minWidth: 600,
+      webPreferences: {
+        nodeIntegration: true,
+        webviewTag: true,
+      },
+    });
+    paymentWindow.loadURL(`file://${__dirname}/../../index.html#/payment/${encodeURIComponent(hostedPageURL)}`);
+
+    paymentWindow.on('closed', () => {
+      onCloseWindow();
+    });
   }
 
   render() {