@ossy/booking 1.15.6 → 1.15.7

package/src/booking-card.component.jsx

@@ -1,47 +1,27 @@
 import React, { useState } from 'react'
+import { View, Title, Text, Button, Badge, Alert } from '@ossy/design-system'
 
-export const metadata = { id: 'booking/booking-card' }
+export const metadata = { id: 'resource:booking/booking/card' }
 
-// ---------------------------------------------------------------------------
-// Tokens
-// ---------------------------------------------------------------------------
-const C = {
-  surface: '#ffffff',
-  border: '#e4e4e7',
-  primary: '#111111',
-  secondary: '#52525b',
-  muted: '#a1a1aa',
-  accent: '#111111',
-  pendingBg: '#fffbeb',
-  pendingText: '#92400e',
-  pendingBorder: '#fde68a',
-  confirmedBg: '#f0fdf4',
-  confirmedText: '#166534',
-  confirmedBorder: '#bbf7d0',
-  cancelledBg: '#f4f4f5',
-  cancelledText: '#52525b',
-  cancelledBorder: '#e4e4e7',
-  dangerBg: '#fef2f2',
-  dangerText: '#991b1b',
-  dangerHover: '#dc2626',
-  successBg: '#f0fdf4',
-  successText: '#166534',
-  successHover: '#16a34a',
-  errorText: '#dc2626',
+const STATUS_VARIANT = {
+  pending: 'warning',
+  confirmed: 'success',
+  cancelled: 'neutral',
 }
 
-const FONT = 'system-ui, -apple-system, sans-serif'
+const STATUS_LABEL = {
+  pending: 'Väntar',
+  confirmed: 'Bekräftad',
+  cancelled: 'Avbokad',
+}
 
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
 const SV_MONTHS = [
   'jan', 'feb', 'mar', 'apr', 'maj', 'jun',
   'jul', 'aug', 'sep', 'okt', 'nov', 'dec',
 ]
 const SV_WEEKDAYS = ['Sön', 'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör']
 
-function formatDateTime(iso) {
+function formatDateTime (iso) {
   if (!iso) return '—'
   const d = new Date(iso)
   const weekday = SV_WEEKDAYS[d.getDay()]
@@ -58,7 +38,7 @@ function formatDateTime(iso) {
   }
 }
 
-function formatDuration(minutes) {
+function formatDuration (minutes) {
   if (!minutes) return '—'
   if (minutes < 60) return `${minutes} min`
   const h = Math.floor(minutes / 60)
@@ -66,94 +46,16 @@ function formatDuration(minutes) {
   return m ? `${h} h ${m} min` : `${h} h`
 }
 
-function truncate(text, max = 120) {
+function truncate (text, max = 120) {
   if (!text) return ''
   return text.length > max ? `${text.slice(0, max).trimEnd()}…` : text
 }
 
-// ---------------------------------------------------------------------------
-// Status badge
-// ---------------------------------------------------------------------------
-function StatusBadge({ status }) {
-  const variants = {
-    pending: { bg: C.pendingBg, color: C.pendingText, border: C.pendingBorder, label: 'Väntar' },
-    confirmed: { bg: C.confirmedBg, color: C.confirmedText, border: C.confirmedBorder, label: 'Bekräftad' },
-    cancelled: { bg: C.cancelledBg, color: C.cancelledText, border: C.cancelledBorder, label: 'Avbokad' },
-  }
-  const v = variants[status] ?? variants.cancelled
-
-  return (
-    <span
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        padding: '2px 10px',
-        borderRadius: 999,
-        fontSize: 11,
-        fontWeight: 600,
-        fontFamily: FONT,
-        background: v.bg,
-        color: v.color,
-        border: `1px solid ${v.border}`,
-        whiteSpace: 'nowrap',
-      }}
-    >
-      {v.label}
-    </span>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Action button
-// ---------------------------------------------------------------------------
-function ActionButton({ label, onClick, loading, danger, disabled }) {
-  const [hovered, setHovered] = useState(false)
-  const base = {
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: 4,
-    padding: '5px 12px',
-    borderRadius: 6,
-    fontSize: 12,
-    fontWeight: 600,
-    fontFamily: FONT,
-    cursor: loading || disabled ? 'not-allowed' : 'pointer',
-    border: '1px solid',
-    transition: 'background 0.1s, color 0.1s',
-    whiteSpace: 'nowrap',
-    opacity: loading || disabled ? 0.6 : 1,
-  }
-  const style = danger
-    ? {
-        ...base,
-        background: hovered ? C.dangerBg : 'transparent',
-        color: C.dangerText,
-        borderColor: C.pendingBorder,
-      }
-    : {
-        ...base,
-        background: hovered ? C.accent : C.primary,
-        color: '#ffffff',
-        borderColor: 'transparent',
-      }
-
-  return (
-    <button
-      style={style}
-      onClick={onClick}
-      disabled={loading || disabled}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      {loading ? 'Väntar…' : label}
-    </button>
-  )
-}
+/** Booking card view — registered at `resource:booking/booking/card`. */
+export function BookingCard ({ booking, resource, onConfirm, onDecline, onCancel, onView }) {
+  const data = booking ?? resource?.content ?? resource
+  if (!data) return null
 
-// ---------------------------------------------------------------------------
-// BookingCard
-// ---------------------------------------------------------------------------
-export function BookingCard({ booking, onConfirm, onDecline, onCancel, onView }) {
   const [loadingAction, setLoadingAction] = useState(null)
   const [error, setError] = useState(null)
 
@@ -161,7 +63,7 @@ export function BookingCard({ booking, onConfirm, onDecline, onCancel, onView })
     setLoadingAction(actionName)
     setError(null)
     try {
-      await actionFn(booking)
+      await actionFn(data)
     } catch (err) {
       setError(err?.message ?? 'Något gick fel')
     } finally {
@@ -169,110 +71,78 @@ export function BookingCard({ booking, onConfirm, onDecline, onCancel, onView })
     }
   }
 
-  const isPending = booking.status === 'pending'
-  const isConfirmed = booking.status === 'confirmed'
+  const isPending = data.status === 'pending'
+  const isConfirmed = data.status === 'confirmed'
 
   return (
-    <div
-      style={{
-        background: C.surface,
-        border: `1px solid ${C.border}`,
-        borderRadius: 10,
-        padding: '16px 20px',
-        fontFamily: FONT,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 12,
-      }}
-    >
-      {/* Header row */}
-      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12 }}>
-        <div style={{ flex: 1, minWidth: 0 }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
-            <span style={{ fontSize: 15, fontWeight: 600, color: C.primary }}>
-              {booking.clientName ?? '—'}
-            </span>
-            <StatusBadge status={booking.status} />
-          </div>
-          <div style={{ fontSize: 13, color: C.secondary, marginTop: 2 }}>
-            {booking.clientEmail ?? ''}
-          </div>
-        </div>
+    <View surface="secondary" roundness="m" inset="m" gap="s">
+      <View layout="row" justifyContent="space-between" alignItems="flex-start" gap="m">
+        <View gap="xs" style={{ flex: 1, minWidth: 0 }}>
+          <View layout="row" gap="s" alignItems="center" style={{ flexWrap: 'wrap' }}>
+            <Title variant="tertiary">{data.clientName ?? '—'}</Title>
+            <Badge
+              label={STATUS_LABEL[data.status] ?? data.status}
+              variant={STATUS_VARIANT[data.status] ?? 'neutral'}
+              size="s"
+            />
+          </View>
+          {data.clientEmail && <Text size="s" color="secondary">{data.clientEmail}</Text>}
+        </View>
 
         {onView && (
-          <button
-            onClick={() => onView(booking)}
-            style={{
-              background: 'none',
-              border: 'none',
-              color: C.muted,
-              fontSize: 12,
-              fontFamily: FONT,
-              cursor: 'pointer',
-              padding: '2px 4px',
-              flexShrink: 0,
-            }}
-          >
+          <Button variant="link" onClick={() => onView(data)}>
             Visa →
-          </button>
+          </Button>
         )}
-      </div>
+      </View>
 
-      {/* Booking details */}
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 20px', fontSize: 13, color: C.secondary }}>
-        <span>📅 {formatDateTime(booking.startsAt)}</span>
-        <span>⏱ {formatDuration(booking.duration)}</span>
-      </div>
+      <View layout="row" gap="l" style={{ flexWrap: 'wrap' }}>
+        <Text size="s" color="secondary">{formatDateTime(data.startsAt)}</Text>
+        <Text size="s" color="secondary">{formatDuration(data.duration)}</Text>
+      </View>
 
-      {/* Message snippet */}
-      {booking.clientMessage && (
-        <div
-          style={{
-            fontSize: 13,
-            color: C.secondary,
-            background: '#fafafa',
-            borderRadius: 6,
-            padding: '8px 12px',
-            borderLeft: `3px solid ${C.border}`,
-          }}
-        >
-          {truncate(booking.clientMessage)}
-        </div>
+      {data.clientMessage && (
+        <View surface="primary" roundness="s" inset="s" style={{ borderLeft: '3px solid var(--separator)' }}>
+          <Text size="s" color="secondary">{truncate(data.clientMessage)}</Text>
+        </View>
       )}
 
-      {/* Actions */}
       {(isPending || isConfirmed) && (
-        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
+        <View layout="row" gap="s" style={{ flexWrap: 'wrap' }}>
           {isPending && onConfirm && (
-            <ActionButton
-              label="Bekräfta"
-              loading={loadingAction === 'confirm'}
+            <Button
+              variant="primary"
+              disabled={loadingAction === 'confirm'}
               onClick={() => handle(onConfirm, 'confirm')}
-            />
+            >
+              {loadingAction === 'confirm' ? 'Väntar…' : 'Bekräfta'}
+            </Button>
           )}
           {isPending && onDecline && (
-            <ActionButton
-              label="Avböj"
-              danger
-              loading={loadingAction === 'decline'}
+            <Button
+              variant="danger"
+              disabled={loadingAction === 'decline'}
               onClick={() => handle(onDecline, 'decline')}
-            />
+            >
+              {loadingAction === 'decline' ? 'Väntar…' : 'Avböj'}
+            </Button>
           )}
           {isConfirmed && onCancel && (
-            <ActionButton
-              label="Avboka"
-              danger
-              loading={loadingAction === 'cancel'}
+            <Button
+              variant="danger"
+              disabled={loadingAction === 'cancel'}
               onClick={() => handle(onCancel, 'cancel')}
-            />
+            >
+              {loadingAction === 'cancel' ? 'Väntar…' : 'Avboka'}
+            </Button>
           )}
-        </div>
+        </View>
       )}
 
       {error && (
-        <div style={{ fontSize: 12, color: C.errorText }}>{error}</div>
+        <Alert variant="danger">{error}</Alert>
       )}
-    </div>
+    </View>
   )
 }