Fix UI changes and typo error Codeinwp/visualizer-pro#343

Author: girishpanchal30

css/style-wizard.css

@@ -481,6 +481,7 @@ fieldset[disabled] .form-control {
 .vz-btn-group{
 	display: flex;
 	flex-wrap: wrap;
+	align-items: center;
 }
 .vz-btn-group .btn{
 	margin-bottom: 8px;
@@ -489,7 +490,6 @@ fieldset[disabled] .form-control {
 .vz-btn-group .btn:last-child{
 	margin-right: 0px;
 }
-/* visualizer button style end */
 
 .vz-wizard-wrap .container{
 	max-width: 930px;
@@ -1111,10 +1111,24 @@ display: none;
 	flex-wrap: wrap;
 	align-items: center;
 }
-.vz-chart-option .h3 span.pro-label{
+.vz-pro-label-wrap {
+	order: 3;
+	width: calc(100% - 20px);
+	padding-left: 12px;
+	position: relative;
+	z-index: 1;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+}
+.vz-pro-label-wrap h3 {
+	opacity: .7;
+	color: #000000;
+}
+.vz-pro-label-wrap span.pro-label{
 	margin-left: 30px;
+	font-weight: 600;
 }
-
 .vz-chart-option input[type=radio].vz-radio-btn:checked ~ .bg{
 	background: #BDE6EB;	
 }
@@ -1201,6 +1215,9 @@ display: none;
 .vz-chart-list .slick-arrow[disabled="disabled"], .vz-chart-list .slick-arrow[aria-disabled="true"] {
 	color: #eeeeee
 }
+.vz-btn-group span.spinner {
+	margin-bottom: 8px;
+}
 
 @media (max-width: 767px){
 	.wp-toolbar .vz-wizard-fullscreen{margin-top: 0;}

js/setup-wizard.js

@@ -12,21 +12,14 @@ jQuery(function ($) {
 		if ( 1 == id ) {
 			var chartType = $(".vz-radio-btn:checked").val();
 			var percentBarWidth = 100;
-			var delayCount = 1;
 			var loaderDelay;
 			$.ajax( {
-				xhr: function () {
-					var xhr = new window.XMLHttpRequest();
-					xhr.addEventListener("progress", function (evt) {
-						if (evt.lengthComputable) {
-							var percentComplete = evt.loaded / evt.total;
-							percentBarWidth = percentBarWidth - percentComplete;
-							$('.vz-progress-bar').css({
-								width: percentBarWidth + '%'
-							});
-						}
-					}, false);
-					return xhr;
+				beforeSend: function() {
+					loaderDelay = setInterval(function () {
+						$('.vz-progress-bar').css({
+							width: percentBarWidth-- + '%'
+						});
+					}, 1000);
 				},
 				type: 'POST',
 				url: visualizerSetupWizardData.ajax.url,
@@ -38,11 +31,12 @@ jQuery(function ($) {
 					step: 'step_2',
 				},
 				success: function (data) {
+					clearInterval( loaderDelay );
 					loaderDelay = setInterval(function () {
 						$('.vz-progress-bar').css({
 							width: percentBarWidth-- + '%'
 						});
-						if ( delayCount > 4 ) {
+						if ( percentBarWidth <= 0 ) {
 							if ( 1 === data.success ) {
 								var importMessage = jQuery('[data-import_message]');
 								importMessage
@@ -58,11 +52,12 @@ jQuery(function ($) {
 							} else {
 								$('#smartwizard').smartWizard('reset');
 							}
-							$('#step-2').find('.vz-progress-bar').animate({ width: '0' });
+							$('.vz-progress-bar').css({
+								width: 0
+							});
 							clearInterval( loaderDelay );
 						}
-						delayCount++;
-					}, 1000 );
+					}, 100 );
 				},
 				error: function() {
 					$('#step-2').find('.vz-progress-bar').animate({ width: '0' });

templates/setup-wizard.php

@@ -125,9 +125,11 @@ class="dashicons dashicons-arrow-left-alt"></span>
 												<li>
 													<div class="vz-pro-option">
 														<label class="vz-chart-option">
-															<input type="radio" class="vz-radio-btn" id="vz-chart-5">
-															<h3 class="h3"><?php esc_html_e( 'Geo chart', 'visualizer' ); ?> <span
-																	class="pro-label"><?php esc_html_e( 'PRO', 'visualizer' ); ?> </span></h3>
+															<input type="radio" class="vz-radio-btn" id="vz-chart-5" readonly>
+															<div class="vz-pro-label-wrap">
+																<h3><?php esc_html_e( 'Geo chart', 'visualizer' ); ?></h3>
+																<span class="pro-label"><?php esc_html_e( 'PRO', 'visualizer' ); ?></span>
+															</div>
 															<div class="img type-box-geo"></div>
 															<div class="bg"></div>
 														</label>
@@ -169,7 +171,7 @@ class="btn btn-secondary"><?php esc_html_e( 'Upgrade to Pro', 'visualizer' ); ?>
 							<div class="vz-accordion-item__title">
 								<div class="vz-accordion-item__button">
 									<h2 class="h2 pb-8"><?php esc_html_e( 'You\'re almost done!', 'visualizer' ); ?></h2>
-									<p class="p"><?php esc_html_e( 'We use demo data during the import process, don&#x92;t worry you can customize it latter', 'visualizer' ); ?></p>
+									<p class="p"><?php esc_html_e( 'We use demo data during the import process, don&#x92;t worry you can customize it later', 'visualizer' ); ?></p>
 								</div>
 								<div class="vz-progress">
 									<div class="vz-progress-bar" style="width: 100%;"></div>