@ossy/booking 1.15.7 → 1.16.0

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.0",
   "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.0",
+    "@ossy/event-store": "^1.8.0",
+    "@ossy/observability": "^1.8.0",
+    "@ossy/platform": "^1.39.0",
+    "@ossy/resources": "^1.12.0"
   },
   "peerDependencies": {
     "@ossy/design-system": ">=1.0.0",
@@ -34,5 +34,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "f65df0cd6da864c314c4f424112e05e8e2dec0ff"
+  "gitHead": "d9d31182be64a448d575da432af2830d909ad4b9"
 }

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/BookingForm.jsx

@@ -1,15 +1,8 @@
 import React, { useState } from 'react'
-import { View, Title, Text, Button, Input, Select } from '@ossy/design-system'
+import { View, Title, Text, Button, Input, useLocale } from '@ossy/design-system'
 
-/**
- * Public client-facing form.
- *
- * TODO:
- * - Load services for workspaceId via booking.get-services
- * - Load available slots for selected service via booking.get-available-slots
- * - On submit: call booking.create-booking action, then redirect to Stripe Checkout
- */
 export const BookingForm = ({ workspaceId }) => {
+  const { t } = useLocale()
   const [step, setStep] = useState('pick-service')
   const [selectedService, setSelectedService] = useState(null)
   const [selectedSlot, setSelectedSlot] = useState(null)
@@ -19,11 +12,10 @@ export const BookingForm = ({ workspaceId }) => {
   if (step === 'pick-service') {
     return (
       <View gap="m">
-        <Title variant="secondary">Choose a service</Title>
-        {/* TODO: replace with real services loaded from API */}
-        <Text color="secondary">Loading services for workspace {workspaceId}…</Text>
+        <Title variant="secondary">{t('booking.book.form.chooseService')}</Title>
+        <Text color="secondary">{t('booking.book.form.loadingServices', { workspaceId })}</Text>
         <Button variant="secondary" onClick={() => setStep('pick-slot')}>
-          Continue (placeholder)
+          {t('booking.book.form.continuePlaceholder')}
         </Button>
       </View>
     )
@@ -32,13 +24,12 @@ export const BookingForm = ({ workspaceId }) => {
   if (step === 'pick-slot') {
     return (
       <View gap="m">
-        <Title variant="secondary">Pick a time</Title>
-        {/* TODO: render a slot grid derived from availability minus existing bookings */}
-        <Text color="secondary">Available slots will appear here.</Text>
+        <Title variant="secondary">{t('booking.book.form.pickTime')}</Title>
+        <Text color="secondary">{t('booking.book.form.slotsPlaceholder')}</Text>
         <View layout="row" gap="s">
-          <Button variant="ghost" onClick={() => setStep('pick-service')}>Back</Button>
+          <Button variant="ghost" onClick={() => setStep('pick-service')}>{t('booking.book.form.back')}</Button>
           <Button variant="secondary" onClick={() => setStep('enter-details')}>
-            Continue (placeholder)
+            {t('booking.book.form.continuePlaceholder')}
           </Button>
         </View>
       </View>
@@ -48,25 +39,24 @@ export const BookingForm = ({ workspaceId }) => {
   if (step === 'enter-details') {
     return (
       <View gap="m">
-        <Title variant="secondary">Your details</Title>
+        <Title variant="secondary">{t('booking.book.form.yourDetails')}</Title>
         <Input
-          label="Name"
+          label={t('booking.book.form.nameLabel')}
           value={clientName}
           onChange={setClientName}
-          placeholder="Jane Smith"
+          placeholder={t('booking.book.form.namePlaceholder')}
         />
         <Input
-          label="Email"
+          label={t('booking.book.form.emailLabel')}
           type="email"
           value={clientEmail}
           onChange={setClientEmail}
-          placeholder="jane@example.com"
+          placeholder={t('booking.book.form.emailPlaceholder')}
         />
         <View layout="row" gap="s">
-          <Button variant="ghost" onClick={() => setStep('pick-slot')}>Back</Button>
-          {/* TODO: submit booking action then redirect to Stripe */}
+          <Button variant="ghost" onClick={() => setStep('pick-slot')}>{t('booking.book.form.back')}</Button>
           <Button variant="primary" onClick={() => setStep('confirm')}>
-            Confirm &amp; Pay
+            {t('booking.book.form.confirmPay')}
           </Button>
         </View>
       </View>
@@ -75,8 +65,8 @@ export const BookingForm = ({ workspaceId }) => {
 
   return (
     <View gap="m">
-      <Title variant="secondary">Booking confirmed!</Title>
-      <Text>Check your email for a confirmation.</Text>
+      <Title variant="secondary">{t('booking.book.form.confirmed')}</Title>
+      <Text>{t('booking.book.form.checkEmail')}</Text>
     </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,6 +7,7 @@ import {
   Input,
   Select,
   Alert,
+  useLocale,
 } from '@ossy/design-system'
 
 export const metadata = {
@@ -14,16 +15,6 @@ export const metadata = {
   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 +36,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 +74,29 @@ 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 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)
@@ -129,18 +130,14 @@ export default function AvailabilitySetupPage ({ workspaceId }) {
   }, [])
 
   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,10 +156,8 @@ 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 {
@@ -174,7 +169,7 @@ export default function AvailabilitySetupPage ({ workspaceId }) {
 
       if (!res.ok) {
         const data = await res.json().catch(() => ({}))
-        throw new Error(data?.message ?? `Kunde inte spara (${res.status})`)
+        throw new Error(data?.message ?? t('booking.availabilitySetup.errorSave', { status: res.status }))
       }
 
       setSaved(true)
@@ -195,7 +190,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,83 +202,66 @@ 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>
@@ -291,30 +269,19 @@ export default function AvailabilitySetupPage ({ workspaceId }) {
       {error && <Alert variant="danger">{error}</Alert>}
 
       <Button variant="primary" disabled={saving} onClick={handleSave}>
-        {saving ? 'Sparar…' : 'Spara tillgänglighet'}
+        {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>