2016-05-28 05:05:27 +08:00
import React from 'react' ;
import { Actions , IdentityStore } from 'nylas-exports' ;
2017-03-07 03:45:55 +08:00
import { OpenIdentityPageButton , BillingModal , RetinaImg } from 'nylas-component-kit' ;
2016-05-28 05:05:27 +08:00
import { shell } from 'electron' ;
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 ( {
component : (
< BillingModal source = "preferences" / >
) ,
2017-08-24 13:58:36 +08:00
width : BillingModal . IntrinsicWidth ,
height : BillingModal . IntrinsicHeight ,
2017-03-07 03:45:55 +08:00
} )
}
_renderBasic ( ) {
2017-09-06 04:37:40 +08:00
const learnMore = ( ) => shell . openExternal ( "https://getmailspring.com/pro" )
2017-03-07 03:45:55 +08:00
return (
< div className = "row padded" >
< div >
2017-09-06 04:37:40 +08:00
You are using < strong > Mailspring Basic < / strong > . Upgrade to Mailspring Pro to unlock a more powerful email experience .
2017-03-07 03:45:55 +08:00
< / div >
< div className = "subscription-actions" >
2017-09-06 04:37:40 +08:00
< div className = "btn btn-emphasis" onClick = { this . _onUpgrade } style = { { verticalAlign : "top" } } > Upgrade to Mailspring Pro < / div >
2017-03-07 03:45:55 +08:00
< div className = "btn minor-width" onClick = { learnMore } > Learn More < / div >
< / div >
< / div >
)
}
2017-09-02 13:49:10 +08:00
_renderPaidPlan ( planName , effectivePlanName ) {
const unpaidNote = ( effectivePlanName !== planName ) && (
2017-09-06 04:37:40 +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-02 13:49:10 +08:00
)
2017-03-07 03:45:55 +08:00
return (
< div className = "row padded" >
< div >
2017-09-06 04:37:40 +08:00
Thank you for using < strong style = { { textTransform : 'capitalize' } } > { ` Mailspring ${ planName } ` } < / strong > and supporting independent software .
2017-09-02 13:49:10 +08:00
{ unpaidNote }
2017-03-07 03:45:55 +08:00
< / div >
< div className = "subscription-actions" >
< OpenIdentityPageButton label = "Manage Billing" path = "/dashboard#billing" source = "Preferences Billing" campaign = "Dashboard" / >
< / div >
< / div >
)
}
2016-05-28 05:05:27 +08:00
render ( ) {
2017-01-15 09:40:54 +08:00
const { identity } = this . state ;
2017-09-02 13:49:10 +08:00
const { firstName , lastName , emailAddress , stripePlan , stripePlanEffective } = identity ;
2016-06-03 09:56:03 +08:00
2017-01-15 09:40:54 +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-03-07 03:45:55 +08:00
2016-05-28 05:05:27 +08:00
< div className = "row info-row" >
< div className = "logo" >
< RetinaImg
name = "prefs-identity-nylas-logo.png"
mode = { RetinaImg . Mode . ContentPreserve }
/ >
< / div >
< div className = "identity-info" >
2017-08-01 11:20:01 +08:00
< div className = "name" > { firstName } { lastName } < / div >
< div className = "email" > { emailAddress } < / div >
2016-05-28 05:05:27 +08:00
< div className = "identity-actions" >
2016-06-08 03:53:05 +08:00
< OpenIdentityPageButton label = "Account Details" path = "/dashboard" source = "Preferences" campaign = "Dashboard" / >
2017-03-07 03:45:55 +08:00
< div className = "btn minor-width" onClick = { logout } > Sign Out < / div >
2016-05-28 05:05:27 +08:00
< / div >
< / div >
< / div >
2017-09-02 13:49:10 +08:00
{ stripePlan === 'Basic' ? this . _renderBasic ( ) : this . _renderPaidPlan ( stripePlan , stripePlanEffective ) }
2016-05-28 05:05:27 +08:00
< / div >
< / div >
) ;
}
}
export default PreferencesIdentity ;