release: fixes

- Updated promotional links and buttons

Author: vytisbulkevicius

.github/workflows/test-php.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Setup PHP version
         uses: shivammathur/setup-php@v2
         with:
-          php-version: '7.1'
+          php-version: '7.4'
           extensions: simplexml
       - name: Checkout source code
         uses: actions/checkout@v2
@@ -49,7 +49,7 @@ jobs:
       - name: Setup PHP version
         uses: shivammathur/setup-php@v2
         with:
-          php-version: '7.1'
+          php-version: '7.4'
           extensions: simplexml, mysql
           tools: phpunit-polyfills
       - name: Checkout source code

classes/Visualizer/Module/Admin.php

@@ -444,58 +444,69 @@ public static function _getChartTypesLocalized( $enabledOnly = false, $get2Darra
 					'enabled' => $enabled,
 					// in ChartJS, the fill option is used to make Line chart an area: https://www.chartjs.org/docs/latest/charts/area.html
 					'supports'  => array( 'Google Charts' ),
+					'demo_url'  => 'https://demo.themeisle.com/visualizer/area-chart/',
 				),
 				'geo'         => array(
 					'name'    => esc_html__( 'Geo', 'visualizer' ),
 					'enabled' => $enabled,
 					'supports'  => array( 'Google Charts' ),
+					'demo_url'  => 'https://demo.themeisle.com/visualizer/geo-chart/',
 				),
 				'column'      => array(
 					'name'    => esc_html__( 'Column', 'visualizer' ),
 					'enabled' => $enabled,
 					'supports'  => array( 'Google Charts', 'ChartJS' ),
+					'demo_url'  => 'https://demo.themeisle.com/visualizer/column-chart/',
 				),
 				'bubble'         => array(
 					'name'    => esc_html__( 'Bubble', 'visualizer' ),
 					'enabled' => $enabled,
 					// chartjs' bubble is ugly looking (and it won't work off the default bubble.csv) so it is being excluded for the time being.
 					'supports'  => array( 'Google Charts' ),
+					'demo_url'  => 'https://demo.themeisle.com/visualizer/bubble-chart/',
 				),
 				'scatter'     => array(
 					'name'    => esc_html__( 'Scatter', 'visualizer' ),
 					'enabled' => $enabled,
 					'supports'  => array( 'Google Charts' ),
+					'demo_url'  => 'https://demo.themeisle.com/visualizer/scatter-chart/',
 				),
 				'gauge'       => array(
 					'name'    => esc_html__( 'Gauge', 'visualizer' ),
 					'enabled' => $enabled,
 					'supports'  => array( 'Google Charts' ),
+					'demo_url'  => 'https://demo.themeisle.com/visualizer/gauge-chart/',
 				),
 				'candlestick' => array(
 					'name'    => esc_html__( 'Candlestick', 'visualizer' ),
 					'enabled' => $enabled,
 					'supports'  => array( 'Google Charts' ),
+					'demo_url'  => 'https://demo.themeisle.com/visualizer/candlestick-chart/',
 				),
 				// pro types
 				'timeline'    => array(
 					'name'    => esc_html__( 'Timeline', 'visualizer' ),
 					'enabled' => false,
 					'supports'  => array( 'Google Charts', 'ChartJS' ),
+					'demo_url'  => 'https://demo.themeisle.com/visualizer/timeline-chart/',
 				),
 				'combo'       => array(
 					'name'    => esc_html__( 'Combo', 'visualizer' ),
 					'enabled' => false,
 					'supports'  => array( 'Google Charts' ),
+					'demo_url'  => 'https://demo.themeisle.com/visualizer/combo-chart/',
 				),
 				'polarArea'       => array(
 					'name'    => esc_html__( 'Polar Area', 'visualizer' ),
 					'enabled' => false,
 					'supports' => array( 'ChartJS' ),
+					'demo_url'  => 'https://demo.themeisle.com/visualizer/polar-area-chart/',
 				),
 				'radar'       => array(
 					'name'    => esc_html__( 'Radar/Spider', 'visualizer' ),
 					'enabled' => false,
 					'supports' => array( 'ChartJS' ),
+					'demo_url'  => 'https://demo.themeisle.com/visualizer/radar-spider-chart/',
 				),
 			)
 		);
