@ossy/booking 1.15.5 → 1.15.7

package/src/availability-setup.page.jsx

@@ -1,44 +1,27 @@
 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 {
+  View,
+  Title,
+  Text,
+  Button,
+  Input,
+  Select,
+  Alert,
+} 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: '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 },
+  { label: 'Fredag', dayOfWeek: 5 },
+  { label: 'Lördag', dayOfWeek: 6 },
+  { label: 'Söndag', dayOfWeek: 0 },
 ]
 
 const SESSION_DURATIONS = [30, 60, 90]
@@ -53,11 +36,7 @@ const TIMEZONE_OPTIONS = [
   'Asia/Tokyo',
 ]
 
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function buildDayState(weeklyWindows = []) {
+function buildDayState (weeklyWindows = []) {
   const byDay = {}
   for (const w of weeklyWindows) {
     byDay[w.dayOfWeek] = {
@@ -74,113 +53,49 @@ function buildDayState(weeklyWindows = []) {
   )
 }
 
-// ---------------------------------------------------------------------------
-// Sub-components
-// ---------------------------------------------------------------------------
-
-function Toggle({ checked, onChange }) {
+function DayRow ({ label, day, onToggle, onTimeChange }) {
   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">Inte tillgänglig</Text>
       )}
-    </div>
+    </View>
   )
 }
 
-// ---------------------------------------------------------------------------
-// Page
-// ---------------------------------------------------------------------------
-
-export default function AvailabilitySetupPage({ workspaceId, ...props }) {
+export default function AvailabilitySetupPage ({ workspaceId }) {
   const [dayState, setDayState] = useState(() => buildDayState())
   const [sessionDurations, setSessionDurations] = useState([60])
   const [bufferMinutes, setBufferMinutes] = useState(0)
@@ -193,7 +108,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))
@@ -278,265 +192,134 @@ 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">Laddar…</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 }}>
+      <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>
+      </View>
+
+      <View gap="s" surface="secondary" roundness="m" inset="m">
+        <Title variant="tertiary">Veckoschema</Title>
+        <View gap="xs">
           {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>
+        </View>
+      </View>
 
-      {/* Session durations */}
-      <div style={cardStyle}>
-        <p style={sectionHeadingStyle}>Sessionslängd</p>
-        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+      <View gap="s" surface="secondary" roundness="m" inset="m">
+        <Title variant="tertiary">Sessionslängd</Title>
+        <View layout="row" gap="s" style={{ flexWrap: 'wrap' }}>
           {SESSION_DURATIONS.map(dur => {
             const active = sessionDurations.includes(dur)
             return (
-              <button
+              <Button
                 key={dur}
+                variant={active ? 'tab-active' : 'tab'}
                 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>
+              </Button>
             )
           })}
-        </div>
-        <p style={{ margin: '10px 0 0', fontSize: 12, color: COLOR.muted }}>
+        </View>
+        <Text size="s" color="secondary">
           Välj de sessionslängder klienter kan välja bland.
-        </p>
-      </div>
+        </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">Bufferttid mellan bokningar</Text>
+        <Select
           id="buffer-select"
           value={bufferMinutes}
           onChange={e => {
             setBufferMinutes(Number(e.target.value))
             setSaved(false)
           }}
-          style={{ ...selectStyle, minWidth: 190 }}
         >
           {BUFFER_OPTIONS.map(opt => (
             <option key={opt} value={opt}>
               {opt === 0 ? 'Ingen bufferttid' : `${opt} minuter`}
             </option>
           ))}
-        </select>
-        <p style={{ margin: '8px 0 0', fontSize: 12, color: COLOR.muted }}>
+        </Select>
+        <Text size="s" color="secondary">
           Automatisk paustid som läggs till efter varje bokning.
-        </p>
-      </div>
+        </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
+      <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)
           }}
-          style={{ ...selectStyle, minWidth: 220 }}
         >
           {TIMEZONE_OPTIONS.map(tz => (
             <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',
-        }}
-      >
+      <Button variant="primary" disabled={saving} onClick={handleSave}>
         {saving ? 'Sparar…' : 'Spara tillgänglighet'}
-      </button>
+      </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="Tillgänglighet sparad">
+          <View gap="s">
+            <Text color="secondary">
+              Din bokningslänk är redo att delas med klienter.
+            </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 ? 'Kopierad!' : 'Kopiera länk'}
+              </Button>
+            </View>
+          </View>
+        </Alert>
       )}
-    </div>
+    </View>
   )
 }