Closes #2884 Upgrade plan link in admin bar (#899)

assets/css/admin-bar.css

@@ -61,11 +61,10 @@
 }
 #wpadminbar #wp-admin-bar-imagify-profile .ab-item {
 	height: auto;
-	padding: 0 13px;
+	padding: 0;
 }
 #wpadminbar #wp-admin-bar-imagify-profile {
 	min-width: 200px;
-	padding: 15px 0 10px;
 	margin-top: 0.7em;
 	background: #222;
 }
@@ -200,3 +199,24 @@
 	color: #6f9c3b;
 	font-weight: 600;
 }
+
+#wpadminbar #wp-admin-bar-imagify-upgrade-plan .ab-empty-item {
+	padding: 0;
+}
+
+#wpadminbar .imagify-admin-bar-upgrade-plan {
+	background: #8bc34a;
+	box-sizing: border-box;
+	border:none;
+	color: #fff;
+	cursor: pointer;
+	display: block;
+	font-weight: bold !important;
+	padding: 0 10px;
+	text-align: left;
+	width: 100% !important;
+}
+
+#wpadminbar #wp-admin-bar-imagify-profile .imagify-admin-bar-quota {
+	padding: 13px 15px;
+}

assets/js/pricing-modal.js

@@ -1100,7 +1100,7 @@
 	 * Get pricings on modal opening.
 	 * Build the pricing tables inside modal.
 	 */
