Completed
Push — start/7.4-changelog ( b9f2cf...cfa140 )
by Jeremy
49:24 queued 39:50
created

Jetpack_Connection_Banner::get_jetpack_logo()   A

Complexity

Conditions 1
Paths 1

Size

Total Lines 10

Duplication

Lines 0
Ratio 0 %

Importance

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