`; return html; },/** * Generate user email HTML for Consultation services */ generateUserEmailHtml: function(type = 'quote') { // Default type 'quote' for confirmation const cd = this.state.selections.contactDetails || {}; const totalPrice = `$${this.state.totalPrice.toLocaleString()} AUD`; const currentYear = new Date().getFullYear();let title, intro, mainContent, ctaText, ctaLink;if (type === 'quote') { title = "Consultation Quote Request Received!"; intro = `Thanks for requesting a consultation quote, ${cd.name || 'there'}! We've received your preliminary selections.`; mainContent = `

We're reviewing the details you provided about your consultation needs. The next step is our complimentary Initial Discovery Call (~30 mins).

This short call allows us to understand your specific challenges and goals better, ensuring the formal quote we provide is perfectly tailored.

Expect an email from our team within 1 business day to schedule this call at your convenience. We look forward to connecting!

Your preliminary estimate based on selections is: ${totalPrice}. This will be confirmed after the Discovery Call.

`; ctaText = "Visit Umitech"; ctaLink = "https://umitech.com.au"; } else { // Fallback for 'calculate' or other types title = "Your Umitech Consultation Estimate"; intro = `Thank you for using our consultation quote calculator, ${cd.name || 'there'}! Here's a summary of your selections.`; mainContent = `

Based on the options you selected, we've generated the following estimate: ${totalPrice}.

This estimate provides a starting point. To get a formal, fixed-price quote and discuss your project in detail, please click the "Request Formal Quote" button on the calculator's summary page. This will prompt us to schedule the essential Initial Discovery Call.

`; ctaText = "Return to Calculator"; // Link back to the calculator page (Update URL if needed) ctaLink = window.location.href; // Use current page URL as a fallback }const html = `

${title} Hi ${cd.name || 'there'}, ${intro} ${mainContent} ${ctaText} Best regards, The Umitech Team © ${currentYear} Umitech | umitech.com.au | ABN: 69322477658

