@ossy/booking 1.13.3 → 1.15.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.13.3",
+  "version": "1.15.0",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
@@ -14,11 +14,11 @@
     "src": "./src"
   },
   "dependencies": {
-    "@ossy/email": "^1.3.3",
-    "@ossy/event-store": "^1.5.3",
-    "@ossy/observability": "^1.5.3",
-    "@ossy/platform": "^1.36.3",
-    "@ossy/resources": "^1.9.3"
+    "@ossy/email": "^1.5.0",
+    "@ossy/event-store": "^1.7.0",
+    "@ossy/observability": "^1.7.0",
+    "@ossy/platform": "^1.38.0",
+    "@ossy/resources": "^1.11.0"
   },
   "peerDependencies": {
     "@ossy/design-system": ">=1.0.0",
@@ -34,5 +34,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "afdf2cc378dd2e7cbb63680f04386e4ad260ed2d"
+  "gitHead": "150285065e45f9be2ee19794e493abc50cd85e44"
 }

package/src/availability-setup.page.jsx

@@ -0,0 +1,542 @@
+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',
+}
+
+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 = [
+  'Europe/Stockholm',
+  'Europe/London',
+  'Europe/Paris',
+  'Europe/Berlin',
+  'America/New_York',
+  'America/Los_Angeles',
+  'Asia/Tokyo',
+]
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function buildDayState(weeklyWindows = []) {
+  const byDay = {}
+  for (const w of weeklyWindows) {
+    byDay[w.dayOfWeek] = {
+      enabled: true,
+      startTime: w.startTime ?? '09:00',
+      endTime: w.endTime ?? '17:00',
+    }
+  }
+  return Object.fromEntries(
+    DAYS.map(d => [
+      d.dayOfWeek,
+      byDay[d.dayOfWeek] ?? { enabled: false, startTime: '09:00', endTime: '17:00' },
+    ]),
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+function Toggle({ checked, onChange }) {
+  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,
+      }}
+    >
+      <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>
+
+      {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>
+      ) : (
+        <span style={{ fontSize: 13, color: COLOR.muted }}>Inte tillgänglig</span>
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Page
+// ---------------------------------------------------------------------------
+
+export default function AvailabilitySetupPage({ workspaceId, ...props }) {
+  const [dayState, setDayState] = useState(() => buildDayState())
+  const [sessionDurations, setSessionDurations] = useState([60])
+  const [bufferMinutes, setBufferMinutes] = useState(0)
+  const [timezone, setTimezone] = useState('Europe/Stockholm')
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState(false)
+  const [error, setError] = useState(null)
+  const [copied, setCopied] = useState(false)
+
+  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))
+      .then(data => {
+        if (data) {
+          setDayState(buildDayState(data.weeklyWindows ?? []))
+          setSessionDurations(
+            Array.isArray(data.sessionDurations) && data.sessionDurations.length
+              ? data.sessionDurations
+              : [60],
+          )
+          setBufferMinutes(data.bufferMinutes ?? 0)
+          setTimezone(data.timezone ?? 'Europe/Stockholm')
+          setSaved(true)
+        }
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }, [])
+
+  const toggleDay = (dayOfWeek) => {
+    setDayState(prev => ({
+      ...prev,
+      [dayOfWeek]: { ...prev[dayOfWeek], enabled: !prev[dayOfWeek].enabled },
+    }))
+    setSaved(false)
+  }
+
+  const updateDayTime = (dayOfWeek, field, value) => {
+    setDayState(prev => ({
+      ...prev,
+      [dayOfWeek]: { ...prev[dayOfWeek], [field]: value },
+    }))
+    setSaved(false)
+  }
+
+  const toggleDuration = (dur) => {
+    setSessionDurations(prev => {
+      if (prev.includes(dur)) {
+        const next = prev.filter(d => d !== dur)
+        return next.length ? next : [dur]
+      }
+      return [...prev, dur].sort((a, b) => a - b)
+    })
+    setSaved(false)
+  }
+
+  const handleSave = async () => {
+    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,
+    }))
+
+    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})`)
+      }
+
+      setSaved(true)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleCopyLink = () => {
+    navigator.clipboard.writeText(bookingUrl).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2500)
+    })
+  }
+
+  // ---------------------------------------------------------------------------
+  // 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>
+    )
+  }
+
+  return (
+    <div
+      style={{
+        fontFamily: FONT,
+        maxWidth: 620,
+        padding: '28px 24px',
+        boxSizing: 'border-box',
+      }}
+    >
+      {/* 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)
+            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>
+            )
+          })}
+        </div>
+        <p style={{ margin: '10px 0 0', fontSize: 12, color: COLOR.muted }}>
+          Välj de sessionslängder klienter kan välja bland.
+        </p>
+      </div>
+
+      {/* 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
+          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 }}>
+          Automatisk paustid som läggs till efter varje bokning.
+        </p>
+      </div>
+
+      {/* 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 }}
+        >
+          {TIMEZONE_OPTIONS.map(tz => (
+            <option key={tz} value={tz}>
+              {tz}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* 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>
+      )}
+
+      {/* 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>
+
+      {/* 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>
+      )}
+    </div>
+  )
+}