@ossy/booking 1.15.7 → 1.16.0

package/src/availability.page.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, Title, Text, Tags } from '@ossy/design-system'
+import { View, Title, Text, Tags, useLocale } from '@ossy/design-system'
 import { Definition } from './Definition.js'
 import { moduleStatusTags } from './moduleStatus.js'
 import { AvailabilityEditor } from './AvailabilityEditor.jsx'
@@ -12,30 +12,32 @@ export const metadata = {
   },
 }
 
-const AvailabilityPage = () => (
-  <View
-    gap="m"
-    surface="primary"
-    style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}
-  >
-    <View inset="s" gap="s">
-      <View layout="row" gap="s" alignItems="center">
-        <Title>{Definition.title} — Availability</Title>
-        {moduleStatusTags(Definition).length > 0 && (
-          <Tags tags={moduleStatusTags(Definition)} size="s" />
-        )}
-      </View>
+const AvailabilityPage = () => {
+  const { t } = useLocale()
+  return (
+    <View
+      gap="m"
+      surface="primary"
+      style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}
+    >
+      <View inset="s" gap="s">
+        <View layout="row" gap="s" alignItems="center">
+          <Title>{Definition.title} — {t('booking.availability.titleSuffix')}</Title>
+          {moduleStatusTags(Definition).length > 0 && (
+            <Tags tags={moduleStatusTags(Definition)} size="s" />
+          )}
+        </View>
 
-      <Text style={{ maxWidth: '400px' }}>
-        Set your weekly availability. Clients can only book slots within these windows.
-      </Text>
-    </View>
+        <Text style={{ maxWidth: '400px' }}>
+          {t('booking.availability.description')}
+        </Text>
+      </View>
 
-    <View inset="s">
-      {/* TODO: load existing availability via booking.get-availability, save via booking.set-availability */}
-      <AvailabilityEditor availability={[]} />
+      <View inset="s">
+        <AvailabilityEditor availability={[]} />
+      </View>
     </View>
-  </View>
-)
+  )
+}
 
 export default AvailabilityPage

package/src/booking-card.component.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { View, Title, Text, Button, Badge, Alert } from '@ossy/design-system'
+import { View, Title, Text, Button, Badge, Alert, useLocale } from '@ossy/design-system'
 
 export const metadata = { id: 'resource:booking/booking/card' }
 
@@ -9,36 +9,21 @@ const STATUS_VARIANT = {
   cancelled: 'neutral',
 }
 
