`; return html; },/** * Generate user email HTML for Video Editing services */ generateUserEmailHtml: function(type = 'calculate') { // 'calculate' or 'proposal' const cd = this.state.selections.contactDetails || {}; const totalPrice = this.state.totalPrice.toLocaleString(); const currentYear = new Date().getFullYear();let title, intro, mainContent, ctaText, ctaLink;if (type === 'calculate') { title = "Your Video Editing Estimate is Ready!"; intro = `Thank you for using our video editing quote calculator, ${cd.name || 'there'}! We've processed your selections to provide a personalized estimate.`; mainContent = `Based on the editing services, scope, and add-ons you selected, we've generated an estimate for your video project. This gives you a starting point for budgeting and planning.You can review the detailed breakdown on our website. If you'd like to proceed and get a formal quote based on your specific footage and requirements, please click the "Request Formal Quote" button on the summary page. Our team will then contact you to discuss the next steps.`; ctaText = "Review Your Estimate"; // Link back to the page where the calculator lives ctaLink = window.location.href.split('#')[0] || "https://umitech.com.au/video-editing-quote"; // Use current page URL or fallback } else { // proposal (formal quote request) title = "Your Video Editing Quote Request Received!"; intro = `Thanks for requesting a formal quote, ${cd.name || 'there'}! Your video editing requirements are being reviewed by our team.`; mainContent = `We're excited about bringing your video vision to life! We are now carefully reviewing your selected services, project scope, and any specific instructions you provided.Expect to hear from us within 1 business day. We'll either send the formal quote directly or reach out to schedule a brief call if we need to clarify details about your footage or desired outcome. This ensures the final plan and quote are accurate.`; ctaText = "Contact Our Team"; ctaLink = "https://umitech.com.au/contact"; }const html = ``; return html; },/** * Populate Invoice Header and Generate Breakdown Items */ populateInvoiceDetails: function() { try { // Populate Header if (this.elements.invoiceDateEl) { this.elements.invoiceDateEl.textContent = new Date().toLocaleDateString(); } const cd = this.state.selections.contactDetails || {}; if (this.elements.invoiceClientNameEl) { this.elements.invoiceClientNameEl.innerHTML = `${cd.name || 'N/A'}`; } if (this.elements.invoiceClientEmailEl) { this.elements.invoiceClientEmailEl.textContent = cd.email || 'N/A'; } if (this.elements.invoiceClientPhoneEl) { let phoneText = ''; if (cd.phone) { phoneText = `${cd.countryCode || ''} ${cd.phone}`; } this.elements.invoiceClientPhoneEl.textContent = phoneText; }// Generate Breakdown Items this.generateQuoteBreakdown();} catch (error) { console.error('Error populating invoice details:', error); } },/** * Generate breakdown items for the quote summary page (video editing version) */ generateQuoteBreakdown: function() { try { if (!this.elements.breakdownItems) return; this.elements.breakdownItems.innerHTML = '';const createBreakdownItem = (label, price, isSubItem = false, isBoldPrefix = false) => { // Show items with price OR the free briefing OR the base service const isFreeIncluded = (label === 'Initial Project Briefing' || label === 'Standard Web (H.264 MP4)'); if ((typeof price !== 'number' || price === 0) && !isFreeIncluded && !isBoldPrefix && key !== 'project-type') return;const item = document.createElement('div'); item.className = 'uq-invoice-item'; let priceString = `$${price.toLocaleString()}`; if (price < 0) { priceString = `-$${Math.abs(price).toLocaleString()}`; } else if (price === 0 && isFreeIncluded) { priceString = 'Included'; } else if (price === 0 && (isBoldPrefix || key === 'project-type')) { priceString = '$0'; }let labelHtml = label; if (isBoldPrefix) { const parts = label.split(':'); labelHtml = (parts.length > 1) ? `${parts[0]}: ${parts.slice(1).join(':').trim()}` : `${label}`; }item.innerHTML = ``; this.elements.breakdownItems.appendChild(item); };const createMultiItems = (key, labelPrefix) => { const sel = this.state.selections[key]; if (sel && Array.isArray(sel)) { sel.forEach(item => { // Show priced items OR the included items (briefing, web mp4) if (item.price !== 0 || item.value === 'strategy-consultation' || item.value === 'format-web-mp4') { let label = item.name; if (item.value === 'strategy-consultation') label = 'Initial Project Briefing'; if (item.value === 'format-web-mp4') label = 'Standard Web (H.264 MP4)'; createBreakdownItem(label, item.price, true, false); } }); } };const createSingleItem = (key, labelPrefix = '', showZero = false) => { const sel = this.state.selections[key]; if (sel && typeof sel === 'object' && (sel.price !== 0 || showZero || key === 'project-type')) { let label = `${labelPrefix}${sel.name}`; let isBold = false; // Apply bold prefixes for key single selections if (key === 'project-type') { label = `Base Service: ${sel.name}`; isBold = true; } if (key === 'campaign-scale') { label = `Footage Length: ${sel.name}`; isBold = true; } // Footage length if (key === 'reporting-frequency') { label = `Revisions: ${sel.name}`; isBold = true; } // Revisions if (key === 'campaign-sophistication') { label = `Editing Style: ${sel.name}`; isBold = true; } // Style level if (key === 'marketing-retainer') { label = `Ongoing Support: ${sel.name}`; isBold = true; } // Retainer if (key === 'timeline') { label = `Timeline: ${sel.name}`; isBold = true; }createBreakdownItem(label, sel.price, false, isBold); } };// --- Add items in Video Editing Flow Order --- createSingleItem('project-type', '', true); // Base Service (Always show)// Scope (Footage Length & Complexity) createSingleItem('campaign-scale', '', false); // Footage length (show if priced) createMultiItems('marketing-platforms', ''); // Complexity elements// Delivery & Revisions createSingleItem('reporting-frequency', '', false); // Revisions (show if priced) createMultiItems('analytics-setup', ''); // Delivery Formats (includes Web MP4)// Specific Tasks ('pages' key) createMultiItems('pages', ''); // Tasks (includes Briefing)// Style & Complexity (Script/Board & Style Level) createSingleItem('campaign-sophistication', '', false); // Style level (show if priced) createMultiItems('market-research-options', ''); // Script help// Add-ons ('additional-features' key) createMultiItems('additional-features', '');// Ongoing Support ('maintenance' section) createSingleItem('marketing-retainer', '', false); // Retainer (show if priced) createMultiItems('marketing-training-services', ''); // Training// Timeline createSingleItem('timeline', '', false); // Show if price != 0if (this.elements.breakdownItems.children.length === 0 && this.state.totalPrice === 0) { this.elements.breakdownItems.innerHTML = ''; }} catch (error) { console.error('Error generating quote breakdown:', error); if (this.elements.breakdownItems) this.elements.breakdownItems.innerHTML = ''; } },/** * Show the dedicated Thank You page section */ showSubmissionSuccessPage: function(action) { try { const messageElement = document.getElementById('thank-you-message'); if (messageElement) { if (action === 'proposal') { // Formal quote request messageElement.innerHTML = "Your video editing quote request has been sent successfully!
We'll review your requirements and get back to you via email shortly.
Please check your inbox (and spam folder) for a confirmation."; } else { // Should not happen with button logic, but fallback messageElement.innerHTML = "Your video editing estimate has been calculated!
Please check your inbox (and spam folder) for a summary.
You can request a formal quote from the summary page."; } } this.showSection('thank-you'); } catch (error) { console.error('Error showing thank you page:', error); alert("Submission successful! Thank you."); this.resetCalculator(); } },/** * Reset calculator to start a new quote */ resetCalculator: function(skipCookieClear = false) { try { console.log('Resetting video calculator...'); if (!skipCookieClear) { this.clearSavedData(); }// Reset state this.state.selections = {}; this.state.totalPrice = 0; this.state.activeSections = [...this.state.sectionSequence]; this.state.currentSectionIndex = 0; this.state.submissionInProgress = false;// Reset UI Elements this.elements.calculator.querySelectorAll('.uq-option.selected').forEach(o => o.classList.remove('selected')); this.elements.contactForm?.reset(); this.elements.contactForm?.querySelectorAll('.uq-invalid-field').forEach(el => el.classList.remove('uq-invalid-field')); document.getElementById('country-code')?.querySelector('option[value="+61"]')?.setAttribute('selected', 'selected'); if (this.elements.kpiInputField) this.elements.kpiInputField.value = ''; // Clear Specific Instructions fieldthis.hideValidationMessage(); if (this.elements.breakdownItems) this.elements.breakdownItems.innerHTML = '';// Reset conditional elements/steps & visibility this.updateConditionalSections(); // Hide upsells this.updateStepIndicatorsVisibility();// Ensure default selections (briefing call, web mp4) are selected again this.setDefaultSelections();// Reset price, progress, nav this.calculateTotalPrice(); // Should be 0 after reset + defaults this.updatePriceDisplay(0); this.updateProgress();// Show the welcome section this.showSection('welcome');if (this.elements.priceBar) this.elements.priceBar.style.display = 'block'; this.updateNavigationButtons();console.log('Calculator reset complete.');} catch (error) { console.error('Error resetting calculator:', error); alert("Error resetting the calculator. Please refresh the page."); } },/** Clear saved cookies */ clearSavedData: function() { try { document.cookie = `${this.cookies.name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=Lax; Secure`; console.log('Cleared saved video quote data cookie.'); } catch (error) { console.error('Error clearing saved data:', error); } },/** Apply mobile-specific class and layout adjustments (Handled by CSS) */ applyMobileOptimizations: function() {},/** Add/Remove Loading Indicator */ addLoadingIndicator: function(parent = this.elements.calculator.querySelector('.uq-section-active')) { if (!parent) return; this.removeLoadingIndicator(parent); const loader = document.createElement('div'); loader.className = 'uq-loading'; loader.innerHTML = ''; if (window.getComputedStyle(parent).position === 'static') { parent.style.position = 'relative'; } parent.appendChild(loader); }, removeLoadingIndicator: function(parent = this.elements.calculator) { parent?.querySelector('.uq-loading')?.remove(); },/** Animate number change smoothly */ animateNumber: function(element, start, end) { if (!element) return; start = Number(start) || 0; end = Number(end) || 0; if (start === end) { element.textContent = end.toLocaleString(); return; } try { const duration = 600; let startTime = null; const step = (currentTime) => { if (!startTime) startTime = currentTime; const progress = Math.min((currentTime - startTime) / duration, 1); const easedProgress = this.easeOutCubic(progress); const currentValue = Math.round(start + easedProgress * (end - start)); element.textContent = currentValue.toLocaleString(); if (progress < 1) requestAnimationFrame(step); else element.textContent = end.toLocaleString(); }; requestAnimationFrame(step); } catch (error) { console.error('Error animating number:', error); element.textContent = end.toLocaleString(); } },/** Easing function */ easeOutCubic: (t) => (--t) * t * t + 1,/** Debounce function */ debounce: function(func, wait) { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); }; } }; // End QuoteCalculator Object// Initialize QuoteCalculator.init();})(); // End IIFE }); // End DOMContentLoaded