mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-02-24 08:04:11 +08:00
Link to important pro feature knowledge base articles from the subscription tab
This commit is contained in:
Ben Gotow
parent
a9da75094f
commit
c83c711cb8
2 changed files with 140 additions and 3 deletions
|
|
@ -37,6 +37,71 @@ class RefreshButton extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
const ProTourFeatures = [
|
||||
{
|
||||
link:
|
||||
'https://foundry376.zendesk.com/hc/en-us/articles/115003340291--Add-reminders-to-sent-messages',
|
||||
icon: `icon-composer-reminders.png`,
|
||||
title: `Reminders`,
|
||||
text: `Never forget to follow up! Mailspring reminds you if your messages haven't received replies.`,
|
||||
},
|
||||
{
|
||||
link:
|
||||
'https://foundry376.zendesk.com/hc/en-us/articles/115001881272--View-contact-and-company-profiles',
|
||||
icon: `toolbar-person-sidebar.png`,
|
||||
title: `Rich contact profiles`,
|
||||
text: `Write better emails with LinkedIn profiles, Twitter bios, message history, and more in the right sidebar.`,
|
||||
},
|
||||
{
|
||||
link:
|
||||
'https://foundry376.zendesk.com/hc/en-us/articles/115001875431--Enable-read-receipts-link-tracking-and-notifications',
|
||||
icon: `icon-composer-eye.png`,
|
||||
title: `Read receipts`,
|
||||
text: `Get notified when each recipient opens your email to send timely follow-ups and reminders.`,
|
||||
},
|
||||
{
|
||||
link:
|
||||
'https://foundry376.zendesk.com/hc/en-us/articles/115001875231--Reply-faster-with-email-templates',
|
||||
icon: `toolbar-templates.png`,
|
||||
title: `Mail Templates`,
|
||||
text: `Create templated messages and fill them quickly to reply to messages and automate your common workflows.`,
|
||||
},
|
||||
{
|
||||
link:
|
||||
'https://foundry376.zendesk.com/hc/en-us/articles/115001875431--Enable-read-receipts-link-tracking-and-notifications',
|
||||
icon: `icon-composer-linktracking.png`,
|
||||
title: `Link tracking`,
|
||||
text: `See when recipients click links in your emails so you can follow up with precision`,
|
||||
},
|
||||
{
|
||||
link:
|
||||
'https://foundry376.zendesk.com/hc/en-us/articles/115001882012--Schedule-messages-to-send-later',
|
||||
icon: `icon-composer-sendlater.png`,
|
||||
title: `Send later`,
|
||||
text: `Schedule messages to send at the ideal time to maximize your email reply rate or automate drip emails.`,
|
||||
},
|
||||
{
|
||||
link:
|
||||
'https://foundry376.zendesk.com/hc/en-us/articles/115001881272--View-contact-and-company-profiles',
|
||||
icon: `icon-composer-reminders.png`,
|
||||
title: `Company overviews`,
|
||||
text: `See detailed information about companies you email, including their size, funding and timezone.`,
|
||||
},
|
||||
{
|
||||
link:
|
||||
'https://foundry376.zendesk.com/hc/en-us/articles/115001881232--Snooze-emails-to-handle-them-later',
|
||||
icon: `toolbar-snooze.png`,
|
||||
title: `Snooze messages`,
|
||||
text: `Schedule messages to re-appear later to keep your inbox clean and focus on immediate todos.`,
|
||||
},
|
||||
{
|
||||
link: 'https://foundry376.zendesk.com/hc/en-us/articles/115002507891-Activity-Reports-In-Depth',
|
||||
icon: `icon-toolbar-activity.png`,
|
||||
title: `Mailbox insights`,
|
||||
text: `Use the Activity tab to get a birds-eye view of your mailbox: open and click rates, subject line effectiveness, and more.`,
|
||||
},
|
||||
];
|
||||
|
||||
class PreferencesIdentity extends React.Component {
|
||||
static displayName = 'PreferencesIdentity';
|
||||
|
||||
|
|
@ -197,13 +262,33 @@ class PreferencesIdentity extends React.Component {
|
|||
<div>
|
||||
Thank you for using{' '}
|
||||
<strong style={{ textTransform: 'capitalize' }}>{`Mailspring ${planDisplayName}`}</strong>{' '}
|
||||
and supporting independent software. Get the most out of your subscription: visit the{' '}
|
||||
and supporting independent software. Get the most out of your subscription: explore pro
|
||||
features below or visit the{' '}
|
||||
<a href="https://foundry376.zendesk.com/hc/en-us/sections/115000521592-Getting-Started">
|
||||
Help Center
|
||||
</a>{' '}
|
||||
to learn more about great features like reminders, templates, and activity insights.
|
||||
to learn more about reminders, templates, activity insights, and more.
|
||||
{unpaidNote}
|
||||
</div>
|
||||
<div className="feature-explore-title">Explore Mailspring Pro</div>
|
||||
<div className="feature-explore-grid">
|
||||
{ProTourFeatures.map(item => (
|
||||
<a key={item.title} className="feature" href={item.link}>
|
||||
<div className="popout">
|
||||
<RetinaImg name="thread-popout.png" mode={RetinaImg.Mode.ContentDark} />
|
||||
</div>
|
||||
<h3>
|
||||
<RetinaImg
|
||||
name={item.icon}
|
||||
style={{ paddingRight: 8 }}
|
||||
mode={RetinaImg.Mode.ContentDark}
|
||||
/>
|
||||
{item.title}
|
||||
</h3>
|
||||
<p>{item.text}</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ paddingTop: 15 }}>
|
||||
<OpenIdentityPageButton
|
||||
label="Manage Billing"
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
flex: 1;
|
||||
line-height: 1.9em;
|
||||
.name {
|
||||
font-size: 1.2em;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -131,6 +131,58 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.feature-explore-title {
|
||||
font-size: 1.4em;
|
||||
margin-top: 1.8em;
|
||||
}
|
||||
.feature-explore-grid {
|
||||
margin-top: 7px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.feature {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
width: calc(~'50% - 20px');
|
||||
background: @background-primary;
|
||||
cursor: default;
|
||||
padding: 20px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
transform: translate(0, 0);
|
||||
transition: box-shadow 200ms linear, transform 200ms linear;
|
||||
vertical-align: top;
|
||||
border-left: 3px solid @accent-primary;
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.popout {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 20px;
|
||||
}
|
||||
&:hover {
|
||||
transform: translate(0, -3px);
|
||||
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
|
||||
.popout {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue