@tuturuuu/ui 0.30.2 → 0.31.0

package/src/components/ui/legacy/calendar/event-modal.tsx

@@ -34,13 +34,7 @@ import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
 import type { SupportedColor } from '@tuturuuu/types/primitives/SupportedColors';
 import { Badge } from '@tuturuuu/ui/badge';
 import { Button } from '@tuturuuu/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@tuturuuu/ui/dialog';
+import { Dialog, DialogContent } from '@tuturuuu/ui/dialog';
 import {
   Form,
   FormControl,
@@ -52,7 +46,7 @@ import {
 } from '@tuturuuu/ui/form';
 import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
 import { useForm } from '@tuturuuu/ui/hooks/use-form';
-import { useToast } from '@tuturuuu/ui/hooks/use-toast';
+import { notifySave } from '@tuturuuu/ui/save-notification';
 import { ScrollArea } from '@tuturuuu/ui/scroll-area';
 import {
   Select,
@@ -73,10 +67,18 @@ import { format } from 'date-fns';
 import dayjs from 'dayjs';
 import ts from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useEffectEvent,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { z } from 'zod';
 import { Alert, AlertDescription, AlertTitle } from '../../alert';
 import { AutosizeTextarea } from '../../custom/autosize-textarea';
+import { getCalendarMeetingMetadata } from './calendar-meeting-link';
 import {
   COLOR_OPTIONS,
   DateError,
@@ -88,11 +90,10 @@ import {
   EventToggleSwitch,
   OverlapWarning,
 } from './event-form-components';
-import {
-  CalendarEventProviderIcon,
-  getCalendarEventProviderDisplay,
-} from './event-provider-display';
+import { EventModalHeader } from './event-modal-header';
+import { saveCalendarEventDrafts } from './save-calendar-event-drafts';
 import { useCalendarSettings } from './settings/settings-context';
+import { useEventDraftSession } from './use-event-draft-session';
 
 dayjs.extend(ts);
 dayjs.extend(utc);
@@ -153,7 +154,7 @@ function findEventSourceOption(
 }
 
 export function EventModal() {
-  const { toast } = useToast();
+  const toast = notifySave;
   const startPickerRef = useRef<HTMLButtonElement>(null);
   const endPickerRef = useRef<HTMLButtonElement>(null);
 
@@ -171,7 +172,6 @@ export function EventModal() {
 
   const tz = settings?.timezone?.timezone;
 
-  // State for manual event creation/editing
   const [event, setEvent] = useState<Partial<CalendarEvent>>({
     title: '',
     description: '',
@@ -196,6 +196,7 @@ export function EventModal() {
   );
   const selectedSourceOption =
     sourceOptions.find((option) => option.id === selectedSourceId) ??
+    findEventSourceOption(sourceOptions, event) ??
     sourceData?.defaultSource ??
     sourceOptions[0];
 
@@ -207,13 +208,11 @@ export function EventModal() {
     Intl.DateTimeFormat().resolvedOptions().timeZone
   );
 
-  // Get the current event being previewed
   const generatedEvent = generatedEvents?.[currentEventIndex];
 
   // Determine if we're editing an existing event
   const isEditing = !!(activeEvent?.id && activeEvent.id !== 'new');
 
-  // Shared state
   const [activeTab, setActiveTab] = useState<'manual' | 'ai' | 'preview'>(
     isEditing ? 'manual' : defaultNewEventTab // Default tab for new events
   );
@@ -243,13 +242,11 @@ export function EventModal() {
     },
   });
 
-  // AI generation
   const { object, submit, error, isLoading } = useObject({
     api: '/api/v1/calendar/events/generate',
     schema: calendarEventsSchema,
   });
 
-  // Function to check for overlapping events
   const checkForOverlaps = useCallback(
     (eventToCheck: Partial<CalendarEvent>) => {
       if (!eventToCheck.start_at || !eventToCheck.end_at) return;
@@ -284,104 +281,95 @@ export function EventModal() {
     [activeEvent, getEvents]
   );
 
-  // Handle AI-generated events
+  const receiveGeneratedEvents = useEffectEvent(() => {
+    const processedEvents = (object?.events || []) as Partial<CalendarEvent>[];
+    setGeneratedEvents(processedEvents);
+    setCurrentEventIndex(0);
+    const firstEvent = processedEvents[0];
+    if (
+      firstEvent?.start_at &&
+      firstEvent.end_at &&
+      aiForm.getValues().smart_scheduling
+    ) {
+      checkForOverlaps(firstEvent);
+    }
+    setActiveTab('preview');
+  });
   useEffect(() => {
-    if (object?.events && !isLoading) {
-      // Process the generated events
-      const processedEvents = (object.events || []) as Partial<CalendarEvent>[];
+    if (object?.events && !isLoading) receiveGeneratedEvents();
+  }, [object, isLoading]);
+
+  // Initialize once per dialog session; live calendar refreshes must not erase edits.
+  useEventDraftSession({
+    isOpen: isModalOpen,
+    eventId: activeEvent?.id,
+    workspaceId: activeEvent?.ws_id,
+    initialize: () => {
+      if (activeEvent) {
+        const cleanEventData: Partial<CalendarEvent> = {
+          id: activeEvent.id,
+          title: activeEvent.title || '',
+          description: activeEvent.description || '',
+          start_at: activeEvent.start_at,
+          end_at: activeEvent.end_at,
+          color: activeEvent.color || 'BLUE',
+          location: activeEvent.location || '',
+          locked: activeEvent.locked || false,
+          ws_id: activeEvent.ws_id,
+          provider: activeEvent.provider,
+          source_calendar_id: activeEvent.source_calendar_id,
+          external_calendar_id: activeEvent.external_calendar_id,
+          external_event_id: activeEvent.external_event_id,
+          google_event_id: activeEvent.google_event_id,
+          google_calendar_id: activeEvent.google_calendar_id,
+          scheduling_metadata: getCalendarMeetingMetadata(activeEvent),
+        };
 
-      setGeneratedEvents(processedEvents);
-      setCurrentEventIndex(0);
+        setEvent(cleanEventData);
+        const sourceOption = findEventSourceOption(
+          sourceOptions,
+          cleanEventData
+        );
+        setSelectedSourceId(
+          sourceOption?.id ?? sourceData?.defaultSource?.id ?? null
+        );
 
-      // Find overlapping events for the first event
-      if (processedEvents.length > 0 && aiForm.getValues().smart_scheduling) {
-        const firstEvent = processedEvents[0];
-        if (firstEvent?.start_at && firstEvent.end_at) {
-          checkForOverlaps(firstEvent as Partial<CalendarEvent>);
+        if (activeEvent.id !== 'new') {
+          setIsAllDay(isAllDayEvent(cleanEventData as CalendarEvent));
+        } else {
+          setIsAllDay(false);
         }
-      }
-
-      setActiveTab('preview');
-    }
-  }, [object, isLoading, aiForm, checkForOverlaps]);
-
-  // Reset form when modal opens/closes or active event changes
-  useEffect(() => {
-    if (activeEvent) {
-      // Clean the event data to only include valid CalendarEvent fields
-      const cleanEventData: Partial<CalendarEvent> = {
-        id: activeEvent.id,
-        title: activeEvent.title || '',
-        description: activeEvent.description || '',
-        start_at: activeEvent.start_at,
-        end_at: activeEvent.end_at,
-        color: activeEvent.color || 'BLUE',
-        location: activeEvent.location || '',
-        locked: activeEvent.locked || false,
-        ws_id: activeEvent.ws_id,
-        provider: activeEvent.provider,
-        source_calendar_id: activeEvent.source_calendar_id,
-        external_calendar_id: activeEvent.external_calendar_id,
-        external_event_id: activeEvent.external_event_id,
-        google_event_id: activeEvent.google_event_id,
-        google_calendar_id: activeEvent.google_calendar_id,
-      };
 
-      setEvent(cleanEventData);
-      const sourceOption = findEventSourceOption(sourceOptions, cleanEventData);
-      setSelectedSourceId(
-        sourceOption?.id ?? sourceData?.defaultSource?.id ?? null
-      );
+        // Check for overlapping events
+        checkForOverlaps(cleanEventData);
 
-      // Only check for all-day if this is an existing event (not a new one)
-      if (activeEvent.id !== 'new') {
-        setIsAllDay(isAllDayEvent(cleanEventData as CalendarEvent));
+        setActiveTab(isEditing ? 'manual' : defaultNewEventTab);
       } else {
-        // For new events, always start with isAllDay as false
-        setIsAllDay(false);
-      }
-
-      // Check for overlapping events
-      checkForOverlaps(cleanEventData);
-
-      // Set active tab to manual when editing an existing event
-      setActiveTab(isEditing ? 'manual' : defaultNewEventTab);
-    } else {
-      // Set default values for new event
-      const now = new Date();
-      const oneHourLater = new Date(now.getTime() + 60 * 60 * 1000);
-
-      const newEvent = {
-        title: '',
-        description: '',
-        start_at: now.toISOString(),
-        end_at: oneHourLater.toISOString(),
-        color: 'BLUE' as SupportedColor,
-        location: '',
-        locked: false,
-        ws_id: '',
-      };
+        const now = new Date();
+        const oneHourLater = new Date(now.getTime() + 60 * 60 * 1000);
+
+        const newEvent = {
+          title: '',
+          description: '',
+          start_at: now.toISOString(),
+          end_at: oneHourLater.toISOString(),
+          color: 'BLUE' as SupportedColor,
+          location: '',
+          locked: false,
+          ws_id: '',
+        };
 
-      setEvent(newEvent);
-      setSelectedSourceId(sourceData?.defaultSource?.id ?? null);
-      setIsAllDay(false);
+        setEvent(newEvent);
+        setSelectedSourceId(sourceData?.defaultSource?.id ?? null);
+        setIsAllDay(false);
 
-      // Reset AI form
-      aiForm.reset();
-      setGeneratedEvents([]);
-    }
+        aiForm.reset();
+        setGeneratedEvents([]);
+      }
 
-    // Clear any error messages
-    setDateError(null);
-  }, [
-    activeEvent,
-    checkForOverlaps,
-    aiForm,
-    defaultNewEventTab,
-    isEditing,
-    sourceData?.defaultSource?.id,
-    sourceOptions,
-  ]);
+      setDateError(null);
+    },
+  });
 
   // Handle manual event save
   const handleManualSave = async () => {
@@ -412,7 +400,8 @@ export function EventModal() {
       };
 
       if (activeEvent?.id === 'new') {
-        await addEvent(eventData as Omit<CalendarEvent, 'id'>);
+        const saved = await addEvent(eventData as Omit<CalendarEvent, 'id'>);
+        if (!saved?.id) throw new Error();
       } else if (activeEvent?.id) {
         // For multi-day events, always use the original event ID
         // The activeEvent should already contain the original event from the database
@@ -499,29 +488,13 @@ export function EventModal() {
     setIsSaving(true);
     try {
       const eventsToSave = generatedEvents;
-      const savedEvents: CalendarEvent[] = [];
-      const failedEvents: Array<{ event: CalendarEvent; error: unknown }> = [];
-
-      // Save each event individually
-      for (const eventData of eventsToSave || []) {
-        try {
-          const calendarEvent: Omit<CalendarEvent, 'id'> = {
-            title: eventData.title || 'New Event',
-            description: eventData.description || '',
-            start_at: eventData.start_at || '',
-            end_at: eventData.end_at || '',
-            color: eventData.color || 'BLUE',
-            location: eventData.location || '',
-            locked: eventData.locked || false,
-            source: sourceInputFromOption(selectedSourceOption),
-          };
-
-          const savedEvent = await addEvent(calendarEvent);
-          if (savedEvent) savedEvents.push(savedEvent);
-        } catch (error) {
-          failedEvents.push({ event: eventData as CalendarEvent, error });
-        }
-      }
+      const { savedEvents, failedEvents } = await saveCalendarEventDrafts(
+        eventsToSave ?? [],
+        addEvent,
+        sourceInputFromOption(selectedSourceOption)
+      );
+      setGeneratedEvents(failedEvents);
+      setCurrentEventIndex(0);
 
       // Show success notification
       if (savedEvents.length > 0) {
@@ -529,7 +502,7 @@ export function EventModal() {
           title: 'Success',
           description: `${savedEvents.length}/${eventsToSave?.length || 0} event${savedEvents.length > 1 ? 's' : ''} saved`,
         });
-        closeModal();
+        if (failedEvents.length === 0) closeModal();
       }
 
       // If there are failed events, show an error notification
@@ -958,32 +931,10 @@ export function EventModal() {
     }
   };
 
-  const providerDisplay = getCalendarEventProviderDisplay(event);
-
   return (
     <Dialog open={isModalOpen} onOpenChange={(open) => !open && closeModal()}>
       <DialogContent className="max-h-[90vh] max-w-3xl overflow-hidden p-0">
-        <DialogHeader className="border-b px-6 pt-6 pb-4">
-          <DialogTitle className="flex items-center gap-2 font-semibold text-xl">
-            <span>{isEditing ? 'Edit Event' : 'Create Event'}</span>
-            {providerDisplay && (
-              <div className="ml-3 flex items-center gap-2 rounded-md border bg-muted/40 px-3 py-1 text-sm">
-                <CalendarEventProviderIcon
-                  event={event}
-                  className="h-4.5 w-4.5"
-                />
-                <span className="font-medium text-xs">
-                  {providerDisplay.label}
-                </span>
-              </div>
-            )}
-          </DialogTitle>
-          <DialogDescription>
-            {isEditing
-              ? 'Make changes to your existing event'
-              : 'Add a new event to your calendar'}
-          </DialogDescription>
-        </DialogHeader>
+        <EventModalHeader event={event} isEditing={isEditing} />
 
         <Tabs
           value={activeTab}
@@ -1040,7 +991,7 @@ export function EventModal() {
                         )}
                       </div>
                       <Select
-                        value={selectedSourceId ?? undefined}
+                        value={selectedSourceOption?.id}
                         onValueChange={(value) => setSelectedSourceId(value)}
                         disabled={sourceOptions.length === 0 || isSaving}
                       >