@ossy/booking 1.15.5 → 1.15.7

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.5",
+  "version": "1.15.7",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
@@ -14,11 +14,11 @@
     "src": "./src"
   },
   "dependencies": {
-    "@ossy/email": "^1.5.5",
-    "@ossy/event-store": "^1.7.5",
-    "@ossy/observability": "^1.7.5",
-    "@ossy/platform": "^1.38.5",
-    "@ossy/resources": "^1.11.5"
+    "@ossy/email": "^1.5.7",
+    "@ossy/event-store": "^1.7.7",
+    "@ossy/observability": "^1.7.7",
+    "@ossy/platform": "^1.38.7",
+    "@ossy/resources": "^1.11.7"
   },
   "peerDependencies": {
     "@ossy/design-system": ">=1.0.0",
@@ -34,5 +34,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "97d02b0762f2c0461abb1e6753fc3aaad30ee93f"
+  "gitHead": "f65df0cd6da864c314c4f424112e05e8e2dec0ff"
 }

package/src/AvailabilityEditor.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { View, Title, Text, Button, Input, Switch } from '@ossy/design-system'
+import { View, Title, Text, Button, Input } from '@ossy/design-system'
 
 const DAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
 
@@ -54,10 +54,14 @@ export const AvailabilityEditor = ({ availability = [], onSave }) => {
             roundness="m"
             inset="s"
           >
-            <Switch
-              checked={days[idx].enabled}
-              onChange={(enabled) => update(idx, { enabled })}
-            />
+            <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 }}>{label}</Text>
 
             {days[idx].enabled ? (
@@ -93,7 +97,7 @@ export const AvailabilityEditor = ({ availability = [], onSave }) => {
       </View>
 
       {/* TODO: wire to booking.set-availability action */}
-      <Button variant="primary" onPress={handleSave}>Save availability</Button>
+      <Button variant="primary" onClick={handleSave}>Save availability</Button>
     </View>
   )
 }

package/src/BookingForm.jsx

@@ -22,7 +22,7 @@ export const BookingForm = ({ workspaceId }) => {
         <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')}>
+        <Button variant="secondary" onClick={() => setStep('pick-slot')}>
           Continue (placeholder)
         </Button>
       </View>
@@ -36,8 +36,8 @@ export const BookingForm = ({ workspaceId }) => {
         {/* 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')}>
+          <Button variant="ghost" onClick={() => setStep('pick-service')}>Back</Button>
+          <Button variant="secondary" onClick={() => setStep('enter-details')}>
             Continue (placeholder)
           </Button>
         </View>
@@ -63,9 +63,9 @@ export const BookingForm = ({ workspaceId }) => {
           placeholder="jane@example.com"
         />
         <View layout="row" gap="s">
-          <Button variant="ghost" onPress={() => setStep('pick-slot')}>Back</Button>
+          <Button variant="ghost" onClick={() => setStep('pick-slot')}>Back</Button>
           {/* TODO: submit booking action then redirect to Stripe */}
-          <Button variant="primary" onPress={() => setStep('confirm')}>
+          <Button variant="primary" onClick={() => setStep('confirm')}>
             Confirm &amp; Pay
           </Button>
         </View>

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,72 @@
+import React from 'react'
+import {
+  Title,
+  Text,
+  View,
+  Icon,
+  PageSection,
+  MarkdownViewer,
+} from '@ossy/design-system'
+import { HeroCover } from './HeroCover.jsx'
+
+export default ({
+  cover,
+  features,
+}) => (
+  <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">
+          Översikt
+        </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">
+          Funktioner
+        </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>
+)