Elementor Website Builder – more than just a page builder / 3.8.0-beta1

Elementor Website Builder – more than just a page builder v3.8.0-beta1

elementor / app / modules / onboarding / assets / js / pages / hello-theme.js

hello-theme.js in Elementor Website Builder – more than just a page builder 3.8.0-beta1, at app/modules/onboarding/assets/js/pages/hello-theme.js

287 lines 7.8 KB

Raw Download Zip

1	/* eslint-disable @wordpress/i18n-ellipsis */
2	import { useContext, useEffect, useState, useCallback } from 'react';
3	import { OnboardingContext } from '../context/context';
4	import { useNavigate } from '@reach/router';
5	import useAjax from 'elementor-app/hooks/use-ajax';
6	import Layout from '../components/layout/layout';
7	import PageContentLayout from '../components/layout/page-content-layout';
8
9	export default function HelloTheme() {
10	const { state, updateState, getStateObjectToUpdate } = useContext( OnboardingContext ),
11	{ ajaxState: activateHelloThemeAjaxState, setAjax: setActivateHelloThemeAjaxState } = useAjax(),
12	// Allow navigating back to this screen if it was completed in the onboarding.
13	[ helloInstalledInOnboarding, setHelloInstalledInOnboarding ] = useState( false ),
14	[ isInstalling, setIsInstalling ] = useState( false ),
15	noticeStateSuccess = {
16	type: 'success',
17	icon: 'eicon-check-circle-o',
18	message: __( 'Your site’s got Hello theme. High-five!', 'elementor' ),
19	},
20	[ noticeState, setNoticeState ] = useState( state.isHelloThemeActivated ? noticeStateSuccess : null ),
21	[ activeTimeouts, setActiveTimeouts ] = useState( [] ),
22	continueWithHelloThemeText = state.isHelloThemeActivated ? __( 'Next', 'elementor' ) : __( 'Continue with Hello Theme', 'elementor' ),
23	[ actionButtonText, setActionButtonText ] = useState( continueWithHelloThemeText ),
24	navigate = useNavigate(),
25	pageId = 'hello',
26	nextStep = 'siteName',
27	goToNextScreen = () => navigate( 'onboarding/' + nextStep );
28
29	/**
30	* Setup
31	*
32	* If Hello Theme is already activated when onboarding starts, This screen is unneeded and is marked as 'completed'
33	* and skipped.
34	*/
35	useEffect( () => {
36	if ( ! helloInstalledInOnboarding && state.isHelloThemeActivated ) {
37	const stateToUpdate = getStateObjectToUpdate( state, 'steps', pageId, 'completed' );
38
39	updateState( stateToUpdate );
40
41	goToNextScreen();
42	}
43	}, [] );
44
45	const resetScreenContent = () => {
46	// Clear any active timeouts for changing the action button text during installation.
47	activeTimeouts.forEach( ( timeoutID ) => clearTimeout( timeoutID ) );
48
49	setActiveTimeouts( [] );
50
51	setIsInstalling( false );
52
53	setActionButtonText( continueWithHelloThemeText );
54	};
55
56	/**
57	* Callbacks
58	*/
59	const onHelloThemeActivationSuccess = useCallback( () => {
60	setIsInstalling( false );
61
62	elementorCommon.events.dispatchEvent( {
63	event: 'indication prompt',
64	version: '',
65	details: {
66	placement: elementorAppConfig.onboarding.eventPlacement,
67	step: state.currentStep,
68	action_state: 'success',
69	action: 'hello theme activation',
70	},
71	} );
72
73	setNoticeState( noticeStateSuccess );
74
75	setActionButtonText( __( 'Next', 'elementor' ) );
76
77	const stateToUpdate = getStateObjectToUpdate( state, 'steps', pageId, 'completed' );
78
79	stateToUpdate.isHelloThemeActivated = true;
80
81	updateState( stateToUpdate );
82
83	setHelloInstalledInOnboarding( true );
84
85	goToNextScreen();
86	}, [] );
87
88	const onErrorInstallHelloTheme = () => {
89	elementorCommon.events.dispatchEvent( {
90	event: 'indication prompt',
91	version: '',
92	details: {
93	placement: elementorAppConfig.onboarding.eventPlacement,
94	step: state.currentStep,
95	action_state: 'failure',
96	action: 'hello theme install',
97	},
98	} );
99
100	setNoticeState( {
101	type: 'error',
102	icon: 'eicon-warning',
103	message: __( 'There was a problem installing Hello Theme.', 'elementor' ),
104	} );
105
106	resetScreenContent();
107	};
108
109	const activateHelloTheme = () => {
110	setIsInstalling( true );
111
112	updateState( { isHelloThemeInstalled: true } );
113
114	setActivateHelloThemeAjaxState( {
115	data: { action: 'elementor_activate_hello_theme' },
116	} );
117	};
118
119	const installHelloTheme = () => {
120	if ( ! isInstalling ) {
121	setIsInstalling( true );
122	}
123
124	wp.updates.ajax( 'install-theme', {
125	slug: 'hello-elementor',
126	success: () => activateHelloTheme(),
127	error: () => onErrorInstallHelloTheme(),
128	} );
129	};
130
131	const sendNextButtonEvent = () => {
132	elementorCommon.events.dispatchEvent( {
133	event: 'next',
134	version: '',
135	details: {
136	placement: elementorAppConfig.onboarding.eventPlacement,
137	step: state.currentStep,
138	},
139	} );
140	};
141
142	/**
143	* Action Button
144	*/
145	const actionButton = {
146	text: actionButtonText,
147	role: 'button',
148	};
149
150	if ( isInstalling ) {
151	actionButton.className = 'e-onboarding__button--processing';
152	}
153
154	if ( state.isHelloThemeActivated ) {
155	actionButton.onClick = () => {
156	sendNextButtonEvent();
157
158	goToNextScreen();
159	};
160	} else {
161	actionButton.onClick = () => {
162	sendNextButtonEvent();
163
164	if ( state.isHelloThemeInstalled && ! state.isHelloThemeActivated ) {
165	activateHelloTheme();
166	} else if ( ! state.isHelloThemeInstalled ) {
167	installHelloTheme();
168	} else {
169	goToNextScreen();
170	}
171	};
172	}
173
174	/**
175	* Skip Button
176	*/
177	let skipButton;
178
179	if ( 'completed' !== state.steps[ pageId ] ) {
180	skipButton = {
181	text: __( 'Skip', 'elementor' ),
182	};
183	}
184
185	/**
186	* Set timeouts for updating the 'Next' button text if the Hello Theme installation is taking too long.
187	*/
188	useEffect( () => {
189	if ( isInstalling ) {
190	setActionButtonText( (
191	<>
192	<i className="eicon-loading eicon-animation-spin" aria-hidden="true" />
193	</>
194	) );
195	}
196
197	const actionTextTimeouts = [];
198
199	const timeout4 = setTimeout( () => {
200	if ( ! isInstalling ) {
201	return;
202	}
203
204	setActionButtonText( (
205	<>
206	<i className="eicon-loading eicon-animation-spin" aria-hidden="true" />
207	<span className="e-onboarding__action-button-text">{ __( 'Hold on, this can take a minute...', 'elementor' ) }</span>
208	</>
209	) );
210	}, 4000 );
211
212	actionTextTimeouts.push( timeout4 );
213
214	const timeout30 = setTimeout( () => {
215	if ( ! isInstalling ) {
216	return;
217	}
218
219	setActionButtonText( (
220	<>
221	<i className="eicon-loading eicon-animation-spin" aria-hidden="true" />
222	<span className="e-onboarding__action-button-text">{ __( 'Okay, now we\'re really close...', 'elementor' ) }</span>
223	</>
224	) );
225	}, 30000 );
226
227	actionTextTimeouts.push( timeout30 );
228
229	setActiveTimeouts( actionTextTimeouts );
230	}, [ isInstalling ] );
231
232	useEffect( () => {
233	if ( 'initial' !== activateHelloThemeAjaxState.status ) {
234	if ( 'success' === activateHelloThemeAjaxState.status && activateHelloThemeAjaxState.response?.helloThemeActivated ) {
235	onHelloThemeActivationSuccess();
236	} else if ( 'error' === activateHelloThemeAjaxState.status ) {
237	elementorCommon.events.dispatchEvent( {
238	event: 'indication prompt',
239	version: '',
240	details: {
241	placement: elementorAppConfig.onboarding.eventPlacement,
242	step: state.currentStep,
243	action_state: 'failure',
244	action: 'hello theme activation',
245	},
246	} );
247
248	setNoticeState( {
249	type: 'error',
250	icon: 'eicon-warning',
251	message: __( 'There was a problem activating Hello Theme.', 'elementor' ),
252	} );
253
254	// Clear any active timeouts for changing the action button text during installation.
255	resetScreenContent();
256	}
257	}
258	}, [ activateHelloThemeAjaxState.status ] );
259
260	return (
261	<Layout pageId={ pageId } nextStep={ nextStep }>
262	<PageContentLayout
263	image={ elementorCommon.config.urls.assets + 'images/app/onboarding/Illustration_Hello.svg' }
264	title={ __( 'Every site starts with a theme.', 'elementor' ) }
265	actionButton={ actionButton }
266	skipButton={ skipButton }
267	noticeState={ noticeState }
268	>
269	<p>
270	{ __( 'Hello is Elementor\'s official blank canvas theme optimized to build your website exactly the way you want.', 'elementor' ) }
271	</p>
272	<p>
273	{ __( 'Here\'s why:', 'elementor' ) }
274	</p>
275	<ul className="e-onboarding__feature-list">
276	<li>{ __( 'Light-weight and fast loading', 'elementor' ) }</li>
277	<li>{ __( 'Great for SEO', 'elementor' ) }</li>
278	<li>{ __( 'Already being used by 1M+ web creators', 'elementor' ) }</li>
279	</ul>
280	</PageContentLayout>
281	<div className="e-onboarding__footnote">
282	{ '* ' + __( 'You can switch your theme later on', 'elementor' ) }
283	</div>
284	</Layout>
285	);
286	}
287