@ossy/booking 1.16.2 → 1.16.3

package/src/send-booking-reminder.task.js

@@ -1,41 +1,49 @@
 import { getBookingResources } from './booking-resources.js'
+import { BookingSchema } from './schema-ids.js'
 import BookingReminderEmail from './booking-reminder.email.jsx'
+import { workspaceIdFromContent } from './provider-fields.js'
+import { resolveWorkspaceContact } from './resolve-workspace-contact.js'
+import { toMs } from './time.js'
 
 export const metadata = {
-  id: 'booking/send-reminder',
+  id: '@ossy/booking/tasks/send-reminder',
   schedule: '0 * * * *', // every hour — checks for bookings starting ~24h from now
 }
 
 export async function run({ sdk, log, integrations }) {
   const now = Date.now()
-  const windowStart = new Date(now + 23 * 60 * 60 * 1000).toISOString()
-  const windowEnd = new Date(now + 25 * 60 * 60 * 1000).toISOString()
+  const windowStartMs = now + 23 * 60 * 60 * 1000
+  const windowEndMs = now + 25 * 60 * 60 * 1000
 
-  log?.info(`[booking/send-reminder] Checking bookings between ${windowStart} and ${windowEnd}`)
+  log?.info(`[booking/tasks/send-reminder] Checking bookings between ${windowStartMs} and ${windowEndMs}`)
 
   const allBookings = await getBookingResources({
-    type: '@ossy/booking/booking',
+    schemaId: BookingSchema.booking,
   })
 
   const upcoming = allBookings.filter(b => {
     const { status, startsAt, reminderSentAt } = b.content ?? {}
     if (status !== 'confirmed') return false
     if (reminderSentAt) return false
-    return startsAt >= windowStart && startsAt <= windowEnd
+    const startsAtMs = toMs(startsAt)
+    if (startsAtMs == null) return false
+    return startsAtMs >= windowStartMs && startsAtMs <= windowEndMs
   })
 
-  log?.info(`[booking/send-reminder] Found ${upcoming.length} bookings needing reminders`)
+  log?.info(`[booking/tasks/send-reminder] Found ${upcoming.length} bookings needing reminders`)
 
   const emailClient = integrations?.get?.('email')
   if (!emailClient) {
-    log?.warn('[booking/send-reminder] No email integration available, skipping')
+    log?.warn('[booking/tasks/send-reminder] No email integration available, skipping')
     return { sent: 0 }
   }
 
   let sent = 0
 
   for (const booking of upcoming) {
-    const { clientName, clientEmail, consultantId, startsAt, duration } = booking.content ?? {}
+    const { clientName, clientEmail, startsAt, duration } = booking.content ?? {}
+    const workspaceId = booking.belongsTo ?? workspaceIdFromContent(booking.content)
+    const contact = await resolveWorkspaceContact(workspaceId)
 
     if (!clientEmail) continue
 
@@ -44,7 +52,7 @@ export async function run({ sdk, log, integrations }) {
         BookingReminderEmail,
         {
           clientName: clientName ?? 'Kund',
-          consultantName: null,
+          providerName: contact?.providerName ?? null,
           startAt: startsAt,
           duration: duration ?? 60,
         },
@@ -55,20 +63,37 @@ export async function run({ sdk, log, integrations }) {
         },
       )
 
+      if (contact?.providerEmail) {
+        await emailClient.sendTemplate(
+          BookingReminderEmail,
+          {
+            clientName: clientName ?? 'Kund',
+            providerName: contact?.providerName ?? null,
+            startAt: startsAt,
+            duration: duration ?? 60,
+          },
+          {
+            to: contact.providerEmail,
+            from: 'noreply@ossy.se',
+            subject: 'Påminnelse: bokning imorgon',
+          },
+        )
+      }
+
       // Mark reminder as sent via SDK if available, otherwise skip to avoid
       // needing direct DB writes in a scheduled task
       if (sdk) {
-        await sdk.actions.run('resources/update-content', {
+        await sdk.actions.run('@ossy/resources/actions/update-content', {
           resourceId: booking.id,
           content: { ...booking.content, reminderSentAt: new Date().toISOString() },
-          workspaceId: consultantId,
+          workspaceId,
         })
       }
 
       sent++
-      log?.info(`[booking/send-reminder] Reminder sent to ${clientEmail}`)
+      log?.info(`[booking/tasks/send-reminder] Reminder sent to ${clientEmail}`)
     } catch (err) {
-      log?.error(`[booking/send-reminder] Failed to send reminder to ${clientEmail}`, err)
+      log?.error(`[booking/tasks/send-reminder] Failed to send reminder to ${clientEmail}`, err)
     }
   }
 

package/src/service-card-slot.component.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { View, Title, Text, Badge } from '@ossy/design-system'
+import { View, Text, Badge } from '@ossy/design-system'
 
-export const metadata = { id: 'resource:booking/service/card' }
+export const metadata = { id: '@ossy/booking/view/service/card' }
 
 const formatPrice = (cents, currency) => {
   if (cents === 0) return 'Free'
@@ -16,7 +16,7 @@ const formatDuration = (minutes) => {
   return m === 0 ? `${h}h` : `${h}h ${m}min`
 }
 
-/** Booking service card view — registered at `resource:booking/service/card`. */
+/** Booking service card view — `@ossy/booking/view/service/card`. */
 export default function ServiceCardSlotComponent ({ resource }) {
   if (!resource) return null
 
@@ -34,7 +34,7 @@ export default function ServiceCardSlotComponent ({ resource }) {
     >
       <View gap="xs" style={{ flex: 1 }}>
         <View layout="row" gap="s" alignItems="center">
-          <Title variant="secondary">{resource.name || name}</Title>
+          <Text variant="heading-secondary" as="h2">{resource.name || name}</Text>
           {active === false && <Badge label="Inactive" variant="neutral" size="s" />}
         </View>
         {description && <Text size="s" color="secondary">{description}</Text>}

package/src/service-detail.component.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { View, Title, Text, Badge } from '@ossy/design-system'
+import { View, Text, Badge } from '@ossy/design-system'
 
-export const metadata = { id: 'resource:booking/service/detail' }
+export const metadata = { id: '@ossy/booking/view/service' }
 
 const formatPrice = (cents, currency) => {
   if (cents === 0) return 'Free'
@@ -16,7 +16,7 @@ const formatDuration = (minutes) => {
   return m === 0 ? `${h}h` : `${h}h ${m}min`
 }
 
-/** Booking service detail view — registered at `resource:booking/service/detail`. */
+/** Booking service detail view — `@ossy/booking/view/service`. */
 export default function ServiceDetailComponent ({ resource }) {
   if (!resource) return null
 
@@ -25,7 +25,7 @@ export default function ServiceDetailComponent ({ resource }) {
   return (
     <View stack gap="m" inset="m">
       <View layout="row" gap="s" alignItems="center">
-        <Title>{resource.name || name}</Title>
+        <Text variant="heading-default" as="h1">{resource.name || name}</Text>
         {active === false && <Badge label="Inactive" variant="neutral" size="s" />}
       </View>
       {description && <Text color="secondary">{description}</Text>}

package/src/service.form.js

@@ -0,0 +1,7 @@
+import { BookingSchema } from './schema-ids.js'
+
+export const metadata = {
+  id: '@ossy/booking/form/service',
+  schemaId: BookingSchema.service,
+  label: '@ossy/booking/form/service.label',
+}

package/src/service.schema.js

@@ -0,0 +1,14 @@
+/** Bookable service — UI fields and flow faker schema. */
+export default {
+  id: '@ossy/booking/schema/service',
+  name: 'Service',
+  icon: 'calendar',
+  fields: [
+    { name: 'name', type: 'text', required: true },
+    { name: 'duration', type: 'number', required: true },
+    { name: 'price', type: 'number' },
+    { name: 'currency', type: 'text' },
+    { name: 'description', type: 'textarea' },
+    { name: 'active', type: 'boolean' },
+  ],
+}

package/src/services.page.jsx

@@ -1,12 +1,16 @@
 import React, { useState, useEffect, useCallback } from 'react'
-import { View, Title, Text, Button, Input, Textarea, Alert, useLocale } from '@ossy/design-system'
+import { View, Text, Button, Alert, Form, FieldFactory, FormStatus, ContentHeader, Page, useLocale } from '@ossy/design-system'
 import { useSdk } from '@ossy/sdk-react'
+import { useDocumentValidator } from '@ossy/resources'
 import { Definition } from './Definition.js'
 import { ServiceCard } from './ServiceCard.jsx'
 import { metadata as CreateService } from './create-service.action.js'
 import { metadata as UpdateService } from './update-service.action.js'
 import { metadata as DeleteService } from './delete-service.action.js'
 import { metadata as GetServices } from './get-services.action.js'
+import { metadata as OpenCreateService } from './open-create-service.action.js'
+import { metadata as ServiceForm } from './service.form.js'
+import serviceTemplate from './service.schema.js'
 import { invokeErrorMessage } from './invoke-error-message.js'
 
 export const metadata = {
@@ -34,8 +38,9 @@ export default function ServicesPage () {
   const [error, setError] = useState(null)
   const [formOpen, setFormOpen] = useState(false)
   const [editingId, setEditingId] = useState(null)
-  const [form, setForm] = useState(EMPTY_FORM)
+  const [formDefaults, setFormDefaults] = useState(EMPTY_FORM)
   const [saving, setSaving] = useState(false)
+  const validate = useDocumentValidator(serviceTemplate)
 
   const loadServices = useCallback(async () => {
     setLoading(true)
@@ -56,13 +61,13 @@ export default function ServicesPage () {
 
   const openCreate = () => {
     setEditingId(null)
-    setForm(EMPTY_FORM)
+    setFormDefaults(EMPTY_FORM)
     setFormOpen(true)
   }
 
   const openEdit = (service) => {
     setEditingId(service.id)
-    setForm({
+    setFormDefaults({
       name: service.name ?? '',
       duration: service.duration ?? 60,
       price: service.price ?? 0,
@@ -73,13 +78,12 @@ export default function ServicesPage () {
     setFormOpen(true)
   }
 
-  const handleSave = async () => {
-    if (!form.name.trim()) return
+  const handleSave = async (data) => {
     setSaving(true)
     setError(null)
     try {
       const bookingAction = editingId ? UpdateService : CreateService
-      const body = editingId ? { serviceId: editingId, ...form } : form
+      const body = editingId ? { serviceId: editingId, ...data } : data
       await sdk.invoke(bookingAction, body)
       setFormOpen(false)
       await loadServices()
@@ -102,63 +106,63 @@ export default function ServicesPage () {
   }
 
   return (
-    <View
-      gap="m"
-      surface="primary"
-      style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}
+    <Page
+      header={(
+        <ContentHeader
+          inset="none"
+          title={(
+            <Text variant="heading-default" as="h1">
+              {Definition.title} — <Text as="span" text="booking.services.titleSuffix" />
+            </Text>
+          )}
+          description="booking.services.description"
+          descriptionMaxWidth="s"
+          far={(
+            <Button {...OpenCreateService} variant="primary" size="s" onClick={openCreate} />
+          )}
+        />
+      )}
     >
-      <View inset="s" gap="s">
-        <View layout="row" justifyContent="space-between" alignItems="center" style={{ flexShrink: 0, flexWrap: 'wrap', gap: 'var(--space-s)' }}>
-          <Title>{Definition.title} — {t('booking.services.titleSuffix')}</Title>
-          <Button variant="primary" size="s" onClick={openCreate}>{t('booking.services.addService')}</Button>
-        </View>
-        <Text style={{ maxWidth: '480px' }}>{t('booking.services.description')}</Text>
-      </View>
-
       {error && <Alert variant="danger">{error}</Alert>}
 
       {formOpen && (
-        <View gap="m" surface="secondary" roundness="m" inset="m">
-          <Title variant="tertiary">{editingId ? t('booking.services.editService') : t('booking.services.newService')}</Title>
-          <View gap="xs">
-            <Text weight="medium">{t('booking.services.field.name')}</Text>
-            <Input value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} />
-          </View>
-          <View gap="xs">
-            <Text weight="medium">{t('booking.services.field.duration')}</Text>
-            <Input type="number" value={String(form.duration)} onChange={e => setForm(f => ({ ...f, duration: Number(e.target.value) || 60 }))} />
-          </View>
-          <View gap="xs">
-            <Text weight="medium">{t('booking.services.field.price')}</Text>
-            <Input type="number" value={String(form.price)} onChange={e => setForm(f => ({ ...f, price: Number(e.target.value) || 0 }))} />
-          </View>
-          <View gap="xs">
-            <Text weight="medium">{t('booking.services.field.currency')}</Text>
-            <Input value={form.currency} onChange={e => setForm(f => ({ ...f, currency: e.target.value }))} />
-          </View>
-          <View gap="xs">
-            <Text weight="medium">{t('booking.services.field.description')}</Text>
-            <Textarea value={form.description} onChange={e => setForm(f => ({ ...f, description: e.target.value }))} rows={3} />
-          </View>
-          <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-            <input type="checkbox" checked={form.active} onChange={e => setForm(f => ({ ...f, active: e.target.checked }))} />
-            <Text>{t('booking.services.field.active')}</Text>
-          </label>
-          <View layout="row" gap="s">
-            <Button data-action={editingId ? UpdateService.id : CreateService.id} variant="primary" disabled={saving} onClick={handleSave}>
-              {saving ? t('booking.services.saving') : t('booking.services.save')}
-            </Button>
-            <Button variant="neutral" onClick={() => setFormOpen(false)}>{t('booking.services.cancel')}</Button>
+        <Form
+          key={editingId ?? 'new'}
+          id={ServiceForm.id}
+          schemaId={ServiceForm.schemaId}
+          fields={serviceTemplate.fields}
+          defaultData={formDefaults}
+          onSubmit={handleSave}
+          validate={validate}
+          status={saving ? [FormStatus.Submitting] : []}
+        >
+          <View gap="m" surface="secondary" roundness="m" inset="m">
+            <Text
+              variant="heading-tertiary"
+              as="h3"
+              text={editingId ? 'booking.services.editService' : 'booking.services.newService'}
+            />
+            <FieldFactory />
+            <View layout="row" gap="s">
+              <Button
+                {...(editingId ? UpdateService : CreateService)}
+                variant="primary"
+                type="submit"
+                disabled={saving}
+                label={saving ? 'booking.services.saving' : 'booking.services.save'}
+              />
+              <Button variant="neutral" type="button" label="booking.services.cancel" onClick={() => setFormOpen(false)} />
+            </View>
           </View>
-        </View>
+        </Form>
       )}
 
-      <View gap="s" inset="s">
-        <Title variant="secondary">{t('booking.services.yourServices')}</Title>
+      <View gap="s">
+        <Text variant="heading-secondary" as="h2" text="booking.services.yourServices" />
         {loading ? (
-          <Text color="secondary">{t('booking.services.loading')}</Text>
+          <Text color="secondary" text="booking.services.loading" />
         ) : services.length === 0 ? (
-          <Text color="secondary">{t('booking.services.empty')}</Text>
+          <Text color="secondary" text="booking.services.empty" />
         ) : (
           <View gap="s">
             {services.map(service => (
@@ -172,14 +176,14 @@ export default function ServicesPage () {
                   active={service.active !== false}
                 />
                 <View layout="row" gap="s">
-                  <Button variant="link" size="s" onClick={() => openEdit(service)}>{t('booking.services.edit')}</Button>
-                  <Button data-action={DeleteService.id} variant="link" size="s" onClick={() => handleDelete(service.id)}>{t('booking.services.delete')}</Button>
+                  <Button variant="link" size="s" label="booking.services.edit" onClick={() => openEdit(service)} />
+                  <Button {...DeleteService} variant="link" size="s" label="booking.services.delete" onClick={() => handleDelete(service.id)} />
                 </View>
               </View>
             ))}
           </View>
         )}
       </View>
-    </View>
+    </Page>
   )
 }

package/src/stories/AvailabilityEditor.stories.jsx

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

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

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

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

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

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