Completed
Push — add/contact-form-tracking ( 49d904...012227 )
by Jeremy
06:41
created

enqueue_connect_button_scripts()   A

Complexity

Conditions 4
Paths 4

Size

Total Lines 53

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 4
nc 4
nop 0
dl 0
loc 53
rs 9.0254
c 0
b 0
f 0

How to fix   Long Method   

Long Method

Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.

For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.

Commonly applied refactorings include:

1
<?php
2
3
use Automattic\Jetpack\Assets;
4
use Automattic\Jetpack\Assets\Logo;
5
use Automattic\Jetpack\Constants;
6
7
class Jetpack_Connection_Banner {
8
	/**
9
	 * @var Jetpack_Connection_Banner
10
	 **/
11
	private static $instance = null;
12
13
	static function init() {
14
		if ( is_null( self::$instance ) ) {
15
			self::$instance = new Jetpack_Connection_Banner();
16
		}
17
18
		return self::$instance;
19
	}
20
21
	/**
22
	 * Jetpack_Connection_Banner constructor.
23
	 *
24
	 * Since we call the Jetpack_Connection_Banner:init() method from the `Jetpack` class, and after
25
	 * the admin_init action fires, we know that the admin is initialized at this point.
26
	 */
27
	private function __construct() {
28
		add_action( 'current_screen', array( $this, 'maybe_initialize_hooks' ) );
29
	}
30
31
	/**
32
	 * Given a string for the the banner was added, and an int that represents the slide to
33
	 * a URL for, this function returns a connection URL with a from parameter that will
34
	 * support split testing.
35
	 *
36
	 * @since 7.2   Event key format is now banner-connect-banner-72-dashboard or connect-banner-72-plugins.
37
	 *              The param $slide_num was removed since we removed all slides but the first one.
38
	 * @since 4.4.0
39
	 *
40
	 * @param string $jp_version_banner_added A short version of when the banner was added. Ex. 44
41
	 *
42
	 * @return string
43
	 */
44
	function build_connect_url_for_slide( $jp_version_banner_added ) {
45
		global $current_screen;
46
		$url = Jetpack::init()->build_connect_url(
47
			true,
48
			false,
49
			sprintf( 'connect-banner-%s-%s', $jp_version_banner_added, $current_screen->base )
50
		);
51
		// Add a tracks event corresponding to the A/B version displayed
52
		$ab_test = Jetpack_Options::get_option( 'ab_connect_banner_green_bar' );
53
		if ( in_array( $ab_test, array( 'a', 'b' ), true ) ) {
54
			$url = add_query_arg( 'ab_connect_banner_green_bar', $ab_test, $url );
55
		}
56
		return add_query_arg( 'auth_approved', 'true', $url );
57
	}
58
59
	/**
60
	 * Will initialize hooks to display the new (as of 4.4) connection banner if the current user can
61
	 * connect Jetpack, if Jetpack has not been deactivated, and if the current page is the plugins page.
62
	 *
63
	 * This method should not be called if the site is connected to WordPress.com or if the site is in development mode.
64
	 *
65
	 * @since 4.4.0
66
	 * @since 4.5.0 Made the new (as of 4.4) connection banner display to everyone by default.
67
	 * @since 5.3.0 Running another split test between 4.4 banner and a new one in 5.3.
68
	 * @since 7.2   B test was removed.
69
	 *
70
	 * @param $current_screen
71
	 */
72
	function maybe_initialize_hooks( $current_screen ) {
73
74
		// Kill if banner has been dismissed
75
		if ( Jetpack_Options::get_option( 'dismissed_connection_banner' ) ) {
76
			return;
77
		}
78
79
		// Don't show the connect notice anywhere but the plugins.php after activating
80
		if ( 'plugins' !== $current_screen->base && 'dashboard' !== $current_screen->base ) {
81
			return;
82
		}
83
84
		if ( ! current_user_can( 'jetpack_connect' ) ) {
85
			return;
86
		}
87
88
		add_action( 'admin_notices', array( $this, 'render_banner' ) );
89
		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_banner_scripts' ) );
90
		add_action( 'admin_print_styles', array( Jetpack::init(), 'admin_banner_styles' ) );
91
92
		if ( Jetpack::state( 'network_nag' ) ) {
93
			add_action( 'network_admin_notices', array( $this, 'network_connect_notice' ) );
94
		}
95
96
		// Only fires immediately after plugin activation
97
		if ( get_transient( 'activated_jetpack' ) ) {
98
			add_action( 'admin_notices', array( $this, 'render_connect_prompt_full_screen' ) );
99
			delete_transient( 'activated_jetpack' );
100
		}
101
	}
102
103
	/**
104
	 * Enqueues JavaScript for new connection banner.
105
	 *
106
	 * @since 4.4.0
107
	 */
108 View Code Duplication
	public static function enqueue_banner_scripts() {
109
		wp_enqueue_script(
110
			'jetpack-connection-banner-js',
111
			Assets::get_file_url_for_environment(
112
				'_inc/build/jetpack-connection-banner.min.js',
113
				'_inc/jetpack-connection-banner.js'
114
			),
115
			array( 'jquery' ),
116
			JETPACK__VERSION,
117
			true
118
		);
119
120
		wp_localize_script(
121
			'jetpack-connection-banner-js',
122
			'jp_banner',
123
			array(
124
				'ajax_url'              => admin_url( 'admin-ajax.php' ),
125
				'connectionBannerNonce' => wp_create_nonce( 'jp-connection-banner-nonce' ),
126
			)
127
		);
128
	}
129
130
	/**
131
	 * Enqueues JavaScript and CSS for new connect-in-place flow.
132
	 *
133
	 * @since 7.7
134
	 */
135
	public static function enqueue_connect_button_scripts() {
136
		global $is_safari;
137
138
		wp_enqueue_script(
139
			'jetpack-connect-button',
140
			Assets::get_file_url_for_environment(
141
				'_inc/build/connect-button.min.js',
142
				'_inc/connect-button.js'
143
			),
144
			array( 'jquery' ),
145
			JETPACK__VERSION,
146
			true
147
		);
148
149
		wp_enqueue_style(
150
			'jetpack-connect-button',
151
			Assets::get_file_url_for_environment(
152
				'css/jetpack-connect.min.css',
153
				'css/jetpack-connect.css'
154
			)
155
		);
156
157
		$jetpackApiUrl = parse_url( Jetpack::connection()->api_url( '' ) );
158
159
		// Due to the limitation in how 3rd party cookies are handled in Safari,
160
		// we're falling back to the original flow on Safari desktop and mobile.
161
		if ( $is_safari ) {
162
			$force_variation = 'original';
163
		} elseif ( Constants::is_true( 'JETPACK_SHOULD_USE_CONNECTION_IFRAME' ) ) {
164
			$force_variation = 'in_place';
165
		} elseif ( Constants::is_defined( 'JETPACK_SHOULD_USE_CONNECTION_IFRAME' ) ) {
166
			$force_variation = 'original';
167
		} else {
168
			$force_variation = null;
169
		}
170
171
		wp_localize_script(
172
			'jetpack-connect-button',
173
			'jpConnect',
174
			array(
175
				'apiBaseUrl'            => esc_url_raw( rest_url( 'jetpack/v4' ) ),
176
				'registrationNonce'     => wp_create_nonce( 'jetpack-registration-nonce' ),
177
				'apiNonce'              => wp_create_nonce( 'wp_rest' ),
178
				'apiSiteDataNonce'      => wp_create_nonce( 'wp_rest' ),
179
				'buttonTextRegistering' => __( 'Loading...', 'jetpack' ),
180
				'jetpackApiDomain'      => $jetpackApiUrl['scheme'] . '://' . $jetpackApiUrl['host'],
181
				'forceVariation'        => $force_variation,
182
				'connectInPlaceUrl'     => Jetpack::admin_url( 'page=jetpack#/setup' ),
183
				'dashboardUrl'          => Jetpack::admin_url( 'page=jetpack#/dashboard' ),
184
				'plansPromptUrl'        => Jetpack::admin_url( 'page=jetpack#/plans-prompt' ),
185
			)
186
		);
187
	}
188
189
	/**
190
	 * Performs an A/B test showing or hiding the green bar at the top of the connection dialog displayed in Dashboard or Plugins.
191
	 * We save which version we're showing so we always show the same to the same user.
192
	 * The "A" version displays the green bar at the top.
193
	 * The "B" version doesn't display it.
194
	 *
195
	 * @return void
196
	 */
197
	function get_ab_banner_top_bar() {
198
		$ab_test = Jetpack_Options::get_option( 'ab_connect_banner_green_bar' );
199
		// If it doesn't exist yet, generate it for later use and save it, so we always show the same to this user
200
		if ( ! $ab_test ) {
201
			$ab_test = 1 === rand( 1, 2 ) ? 'a' : 'b';
202
			Jetpack_Options::update_option( 'ab_connect_banner_green_bar', $ab_test );
203
		}
204
		if ( 'a' === $ab_test ) {
205
			?>
206
			<div class="jp-wpcom-connect__container-top-text">
207
				<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>
208
				<span>
209
					<?php esc_html_e( 'You’re almost done. Set up Jetpack to enable powerful security and performance tools for WordPress.', 'jetpack' ); ?>
210
				</span>
211
			</div>
212
			<?php
213
		}
214
	}
215
216
	/**
217
	 * Renders the new connection banner as of 4.4.0.
218
	 *
219
	 * @since 7.2   Copy and visual elements reduced to show the new focus of Jetpack on Security and Performance.
220
	 * @since 4.4.0
221
	 */
222
	function render_banner() {
223
		?>
224
		<div id="message" class="updated jp-wpcom-connect__container">
225
			<?php $this->get_ab_banner_top_bar(); ?>
226
			<div class="jp-wpcom-connect__inner-container">
227
				<span
228
					class="notice-dismiss connection-banner-dismiss"
229
					title="<?php esc_attr_e( 'Dismiss this notice', 'jetpack' ); ?>">
230
				</span>
231
232
				<div class="jp-wpcom-connect__content-container">
233
234
					<!-- slide 1: intro -->
235
					<div class="jp-wpcom-connect__slide jp-wpcom-connect__slide-one jp__slide-is-active">
236
237
						<div class="jp-wpcom-connect__content-icon jp-connect-illo">
238
							<?php
239
							$logo = new Logo();
240
							echo $logo->render();
241
							?>
242
							<img
243
								src="<?php echo plugins_url( 'images/jetpack-powering-up.svg', JETPACK__PLUGIN_FILE ); ?>"
244
								class="jp-wpcom-connect__hide-phone-and-smaller"
245
								alt="
246
								<?php
247
								esc_attr_e(
248
									'Jetpack premium services offer even more powerful performance, security, ' .
249
									'and revenue tools to help you keep your site safe, fast, and help generate income.',
250
									'jetpack'
251
								);
252
								?>
253
								"
254
								height="auto"
255
								width="225"
256
								/>
257
						</div>
258
259
						<div class="jp-wpcom-connect__slide-text">
260
							<h2><?php esc_html_e( 'Simplify your site security and performance with Jetpack', 'jetpack' ); ?></h2>
261
262
							<p>
263
								<?php
264
								esc_html_e(
265
									'Jetpack protects you against brute force attacks and unauthorized logins. Basic protection ' .
266
									'is always free, while premium plans add unlimited backups of your whole site, spam protection, ' .
267
									'malware scanning, and automated fixes.',
268
									'jetpack'
269
								);
270
								?>
271
							</p>
272
273
							<p>
274
								<?php
275
								esc_html_e(
276
									'Activate site accelerator tools and watch your page load times decrease—we’ll ' .
277
									'optimize your images and serve them from our own powerful global network of servers, ' .
278
									'and speed up your mobile site to reduce bandwidth usage.',
279
									'jetpack'
280
								);
281
								?>
282
							</p>
283
284
							<div class="jp-banner__button-container">
285
								<span class="jp-banner__tos-blurb"><?php jetpack_render_tos_blurb(); ?></span>
286
								<a
287
										href="<?php echo esc_url( $this->build_connect_url_for_slide( '72' ) ); ?>"
288
										class="dops-button is-primary jp-banner__alt-connect-button">
289
									<?php esc_html_e( 'Set up Jetpack', 'jetpack' ); ?>
290
								</a>
291
							</div>
292
293
						</div>
294
					</div> <!-- end slide 1 -->
295
				</div>
296
			</div>
297
		</div>
298
		<?php
299
	}
300
301
	/**
302
	 * Renders the full-screen connection prompt.  Only shown once and on plugin activation.
303
	 */
304
	public static function render_connect_prompt_full_screen() {
305
		$current_screen = get_current_screen();
306
		if ( 'plugins' === $current_screen->base ) {
307
			$bottom_connect_url_from = 'full-screen-prompt';
308
		} else {
309
			$bottom_connect_url_from = 'landing-page-bottom';
310
		}
311
		?>
312
		<div class="jp-connect-full__container"><div class="jp-connect-full__container-card">
313
314
				<?php if ( 'plugins' === $current_screen->base ) : ?>
315
					<?php
316
					$logo = new Logo();
317
					echo $logo->render();
318
					?>
319
320
					<div class="jp-connect-full__dismiss">
321
						<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>
322
					</div>
323
				<?php endif; ?>
324
325
				<div class="jp-connect-full__step-header">
326
					<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>
327
				</div>
328
329
				<p class="jp-connect-full__tos-blurb">
330
					<?php jetpack_render_tos_blurb(); ?>
331
				</p>
332
333
				<p class="jp-connect-full__button-container">
334
					<a href="<?php echo esc_url( Jetpack::init()->build_connect_url( true, false, $bottom_connect_url_from ) ); ?>"
335
					   class="dops-button is-primary jp-connect-button">
336
						<?php esc_html_e( 'Set up Jetpack', 'jetpack' ); ?>
337
					</a>
338
				</p>
339
340
				<div class="jp-connect-full__row" id="jetpack-connection-cards">
341
					<div class="jp-connect-full__slide">
342
						<div class="jp-connect-full__slide-card illustration">
343
							<img
344
									src="<?php echo plugins_url( 'images/security.svg', JETPACK__PLUGIN_FILE ); ?>"
345
									alt="<?php esc_attr_e( 'Security & Backups', 'jetpack' ); ?>"
346
							/>
347
						</div>
348
						<div class="jp-connect-full__slide-card">
349
							<p>
350
							<?php
351
								esc_html_e(
352
									'Jetpack protects you against brute force attacks and unauthorized logins. ' .
353
									'Basic protection is always free, while premium plans add unlimited backups of your whole site, ' .
354
									'spam protection, malware scanning, and automated fixes.',
355
									'jetpack'
356
								);
357
							?>
358
								</p>
359
						</div>
360
					</div>
361
					<div class="jp-connect-full__slide">
362
						<div class="jp-connect-full__slide-card illustration">
363
							<img
364
									src="<?php echo plugins_url( 'images/jetpack-speed.svg', JETPACK__PLUGIN_FILE ); ?>"
365
									alt="<?php esc_attr_e( 'Built-in Performance', 'jetpack' ); ?>"
366
							/>
367
						</div>
368
						<div class="jp-connect-full__slide-card">
369
							<p>
370
							<?php
371
								esc_html_e(
372
									'Activate site accelerator tools and watch your page load times decrease—' .
373
									"we'll optimize your images and serve them from our own powerful global network of servers, " .
374
									'and speed up your mobile site to reduce bandwidth usage.',
375
									'jetpack'
376
								);
377
							?>
378
								</p>
379
						</div>
380
					</div>
381
				</div>
382
383
				<?php if ( 'plugins' === $current_screen->base ) : ?>
384
					<p class="jp-connect-full__dismiss-paragraph">
385
						<a>
386
							<?php
387
							echo esc_html_x(
388
								'Not now, thank you.',
389
								'a link that closes the modal window that offers to connect Jetpack',
390
								'jetpack'
391
							);
392
							?>
393
						</a>
394
					</p>
395
				<?php endif; ?>
396
			</div>
397
		</div>
398
		<?php
399
	}
400
401
	/**
402
	 * Renders the legacy network connection banner.
403
	 */
404
	function network_connect_notice() {
405
		?>
406
		<div id="message" class="updated jetpack-message">
407
			<div class="squeezer">
408
				<h2>
409
					<?php
410
						echo wp_kses(
411
							__(
412
								'<strong>Jetpack is activated!</strong> Each site on your network must be connected individually by an admin on that site.',
413
								'jetpack'
414
							),
415
							array( 'strong' => array() )
416
						);
417
					?>
418
				</h2>
419
			</div>
420
		</div>
421
		<?php
422
	}
423
}
424