summaryrefslogtreecommitdiff
blob: 544a833ff9fcefb2b3c1c6884ce68ae67531e36a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
jQuery( document ).ready( function( $ ) {
	var templates = {
		'default': function( envelope ) {
			var html = '<div class="jitm-card jitm-banner ' + (
					envelope.CTA.message ? 'has-call-to-action' : ''
				) + ' is-upgrade-premium ' + envelope.content.classes + '" data-stats_url="' + envelope.jitm_stats_url + '">';
			html += '<div class="jitm-banner__icon-plan">' + envelope.content.icon + '</div>';
			html += '<div class="jitm-banner__content">';
			html += '<div class="jitm-banner__info">';
			html += '<div class="jitm-banner__title">' + envelope.content.message + '</div>';
			if ( envelope.content.description && envelope.content.description !== '' ) {
				html += '<div class="jitm-banner__description">' + envelope.content.description;
				if ( envelope.content.list.length > 0 ) {
					html += '<ul class="banner__list">';
					for ( var i = 0; i < envelope.content.list.length; i++ ) {

						var text = envelope.content.list[ i ].item;

						if ( envelope.content.list[ i ].url ) {
							text = '<a href="' + envelope.content.list[ i ].url + '" target="_blank" rel="noopener noreferrer" data-module="' + envelope.feature_class + '" data-jptracks-name="nudge_item_click" data-jptracks-prop="jitm-' + envelope.id + '">' +
								text + '</a>';
						}

						html += '<li>' +
							'<svg class="gridicon gridicons-checkmark" height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g>' +
							'<path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414" /></g></svg>' +
							text +
							'</li>';
					}
				}
				html += '</div>';
			}
			html += '</div>';
			if ( envelope.activate_module ) {
				html += '<div class="jitm-banner__action" id="jitm-banner__activate">';
				html += '<a href="#" data-module="' + envelope.activate_module + '" type="button" class="jitm-button is-compact is-primary jptracks" data-jptracks-name="nudge_click" data-jptracks-prop="jitm-' + envelope.id + '-activate_module">' + window.jitm_config.activate_module_text + '</a>';
				html += '</div>';
			}
			if ( envelope.CTA.message ) {
				var ctaClasses = 'jitm-button is-compact jptracks';
				if (
					envelope.CTA.primary &&
					null === envelope.activate_module
				) {
					ctaClasses += ' is-primary';
				}

				html += '<div class="jitm-banner__action">';
				html += '<a href="' + envelope.url + '" target="' + ( envelope.CTA.newWindow === false ? '_self' : '_blank' ) + '" rel="noopener noreferrer" title="' + envelope.CTA.message + '" data-module="' + envelope.feature_class + '" type="button" class="' + ctaClasses + '" data-jptracks-name="nudge_click" data-jptracks-prop="jitm-' + envelope.id + '">' + envelope.CTA.message + '</a>';
				html += '</div>';
			}
			html += '<a href="#" data-module="' + envelope.feature_class + '" class="jitm-banner__dismiss"></a>';
			html += '</div>';
			html += '</div>';

			return $( html );
		}
	};

	var setJITMContent = function( $el, response, redirect ) {
		var template;

		var render = function( $my_template ) {
			return function( e ) {
				e.preventDefault();

				$my_template.hide();

				$.ajax( {
					url: window.jitm_config.api_root + 'jetpack/v4/jitm',
					method: 'POST', // using DELETE without permalinks is broken in default nginx configuration
					data: {
						id: response.id,
						feature_class: response.feature_class
					}
				} );
			};
		};

		template = response.template;

		// if we don't have a template for this version, just use the default template
		if ( ! template || ! templates[ template ] ) {
			template = 'default';
		}

		response.url = response.url + '&redirect=' + redirect;

		var $template = templates[ template ]( response );
		$template.find( '.jitm-banner__dismiss' ).click( render( $template ) );

		$el.replaceWith( $template );

		// Add to Jetpack notices within the Jetpack settings app.
		$template.prependTo( $( '#jp-admin-notices' ) );

		// Handle Module activation button if it exists.
		$template.find( '#jitm-banner__activate a' ).click( function() {
			var $activate_button = $( this );

			// Do not allow any requests if the button is disabled.
			if ( $activate_button.attr( 'disabled' ) ) {
				return false;
			}

			// Make request to activate module.
			$.ajax( {
				url: window.jitm_config.api_root + 'jetpack/v4/module/' + $activate_button.data( 'module' ) + '/active',
				method: 'POST',
				beforeSend: function( xhr ) {
					xhr.setRequestHeader( 'X-WP-Nonce', $el.data( 'nonce' ) );

					// Change the button status to disabled as the change is in progress.
					$( '#jitm-banner__activate a' ).text( window.jitm_config.activating_module_text );
					$( '#jitm-banner__activate a' ).attr( 'disabled', true );
				}
			} ).done( function() {
				$( '#jitm-banner__activate a' ).text( window.jitm_config.activated_module_text );
				$( '#jitm-banner__activate a' ).attr( 'disabled', true );
			} );
		} );
	};

	$( '.jetpack-jitm-message' ).each( function() {
		var $el = $( this );

		var message_path = $el.data( 'message-path' );
		var query = $el.data( 'query' );
		var redirect = $el.data( 'redirect' );

		$.get( window.jitm_config.api_root + 'jetpack/v4/jitm', {
			message_path: message_path,
			query: query,
			_wpnonce: $el.data( 'nonce' )
		} ).then( function( response ) {
			if ( 'object' === typeof response && response['1'] ) {
				response = [ response['1'] ];
			}

			// properly handle the case of an empty array or no content set
			if ( 0 === response.length || ! response[ 0 ].content ) {
				return;
			}

			// for now, always take the first response
			setJITMContent( $el, response[ 0 ], redirect );
		} );
	} );
} );