Email with Resend

Email with Resend

Environment Setup

# .env.local
RESEND_API_KEY=re_...
[email protected]

Resend Client

// lib/​resend.ts
import { Resend } from 'resend';

export const resend = process.env.RESEND_API_KEY
  ? new Resend(process.env.RESEND_API_KEY)
  : null;

export function hasResend(): boolean {
  return resend !== null;
}

Contact Form Email

// lib/​emails/​contact.ts
import { resend } from '@/​lib/​resend';
import type { Locale } from '@/​i18n.config';

interface ContactEmailParams {
  name: string;
  email: string;
  phone?: string;
  message: string;
  locale: Locale;
}

export async function sendContactEmail({
  name,
  email,
  phone,
  message,
  locale,
}: ContactEmailParams) {
  if (!resend) {
    console.log('Resend not configured, skipping email');
    return { success: false, error: 'Email not configured' };
  }

  const toEmail = process.env.CONTACT_TO_EMAIL!;

  try {
    await resend.emails.send({
      from: 'Studio Contact <[email protected]>',
      to: toEmail,
      replyTo: email,
      subject: `New Contact Form Submission from ${name}`,
      html: `
        <h2>New Contact Form Submission</​h2>
        <p><strong>Name:</​strong> ${name}</​p>
        <p><strong>Email:</​strong> ${email}</​p>
        ${phone ? `<p><strong>Phone:</​strong> ${phone}</​p>` : ''}
        <p><strong>Message:</​strong></​p>
        <p>${message.replace(/\n/​g, '<br>')}</​p>
        <hr>
        <p><small>Submitted from: ${locale} locale</​small></​p>
      `,
    });

    return { success: true };
  } catch (error) {
    console.error('Failed to send email:', error);
    return { success: false, error: 'Failed to send email' };
  }
}

Booking Request Email

// lib/​emails/​booking.ts
import { resend } from '@/​lib/​resend';
import type { Locale } from '@/​i18n.config';

interface BookingEmailParams {
  name: string;
  email: string;
  phone?: string;
  goals: string;
  experienceLevel: string;
  injuries?: string;
  preferredTimes: string;
  sessionType: 'in-person' | 'online';
  locale: Locale;
}

const subjectByLocale: Record<Locale, string> = {
  'pt-PT': 'Novo Pedido de Sessão',
  'en': 'New Booking Request',
  'tr': 'Yeni Rezervasyon Talebi',
  'es': 'Nueva Solicitud de Reserva',
  'fr': 'Nouvelle Demande de Réservation',
  'de': 'Neue Buchungsanfrage',
};

export async function sendBookingEmail(params: BookingEmailParams) {
  if (!resend) {
    console.log('Resend not configured, skipping email');
    return { success: false, error: 'Email not configured' };
  }

  const toEmail = process.env.CONTACT_TO_EMAIL!;

  try {
    // Email to studio
    await resend.emails.send({
      from: 'Studio Booking <[email protected]>',
      to: toEmail,
      replyTo: params.email,
      subject: `${subjectByLocale[params.locale]}: ${params.name}`,
      html: generateBookingHtml(params),
    });

    // Confirmation email to client
    await resend.emails.send({
      from: 'Studio Name <[email protected]>',
      to: params.email,
      subject: getConfirmationSubject(params.locale),
      html: generateConfirmationHtml(params),
    });

    return { success: true };
  } catch (error) {
    console.error('Failed to send booking email:', error);
    return { success: false, error: 'Failed to send email' };
  }
}

