@ossy/booking 1.15.7 → 1.16.1

package/README.md

@@ -1,39 +1,46 @@
 # @ossy/booking
 
-Booking feature package for the Ossy platform. Lets consultants define services, set weekly availability, and accept client bookings with optional Stripe payment.
+Booking feature package for the Ossy platform. Lets consultants define services, set weekly availability, and accept client bookings.
 
 ## Pages
 
 | Page | Path | Audience |
 |------|------|----------|
-| `booking-page` | `/book/:workspaceId` | Public (clients) |
-| `services` | `/services` | Consultant (authenticated) |
-| `bookings` | `/bookings` | Consultant (authenticated) |
-| `availability` | `/availability` | Consultant (authenticated) |
+| `public-booking` | `/book/:consultantSlug` · `/boka/:consultantSlug` | Public (clients) |
+| `services` | `/services` · `/tjanster` | Consultant (authenticated) |
+| `bookings` | `/bookings` · `/bokningar` | Consultant (authenticated) |
+| `availability-setup` | `/availability` · `/tillganglighet` | Consultant (authenticated) |
+| `booking-detail` | `/bookings/:bookingId` · `/bokningar/:bookingId` | Consultant (authenticated) |
+
+## Public booking flow
+
+1. Client opens `public-booking` (no auth; `metadata.public: true`)
+2. Picks a service → calendar slot → contact details
+3. `booking/create` stores a pending booking and sends notification emails
+
+## Service actions
+
+| Action | Access |
+|--------|--------|
+| `booking/get-services` | public |
+| `booking/create-service` | workspace |
+| `booking/update-service` | workspace |
+| `booking/delete-service` | workspace |
 
 ## Resource templates
 
-Three resource schemas are registered under the `@ossy/booking` category:
+- `@ossy/booking/service` — what a consultant sells (`/@ossy/booking/services/`)
+- `@ossy/booking/booking` — an appointment (`/@ossy/booking/bookings/`)
+- `@ossy/booking/availability` — weekly availability config (`/@ossy/booking/availability/`)
 
-- `@ossy/booking/service` — what a consultant sells
-- `@ossy/booking/booking` — a confirmed appointment
-- `@ossy/booking/availability` — recurring weekly availability window
+Import locations from `@ossy/booking` (`services`, `bookings`, `availability`).
 
 ## Resource view slots
 
-Register custom UI for resource types via `*.component.jsx` with `metadata.id` matching the slot key (see `@ossy/design-system` [SLOTS.md](../design-system/docs/SLOTS.md)):
-
 | Component | Slot key |
 |-----------|----------|
 | `service-detail.component.jsx` | `resource:booking/service/detail` |
 | `service-card-slot.component.jsx` | `resource:booking/service/card` |
 | `booking-card.component.jsx` | `resource:booking/booking/card` |
 
-Dedicated pages (`services.page.jsx`, `booking-detail.page.jsx`, etc.) continue to work alongside generic `@ossy/resources` slot hosts.
-
-## What still needs implementation
-
-- **Slot generation** — derive available time slots from `availability` records minus existing `booking` records
-- **Stripe integration** — create a PaymentIntent on booking submit, webhook to flip `paymentStatus`
-- **Confirmation emails** — `booking.send-confirmation-email` task
-- **Public workspace resolution** — resolve `workspaceId` param on the public booking page without auth
+See [SPEC.md](./SPEC.md) for the full product specification.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/booking",
   "description": "Booking feature package — services, availability, and appointment management for Ossy consultants",
-  "version": "1.15.7",
+  "version": "1.16.1",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
@@ -14,11 +14,11 @@
     "src": "./src"
   },
   "dependencies": {
-    "@ossy/email": "^1.5.7",
-    "@ossy/event-store": "^1.7.7",
-    "@ossy/observability": "^1.7.7",
-    "@ossy/platform": "^1.38.7",
-    "@ossy/resources": "^1.11.7"
+    "@ossy/email": "^1.6.1",
+    "@ossy/event-store": "^1.8.1",
+    "@ossy/observability": "^1.8.1",
+    "@ossy/platform": "^1.39.1",
+    "@ossy/resources": "^1.12.1"
   },
   "peerDependencies": {
     "@ossy/design-system": ">=1.0.0",
@@ -34,5 +34,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "f65df0cd6da864c314c4f424112e05e8e2dec0ff"
+  "gitHead": "c0ba5d90749690634e4dc2705178ff8d89dd3070"
 }