@@ -731,7 +742,7 @@ public function handleGetProSubMenu() {
 				font-weight: 600;
 				color: #fff;
 			}
-			#toplevel_page_visualizer ul.wp-submenu li:last-child > a {
+			#toplevel_page_visualizer ul.wp-submenu li:last-child > a > span {
 				color: #fff !important;
 			}
 			#toplevel_page_visualizer ul.wp-submenu li:last-child > a:hover {
@@ -1134,7 +1145,7 @@ public function getPluginMetaLinks( $plugin_meta, $plugin_file ) {
 			// flattr link
 			$plugin_meta[] = sprintf(
 				'<a style="color:red" href="' . tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'pluginrow' ) . '" target="_blank">%s</a>',
-				esc_html__( 'Pro Addon', 'visualizer' )
+				esc_html__( 'Get Visualizer Pro', 'visualizer' )
 			);
 		}
 

classes/Visualizer/Render/Library.php

@@ -450,7 +450,7 @@ private function _renderSidebar() {
 				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( '6 more chart types', 'visualizer' );
 			} else {
 				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( '11 more chart types', 'visualizer' ) . '</li>';
-				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Manual Data Editor', 'visualizer' ) . '</li>';
+				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Synchronize Data Periodically', 'visualizer' ) . '</li>';
 				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'ChartJS Charts', 'visualizer' ) . '</li>';
 				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Table Google chart', 'visualizer' ) . '</li>';
 				echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Frontend Actions(Print, Export, Copy, Download)', 'visualizer' ) . '</li>';
@@ -464,7 +464,7 @@ private function _renderSidebar() {
 			echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'WPML support for translating charts', 'visualizer' ) . '</li>';
 			echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Integration with Woocommerce Data endpoints', 'visualizer' ) . '</li>';
 			echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Auto-sync with online files', 'visualizer' ) . '</li></ul>';
-			echo '<p><a href="' . tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'sidebarupsell' ) . '" target="_blank" class="button button-primary">' . __( 'View more features', 'visualizer' ) . '</a></p>';
+			echo '<p class="vz-sidebar-box-action"><a href="' . tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'sidebarMenuUpgrade', 'index' ) . '#pro-features" target="_blank" class="button button-secondary">' . __( 'View more features', 'visualizer' ) . '</a><a href="' . tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'sidebarMenuUpgrade', 'index' ) . '#pricing" target="_blank" class="button button-primary">' . __( 'Upgrade Now', 'visualizer' ) . '</a></p>';
 			echo '</div>';
 			echo '</div>';
 			echo '</div>';

classes/Visualizer/Render/Page/Types.php

@@ -62,8 +62,12 @@ protected function _renderContent() {
 			}
 			echo '<div class="type-box type-box-', $type, $lib_classes, '">';
 			if ( ! $array['enabled'] ) {
-				echo "<a class='pro-upsell' href='" . tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'charttypes' ) . "' target='_blank'>";
+				$demo_url = isset( $array['demo_url'] ) ? $array['demo_url'] : '';
+				echo '<div class="pro-upsell">';
 				echo "<span class='visualizder-pro-label'>" . __( 'PREMIUM', 'visualizer' ) . '</span>';
+				echo '<div class="pro-upsell-overlay">';
+				echo '<div class="pro-upsell-action"><a href="' . esc_url( $demo_url ) . '" target="_blank" class="button button-secondary">' . __( 'View Demo', 'visualizer' ) . '</a><a href="' . tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'procharts', 'Addnewcharts' ) . '" target="_blank" class="button button-primary">' . __( 'Upgrade Now', 'visualizer' ) . '</a></div>';
+				echo '</div>';
 			}
 			echo '<label class="type-label', $type === $this->type ? ' type-label-selected' : '', '">';
 			echo '<span>' . $array['name'] . '</span>';
