feat: add email, scheduler, and Zulip integration services

- Add email service for sending meeting invites with ICS attachments - Add scheduler for background calendar sync jobs - Add Zulip service for meeting notifications - Make ics_url optional for participants - Add /api/schedule endpoint with 2-hour lead time validation - Update frontend to support scheduling flow Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-21 13:52:02 -05:00
parent d585cf8613
commit 26311c867a
17 changed files with 403 additions and 59 deletions
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -4,7 +4,7 @@ export interface ParticipantAPI {
  id: string;
  name: string;
  email: string;
-  ics_url: string;
+  ics_url: string | null;
  created_at: string;
  updated_at: string;
 }
@@ -19,7 +19,7 @@ export interface TimeSlotAPI {
 export interface CreateParticipantRequest {
  name: string;
  email: string;
-  ics_url: string;
+  ics_url?: string;
 }

 async function handleResponse<T>(response: Response): Promise<T> {
@@ -76,3 +76,24 @@ export async function syncParticipant(id: string): Promise<void> {
    throw new Error('Failed to sync participant calendar');
  }
 }
+
+export async function scheduleMeeting(
+  participantIds: string[],
+  title: string,
+  description: string,
+  startTime: string,
+  endTime: string,
+): Promise<{ email_sent: boolean; zulip_sent: boolean }> {
+  const response = await fetch(`${API_URL}/api/schedule`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      participant_ids: participantIds,
+      title,
+      description,
+      start_time: startTime,
+      end_time: endTime,
+    }),
+  });
+  return handleResponse(response);
+}
--- a/frontend/src/components/AvailabilityHeatmap.tsx
+++ b/frontend/src/components/AvailabilityHeatmap.tsx
@@ -8,9 +8,23 @@ import {
 import { Button } from '@/components/ui/button';
 import { Check, X, Loader2 } from 'lucide-react';

-const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
+const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
 const hours = [9, 10, 11, 12, 13, 14, 15, 16, 17];

+// Get the dates for Mon-Fri of the current week
+const getWeekDates = () => {
+  const now = new Date();
+  const monday = new Date(now);
+  monday.setDate(now.getDate() - now.getDay() + 1);
+  monday.setHours(0, 0, 0, 0);
+
+  return dayNames.map((_, i) => {
+    const date = new Date(monday);
+    date.setDate(monday.getDate() + i);
+    return date.toISOString().split('T')[0]; // "YYYY-MM-DD"
+  });
+};
+
 interface AvailabilityHeatmapProps {
  slots: TimeSlot[];
  selectedParticipants: Participant[];
@@ -26,8 +40,10 @@ export const AvailabilityHeatmap = ({
  showPartialAvailability = false,
  isLoading = false,
 }: AvailabilityHeatmapProps) => {
-  const getSlot = (day: string, hour: number) => {
-    return slots.find((s) => s.day === day && s.hour === hour);
+  const weekDates = getWeekDates();
+
+  const getSlot = (dateStr: string, hour: number) => {
+    return slots.find((s) => s.day === dateStr && s.hour === hour);
  };

  const getEffectiveAvailability = (slot: TimeSlot) => {
@@ -41,6 +57,13 @@ export const AvailabilityHeatmap = ({
    return `${hour.toString().padStart(2, '0')}:00`;
  };

+  const isSlotTooSoon = (dateStr: string, hour: number) => {
+    const slotTime = new Date(`${dateStr}T${formatHour(hour)}:00Z`);
+    const now = new Date();
+    const twoHoursFromNow = new Date(now.getTime() + 2 * 60 * 60 * 1000);
+    return slotTime < twoHoursFromNow;
+  };
+
  const getWeekDateRange = () => {
    const now = new Date();
    const monday = new Date(now);
@@ -87,12 +110,12 @@ export const AvailabilityHeatmap = ({
        <div className="min-w-[600px]">
          <div className="grid grid-cols-[60px_repeat(5,1fr)] gap-1 mb-2">
            <div></div>
-            {days.map((day) => (
+            {dayNames.map((dayName) => (
              <div
-                key={day}
+                key={dayName}
                className="text-center text-sm font-medium text-muted-foreground py-2"
              >
-                {day}
+                {dayName}
              </div>
            ))}
          </div>
@@ -103,18 +126,22 @@ export const AvailabilityHeatmap = ({
                <div className="text-xs text-muted-foreground flex items-center justify-end pr-3">
                  {formatHour(hour)}
                </div>
-                {days.map((day) => {
-                  const slot = getSlot(day, hour);
-                  if (!slot) return <div key={`${day}-${hour}`} className="h-12 bg-muted rounded" />;
+                {weekDates.map((dateStr, dayIndex) => {
+                  const slot = getSlot(dateStr, hour);
+                  const dayName = dayNames[dayIndex];
+                  const tooSoon = isSlotTooSoon(dateStr, hour);
+                  if (!slot) return <div key={`${dateStr}-${hour}`} className="h-12 bg-muted rounded" />;

                  const effectiveAvailability = getEffectiveAvailability(slot);

                  return (
-                    <Popover key={`${day}-${hour}`}>
+                    <Popover key={`${dateStr}-${hour}`}>
                      <PopoverTrigger asChild>
                        <button
                          className={cn(
-                            "h-12 rounded-md transition-all duration-200 hover:scale-105 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                            "h-12 rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                            tooSoon && "opacity-40 cursor-not-allowed",
+                            !tooSoon && "hover:scale-105 hover:shadow-md",
                            effectiveAvailability === 'full' && "bg-availability-full hover:bg-availability-full/90",
                            effectiveAvailability === 'partial' && "bg-availability-partial hover:bg-availability-partial/90",
                            effectiveAvailability === 'none' && "bg-availability-none hover:bg-availability-none/90"
@@ -124,8 +151,13 @@ export const AvailabilityHeatmap = ({
                      <PopoverContent className="w-64 p-4 animate-scale-in" align="center">
                        <div className="space-y-3">
                          <div className="font-semibold text-foreground">
-                            {day} {formatHour(hour)}–{formatHour(hour + 1)}
+                            {dayName} {formatHour(hour)}–{formatHour(hour + 1)}
                          </div>
+                          {tooSoon && (
+                            <div className="text-sm text-muted-foreground italic">
+                              This time slot has passed or is too soon to schedule
+                            </div>
+                          )}
                          <div className="space-y-2">
                            {selectedParticipants.map((participant) => {
                              const isAvailable = slot.availableParticipants.includes(participant.name);
@@ -148,7 +180,7 @@ export const AvailabilityHeatmap = ({
                              );
                            })}
                          </div>
-                          {effectiveAvailability !== 'none' && (
+                          {effectiveAvailability !== 'none' && !tooSoon && (
                            <Button
                              variant="schedule"
                              className="w-full mt-2"
--- a/frontend/src/components/ParticipantManager.tsx
+++ b/frontend/src/components/ParticipantManager.tsx
@@ -25,16 +25,16 @@ export const ParticipantManager = ({
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

-    if (!name.trim() || !email.trim() || !icsLink.trim()) {
+    if (!name.trim() || !email.trim()) {
      toast({
        title: "Missing fields",
-        description: "Please fill in all fields",
+        description: "Please fill in name and email",
        variant: "destructive",
      });
      return;
    }

-    onAddParticipant({ name: name.trim(), email: email.trim(), icsLink: icsLink.trim() });
+    onAddParticipant({ name: name.trim(), email: email.trim(), icsLink: icsLink.trim() || '' });
    setName('');
    setEmail('');
    setIcsLink('');
@@ -89,7 +89,7 @@ export const ParticipantManager = ({
            </div>

            <div className="space-y-2">
-              <Label htmlFor="icsLink">Calendar ICS Link</Label>
+              <Label htmlFor="icsLink">Calendar ICS Link (optional)</Label>
              <Input
                id="icsLink"
                placeholder="https://calendar.google.com/..."
--- a/frontend/src/components/ScheduleModal.tsx
+++ b/frontend/src/components/ScheduleModal.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { TimeSlot, Participant } from '@/types/calendar';
+import { scheduleMeeting } from '@/api/client';
 import {
  Dialog,
  DialogContent,
@@ -11,7 +12,7 @@ import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import { toast } from '@/hooks/use-toast';
-import { Calendar, Clock, Users, Send } from 'lucide-react';
+import { Calendar, Clock, Users, Send, AlertCircle } from 'lucide-react';

 interface ScheduleModalProps {
  isOpen: boolean;
@@ -34,7 +35,23 @@ export const ScheduleModal = ({
    return `${hour.toString().padStart(2, '0')}:00`;
  };

-  const handleSubmit = () => {
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr + 'T00:00:00');
+    return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
+  };
+
+  const isTooSoon = () => {
+    if (!slot) return false;
+    // Use UTC to match backend timezone
+    const startDateTime = new Date(`${slot.day}T${formatHour(slot.hour)}:00Z`);
+    const now = new Date();
+    const twoHoursFromNow = new Date(now.getTime() + 2 * 60 * 60 * 1000);
+    return startDateTime < twoHoursFromNow;
+  };
+
+  const tooSoon = isTooSoon();
+
+  const handleSubmit = async () => {
    if (!title.trim()) {
      toast({
        title: "Please enter a meeting title",
@@ -43,19 +60,41 @@ export const ScheduleModal = ({
      return;
    }

+    if (!slot) return;
+
    setIsSubmitting(true);

-    // Simulate API call
-    setTimeout(() => {
-      setIsSubmitting(false);
+    try {
+      // Calculate start and end times
+      // slot.day is YYYY-MM-DD
+      const startDateTime = new Date(`${slot.day}T${formatHour(slot.hour)}:00Z`);
+      const endDateTime = new Date(`${slot.day}T${formatHour(slot.hour + 1)}:00Z`);
+
+      await scheduleMeeting(
+        participants.map(p => p.id),
+        title,
+        notes,
+        startDateTime.toISOString(),
+        endDateTime.toISOString()
+      );
+
      toast({
        title: "Meeting scheduled",
-        description: "Invitations sent to all participants",
+        description: "Invitations sent via Email and Zulip",
      });
+
      setTitle('');
      setNotes('');
      onClose();
-    }, 1000);
+    } catch (error) {
+      toast({
+        title: "Scheduling failed",
+        description: error instanceof Error ? error.message : "Unknown error",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
  };

  if (!slot) return null;
@@ -72,7 +111,7 @@ export const ScheduleModal = ({
          <div className="bg-accent/50 rounded-lg p-4 space-y-3">
            <div className="flex items-center gap-3 text-sm">
              <Calendar className="w-4 h-4 text-primary" />
-              <span className="font-medium">{slot.day}</span>
+              <span className="font-medium">{formatDate(slot.day)}</span>
            </div>
            <div className="flex items-center gap-3 text-sm">
              <Clock className="w-4 h-4 text-primary" />
@@ -109,12 +148,20 @@ export const ScheduleModal = ({
            </div>
          </div>

+          {/* Lead Time Warning */}
+          {tooSoon && (
+            <div className="flex items-center gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-lg text-sm text-destructive">
+              <AlertCircle className="w-4 h-4 flex-shrink-0" />
+              <span>Meetings must be scheduled at least 2 hours in advance</span>
+            </div>
+          )}
+
          {/* Actions */}
          <Button
            variant="schedule"
            className="w-full h-12"
            onClick={handleSubmit}
-            disabled={isSubmitting}
+            disabled={isSubmitting || tooSoon}
          >
            {isSubmitting ? (
              <span className="animate-pulse">Sending...</span>
--- a/frontend/src/pages/Index.tsx
+++ b/frontend/src/pages/Index.tsx
@@ -118,7 +118,7 @@ const Index = () => {
      const created = await createParticipant({
        name: data.name,
        email: data.email,
-        ics_url: data.icsLink,
+        ics_url: data.icsLink || undefined,
      });
      setParticipants((prev) => [...prev, apiToParticipant(created)]);
      toast({