`; return html; },/** * Generate user email HTML for Online Ads services */ generateUserEmailHtml: function(type = 'calculate') { 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 Online Ads Estimate is Ready!"; // Updated Title intro = `Thank you for using our online advertising quote calculator, ${cd.name || 'there'}! We've processed your selections to provide a personalized estimate for our agency fees.`; // Updated Intro mainContent = `Based on the services and scope you selected, we've generated an estimate for your advertising project management. This provides a clear starting point for driving results together.Remember, this estimate covers our strategic and management fees. The actual ad spend (budget paid to Google, Meta, etc.) is separate.The next step is to review the detailed breakdown on our website. If you'd like to discuss your campaign goals further or move forward, click the "Request Formal Proposal" button on the summary page. Our ad specialists will then be in touch!`; // Updated Content ctaText = "View Your Estimate Details"; // Updated CTA Text ctaLink = "https://umitech.com.au/online-ads-quote"; // << UPDATE THIS LINK if the page URL changes } else { // proposal title = "Your Online Ads Proposal Request Received"; // Updated Title intro = `Thanks for requesting a formal online advertising proposal, ${cd.name || 'there'}! Your requirements are being reviewed by our advertising strategy team.`; // Updated Intro mainContent = `We're excited about the potential to manage your ad campaigns and help you achieve significant ROI! We are now carefully reviewing your selected services, target platforms, and project details to create a comprehensive proposal tailored to your business needs.Expect to hear from our team within 1 business day. We'll either send the formal proposal directly (including recommended ad budgets) or reach out to schedule a brief call if we need any clarification. This ensures the final plan maximizes your advertising impact.`; // Updated Content 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 (online ads 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, the free strategy call, or the base service type const key = Object.keys(this.state.selections).find(k => this.state.selections[k]?.name === label.split(': ')[1]); // Try to find original keyif ((typeof price !== 'number' || price === 0) && label !== 'Initial Strategy Call' && !isBoldPrefix && key !== 'project-type') return;const item = document.createElement('div'); item.className = 'uq-invoice-item'; let priceString = `$${price.toLocaleString()}`; // Default format if (price < 0) { priceString = `-$${Math.abs(price).toLocaleString()}`; } else if (price === 0 && label === 'Initial Strategy Call') { priceString = 'Included'; } else if (price === 0 && (isBoldPrefix || key === 'project-type')) { // Show $0 for base if price is 0 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 => { if (item.price !== 0 || item.value === 'strategy-consultation') { // Show priced items OR the free strategy call let label = item.name; if (item.value === 'strategy-consultation') label = 'Initial Strategy Call'; // Correct label 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)) { let label = `${labelPrefix}${sel.name}`; let isBold = false; // Add bold prefixes for key single selections in Ads flow if (key === 'project-type') { label = `Base Service: ${sel.name}`; isBold = true; } if (key === 'campaign-strategy-level') { label = `Strategy Level: ${sel.name}`; isBold = true; } // Updated key if (key === 'marketing-retainer') { label = `Ongoing Support: ${sel.name}`; isBold = true; } if (key === 'timeline') { label = `Timeline: ${sel.name}`; isBold = true; } // Add others as needed... createBreakdownItem(label, sel.price, false, isBold); } };// --- Add items in logical order based on Online Ads flow --- createSingleItem('project-type', '', true); // Base Service (Always show)// Campaign Scope createSingleItem('campaign-scale', 'Ad Spend Level: '); // Updated prefix createMultiItems('ad-platforms', ''); // Primary Platforms (Updated key)// Tracking & Reporting createSingleItem('reporting-frequency', 'Reporting: '); createSingleItem('analytics-setup', 'Analytics: ');// Ad Campaign Tasks ('pages' key) createMultiItems('pages', ''); // Includes free strategy call// Campaign Strategy & Research createSingleItem('campaign-strategy-level', '', false); // Show if price > 0 (Updated key) createMultiItems('market-research-options', ''); // Sub-items// Additional Ad Services ('additional-features' key) createMultiItems('additional-features', '');// Ongoing Support & Training createSingleItem('marketing-retainer', '', false); // Show if price > 0 createMultiItems('marketing-training-services', ''); // Sub-items// 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') { messageElement.innerHTML = "Your online advertising proposal request has been sent successfully!
Our ad specialists will review it and get back to you via email shortly.
Please check your inbox (and spam folder) for a confirmation email."; // Updated text } else { // Default (calculate - shouldn't happen with current flow but keep fallback) messageElement.innerHTML = "Your online advertising estimate has been calculated!
Please check your inbox (and spam folder) for a summary email.
You can request a formal proposal from the summary page."; // Updated text } } 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 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 KPI fieldthis.hideValidationMessage(); if (this.elements.breakdownItems) this.elements.breakdownItems.innerHTML = '';// Reset conditional elements/steps & visibility this.updateConditionalSections(); // Hide upsells this.updateStepIndicatorsVisibility(); // KPI input visibility handled by CSS// Ensure default strategy call is selected again this.setDefaultSelections();// Reset price, progress, nav this.calculateTotalPrice(); 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`; // Use new cookie name console.log('Cleared saved online ads quote data cookie.'); } catch (error) { console.error('Error clearing saved data:', error); } },/** Apply mobile-specific class and layout adjustments */ applyMobileOptimizations: function() { // CSS now handles responsive display },/** 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