2016-05-28 05:05:27 +08:00
import React from 'react' ;
2019-03-05 03:03:12 +08:00
import {
Actions ,
IdentityStore ,
localized ,
localizedReactFragment ,
IIdentity ,
} from 'mailspring-exports' ;
2017-09-27 02:46:00 +08:00
import { OpenIdentityPageButton , BillingModal , RetinaImg } from 'mailspring-component-kit' ;
2017-09-27 02:33:08 +08:00
import { shell } from 'electron' ;
2016-05-28 05:05:27 +08:00
2019-03-05 03:03:12 +08:00
class RefreshButton extends React . Component < { } , { refreshing : boolean } > {
2017-09-26 14:50:12 +08:00
constructor ( props ) {
super ( props ) ;
2017-09-27 02:33:08 +08:00
this . state = { refreshing : false } ;
2017-09-26 14:50:12 +08:00
}
2019-03-05 03:03:12 +08:00
_mounted : boolean = false ;
2017-09-26 14:50:12 +08:00
componentDidMount() {
this . _mounted = true ;
}
componentWillUnmount() {
this . _mounted = false ;
}
_onClick = ( ) = > {
2017-09-27 02:33:08 +08:00
this . setState ( { refreshing : true } ) ;
2017-09-26 14:50:12 +08:00
IdentityStore . fetchIdentity ( ) . then ( ( ) = > {
setTimeout ( ( ) = > {
if ( this . _mounted ) {
2017-09-27 02:33:08 +08:00
this . setState ( { refreshing : false } ) ;
2017-09-26 14:50:12 +08:00
}
} , 400 ) ;
} ) ;
2017-09-27 02:33:08 +08:00
} ;
2017-09-26 14:50:12 +08:00
render() {
return (
< div className = { ` refresh ${ this . state . refreshing && 'spinning' } ` } onClick = { this . _onClick } >
< RetinaImg name = "ic-refresh.png" mode = { RetinaImg . Mode . ContentIsMask } / >
< / div >
2017-09-27 02:33:08 +08:00
) ;
2017-09-26 14:50:12 +08:00
}
}
2018-10-09 15:18:56 +08:00
const ProTourFeatures = [
{
link :
'https://foundry376.zendesk.com/hc/en-us/articles/115003340291--Add-reminders-to-sent-messages' ,
icon : ` icon-composer-reminders.png ` ,
2018-10-09 15:27:52 +08:00
title : localized ( ` Follow-up reminders ` ) ,
text : localized (
` Never forget to follow up! Mailspring reminds you if your messages haven't received replies. `
) ,
2018-10-09 15:18:56 +08:00
} ,
{
link :
'https://foundry376.zendesk.com/hc/en-us/articles/115001881272--View-contact-and-company-profiles' ,
icon : ` toolbar-person-sidebar.png ` ,
2018-10-09 15:27:52 +08:00
title : localized ( ` Rich contact profiles ` ) ,
text : localized (
` Write better emails with LinkedIn profiles, Twitter bios, message history, and more in the right sidebar. `
) ,
2018-10-09 15:18:56 +08:00
} ,
{
link :
'https://foundry376.zendesk.com/hc/en-us/articles/115001875431--Enable-read-receipts-link-tracking-and-notifications' ,
icon : ` icon-composer-eye.png ` ,
2018-10-09 15:27:52 +08:00
title : localized ( ` Read Receipts ` ) ,
text : localized (
` Get notified when each recipient opens your email to send timely follow-ups and reminders. `
) ,
2018-10-09 15:18:56 +08:00
} ,
{
link :
'https://foundry376.zendesk.com/hc/en-us/articles/115001875231--Reply-faster-with-email-templates' ,
icon : ` toolbar-templates.png ` ,
2018-10-09 15:27:52 +08:00
title : localized ( ` Mail Templates ` ) ,
text : localized (
` Create templated messages and fill them quickly to reply to messages and automate your common workflows. `
) ,
2018-10-09 15:18:56 +08:00
} ,
{
link :
'https://foundry376.zendesk.com/hc/en-us/articles/115001875431--Enable-read-receipts-link-tracking-and-notifications' ,
icon : ` icon-composer-linktracking.png ` ,
2018-10-09 15:27:52 +08:00
title : localized ( ` Link tracking ` ) ,
text : localized (
` See when recipients click links in your emails so you can follow up with precision `
) ,
2018-10-09 15:18:56 +08:00
} ,
{
link :
'https://foundry376.zendesk.com/hc/en-us/articles/115001882012--Schedule-messages-to-send-later' ,
icon : ` icon-composer-sendlater.png ` ,
2018-10-09 15:27:52 +08:00
title : localized ( ` Send Later ` ) ,
text : localized (
` Schedule messages to send at the ideal time to maximize your email reply rate or automate drip emails. `
) ,
2018-10-09 15:18:56 +08:00
} ,
{
link :
'https://foundry376.zendesk.com/hc/en-us/articles/115001881272--View-contact-and-company-profiles' ,
icon : ` icon-composer-reminders.png ` ,
2018-10-09 15:27:52 +08:00
title : localized ( ` Company overviews ` ) ,
text : localized (
` See detailed information about companies you email, including their size, funding and timezone. `
) ,
2018-10-09 15:18:56 +08:00
} ,
{
link :
'https://foundry376.zendesk.com/hc/en-us/articles/115001881232--Snooze-emails-to-handle-them-later' ,
icon : ` toolbar-snooze.png ` ,
2018-10-09 15:27:52 +08:00
title : localized ( ` Snooze messages ` ) ,
text : localized (
` Schedule messages to re-appear later to keep your inbox clean and focus on immediate todos. `
) ,
2018-10-09 15:18:56 +08:00
} ,
{
link : 'https://foundry376.zendesk.com/hc/en-us/articles/115002507891-Activity-Reports-In-Depth' ,
icon : ` icon-toolbar-activity.png ` ,
2018-10-09 15:27:52 +08:00
title : localized ( ` Mailbox insights ` ) ,
text : localized (
` Use the Activity tab to get a birds-eye view of your mailbox: open and click rates, subject line effectiveness, and more. `
) ,
2018-10-09 15:18:56 +08:00
} ,
2019-07-31 14:19:03 +08:00
{
link : 'https://foundry376.zendesk.com/hc/en-us/articles/360031102452' ,
icon : ` pro-feature-translation.png ` ,
title : localized ( ` Automatic Translation ` ) ,
text : localized (
` Instantly translate messages you receive into your preferred reading language. `
) ,
} ,
2018-10-09 15:18:56 +08:00
] ;
2019-03-05 03:03:12 +08:00
class PreferencesIdentity extends React . Component < { } , { identity : IIdentity } > {
2016-05-28 05:05:27 +08:00
static displayName = 'PreferencesIdentity' ;
2019-03-05 03:03:12 +08:00
unsubscribe : ( ) = > void ;
constructor ( props ) {
super ( props ) ;
2017-03-07 03:45:55 +08:00
this . state = this . _getStateFromStores ( ) ;
2016-05-28 05:05:27 +08:00
}
componentDidMount() {
this . unsubscribe = IdentityStore . listen ( ( ) = > {
2017-03-07 03:45:55 +08:00
this . setState ( this . _getStateFromStores ( ) ) ;
2016-05-28 05:05:27 +08:00
} ) ;
}
componentWillUnmount() {
this . unsubscribe ( ) ;
}
2017-03-07 03:45:55 +08:00
_getStateFromStores() {
2016-05-28 05:05:27 +08:00
return {
2016-06-03 09:56:03 +08:00
identity : IdentityStore.identity ( ) || { } ,
2016-05-28 05:05:27 +08:00
} ;
}
2017-03-07 03:45:55 +08:00
_onUpgrade = ( ) = > {
Actions . openModal ( {
2017-09-27 02:33:08 +08:00
component : < BillingModal source = "preferences" / > ,
2017-08-24 13:58:36 +08:00
width : BillingModal.IntrinsicWidth ,
height : BillingModal.IntrinsicHeight ,
2017-09-27 02:33:08 +08:00
} ) ;
} ;
2017-03-07 03:45:55 +08:00
_renderBasic() {
2017-11-07 22:59:56 +08:00
const onLearnMore = ( ) = > shell . openExternal ( 'https://getmailspring.com/pro' ) ;
2017-03-07 03:45:55 +08:00
return (
< div className = "row padded" >
2017-11-08 03:44:13 +08:00
< div style = { { display : 'flex' , alignItems : 'flex-start' } } >
2017-11-07 22:59:56 +08:00
< div className = "basic-explanation" >
2018-10-08 13:19:30 +08:00
{ localizedReactFragment (
` You are using %@, which is free! You can link up to four email accounts and try pro features like snooze, send later, read receipts and reminders a few times a week. ` ,
< strong > { localized ( 'Mailspring Basic' ) } < / strong >
) }
2017-11-08 03:44:13 +08:00
< span className = "platform-linux-only" >
2018-10-08 13:19:30 +08:00
{ localizedReactFragment (
` Mailspring is independent %@ software, and subscription revenue allows us spend time maintaining and improving the product. ` ,
< a href = "https://github.com/Foundry376/Mailspring/" > { localized ( 'open source' ) } < / a >
) }
2017-11-08 03:44:13 +08:00
< / span >
2017-11-07 22:59:56 +08:00
< br / >
< br / >
2018-10-08 13:19:30 +08:00
{ localizedReactFragment (
` Upgrade to %@ to use all these great features permanently: ` ,
< a onClick = { onLearnMore } > { localized ( 'Mailspring Pro' ) } < / a >
) }
2017-11-07 22:59:56 +08:00
< div className = "features" >
< ul >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
2018-10-08 13:19:30 +08:00
/ >
{ localized ( ` Rich contact profiles ` ) }
2017-11-07 22:59:56 +08:00
< / li >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
2018-10-08 13:19:30 +08:00
/ >
{ localized ( ` Follow-up reminders ` ) }
2017-11-07 22:59:56 +08:00
< / li >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
2018-10-08 13:19:30 +08:00
/ >
{ localized ( ` Read Receipts ` ) }
2017-11-07 22:59:56 +08:00
< / li >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
2018-10-08 13:19:30 +08:00
/ >
{ localized ( ` Link tracking ` ) }
2017-11-07 22:59:56 +08:00
< / li >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
2018-10-08 13:19:30 +08:00
/ >
{ localized ( ` Powerful template support ` ) }
2017-11-07 22:59:56 +08:00
< / li >
< / ul >
< ul >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
2018-10-08 13:19:30 +08:00
/ >
{ localized ( ` Send Later ` ) }
2017-11-07 22:59:56 +08:00
< / li >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
2018-10-08 13:19:30 +08:00
/ >
{ localized ( ` Company overviews ` ) }
2017-11-07 22:59:56 +08:00
< / li >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
2018-10-08 13:19:30 +08:00
/ >
{ localized ( ` Snooze messages ` ) }
2017-11-07 22:59:56 +08:00
< / li >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
2018-10-08 13:19:30 +08:00
/ >
{ localized ( ` Mailbox insights ` ) }
2017-11-07 22:59:56 +08:00
< / li >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
2018-10-08 13:19:30 +08:00
/ >
{ localized ( ` ... and much more! ` ) }
2017-11-07 22:59:56 +08:00
< / li >
< / ul >
< / div >
2017-09-26 14:50:12 +08:00
< / div >
2017-11-07 22:59:56 +08:00
< div className = "subscription-actions" >
< div className = "pro-feature-ring" >
< RetinaImg name = "pro-feature-ring.png" mode = { RetinaImg . Mode . ContentPreserve } / >
< div className = "price" > $8 < / div >
2018-10-08 13:35:15 +08:00
< div className = "period" > { localized ( 'Monthly' ) } < / div >
2017-11-07 22:59:56 +08:00
< / div >
< div
className = "btn btn-emphasis"
onClick = { this . _onUpgrade }
style = { { verticalAlign : 'top' } }
>
2018-10-08 13:19:30 +08:00
< RetinaImg name = "ic-upgrade.png" mode = { RetinaImg . Mode . ContentIsMask } / > { ' ' }
{ localized ( ` Get Mailspring Pro ` ) }
2017-11-07 22:59:56 +08:00
< / div >
2017-09-26 14:50:12 +08:00
< / div >
2017-03-07 03:45:55 +08:00
< / div >
< / div >
2017-09-27 02:33:08 +08:00
) ;
2017-03-07 03:45:55 +08:00
}
2017-09-02 13:49:10 +08:00
_renderPaidPlan ( planName , effectivePlanName ) {
2018-10-08 13:35:15 +08:00
const planDisplayName = planName . replace ( 'Annual' , ` ( ${ localized ( 'annual' ) } ) ` ) ;
2017-12-15 05:40:15 +08:00
2017-09-27 02:33:08 +08:00
const unpaidNote = effectivePlanName !== planName && (
2017-11-10 18:34:10 +08:00
< p >
2018-10-08 13:19:30 +08:00
{ localized (
` Note: Due to issues with your most recent payment, you've been temporarily downgraded to Mailspring %@. Click 'Billing' below to correct the issue. ` ,
effectivePlanName
) }
2017-11-10 18:34:10 +08:00
< / p >
2017-09-27 02:33:08 +08:00
) ;
2017-03-07 03:45:55 +08:00
return (
< div className = "row padded" >
< div >
2018-10-09 15:27:52 +08:00
{ localizedReactFragment (
` Thank you for using %@ and supporting independent software. Get the most out of your subscription: explore pro features below or visit the %@ to learn more about reminders, templates, activity insights, and more. ` ,
< strong
style = { { textTransform : 'capitalize' } }
> { ` Mailspring ${ planDisplayName } ` } < / strong > ,
< a href = "https://foundry376.zendesk.com/hc/en-us/sections/115000521592-Getting-Started" >
{ localized ( ` Help Center ` ) }
< / a >
) }
2017-09-27 02:33:08 +08:00
{ unpaidNote }
2017-03-07 03:45:55 +08:00
< / div >
2018-10-09 15:27:52 +08:00
< div className = "feature-explore-title" > { localized ( 'Explore Mailspring Pro' ) } < / div >
2018-10-09 15:18:56 +08:00
< 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 >
2017-11-10 18:34:10 +08:00
< div style = { { paddingTop : 15 } } >
2017-09-27 02:33:08 +08:00
< OpenIdentityPageButton
2018-10-09 15:27:52 +08:00
label = { localized ( 'Manage Billing' ) }
2017-09-27 02:33:08 +08:00
path = "/dashboard#billing"
source = "Preferences Billing"
campaign = "Dashboard"
/ >
2017-03-07 03:45:55 +08:00
< / div >
< / div >
2017-09-27 02:33:08 +08:00
) ;
2017-03-07 03:45:55 +08:00
}
2016-05-28 05:05:27 +08:00
render() {
2017-09-27 02:33:08 +08:00
const { identity } = this . state ;
2018-08-06 06:20:36 +08:00
const {
firstName ,
lastName ,
emailAddress ,
stripePlan = '' ,
stripePlanEffective = '' ,
} = identity ;
2016-06-03 09:56:03 +08:00
2019-03-05 03:03:12 +08:00
const logout = ( ) = > Actions . logoutMailspringIdentity ( ) ;
2016-06-14 03:06:37 +08:00
2016-05-28 05:05:27 +08:00
return (
< div className = "container-identity" >
< div className = "identity-content-box" >
2017-09-10 06:14:32 +08:00
< div className = "row padded" >
2016-05-28 05:05:27 +08:00
< div className = "identity-info" >
2017-09-26 14:50:12 +08:00
< RefreshButton / >
2017-09-27 02:33:08 +08:00
< div className = "name" >
{ firstName } { lastName }
< / div >
2017-08-01 11:20:01 +08:00
< div className = "email" > { emailAddress } < / div >
2016-05-28 05:05:27 +08:00
< div className = "identity-actions" >
2017-09-27 02:33:08 +08:00
< OpenIdentityPageButton
2018-10-09 15:27:52 +08:00
label = { localized ( 'Account Details' ) }
2017-09-27 02:33:08 +08:00
path = "/dashboard"
source = "Preferences"
campaign = "Dashboard"
/ >
< div className = "btn minor-width" onClick = { logout } >
2018-10-08 13:19:30 +08:00
{ localized ( 'Sign Out' ) }
2017-09-27 02:33:08 +08:00
< / div >
2016-05-28 05:05:27 +08:00
< / div >
< / div >
< / div >
2017-09-27 02:33:08 +08:00
{ stripePlan === 'Basic'
? this . _renderBasic ( )
: this . _renderPaidPlan ( stripePlan , stripePlanEffective ) }
2016-05-28 05:05:27 +08:00
< / div >
< / div >
) ;
}
}
export default PreferencesIdentity ;