@ossy/booking 1.13.0 → 1.13.2

package/src/public-booking.page.jsx

@@ -0,0 +1,739 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { useRouter } from '@ossy/router-react'
+
+// ---------------------------------------------------------------------------
+// Inline design tokens
+// ---------------------------------------------------------------------------
+const COLOR = {
+  bg: '#f5f5f5',
+  surface: '#ffffff',
+  surfaceHover: '#f8f8f8',
+  border: '#e2e2e2',
+  primary: '#111111',
+  primaryText: '#ffffff',
+  secondary: '#555555',
+  muted: '#999999',
+  success: '#16a34a',
+  successBg: '#f0fdf4',
+  slotAvailable: '#111111',
+  slotAvailableBg: '#f0fdf4',
+  slotSelected: '#111111',
+  slotSelectedBg: '#dcfce7',
+  error: '#dc2626',
+}
+
+const FONT = 'system-ui, -apple-system, sans-serif'
+
+// ---------------------------------------------------------------------------
+// Swedish locale helpers
+// ---------------------------------------------------------------------------
+const SV_MONTHS = [
+  'Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni',
+  'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December',
+]
+const SV_WEEKDAYS_SHORT = ['Sön', 'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör']
+const SV_WEEKDAYS_LONG = ['Söndag', 'Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag']
+
+function formatDate(isoString) {
+  const d = new Date(isoString)
+  const weekday = SV_WEEKDAYS_LONG[d.getDay()]
+  const day = d.getDate()
+  const month = SV_MONTHS[d.getMonth()]
+  const hours = String(d.getHours()).padStart(2, '0')
+  const minutes = String(d.getMinutes()).padStart(2, '0')
+  return `${weekday} ${day} ${month} kl. ${hours}:${minutes}`
+}
+
+function formatTime(isoString) {
+  const d = new Date(isoString)
+  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
+}
+
+function getTimezoneLabel(isoString) {
+  try {
+    return new Intl.DateTimeFormat('sv-SE', { timeZoneName: 'short', hour: 'numeric' })
+      .formatToParts(new Date(isoString))
+      .find(p => p.type === 'timeZoneName')?.value ?? ''
+  } catch {
+    return ''
+  }
+}
+
+function formatSlotRange(startIso, durationMinutes) {
+  const start = new Date(startIso)
+  const end = new Date(start.getTime() + durationMinutes * 60 * 1000)
+  const startStr = formatTime(startIso)
+  const endStr = formatTime(end.toISOString())
+  const tz = getTimezoneLabel(startIso)
+  return tz ? `${startStr}–${endStr} (${tz})` : `${startStr}–${endStr}`
+}
+
+// ---------------------------------------------------------------------------
+// Group slots by local date key "YYYY-MM-DD"
+// ---------------------------------------------------------------------------
+function groupSlotsByDate(slots) {
+  const groups = {}
+  for (const slot of slots) {
+    const d = new Date(slot.startAt)
+    const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+    if (!groups[key]) groups[key] = []
+    groups[key].push(slot)
+  }
+  return groups
+}
+
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate()
+}
+
+function getFirstDayOfMonth(year, month) {
+  // 0=Sun…6=Sat; we want Mon-first grid (0=Mon…6=Sun)
+  const raw = new Date(year, month, 1).getDay()
+  return (raw + 6) % 7
+}
+
+// ---------------------------------------------------------------------------
+// Components
+// ---------------------------------------------------------------------------
+
+function Spinner() {
+  return (
+    <div
+      style={{
+        width: 24,
+        height: 24,
+        border: '3px solid #e2e2e2',
+        borderTopColor: '#111111',
+        borderRadius: '50%',
+        animation: 'spin 0.7s linear infinite',
+        margin: '0 auto',
+      }}
+    />
+  )
+}
+
+function MonthCalendar({ year, month, slotsGrouped, selectedDate, onSelectDate, onPrevMonth, onNextMonth }) {
+  const daysInMonth = getDaysInMonth(year, month)
+  const firstDayOffset = getFirstDayOfMonth(year, month)
+  const today = new Date()
+  const todayKey = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
+
+  const cells = []
+  for (let i = 0; i < firstDayOffset; i++) cells.push(null)
+  for (let d = 1; d <= daysInMonth; d++) cells.push(d)
+
+  return (
+    <div>
+      {/* Month nav */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
+        <button
+          onClick={onPrevMonth}
+          style={{
+            background: 'none',
+            border: `1px solid ${COLOR.border}`,
+            borderRadius: 8,
+            padding: '6px 12px',
+            cursor: 'pointer',
+            fontFamily: FONT,
+            fontSize: 14,
+            color: COLOR.primary,
+          }}
+        >
+          ‹
+        </button>
+        <span style={{ fontWeight: 600, fontSize: 15, color: COLOR.primary }}>
+          {SV_MONTHS[month]} {year}
+        </span>
+        <button
+          onClick={onNextMonth}
+          style={{
+            background: 'none',
+            border: `1px solid ${COLOR.border}`,
+            borderRadius: 8,
+            padding: '6px 12px',
+            cursor: 'pointer',
+            fontFamily: FONT,
+            fontSize: 14,
+            color: COLOR.primary,
+          }}
+        >
+          ›
+        </button>
+      </div>
+
+      {/* Weekday headers */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, marginBottom: 4 }}>
+        {SV_WEEKDAYS_SHORT.map((d, i) => (
+          <div
+            key={i}
+            style={{
+              textAlign: 'center',
+              fontSize: 11,
+              fontWeight: 600,
+              color: COLOR.muted,
+              padding: '4px 0',
+            }}
+          >
+            {/* Shift: Mon=index 0 → SV_WEEKDAYS_SHORT[1] */}
+            {SV_WEEKDAYS_SHORT[(i + 1) % 7]}
+          </div>
+        ))}
+      </div>
+
+      {/* Day cells */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
+        {cells.map((day, idx) => {
+          if (!day) return <div key={`empty-${idx}`} />
+
+          const dateKey = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
+          const hasSlots = !!slotsGrouped[dateKey]
+          const isSelected = selectedDate === dateKey
+          const isToday = dateKey === todayKey
+          const isPast = dateKey < todayKey
+
+          return (
+            <button
+              key={dateKey}
+              disabled={!hasSlots || isPast}
+              onClick={() => hasSlots && !isPast && onSelectDate(dateKey)}
+              style={{
+                border: isSelected
+                  ? `2px solid ${COLOR.primary}`
+                  : isToday
+                    ? `2px solid #d1d5db`
+                    : `1px solid transparent`,
+                borderRadius: 8,
+                padding: '8px 4px',
+                cursor: hasSlots && !isPast ? 'pointer' : 'default',
+                background: isSelected
+                  ? COLOR.primary
+                  : hasSlots && !isPast
+                    ? COLOR.slotAvailableBg
+                    : 'transparent',
+                color: isSelected
+                  ? '#ffffff'
+                  : isPast
+                    ? COLOR.muted
+                    : COLOR.primary,
+                fontFamily: FONT,
+                fontSize: 13,
+                fontWeight: isToday ? 700 : 400,
+                textAlign: 'center',
+                transition: 'background 0.1s',
+                position: 'relative',
+                lineHeight: 1.4,
+              }}
+            >
+              {day}
+              {hasSlots && !isPast && !isSelected && (
+                <div
+                  style={{
+                    position: 'absolute',
+                    bottom: 3,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    width: 4,
+                    height: 4,
+                    borderRadius: '50%',
+                    background: COLOR.success,
+                  }}
+                />
+              )}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+function SlotPicker({ slots, selectedSlot, onSelectSlot }) {
+  if (!slots || slots.length === 0) {
+    return (
+      <p style={{ color: COLOR.secondary, fontSize: 14, margin: 0 }}>
+        Inga tillgängliga tider för valt datum.
+      </p>
+    )
+  }
+
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+      {slots.map(slot => {
+        const isSelected = selectedSlot?.startAt === slot.startAt
+        return (
+          <button
+            key={slot.startAt}
+            onClick={() => onSelectSlot(slot)}
+            style={{
+              border: isSelected
+                ? `2px solid ${COLOR.primary}`
+                : `1px solid ${COLOR.border}`,
+              borderRadius: 8,
+              padding: '8px 14px',
+              cursor: 'pointer',
+              background: isSelected ? COLOR.primary : COLOR.surface,
+              color: isSelected ? '#ffffff' : COLOR.primary,
+              fontFamily: FONT,
+              fontSize: 14,
+              fontWeight: 500,
+              transition: 'background 0.1s, border-color 0.1s',
+            }}
+          >
+            {formatSlotRange(slot.startAt, slot.duration)}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+function BookingForm({ slot, consultantSlug, onSuccess }) {
+  const [clientName, setClientName] = useState('')
+  const [clientEmail, setClientEmail] = useState('')
+  const [clientMessage, setClientMessage] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState(null)
+
+  const inputStyle = {
+    width: '100%',
+    padding: '10px 12px',
+    border: `1px solid ${COLOR.border}`,
+    borderRadius: 8,
+    fontFamily: FONT,
+    fontSize: 14,
+    color: COLOR.primary,
+    background: COLOR.surface,
+    boxSizing: 'border-box',
+    outline: 'none',
+    marginTop: 4,
+    display: 'block',
+  }
+
+  const labelStyle = {
+    display: 'block',
+    fontSize: 13,
+    fontWeight: 600,
+    color: COLOR.primary,
+    marginBottom: 12,
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!clientName.trim() || !clientEmail.trim()) return
+
+    setSubmitting(true)
+    setError(null)
+
+    try {
+      const res = await fetch('/actions/booking/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          consultantId: consultantSlug,
+          startAt: slot.startAt,
+          duration: slot.duration,
+          clientName: clientName.trim(),
+          clientEmail: clientEmail.trim(),
+          clientMessage: clientMessage.trim(),
+        }),
+      })
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data?.message ?? `Bokning misslyckades (${res.status})`)
+      }
+
+      const booking = await res.json()
+      onSuccess(booking)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label style={labelStyle}>
+        Ditt namn
+        <input
+          type="text"
+          required
+          value={clientName}
+          onChange={e => setClientName(e.target.value)}
+          placeholder="Anna Svensson"
+          style={inputStyle}
+        />
+      </label>
+
+      <label style={labelStyle}>
+        E-postadress
+        <input
+          type="email"
+          required
+          value={clientEmail}
+          onChange={e => setClientEmail(e.target.value)}
+          placeholder="anna@exempel.se"
+          style={inputStyle}
+        />
+      </label>
+
+      <label style={labelStyle}>
+        Meddelande (valfritt)
+        <textarea
+          value={clientMessage}
+          onChange={e => setClientMessage(e.target.value)}
+          placeholder="Berätta gärna vad du vill prata om..."
+          rows={3}
+          style={{ ...inputStyle, resize: 'vertical' }}
+        />
+      </label>
+
+      {error && (
+        <p style={{ color: COLOR.error, fontSize: 13, margin: '0 0 12px' }}>{error}</p>
+      )}
+
+      <button
+        type="submit"
+        disabled={submitting}
+        style={{
+          width: '100%',
+          padding: '12px 20px',
+          background: submitting ? COLOR.muted : COLOR.primary,
+          color: '#ffffff',
+          border: 'none',
+          borderRadius: 8,
+          fontFamily: FONT,
+          fontSize: 15,
+          fontWeight: 600,
+          cursor: submitting ? 'not-allowed' : 'pointer',
+          transition: 'background 0.1s',
+        }}
+      >
+        {submitting ? 'Skickar…' : 'Skicka förfrågan'}
+      </button>
+    </form>
+  )
+}
+
+function PendingScreen({ slot }) {
+  return (
+    <div style={{ textAlign: 'center', padding: '16px 0' }}>
+      <div
+        style={{
+          width: 56,
+          height: 56,
+          borderRadius: '50%',
+          background: '#fef9c3',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          margin: '0 auto 20px',
+          fontSize: 28,
+        }}
+      >
+        ⏳
+      </div>
+      <h2 style={{ margin: '0 0 8px', fontSize: 20, fontWeight: 700, color: COLOR.primary }}>
+        Din förfrågan är skickad!
+      </h2>
+      <p style={{ margin: '0 0 24px', color: COLOR.secondary, fontSize: 14 }}>
+        Konsulten bekräftar inom kort. Du får ett mejl med kalenderinbjudan när bokningen är bekräftad.
+      </p>
+      <div
+        style={{
+          background: '#fefce8',
+          border: '1px solid #fde68a',
+          borderRadius: 12,
+          padding: '16px 20px',
+          textAlign: 'left',
+          fontSize: 14,
+          color: COLOR.primary,
+        }}
+      >
+        <p style={{ margin: '0 0 8px', fontWeight: 600 }}>Önskad tid</p>
+        <p style={{ margin: 0 }}>{formatDate(slot.startAt)}</p>
+        <p style={{ margin: '4px 0 0', color: COLOR.secondary }}>{slot.duration} minuter</p>
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Page
+// ---------------------------------------------------------------------------
+
+export const path = { sv: '/boka/:consultantSlug', en: '/book/:consultantSlug' }
+export const layout = false
+
+export default function PublicBookingPage({ consultantSlug, ...props }) {
+  const router = useRouter()
+  const slug = consultantSlug ?? router?.params?.consultantSlug
+
+  const today = new Date()
+  const [calYear, setCalYear] = useState(today.getFullYear())
+  const [calMonth, setCalMonth] = useState(today.getMonth())
+
+  const [slots, setSlots] = useState([])
+  const [loadingSlots, setLoadingSlots] = useState(true)
+  const [slotsError, setSlotsError] = useState(null)
+
+  const [selectedDate, setSelectedDate] = useState(null)
+  const [selectedSlot, setSelectedSlot] = useState(null)
+
+  const [step, setStep] = useState('pick-slot') // 'pick-slot' | 'fill-form' | 'confirmed'
+  const [confirmedBooking, setConfirmedBooking] = useState(null)
+
+  // Load slots for next 60 days
+  useEffect(() => {
+    if (!slug) return
+
+    setLoadingSlots(true)
+    setSlotsError(null)
+
+    const from = new Date().toISOString()
+    const to = new Date(Date.now() + 60 * 24 * 60 * 60 * 1000).toISOString()
+
+    fetch(`/actions/booking/get-available-slots?consultantId=${encodeURIComponent(slug)}&from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`)
+      .then(r => r.ok ? r.json() : Promise.reject(r))
+      .then(data => { setSlots(data); setLoadingSlots(false) })
+      .catch(() => { setSlotsError('Kunde inte ladda tillgängliga tider.'); setLoadingSlots(false) })
+  }, [slug])
+
+  const slotsGrouped = groupSlotsByDate(slots)
+
+  const handlePrevMonth = () => {
+    if (calMonth === 0) { setCalMonth(11); setCalYear(y => y - 1) }
+    else setCalMonth(m => m - 1)
+  }
+
+  const handleNextMonth = () => {
+    if (calMonth === 11) { setCalMonth(0); setCalYear(y => y + 1) }
+    else setCalMonth(m => m + 1)
+  }
+
+  const handleSelectDate = (dateKey) => {
+    setSelectedDate(dateKey)
+    setSelectedSlot(null)
+  }
+
+  const handleSelectSlot = (slot) => {
+    setSelectedSlot(slot)
+  }
+
+  const handleConfirmSlot = () => {
+    if (selectedSlot) setStep('fill-form')
+  }
+
+  const handleBookingSuccess = (booking) => {
+    setConfirmedBooking(booking)
+    setStep('confirmed')
+  }
+
+  const selectedDateSlots = selectedDate ? (slotsGrouped[selectedDate] ?? []) : []
+
+  return (
+    <>
+      {/* Keyframe for spinner — injected once via style tag */}
+      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
+
+      <div
+        style={{
+          minHeight: '100dvh',
+          background: COLOR.bg,
+          fontFamily: FONT,
+          display: 'flex',
+          alignItems: 'flex-start',
+          justifyContent: 'center',
+          padding: '24px 16px',
+          boxSizing: 'border-box',
+        }}
+      >
+        <div
+          style={{
+            width: '100%',
+            maxWidth: 720,
+            background: COLOR.surface,
+            borderRadius: 16,
+            boxShadow: '0 1px 4px rgba(0,0,0,0.08)',
+            overflow: 'hidden',
+          }}
+        >
+          {/* Header */}
+          <div
+            style={{
+              padding: '24px 28px 20px',
+              borderBottom: `1px solid ${COLOR.border}`,
+            }}
+          >
+            <h1 style={{ margin: 0, fontSize: 20, fontWeight: 700, color: COLOR.primary }}>
+              Boka en tid
+            </h1>
+            <p style={{ margin: '4px 0 0', fontSize: 14, color: COLOR.secondary }}>
+              Välj ett datum och en tid som passar dig.
+            </p>
+          </div>
+
+          {/* Body */}
+          <div style={{ padding: '24px 28px' }}>
+            {step === 'confirmed' && selectedSlot ? (
+              <PendingScreen slot={selectedSlot} />
+            ) : step === 'fill-form' && selectedSlot ? (
+              <div>
+                <button
+                  onClick={() => setStep('pick-slot')}
+                  style={{
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    color: COLOR.secondary,
+                    fontFamily: FONT,
+                    fontSize: 14,
+                    padding: 0,
+                    marginBottom: 20,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 4,
+                  }}
+                >
+                  ← Tillbaka
+                </button>
+
+                {/* Selected slot summary */}
+                <div
+                  style={{
+                    background: '#f9f9f9',
+                    border: `1px solid ${COLOR.border}`,
+                    borderRadius: 10,
+                    padding: '12px 16px',
+                    marginBottom: 24,
+                    fontSize: 14,
+                    color: COLOR.primary,
+                  }}
+                >
+                  <span style={{ fontWeight: 600 }}>Vald tid: </span>
+                  {formatDate(selectedSlot.startAt)}
+                  <span style={{ color: COLOR.secondary }}>
+                    {' '}({selectedSlot.duration} min)
+                  </span>
+                </div>
+
+                <BookingForm
+                  slot={selectedSlot}
+                  consultantSlug={slug}
+                  onSuccess={handleBookingSuccess}
+                />
+              </div>
+            ) : (
+              // Step: pick-slot
+              <div
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
+                  gap: 32,
+                }}
+              >
+                {/* Left: Calendar */}
+                <div>
+                  {loadingSlots ? (
+                    <div style={{ padding: '40px 0' }}>
+                      <Spinner />
+                      <p style={{ textAlign: 'center', color: COLOR.secondary, fontSize: 14, marginTop: 12 }}>
+                        Laddar tider…
+                      </p>
+                    </div>
+                  ) : slotsError ? (
+                    <p style={{ color: COLOR.error, fontSize: 14 }}>{slotsError}</p>
+                  ) : (
+                    <MonthCalendar
+                      year={calYear}
+                      month={calMonth}
+                      slotsGrouped={slotsGrouped}
+                      selectedDate={selectedDate}
+                      onSelectDate={handleSelectDate}
+                      onPrevMonth={handlePrevMonth}
+                      onNextMonth={handleNextMonth}
+                    />
+                  )}
+                </div>
+
+                {/* Right: Time slots */}
+                <div>
+                  {selectedDate ? (
+                    <>
+                      <h3
+                        style={{
+                          margin: '0 0 16px',
+                          fontSize: 14,
+                          fontWeight: 600,
+                          color: COLOR.primary,
+                        }}
+                      >
+                        {(() => {
+                          const [y, m, d] = selectedDate.split('-').map(Number)
+                          return `${d} ${SV_MONTHS[m - 1]} ${y}`
+                        })()}
+                      </h3>
+
+                      <SlotPicker
+                        slots={selectedDateSlots}
+                        selectedSlot={selectedSlot}
+                        onSelectSlot={handleSelectSlot}
+                      />
+
+                      {selectedSlot && (
+                        <button
+                          onClick={handleConfirmSlot}
+                          style={{
+                            marginTop: 20,
+                            width: '100%',
+                            padding: '11px 20px',
+                            background: COLOR.primary,
+                            color: '#ffffff',
+                            border: 'none',
+                            borderRadius: 8,
+                            fontFamily: FONT,
+                            fontSize: 14,
+                            fontWeight: 600,
+                            cursor: 'pointer',
+                          }}
+                        >
+                          Fortsätt →
+                        </button>
+                      )}
+                    </>
+                  ) : (
+                    <div
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        height: '100%',
+                        minHeight: 180,
+                        color: COLOR.muted,
+                        fontSize: 14,
+                        textAlign: 'center',
+                        gap: 8,
+                      }}
+                    >
+                      <span style={{ fontSize: 28 }}>📅</span>
+                      Välj ett markerat datum i kalendern
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile-responsive override */}
+      <style>{`
+        @media (max-width: 600px) {
+          .booking-grid { grid-template-columns: 1fr !important; }
+        }
+      `}</style>
+    </>
+  )
+}