2016-05-28 05:05:27 +08:00
import React from 'react' ;
2017-09-27 02:42:18 +08:00
import { Actions , IdentityStore } 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
2017-09-26 14:50:12 +08:00
class RefreshButton extends React . Component {
constructor ( props ) {
super ( props ) ;
2017-09-27 02:33:08 +08:00
this . state = { refreshing : 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
}
}
2016-05-28 05:05:27 +08:00
class PreferencesIdentity extends React . Component {
static displayName = 'PreferencesIdentity' ;
constructor ( ) {
super ( ) ;
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" >
You are using < strong > Mailspring Basic < / strong > , which is free ! You can link up to four
email accounts and try pro features like snooze , send later , read receipts and reminders
2017-11-08 03:44:13 +08:00
a few times a week . { ' ' }
< span className = "platform-linux-only" >
Mailspring is independent { ' ' }
< a href = "https://github.com/Foundry376/Mailspring/" > open source < / a > software , and
subscription revenue allows us spend time maintaining and improving the product .
< / span >
2017-11-07 22:59:56 +08:00
< br / >
< br / >
2017-11-08 03:44:13 +08:00
Upgrade to < a onClick = { onLearnMore } > Mailspring Pro < / a > to use all these great features
2017-11-07 22:59:56 +08:00
permanently :
< div className = "features" >
< ul >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
/ > R i c h c o n t a c t p r o f i l e s
< / li >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
/ > F o l l o w - u p r e m i n d e r s
< / li >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
/ > R e a d r e c e i p t s
< / li >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
/ > L i n k t r a c k i n g
< / li >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
/ > P o w e r f u l t e m p l a t e s u p p o r t
< / li >
< / ul >
< ul >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
/ > S e n d l a t e r
< / li >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
/ > C o m p a n y o v e r v i e w s
< / li >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
/ > S n o o z e m e s s a g e s
< / li >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
/ > M a i l b o x i n s i g h t s
< / li >
< li >
< RetinaImg
name = "pro-feature-checkmark.png"
style = { { paddingRight : 8 } }
mode = { RetinaImg . Mode . ContentDark }
/ > . . . a n d m u c h m o r e !
< / 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 >
< div className = "period" > monthly < / div >
< / div >
< div
className = "btn btn-emphasis"
onClick = { this . _onUpgrade }
style = { { verticalAlign : 'top' } }
>
< RetinaImg name = "ic-upgrade.png" mode = { RetinaImg . Mode . ContentIsMask } / > Get Mailspring
Pro
< / 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 ) {
2017-09-27 02:33:08 +08:00
const unpaidNote = effectivePlanName !== planName && (
2017-11-10 18:34:10 +08:00
< p >
{ ` Note: Due to issues with your most recent payment, you've been temporarily downgraded to Mailspring ${ effectivePlanName } . Click 'Billing' below to correct the issue. ` }
< / p >
2017-09-27 02:33:08 +08:00
) ;
2017-03-07 03:45:55 +08:00
return (
< div className = "row padded" >
< div >
2017-09-27 02:33:08 +08:00
Thank you for using { ' ' }
< strong style = { { textTransform : 'capitalize' } } > { ` Mailspring ${ planName } ` } < / strong > and
supporting independent software .
{ unpaidNote }
2017-03-07 03:45:55 +08:00
< / div >
2017-11-10 18:34:10 +08:00
< div style = { { paddingTop : 15 } } >
2017-09-27 02:33:08 +08:00
< OpenIdentityPageButton
label = "Manage Billing"
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 ;
const { firstName , lastName , emailAddress , stripePlan , stripePlanEffective } = identity ;
2016-06-03 09:56:03 +08:00
2017-09-27 02:33:08 +08:00
const logout = ( ) => Actions . logoutNylasIdentity ( ) ;
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
label = "Account Details"
path = "/dashboard"
source = "Preferences"
campaign = "Dashboard"
/ >
< div className = "btn minor-width" onClick = { logout } >
Sign Out
< / 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 ;