mjml EMail
This commit is contained in:
225
public/js/modals/email-modal.js
Normal file
225
public/js/modals/email-modal.js
Normal file
@@ -0,0 +1,225 @@
|
||||
// email-modal.js — ES Module
|
||||
// Modal to review and send invoice emails via AWS SES
|
||||
|
||||
import { showSpinner, hideSpinner } from '../utils/helpers.js';
|
||||
|
||||
let currentInvoice = null;
|
||||
let quillInstance = null;
|
||||
|
||||
// ============================================================
|
||||
// DOM & Render
|
||||
// ============================================================
|
||||
|
||||
function ensureModalElement() {
|
||||
let modal = document.getElementById('email-modal');
|
||||
if (!modal) {
|
||||
modal = document.createElement('div');
|
||||
modal.id = 'email-modal';
|
||||
modal.className = 'modal fixed inset-0 bg-black bg-opacity-50 z-50 justify-center items-start pt-10 overflow-y-auto hidden';
|
||||
document.body.appendChild(modal);
|
||||
}
|
||||
}
|
||||
|
||||
function renderModalContent() {
|
||||
const modal = document.getElementById('email-modal');
|
||||
if (!modal) return;
|
||||
|
||||
const defaultEmail = currentInvoice.email || '';
|
||||
|
||||
// Editor-Container hat jetzt eine feste, kompaktere Höhe (h-48 = 12rem/192px) und scrollt bei viel Text
|
||||
modal.innerHTML = `
|
||||
<div class="bg-white rounded-lg shadow-2xl w-full max-w-3xl mx-auto p-8">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-2xl font-bold text-gray-800">📤 Send Invoice #${currentInvoice.invoice_number || currentInvoice.id}</h2>
|
||||
<button onclick="window.emailModal.close()" class="text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form id="email-send-form" class="space-y-5">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Recipient Email *</label>
|
||||
<input type="email" id="email-recipient" value="${defaultEmail}" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
|
||||
<p class="text-xs text-gray-400 mt-1">You can override this for testing.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Melio Payment Link (Optional)</label>
|
||||
<input type="url" id="email-melio-link" placeholder="https://melio.me/..."
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Message Body</label>
|
||||
<div id="email-message-editor" class="border border-gray-300 rounded-md bg-white h-48 overflow-y-auto"></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-blue-50 border border-blue-200 p-4 rounded-md flex items-center gap-3">
|
||||
<span class="text-2xl">📎</span>
|
||||
<div class="text-sm text-blue-800">
|
||||
<strong>Invoice_${currentInvoice.invoice_number || currentInvoice.id}.pdf</strong> will be generated and attached automatically.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end space-x-3 pt-4">
|
||||
<button type="button" onclick="window.emailModal.close()"
|
||||
class="px-6 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">Cancel</button>
|
||||
<button type="submit" id="email-submit-btn"
|
||||
class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-semibold">
|
||||
Send via AWS SES
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>`;
|
||||
|
||||
// Initialize Quill
|
||||
const editorDiv = document.getElementById('email-message-editor');
|
||||
quillInstance = new Quill(editorDiv, {
|
||||
theme: 'snow',
|
||||
modules: {
|
||||
toolbar: [
|
||||
['bold', 'italic', 'underline'],
|
||||
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
|
||||
['clean']
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// Variablen für den Text aufbereiten
|
||||
const invoiceNum = currentInvoice.invoice_number || currentInvoice.id;
|
||||
const totalDue = parseFloat(currentInvoice.balance ?? currentInvoice.total).toFixed(2);
|
||||
|
||||
// Datum formatieren
|
||||
let dueDateStr = 'Upon Receipt';
|
||||
if (currentInvoice.due_date) {
|
||||
const d = new Date(currentInvoice.due_date);
|
||||
dueDateStr = d.toLocaleDateString('en-US', { timeZone: 'UTC' });
|
||||
}
|
||||
|
||||
// Dynamischer Text für die Fälligkeit (Löst das "payable by Upon Receipt" Problem)
|
||||
let paymentText = '';
|
||||
if (currentInvoice.terms && currentInvoice.terms.toLowerCase().includes('receipt')) {
|
||||
paymentText = 'which is due upon receipt.';
|
||||
} else if (dueDateStr !== 'Upon Receipt') {
|
||||
paymentText = `payable by <strong>${dueDateStr}</strong>.`;
|
||||
} else {
|
||||
paymentText = 'which is due upon receipt.';
|
||||
}
|
||||
|
||||
// Der neue Standard-Text
|
||||
const defaultHtml = `
|
||||
<p>Good afternoon,</p>
|
||||
<p>Attached is invoice <strong>#${invoiceNum}</strong> for service performed at your location. The total amount due is <strong>$${totalDue}</strong>, ${paymentText}</p>
|
||||
<p>Please pay at your earliest convenience. We appreciate your continued business.</p>
|
||||
<p>If you have any questions about the invoice, feel free to reply to this email.</p>
|
||||
<p>Best regards,</p>
|
||||
<p><strong>Claudia Knuth</strong></p>
|
||||
<p>Bay Area Affiliates, Inc.</p>
|
||||
<p>accounting@bayarea-cc.com</p>
|
||||
`;
|
||||
quillInstance.root.innerHTML = defaultHtml;
|
||||
|
||||
// Bind Submit Handler
|
||||
document.getElementById('email-send-form').addEventListener('submit', submitEmail);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Logic & API
|
||||
// ============================================================
|
||||
|
||||
export async function openEmailModal(invoiceId) {
|
||||
ensureModalElement();
|
||||
|
||||
if (typeof showSpinner === 'function') showSpinner('Loading invoice data...');
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/invoices/${invoiceId}`);
|
||||
const data = await res.json();
|
||||
|
||||
if (!data.invoice) throw new Error('Invoice not found');
|
||||
currentInvoice = data.invoice;
|
||||
|
||||
renderModalContent();
|
||||
|
||||
// Tailwind hidden toggle
|
||||
document.getElementById('email-modal').classList.remove('hidden');
|
||||
document.getElementById('email-modal').classList.add('flex');
|
||||
|
||||
} catch (e) {
|
||||
console.error('Error loading invoice for email:', e);
|
||||
alert('Could not load invoice details.');
|
||||
} finally {
|
||||
if (typeof hideSpinner === 'function') hideSpinner();
|
||||
}
|
||||
}
|
||||
|
||||
export function closeEmailModal() {
|
||||
const modal = document.getElementById('email-modal');
|
||||
if (modal) {
|
||||
modal.classList.add('hidden');
|
||||
modal.classList.remove('flex');
|
||||
}
|
||||
currentInvoice = null;
|
||||
quillInstance = null;
|
||||
}
|
||||
|
||||
async function submitEmail(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const recipientEmail = document.getElementById('email-recipient').value.trim();
|
||||
const melioLink = document.getElementById('email-melio-link').value.trim();
|
||||
const customText = quillInstance.root.innerHTML;
|
||||
|
||||
if (!recipientEmail) {
|
||||
alert('Please enter a recipient email.');
|
||||
return;
|
||||
}
|
||||
|
||||
const submitBtn = document.getElementById('email-submit-btn');
|
||||
submitBtn.innerHTML = '⏳ Sending...';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
if (typeof showSpinner === 'function') showSpinner('Generating PDF and sending email...');
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/invoices/${currentInvoice.id}/send-email`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
recipientEmail,
|
||||
melioLink,
|
||||
customText
|
||||
})
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
alert('✅ Invoice sent successfully!');
|
||||
closeEmailModal();
|
||||
// Reload the invoice view so the "Sent" badge updates
|
||||
if (window.invoiceView) window.invoiceView.loadInvoices();
|
||||
} else {
|
||||
alert(`❌ Error: ${result.error}`);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Send email error:', e);
|
||||
alert('Network error while sending email.');
|
||||
} finally {
|
||||
submitBtn.innerHTML = 'Send via AWS SES';
|
||||
submitBtn.disabled = false;
|
||||
if (typeof hideSpinner === 'function') hideSpinner();
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Expose
|
||||
// ============================================================
|
||||
window.emailModal = {
|
||||
open: openEmailModal,
|
||||
close: closeEmailModal
|
||||
};
|
||||
Reference in New Issue
Block a user