PluginProbe
Yatra – Travel Booking & Tour Operator Software / trunk
Yatra – Travel Booking & Tour Operator Software vtrunk
3.0.14 3.0.14.1 3.0.14.2 3.0.12 3.0.13 3.0.11 3.0.10 3.0.9 3.0.8 3.0.7 3.0.6 3.0.5 3.0.5.1 3.0.4 3.0.3 3.0.2.9 3.0.2.7 3.0.2.8 3.0.2.6 trunk 1.0.0 2.0.0 2.0.1 2.0.10 2.0.11 All 82 releases
yatra / templates / setup-wizard / complete.php

complete.php in Yatra – Travel Booking & Tour Operator Software trunk, at templates/setup-wizard/complete.php

413 lines 19.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 /**
3 * Setup Wizard - Complete Step
4 *
5 * @package Yatra
6 */
7
8 defined('ABSPATH') || exit;
9 ?>
10
11 <form method="post" class="wizard-step">
12 <?php wp_nonce_field('yatra-setup'); ?>
13 <input type="hidden" name="save_step" value="complete">
14
15 <div class="wizard-header" style="text-align: center; position: relative;">
16 <!-- Achievement Badge Container -->
17 <div class="achievement-badge" style="position: relative; display: inline-block; margin: 0 auto 20px;">
18 <!-- Animated Ring Background -->
19 <div class="achievement-ring" style="position: absolute; top: -10px; left: -10px; width: 84px; height: 84px; border: 3px solid #fbbf24; border-radius: 50%; animation: ringPulse 2s ease-in-out infinite;"></div>
20
21 <!-- Success Icon with Background -->
22 <div class="success-icon-bg" style="width: 64px; height: 64px; background: linear-gradient(135deg, #22c55e, #16a34a); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 10; box-shadow: 0 10px 25px rgba(34, 197, 94, 0.3);">
23 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
24 <path d="M20 6L9 17l-5-5"></path>
25 </svg>
26 </div>
27 </div>
28
29 <!-- Celebratory SVG Stars -->
30 <div class="stars-container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible;">
31 <!-- Star 1 -->
32 <div class="star star-1" style="position: absolute; top: 15px; left: 15%; animation: floatStar 4s ease-in-out infinite;">
33 <svg width="24" height="24" viewBox="0 0 24 24" fill="#fbbf24" stroke="#f59e0b" stroke-width="1">
34 <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
35 </svg>
36 </div>
37 <!-- Star 2 -->
38 <div class="star star-2" style="position: absolute; top: 5px; right: 20%; animation: floatStar 4s ease-in-out infinite 0.8s;">
39 <svg width="20" height="20" viewBox="0 0 24 24" fill="#fbbf24" stroke="#f59e0b" stroke-width="1">
40 <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
41 </svg>
42 </div>
43 <!-- Star 3 -->
44 <div class="star star-3" style="position: absolute; top: 60px; left: 10%; animation: floatStar 4s ease-in-out infinite 1.6s;">
45 <svg width="18" height="18" viewBox="0 0 24 24" fill="#fbbf24" stroke="#f59e0b" stroke-width="1">
46 <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
47 </svg>
48 </div>
49 <!-- Star 4 -->
50 <div class="star star-4" style="position: absolute; top: 40px; right: 10%; animation: floatStar 4s ease-in-out infinite 2.4s;">
51 <svg width="22" height="22" viewBox="0 0 24 24" fill="#fbbf24" stroke="#f59e0b" stroke-width="1">
52 <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
53 </svg>
54 </div>
55 <!-- Star 5 -->
56 <div class="star star-5" style="position: absolute; top: 80px; left: 25%; animation: floatStar 4s ease-in-out infinite 3.2s;">
57 <svg width="16" height="16" viewBox="0 0 24 24" fill="#fbbf24" stroke="#f59e0b" stroke-width="1">
58 <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
59 </svg>
60 </div>
61 <!-- Sparkle Effects -->
62 <div class="sparkle sparkle-1" style="position: absolute; top: 25px; right: 30%; animation: sparkle 2s ease-in-out infinite 0.5s;">
63 <svg width="12" height="12" viewBox="0 0 24 24" fill="#fbbf24">
64 <path d="M12 2v20M2 12h20"/>
65 </svg>
66 </div>
67 <div class="sparkle sparkle-2" style="position: absolute; top: 70px; right: 25%; animation: sparkle 2s ease-in-out infinite 1.5s;">
68 <svg width="10" height="10" viewBox="0 0 24 24" fill="#fbbf24">
69 <path d="M12 2v20M2 12h20"/>
70 </svg>
71 </div>
72 <div class="sparkle sparkle-3" style="position: absolute; top: 50px; left: 20%; animation: sparkle 2s ease-in-out infinite 1s;">
73 <svg width="14" height="14" viewBox="0 0 24 24" fill="#fbbf24">
74 <path d="M12 2v20M2 12h20"/>
75 </svg>
76 </div>
77 </div>
78
79 <!-- Achievement Title -->
80 <div style="position: relative; z-index: 10;">
81 <div style="display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px;">
82 <div style="width: 40px; height: 3px; background: linear-gradient(90deg, transparent, #fbbf24);"></div>
83 <span style="color: #f59e0b; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;"><?php esc_html_e('Achievement Unlocked', 'yatra'); ?></span>
84 <div style="width: 40px; height: 3px; background: linear-gradient(90deg, #fbbf24, transparent);"></div>
85 </div>
86 <h1 style="text-align: center; margin: 0 0 12px; font-size: 32px; font-weight: 700; color: #111827; background: linear-gradient(135deg, #111827, #374151); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;"><?php esc_html_e('Setup Complete!', 'yatra'); ?></h1>
87 <p style="text-align: center; margin: 0; font-size: 16px; color: #6b7280; font-weight: 400;"><?php esc_html_e('Your travel booking system is ready to use', 'yatra'); ?></p>
88 </div>
89 </div>
90
91 <div class="wizard-content">
92 <div class="info-box" style="text-align: center; padding: 24px; margin-bottom: 32px;">
93 <p style="font-size: 15px; color: #6b7280; margin: 0;"><?php esc_html_e('Your booking system is configured and ready. Here are the next steps to get started:', 'yatra'); ?></p>
94 </div>
95
96 <div class="action-buttons" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px; max-width: 700px; margin-left: auto; margin-right: auto;">
97 <!-- Create First Trip -->
98 <a href="<?php echo esc_url(admin_url('admin.php?page=yatra&subpage=trips')); ?>" class="action-card" style="display: flex; flex-direction: column; align-items: center; padding: 24px; background: #fff; border: 2px solid #e5e7eb; border-radius: 12px; text-decoration: none; transition: all 0.2s ease;" onmouseover="this.style.borderColor='#4f46e5'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 6px rgba(0,0,0,0.1)';" onmouseout="this.style.borderColor='#e5e7eb'; this.style.transform='translateY(0)'; this.style.boxShadow='none';">
99 <div style="width: 48px; height: 48px; background: #eff6ff; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
100 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4f46e5" stroke-width="2">
101 <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
102 <circle cx="12" cy="10" r="3"></circle>
103 </svg>
104 </div>
105 <h3 style="margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #111827;"><?php esc_html_e('Create Your First Trip', 'yatra'); ?></h3>
106 <p style="margin: 0; font-size: 13px; color: #6b7280; text-align: center; line-height: 1.5;"><?php esc_html_e('Add destinations, pricing, and availability', 'yatra'); ?></p>
107 </a>
108
109 <!-- Import Sample Data -->
110 <div class="action-card" style="display: flex; flex-direction: column; align-items: center; padding: 24px; background: #fff; border: 2px solid #f59e0b; border-radius: 12px; transition: all 0.2s ease;" onmouseover="this.style.borderColor='#d97706'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 6px rgba(0,0,0,0.1)';" onmouseout="this.style.borderColor='#f59e0b'; this.style.transform='translateY(0)'; this.style.boxShadow='none';">
111 <div style="width: 48px; height: 48px; background: #fef3c7; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
112 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2">
113 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
114 <polyline points="7 10 12 15 17 10"></polyline>
115 <line x1="12" y1="15" x2="12" y2="3"></line>
116 </svg>
117 </div>
118 <h3 style="margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #111827;"><?php esc_html_e('Import Sample Data', 'yatra'); ?></h3>
119 <p style="margin: 0 0 16px; font-size: 13px; color: #6b7280; text-align: center; line-height: 1.5;"><?php esc_html_e('Get started quickly with demo content', 'yatra'); ?></p>
120 <button type="button" id="import-sample-data-btn" onclick="importSampleData()" style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: #f59e0b; color: #fff; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; margin-top: auto;" onmouseover="this.style.background='#d97706';" onmouseout="this.style.background='#f59e0b';">
121 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
122 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
123 <polyline points="7 10 12 15 17 10"></polyline>
124 <line x1="12" y1="15" x2="12" y2="3"></line>
125 </svg>
126 <?php esc_html_e('Import Sample Data', 'yatra'); ?>
127 </button>
128 </div>
129 </div>
130
131 <div class="premium-box">
132 <h3><?php esc_html_e('Upgrade to Yatra Pro', 'yatra'); ?></h3>
133 <p><?php esc_html_e('Get advanced features to grow your travel business', 'yatra'); ?></p>
134
135 <div class="premium-features">
136 <div class="premium-feature">
137 <h4><?php esc_html_e('Dynamic Pricing', 'yatra'); ?></h4>
138 <p><?php esc_html_e('Seasonal rates & discounts', 'yatra'); ?></p>
139 </div>
140 <div class="premium-feature">
141 <h4><?php esc_html_e('Email Notifications', 'yatra'); ?></h4>
142 <p><?php esc_html_e('Automated booking emails', 'yatra'); ?></p>
143 </div>
144 <div class="premium-feature">
145 <h4><?php esc_html_e('Advanced Reports', 'yatra'); ?></h4>
146 <p><?php esc_html_e('Revenue & analytics', 'yatra'); ?></p>
147 </div>
148 </div>
149
150 <div class="premium-cta">
151 <a href="https://wpyatra.com/pricing" target="_blank" class="btn">
152 <?php esc_html_e('View Pro Features', 'yatra'); ?>
153 </a>
154 </div>
155 </div>
156 </div>
157
158 <div class="wizard-footer">
159 <a href="<?php echo esc_url($this->get_step_url('theme')); ?>" class="btn btn-secondary" style="display: inline-flex; align-items: center; gap: 8px;">
160 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
161 <line x1="19" y1="12" x2="5" y2="12"></line>
162 <polyline points="12 19 5 12 12 5"></polyline>
163 </svg>
164 <?php esc_html_e('Back', 'yatra'); ?>
165 </a>
166 <button type="submit" class="btn btn-primary" style="display: inline-flex; align-items: center; gap: 8px;">
167 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
168 <rect x="3" y="3" width="7" height="7"></rect>
169 <rect x="14" y="3" width="7" height="7"></rect>
170 <rect x="14" y="14" width="7" height="7"></rect>
171 <rect x="3" y="14" width="7" height="7"></rect>
172 </svg>
173 <?php esc_html_e('Go to Dashboard', 'yatra'); ?>
174 </button>
175 </div>
176 </form>
177
178 <style>
179 /* Achievement Ring Pulse Animation */
180 @keyframes ringPulse {
181 0% {
182 transform: scale(1);
183 opacity: 1;
184 border-color: #fbbf24;
185 box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7);
186 }
187 50% {
188 transform: scale(1.1);
189 opacity: 0.7;
190 border-color: #f59e0b;
191 box-shadow: 0 0 0 20px rgba(251, 191, 36, 0);
192 }
193 100% {
194 transform: scale(1);
195 opacity: 1;
196 border-color: #fbbf24;
197 box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7);
198 }
199 }
200
201 /* Star Floating Animation */
202 @keyframes floatStar {
203 0% {
204 transform: translateY(0px) rotate(0deg) scale(0);
205 opacity: 0;
206 }
207 20% {
208 opacity: 1;
209 transform: translateY(-10px) rotate(90deg) scale(1);
210 }
211 50% {
212 opacity: 1;
213 transform: translateY(-30px) rotate(180deg) scale(1.1);
214 }
215 80% {
216 opacity: 0.8;
217 transform: translateY(-50px) rotate(270deg) scale(0.9);
218 }
219 100% {
220 transform: translateY(-70px) rotate(360deg) scale(0);
221 opacity: 0;
222 }
223 }
224
225 /* Sparkle Animation */
226 @keyframes sparkle {
227 0% {
228 transform: scale(0) rotate(0deg);
229 opacity: 0;
230 }
231 50% {
232 transform: scale(1) rotate(180deg);
233 opacity: 1;
234 }
235 100% {
236 transform: scale(0) rotate(360deg);
237 opacity: 0;
238 }
239 }
240
241 /* Success Icon Background Animation */
242 .success-icon-bg {
243 animation: successPulse 2s ease-in-out infinite;
244 }
245
246 @keyframes successPulse {
247 0% {
248 transform: scale(1);
249 box-shadow: 0 10px 25px rgba(34, 197, 94, 0.3);
250 }
251 50% {
252 transform: scale(1.05);
253 box-shadow: 0 15px 35px rgba(34, 197, 94, 0.4);
254 }
255 100% {
256 transform: scale(1);
257 box-shadow: 0 10px 25px rgba(34, 197, 94, 0.3);
258 }
259 }
260
261 /* Individual Star Styles */
262 .star {
263 filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
264 }
265
266 .star-1 { animation-delay: 0s; }
267 .star-2 { animation-delay: 0.8s; }
268 .star-3 { animation-delay: 1.6s; }
269 .star-4 { animation-delay: 2.4s; }
270 .star-5 { animation-delay: 3.2s; }
271
272 /* Sparkle Styles */
273 .sparkle {
274 filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.8));
275 }
276
277 .sparkle-1 { animation-delay: 0.5s; }
278 .sparkle-2 { animation-delay: 1.5s; }
279 .sparkle-3 { animation-delay: 1s; }
280
281 /* Achievement Badge Animation */
282 .achievement-badge {
283 animation: achievementBurst 1s ease-out;
284 }
285
286 @keyframes achievementBurst {
287 0% {
288 transform: scale(0) rotate(-180deg);
289 opacity: 0;
290 }
291 50% {
292 transform: scale(1.1) rotate(10deg);
293 opacity: 1;
294 }
295 100% {
296 transform: scale(1) rotate(0deg);
297 opacity: 1;
298 }
299 }
300
301 /* Achievement Title Animation */
302 .achievement-title {
303 animation: titleSlideIn 1.2s ease-out 0.5s both;
304 }
305
306 @keyframes titleSlideIn {
307 0% {
308 transform: translateY(30px);
309 opacity: 0;
310 }
311 100% {
312 transform: translateY(0);
313 opacity: 1;
314 }
315 }
316
317 /* Page Load Animation */
318 .wizard-header {
319 animation: pageLoad 1.5s ease-out;
320 }
321
322 @keyframes pageLoad {
323 0% {
324 transform: scale(0.9);
325 opacity: 0;
326 }
327 100% {
328 transform: scale(1);
329 opacity: 1;
330 }
331 }
332 </style>
333
334 <script>
335 function importSampleData() {
336 const button = document.getElementById('import-sample-data-btn');
337 const originalText = button.innerHTML;
338
339 // Confirm import
340 if (!confirm('<?php esc_attr_e('This will import sample trips, destinations, and bookings. Continue?', 'yatra'); ?>')) {
341 return;
342 }
343
344 // Show loading state
345 button.disabled = true;
346 button.style.opacity = '0.6';
347 button.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg> <?php esc_attr_e('Importing...', 'yatra'); ?>';
348
349 // Call the same API as Tools.tsx
350 fetch('<?php echo rest_url('yatra/v1/sample-data/import'); ?>', {
351 method: 'POST',
352 headers: {
353 'Content-Type': 'application/json',
354 'X-WP-Nonce': '<?php echo wp_create_nonce('wp_rest'); ?>'
355 },
356 body: JSON.stringify({
357 data_types: [], // Import all data types
358 overwrite: false
359 })
360 })
361 .then(response => response.json())
362 .then(data => {
363 if (data.success) {
364 // Show success message
365 const successDiv = document.createElement('div');
366 successDiv.className = 'notice notice-success is-dismissible';
367 successDiv.style.marginTop = '20px';
368 successDiv.innerHTML = '<p><?php echo esc_html(__('Sample data imported successfully!', 'yatra')); ?></p>';
369 button.parentNode.appendChild(successDiv);
370
371 // Update button to show success
372 button.style.background = '#22c55e';
373 button.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> <?php esc_attr_e('Imported Successfully', 'yatra'); ?>';
374
375 // Show detailed counts if available
376 if (data.data) {
377 const counts = data.data;
378 const details = Object.keys(counts)
379 .filter(key => counts[key] > 0)
380 .map(key => `${key}: ${counts[key]}`)
381 .join(', ');
382
383 if (details) {
384 const detailsDiv = document.createElement('div');
385 detailsDiv.style.marginTop = '10px';
386 detailsDiv.style.fontSize = '12px';
387 detailsDiv.style.color = '#6b7280';
388 detailsDiv.innerHTML = '<strong><?php esc_html_e('Imported:', 'yatra'); ?></strong> ' + details;
389 button.parentNode.appendChild(detailsDiv);
390 }
391 }
392 } else {
393 throw new Error(data.message || '<?php esc_html_e('Import failed', 'yatra'); ?>');
394 }
395 })
396 .catch(error => {
397 console.error('Sample data import error:', error);
398
399 // Show error message
400 const errorDiv = document.createElement('div');
401 errorDiv.className = 'notice notice-error is-dismissible';
402 errorDiv.style.marginTop = '20px';
403 errorDiv.innerHTML = '<p><?php echo esc_html(__('Failed to import sample data. Please try again.', 'yatra')); ?></p>';
404 button.parentNode.appendChild(errorDiv);
405
406 // Reset button
407 button.disabled = false;
408 button.style.opacity = '1';
409 button.innerHTML = originalText;
410 });
411 }
412 </script>
413