@ossy/booking 1.15.6 → 1.16.0

package/src/availability.page.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, Title, Text, Tags } from '@ossy/design-system'
+import { View, Title, Text, Tags, useLocale } from '@ossy/design-system'
 import { Definition } from './Definition.js'
 import { moduleStatusTags } from './moduleStatus.js'
 import { AvailabilityEditor } from './AvailabilityEditor.jsx'
@@ -12,30 +12,32 @@ export const metadata = {
   },
 }
 
-const AvailabilityPage = () => (
-  <View
-    gap="m"
-    surface="primary"
-    style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}
-  >
-    <View inset="s" gap="s">
-      <View layout="row" gap="s" alignItems="center">
-        <Title>{Definition.title} — Availability</Title>
-        {moduleStatusTags(Definition).length > 0 && (
-          <Tags tags={moduleStatusTags(Definition)} size="s" />
-        )}
-      </View>
+const AvailabilityPage = () => {
+  const { t } = useLocale()
+  return (
+    <View
+      gap="m"
+      surface="primary"
+      style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}
+    >
+      <View inset="s" gap="s">
+        <View layout="row" gap="s" alignItems="center">
+          <Title>{Definition.title} — {t('booking.availability.titleSuffix')}</Title>
+          {moduleStatusTags(Definition).length > 0 && (
+            <Tags tags={moduleStatusTags(Definition)} size="s" />
+          )}
+        </View>
 
-      <Text style={{ maxWidth: '400px' }}>
-        Set your weekly availability. Clients can only book slots within these windows.
-      </Text>
-    </View>
+        <Text style={{ maxWidth: '400px' }}>
+          {t('booking.availability.description')}
+        </Text>
+      </View>
 
-    <View inset="s">
-      {/* TODO: load existing availability via booking.get-availability, save via booking.set-availability */}
-      <AvailabilityEditor availability={[]} />
+      <View inset="s">
+        <AvailabilityEditor availability={[]} />
+      </View>
     </View>
-  </View>
-)
+  )
+}
 
 export default AvailabilityPage

package/src/booking-card.component.jsx

@@ -1,64 +1,29 @@
 import React, { useState } from 'react'
+import { View, Title, Text, Button, Badge, Alert, useLocale } 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'
-
-// ---------------------------------------------------------------------------
-// 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, t, language) {
   if (!iso) return '—'
   const d = new Date(iso)
-  const weekday = SV_WEEKDAYS[d.getDay()]
-  const day = d.getDate()
-  const month = SV_MONTHS[d.getMonth()]
-  const hh = String(d.getHours()).padStart(2, '0')
-  const mm = String(d.getMinutes()).padStart(2, '0')
+  const locale = language === 'sv' ? 'sv-SE' : 'en-GB'
   try {
-    const tz = new Intl.DateTimeFormat('sv-SE', { timeZoneName: 'short', hour: 'numeric' })
-      .formatToParts(d).find(p => p.type === 'timeZoneName')?.value ?? ''
-    return `${weekday} ${day} ${month} kl. ${hh}:${mm}${tz ? ` (${tz})` : ''}`
+    return new Intl.DateTimeFormat(locale, {
+      weekday: 'short', day: 'numeric', month: 'short',
+      hour: '2-digit', minute: '2-digit', timeZoneName: 'short',
+    }).format(d)
   } catch {
-    return `${weekday} ${day} ${month} kl. ${hh}:${mm}`
+    return d.toLocaleString(locale)
   }
 }
 
-function formatDuration(minutes) {
+function formatDuration (minutes, t) {
   if (!minutes) return '—'
   if (minutes < 60) return `${minutes} min`
   const h = Math.floor(minutes / 60)
@@ -66,213 +31,109 @@ 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',
-      }
+export function BookingCard ({ booking, resource, onConfirm, onDecline, onCancel, onView }) {
+  const { t, language } = useLocale()
+  const data = booking ?? resource?.content ?? resource
+  if (!data) return null
 
-  return (
-    <button
-      style={style}
-      onClick={onClick}
-      disabled={loading || disabled}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      {loading ? 'Väntar…' : label}
-    </button>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// BookingCard
-// ---------------------------------------------------------------------------
-export function BookingCard({ booking, onConfirm, onDecline, onCancel, onView }) {
   const [loadingAction, setLoadingAction] = useState(null)
   const [error, setError] = useState(null)
 
+  const statusLabel = {
+    pending: t('booking.card.status.pending'),
+    confirmed: t('booking.card.status.confirmed'),
+    cancelled: t('booking.card.status.cancelled'),
+  }
+
   const handle = async (actionFn, actionName) => {
     setLoadingAction(actionName)
     setError(null)
     try {
-      await actionFn(booking)
+      await actionFn(data)
     } catch (err) {
-      setError(err?.message ?? 'Något gick fel')
+      setError(err?.message ?? t('booking.card.errorGeneric'))
     } finally {
       setLoadingAction(null)
     }
   }
 
-  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={statusLabel[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,
-            }}
-          >
-            Visa →
-          </button>
+          <Button variant="link" onClick={() => onView(data)}>
+            {t('booking.card.view')}
+          </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, t, language)}</Text>
+        <Text size="s" color="secondary">{formatDuration(data.duration, t)}</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' ? t('booking.card.waiting') : t('booking.card.confirm')}
+            </Button>
           )}
           {isPending && onDecline && (
-            <ActionButton
-              label="Avböj"
-              danger
-              loading={loadingAction === 'decline'}
+            <Button
+              variant="danger"
+              disabled={loadingAction === 'decline'}
               onClick={() => handle(onDecline, 'decline')}
-            />
+            >
+              {loadingAction === 'decline' ? t('booking.card.waiting') : t('booking.card.decline')}
+            </Button>
           )}
           {isConfirmed && onCancel && (
-            <ActionButton
-              label="Avboka"
-              danger
-              loading={loadingAction === 'cancel'}
+            <Button
+              variant="danger"
+              disabled={loadingAction === 'cancel'}
               onClick={() => handle(onCancel, 'cancel')}
-            />
+            >
+              {loadingAction === 'cancel' ? t('booking.card.waiting') : t('booking.card.cancel')}
+            </Button>
           )}
-        </div>
+        </View>
       )}
 
       {error && (
-        <div style={{ fontSize: 12, color: C.errorText }}>{error}</div>
+        <Alert variant="danger">{error}</Alert>
       )}
-    </div>
+    </View>
   )
 }