package/src/AvailabilityEditor.jsx

@@ -1,12 +1,10 @@
-import React, { useState } from 'react'
-import { View, Title, Text, Button, Input } from '@ossy/design-system'
-
-const DAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+import React, { useState, useMemo } from 'react'
+import { View, Text, Button, Input, useLocale } from '@ossy/design-system'
 
 const DEFAULT_WINDOW = { enabled: false, startTime: '09:00', endTime: '17:00', bufferMinutes: 0 }
 
 const buildInitialState = (availability = []) => {
-  const state = DAY_LABELS.map(() => ({ ...DEFAULT_WINDOW }))
+  const state = Array.from({ length: 7 }, () => ({ ...DEFAULT_WINDOW }))
   for (const window of availability) {
     if (window.dayOfWeek >= 0 && window.dayOfWeek <= 6) {
       state[window.dayOfWeek] = {
@@ -21,8 +19,19 @@ const buildInitialState = (availability = []) => {
 }
 
 export const AvailabilityEditor = ({ availability = [], onSave }) => {
+  const { t } = useLocale()
   const [days, setDays] = useState(() => buildInitialState(availability))
 
+  const dayKeys = useMemo(() => [
+    'booking.availabilityEditor.day.sun',
+    'booking.availabilityEditor.day.mon',
+    'booking.availabilityEditor.day.tue',
+    'booking.availabilityEditor.day.wed',
+    'booking.availabilityEditor.day.thu',
+    'booking.availabilityEditor.day.fri',
+    'booking.availabilityEditor.day.sat',
+  ], [])
+
   const update = (idx, patch) =>
     setDays((prev) => prev.map((d, i) => (i === idx ? { ...d, ...patch } : d)))
 
@@ -37,16 +46,15 @@ export const AvailabilityEditor = ({ availability = [], onSave }) => {
         bufferMinutes: Number(bufferMinutes),
       }))
 
-    // TODO: dispatch booking.set-availability action with `windows`
     onSave?.(windows)
   }
 
   return (
     <View gap="m">
       <View gap="s">
-        {DAY_LABELS.map((label, idx) => (
+        {dayKeys.map((key, idx) => (
           <View
-            key={label}
+            key={key}
             layout="row"
             gap="m"
             alignItems="center"
@@ -62,7 +70,7 @@ export const AvailabilityEditor = ({ availability = [], onSave }) => {
                 style={{ width: 16, height: 16, accentColor: 'var(--color-accent)' }}
               />
             </label>
-            <Text weight="medium" style={{ width: '2.5rem', flexShrink: 0 }}>{label}</Text>
+            <Text weight="medium" style={{ width: '2.5rem', flexShrink: 0 }}>{t(key)}</Text>
 
             {days[idx].enabled ? (
               <View layout="row" gap="s" alignItems="center" style={{ flex: 1 }}>
@@ -72,14 +80,14 @@ export const AvailabilityEditor = ({ availability = [], onSave }) => {
                   onChange={(v) => update(idx, { startTime: v })}
                   size="s"
                 />
-                <Text color="secondary">to</Text>
+                <Text color="secondary">{t('booking.availabilityEditor.to')}</Text>
                 <Input
                   type="time"
                   value={days[idx].endTime}
                   onChange={(v) => update(idx, { endTime: v })}
                   size="s"
                 />
-                <Text color="secondary" size="s">Buffer</Text>
+                <Text color="secondary" size="s">{t('booking.availabilityEditor.buffer')}</Text>
                 <Input
                   type="number"
                   value={String(days[idx].bufferMinutes)}
@@ -87,17 +95,16 @@ export const AvailabilityEditor = ({ availability = [], onSave }) => {
                   size="s"
                   style={{ width: '4rem' }}
                 />
-                <Text color="secondary" size="s">min</Text>
+                <Text color="secondary" size="s">{t('booking.availabilityEditor.min')}</Text>
               </View>
             ) : (
-              <Text color="secondary" size="s">Unavailable</Text>
+              <Text color="secondary" size="s">{t('booking.availabilityEditor.unavailable')}</Text>
             )}
           </View>
         ))}
       </View>
 
-      {/* TODO: wire to booking.set-availability action */}
-      <Button variant="primary" onClick={handleSave}>Save availability</Button>
+      <Button variant="primary" onClick={handleSave}>{t('booking.availabilityEditor.save')}</Button>
     </View>
   )
 }

package/src/Definition.js

@@ -2,28 +2,6 @@ export const Definition = {
   id: 'booking',
   title: 'Booking',
   description: 'Services, availability windows, and client appointment management for consultants.',
-  module: {
-    id: 'booking',
-    enabled: true,
-  },
+  icon: 'calendar',
   statuses: ['beta'],
-  actions: [
-    'booking.create-service',
-    'booking.update-service',
-    'booking.delete-service',
-    'booking.create-booking',
-    'booking.confirm-booking',
-    'booking.cancel-booking',
-    'booking.set-availability',
-  ],
-  views: [
-    'booking.get-services',
-    'booking.get-bookings',
-    'booking.get-availability',
-    'booking.get-available-slots',
-  ],
-  tasks: [
-    'booking.send-confirmation-email',
-    'booking.sync-stripe-payment-status',
-  ],
 }

package/src/SalesSection.jsx

@@ -6,20 +6,24 @@ import {
   Icon,
   PageSection,
   MarkdownViewer,
+  useLocale,
 } from '@ossy/design-system'
 import { HeroCover } from './HeroCover.jsx'
 
 export default ({
   cover,
   features,
-}) => (
+}) => {
+  const { t } = useLocale()
+
+  return (
   <PageSection maxWidth="xl" gap="l">
     <View gap="l" surface="primary" style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}>
       <HeroCover {...cover} />
 
       <View gap="m" inset="s">
         <Title variant="secondary">
-          Översikt
+          {t('booking.sales.overview')}
         </Title>
 
         <View gap="m" layout="row-wrap">
@@ -47,7 +51,7 @@ export default ({
 
       <View gap="m" inset="s">
         <Title variant="secondary">
-          Funktioner
+          {t('booking.sales.features')}
         </Title>
 
         {features.map(x => (
@@ -69,4 +73,5 @@ export default ({
       </View>
     </View>
   </PageSection>
-)
+  )
+}

package/src/availability-setup.page.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
 import {
   View,
   Title,
@@ -7,23 +7,19 @@ import {
   Input,
   Select,
   Alert,
+  useLocale,
 } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+import { useSdk } from '@ossy/sdk-react'
+import { metadata as SaveAvailability } from './save-availability.action.js'
+import { metadata as GetAvailability } from './get-availability.action.js'
+import { invokeErrorMessage } from './invoke-error-message.js'
 
 export const metadata = {
   id: 'booking/availability-setup',
   path: { sv: '/tillganglighet', en: '/availability' },
 }
 
-const DAYS = [
-  { label: 'Måndag', dayOfWeek: 1 },
-  { label: 'Tisdag', dayOfWeek: 2 },
-  { label: 'Onsdag', dayOfWeek: 3 },
-  { label: 'Torsdag', dayOfWeek: 4 },
-  { label: 'Fredag', dayOfWeek: 5 },
-  { label: 'Lördag', dayOfWeek: 6 },
-  { label: 'Söndag', dayOfWeek: 0 },
-]
-
 const SESSION_DURATIONS = [30, 60, 90]
 const BUFFER_OPTIONS = [0, 15, 30]
 const TIMEZONE_OPTIONS = [
@@ -45,15 +41,22 @@ function buildDayState (weeklyWindows = []) {
       endTime: w.endTime ?? '17:00',
     }
   }
-  return Object.fromEntries(
-    DAYS.map(d => [
-      d.dayOfWeek,
-      byDay[d.dayOfWeek] ?? { enabled: false, startTime: '09:00', endTime: '17:00' },
-    ]),
-  )
+  const dayOrder = [
+    { dayOfWeek: 1, key: 'booking.availabilitySetup.day.monday' },
+    { dayOfWeek: 2, key: 'booking.availabilitySetup.day.tuesday' },
+    { dayOfWeek: 3, key: 'booking.availabilitySetup.day.wednesday' },
+    { dayOfWeek: 4, key: 'booking.availabilitySetup.day.thursday' },
+    { dayOfWeek: 5, key: 'booking.availabilitySetup.day.friday' },
+    { dayOfWeek: 6, key: 'booking.availabilitySetup.day.saturday' },
+    { dayOfWeek: 0, key: 'booking.availabilitySetup.day.sunday' },
+  ]
+  return dayOrder.map(({ dayOfWeek }) => ({
+    dayOfWeek,
+    ...(byDay[dayOfWeek] ?? { enabled: false, startTime: '09:00', endTime: '17:00' }),
+  }))
 }
 
-function DayRow ({ label, day, onToggle, onTimeChange }) {
+function DayRow ({ label, day, onToggle, onTimeChange, t }) {
   return (
     <View
       layout="row"
@@ -76,26 +79,31 @@ function DayRow ({ label, day, onToggle, onTimeChange }) {
 
       {day.enabled ? (
         <View layout="row" gap="s" alignItems="center" style={{ flex: 1, flexWrap: 'wrap' }}>
-          <Input
-            type="time"
-            value={day.startTime}
-            onChange={e => onTimeChange('startTime', e.target.value)}
-          />
+          <Input type="time" value={day.startTime} onChange={e => onTimeChange('startTime', e.target.value)} />
           <Text color="secondary">–</Text>
-          <Input
-            type="time"
-            value={day.endTime}
-            onChange={e => onTimeChange('endTime', e.target.value)}
-          />
+          <Input type="time" value={day.endTime} onChange={e => onTimeChange('endTime', e.target.value)} />
         </View>
       ) : (
-        <Text color="secondary" size="s">Inte tillgänglig</Text>
+        <Text color="secondary" size="s">{t('booking.availabilitySetup.unavailable')}</Text>
       )}
     </View>
   )
 }
 
 export default function AvailabilitySetupPage ({ workspaceId }) {
+  const { t } = useLocale()
+  const sdk = useSdk()
+  const router = useRouter()
+  const dayDefs = useMemo(() => [
+    { dayOfWeek: 1, key: 'booking.availabilitySetup.day.monday' },
+    { dayOfWeek: 2, key: 'booking.availabilitySetup.day.tuesday' },
+    { dayOfWeek: 3, key: 'booking.availabilitySetup.day.wednesday' },
+    { dayOfWeek: 4, key: 'booking.availabilitySetup.day.thursday' },
+    { dayOfWeek: 5, key: 'booking.availabilitySetup.day.friday' },
+    { dayOfWeek: 6, key: 'booking.availabilitySetup.day.saturday' },
+    { dayOfWeek: 0, key: 'booking.availabilitySetup.day.sunday' },
+  ], [])
+
   const [dayState, setDayState] = useState(() => buildDayState())
   const [sessionDurations, setSessionDurations] = useState([60])
   const [bufferMinutes, setBufferMinutes] = useState(0)
@@ -106,11 +114,15 @@ export default function AvailabilitySetupPage ({ workspaceId }) {
   const [error, setError] = useState(null)
   const [copied, setCopied] = useState(false)
 
-  const bookingUrl = `https://ossy.se/boka/${workspaceId ?? ''}`
+  const bookingPath = workspaceId
+    ? router.getHref({ id: 'public-booking', params: { consultantSlug: workspaceId } })
+    : ''
+  const bookingUrl = typeof window !== 'undefined' && bookingPath
+    ? `${window.location.origin}${bookingPath}`
+    : bookingPath
 
   useEffect(() => {
-    fetch('/actions/booking/get-availability')
-      .then(r => (r.ok ? r.json() : null))
+    sdk.invoke(GetAvailability, {})
       .then(data => {
         if (data) {
           setDayState(buildDayState(data.weeklyWindows ?? []))
@@ -126,21 +138,17 @@ export default function AvailabilitySetupPage ({ workspaceId }) {
       })
       .catch(() => {})
       .finally(() => setLoading(false))
-  }, [])
+  }, [sdk])
 
   const toggleDay = (dayOfWeek) => {
-    setDayState(prev => ({
-      ...prev,
-      [dayOfWeek]: { ...prev[dayOfWeek], enabled: !prev[dayOfWeek].enabled },
-    }))
+    setDayState(prev => prev.map(d => d.dayOfWeek === dayOfWeek
+      ? { ...d, enabled: !d.enabled }
+      : d))
     setSaved(false)
   }
 
   const updateDayTime = (dayOfWeek, field, value) => {
-    setDayState(prev => ({
-      ...prev,
-      [dayOfWeek]: { ...prev[dayOfWeek], [field]: value },
-    }))
+    setDayState(prev => prev.map(d => d.dayOfWeek === dayOfWeek ? { ...d, [field]: value } : d))
     setSaved(false)
   }
 
@@ -159,27 +167,15 @@ export default function AvailabilitySetupPage ({ workspaceId }) {
     setSaving(true)
     setError(null)
 
-    const weeklyWindows = DAYS.filter(d => dayState[d.dayOfWeek]?.enabled).map(d => ({
-      dayOfWeek: d.dayOfWeek,
-      startTime: dayState[d.dayOfWeek].startTime,
-      endTime: dayState[d.dayOfWeek].endTime,
+    const weeklyWindows = dayState.filter(d => d.enabled).map(({ dayOfWeek, startTime, endTime }) => ({
+      dayOfWeek, startTime, endTime,
     }))
 
     try {
-      const res = await fetch('/actions/booking/save-availability', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ weeklyWindows, sessionDurations, bufferMinutes, timezone }),
-      })
-
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data?.message ?? `Kunde inte spara (${res.status})`)
-      }
-
+      await sdk.invoke(SaveAvailability, { weeklyWindows, sessionDurations, bufferMinutes, timezone })
       setSaved(true)
     } catch (err) {
-      setError(err.message)
+      setError(await invokeErrorMessage(err, t('booking.availabilitySetup.errorSave', { status: '' })))
     } finally {
       setSaving(false)
     }
@@ -195,7 +191,7 @@ export default function AvailabilitySetupPage ({ workspaceId }) {
   if (loading) {
     return (
       <View surface="primary" inset="l" style={{ height: '100%', overflowY: 'auto' }}>
-        <Text color="secondary">Laddar…</Text>
+        <Text color="secondary">{t('booking.availabilitySetup.loading')}</Text>
       </View>
     )
   }
@@ -207,114 +203,86 @@ export default function AvailabilitySetupPage ({ workspaceId }) {
       style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto', maxWidth: 620 }}
     >
       <View inset="s" gap="xs">
-        <Title variant="secondary">Tillgänglighet</Title>
-        <Text style={{ maxWidth: 480 }}>
-          Ange när du är tillgänglig för bokningar. Klienter kan bara boka tider inom dessa fönster.
-        </Text>
+        <Title variant="secondary">{t('booking.availabilitySetup.title')}</Title>
+        <Text style={{ maxWidth: 480 }}>{t('booking.availabilitySetup.description')}</Text>
       </View>
 
       <View gap="s" surface="secondary" roundness="m" inset="m">
-        <Title variant="tertiary">Veckoschema</Title>
+        <Title variant="tertiary">{t('booking.availabilitySetup.weeklySchedule')}</Title>
         <View gap="xs">
-          {DAYS.map(({ label, dayOfWeek }) => (
-            <DayRow
-              key={dayOfWeek}
-              label={label}
-              day={dayState[dayOfWeek]}
-              onToggle={() => toggleDay(dayOfWeek)}
-              onTimeChange={(field, value) => updateDayTime(dayOfWeek, field, value)}
-            />
-          ))}
+          {dayDefs.map(({ dayOfWeek, key }) => {
+            const day = dayState.find(d => d.dayOfWeek === dayOfWeek)
+            return (
+              <DayRow
+                key={dayOfWeek}
+                label={t(key)}
+                day={day}
+                onToggle={() => toggleDay(dayOfWeek)}
+                onTimeChange={(field, value) => updateDayTime(dayOfWeek, field, value)}
+                t={t}
+              />
+            )
+          })}
         </View>
       </View>
 
       <View gap="s" surface="secondary" roundness="m" inset="m">
-        <Title variant="tertiary">Sessionslängd</Title>
+        <Title variant="tertiary">{t('booking.availabilitySetup.sessionDuration')}</Title>
         <View layout="row" gap="s" style={{ flexWrap: 'wrap' }}>
-          {SESSION_DURATIONS.map(dur => {
-            const active = sessionDurations.includes(dur)
-            return (
-              <Button
-                key={dur}
-                variant={active ? 'tab-active' : 'tab'}
-                onClick={() => toggleDuration(dur)}
-              >
-                {dur} min
-              </Button>
-            )
-          })}
+          {SESSION_DURATIONS.map(dur => (
+            <Button
+              key={dur}
+              variant={sessionDurations.includes(dur) ? 'tab-active' : 'tab'}
+              onClick={() => toggleDuration(dur)}
+            >
+              {t('booking.availabilitySetup.durationMin', { minutes: dur })}
+            </Button>
+          ))}
         </View>
-        <Text size="s" color="secondary">
-          Välj de sessionslängder klienter kan välja bland.
-        </Text>
+        <Text size="s" color="secondary">{t('booking.availabilitySetup.sessionDurationHint')}</Text>
       </View>
 
       <View gap="s" surface="secondary" roundness="m" inset="m">
-        <Text weight="medium">Bufferttid mellan bokningar</Text>
+        <Text weight="medium">{t('booking.availabilitySetup.bufferLabel')}</Text>
         <Select
           id="buffer-select"
           value={bufferMinutes}
-          onChange={e => {
-            setBufferMinutes(Number(e.target.value))
-            setSaved(false)
-          }}
+          onChange={e => { setBufferMinutes(Number(e.target.value)); setSaved(false) }}
         >
           {BUFFER_OPTIONS.map(opt => (
             <option key={opt} value={opt}>
-              {opt === 0 ? 'Ingen bufferttid' : `${opt} minuter`}
+              {opt === 0 ? t('booking.availabilitySetup.bufferNone') : t('booking.availabilitySetup.bufferMinutes', { minutes: opt })}
             </option>
           ))}
         </Select>
-        <Text size="s" color="secondary">
-          Automatisk paustid som läggs till efter varje bokning.
-        </Text>
+        <Text size="s" color="secondary">{t('booking.availabilitySetup.bufferHint')}</Text>
       </View>
 
       <View gap="s" surface="secondary" roundness="m" inset="m">
-        <Text weight="medium">Tidszon</Text>
-        <Select
-          id="tz-select"
-          value={timezone}
-          onChange={e => {
-            setTimezone(e.target.value)
-            setSaved(false)
-          }}
-        >
+        <Text weight="medium">{t('booking.availabilitySetup.timezone')}</Text>
+        <Select id="tz-select" value={timezone} onChange={e => { setTimezone(e.target.value); setSaved(false) }}>
           {TIMEZONE_OPTIONS.map(tz => (
-            <option key={tz} value={tz}>
-              {tz}
-            </option>
+            <option key={tz} value={tz}>{tz}</option>
           ))}
         </Select>
       </View>
 
       {error && <Alert variant="danger">{error}</Alert>}
 
-      <Button variant="primary" disabled={saving} onClick={handleSave}>
-        {saving ? 'Sparar…' : 'Spara tillgänglighet'}
+      <Button data-action={SaveAvailability.id} variant="primary" disabled={saving} onClick={handleSave}>
+        {saving ? t('booking.availabilitySetup.saving') : t('booking.availabilitySetup.save')}
       </Button>
 
       {saved && workspaceId && (
-        <Alert variant="success" title="Tillgänglighet sparad">
+        <Alert variant="success" title={t('booking.availabilitySetup.savedTitle')}>
           <View gap="s">
-            <Text color="secondary">
-              Din bokningslänk är redo att delas med klienter.
-            </Text>
+            <Text color="secondary">{t('booking.availabilitySetup.savedBody')}</Text>
             <View layout="row" gap="s" alignItems="center">
-              <Text
-                as="code"
-                style={{
-                  flex: 1,
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                  fontFamily: 'ui-monospace, monospace',
-                }}
-              >
+              <Text as="code" style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontFamily: 'ui-monospace, monospace' }}>
                 {bookingUrl}
               </Text>
               <Button variant={copied ? 'cta' : 'primary'} onClick={handleCopyLink}>
-                {copied ? 'Kopierad!' : 'Kopiera länk'}
+                {copied ? t('booking.availabilitySetup.copied') : t('booking.availabilitySetup.copyLink')}
               </Button>
             </View>
           </View>