Add CTA for pro upgrade

7 files changed, 107 insertions, 64 deletions

diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index c9eb8aeda..900a83a78 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -31,6 +31,10 @@ const messages = defineMessages({
     id: 'settings.account.manageSubscription.label',
     defaultMessage: '!!!Manage your subscription',
   },
+  upgradeAccountToPro: {
+    id: 'settings.account.upgradeToPro.label',
+    defaultMessage: '!!!Upgrade to Franz Professional',
+  },
   accountTypeBasic: {
     id: 'settings.account.accountType.basic',
     defaultMessage: '!!!Basic Account',
@@ -100,6 +104,7 @@ export default @observer class AccountDashboard extends Component {
     isDeleteAccountSuccessful: PropTypes.bool.isRequired,
     openEditAccount: PropTypes.func.isRequired,
     openBilling: PropTypes.func.isRequired,
+    upgradeToPro: PropTypes.func.isRequired,
     openInvoices: PropTypes.func.isRequired,
   };
 
@@ -118,6 +123,7 @@ export default @observer class AccountDashboard extends Component {
       isDeleteAccountSuccessful,
       openEditAccount,
       openBilling,
+      upgradeToPro,
       openInvoices,
     } = this.props;
     const { intl } = this.context;
@@ -229,6 +235,11 @@ export default @observer class AccountDashboard extends Component {
                         )}
                         <div className="manage-user-links">
                           <Button
+                            label={intl.formatMessage(messages.upgradeAccountToPro)}
+                            className="franz-form__button--primary"
+                            onClick={upgradeToPro}
+                          />
+                          <Button
                             label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
                             className="franz-form__button--inverted"
                             onClick={openBilling}
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 66076504f..f9eae4957 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -26,7 +26,7 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
   handleWebsiteLink(route) {
     const { actions, stores } = this.props;
 
-    const url = `${WEBSITE}${route}?authToken=${stores.user.authToken}&utm_source=app&utm_medium=account_dashboard`;
+    const url = stores.user.getAuthURL(`${WEBSITE}${route}?utm_source=app&utm_medium=account_dashboard`);
 
     actions.app.openExternalUrl({ url });
   }
@@ -51,6 +51,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')}
           openBilling={() => this.handleWebsiteLink('/user/billing')}
           openInvoices={() => this.handleWebsiteLink('/user/invoices')}
         />
diff --git a/src/containers/subscription/SubscriptionFormScreen.js b/src/containers/subscription/SubscriptionFormScreen.js
index 5508c120c..e9e457084 100644
--- a/src/containers/subscription/SubscriptionFormScreen.js
+++ b/src/containers/subscription/SubscriptionFormScreen.js
@@ -20,12 +20,7 @@ export default @inject('stores', 'actions') @observer class SubscriptionFormScre
     } = stores;
 
     let hostedPageURL = !user.data.hadSubscription ? features.features.planSelectionURL : features.features.subscribeURL;
