redesign marketplace overview

assets/css/admin-style.css

@@ -317,6 +317,10 @@ table.matomo-tracking-form th {
     color: #2271b1;
 }
 
+.matomo-primary-color-fill {
+    fill: #2271b1;
+}
+
 .matomo-secondary-color-fg {
     color: #f6f7f7;
 }
@@ -333,6 +337,10 @@ table.matomo-tracking-form th {
     color: var(--wp-admin-theme-color, #3858e9);
 }
 
+.mtm-wp-gte-7 .matomo-primary-color-fill {
+    fill: var(--wp-admin-theme-color, #3858e9);
+}
+
 .mtm-wp-gte-7 .matomo-secondary-color-fg {
     color: white;
 }

assets/js/marketplace_setup_wizard.js

@@ -7,20 +7,36 @@
  */
 
 window.jQuery(document).ready(function ($) {
-  function pollForPluginActivation() {
-    $('.wizard-waiting-for').show();
+  function pollForPluginActivation(setActiveClass) {
+    if (setActiveClass) {
+      $('.wizard-waiting-for').addClass('active').find('.waiting-for-install').show();
+    } else {
+      $('.wizard-waiting-for').show();
+    }
 
     var interval = setInterval(function () {
       $.post(mtmMarketplaceWizardAjax.ajax_url, {
         _ajax_nonce: mtmMarketplaceWizardAjax.is_active_nonce,
         action: 'matomo_is_marketplace_active',
       }, function (data) {
         if (data.active) {
-          $('.wizard-waiting-for').hide();
+          if (!setActiveClass) {
+            $('.wizard-waiting-for').hide();
+          } else {
+            $('.wizard-waiting-for .waiting-for-activation').hide();
+          }
+
           $('.wizard-reloading').show();
 
-          window.location.reload();
+          // reload after the dom has had a chance to update
+          setTimeout(function () {
+            window.location.reload();
+          });
+
           clearInterval(interval);
+        } else if (data.installed && setActiveClass) {
+          $('.wizard-waiting-for .waiting-for-install').hide();
+          $('.wizard-waiting-for .waiting-for-activation').show();
         }
       });
     }, 2000);
@@ -39,7 +55,14 @@ window.jQuery(document).ready(function ($) {
   }
 
   if (typeof mtmMarketplaceWizardAjax !== 'undefined' && mtmMarketplaceWizardAjax.ajax_url) {
-    $('.matomo-marketplace-wizard-body .open-plugin-upload').on('click', pollForPluginActivation);
-    $('.matomo-marketplace-wizard-body .activate-plugin').on('click', activateMarketplace);
+    var pollFn = pollForPluginActivation;
+    var activateFn = activateMarketplace;
+    if (mtmMarketplaceWizardAjax.is_welcome_page) {
+      pollFn = pollForPluginActivation.bind(null, true);
+      activateFn = activateMarketplace.bind(null, true);
+    }
+
+    $('.matomo-marketplace-wizard-body .open-plugin-upload').on('click', pollFn);
+    $('.matomo-marketplace-wizard-body .activate-plugin').on('click', activateFn);
   }
 });

classes/WpMatomo/Admin/Marketplace.php

@@ -53,6 +53,9 @@ public function show() {
 			$valid_tabs = $this->get_valid_tabs();
 
 			$marketplace_setup_wizard = \WpMatomo::get_active_feature( MarketplaceSetupWizard::class );
+			$matomo_marketplace_url   = MarketplaceSetupWizardBody::get_marketplace_zip_url();
+		} else {
+			wp_safe_redirect( admin_url( 'admin.php?page=matomo-marketplace&tab=install' ) );
 		}
 
 		$matomo_currency = $this->get_currency_based_on_timezone();
@@ -61,7 +64,14 @@ public function show() {
 	}
 
 	private function get_valid_tabs() {
-		$valid_tabs = [ 'marketplace' ];
+		$valid_tabs = [];
+		if (
+			! MarketplaceSetupWizard::is_marketplace_installed()
+			|| ! is_plugin_active( MarketplaceSetupWizard::MARKETPLACE_PLUGIN_FILE )
+		) {
+			$valid_tabs[] = 'marketplace';
+		}
+
 		if ( $this->can_user_manage() ) {
 			if ( current_user_can( 'install_plugins' ) ) {
 				$valid_tabs[] = 'install';

classes/WpMatomo/Admin/MarketplaceSetupWizard.php

@@ -22,6 +22,13 @@ public function is_active() {
 			return false;
 		}
 
+		if (
+			$this->is_plugin_install_page()
+			|| $this->is_plugin_activation_request()
+		) {
+			return true;
+		}
+
 		if ( empty( $_REQUEST['page'] ) ) {
 			return false;
 		}
@@ -34,9 +41,7 @@ public function is_active() {
 			return false;
 		}
 
-		// phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
-		$tab = isset( $_REQUEST['tab'] ) ? wp_unslash( $_REQUEST['tab'] ) : '';
-		return 'install' === $tab || 'subscriptions' === $tab;
+		return true; // displayed in some manner on all tabs
 	}
 
 	public function get_body( $show_titles = true ) {
@@ -52,6 +57,65 @@ public function show() {
 
 	public function register_hooks() {
 		add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
+		add_action( 'admin_notices', [ $this, 'admin_notices' ] );
+		add_action( 'activated_plugin', [ $this, 'on_plugin_activated' ] );
+		add_action( 'admin_footer', [ $this, 'on_admin_footer' ] );
+	}
+
+	public function on_plugin_activated( $plugin ) {
+		if ( 'matomo-marketplace-for-wordpress/matomo-marketplace-for-wordpress.php' !== $plugin ) {
+			return;
+		}
+
+		if (
+			empty( $_SERVER['HTTP_REFERER'] )
+			|| false === strpos( esc_url_raw( wp_unslash( $_SERVER['HTTP_REFERER'] ) ), 'mtm_marketplace_install' )
+		) {
+			return;
+		}
+
+		// if we are in the marketplace install workflow, and the plugin has been
+		// activated, close the current window to go back to the marketplace setup
+		?>
+		<html>
+		<head></head>
+		<body>
+			<script>
+				window.close();
+			</script>
+		</body>
+		</html>
+		<?php
+		wp_die();
+	}
+
+	public function admin_notices() {
+		if ( ! $this->is_plugin_install_page() ) {
+			return;
+		}
+		?>
+		<div class="notice notice-info">
+			<p>
+				<?php esc_html_e( 'You\'re almost there! Upload the .zip file below to install the Marketplace and start exploring advanced analytics features.', 'matomo' ); ?>
+			</p>
+		</div>
+		<?php
+	}
+
+	public function on_admin_footer() {
+		if ( ! $this->is_plugin_install_page() ) {
+			return;
+		}
+
+		// add script to add query param to plugin upload form submit URL
+		?>
+		<script>
+			window.jQuery(document).ready(function ($) {
+				var $form = $('.wp-upload-form');
+				$form.attr('action', $form.attr('action') + '&mtm_marketplace_install=1');
+			});
+		</script>
+		<?php
 	}
 
 	public function enqueue_scripts() {
@@ -70,6 +134,12 @@ public function enqueue_scripts() {
 				'ajax_url'        => admin_url( 'admin-ajax.php' ),
 				'is_active_nonce' => wp_create_nonce( self::AJAX_IS_ACTIVE_NONCE_NAME ),
 				'activate_nonce'  => wp_create_nonce( self::AJAX_ACTIVATE_NONCE_NAME ),
+				'is_welcome_page' => isset( $_REQUEST['page'] )
+					// phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
+					&& Menu::SLUG_MARKETPLACE === wp_unslash( $_REQUEST['page'] )
+					&& isset( $_REQUEST['tab'] )
+					// phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
+					&& 'marketplace' === wp_unslash( $_REQUEST['tab'] ),
 			]
 		);
 	}
@@ -86,7 +156,12 @@ public static function is_marketplace_active() {
 			wp_send_json_error( [ 'message' => 'forbidden' ], 403 );
 		}
 
-		wp_send_json( [ 'active' => is_plugin_active( self::MARKETPLACE_PLUGIN_FILE ) ] );
+		wp_send_json(
+			[
+				'installed' => self::is_marketplace_installed(),
+				'active'    => is_plugin_active( self::MARKETPLACE_PLUGIN_FILE ),
+			]
+		);
 	}
 
 	public static function activate_marketplace_plugin() {
@@ -104,4 +179,50 @@ public static function is_marketplace_installed() {
 		return is_file( WP_PLUGIN_DIR . '/' . self::MARKETPLACE_PLUGIN_FILE )
 			|| is_file( WP_CONTENT_DIR . '/mu-plugins/' . self::MARKETPLACE_PLUGIN_FILE );
 	}
+
+	private function is_plugin_install_page() {
+		if ( empty( $_SERVER['REQUEST_URI'] ) ) {
+			return false;
+		}
+
+		$request_path = wp_parse_url( esc_url_raw( wp_unslash( $_SERVER['REQUEST_URI'] ) ), PHP_URL_PATH );
+		if ( ! preg_match( '%/wp-admin/plugin-install\\.php$%', $request_path ) ) {
+			return false;
+		}
+
+		if (
+			empty( $_REQUEST['tab'] )
+			// phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
+			|| 'upload' !== wp_unslash( $_REQUEST['tab'] )
+			|| empty( $_REQUEST['mtm_marketplace_install'] )
+		) {
+			return false;
+		}
+
+		return true;
+	}
+
+	private function is_plugin_activation_request() {
+		if ( empty( $_SERVER['REQUEST_URI'] ) ) {
+			return false;
+		}
+
+		$request_path = wp_parse_url( esc_url_raw( wp_unslash( $_SERVER['REQUEST_URI'] ) ), PHP_URL_PATH );
+		if ( ! preg_match( '%/wp-admin/plugins\\.php$%', $request_path ) ) {
+			return false;
+		}
+
+		if (
+			empty( $_REQUEST['action'] )
+			// phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
+			|| 'activate' !== wp_unslash( $_REQUEST['action'] )
+			|| empty( $_REQUEST['plugin'] )
+			// phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
+			|| 'matomo-marketplace-for-wordpress/matomo-marketplace-for-wordpress.php' !== wp_unslash( $_REQUEST['plugin'] )
+		) {
+			return false;
+		}
+
+		return true;
+	}
 }

classes/WpMatomo/Admin/MarketplaceSetupWizardBody.php

@@ -26,12 +26,12 @@ public function show() {
 		$is_plugin_installed       = MarketplaceSetupWizard::is_marketplace_installed();
 		$matomo_show_title         = $this->matomo_show_title;
 		$matomo_is_plugin_active   = is_plugin_active( MarketplaceSetupWizard::MARKETPLACE_PLUGIN_FILE );
-		$matomo_marketplace_url    = $this->get_marketplace_zip_url();
+		$matomo_marketplace_url    = self::get_marketplace_zip_url();
 
 		include dirname( __FILE__ ) . '/views/marketplace_setup_wizard_body.php';
 	}
 
-	private function get_marketplace_zip_url() {
+	public static function get_marketplace_zip_url() {
 		if ( defined( 'MATOMO_MARKETPLACE_ZIP_URL' ) && MATOMO_MARKETPLACE_ZIP_URL ) {
 			return MATOMO_MARKETPLACE_ZIP_URL;
 		}