-	$('#imagify-get-pricing-modal').on('click.imagify-ajax', function () {
+	$('.imagify-get-pricing-modal').on('click.imagify-ajax', function () {
 		imagifyModal.getPricing($(this));
 	});
 

classes/Admin/AdminBar.php

@@ -1,26 +1,129 @@
 <?php
+declare( strict_types=1 );
 
 namespace Imagify\Admin;
 
-use Imagify\Traits\InstanceGetterTrait;
+use Imagify\EventManagement\SubscriberInterface;
 use Imagify\User\User;
 use Imagify_Views;
+use WP_Admin_Bar;
 
 /**
  * Admin bar handler
  */
-class AdminBar {
-	use InstanceGetterTrait;
+class AdminBar implements SubscriberInterface {
+	/**
+	 * User instance.
+	 *
+	 * @var User
+	 */
+	private $user;
 
 	/**
-	 * Launch the hooks.
+	 * AdminBar constructor.
 	 *
-	 * @return void
+	 * @param User $user User instance.
+	 */
+	public function __construct( User $user ) {
+		$this->user = $user;
+	}
+
+	/**
+	 * Returns an array of events this subscriber listens to
+	 *
+	 * @return array
+	 */
+	public static function get_subscribed_events(): array {
+		return [
+			'wp_ajax_imagify_get_admin_bar_profile' => 'get_admin_bar_profile_callback',
+			'admin_bar_menu'                        => [ 'add_imagify_admin_bar_menu', IMAGIFY_INT_MAX ],
+		];
+	}
+
+	/**
+	 * Add Imagify menu in the admin bar.
+	 *
+	 * @param WP_Admin_Bar $wp_admin_bar WP_Admin_Bar instance, passed by reference.
 	 */
-	public function init() {
-		if ( wp_doing_ajax() ) {
-				add_action( 'wp_ajax_imagify_get_admin_bar_profile', array( $this, 'get_admin_bar_profile_callback' ) );
+	public function add_imagify_admin_bar_menu( $wp_admin_bar ) {
+		if ( ! imagify_get_context( 'wp' )->current_user_can( 'manage' ) ) {
+			return;
+		}
+
+		if ( ! get_imagify_option( 'admin_bar_menu' ) ) {
+			return;
+		}
+
+		// Parent.
+		$wp_admin_bar->add_menu( array(
+			'id'    => 'imagify',
+			'title' => 'Imagify',
+			'href'  => get_imagify_admin_url(),
+		) );
+
+		// Settings.
+		$wp_admin_bar->add_menu(array(
+			'parent' => 'imagify',
+			'id'     => 'imagify-settings',
+			'title'  => __( 'Settings' ),
+			'href'   => get_imagify_admin_url(),
+		) );
+
+		// Bulk Optimization.
+		if ( ! is_network_admin() ) {
+			$wp_admin_bar->add_menu(array(
+				'parent' => 'imagify',
+				'id'     => 'imagify-bulk-optimization',
+				'title'  => __( 'Bulk Optimization', 'imagify' ),
+				'href'   => get_imagify_admin_url( 'bulk-optimization' ),
+			) );
 		}
+
+		// Documentation.
+		$wp_admin_bar->add_menu(array(
+			'parent' => 'imagify',
+			'id'     => 'imagify-documentation',
+			'title'  => __( 'Documentation', 'imagify' ),
+			'href'   => imagify_get_external_url( 'documentation' ),
+			'meta'   => array(
+				'target' => '_blank',
+			),
+		) );
+
+		// Rate it.
+		$wp_admin_bar->add_menu(array(
+			'parent' => 'imagify',
+			'id'     => 'imagify-rate-it',
+			/* translators: %s is WordPress.org. */
+			'title'  => sprintf( __( 'Rate Imagify on %s', 'imagify' ), 'WordPress.org' ),
+			'href'   => imagify_get_external_url( 'rate' ),
+			'meta'   => array(
+				'target' => '_blank',
+			),
+		) );
+
+		// Quota & Profile informations.
+		if ( defined( 'IMAGIFY_HIDDEN_ACCOUNT' ) && IMAGIFY_HIDDEN_ACCOUNT || ! get_imagify_option( 'api_key' ) ) {
+			return;
+		}
+
+		if (
+			$this->user->is_free()
+			&&
+			$this->user->get_percent_unconsumed_quota() > 20
+		) {
+			$wp_admin_bar->add_menu( [
+				'parent' => 'imagify',
+				'id'     => 'imagify-upgrade-plan',
+				'title'  => '<button data-nonce="' . wp_create_nonce( 'imagify_get_pricing_' . get_current_user_id() ) . '" data-target="#imagify-pricing-modal" type="button" class="imagify-get-pricing-modal imagify-modal-trigger imagify-admin-bar-upgrade-plan">' . __( 'Upgrade Plan', 'imagify' ) . '</button>',
+			] );
+		}
+
+		$wp_admin_bar->add_menu( array(
+			'parent' => 'imagify',
+			'id'     => 'imagify-profile',
+			'title'  => wp_nonce_field( 'imagify-get-admin-bar-profile', 'imagifygetadminbarprofilenonce', false, false ) . '<div id="wp-admin-bar-imagify-profile-loading" class="hide-if-no-js">' . __( 'Loading...', 'imagify' ) . '</div><div id="wp-admin-bar-imagify-profile-content" class="hide-if-no-js"></div>',
+		) );
 	}
 
 	/**
@@ -35,22 +138,21 @@ public function get_admin_bar_profile_callback() {
 			imagify_die();
 		}
 
-		$user             = new User();
 		$views            = Imagify_Views::get_instance();
 		$unconsumed_quota = $views->get_quota_percent();
 		$text             = '';
 		$button_text      = '';
 		$upgrade_link     = '';
 
-		if ( $user->is_free() ) {
+		if ( $this->user->is_free() ) {
 			$text         = esc_html__( 'Upgrade your plan now for more!', 'rocket' ) . '<br>' .
 			esc_html__( 'From $5.99/month only, keep going with image optimization!', 'rocket' );
 			$button_text  = esc_html__( 'Upgrade My Plan', 'rocket' );
 			$upgrade_link = IMAGIFY_APP_DOMAIN . '/subscription/?utm_source=plugin&utm_medium=notification';
-		} elseif ( $user->is_growth() ) {
+		} elseif ( $this->user->is_growth() ) {
 			$text = esc_html__( 'Switch to Infinite plan for unlimited optimization:', 'rocket' ) . '<br>';
 
-			if ( $user->is_monthly ) {
+			if ( $this->user->is_monthly ) {
 				$text         .= esc_html__( 'For $9.99/month, optimize as many images as you like!', 'rocket' );
 				$upgrade_link = IMAGIFY_APP_DOMAIN . '/subscription/plan_switch/?label=infinite&payment_plan=1&utm_source=plugin&utm_medium=notification ';
 			} else {
@@ -64,11 +166,11 @@ public function get_admin_bar_profile_callback() {
 		$data = [
 			'quota_icon'       => $views->get_quota_icon(),
 			'quota_class'      => $views->get_quota_class(),
-			'plan_label'       => $user->plan_label,
-			'plan_with_quota'  => $user->is_free() || $user->is_growth(),
+			'plan_label'       => $this->user->plan_label,
+			'plan_with_quota'  => $this->user->is_free() || $this->user->is_growth(),
 			'unconsumed_quota' => $unconsumed_quota,
-			'user_quota'       => $user->quota,
-			'next_update'      => $user->next_date_update,
+			'user_quota'       => $this->user->quota,
+			'next_update'      => $this->user->next_date_update,
 			'text'             => $text,
 			'button_text'      => $button_text,
 			'upgrade_link'     => $upgrade_link,

classes/Admin/ServiceProvider.php

@@ -16,6 +16,7 @@ class ServiceProvider extends AbstractServiceProvider {
 	 * @var array
 	 */
 	protected $provides = [
+		'admin_bar',
 		'admin_subscriber',
 	];
 
@@ -25,6 +26,7 @@ class ServiceProvider extends AbstractServiceProvider {
 	 * @var array
 	 */
 	public $subscribers = [
+		'admin_bar',
 		'admin_subscriber',
 	];
 
@@ -34,6 +36,9 @@ class ServiceProvider extends AbstractServiceProvider {
 	 * @return void
 	 */
 	public function register() {
+
+		$this->getContainer()->share( 'admin_bar', AdminBar::class )
+			->addArgument( $this->getContainer()->get( 'user' ) );
 		$this->getContainer()->share( 'admin_subscriber', AdminSubscriber::class )
 			->addArgument( $this->getContainer()->get( 'user' ) );
 	}

classes/Plugin.php

@@ -115,7 +115,6 @@ class_alias( '\\Imagify\\Traits\\InstanceGetterTrait', '\\Imagify\\Traits\\FakeS
 		\Imagify\Auth\Basic::get_instance()->init();
 		\Imagify\Job\MediaOptimization::get_instance()->init();
 		Bulk::get_instance()->init();
-		AdminBar::get_instance()->init();
 
 		if ( is_admin() ) {
 			Notices::get_instance()->init();
@@ -190,7 +189,6 @@ public function include_files() {
 		require_once $inc_path . 'functions/i18n.php';
 		require_once $inc_path . 'functions/partners.php';
 		require_once $inc_path . 'common/attachments.php';
-		require_once $inc_path . 'common/admin-bar.php';
 		require_once $inc_path . 'common/partners.php';
 		require_once $inc_path . '3rd-party/3rd-party.php';
 

config/providers.php

@@ -1,10 +1,10 @@
 <?php
 return [
 	'Imagify\User\ServiceProvider',
+	'Imagify\Admin\ServiceProvider',
 	'Imagify\Avif\ServiceProvider',
 	'Imagify\CDN\ServiceProvider',
 	'Imagify\Picture\ServiceProvider',
 	'Imagify\Stats\ServiceProvider',
 	'Imagify\Webp\ServiceProvider',
-	'Imagify\Admin\ServiceProvider',
 ];

inc/classes/class-imagify-assets.php

@@ -276,14 +276,14 @@ public function enqueue_styles_and_scripts() {
 		 * Loaded in the bulk optimization page.
 		 */
 		if ( imagify_is_screen( 'bulk' ) ) {
-			$this->enqueue_assets( [ 'pricing-modal', 'bulk' ] );
+			$this->enqueue_assets( 'bulk' );
 		}
 
 		/*
 		 * Loaded in the settings page.
 		 */
 		if ( imagify_is_screen( 'imagify-settings' ) ) {
-			$this->enqueue_assets( [ 'sweetalert', 'notices', 'twentytwenty', 'pricing-modal', 'options' ] );
+			$this->enqueue_assets( [ 'sweetalert', 'notices', 'twentytwenty', 'options' ] );
 		}
 
 		/*
@@ -293,6 +293,8 @@ public function enqueue_styles_and_scripts() {
 			$this->enqueue_assets( [ 'files-list', 'twentytwenty' ] );
 		}
 
+		$this->enqueue_assets( 'pricing-modal' );
+
 		/**
 		 * Triggered after Imagify CSS and JS have been enqueued.
 		 *

inc/classes/class-imagify-views.php

@@ -125,6 +125,7 @@ public function init() {
 
 		// JS templates in footer.
 		add_action( 'admin_print_footer_scripts', [ $this, 'print_js_templates' ] );
+		add_action( 'admin_footer', [ $this, 'print_modal_payment' ] );
 	}
 
 
@@ -625,6 +626,12 @@ public function print_js_templates() {
 		}
 	}
 
+	/**
+	 * Print the payment modal.
+	 */
+	public function print_modal_payment() {
+		$this->print_template( 'modal-payment' );
+	}
 
 	/** ----------------------------------------------------------------------------------------- */
 	/** TOOLS =================================================================================== */