@ossy/booking 1.15.6 → 1.16.0

package/README.md

@@ -19,6 +19,18 @@ Three resource schemas are registered under the `@ossy/booking` category:
 - `@ossy/booking/booking` — a confirmed appointment
 - `@ossy/booking/availability` — recurring weekly availability window
 
+## Resource view slots
+
+Register custom UI for resource types via `*.component.jsx` with `metadata.id` matching the slot key (see `@ossy/design-system` [SLOTS.md](../design-system/docs/SLOTS.md)):
+
+| Component | Slot key |
+|-----------|----------|
+| `service-detail.component.jsx` | `resource:booking/service/detail` |
+| `service-card-slot.component.jsx` | `resource:booking/service/card` |
+| `booking-card.component.jsx` | `resource:booking/booking/card` |
+
+Dedicated pages (`services.page.jsx`, `booking-detail.page.jsx`, etc.) continue to work alongside generic `@ossy/resources` slot hosts.
+
 ## What still needs implementation
 
 - **Slot generation** — derive available time slots from `availability` records minus existing `booking` records

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/booking",
   "description": "Booking feature package — services, availability, and appointment management for Ossy consultants",
-  "version": "1.15.6",
+  "version": "1.16.0",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
@@ -14,11 +14,11 @@
     "src": "./src"
   },
   "dependencies": {
-    "@ossy/email": "^1.5.6",
-    "@ossy/event-store": "^1.7.6",
-    "@ossy/observability": "^1.7.6",
-    "@ossy/platform": "^1.38.6",
-    "@ossy/resources": "^1.11.6"
+    "@ossy/email": "^1.6.0",
+    "@ossy/event-store": "^1.8.0",
+    "@ossy/observability": "^1.8.0",
+    "@ossy/platform": "^1.39.0",
+    "@ossy/resources": "^1.12.0"
   },
   "peerDependencies": {
     "@ossy/design-system": ">=1.0.0",
@@ -34,5 +34,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "72d150cf20ff7ba25b328bc5b429b065c2840b2b"
+  "gitHead": "d9d31182be64a448d575da432af2830d909ad4b9"
 }

package/src/AvailabilityEditor.jsx

