@ossy/booking 1.16.2 → 1.16.3

package/src/stories/HeroCover.stories.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { HeroCover } from '../HeroCover.jsx'
+import { sampleHeroCover } from './fixtures.js'
+
+export default {
+  title: 'Booking/Components/HeroCover',
+  component: HeroCover,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      story: {
+        inline: true,
+        height: 'auto',
+      },
+    },
+  },
+}
+
+export const Default = () => <HeroCover {...sampleHeroCover} />
+
+export const SingleAction = () => (
+  <HeroCover
+    {...sampleHeroCover}
+    actions={[{ label: 'Start booking setup', variant: 'cta' }]}
+  />
+)
+
+export const CompactTitle = () => (
+  <HeroCover
+    title="Simple scheduling for small teams"
+    titleMaxWidth="640px"
+    text="Publish services, collect requests, and confirm appointments from one workspace."
+    actions={[{ label: 'Explore booking', variant: 'primary' }]}
+  />
+)
+
+export const Minimal = () => (
+  <HeroCover
+    title="Booking"
+    text="Let clients request time with you online."
+  />
+)

package/src/stories/PublicBookingForm.stories.jsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react'
+import { Button, View, Form, FieldFactory } from '@ossy/design-system'
+import publicBookingResource from '../public-booking-form.schema.js'
+import { metadata as publicBookingFormMeta } from '../public-booking-form.form.js'
+import { samplePublicBookingFormData } from './fixtures.js'
+
+const dataPreviewStyle = {
+  margin: 0,
+  padding: 'var(--space-s)',
+  background: 'var(--color-secondary)',
+  color: 'var(--text-default-color, CanvasText)',
+  borderRadius: 'var(--space-xs)',
+  border: '1px solid var(--separator-primary)',
+  fontSize: 12,
+  overflow: 'auto',
+}
+
+export default {
+  title: 'Booking/Forms/PublicBookingForm',
+  component: Form,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      story: {
+        inline: true,
+        height: 'auto',
+      },
+    },
+  },
+}
+
+function PublicBookingFormShell ({ initial = {} }) {
+  const [preview, setPreview] = useState(initial)
+
+  return (
+    <View
+      surface="primary"
+      inset="m"
+      roundness="m"
+      gap="m"
+      style={{ maxWidth: 480, width: '100%', fontFamily: 'system-ui, sans-serif' }}
+    >
+      <Form
+        id="storybook/booking/public-booking"
+        schemaId={publicBookingFormMeta.schemaId}
+        fields={publicBookingResource.fields}
+        defaultData={initial}
+        onChange={({ data }) => setPreview(data)}
+        onSubmit={(data) => setPreview(data)}
+        gap="m"
+      >
+        <FieldFactory />
+        <Button type="submit" variant="cta">
+          Request booking
+        </Button>
+      </Form>
+      <pre style={dataPreviewStyle}>{JSON.stringify(preview, null, 2)}</pre>
+    </View>
+  )
+}
+
+export const Empty = () => <PublicBookingFormShell />
+
+export const Prefilled = () => (
+  <PublicBookingFormShell initial={samplePublicBookingFormData} />
+)

package/src/stories/PublicBookingPage.stories.jsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import PublicBookingPage from '../public-booking.page.jsx'
+import { withMockSdk } from './decorators.jsx'
+import { useAdvancePublicBookingStep } from './story-helpers.jsx'
+import { sampleProviderContact } from './fixtures.js'
+
+export default {
+  title: 'Booking/Pages/PublicBookingPage',
+  component: PublicBookingPage,
+  decorators: [withMockSdk],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      story: {
+        inline: false,
+        height: '720px',
+      },
+    },
+  },
+}
+
+const pageArgs = {
+  providerSlug: sampleProviderContact.workspaceId,
+}
+
+export const ServiceSelection = {
+  args: pageArgs,
+  parameters: {
+    mockSdk: {},
+  },
+}
+
+function CalendarStepStory () {
+  useAdvancePublicBookingStep('pick-slot')
+  return <PublicBookingPage providerSlug={pageArgs.providerSlug} />
+}
+
+export const CalendarAndSlots = {
+  render: () => <CalendarStepStory />,
+  args: pageArgs,
+  parameters: {
+    mockSdk: {},
+  },
+}
+
+function ClientDetailsStepStory () {
+  useAdvancePublicBookingStep('fill-form')
+  return <PublicBookingPage providerSlug={pageArgs.providerSlug} />
+}
+
+export const ClientDetailsForm = {
+  render: () => <ClientDetailsStepStory />,
+  args: pageArgs,
+  parameters: {
+    mockSdk: {},
+  },
+}
+
+export const NoServices = {
+  args: pageArgs,
+  parameters: {
+    mockSdk: {
+      publicServices: {
+        services: [],
+        contact: sampleProviderContact,
+      },
+    },
+  },
+}
+
+export const ServicesLoadError = {
+  args: pageArgs,
+  parameters: {
+    mockSdk: {
+      '@ossy/booking/actions/get-services': () => Promise.reject(new Error('Provider unavailable')),
+    },
+  },
+}

