@ossy/booking 1.15.6 → 1.16.0

package/src/availability-setup.page.jsx

@@ -1,46 +1,20 @@
-import React, { useState, useEffect } from 'react'
-
-export const path = { sv: '/tillganglighet', en: '/availability' }
-export const id = 'booking/availability-setup'
-
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-
-const FONT = 'system-ui, -apple-system, sans-serif'
-
-const COLOR = {
-  bg: '#f5f5f5',
-  surface: '#ffffff',
-  surfaceAlt: '#f9f9f9',
-  surfaceEnabled: '#f8f9ff',
-  border: '#e2e2e2',
-  borderEnabled: '#c7d2fe',
-  primary: '#111111',
-  primaryText: '#ffffff',
-  secondary: '#555555',
-  muted: '#999999',
-  success: '#16a34a',
-  successBg: '#f0fdf4',
-  successBorder: '#bbf7d0',
-  error: '#dc2626',
-  errorBg: '#fef2f2',
-  errorBorder: '#fecaca',
-  accent: '#4f46e5',
-  accentBg: '#eef2ff',
-  accentBorder: '#c7d2fe',
+import React, { useState, useEffect, useMemo } from 'react'
+import {
+  View,
+  Title,
+  Text,
+  Button,
+  Input,
+  Select,
+  Alert,
+  useLocale,
+} from '@ossy/design-system'
+
+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 = [
@@ -53,11 +27,7 @@ const TIMEZONE_OPTIONS = [
   'Asia/Tokyo',
 ]
 
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function buildDayState(weeklyWindows = []) {
+function buildDayState (weeklyWindows = []) {
   const byDay = {}
   for (const w of weeklyWindows) {
     byDay[w.dayOfWeek] = {
@@ -66,121 +36,67 @@ 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' }),
+  }))
 }
 
-// ---------------------------------------------------------------------------
-// Sub-components
-// ---------------------------------------------------------------------------
-
-function Toggle({ checked, onChange }) {
+function DayRow ({ label, day, onToggle, onTimeChange, t }) {
   return (
-    <button
-      role="switch"
-      aria-checked={checked}
-      onClick={() => onChange(!checked)}
-      style={{
-        width: 36,
-        height: 20,
-        borderRadius: 10,
-        border: 'none',
-        background: checked ? COLOR.accent : '#d1d5db',
-        cursor: 'pointer',
-        position: 'relative',
-        flexShrink: 0,
-        transition: 'background 0.15s',
-        padding: 0,
-      }}
+    <View
+      layout="row"
+      gap="m"
+      alignItems="center"
+      surface={day.enabled ? 'secondary' : 'primary'}
+      roundness="m"
+      inset="s"
+      style={{ border: '1px solid var(--separator)' }}
     >
-      <span
-        style={{
-          position: 'absolute',
-          top: 2,
-          left: checked ? 18 : 2,
-          width: 16,
-          height: 16,
-          borderRadius: '50%',
-          background: '#ffffff',
-          transition: 'left 0.15s',
-          boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
-        }}
-      />
-    </button>
-  )
-}
-
-function TimeInput({ value, onChange }) {
-  return (
-    <input
-      type="time"
-      value={value}
-      onChange={e => onChange(e.target.value)}
-      style={{
-        padding: '5px 8px',
-        border: `1px solid ${COLOR.border}`,
-        borderRadius: 6,
-        fontFamily: FONT,
-        fontSize: 13,
-        color: COLOR.primary,
-        background: COLOR.surface,
-        outline: 'none',
-      }}
-    />
-  )
-}
-
-function DayRow({ label, dayOfWeek, day, onToggle, onTimeChange }) {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 12,
-        padding: '10px 14px',
-        borderRadius: 8,
-        background: day.enabled ? COLOR.surfaceEnabled : COLOR.surfaceAlt,
-        border: `1px solid ${day.enabled ? COLOR.borderEnabled : COLOR.border}`,
-        transition: 'background 0.15s, border-color 0.15s',
-      }}
-    >
-      <Toggle checked={day.enabled} onChange={onToggle} />
-
-      <span
-        style={{
-          width: 70,
-          fontSize: 14,
-          fontWeight: 600,
-          color: day.enabled ? COLOR.primary : COLOR.muted,
-          flexShrink: 0,
-          userSelect: 'none',
-        }}
-      >
-        {label}
-      </span>
+      <label style={{ display: 'flex', alignItems: 'center', flexShrink: 0, cursor: 'pointer' }}>
+        <input
+          type="checkbox"
+          checked={day.enabled}
+          onChange={() => onToggle()}
+          style={{ width: 16, height: 16, accentColor: 'var(--color-accent)' }}
+        />
+      </label>
+      <Text weight="medium" style={{ width: '4.5rem', flexShrink: 0 }}>{label}</Text>
 
       {day.enabled ? (
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1 }}>
-          <TimeInput value={day.startTime} onChange={v => onTimeChange('startTime', v)} />
-          <span style={{ fontSize: 13, color: COLOR.muted, userSelect: 'none' }}>–</span>
-          <TimeInput value={day.endTime} onChange={v => onTimeChange('endTime', v)} />
-        </div>
+        <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)} />
+          <Text color="secondary">–</Text>
+          <Input type="time" value={day.endTime} onChange={e => onTimeChange('endTime', e.target.value)} />
+        </View>
       ) : (
-        <span style={{ fontSize: 13, color: COLOR.muted }}>Inte tillgänglig</span>
+        <Text color="secondary" size="s">{t('booking.availabilitySetup.unavailable')}</Text>
       )}
