`; return html; },/** * Generate user email HTML for Photo Editing services (Identical) */ generateUserEmailHtml: function(type = 'calculate') { const cd = this.state.selections.contactDetails || {}; const totalPrice = this.state.totalPrice.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }); const currentYear = new Date().getFullYear();let title, intro, mainContent, ctaText, ctaLink;if (type === 'calculate') { title = "Your Photo Editing Estimate is Ready!"; intro = `Thank you for using our photo editing quote calculator! We've processed your selections to provide a personalized estimate.`; mainContent = `Based on the services, quantity, and complexity you selected, we've generated an estimate for your photo editing project.The next step is to review the detailed breakdown on our website. If you'd like to get a formal quote and proceed, click the "Request Formal Quote & Upload Files" button on the summary page. We'll then send instructions on how to send us your photos.`; ctaText = "View Your Estimate"; ctaLink = window.location.href; // Link back to the current page } else { // quote title = "Photo Editing Quote Request Received"; intro = `Thanks for requesting a formal photo editing quote, ${cd.name || 'there'}! Your request based on the calculator selections is being reviewed.`; mainContent = `We're excited to help make your photos look their best!You will receive a separate email shortly with instructions on how to securely upload your photos for our review.Once we've received and assessed your images against the requested services, we'll send a final, fixed-price quote for your approval before any editing work begins. This ensures accuracy and transparency.`; ctaText = "Contact Our Team"; ctaLink = "https://umitech.com.au/contact"; }const html = ``; return html; },/** * Populate Invoice Header and Generate Breakdown Items (Identical logic) */ 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(); // Call the updated breakdown function} catch (error) { console.error('Error populating invoice details:', error); } },/** * Generate breakdown items for the quote summary page (photo editing version - REVISED) */ generateQuoteBreakdown: function() { try { if (!this.elements.breakdownItems) return; this.elements.breakdownItems.innerHTML = ''; const quantity = this.state.estimatedPhotoCount || 1; const breakdownData = []; // Stores { label, priceText, isSubItem, isDiscount, isAdjustment }const formatPrice = (price) => price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });// --- Categorize all selected items --- let totalPerPhotoCost = 0; let totalFixedCost = 0; const perPhotoItemsList = []; const fixedItemsList = []; const freeItemsList = [];const perPhotoKeys = ['service-type', 'editing-style', 'complexity-level', 'revision-plan', 'file-formats', 'specific-edits', 'add-on-services']; const fixedCostKeys = ['style-guide-creation', 'editing-training', 'timeline'];for (const key in this.state.selections) { if (!this.state.selections.hasOwnProperty(key) || key === 'contactDetails') continue; const selection = this.state.selections[key];const processItem = (item, itemKey) => { if (item.value === 'consultation-call' || (itemKey === 'file-formats' && item.value === 'format-jpeg' && item.price === 0)) { freeItemsList.push({ label: `• ${item.name}`, priceText: 'Included', isSubItem: true }); return; } if (item.price === 0) return; // Skip other zero-price items// Special case: Retainer is fixed if (itemKey === 'revision-plan' && item.value === 'retainer-editing') { totalFixedCost += item.price; fixedItemsList.push({ label: `Retainer: ${item.name}`, priceText: `$${formatPrice(item.price)}/mo` }); } else if (perPhotoKeys.includes(itemKey)) { totalPerPhotoCost += item.price; let labelPrefix = ''; let isSub = true; // Add prefixes for key per-photo items if (itemKey === 'service-type') { labelPrefix = `Base Service: `; isSub = false; } else if (itemKey === 'editing-style') { labelPrefix = `Style: `; isSub = false; } else if (itemKey === 'complexity-level') { labelPrefix = `Complexity: `; isSub = false; } else if (itemKey === 'revision-plan') { labelPrefix = `Revisions: `; isSub = false; } else { labelPrefix = `• `; } // Default bullet for multi-select itemsperPhotoItemsList.push({ label: `${labelPrefix}${item.name}`, priceText: `+$${formatPrice(item.price)} / photo`, isSubItem: isSub, rawPrice: item.price // Store raw price for sorting/grouping if needed }); } else if (fixedCostKeys.includes(itemKey)) { totalFixedCost += item.price; let priceText = `$${formatPrice(item.price)}`; if (item.price < 0) priceText = `-$${formatPrice(Math.abs(item.price))}`; // Handle discounts like flexible timeline fixedItemsList.push({ label: (itemKey === 'timeline' ? `Timeline: ` : `• `) + item.name, // Add prefix for timeline priceText: priceText, isSubItem: itemKey !== 'timeline' // Timeline is not a sub-item }); } else { console.warn(`Uncategorized item cost during breakdown: ${itemKey} -> ${item.name}`); totalFixedCost += item.price; // Default to fixed fixedItemsList.push({ label: `• ${item.name}`, priceText: `$${formatPrice(item.price)}`, isSubItem: true }); } };if (Array.isArray(selection)) { selection.forEach(item => processItem(item, key)); } else if (selection && typeof selection === 'object') { processItem(selection, key); } }// --- Build the final breakdown structure ---// Add Base Service + Quantity Line first if available const baseServiceSelection = perPhotoItemsList.find(item => item.label.includes("Base Service:")); if (baseServiceSelection) { breakdownData.push({ label: `${baseServiceSelection.label} (${quantity} photos)`, priceText: baseServiceSelection.priceText // Show per photo price here }); // Remove from perPhotoItemsList so it's not added again perPhotoItemsList.splice(perPhotoItemsList.indexOf(baseServiceSelection), 1); } else { // If no base service selected, still show quantity breakdownData.push({label:`Photo Quantity: ${quantity}`, priceText: ''}); }// Add other Per-Photo items perPhotoItemsList.sort((a, b) => (a.label > b.label ? 1 : -1)); // Optional: sort alphabetically breakdownData.push(...perPhotoItemsList);// Add Free/Included items breakdownData.push(...freeItemsList);// Add Fixed cost items fixedItemsList.sort((a, b) => (a.label > b.label ? 1 : -1)); // Optional: sort breakdownData.push(...fixedItemsList);// Add Volume Discount if applicable let subTotal = totalPerPhotoCost * quantity; let discountAmount = 0; if (quantity >= VOLUME_DISCOUNT_THRESHOLD && totalPerPhotoCost > 0) { discountAmount = subTotal * VOLUME_DISCOUNT_PERCENTAGE; breakdownData.push({ label: `Volume Discount (${(VOLUME_DISCOUNT_PERCENTAGE * 100).toFixed(0)}% for ${quantity} photos)`, priceText: `-$${formatPrice(discountAmount)}`, isDiscount: true }); }// Add Minimum Fee Adjustment if applicable let displayTotal = subTotal - discountAmount + totalFixedCost; if (displayTotal > 0 && displayTotal < MINIMUM_PROJECT_FEE) { breakdownData.push({ label: `Minimum Project Fee Adjustment`, priceText: `+$${formatPrice(MINIMUM_PROJECT_FEE - displayTotal)}`, isAdjustment: true }); }// --- Render the breakdown --- if (breakdownData.length === 0 && this.state.totalPrice === 0) { this.elements.breakdownItems.innerHTML = ''; } else { breakdownData.forEach(itemData => { const item = document.createElement('div'); item.className = 'uq-invoice-item'; if (itemData.isDiscount) item.style.color = 'green'; if (itemData.isAdjustment) item.style.fontStyle = 'italic'; item.innerHTML = ` `; this.elements.breakdownItems.appendChild(item); }); }} catch (error) { console.error('Error generating quote breakdown:', error); if (this.elements.breakdownItems) this.elements.breakdownItems.innerHTML = ''; } },/** * Show the dedicated Thank You page section (Identical logic, updated message) */ showSubmissionSuccessPage: function(action) { try { const messageElement = document.getElementById('thank-you-message'); if (messageElement) { if (action === 'quote') { // Action for photo editing messageElement.innerHTML = "Your photo editing quote request has been sent successfully!
We'll email you shortly with instructions on how to upload your files.
Please check your inbox (and spam folder)."; } else { // Default (calculate) messageElement.innerHTML = "Your photo editing estimate has been calculated!
Please check your inbox (and spam folder) for a summary email.
You can request a formal quote from the summary page."; } } 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 (Identical) */ 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; this.state.estimatedPhotoCount = 1;// 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.styleReferenceInputField) this.elements.styleReferenceInputField.value = '';this.hideValidationMessage(); if (this.elements.breakdownItems) this.elements.breakdownItems.innerHTML = '';// Reset conditional elements/steps & visibility this.updateConditionalSections(); this.updateStepIndicatorsVisibility();// Ensure default selections are re-selected 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 (Identical) */ 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 (Identical - CSS handles) */ applyMobileOptimizations: function() { // CSS now handles responsive display },/** Add/Remove Loading Indicator (Identical) */ addLoadingIndicator: function(parent = this.elements.calculator.querySelector('.uq-section-active')) { if (!parent) return; this.removeLoadingIndicator(parent); // Ensure no 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 = this.elements.calculator) { parent?.querySelector('.uq-loading')?.remove(); },/** Animate number change smoothly (Identical - includes formatting) */ animateNumber: function(element, start, end) { if (!element) return; start = Number(start) || 0; end = Number(end) || 0; const endFormatted = end.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }); if (start === end) { element.textContent = endFormatted; 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 = start + easedProgress * (end - start); element.textContent = currentValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }); if (progress < 1) requestAnimationFrame(step); else element.textContent = endFormatted; }; requestAnimationFrame(step); } catch (error) { console.error('Error animating number:', error); element.textContent = endFormatted; } },/** Easing function (Identical) */ easeOutCubic: (t) => (--t) * t * t + 1,/** Debounce function (Identical) */ debounce: function(func, wait) { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); }; } }; // End PhotoEditingCalculator Object// Initialize PhotoEditingCalculator.init(); // Use the renamed object})(); // End IIFE }); // End DOMContentLoaded