@ossy/booking 1.15.6 → 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

@@ -1,5 +1,7 @@
 import React from 'react'
-import { View, Title, Text, Button, Icon2, PageSection } from '@ossy/design-system'
+import { cover } from './cover.js'
+import { features } from './features.js'
+import SalesSection from './SalesSection.jsx'
 
 export const metadata = {
   id: 'booking/home',
@@ -8,366 +10,4 @@ export const metadata = {
   path: { sv: '/boka', en: '/booking' },
 }
 
-// ─── Pain points ─────────────────────────────────────────────────────────────
-
-const painPoints = [
-  {
-    icon: 'email',
-    title: 'E-postpingpong',
-    text: 'Fram och tillbaka i flera dagar bara för att hitta ett gemensamt tidslucka.',
-  },
-  {
-    icon: 'warning',
-    title: 'Dubbelbokningar',
-    text: 'En kalender här, en länk där – det är lätt att råka boka samma tid två gånger.',
-  },
-  {
-    icon: 'alert',
-    title: 'Missade bokningar',
-    text: 'Påminnelser glöms bort. Kunden dyker inte upp. Tid och pengar går till spillo.',
-  },
-]
-
-// ─── Features ────────────────────────────────────────────────────────────────
-
-const features = [
-  {
-    icon: 'share',
-    title: 'Din bokningssida',
-    text: 'En personlig sida på ossy.se/boka/ditt-namn. Dela länken med kunder – det är allt som krävs.',
-  },
-  {
-    icon: 'check-circle',
-    title: 'Automatiska bekräftelser',
-    text: 'Kunden får en bekräftelse med kalenderinbjudan direkt. Inga manuella steg från din sida.',
-  },
-  {
-    icon: 'calendar',
-    title: 'Hantera din tid',
-    text: 'Ange när du är tillgänglig. Vi visar bara lediga tider – aldrig dubbelbokade.',
-  },
-]
-
-// ─── Personas ─────────────────────────────────────────────────────────────────
-
-const personas = [
-  { icon: 'person', label: 'Coach', text: 'Boka coachingsessioner utan mellanhänder.' },
-  { icon: 'code', label: 'IT-konsult', text: 'Låt kunder boka möten direkt i din kalender.' },
-  { icon: 'brush', label: 'Designer', text: 'Fyll din agenda med kundmöten på dina villkor.' },
-]
-
-// ─── Pricing ─────────────────────────────────────────────────────────────────
-
-const included = [
-  { icon: 'infinity', text: 'Obegränsade bokningar' },
-  { icon: 'bell', text: 'Automatiska påminnelser' },
-  { icon: 'calendar', text: 'Kalenderinbjudningar' },
-  { icon: 'link', text: 'Din personliga bokningssida' },
-]
-
-// ─── Page ─────────────────────────────────────────────────────────────────────
-
-export default function BookingHomePage() {
-  return (
-    <>
-      <style href="@ossy/booking-sales-page" precedence="high">{`
-        .bsp-hero {
-          min-height: min(52vh, 560px);
-          padding: var(--space-xl) var(--space-m);
-          background: linear-gradient(
-            155deg,
-            hsl(200, 100%, 97%) 0%,
-            hsl(170, 60%, 94%) 60%,
-            hsl(160, 70%, 90%) 100%
-          );
-          border-radius: var(--space-m);
-          text-align: center;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          gap: var(--space-l);
-          overflow: hidden;
-        }
-
-        .bsp-section {
-          padding: var(--space-xl) var(--space-m);
-        }
-
-        .bsp-grid-3 {
-          display: grid;
-          grid-template-columns: repeat(3, 1fr);
-          gap: var(--space-m);
-        }
-
-        .bsp-grid-2 {
-          display: grid;
-          grid-template-columns: repeat(3, 1fr);
-          gap: var(--space-m);
-        }
-
-        @media (max-width: 860px) {
-          .bsp-grid-3,
-          .bsp-grid-2 {
-            grid-template-columns: 1fr;
-          }
-          .bsp-hero {
-            padding: var(--space-l) var(--space-s);
-          }
-        }
-
-        @media (min-width: 860px) and (max-width: 1100px) {
-          .bsp-grid-3 {
-            grid-template-columns: repeat(3, 1fr);
-          }
-        }
-      `}</style>
-
-      <PageSection maxWidth="l" gap="l" style={{ padding: 'var(--space-m) var(--space-m) var(--space-xl)' }}>
-
-        {/* ── Hero ─────────────────────────────────────────────────────── */}
-        <div className="bsp-hero">
-          <View gap="m" alignItems="center" style={{ maxWidth: 680 }}>
-            <Title as="h1" variant="display" style={{ textWrap: 'balance', letterSpacing: '-0.5px' }}>
-              Låt kunder boka tid direkt
-            </Title>
-            <Text style={{ fontSize: '1.2rem', lineHeight: 1.6, opacity: 0.8 }}>
-              Dela en länk. Kunder väljer tid. Du fokuserar på jobbet.
-            </Text>
-          </View>
-
-          <View layout="row" gap="m" justifyContent="center" style={{ flexWrap: 'wrap' }}>
-            <Button variant="cta" href="/sign-up" style={{ padding: '12px 32px', fontSize: '1rem' }}>
-              Kom igång gratis
-            </Button>
-            <Button variant="secondary" href="/boka/demo" style={{ padding: '12px 32px', fontSize: '1rem' }}>
-              Se ett exempel
-            </Button>
-          </View>
-        </div>
-
-        {/* ── Problem ──────────────────────────────────────────────────── */}
-        <View gap="l" className="bsp-section" style={{ textAlign: 'center' }}>
-          <View gap="s" alignItems="center">
-            <Title as="h2" variant="secondary">
-              Trött på e-postpingpong för att hitta en tid som passar?
-            </Title>
-            <Text style={{ maxWidth: 560, opacity: 0.75 }}>
-              Du är inte ensam. De flesta konsulter och frilansare slösar timmar i veckan på att koordinera möten.
-            </Text>
-          </View>
-
-          <div className="bsp-grid-3">
-            {painPoints.map(({ icon, title, text }) => (
-              <View
-                key={title}
-                gap="m"
-                inset="l"
-                roundness="m"
-                style={{
-                  border: '1px solid var(--separator)',
-                  background: 'hsl(0, 0%, 99%)',
-                  textAlign: 'left',
-                }}
-              >
-                <View
-                  style={{
-                    width: 44,
-                    height: 44,
-                    borderRadius: 12,
-                    background: 'hsl(0, 80%, 95%)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
-                  <Icon2 name={icon} size="s" />
-                </View>
-                <Title as="h3" variant="tertiary">{title}</Title>
-                <Text variant="small" style={{ opacity: 0.8, lineHeight: 1.6 }}>{text}</Text>
-              </View>
-            ))}
-          </div>
-        </View>
-
-        {/* ── Features ─────────────────────────────────────────────────── */}
-        <View
-          gap="l"
-          inset="l"
-          roundness="m"
-          className="bsp-section"
-          style={{
-            background: 'hsl(170, 30%, 97%)',
-            border: '1px solid hsl(170, 30%, 90%)',
-          }}
-        >
-          <View gap="s" alignItems="center" style={{ textAlign: 'center' }}>
-            <Title as="h2" variant="secondary">Allt du behöver, inget du inte behöver</Title>
-            <Text style={{ opacity: 0.75 }}>Enkelt att komma igång. Kraftfullt nog att lita på varje dag.</Text>
-          </View>
-
-          <div className="bsp-grid-3">
-            {features.map(({ icon, title, text }) => (
-              <View
-                key={title}
-                gap="m"
-                inset="l"
-                roundness="m"
-                style={{
-                  background: 'hsl(0, 0%, 100%)',
-                  border: '1px solid hsl(170, 20%, 88%)',
-                  boxShadow: '0 2px 8px hsl(170, 30%, 88%)',
-                }}
-              >
-                <View
-                  style={{
-                    width: 48,
-                    height: 48,
-                    borderRadius: 14,
-                    background: 'hsl(167, 89%, 43%)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
-                  <Icon2 name={icon} size="s" style={{ color: 'white' }} />
-                </View>
-                <Title as="h3" variant="tertiary">{title}</Title>
-                <Text variant="small" style={{ opacity: 0.8, lineHeight: 1.6 }}>{text}</Text>
-              </View>
-            ))}
-          </div>
-        </View>
-
-        {/* ── Social proof ─────────────────────────────────────────────── */}
-        <View gap="l" className="bsp-section" style={{ textAlign: 'center' }}>
-          <View gap="s" alignItems="center">
-            <Title as="h2" variant="secondary">Byggd för konsulter och frilansare</Title>
-            <Text style={{ opacity: 0.75, maxWidth: 500 }}>
-              Oavsett vad du jobbar med – om du säljer din tid, passar Ossy.
-            </Text>
-          </View>
-
-          <div className="bsp-grid-3">
-            {personas.map(({ icon, label, text }) => (
-              <View
-                key={label}
-                gap="m"
-                inset="l"
-                roundness="m"
-                alignItems="center"
-                style={{
-                  border: '1px solid var(--separator)',
-                  textAlign: 'center',
-                }}
-              >
-                <View
-                  style={{
-                    width: 52,
-                    height: 52,
-                    borderRadius: '50%',
-                    background: 'hsl(200, 60%, 93%)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
-                  <Icon2 name={icon} size="m" />
-                </View>
-                <Title as="h3" variant="tertiary">{label}</Title>
-                <Text variant="small" style={{ opacity: 0.75, lineHeight: 1.6 }}>{text}</Text>
-              </View>
-            ))}
-          </div>
-        </View>
-
-        {/* ── Pricing ──────────────────────────────────────────────────── */}
-        <View gap="l" className="bsp-section" alignItems="center" style={{ textAlign: 'center' }}>
-          <View gap="s" alignItems="center">
-            <Title as="h2" variant="secondary">Enkel och transparent prissättning</Title>
-            <Text style={{ opacity: 0.75 }}>Inga överraskningar. Avsluta när du vill.</Text>
-          </View>
-
-          <View
-            gap="l"
-            inset="xl"
-            roundness="m"
-            alignItems="center"
-            style={{
-              background: 'hsl(0, 0%, 100%)',
-              border: '2px solid hsl(167, 89%, 43%)',
-              boxShadow: '0 4px 24px hsl(167, 89%, 88%)',
-              maxWidth: 420,
-              width: '100%',
-            }}
-          >
-            <View gap="xs" alignItems="center">
-              <Text variant="small" style={{ opacity: 0.6, letterSpacing: 1, textTransform: 'uppercase' }}>
-                Bokningskalender
-              </Text>
-              <Title as="p" variant="display" style={{ lineHeight: 1, letterSpacing: '-1px' }}>
-                299
-                <span style={{ fontSize: '1.2rem', fontWeight: 500, opacity: 0.7 }}> SEK/mån</span>
-              </Title>
-            </View>
-
-            <View gap="s" style={{ width: '100%', textAlign: 'left' }}>
-              {included.map(({ icon, text }) => (
-                <View key={text} layout="row" gap="s" alignItems="center">
-                  <Icon2 name={icon} size="xs" style={{ color: 'hsl(167, 89%, 43%)', flexShrink: 0 }} />
-                  <Text variant="small">{text}</Text>
-                </View>
-              ))}
-            </View>
-
-            <Button
-              variant="cta"
-              href="/sign-up"
-              style={{ width: '100%', padding: '14px 0', fontSize: '1rem', textAlign: 'center' }}
-            >
-              Starta din bokningssida
-            </Button>
-
-            <Text variant="small" style={{ opacity: 0.5 }}>
-              Inget betalkort krävs för att komma igång.
-            </Text>
-          </View>
-        </View>
-
-        {/* ── Footer CTA ───────────────────────────────────────────────── */}
-        <View
-          gap="l"
-          inset="xl"
-          roundness="m"
-          alignItems="center"
-          style={{
-            background: 'linear-gradient(135deg, hsl(200, 100%, 17%) 0%, hsl(170, 70%, 22%) 100%)',
-            textAlign: 'center',
-          }}
-        >
-          <View gap="m" alignItems="center" style={{ maxWidth: 540 }}>
-            <Title
-              as="h2"
-              variant="secondary"
-              style={{ color: 'hsl(0, 0%, 98%)', letterSpacing: '-0.25px' }}
-            >
-              Redo att sluta jaga tider?
-            </Title>
-            <Text style={{ color: 'hsl(0, 0%, 80%)', fontSize: '1.05rem', lineHeight: 1.6 }}>
-              Kom igång på under fem minuter. Din bokningssida är live direkt.
-            </Text>
-          </View>
-
-          <Button
-            variant="cta"
-            href="/sign-up"
-            style={{ padding: '14px 40px', fontSize: '1.05rem' }}
-          >
-            Kom igång gratis
-          </Button>
-        </View>
-
-      </PageSection>
-    </>
-  )
-}
+export default () => <SalesSection cover={cover} features={features} />