chore: addresed pr review changes

Author: GrigoreMihai

classes/Visualizer/Render/Library.php

@@ -212,6 +212,9 @@ private function getDisplayForm() {
 	 * @access private
 	 */
 	private function _renderProPopupBlocker() {
+		if (  Visualizer_Module::is_pro() ) {
+			return;
+		}
 		$license = get_option( 'visualizer_pro_license_data', 'free' );
 		$license_key = '';
 		$download_id = '';
@@ -221,13 +224,11 @@ private function _renderProPopupBlocker() {
 		}
 		$admin_license_url = admin_url( 'options-general.php#visualizer_pro_license' );
 		$renew_license_url = tsdk_utmify( Visualizer_Plugin::STORE_URL . '?edd_license_key=' . $license_key . '&download_id=' . $download_id, 'visualizer_license_block' );
-
-		if ( ! Visualizer_Module::is_pro() ) {
-			echo '
+		echo '
 				<div class="vizualizer-renew-notice-overlay" id="overlay-visualizer"></div>
 				<div class="vizualizer-renew-notice-popup">
 					<h1 class="vizualizer-renew-notice-heading">Alert!</h1>
-					<p class="vizualizer-renew-notice-message">' . esc_html__( 'In order to edit premium charts, benefit from updates and support for Visualizer Premium plugin, please renew your license code or activate it.', 'visualizer' ) . '	</p>
+					<p class="vizualizer-renew-notice-message">' . esc_html__( 'In order to edit premium charts, benefit from updates and support for Visualizer Premium plugin, please renew your license code or activate it.', 'visualizer' ) . '</p>
 					<div class="vizualizer-renew-notice-buttons-container">
 						<a href="' . esc_url( $renew_license_url) . '" target="_blank">
 							<button class="vizualizer-renew-notice-button vizualizer-renew-notice-renew-button">
@@ -239,18 +240,20 @@ private function _renderProPopupBlocker() {
 								<span class="dashicons dashicons-unlock"></span> ' . esc_html__( 'Activate License', 'visualizer' ) . ' 
 							</button>
 						</a>
+						<button class="vizualizer-renew-notice-button vizualizer-renew-notice-close-icon" aria-label="Close" onclick="closePopup()">
+							<i class="dashicons dashicons-no"></i>
+						</button>
 					</div>
-					<i class="dashicons dashicons-no vizualizer-renew-notice-close-icon"></i>
 				</div>
 				<script>
-				jQuery(document).ready(function($) {
-					$(".vizualizer-renew-notice-close-icon").on("click", function() {
-						$("#overlay-visualizer").css("display", "none");
-						$(".vizualizer-renew-notice-popup").css("display", "none");
-					});
-				});
+				function closePopup() {
+					var overlay = document.getElementById("overlay-visualizer");
+					var popup = document.querySelector(".vizualizer-renew-notice-popup");
+					overlay.style.display = "none";
+					popup.style.display = "none";
+				}
 				</script>';
-		}
+
 	}
 	/**
 	 * Renders library content.

css/library.css

@@ -595,8 +595,17 @@ div#visualizer-types ul, div#visualizer-types form p {
 
 .vizualizer-renew-notice-close-icon {
 	position: absolute;
-	top: 10px;
-	right: 10px;
+	top: -10px;
+	right: -70px;
 	cursor: pointer;
 	color: #333;
+	background: none;
+	border: none;
+	padding: 0;
+	outline: none;
+	/* Reset button styles */
+	display: inline-block;
+	font: inherit;
+	text-align: inherit;
+	text-decoration: none;
 }

js/library.js

@@ -85,11 +85,11 @@ function createPopupProBlocker( $ , e ) {
             $(this).parent('form').submit();
         });
 
-        $('.visualizer-chart-shortcode').click(function (e) {
+        $('.visualizer-chart-shortcode').click(function (event) {
 
-            if ( createPopupProBlocker( $, e ) ) {
-                e.preventDefault();
-                e.stopPropagation();
+            if ( createPopupProBlocker( $, event ) ) {
+                event.preventDefault();
+                event.stopPropagation();
                 return;
             }
 
@@ -98,12 +98,12 @@ function createPopupProBlocker( $ , e ) {
             if (window.getSelection && document.createRange) {
                 selection = window.getSelection();
                 range = document.createRange();
-                range.selectNodeContents(e.target);
+                range.selectNodeContents(event.target);
                 selection.removeAllRanges();
                 selection.addRange(range);
             } else if (document.selection && document.body.createTextRange) {
                 range = document.body.createTextRange();
-                range.moveToElementText(e.target);
+                range.moveToElementText(event.target);
                 range.select();
             }
         });