@fayz-ai/plugin-agenda 0.9.0 → 0.10.0

package/src/public/hooks.ts

@@ -1,110 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useBooking } from './context'
-import type { PublicService } from './types'
-import type { PublicCreateBookingInput, PublicBookingResult } from './data'
-import type { TimeSlot } from '../types'
-
-/** The resolved bookable services (static option or fetched from the provider). */
-export function useServices(): PublicService[] {
-  return useBooking().services
-}
-
-export interface UsePublicServicesResult {
-  services: PublicService[]
-  loading: boolean
-}
-
-/** Like useServices, but exposes the fetch state for skeletons. */
-export function usePublicServices(): UsePublicServicesResult {
-  const { services, servicesLoading } = useBooking()
-  return { services, loading: servicesLoading }
-}
-
-export interface UseAvailableSlotsResult {
-  slots: TimeSlot[]
-  loading: boolean
-  error: Error | null
-}
-
-/**
- * Available time slots for a service on a given date. Delegates to
- * provider.getAvailableSlots — mock now, Supabase RPC when configured, same call.
- */
-export function useAvailableSlots(params: { serviceId: string | null; date: string | null }): UseAvailableSlotsResult {
-  const { provider, professionalId, services, window } = useBooking()
-  const [slots, setSlots] = useState<TimeSlot[]>([])
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<Error | null>(null)
-
-  const { serviceId, date } = params
-  const service = services.find((s) => s.id === serviceId)
-  const durationMinutes = service?.durationMinutes ?? 0
-
-  useEffect(() => {
-    let active = true
-    if (!serviceId || !date || !durationMinutes) {
-      setSlots([])
-      return
-    }
-    setLoading(true)
-    provider
-      .getAvailableSlots({ assigneeId: professionalId, date, durationMinutes, slotInterval: window.slotInterval })
-      .then((result) => {
-        if (!active) return
-        setSlots(result)
-        setError(null)
-      })
-      .catch((err) => {
-        if (!active) return
-        setError(err instanceof Error ? err : new Error(String(err)))
-      })
-      .finally(() => {
-        if (active) setLoading(false)
-      })
-    return () => {
-      active = false
-    }
-  }, [provider, professionalId, serviceId, date, durationMinutes, window.slotInterval])
-
-  return { slots, loading, error }
-}
-
-export type CreatePublicBookingInput = PublicCreateBookingInput
-
-export interface UseCreateBookingResult {
-  submit: (input: CreatePublicBookingInput) => Promise<PublicBookingResult>
-  submitting: boolean
-  error: Error | null
-  done: boolean
-}
-
-/** Create a booking via the provider (mock append / Supabase RPC). */
-export function useCreateBooking(): UseCreateBookingResult {
-  const { provider, professionalId } = useBooking()
-  const [submitting, setSubmitting] = useState(false)
-  const [error, setError] = useState<Error | null>(null)
-  const [done, setDone] = useState(false)
-
-  async function submit(input: CreatePublicBookingInput): Promise<PublicBookingResult> {
-    setSubmitting(true)
-    setError(null)
-    try {
-      // The professional the visitor saw availability for must be the one
-      // booked — thread it unless the caller already pinned another.
-      const result = await provider.createBooking({
-        ...input,
-        assigneeId: input.assigneeId ?? professionalId ?? null,
-      })
-      setDone(true)
-      return result
-    } catch (err) {
-      const e = err instanceof Error ? err : new Error(String(err))
-      setError(e)
-      throw e
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  return { submit, submitting, error, done }
-}

package/src/public/index.ts

@@ -1,69 +0,0 @@
-// ---------------------------------------------------------------------------
-// @fayz-ai/plugin-agenda/public — customer-facing booking surface.
-//
-// Separate entry from the admin plugin so a website host imports only the lean
-// booking widget + data seam (no @fayz-ai/saas / calendar admin graph).
-//
-// Customization levers (cheapest first): `labels` → `brand` → `components`
-// (swap subcomponents; defaults exported below for wrapping/composition).
-// Data: PublicBookingDataProvider — mock seed by default, Supabase RPCs when a
-// global client is configured (requires `tenantId`).
-// ---------------------------------------------------------------------------
-
-export { createPublicBookingPlugin } from './createPublicBookingPlugin'
-export type { PublicBookingOptions, PublicBookingPlugin } from './createPublicBookingPlugin'
-export { BookingWidget } from './BookingWidget'
-export { BookingProvider, useBooking } from './context'
-export type { PublicBookingContextValue, OnIdentityVerified } from './context'
-export { useServices, usePublicServices, useAvailableSlots, useCreateBooking } from './hooks'
-export type {
-  UsePublicServicesResult,
-  UseAvailableSlotsResult,
-  UseCreateBookingResult,
-  CreatePublicBookingInput,
-} from './hooks'
-
-// Data seam
-export type {
-  PublicBookingDataProvider,
-  PublicSlotQuery,
-  PublicCreateBookingInput,
-  PublicBookingResult,
-  MockPublicBookingOptions,
-} from './data'
-export { createMockPublicBookingProvider } from './data'
-export { createSupabasePublicBookingProvider } from './data.supabase'
-export type { SupabasePublicBookingOptions } from './data.supabase'
-
-// Customization seam — default components (wrap or replace via `components`)
-export { DEFAULT_BOOKING_COMPONENTS } from './components/defaults'
-export { DefaultBrandHeader } from './components/BrandHeader'
-export { DefaultServiceCard } from './components/ServiceCard'
-export { DefaultSidebarExtras } from './components/SidebarExtras'
-export { DefaultStepRailItem } from './components/StepRailItem'
-export { DefaultSuccessPanel } from './components/SuccessPanel'
-
-// Formatting helpers (useful inside custom components)
-export { useFormatters, formatSlotRange, DAY_NAMES, WEEK_ORDER } from './format'
-
-export type {
-  PublicService,
-  ContactInfo,
-  BookingWindow,
-  PublicBookingLabels,
-  WorkingHours,
-  PaymentConfig,
-  ResolvedPayment,
-  PhoneVerificationMode,
-  BookingBrand,
-  ResolvedBookingBrand,
-  BookingHighlight,
-  BookingFormatters,
-  BookingComponents,
-  BrandHeaderProps,
-  ServiceCardProps,
-  SidebarExtrasProps,
-  SuccessPanelProps,
-  StepRailItemProps,
-  StepState,
-} from './types'

package/src/public/steps/ContactStep.tsx

@@ -1,184 +0,0 @@
-import { Check, ChevronDown, CreditCard, Loader2, ShieldCheck } from 'lucide-react'
-import { COUNTRIES, maskPhone, unmaskPhone, type CountryDef } from '@fayz-ai/core'
-import type { PhoneVerificationMode, PublicBookingLabels, ResolvedPayment } from '../types'
-
-export interface ContactDraft {
-  name: string
-  phone: string
-  email: string
-  notes: string
-}
-
-interface ContactStepProps {
-  labels: PublicBookingLabels
-  contact: ContactDraft
-  onContactChange: (contact: ContactDraft) => void
-  contactStep: 'phone' | 'code' | 'details'
-  /** 'none' → no code is sent, so the copy drops every OTP promise. */
-  phoneVerification: PhoneVerificationMode
-  country: CountryDef
-  onCountryChange: (iso2: string) => void
-  code: string
-  onCodeChange: (code: string) => void
-  codeError: boolean
-  onSendCode: () => void
-  onConfirmCode: () => void
-  onBackToPhone: () => void
-  onSubmitDetails: () => void
-  payment: ResolvedPayment | null
-  submitting: boolean
-  error: Error | null
-}
-
-/** Contact step — phone verification first (Quaddro-style), then details. */
-export function ContactStep({
-  labels, contact, onContactChange, contactStep, phoneVerification, country, onCountryChange,
-  code, onCodeChange, codeError, onSendCode, onConfirmCode, onBackToPhone,
-  onSubmitDetails, payment, submitting, error,
-}: ContactStepProps) {
-  return (
-    <div>
-      <h3 className="font-heading text-xl font-bold text-foreground">{labels.contactStep}</h3>
-
-      {/* Sub-step: phone */}
-      {contactStep === 'phone' ? (
-        <form onSubmit={(e) => { e.preventDefault(); onSendCode() }}>
-          <p className="mt-1 text-sm text-muted-foreground">{labels.contactIntro}</p>
-          <div className="mt-5">
-            <label htmlFor="bk-phone" className="mb-1 block text-sm font-medium text-foreground">{labels.phoneLabel}</label>
-            <div className="flex">
-              <div className="relative">
-                <select
-                  aria-label="País"
-                  value={country.iso2}
-                  onChange={(e) => onCountryChange(e.target.value)}
-                  className="h-full appearance-none rounded-l-xl border border-r-0 border-border bg-muted py-3 pl-3 pr-8 text-sm font-medium text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                >
-                  {COUNTRIES.map((c) => (
-                    <option key={c.iso2} value={c.iso2}>{c.flag} {c.dial}</option>
-                  ))}
-                </select>
-                <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-              </div>
-              <input
-                id="bk-phone" type="tel" autoComplete="tel" inputMode="tel" value={contact.phone}
-                onChange={(e) => onContactChange({ ...contact, phone: maskPhone(e.target.value, country.mask) })}
-                className="w-full rounded-r-xl border border-border bg-background px-4 py-3 text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring"
-                placeholder={`Ex.: ${maskPhone('11987654321', country.mask)}`}
-              />
-            </div>
-            <p className="mt-2 text-xs text-muted-foreground">
-              {phoneVerification === 'none' ? labels.phoneHintNoVerification : labels.phoneHint}
-            </p>
-          </div>
-          <button
-            type="submit"
-            disabled={unmaskPhone(contact.phone).length < 8}
-            className="mt-5 w-full rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            {phoneVerification === 'none' ? labels.phoneContinueCta : labels.sendCodeCta}
-          </button>
-        </form>
-      ) : null}
-
-      {/* Sub-step: details (after verification) */}
-      {contactStep === 'details' ? (
-        <form onSubmit={(e) => { e.preventDefault(); onSubmitDetails() }}>
-          <p className="mt-1 text-sm text-muted-foreground">{labels.contactIntro}</p>
-          <div className="mt-4 flex items-center justify-between rounded-xl border border-border bg-muted/40 px-4 py-3">
-            <span className="flex items-center gap-2 text-sm text-foreground">
-              <ShieldCheck className="h-4 w-4 text-primary" />{' '}
-              {phoneVerification === 'none' ? labels.phoneLabel : labels.phoneVerified} · {country.flag} {country.dial} {contact.phone}
-            </span>
-            <button
-              type="button"
-              onClick={onBackToPhone}
-              className="rounded text-sm font-medium text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            >
-              {labels.changePhone}
-            </button>
-          </div>
-          <div className="mt-4 space-y-3">
-            <div>
-              <label htmlFor="bk-name" className="mb-1 block text-sm font-medium text-foreground">{labels.nameLabel}</label>
-              <input
-                id="bk-name" type="text" autoComplete="name" value={contact.name}
-                onChange={(e) => onContactChange({ ...contact, name: e.target.value })}
-                className="w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring"
-                placeholder={labels.namePlaceholder}
-              />
-            </div>
-            <div>
-              <label htmlFor="bk-email" className="mb-1 block text-sm font-medium text-foreground">{labels.emailLabel}</label>
-              <input
-                id="bk-email" type="email" autoComplete="email" inputMode="email" value={contact.email}
-                onChange={(e) => onContactChange({ ...contact, email: e.target.value })}
-                className="w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring"
-                placeholder={labels.emailPlaceholder}
-              />
-              <p className="mt-1 text-xs text-muted-foreground">{labels.emailHint}</p>
-            </div>
-            <div>
-              <label htmlFor="bk-notes" className="mb-1 block text-sm font-medium text-foreground">{labels.notesLabel}</label>
-              <textarea
-                id="bk-notes" rows={3} value={contact.notes}
-                onChange={(e) => onContactChange({ ...contact, notes: e.target.value })}
-                className="w-full resize-none rounded-xl border border-border bg-background px-4 py-3 text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring"
-                placeholder={labels.notesPlaceholder}
-              />
-            </div>
-          </div>
-          {error ? (
-            <p role="alert" className="mt-3 text-sm text-destructive">{labels.submitError}</p>
-          ) : null}
-          <button
-            type="submit"
-            disabled={!contact.name.trim() || submitting}
-            className="mt-5 flex w-full items-center justify-center gap-2 rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Check className="h-4 w-4" />}
-            {payment ? labels.saveAndContinueCta : labels.confirmCta}
-          </button>
-          {!payment ? (
-            <p className="mt-3 flex items-center justify-center gap-1.5 text-xs text-muted-foreground">
-              <CreditCard className="h-3.5 w-3.5" /> {labels.noChargeNote}
-            </p>
-          ) : null}
-        </form>
-      ) : null}
-
-      {/* Code verification modal */}
-      {contactStep === 'code' ? (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-foreground/40 p-4" role="dialog" aria-modal="true" aria-label={labels.codeTitle}>
-          <div className="w-full max-w-md rounded-2xl border border-border bg-card p-6 shadow-xl">
-            <h4 className="font-heading text-lg font-bold text-foreground">{labels.codeTitle}</h4>
-            <p className="mt-1 text-sm text-muted-foreground">{labels.codeBody}</p>
-            <form onSubmit={(e) => { e.preventDefault(); onConfirmCode() }}>
-              <input
-                type="text" inputMode="numeric" value={code} autoFocus
-                onChange={(e) => onCodeChange(e.target.value)}
-                className="mt-4 w-full rounded-xl border border-border bg-background px-4 py-3 text-center text-lg tracking-[0.4em] text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring placeholder:text-sm placeholder:tracking-normal"
-                placeholder="Digite o código"
-              />
-              {codeError ? (
-                <p role="alert" className="mt-2 text-sm text-destructive">{labels.codeInvalid}</p>
-              ) : null}
-              <button
-                type="submit"
-                className="mt-4 w-full rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              >
-                {labels.codeConfirmCta}
-              </button>
-            </form>
-            <div className="mt-3 flex items-center justify-between text-xs text-muted-foreground">
-              <span>{labels.codeResendHint}</span>
-              <button type="button" onClick={onBackToPhone} className="font-medium text-primary hover:underline">
-                {labels.back}
-              </button>
-            </div>
-          </div>
-        </div>
-      ) : null}
-    </div>
-  )
-}

package/src/public/steps/DateTimeStep.tsx

@@ -1,138 +0,0 @@
-import { ChevronLeft, ChevronRight, Clock } from 'lucide-react'
-import type { TimeSlot } from '../../types'
-import type { DayCell } from '../format'
-import type { BookingFormatters, PublicBookingLabels, WorkingHours } from '../types'
-
-interface DateTimeStepProps {
-  labels: PublicBookingLabels
-  fmt: BookingFormatters
-  week: DayCell[]
-  weekOffset: number
-  maxWeekOffset: number
-  onWeekOffset: (updater: (w: number) => number) => void
-  businessHours: WorkingHours
-  date: string | null
-  onSelectDate: (iso: string) => void
-  slots: TimeSlot[]
-  slotsLoading: boolean
-  slotStart: string | null
-  onSelectSlot: (startIso: string) => void
-  onContinue: () => void
-}
-
-/** Week strip + available-slot grid. */
-export function DateTimeStep({
-  labels, fmt, week, weekOffset, maxWeekOffset, onWeekOffset, businessHours,
-  date, onSelectDate, slots, slotsLoading, slotStart, onSelectSlot, onContinue,
-}: DateTimeStepProps) {
-  const openDays = new Set(businessHours.daysOfWeek)
-  return (
-    <div>
-      <div className="flex flex-wrap items-baseline justify-between gap-2">
-        <h3 className="font-heading text-xl font-bold text-foreground">{labels.dateStep}</h3>
-        <span className="flex items-center gap-1 text-xs text-muted-foreground">
-          <Clock className="h-3.5 w-3.5" /> {labels.timezoneNote}
-        </span>
-      </div>
-
-      <div className="mt-5 flex items-center justify-between">
-        <span className="text-sm font-semibold capitalize text-foreground">{fmt.month.format(week[0].date)}</span>
-        <div className="flex items-center gap-1">
-          <button
-            type="button"
-            disabled={weekOffset === 0}
-            onClick={() => onWeekOffset((w) => Math.max(0, w - 1))}
-            className="flex h-9 w-9 items-center justify-center rounded-lg border border-border text-foreground transition-colors hover:bg-accent disabled:opacity-40 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            aria-label={labels.prevWeek}
-          >
-            <ChevronLeft className="h-4 w-4" />
-          </button>
-          <button
-            type="button"
-            disabled={weekOffset >= maxWeekOffset}
-            onClick={() => onWeekOffset((w) => Math.min(maxWeekOffset, w + 1))}
-            className="flex h-9 w-9 items-center justify-center rounded-lg border border-border text-foreground transition-colors hover:bg-accent disabled:opacity-40 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            aria-label={labels.nextWeek}
-          >
-            <ChevronRight className="h-4 w-4" />
-          </button>
-        </div>
-      </div>
-
-      <div className="mt-3 grid grid-cols-7 gap-1.5">
-        {week.map((d) => {
-          const selected = date === d.iso
-          const closed = !openDays.has(d.date.getDay())
-          return (
-            <button
-              key={d.iso}
-              type="button"
-              disabled={closed}
-              onClick={() => onSelectDate(d.iso)}
-              className={[
-                'flex flex-col items-center gap-0.5 rounded-xl border py-2.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                closed
-                  ? 'cursor-not-allowed border-transparent text-muted-foreground/40'
-                  : selected
-                    ? 'border-primary bg-primary text-primary-foreground'
-                    : 'border-border text-foreground hover:border-primary/60 hover:bg-accent/40',
-              ].join(' ')}
-            >
-              <span className="text-[11px] font-medium capitalize opacity-80">
-                {fmt.weekday.format(d.date).replace('.', '')}
-              </span>
-              <span className="text-sm font-bold tabular-nums">{fmt.dayNum.format(d.date)}</span>
-            </button>
-          )
-        })}
-      </div>
-
-      {date ? (
-        <div className="mt-6">
-          <p className="mb-2 text-sm font-semibold text-foreground">{labels.slotsHeading}</p>
-          {slotsLoading ? (
-            <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
-              {Array.from({ length: 8 }).map((_, i) => (
-                <div key={i} className="h-10 animate-pulse rounded-lg bg-muted" />
-              ))}
-            </div>
-          ) : slots.length === 0 ? (
-            <div className="rounded-xl border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
-              {labels.noSlots}
-            </div>
-          ) : (
-            <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
-              {slots.map((s) => {
-                const selected = slotStart === s.start
-                return (
-                  <button
-                    key={s.start}
-                    type="button"
-                    onClick={() => onSelectSlot(s.start)}
-                    className={[
-                      'rounded-lg border py-2.5 text-sm font-semibold tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                      selected
-                        ? 'border-primary bg-primary text-primary-foreground'
-                        : 'border-border text-foreground hover:border-primary/60 hover:bg-accent/40',
-                    ].join(' ')}
-                  >
-                    {fmt.time.format(new Date(s.start))}
-                  </button>
-                )
-              })}
-            </div>
-          )}
-        </div>
-      ) : null}
-
-      <button
-        type="button"
-        disabled={!slotStart}
-        onClick={onContinue}
-        className="mt-6 w-full rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-      >
-        {labels.continueCta}
-      </button>
-    </div>
-  )
-}

package/src/public/steps/OverviewStep.tsx

@@ -1,81 +0,0 @@
-import { Clock } from 'lucide-react'
-import { DAY_NAMES, WEEK_ORDER } from '../format'
-import type { BookingComponents, BookingFormatters, PublicBookingLabels, PublicService, ResolvedBookingBrand, WorkingHours } from '../types'
-
-interface OverviewStepProps {
-  services: PublicService[]
-  servicesLoading: boolean
-  businessHours: WorkingHours
-  professionalName: string
-  labels: PublicBookingLabels
-  brand: ResolvedBookingBrand
-  fmt: BookingFormatters
-  components: BookingComponents
-  onStartBooking: (serviceId?: string) => void
-}
-
-/** Default view: services + opening hours + sidebar CTA (Quaddro-style). */
-export function OverviewStep({
-  services, servicesLoading, businessHours, professionalName, labels, brand, fmt, components: C, onStartBooking,
-}: OverviewStepProps) {
-  const openDays = new Set(businessHours.daysOfWeek)
-  return (
-    <div className="grid gap-6 lg:grid-cols-[1fr_18rem]">
-      <div className="space-y-6">
-        {/* Serviços */}
-        <section className="rounded-2xl border border-border bg-card p-6 shadow-sm">
-          <h3 className="mb-4 font-heading text-lg font-bold text-foreground">{labels.servicesHeading}</h3>
-          <div className="space-y-3">
-            {servicesLoading ? (
-              Array.from({ length: 2 }).map((_, i) => (
-                <div key={i} className="h-24 animate-pulse rounded-2xl bg-muted" />
-              ))
-            ) : (
-              services.map((s, i) => (
-                <C.ServiceCard
-                  key={s.id}
-                  service={s}
-                  featured={i === 0}
-                  onSelect={() => onStartBooking(s.id)}
-                  fmt={fmt}
-                  brand={brand}
-                />
-              ))
-            )}
-          </div>
-        </section>
-
-        {/* Sobre — horário de funcionamento */}
-        <section className="rounded-2xl border border-border bg-card p-6 shadow-sm">
-          <h3 className="font-heading text-lg font-bold text-foreground">{labels.aboutHeading}</h3>
-          <p className="mt-3 mb-2 flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
-            <Clock className="h-4 w-4" /> {labels.openingHoursHeading}
-          </p>
-          <ul className="divide-y divide-border border-l-2 border-primary/20 pl-4">
-            {WEEK_ORDER.map((day) => {
-              const open = openDays.has(day)
-              return (
-                <li key={day} className="flex items-center justify-between py-2 text-sm">
-                  <span className="text-foreground">{DAY_NAMES[day]}</span>
-                  <span className={open ? 'tabular-nums text-foreground' : 'text-muted-foreground'}>
-                    {open ? `${businessHours.start} – ${businessHours.end}` : labels.closedLabel}
-                  </span>
-                </li>
-              )
-            })}
-          </ul>
-        </section>
-      </div>
-
-      {/* Sidebar CTA + highlights */}
-      <aside className="lg:sticky lg:top-24 lg:self-start">
-        <C.SidebarExtras
-          professionalName={professionalName}
-          brand={brand}
-          labels={labels}
-          onStartBooking={() => onStartBooking()}
-        />
-      </aside>
-    </div>
-  )
-}