feat: add payment management improvements and reminder emails

- Add option to approve/reject payments without sending notification emails (checkbox in review popup, default enabled) - Add payment reminder email template and send functionality - Track when reminder emails are sent (reminderSentAt field) - Display reminder sent timestamp in payment review popup - Make payment review popup scrollable for better UX - Add payment-reminder template to email system (available in admin emails)
2026-02-05 04:13:42 +00:00
parent 0c142884c7
commit 23d0325d8d
8 changed files with 357 additions and 23 deletions
--- a/backend/src/db/migrate.ts
+++ b/backend/src/db/migrate.ts
@@ -209,6 +209,9 @@ async function migrate() {
    try {
      await (db as any).run(sql`ALTER TABLE payments ADD COLUMN payer_name TEXT`);
    } catch (e) { /* column may already exist */ }
+    try {
+      await (db as any).run(sql`ALTER TABLE payments ADD COLUMN reminder_sent_at TEXT`);
+    } catch (e) { /* column may already exist */ }

    // Invoices table
    await (db as any).run(sql`
@@ -577,6 +580,9 @@ async function migrate() {
    try {
      await (db as any).execute(sql`ALTER TABLE payments ADD COLUMN payer_name VARCHAR(255)`);
    } catch (e) { /* column may already exist */ }
+    try {
+      await (db as any).execute(sql`ALTER TABLE payments ADD COLUMN reminder_sent_at TIMESTAMP`);
+    } catch (e) { /* column may already exist */ }

    // Invoices table
    await (db as any).execute(sql`
--- a/backend/src/db/schema.ts
+++ b/backend/src/db/schema.ts
@@ -115,6 +115,7 @@ export const sqlitePayments = sqliteTable('payments', {
  paidAt: text('paid_at'),
  paidByAdminId: text('paid_by_admin_id'),
  adminNote: text('admin_note'), // Internal admin notes
+  reminderSentAt: text('reminder_sent_at'), // When payment reminder email was sent
  createdAt: text('created_at').notNull(),
  updatedAt: text('updated_at').notNull(),
 });
@@ -405,6 +406,7 @@ export const pgPayments = pgTable('payments', {
  paidAt: timestamp('paid_at'),
  paidByAdminId: uuid('paid_by_admin_id'),
  adminNote: pgText('admin_note'),
+  reminderSentAt: timestamp('reminder_sent_at'), // When payment reminder email was sent
  createdAt: timestamp('created_at').notNull(),
  updatedAt: timestamp('updated_at').notNull(),
 });
--- a/backend/src/lib/email.ts
+++ b/backend/src/lib/email.ts
@@ -980,6 +980,106 @@ export const emailService = {
    });
  },

