@ossy/booking 1.16.3 → 3.0.1

package/README.md

@@ -67,3 +67,7 @@ Tasks write resources via `commitResource` / `mutateResource` from `@ossy/resour
 | `booking-card.component.jsx` | `@ossy/booking/view/booking/card` |
 
 See [SPEC.md](./SPEC.md) for the full product specification.
+
+## Preview
+
+Booking pages and flows are exercised in **`@ossy/app-test`** on the production build path. Enable the package in `devEntitlements`, then open Booking from the sidebar or `/packages/booking`. See [`packages/app-test/README.md`](../app-test/README.md).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/booking",
   "description": "Booking feature package — services, availability, and appointment management for Ossy providers",
-  "version": "1.16.3",
+  "version": "3.0.1",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
@@ -14,13 +14,13 @@
     "src": "./src"
   },
   "dependencies": {
-    "@ossy/email": "^1.6.3",
-    "@ossy/event-store": "^1.8.3",
-    "@ossy/observability": "^1.8.3",
-    "@ossy/platform": "^1.39.3",
-    "@ossy/resources": "^1.12.3",
-    "@ossy/users": "^1.13.3",
-    "@ossy/workspaces": "^1.17.3"
+    "@ossy/email": "^3.0.1",
+    "@ossy/event-store": "^3.0.1",
+    "@ossy/observability": "^3.0.1",
+    "@ossy/platform": "^3.0.1",
+    "@ossy/resources": "^3.0.1",
+    "@ossy/users": "^3.0.1",
+    "@ossy/workspaces": "^3.0.1"
   },
   "peerDependencies": {
     "@ossy/app": ">=1.0.0",
@@ -37,5 +37,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "a0d89185a17f8de8ce328c3a648c108ff1d61d8f"
+  "gitHead": "4a70ec216448680d2fddc57b2a8a0077489720ae"
 }

package/src/Definition.js

@@ -3,5 +3,5 @@ export const Definition = {
   title: 'Booking',
   description: 'Services, availability windows, and client appointment management for service providers.',
   icon: 'calendar',
-  statuses: ['beta'],
+  status: ['beta'],
 }

package/src/bookings.component.jsx

@@ -1,33 +1,38 @@
 import React from 'react'
 import { View, Text, Tags, Page } 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 = () => (
-  <Page>
-    <View gap="s">
-      <View layout="row" gap="s" alignItems="center">
-        <Text variant="heading-default" as="h1">{Definition.title} — Bookings</Text>
-        {moduleStatusTags(Definition).length > 0 && (
-          <Tags tags={moduleStatusTags(Definition)} size="s" />
-        )}
-      </View>
+export const BookingsContent = () => {
+  const statusTags = (Definition.status ?? [])
+    .map((s) => ({ beta: 'Beta', 'coming-soon': 'Coming Soon' }[s]))
+    .filter(Boolean)
+
+  return (
+    <Page>
+      <View gap="s">
+        <View layout="row" gap="s" alignItems="center">
+          <Text variant="heading-default" as="h1">{Definition.title} — Bookings</Text>
+          {statusTags.length > 0 && (
+            <Tags tags={statusTags} size="s" />
+          )}
+        </View>
 
-      <Text style={{ maxWidth: '400px' }}>
-        Incoming appointments from your clients.
-      </Text>
-    </View>
+        <Text style={{ maxWidth: '400px' }}>
+          Incoming appointments from your clients.
+        </Text>
+      </View>
 
-    <View gap="s">
-      <Text variant="heading-secondary" as="h2">Upcoming</Text>
-      <BookingList bookings={[]} />
-    </View>
-  </Page>
-)
+      <View gap="s">
+        <Text variant="heading-secondary" as="h2">Upcoming</Text>
+        <BookingList bookings={[]} />
+      </View>
+    </Page>
+  )
+}
 
 export default BookingsContent

package/src/public-booking.page.jsx

@@ -165,6 +165,7 @@ function PendingScreen ({ slot, t, language }) {
 export const metadata = {
   id: 'public-booking',
   public: true,
+  layout: '@ossy/app/layout/blank',
   path: { sv: '/boka/:providerSlug', en: '/book/:providerSlug' },
 }
 
@@ -254,7 +255,7 @@ export default function PublicBookingPage ({ providerSlug }) {
 
   return (
     <View surface="base" layout="off-center-s" inset="s" style={{ minHeight: '100dvh' }}>
-      <View inset="m" roundness="l" surface="primary" slot="content" gap="l" style={{ maxWidth: 720, width: '100%' }}>
+      <View inset="m" roundness="l" surface="primary" data-region="content" gap="l" style={{ maxWidth: 720, width: '100%' }}>
         <View gap="xs" style={{ borderBottom: '1px solid var(--separator)', paddingBottom: 'var(--space-m)' }}>
           <Text variant="heading-secondary" as="h2" text="publicBooking.title" />
           <Text color="secondary" text="publicBooking.description" />

package/src/moduleStatus.js

@@ -1,30 +0,0 @@
-export const MODULE_STATUS = {
-  beta: 'beta',
-  comingSoon: 'coming-soon',
-  stable: 'stable',
-  hidden: 'hidden',
-}
-
-const STATUS_TO_TAG_LABEL = {
-  [MODULE_STATUS.beta]: 'Beta',
-  [MODULE_STATUS.comingSoon]: 'Coming Soon',
-  [MODULE_STATUS.stable]: null,
-  [MODULE_STATUS.hidden]: null,
-}
-
-export function moduleStatuses(definition) {
-  const fromArray = Array.isArray(definition?.statuses) ? definition.statuses : []
-  const fromLegacy = definition?.status && typeof definition.status === 'string' ? [definition.status] : []
-  if (fromArray.length) return [...new Set(fromArray)]
-  if (fromLegacy.length) return [...new Set(fromLegacy)]
-  return []
-}
-
-export function moduleStatusTags(definition) {
-  const labels = []
-  for (const s of moduleStatuses(definition)) {
-    const label = STATUS_TO_TAG_LABEL[s]
-    if (label) labels.push(label)
-  }
-  return [...new Set(labels)]
-}

package/src/stories/AvailabilityEditor.stories.jsx

@@ -1,54 +0,0 @@
-import React, { useState } from 'react'
-import { View, Text } from '@ossy/design-system'
-import { AvailabilityEditor } from '../AvailabilityEditor.jsx'
-import { sampleAvailability } from './fixtures.js'
-
-const savedPreviewStyle = {
-  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/Components/AvailabilityEditor',
-  component: AvailabilityEditor,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      story: {
-        inline: true,
-        height: 'auto',
-      },
-    },
-  },
-}
-
-function AvailabilityEditorShell ({ availability = [] }) {
-  const [saved, setSaved] = useState(null)
-
-  return (
-    <View gap="m" style={{ maxWidth: 720, width: '100%' }}>
-      <AvailabilityEditor
-        availability={availability}
-        onSave={(windows) => setSaved(windows)}
-      />
-      {saved && (
-        <View gap="xs">
-          <Text size="s" color="secondary">Saved windows (JSON)</Text>
-          <pre style={savedPreviewStyle}>{JSON.stringify(saved, null, 2)}</pre>
-        </View>
-      )}
-    </View>
-  )
-}
-
-export const Empty = () => <AvailabilityEditorShell />
-
-export const WithExistingAvailability = () => (
-  <AvailabilityEditorShell availability={sampleAvailability} />
-)

package/src/stories/AvailabilitySetupPage.stories.jsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import AvailabilitySetupPage from '../availability-setup.page.jsx'
-import { withMockRouter, withMockSdk } from './decorators.jsx'
-import { sampleAvailabilitySettings, sampleProviderContact } from './fixtures.js'
-
-export default {
-  title: 'Booking/Pages/AvailabilitySetupPage',
-  component: AvailabilitySetupPage,
-  decorators: [withMockRouter, withMockSdk],
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      story: {
-        inline: false,
-        height: '720px',
-      },
-    },
-  },
-}
-
-export const LoadedSchedule = {
-  parameters: {
-    mockSdk: {},
-  },
-}
-
-export const EmptySchedule = {
-  parameters: {
-    mockSdk: {
-      availability: null,
-    },
-  },
-}
-
-export const WithBookingLink = {
-  args: {
-    workspaceId: sampleProviderContact.workspaceId,
-  },
-  parameters: {
-    mockSdk: {
-      availability: sampleAvailabilitySettings,
-    },
-  },
-}

package/src/stories/BookingCard.stories.jsx

@@ -1,57 +0,0 @@
-import React from 'react'
-import { View } from '@ossy/design-system'
-import { BookingCard } from '../booking-card.component.jsx'
-import { sampleBookings } from './fixtures.js'
-
-export default {
-  title: 'Booking/Components/BookingCard',
-  component: BookingCard,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      story: {
-        inline: true,
-        height: 'auto',
-      },
-    },
-  },
-}
-
-const cardShell = (booking, handlers = {}) => (
-  <View style={{ maxWidth: 560, width: '100%' }}>
-    <BookingCard booking={booking} {...handlers} />
-  </View>
-)
-
-const mockAction = (label) => async () => {
-  await new Promise((resolve) => setTimeout(resolve, 400))
-  // eslint-disable-next-line no-console
-  console.log(`[Storybook] ${label}`)
-}
-
-export const Pending = () =>
-  cardShell(sampleBookings[0], {
-    onConfirm: mockAction('confirm'),
-    onDecline: mockAction('decline'),
-    onView: mockAction('view'),
-  })
-
-export const Confirmed = () =>
-  cardShell(sampleBookings[1], {
-    onCancel: mockAction('cancel'),
-    onView: mockAction('view'),
-  })
-
-export const Cancelled = () => cardShell(sampleBookings[2])
-
-export const WithMessage = () =>
-  cardShell(
-    {
-      ...sampleBookings[1],
-      clientMessage:
-        'Please focus on onboarding improvements during our session. I have a few specific questions about team workflows.',
-    },
-    {
-      onCancel: mockAction('cancel'),
-    },
-  )

package/src/stories/BookingList.stories.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import { View } from '@ossy/design-system'
-import { BookingList } from '../BookingList.jsx'
-import { sampleBookings } from './fixtures.js'
-
-export default {
-  title: 'Booking/Components/BookingList',
-  component: BookingList,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      story: {
-        inline: true,
-        height: 'auto',
-      },
-    },
-  },
-}
-
-const listShell = (bookings) => (
-  <View style={{ maxWidth: 640, width: '100%' }}>
-    <BookingList bookings={bookings} />
-  </View>
-)
-
-export const Empty = () => listShell([])
-
-export const Populated = () => listShell(sampleBookings)
-
-export const SinglePending = () => listShell([sampleBookings[0]])

package/src/stories/BookingsComponent.stories.jsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import { View } from '@ossy/design-system'
-import { BookingsContent } from '../bookings.component.jsx'
-import { BookingList } from '../BookingList.jsx'
-import { sampleBookings } from './fixtures.js'
-
-export default {
-  title: 'Booking/Components/BookingsComponent',
-  component: BookingsContent,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      story: {
-        inline: true,
-        height: 'auto',
-      },
-    },
-  },
-}
-
-export const MarketingShell = () => <BookingsContent />
-
-export const WithSampleBookings = () => (
-  <View
-    gap="m"
-    surface="primary"
-    style={{ padding: 'var(--space-m) var(--space-l)', maxWidth: 640, width: '100%' }}
-  >
-    <BookingList bookings={sampleBookings} />
-  </View>
-)

package/src/stories/BookingsPage.stories.jsx

@@ -1,66 +0,0 @@
-import React from 'react'
-import BookingsPage from '../bookings.page.jsx'
-import { withMockRouter, withMockSdk } from './decorators.jsx'
-import { useSelectBookingsTab } from './story-helpers.jsx'
-import { sampleBookings } from './fixtures.js'
-
-export default {
-  title: 'Booking/Pages/BookingsPage',
-  component: BookingsPage,
-  decorators: [withMockRouter, withMockSdk],
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      story: {
-        inline: false,
-        height: '640px',
-      },
-    },
-  },
-}
-
-export const PendingTab = {
-  parameters: {
-    mockSdk: {},
-  },
-}
-
-function ConfirmedTabStory () {
-  useSelectBookingsTab('confirmed')
-  return <BookingsPage />
-}
-
-export const ConfirmedTab = {
-  render: () => <ConfirmedTabStory />,
-  parameters: {
-    mockSdk: {},
-  },
-}
-
-function AllTabStory () {
-  useSelectBookingsTab('all')
-  return <BookingsPage />
-}
-
-export const AllTab = {
-  render: () => <AllTabStory />,
-  parameters: {
-    mockSdk: {},
-  },
-}
-
-export const EmptyPending = {
-  parameters: {
-    mockSdk: {
-      bookings: sampleBookings.filter((booking) => booking.status !== 'pending'),
-    },
-  },
-}
-
-export const LoadError = {
-  parameters: {
-    mockSdk: {
-      '@ossy/booking/actions/list': () => Promise.reject(new Error('Failed to load bookings')),
-    },
-  },
-}

package/src/stories/HeroCover.stories.jsx

@@ -1,42 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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/story-helpers.jsx

@@ -1,85 +0,0 @@
-import { useEffect } from 'react'
-
-const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
-
-async function waitForSelector (selector, { attempts = 30, interval = 100 } = {}) {
-  for (let attempt = 0; attempt < attempts; attempt += 1) {
-    const element = document.querySelector(selector)
-    if (element) return element
-    await sleep(interval)
-  }
-  return null
-}
-
-export function useOpenServicesCreateForm () {
-  useEffect(() => {
-    let cancelled = false
-
-    async function openForm () {
-      await sleep(200)
-      if (cancelled) return
-      const button = await waitForSelector('[data-action="@ossy/booking/actions/open-create-service"]')
-      button?.click()
-    }
-
-    openForm()
-    return () => { cancelled = true }
-  }, [])
-}
-
-export function useSelectBookingsTab (tabId) {
-  useEffect(() => {
-    let cancelled = false
-
-    async function selectTab () {
-      await sleep(300)
-      if (cancelled) return
-      const tabsRoot = await waitForSelector('[data-tabs]')
-      if (!tabsRoot) return
-      const tabIndex = { pending: 0, confirmed: 1, all: 2 }[tabId] ?? 0
-      tabsRoot.querySelectorAll('button')[tabIndex]?.click()
-    }
-
-    selectTab()
-    return () => { cancelled = true }
-  }, [tabId])
-}
-
-/**
- * Advances PublicBookingPage through its wizard for calendar / form step stories.
- * @param {'pick-slot' | 'fill-form'} targetStep
- */
-export function useAdvancePublicBookingStep (targetStep) {
-  useEffect(() => {
-    let cancelled = false
-
-    async function advance () {
-      if (targetStep === 'pick-service') return
-
-      await sleep(300)
-      if (cancelled) return
-
-      const serviceButton = await waitForSelector('[data-action="public-booking/pick-service"]')
-      serviceButton?.click()
-
-      await sleep(150)
-      document.querySelector('[data-action="public-booking/continue"]')?.click()
-
-      if (targetStep === 'pick-slot') return
-
-      await sleep(400)
-      const dateButton = await waitForSelector('[data-action="public-booking/pick-date"]:not([disabled])')
-      dateButton?.click()
-
-      await sleep(200)
-      const slotButton = await waitForSelector('[data-action="public-booking/pick-slot"]')
-      slotButton?.click()
-
-      await sleep(150)
-      document.querySelector('[data-action="public-booking/continue"]')?.click()
-    }
-
-    advance()
-    return () => { cancelled = true }
-  }, [targetStep])
-}