package/src/stories/ServiceCard.stories.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { View } from '@ossy/design-system'
+import { ServiceCard } from '../ServiceCard.jsx'
+import { sampleServices } from './fixtures.js'
+
+export default {
+  title: 'Booking/Components/ServiceCard',
+  component: ServiceCard,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      story: {
+        inline: true,
+        height: 'auto',
+      },
+    },
+  },
+}
+
+const cardShell = (props) => (
+  <View style={{ maxWidth: 520, width: '100%' }}>
+    <ServiceCard {...props} />
+  </View>
+)
+
+export const Default = () => cardShell(sampleServices[0])
+
+export const FreeService = () =>
+  cardShell({
+    ...sampleServices[0],
+    name: 'Intro call',
+    price: 0,
+    duration: 30,
+    description: 'A short complimentary introduction.',
+  })
+
+export const Inactive = () => cardShell(sampleServices[2])
+
+export const LongDescription = () =>
+  cardShell({
+    ...sampleServices[0],
+    description:
+      'A comprehensive first meeting covering goals, constraints, timeline, and deliverables. We leave with a shared understanding of scope and a proposed next step.',
+  })
+
+export const AllVariants = () => (
+  <View gap="m" style={{ maxWidth: 520, width: '100%' }}>
+    {sampleServices.map((service) => (
+      <ServiceCard key={service.name} {...service} />
+    ))}
+  </View>
+)

package/src/stories/ServiceDetail.stories.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { View } from '@ossy/design-system'
+import ServiceDetailComponent from '../service-detail.component.jsx'
+import { sampleServiceResource } from './fixtures.js'
+
+export default {
+  title: 'Booking/Components/ServiceDetail',
+  component: ServiceDetailComponent,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      story: {
+        inline: true,
+        height: 'auto',
+      },
+    },
+  },
+}
+
+const detailShell = (resource) => (
+  <View surface="primary" roundness="m" style={{ maxWidth: 560, width: '100%' }}>
+    <ServiceDetailComponent resource={resource} />
+  </View>
+)
+
+export const ActiveService = () => detailShell(sampleServiceResource)
+
+export const FreeService = () =>
+  detailShell({
+    ...sampleServiceResource,
+    name: 'Intro call',
+    content: {
+      ...sampleServiceResource.content,
+      name: 'Intro call',
+      price: 0,
+      duration: 30,
+      description: 'A short complimentary introduction call.',
+    },
+  })
+
+export const InactiveService = () =>
+  detailShell({
+    ...sampleServiceResource,
+    content: {
+      ...sampleServiceResource.content,
+      name: 'Legacy workshop',
+      active: false,
+      price: 0,
+      duration: 120,
+      description: 'No longer offered to new clients.',
+    },
+  })

package/src/stories/ServiceForm.stories.jsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react'
+import { Button, View, Form, FieldFactory } from '@ossy/design-system'
+import serviceResource from '../service.schema.js'
+import { metadata as serviceFormMeta } from '../service.form.js'
+import { sampleServiceFormData } from './fixtures.js'
+
+const dataPreviewStyle = {
+  margin: 0,
+  padding: 'var(--space-s)',
+  background: 'var(--color-secondary)',
+  color: 'var(--text-default-color, CanvasText)',
+  borderRadius: 'var(--space-xs)',
+  border: '1px solid var(--separator-primary)',
+  fontSize: 12,
+  overflow: 'auto',
+}
+
+export default {
+  title: 'Booking/Forms/ServiceForm',
+  component: Form,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      story: {
+        inline: true,
+        height: 'auto',
+      },
+    },
+  },
+}
+
+function ServiceFormShell ({ initial = sampleServiceFormData }) {
+  const [preview, setPreview] = useState(initial)
+
+  return (
+    <View
+      surface="primary"
+      inset="m"
+      roundness="m"
+      gap="m"
+      style={{ maxWidth: 480, width: '100%', fontFamily: 'system-ui, sans-serif' }}
+    >
+      <Form
+        id="storybook/booking/service"
+        schemaId={serviceFormMeta.schemaId}
+        fields={serviceResource.fields}
+        defaultData={initial}
+        onChange={({ data }) => setPreview(data)}
+        onSubmit={(data) => setPreview(data)}
+        gap="m"
+      >
+        <FieldFactory />
+        <Button type="submit" variant="cta">
+          Save service
+        </Button>
+      </Form>
+      <pre style={dataPreviewStyle}>{JSON.stringify(preview, null, 2)}</pre>
+    </View>
+  )
+}
+
+export const Default = () => <ServiceFormShell />
+
+export const Empty = () => <ServiceFormShell initial={{ active: true, currency: 'SEK' }} />