+  /**
+   * Send payment reminder email
+   * This email is sent when admin wants to remind attendee about pending payment
+   */
+  async sendPaymentReminder(paymentId: string): Promise<{ success: boolean; error?: string }> {
+    // Get payment
+    const payment = await dbGet<any>(
+      (db as any)
+        .select()
+        .from(payments)
+        .where(eq((payments as any).id, paymentId))
+    );
+
+    if (!payment) {
+      return { success: false, error: 'Payment not found' };
+    }
+
+    // Only send for pending/pending_approval payments
+    if (!['pending', 'pending_approval'].includes(payment.status)) {
+      return { success: false, error: 'Payment reminder can only be sent for pending payments' };
+    }
+
+    // Get ticket
+    const ticket = await dbGet<any>(
+      (db as any)
+        .select()
+        .from(tickets)
+        .where(eq((tickets as any).id, payment.ticketId))
+    );
+
+    if (!ticket) {
+      return { success: false, error: 'Ticket not found' };
+    }
+
+    // Get event
+    const event = await dbGet<any>(
+      (db as any)
+        .select()
+        .from(events)
+        .where(eq((events as any).id, ticket.eventId))
+    );
+
+    if (!event) {
+      return { success: false, error: 'Event not found' };
+    }
+
+    const locale = ticket.preferredLanguage || 'en';
+    const eventTitle = locale === 'es' && event.titleEs ? event.titleEs : event.title;
+    const attendeeFullName = `${ticket.attendeeFirstName} ${ticket.attendeeLastName || ''}`.trim();
+
+    // Calculate total price for multi-ticket bookings
+    let totalPrice = event.price;
+    let ticketCount = 1;
+    
+    if (ticket.bookingId) {
+      const bookingTickets = await dbAll<any>(
+        (db as any)
+          .select()
+          .from(tickets)
+          .where(eq((tickets as any).bookingId, ticket.bookingId))
+      );
+      ticketCount = bookingTickets.length;
+      totalPrice = event.price * ticketCount;
+    }
+
+    // Generate the booking URL for returning to payment page
+    const frontendUrl = process.env.FRONTEND_URL || 'https://spanglish.com';
+    const bookingUrl = `${frontendUrl}/booking/${ticket.id}?step=payment`;
+
+    // Format amount with ticket count info for multi-ticket bookings
+    const amountDisplay = ticketCount > 1 
+      ? `${this.formatCurrency(totalPrice, event.currency)} (${ticketCount} tickets)`
+      : this.formatCurrency(totalPrice, event.currency);
+
+    // Get site timezone for proper date/time formatting
+    const timezone = await this.getSiteTimezone();
+
+    console.log(`[Email] Sending payment reminder email to ${ticket.attendeeEmail}`);
+
+    return this.sendTemplateEmail({
+      templateSlug: 'payment-reminder',
+      to: ticket.attendeeEmail,
+      toName: attendeeFullName,
+      locale,
+      eventId: event.id,
+      variables: {
+        attendeeName: attendeeFullName,
+        attendeeEmail: ticket.attendeeEmail,
+        ticketId: ticket.bookingId || ticket.id,
+        eventTitle,
+        eventDate: this.formatDate(event.startDatetime, locale, timezone),
+        eventTime: this.formatTime(event.startDatetime, locale, timezone),
+        eventLocation: event.location,
+        eventLocationUrl: event.locationUrl || '',
+        paymentAmount: amountDisplay,
+        bookingUrl,
+      },
+    });
+  },
+
  /**
   * Send custom email to event attendees
   */
