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

jetpack / class.jetpack-connection-banner.php

jetpack Last commit date

class.jetpack-connection-banner.php

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