function generateBookingHtml(params: BookingEmailParams): string {
  return `
    <h2>New Booking Request</​h2>
    <table style="border-collapse: collapse; width: 100%;">
      <tr>
        <td style="padding: 8px; border: 1px solid #ddd;"><strong>Name</​strong></​td>
        <td style="padding: 8px; border: 1px solid #ddd;">${params.name}</​td>
      </​tr>
      <tr>
        <td style="padding: 8px; border: 1px solid #ddd;"><strong>Email</​strong></​td>
        <td style="padding: 8px; border: 1px solid #ddd;">${params.email}</​td>
      </​tr>
      ${params.phone ? `
      <tr>
        <td style="padding: 8px; border: 1px solid #ddd;"><strong>Phone</​strong></​td>
        <td style="padding: 8px; border: 1px solid #ddd;">${params.phone}</​td>
      </​tr>
      ` : ''}
      <tr>
        <td style="padding: 8px; border: 1px solid #ddd;"><strong>Session Type</​strong></​td>
        <td style="padding: 8px; border: 1px solid #ddd;">${params.sessionType}</​td>
      </​tr>
      <tr>
        <td style="padding: 8px; border: 1px solid #ddd;"><strong>Experience</​strong></​td>
        <td style="padding: 8px; border: 1px solid #ddd;">${params.experienceLevel}</​td>
      </​tr>
      <tr>
        <td style="padding: 8px; border: 1px solid #ddd;"><strong>Goals</​strong></​td>
        <td style="padding: 8px; border: 1px solid #ddd;">${params.goals}</​td>
      </​tr>
      ${params.injuries ? `
      <tr>
        <td style="padding: 8px; border: 1px solid #ddd;"><strong>Injuries/​Notes</​strong></​td>
        <td style="padding: 8px; border: 1px solid #ddd;">${params.injuries}</​td>
      </​tr>
      ` : ''}
      <tr>
        <td style="padding: 8px; border: 1px solid #ddd;"><strong>Preferred Times</​strong></​td>
        <td style="padding: 8px; border: 1px solid #ddd;">${params.preferredTimes}</​td>
      </​tr>
    </​table>
    <p><small>Locale: ${params.locale}</​small></​p>
  `;
}

function getConfirmationSubject(locale: Locale): string {
  const subjects: Record<Locale, string> = {
    'pt-PT': 'Recebemos o seu pedido de sessão',
    'en': 'We received your booking request',
    'tr': 'Rezervasyon talebinizi aldık',
    'es': 'Recibimos tu solicitud de reserva',
    'fr': 'Nous avons reçu votre demande',
    'de': 'Wir haben Ihre Anfrage erhalten',
  };
  return subjects[locale];
}

function generateConfirmationHtml(params: BookingEmailParams): string {
  // Localized confirmation message
  return `
    <h2>Thank you for your booking request!</​h2>
    <p>Hi ${params.name},</​p>
    <p>We've received your request and will get back to you within 24 hours.</​p>
    <p>Best regards,<br>Studio Name</​p>
  `;
}

Server Action with Email

// lib/​actions/​contact.ts
'use server';

import { contactFormSchema } from '@/​lib/​validations';
import { sendContactEmail } from '@/​lib/​emails/​contact';
import type { Locale } from '@/​i18n.config';

export async function submitContactForm(formData: FormData, locale: Locale) {
  const rawData = {
    name: formData.get('name'),
    email: formData.get('email'),
    phone: formData.get('phone'),
    message: formData.get('message'),
  };

  const result = contactFormSchema.safeParse(rawData);

  if (!result.success) {
    return {
      success: false,
      errors: result.error.flatten().fieldErrors,
    };
  }

  const emailResult = await sendContactEmail({
    ...result.data,
    locale,
  });

  if (!emailResult.success) {
    return {
      success: false,
      errors: { _form: ['Failed to send message. Please try again.'] },
    };
  }

  return { success: true };
}

Fallback Without Resend

// When RESEND_API_KEY is not set
export function ContactForm() {
  const hasEmail = hasResend();

  if (!hasEmail) {
    return (
      <div className="text-center p-8">
        <p>Contact us directly at:</​p>
        <a href="mailto:[email protected]" className="text-primary">
          [email protected]
        </​a>
      </​div>
    );
  }

  return <ContactFormWithEmail />;
}