class.jetpack-connection-banner.php — Jetpack – WP Security, Backup, Speed, & Growth 11.1.1

jetpack / class.jetpack-connection-banner.php

jetpack Last commit date

class.jetpack-connection-banner.php

522 lines

1	<?php // phpcs:ignore WordPress.Files.FileName.InvalidClassFileName
2	/**
3	* Jetpack connection banner.
4	*
5	* @package automattic/jetpack
6	*/
7
8	use Automattic\Jetpack\Assets;
9	use Automattic\Jetpack\Assets\Logo;
10	use Automattic\Jetpack\Licensing;
11	use Automattic\Jetpack\Redirect;
12
13	/**
14	* Jetpack connection banner.
15	*/
16	class Jetpack_Connection_Banner {
17	/**
18	* Static instance.
19	*
20	* @var Jetpack_Connection_Banner
21	*/
22	private static $instance = null;
23
24	/**
25	* Initialize and fetch the static instance.
26	*
27	* @return self
28	*/
29	public static function init() {
30	if ( self::$instance === null ) {
31	self::$instance = new Jetpack_Connection_Banner();
32	}
33
34	return self::$instance;
35	}
36
37	/**
38	* Jetpack_Connection_Banner constructor.
39	*
40	* Since we call the Jetpack_Connection_Banner:init() method from the `Jetpack` class, and after
41	* the admin_init action fires, we know that the admin is initialized at this point.
42	*/
43	private function __construct() {
44	add_action( 'current_screen', array( $this, 'maybe_initialize_hooks' ) );
45	}
46
47	/**
48	* The banner is forcibly displayed.
49	*
50	* @return bool
51	*/
52	public static function force_display() {
53	/**
54	* This is an experiment for partners to test. Allow customization of the behavior of pre-connection banners.
55	*
56	* @since 8.6.0
57	*
58	* @param bool $always_show_prompt Should this prompt always appear? Default to false.
59	*/
60	return apply_filters( 'jetpack_pre_connection_prompt_helpers', false );
61	}
62
63	/**
64	* Can the banner be displayed for the given screen?
65	*
66	* @param \WP_Screen $current_screen Current WordPress screen.
67	*
68	* @return bool
69	*/
70	public static function can_be_displayed( $current_screen ) {
71	$has_connected_owner = Jetpack::connection()->has_connected_owner();
72	$is_connected = Jetpack::is_connection_ready();
73	$has_licenses = ! empty( Licensing::instance()->stored_licenses() );
74
75	// Don't show the connect notice if the site has a connected owner.
76	if ( $has_connected_owner ) {
77	return false;
78	}
79
80	// Don't show the connect notice if a site connection is established and there are no stored licenses.
81	// Stored licenses indicate that a purchased product may not be provisioned yet hence we need to keep
82	// showing the notice to nudge the user to connect in order to have their product(s) provisioned.
83	if ( $is_connected && ! $has_licenses ) {
84	return false;
85	}
86
87	// Kill if banner has been dismissed and the pre-connection helpers filter is not set.
88	if (
89	Jetpack_Options::get_option( 'dismissed_connection_banner' ) &&
90	! self::force_display()
91	) {
92	return false;
93	}
94
95	// Don't show the connect notice anywhere but the plugins.php after activating.
96	if ( 'plugins' !== $current_screen->base && 'dashboard' !== $current_screen->base ) {
97	return false;
98	}
99
100	if ( ! current_user_can( 'jetpack_connect' ) ) {
101	return false;
102	}
103
104	return true;
105	}
106
107	/**
108	* Given a string for the the banner was added, and an int that represents the slide to
109	* a URL for, this function returns a connection URL with a from parameter that will
110	* support split testing.
111	*
112	* @since 7.2 Event key format is now banner-connect-banner-72-dashboard or connect-banner-72-plugins.
113	* The param $slide_num was removed since we removed all slides but the first one.
114	* @since 4.4.0
115	*
116	* @param string $jp_version_banner_added A short version of when the banner was added. Ex. 44.
117	* @return string
118	*/
119	public function build_connect_url_for_slide( $jp_version_banner_added ) {
120	global $current_screen;
121	$url = Jetpack::init()->build_connect_url(
122	true,
123	false,
124	sprintf( 'connect-banner-%s-%s', $jp_version_banner_added, $current_screen->base )
125	);
126	return add_query_arg( 'auth_approved', 'true', $url );
127	}
128
129	/**
130	* Will initialize hooks to display the new (as of 4.4) connection banner if the current user can
131	* connect Jetpack, if Jetpack has not been deactivated, and if the current page is the plugins or dashboard page.
132	*
133	* @since 4.4.0
134	* @since 4.5.0 Made the new (as of 4.4) connection banner display to everyone by default.
135	* @since 5.3.0 Running another split test between 4.4 banner and a new one in 5.3.
136	* @since 7.2 B test was removed.
137	* @since 9.7 Moved the connection condition checking to this method to fulfill Licensing requirements.
138	*
139	* @param \WP_Screen $current_screen Current WordPress screen.
140	*/
141	public function maybe_initialize_hooks( $current_screen ) {
142	if ( ! self::can_be_displayed( $current_screen ) ) {
143	return;
144	}
145
146	if ( ! empty( Licensing::instance()->stored_licenses() ) ) {
147	add_action( 'admin_notices', array( $this, 'render_license_aware_banner' ) );
148	} else {
149	add_action( 'admin_notices', array( $this, 'render_banner' ) );
150	}
151
152	add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_banner_scripts' ) );
153	add_action( 'admin_print_styles', array( $this, 'admin_banner_styles' ) );
154	add_action( 'admin_print_styles', array( Jetpack::init(), 'admin_banner_styles' ) ); // For the legacy full screen banner
155
156	if ( Jetpack::state( 'network_nag' ) ) {
157	add_action( 'network_admin_notices', array( $this, 'network_connect_notice' ) );
158	}
159
160	// Only fires immediately after plugin activation.
161	if ( get_transient( 'activated_jetpack' ) ) {
162	if (
163	! \Jetpack_Options::get_option( 'has_seen_wc_connection_modal', false )
164	&& in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', Jetpack::get_active_plugins() ), true )
165	) {
166	wp_safe_redirect( Jetpack::admin_url( 'page=jetpack#/woo-setup' ) );
167	} else {
168	add_action( 'admin_notices', array( $this, 'render_connect_prompt_full_screen' ) );
169	}
170	delete_transient( 'activated_jetpack' );
171	}
172	}
173
174	/**
175	* Include the needed styles
176	*/
177	public function admin_banner_styles() {
178	wp_enqueue_style(
179	'jetpack-connection-banner',
180	Assets::get_file_url_for_environment(
181	'css/jetpack-connection-banner.min.css',
182	'css/jetpack-connection-banner.css'
183	),
184	array(),
185	JETPACK__VERSION
186	);
187	}
188
189	/**
190	* Enqueues JavaScript for new connection banner.
191	*
192	* @since 4.4.0
193	*/
194	public static function enqueue_banner_scripts() {
195	wp_enqueue_script(
196	'jetpack-connection-banner-js',
197	Assets::get_file_url_for_environment(
198	'_inc/build/jetpack-connection-banner.min.js',
199	'_inc/jetpack-connection-banner.js'
200	),
201	array( 'jquery' ),
202	JETPACK__VERSION,
203	true
204	);
205
206	wp_localize_script(
207	'jetpack-connection-banner-js',
208	'jp_banner',
209	array(
210	'ajax_url' => admin_url( 'admin-ajax.php' ),
211	'connectionBannerNonce' => wp_create_nonce( 'jp-connection-banner-nonce' ),
212	)
213	);
214	}
215
216	/**
217	* Enqueues JavaScript and CSS for the connection button.
218	*
219	* @since 7.7
220	*/
221	public static function enqueue_connect_button_scripts() {
222	wp_enqueue_script(
223	'jetpack-connect-button',
224	Assets::get_file_url_for_environment(
225	'_inc/build/connect-button.min.js',
226	'_inc/connect-button.js'
227	),
228	array( 'jquery' ),
229	JETPACK__VERSION,
230	true
231	);
232
233	wp_enqueue_style(
234	'jetpack-connect-button',
235	Assets::get_file_url_for_environment(
236	'css/jetpack-connect.min.css',
237	'css/jetpack-connect.css'
238	),
239	array(),
240	JETPACK__VERSION
241	);
242
243	$jetpack_api_url = wp_parse_url( Jetpack::connection()->api_url( '' ) );
244
245	$tracking = new Automattic\Jetpack\Tracking();
246	$identity = $tracking->tracks_get_identity( get_current_user_id() );
247
248	wp_localize_script(
249	'jetpack-connect-button',
250	'jpConnect',
251	array(
252	'apiBaseUrl' => esc_url_raw( rest_url( 'jetpack/v4' ) ),
253	'registrationNonce' => wp_create_nonce( 'jetpack-registration-nonce' ),
254	'apiNonce' => wp_create_nonce( 'wp_rest' ),
255	'apiSiteDataNonce' => wp_create_nonce( 'wp_rest' ),
256	'buttonTextRegistering' => __( 'Loading...', 'jetpack' ),
257	'jetpackApiDomain' => $jetpack_api_url['scheme'] . '://' . $jetpack_api_url['host'],
258	'connectInPlaceUrl' => Jetpack::admin_url( 'page=jetpack#/setup' ),
259	'dashboardUrl' => Jetpack::admin_url( 'page=jetpack#/dashboard' ),
260	'plansPromptUrl' => Redirect::get_url( 'jetpack-connect-plans' ),
261	'identity' => $identity,
262	'preFetchScript' => plugins_url( '_inc/build/admin.js', JETPACK__PLUGIN_FILE ) . '?ver=' . JETPACK__VERSION,
263	)
264	);
265	}
266
267	/**
268	* Renders the new connection banner as of 4.4.0.
269	*
270	* @since 4.4.0
271	* @since 7.2 Copy and visual elements reduced to show the new focus of Jetpack on Security and Performance.
272	* @since 11.1 Adjusted the banner to Emerald style
273	*/
274	public function render_banner() {
275	$jetpack_logo = new Logo();
276	?>
277	<div class="jp-connection-banner">
278	<div class="jp-connection-banner__container-top-text">
279	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="0" fill="none" width="24" height="24"/><g><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 15h-2v-2h2v2zm0-4h-2l-.5-6h3l-.5 6z"/></g></svg>
280	<span>
281	<?php esc_html_e( 'You’re almost done. Set up Jetpack to enable powerful security and performance tools for WordPress.', 'jetpack' ); ?>
282	</span>
283	</div>
284	<?php
285	if ( ! $this->force_display() ) :
286	?>
287	<span
288	class="notice-dismiss jp-connection-banner__dismiss"
289	title="<?php esc_attr_e( 'Dismiss this notice', 'jetpack' ); ?>">
290	</span>
291
292	<?php
293	endif;
294	?>
295	<div class="jp-connection-banner__inner">
296	<div class="jp-connection-banner__content">
297	<div class="jp-connection-banner__logo">
298	<?php echo $jetpack_logo->get_jp_emblem_larger(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
299	</div>
300	<h2 class="jp-connection-banner__title"><?php esc_html_e( 'Simplify your site security and performance with Jetpack', 'jetpack' ); ?></h2>
301	<div class="jp-connection-banner__columns">
302	<div class="jp-connection-banner__text"><?php esc_html_e( 'Jetpack provides easy-to-use, comprehensive WordPress site security and backups, so you can focus on running your business.', 'jetpack' ); ?></div>
303	<div class="jp-connection-banner__text"><?php esc_html_e( 'Jetpack’s performance features make your site lightning-fast, while also improving your SEO and giving your visitors a better experience.', 'jetpack' ); ?></div>
304	</div>
305	<div class="jp-connection-banner__footer">
306	<div class="jp-connection-banner__text jp-connection-banner__text--caption"><?php jetpack_render_tos_blurb(); ?></div>
307	<a id="jp-connect-button--alt" href="<?php echo esc_url( $this->build_connect_url_for_slide( '111' ) ); ?>" class="jp-banner-cta-button">
308	<?php esc_html_e( 'Set up Jetpack', 'jetpack' ); ?>
309	</a>
310	</div>
311	</div>
312	<div class="jp-connection-banner__image-container">
313	<img class="jp-connection-banner__image-background" src="<?php echo esc_url( plugins_url( 'images/jetpack-connection-banner-background.svg', JETPACK__PLUGIN_FILE ) ); ?>" />
314	<picture>
315	<source
316	type="image/webp"
317	srcset="<?php echo esc_url( plugins_url( 'images/jetpack-connection-image.webp', JETPACK__PLUGIN_FILE ) ); ?> 1x, <?php echo esc_url( plugins_url( 'images/jetpack-connection-image-2x.webp', JETPACK__PLUGIN_FILE ) ); ?> 2x">
318	<img
319	class="jp-connection-banner__image"
320	srcset="<?php echo esc_url( plugins_url( 'images/jetpack-connection-image.png', JETPACK__PLUGIN_FILE ) ); ?> 1x, <?php echo esc_url( plugins_url( 'images/jetpack-connection-image-2x.png', JETPACK__PLUGIN_FILE ) ); ?> 2x"
321	src="<?php echo esc_url( plugins_url( 'images/jetpack-connection-image.png', JETPACK__PLUGIN_FILE ) ); ?>"
322	alt="">
323	</picture>
324	</div>
325	</div>
326	</div>
327	<?php
328	}
329
330	/**
331	* Renders the license-away version of the connection banner.
332	*
333	* @since 9.0.0
334	* @since 11.1 Adjusted the banner to Emerald style
335	*/
336	public function render_license_aware_banner() {
337	$jetpack_logo = new Logo();
338	?>
339	<div class="jp-connection-banner">
340	<div class="jp-connection-banner__inner">
341	<div class="jp-connection-banner__content">
342	<div class="jp-connection-banner__logo">
343	<?php echo $jetpack_logo->get_jp_emblem_larger(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
344	</div>
345	<h2 class="jp-connection-banner__title jp-connection-banner__title--warning">
346	<svg height="38" width="38" viewBox="0 0 24 24" class="jp-connection-banner__warning-icon">
347	<g>
348	<rect x="8" y="6" width="8" height="12" style="fill:#000000" />
349	<path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 15h-2v-2h2v2zm0-4h-2l-.5-6h3l-.5 6z" style="fill:#eec74f"></path>
350	</g>
351	</svg>
352	<?php esc_html_e( 'Finish setting up Jetpack', 'jetpack' ); ?>
353	</h2>
354	<div class="jp-connection-banner__text"><?php esc_html_e( "Thanks for purchasing a Jetpack subscription.\nThere’s just one more step to complete the installation.", 'jetpack' ); ?></div>
355	<div class="jp-connection-banner__footer">
356	<div class="jp-connection-banner__text jp-connection-banner__text--caption"><?php jetpack_render_tos_blurb(); ?></div>
357	<a id="jp-connect-button--alt" href="<?php echo esc_url( $this->build_connect_url_for_slide( '111' ) ); ?>" class="jp-banner-cta-button">
358	<?php esc_html_e( 'Set up Jetpack', 'jetpack' ); ?>
359	</a>
360	</div>
361	</div>
362	<div class="jp-connection-banner__image-container">
363	<img class="jp-connection-banner__image-background" src="<?php echo esc_url( plugins_url( 'images/jetpack-connection-banner-background.svg', JETPACK__PLUGIN_FILE ) ); ?>" />
364	<picture>
365	<source
366	type="image/webp"
367	srcset="<?php echo esc_url( plugins_url( 'images/jetpack-connection-image.webp', JETPACK__PLUGIN_FILE ) ); ?> 1x, <?php echo esc_url( plugins_url( 'images/jetpack-connection-image-2x.webp', JETPACK__PLUGIN_FILE ) ); ?> 2x">
368	<img
369	class="jp-connection-banner__image"
370	srcset="<?php echo esc_url( plugins_url( 'images/jetpack-connection-image.png', JETPACK__PLUGIN_FILE ) ); ?> 1x, <?php echo esc_url( plugins_url( 'images/jetpack-connection-image-2x.png', JETPACK__PLUGIN_FILE ) ); ?> 2x"
371	src="<?php echo esc_url( plugins_url( 'images/jetpack-connection-image.png', JETPACK__PLUGIN_FILE ) ); ?>"
372	alt="">
373	</picture>
374	</div>
375	</div>
376	</div>
377	<?php
378	}
379
380	/**
381	* Renders the full-screen connection prompt. Only shown once and on plugin activation.
382	*/
383	public static function render_connect_prompt_full_screen() {
384	$current_screen = get_current_screen();
385	if ( 'plugins' === $current_screen->base ) {
386	$bottom_connect_url_from = 'full-screen-prompt';
387	} else {
388	$bottom_connect_url_from = 'landing-page-bottom';
389	}
390
391	$has_no_owner = ! Jetpack::connection()->has_connected_owner();
392	?>
393	<div class="jp-connect-full__container <?php echo $has_no_owner ? 'jp-jetpack-connect__site_connection' : ''; ?>"><div class="jp-connect-full__container-card">
394
395	<?php if ( 'plugins' === $current_screen->base ) : ?>
396	<?php
397	$logo = new Logo();
398	echo $logo->render(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Returns SVG.
399	?>
400
401	<?php
402	if ( ! self::force_display() ) :
403	?>
404
405	<div class="jp-connect-full__dismiss">
406	<svg class="jp-connect-full__svg-dismiss" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>Dismiss Jetpack Connection Window</title><rect x="0" fill="none" /><g><path d="M17.705 7.705l-1.41-1.41L12 10.59 7.705 6.295l-1.41 1.41L10.59 12l-4.295 4.295 1.41 1.41L12 13.41l4.295 4.295 1.41-1.41L13.41 12l4.295-4.295z"/></g></svg>
407	</div>
408
409	<?php
410	endif;
411	?>
412
413	<?php endif; ?>
414
415	<div id="jp-connect-full__step1-header" class="jp-connect-full__step-header">
416	<h2 class="jp-connect-full__step-header-title"><?php esc_html_e( 'Activate essential WordPress security and performance tools by setting up Jetpack', 'jetpack' ); ?></h2>
417	</div>
418
419	<div id="jp-connect-full__step2-header" class="jp-connect-full__step-header">
420	<h2 class="jp-connect-full__step-header-title"><?php esc_html_e( 'Jetpack is activated!', 'jetpack' ); ?><br /><?php esc_html_e( 'Unlock more amazing features by connecting a user account', 'jetpack' ); ?></h2>
421	</div>
422
423	<p class="jp-connect-full__tos-blurb">
424	<?php jetpack_render_tos_blurb(); ?>
425	</p>
426
427	<p class="jp-connect-full__button-container">
428	<a href="<?php echo esc_url( Jetpack::init()->build_connect_url( true, false, $bottom_connect_url_from ) ); ?>"
429	class="dops-button is-primary jp-connect-button">
430	<?php esc_html_e( 'Set up Jetpack', 'jetpack' ); ?>
431	</a>
432	</p>
433
434	<div class="jp-connect-full__row" id="jetpack-connection-cards">
435	<div class="jp-connect-full__slide">
436	<div class="jp-connect-full__slide-card illustration">
437	<img
438	src="<?php echo esc_url( plugins_url( 'images/jetpack-connection-security.svg', JETPACK__PLUGIN_FILE ) ); ?>"
439	alt="<?php esc_attr_e( 'Security & Backups', 'jetpack' ); ?>"
440	/>
441	</div>
442	<div class="jp-connect-full__slide-card">
443	<h3><?php esc_html_e( 'Always-on Security', 'jetpack' ); ?></h3>
444	<ul>
445	<li><?php esc_html_e( 'Stay one step ahead of security threats with automatic scanning, one-click fixes, and spam protection.', 'jetpack' ); ?></li>
446	<li><?php esc_html_e( 'Real-time backups save every change and one-click restores get you back online quickly.', 'jetpack' ); ?></li>
447	<li><?php esc_html_e( 'Free protection against brute force attacks and instant notifications if your site goes down.', 'jetpack' ); ?></li>
448	</ul>
449	</div>
450	</div>
451	<div class="jp-connect-full__slide">
452	<div class="jp-connect-full__slide-card illustration">
453	<img
454	src="<?php echo esc_url( plugins_url( 'images/jetpack-connection-performance.svg', JETPACK__PLUGIN_FILE ) ); ?>"
455	alt="<?php esc_attr_e( 'Built-in Performance', 'jetpack' ); ?>"
456	/>
457	</div>
458	<div class="jp-connect-full__slide-card">
459	<h3><?php esc_html_e( 'Built-in Performance', 'jetpack' ); ?></h3>
460	<ul>
461	<li><?php esc_html_e( 'Keep people on your site longer with lightning-fast page load times through our free global CDN.', 'jetpack' ); ?></li>
462	<li><?php esc_html_e( 'Speed up your mobile site and reduce bandwidth usage automatically.', 'jetpack' ); ?></li>
463	<li><?php esc_html_e( 'Improve visitor engagement and sales with a customized search experience.', 'jetpack' ); ?></li>
464	</ul>
465	</div>
466	</div>
467	</div>
468
469	<h2 class="jp-connect-full__testimonial"><?php esc_html_e( 'More than 5 million WordPress sites trust Jetpack for their website security and performance.', 'jetpack' ); ?></h2>
470
471	<?php if ( 'plugins' === $current_screen->base ) : ?>
472
473	<?php
474	if ( ! self::force_display() ) :
475	?>
476
477	<p class="jp-connect-full__dismiss-paragraph">
478	<a>
479	<?php
480	echo esc_html_x(
481	'Not now, thank you.',
482	'a link that closes the modal window that offers to connect Jetpack',
483	'jetpack'
484	);
485	?>
486	</a>
487	</p>
488
489	<?php
490	endif;
491	?>
492
493	<?php endif; ?>
494	</div>
495	</div>
496	<?php
497	}
498
499	/**
500	* Renders the legacy network connection banner.
501	*/
502	public function network_connect_notice() {
503	?>
504	<div id="message" class="updated jetpack-message">
505	<div class="squeezer">
506	<h2>
507	<?php
508	echo wp_kses(
509	__(
510	'<strong>Jetpack is activated!</strong> Each site on your network must be connected individually by an admin on that site.',
511	'jetpack'
512	),
513	array( 'strong' => array() )
514	);
515	?>
516	</h2>
517	</div>
518	</div>
519	<?php
520	}
521	}
522