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

+
+
+
+ +
$8
+
monthly
+
+
+
+

+ 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! +
  • +
+
+
+
+ + +
+ ); + } +} 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%; + } + } +}