package/src/stories/ServicesPage.stories.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import ServicesPage from '../services.page.jsx'
+import { withMockSdk } from './decorators.jsx'
+import { useOpenServicesCreateForm } from './story-helpers.jsx'
+
+export default {
+  title: 'Booking/Pages/ServicesPage',
+  component: ServicesPage,
+  decorators: [withMockSdk],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      story: {
+        inline: false,
+        height: '640px',
+      },
+    },
+  },
+}
+
+export const ListWithServices = {
+  parameters: {
+    mockSdk: {},
+  },
+}
+
+export const EmptyList = {
+  parameters: {
+    mockSdk: {
+      services: [],
+    },
+  },
+}
+
+function CreateFormOpenStory () {
+  useOpenServicesCreateForm()
+  return <ServicesPage />
+}
+
+export const CreateFormOpen = {
+  render: () => <CreateFormOpenStory />,
+  parameters: {
+    mockSdk: {},
+  },
+}
+
+export const LoadError = {
+  parameters: {
+    mockSdk: {
+      '@ossy/booking/actions/get-services': () => Promise.reject(new Error('Failed to load services')),
+    },
+  },
+}

package/src/stories/decorators.jsx

@@ -0,0 +1,68 @@
+import {
+  createMockRouterDecorator,
+  createMockSdkDecorator,
+  resolveMockActionId,
+} from '../../../../.storybook/decorators/index.jsx'
+import {
+  buildSampleSlots,
+  sampleAvailabilitySettings,
+  sampleBookings,
+  samplePublicServicesResponse,
+  sampleServicesWithIds,
+} from './fixtures.js'
+
+export { resolveMockActionId }
+
+export function createMockSdkHandlers (overrides = {}) {
+  return {
+    '@ossy/booking/actions/get-services': async (payload) => {
+      if (payload?.providerSlug) {
+        if ('publicServices' in overrides) return overrides.publicServices
+        return samplePublicServicesResponse
+      }
+      if ('services' in overrides) return overrides.services
+      return sampleServicesWithIds
+    },
+    '@ossy/booking/actions/list': async () => (
+      'bookings' in overrides ? overrides.bookings : sampleBookings
+    ),
+    '@ossy/booking/actions/get-available-slots': async () => (
+      'slots' in overrides ? overrides.slots : buildSampleSlots()
+    ),
+    '@ossy/booking/actions/get-availability': async () => (
+      'availability' in overrides ? overrides.availability : sampleAvailabilitySettings
+    ),
+    '@ossy/booking/actions/create-service': async () => ({}),
+    '@ossy/booking/actions/update-service': async () => ({}),
+    '@ossy/booking/actions/delete-service': async () => ({}),
+    '@ossy/booking/actions/save-availability': async () => ({}),
+    '@ossy/booking/actions/create': async () => ({}),
+    '@ossy/booking/actions/confirm': async () => ({}),
+    '@ossy/booking/actions/decline': async () => ({}),
+    '@ossy/booking/actions/cancel': async () => ({}),
+  }
+}
+
+const defaultMockRouter = {
+  href: 'http://localhost/en/bookings',
+  pages: [],
+  language: 'en',
+  defaultLanguage: 'en',
+  supportedLanguages: ['en', 'sv'],
+  params: {},
+  searchParams: {},
+  navigate: () => {},
+  getHref: ({ id, params = {} } = {}) => {
+    if (id === 'booking/booking-detail' && params.bookingId) {
+      return `/en/bookings/${params.bookingId}`
+    }
+    if (id === 'public-booking' && params.providerSlug) {
+      return `/en/book/${params.providerSlug}`
+    }
+    return `/en/${String(id).replace(/\//g, '-')}`
+  },
+  back: () => {},
+}
+
+export const withMockSdk = createMockSdkDecorator(createMockSdkHandlers)
+export const withMockRouter = createMockRouterDecorator(defaultMockRouter)

package/src/stories/fixtures.js