@@ -72,7 +76,7 @@ protected function _renderContent() {
 			}
 			echo '</label>';
 			if ( ! $array['enabled'] ) {
-				echo '</a>';
+				echo '</div>';
 			}
 			echo '</div>';
 		}

css/frame.css

@@ -535,7 +535,7 @@ div.viz-group-content .viz-group-description {
 	height: 17px;
 	border: none;
 	color: #fff;
-	z-index: 1;
+	z-index: 4;
 	background: #c55555;
 }
 
@@ -1633,3 +1633,50 @@ canvas.chartjs-render-monitor {
 #vz-frontend-actions .only-pro-inner, #vz-data-controls .only-pro-inner {
 	text-align: center;
 }
+
+/******************************************************************************/
+/******************************** chart type box upsell ***********************/
+/******************************************************************************/
+
+.pro-upsell .pro-upsell-overlay {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	top: 0;
+	display: grid;
+	place-items: center;
+	background-color: rgba(255, 255, 255, 0.7);
+	z-index: 1;
+	opacity: 0;
+	visibility: hidden;
+	transition: all .3s ease-in-out;
+}
+.pro-upsell:hover .pro-upsell-overlay{
+	opacity: 1;
+	visibility: visible;
+}
+
+.pro-upsell .pro-upsell-overlay .button {
+    width: 155px;
+    height: 39px;
+    background: #007CBA;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    color: #FFFFFF;
+    justify-content: center;
+}
+.pro-upsell .pro-upsell-overlay .button.button-secondary{
+	background: #ffffff;
+	color: #007CBA;
+}
+.pro-upsell .pro-upsell-overlay .pro-upsell-action {
+	display: flex;
+	gap: 20px;
+}
+.pro-upsell .pro-upsell-overlay .pro-upsell-action .button{
+	width: 100%;
+	text-align: center;
+}

css/library.css

@@ -252,6 +252,10 @@
     color: #FFFFFF;
     justify-content: center;
 }
+.visualizer-sidebar-box .button.button-secondary{
+	background: #ffffff;
+	color: #007CBA;
+}
 .visualizer-sidebar-box .we-offer{
     background-color: transparent;
     color: #007CBA;
@@ -382,6 +386,15 @@ input:checked + .visualizer-slider:before {
 #visualizer-sidebar .visualizer-sidebar-box p {
 	margin-bottom: 0;
 }
+#visualizer-sidebar .visualizer-sidebar-box p.vz-sidebar-box-action {
+	display: flex;
+	gap: 20px;
+	margin-top: 25px;
+}
+#visualizer-sidebar .visualizer-sidebar-box p.vz-sidebar-box-action .button{
+	width: 100%;
+	text-align: center;
+}
 #visualizer-sidebar.one-columns {
     border-top: 5px solid #007CBA;
 }

index.php

@@ -157,7 +157,7 @@ function() {
 				'location'         => 'visualizer',
 				'has_upgrade_menu' => ! Visualizer_Module::is_pro(),
 				'upgrade_text'     => esc_html__( 'Get Visualizer Pro', 'feedzy-rss-feeds' ),
-				'upgrade_link'     => esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'sidebarMenuUpgrade' ) ),
+				'upgrade_link'     => esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'sidebarMenuUpgrade', 'index' ) ),
 			);
 		}
 	);

phpcs.xml

@@ -7,6 +7,7 @@
     <exclude-pattern>node_modules/*</exclude-pattern>
     <exclude-pattern>vendor/*</exclude-pattern>
     <exclude-pattern>lib/*</exclude-pattern>
+    <exclude-pattern>tests/*</exclude-pattern>
     <rule ref="WordPress-Core">
         <exclude name="Squiz.Commenting.FileComment.SpacingAfterComment" />
         <exclude name="Generic.Files.LowercasedFilename" />

tests/test-ajax.php

@@ -37,7 +37,7 @@ class Test_Visualizer_Ajax extends WP_Ajax_UnitTestCase {
 	/**
 	 * Set up.
 	 */
-	public function setUp() {
+	public function setUp(): void {
 		parent::setUp();
 		$this->admin_user_id = $this->factory->user->create(
 			array(