-    const url = new URL(hostedPageURL);
-    const params = new URLSearchParams(url.search.slice(1));
-
-    params.append('authToken', user.authToken);
-
-    hostedPageURL = `${url.origin}${url.pathname}?${params.toString()}`;
+    hostedPageURL = user.getAuthURL(hostedPageURL);
 
     actions.app.openExternalUrl({ url: hostedPageURL });
   }
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 7691aba84..1a571c904 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -1278,185 +1278,198 @@
         }
       },
       {
-        "defaultMessage": "!!!Basic Account",
+        "defaultMessage": "!!!Upgrade to Franz Professional",
         "end": {
           "column": 3,
           "line": 37
         },
         "file": "src/components/settings/account/AccountDashboard.js",
+        "id": "settings.account.upgradeToPro.label",
+        "start": {
+          "column": 23,
+          "line": 34
+        }
+      },
+      {
+        "defaultMessage": "!!!Basic Account",
+        "end": {
+          "column": 3,
+          "line": 41
+        },
+        "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.accountType.basic",
         "start": {
           "column": 20,
-          "line": 34
+          "line": 38
         }
       },
       {
         "defaultMessage": "!!!Premium Supporter Account",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 45
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.accountType.premium",
         "start": {
           "column": 22,
-          "line": 38
+          "line": 42
         }
       },
       {
         "defaultMessage": "!!!Edit Account",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 49
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.account.editButton",
         "start": {
           "column": 21,
-          "line": 42
+          "line": 46
         }
       },
       {
         "defaultMessage": "!!Invoices",
         "end": {
           "column": 3,
-          "line": 49
+          "line": 53
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.headlineInvoices",
         "start": {
           "column": 18,
-          "line": 46
+          "line": 50
         }
       },
       {
         "defaultMessage": "!!!Download",
         "end": {
           "column": 3,
-          "line": 53
+          "line": 57
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.invoiceDownload",
         "start": {
           "column": 19,
-          "line": 50
+          "line": 54
         }
       },
       {
         "defaultMessage": "!!!Could not load user information",
         "end": {
           "column": 3,
-          "line": 57
+          "line": 61
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.userInfoRequestFailed",
         "start": {
           "column": 25,
-          "line": 54
+          "line": 58
         }
       },
       {
         "defaultMessage": "!!!Try again",
         "end": {
           "column": 3,
-          "line": 61
+          "line": 65
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.tryReloadUserInfoRequest",
         "start": {
           "column": 28,
-          "line": 58
+          "line": 62
         }
       },
       {
         "defaultMessage": "!!!Delete account",
         "end": {
           "column": 3,
-          "line": 65
+          "line": 69
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteAccount",
         "start": {
           "column": 17,
-          "line": 62
+          "line": 66
         }
       },
       {
         "defaultMessage": "!!!If you don't need your Franz account any longer, you can delete your account and all related data here.",
         "end": {
           "column": 3,
-          "line": 69
+          "line": 73
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteInfo",
         "start": {
           "column": 14,
-          "line": 66
+          "line": 70
         }
       },
       {
         "defaultMessage": "!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!",
         "end": {
           "column": 3,
-          "line": 73
+          "line": 77
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteEmailSent",
         "start": {
           "column": 19,
-          "line": 70
+          "line": 74
         }
       },
       {
         "defaultMessage": "!!!Free Trial",
         "end": {
           "column": 3,
-          "line": 77
+          "line": 81
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.trial",
         "start": {
           "column": 9,
-          "line": 74
+          "line": 78
         }
       },
       {
         "defaultMessage": "!!!Your Franz License:",
         "end": {
           "column": 3,
-          "line": 81
+          "line": 85
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.yourLicense",
         "start": {
           "column": 15,
-          "line": 78
+          "line": 82
         }
       },
       {
         "defaultMessage": "!!!Your free trial ends in {duration}.",
         "end": {
           "column": 3,
-          "line": 85
+          "line": 89
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.trialEndsIn",
         "start": {
           "column": 15,
-          "line": 82
+          "line": 86
         }
       },
       {
         "defaultMessage": "!!!Please update your billing info to continue using {license} after your trial period.",
         "end": {
           "column": 3,
-          "line": 89
+          "line": 93
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.trialUpdateBillingInfo",
         "start": {
           "column": 33,
-          "line": 86
+          "line": 90
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 02204020f..82a9c0fb4 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -180,6 +180,7 @@
   "settings.account.trialUpdateBillingInfo": "Please update your billing info to continue using {license} after your trial period.",
   "settings.account.tryReloadServices": "Try again",
   "settings.account.tryReloadUserInfoRequest": "Try again",
+  "settings.account.upgradeToPro.label": "Upgrade to Franz Professional",
   "settings.account.userInfoRequestFailed": "Could not load user information",
   "settings.account.yourLicense": "Your Franz License",
   "settings.app.buttonClearAllCache": "Clear cache",
diff --git a/src/i18n/messages/src/components/settings/account/AccountDashboard.json b/src/i18n/messages/src/components/settings/account/AccountDashboard.json
index 72cf7e0f3..06d53e41d 100644
--- a/src/i18n/messages/src/components/settings/account/AccountDashboard.json
+++ b/src/i18n/messages/src/components/settings/account/AccountDashboard.json
@@ -52,15 +52,28 @@
     }
   },
   {
+    "id": "settings.account.upgradeToPro.label",
+    "defaultMessage": "!!!Upgrade to Franz Professional",
+    "file": "src/components/settings/account/AccountDashboard.js",
+    "start": {
+      "line": 34,
+      "column": 23
+    },
+    "end": {
+      "line": 37,
+      "column": 3
+    }
+  },
+  {
     "id": "settings.account.accountType.basic",
     "defaultMessage": "!!!Basic Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 34,
+      "line": 38,
       "column": 20
     },
     "end": {
-      "line": 37,
+      "line": 41,
       "column": 3
     }
   },
@@ -69,11 +82,11 @@
     "defaultMessage": "!!!Premium Supporter Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 38,
+      "line": 42,
       "column": 22
     },
     "end": {
-      "line": 41,
+      "line": 45,
       "column": 3
     }
   },
@@ -82,11 +95,11 @@
     "defaultMessage": "!!!Edit Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 42,
+      "line": 46,
       "column": 21
     },
     "end": {
-      "line": 45,
+      "line": 49,
       "column": 3
     }
   },
@@ -95,11 +108,11 @@
     "defaultMessage": "!!Invoices",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 46,
+      "line": 50,
       "column": 18
     },
     "end": {
-      "line": 49,
+      "line": 53,
       "column": 3
     }
   },
@@ -108,11 +121,11 @@
     "defaultMessage": "!!!Download",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 50,
+      "line": 54,
       "column": 19
     },
     "end": {
-      "line": 53,
+      "line": 57,
       "column": 3
     }
   },
@@ -121,11 +134,11 @@
     "defaultMessage": "!!!Could not load user information",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 54,
+      "line": 58,
       "column": 25
     },
     "end": {
-      "line": 57,
+      "line": 61,
       "column": 3
     }
   },
