2018-10-07 14:27:27 +08:00
import { localized , React } from 'mailspring-exports' ;
2019-03-05 03:03:12 +08:00
import * as OnboardingActions from './onboarding-actions' ;
2016-05-28 05:05:27 +08:00
const Steps = [
{
seen : false ,
2016-06-02 06:55:21 +08:00
id : 'people' ,
2018-10-07 14:27:27 +08:00
title : localized ( 'Compose with context' ) ,
2016-05-28 05:05:27 +08:00
image : 'feature-people@2x.png' ,
2018-10-07 14:27:27 +08:00
description : localized (
'Mailspring shows you everything about your contacts right inside your inbox. See LinkedIn profiles, Twitter bios, message history, and more.'
) ,
2016-06-09 05:05:18 +08:00
x : 96.6 ,
y : 1.3 ,
xDot : 93.5 ,
yDot : 5.4 ,
2016-05-28 05:05:27 +08:00
} ,
{
seen : false ,
2016-06-09 05:10:09 +08:00
id : 'activity' ,
2018-10-07 14:27:27 +08:00
title : localized ( 'Track opens and clicks' ) ,
2016-06-09 05:10:09 +08:00
image : 'feature-activity@2x.png' ,
2018-10-07 14:27:27 +08:00
description : localized (
'With activity tracking, you’ ll know as soon as someone reads your message. Sending to a group? Mailspring shows you which recipients opened your email so you can follow up with precision.'
) ,
2016-06-09 05:05:18 +08:00
x : 12.8 ,
y : 1 ,
xDot : 15 ,
yDot : 5.1 ,
2016-05-28 05:05:27 +08:00
} ,
2017-02-03 04:17:25 +08:00
{
seen : false ,
id : 'snooze' ,
2018-10-07 14:27:27 +08:00
title : localized ( 'Send on your own schedule' ) ,
2017-02-03 04:17:25 +08:00
image : 'feature-snooze@2x.png' ,
2018-10-07 14:27:27 +08:00
description : localized (
'Snooze emails to return at any time that suits you. Schedule messages to send at the ideal time. Mailspring makes it easy to control the fabric of spacetime!'
) ,
2017-02-03 04:17:25 +08:00
x : 5.5 ,
y : 23.3 ,
xDot : 10 ,
yDot : 25.9 ,
} ,
2017-01-07 07:37:45 +08:00
// {
// seen: false,
// id: 'composer',
// title: 'Eliminate hacky extensions',
// image: 'feature-composer@2x.png',
2017-09-06 04:37:40 +08:00
// description: "Embed calendar invitations, propose meeting times, use quick reply templates, send mass emails with mail merge, and more—all directly from Mailspring’ s powerful composer.",
2017-01-07 07:37:45 +08:00
// x: 60.95,
// y: 66,
// xDot: 60.3,
// yDot: 65.0,
// },
2016-05-28 05:05:27 +08:00
] ;
2019-03-05 03:03:12 +08:00
export default class TutorialPage extends React . Component <
{ } ,
{ appeared : boolean ; seen : any [ ] ; current : any }
> {
2017-09-27 02:33:08 +08:00
static displayName = 'TutorialPage' ;
2016-05-28 05:05:27 +08:00
2019-03-05 03:03:12 +08:00
_timer : NodeJS.Timeout ;
2016-05-28 05:05:27 +08:00
constructor ( props ) {
super ( props ) ;
this . state = {
appeared : false ,
seen : [ ] ,
current : Steps [ 0 ] ,
2017-09-27 02:33:08 +08:00
} ;
2016-05-28 05:05:27 +08:00
}
componentDidMount() {
this . _timer = setTimeout ( ( ) = > {
2017-09-27 02:33:08 +08:00
this . setState ( { appeared : true } ) ;
2016-05-28 05:05:27 +08:00
} , 200 ) ;
}
componentWillUnmount() {
clearTimeout ( this . _timer ) ;
}
_onBack = ( ) = > {
const nextItem = this . state . seen . pop ( ) ;
if ( ! nextItem ) {
OnboardingActions . moveToPreviousPage ( ) ;
} else {
2017-09-27 02:33:08 +08:00
this . setState ( { current : nextItem } ) ;
2016-05-28 05:05:27 +08:00
}
2017-09-27 02:33:08 +08:00
} ;
2016-05-28 05:05:27 +08:00
_onNextUnseen = ( ) = > {
2019-06-11 13:46:17 +08:00
const nextSeen = [ . . . this . state . seen , this . state . current ] ;
2016-05-28 05:05:27 +08:00
const nextItem = Steps . find ( s = > ! nextSeen . includes ( s ) ) ;
if ( nextItem ) {
2017-09-27 02:33:08 +08:00
this . setState ( { current : nextItem , seen : nextSeen } ) ;
2016-05-28 05:05:27 +08:00
} else {
OnboardingActions . moveToPage ( 'authenticate' ) ;
}
2017-09-27 02:33:08 +08:00
} ;
2016-05-28 05:05:27 +08:00
2017-09-27 02:33:08 +08:00
_onMouseOverOverlay = event = > {
2016-05-28 05:05:27 +08:00
const item = Steps . find ( i = > i . id === event . target . id ) ;
if ( item ) {
if ( ! this . state . seen . includes ( item ) ) {
this . state . seen . push ( item ) ;
}
2017-09-27 02:33:08 +08:00
this . setState ( { current : item } ) ;
2016-05-28 05:05:27 +08:00
}
2017-09-27 02:33:08 +08:00
} ;
2016-05-28 05:05:27 +08:00
render() {
2017-09-27 02:33:08 +08:00
const { current , seen , appeared } = this . state ;
2016-05-28 05:05:27 +08:00
return (
< div className = { ` page tutorial appeared- ${ appeared } ` } >
< div className = "tutorial-container" >
< div className = "left" >
< div className = "screenshot" >
2017-09-27 02:33:08 +08:00
{ Steps . map ( step = > (
2016-05-28 05:05:27 +08:00
< div
key = { step . id }
id = { step . id }
2018-01-25 06:13:08 +08:00
className = { ` overlay ${ seen . includes ( step ) ? 'seen' : '' } ${
current === step ? 'expanded' : ''
} ` }
2017-09-27 02:33:08 +08:00
style = { { left : ` ${ step . xDot } % ` , top : ` ${ step . yDot } % ` } }
2016-05-28 05:05:27 +08:00
onMouseOver = { this . _onMouseOverOverlay }
>
< div
className = "overlay-content"
2017-09-27 02:33:08 +08:00
style = { { backgroundPosition : ` ${ step . x } % ${ step . y } % ` } }
2016-10-18 08:59:33 +08:00
/ >
2016-05-28 05:05:27 +08:00
< / div >
2017-09-27 02:33:08 +08:00
) ) }
2016-05-28 05:05:27 +08:00
< / div >
< / div >
< div className = "right" >
2017-09-27 02:33:08 +08:00
< img
src = { ` mailspring://onboarding/assets/ ${ current . image } ` }
style = { { zoom : 0.5 , margin : 'auto' } }
alt = ""
/ >
2016-05-28 05:05:27 +08:00
< h2 > { current . title } < / h2 >
< p > { current . description } < / p >
< / div >
< / div >
< div className = "footer" >
< button key = "prev" className = "btn btn-large btn-prev" onClick = { this . _onBack } >
2018-10-07 14:27:27 +08:00
{ localized ( 'Back' ) }
2016-05-28 05:05:27 +08:00
< / button >
< button key = "next" className = "btn btn-large btn-next" onClick = { this . _onNextUnseen } >
2018-10-07 14:27:27 +08:00
{ seen . length < Steps . length ? localized ( 'Next' ) : localized ( 'Get Started' ) }
2016-05-28 05:05:27 +08:00
< / button >
< / div >
< / div >
) ;
}
}