@ossy/booking 1.1.0

package/README.md

@@ -0,0 +1,27 @@
+# @ossy/booking
+
+Booking feature package for the Ossy platform. Lets consultants define services, set weekly availability, and accept client bookings with optional Stripe payment.
+
+## Pages
+
+| Page | Path | Audience |
+|------|------|----------|
+| `booking-page` | `/book/:workspaceId` | Public (clients) |
+| `services` | `/services` | Consultant (authenticated) |
+| `bookings` | `/bookings` | Consultant (authenticated) |
+| `availability` | `/availability` | Consultant (authenticated) |
+
+## Resource templates
+
+Three resource schemas are registered under the `@ossy/booking` category:
+
+- `@ossy/booking/service` — what a consultant sells
+- `@ossy/booking/booking` — a confirmed appointment
+- `@ossy/booking/availability` — recurring weekly availability window
+
+## What still needs implementation
+
+- **Slot generation** — derive available time slots from `availability` records minus existing `booking` records
+- **Stripe integration** — create a PaymentIntent on booking submit, webhook to flip `paymentStatus`
+- **Confirmation emails** — `booking.send-confirmation-email` task
+- **Public workspace resolution** — resolve `workspaceId` param on the public booking page without auth

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@ossy/booking",
+  "description": "Booking feature package — services, availability, and appointment management for Ossy consultants",
+  "version": "1.1.0",
+  "type": "module",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "author": "Ossy <yourfriends@ossy.se> (https://ossy.se)",
+  "license": "MIT",
+  "ossy": {
+    "src": "./src"
+  },
+  "peerDependencies": {
+    "@ossy/design-system": ">=1.0.0",
+    "@ossy/router-react": ">=1.0.0",
+    "@ossy/sdk-react": ">=1.0.0",
+    "react": ">=19.0.0 <20.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "/src",
+    "README.md"
+  ],
+  "gitHead": "9b116b6a4fadd570c1e6c0c6d9a4867448f7410c"
+}

package/src/AvailabilityEditor.jsx

@@ -0,0 +1,99 @@
+import React, { useState } from 'react'
+import { View, Title, Text, Button, Input, Switch } from '@ossy/design-system'
+
+const DAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+const DEFAULT_WINDOW = { enabled: false, startTime: '09:00', endTime: '17:00', bufferMinutes: 0 }
+
+const buildInitialState = (availability = []) => {
+  const state = DAY_LABELS.map(() => ({ ...DEFAULT_WINDOW }))
+  for (const window of availability) {
+    if (window.dayOfWeek >= 0 && window.dayOfWeek <= 6) {
+      state[window.dayOfWeek] = {
+        enabled: true,
+        startTime: window.startTime ?? '09:00',
+        endTime: window.endTime ?? '17:00',
+        bufferMinutes: window.bufferMinutes ?? 0,
+      }
+    }
+  }
+  return state
+}
+
+export const AvailabilityEditor = ({ availability = [], onSave }) => {
+  const [days, setDays] = useState(() => buildInitialState(availability))
+
+  const update = (idx, patch) =>
+    setDays((prev) => prev.map((d, i) => (i === idx ? { ...d, ...patch } : d)))
+
+  const handleSave = () => {
+    const windows = days
+      .map((d, idx) => ({ dayOfWeek: idx, ...d }))
+      .filter((d) => d.enabled)
+      .map(({ dayOfWeek, startTime, endTime, bufferMinutes }) => ({
+        dayOfWeek,
+        startTime,
+        endTime,
+        bufferMinutes: Number(bufferMinutes),
+      }))
+
+    // TODO: dispatch booking.set-availability action with `windows`
+    onSave?.(windows)
+  }
+
+  return (
+    <View gap="m">
+      <View gap="s">
+        {DAY_LABELS.map((label, idx) => (
+          <View
+            key={label}
+            layout="row"
+            gap="m"
+            alignItems="center"
+            surface="secondary"
+            roundness="m"
+            inset="s"
+          >
+            <Switch
+              checked={days[idx].enabled}
+              onChange={(enabled) => update(idx, { enabled })}
+            />
+            <Text weight="medium" style={{ width: '2.5rem', flexShrink: 0 }}>{label}</Text>
+
+            {days[idx].enabled ? (
+              <View layout="row" gap="s" alignItems="center" style={{ flex: 1 }}>
+                <Input
+                  type="time"
+                  value={days[idx].startTime}
+                  onChange={(v) => update(idx, { startTime: v })}
+                  size="s"
+                />
+                <Text color="secondary">to</Text>
+                <Input
+                  type="time"
+                  value={days[idx].endTime}
+                  onChange={(v) => update(idx, { endTime: v })}
+                  size="s"
+                />
+                <Text color="secondary" size="s">Buffer</Text>
+                <Input
+                  type="number"
+                  value={String(days[idx].bufferMinutes)}
+                  onChange={(v) => update(idx, { bufferMinutes: v })}
+                  size="s"
+                  style={{ width: '4rem' }}
+                />
+                <Text color="secondary" size="s">min</Text>
+              </View>
+            ) : (
+              <Text color="secondary" size="s">Unavailable</Text>
+            )}
+          </View>
+        ))}
+      </View>
+
+      {/* TODO: wire to booking.set-availability action */}
+      <Button variant="primary" onPress={handleSave}>Save availability</Button>
+    </View>
+  )
+}

