Replace invoices & subscription info with links to website

9 files changed, 103 insertions, 148 deletions

diff --git a/src/api/PaymentApi.js b/src/api/PaymentApi.js
index 3f6bb442e..7325151e9 100644
--- a/src/api/PaymentApi.js
+++ b/src/api/PaymentApi.js
@@ -11,12 +11,4 @@ export default class PaymentApi {
   getHostedPage(planId) {
     return this.server.getHostedPage(planId);
   }
-
-  getDashboardUrl() {
-    return this.server.getPaymentDashboardUrl();
-  }
-
-  getOrders() {
-    return this.server.getSubscriptionOrders();
-  }
 }
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index bafeef005..f6bc9c283 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -418,23 +418,6 @@ export default class ServerApi {
     return data;
   }
 
-  async getPaymentDashboardUrl() {
-    const request = await sendAuthRequest(`${API_URL}/me/billing`);
-    if (!request.ok) throw request;
-    const data = await request.json();
-    debug('ServerApi::getPaymentDashboardUrl resolves', data);
-    return data;
-  }
-
-  async getSubscriptionOrders() {
-    const request = await sendAuthRequest(`${API_URL}/me/subscription`);
-    if (!request.ok) throw request;
-    const data = await request.json();
-    const orders = this._mapOrderModels(data);
-    debug('ServerApi::getSubscriptionOrders resolves', orders);
-    return orders;
-  }
-
   // News
   async getLatestNews() {
     const url = `${API_URL}/news?platform=${os.platform()}&arch=${os.arch()}&version=${app.getVersion()}`;
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 181b95c8c..ca8b9e1bd 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -3,12 +3,10 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
-import moment from 'moment';
 
 import Loader from '../../ui/Loader';
 import Button from '../../ui/Button';
 import Infobox from '../../ui/Infobox';
-import Link from '../../ui/Link';
 import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen';
 
 const messages = defineMessages({
@@ -24,10 +22,6 @@ const messages = defineMessages({
     id: 'settings.account.headlineUpgrade',
     defaultMessage: '!!!Upgrade your Account',
   },
-  headlineInvoices: {
-    id: 'settings.account.headlineInvoices',
-    defaultMessage: '!!Invoices',
-  },
   headlineDangerZone: {
     id: 'settings.account.headlineDangerZone',
     defaultMessage: '!!Danger Zone',
@@ -48,6 +42,10 @@ const messages = defineMessages({
     id: 'settings.account.account.editButton',
     defaultMessage: '!!!Edit Account',
   },
+  invoicesButton: {
+    id: 'settings.account.headlineInvoices',
+    defaultMessage: '!!Invoices',
+  },
   invoiceDownload: {
     id: 'settings.account.invoiceDownload',
     defaultMessage: '!!!Download',
@@ -77,19 +75,17 @@ const messages = defineMessages({
 export default @observer class AccountDashboard extends Component {
   static propTypes = {
     user: MobxPropTypes.observableObject.isRequired,
-    orders: MobxPropTypes.arrayOrObservableArray.isRequired,
     isLoading: PropTypes.bool.isRequired,
-    isLoadingOrdersInfo: PropTypes.bool.isRequired,
     isLoadingPlans: PropTypes.bool.isRequired,
-    isCreatingPaymentDashboardUrl: PropTypes.bool.isRequired,
     userInfoRequestFailed: PropTypes.bool.isRequired,
     retryUserInfoRequest: PropTypes.func.isRequired,
-    openDashboard: PropTypes.func.isRequired,
-    openExternalUrl: PropTypes.func.isRequired,
     onCloseSubscriptionWindow: PropTypes.func.isRequired,
     deleteAccount: PropTypes.func.isRequired,
     isLoadingDeleteAccount: PropTypes.bool.isRequired,
     isDeleteAccountSuccessful: PropTypes.bool.isRequired,
+    openEditAccount: PropTypes.func.isRequired,
+    openBilling: PropTypes.func.isRequired,
+    openInvoices: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -99,12 +95,7 @@ export default @observer class AccountDashboard extends Component {
   render() {
     const {
       user,
-      orders,
       isLoading,
-      isCreatingPaymentDashboardUrl,
-      openDashboard,
-      openExternalUrl,
-      isLoadingOrdersInfo,
       isLoadingPlans,
       userInfoRequestFailed,
       retryUserInfoRequest,
@@ -112,6 +103,9 @@ export default @observer class AccountDashboard extends Component {
       deleteAccount,
       isLoadingDeleteAccount,
       isDeleteAccountSuccessful,
+      openEditAccount,
+      openBilling,
+      openInvoices,
     } = this.props;
     const { intl } = this.context;
 
@@ -161,68 +155,39 @@ export default @observer class AccountDashboard extends Component {
                     <div className="account__info">
                       <h2>
                         {`${user.firstname} ${user.lastname}`}
+                        {user.isPremium && (
+                          <>
+                            {' '}
+                            <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span>
+                          </>
+                        )}
                       </h2>
                       {user.organization && `${user.organization}, `}
                       {user.email}
-                      <br />
-                      {user.isPremium && (
-                        <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span>
-                      )}
-                    </div>
-                    <Link to="/settings/user/edit" className="button">
-                      {intl.formatMessage(messages.accountEditButton)}
-                    </Link>
-                    {user.emailValidated}
-                  </div>
-                </div>
-              )}
-
-              {user.isSubscriptionOwner && (
-                isLoadingOrdersInfo ? (
-                  <Loader />
-                ) : (
-                  <div className="account franz-form">
-                    {orders.length > 0 && (
-                      <Fragment>
-                        <div className="account__box">
-                          <h2>{intl.formatMessage(messages.headlineSubscription)}</h2>
-                          <div className="account__subscription">
-                            {orders[0].name}
-                            <span className="badge">{orders[0].price}</span>
+                      <div className="manage-user-links">
+                        <Button
+                          label={intl.formatMessage(messages.accountEditButton)}
+                          className="franz-form__button--inverted"
+                          onClick={openEditAccount}
+                        />
+                        {user.isSubscriptionOwner && (
+                          <>
                             <Button
                               label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
-                              className="account__subscription-button franz-form__button--inverted"
-                              loaded={!isCreatingPaymentDashboardUrl}
-                              onClick={() => openDashboard()}
+                              className="franz-form__button--inverted"
+                              onClick={openBilling}
                             />
-                          </div>
-                        </div>
-                        <div className="account__box">
-                          <h2>{intl.formatMessage(messages.headlineInvoices)}</h2>
-                          <table className="invoices">
-                            <tbody>
-                              {orders.map(order => (
-                                <tr key={order.id}>
-                                  <td className="invoices__date">
-                                    {moment(order.date).format('DD.MM.YYYY')}
-                                  </td>
-                                  <td className="invoices__action">
-                                    <button
-                                      type="button"
-                                      onClick={() => openExternalUrl(order.invoiceUrl)}
-                                    >
-                                      {intl.formatMessage(messages.invoiceDownload)}
-                                    </button>
-                                  </td>
-                                </tr>
-                              ))}
-                            </tbody>
-                          </table>
-                        </div>
-                      </Fragment>
-                    )}
+                            <Button
+                              label={intl.formatMessage(messages.invoicesButton)}
+                              className="franz-form__button--inverted"
+                              onClick={openInvoices}
+                            />
+                          </>
+                        )}
+                      </div>
+                    </div>
                   </div>
-                )
+                </div>
               )}
 
               {!user.isPremium && (
diff --git a/src/config.js b/src/config.js
index 479572edb..4423e61e9 100644
--- a/src/config.js
+++ b/src/config.js
@@ -12,6 +12,11 @@ export const CHECK_INTERVAL = ms('1h'); // How often should we perform checks
 export const LOCAL_API = 'http://localhost:3000';
 export const DEV_API = 'https://dev.franzinfra.com';
 export const LIVE_API = 'https://api.franzinfra.com';
+
+export const LOCAL_API_WEBSITE = 'http://localhost:3333';
+export const DEV_API_WEBSITE = 'https://meetfranz.com';
+export const LIVE_API_WEBSITE = 'https://meetfranz.com';
+
 export const GA_ID = !isDevMode ? 'UA-74126766-10' : 'UA-74126766-12';
 
 export const DEFAULT_APP_SETTINGS = {
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index ce1b9c333..0c837fab9 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -9,6 +9,7 @@ import AppStore from '../../stores/AppStore';
 
 import AccountDashboard from '../../components/settings/account/AccountDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
+import { WEBSITE } from '../../environment';
 
 const { BrowserWindow } = remote;
 
@@ -24,69 +25,77 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
   onCloseWindow() {
     const { user, payment } = 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() {
     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);
-
-      paymentWindow.on('closed', () => {
-        this.onCloseWindow();
-      });
-    }
+    // 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);
+
+    //   paymentWindow.on('closed', () => {
+    //     this.onCloseWindow();
+    //   });
+    // }
+
+    const url = `${WEBSITE}/user/billing?token=${stores.user.authToken}&utm_source=app&utm_medium=edit_profile`;
+
+    actions.app.openExternalUrl({ url });
+  }
+
+  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, 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}
+          orders={payment.orders} // das muss raus
           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/environment.js b/src/environment.js
index 73b1c7ab2..68fa45173 100644
--- a/src/environment.js
+++ b/src/environment.js
@@ -1,6 +1,13 @@
 import isDev from 'electron-is-dev';
 
-import { LIVE_API, DEV_API, LOCAL_API } from './config';
+import {
+  LIVE_API,
+  DEV_API,
+  LOCAL_API,
+  LOCAL_API_WEBSITE,
+  DEV_API_WEBSITE,
+  LIVE_API_WEBSITE,
+} from './config';
 
 export const isDevMode = isDev;
 export const useLiveAPI = process.env.LIVE_API;
@@ -19,12 +26,17 @@ export const ctrlKey = isMac ? '⌘' : 'Ctrl';
 export const cmdKey = isMac ? 'Cmd' : 'Ctrl';
 
 let api;
+let web;
 if (!isDevMode || (isDevMode && useLiveAPI)) {
   api = LIVE_API;
+  web = LIVE_API_WEBSITE;
 } else if (isDevMode && useLocalAPI) {
   api = LOCAL_API;
+  web = LOCAL_API_WEBSITE;
 } else {
   api = DEV_API;
+  web = DEV_API_WEBSITE;
 }
 
 export const API = api;
+export const WEBSITE = web;
diff --git a/src/stores/PaymentStore.js b/src/stores/PaymentStore.js
index 4cabee194..d4de476c8 100644
--- a/src/stores/PaymentStore.js
+++ b/src/stores/PaymentStore.js
@@ -10,15 +10,10 @@ export default class PaymentStore extends Store {
 
   @observable createHostedPageRequest = new Request(this.api.payment, 'getHostedPage');
 
-  @observable createDashboardUrlRequest = new Request(this.api.payment, 'getDashboardUrl');
-
-  @observable ordersDataRequest = new CachedRequest(this.api.payment, 'getOrders');
-
   constructor(...args) {
     super(...args);
 
     this.actions.payment.createHostedPage.listen(this._createHostedPage.bind(this));
-    this.actions.payment.createDashboardUrl.listen(this._createDashboardUrl.bind(this));
   }
 
   @computed get plan() {
@@ -28,10 +23,6 @@ export default class PaymentStore extends Store {
     return this.plansRequest.execute().result || {};
   }
 
-  @computed get orders() {
-    return this.ordersDataRequest.execute().result || [];
-  }
-
   @action _createHostedPage({ planId }) {
     const request = this.createHostedPageRequest.execute(planId);
 
@@ -39,12 +30,4 @@ export default class PaymentStore extends Store {
 
     return request;
   }
-
-  @action _createDashboardUrl() {
-    const request = this.createDashboardUrlRequest.execute();
-
-    gaEvent('Payment', 'createDashboardUrl');
-
-    return request;
-  }
 }
diff --git a/src/styles/badge.scss b/src/styles/badge.scss
index f9fac039a..be3a1055d 100644
--- a/src/styles/badge.scss
+++ b/src/styles/badge.scss
@@ -19,6 +19,7 @@
   display: inline-block;
   font-size: 14px;
   padding: 5px 10px;
+  letter-spacing: 0;
 
   &.badge--primary,
   &.badge--premium {
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 750b6bedd..b286c6f1b 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -62,13 +62,18 @@
     .account {
       .account__box { background: $dark-theme-gray-darker; }
 
-      .invoices {
-        td { border-bottom: 1px solid $dark-theme-gray-darker; }
-        .invoices__action button { color: $theme-brand-primary; }
+      .badge--premium {
+        margin-left: 10px;
+      }
+
+      .manage-user-links {
+        margin-top: 20px;
+        display: flex;
+        justify-content: space-between;
       }
     }
 
-    .premium-info { 
+    .premium-info {
       background: $dark-theme-gray-darker;
       border: 2px solid $theme-brand-primary;
     }