`; 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 = "Il tuo preventivo per il sito web è pronto!"; intro = `Grazie per aver utilizzato il nostro calcolatore di preventivi per siti web, ${cd.name || 'caro cliente'}! Abbiamo analizzato le tue selezioni e preparato il tuo preventivo personalizzato.`; mainContent = `Le tue selezioni sono state elaborate con attenzione per creare un preventivo su misura per il tuo progetto. Così hai un quadro chiaro di cosa aspettarti mentre diamo forma alla tua idea. Il prossimo passo è consultare il dettaglio completo sul nostro sito. Quando sei pronto a procedere o hai delle domande, ti basta cliccare sul pulsante "Richiedi fattura formale" nella pagina di riepilogo oppure scriverci dalla pagina dei contatti.`; ctaText = "Visualizza i dettagli del tuo progetto"; ctaLink = "https://umitech.it/preventivo/website"; } else { // invoice title = "Richiesta di fattura ricevuta"; intro = `Grazie per aver richiesto una fattura formale, ${cd.name || 'caro cliente'}! Le esigenze del tuo progetto sono ora in coda per una revisione dettagliata.`; mainContent = `Il nostro team non vede l'ora di dare vita al tuo progetto web! Stiamo esaminando le tue selezioni per preparare una proposta completa, su misura per le tue esigenze specifiche. Entro 1 giorno lavorativo il nostro team ti contatterà con la proposta formale e con eventuali domande di chiarimento. Un approccio personalizzato, per consegnarti esattamente ciò che serve al successo della tua presenza online.`; ctaText = "Contatta il Nostro Team"; ctaLink = "https://umitech.it/contattaci"; } // 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 items const 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 = 'Incluso'; } 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 non 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 = `Servizio base: ${sel.name}`; isBold = true; } if (key === 'design-complexity') { label = `Design: ${sel.name}`; isBold = true; } if (key === 'maintenance') { label = `Manutenzione: ${sel.name}`; isBold = true; } if (key === 'timeline') { label = `Tempistiche: ${sel.name}`; isBold = true; } if (key === 'needs-hosting' && sel.price > 0) { label = `Configurazione: ${sel.name}`; isBold = true; } if (key === 'needs-domain' && sel.price > 0) { label = `Configurazione: ${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', 'Prodotti: ', true); // Pass showZero=true if needed createMultiItems('ecommerce-payments', ''); // Sub-items // Hosting e dominio (Show only if price > 0, bold prefix) createSingleItem('needs-hosting', '', false); createSingleItem('needs-domain', '', false); // Pagine (Sub-items, includes homepage) createMultiItems('pages', ''); // Design (Show only if price > 0 or base, bold prefix) createSingleItem('design-complexity', '', false); // Servizi di branding (Sub-items) createMultiItems('branding-services', ''); // Caratteristiche (Sub-items) createMultiItems('additional-features', ''); // Maintenance/Supporto (Bold prefix for plan, sub-items for training) createSingleItem('maintenance', '', false); createMultiItems('training-services', ''); // Tempistiche (Bold prefix) createSingleItem('timeline', '', false); if (this.elements.breakdownItems.children.length === 0 && this.state.totalPrice === 0) { this.elements.breakdownItems.innerHTML = '

Seleziona le opzioni per vedere il dettaglio.

'; } } 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 = "La tua richiesta di fattura è stata inviata con successo!
La esamineremo e ti risponderemo via email a breve.
Controlla la tua casella di posta (e la cartella spam) per un'email di conferma."; } else { // Default (e.g., calculate only) messageElement.innerHTML = "Il tuo preventivo è stato calcolato!
Controlla la tua casella di posta (e la cartella spam) per un'email di riepilogo.
Puoi richiedere una fattura formale dalla pagina di riepilogo."; } } 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("Invio riuscito! Grazie."); 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 Elementi 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 field this.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); // Inizia 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("Errore nel ripristino del preventivo. Aggiorna la pagina."); } }, /** 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 non 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