-const STATUS_LABEL = {
-  pending: 'Väntar',
-  confirmed: 'Bekräftad',
-  cancelled: 'Avbokad',
-}
-
-const SV_MONTHS = [
-  'jan', 'feb', 'mar', 'apr', 'maj', 'jun',
-  'jul', 'aug', 'sep', 'okt', 'nov', 'dec',
-]
-const SV_WEEKDAYS = ['Sön', 'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör']
-
-function formatDateTime (iso) {
+function formatDateTime (iso, t, language) {
   if (!iso) return '—'
   const d = new Date(iso)
-  const weekday = SV_WEEKDAYS[d.getDay()]
-  const day = d.getDate()
-  const month = SV_MONTHS[d.getMonth()]
-  const hh = String(d.getHours()).padStart(2, '0')
-  const mm = String(d.getMinutes()).padStart(2, '0')
+  const locale = language === 'sv' ? 'sv-SE' : 'en-GB'
   try {
-    const tz = new Intl.DateTimeFormat('sv-SE', { timeZoneName: 'short', hour: 'numeric' })
-      .formatToParts(d).find(p => p.type === 'timeZoneName')?.value ?? ''
-    return `${weekday} ${day} ${month} kl. ${hh}:${mm}${tz ? ` (${tz})` : ''}`
+    return new Intl.DateTimeFormat(locale, {
+      weekday: 'short', day: 'numeric', month: 'short',
+      hour: '2-digit', minute: '2-digit', timeZoneName: 'short',
+    }).format(d)
   } catch {
-    return `${weekday} ${day} ${month} kl. ${hh}:${mm}`
+    return d.toLocaleString(locale)
   }
 }
 
-function formatDuration (minutes) {
+function formatDuration (minutes, t) {
   if (!minutes) return '—'
   if (minutes < 60) return `${minutes} min`
   const h = Math.floor(minutes / 60)
@@ -51,21 +36,27 @@ function truncate (text, max = 120) {
   return text.length > max ? `${text.slice(0, max).trimEnd()}…` : text
 }
 
-/** Booking card view — registered at `resource:booking/booking/card`. */
 export function BookingCard ({ booking, resource, onConfirm, onDecline, onCancel, onView }) {
+  const { t, language } = useLocale()
   const data = booking ?? resource?.content ?? resource
   if (!data) return null
 
   const [loadingAction, setLoadingAction] = useState(null)
   const [error, setError] = useState(null)
 
+  const statusLabel = {
+    pending: t('booking.card.status.pending'),
+    confirmed: t('booking.card.status.confirmed'),
+    cancelled: t('booking.card.status.cancelled'),
+  }
+
   const handle = async (actionFn, actionName) => {
     setLoadingAction(actionName)
     setError(null)
     try {
       await actionFn(data)
     } catch (err) {
-      setError(err?.message ?? 'Något gick fel')
+      setError(err?.message ?? t('booking.card.errorGeneric'))
     } finally {
       setLoadingAction(null)
     }
@@ -81,7 +72,7 @@ export function BookingCard ({ booking, resource, onConfirm, onDecline, onCancel
           <View layout="row" gap="s" alignItems="center" style={{ flexWrap: 'wrap' }}>
             <Title variant="tertiary">{data.clientName ?? '—'}</Title>
             <Badge
-              label={STATUS_LABEL[data.status] ?? data.status}
+              label={statusLabel[data.status] ?? data.status}
               variant={STATUS_VARIANT[data.status] ?? 'neutral'}
               size="s"
             />
@@ -91,14 +82,14 @@ export function BookingCard ({ booking, resource, onConfirm, onDecline, onCancel
 
         {onView && (
           <Button variant="link" onClick={() => onView(data)}>
-            Visa →
+            {t('booking.card.view')}
           </Button>
         )}
       </View>
 
       <View layout="row" gap="l" style={{ flexWrap: 'wrap' }}>
-        <Text size="s" color="secondary">{formatDateTime(data.startsAt)}</Text>
-        <Text size="s" color="secondary">{formatDuration(data.duration)}</Text>
+        <Text size="s" color="secondary">{formatDateTime(data.startsAt, t, language)}</Text>
+        <Text size="s" color="secondary">{formatDuration(data.duration, t)}</Text>
       </View>
 
       {data.clientMessage && (
@@ -115,7 +106,7 @@ export function BookingCard ({ booking, resource, onConfirm, onDecline, onCancel
               disabled={loadingAction === 'confirm'}
               onClick={() => handle(onConfirm, 'confirm')}
             >
-              {loadingAction === 'confirm' ? 'Väntar…' : 'Bekräfta'}
+              {loadingAction === 'confirm' ? t('booking.card.waiting') : t('booking.card.confirm')}
             </Button>
           )}
           {isPending && onDecline && (
@@ -124,7 +115,7 @@ export function BookingCard ({ booking, resource, onConfirm, onDecline, onCancel
               disabled={loadingAction === 'decline'}
               onClick={() => handle(onDecline, 'decline')}
             >
-              {loadingAction === 'decline' ? 'Väntar…' : 'Avböj'}
+              {loadingAction === 'decline' ? t('booking.card.waiting') : t('booking.card.decline')}
             </Button>
           )}
           {isConfirmed && onCancel && (
@@ -133,7 +124,7 @@ export function BookingCard ({ booking, resource, onConfirm, onDecline, onCancel
               disabled={loadingAction === 'cancel'}
               onClick={() => handle(onCancel, 'cancel')}
             >
-              {loadingAction === 'cancel' ? 'Väntar…' : 'Avboka'}
+              {loadingAction === 'cancel' ? t('booking.card.waiting') : t('booking.card.cancel')}
             </Button>
           )}
         </View>

package/src/booking-detail.page.jsx

@@ -1,57 +1,30 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
 import { useRouter } from '@ossy/router-react'
-import { View, Title, Text, Button, Badge, Alert, Textarea } from '@ossy/design-system'
+import { View, Title, Text, Button, Badge, Alert, Textarea, useLocale } from '@ossy/design-system'
 
 export const metadata = {
   id: 'booking/booking-detail',
-  path: {
-    sv: '/bokningar/:bookingId',
-    en: '/bookings/:bookingId',
-  },
+  path: { sv: '/bokningar/:bookingId', en: '/bookings/:bookingId' },
 }
 
-const STATUS_VARIANT = {
-  pending: 'warning',
-  confirmed: 'success',
-  cancelled: 'neutral',
-}
-
-const STATUS_LABEL = {
-  pending: 'Väntar på bekräftelse',
-  confirmed: 'Bekräftad',
-  cancelled: 'Avbokad',
-}
-
-const SV_MONTHS = [
-  'januari', 'februari', 'mars', 'april', 'maj', 'juni',
-  'juli', 'augusti', 'september', 'oktober', 'november', 'december',
-]
-const SV_WEEKDAYS = ['Söndag', 'Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag']
+const STATUS_VARIANT = { pending: 'warning', confirmed: 'success', cancelled: 'neutral' }
 
-function formatDateTime (iso) {
+function formatDateTime (iso, language) {
   if (!iso) return '—'
-  const d = new Date(iso)
-  const weekday = SV_WEEKDAYS[d.getDay()]
-  const day = d.getDate()
-  const month = SV_MONTHS[d.getMonth()]
-  const year = d.getFullYear()
-  const hh = String(d.getHours()).padStart(2, '0')
-  const mm = String(d.getMinutes()).padStart(2, '0')
+  const locale = language === 'sv' ? 'sv-SE' : 'en-GB'
   try {
-    const tz = new Intl.DateTimeFormat('sv-SE', { timeZoneName: 'short', hour: 'numeric' })
-      .formatToParts(d).find(p => p.type === 'timeZoneName')?.value ?? ''
-    return `${weekday} ${day} ${month} ${year} kl. ${hh}:${mm}${tz ? ` (${tz})` : ''}`
+    return new Intl.DateTimeFormat(locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit', timeZoneName: 'short' }).format(new Date(iso))
   } catch {
-    return `${weekday} ${day} ${month} ${year} kl. ${hh}:${mm}`
+    return new Date(iso).toLocaleString(locale)
   }
 }
 
-function formatDuration (minutes) {
+function formatDuration (minutes, t) {
   if (!minutes) return '—'
-  if (minutes < 60) return `${minutes} minuter`
+  if (minutes < 60) return t('booking.bookingDetail.durationMinutes', { minutes })
   const h = Math.floor(minutes / 60)
   const m = minutes % 60
-  return m ? `${h} timme ${m} min` : `${h} timme`
+  return m ? t('booking.bookingDetail.durationHoursMinutes', { hours: h, minutes: m }) : t('booking.bookingDetail.durationHours', { hours: h })
 }
 
 function DetailRow ({ label, value }) {
@@ -63,139 +36,69 @@ function DetailRow ({ label, value }) {
   )
 }
 
-function ConfirmForm ({ booking, onSuccess, onError }) {
+function ConfirmForm ({ booking, onSuccess, onError, t }) {
   const [loading, setLoading] = useState(false)
-
   const handleConfirm = async () => {
     setLoading(true)
     try {
-      const res = await fetch('/actions/booking/confirm', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ bookingId: booking.id }),
-      })
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data?.message ?? 'Bekräftning misslyckades')
-      }
+      const res = await fetch('/actions/booking/confirm', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ bookingId: booking.id }) })
+      if (!res.ok) { const data = await res.json().catch(() => ({})); throw new Error(data?.message ?? t('booking.bookingDetail.errorConfirm')) }
       onSuccess()
-    } catch (err) {
-      onError(err.message)
-    } finally {
-      setLoading(false)
-    }
+    } catch (err) { onError(err.message) } finally { setLoading(false) }
   }
-
   return (
     <Button variant="primary" disabled={loading} onClick={handleConfirm}>
-      {loading ? 'Bekräftar…' : 'Bekräfta bokning'}
+      {loading ? t('booking.bookingDetail.confirming') : t('booking.bookingDetail.confirm')}
     </Button>
   )
 }
 
-function DeclineForm ({ booking, onSuccess, onError }) {
+function DeclineForm ({ booking, onSuccess, onError, t }) {
   const [reason, setReason] = useState('')
   const [loading, setLoading] = useState(false)
   const [expanded, setExpanded] = useState(false)
-
   const handleDecline = async () => {
     setLoading(true)
     try {
-      const res = await fetch('/actions/booking/decline', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ bookingId: booking.id, reason: reason.trim() || null }),
-      })
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data?.message ?? 'Avböjning misslyckades')
-      }
+      const res = await fetch('/actions/booking/decline', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ bookingId: booking.id, reason: reason.trim() || null }) })
+      if (!res.ok) { const data = await res.json().catch(() => ({})); throw new Error(data?.message ?? t('booking.bookingDetail.errorDecline')) }
       onSuccess()
-    } catch (err) {
-      onError(err.message)
-    } finally {
-      setLoading(false)
-    }
+    } catch (err) { onError(err.message) } finally { setLoading(false) }
   }
-
-  if (!expanded) {
-    return (
-      <Button variant="danger" onClick={() => setExpanded(true)}>
-        Avböj förfrågan
-      </Button>
-    )
-  }
-
+  if (!expanded) return <Button variant="danger" onClick={() => setExpanded(true)}>{t('booking.bookingDetail.decline')}</Button>
   return (
-    <Alert variant="danger" title="Avböj bokningsförfrågan">
+    <Alert variant="danger" title={t('booking.bookingDetail.declineTitle')}>
       <View gap="s">
-        <Textarea
-          value={reason}
-          onChange={e => setReason(e.target.value)}
-          rows={3}
-          placeholder="T.ex. Tyvärr är den begärda tiden inte längre tillgänglig…"
-        />
-        <Text variant="small" color="secondary">
-          Anledning (valfritt — skickas till klienten)
-        </Text>
+        <Textarea value={reason} onChange={e => setReason(e.target.value)} rows={3} placeholder={t('booking.bookingDetail.declinePlaceholder')} />
+        <Text variant="small" color="secondary">{t('booking.bookingDetail.declineReasonHint')}</Text>
         <View layout="row" gap="s">
-          <Button variant="danger" disabled={loading} onClick={handleDecline}>
-            {loading ? 'Avböjer…' : 'Bekräfta avböjning'}
-          </Button>
-          <Button variant="neutral" onClick={() => setExpanded(false)}>
-            Avbryt
-          </Button>
+          <Button variant="danger" disabled={loading} onClick={handleDecline}>{loading ? t('booking.bookingDetail.declining') : t('booking.bookingDetail.declineConfirm')}</Button>
+          <Button variant="neutral" onClick={() => setExpanded(false)}>{t('booking.bookingDetail.cancelButton')}</Button>
         </View>
       </View>
     </Alert>
   )
 }
 
-function CancelForm ({ booking, onSuccess, onError }) {
+function CancelForm ({ booking, onSuccess, onError, t }) {
   const [loading, setLoading] = useState(false)
   const [expanded, setExpanded] = useState(false)
-
   const handleCancel = async () => {
     setLoading(true)
     try {
-      const res = await fetch('/actions/booking/cancel', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ bookingId: booking.id }),
-      })
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data?.message ?? 'Avbokning misslyckades')
-      }
+      const res = await fetch('/actions/booking/cancel', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ bookingId: booking.id }) })
+      if (!res.ok) { const data = await res.json().catch(() => ({})); throw new Error(data?.message ?? t('booking.bookingDetail.errorCancel')) }
       onSuccess()
