2016-05-28 05:05:27 +08:00
import React from 'react' ;
2017-09-27 02:33:08 +08:00
import { Actions , IdentityStore } from 'nylas-exports' ;
import { OpenIdentityPageButton , BillingModal , RetinaImg } from 'nylas-component-kit' ;
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-09-27 02:33:08 +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-27 02:33:08 +08:00
You are using < strong > Mailspring Basic < / strong > . You can link up to four email accounts
and try out pro features like snooze , send later , read receipts and reminders . 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-27 02:33:08 +08:00
< div
className = "btn btn-emphasis"
onClick = { this . _onUpgrade }
style = { { verticalAlign : 'top' } }
>
< RetinaImg name = "ic-upgrade.png" mode = { RetinaImg . Mode . ContentIsMask } / > Upgrade to
Mailspring Pro
2017-09-26 14:50:12 +08:00
< / div >
< div className = "btn minor-width" onClick = { learnMore } >
Learn More
< / 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 && (
< 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-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 >
< div className = "subscription-actions" >
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 ;