@@ -0,0 +1,149 @@
+export const sampleServices = [
+  {
+    name: 'Initial consultation',
+    duration: 60,
+    price: 120000,
+    currency: 'SEK',
+    description: 'A focused first meeting to understand your needs and outline next steps.',
+    active: true,
+  },
+  {
+    name: 'Follow-up session',
+    duration: 45,
+    price: 90000,
+    currency: 'SEK',
+    description: 'Check in on progress and adjust the plan.',
+    active: true,
+  },
+  {
+    name: 'Legacy workshop',
+    duration: 120,
+    price: 0,
+    currency: 'SEK',
+    description: 'No longer offered to new clients.',
+    active: false,
+  },
+]
+
+export const sampleBookings = [
+  {
+    id: 'booking-1',
+    clientName: 'Anna Svensson',
+    clientEmail: 'anna@example.com',
+    startsAt: Date.parse('2026-06-20T09:00:00.000Z'),
+    duration: 60,
+    status: 'pending',
+    paymentStatus: 'unpaid',
+    clientMessage: 'Looking forward to discussing the project scope.',
+  },
+  {
+    id: 'booking-2',
+    clientName: 'Erik Johansson',
+    clientEmail: 'erik@example.com',
+    startsAt: Date.parse('2026-06-22T13:30:00.000Z'),
+    duration: 45,
+    status: 'confirmed',
+    paymentStatus: 'paid',
+  },
+  {
+    id: 'booking-3',
+    clientName: 'Maria Lind',
+    clientEmail: 'maria@example.com',
+    startsAt: Date.parse('2026-06-10T10:00:00.000Z'),
+    duration: 60,
+    status: 'cancelled',
+    paymentStatus: 'refunded',
+  },
+]
+
+export const sampleAvailability = [
+  { dayOfWeek: 1, startTime: '09:00', endTime: '12:00' },
+  { dayOfWeek: 1, startTime: '13:00', endTime: '17:00' },
+  { dayOfWeek: 2, startTime: '10:00', endTime: '16:00' },
+  { dayOfWeek: 4, startTime: '08:30', endTime: '11:30' },
+]
+
+export const sampleServiceFormData = {
+  name: 'Strategy session',
+  duration: 90,
+  price: 150000,
+  currency: 'SEK',
+  description: 'Deep-dive strategy workshop for growing teams.',
+  active: true,
+}
+
+export const samplePublicBookingFormData = {
+  clientName: 'Anna Svensson',
+  clientEmail: 'anna@example.com',
+  clientMessage: 'I would like to book the initial consultation.',
+}
+
+export const sampleServicesWithIds = sampleServices.map((service, index) => ({
+  ...service,
+  id: `service-${index + 1}`,
+}))
+
+export const sampleProviderContact = {
+  workspaceId: 'demo-studio',
+  providerEmail: 'hello@demo.studio',
+  providerName: 'Demo Studio',
+}
+
+export const samplePublicServicesResponse = {
+  services: sampleServicesWithIds.filter((service) => service.active),
+  contact: sampleProviderContact,
+}
+
+/** Slots on upcoming weekdays so the public booking calendar has selectable dates. */
+export function buildSampleSlots ({ fromDate = new Date() } = {}) {
+  const slots = []
+  const cursor = new Date(fromDate)
+  cursor.setHours(0, 0, 0, 0)
+
+  for (let day = 0; day < 45 && slots.length < 18; day += 1) {
+    const date = new Date(cursor)
+    date.setDate(cursor.getDate() + day)
+    const weekday = date.getDay()
+    if (weekday === 0 || weekday === 6) continue
+
+    for (const hour of [9, 11, 14, 16]) {
+      const start = new Date(date)
+      start.setHours(hour, 0, 0, 0)
+      if (start <= fromDate) continue
+      slots.push({
+        startAt: start.getTime(),
+        duration: 60,
+      })
+    }
+  }
+
+  return slots
+}
+
+export const sampleAvailabilitySettings = {
+  weeklyWindows: sampleAvailability,
+  sessionDurations: [30, 60],
+  bufferMinutes: 15,
+  timezone: 'Europe/Stockholm',
+}
+
+export const sampleServiceResource = {
+  name: 'Initial consultation',
+  content: {
+    name: 'Initial consultation',
+    duration: 60,
+    price: 120000,
+    currency: 'SEK',
+    description: 'A focused first meeting to understand your needs and outline next steps.',
+    active: true,
+  },
+}
+
+export const sampleHeroCover = {
+  title: 'Book time with us',
+  text: 'Share your availability, publish services, and let clients request appointments online.',
+  actions: [
+    { label: 'Get started', variant: 'cta' },
+    { label: 'See how it works', variant: 'neutral' },
+  ],
+}