@ossy/booking 1.15.5 → 1.15.7

package/src/bookings.page.jsx

@@ -1,26 +1,8 @@
 import React, { useState, useEffect, useCallback } from 'react'
+import { View, Title, Text, Tabs, Alert } from '@ossy/design-system'
+import { Definition } from './Definition.js'
 import { BookingCard } from './booking-card.component.jsx'
 
-// ---------------------------------------------------------------------------
-// Tokens
-// ---------------------------------------------------------------------------
-const C = {
-  bg: '#fafafa',
-  surface: '#ffffff',
-  border: '#e4e4e7',
-  primary: '#111111',
-  secondary: '#52525b',
-  muted: '#a1a1aa',
-  tabActive: '#111111',
-  tabActiveBg: '#f4f4f5',
-  tabText: '#52525b',
-  errorText: '#dc2626',
-}
-const FONT = 'system-ui, -apple-system, sans-serif'
-
-// ---------------------------------------------------------------------------
-// Page metadata
-// ---------------------------------------------------------------------------
 export const metadata = {
   id: 'booking/bookings',
   path: {
@@ -29,126 +11,19 @@ export const metadata = {
   },
 }
 
-// ---------------------------------------------------------------------------
-// Tab bar
-// ---------------------------------------------------------------------------
 const TABS = [
   { id: 'pending', label: 'Förfrågningar' },
   { id: 'confirmed', label: 'Bekräftade' },
   { id: 'all', label: 'Alla' },
 ]
 
-function TabBar({ activeId, onChange, counts }) {
-  return (
-    <div style={{ display: 'flex', gap: 4, borderBottom: `1px solid ${C.border}`, marginBottom: 20 }}>
-      {TABS.map(tab => {
-        const isActive = tab.id === activeId
-        const count = counts?.[tab.id]
-        return (
-          <button
-            key={tab.id}
-            onClick={() => onChange(tab.id)}
-            style={{
-              background: 'none',
-              border: 'none',
-              borderBottom: isActive ? `2px solid ${C.primary}` : '2px solid transparent',
-              padding: '10px 14px',
-              marginBottom: -1,
-              fontFamily: FONT,
-              fontSize: 13,
-              fontWeight: isActive ? 600 : 400,
-              color: isActive ? C.primary : C.secondary,
-              cursor: 'pointer',
-              display: 'flex',
-              alignItems: 'center',
-              gap: 6,
-              whiteSpace: 'nowrap',
-              transition: 'color 0.1s',
-            }}
-          >
-            {tab.label}
-            {count != null && count > 0 && (
-              <span
-                style={{
-                  background: isActive ? C.primary : C.border,
-                  color: isActive ? '#fff' : C.secondary,
-                  borderRadius: 999,
-                  fontSize: 10,
-                  fontWeight: 700,
-                  padding: '1px 6px',
-                  lineHeight: 1.5,
-                }}
-              >
-                {count}
-              </span>
-            )}
-          </button>
-        )
-      })}
-    </div>
-  )
+const EMPTY_MESSAGES = {
+  pending: { heading: 'Inga förfrågningar', body: 'Du har inga väntande bokningsförfrågningar just nu.' },
+  confirmed: { heading: 'Inga bekräftade bokningar', body: 'Bekräftade bokningar visas här.' },
+  all: { heading: 'Inga bokningar', body: 'Bokningar från dina klienter visas här.' },
 }
 
-// ---------------------------------------------------------------------------
-// Empty state
-// ---------------------------------------------------------------------------
-function EmptyState({ tab }) {
-  const messages = {
-    pending: { icon: '📭', heading: 'Inga förfrågningar', body: 'Du har inga väntande bokningsförfrågningar just nu.' },
-    confirmed: { icon: '📅', heading: 'Inga bekräftade bokningar', body: 'Bekräftade bokningar visas här.' },
-    all: { icon: '🗂', heading: 'Inga bokningar', body: 'Bokningar från dina klienter visas här.' },
-  }
-  const m = messages[tab] ?? messages.all
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '48px 24px',
-        color: C.muted,
-        fontFamily: FONT,
-        textAlign: 'center',
-        gap: 8,
-      }}
-    >
-      <span style={{ fontSize: 32 }}>{m.icon}</span>
-      <span style={{ fontSize: 15, fontWeight: 600, color: C.secondary }}>{m.heading}</span>
-      <span style={{ fontSize: 13 }}>{m.body}</span>
-    </div>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Spinner
-// ---------------------------------------------------------------------------
-function Spinner() {
-  return (
-    <>
-      <style href="booking/spinner" precedence="low">
-        {`@keyframes booking-spin { to { transform: rotate(360deg) } }`}
-      </style>
-      <div
-        style={{
-          width: 22,
-          height: 22,
-          border: '3px solid #e4e4e7',
-          borderTopColor: C.primary,
-          borderRadius: '50%',
-          animation: 'booking-spin 0.7s linear infinite',
-          margin: '40px auto',
-        }}
-      />
-    </>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Page
-// ---------------------------------------------------------------------------
-export default function BookingsPage({ workspaceId }) {
+export default function BookingsPage () {
   const [activeTab, setActiveTab] = useState('pending')
   const [bookings, setBookings] = useState([])
   const [loading, setLoading] = useState(true)
@@ -180,14 +55,10 @@ export default function BookingsPage({ workspaceId }) {
     loadBookings()
   }, [loadBookings])
 
-  // Filtered views
   const pending = bookings.filter(b => b.status === 'pending')
   const confirmed = bookings.filter(b => b.status === 'confirmed')
   const visible = activeTab === 'pending' ? pending : activeTab === 'confirmed' ? confirmed : bookings
 
-  const counts = { pending: pending.length, confirmed: confirmed.length, all: bookings.length }
-
-  // Actions
   const handleConfirm = async (booking) => {
     const res = await fetch('/actions/booking/confirm', {
       method: 'POST',
@@ -231,56 +102,41 @@ export default function BookingsPage({ workspaceId }) {
     window.location.href = `/bokningar/${booking.id}`
   }
 
+  const empty = EMPTY_MESSAGES[activeTab] ?? EMPTY_MESSAGES.all
+
   return (
-    <div
-      style={{
-        fontFamily: FONT,
-        height: '100%',
-        overflowY: 'auto',
-        background: C.bg,
-        padding: 'var(--space-m, 16px) var(--space-l, 24px)',
-        boxSizing: 'border-box',
-      }}
+    <View
+      gap="m"
+      surface="primary"
+      style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}
     >
-      {/* Page header */}
-      <div style={{ marginBottom: 24 }}>
-        <h1 style={{ margin: 0, fontSize: 20, fontWeight: 700, color: C.primary }}>
-          Bokningar
-        </h1>
-        <p style={{ margin: '4px 0 0', fontSize: 14, color: C.secondary }}>
+      <View inset="s" gap="s">
+        <Title>{Definition.title} — Bokningar</Title>
+        <Text style={{ maxWidth: '400px' }}>
           Hantera bokningsförfrågningar och bekräftade möten.
-        </p>
-      </div>
+        </Text>
+      </View>
 
-      {/* Content card */}
-      <div
-        style={{
-          background: C.surface,
-          border: `1px solid ${C.border}`,
-          borderRadius: 12,
-          padding: '20px 24px',
-        }}
-      >
-        <TabBar activeId={activeTab} onChange={setActiveTab} counts={counts} />
+      <View gap="m" inset="s" surface="secondary" roundness="m">
+        <Tabs
+          tabs={TABS}
+          activeTabId={activeTab}
+          onTabClick={(_, tab) => setActiveTab(tab.id)}
+        />
 
         {loading ? (
-          <Spinner />
+          <Text color="secondary" style={{ textAlign: 'center', padding: 'var(--space-l)' }}>
+            Laddar…
+          </Text>
         ) : error ? (
-          <div
-            style={{
-              padding: '24px',
-              fontSize: 14,
-              color: C.errorText,
-              textAlign: 'center',
-              fontFamily: FONT,
-            }}
-          >
-            {error}
-          </div>
+          <Alert variant="danger">{error}</Alert>
         ) : visible.length === 0 ? (
-          <EmptyState tab={activeTab} />
+          <View gap="xs" alignItems="center" inset="l">
+            <Title variant="tertiary">{empty.heading}</Title>
+            <Text color="secondary">{empty.body}</Text>
+          </View>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+          <View gap="s">
             {visible.map(booking => (
               <BookingCard
                 key={booking.id}
@@ -291,9 +147,9 @@ export default function BookingsPage({ workspaceId }) {
                 onView={handleView}
               />
             ))}
-          </div>
+          </View>
         )}
-      </div>
-    </div>
+      </View>
+    </View>
   )
 }

package/src/cover.js

@@ -0,0 +1,8 @@
+export const cover = {
+  title: 'Låt kunder boka tid direkt',
+  text: 'Dela en länk. Kunder väljer tid. Du fokuserar på jobbet.',
+  actions: [
+    { label: 'Kom igång gratis', variant: 'cta', href: '/sign-up' },
+    { label: 'Se ett exempel', variant: 'secondary', href: '/boka/demo' },
+  ],
+}

package/src/features.js

@@ -0,0 +1,27 @@
+export const features = [
+  {
+    title: 'Din bokningssida',
+    icon: 'share',
+    text: 'En personlig sida på ossy.se/boka/ditt-namn. Dela länken med kunder – det är allt som krävs.',
+  },
+  {
+    title: 'Automatiska bekräftelser',
+    icon: 'check-circle',
+    text: 'Kunden får en bekräftelse med kalenderinbjudan direkt. Inga manuella steg från din sida.',
+  },
+  {
+    title: 'Hantera din tid',
+    icon: 'calendar',
+    text: 'Ange när du är tillgänglig. Vi visar bara lediga tider – aldrig dubbelbokade.',
+  },
+  {
+    title: 'E-postpingpong',
+    icon: 'mail',
+    text: 'Slipp fram och tillbaka i flera dagar bara för att hitta ett gemensamt tidslucka.',
+  },
+  {
+    title: 'Inga dubbelbokningar',
+    icon: 'warning',
+    text: 'En kalender här, en länk där – vi håller koll så samma tid inte bokas två gånger.',
+  },
+]

package/src/home.page.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { cover } from './cover.js'
+import { features } from './features.js'
+import SalesSection from './SalesSection.jsx'
+
+export const metadata = {
+  id: 'booking/home',
+  title: 'Bokningskalender – Ossy',
+  description: 'Låt kunder boka tid direkt. Dela en länk, kunder väljer tid, du fokuserar på jobbet.',
+  path: { sv: '/boka', en: '/booking' },
+}
+
+export default () => <SalesSection cover={cover} features={features} />