@@ -1,12 +1,10 @@
-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']
+import React, { useState, useMemo } from 'react'
+import { View, Text, Button, Input, useLocale } from '@ossy/design-system'
 
 const DEFAULT_WINDOW = { enabled: false, startTime: '09:00', endTime: '17:00', bufferMinutes: 0 }
 
 const buildInitialState = (availability = []) => {
-  const state = DAY_LABELS.map(() => ({ ...DEFAULT_WINDOW }))
+  const state = Array.from({ length: 7 }, () => ({ ...DEFAULT_WINDOW }))
   for (const window of availability) {
     if (window.dayOfWeek >= 0 && window.dayOfWeek <= 6) {
       state[window.dayOfWeek] = {
@@ -21,8 +19,19 @@ const buildInitialState = (availability = []) => {
 }
 
 export const AvailabilityEditor = ({ availability = [], onSave }) => {
+  const { t } = useLocale()
   const [days, setDays] = useState(() => buildInitialState(availability))
 
+  const dayKeys = useMemo(() => [
+    'booking.availabilityEditor.day.sun',
+    'booking.availabilityEditor.day.mon',
+    'booking.availabilityEditor.day.tue',
+    'booking.availabilityEditor.day.wed',
+    'booking.availabilityEditor.day.thu',
+    'booking.availabilityEditor.day.fri',
+    'booking.availabilityEditor.day.sat',
+  ], [])
+
   const update = (idx, patch) =>
     setDays((prev) => prev.map((d, i) => (i === idx ? { ...d, ...patch } : d)))
 
@@ -37,16 +46,15 @@ export const AvailabilityEditor = ({ availability = [], onSave }) => {
         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) => (
+        {dayKeys.map((key, idx) => (
           <View
-            key={label}
+            key={key}
             layout="row"
             gap="m"
             alignItems="center"
@@ -54,11 +62,15 @@ export const AvailabilityEditor = ({ availability = [], onSave }) => {
             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>
+            <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+              <input
+                type="checkbox"
+                checked={days[idx].enabled}
+                onChange={e => update(idx, { enabled: e.target.checked })}
+                style={{ width: 16, height: 16, accentColor: 'var(--color-accent)' }}
+              />
+            </label>
+            <Text weight="medium" style={{ width: '2.5rem', flexShrink: 0 }}>{t(key)}</Text>
 
             {days[idx].enabled ? (
               <View layout="row" gap="s" alignItems="center" style={{ flex: 1 }}>
@@ -68,14 +80,14 @@ export const AvailabilityEditor = ({ availability = [], onSave }) => {
                   onChange={(v) => update(idx, { startTime: v })}
                   size="s"
                 />
-                <Text color="secondary">to</Text>
+                <Text color="secondary">{t('booking.availabilityEditor.to')}</Text>
                 <Input
                   type="time"
                   value={days[idx].endTime}
                   onChange={(v) => update(idx, { endTime: v })}
                   size="s"
                 />
-                <Text color="secondary" size="s">Buffer</Text>
+                <Text color="secondary" size="s">{t('booking.availabilityEditor.buffer')}</Text>
                 <Input
                   type="number"
                   value={String(days[idx].bufferMinutes)}
@@ -83,17 +95,16 @@ export const AvailabilityEditor = ({ availability = [], onSave }) => {
                   size="s"
                   style={{ width: '4rem' }}
                 />
-                <Text color="secondary" size="s">min</Text>
+                <Text color="secondary" size="s">{t('booking.availabilityEditor.min')}</Text>
               </View>
             ) : (
-              <Text color="secondary" size="s">Unavailable</Text>
+              <Text color="secondary" size="s">{t('booking.availabilityEditor.unavailable')}</Text>
             )}
           </View>
         ))}
       </View>
 
-      {/* TODO: wire to booking.set-availability action */}
-      <Button variant="primary" onPress={handleSave}>Save availability</Button>
+      <Button variant="primary" onClick={handleSave}>{t('booking.availabilityEditor.save')}</Button>
     </View>
   )
 }

package/src/BookingForm.jsx

@@ -1,15 +1,8 @@
 import React, { useState } from 'react'
-import { View, Title, Text, Button, Input, Select } from '@ossy/design-system'
+import { View, Title, Text, Button, Input, useLocale } 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 { t } = useLocale()
   const [step, setStep] = useState('pick-service')
   const [selectedService, setSelectedService] = useState(null)
   const [selectedSlot, setSelectedSlot] = useState(null)
@@ -19,11 +12,10 @@ export const BookingForm = ({ workspaceId }) => {
   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)
+        <Title variant="secondary">{t('booking.book.form.chooseService')}</Title>
+        <Text color="secondary">{t('booking.book.form.loadingServices', { workspaceId })}</Text>
+        <Button variant="secondary" onClick={() => setStep('pick-slot')}>
+          {t('booking.book.form.continuePlaceholder')}
         </Button>
       </View>
     )
@@ -32,13 +24,12 @@ export const BookingForm = ({ workspaceId }) => {
   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>
+        <Title variant="secondary">{t('booking.book.form.pickTime')}</Title>
+        <Text color="secondary">{t('booking.book.form.slotsPlaceholder')}</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 variant="ghost" onClick={() => setStep('pick-service')}>{t('booking.book.form.back')}</Button>
+          <Button variant="secondary" onClick={() => setStep('enter-details')}>
+            {t('booking.book.form.continuePlaceholder')}
           </Button>
         </View>
       </View>
@@ -48,25 +39,24 @@ export const BookingForm = ({ workspaceId }) => {
   if (step === 'enter-details') {
     return (
       <View gap="m">
-        <Title variant="secondary">Your details</Title>
+        <Title variant="secondary">{t('booking.book.form.yourDetails')}</Title>
         <Input
-          label="Name"
+          label={t('booking.book.form.nameLabel')}
           value={clientName}
           onChange={setClientName}
-          placeholder="Jane Smith"
+          placeholder={t('booking.book.form.namePlaceholder')}
         />
         <Input
-          label="Email"
+          label={t('booking.book.form.emailLabel')}
           type="email"
           value={clientEmail}
           onChange={setClientEmail}
-          placeholder="jane@example.com"
+          placeholder={t('booking.book.form.emailPlaceholder')}
         />
         <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 variant="ghost" onClick={() => setStep('pick-slot')}>{t('booking.book.form.back')}</Button>
+          <Button variant="primary" onClick={() => setStep('confirm')}>
+            {t('booking.book.form.confirmPay')}
           </Button>
         </View>
       </View>
@@ -75,8 +65,8 @@ export const BookingForm = ({ workspaceId }) => {
 
   return (
     <View gap="m">
-      <Title variant="secondary">Booking confirmed!</Title>
-      <Text>Check your email for a confirmation.</Text>
+      <Title variant="secondary">{t('booking.book.form.confirmed')}</Title>
+      <Text>{t('booking.book.form.checkEmail')}</Text>
     </View>
   )
 }

package/src/Definition.js

@@ -2,28 +2,6 @@ export const Definition = {
   id: 'booking',
   title: 'Booking',
   description: 'Services, availability windows, and client appointment management for consultants.',
-  module: {
-    id: 'booking',
-    enabled: true,
-  },
+  icon: 'calendar',
   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/HeroCover.jsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import { Title, Button, View, PageSection } from '@ossy/design-system'
+
+const Cover = ({
+  title,
+  titleMaxWidth = '1100px',
+  text,
+  actions = [],
+}) => (
+  <View
+    gap="l"
+    placeContent="center"
+    layout="column"
+    justifyContent="center"
+    style={{
+      height: '100%',
+      borderRadius: 'var(--space-m)',
+      padding: 'var(--space-xl) var(--space-s)',
+    }}
+  >
+    <View gap="m" alignItems="center">
+      <Title as="h1" variant="display" style={{ maxWidth: titleMaxWidth, textWrap: 'balance' }}>
+        {title}
+      </Title>
+
+      <Title as="h2" variant="title-tertiary" style={{ maxWidth: '800px' }}>
+        {text}
+      </Title>
+    </View>
+
+    <View gap="m" layout="row" justifyContent="center" style={{ flexWrap: 'wrap' }}>
+      {actions.map(({ label, ...props }) => (
+        <Button {...props} key={label}>
+          {label}
+        </Button>
+      ))}
+    </View>
+  </View>
+)
+
+export const HeroCover = ({
+  title,
+  titleMaxWidth = '1100px',
+  text,
+  actions = [],
+
+  id = 'hero-cover',
+  surfaceAs = 'div',
+  maxWidth = 'l',
+  surface = 'hero',
+  ...props
+}) => {
+  const { style: passthroughStyle, ...pageSectionProps } = props
+
+  return (
+    <PageSection
+      id={id}
+      surfaceAs={surfaceAs}
+      maxWidth={maxWidth}
+      surface={surface}
+      {...pageSectionProps}
+      data-rounded
+      data-component="@ossy/website-ossy/cover"
+      style={{
+        backgroundAttachment: 'scroll',
+        boxShadow: 'inset 0 1px 0 color-mix(in srgb, var(--foreground) 6%, transparent)',
+        ...passthroughStyle,
+      }}
+    >
+      <style href="@ossy/website-ossy/cover" precedence="high">
+        {`
+          [data-component="@ossy/website-ossy/cover"] {
+            gap: var(--space-m);
+            min-height: min(42vh, 420px);
+            height: auto;
+          }
+
+          [data-rounded] {
+            border-radius: var(--space-m);
+            overflow: hidden;
+          }
+
+          @media (min-width: 900px) {
+            [data-component="@ossy/website-ossy/cover"] {
+              min-height: min(46vh, 520px);
+            }
+          }
+        `}
+      </style>
+
+      <Cover
+        title={title}
+        titleMaxWidth={titleMaxWidth}
+        text={text}
+        actions={actions}
+      />
+    </PageSection>
+  )
+}

package/src/SalesSection.jsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import {
+  Title,
+  Text,
+  View,
+  Icon,
+  PageSection,
+  MarkdownViewer,
+  useLocale,
+} from '@ossy/design-system'
+import { HeroCover } from './HeroCover.jsx'
+
+export default ({
+  cover,
+  features,
+}) => {
+  const { t } = useLocale()
+
+  return (
+  <PageSection maxWidth="xl" gap="l">
+    <View gap="l" surface="primary" style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}>
+      <HeroCover {...cover} />
+
+      <View gap="m" inset="s">
+        <Title variant="secondary">
+          {t('booking.sales.overview')}
+        </Title>
+
+        <View gap="m" layout="row-wrap">
+          {features.map(x => (
+            <View
+              key={x.title}
+              roundness="m"
+              surface="primary"
+              inset="m"
+              gap="m"
+              style={{
+                width: 200,
+                border: '1px solid var(--separator)',
+              }}
+            >
+              <View justifyContent="center" alignItems="center">
+                <Icon name={x.icon} size="m" />
+              </View>
+              <Text variant="small" style={{ fontWeight: 'bold', textAlign: 'center' }}>{x.title}</Text>
+              <Text variant="small" style={{ textAlign: 'center' }}>{x.text}</Text>
+            </View>
+          ))}
+        </View>
+      </View>
+
+      <View gap="m" inset="s">
+        <Title variant="secondary">
+          {t('booking.sales.features')}
+        </Title>
+
+        {features.map(x => (
+          <View key={x.title} roundness="m" gap="m" inset="l" style={{ border: '1px solid var(--separator)' }}>
+            <View layout="row" gap="s" alignItems="center">
+              <View justifyContent="center" alignItems="center">
+                <Icon name={x.icon} size="m" />
+              </View>
+              <Title variant="tertiary">
+                {x.title}
+              </Title>
+            </View>
+
+            <Text>{x.text}</Text>
+
+            {x.content && <MarkdownViewer children={x.content} />}
+          </View>
+        ))}
+      </View>
+    </View>
+  </PageSection>
+  )
+}