`; 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 di branding è pronto!"; intro = `Grazie per aver utilizzato il nostro calcolatore di preventivi per il branding! 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 di branding. Così hai un quadro chiaro di cosa aspettarti mentre diamo forma alla tua identità di marca. 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/branding"; } else { // invoice title = "Richiesta fattura branding ricevuta"; intro = `Grazie per aver richiesto una fattura formale per il branding, ${cd.name || 'caro cliente'}! Le esigenze del tuo brand sono ora in coda per una revisione dettagliata.`; mainContent = `Il nostro team non vede l'ora di dare vita al tuo brand! Stiamo esaminando le tue selezioni per preparare una proposta completa, su misura per le tue esigenze di branding. 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 a un'identità di marca solida.`; 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 primary logo if ( (typeof price !== 'number' || price === 0) && label !== 'Logo principale' && !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 === 'Logo principale') { 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 primary logo, skip other zero-price multi-items if (item.price !== 0 || item.value === 'page-home') { let label = item.name; if (item.value === 'page-home') label = 'Logo principale'; // 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 = `Gestione del brand: ${sel.name}`; isBold = true; } if (key === 'timeline') { label = `Tempistiche: ${sel.name}`; isBold = true; } if (key === 'needs-hosting' && sel.price > 0) { label = `File di origine: ${sel.name}`; isBold = true; } if (key === 'needs-domain' && sel.price > 0) { label = `Diritti di utilizzo: ${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) // Brand Application Dettagli (Show only if selected) createSingleItem('ecommerce-products', 'Applications: ', true); // Pass showZero=true if needed createMultiItems('ecommerce-payments', ''); // Sub-items // File Format & Usage Rights (Show only if price > 0, bold prefix) createSingleItem('needs-hosting', '', false); createSingleItem('needs-domain', '', false); // Elementi del brand (Sub-items, includes primary logo) createMultiItems('pages', ''); // Design (Show only if price > 0 or base, bold prefix) createSingleItem('design-complexity', '', false); // Market Servizi di ricerca (Sub-items) createMultiItems('branding-services', ''); // Caratteristiche (Sub-items) createMultiItems('additional-features', ''); // Brand Management/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 di branding è 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 di branding è 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 primary logo 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