-    </div>
+    </View>
   )
 }
 
-// ---------------------------------------------------------------------------
-// Page
-// ---------------------------------------------------------------------------
+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' },
+  ], [])
 
-export default function AvailabilitySetupPage({ workspaceId, ...props }) {
   const [dayState, setDayState] = useState(() => buildDayState())
   const [sessionDurations, setSessionDurations] = useState([60])
   const [bufferMinutes, setBufferMinutes] = useState(0)
@@ -193,7 +109,6 @@ export default function AvailabilitySetupPage({ workspaceId, ...props }) {
 
   const bookingUrl = `https://ossy.se/boka/${workspaceId ?? ''}`
 
-  // Load existing availability on mount
   useEffect(() => {
     fetch('/actions/booking/get-availability')
       .then(r => (r.ok ? r.json() : null))
@@ -215,18 +130,14 @@ export default function AvailabilitySetupPage({ workspaceId, ...props }) {
   }, [])
 
   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)
   }
 
@@ -245,10 +156,8 @@ export default function AvailabilitySetupPage({ workspaceId, ...props }) {
     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 {
@@ -260,7 +169,7 @@ export default function AvailabilitySetupPage({ workspaceId, ...props }) {
 
       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)
@@ -278,265 +187,106 @@ export default function AvailabilitySetupPage({ workspaceId, ...props }) {
     })
   }
 
-  // ---------------------------------------------------------------------------
-  // Styles
-  // ---------------------------------------------------------------------------
-
-  const cardStyle = {
-    marginBottom: 16,
-    padding: '20px 24px',
-    background: COLOR.surface,
-    border: `1px solid ${COLOR.border}`,
-    borderRadius: 12,
-  }
-
-  const sectionHeadingStyle = {
-    margin: '0 0 14px',
-    fontSize: 12,
-    fontWeight: 700,
-    color: COLOR.muted,
-    textTransform: 'uppercase',
-    letterSpacing: '0.06em',
-  }
-
-  const selectStyle = {
-    padding: '8px 12px',
-    border: `1px solid ${COLOR.border}`,
-    borderRadius: 8,
-    fontFamily: FONT,
-    fontSize: 14,
-    color: COLOR.primary,
-    background: COLOR.surface,
-    cursor: 'pointer',
-    outline: 'none',
-  }
-
   if (loading) {
     return (
-      <div style={{ fontFamily: FONT, padding: '32px 24px', color: COLOR.secondary, fontSize: 14 }}>
-        Laddar…
-      </div>
+      <View surface="primary" inset="l" style={{ height: '100%', overflowY: 'auto' }}>
+        <Text color="secondary">{t('booking.availabilitySetup.loading')}</Text>
+      </View>
     )
   }
 
   return (
-    <div
-      style={{
-        fontFamily: FONT,
-        maxWidth: 620,
-        padding: '28px 24px',
-        boxSizing: 'border-box',
-      }}
+    <View
+      gap="m"
+      surface="primary"
+      style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto', maxWidth: 620 }}
     >
-      {/* Page header */}
-      <div style={{ marginBottom: 24 }}>
-        <h1 style={{ margin: '0 0 6px', fontSize: 22, fontWeight: 700, color: COLOR.primary }}>
-          Tillgänglighet
-        </h1>
-        <p style={{ margin: 0, fontSize: 14, color: COLOR.secondary, maxWidth: 480 }}>
-          Ange när du är tillgänglig för bokningar. Klienter kan bara boka tider inom dessa
-          fönster.
-        </p>
-      </div>
-
-      {/* Weekly schedule */}
-      <div style={cardStyle}>
-        <p style={sectionHeadingStyle}>Veckoschema</p>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-          {DAYS.map(({ label, dayOfWeek }) => (
-            <DayRow
-              key={dayOfWeek}
-              label={label}
-              dayOfWeek={dayOfWeek}
-              day={dayState[dayOfWeek]}
-              onToggle={() => toggleDay(dayOfWeek)}
-              onTimeChange={(field, value) => updateDayTime(dayOfWeek, field, value)}
-            />
-          ))}
-        </div>
-      </div>
-
-      {/* Session durations */}
-      <div style={cardStyle}>
-        <p style={sectionHeadingStyle}>Sessionslängd</p>
-        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
-          {SESSION_DURATIONS.map(dur => {
-            const active = sessionDurations.includes(dur)
+      <View inset="s" gap="xs">
+        <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">{t('booking.availabilitySetup.weeklySchedule')}</Title>
+        <View gap="xs">
+          {dayDefs.map(({ dayOfWeek, key }) => {
+            const day = dayState.find(d => d.dayOfWeek === dayOfWeek)
             return (
-              <button
-                key={dur}
-                onClick={() => toggleDuration(dur)}
-                style={{
-                  padding: '8px 20px',
-                  border: `2px solid ${active ? COLOR.accent : COLOR.border}`,
-                  borderRadius: 8,
-                  background: active ? COLOR.accentBg : COLOR.surface,
-                  color: active ? COLOR.accent : COLOR.secondary,
-                  fontFamily: FONT,
-                  fontSize: 14,
-                  fontWeight: 600,
-                  cursor: 'pointer',
-                  transition: 'all 0.15s',
-                }}
-              >
-                {dur} min
-              </button>
+              <DayRow
+                key={dayOfWeek}
+                label={t(key)}
+                day={day}
+                onToggle={() => toggleDay(dayOfWeek)}
+                onTimeChange={(field, value) => updateDayTime(dayOfWeek, field, value)}
+                t={t}
+              />
             )
           })}
-        </div>
-        <p style={{ margin: '10px 0 0', fontSize: 12, color: COLOR.muted }}>
-          Välj de sessionslängder klienter kan välja bland.
-        </p>
-      </div>
+        </View>
+      </View>
+
+      <View gap="s" surface="secondary" roundness="m" inset="m">
+        <Title variant="tertiary">{t('booking.availabilitySetup.sessionDuration')}</Title>
+        <View layout="row" gap="s" style={{ flexWrap: 'wrap' }}>
+          {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">{t('booking.availabilitySetup.sessionDurationHint')}</Text>
+      </View>
 
-      {/* Buffer time */}
-      <div style={cardStyle}>
-        <label
-          htmlFor="buffer-select"
-          style={{ display: 'block', fontWeight: 600, fontSize: 14, color: COLOR.primary, marginBottom: 8 }}
-        >
-          Bufferttid mellan bokningar
-        </label>
-        <select
+      <View gap="s" surface="secondary" roundness="m" inset="m">
+        <Text weight="medium">{t('booking.availabilitySetup.bufferLabel')}</Text>
+        <Select
           id="buffer-select"
           value={bufferMinutes}
-          onChange={e => {
-            setBufferMinutes(Number(e.target.value))
-            setSaved(false)
-          }}
-          style={{ ...selectStyle, minWidth: 190 }}
+          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>
-        <p style={{ margin: '8px 0 0', fontSize: 12, color: COLOR.muted }}>
-          Automatisk paustid som läggs till efter varje bokning.
-        </p>
-      </div>
+        </Select>
+        <Text size="s" color="secondary">{t('booking.availabilitySetup.bufferHint')}</Text>
+      </View>
 
-      {/* Timezone */}
-      <div style={cardStyle}>
-        <label
-          htmlFor="tz-select"
-          style={{ display: 'block', fontWeight: 600, fontSize: 14, color: COLOR.primary, marginBottom: 8 }}
-        >
-          Tidszon
-        </label>
-        <select
-          id="tz-select"
-          value={timezone}
-          onChange={e => {
-            setTimezone(e.target.value)
-            setSaved(false)
-          }}
-          style={{ ...selectStyle, minWidth: 220 }}
-        >
+      <View gap="s" surface="secondary" roundness="m" inset="m">
+        <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>
-      </div>
+        </Select>
+      </View>
 
-      {/* Error message */}
-      {error && (
-        <div
-          style={{
-            marginBottom: 16,
-            padding: '12px 16px',
-            background: COLOR.errorBg,
-            border: `1px solid ${COLOR.errorBorder}`,
-            borderRadius: 8,
-            color: COLOR.error,
-            fontSize: 14,
-          }}
-        >
-          {error}
-        </div>
-      )}
+      {error && <Alert variant="danger">{error}</Alert>}
 
-      {/* Save button */}
-      <button
-        onClick={handleSave}
-        disabled={saving}
-        style={{
-          padding: '12px 28px',
-          background: saving ? COLOR.muted : COLOR.primary,
-          color: COLOR.primaryText,
-          border: 'none',
-          borderRadius: 8,
-          fontFamily: FONT,
-          fontSize: 15,
-          fontWeight: 600,
-          cursor: saving ? 'not-allowed' : 'pointer',
-          marginBottom: 20,
-          transition: 'background 0.15s',
-        }}
-      >
-        {saving ? 'Sparar…' : 'Spara tillgänglighet'}
-      </button>
+      <Button variant="primary" disabled={saving} onClick={handleSave}>
+        {saving ? t('booking.availabilitySetup.saving') : t('booking.availabilitySetup.save')}
+      </Button>
 
-      {/* Booking URL — shown after successful save */}
       {saved && workspaceId && (
-        <div
-          style={{
-            padding: '20px 24px',
-            background: COLOR.successBg,
-            border: `1px solid ${COLOR.successBorder}`,
-            borderRadius: 12,
-          }}
-        >
-          <p style={{ margin: '0 0 4px', fontWeight: 700, fontSize: 14, color: COLOR.success }}>
-            ✓ Tillgänglighet sparad
-          </p>
-          <p style={{ margin: '0 0 14px', fontSize: 13, color: COLOR.secondary }}>
-            Din bokningslänk är redo att delas med klienter.
-          </p>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-            <code
-              style={{
-                display: 'block',
-                padding: '8px 12px',
-                background: COLOR.surface,
-                border: `1px solid ${COLOR.border}`,
-                borderRadius: 6,
-                fontSize: 13,
-                color: COLOR.primary,
-                fontFamily: 'ui-monospace, monospace',
-                flex: 1,
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {bookingUrl}
-            </code>
-            <button
-              onClick={handleCopyLink}
-              style={{
-                padding: '8px 16px',
-                background: copied ? COLOR.success : COLOR.primary,
-                color: COLOR.primaryText,
-                border: 'none',
-                borderRadius: 6,
-                fontFamily: FONT,
-                fontSize: 13,
-                fontWeight: 600,
-                cursor: 'pointer',
-                flexShrink: 0,
-                transition: 'background 0.15s',
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {copied ? '✓ Kopierad!' : 'Kopiera länk'}
-            </button>
-          </div>
-        </div>
+        <Alert variant="success" title={t('booking.availabilitySetup.savedTitle')}>
+          <View gap="s">
+            <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' }}>
+                {bookingUrl}
+              </Text>
+              <Button variant={copied ? 'cta' : 'primary'} onClick={handleCopyLink}>
+                {copied ? t('booking.availabilitySetup.copied') : t('booking.availabilitySetup.copyLink')}
+              </Button>
+            </View>
+          </View>
+        </Alert>
       )}
-    </div>
+    </View>
   )
 }