diff --git a/app/internal_packages/onboarding/lib/onboarding-root.jsx b/app/internal_packages/onboarding/lib/onboarding-root.jsx
index 7c127551d..7bc67a1ba 100644
--- a/app/internal_packages/onboarding/lib/onboarding-root.jsx
+++ b/app/internal_packages/onboarding/lib/onboarding-root.jsx
@@ -13,6 +13,7 @@ import AccountSettingsPageIMAP from './page-account-settings-imap';
import AccountOnboardingSuccess from './page-account-onboarding-success';
import AccountSettingsPageExchange from './page-account-settings-exchange';
import InitialPreferencesPage from './page-initial-preferences';
+import InitialSubscriptionPage from './page-initial-subscription';
const PageComponents = {
welcome: WelcomePage,
@@ -25,6 +26,7 @@ const PageComponents = {
'account-settings-exchange': AccountSettingsPageExchange,
'account-onboarding-success': AccountOnboardingSuccess,
'initial-preferences': InitialPreferencesPage,
+ 'initial-subscription': InitialSubscriptionPage,
};
export default class OnboardingRoot extends React.Component {
diff --git a/app/internal_packages/onboarding/lib/page-initial-preferences.cjsx b/app/internal_packages/onboarding/lib/page-initial-preferences.cjsx
index 01ef78837..b6e6abd98 100644
--- a/app/internal_packages/onboarding/lib/page-initial-preferences.cjsx
+++ b/app/internal_packages/onboarding/lib/page-initial-preferences.cjsx
@@ -4,7 +4,7 @@ path = require 'path'
fs = require 'fs'
_ = require 'underscore'
{RetinaImg, Flexbox, ConfigPropContainer} = require 'mailspring-component-kit'
-{AccountStore} = require 'mailspring-exports'
+{AccountStore, IdentityStore} = require 'mailspring-exports'
OnboardingActions = require('./onboarding-actions').default
NewsletterSignup = require('./newsletter-signup').default
@@ -128,7 +128,7 @@ class InitialPreferencesPage extends React.Component
return (
) unless @state.account
Welcome to Mailspring
- Let's set things up to your liking.
+ Let's set things up to your liking.
@@ -141,6 +141,9 @@ class InitialPreferencesPage extends React.Component
_onFinished: =>
- require('electron').ipcRenderer.send('account-setup-successful')
+ if IdentityStore.hasProFeatures()
+ require('electron').ipcRenderer.send('account-setup-successful')
+ else
+ OnboardingActions.moveToPage('initial-subscription')
module.exports = InitialPreferencesPage
diff --git a/app/internal_packages/onboarding/lib/page-initial-subscription.jsx b/app/internal_packages/onboarding/lib/page-initial-subscription.jsx
new file mode 100644
index 000000000..92f88af6c
--- /dev/null
+++ b/app/internal_packages/onboarding/lib/page-initial-subscription.jsx
@@ -0,0 +1,132 @@
+import { RetinaImg, Flexbox } from 'mailspring-component-kit';
+import { React, AccountStore } from 'mailspring-exports';
+
+export default class InitialPreferencesPage extends React.Component {
+ static displayName = 'InitialPreferencesPage';
+
+ _onFinished = () => {
+ require('electron').ipcRenderer.send('account-setup-successful');
+ };
+
+ render() {
+ return (
+
+
Go further with Mailspring Pro
+
+
+
+
+ You are using Mailspring Basic , which is free! You can link up to
+ four email accounts and try pro features like send later, read receipts and reminders
+ a few times a week.
+
+
+ If you enjoy Mailspring, upgrade to Mailspring Pro from{' '}
+ Preferences > Subscription to enable all these great features
+ permanently:
+
+
+
+
+ Rich contact profiles
+
+
+ Follow-up reminders
+
+
+ Read receipts
+
+
+ Link tracking
+
+
+ Powerful template support
+
+
+
+
+ Send later
+
+
+ Company overviews
+
+
+ Snooze messages
+
+
+ Mailbox insights
+
+
+ ... and much more!
+
+
+
+
+
+
+
+ Finish Setup
+
+
+ );
+ }
+}
diff --git a/app/internal_packages/onboarding/styles/onboarding.less b/app/internal_packages/onboarding/styles/onboarding.less
index efd4d4c1e..fa367069f 100644
--- a/app/internal_packages/onboarding/styles/onboarding.less
+++ b/app/internal_packages/onboarding/styles/onboarding.less
@@ -615,3 +615,45 @@ body.platform-win32 {
margin-top: 0;
}
}
+
+// temporarily copied from prefs-identity
+
+.page.initial-subscription {
+ .features {
+ display: flex;
+ max-width: 470px;
+ margin-top: 20px;
+ ul {
+ flex: 1;
+ margin: 0;
+ line-height: 1.9em;
+ list-style-type: none;
+ padding: 0;
+ li {
+ text-align: left;
+ }
+ }
+ }
+ .pro-feature-ring {
+ display: block;
+ width: 205px;
+ height: 205px;
+ position: relative;
+ .price,
+ .period {
+ display: block;
+ z-index: 2;
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ .price {
+ font-size: 50px;
+ line-height: 50px;
+ top: 40%;
+ }
+ .period {
+ top: 56%;
+ }
+ }
+}