Improved: we can now use the plausible_analytics_error transient to d…

…isplay the error box after page reload if needed.
plausible · Jan 31, 2024 · fc4e74c · fc4e74c
1 parent e5bcb26
commit fc4e74c
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 31 deletions.
diff --git a/assets/src/js/admin/main.js b/assets/src/js/admin/main.js
@@ -72,15 +72,14 @@ document.addEventListener('DOMContentLoaded', () => {
 					this.quitWizardElems[i].addEventListener('click', this.quitWizard);
 				}
 			}
-		}
-		,
+		},
 
 		/**
 		 * Toggle Option and store in DB.
 		 *
 		 * @param e
 		 */
-		toggleOption: function (e) {
+		toggleOption: function (e, showNotice = true) {
 			/**
 			 * Make sure event target is a toggle.
 			 */
@@ -122,7 +121,6 @@ document.addEventListener('DOMContentLoaded', () => {
 			form.append('_nonce', plausible.nonce);
 
 			let reload = false;
-			let showNotice = true;
 
 			/**
 			 * When either of these options are enabled, we need the page to reload, to display notices/warnings.
@@ -132,9 +130,14 @@ document.addEventListener('DOMContentLoaded', () => {
 				showNotice = false;
 			}
 
-			plausible.ajax(form, null, showNotice, reload);
-		}
-		,
+			let result = plausible.ajax(form, null, showNotice, reload);
+
+			result.then(function (success) {
+				if (success === false) {
+					plausible.toggleOption(e, false);
+				}
+			});
+		},
 
 		/**
 		 * Save value of input or text area to DB.
@@ -160,8 +163,7 @@ document.addEventListener('DOMContentLoaded', () => {
 			button.setAttribute('disabled', 'disabled');
 
 			plausible.ajax(form, button);
-		}
-		,
+		},
 
 		/**
 		 * Quit wizard.
@@ -202,8 +204,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
 				plausible.ajax(data, null, false);
 			}
-		}
-		,
+		},
 
 		/**
 		 * Disable Connect button if Domain Name or API Token field is empty.
@@ -242,8 +243,7 @@ document.addEventListener('DOMContentLoaded', () => {
 				button.classList += ' pointer-events-none';
 				button.classList.replace('bg-indigo-600', 'bg-gray-200')
 			}
-		}
-		,
+		},
 
 		/**
 		 * Open create API token dialog.
@@ -256,8 +256,7 @@ document.addEventListener('DOMContentLoaded', () => {
 			let domain = document.getElementById('domain_name').value;
 
 			window.open(`https://plausible.io/${domain}/settings/integrations?new_token=WordPress`, '_blank', 'location=yes,height=768,width=1024,scrollbars=yes,status=no');
-		}
-		,
+		},
 
 		/**
 		 * Show wizard.
@@ -270,8 +269,7 @@ document.addEventListener('DOMContentLoaded', () => {
 			data.append('_nonce', e.target.dataset.nonce);
 
 			plausible.ajax(data, null, false, true);
-		}
-		,
+		},
 
 		/**
 		 * Toggles the active/inactive/current state of the steps.
@@ -335,8 +333,7 @@ document.addEventListener('DOMContentLoaded', () => {
 				completedStep.classList.remove('hidden');
 				inactiveStep.classList += ' hidden';
 			});
-		}
-		,
+		},
 
 		/**
 		 * Do AJAX request and (optionally) show a notice or (optionally) reload the page.
@@ -345,9 +342,11 @@ document.addEventListener('DOMContentLoaded', () => {
 		 * @param button
 		 * @param showNotice
 		 * @param reload
+		 *
+		 * @return object
 		 */
 		ajax: function (data, button = null, showNotice = true, reload = false) {
-			fetch(
+			return fetch(
 				ajaxurl,
 				{
 					method: 'POST',
@@ -383,8 +382,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
 				return response.success;
 			});
-		}
-		,
+		},
 
 		/**
 		 * Displays a notice or error message.

diff --git a/src/Admin/Module.php b/src/Admin/Module.php
@@ -26,7 +26,7 @@ public function __construct() {
 	 */
 	private function init() {
 		add_action( 'update_option_plausible_analytics_settings', [ $this, 'maybe_install_module' ], 9, 2 );
-		add_filter( 'pre_update_option_plausible_analytics_settings', [ $this, 'maybe_enable_proxy' ], 10, 1 );
+		add_filter( 'pre_update_option_plausible_analytics_settings', [ $this, 'maybe_enable_proxy' ], 10, 2 );
 	}
 
 	/**
@@ -171,11 +171,19 @@ private function dir_is_empty( $dir ) {
 	 * @return mixed
 	 * @throws Exception
 	 */
-	public function maybe_enable_proxy( $settings ) {
+	public function maybe_enable_proxy( $settings, $old_settings ) {
+		/**
+		 * No need to run this on each update run.
+		 */
+		if ( $settings[ 'proxy_enabled' ] === 'on' && $old_settings[ 'proxy_enabled' ] === 'on' ) {
+			return $settings;
+		}
+
 		$test_succeeded = $this->test_proxy( Helpers::proxy_enabled( $settings ) );
 
 		if ( ! $test_succeeded && Helpers::proxy_enabled( $settings ) && wp_doing_ajax() ) {
-			wp_send_json_error(
+			set_transient(
+				'plausible_analytics_error',
 				sprintf(
 					wp_kses(
 						__(
@@ -186,8 +194,12 @@ public function maybe_enable_proxy( $settings ) {
 					),
 					Helpers::get_rest_endpoint( false ),
 					'https://plausible.io/contact'
-				)
+				),
+				5
 			);
+
+			// Disable the proxy.
+			return $old_settings;
 		}
 
 		return $settings;

diff --git a/src/Admin/Settings/API.php b/src/Admin/Settings/API.php
@@ -297,24 +297,30 @@ class="plausible-analytics-wizard-completed-step flex hidden items-start mb-6">
 	 * @return void
 	 */
 	private function render_notices_field() {
+		/**
+		 * If this var contains a valuable, the notice box will be shown on next pageloads until the transient is expired.
+		 */
+		$show_error = get_transient( 'plausible_analytics_error' );
 		?>
 		<!-- notices -->
 		<div
 			class="z-50 fixed inset-0 top-5 flex items-end justify-center px-6 py-8 pointer-events-none sm:p-6 sm:items-start sm:justify-end">
 			<div id="plausible-analytics-notice"
-				 class="hidden max-w-sm w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg pointer-events-auto transition-opacity ease-in-out duration-200 opacity-0">
+				 class="<?php echo $show_error ? '' :
+					 'hidden'; ?> max-w-sm w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg pointer-events-auto transition-opacity ease-in-out duration-200 <?php echo $show_error ?
+					 'opacity-100' : 'opacity-0'; ?>">
 				<div class="rounded-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
 					<div class="p-4">
 						<div class="flex items-start">
-							<div id="icon-success" class="flex-shrink-0">
+							<div id="icon-success" class="flex-shrink-0 <?php echo $show_error ? 'hidden' : ''; ?>">
 								<svg class="h-8 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none"
 									 viewBox="0 0 24 24"
 									 stroke="currentColor">
 									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
 										  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
 								</svg>
 							</div>
-							<div id="icon-error" class="flex-shrink-0 hidden">
+							<div id="icon-error" class="flex-shrink-0 <?php echo $show_error ? '' : 'hidden'; ?>">
 								<svg class="h-8 w-6 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
 									 stroke-width="2" stroke="currentColor">
 									<path stroke-linecap="round" stroke-linejoin="round"
@@ -323,8 +329,9 @@ class="hidden max-w-sm w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg poi
 							</div>
 							<div class="ml-3 w-0 flex-1 pt-0.5">
 								<! -- message -->
-								<p id=
-								   "plausible-analytics-notice-text" class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200"></p>
+								<p id="plausible-analytics-notice-text" class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200">
+									<?php echo $show_error ?: ''; ?>
+								</p>
 							</div>
 						</div>
 					</div>