@ossy/booking 1.13.2 → 1.14.0

package/src/booking-detail.page.jsx

@@ -0,0 +1,659 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { useRouter } from '@ossy/router-react'
+
+// ---------------------------------------------------------------------------
+// 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: {
+    sv: '/bokningar/:bookingId',
+    en: '/bookings/:bookingId',
+  },
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+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) {
+  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 year = d.getFullYear()
+  const hh = String(d.getHours()).padStart(2, '0')
+  const mm = String(d.getMinutes()).padStart(2, '0')
+  try {
+    const tz = new Intl.DateTimeFormat('sv-SE', { timeZoneName: 'short', hour: 'numeric' })
+      .formatToParts(d).find(p => p.type === 'timeZoneName')?.value ?? ''
+    return `${weekday} ${day} ${month} ${year} kl. ${hh}:${mm}${tz ? ` (${tz})` : ''}`
+  } catch {
+    return `${weekday} ${day} ${month} ${year} kl. ${hh}:${mm}`
+  }
+}
+
+function formatDuration(minutes) {
+  if (!minutes) return '—'
+  if (minutes < 60) return `${minutes} minuter`
+  const h = Math.floor(minutes / 60)
+  const m = minutes % 60
+  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 }) {
+  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>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// 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 }) {
+  const [loading, setLoading] = useState(false)
+
+  const handleConfirm = async () => {
+    setLoading(true)
+    try {
+      const res = await fetch('/actions/booking/confirm', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ bookingId: booking.id }),
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data?.message ?? 'Bekräftning misslyckades')
+      }
+      onSuccess()
+    } catch (err) {
+      onError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  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',
+      }}
+    >
+      {loading ? 'Bekräftar…' : 'Bekräfta bokning'}
+    </button>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Decline form
+// ---------------------------------------------------------------------------
+function DeclineForm({ booking, onSuccess, onError }) {
+  const [reason, setReason] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+
+  const handleDecline = async () => {
+    setLoading(true)
+    try {
+      const res = await fetch('/actions/booking/decline', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ bookingId: booking.id, reason: reason.trim() || null }),
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data?.message ?? 'Avböjning misslyckades')
+      }
+      onSuccess()
+    } catch (err) {
+      onError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  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',
+        }}
+      >
+        Avböj förfrågan
+      </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
+          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>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Cancel form
+// ---------------------------------------------------------------------------
+function CancelForm({ booking, onSuccess, onError }) {
+  const [loading, setLoading] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+
+  const handleCancel = async () => {
+    setLoading(true)
+    try {
+      const res = await fetch('/actions/booking/cancel', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ bookingId: booking.id }),
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data?.message ?? 'Avbokning misslyckades')
+      }
+      onSuccess()
+    } catch (err) {
+      onError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  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',
+        }}
+      >
+        Avboka möte
+      </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>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Page
+// ---------------------------------------------------------------------------
+export default function BookingDetailPage({ bookingId: bookingIdProp }) {
+  const router = useRouter()
+  const bookingId = bookingIdProp ?? router?.params?.bookingId
+
+  const [booking, setBooking] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+  const [actionError, setActionError] = useState(null)
+
+  const loadBooking = useCallback(async () => {
+    if (!bookingId) return
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await fetch('/actions/booking/list', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({}),
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data?.message ?? `Fel ${res.status}`)
+      }
+      const all = await res.json()
+      const found = all.find(b => b.id === bookingId)
+      if (!found) throw new Error('Bokningen hittades inte')
+      setBooking(found)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }, [bookingId])
+
+  useEffect(() => {
+    loadBooking()
+  }, [loadBooking])
+
+  const handleSuccess = () => {
+    setActionError(null)
+    loadBooking()
+  }
+
+  const goBack = () => {
+    if (window.history.length > 1) window.history.back()
+    else window.location.href = '/bokningar'
+  }
+
+  return (
+    <div
+      style={{
+        fontFamily: FONT,
+        height: '100%',
+        overflowY: 'auto',
+        background: C.bg,
+        padding: 'var(--space-m, 16px) var(--space-l, 24px)',
+        boxSizing: 'border-box',
+      }}
+    >
+      {/* 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,
+        }}
+      >
+        ← Alla bokningar
+      </button>
+
+      {loading ? (
+        <Spinner />
+      ) : 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>
+      ) : 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 }}>
+              <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>
+              )}
+            </div>
+          </div>
+
+          {/* 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 }}>
+                {booking.status === 'pending' ? 'Hantera förfrågan' : 'Hantera bokning'}
+              </h2>
+
+              {actionError && (
+                <div style={{ fontSize: 13, color: C.errorText, fontFamily: FONT }}>
+                  {actionError}
+                </div>
+              )}
+
+              {booking.status === 'pending' && (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+                  <ConfirmForm
+                    booking={booking}
+                    onSuccess={handleSuccess}
+                    onError={setActionError}
+                  />
+                  <DeclineForm
+                    booking={booking}
+                    onSuccess={handleSuccess}
+                    onError={setActionError}
+                  />
+                </div>
+              )}
+
+              {booking.status === 'confirmed' && (
+                <CancelForm
+                  booking={booking}
+                  onSuccess={handleSuccess}
+                  onError={setActionError}
+                />
+              )}
+            </div>
+          )}
+        </div>
+      ) : null}
+    </div>
+  )
+}