Move checkout to in app instead of external handling

2 files changed, 34 insertions, 3 deletions

diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 9c74cf2ab..b0354c86b 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() {
@@ -65,6 +67,7 @@ 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,
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() {