Full Comparison
| Gateway |
Est. Monthly Fee |
`;
results.allCalculations.forEach(r => {
html += `
| ${r.name} |
$${r.monthlyCost.toFixed(2)} |
`;
});
html += `
`;
resultsContainer.innerHTML = html;
};
// --- CORE LOGIC ---
const handleRecommendation = () => {
recommendBtnSpinner.classList.remove('hidden');
recommendBtnText.textContent = 'Analyzing...';
recommendBtn.disabled = true;
setTimeout(() => {
const monthlyTx = parseInt(document.getElementById('monthly-transactions').value) || 0;
const avgValue = parseFloat(document.getElementById('avg-transaction-value').value) || 0;
const needsSubs = document.getElementById('needs-subscriptions').checked;
const filteredGateways = gateways.filter(g => needsSubs ? g.hasSubscriptions : true);
const allCalculations = filteredGateways.map(g => {
const monthlyCost = (monthlyTx * avgValue * (g.percentFee / 100)) + (monthlyTx * g.fixedFee);
return { ...g, monthlyCost };
}).sort((a,b) => a.monthlyCost - b.monthlyCost);
const results = {
allCalculations,
bestGateway: allCalculations.length > 0 ? allCalculations[0] : null
};
renderDashboard(results);
downloadPdfBtn.disabled = !results.bestGateway;
recommendBtnSpinner.classList.add('hidden');
recommendBtnText.textContent = 'Get Recommendation';
recommendBtn.disabled = false;
}, 500);
};
// --- UI & EVENT HANDLERS ---
const switchTab = (tabId) => {
currentTab = tabId;
Object.values(tabPanes).forEach(pane => pane.classList.add('hidden'));
tabPanes[tabId].classList.remove('hidden');
Object.values(tabButtons).forEach(btn => btn.classList.replace('tab-active', 'tab-inactive'));
tabButtons[tabId].classList.replace('tab-inactive', 'tab-active');
updateNavButtons();
};
const navigateTabs = (direction) => {
const currentIndex = tabs.indexOf(currentTab);
const newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
if (newIndex >= 0 && newIndex < tabs.length) switchTab(tabs[newIndex]);
};
const updateNavButtons = () => {
const currentIndex = tabs.indexOf(currentTab);
prevBtn.disabled = currentIndex === 0;
nextBtn.disabled = currentIndex === tabs.length - 1;
prevBtn.classList.toggle('opacity-50', prevBtn.disabled);
nextBtn.classList.toggle('opacity-50', nextBtn.disabled);
};
const handlePdfDownload = () => {
const pdfRenderContainer = document.getElementById('pdf-render-content');
const pdfContent = document.getElementById('pdf-content').innerHTML;
const header = `
Payment Gateway Recommendation
`;
pdfRenderContainer.innerHTML = header + pdfContent + '';
html2canvas(pdfRenderContainer, { scale: 2 }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth(), margin = 40;
const contentWidth = pdfWidth - margin * 2;
const pdfHeight = (canvas.height * contentWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', margin, margin, contentWidth, pdfHeight);
pdf.save('Gateway-Recommendation.pdf');
});
};
// --- EVENT LISTENERS ---
window.switchTab = switchTab;
window.navigateTabs = navigateTabs;
recommendBtn.addEventListener('click', handleRecommendation);
downloadPdfBtn.addEventListener('click', handlePdfDownload);
addGatewayBtn.addEventListener('click', () => { gateways.push({ id: nextId++, name: 'New Gateway', percentFee: 0, fixedFee: 0, hasSubscriptions: false }); renderConfigTable(); });
configTableBody.addEventListener('input', e => {
if (!e.target.classList.contains('cfg-input')) return;
const id = parseInt(e.target.closest('tr').dataset.id);
const prop = e.target.dataset.prop;
const item = gateways.find(g => g.id === id);
if (item) {
if (e.target.type === 'checkbox') {
item[prop] = e.target.checked;
} else {
item[prop] = e.target.type === 'number' ? parseFloat(e.target.value) : e.target.value;
}
}
});
configTableBody.addEventListener('click', e => {
if (!e.target.classList.contains('rm-btn')) return;
const id = parseInt(e.target.closest('tr').dataset.id);
gateways = gateways.filter(g => g.id !== id);
renderConfigTable();
});
// --- INITIALIZATION ---
renderConfigTable();
updateNavButtons();
switchTab('dashboard');
});
