`; return html; },/** * Generate a very simple but effective email that won't trigger client styling */ generateUserEmailHtml: function(type = 'calculate') { const cd = this.state.selections.contactDetails || {}; const totalPrice = this.state.totalPrice.toLocaleString(); const currentYear = new Date().getFullYear(); // Set content based on email type let title, intro, mainContent, ctaText, ctaLink; if (type === 'calculate') { title = "Your Website Estimate is Ready!"; intro = `Thank you for using our website quote calculator, ${cd.name || 'there'}! We've analyzed your selections and prepared your personalized estimate.`; mainContent = `Your selections have been carefully processed to create a tailored estimate for your project. This gives you a clear picture of what to expect as we bring your vision to life.The next step is to review your detailed breakdown on our website. When you're ready to move forward or have any questions, simply click the "Request Formal Invoice" button on the summary page or reach out through our contact page.`; ctaText = "View Your Project Details"; ctaLink = "https://umitech.com.au/quotes"; } else { // invoice title = "Your Invoice Request Received"; intro = `Thanks for requesting a formal invoice, ${cd.name || 'there'}! Your project requirements are now in our queue for detailed review.`; mainContent = `Our team is excited to help bring your web project to life! We're currently reviewing your selections to prepare a comprehensive proposal tailored to your specific needs.Within 1 business day, our team will reach out with your formal proposal and any clarifying questions we might have. This personalized approach ensures we deliver exactly what you need for your online success.`; ctaText = "Contact Our Team"; ctaLink = "https://umitech.com.au/contact"; }// Create a very basic HTML email that won't be reformatted by clients // Avoids all table structures and complex styling that triggers reformatting 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) { // Ensure tag wraps the name for normal spacing consistency 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; // CSS :empty selector handles hiding if empty }// Generate Breakdown Items this.generateQuoteBreakdown();} catch (error) { console.error('Error populating invoice details:', error); } },/** * Generate breakdown items for the quote summary page (invoice style) */ generateQuoteBreakdown: function() { try { if (!this.elements.breakdownItems) return; this.elements.breakdownItems.innerHTML = ''; // Clear previous itemsconst createBreakdownItem = (label, price, isSubItem = false, isBoldPrefix = false) => { // Only show priced items OR the base project type OR the free homepage if ( (typeof price !== 'number' || price === 0) && label !== 'Homepage' && !isBoldPrefix) return;const item = document.createElement('div'); item.className = 'uq-invoice-item'; // Use invoice item class let priceString = `$${price.toLocaleString()}`; if (price < 0) { priceString = `-$${Math.abs(price).toLocaleString()}`; // Format negative as discount } else if (price === 0 && label === 'Homepage') { priceString = 'Included'; } else if (price === 0 && isBoldPrefix) { // Show $0 for base if price is 0 priceString = '$0'; }// Apply bold prefix using tag let labelHtml = label; if (isBoldPrefix) { const parts = label.split(':'); if (parts.length > 1) { labelHtml = `${parts[0]}: ${parts.slice(1).join(':').trim()}`; } else { labelHtml = `${label}`; // Bold the whole thing if no colon } } else { // Handle non-prefix labels (like sub-items) - ensure they are not bold labelHtml = label; }// Use invoice item structure item.innerHTML = `

${labelHtml}

${priceString}

