555 lines
21 KiB
JavaScript
555 lines
21 KiB
JavaScript
// email-modal.js — ES Module
|
|
// Modal to review and send invoice emails via AWS SES
|
|
// With Stripe Payment Link integration
|
|
|
|
import { showSpinner, hideSpinner, formatDate } 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 getEmailModalTitle(invoice, isOverdue) {
|
|
if (isOverdue) return `⏰ Send Reminder for Invoice #${invoice.invoice_number || invoice.id}`;
|
|
if (invoice.email_status === 'sent') return `🔁 Resend Invoice #${invoice.invoice_number || invoice.id}`;
|
|
return `📤 Send Invoice #${invoice.invoice_number || invoice.id}`;
|
|
}
|
|
function parseLocalDate(dateValue) {
|
|
if (!dateValue) return null;
|
|
|
|
if (dateValue instanceof Date) {
|
|
return new Date(dateValue.getFullYear(), dateValue.getMonth(), dateValue.getDate());
|
|
}
|
|
|
|
const dateStr = String(dateValue).split('T')[0];
|
|
const parts = dateStr.split('-').map(Number);
|
|
|
|
if (parts.length === 3 && parts.every(Number.isFinite)) {
|
|
return new Date(parts[0], parts[1] - 1, parts[2]);
|
|
}
|
|
|
|
const d = new Date(dateValue);
|
|
return Number.isNaN(d.getTime()) ? null : d;
|
|
}
|
|
|
|
function getFirstSentDate(invoice) {
|
|
const sentDates = Array.isArray(invoice.sent_dates)
|
|
? invoice.sent_dates.filter(Boolean)
|
|
: [];
|
|
|
|
if (sentDates.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const sortedDates = sentDates
|
|
.map(d => String(d).split('T')[0])
|
|
.sort();
|
|
|
|
return sortedDates[0];
|
|
}
|
|
|
|
function getTermDays(invoice) {
|
|
const terms = String(invoice.terms || '').toLowerCase();
|
|
|
|
if (terms.includes('due on receipt') || terms.includes('upon receipt')) {
|
|
return 0;
|
|
}
|
|
|
|
const match = terms.match(/net\s*(\d+)/i);
|
|
if (match) {
|
|
return parseInt(match[1], 10);
|
|
}
|
|
|
|
return 30;
|
|
}
|
|
|
|
function addDays(dateValue, days) {
|
|
const d = parseLocalDate(dateValue);
|
|
if (!d) return null;
|
|
|
|
d.setDate(d.getDate() + days);
|
|
return d;
|
|
}
|
|
|
|
function getEffectiveDueDate(invoice) {
|
|
const firstSentDate = getFirstSentDate(invoice);
|
|
|
|
if (!firstSentDate) {
|
|
return null;
|
|
}
|
|
|
|
return addDays(firstSentDate, getTermDays(invoice));
|
|
}
|
|
|
|
function getOverdueDays(invoice) {
|
|
const dueDate = getEffectiveDueDate(invoice);
|
|
if (!dueDate) return 0;
|
|
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
|
|
dueDate.setHours(0, 0, 0, 0);
|
|
|
|
return Math.max(0, Math.floor((today - dueDate) / 86400000));
|
|
}
|
|
|
|
function isInvoiceOverdue(invoice) {
|
|
const dueDate = getEffectiveDueDate(invoice);
|
|
if (!dueDate) return false;
|
|
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
|
|
dueDate.setHours(0, 0, 0, 0);
|
|
|
|
return !invoice.paid_date && dueDate < today;
|
|
}
|
|
|
|
function renderModalContent() {
|
|
const modal = document.getElementById('email-modal');
|
|
if (!modal) return;
|
|
|
|
const defaultEmail = currentInvoice.email || '';
|
|
const existingStripeUrl = currentInvoice.stripe_payment_link_url || '';
|
|
const stripeStatus = currentInvoice.stripe_payment_status || '';
|
|
|
|
// Detect overdue: unpaid + older than 30 days
|
|
const isOverdue = isInvoiceOverdue(currentInvoice);
|
|
const daysOverdue = getOverdueDays(currentInvoice);
|
|
|
|
const modalTitle = getEmailModalTitle(currentInvoice, isOverdue);
|
|
|
|
// Status indicator for existing link
|
|
let stripeBadgeHtml = '';
|
|
if (existingStripeUrl && stripeStatus === 'paid') {
|
|
stripeBadgeHtml = '<span class="ml-2 inline-block px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-800">Paid</span>';
|
|
} else if (existingStripeUrl && stripeStatus === 'processing') {
|
|
stripeBadgeHtml = '<span class="ml-2 inline-block px-2 py-0.5 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Processing</span>';
|
|
} else if (existingStripeUrl) {
|
|
stripeBadgeHtml = '<span class="ml-2 inline-block px-2 py-0.5 text-xs font-semibold rounded-full bg-purple-100 text-purple-800">Active</span>';
|
|
}
|
|
|
|
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">${modalTitle}</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">Send to</label>
|
|
${renderRecipientSelector(currentInvoice)}
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
Stripe Payment Link${stripeBadgeHtml}
|
|
</label>
|
|
<div class="flex gap-2">
|
|
<input type="url" id="email-stripe-link" value="${existingStripeUrl}" readonly
|
|
placeholder="Click Generate to create link..."
|
|
class="flex-1 px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-sm text-gray-600 focus:ring-purple-500 focus:border-purple-500">
|
|
<button type="button" id="stripe-generate-btn" onclick="window.emailModal.generateStripeLink()"
|
|
class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 text-sm font-semibold whitespace-nowrap">
|
|
${existingStripeUrl ? '♻️ Regenerate' : '💳 Generate'}
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-gray-400 mt-1" id="stripe-link-info">
|
|
${existingStripeUrl
|
|
? 'Link exists. Regenerate will create a new link for the current balance.'
|
|
: 'Generates a Stripe Payment Link for Card and ACH payments.'}
|
|
</p>
|
|
</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);
|
|
const customerName = currentInvoice.customer_name || 'Valued Customer';
|
|
|
|
// 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
|
|
let paymentText = '';
|
|
if (currentInvoice.terms && currentInvoice.terms.toLowerCase().includes('receipt')) {
|
|
paymentText = 'Our terms are Net 30.';
|
|
} else if (dueDateStr !== 'Upon Receipt') {
|
|
paymentText = `payable by <strong>${dueDateStr}</strong>.`;
|
|
} else {
|
|
paymentText = 'Our terms are Net 30.';
|
|
}
|
|
|
|
let defaultHtml = '';
|
|
|
|
if (isOverdue) {
|
|
// Reminder / Overdue template
|
|
defaultHtml = `
|
|
<p>Dear ${customerName},</p>
|
|
<p>We hope this message finds you well. Our records indicate that invoice <strong>#${invoiceNum}</strong> in the amount of <strong>$${totalDue}</strong>, dated ${formatDate(currentInvoice.invoice_date)}, remains unpaid.</p>
|
|
<p>This invoice is now <strong>${daysOverdue} days overdue</strong>. We kindly request prompt payment at your earliest convenience.</p>
|
|
<p>For your convenience, you can pay securely online using the payment link included below. We accept both Credit Card and ACH bank transfer.</p>
|
|
<p>If payment has already been sent, please disregard this notice. Should you have any questions or need to discuss payment arrangements, please do not hesitate to reply to this email.</p>
|
|
<p>Thank you for your attention to this matter. We value your business and look forward to continuing our partnership.</p>
|
|
<p>Best regards,</p>
|
|
<p><strong>Claudia Knuth</strong></p>
|
|
<p>Bay Area Affiliates, Inc.</p>
|
|
<p>accounting@bayarea-cc.com</p>
|
|
`;
|
|
} else {
|
|
// Standard template
|
|
defaultHtml = `
|
|
<p>Dear ${customerName},</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;
|
|
|
|
// Initiale Recipient-Summary
|
|
updateRecipientSummary();
|
|
|
|
// Listener für das Custom-Field
|
|
const customEl = document.getElementById('email-recipient-custom');
|
|
if (customEl) {
|
|
customEl.addEventListener('input', updateRecipientSummary);
|
|
}
|
|
|
|
// Bind Submit Handler
|
|
document.getElementById('email-send-form').addEventListener('submit', submitEmail);
|
|
}
|
|
|
|
// ============================================================
|
|
// Stripe Payment Link Generation
|
|
// ============================================================
|
|
|
|
async function generateStripeLink() {
|
|
const btn = document.getElementById('stripe-generate-btn');
|
|
const input = document.getElementById('email-stripe-link');
|
|
const info = document.getElementById('stripe-link-info');
|
|
|
|
const originalBtnText = btn.innerHTML;
|
|
btn.innerHTML = '⏳ Creating...';
|
|
btn.disabled = true;
|
|
|
|
try {
|
|
const response = await fetch(`/api/invoices/${currentInvoice.id}/create-payment-link`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' }
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
input.value = result.paymentLinkUrl;
|
|
currentInvoice.stripe_payment_link_url = result.paymentLinkUrl;
|
|
currentInvoice.stripe_payment_link_id = result.paymentLinkId;
|
|
currentInvoice.stripe_payment_status = 'pending';
|
|
|
|
btn.innerHTML = '♻️ Regenerate';
|
|
info.innerHTML = `✅ Payment link created for <strong>$${result.amount.toFixed(2)}</strong>. Will be included in the email.`;
|
|
info.classList.remove('text-gray-400');
|
|
info.classList.add('text-green-600');
|
|
} else {
|
|
info.textContent = `❌ ${result.error}`;
|
|
info.classList.remove('text-gray-400');
|
|
info.classList.add('text-red-500');
|
|
}
|
|
} catch (e) {
|
|
console.error('Stripe link generation error:', e);
|
|
info.textContent = '❌ Network error creating payment link.';
|
|
info.classList.remove('text-gray-400');
|
|
info.classList.add('text-red-500');
|
|
} finally {
|
|
btn.disabled = false;
|
|
if (btn.innerHTML === '⏳ Creating...') {
|
|
btn.innerHTML = originalBtnText;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// 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();
|
|
|
|
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 recipients = getSelectedRecipients();
|
|
const customText = quillInstance.root.innerHTML;
|
|
|
|
if (recipients.length === 0) {
|
|
alert('Please select or enter at least one recipient email.');
|
|
return;
|
|
}
|
|
|
|
// Confirm bei Mehrfach-Empfängern, damit der User sieht, an wen es geht
|
|
if (recipients.length > 1) {
|
|
const ok = confirm(`Send invoice to ${recipients.length} recipients?\n\n${recipients.join('\n')}`);
|
|
if (!ok) 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({
|
|
recipientEmails: recipients,
|
|
customText
|
|
})
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
const sentTo = (result.recipients || recipients).join(', ');
|
|
alert(`✅ Invoice sent to: ${sentTo}`);
|
|
closeEmailModal();
|
|
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();
|
|
}
|
|
}
|
|
|
|
function renderRecipientSelector(invoice) {
|
|
const primary = (invoice.email || '').trim();
|
|
const secondary = (invoice.secondary_email || '').trim();
|
|
const hasPrimary = !!primary;
|
|
const hasSecondary = !!secondary;
|
|
|
|
// Default-Auswahl:
|
|
// - "Both" wenn beide vorhanden
|
|
// - "Primary" wenn nur primary
|
|
// - "Secondary" wenn nur secondary
|
|
// - "Custom" wenn keine
|
|
let defaultMode;
|
|
if (hasPrimary && hasSecondary) defaultMode = 'both';
|
|
else if (hasPrimary) defaultMode = 'primary';
|
|
else if (hasSecondary) defaultMode = 'secondary';
|
|
else defaultMode = 'custom';
|
|
|
|
// Falls weder primary noch secondary — direkt eine Warnung
|
|
let warningHtml = '';
|
|
if (!hasPrimary && !hasSecondary) {
|
|
warningHtml = `
|
|
<p class="text-xs text-amber-600 mt-1">
|
|
⚠️ This customer has no email address on file. Please enter one below.
|
|
</p>`;
|
|
}
|
|
|
|
return `
|
|
<div class="space-y-2">
|
|
<select id="email-recipient-mode"
|
|
onchange="window.emailModal.onRecipientModeChange()"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 text-sm">
|
|
${hasPrimary ? `<option value="primary" ${defaultMode==='primary'?'selected':''}>Primary: ${escapeAttr(primary)}</option>` : ''}
|
|
${hasSecondary ? `<option value="secondary" ${defaultMode==='secondary'?'selected':''}>Secondary: ${escapeAttr(secondary)}</option>` : ''}
|
|
${hasPrimary && hasSecondary ? `<option value="both" ${defaultMode==='both'?'selected':''}>Both (Primary + Secondary)</option>` : ''}
|
|
<option value="custom" ${defaultMode==='custom'?'selected':''}>Custom / Test address…</option>
|
|
</select>
|
|
|
|
<input type="email" id="email-recipient-custom"
|
|
value="${escapeAttr(primary || secondary || '')}"
|
|
placeholder="Enter custom recipient email(s), comma-separated"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 ${defaultMode==='custom' ? '' : 'hidden'}">
|
|
|
|
<p id="email-recipient-summary" class="text-xs text-gray-500"></p>
|
|
${warningHtml}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function escapeAttr(s) {
|
|
return String(s || '')
|
|
.replace(/&/g, '&')
|
|
.replace(/"/g, '"')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>');
|
|
}
|
|
|
|
/**
|
|
* Liefert die aktuell ausgewählten Empfänger als Array.
|
|
* Wird beim Submit aufgerufen.
|
|
*/
|
|
function getSelectedRecipients() {
|
|
const modeEl = document.getElementById('email-recipient-mode');
|
|
const customEl = document.getElementById('email-recipient-custom');
|
|
if (!modeEl) return [];
|
|
|
|
const mode = modeEl.value;
|
|
const primary = (currentInvoice.email || '').trim();
|
|
const secondary = (currentInvoice.secondary_email || '').trim();
|
|
|
|
if (mode === 'primary') return primary ? [primary] : [];
|
|
if (mode === 'secondary') return secondary ? [secondary] : [];
|
|
if (mode === 'both') {
|
|
return [primary, secondary].filter(Boolean);
|
|
}
|
|
if (mode === 'custom') {
|
|
return (customEl?.value || '')
|
|
.split(',')
|
|
.map(s => s.trim())
|
|
.filter(Boolean);
|
|
}
|
|
return [];
|
|
}
|
|
|
|
/**
|
|
* Wird vom <select onchange> aufgerufen.
|
|
* Zeigt/versteckt das Custom-Eingabefeld und aktualisiert die Zusammenfassung.
|
|
*/
|
|
function onRecipientModeChange() {
|
|
const modeEl = document.getElementById('email-recipient-mode');
|
|
const customEl = document.getElementById('email-recipient-custom');
|
|
if (!modeEl) return;
|
|
|
|
const mode = modeEl.value;
|
|
|
|
// Custom-Field nur bei mode==='custom' anzeigen
|
|
if (mode === 'custom') {
|
|
customEl.classList.remove('hidden');
|
|
customEl.focus();
|
|
} else {
|
|
customEl.classList.add('hidden');
|
|
}
|
|
|
|
updateRecipientSummary();
|
|
}
|
|
|
|
function updateRecipientSummary() {
|
|
const summary = document.getElementById('email-recipient-summary');
|
|
if (!summary) return;
|
|
|
|
const recipients = getSelectedRecipients();
|
|
if (recipients.length === 0) {
|
|
summary.textContent = '⚠️ No recipients selected.';
|
|
summary.className = 'text-xs text-amber-600';
|
|
} else if (recipients.length === 1) {
|
|
summary.textContent = `Will send to: ${recipients[0]}`;
|
|
summary.className = 'text-xs text-gray-600';
|
|
} else {
|
|
summary.textContent = `Will send to ${recipients.length} recipients: ${recipients.join(', ')}`;
|
|
summary.className = 'text-xs text-gray-600';
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// Expose
|
|
// ============================================================
|
|
window.emailModal = {
|
|
open: openEmailModal,
|
|
close: closeEmailModal,
|
|
generateStripeLink,
|
|
onRecipientModeChange
|
|
}; |