send event invite when request approved

Author: probablyangg

src/app/api/approval/rsvp/route.ts

@@ -354,6 +354,12 @@ export async function PUT(req: NextRequest) {
           receiver: updatedRequest.user,
           type: emailType,
           event: updatedRequest.event,
+          // For approved requests, include the RSVP type for iCal generation
+          approvalRsvpType:
+            status === "APPROVED" &&
+            ["GOING", "MAYBE", "NOT_GOING"].includes(approvalRequest.rsvpType)
+              ? (approvalRequest.rsvpType as "GOING" | "MAYBE" | "NOT_GOING")
+              : undefined,
         }).catch((error) =>
           console.error(
             `Error sending approval ${status.toLowerCase()} email: ${

src/components/Email/templates/ApprovalApproved.tsx

@@ -141,6 +141,43 @@ export const ApprovalApprovedEmailTemplate: React.FC<
         </a>
       </div>
 
+      <div
+        style={{
+          backgroundColor: "rgba(16, 185, 129, 0.05)",
+          borderRadius: "8px",
+          padding: "16px",
+          fontSize: "14px",
+          marginBottom: "24px",
+        }}
+      >
+        <p
+          style={{
+            margin: "0 0 8px 0",
+            fontWeight: "500",
+          }}
+        >
+          Quick tips:
+        </p>
+        <ul
+          style={{
+            margin: "0",
+            paddingLeft: "20px",
+            color: "#6b7280",
+            listStyleType: "disc",
+          }}
+        >
+          <li style={{ margin: "4px 0" }}>
+            Add this to your calendar using the attached .ics file
+          </li>
+          <li style={{ margin: "4px 0" }}>
+            You&apos;ll get a reminder 1 hour before the event
+          </li>
+          <li style={{ margin: "4px 0" }}>
+            Need to change your RSVP? No worries, just visit the event page
+          </li>
+        </ul>
+      </div>
+
       <p style={{ margin: "24px 0 0 0", color: "#6b7280", fontSize: "14px" }}>
         You&apos;re all set! We&apos;ll send you reminders as the event
         approaches. You can always update your RSVP or view event details by

src/components/EventPage/ViewOtherRSVPs.tsx

@@ -34,13 +34,11 @@ export default function ViewOtherRSVPs({
             <TooltipProvider key={key}>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <div>
-                    <UserImage
-                      photo={getUserImage(rsvp.attendee)}
-                      size="sm"
-                      userId={rsvp.attendee.id}
-                    />
-                  </div>
+                  <UserImage
+                    photo={getUserImage(rsvp.attendee)}
+                    size="sm"
+                    userId={rsvp.attendee.id}
+                  />
                 </TooltipTrigger>
                 <TooltipContent>
                   <p>{rsvp.attendee.nickname}</p>

src/components/ui/default-user-image.tsx

@@ -1,5 +1,6 @@
 import { cn } from "src/lib/utils";
 import type { ComponentType } from "react";
+import { forwardRef } from "react";
 import {
   CoolEmoji,
   HeartEyesEmoji,
@@ -83,17 +84,15 @@ export const DefaultUserImage = ({
   );
 };
 
-export const UserImage = ({
-  photo,
-  size = "md",
-  className,
-  userId,
-}: {
-  photo?: string | null;
-  size?: "sm" | "md" | "lg";
-  className?: string;
-  userId: string;
-}) => {
+export const UserImage = forwardRef<
+  HTMLImageElement,
+  {
+    photo?: string | null;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    userId: string;
+  }
+>(({ photo, size = "md", className, userId }, ref) => {
   if (!photo) {
     // Use default profile picture instead of emoji avatar
     const containerClass = cn(
@@ -106,7 +105,9 @@ export const UserImage = ({
     const defaultImage = getDefaultProfilePicture(userId);
 
     // eslint-disable-next-line @next/next/no-img-element
-    return <img className={containerClass} src={defaultImage} alt="" />;
+    return (
+      <img ref={ref} className={containerClass} src={defaultImage} alt="" />
+    );
   }
 
   const containerClass = cn(
@@ -116,5 +117,7 @@ export const UserImage = ({
   );
 
   // eslint-disable-next-line @next/next/no-img-element
-  return <img className={containerClass} src={photo} alt="" />;
-};
+  return <img ref={ref} className={containerClass} src={photo} alt="" />;
+});
+
+UserImage.displayName = "UserImage";

src/lib/queue/email.ts

@@ -11,6 +11,7 @@ export interface EmailJobData {
   type?: EmailType;
   text?: string;
   previousRsvpType?: "GOING" | "MAYBE" | "NOT_GOING";
+  approvalRsvpType?: "GOING" | "MAYBE" | "NOT_GOING";
   // Option 2: Send with pre-built email options
   emailOptions?: CreateEmailOptions;
 }

src/lib/queue/workers/email.ts

@@ -391,6 +391,7 @@ export const startEmailWorker = () => {
         type,
         text,
         previousRsvpType,
+        approvalRsvpType,
       } = job.data;
 
       if (!receiver || !rawEvent || !type) {
@@ -451,7 +452,13 @@ export const startEmailWorker = () => {
       );
 
       // Check if this email type needs iCal generation
-      const rsvpType = emailTypeToRsvpType(validatedType);
+      let rsvpType = emailTypeToRsvpType(validatedType);
+
+      // For approval-approved emails, use the explicit approval RSVP type if provided
+      if (validatedType === "approval-approved" && approvalRsvpType) {
+        rsvpType = approvalRsvpType as any; // Convert string to RSVP_TYPE
+      }
+
       let iCal: string | null = null;
 
       // Only generate iCal for RSVP-related emails, not approval notifications

src/utils/email/send.ts

@@ -19,21 +19,29 @@ export const sendEventEmail = async ({
   type,
   text,
   previousRsvpType,
+  approvalRsvpType,
   returnOptionsOnly = false,
 }: {
   receiver: User;
   type: EmailType;
   text?: string;
   event: EventWithProposerAndRsvps;
   previousRsvpType?: "GOING" | "MAYBE" | "NOT_GOING";
+  approvalRsvpType?: "GOING" | "MAYBE" | "NOT_GOING";
   returnOptionsOnly?: boolean;
 }): Promise<CreateEmailOptions | { id: string | number }> => {
   if (!receiver.email) {
     throw new Error(`receiver ${receiver.id} has no email`);
   }
 
   // Determine the method based on RSVP type and generate iCal if needed
-  const rsvpType = emailTypeToRsvpType(type);
+  let rsvpType = emailTypeToRsvpType(type);
+
+  // For approval-approved emails, use the explicit approval RSVP type if provided
+  if (type === "approval-approved" && approvalRsvpType) {
+    rsvpType = approvalRsvpType as any; // Convert string to RSVP_TYPE
+  }
+
   let iCal: string | null = null;
 
   // Only generate iCal for RSVP-related emails, not for approval notifications
@@ -149,6 +157,7 @@ export const sendEventEmail = async ({
       type,
       text,
       previousRsvpType,
+      approvalRsvpType,
     });
 
     console.log(`Email to ${receiver.email} added to Redis queue for ${type}`);