Move checkout to in app instead of external handling

5 files changed, 45 insertions, 5 deletions

diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index ac2594604..08e86fda6 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -109,6 +109,7 @@ class AccountDashboard extends Component {
     openBilling: PropTypes.func.isRequired,
     upgradeToPro: PropTypes.func.isRequired,
     openInvoices: PropTypes.func.isRequired,
+    onCloseSubscriptionWindow: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -130,6 +131,7 @@ class AccountDashboard extends Component {
       openBilling,
       upgradeToPro,
       openInvoices,
+      onCloseSubscriptionWindow,
     } = this.props;
     const { intl } = this.context;
 
@@ -263,7 +265,9 @@ class AccountDashboard extends Component {
                   {!user.isPremium && (
                     <div className="account franz-form">
                       <div className="account__box">
-                        <SubscriptionForm />
+                        <SubscriptionForm
+                          onCloseWindow={onCloseSubscriptionWindow}
+                        />
                       </div>
                     </div>
                   )}
diff --git a/src/components/subscription/SubscriptionPopup.js b/src/components/subscription/SubscriptionPopup.js
index 12ef8a6e9..12a51ad7b 100644
--- a/src/components/subscription/SubscriptionPopup.js
+++ b/src/components/subscription/SubscriptionPopup.js
@@ -59,8 +59,10 @@ export default @observer class SubscriptionPopup extends Component {
             className="subscription-popup__webview"
 
             autosize
+            allowpopups
             src={encodeURI(url)}
             onDidNavigate={completeCheck}
+            onDidNavigateInPage={completeCheck}
           />
         </div>
         <div className="subscription-popup__toolbar franz-form">
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() {
diff --git a/src/styles/subscription-popup.scss b/src/styles/subscription-popup.scss
index fb4795d6c..14e05e65d 100644
--- a/src/styles/subscription-popup.scss
+++ b/src/styles/subscription-popup.scss
@@ -2,7 +2,10 @@
   height: 100%;
 
   &__content { height: calc(100% - 60px); }
-  &__webview { height: 100%; }
+  &__webview {
+    height: 100%;
+    background: #FFF;
+  }
 
   &__toolbar {
     background: $theme-gray-lightest;