-    } catch (err) {
-      onError(err.message)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  if (!expanded) {
-    return (
-      <Button variant="danger" onClick={() => setExpanded(true)}>
-        Avboka möte
-      </Button>
-    )
+    } catch (err) { onError(err.message) } finally { setLoading(false) }
   }
-
+  if (!expanded) return <Button variant="danger" onClick={() => setExpanded(true)}>{t('booking.bookingDetail.cancelMeeting')}</Button>
   return (
-    <Alert variant="danger" title="Avboka bekräftad bokning">
+    <Alert variant="danger" title={t('booking.bookingDetail.cancelTitle')}>
       <View gap="s">
-        <Text color="secondary">
-          Klienten meddelas via e-post. Åtgärden kan inte ångras.
-        </Text>
+        <Text color="secondary">{t('booking.bookingDetail.cancelBody')}</Text>
         <View layout="row" gap="s">
-          <Button variant="danger" disabled={loading} onClick={handleCancel}>
-            {loading ? 'Avbokar…' : 'Bekräfta avbokning'}
-          </Button>
-          <Button variant="neutral" onClick={() => setExpanded(false)}>
-            Avbryt
-          </Button>
+          <Button variant="danger" disabled={loading} onClick={handleCancel}>{loading ? t('booking.bookingDetail.cancelling') : t('booking.bookingDetail.cancelConfirm')}</Button>
+          <Button variant="neutral" onClick={() => setExpanded(false)}>{t('booking.bookingDetail.cancelButton')}</Button>
         </View>
       </View>
     </Alert>
@@ -203,67 +106,42 @@ function CancelForm ({ booking, onSuccess, onError }) {
 }
 
 export default function BookingDetailPage ({ bookingId: bookingIdProp }) {
+  const { t, language } = useLocale()
   const router = useRouter()
   const bookingId = bookingIdProp ?? router?.params?.bookingId
-
   const [booking, setBooking] = useState(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
   const [actionError, setActionError] = useState(null)
 
+  const statusLabel = useMemo(() => ({
+    pending: t('booking.bookingDetail.status.pending'),
+    confirmed: t('booking.bookingDetail.status.confirmed'),
+    cancelled: t('booking.bookingDetail.status.cancelled'),
+  }), [t])
+
   const loadBooking = useCallback(async () => {
     if (!bookingId) return
-    setLoading(true)
-    setError(null)
+    setLoading(true); setError(null)
     try {
-      const res = await fetch('/actions/booking/list', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({}),
-      })
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data?.message ?? `Fel ${res.status}`)
-      }
+      const res = await fetch('/actions/booking/list', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({}) })
+      if (!res.ok) { const data = await res.json().catch(() => ({})); throw new Error(data?.message ?? t('booking.bookingDetail.errorStatus', { status: res.status })) }
       const all = await res.json()
       const found = all.find(b => b.id === bookingId)
-      if (!found) throw new Error('Bokningen hittades inte')
+      if (!found) throw new Error(t('booking.bookingDetail.notFound'))
       setBooking(found)
-    } catch (err) {
-      setError(err.message)
-    } finally {
-      setLoading(false)
-    }
-  }, [bookingId])
+    } catch (err) { setError(err.message) } finally { setLoading(false) }
+  }, [bookingId, t])
 