@@ -134,11 +147,11 @@
     "defaultMessage": "!!!Try again",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 58,
+      "line": 62,
       "column": 28
     },
     "end": {
-      "line": 61,
+      "line": 65,
       "column": 3
     }
   },
@@ -147,11 +160,11 @@
     "defaultMessage": "!!!Delete account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 62,
+      "line": 66,
       "column": 17
     },
     "end": {
-      "line": 65,
+      "line": 69,
       "column": 3
     }
   },
@@ -160,11 +173,11 @@
     "defaultMessage": "!!!If you don't need your Franz account any longer, you can delete your account and all related data here.",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 66,
+      "line": 70,
       "column": 14
     },
     "end": {
-      "line": 69,
+      "line": 73,
       "column": 3
     }
   },
@@ -173,11 +186,11 @@
     "defaultMessage": "!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 70,
+      "line": 74,
       "column": 19
     },
     "end": {
-      "line": 73,
+      "line": 77,
       "column": 3
     }
   },
@@ -186,11 +199,11 @@
     "defaultMessage": "!!!Free Trial",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 74,
+      "line": 78,
       "column": 9
     },
     "end": {
-      "line": 77,
+      "line": 81,
       "column": 3
     }
   },
@@ -199,11 +212,11 @@
     "defaultMessage": "!!!Your Franz License:",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 78,
+      "line": 82,
       "column": 15
     },
     "end": {
-      "line": 81,
+      "line": 85,
       "column": 3
     }
   },
@@ -212,11 +225,11 @@
     "defaultMessage": "!!!Your free trial ends in {duration}.",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 82,
+      "line": 86,
       "column": 15
     },
     "end": {
-      "line": 85,
+      "line": 89,
       "column": 3
     }
   },
@@ -225,11 +238,11 @@
     "defaultMessage": "!!!Please update your billing info to continue using {license} after your trial period.",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 86,
+      "line": 90,
       "column": 33
     },
     "end": {
-      "line": 89,
+      "line": 93,
       "column": 3
     }
   }
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 5d0037b3c..e23106462 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -4,7 +4,7 @@ import jwt from 'jsonwebtoken';
 import localStorage from 'mobx-localstorage';
 import ms from 'ms';
 
-import { isDevMode } from '../environment';
+import { isDevMode, WEBSITE } from '../environment';
 import Store from './lib/Store';
 import Request from './lib/Request';
 import CachedRequest from './lib/CachedRequest';
@@ -381,6 +381,15 @@ export default class UserStore extends Store {
     }
   }
 
+  getAuthURL(url) {
+    const parsedUrl = new URL(url);
+    const params = new URLSearchParams(parsedUrl.search.slice(1));
+
+    params.append('authToken', this.authToken);
+
+    return `${parsedUrl.origin}${parsedUrl.pathname}?${params.toString()}`;
+  }
+
   async _migrateUserLocale() {
     await this.getUserInfoRequest._promise;