package/src/BookingForm.jsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+import { View, Title, Text, Button, Input, Select } from '@ossy/design-system'
+
+/**
+ * Public client-facing form.
+ *
+ * TODO:
+ * - Load services for workspaceId via booking.get-services
+ * - Load available slots for selected service via booking.get-available-slots
+ * - On submit: call booking.create-booking action, then redirect to Stripe Checkout
+ */
+export const BookingForm = ({ workspaceId }) => {
+  const [step, setStep] = useState('pick-service')
+  const [selectedService, setSelectedService] = useState(null)
+  const [selectedSlot, setSelectedSlot] = useState(null)
+  const [clientName, setClientName] = useState('')
+  const [clientEmail, setClientEmail] = useState('')
+
+  if (step === 'pick-service') {
+    return (
+      <View gap="m">
+        <Title variant="secondary">Choose a service</Title>
+        {/* TODO: replace with real services loaded from API */}
+        <Text color="secondary">Loading services for workspace {workspaceId}…</Text>
+        <Button variant="secondary" onPress={() => setStep('pick-slot')}>
+          Continue (placeholder)
+        </Button>
+      </View>
+    )
+  }
+
+  if (step === 'pick-slot') {
+    return (
+      <View gap="m">
+        <Title variant="secondary">Pick a time</Title>
+        {/* TODO: render a slot grid derived from availability minus existing bookings */}
+        <Text color="secondary">Available slots will appear here.</Text>
+        <View layout="row" gap="s">
+          <Button variant="ghost" onPress={() => setStep('pick-service')}>Back</Button>
+          <Button variant="secondary" onPress={() => setStep('enter-details')}>
+            Continue (placeholder)
+          </Button>
+        </View>
+      </View>
+    )
+  }
+
+  if (step === 'enter-details') {
+    return (
+      <View gap="m">
+        <Title variant="secondary">Your details</Title>
+        <Input
+          label="Name"
+          value={clientName}
+          onChange={setClientName}
+          placeholder="Jane Smith"
+        />
+        <Input
+          label="Email"
+          type="email"
+          value={clientEmail}
+          onChange={setClientEmail}
+          placeholder="jane@example.com"
+        />
+        <View layout="row" gap="s">
+          <Button variant="ghost" onPress={() => setStep('pick-slot')}>Back</Button>
+          {/* TODO: submit booking action then redirect to Stripe */}
+          <Button variant="primary" onPress={() => setStep('confirm')}>
+            Confirm &amp; Pay
+          </Button>
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <View gap="m">
+      <Title variant="secondary">Booking confirmed!</Title>
+      <Text>Check your email for a confirmation.</Text>
+    </View>
+  )
+}

package/src/BookingList.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { View, Title, Text, Badge } from '@ossy/design-system'
+
+const STATUS_VARIANT = {
+  pending: 'warning',
+  confirmed: 'success',
+  cancelled: 'neutral',
+}
+
+const PAYMENT_VARIANT = {
+  unpaid: 'warning',
+  paid: 'success',
+  refunded: 'neutral',
+}
+
+const formatDateTime = (iso) => {
+  if (!iso) return '—'
+  return new Intl.DateTimeFormat('sv-SE', {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(new Date(iso))
+}
+
+const BookingRow = ({ booking }) => (
+  <View
+    surface="secondary"
+    roundness="m"
+    inset="m"
+    layout="row"
+    justifyContent="space-between"
+    alignItems="center"
+    gap="m"
+  >
+    <View gap="xs" style={{ flex: 1 }}>
+      <Text weight="medium">{booking.clientName}</Text>
+      <Text size="s" color="secondary">{booking.clientEmail}</Text>
+      <Text size="s" color="secondary">{formatDateTime(booking.startsAt)}</Text>
+    </View>
+
+    <View layout="row" gap="s" alignItems="center">
+      <Badge
+        label={booking.paymentStatus}
+        variant={PAYMENT_VARIANT[booking.paymentStatus] ?? 'neutral'}
+        size="s"
+      />
+      <Badge
+        label={booking.status}
+        variant={STATUS_VARIANT[booking.status] ?? 'neutral'}
+        size="s"
+      />
+    </View>
+  </View>
+)
+
+export const BookingList = ({ bookings = [] }) => {
+  if (bookings.length === 0) {
+    return (
+      <View inset="m" surface="secondary" roundness="m" alignItems="center">
+        <Text color="secondary">No bookings yet.</Text>
+      </View>
+    )
+  }
+
+  return (
+    <View gap="s">
+      {bookings.map((booking) => (
+        <BookingRow key={booking.id ?? booking.startsAt} booking={booking} />
+      ))}
+    </View>
+  )
+}

package/src/Definition.js

@@ -0,0 +1,29 @@
+export const Definition = {
+  id: 'booking',
+  title: 'Booking',
+  description: 'Services, availability windows, and client appointment management for consultants.',
+  module: {
+    id: 'booking',
+    enabled: true,
+  },
+  statuses: ['beta'],
+  actions: [
+    'booking.create-service',
+    'booking.update-service',
+    'booking.delete-service',
+    'booking.create-booking',
+    'booking.confirm-booking',
+    'booking.cancel-booking',
+    'booking.set-availability',
+  ],
+  views: [
+    'booking.get-services',
+    'booking.get-bookings',
+    'booking.get-availability',
+    'booking.get-available-slots',
+  ],
+  tasks: [
+    'booking.send-confirmation-email',
+    'booking.sync-stripe-payment-status',
+  ],
+}

package/src/ServiceCard.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { View, Title, Text, Badge } from '@ossy/design-system'
+
+const formatPrice = (cents, currency) => {
+  if (cents === 0) return 'Free'
+  return new Intl.NumberFormat('sv-SE', { style: 'currency', currency }).format(cents / 100)
+}
+
+const formatDuration = (minutes) => {
+  if (minutes < 60) return `${minutes} min`
+  const h = Math.floor(minutes / 60)
+  const m = minutes % 60
+  return m === 0 ? `${h}h` : `${h}h ${m}min`
+}
+
+export const ServiceCard = ({ name, duration, price, currency = 'SEK', description, active }) => (
+  <View
+    surface="secondary"
+    roundness="m"
+    inset="m"
+    gap="xs"
+    layout="row"
+    justifyContent="space-between"
+    alignItems="flex-start"
+  >
+    <View gap="xs" style={{ flex: 1 }}>
+      <View layout="row" gap="s" alignItems="center">
+        <Title variant="secondary">{name}</Title>
+        {!active && <Badge label="Inactive" variant="neutral" size="s" />}
+      </View>
+      {description && <Text size="s" color="secondary">{description}</Text>}
+    </View>
+
+    <View gap="xs" alignItems="flex-end" style={{ flexShrink: 0 }}>
+      <Text weight="medium">{formatPrice(price, currency)}</Text>
+      <Text size="s" color="secondary">{formatDuration(duration)}</Text>
+    </View>
+  </View>
+)

package/src/availability.page.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { View, Title, Text, Tags } from '@ossy/design-system'
+import { Definition } from './Definition.js'
+import { moduleStatusTags } from './moduleStatus.js'
+import { AvailabilityEditor } from './AvailabilityEditor.jsx'
+
+export const metadata = {
+  id: 'booking/availability',
+  path: {
+    sv: '/tillganglighet',
+    en: '/availability',
+  },
+}
+
+const AvailabilityPage = () => (
+  <View
+    gap="m"
+    surface="primary"
+    style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}
+  >
+    <View inset="s" gap="s">
+      <View layout="row" gap="s" alignItems="center">
+        <Title>{Definition.title} — Availability</Title>
+        {moduleStatusTags(Definition).length > 0 && (
+          <Tags tags={moduleStatusTags(Definition)} size="s" />
+        )}
+      </View>
+
+      <Text style={{ maxWidth: '400px' }}>
+        Set your weekly availability. Clients can only book slots within these windows.
+      </Text>
+    </View>
+
+    <View inset="s">
+      {/* TODO: load existing availability via booking.get-availability, save via booking.set-availability */}
+      <AvailabilityEditor availability={[]} />
+    </View>
+  </View>
+)
+
+export default AvailabilityPage

package/src/availability.resource.js

@@ -0,0 +1,27 @@
+export default {
+  name: 'Availability',
+  id: '@ossy/booking/availability',
+  categoryName: 'Booking',
+  icon: 'clock',
+  fields: [
+    {
+      // 0 = Sunday … 6 = Saturday
+      name: 'dayOfWeek',
+      type: 'number',
+    },
+    {
+      // "HH:MM" 24-hour format
+      name: 'startTime',
+      type: 'text',
+    },
+    {
+      // "HH:MM" 24-hour format
+      name: 'endTime',
+      type: 'text',
+    },
+    {
+      name: 'bufferMinutes',
+      type: 'number',
+    },
+  ],
+}

package/src/booking-page.page.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { View, Title, Text } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+import { BookingForm } from './BookingForm.jsx'
+
+export const metadata = {
+  id: 'booking/book',
+  // Public-facing — no auth required
+  public: true,
+  path: {
+    sv: '/boka/:workspaceId',
+    en: '/book/:workspaceId',
+  },
+}
+
+const BookingPage = () => {
+  const router = useRouter()
+  const { workspaceId } = router.params
+
+  return (
+    <View
+      surface="base"
+      layout="off-center-s"
+      inset="s"
+      style={{ minHeight: '100dvh' }}
+    >
+      <title>Book a session</title>
+
+      <View inset="m" roundness="l" surface="primary" slot="content" gap="m">
+        <View gap="xs">
+          <Title>Book a session</Title>
+          <Text>Pick a time that works for you and confirm your appointment.</Text>
+        </View>
+
+        {/* TODO: load services for workspaceId, let client pick one */}
+        <BookingForm workspaceId={workspaceId} />
+      </View>
+    </View>
+  )
+}
+
+export default BookingPage

package/src/booking.resource.js

@@ -0,0 +1,46 @@
+export default {
+  name: 'Booking',
+  id: '@ossy/booking/booking',
+  categoryName: 'Booking',
+  icon: 'calendar-check',
+  fields: [
+    {
+      name: 'serviceId',
+      type: 'text',
+    },
+    {
+      name: 'clientName',
+      type: 'text',
+    },
+    {
+      name: 'clientEmail',
+      type: 'text',
+    },
+    {
+      name: 'startsAt',
+      type: 'text',
+    },
+    {
+      name: 'endsAt',
+      type: 'text',
+    },
+    {
+      // pending | confirmed | cancelled
+      name: 'status',
+      type: 'text',
+    },
+    {
+      // unpaid | paid | refunded
+      name: 'paymentStatus',
+      type: 'text',
+    },
+    {
+      name: 'stripePaymentIntentId',
+      type: 'text',
+    },
+    {
+      name: 'notes',
+      type: 'textarea',
+    },
+  ],
+}

package/src/bookings.component.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { View, Title, Text, Tags } from '@ossy/design-system'
+import { Definition } from './Definition.js'
+import { moduleStatusTags } from './moduleStatus.js'
+import { BookingList } from './BookingList.jsx'
+
+export const metadata = {
+  id: 'booking/bookings',
+}
+
+export const BookingsContent = () => (
+  <View
+    gap="m"
+    surface="primary"
+    style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}
+  >
+    <View inset="s" gap="s">
+      <View layout="row" gap="s" alignItems="center">
+        <Title>{Definition.title} — Bookings</Title>
+        {moduleStatusTags(Definition).length > 0 && (
+          <Tags tags={moduleStatusTags(Definition)} size="s" />
+        )}
+      </View>
+
+      <Text style={{ maxWidth: '400px' }}>
+        Incoming appointments from your clients.
+      </Text>
+    </View>
+
+    <View gap="s" inset="s">
+      <Title variant="secondary">Upcoming</Title>
+      <BookingList bookings={[]} />
+    </View>
+  </View>
+)
+
+export default BookingsContent

package/src/bookings.page.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { View, Title, Text, Tags } from '@ossy/design-system'
+import { Definition } from './Definition.js'
+import { moduleStatusTags } from './moduleStatus.js'
+import { BookingList } from './BookingList.jsx'
+
+export const metadata = {
+  id: 'booking/bookings',
+  path: {
+    sv: '/bokningar',
+    en: '/bookings',
+  },
+}
+
+const BookingsPage = () => (
+  <View
+    gap="m"
+    surface="primary"
+    style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}
+  >
+    <View inset="s" gap="s">
+      <View layout="row" gap="s" alignItems="center">
+        <Title>{Definition.title} — Bookings</Title>
+        {moduleStatusTags(Definition).length > 0 && (
+          <Tags tags={moduleStatusTags(Definition)} size="s" />
+        )}
+      </View>
+
+      <Text style={{ maxWidth: '400px' }}>
+        Incoming appointments from your clients.
+      </Text>
+    </View>
+
+    <View gap="s" inset="s">
+      <Title variant="secondary">Upcoming</Title>
+      {/* TODO: load bookings via booking.get-bookings view, filtered by status=confirmed */}
+      <BookingList bookings={[]} />
+    </View>
+  </View>
+)
+
+export default BookingsPage