-  useEffect(() => {
-    loadBooking()
-  }, [loadBooking])
+  useEffect(() => { loadBooking() }, [loadBooking])
 
-  const handleSuccess = () => {
-    setActionError(null)
-    loadBooking()
-  }
-
-  const goBack = () => {
-    if (window.history.length > 1) window.history.back()
-    else window.location.href = '/bokningar'
-  }
+  const goBack = () => { if (window.history.length > 1) window.history.back(); else window.location.href = '/bokningar' }
 
   return (
-    <View
-      gap="m"
-      surface="primary"
-      style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}
-    >
-      <Button variant="link" onClick={goBack}>
-        ← Alla bokningar
-      </Button>
-
+    <View gap="m" surface="primary" style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}>
+      <Button variant="link" onClick={goBack}>{t('booking.bookingDetail.back')}</Button>
       {loading ? (
-        <Text color="secondary" style={{ textAlign: 'center', padding: 'var(--space-l)' }}>
-          Laddar…
-        </Text>
+        <Text color="secondary" style={{ textAlign: 'center', padding: 'var(--space-l)' }}>{t('booking.bookingDetail.loading')}</Text>
       ) : error ? (
         <Alert variant="danger">{error}</Alert>
       ) : booking ? (
@@ -274,18 +152,14 @@ export default function BookingDetailPage ({ bookingId: bookingIdProp }) {
                 <Title variant="secondary">{booking.clientName ?? '—'}</Title>
                 {booking.clientEmail && <Text color="secondary">{booking.clientEmail}</Text>}
               </View>
-              <Badge
-                label={STATUS_LABEL[booking.status] ?? booking.status}
-                variant={STATUS_VARIANT[booking.status] ?? 'neutral'}
-              />
+              <Badge label={statusLabel[booking.status] ?? booking.status} variant={STATUS_VARIANT[booking.status] ?? 'neutral'} />
             </View>
-
             <View gap="s">
-              <DetailRow label="Datum och tid" value={formatDateTime(booking.startsAt)} />
-              <DetailRow label="Längd" value={formatDuration(booking.duration)} />
+              <DetailRow label={t('booking.bookingDetail.label.dateTime')} value={formatDateTime(booking.startsAt, language)} />
+              <DetailRow label={t('booking.bookingDetail.label.duration')} value={formatDuration(booking.duration, t)} />
               {booking.clientMessage && (
                 <View gap="xs">
-                  <Text weight="medium" color="secondary">Meddelande</Text>
+                  <Text weight="medium" color="secondary">{t('booking.bookingDetail.label.message')}</Text>
                   <View surface="primary" roundness="s" inset="s" style={{ borderLeft: '3px solid var(--separator)' }}>
                     <Text style={{ whiteSpace: 'pre-wrap' }}>{booking.clientMessage}</Text>
                   </View>
@@ -293,36 +167,18 @@ export default function BookingDetailPage ({ bookingId: bookingIdProp }) {
               )}
             </View>
           </View>
-
           {(booking.status === 'pending' || booking.status === 'confirmed') && (
             <View gap="s" surface="secondary" roundness="m" inset="l">
-              <Title variant="tertiary">
-                {booking.status === 'pending' ? 'Hantera förfrågan' : 'Hantera bokning'}
-              </Title>
-
+              <Title variant="tertiary">{booking.status === 'pending' ? t('booking.bookingDetail.manageRequest') : t('booking.bookingDetail.manageBooking')}</Title>
               {actionError && <Alert variant="danger">{actionError}</Alert>}
-
               {booking.status === 'pending' && (
                 <View gap="s">
-                  <ConfirmForm
-                    booking={booking}
-                    onSuccess={handleSuccess}
-                    onError={setActionError}
-                  />
-                  <DeclineForm
-                    booking={booking}
-                    onSuccess={handleSuccess}
-                    onError={setActionError}
-                  />
+                  <ConfirmForm booking={booking} onSuccess={() => { setActionError(null); loadBooking() }} onError={setActionError} t={t} />
+                  <DeclineForm booking={booking} onSuccess={() => { setActionError(null); loadBooking() }} onError={setActionError} t={t} />
                 </View>
               )}
-
               {booking.status === 'confirmed' && (
-                <CancelForm
-                  booking={booking}
-                  onSuccess={handleSuccess}
-                  onError={setActionError}
-                />
+                <CancelForm booking={booking} onSuccess={() => { setActionError(null); loadBooking() }} onError={setActionError} t={t} />
               )}
             </View>
           )}

package/src/booking-page.page.jsx

@@ -1,11 +1,10 @@
 import React from 'react'
-import { View, Title, Text } from '@ossy/design-system'
+import { View, Title, Text, useLocale } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
 import { BookingForm } from './BookingForm.jsx'
 
 export const metadata = {
   id: 'booking/book',
-  // Public-facing — no auth required
   public: true,
   path: {
     sv: '/boka/:workspaceId',
@@ -14,6 +13,7 @@ export const metadata = {
 }
 
 const BookingPage = () => {
+  const { t } = useLocale()
   const router = useRouter()
   const { workspaceId } = router.params
 
@@ -24,15 +24,12 @@ const BookingPage = () => {
       inset="s"
       style={{ minHeight: '100dvh' }}
     >
-      <title>Book a session</title>
-
       <View inset="m" roundness="l" surface="primary" slot="content" gap="m">
         <View gap="xs">
-          <Title>Book a session</Title>
-          <Text>Pick a time that works for you and confirm your appointment.</Text>
+          <Title>{t('booking.book.title')}</Title>
+          <Text>{t('booking.book.description')}</Text>
         </View>
 
-        {/* TODO: load services for workspaceId, let client pick one */}
         <BookingForm workspaceId={workspaceId} />
       </View>
     </View>