--- a/backend/src/lib/emailTemplates.ts
+++ b/backend/src/lib/emailTemplates.ts
@@ -991,6 +991,118 @@ Spanglish`,
    ],
    isSystem: true,
  },
+  {
+    name: 'Payment Reminder',
+    slug: 'payment-reminder',
+    subject: 'Reminder: Complete your payment for Spanglish',
+    subjectEs: 'Recordatorio: Completa tu pago para Spanglish',
+    bodyHtml: `
+      <h2>Payment Reminder</h2>
+      <p>Hi {{attendeeName}},</p>
+      <p>We wanted to follow up on your booking for <strong>{{eventTitle}}</strong>.</p>
+      <p>We haven't been able to locate your payment yet. To receive your ticket and confirm your spot, please complete your payment.</p>
+      
+      <div class="event-card">
+        <h3>📅 Event Details</h3>
+        <div class="event-detail"><strong>Event:</strong> {{eventTitle}}</div>
+        <div class="event-detail"><strong>Date:</strong> {{eventDate}}</div>
+        <div class="event-detail"><strong>Time:</strong> {{eventTime}}</div>
+        <div class="event-detail"><strong>Location:</strong> {{eventLocation}}</div>
+        <div class="event-detail"><strong>Amount Due:</strong> {{paymentAmount}}</div>
+      </div>
+      
+      <p style="text-align: center; margin: 24px 0;">
+        <a href="{{bookingUrl}}" class="btn">Complete Payment</a>
+      </p>
+      
+      <div class="note">
+        <strong>Already paid?</strong><br>
+        If you have already completed your payment and believe this is an error, please reply to this email with your payment details (date, amount, and method used) and we'll be happy to look into it.
+      </div>
+      
+      <p>We hope to see you at the event!</p>
+      <p>The Spanglish Team</p>
+    `,
+    bodyHtmlEs: `
+      <h2>Recordatorio de Pago</h2>
+      <p>Hola {{attendeeName}},</p>
+      <p>Queríamos dar seguimiento a tu reserva para <strong>{{eventTitle}}</strong>.</p>
+      <p>Aún no hemos podido localizar tu pago. Para recibir tu entrada y confirmar tu lugar, por favor completa tu pago.</p>
+      
+      <div class="event-card">
+        <h3>📅 Detalles del Evento</h3>
+        <div class="event-detail"><strong>Evento:</strong> {{eventTitle}}</div>
+        <div class="event-detail"><strong>Fecha:</strong> {{eventDate}}</div>
+        <div class="event-detail"><strong>Hora:</strong> {{eventTime}}</div>
+        <div class="event-detail"><strong>Ubicación:</strong> {{eventLocation}}</div>
+        <div class="event-detail"><strong>Monto a Pagar:</strong> {{paymentAmount}}</div>
+      </div>
+      
+      <p style="text-align: center; margin: 24px 0;">
+        <a href="{{bookingUrl}}" class="btn">Completar Pago</a>
+      </p>
+      
+      <div class="note">
+        <strong>¿Ya pagaste?</strong><br>
+        Si ya completaste tu pago y crees que esto es un error, por favor responde a este correo con los detalles de tu pago (fecha, monto y método utilizado) y con gusto lo revisaremos.
+      </div>
+      
+      <p>¡Esperamos verte en el evento!</p>
+      <p>El Equipo de Spanglish</p>
+    `,
+    bodyText: `Payment Reminder
+
+Hi {{attendeeName}},
+
+We wanted to follow up on your booking for {{eventTitle}}.
+
+We haven't been able to locate your payment yet. To receive your ticket and confirm your spot, please complete your payment.
+
+Event Details:
+- Event: {{eventTitle}}
+- Date: {{eventDate}}
+- Time: {{eventTime}}
+- Location: {{eventLocation}}
+- Amount Due: {{paymentAmount}}
+
+Complete your payment here: {{bookingUrl}}
+
+Already paid?
+If you have already completed your payment and believe this is an error, please reply to this email with your payment details (date, amount, and method used) and we'll be happy to look into it.
+
+We hope to see you at the event!
+The Spanglish Team`,
+    bodyTextEs: `Recordatorio de Pago
+
+Hola {{attendeeName}},
+
+Queríamos dar seguimiento a tu reserva para {{eventTitle}}.
+
+Aún no hemos podido localizar tu pago. Para recibir tu entrada y confirmar tu lugar, por favor completa tu pago.
+
+Detalles del Evento:
+- Evento: {{eventTitle}}
+- Fecha: {{eventDate}}
+- Hora: {{eventTime}}
+- Ubicación: {{eventLocation}}
+- Monto a Pagar: {{paymentAmount}}
+
+Completa tu pago aquí: {{bookingUrl}}
+
+¿Ya pagaste?
+Si ya completaste tu pago y crees que esto es un error, por favor responde a este correo con los detalles de tu pago (fecha, monto y método utilizado) y con gusto lo revisaremos.
+
+¡Esperamos verte en el evento!
+El Equipo de Spanglish`,
+    description: 'Sent to remind attendees to complete their pending payment',
+    variables: [
+      ...commonVariables, 
+      ...bookingVariables,
+      { name: 'paymentAmount', description: 'Payment amount with currency', example: '50,000 PYG' },
+      { name: 'bookingUrl', description: 'URL to complete payment', example: 'https://spanglish.com/booking/abc123?step=payment' },
+    ],
+    isSystem: true,
+  },
  {
    name: 'Payment Rejected',
    slug: 'payment-rejected',
--- a/backend/src/routes/payments.ts
+++ b/backend/src/routes/payments.ts
@@ -17,10 +17,12 @@ const updatePaymentSchema = z.object({

 const approvePaymentSchema = z.object({
  adminNote: z.string().optional(),
+  sendEmail: z.boolean().optional().default(true),
 });

 const rejectPaymentSchema = z.object({
  adminNote: z.string().optional(),
+  sendEmail: z.boolean().optional().default(true),
 });

 // Get all payments (admin) - with ticket and event details
@@ -266,7 +268,7 @@ paymentsRouter.put('/:id', requireAuth(['admin', 'organizer']), zValidator('json
 // Approve payment (admin) - specifically for pending_approval payments
 paymentsRouter.post('/:id/approve', requireAuth(['admin', 'organizer']), zValidator('json', approvePaymentSchema), async (c) => {
  const id = c.req.param('id');
-  const { adminNote } = c.req.valid('json');
+  const { adminNote, sendEmail } = c.req.valid('json');
  const user = (c as any).get('user');
  
  const payment = await dbGet<any>(
@@ -329,13 +331,17 @@ paymentsRouter.post('/:id/approve', requireAuth(['admin', 'organizer']), zValida
      .where(eq((tickets as any).id, (t as any).id));
  }
  
-  // Send confirmation emails asynchronously
-  Promise.all([
-    emailService.sendBookingConfirmation(payment.ticketId),
-    emailService.sendPaymentReceipt(id),
-  ]).catch(err => {
-    console.error('[Email] Failed to send confirmation emails:', err);
-  });
+  // Send confirmation emails asynchronously (if sendEmail is true, which is the default)
+  if (sendEmail !== false) {
+    Promise.all([
+      emailService.sendBookingConfirmation(payment.ticketId),
+      emailService.sendPaymentReceipt(id),
+    ]).catch(err => {
+      console.error('[Email] Failed to send confirmation emails:', err);
+    });
+  } else {
+    console.log('[Payment] Skipping confirmation emails per admin request');
+  }
  
  const updated = await dbGet(
    (db as any)
@@ -350,7 +356,7 @@ paymentsRouter.post('/:id/approve', requireAuth(['admin', 'organizer']), zValida
 // Reject payment (admin)
 paymentsRouter.post('/:id/reject', requireAuth(['admin', 'organizer']), zValidator('json', rejectPaymentSchema), async (c) => {
  const id = c.req.param('id');
-  const { adminNote } = c.req.valid('json');
+  const { adminNote, sendEmail } = c.req.valid('json');
  const user = (c as any).get('user');
  
  const payment = await dbGet<any>(
@@ -390,11 +396,13 @@ paymentsRouter.post('/:id/reject', requireAuth(['admin', 'organizer']), zValidat
    })
    .where(eq((tickets as any).id, payment.ticketId));
  
-  // Send rejection email asynchronously (for manual payment methods only)
-  if (['bank_transfer', 'tpago'].includes(payment.provider)) {
+  // Send rejection email asynchronously (for manual payment methods only, if sendEmail is true)
+  if (sendEmail !== false && ['bank_transfer', 'tpago'].includes(payment.provider)) {
    emailService.sendPaymentRejectionEmail(id).catch(err => {
      console.error('[Email] Failed to send payment rejection email:', err);
    });
+  } else if (sendEmail === false) {
+    console.log('[Payment] Skipping rejection email per admin request');
  }
  
  const updated = await dbGet(
@@ -407,6 +415,51 @@ paymentsRouter.post('/:id/reject', requireAuth(['admin', 'organizer']), zValidat
  return c.json({ payment: updated, message: 'Payment rejected and booking cancelled' });
 });

+// Send payment reminder email
+paymentsRouter.post('/:id/send-reminder', requireAuth(['admin', 'organizer']), async (c) => {
+  const id = c.req.param('id');
+  
+  const payment = await dbGet<any>(
+    (db as any)
+      .select()
+      .from(payments)
+      .where(eq((payments as any).id, id))
+  );
+  
+  if (!payment) {
+    return c.json({ error: 'Payment not found' }, 404);
+  }
+  
+  // Only allow sending reminders for pending payments
+  if (!['pending', 'pending_approval'].includes(payment.status)) {
+    return c.json({ error: 'Payment reminder can only be sent for pending payments' }, 400);
+  }
+  
+  try {
+    const result = await emailService.sendPaymentReminder(id);
+    
+    if (result.success) {
+      const now = getNow();
+      
+      // Record when reminder was sent
+      await (db as any)
+        .update(payments)
+        .set({ 
+          reminderSentAt: now,
+          updatedAt: now,
+        })
+        .where(eq((payments as any).id, id));
+      
+      return c.json({ message: 'Payment reminder sent successfully', reminderSentAt: now });
+    } else {
+      return c.json({ error: result.error || 'Failed to send payment reminder' }, 500);
+    }
+  } catch (err: any) {
+    console.error('[Payment] Failed to send payment reminder:', err);
+    return c.json({ error: 'Failed to send payment reminder' }, 500);
+  }
+});
+
 // Update admin note
 paymentsRouter.post('/:id/note', requireAuth(['admin', 'organizer']), async (c) => {
  const id = c.req.param('id');