Send email upon absence fill

Author: ChinemeremChigbo

app/api/emails/fillAbsence/route.ts

@@ -0,0 +1,70 @@
+import { createAbsenceFillConfirmationEmailBody } from '@utils/emailTemplates';
+import { getAdminEmails } from '@utils/getAdminEmails';
+import { prisma } from '@utils/prisma';
+import { sendEmail } from '@utils/sendEmail';
+import { NextResponse } from 'next/server';
+
+export async function POST(req: Request) {
+  const { absenceId } = await req.json();
+
+  const absence = await prisma.absence.findUnique({
+    where: { id: absenceId },
+    include: {
+      absentTeacher: {
+        select: { firstName: true, lastName: true, email: true },
+      },
+      substituteTeacher: {
+        select: { firstName: true, lastName: true, email: true },
+      },
+      location: true,
+      subject: true,
+      lessonPlan: { select: { name: true, url: true } },
+    },
+  });
+
+  if (!absence) {
+    return NextResponse.json({ error: 'Absence not found' }, { status: 404 });
+  }
+
+  if (!absence.substituteTeacher) {
+    return NextResponse.json(
+      { error: 'No filling teacher on this absence' },
+      { status: 400 }
+    );
+  }
+
+  const html = createAbsenceFillConfirmationEmailBody(
+    {
+      firstName: absence.substituteTeacher.firstName,
+      lastName: absence.substituteTeacher.lastName,
+    },
+    {
+      firstName: absence.absentTeacher.firstName,
+      lastName: absence.absentTeacher.lastName,
+    },
+    {
+      lessonDate: absence.lessonDate,
+      subject: absence.subject,
+      location: absence.location,
+      lessonPlan: absence.lessonPlan,
+    }
+  );
+
+  const to = [absence.substituteTeacher.email];
+  const admins = await getAdminEmails();
+  const cc = [...admins, absence.absentTeacher.email];
+
+  const { success, error } = await sendEmail({
+    to,
+    cc,
+    subject: 'Sistema Toronto Tacet - an absence has been filled',
+    html,
+  });
+
+  if (!success) {
+    console.error('Fill email error:', error);
+    return NextResponse.json({ error }, { status: 500 });
+  }
+
+  return NextResponse.json({ success: true });
+}

src/components/absences/details/AbsenceDetails.tsx

@@ -81,20 +81,28 @@ const AbsenceDetails: React.FC<AbsenceDetailsProps> = ({
           roomNumber: event.roomNumber,
         }),
       });
-
       if (!response.ok) {
         throw new Error('Failed to fill absence');
       }
 
-      const formattedDate = formatFullDate(event.start);
+      const emailRes = await fetch('/api/emails/fillAbsence', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ absenceId: event.absenceId }),
+      });
+      if (!emailRes.ok) {
+        console.error('Claim email failed:', await emailRes.text());
+      }
 
+      const formattedDate = formatFullDate(event.start);
       showToast({
         status: 'success',
         description: (
           <Text>
             You have successfully filled{' '}
             <Text as="span" fontWeight="bold">
-              {event.absentTeacher.firstName}&apos;s
+              {event.absentTeacher.firstName}
+              &apos;s
             </Text>{' '}
             absence on{' '}
             <Text as="span" fontWeight="bold">
@@ -108,16 +116,18 @@ const AbsenceDetails: React.FC<AbsenceDetailsProps> = ({
       setIsFillModalOpen(false);
       setIsFillThanksOpen(true);
       onTabChange('declared');
-    } catch {
+    } catch (err: any) {
       const formattedDate = formatFullDate(event.start);
-
       showToast({
         status: 'error',
         description: (
           <Text>
-            There was an error in filling{' '}
+            {err.message.includes('email')
+              ? 'Failed to send confirmation email.'
+              : 'There was an error in filling '}
             <Text as="span" fontWeight="bold">
-              {event.absentTeacher.firstName}&apos;s
+              {event.absentTeacher.firstName}
+              &apos;s
             </Text>{' '}
             absence on{' '}
             <Text as="span" fontWeight="bold">

utils/emailTemplates.ts

@@ -111,3 +111,50 @@ export function createAbsenceModificationEmailBody(
     </html>
   `;
 }
+
+export function createAbsenceFillConfirmationEmailBody(
+  fillingTeacher: { firstName: string; lastName: string },
+  reportingTeacher: { firstName: string; lastName: string },
+  absence: {
+    lessonDate: Date;
+    subject: { name: string };
+    location: { name: string };
+    lessonPlan?: { name: string; url: string } | null;
+  }
+): string {
+  const formattedDate = new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }).format(absence.lessonDate);
+
+  return `
+    <html>
+      <body>
+        <p>Hello ${fillingTeacher.firstName} ${fillingTeacher.lastName},</p>
+        <p>
+          This email confirms you have successfully filled
+          <strong>${reportingTeacher.firstName} ${reportingTeacher.lastName}’s</strong>
+          <strong>${absence.subject.name}</strong> absence from
+          <strong>${absence.location.name}</strong> on
+          <strong>${formattedDate}</strong>.
+        </p>
+        <p>
+          <strong>Click the link below to view:</strong><br/>
+          <a href="${UPLOAD_LINK}" target="_blank">Tacet Calendar</a>
+        </p>
+        ${
+          absence.lessonPlan
+            ? `<p>
+                 <strong>Lesson Plan:</strong><br/>
+                 <a href="${absence.lessonPlan.url}" target="_blank">
+                   ${absence.lessonPlan.name}
+                 </a>
+               </p>`
+            : ``
+        }
+        <p>Sistema Toronto</p>
+      </body>
+    </html>
+  `;
+}