mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-12-27 02:23:28 +08:00
Let users know about Basic vs. Pro during onboarding
This commit is contained in:
parent
2fef9bd030
commit
995d0029ce
4 changed files with 182 additions and 3 deletions
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue