setup-wizard.php: 4.0.8 vs 3.10.10 · Visualizer – Tables & Charts Manager with Built-in AI Generator

← All changes | templates/setup-wizard.php +342 -182 3.10.10 → 4.0.8 View file →

		@@ -5,19 +5,25 @@
5	5	* @category Visualizer
6	6	* @package Templates
7	7	*/
8	8
9		-$dashboard_url = add_query_arg(
10		- array(
11		- 'action' => 'visualizer_dismiss_wizard',
12		- 'status' => 0,
	9	+$dashboard_url = wp_nonce_url(
	10	+ add_query_arg(
	11	+ array(
	12	+ 'action' => 'visualizer_dismiss_wizard',
	13	+ 'status' => 0,
	14	+ ),
	15	+ admin_url( 'admin.php' )
13	16	),
14		- admin_url( 'admin.php' )
	17	+ 'visualizer_dismiss_wizard'
15	18	);
16	19
17	20	$chart_id = ! empty( $this->wizard_data['chart_id'] ) ? (int) $this->wizard_data['chart_id'] : '';
	21	+$chart_type_default = ! empty( $this->wizard_data['chart_type'] ) ? $this->wizard_data['chart_type'] : 'pie';
18	22	$wp_optimole_active = is_plugin_active( 'optimole-wp/optimole-wp.php' );
19		-$last_step_number = 5;
	23	+$wp_otter_active = is_plugin_active( 'otter-blocks/otter-blocks.php' );
	24	+$wp_spc_active = is_plugin_active( 'wp-cloudflare-page-cache/wp-cloudflare-super-page-cache.php' );
	25	+$last_step_number = 3;
20	26
21	27	// Check if we are in the Live Preview which is used to showcase only the plugin features without any other distractions. Ideal for marketing purposes (like Live Preview on WordPress.org or on the plugin's website)
22	28	$is_live_preview = ! empty( $_GET['env'] ) ? ( 'preview' === sanitize_key( $_GET['env'] ) ) : false;
23	29
		@@ -50,33 +56,14 @@
50	56	<a class="nav-link" href="#step-2">
51	57	2
52	58	</a>
53	59	</li>
54		- <li class="nav-item">
55		- <a class="nav-link" href="#step-3">
56		- 3
57		- </a>
58		- </li>
59	60	<?php if ( ! $is_live_preview ) { ?>
60		- <?php if ( ! $wp_optimole_active ) : ?>
61		- <li class="nav-item">
62		- <a class="nav-link" href="#step-4">
63		- 4
64		- </a>
65		- </li>
66		- <li class="nav-item">
67		- <a class="nav-link" href="#step-5">
68		- 5
69		- </a>
70		- </li>
71		- <?php else : ?>
72		- <?php $last_step_number = 4; ?>
73		- <li class="nav-item">
74		- <a class="nav-link" href="#step-4">
75		- 4
76		- </a>
77		- </li>
78		- <?php endif; ?>
	61	+ <li class="nav-item">
	62	+ <a class="nav-link" href="#step-3">
	63	+ 3
	64	+ </a>
	65	+ </li>
79	66	<?php } ?>
80	67	</ul>
81	68	<div class="tab-content">
82	69	<div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
		@@ -83,11 +70,11 @@
83	70	<div class="vz-accordion-item">
84	71	<div class="vz-accordion-item__title">
85	72	<div class="vz-accordion-item__button">
86	73	<h2 class="h2 pb-8">
87		- <?php esc_html_e( 'Select chart from the below available options', 'visualizer' ); ?></h2>
	74	+ <?php esc_html_e( 'Select a chart from the options available below', 'visualizer' ); ?></h2>
88	75	<p class="p">
89		- <?php esc_html_e( 'Pro tip: Keep your requirements in mind and select best chart for it', 'visualizer' ); ?>
	76	+ <?php esc_html_e( 'Pro tip: Keep your requirements in mind and choose the best chart to meet them.', 'visualizer' ); ?>
90	77	</p>
91	78	</div>
92	79	</div>
93	80	<div class="vz-accordion-item__content border-top">
		@@ -96,9 +83,9 @@
96	83	<div class="vz-chart-list">
97	84	<ul>
98	85	<li>
99	86	<label class="vz-chart-option" for="vz-chart-1">
100		- <input type="radio" class="vz-radio-btn" id="vz-chart-1" name="visualizer[wizard_data][chart_type]" value="pie">
	87	+ <input type="radio" class="vz-radio-btn" id="vz-chart-1" name="visualizer[wizard_data][chart_type]" value="pie" <?php echo checked( $chart_type_default, 'pie', false ); ?>>
101	88	<h3 class="h3"><?php esc_html_e( 'Pie/Donut chart', 'visualizer' ); ?></h3>
102	89	<div class="img type-box-pie"></div>
103	90	<div class="bg"></div>
104	91	</label>
		@@ -104,9 +91,9 @@
104	91	</label>
105	92	</li>
106	93	<li>
107	94	<label class="vz-chart-option" for="vz-chart-2">
108		- <input type="radio" class="vz-radio-btn" id="vz-chart-2" name="visualizer[wizard_data][chart_type]" value="bar">
	95	+ <input type="radio" class="vz-radio-btn" id="vz-chart-2" name="visualizer[wizard_data][chart_type]" value="bar" <?php echo checked( $chart_type_default, 'bar', false ); ?>>
109	96	<h3 class="h3"><?php esc_html_e( 'Bar chart', 'visualizer' ); ?></h3>
110	97	<div class="img type-box-bar"></div>
111	98	<div class="bg"></div>
112	99	</label>
		@@ -112,9 +99,9 @@
112	99	</label>
113	100	</li>
114	101	<li>
115	102	<label class="vz-chart-option" for="vz-chart-3">
116		- <input type="radio" class="vz-radio-btn" id="vz-chart-3" name="visualizer[wizard_data][chart_type]" value="line">
	103	+ <input type="radio" class="vz-radio-btn" id="vz-chart-3" name="visualizer[wizard_data][chart_type]" value="line" <?php echo checked( $chart_type_default, 'line', false ); ?>>
117	104	<h3 class="h3"><?php esc_html_e( 'Line chart', 'visualizer' ); ?></h3>
118	105	<div class="img type-box-line"></div>
119	106	<div class="bg"></div>
120	107	</label>
		@@ -120,9 +107,9 @@
120	107	</label>
121	108	</li>
122	109	<li>
123	110	<label class="vz-chart-option" for="vz-chart-4">
124		- <input type="radio" class="vz-radio-btn" id="vz-chart-4" name="visualizer[wizard_data][chart_type]" value="tabular">
	111	+ <input type="radio" class="vz-radio-btn" id="vz-chart-4" name="visualizer[wizard_data][chart_type]" value="tabular" <?php echo checked( $chart_type_default, 'tabular', false ); ?>>
125	112	<h3 class="h3"><?php esc_html_e( 'Table', 'visualizer' ); ?></h3>
126	113	<div class="img type-box-tabular"></div>
127	114	<div class="bg"></div>
128	115	</label>
		@@ -132,9 +119,9 @@
132	119	<label class="vz-chart-option">
133	120	<input type="radio" class="vz-radio-btn" id="vz-chart-5" readonly>
134	121	<div class="vz-pro-label-wrap">
135	122	<h3><?php esc_html_e( 'Geo chart', 'visualizer' ); ?></h3>
136		- <span class="pro-label"><?php esc_html_e( 'PRO', 'visualizer' ); ?></span>
	123	+ <span class="pro-label"><?php esc_html_e( 'PREMIUM', 'visualizer' ); ?></span>
137	124	</div>
138	125	<div class="img type-box-geo"></div>
139	126	<div class="bg"></div>
140	127	</label>
		@@ -146,27 +133,210 @@
146	133	</div>
147	134	</div>
148	135	</li>
149	136	<li>
150		- <div class="vz-power-pro">
151		- <h3 class="h3"><?php esc_html_e( 'Discover the power of PRO!', 'visualizer' ); ?></h3>
152		- <ul>
153		- <li><?php esc_html_e( '11 more chart types', 'visualizer' ); ?></li>
154		- <li><?php esc_html_e( 'Private charts', 'visualizer' ); ?></li>
155		- <li><?php esc_html_e( 'Auto-sync with online files', 'visualizer' ); ?></li>
156		- <li>
157		- <?php esc_html_e( 'Frontend Actions(Print, Export, Copy, Download', 'visualizer' ); ?>)
158		- </li>
159		- <li><?php esc_html_e( 'Create charts from WordPress tables', 'visualizer' ); ?></li>
160		- </ul>
161		- <a href="<?php echo esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'setupWizard' ) ); ?>" class="btn btn-secondary" target="_blank"><?php esc_html_e( 'View more features', 'visualizer' ); ?></a>
	137	+ <div class="vz-pro-option">
	138	+ <label class="vz-chart-option">
	139	+ <input type="radio" class="vz-radio-btn" id="vz-chart-6" readonly>
	140	+ <div class="vz-pro-label-wrap">
	141	+ <h3><?php esc_html_e( 'Area chart', 'visualizer' ); ?></h3>
	142	+ <span class="pro-label"><?php esc_html_e( 'PREMIUM', 'visualizer' ); ?></span>
	143	+ </div>
	144	+ <div class="img type-box-area"></div>
	145	+ <div class="bg"></div>
	146	+ </label>
	147	+ <div class="pro-overlay">
	148	+ <div class="pro-box">
	149	+ <a href="<?php echo esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'setupWizard' ) ); ?>"
	150	+ class="btn btn-secondary" target="_blank"><?php esc_html_e( 'Upgrade to Pro', 'visualizer' ); ?></a>
	151	+ </div>
	152	+ </div>
162	153	</div>
163	154	</li>
	155	+ <li>
	156	+ <div class="vz-pro-option">
	157	+ <label class="vz-chart-option">
	158	+ <input type="radio" class="vz-radio-btn" id="vz-chart-7" readonly>
	159	+ <div class="vz-pro-label-wrap">
	160	+ <h3><?php esc_html_e( 'Column chart', 'visualizer' ); ?></h3>
	161	+ <span class="pro-label"><?php esc_html_e( 'PREMIUM', 'visualizer' ); ?></span>
	162	+ </div>
	163	+ <div class="img type-box-column"></div>
	164	+ <div class="bg"></div>
	165	+ </label>
	166	+ <div class="pro-overlay">
	167	+ <div class="pro-box">
	168	+ <a href="<?php echo esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'setupWizard' ) ); ?>"
	169	+ class="btn btn-secondary" target="_blank"><?php esc_html_e( 'Upgrade to Pro', 'visualizer' ); ?></a>
	170	+ </div>
	171	+ </div>
	172	+ </div>
	173	+ </li>
	174	+ <li>
	175	+ <div class="vz-pro-option">
	176	+ <label class="vz-chart-option">
	177	+ <input type="radio" class="vz-radio-btn" id="vz-chart-8" readonly>
	178	+ <div class="vz-pro-label-wrap">
	179	+ <h3><?php esc_html_e( 'Bubble chart', 'visualizer' ); ?></h3>
	180	+ <span class="pro-label"><?php esc_html_e( 'PREMIUM', 'visualizer' ); ?></span>
	181	+ </div>
	182	+ <div class="img type-box-bubble"></div>
	183	+ <div class="bg"></div>
	184	+ </label>
	185	+ <div class="pro-overlay">
	186	+ <div class="pro-box">
	187	+ <a href="<?php echo esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'setupWizard' ) ); ?>"
	188	+ class="btn btn-secondary" target="_blank"><?php esc_html_e( 'Upgrade to Pro', 'visualizer' ); ?></a>
	189	+ </div>
	190	+ </div>
	191	+ </div>
	192	+ </li>
	193	+ <li>
	194	+ <div class="vz-pro-option">
	195	+ <label class="vz-chart-option">
	196	+ <input type="radio" class="vz-radio-btn" id="vz-chart-9" readonly>
	197	+ <div class="vz-pro-label-wrap">
	198	+ <h3><?php esc_html_e( 'Scatter chart', 'visualizer' ); ?></h3>
	199	+ <span class="pro-label"><?php esc_html_e( 'PREMIUM', 'visualizer' ); ?></span>
	200	+ </div>
	201	+ <div class="img type-box-scatter"></div>
	202	+ <div class="bg"></div>
	203	+ </label>
	204	+ <div class="pro-overlay">
	205	+ <div class="pro-box">
	206	+ <a href="<?php echo esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'setupWizard' ) ); ?>"
	207	+ class="btn btn-secondary" target="_blank"><?php esc_html_e( 'Upgrade to Pro', 'visualizer' ); ?></a>
	208	+ </div>
	209	+ </div>
	210	+ </div>
	211	+ </li>
	212	+ <li>
	213	+ <div class="vz-pro-option">
	214	+ <label class="vz-chart-option">
	215	+ <input type="radio" class="vz-radio-btn" id="vz-chart-10" readonly>
	216	+ <div class="vz-pro-label-wrap">
	217	+ <h3><?php esc_html_e( 'Gauge chart', 'visualizer' ); ?></h3>
	218	+ <span class="pro-label"><?php esc_html_e( 'PREMIUM', 'visualizer' ); ?></span>
	219	+ </div>
	220	+ <div class="img type-box-gauge"></div>
	221	+ <div class="bg"></div>
	222	+ </label>
	223	+ <div class="pro-overlay">
	224	+ <div class="pro-box">
	225	+ <a href="<?php echo esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'setupWizard' ) ); ?>"
	226	+ class="btn btn-secondary" target="_blank"><?php esc_html_e( 'Upgrade to Pro', 'visualizer' ); ?></a>
	227	+ </div>
	228	+ </div>
	229	+ </div>
	230	+ </li>
	231	+ <li>
	232	+ <div class="vz-pro-option">
	233	+ <label class="vz-chart-option">
	234	+ <input type="radio" class="vz-radio-btn" id="vz-chart-11" readonly>
	235	+ <div class="vz-pro-label-wrap">
	236	+ <h3><?php esc_html_e( 'Candlestick chart', 'visualizer' ); ?></h3>
	237	+ <span class="pro-label"><?php esc_html_e( 'PREMIUM', 'visualizer' ); ?></span>
	238	+ </div>
	239	+ <div class="img type-box-candlestick"></div>
	240	+ <div class="bg"></div>
	241	+ </label>
	242	+ <div class="pro-overlay">
	243	+ <div class="pro-box">
	244	+ <a href="<?php echo esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'setupWizard' ) ); ?>"
	245	+ class="btn btn-secondary" target="_blank"><?php esc_html_e( 'Upgrade to Pro', 'visualizer' ); ?></a>
	246	+ </div>
	247	+ </div>
	248	+ </div>
	249	+ </li>
	250	+ <li>
	251	+ <div class="vz-pro-option">
	252	+ <label class="vz-chart-option">
	253	+ <input type="radio" class="vz-radio-btn" id="vz-chart-12" readonly>
	254	+ <div class="vz-pro-label-wrap">
	255	+ <h3><?php esc_html_e( 'Timeline', 'visualizer' ); ?></h3>
	256	+ <span class="pro-label"><?php esc_html_e( 'PREMIUM', 'visualizer' ); ?></span>
	257	+ </div>
	258	+ <div class="img type-box-timeline"></div>
	259	+ <div class="bg"></div>
	260	+ </label>
	261	+ <div class="pro-overlay">
	262	+ <div class="pro-box">
	263	+ <a href="<?php echo esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'setupWizard' ) ); ?>"
	264	+ class="btn btn-secondary" target="_blank"><?php esc_html_e( 'Upgrade to Pro', 'visualizer' ); ?></a>
	265	+ </div>
	266	+ </div>
	267	+ </div>
	268	+ </li>
	269	+ <li>
	270	+ <div class="vz-pro-option">
	271	+ <label class="vz-chart-option">
	272	+ <input type="radio" class="vz-radio-btn" id="vz-chart-13" readonly>
	273	+ <div class="vz-pro-label-wrap">
	274	+ <h3><?php esc_html_e( 'Combo', 'visualizer' ); ?></h3>
	275	+ <span class="pro-label"><?php esc_html_e( 'PREMIUM', 'visualizer' ); ?></span>
	276	+ </div>
	277	+ <div class="img type-box-combo"></div>
	278	+ <div class="bg"></div>
	279	+ </label>
	280	+ <div class="pro-overlay">
	281	+ <div class="pro-box">
	282	+ <a href="<?php echo esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'setupWizard' ) ); ?>"
	283	+ class="btn btn-secondary" target="_blank"><?php esc_html_e( 'Upgrade to Pro', 'visualizer' ); ?></a>
	284	+ </div>
	285	+ </div>
	286	+ </div>
	287	+ </li>
	288	+ <li>
	289	+ <div class="vz-pro-option">
	290	+ <label class="vz-chart-option">
	291	+ <input type="radio" class="vz-radio-btn" id="vz-chart-14" readonly>
	292	+ <div class="vz-pro-label-wrap">
	293	+ <h3><?php esc_html_e( 'Polar Area', 'visualizer' ); ?></h3>
	294	+ <span class="pro-label"><?php esc_html_e( 'PREMIUM', 'visualizer' ); ?></span>
	295	+ </div>
	296	+ <div class="img type-box-polarArea"></div>
	297	+ <div class="bg"></div>
	298	+ </label>
	299	+ <div class="pro-overlay">
	300	+ <div class="pro-box">
	301	+ <a href="<?php echo esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'setupWizard' ) ); ?>"
	302	+ class="btn btn-secondary" target="_blank"><?php esc_html_e( 'Upgrade to Pro', 'visualizer' ); ?></a>
	303	+ </div>
	304	+ </div>
	305	+ </div>
	306	+ </li>
	307	+ <li>
	308	+ <div class="vz-pro-option">
	309	+ <label class="vz-chart-option">
	310	+ <input type="radio" class="vz-radio-btn" id="vz-chart-15" readonly>
	311	+ <div class="vz-pro-label-wrap">
	312	+ <h3><?php esc_html_e( 'Radar', 'visualizer' ); ?></h3>
	313	+ <span class="pro-label"><?php esc_html_e( 'PREMIUM', 'visualizer' ); ?></span>
	314	+ </div>
	315	+ <div class="img type-box-radar"></div>
	316	+ <div class="bg"></div>
	317	+ </label>
	318	+ <div class="pro-overlay">
	319	+ <div class="pro-box">
	320	+ <a href="<?php echo esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'setupWizard' ) ); ?>"
	321	+ class="btn btn-secondary" target="_blank"><?php esc_html_e( 'Upgrade to Pro', 'visualizer' ); ?></a>
	322	+ </div>
	323	+ </div>
	324	+ </div>
	325	+ </li>
164	326	</ul>
165	327	</div>
166	328	</div>
167	329	<div class="form-block">
168	330	<button class="btn btn-primary disabled" data-step_number="1"><?php esc_html_e( 'Save And Continue', 'visualizer' ); ?> <span class="dashicons dashicons-arrow-right-alt"></span></button>
	331	+ <span class="spinner"></span>
	332	+ <div class="vz-import-status" style="display: none;">
	333	+ <div class="vz-error-notice notice notice-error hidden"></div>
	334	+ <p class="p pb-8" data-import_message="<?php esc_attr_e( 'Done! Demo data has been successfully imported.', 'visualizer' ); ?>" data-import_initial="<?php esc_attr_e( 'Importing demo data for your selected chart...', 'visualizer' ); ?>"><?php esc_html_e( 'Importing demo data for your selected chart...', 'visualizer' ); ?></p>
	335	+ <div class="vz-progress">
	336	+ <div class="vz-progress-bar"></div>
	337	+ </div>
	338	+ </div>
169	339	</div>
170	340	</div>
171	341	</div>
172	342	</div>
		@@ -174,87 +344,47 @@
174	344	<div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
175	345	<div class="vz-accordion-item">
176	346	<div class="vz-accordion-item__title">
177	347	<div class="vz-accordion-item__button">
178		- <h2 class="h2 pb-8"><?php esc_html_e( 'You\'re almost done!', 'visualizer' ); ?></h2>
179		- <p class="p"><?php esc_html_e( 'We use demo data during the import process, dont worry you can customize it later', 'visualizer' ); ?></p>
	348	+ <h2 class="h2 pb-8"><?php esc_html_e( 'Insert a chart into the draft page', 'visualizer' ); ?></h2>
	349	+ <p class="p"><?php esc_html_e( 'Create a draft page featuring a Visualizer chart with just one click.', 'visualizer' ); ?></p>
180	350	</div>
181	351	</div>
182		- <div class="vz-accordion-item__content">
	352	+ <div class="vz-accordion-item__content border-top">
183	353	<div class="vz-form-wrap">
184		- <div class="form-block" style="padding-top: 8px">
185		- <div class="vz-error-notice notice notice-error hidden"></div>
186		- <div class="pb-30">
	354	+ <div class="form-block">
	355	+ <div class="vz-accordion-item vz-features-accordion mb-0">
187	356	<div class="vz-shortcode-preview-box">
188		- <div class="vz-shortcode-preview-title border-0">
189		- <div class="icon">
190		- <img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/database-icon.png' ); ?>" alt="">
	357	+ <div class="vz-accordion-item__title vz-accordion-checkbox__title vz-accordion-title--static">
	358	+ <div class="vz-checkbox">
	359	+ <input type="checkbox" class="vz-checkbox-btn" id="insert_shortcode" checked <?php echo $is_live_preview ? 'disabled' : ''; ?>>
191	360	</div>
192		- <div class="txt" style="width: 100%;">
193		- <h4 class="h4 pb-4"><?php esc_html_e( 'Importing demo data', 'visualizer' ); ?></h4>
194		- <p class="p" data-import_message="<?php esc_attr_e( 'Done! Demo data imported successfully.', 'visualizer' ); ?>"><?php esc_html_e( 'Hold on! we are importing demo data for your selected chart', 'visualizer' ); ?></p>
195		- <div class="vz-progress" style="margin-top: 4px;">
196		- <div class="vz-progress-bar"></div>
	361	+ <div>
	362	+ <div class="vz-accordion__step-title h4 pb-4"><?php esc_html_e( 'Create a draft page', 'visualizer' ); ?></div>
	363	+ <p class="help-text"><?php esc_html_e( 'We will automatically create a draft page with Visualizer chart for preview', 'visualizer' ); ?></p>
197	364	</div>
198		- </div>
199	365	</div>
200		- </div>
201		- </div>
202		- <p class="help-text help-text-primary pb-16"><?php esc_html_e( 'Import data from other Charts, WordPress, DataBase, or Manual Data with Visualizer', 'visualizer' ); ?> <a href="<?php echo esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'setupWizard' ) ); ?>" target="_blank"><?php esc_html_e( 'Premium version', 'visualizer' ); ?></a></p>
203		- </div>
204		- <div class="form-block"><button class="btn btn-primary disabled" data-step_number="3"><?php esc_html_e( 'Continue', 'visualizer' ); ?> <span class="dashicons dashicons-arrow-right-alt"></span></button>
205		- </div>
206		- </div>
207		- </div>
208		- </div>
209		- </div>
210		- <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
211		- <div class="vz-accordion-item">
212		- <div class="vz-accordion-item__title">
213		- <div class="vz-accordion-item__button">
214		- <h2 class="h2 pb-8"><?php esc_html_e( 'Insert chart into the draft page', 'visualizer' ); ?></h2>
215		- <p class="p"><?php esc_html_e( 'Create a draft page with a Visualizer chart with just one click', 'visualizer' ); ?></p>
216		- </div>
217		- </div>
218		- <div class="vz-accordion-item__content border-top">
219		- <div class="vz-form-wrap">
220		- <div class="form-block">
221		- <div class="vz-accordion">
222		- <div class="vz-accordion-item vz-features-accordion mb-0">
223		- <div class="vz-shortcode-preview-box">
224		- <div class="vz-accordion-item__title vz-accordion-checkbox__title">
225		- <div class="vz-checkbox">
226		- <input type="checkbox" class="vz-checkbox-btn" id="insert_shortcode" checked <?php echo $is_live_preview ? 'disabled' : ''; ?>>
227		- </div>
228		- <button type="button" class="vz-accordion-item__button">
229		- <div class="vz-accordion__step-title h4 pb-4"><?php esc_html_e( 'Create a draft page', 'visualizer' ); ?></div>
230		- <p class="help-text"><?php esc_html_e( 'We will automatically create a draft page with Visualizer chart for preview', 'visualizer' ); ?></p>
231		- <div class="vz-accordion__icon"><span class="dashicons dashicons-arrow-down-alt2"></span>
	366	+ <div class="vz-accordion-item__content vz-accordion-content--static">
	367	+ <div class="vz-shortcode-preview-content">
	368	+ <?php $shortcode = '[visualizer id="{{chart_id}}" class=""]'; ?>
	369	+ <?php if ( $is_live_preview ) { ?>
	370	+ <p class="pb-16"><?php esc_html_e( 'Charts are added in the page/post via Gutenberg Blocks.', 'visualizer' ); ?></p>
	371	+ <p class="pb-16"><?php esc_html_e( 'Alternatively, you can use a shortcode with the following structure:', 'visualizer' ); ?></p>
	372	+ <?php } else { ?>
	373	+ <h4 class="h4 pb-16"><?php esc_html_e( 'Chart preview', 'visualizer' ); ?></h4>
	374	+ <div class="vz-chart pb-30">
	375	+ <?php
	376	+ if ( ! empty( $_GET['preview_chart'] ) ) {
	377	+ $shortcode = str_replace( '{{chart_id}}', $chart_id, $shortcode );
	378	+ echo do_shortcode( $shortcode );
	379	+ }
	380	+ ?>
232	381	</div>
233		- </button>
234		- </div>
235		- <div class="vz-accordion-item__content">
236		- <div class="vz-shortcode-preview-content">
237		- <?php $shortcode = '[visualizer id="{{chart_id}}" lazy="" class=""]'; ?>
238		- <?php if ( $is_live_preview ) { ?>
239		- <p class="pb-16"><?php esc_html_e( 'Charts are added in the page/post via Gutenberg Blocks.', 'visualizer' ); ?></p>
240		- <p class="pb-16"><?php esc_html_e( 'Alternatively, you can use a shortcode with the following structure:', 'visualizer' ); ?></p>
241		- <?php } else { ?>
242		- <h4 class="h4 pb-16"><?php esc_html_e( 'Chart preview', 'visualizer' ); ?></h4>
243		- <div class="vz-chart pb-30">
244		- <?php
245		- if ( ! empty( $_GET['preview_chart'] ) ) {
246		- $shortcode = str_replace( '{{chart_id}}', $chart_id, $shortcode );
247		- echo do_shortcode( $shortcode );
248		- }
249		- ?>
250		- </div>
251		- <?php } ?>
252		- <div class="vz-code-box">
253		- <input type="text" id="basic_shortcode" value="<?php echo esc_attr( $shortcode ); ?>" readonly>
254		- <button type="button" class="vz-copy-code-btn" data-clipboard-target="#basic_shortcode"><?php esc_html_e( 'click to copy', 'visualizer' ); ?> <img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/copy.svg' ); ?>" alt="">
255		- </button>
256		- </div>
	382	+ <?php } ?>
	383	+ <div class="vz-code-box">
	384	+ <input type="text" id="basic_shortcode" value="<?php echo esc_attr( $shortcode ); ?>" readonly>
	385	+ <button type="button" class="vz-copy-code-btn" data-clipboard-target="#basic_shortcode"><?php esc_html_e( 'click to copy', 'visualizer' ); ?> <img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/copy.svg' ); ?>" alt="">
	386	+ </button>
257	387	</div>
258	388	</div>
259	389	</div>
260	390	</div>
		@@ -267,90 +397,120 @@
267	397	</div>
268	398	</div>
269	399	</div>
270	400	</div>
271		- <?php if ( ! $wp_optimole_active && ! $is_live_preview ) { ?>
272		- <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
	401	+ <?php if ( ! $is_live_preview ) { ?>
	402	+ <div id="step-<?php echo esc_attr( $last_step_number ); ?>" class="tab-pane" role="tabpanel" aria-labelledby="step-<?php echo esc_attr( $last_step_number ); ?>">
273	403	<div class="vz-accordion-item">
274	404	<div class="vz-accordion-item__title">
275	405	<div class="vz-accordion-item__button">
276		- <h2 class="h2 pb-8"><?php esc_html_e( 'Extra Features', 'visualizer' ); ?></h2>
277		- <p class="p"><?php esc_html_e( 'We\'re confident you\'ll see the improvements. Otherwise, you can remove it anytime', 'visualizer' ); ?></p>
	406	+ <h2 class="h2 pb-8"><?php esc_html_e( 'You\'re all set!', 'visualizer' ); ?></h2>
	407	+ <p class="p"><?php esc_html_e( 'Optionally enhance your site and stay updated.', 'visualizer' ); ?></p>
278	408	</div>
279	409	</div>
280	410	<div class="vz-accordion-item__content border-top">
281	411	<div class="vz-form-wrap">
282		- <div class="form-block">
	412	+ <div class="form-block no-sep vz-final-block">
283	413	<div class="vz-error-notice notice notice-error hidden"></div>
284		- <div class="vz-accordion">
285		- <div class="vz-accordion-item vz-features-accordion mb-0">
286		- <div class="vz-accordion-item__title vz-accordion-checkbox__title">
287		- <div class="vz-checkbox">
288		- <input type="checkbox" class="vz-checkbox-btn" checked>
	414	+ <div class="vz-final-options">
	415	+ <div class="vz-option-card">
	416	+ <label class="vz-option-check">
	417	+ <input type="checkbox" id="enable_performance" <?php echo $wp_optimole_active ? 'checked disabled' : 'checked'; ?>>
	418	+ </label>
	419	+ <div class="vz-option-icon">
	420	+ <img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/boost-logo.png' ); ?>" width="37" height="30" alt="">
	421	+ </div>
	422	+ <div class="vz-option-body">
	423	+ <div class="vz-option-title">
	424	+ <?php esc_html_e( 'Boost your website speed', 'visualizer' ); ?>
	425	+ <span class="pro-label free-label"><?php esc_html_e( 'Free', 'visualizer' ); ?></span>
289	426	</div>
290		- <button type="button" class="vz-accordion-item__button">
291		- <div class="vz-accordion__step-title h4 pb-4"><?php esc_html_e( 'Enable perfomance features for your website.', 'visualizer' ); ?></div>
292		- <p class="help-text"><?php esc_html_e( 'Optimise and speed up your site with our trusted addon - Its Free', 'visualizer' ); ?></p>
293		- <div class="vz-accordion__icon"><span class="dashicons dashicons-arrow-down-alt2"></span>
294		- </div>
295		- </button>
	427	+ <p class="help-text">
	428	+ <?php
	429	+ if ( $wp_optimole_active ) {
	430	+ esc_html_e( 'Optimole is already active on your site.', 'visualizer' );
	431	+ } else {
	432	+ esc_html_e( 'Improve your website speed and images by 80% with Optimole.', 'visualizer' );
	433	+ }
	434	+ ?>
	435	+ </p>
296	436	</div>
297		- <div class="vz-accordion-item__content">
298		- <div class="vz-features-list">
299		- <ul>
300		- <li>
301		- <div class="icon">
302		- <img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/boost-logo.png' ); ?>" width="37" height="30" alt="">
303		- </div>
304		- <div class="txt">
305		- <div class="h4 pb-4"><?php esc_html_e( 'Boost your website speed', 'visualizer' ); ?> <span class="pro-label free-label"><?php esc_html_e( 'Free', 'visualizer' ); ?></span></div>
306		- <p class="help-text"><?php esc_html_e( 'Improve your website speed and images by 80% with', 'visualizer' ); ?> <a href="<?php echo esc_url( tsdk_utmify( 'https://optimole.com/', 'VisualizerSetupWizard' ) ); ?>" target="_blank"><?php esc_html_e( 'Optimole', 'visualizer' ); ?></a></p>
307		- </div>
308		- </li>
309		- </ul>
	437	+ <span class="vz-install-status" data-install-status="optimole-wp"></span>
	438	+ </div>
	439	+ <div class="vz-option-card">
	440	+ <label class="vz-option-check">
	441	+ <input type="checkbox" id="enable_otter_blocks" <?php echo $wp_otter_active ? 'checked disabled' : 'checked'; ?>>
	442	+ </label>
	443	+ <div class="vz-option-icon">
	444	+ <img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/otter-logo.png' ); ?>" width="28" height="28" alt="">
	445	+ </div>
	446	+ <div class="vz-option-body">
	447	+ <div class="vz-option-title">
	448	+ <?php esc_html_e( 'Build better pages', 'visualizer' ); ?>
	449	+ <span class="pro-label free-label"><?php esc_html_e( 'Free', 'visualizer' ); ?></span>
310	450	</div>
	451	+ <p class="help-text">
	452	+ <?php
	453	+ if ( $wp_otter_active ) {
	454	+ esc_html_e( 'Otter Blocks is already active on your site.', 'visualizer' );
	455	+ } else {
	456	+ esc_html_e( 'Add powerful Gutenberg blocks for layouts, forms, and more with Otter Blocks.', 'visualizer' );
	457	+ }
	458	+ ?>
	459	+ </p>
311	460	</div>
	461	+ <span class="vz-install-status" data-install-status="otter-blocks"></span>
312	462	</div>
313		- </div>
314		- </div>
315		- <div class="form-block">
316		- <button class="btn btn-primary vz-wizard-install-plugin" data-step_number="4"><?php esc_html_e( 'Improve now', 'visualizer' ); ?>
317		- <button class="btn btn-primary next-btn skip-improvement" style="display: none;"><?php esc_html_e( 'Skip Improvement', 'visualizer' ); ?></button>
318		- <span class="spinner"></span>
319		- </div>
320		- </div>
321		- </div>
322		- </div>
323		- </div>
324		- <?php } ?>
325		- <?php if ( ! $is_live_preview ) { ?>
326		- <div id="step-<?php echo esc_attr( $last_step_number ); ?>" class="tab-pane" role="tabpanel" aria-labelledby="step-5">
327		- <div class="vz-accordion-item">
328		- <div class="vz-accordion-item__title">
329		- <div class="vz-accordion-item__button">
330		- <h2 class="h2 pb-8"><?php esc_html_e( 'Updates, tutorials, special offers & more', 'visualizer' ); ?></h2>
331		- <p class="p"><?php esc_html_e( 'Get exclusive access of Visualizer newsletter', 'visualizer' ); ?></p>
332		- </div>
333		- </div>
334		- <div class="vz-accordion-item__content border-top">
335		- <div class="vz-form-wrap">
336		- <div class="form-block">
337		- <div class="vz-newsletter-wrap">
338		- <div class="vz-newsletter">
339		- <p class="p pb-30"><?php esc_html_e( 'Let us know your email so that we can send you product updates, helpful tutorials, exclusive offers and more useful stuff.', 'visualizer' ); ?></p>
340		- <div class="vz-form-group">
341		- <input type="email" class="form-control" id="vz_subscribe_email" placeholder="<?php echo esc_attr( get_bloginfo( 'admin_email' ) ); ?>">
	463	+ <div class="vz-option-card">
	464	+ <label class="vz-option-check">
	465	+ <input type="checkbox" id="enable_page_cache" <?php echo $wp_spc_active ? 'checked disabled' : 'checked'; ?>>
	466	+ </label>
	467	+ <div class="vz-option-icon">
	468	+ <img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/spc-logo.svg' ); ?>" width="28" height="28" alt="">
342	469	</div>
	470	+ <div class="vz-option-body">
	471	+ <div class="vz-option-title">
	472	+ <?php esc_html_e( 'Cache your pages', 'visualizer' ); ?>
	473	+ <span class="pro-label free-label"><?php esc_html_e( 'Free', 'visualizer' ); ?></span>
	474	+ </div>
	475	+ <p class="help-text">
	476	+ <?php
	477	+ if ( $wp_spc_active ) {
	478	+ esc_html_e( 'Super Page Cache is already active on your site.', 'visualizer' );
	479	+ } else {
	480	+ esc_html_e( 'Make your site load faster with Super Page Cache for Cloudflare.', 'visualizer' );
	481	+ }
	482	+ ?>
	483	+ </p>
	484	+ </div>
	485	+ <span class="vz-install-status" data-install-status="wp-cloudflare-page-cache"></span>
343	486	</div>
344		- <div class="vz-newsletter-img">
345		- <img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/newsletter-img.png' ); ?>" alt="">
	487	+ <div class="vz-option-card vz-option-card--newsletter">
	488	+ <label class="vz-option-check">
	489	+ <input type="checkbox" id="enable_newsletter" checked>
	490	+ </label>
	491	+ <div class="vz-option-icon">
	492	+ <span class="dashicons dashicons-email-alt"></span>
	493	+ </div>
	494	+ <div class="vz-option-body">
	495	+ <div class="vz-option-title"><?php esc_html_e( 'Stay in the loop', 'visualizer' ); ?></div>
	496	+ <p class="help-text">
	497	+ <?php esc_html_e( 'Get tutorials, tips, and special offers at', 'visualizer' ); ?>
	498	+ <span class="vz-email-text" data-email="<?php echo esc_attr( get_bloginfo( 'admin_email' ) ); ?>"><?php echo esc_html( get_bloginfo( 'admin_email' ) ); ?></span>
	499	+ <button type="button" class="vz-change-email"><?php esc_html_e( 'Change', 'visualizer' ); ?></button>
	500	+ <?php esc_html_e( '· Unsubscribe anytime.', 'visualizer' ); ?>
	501	+ </p>
	502	+ <div class="vz-option-input" style="display: none;">
	503	+ <input type="email" class="form-control" id="vz_subscribe_email" value="<?php echo esc_attr( get_bloginfo( 'admin_email' ) ); ?>">
	504	+ <button type="button" class="btn btn-primary vz-save-email"><?php esc_html_e( 'Save', 'visualizer' ); ?></button>
	505	+ </div>
	506	+ </div>
346	507	</div>
347	508	</div>
348	509	</div>
349	510	<div class="form-block">
350	511	<div class="vz-btn-group">
351		- <button class="btn btn-primary vz-subscribe" data-vz_subscribe="true"><?php esc_html_e( 'Send Me Access', 'visualizer' ); ?></button>
352		- <button class="btn btn-outline-primary vz-subscribe" data-vz_subscribe="false"><?php esc_html_e( 'Skip, Dont give me access', 'visualizer' ); ?></button>
	512	+ <button class="btn btn-primary vz-subscribe" data-vz_subscribe="true"><?php esc_html_e( 'Finish Setup', 'visualizer' ); ?></button>
353	513	<span class="spinner"></span>
354	514	</div>
355	515	</div>
356	516	</div>