`; this.elements.breakdownItems.appendChild(item); }; const createMultiItems = (key, labelPrefix) => { const sel = this.state.selections[key]; if (sel && Array.isArray(sel)) { sel.forEach(item => { // Always show homepage, skip other zero-price multi-items if (item.price !== 0 || item.value === 'page-home') { let label = item.name; if (item.value === 'page-home') label = 'Homepage'; // Ensure correct label // Don't add prefix to sub-items, use isSubItem=true 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}`; // Special case for base project type label let isBold = false; if (key === 'project-type') { label = `Base: ${sel.name}`; isBold = true; } if (key === 'design-complexity') { label = `Design: ${sel.name}`; isBold = true; } if (key === 'maintenance') { label = `Maintenance: ${sel.name}`; isBold = true; } if (key === 'timeline') { label = `Timeline: ${sel.name}`; isBold = true; } if (key === 'needs-hosting' && sel.price > 0) { label = `Setup: ${sel.name}`; isBold = true; } if (key === 'needs-domain' && sel.price > 0) { label = `Setup: ${sel.name}`; isBold = true; } // Add other bold prefixes as needed createBreakdownItem(label, sel.price, false, isBold); } };// --- Add items in logical order --- createSingleItem('project-type', '', true); // Base (Always show, bold prefix)// E-commerce (Show only if selected) createSingleItem('ecommerce-products', 'Products: ', true); // Pass showZero=true if needed createMultiItems('ecommerce-payments', ''); // Sub-items// Hosting & Domain (Show only if price > 0, bold prefix) createSingleItem('needs-hosting', '', false); createSingleItem('needs-domain', '', false);// Pages (Sub-items, includes homepage) createMultiItems('pages', '');// Design (Show only if price > 0 or base, bold prefix) createSingleItem('design-complexity', '', false); // Branding Services (Sub-items) createMultiItems('branding-services', '');// Features (Sub-items) createMultiItems('additional-features', '');// Maintenance/Support (Bold prefix for plan, sub-items for training) createSingleItem('maintenance', '', false); createMultiItems('training-services', '');// Timeline (Bold prefix) createSingleItem('timeline', '', false);if (this.elements.breakdownItems.children.length === 0 && this.state.totalPrice === 0) { this.elements.breakdownItems.innerHTML = '

Select options to see breakdown.

'; }} catch (error) { console.error('Error generating quote breakdown:', error); if (this.elements.breakdownItems) this.elements.breakdownItems.innerHTML = '

Error loading breakdown

'; } },/** * Show the dedicated Thank You page section */ showSubmissionSuccessPage: function(action) { try { const messageElement = document.getElementById('thank-you-message'); if (messageElement) { if (action === 'invoice') { messageElement.innerHTML = "Your invoice request has been sent successfully!
We'll review it and get back to you via email shortly.
Please check your inbox (and spam folder) for a confirmation email."; } else { // Default (e.g., calculate only) messageElement.innerHTML = "Your estimate has been calculated!
Please check your inbox (and spam folder) for a summary email.
You can request a formal invoice from the summary page."; } } this.showSection('thank-you'); // Navigate to the Thank You section } catch (error) { console.error('Error showing thank you page:', error); // Fallback: Show alert and reset alert("Submission successful! Thank you."); this.resetCalculator(); } },/** * Reset calculator to start a new quote */ resetCalculator: function(skipCookieClear = false) { // Add flag to skip cookie clear if called from loading state try { console.log('Resetting calculator...'); if (!skipCookieClear) { this.clearSavedData(); }// Reset state this.state.selections = {}; this.state.totalPrice = 0; this.state.activeSections = [...this.state.sectionSequence]; // Reset to full sequence 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'); // Reset dropdown if (this.elements.domainInputField) this.elements.domainInputField.value = ''; // Clear domain fieldthis.hideValidationMessage(); if (this.elements.breakdownItems) this.elements.breakdownItems.innerHTML = ''; // Clear invoice items// Reset conditional elements/steps & visibility this.updateConditionalSections(); this.updateStepIndicatorsVisibility(); this.updateDomainInputVisibility(); // Hide domain input// Ensure default homepage is selected again visually and in state this.setDefaultSelections();// Reset price, progress, nav this.calculateTotalPrice(); // Recalculate (should be base price now) this.updatePriceDisplay(0); // Start animation from 0 this.updateProgress();// Show the welcome section this.showSection('welcome');// Ensure price bar is visible again and nav buttons reset 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 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, keep this function for potential future JS adjustments },/** Add/Remove Loading Indicator */ addLoadingIndicator: function(parent = this.elements.calculator.querySelector('.uq-section-active')) { // Default to active section if (!parent) return; this.removeLoadingIndicator(parent); // Ensure no duplicates const loader = document.createElement('div'); loader.className = 'uq-loading'; loader.innerHTML = '

'; // Make parent position relative if not already set, for absolute positioning of loader 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