@ossy/booking 1.15.6 → 1.15.7

package/src/booking-detail.page.jsx

@@ -1,34 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { useRouter } from '@ossy/router-react'
+import { View, Title, Text, Button, Badge, Alert, Textarea } from '@ossy/design-system'
 
-// ---------------------------------------------------------------------------
-// Tokens
-// ---------------------------------------------------------------------------
-const C = {
-  bg: '#fafafa',
-  surface: '#ffffff',
-  border: '#e4e4e7',
-  primary: '#111111',
-  secondary: '#52525b',
-  muted: '#a1a1aa',
-  pendingBg: '#fffbeb',
-  pendingText: '#92400e',
-  pendingBorder: '#fde68a',
-  confirmedBg: '#f0fdf4',
-  confirmedText: '#166534',
-  confirmedBorder: '#bbf7d0',
-  cancelledBg: '#f4f4f5',
-  cancelledText: '#52525b',
-  cancelledBorder: '#e4e4e7',
-  errorText: '#dc2626',
-  dangerBorder: '#fca5a5',
-  inputBorder: '#d4d4d8',
-}
-const FONT = 'system-ui, -apple-system, sans-serif'
-
-// ---------------------------------------------------------------------------
-// Page metadata
-// ---------------------------------------------------------------------------
 export const metadata = {
   id: 'booking/booking-detail',
   path: {
@@ -37,16 +10,25 @@ export const metadata = {
   },
 }
 
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
+const STATUS_VARIANT = {
+  pending: 'warning',
+  confirmed: 'success',
+  cancelled: 'neutral',
+}
+
+const STATUS_LABEL = {
+  pending: 'Väntar på bekräftelse',
+  confirmed: 'Bekräftad',
+  cancelled: 'Avbokad',
+}
+
 const SV_MONTHS = [
   'januari', 'februari', 'mars', 'april', 'maj', 'juni',
   'juli', 'augusti', 'september', 'oktober', 'november', 'december',
 ]
 const SV_WEEKDAYS = ['Söndag', 'Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag']
 
-function formatDateTime(iso) {
+function formatDateTime (iso) {
   if (!iso) return '—'
   const d = new Date(iso)
   const weekday = SV_WEEKDAYS[d.getDay()]
@@ -64,7 +46,7 @@ function formatDateTime(iso) {
   }
 }
 
-function formatDuration(minutes) {
+function formatDuration (minutes) {
   if (!minutes) return '—'
   if (minutes < 60) return `${minutes} minuter`
   const h = Math.floor(minutes / 60)
@@ -72,91 +54,16 @@ function formatDuration(minutes) {
   return m ? `${h} timme ${m} min` : `${h} timme`
 }
 
-// ---------------------------------------------------------------------------
-// Status badge
-// ---------------------------------------------------------------------------
-function StatusBadge({ status }) {
-  const variants = {
-    pending: { bg: C.pendingBg, color: C.pendingText, border: C.pendingBorder, label: 'Väntar på bekräftelse' },
-    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: '4px 12px',
-        borderRadius: 999,
-        fontSize: 13,
-        fontWeight: 600,
-        fontFamily: FONT,
-        background: v.bg,
-        color: v.color,
-        border: `1px solid ${v.border}`,
-      }}
-    >
-      {v.label}
-    </span>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Detail row
-// ---------------------------------------------------------------------------
-function DetailRow({ label, value }) {
+function DetailRow ({ label, value }) {
   return (
-    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-      <span
-        style={{
-          width: 120,
-          flexShrink: 0,
-          fontSize: 13,
-          fontWeight: 600,
-          color: C.secondary,
-          fontFamily: FONT,
-          paddingTop: 1,
-        }}
-      >
-        {label}
-      </span>
-      <span style={{ fontSize: 14, color: C.primary, fontFamily: FONT, flex: 1 }}>
-        {value ?? '—'}
-      </span>
-    </div>
+    <View layout="row" gap="m" style={{ flexWrap: 'wrap' }}>
+      <Text weight="medium" color="secondary" style={{ width: 120, flexShrink: 0 }}>{label}</Text>
+      <Text style={{ flex: 1 }}>{value ?? '—'}</Text>
+    </View>
   )
 }
 
-// ---------------------------------------------------------------------------
-// Spinner
-// ---------------------------------------------------------------------------
-function Spinner() {
-  return (
-    <>
-      <style href="booking/detail-spinner" precedence="low">
-        {`@keyframes booking-detail-spin { to { transform: rotate(360deg) } }`}
-      </style>
-      <div
-        style={{
-          width: 22,
-          height: 22,
-          border: '3px solid #e4e4e7',
-          borderTopColor: C.primary,
-          borderRadius: '50%',
-          animation: 'booking-detail-spin 0.7s linear infinite',
-          margin: '48px auto',
-        }}
-      />
-    </>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Confirm form
-// ---------------------------------------------------------------------------
-function ConfirmForm({ booking, onSuccess, onError }) {
+function ConfirmForm ({ booking, onSuccess, onError }) {
   const [loading, setLoading] = useState(false)
 
   const handleConfirm = async () => {
@@ -180,30 +87,13 @@ function ConfirmForm({ booking, onSuccess, onError }) {
   }
 
   return (
-    <button
-      onClick={handleConfirm}
-      disabled={loading}
-      style={{
-        padding: '10px 20px',
-        background: loading ? C.muted : C.primary,
-        color: '#ffffff',
-        border: 'none',
-        borderRadius: 8,
-        fontFamily: FONT,
-        fontSize: 14,
-        fontWeight: 600,
-        cursor: loading ? 'not-allowed' : 'pointer',
-      }}
-    >
+    <Button variant="primary" disabled={loading} onClick={handleConfirm}>
       {loading ? 'Bekräftar…' : 'Bekräfta bokning'}
-    </button>
+    </Button>
   )
 }
 
-// ---------------------------------------------------------------------------
-// Decline form
-// ---------------------------------------------------------------------------
-function DeclineForm({ booking, onSuccess, onError }) {
+function DeclineForm ({ booking, onSuccess, onError }) {
   const [reason, setReason] = useState('')
   const [loading, setLoading] = useState(false)
   const [expanded, setExpanded] = useState(false)
@@ -230,110 +120,38 @@ function DeclineForm({ booking, onSuccess, onError }) {
 
   if (!expanded) {
     return (
-      <button
-        onClick={() => setExpanded(true)}
-        style={{
-          padding: '10px 20px',
-          background: 'transparent',
-          color: C.errorText,
-          border: `1px solid ${C.dangerBorder}`,
-          borderRadius: 8,
-          fontFamily: FONT,
-          fontSize: 14,
-          fontWeight: 600,
-          cursor: 'pointer',
-        }}
-      >
+      <Button variant="danger" onClick={() => setExpanded(true)}>
         Avböj förfrågan
-      </button>
+      </Button>
     )
   }
 
   return (
-    <div
-      style={{
-        background: '#fff5f5',
-        border: `1px solid ${C.dangerBorder}`,
-        borderRadius: 10,
-        padding: '16px 20px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 12,
-      }}
-    >
-      <span style={{ fontSize: 14, fontWeight: 600, color: C.errorText, fontFamily: FONT }}>
-        Avböj bokningsförfrågan
-      </span>
-
-      <div>
-        <label
-          style={{ display: 'block', fontSize: 13, color: C.secondary, fontFamily: FONT, marginBottom: 6 }}
-        >
-          Anledning (valfritt — skickas till klienten)
-        </label>
-        <textarea
+    <Alert variant="danger" title="Avböj bokningsförfrågan">
+      <View gap="s">
+        <Textarea
           value={reason}
           onChange={e => setReason(e.target.value)}
           rows={3}
           placeholder="T.ex. Tyvärr är den begärda tiden inte längre tillgänglig…"
-          style={{
-            width: '100%',
-            padding: '8px 12px',
-            border: `1px solid ${C.inputBorder}`,
-            borderRadius: 6,
-            fontFamily: FONT,
-            fontSize: 13,
-            color: C.primary,
-            background: '#fff',
-            boxSizing: 'border-box',
-            resize: 'vertical',
-            outline: 'none',
-          }}
         />
-      </div>
-
-      <div style={{ display: 'flex', gap: 8 }}>
-        <button
-          onClick={handleDecline}
-          disabled={loading}
-          style={{
-            padding: '8px 16px',
-            background: loading ? C.muted : C.errorText,
-            color: '#ffffff',
-            border: 'none',
-            borderRadius: 6,
-            fontFamily: FONT,
-            fontSize: 13,
-            fontWeight: 600,
-            cursor: loading ? 'not-allowed' : 'pointer',
-          }}
-        >
-          {loading ? 'Avböjer…' : 'Bekräfta avböjning'}
-        </button>
-        <button
-          onClick={() => setExpanded(false)}
-          style={{
-            padding: '8px 16px',
-            background: 'transparent',
-            color: C.secondary,
-            border: `1px solid ${C.border}`,
-            borderRadius: 6,
-            fontFamily: FONT,
-            fontSize: 13,
-            cursor: 'pointer',
-          }}
-        >
-          Avbryt
-        </button>
-      </div>
-    </div>
+        <Text variant="small" color="secondary">
+          Anledning (valfritt — skickas till klienten)
+        </Text>
+        <View layout="row" gap="s">
+          <Button variant="danger" disabled={loading} onClick={handleDecline}>
+            {loading ? 'Avböjer…' : 'Bekräfta avböjning'}
+          </Button>
+          <Button variant="neutral" onClick={() => setExpanded(false)}>
+            Avbryt
+          </Button>
+        </View>
+      </View>
+    </Alert>
   )
 }
 
-// ---------------------------------------------------------------------------
-// Cancel form
-// ---------------------------------------------------------------------------
-function CancelForm({ booking, onSuccess, onError }) {
+function CancelForm ({ booking, onSuccess, onError }) {
   const [loading, setLoading] = useState(false)
   const [expanded, setExpanded] = useState(false)
 
@@ -359,85 +177,32 @@ function CancelForm({ booking, onSuccess, onError }) {
 
   if (!expanded) {
     return (
-      <button
-        onClick={() => setExpanded(true)}
-        style={{
-          padding: '10px 20px',
-          background: 'transparent',
-          color: C.errorText,
-          border: `1px solid ${C.dangerBorder}`,
-          borderRadius: 8,
-          fontFamily: FONT,
-          fontSize: 14,
-          fontWeight: 600,
-          cursor: 'pointer',
-        }}
-      >
+      <Button variant="danger" onClick={() => setExpanded(true)}>
         Avboka möte
-      </button>
+      </Button>
     )
   }
 
   return (
-    <div
-      style={{
-        background: '#fff5f5',
-        border: `1px solid ${C.dangerBorder}`,
-        borderRadius: 10,
-        padding: '16px 20px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 12,
-      }}
-    >
-      <span style={{ fontSize: 14, fontWeight: 600, color: C.errorText, fontFamily: FONT }}>
-        Avboka bekräftad bokning
-      </span>
-      <p style={{ margin: 0, fontSize: 13, color: C.secondary, fontFamily: FONT }}>
-        Klienten meddelas via e-post. Åtgärden kan inte ångras.
-      </p>
-      <div style={{ display: 'flex', gap: 8 }}>
-        <button
-          onClick={handleCancel}
-          disabled={loading}
-          style={{
-            padding: '8px 16px',
-            background: loading ? C.muted : C.errorText,
-            color: '#ffffff',
-            border: 'none',
-            borderRadius: 6,
-            fontFamily: FONT,
-            fontSize: 13,
-            fontWeight: 600,
-            cursor: loading ? 'not-allowed' : 'pointer',
-          }}
-        >
-          {loading ? 'Avbokar…' : 'Bekräfta avbokning'}
-        </button>
-        <button
-          onClick={() => setExpanded(false)}
-          style={{
-            padding: '8px 16px',
-            background: 'transparent',
-            color: C.secondary,
-            border: `1px solid ${C.border}`,
-            borderRadius: 6,
-            fontFamily: FONT,
-            fontSize: 13,
-            cursor: 'pointer',
-          }}
-        >
-          Avbryt
-        </button>
-      </div>
-    </div>
+    <Alert variant="danger" title="Avboka bekräftad bokning">
+      <View gap="s">
+        <Text color="secondary">
+          Klienten meddelas via e-post. Åtgärden kan inte ångras.
+        </Text>
+        <View layout="row" gap="s">
+          <Button variant="danger" disabled={loading} onClick={handleCancel}>
+            {loading ? 'Avbokar…' : 'Bekräfta avbokning'}
+          </Button>
+          <Button variant="neutral" onClick={() => setExpanded(false)}>
+            Avbryt
+          </Button>
+        </View>
+      </View>
+    </Alert>
   )
 }
 
-// ---------------------------------------------------------------------------
-// Page
-// ---------------------------------------------------------------------------
-export default function BookingDetailPage({ bookingId: bookingIdProp }) {
+export default function BookingDetailPage ({ bookingId: bookingIdProp }) {
   const router = useRouter()
   const bookingId = bookingIdProp ?? router?.params?.bookingId
 
@@ -486,150 +251,59 @@ export default function BookingDetailPage({ bookingId: bookingIdProp }) {
   }
 
   return (
-    <div
-      style={{
-        fontFamily: FONT,
-        height: '100%',
-        overflowY: 'auto',
-        background: C.bg,
-        padding: 'var(--space-m, 16px) var(--space-l, 24px)',
-        boxSizing: 'border-box',
-      }}
+    <View
+      gap="m"
+      surface="primary"
+      style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}
     >
-      {/* Back link */}
-      <button
-        onClick={goBack}
-        style={{
-          background: 'none',
-          border: 'none',
-          cursor: 'pointer',
-          color: C.secondary,
-          fontFamily: FONT,
-          fontSize: 13,
-          padding: 0,
-          marginBottom: 20,
-          display: 'flex',
-          alignItems: 'center',
-          gap: 4,
-        }}
-      >
+      <Button variant="link" onClick={goBack}>
         ← Alla bokningar
-      </button>
+      </Button>
 
       {loading ? (
-        <Spinner />
+        <Text color="secondary" style={{ textAlign: 'center', padding: 'var(--space-l)' }}>
+          Laddar…
+        </Text>
       ) : error ? (
-        <div
-          style={{
-            padding: 24,
-            background: C.surface,
-            border: `1px solid ${C.border}`,
-            borderRadius: 12,
-            fontSize: 14,
-            color: C.errorText,
-            fontFamily: FONT,
-            textAlign: 'center',
-          }}
-        >
-          {error}
-        </div>
+        <Alert variant="danger">{error}</Alert>
       ) : booking ? (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 680 }}>
-          {/* Header card */}
-          <div
-            style={{
-              background: C.surface,
-              border: `1px solid ${C.border}`,
-              borderRadius: 12,
-              padding: '24px 28px',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 16,
-            }}
-          >
-            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
-              <div>
-                <h1 style={{ margin: 0, fontSize: 20, fontWeight: 700, color: C.primary }}>
-                  {booking.clientName ?? '—'}
-                </h1>
-                <p style={{ margin: '4px 0 0', fontSize: 14, color: C.secondary }}>
-                  {booking.clientEmail ?? ''}
-                </p>
-              </div>
-              <StatusBadge status={booking.status} />
-            </div>
-
-            <div
-              style={{
-                height: 1,
-                background: C.border,
-              }}
-            />
-
-            {/* Details */}
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+        <View gap="m" style={{ maxWidth: 680 }}>
+          <View gap="m" surface="secondary" roundness="m" inset="l">
+            <View layout="row" justifyContent="space-between" alignItems="flex-start" gap="m" style={{ flexWrap: 'wrap' }}>
+              <View gap="xs">
+                <Title variant="secondary">{booking.clientName ?? '—'}</Title>
+                {booking.clientEmail && <Text color="secondary">{booking.clientEmail}</Text>}
+              </View>
+              <Badge
+                label={STATUS_LABEL[booking.status] ?? booking.status}
+                variant={STATUS_VARIANT[booking.status] ?? 'neutral'}
+              />
+            </View>
+
+            <View gap="s">
               <DetailRow label="Datum och tid" value={formatDateTime(booking.startsAt)} />
               <DetailRow label="Längd" value={formatDuration(booking.duration)} />
               {booking.clientMessage && (
-                <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-                  <span
-                    style={{
-                      width: 120,
-                      flexShrink: 0,
-                      fontSize: 13,
-                      fontWeight: 600,
-                      color: C.secondary,
-                      fontFamily: FONT,
-                      paddingTop: 1,
-                    }}
-                  >
-                    Meddelande
-                  </span>
-                  <div
-                    style={{
-                      flex: 1,
-                      fontSize: 14,
-                      color: C.primary,
-                      fontFamily: FONT,
-                      background: '#fafafa',
-                      borderRadius: 6,
-                      padding: '10px 14px',
-                      borderLeft: `3px solid ${C.border}`,
-                      whiteSpace: 'pre-wrap',
-                    }}
-                  >
-                    {booking.clientMessage}
-                  </div>
-                </div>
+                <View gap="xs">
+                  <Text weight="medium" color="secondary">Meddelande</Text>
+                  <View surface="primary" roundness="s" inset="s" style={{ borderLeft: '3px solid var(--separator)' }}>
+                    <Text style={{ whiteSpace: 'pre-wrap' }}>{booking.clientMessage}</Text>
+                  </View>
+                </View>
               )}
-            </div>
-          </div>
+            </View>
+          </View>
 
-          {/* Actions card — only shown for pending or confirmed */}
           {(booking.status === 'pending' || booking.status === 'confirmed') && (
-            <div
-              style={{
-                background: C.surface,
-                border: `1px solid ${C.border}`,
-                borderRadius: 12,
-                padding: '20px 28px',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 12,
-              }}
-            >
-              <h2 style={{ margin: 0, fontSize: 15, fontWeight: 600, color: C.primary }}>
+            <View gap="s" surface="secondary" roundness="m" inset="l">
+              <Title variant="tertiary">
                 {booking.status === 'pending' ? 'Hantera förfrågan' : 'Hantera bokning'}
-              </h2>
+              </Title>
 
-              {actionError && (
-                <div style={{ fontSize: 13, color: C.errorText, fontFamily: FONT }}>
-                  {actionError}
-                </div>
-              )}
+              {actionError && <Alert variant="danger">{actionError}</Alert>}
 
               {booking.status === 'pending' && (
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+                <View gap="s">
                   <ConfirmForm
                     booking={booking}
                     onSuccess={handleSuccess}
@@ -640,7 +314,7 @@ export default function BookingDetailPage({ bookingId: bookingIdProp }) {
                     onSuccess={handleSuccess}
                     onError={setActionError}
                   />
-                </div>
+                </View>
               )}
 
               {booking.status === 'confirmed' && (
@@ -650,10 +324,10 @@ export default function BookingDetailPage({ bookingId: bookingIdProp }) {
                   onError={setActionError}
                 />
               )}
-            </div>
+            </View>
           )}
-        </div>
+        </View>
       ) : null}
-    </div>
+    </View>
   )
 }