Automated Tax & VAT Calculation on Checkout

Automated Tax & VAT Calculation on Checkout

Instantly calculate the final price with location-based taxes.

Generated on:

Price Breakdown

`; updateResults(); attachCalculatorListeners(); lucide.createIcons(); }; const updateResults = () => { const resultsDisplay = document.getElementById('results-display'); if (!resultsDisplay) return; const result = calculateTax(); resultsDisplay.innerHTML = `
Base Amount ${formatCurrency(result.baseAmount)}
${result.rateInfo.type} (${result.rateInfo.rate}%) + ${formatCurrency(result.taxAmount)}
Total Amount Due ${formatCurrency(result.totalAmount)}
`; }; const attachCalculatorListeners = () => { const baseAmountInput = document.getElementById('base-amount'); const locationSelect = document.getElementById('location-select'); baseAmountInput.addEventListener('input', e => { calculatorState.baseAmount = parseFloat(e.target.value) || 0; updateResults(); }); locationSelect.addEventListener('change', e => { calculatorState.selectedLocation = e.target.value; updateResults(); }); document.getElementById('download-pdf-btn').addEventListener('click', generatePdf); }; const renderDataConfig = () => { const configContent = document.getElementById('content-config'); if (!configContent) return; const ratesHtml = appData.taxRates.map((rate, index) => `
`).join(''); configContent.innerHTML = `

Tax Rate Configuration

Defined Tax Locations
Location Name
Tax Type (e.g., VAT)
Rate %
${ratesHtml}
`; attachConfigListeners(); lucide.createIcons(); }; const attachConfigListeners = () => { document.getElementById('add-rate-btn').addEventListener('click', () => { appData.taxRates.push({ location: '', type: 'Sales Tax', rate: 0 }); renderDataConfig(); }); document.getElementById('rates-container').addEventListener('click', e => { const removeBtn = e.target.closest('.remove-rate-btn'); if (removeBtn) { appData.taxRates.splice(parseInt(removeBtn.dataset.index), 1); renderDataConfig(); } }); document.getElementById('apply-settings-btn').addEventListener('click', () => { const newRates = []; document.querySelectorAll('.rate-row').forEach(row => { const location = row.querySelector('[data-prop="location"]').value; const type = row.querySelector('[data-prop="type"]').value; const rate = parseFloat(row.querySelector('[data-prop="rate"]').value) || 0; if (location) { newRates.push({ location, type, rate }); } }); appData.taxRates = newRates; if (!appData.taxRates.some(r => r.location === calculatorState.selectedLocation)) { calculatorState.selectedLocation = appData.taxRates[0]?.location || ''; } alert('Settings updated!'); renderCalculator(); }); }; const generatePdf = () => { loadingOverlay.style.display = 'flex'; const { jsPDF } = window.jspdf; const pdfContent = document.getElementById('pdf-content-area'); const pdfHeader = document.getElementById('pdf-header'); document.getElementById('pdf-generated-date').textContent = new Date().toLocaleDateString('en-US'); pdfHeader.classList.remove('hidden'); html2canvas(pdfContent, { scale: 2, useCORS: true, logging: false }) .then(canvas => { pdfHeader.classList.add('hidden'); const imgData = canvas.toDataURL('image/jpeg', 0.95); const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pageMargin = 60; const contentWidth = pdfWidth - (pageMargin * 2); const imgProps = pdf.getImageProperties(imgData); const imgHeight = (imgProps.height * contentWidth) / imgProps.width; pdf.addImage(imgData, 'JPEG', pageMargin, pageMargin, contentWidth, imgHeight); pdf.save('Price-Breakdown.pdf'); loadingOverlay.style.display = 'none'; }).catch(err => { console.error("PDF generation failed:", err); pdfHeader.classList.add('hidden'); loadingOverlay.style.display = 'none'; alert('An error occurred generating the PDF.'); }); }; // --- TAB NAVIGATION & INITIALIZATION --- const initializeTabs = () => { const tabsContainer = document.getElementById('tabs-container'); const prevTabBtn = document.getElementById('prev-tab-btn'); const nextTabBtn = document.getElementById('next-tab-btn'); let activeTabIndex = 0; const tabs = [ { name: 'Calculator', id: 'calculator' }, { name: 'Data Configuration', id: 'config' } ]; tabsContainer.innerHTML = tabs.map(t => ``).join(''); mainContent.innerHTML = tabs.map(t => `
`).join(''); const tabButtons = tabsContainer.querySelectorAll('.tab-btn'); const tabContents = mainContent.querySelectorAll('.tab-content'); const switchTab = (index) => { activeTabIndex = index; tabButtons.forEach((btn, i) => btn.classList.toggle('active', i === index)); tabContents.forEach((content, i) => content.classList.toggle('hidden', i !== index)); prevTabBtn.disabled = activeTabIndex === 0; nextTabBtn.disabled = activeTabIndex === tabs.length - 1; }; tabButtons.forEach((btn, index) => btn.addEventListener('click', () => switchTab(index))); prevTabBtn.addEventListener('click', () => { if (activeTabIndex > 0) switchTab(activeTabIndex - 1); }); nextTabBtn.addEventListener('click', () => { if (activeTabIndex < tabs.length - 1) switchTab(activeTabIndex + 1); }); switchTab(0); renderCalculator(); renderDataConfig(); }; initializeTabs(); });
Scroll to Top