`; return html; },// --- Populating Invoice Details --- // --- generateQuoteBreakdown and populateInvoiceDetails remain unchanged --- /** * Populate Invoice Header and Generate Breakdown Items for Consultation */ populateInvoiceDetails: function() { try { // Populate Header (Client Info, Date) 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; // Show only if phone exists this.elements.invoiceClientPhoneEl.style.display = phoneText ? 'block' : 'none'; }// Generate Breakdown Items for the invoice body this.generateQuoteBreakdown();} catch (error) { console.error('Error populating consultation invoice details:', error); } },/** * Generate breakdown items for the quote summary page (consultation version) */ generateQuoteBreakdown: function() { try { if (!this.elements.breakdownItems) return; this.elements.breakdownItems.innerHTML = ''; // Clear previous items// Helper function to create a single breakdown item row const createBreakdownItem = (label, price, isSubItem = false, isBoldPrefix = false, key = '') => { // Determine if the item should be shown const baseServiceKey = 'project-type'; const discoveryCallValue = 'strategy-consultation'; // Show if price is non-zero, OR it's the free discovery call, OR it's the base service, OR it's explicitly requested (future use?) const shouldShow = (typeof price === 'number' && price !== 0) || (key === 'pages' && label === 'Initial Discovery Call') || (key === baseServiceKey && typeof price === 'number'); // Show base even if $0if (!shouldShow) return; // Don't render if not applicableconst item = document.createElement('div'); item.className = 'uq-invoice-item';// Format price let priceString = `$${Math.abs(price).toLocaleString()}`; if (price < 0) priceString = `-${priceString}`; else if (price === 0 && (label === 'Initial Discovery Call')) priceString = 'Included'; else if (price === 0 && key === baseServiceKey) priceString = '$0'; // Explicitly show $0 for base// Format label 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); };// Helper function to create items from a multi-select array const createMultiItems = (key) => { const sel = this.state.selections[key]; if (sel && Array.isArray(sel)) { sel.forEach(item => { let label = item.name; // Ensure correct label for the free call if needed if (item.value === 'strategy-consultation' && key === 'pages') label = 'Initial Discovery Call'; createBreakdownItem(label, item.price, true, false, key); // Pass key }); } };// Helper function to create an item from a single-select object const createSingleItem = (key, labelPrefix = '', showZero = false) => { const sel = this.state.selections[key]; if (sel && typeof sel === 'object' && !Array.isArray(sel)) { // Only add if price isn't 0 OR showZero is true OR it's the base service const isBase = key === 'project-type'; if (sel.price !== 0 || showZero || isBase) { let label = `${labelPrefix}${sel.name}`; let isBold = false; if (isBase) { label = `Focus Area: ${sel.name}`; isBold = true; } if (key === 'campaign-sophistication') { label = `Depth Level: ${sel.name}`; isBold = true; } if (key === 'marketing-retainer') { label = `Advisory Plan: ${sel.name}`; isBold = true; } if (key === 'timeline') { label = `Timeline: ${sel.name}`; isBold = true; } createBreakdownItem(label, sel.price, false, isBold, key); // Pass key } } };// --- Add items in order --- createSingleItem('project-type', '', true); // 1. Base Focus (Show even if $0) createSingleItem('campaign-scale', 'Complexity/Duration: '); // 2. Context createMultiItems('marketing-platforms'); createSingleItem('reporting-frequency', 'Deliverable: '); // 3. Output createSingleItem('analytics-setup', 'Follow-up: '); createMultiItems('pages'); // 4. Activities (Handles free call) createSingleItem('campaign-sophistication', '', false); // 5. Depth Level createMultiItems('market-research-options'); // Discovery Assistance createMultiItems('additional-features'); // 6. Add-ons createSingleItem('marketing-retainer', '', false); // 7. Advisory Plan createMultiItems('marketing-training-services'); // Implementation Training createSingleItem('timeline', '', false); // 8. Timeline// Handle empty state if (!this.elements.breakdownItems.hasChildNodes()) { this.elements.breakdownItems.innerHTML = ''; }} catch (error) { console.error('Error generating consultation 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 === 'quote') { messageElement.innerHTML = "Your consultation quote request has been sent successfully!
We'll review your requirements and email you shortly to schedule your complimentary Discovery Call.
Please check your inbox (and spam folder)."; } else { messageElement.innerHTML = "Your request has been sent successfully.
We'll be in touch soon!"; } } this.showSection('thank-you'); if (this.elements.priceBar) this.elements.priceBar.style.display = 'none'; // Ensure bar is hidden } catch (error) { console.error('Error showing thank you page:', error); alert("Submission successful! Thank you. We will be in touch soon."); this.resetCalculator(); } },/** * Reset calculator to start a new quote */ resetCalculator: function(skipCookieClear = false) { try { console.log('Resetting consultation 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')); // Reset dropdowns to default explicitly if needed // document.getElementById('country-code')?.value = '+61'; if (this.elements.kpiInputField) this.elements.kpiInputField.value = ''; this.hideValidationMessage(); if (this.elements.breakdownItems) this.elements.breakdownItems.innerHTML = '';// Reset conditional elements & visibility this.updateConditionalSections(); this.updateStepIndicatorsVisibility();// IMPORTANT: Ensure FREE Discovery Call is re-selected this.setDefaultSelections();// Reset price, progress, nav this.calculateTotalPrice(); // Should reset price internally this.updatePriceDisplay(0); // Display $0 this.updateProgress(); // Reset progress bar/dots// Show 'welcome' section this.showSection('welcome'); // This also updates nav buttons and hides price barconsole.log('Consultation calculator reset complete.');} catch (error) { console.error('Error resetting consultation 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 consultation quote data cookie.'); } catch (error) { console.error('Error clearing saved data:', error); } },/** Add/Remove Loading Indicator */ addLoadingIndicator: function(parent) { if (!parent) parent = this.elements.calculator.querySelector('.uq-section-active'); // Default to active section if (!parent) return; // Exit if no parent found this.removeLoadingIndicator(parent); // Prevent duplicates 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) { if (!parent) parent = this.elements.calculator; // Check within the whole calculator if no specific parent 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(); // Ensure final value }; requestAnimationFrame(step); } catch (error) { console.error('Error animating number:', error); element.textContent = end.toLocaleString(); // Fallback } },/** Easing function (Cubic easing out) */ easeOutCubic: (t) => (--t) * t * t + 1,/** Debounce function to limit resize event frequency */ debounce: function(func, wait) { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); }; } }; // End QuoteCalculator Object// --- Initialization Trigger --- // Ensure the DOM is fully loaded and ready before initializing. // This check is redundant if the script tag is at the end of the body, // but it's good practice for robustness. if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => QuoteCalculator.init()); } else { QuoteCalculator.init(); // DOM is already ready }})(); // End IIFE }); // End DOMContentLoaded Wrapper (This outer one might be redundant if the script is correctly placed, but harmless)