Interactive Secure Email & SMS Order Notification System

Interactive Secure Email & SMS Order Notification System

Simulate and manage your customer order notifications with ease.

Send New Notification

Notification Log

Notification Dispatch Report

Report Date:

Notification Log

TimestampOrder IDCustomerTypeStatus

No notifications sent yet.

`; return; } notificationLog.forEach(log => { const icon = log.type === 'Email' ? `` : ``; container.insertAdjacentHTML('beforeend', `
${icon}

${log.orderId} - ${log.status}

${log.customer}

${log.timestamp.toLocaleTimeString()}
`); }); } function renderTemplates() { Object.keys(templates).forEach(key => { const textarea = document.getElementById(key); if (textarea) textarea.value = templates[key]; }); } // --- FORMS & EVENT HANDLERS --- notificationForm.addEventListener('submit', sendNotification); templatesForm.addEventListener('submit', e => { e.preventDefault(); Object.keys(templates).forEach(key => { const textarea = document.getElementById(key); if (textarea) templates[key] = textarea.value; }); showToast('Templates saved successfully!'); }); downloadPdfBtn.addEventListener('click', generatePdf); // --- TABS & NAVIGATION --- window.switchTab = (tabName) => { currentTab = tabName; Object.values(tabBtns).forEach(b=>b.classList.replace('tab-active', 'tab-inactive')); Object.values(tabContents).forEach(c=>c.style.display='none'); tabBtns[tabName].classList.replace('tab-inactive', 'tab-active'); tabContents[tabName].style.display = 'block'; }; window.navigateTabs = (dir) => { if (dir==='next' && currentTab==='dashboard') switchTab('config'); else if (dir==='prev' && currentTab==='config') switchTab('dashboard'); }; // --- UI HELPERS --- function showToast(message) { const toast = document.getElementById('toast'); toast.textContent = message; toast.classList.remove('opacity-0', 'translate-y-10'); setTimeout(() => { toast.classList.add('opacity-0', 'translate-y-10'); }, 3000); } // --- PDF GENERATION --- async function generatePdf() { const { jsPDF } = window.jspdf; const pdfReportElement = document.getElementById('pdf-report'); document.getElementById('pdf-date').textContent = new Date().toLocaleDateString('en-US'); const pdfTableBody = document.getElementById('pdf-table-body'); pdfTableBody.innerHTML = ''; notificationLog.forEach(log => { const row = ` ${log.timestamp.toLocaleString()} ${log.orderId} ${log.customer} ${log.type} ${log.status} `; pdfTableBody.insertAdjacentHTML('beforeend', row); }); const canvas = await html2canvas(pdfReportElement, { scale: 2 }); const imgData = canvas.toDataURL('image/jpeg', 0.85); const pdf = new jsPDF('p', 'mm', 'a4'); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight); pdf.save('Notification-Dispatch-Report.pdf'); } // --- INITIALIZATION --- function init() { templates = { 'email-confirmed': `Hi {{customerName}},\n\nYour order {{orderId}} has been confirmed! We'll notify you again once it has shipped.\n\nThanks for your purchase!`, 'email-shipped': `Great news, {{customerName}}!\n\nYour order {{orderId}} has shipped. You can track it with number: {{trackingNumber}}.\n\nIt should arrive soon!`, 'email-delivered': `Hi {{customerName}},\n\nYour order {{orderId}} has been delivered. We hope you enjoy your items!\n\nThank you!`, 'sms-confirmed': `Order {{orderId}} Confirmed! We'll text again when it ships. Thanks!`, 'sms-shipped': `Your order {{orderId}} has shipped! Tracking: {{trackingNumber}}`, 'sms-delivered': `Your order {{orderId}} was delivered. Enjoy!` }; renderAll(); } init(); });
Scroll to Top