51 | Let's launch { this.state.site_title }
52 | What should visitors see on your homepage?
53 |
74 |
75 | );
76 | }
77 | } );
78 |
79 | module.exports = HomepageStep;
80 |
--------------------------------------------------------------------------------
/client/components/steps/jetpack-jumpstart.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react'),
2 | SkipButton = require('../skip-button'),
3 | SiteStore = require('stores/site-store'),
4 | SiteActions = require('actions/site-actions'),
5 | Paths = require('../../constants/jetpack-onboarding-paths'),
6 | ContentBox = require('../page/section'),
7 | WelcomeSection = require('../page/container'),
8 | SetupProgressActions = require('actions/setup-progress-actions'),
9 | SpinnerStore = require('stores/spinner-store'),
10 | Button = require('@automattic/dops-components/client/components/button');
11 |
12 | function getJetpackState() {
13 | return {
14 | site_title: SiteStore.getTitle(),
15 | jetpackConfigured: SiteStore.getJetpackConfigured(),
16 | jumpstartEnabled: SiteStore.getJetpackJumpstartEnabled(),
17 | modulesEnabled: SiteStore.getActiveModuleSlugs(),
18 | settingsUrl: SiteStore.getJetpackSettingsUrl()
19 | };
20 | }
21 |
22 | var JetpackJumpstart = React.createClass({
23 |
24 | componentDidMount: function() {
25 | SiteStore.addChangeListener( this._onChange );
26 | },
27 |
28 | componentWillUnmount: function() {
29 | SiteStore.removeChangeListener( this._onChange );
30 | },
31 |
32 | _onChange: function() {
33 | this.setState( getJetpackState() );
34 | },
35 |
36 | getInitialState: function() {
37 | var state = getJetpackState();
38 | state.showMoreModules = false;
39 | state.jetpackConnecting = false;
40 | return state;
41 | },
42 |
43 | handleJetpackConnect: function( event ) {
44 | event.preventDefault();
45 | this.setState( { jetpackConnecting: true } );
46 | SiteActions
47 | .configureJetpack( Paths.JETPACK_MODULES_STEP_SLUG )
48 | .always(function() {
49 | this.setState( { jetpackConnecting: false } );
50 | }.bind( this ) );
51 | },
52 |
53 | handleNext: function( event ) {
54 | event.preventDefault();
55 | SetupProgressActions.completeStepNoRecord( Paths.JETPACK_MODULES_STEP_SLUG );
56 | SetupProgressActions.selectNextStep();
57 | },
58 |
59 | handleSkip: function() {
60 | SetupProgressActions.skipStep();
61 | SetupProgressActions.selectNextStep();
62 | },
63 |
64 | render: function() {
65 | return (
66 |
67 | Let's launch your new website
68 |
69 | Connect your Jetpack profile to improve security, track stats, and grow traffic
70 |
71 | {
72 | this.state.jetpackConfigured
73 | ?
74 |
Congratulations! You've enabled Jetpack and unlocked dozens of powerful features.
75 |
Check out the settings page…
76 |
77 | Next Step
78 |
79 |
81 |
85 | { this.state.jetpackConnecting ? 'Connecting' : 'Connect' } to WordPress.com
86 |
87 | { ! this.state.jetpackConnecting &&
89 | }
90 |
91 |
Grow and Track Your Community
92 |
93 |
Jetpack provides Stats, insights and visitor information.
94 |
Use Jetpack tools like Publicize, Sharing, Subscribing and Related Posts to increase traffic, and onsite engagement.
95 |
97 |
Increase Security and Site Speed
98 |
99 |
Gain peace of mind with Protect, the tool that has blocked billions of login attacks on millions of sites.
100 |
Photon utilizes the state-of-the-art WordPress.com content delivery network to load your gorgeous images super fast optimized for any device, and it’s completely free.
101 |
103 | );
104 | }
105 | });
106 |
107 | module.exports = JetpackJumpstart;
108 |
--------------------------------------------------------------------------------
/client/components/steps/layout.jsx:
--------------------------------------------------------------------------------
1 | var React = require( 'react' ),
2 | SiteStore = require( 'stores/site-store' ),
3 | Button = require( '@automattic/dops-components/client/components/button' ),
4 | WelcomeSection = require( '../page/container' ),
5 | SetupProgressActions = require( 'actions/setup-progress-actions' );
6 |
7 | function getSiteLayoutState() {
8 | return {
9 | site_title: SiteStore.getTitle(),
10 | layout: SiteStore.getLayout()
11 | };
12 | }
13 |
14 | var LayoutStep = React.createClass({
15 |
16 | componentDidMount: function() {
17 | SiteStore.addChangeListener( this._onChange );
18 | },
19 |
20 | componentWillUnmount: function() {
21 | SiteStore.removeChangeListener( this._onChange );
22 | },
23 |
24 | _onChange: function() {
25 | this.setState( getSiteLayoutState() );
26 | },
27 |
28 | getInitialState: function() {
29 | return getSiteLayoutState();
30 | },
31 |
32 | handleIsBlog: function(){
33 | SetupProgressActions.confirmHomepageStep();
34 | },
35 |
36 | handleNotBlog: function(){
37 | SetupProgressActions.submitLayoutStep( 'website' );
38 | },
39 |
40 | render: function() {
41 | return (
42 | 
111 | { this.state.spinnerMessage }
112 |