@ossy/booking 1.15.7 → 1.16.1

package/src/public-booking.page.jsx

@@ -1,22 +1,27 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
 import { useRouter } from '@ossy/router-react'
-import { View, Title, Text, Button, Input, Textarea, Alert } from '@ossy/design-system'
-
-const SV_MONTHS = [
-  'Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni',
-  'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December',
+import { View, Title, Text, Button, Input, Textarea, Alert, useLocale } from '@ossy/design-system'
+import { useSdk } from '@ossy/sdk-react'
+import { metadata as CreateBooking } from './create-booking.action.js'
+import { metadata as GetServices } from './get-services.action.js'
+import { metadata as GetAvailableSlots } from './get-available-slots.action.js'
+import { invokeErrorMessage } from './invoke-error-message.js'
+
+const MONTH_KEYS = [
+  'publicBooking.month.january', 'publicBooking.month.february', 'publicBooking.month.march',
+  'publicBooking.month.april', 'publicBooking.month.may', 'publicBooking.month.june',
+  'publicBooking.month.july', 'publicBooking.month.august', 'publicBooking.month.september',
+  'publicBooking.month.october', 'publicBooking.month.november', 'publicBooking.month.december',
+]
+const WEEKDAY_SHORT_KEYS = [
+  'publicBooking.weekday.sun', 'publicBooking.weekday.mon', 'publicBooking.weekday.tue',
+  'publicBooking.weekday.wed', 'publicBooking.weekday.thu', 'publicBooking.weekday.fri', 'publicBooking.weekday.sat',
 ]
-const SV_WEEKDAYS_SHORT = ['Sön', 'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör']
-const SV_WEEKDAYS_LONG = ['Söndag', 'Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag']
 
-function formatDate (isoString) {
+function formatDate (isoString, t, language) {
   const d = new Date(isoString)
-  const weekday = SV_WEEKDAYS_LONG[d.getDay()]
-  const day = d.getDate()
-  const month = SV_MONTHS[d.getMonth()]
-  const hours = String(d.getHours()).padStart(2, '0')
-  const minutes = String(d.getMinutes()).padStart(2, '0')
-  return `${weekday} ${day} ${month} kl. ${hours}:${minutes}`
+  const locale = language === 'sv' ? 'sv-SE' : 'en-GB'
+  return new Intl.DateTimeFormat(locale, { weekday: 'long', day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit' }).format(d)
 }
 
 function formatTime (isoString) {
@@ -24,20 +29,10 @@ function formatTime (isoString) {
   return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
 }
 
-function getTimezoneLabel (isoString) {
-  try {
-    return new Intl.DateTimeFormat('sv-SE', { timeZoneName: 'short', hour: 'numeric' })
-      .formatToParts(new Date(isoString))
-      .find(p => p.type === 'timeZoneName')?.value ?? ''
-  } catch {
-    return ''
-  }
-}
-
-function formatSlotRange (startIso, durationMinutes) {
+function formatSlotRange (startIso, durationMinutes, language) {
   const start = new Date(startIso)
   const end = new Date(start.getTime() + durationMinutes * 60 * 1000)
-  const tz = getTimezoneLabel(startIso)
+  const tz = new Intl.DateTimeFormat(language === 'sv' ? 'sv-SE' : 'en-GB', { timeZoneName: 'short', hour: 'numeric' }).formatToParts(start).find(p => p.type === 'timeZoneName')?.value ?? ''
   const range = `${formatTime(startIso)}–${formatTime(end.toISOString())}`
   return tz ? `${range} (${tz})` : range
 }
@@ -53,21 +48,14 @@ function groupSlotsByDate (slots) {
   return groups
 }
 
-function getDaysInMonth (year, month) {
-  return new Date(year, month + 1, 0).getDate()
-}
-
-function getFirstDayOfMonth (year, month) {
-  const raw = new Date(year, month, 1).getDay()
-  return (raw + 6) % 7
-}
+function getDaysInMonth (year, month) { return new Date(year, month + 1, 0).getDate() }
+function getFirstDayOfMonth (year, month) { return (new Date(year, month, 1).getDay() + 6) % 7 }
 
-function MonthCalendar ({ year, month, slotsGrouped, selectedDate, onSelectDate, onPrevMonth, onNextMonth }) {
+function MonthCalendar ({ year, month, slotsGrouped, selectedDate, onSelectDate, onPrevMonth, onNextMonth, t }) {
   const daysInMonth = getDaysInMonth(year, month)
   const firstDayOffset = getFirstDayOfMonth(year, month)
   const today = new Date()
   const todayKey = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
-
   const cells = []
   for (let i = 0; i < firstDayOffset; i++) cells.push(null)
   for (let d = 1; d <= daysInMonth; d++) cells.push(d)
@@ -76,38 +64,25 @@ function MonthCalendar ({ year, month, slotsGrouped, selectedDate, onSelectDate,
     <View gap="m">
       <View layout="row" justifyContent="space-between" alignItems="center">
         <Button variant="neutral" onClick={onPrevMonth}>‹</Button>
-        <Text weight="medium">{SV_MONTHS[month]} {year}</Text>
+        <Text weight="medium">{t(MONTH_KEYS[month])} {year}</Text>
         <Button variant="neutral" onClick={onNextMonth}>›</Button>
       </View>
-
       <View layout="row" gap="xs" style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)' }}>
-        {SV_WEEKDAYS_SHORT.map((_, i) => (
-          <Text key={i} variant="small" style={{ textAlign: 'center', opacity: 0.6 }}>
-            {SV_WEEKDAYS_SHORT[(i + 1) % 7]}
-          </Text>
+        {WEEKDAY_SHORT_KEYS.map((key, i) => (
+          <Text key={key} variant="small" style={{ textAlign: 'center', opacity: 0.6 }}>{t(key)}</Text>
         ))}
       </View>
-
       <View gap="xs" style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)' }}>
         {cells.map((day, idx) => {
           if (!day) return <View key={`empty-${idx}`} />
-
           const dateKey = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
           const hasSlots = !!slotsGrouped[dateKey]
           const isSelected = selectedDate === dateKey
           const isPast = dateKey < todayKey
           const disabled = !hasSlots || isPast
-
           return (
-            <Button
-              key={dateKey}
-              variant={isSelected ? 'tab-active' : hasSlots && !isPast ? 'tab' : 'neutral'}
-              disabled={disabled}
-              onClick={() => !disabled && onSelectDate(dateKey)}
-              style={{ padding: '8px 4px', minWidth: 0 }}
-            >
-              {day}
-            </Button>
+            <Button key={dateKey} variant={isSelected ? 'tab-active' : hasSlots && !isPast ? 'tab' : 'neutral'} disabled={disabled}
+              onClick={() => !disabled && onSelectDate(dateKey)} style={{ padding: '8px 4px', minWidth: 0 }}>{day}</Button>
           )
         })}
       </View>
@@ -115,30 +90,21 @@ function MonthCalendar ({ year, month, slotsGrouped, selectedDate, onSelectDate,
   )
 }
 
-function SlotPicker ({ slots, selectedSlot, onSelectSlot }) {
-  if (!slots?.length) {
-    return <Text color="secondary">Inga tillgängliga tider för valt datum.</Text>
-  }
-
+function SlotPicker ({ slots, selectedSlot, onSelectSlot, t, language }) {
+  if (!slots?.length) return <Text color="secondary">{t('publicBooking.noSlots')}</Text>
   return (
     <View layout="row" gap="s" style={{ flexWrap: 'wrap' }}>
-      {slots.map(slot => {
-        const isSelected = selectedSlot?.startAt === slot.startAt
-        return (
-          <Button
-            key={slot.startAt}
-            variant={isSelected ? 'tab-active' : 'tab'}
-            onClick={() => onSelectSlot(slot)}
-          >
-            {formatSlotRange(slot.startAt, slot.duration)}
-          </Button>
-        )
-      })}
+      {slots.map(slot => (
+        <Button key={slot.startAt} variant={selectedSlot?.startAt === slot.startAt ? 'tab-active' : 'tab'} onClick={() => onSelectSlot(slot)}>
+          {formatSlotRange(slot.startAt, slot.duration, language)}
+        </Button>
+      ))}
     </View>
   )
 }
 
-function BookingForm ({ slot, consultantSlug, onSuccess }) {
+function BookingForm ({ slot, service, consultantSlug, onSuccess, t }) {
+  const sdk = useSdk();
   const [clientName, setClientName] = useState('')
   const [clientEmail, setClientEmail] = useState('')
   const [clientMessage, setClientMessage] = useState('')
@@ -148,93 +114,51 @@ function BookingForm ({ slot, consultantSlug, onSuccess }) {
   const handleSubmit = async (e) => {
     e.preventDefault()
     if (!clientName.trim() || !clientEmail.trim()) return
-
-    setSubmitting(true)
-    setError(null)
-
+    setSubmitting(true); setError(null)
     try {
-      const res = await fetch('/actions/booking/create', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          consultantId: consultantSlug,
-          startAt: slot.startAt,
-          duration: slot.duration,
-          clientName: clientName.trim(),
-          clientEmail: clientEmail.trim(),
-          clientMessage: clientMessage.trim(),
-        }),
+      await sdk.invoke(CreateBooking, {
+        consultantId: consultantSlug,
+        startAt: slot.startAt,
+        duration: slot.duration,
+        serviceId: service?.id,
+        clientName: clientName.trim(),
+        clientEmail: clientEmail.trim(),
+        clientMessage: clientMessage.trim(),
       })
-
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data?.message ?? `Bokning misslyckades (${res.status})`)
-      }
-
-      const booking = await res.json()
-      onSuccess(booking)
-    } catch (err) {
-      setError(err.message)
-    } finally {
-      setSubmitting(false)
-    }
+      onSuccess()
+    } catch (err) { setError(await invokeErrorMessage(err, t('publicBooking.form.error', { status: '' }))) } finally { setSubmitting(false) }
   }
 
   return (
     <form onSubmit={handleSubmit}>
       <View gap="m">
-      <View gap="xs">
-        <Text weight="medium">Ditt namn</Text>
-        <Input
-          type="text"
-          required
-          value={clientName}
-          onChange={e => setClientName(e.target.value)}
-          placeholder="Anna Svensson"
-        />
-      </View>
-
-      <View gap="xs">
-        <Text weight="medium">E-postadress</Text>
-        <Input
-          type="email"
-          required
-          value={clientEmail}
-          onChange={e => setClientEmail(e.target.value)}
-          placeholder="anna@exempel.se"
-        />
-      </View>
-
-      <View gap="xs">
-        <Text weight="medium">Meddelande (valfritt)</Text>
-        <Textarea
-          value={clientMessage}
-          onChange={e => setClientMessage(e.target.value)}
-          placeholder="Berätta gärna vad du vill prata om..."
-          rows={3}
-        />
-      </View>
-
-      {error && <Alert variant="danger">{error}</Alert>}
-
-      <Button type="submit" variant="primary" disabled={submitting}>
-        {submitting ? 'Skickar…' : 'Skicka förfrågan'}
-      </Button>
+        <View gap="xs">
+          <Text weight="medium">{t('publicBooking.form.name')}</Text>
+          <Input type="text" required value={clientName} onChange={e => setClientName(e.target.value)} placeholder={t('publicBooking.form.namePlaceholder')} />
+        </View>
+        <View gap="xs">
+          <Text weight="medium">{t('publicBooking.form.email')}</Text>
+          <Input type="email" required value={clientEmail} onChange={e => setClientEmail(e.target.value)} placeholder={t('publicBooking.form.emailPlaceholder')} />
+        </View>
+        <View gap="xs">
+          <Text weight="medium">{t('publicBooking.form.message')}</Text>
+          <Textarea value={clientMessage} onChange={e => setClientMessage(e.target.value)} placeholder={t('publicBooking.form.messagePlaceholder')} rows={3} />
+        </View>
+        {error && <Alert variant="danger">{error}</Alert>}
+        <Button data-action={CreateBooking.id} type="submit" variant="primary" disabled={submitting}>{submitting ? t('publicBooking.form.submitting') : t('publicBooking.form.submit')}</Button>
       </View>
     </form>
   )
 }
 
-function PendingScreen ({ slot }) {
+function PendingScreen ({ slot, t, language }) {
   return (
     <View gap="m" alignItems="center" style={{ textAlign: 'center' }}>
-      <Title variant="secondary">Din förfrågan är skickad!</Title>
-      <Text color="secondary">
-        Konsulten bekräftar inom kort. Du får ett mejl med kalenderinbjudan när bokningen är bekräftad.
-      </Text>
-      <Alert variant="warning" title="Önskad tid">
-        <Text>{formatDate(slot.startAt)}</Text>
-        <Text color="secondary">{slot.duration} minuter</Text>
+      <Title variant="secondary">{t('publicBooking.pending.title')}</Title>
+      <Text color="secondary">{t('publicBooking.pending.body')}</Text>
+      <Alert variant="warning" title={t('publicBooking.pending.requestedTime')}>
+        <Text>{formatDate(slot.startAt, t, language)}</Text>
+        <Text color="secondary">{t('publicBooking.pending.duration', { minutes: slot.duration })}</Text>
       </Alert>
     </View>
   )
@@ -242,141 +166,172 @@ function PendingScreen ({ slot }) {
 
 export const metadata = {
   id: 'public-booking',
+  public: true,
   path: { sv: '/boka/:consultantSlug', en: '/book/:consultantSlug' },
 }
 
-export default function PublicBookingPage ({ consultantSlug, ...props }) {
+function ServicePicker ({ services, selectedService, onSelect, t, language }) {
+  if (!services?.length) {
+    return <Text color="secondary">{t('publicBooking.noServices')}</Text>
+  }
+  const formatPrice = (cents, currency) => {
+    if (!cents) return t('publicBooking.serviceFree')
+    return new Intl.NumberFormat(language === 'sv' ? 'sv-SE' : 'en-GB', { style: 'currency', currency: currency || 'SEK' }).format(cents / 100)
+  }
+  return (
+    <View gap="s">
+      {services.map(service => (
+        <Button
+          key={service.id}
+          variant={selectedService?.id === service.id ? 'tab-active' : 'tab'}
+          onClick={() => onSelect(service)}
+          style={{ justifyContent: 'flex-start', textAlign: 'left' }}
+        >
+          <View gap="xs">
+            <Text weight="medium">{service.name}</Text>
+            <Text size="s" color="secondary">
+              {t('publicBooking.serviceMeta', { duration: service.duration, price: formatPrice(service.price, service.currency) })}
+            </Text>
+          </View>
+        </Button>
+      ))}
+    </View>
+  )
+}
+
+export default function PublicBookingPage ({ consultantSlug }) {
+  const { t, language } = useLocale()
+  const sdk = useSdk()
   const router = useRouter()
   const slug = consultantSlug ?? router?.params?.consultantSlug
-
   const today = new Date()
+  const [services, setServices] = useState([])
+  const [loadingServices, setLoadingServices] = useState(true)
+  const [servicesError, setServicesError] = useState(null)
+  const [selectedService, setSelectedService] = useState(null)
   const [calYear, setCalYear] = useState(today.getFullYear())
   const [calMonth, setCalMonth] = useState(today.getMonth())
-
   const [slots, setSlots] = useState([])
-  const [loadingSlots, setLoadingSlots] = useState(true)
+  const [loadingSlots, setLoadingSlots] = useState(false)
   const [slotsError, setSlotsError] = useState(null)
-
   const [selectedDate, setSelectedDate] = useState(null)
   const [selectedSlot, setSelectedSlot] = useState(null)
-  const [step, setStep] = useState('pick-slot')
+  const [step, setStep] = useState('pick-service')
 
   useEffect(() => {
     if (!slug) return
+    setLoadingServices(true)
+    setServicesError(null)
+    sdk.invoke(GetServices, { consultantId: slug })
+      .then(data => {
+        const list = Array.isArray(data) ? data : []
+        setServices(list)
+        if (list.length === 1) setSelectedService(list[0])
+        setLoadingServices(false)
+      })
+      .catch(() => { setServicesError(t('publicBooking.servicesError')); setLoadingServices(false) })
+  }, [slug, sdk, t])
 
-    setLoadingSlots(true)
-    setSlotsError(null)
-
+  useEffect(() => {
+    if (!slug || !selectedService || step === 'pick-service') return
+    setLoadingSlots(true); setSlotsError(null)
     const from = new Date().toISOString()
     const to = new Date(Date.now() + 60 * 24 * 60 * 60 * 1000).toISOString()
-
-    fetch(`/actions/booking/get-available-slots?consultantId=${encodeURIComponent(slug)}&from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`)
-      .then(r => r.ok ? r.json() : Promise.reject(r))
+    sdk.invoke(GetAvailableSlots, {
+      consultantId: slug,
+      serviceId: selectedService.id,
+      from,
+      to,
+    })
       .then(data => { setSlots(data); setLoadingSlots(false) })
-      .catch(() => { setSlotsError('Kunde inte ladda tillgängliga tider.'); setLoadingSlots(false) })
-  }, [slug])
+      .catch(() => { setSlotsError(t('publicBooking.slotsError')); setLoadingSlots(false) })
+  }, [slug, selectedService, step, sdk, t])
 
   const slotsGrouped = groupSlotsByDate(slots)
   const selectedDateSlots = selectedDate ? (slotsGrouped[selectedDate] ?? []) : []
 
-  const handlePrevMonth = () => {
-    if (calMonth === 0) { setCalMonth(11); setCalYear(y => y - 1) }
-    else setCalMonth(m => m - 1)
-  }
-
-  const handleNextMonth = () => {
-    if (calMonth === 11) { setCalMonth(0); setCalYear(y => y + 1) }
-    else setCalMonth(m => m + 1)
-  }
-
   return (
-    <View
-      surface="base"
-      layout="off-center-s"
-      inset="s"
-      style={{ minHeight: '100dvh' }}
-    >
+    <View surface="base" layout="off-center-s" inset="s" style={{ minHeight: '100dvh' }}>
       <View inset="m" roundness="l" surface="primary" slot="content" gap="l" style={{ maxWidth: 720, width: '100%' }}>
         <View gap="xs" style={{ borderBottom: '1px solid var(--separator)', paddingBottom: 'var(--space-m)' }}>
-          <Title variant="secondary">Boka en tid</Title>
-          <Text color="secondary">Välj ett datum och en tid som passar dig.</Text>
+          <Title variant="secondary">{t('publicBooking.title')}</Title>
+          <Text color="secondary">{t('publicBooking.description')}</Text>
         </View>
-
         {step === 'confirmed' && selectedSlot ? (
-          <PendingScreen slot={selectedSlot} />
+          <PendingScreen slot={selectedSlot} t={t} language={language} />
         ) : step === 'fill-form' && selectedSlot ? (
           <View gap="m">
-            <Button variant="link" onClick={() => setStep('pick-slot')}>
-              ← Tillbaka
-            </Button>
-
+            <Button variant="link" onClick={() => setStep('pick-slot')}>{t('publicBooking.back')}</Button>
+            {selectedService && (
+              <View surface="secondary" roundness="m" inset="s">
+                <Text weight="medium">{selectedService.name}</Text>
+                <Text color="secondary">{t('publicBooking.durationMin', { minutes: selectedService.duration })}</Text>
+              </View>
+            )}
             <View surface="secondary" roundness="m" inset="s">
-              <Text weight="medium">Vald tid: {formatDate(selectedSlot.startAt)}</Text>
-              <Text color="secondary">({selectedSlot.duration} min)</Text>
+              <Text weight="medium">{t('publicBooking.selectedTime', { datetime: formatDate(selectedSlot.startAt, t, language) })}</Text>
+              <Text color="secondary">{t('publicBooking.durationMin', { minutes: selectedSlot.duration })}</Text>
             </View>
-
-            <BookingForm
-              slot={selectedSlot}
-              consultantSlug={slug}
-              onSuccess={() => setStep('confirmed')}
-            />
+            <BookingForm slot={selectedSlot} service={selectedService} consultantSlug={slug} onSuccess={() => setStep('confirmed')} t={t} />
           </View>
-        ) : (
-          <View gap="l" layout="row" style={{ flexWrap: 'wrap' }}>
-            <View style={{ flex: 1, minWidth: 260 }}>
-              {loadingSlots ? (
-                <Text color="secondary" style={{ textAlign: 'center', padding: 'var(--space-l)' }}>
-                  Laddar tider…
-                </Text>
-              ) : slotsError ? (
-                <Alert variant="danger">{slotsError}</Alert>
-              ) : (
-                <MonthCalendar
-                  year={calYear}
-                  month={calMonth}
-                  slotsGrouped={slotsGrouped}
-                  selectedDate={selectedDate}
-                  onSelectDate={(dateKey) => {
-                    setSelectedDate(dateKey)
-                    setSelectedSlot(null)
-                  }}
-                  onPrevMonth={handlePrevMonth}
-                  onNextMonth={handleNextMonth}
-                />
-              )}
+        ) : step === 'pick-slot' && selectedService ? (
+          <View gap="m">
+            <Button variant="link" onClick={() => { setStep('pick-service'); setSelectedSlot(null); setSelectedDate(null) }}>{t('publicBooking.back')}</Button>
+            <View surface="secondary" roundness="m" inset="s">
+              <Text weight="medium">{selectedService.name}</Text>
+              <Text color="secondary">{t('publicBooking.durationMin', { minutes: selectedService.duration })}</Text>
             </View>
-
-            <View gap="m" style={{ flex: 1, minWidth: 260 }}>
-              {selectedDate ? (
-                <>
-                  <Title variant="tertiary">
-                    {(() => {
-                      const [y, m, d] = selectedDate.split('-').map(Number)
-                      return `${d} ${SV_MONTHS[m - 1]} ${y}`
-                    })()}
-                  </Title>
-
-                  <SlotPicker
-                    slots={selectedDateSlots}
-                    selectedSlot={selectedSlot}
-                    onSelectSlot={setSelectedSlot}
-                  />
-
-                  {selectedSlot && (
-                    <Button variant="primary" onClick={() => setStep('fill-form')}>
-                      Fortsätt →
-                    </Button>
-                  )}
-                </>
-              ) : (
-                <View gap="s" alignItems="center" justifyContent="center" inset="l" style={{ minHeight: 180 }}>
-                  <Text color="secondary" style={{ textAlign: 'center' }}>
-                    Välj ett markerat datum i kalendern
-                  </Text>
-                </View>
-              )}
+            <View gap="l" layout="row" style={{ flexWrap: 'wrap' }}>
+              <View style={{ flex: 1, minWidth: 260 }}>
+                {loadingSlots ? (
+                  <Text color="secondary" style={{ textAlign: 'center', padding: 'var(--space-l)' }}>{t('publicBooking.loadingSlots')}</Text>
+                ) : slotsError ? (
+                  <Alert variant="danger">{slotsError}</Alert>
+                ) : (
+                  <MonthCalendar year={calYear} month={calMonth} slotsGrouped={slotsGrouped} selectedDate={selectedDate}
+                    onSelectDate={(dateKey) => { setSelectedDate(dateKey); setSelectedSlot(null) }}
+                    onPrevMonth={() => { if (calMonth === 0) { setCalMonth(11); setCalYear(y => y - 1) } else setCalMonth(m => m - 1) }}
+                    onNextMonth={() => { if (calMonth === 11) { setCalMonth(0); setCalYear(y => y + 1) } else setCalMonth(m => m + 1) }}
+                    t={t} />
+                )}
+              </View>
+              <View gap="m" style={{ flex: 1, minWidth: 260 }}>
+                {selectedDate ? (
+                  <>
+                    <Title variant="tertiary">
+                      {(() => { const [y, m, d] = selectedDate.split('-').map(Number); return `${d} ${t(MONTH_KEYS[m - 1])} ${y}` })()}
+                    </Title>
+                    <SlotPicker slots={selectedDateSlots} selectedSlot={selectedSlot} onSelectSlot={setSelectedSlot} t={t} language={language} />
+                    {selectedSlot && <Button variant="primary" onClick={() => setStep('fill-form')}>{t('publicBooking.continue')}</Button>}
+                  </>
+                ) : (
+                  <View gap="s" alignItems="center" justifyContent="center" inset="l" style={{ minHeight: 180 }}>
+                    <Text color="secondary" style={{ textAlign: 'center' }}>{t('publicBooking.pickDate')}</Text>
+                  </View>
+                )}
+              </View>
             </View>
           </View>
+        ) : (
+          <View gap="m">
+            <Title variant="tertiary">{t('publicBooking.chooseService')}</Title>
+            {loadingServices ? (
+              <Text color="secondary">{t('publicBooking.loadingServices')}</Text>
+            ) : servicesError ? (
+              <Alert variant="danger">{servicesError}</Alert>
+            ) : (
+              <ServicePicker
+                services={services}
+                selectedService={selectedService}
+                onSelect={setSelectedService}
+                t={t}
+                language={language}
+              />
+            )}
+            {selectedService && (
+              <Button variant="primary" onClick={() => setStep('pick-slot')}>{t('publicBooking.continue')}</Button>
+            )}
+          </View>
         )}
       </View>
     </View>

package/src/save-availability.action.js

@@ -1,73 +1 @@
-import { nanoid } from 'nanoid'
-import { Aggregate } from '@ossy/event-store'
-import { Resource, ResourcesEvents, ResourcesQueries } from '@ossy/resources'
-
-export const id = 'booking/save-availability'
-export const access = 'workspace'
-
-export async function run({ payload, req, log }) {
-  const workspaceId = req?.workspaceId
-
-  if (!workspaceId) {
-    throw Object.assign(new Error('workspaceId is required'), { status: 400 })
-  }
-
-  const { weeklyWindows, sessionDurations, bufferMinutes, timezone } = payload ?? {}
-
-  log?.info(`[booking/save-availability] Saving availability for workspace ${workspaceId}`)
-
-  const content = {
-    weeklyWindows: weeklyWindows ?? [],
-    sessionDurations: Array.isArray(sessionDurations) && sessionDurations.length
-      ? sessionDurations
-      : [60],
-    bufferMinutes: bufferMinutes ?? 0,
-    timezone: timezone ?? 'Europe/Stockholm',
-  }
-
-  // Check if a config resource already exists for this workspace
-  const existing = await ResourcesQueries.GetResources({
-    type: '@ossy/booking/availability',
-    belongsTo: workspaceId,
-  })
-
-  // Identify the single config resource (new format has weeklyWindows array in content)
-  const configResource = existing.find(r => Array.isArray(r.content?.weeklyWindows))
-
-  if (configResource) {
-    log?.info(`[booking/save-availability] Updating existing resource ${configResource.id}`)
-
-    await Aggregate.Of(Resource, configResource.id)
-      .then(
-        Aggregate.Add(
-          ResourcesEvents.ContentUpdated({
-            createdBy: req?.userId ?? 'system',
-            content,
-          }),
-        ),
-      )
-      .then(Aggregate.Save())
-
-    return { id: configResource.id, content }
-  }
-
-  // No config resource found — create a new one
-  const resourceId = nanoid()
-  log?.info(`[booking/save-availability] Creating new resource ${resourceId}`)
-
-  const event = ResourcesEvents.Created({
-    aggregateId: resourceId,
-    type: '@ossy/booking/availability',
-    createdBy: req?.userId ?? 'system',
-    belongsTo: workspaceId,
-    location: '/availability/',
-    name: `availability-config.json`,
-    content,
-  })
-
-  await Aggregate.Of(Resource, event).then(Aggregate.View())
-
-  log?.info(`[booking/save-availability] Resource ${resourceId} created`)
-
-  return { id: resourceId, content }
-}
+export const metadata = { id: 'booking/save-availability', access: 'workspace' }