refactor: simplify booking to request-based flow

- Remove BookingResponse, downloadCalendar from useBookAppointment
- book() now returns boolean instead of BookingResponse
- Handle API response format change (events wrapper)
- Fix date parsing to use local time instead of UTC
- Update confirmation UI to reflect request semantics

Made-with: Cursor

Author: yannicschroeer

src/components/examples/CustomBookingExample.tsx

@@ -968,11 +968,10 @@ function BookingForm({ slot, showLocationSelector, selectedLocation, onLocationC
 
 type ConfirmationProps = {
     slot: EnrichedTimeSlot
-    onDownloadCalendar: () => void
     onReset: () => void
 }
 
-function Confirmation({ slot, onDownloadCalendar, onReset }: ConfirmationProps) {
+function Confirmation({ slot, onReset }: ConfirmationProps) {
     const formatDateLong = (dateStr: string) => {
         return new Date(dateStr).toLocaleDateString('de-DE', {
             weekday: 'long',
@@ -1009,7 +1008,7 @@ function Confirmation({ slot, onDownloadCalendar, onReset }: ConfirmationProps)
                     margin: '0 0 12px 0'
                 }}
             >
-                Termin gebucht!
+                Terminanfrage eingegangen!
             </h2>
 
             <p
@@ -1021,32 +1020,13 @@ function Confirmation({ slot, onDownloadCalendar, onReset }: ConfirmationProps)
                     lineHeight: 1.6
                 }}
             >
-                Ihr Termin <strong style={{ color: 'var(--booking-text)' }}>"{slot.title}"</strong> am{' '}
+                Ihre Anfrage für <strong style={{ color: 'var(--booking-text)' }}>"{slot.title}"</strong> am{' '}
                 <strong style={{ color: 'var(--booking-text)' }}>{formatDateLong(slot.start)}</strong> um{' '}
-                <strong style={{ color: 'var(--booking-text)' }}>{slot.timeString} Uhr</strong> wurde erfolgreich gebucht.
+                <strong style={{ color: 'var(--booking-text)' }}>{slot.timeString} Uhr</strong> ist eingegangen. Bitte bestätigen Sie den Termin über den Link in der E-Mail, die
+                wir Ihnen gerade gesendet haben.
             </p>
 
             <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
-                <button
-                    type="button"
-                    onClick={onDownloadCalendar}
-                    style={{
-                        padding: '12px 20px',
-                        border: 'none',
-                        borderRadius: 'var(--booking-radius-sm)',
-                        background: 'var(--booking-accent)',
-                        color: '#000',
-                        fontSize: 14,
-                        fontWeight: 600,
-                        cursor: 'pointer',
-                        fontFamily: 'inherit',
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 8
-                    }}
-                >
-                    📅 Zum Kalender hinzufügen
-                </button>
                 <button
                     type="button"
                     onClick={onReset}
@@ -1086,7 +1066,6 @@ function BookingInterface() {
         selectSlot,
         selectedLocation,
         setLocation,
-        booking,
         submitBooking,
         reset,
         isLoading,
@@ -1272,9 +1251,7 @@ function BookingInterface() {
                             />
                         )}
 
-                        {step === 'confirmation' && enrichedSelectedSlot && (
-                            <Confirmation slot={enrichedSelectedSlot} onDownloadCalendar={booking.downloadCalendar} onReset={reset} />
-                        )}
+                        {step === 'confirmation' && enrichedSelectedSlot && <Confirmation slot={enrichedSelectedSlot} onReset={reset} />}
                     </div>
                 </div>
             </div>

src/hooks/useAvailableSlots.ts

@@ -123,7 +123,9 @@ export function useAvailableSlots(options: UseAvailableSlotsOptions = {}): UseAv
                 throw new Error(`Failed to fetch slots: ${response.statusText}`)
             }
 
-            const data = (await response.json()) as TimeSlot[]
+            const responseData = await response.json()
+            // API returns { events: [], categories: [], bookingNote: null }
+            const data = (Array.isArray(responseData) ? responseData : responseData.events) as TimeSlot[]
             setState({ data, isLoading: false, error: null })
         } catch (err) {
             const error = err instanceof Error ? err : new Error('Unknown error occurred')
@@ -165,7 +167,11 @@ export function useAvailableSlots(options: UseAvailableSlotsOptions = {}): UseAv
 
     const availableDates = useMemo<Date[]>(() => {
         return Object.keys(slotsByDate)
-            .map(dateStr => new Date(dateStr))
+            .map(dateStr => {
+                // Parse as local time, not UTC
+                const [year, month, day] = dateStr.split('-').map(Number)
+                return new Date(year, month - 1, day)
+            })
             .sort((a, b) => a.getTime() - b.getTime())
     }, [slotsByDate])
 

src/hooks/useBookAppointment.ts

@@ -1,9 +1,8 @@
 import { useCallback, useState } from 'react'
-import type { AppointmentLocation, BookingResponse, ClientInfo, TimeSlot } from '../api-types'
+import type { AppointmentLocation, ClientInfo, TimeSlot } from '../api-types'
 import { useTebutoContext } from './TebutoProvider'
 
-type BookingState = {
-    booking: BookingResponse | null
+type BookingRequestState = {
     isLoading: boolean
     error: Error | null
     isSuccess: boolean
@@ -15,61 +14,49 @@ type BookAppointmentParams = {
     locationSelection?: AppointmentLocation
 }
 
-type UseBookAppointmentReturn = BookingState & {
-    /** Book the appointment */
-    book: (params: BookAppointmentParams) => Promise<BookingResponse | null>
-    /** Reset the booking state */
+type UseBookAppointmentReturn = BookingRequestState & {
+    /** Submit booking request - returns true on success */
+    book: (params: BookAppointmentParams) => Promise<boolean>
+    /** Reset the state */
     reset: () => void
-    /** Download the calendar file (.ics) */
-    downloadCalendar: () => void
 }
 
 /**
- * useBookAppointment - Complete the booking process
+ * useBookAppointment - Submit a public booking request
  *
- * Submits the booking with client information and handles
- * the response including calendar download.
+ * Submits a booking request with client information. For public bookings,
+ * the client will receive a confirmation email to verify the appointment.
  *
  * @example
  * ```tsx
- * const { book, booking, isLoading, isSuccess, downloadCalendar, reset } = useBookAppointment()
+ * const { book, isLoading, isSuccess, error, reset } = useBookAppointment()
  *
  * const handleSubmit = async (clientInfo: ClientInfo) => {
- *   const result = await book({
+ *   const success = await book({
  *     slot: claimedSlot,
  *     client: clientInfo,
  *     locationSelection: selectedLocation
  *   })
  *
- *   if (result) {
+ *   if (success) {
  *     setStep('confirmation')
  *   }
  * }
- *
- * if (isSuccess) {
- *   return (
- *     <SuccessMessage>
- *       <button onClick={downloadCalendar}>Add to Calendar</button>
- *       <button onClick={reset}>Book Another</button>
- *     </SuccessMessage>
- *   )
- * }
  * ```
  */
 export function useBookAppointment(): UseBookAppointmentReturn {
     const { therapistUUID, buildUrl, fingerprint } = useTebutoContext()
-    const [state, setState] = useState<BookingState>({
-        booking: null,
+    const [state, setState] = useState<BookingRequestState>({
         isLoading: false,
         error: null,
         isSuccess: false
     })
 
     const book = useCallback(
-        async (params: BookAppointmentParams): Promise<BookingResponse | null> => {
+        async (params: BookAppointmentParams): Promise<boolean> => {
             const { slot, client, locationSelection } = params
 
-            setState(prev => ({ ...prev, isLoading: true, error: null }))
+            setState({ isLoading: true, error: null, isSuccess: false })
 
             try {
                 const response = await fetch(buildUrl(`/events/${therapistUUID}/book`), {
@@ -89,52 +76,33 @@ export function useBookAppointment(): UseBookAppointmentReturn {
                     throw new Error(`Booking failed: ${response.statusText}`)
                 }
 
-                const booking = (await response.json()) as BookingResponse
-
                 setState({
-                    booking,
                     isLoading: false,
                     error: null,
                     isSuccess: true
                 })
 
-                return booking
+                return true
             } catch (err) {
                 const error = err instanceof Error ? err : new Error('Unknown error occurred')
-                setState(prev => ({ ...prev, isLoading: false, error, isSuccess: false }))
-                return null
+                setState({ isLoading: false, error, isSuccess: false })
+                return false
             }
         },
         [therapistUUID, buildUrl, fingerprint]
     )
 
     const reset = useCallback(() => {
         setState({
-            booking: null,
             isLoading: false,
             error: null,
             isSuccess: false
         })
     }, [])
 
-    const downloadCalendar = useCallback(() => {
-        if (!state.booking?.ics) return
-
-        const blob = new Blob([state.booking.ics], { type: 'text/calendar;charset=utf-8' })
-        const url = window.URL.createObjectURL(blob)
-        const link = document.createElement('a')
-        link.href = url
-        link.setAttribute('download', 'appointment.ics')
-        document.body.appendChild(link)
-        link.click()
-        document.body.removeChild(link)
-        window.URL.revokeObjectURL(url)
-    }, [state.booking])
-
     return {
         ...state,
         book,
-        reset,
-        downloadCalendar
+        reset
     }
 }

src/hooks/useBookingFlow.ts

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react'
-import type { AppointmentLocation, BookingResponse, ClientInfo, EnrichedTimeSlot, TimeSlot } from '../api-types'
+import type { AppointmentLocation, ClientInfo, EnrichedTimeSlot, TimeSlot } from '../api-types'
 import { useAvailableSlots } from './useAvailableSlots'
 import { useBookAppointment } from './useBookAppointment'
 import { useClaimSlot } from './useClaimSlot'
@@ -10,8 +10,8 @@ type BookingStep = 'loading' | 'date-selection' | 'time-selection' | 'booking-fo
 type UseBookingFlowOptions = {
     /** Categories to filter by */
     categories?: number[]
-    /** Callback when booking is complete */
-    onBookingComplete?: (booking: BookingResponse) => void
+    /** Callback when booking request is submitted successfully */
+    onBookingComplete?: () => void
     /** Callback on any error */
     onError?: (error: Error) => void
 }
@@ -212,7 +212,7 @@ export function useBookingFlow(options: UseBookingFlowOptions = {}): UseBookingF
                 return false
             }
 
-            onBookingComplete?.(result)
+            onBookingComplete?.()
             setStep('confirmation')
             return true
         },

tsconfig.build.json

@@ -1,9 +1,4 @@
 {
     "extends": "./tsconfig.json",
-    "exclude": [
-        "src/**/*.test.ts",
-        "src/**/*.test.tsx",
-        "src/**/*.stories.ts",
-        "src/**/*.stories.tsx"
-    ]
+    "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx", "src/**/*.stories.ts", "src/**/*.stories.tsx"]
 }