package/src/index.js

@@ -0,0 +1,6 @@
+export { Definition } from './Definition.js'
+
+export { ServiceCard } from './ServiceCard.jsx'
+export { BookingForm } from './BookingForm.jsx'
+export { BookingList } from './BookingList.jsx'
+export { AvailabilityEditor } from './AvailabilityEditor.jsx'

package/src/moduleStatus.js

@@ -0,0 +1,2 @@
+export const moduleStatusTags = (definition) =>
+  (definition.statuses ?? []).map((status) => ({ label: status }))

package/src/service.resource.js

@@ -0,0 +1,32 @@
+export default {
+  name: 'Service',
+  id: '@ossy/booking/service',
+  categoryName: 'Booking',
+  icon: 'briefcase',
+  fields: [
+    {
+      name: 'name',
+      type: 'text',
+    },
+    {
+      name: 'duration',
+      type: 'number',
+    },
+    {
+      name: 'price',
+      type: 'number',
+    },
+    {
+      name: 'currency',
+      type: 'text',
+    },
+    {
+      name: 'description',
+      type: 'textarea',
+    },
+    {
+      name: 'active',
+      type: 'boolean',
+    },
+  ],
+}

package/src/services.page.jsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { View, Title, Text, Button, Tags } from '@ossy/design-system'
+import { Definition } from './Definition.js'
+import { moduleStatusTags } from './moduleStatus.js'
+import { ServiceCard } from './ServiceCard.jsx'
+
+export const metadata = {
+  id: 'booking/services',
+  path: {
+    sv: '/tjanster',
+    en: '/services',
+  },
+}
+
+const ServicesPage = () => (
+  <View
+    gap="m"
+    surface="primary"
+    style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}
+  >
+    <View inset="s" gap="s">
+      <View layout="row" justifyContent="space-between" alignItems="center" style={{ flexShrink: 0 }}>
+        <View layout="row" gap="s" alignItems="center">
+          <Title>{Definition.title} — Services</Title>
+          {moduleStatusTags(Definition).length > 0 && (
+            <Tags tags={moduleStatusTags(Definition)} size="s" />
+          )}
+        </View>
+        {/* TODO: wire to booking.create-service action */}
+        <Button variant="primary" size="s">Add service</Button>
+      </View>
+
+      <Text style={{ maxWidth: '400px' }}>
+        Define what you offer — name, duration, and price. Clients will see these when booking.
+      </Text>
+    </View>
+
+    <View gap="s" inset="s">
+      <Title variant="secondary">Your services</Title>
+
+      {/* TODO: load services via booking.get-services view */}
+      <View gap="s">
+        <ServiceCard
+          name="Intro call"
+          duration={30}
+          price={0}
+          currency="SEK"
+          description="A free 30-minute intro to see if we're a good fit."
+          active
+        />
+        <ServiceCard
+          name="Strategy session"
+          duration={60}
+          price={150000}
+          currency="SEK"
+          description="Deep-dive strategy session."
+          active
+        />
+      </View>
+    </View>
+  </View>
+)
+
+export default ServicesPage