Let users know about Basic vs. Pro during onboarding

This commit is contained in:
Ben Gotow 2017-12-04 12:04:48 -08:00
parent 2fef9bd030
commit 995d0029ce
4 changed files with 182 additions and 3 deletions

View file

@ -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 {

View file

@ -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 (<div/>) unless @state.account
<div className="page opaque" style={width:900, height:620}>
<h1 style={paddingTop: 100}>Welcome to Mailspring</h1>
<h4 style={marginBottom: 70}>Let's set things up to your liking.</h4>
<h4 style={marginBottom: 60}>Let's set things up to your liking.</h4>
<ConfigPropContainer>
<InitialPreferencesOptions account={@state.account} />
</ConfigPropContainer>
@ -141,6 +141,9 @@ class InitialPreferencesPage extends React.Component
</div>
_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

View file

@ -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 (
<div className="page opaque initial-subscription" style={{ width: 900, height: 620 }}>
<h1 style={{ paddingTop: 100 }}>Go further with Mailspring Pro</h1>
<div
style={{
display: 'flex',
alignItems: 'flex-start',
maxWidth: 750,
margin: 'auto',
textAlign: 'left',
marginTop: 40,
}}
>
<div>
<div className="pro-feature-ring" style={{ marginRight: 40 }}>
<RetinaImg name="pro-feature-ring.png" mode={RetinaImg.Mode.ContentPreserve} />
<div className="price">$8</div>
<div className="period">monthly</div>
</div>
</div>
<div className="basic-explanation">
<p>
You are using <strong>Mailspring Basic</strong>, 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.
</p>
<p>
If you enjoy Mailspring, upgrade to Mailspring Pro from{' '}
<strong>Preferences > Subscription</strong> to enable all these great features
permanently:
</p>
<div className="features">
<ul>
<li>
<RetinaImg
name="pro-feature-checkmark.png"
style={{ paddingRight: 8 }}
mode={RetinaImg.Mode.ContentDark}
/>Rich contact profiles
</li>
<li>
<RetinaImg
name="pro-feature-checkmark.png"
style={{ paddingRight: 8 }}
mode={RetinaImg.Mode.ContentDark}
/>Follow-up reminders
</li>
<li>
<RetinaImg
name="pro-feature-checkmark.png"
style={{ paddingRight: 8 }}
mode={RetinaImg.Mode.ContentDark}
/>Read receipts
</li>
<li>
<RetinaImg
name="pro-feature-checkmark.png"
style={{ paddingRight: 8 }}
mode={RetinaImg.Mode.ContentDark}
/>Link tracking
</li>
<li>
<RetinaImg
name="pro-feature-checkmark.png"
style={{ paddingRight: 8 }}
mode={RetinaImg.Mode.ContentDark}
/>Powerful template support
</li>
</ul>
<ul>
<li>
<RetinaImg
name="pro-feature-checkmark.png"
style={{ paddingRight: 8 }}
mode={RetinaImg.Mode.ContentDark}
/>Send later
</li>
<li>
<RetinaImg
name="pro-feature-checkmark.png"
style={{ paddingRight: 8 }}
mode={RetinaImg.Mode.ContentDark}
/>Company overviews
</li>
<li>
<RetinaImg
name="pro-feature-checkmark.png"
style={{ paddingRight: 8 }}
mode={RetinaImg.Mode.ContentDark}
/>Snooze messages
</li>
<li>
<RetinaImg
name="pro-feature-checkmark.png"
style={{ paddingRight: 8 }}
mode={RetinaImg.Mode.ContentDark}
/>Mailbox insights
</li>
<li>
<RetinaImg
name="pro-feature-checkmark.png"
style={{ paddingRight: 8 }}
mode={RetinaImg.Mode.ContentDark}
/>... and much more!
</li>
</ul>
</div>
</div>
</div>
<button
className="btn btn-large btn-get-started"
style={{ marginTop: 50 }}
onClick={this._onFinished}
>
Finish Setup
</button>
</div>
);
}
}

View file

@ -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%;
}
}
}