@ossy/booking 1.13.2 → 1.14.0

package/src/booking-card.component.jsx

@@ -0,0 +1,279 @@
+import React, { useState } from 'react'
+
+export const metadata = { id: '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 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) {
+  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')
+  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})` : ''}`
+  } catch {
+    return `${weekday} ${day} ${month} kl. ${hh}:${mm}`
+  }
+}
+
+function formatDuration(minutes) {
+  if (!minutes) return '—'
+  if (minutes < 60) return `${minutes} min`
+  const h = Math.floor(minutes / 60)
+  const m = minutes % 60
+  return m ? `${h} h ${m} min` : `${h} h`
+}
+
+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>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// BookingCard
+// ---------------------------------------------------------------------------
+export function BookingCard({ booking, onConfirm, onDecline, onCancel, onView }) {
+  const [loadingAction, setLoadingAction] = useState(null)
+  const [error, setError] = useState(null)
+
+  const handle = async (actionFn, actionName) => {
+    setLoadingAction(actionName)
+    setError(null)
+    try {
+      await actionFn(booking)
+    } catch (err) {
+      setError(err?.message ?? 'Något gick fel')
+    } finally {
+      setLoadingAction(null)
+    }
+  }
+
+  const isPending = booking.status === 'pending'
+  const isConfirmed = booking.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>
+
+        {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>
+        )}
+      </div>
+
+      {/* 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>
+
+      {/* 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>
+      )}
+
+      {/* Actions */}
+      {(isPending || isConfirmed) && (
+        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
+          {isPending && onConfirm && (
+            <ActionButton
+              label="Bekräfta"
+              loading={loadingAction === 'confirm'}
+              onClick={() => handle(onConfirm, 'confirm')}
+            />
+          )}
+          {isPending && onDecline && (
+            <ActionButton
+              label="Avböj"
+              danger
+              loading={loadingAction === 'decline'}
+              onClick={() => handle(onDecline, 'decline')}
+            />
+          )}
+          {isConfirmed && onCancel && (
+            <ActionButton
+              label="Avboka"
+              danger
+              loading={loadingAction === 'cancel'}
+              onClick={() => handle(onCancel, 'cancel')}
+            />
+          )}
+        </div>
+      )}
+
+      {error && (
+        <div style={{ fontSize: 12, color: C.errorText }}>{error}</div>
+      )}
+    </div>
+  )
+}
+
+export default BookingCard