@fayz-ai/plugin-agenda 0.2.1 → 0.3.0

package/src/public/components/BrandHeader.tsx

@@ -0,0 +1,27 @@
+import { ShieldCheck } from 'lucide-react'
+import type { BrandHeaderProps } from '../types'
+
+/** Default brand header shown above every booking view. Override via
+ *  `components.BrandHeader` when the structure must change; text/logo-only
+ *  changes need just the `brand` option. */
+export function DefaultBrandHeader({ brand }: BrandHeaderProps) {
+  return (
+    <div className="mb-5 flex items-center gap-3 rounded-2xl border border-border bg-card px-5 py-4 shadow-sm">
+      {brand.logoUrl ? (
+        <img src={brand.logoUrl} alt={brand.name} className="h-11 w-11 rounded-xl object-cover" />
+      ) : (
+        <span className="flex h-11 w-11 items-center justify-center rounded-xl bg-primary text-lg font-bold text-primary-foreground">
+          {brand.initials}
+        </span>
+      )}
+      <div>
+        <p className="font-heading text-base font-bold text-foreground">{brand.name}</p>
+        {brand.tagline ? (
+          <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <ShieldCheck className="h-3.5 w-3.5 text-primary" /> {brand.tagline}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  )
+}

package/src/public/components/ServiceCard.tsx

@@ -0,0 +1,39 @@
+import { ChevronRight, Clock } from 'lucide-react'
+import type { ServiceCardProps } from '../types'
+
+/** Default service row (overview list). Icon/badge/meta come from `brand`;
+ *  swap the whole card via `components.ServiceCard`. */
+export function DefaultServiceCard({ service, featured, onSelect, fmt, brand }: ServiceCardProps) {
+  const Icon = brand.serviceIcon
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className="group flex w-full items-center gap-4 rounded-2xl border border-border p-4 text-left transition-colors hover:border-primary hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-accent text-primary">
+        <Icon className="h-5 w-5" />
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="flex items-center gap-2">
+          <span className="font-semibold text-foreground">{service.name}</span>
+          {featured && brand.featuredBadge ? (
+            <span className="rounded-full bg-accent px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary">
+              {brand.featuredBadge}
+            </span>
+          ) : null}
+        </span>
+        <span className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
+          <Clock className="h-3 w-3" /> {service.durationMinutes} min{brand.serviceMeta ? ` · ${brand.serviceMeta}` : ''}
+        </span>
+        {service.description ? (
+          <span className="mt-1 block text-sm text-muted-foreground">{service.description}</span>
+        ) : null}
+      </span>
+      <span className="shrink-0 text-right">
+        <span className="block font-semibold tabular-nums text-primary">{fmt.price.format(service.price)}</span>
+        <ChevronRight className="ml-auto mt-1 h-4 w-4 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
+      </span>
+    </button>
+  )
+}

package/src/public/components/SidebarExtras.tsx

@@ -0,0 +1,30 @@
+import { User } from 'lucide-react'
+import type { SidebarExtrasProps } from '../types'
+
+/** Default overview sidebar: primary CTA + brand highlights + professional. */
+export function DefaultSidebarExtras({ professionalName, brand, onStartBooking, labels }: SidebarExtrasProps) {
+  return (
+    <div className="rounded-2xl border border-border bg-card p-5 shadow-sm">
+      <button
+        type="button"
+        onClick={onStartBooking}
+        className="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.bookNowCta}
+      </button>
+      <div className="mt-5 space-y-2 border-t border-border pt-4 text-xs text-muted-foreground">
+        {brand.highlights.map((h, i) => {
+          const Icon = h.icon ?? User
+          return (
+            <p key={i} className="flex items-center gap-2">
+              <Icon className="h-3.5 w-3.5 text-primary" /> {h.text}
+            </p>
+          )
+        })}
+        <p className="flex items-center gap-2">
+          <User className="h-3.5 w-3.5 text-primary" /> {professionalName}
+        </p>
+      </div>
+    </div>
+  )
+}

package/src/public/components/StepRailItem.tsx

@@ -0,0 +1,27 @@
+import { Check } from 'lucide-react'
+import type { StepRailItemProps } from '../types'
+
+/** One row in the wizard's right-hand progress rail. */
+export function DefaultStepRailItem({ n, label, state, children }: StepRailItemProps) {
+  return (
+    <li className="relative pl-11">
+      <span aria-hidden className="absolute left-[15px] top-8 bottom-[-18px] w-px bg-border last:hidden" />
+      <span
+        className={[
+          'absolute left-0 top-0 flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold transition-colors',
+          state === 'done'
+            ? 'bg-primary text-primary-foreground'
+            : state === 'active'
+              ? 'bg-accent text-primary ring-2 ring-primary'
+              : 'bg-muted text-muted-foreground',
+        ].join(' ')}
+      >
+        {state === 'done' ? <Check className="h-4 w-4" /> : n}
+      </span>
+      <p className={`pt-1 text-sm font-semibold ${state === 'todo' ? 'text-muted-foreground' : 'text-foreground'}`}>
+        {label}
+      </p>
+      {children ? <div className="mt-2">{children}</div> : null}
+    </li>
+  )
+}

package/src/public/components/SuccessPanel.tsx

@@ -0,0 +1,27 @@
+import { Calendar, Check, User } from 'lucide-react'
+import { formatSlotRange } from '../format'
+import type { SuccessPanelProps } from '../types'
+
+/** Default confirmation panel (final step). */
+export function DefaultSuccessPanel({ service, slotStart, professionalName, labels, fmt }: SuccessPanelProps) {
+  return (
+    <div className="py-8 text-center">
+      <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-accent text-primary">
+        <Check className="h-8 w-8" />
+      </div>
+      <h3 className="font-heading text-2xl font-bold text-foreground">{labels.successTitle}</h3>
+      <p className="mx-auto mt-2 max-w-sm text-muted-foreground">{labels.successBody}</p>
+      {service && slotStart ? (
+        <div className="mx-auto mt-6 max-w-sm rounded-2xl border border-border bg-muted/50 p-4 text-left">
+          <p className="font-semibold text-foreground">{service.name}</p>
+          <p className="mt-1 flex items-center gap-1.5 text-sm tabular-nums text-muted-foreground">
+            <Calendar className="h-4 w-4 text-primary" /> {formatSlotRange(slotStart, service.durationMinutes, fmt)}
+          </p>
+          <p className="mt-1 flex items-center gap-1.5 text-sm text-muted-foreground">
+            <User className="h-4 w-4 text-primary" /> {professionalName}
+          </p>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/public/components/SummaryRail.tsx

@@ -0,0 +1,90 @@
+import { CreditCard } from 'lucide-react'
+import { formatSlotRange } from '../format'
+import type {
+  BookingComponents,
+  BookingFormatters,
+  PublicBookingLabels,
+  PublicService,
+  ResolvedPayment,
+  StepState,
+} from '../types'
+
+export interface RailState {
+  service: StepState
+  professional: StepState
+  datetime: StepState
+  contact: StepState
+  payment: StepState
+}
+
+interface SummaryRailProps {
+  title: string
+  railState: RailState
+  service: PublicService | null
+  professionalName: string
+  slotStart: string | null
+  /** Display string for the verified contact ("Nome · +55 (11) …"), or null. */
+  contactSummary: string | null
+  payment: ResolvedPayment | null
+  paymentReached: boolean
+  labels: PublicBookingLabels
+  fmt: BookingFormatters
+  components: BookingComponents
+  serviceMeta: string | null
+}
+
+/** Right-hand progress + summary rail (internal; rows via components.StepRailItem). */
+export function SummaryRail({
+  title, railState, service, professionalName, slotStart, contactSummary,
+  payment, paymentReached, labels, fmt, components: C, serviceMeta,
+}: SummaryRailProps) {
+  return (
+    <div className="sticky top-24 rounded-2xl border border-border bg-card p-5 shadow-sm">
+      <p className="mb-5 font-heading text-sm font-bold uppercase tracking-wide text-muted-foreground">{title}</p>
+      <ol className="space-y-6">
+        <C.StepRailItem n={1} label={labels.railService} state={railState.service}>
+          {service ? (
+            <div className="rounded-xl border border-border bg-background p-3">
+              <p className="truncate text-sm font-semibold text-foreground">{service.name}</p>
+              <p className="mt-0.5 flex items-center justify-between text-xs text-muted-foreground">
+                <span>{serviceMeta ? `${serviceMeta} · ` : ''}{service.durationMinutes} min</span>
+                <span className="font-semibold tabular-nums text-primary">{fmt.price.format(service.price)}</span>
+              </p>
+            </div>
+          ) : null}
+        </C.StepRailItem>
+
+        <C.StepRailItem n={2} label={labels.railProfessional} state={railState.professional}>
+          <div className="flex items-center gap-2">
+            <span className="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground">
+              {professionalName.charAt(0)}
+            </span>
+            <span className="text-sm text-foreground">{professionalName}</span>
+          </div>
+        </C.StepRailItem>
+
+        <C.StepRailItem n={3} label={labels.railDatetime} state={railState.datetime}>
+          {slotStart && service ? (
+            <p className="text-sm tabular-nums text-foreground">
+              {formatSlotRange(slotStart, service.durationMinutes, fmt)}
+            </p>
+          ) : null}
+        </C.StepRailItem>
+
+        <C.StepRailItem n={4} label={labels.railContact} state={railState.contact}>
+          {contactSummary ? <p className="text-sm text-foreground">{contactSummary}</p> : null}
+        </C.StepRailItem>
+
+        {payment ? (
+          <C.StepRailItem n={5} label={labels.railPayment} state={railState.payment}>
+            {paymentReached ? (
+              <p className="flex items-center gap-1.5 text-sm text-foreground">
+                <CreditCard className="h-3.5 w-3.5 text-primary" /> Pix à vista
+              </p>
+            ) : null}
+          </C.StepRailItem>
+        ) : null}
+      </ol>
+    </div>
+  )
+}

package/src/public/components/defaults.ts

@@ -0,0 +1,14 @@
+import type { BookingComponents } from '../types'
+import { DefaultBrandHeader } from './BrandHeader'
+import { DefaultServiceCard } from './ServiceCard'
+import { DefaultSidebarExtras } from './SidebarExtras'
+import { DefaultStepRailItem } from './StepRailItem'
+import { DefaultSuccessPanel } from './SuccessPanel'
+
+export const DEFAULT_BOOKING_COMPONENTS: BookingComponents = {
+  BrandHeader: DefaultBrandHeader,
+  ServiceCard: DefaultServiceCard,
+  SidebarExtras: DefaultSidebarExtras,
+  StepRailItem: DefaultStepRailItem,
+  SuccessPanel: DefaultSuccessPanel,
+}

package/src/public/context.tsx

@@ -1,18 +1,28 @@
-import { createContext, useContext, type ReactNode } from 'react'
+import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from 'react'
 import type { PaymentProvider } from '@fayz-ai/core'
-import type { AgendaDataProvider } from '../data/types'
-import type { PublicService, BookingWindow, PublicBookingLabels, WorkingHours, ResolvedPayment } from './types'
+import type { PublicBookingDataProvider } from './data'
+import type {
+  BookingComponents,
+  BookingWindow,
+  PublicBookingLabels,
+  PublicService,
+  ResolvedBookingBrand,
+  ResolvedPayment,
+  WorkingHours,
+} from './types'
 
 /** Emitted when the customer's phone is verified / identity captured, for the
  *  host to bridge to auth (booking stays decoupled — data-only, optional). */
 export type OnIdentityVerified = (identity: { name: string; phone: string; email?: string }) => void
 
 export interface PublicBookingContextValue {
-  provider: AgendaDataProvider
-  /** The professional/resource bookings are created against (POC: single professional). */
-  professionalId: string
+  provider: PublicBookingDataProvider
+  /** The professional/resource bookings are created against; null → any. */
+  professionalId: string | null
   professionalName: string
+  /** Resolved catalog: static `services` option, or fetched from the provider. */
   services: PublicService[]
+  servicesLoading: boolean
   /** Business opening hours, shown on the overview "Sobre" section. */
   businessHours: WorkingHours
   /** Payment step config, or null when the flow ends at confirmation. */
@@ -23,6 +33,10 @@ export interface PublicBookingContextValue {
   onIdentityVerified: OnIdentityVerified | null
   window: BookingWindow
   labels: PublicBookingLabels
+  /** Brand personalization (resolved with defaults). */
+  brand: ResolvedBookingBrand
+  /** Host-overridable subcomponents (resolved with defaults). */
+  components: BookingComponents
   /** Currency code for price formatting (e.g. 'BRL'). */
   currency: string
   locale: string
@@ -30,7 +44,50 @@ export interface PublicBookingContextValue {
 
 const PublicBookingContext = createContext<PublicBookingContextValue | null>(null)
 
-export function BookingProvider({ value, children }: { value: PublicBookingContextValue; children: ReactNode }) {
+export interface BookingProviderProps {
+  /** Everything but the (possibly async) service catalog. */
+  base: Omit<PublicBookingContextValue, 'services' | 'servicesLoading'>
+  /** Static catalog from options — wins over the provider fetch when present. */
+  staticServices: PublicService[] | null
+  children: ReactNode
+}
+
+/**
+ * Owns the service-catalog resolution: static services pass through untouched;
+ * otherwise the provider is queried once (e.g. Supabase v_public_services).
+ */
+export function BookingProvider({ base, staticServices, children }: BookingProviderProps) {
+  const [fetched, setFetched] = useState<PublicService[] | null>(null)
+  const [loading, setLoading] = useState(staticServices === null)
+
+  useEffect(() => {
+    if (staticServices !== null) return
+    let active = true
+    setLoading(true)
+    base.provider
+      .getServices()
+      .then((result) => {
+        if (active) setFetched(result)
+      })
+      .catch((err) => {
+        // Surface in dev; the overview renders its empty state.
+        console.error('[plugin-agenda/public] failed to load services:', err)
+        if (active) setFetched([])
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+    return () => {
+      active = false
+    }
+    // base.provider is stable (created once by the plugin factory).
+  }, [base.provider, staticServices])
+
+  const value = useMemo<PublicBookingContextValue>(
+    () => ({ ...base, services: staticServices ?? fetched ?? [], servicesLoading: loading }),
+    [base, staticServices, fetched, loading],
+  )
+
   return <PublicBookingContext.Provider value={value}>{children}</PublicBookingContext.Provider>
 }
 

package/src/public/createPublicBookingPlugin.ts

@@ -1,26 +1,55 @@
 import { createElement, type FC, type ReactNode } from 'react'
+import { CalendarCheck, ShieldCheck, Video } from 'lucide-react'
 import type { PluginManifest, PluginScope, VerticalId, PaymentProvider } from '@fayz-ai/core'
 import { createSafeDataProvider } from '@fayz-ai/core'
-import type { AgendaDataProvider } from '../data/types'
 import type { Professional, Schedule } from '../types'
-import { createMockAgendaProvider, type MockAgendaSeed } from '../data/mock'
-import { createSupabaseAgendaProvider } from '../data/supabase'
+import type { MockAgendaSeed } from '../data/mock'
+import { createMockPublicBookingProvider, type PublicBookingDataProvider } from './data'
+import { createSupabasePublicBookingProvider } from './data.supabase'
 import { BookingProvider, type PublicBookingContextValue, type OnIdentityVerified } from './context'
 import { BookingWidget } from './BookingWidget'
-import type { PublicService, BookingWindow, PublicBookingLabels, WorkingHours, PaymentConfig, ResolvedPayment } from './types'
+import { DEFAULT_BOOKING_COMPONENTS } from './components/defaults'
+import type {
+  BookingBrand,
+  BookingComponents,
+  BookingWindow,
+  PaymentConfig,
+  PublicBookingLabels,
+  PublicService,
+  ResolvedBookingBrand,
+  ResolvedPayment,
+  WorkingHours,
+} from './types'
 
 export interface PublicBookingOptions {
   /** Mount path for the public booking route. Default '/agendar'. */
   basePath?: string
-  /** The single professional/resource bookings target (POC). */
+  /**
+   * Tenant this public page books against. REQUIRED when a Supabase client is
+   * configured (setGlobalSupabaseClient) — it scopes services/slots/bookings.
+   */
+  tenantId?: string
+  /**
+   * The single professional/resource bookings target. With Supabase this must
+   * be the staff person UUID; omit → any active professional (RPC unions
+   * schedules across staff).
+   */
   professional?: { id?: string; name?: string }
-  /** Bookable services shown in the widget. */
-  services: PublicService[]
-  /** Working hours used to seed the mock provider's availability. */
+  /**
+   * Bookable services. Optional: when omitted, the widget fetches the catalog
+   * from the provider (Supabase v_public_services). Static wins when provided.
+   */
+  services?: PublicService[]
+  /** Working hours used to seed mock availability + the overview "Sobre" card. */
   workingHours?: WorkingHours
   /** Booking-window bounds for the date/slot picker. */
   window?: Partial<BookingWindow>
+  /** Every user-visible string (all defaulted, pt-BR). */
   labels?: Partial<PublicBookingLabels>
+  /** Brand personalization: name/logo/tagline/icons/badges/highlights. */
+  brand?: BookingBrand
+  /** Swap whole subcomponents when structure must change (defaults exported). */
+  components?: Partial<BookingComponents>
   /** Adds a final Pagamento (Pix) step. Omit/disable to end the flow at confirmation. */
   payment?: PaymentConfig
   /** Charge provider (from a payments plugin) used by the Pagamento step. Optional. */
@@ -29,8 +58,8 @@ export interface PublicBookingOptions {
   onIdentityVerified?: OnIdentityVerified
   currency?: string
   locale?: string
-  /** Inject a custom provider (real availability). Overrides the safe resolver. */
-  dataProvider?: AgendaDataProvider
+  /** Inject a custom provider (overrides the mock/Supabase safe resolver). */
+  dataProvider?: PublicBookingDataProvider
   /** Override the full mock seed (advanced). */
   seed?: MockAgendaSeed
   scope?: PluginScope
@@ -40,7 +69,7 @@ export interface PublicBookingOptions {
 export interface PublicBookingPlugin {
   manifest: PluginManifest
   Provider: FC<{ children: ReactNode }>
-  dataProvider: AgendaDataProvider
+  dataProvider: PublicBookingDataProvider
 }
 
 const DEFAULT_LABELS: PublicBookingLabels = {
@@ -51,12 +80,75 @@ const DEFAULT_LABELS: PublicBookingLabels = {
   confirmCta: 'Confirmar agendamento',
   successTitle: 'Agendamento confirmado!',
   successBody: 'Você receberá os detalhes em breve. Até logo!',
+  // overview
+  servicesHeading: 'Serviços',
+  aboutHeading: 'Sobre',
+  openingHoursHeading: 'Horário de funcionamento',
+  closedLabel: 'Fechado',
+  bookNowCta: 'Agendar agora',
+  // datetime
+  timezoneNote: 'Fuso: Horário de Brasília',
+  slotsHeading: 'Horários disponíveis',
+  noSlots: 'Nenhum horário disponível neste dia. Tente outra data.',
+  continueCta: 'Continuar',
+  backToServices: 'Serviços',
+  back: 'Voltar',
+  prevWeek: 'Semana anterior',
+  nextWeek: 'Próxima semana',
+  // contact
+  contactIntro: 'Preencha as informações abaixo para que seu agendamento seja identificado.',
+  phoneLabel: 'Celular',
+  phoneHint:
+    'Enviaremos um código para confirmar que o número de telefone é seu. Usaremos este número para associar as suas informações à sua conta.',
+  sendCodeCta: 'Enviar código via WhatsApp',
+  codeTitle: 'Insira o código',
+  codeBody: 'Enviamos um código via WhatsApp para você confirmar seu número.',
+  codeInvalid: 'Código inválido. Para testar, use 0000.',
+  codeConfirmCta: 'Confirmar',
+  codeResendHint: 'Reenviar código via WhatsApp em 28 segundos.',
+  phoneVerified: 'Celular verificado',
+  changePhone: 'Trocar telefone',
+  nameLabel: 'Nome completo *',
+  namePlaceholder: 'Seu nome',
+  emailLabel: 'E-mail',
+  emailPlaceholder: 'voce@email.com',
+  emailHint: 'Enviaremos uma confirmação e um lembrete antes do agendamento.',
+  notesLabel: 'Observação',
+  notesPlaceholder: 'Use esse espaço para deixar uma observação sobre este agendamento',
+  saveAndContinueCta: 'Salvar e continuar',
+  submitError: 'Não foi possível concluir o agendamento. Tente novamente.',
+  noChargeNote: 'Pagamento via Pix · Sem cobrança agora',
+  // right rail
+  railTitle: 'Passos para agendar',
+  railWaitingPayment: 'Aguardando pagamento',
+  railService: 'Serviço',
+  railProfessional: 'Profissional',
+  railDatetime: 'Data e horário',
+  railContact: 'Informações pessoais',
+  railPayment: 'Pagamento',
 }
 
 const DEFAULT_WINDOW: BookingWindow = { minAdvanceHours: 2, maxAdvanceDays: 21, slotInterval: 30 }
 
 const DEFAULT_HOURS: WorkingHours = { daysOfWeek: [1, 2, 3, 4, 5, 6], start: '09:00', end: '18:00' }
 
+function resolveBrand(brand: BookingBrand | undefined, labels: PublicBookingLabels): ResolvedBookingBrand {
+  const name = brand?.name ?? labels.title
+  return {
+    name,
+    initials: brand?.initials ?? name.charAt(0).toUpperCase(),
+    logoUrl: brand?.logoUrl,
+    tagline: brand?.tagline === undefined ? 'Agendamento online seguro' : brand.tagline,
+    serviceIcon: brand?.serviceIcon ?? Video,
+    serviceMeta: brand?.serviceMeta === undefined ? 'Online' : brand.serviceMeta,
+    featuredBadge: brand?.featuredBadge === undefined ? 'Mais procurado' : brand.featuredBadge,
+    highlights: brand?.highlights ?? [
+      { icon: CalendarCheck, text: 'Confirmação imediata' },
+      { icon: ShieldCheck, text: 'Agendamento seguro' },
+    ],
+  }
+}
+
 let scheduleId = 0
 
 function buildSchedules(professionalId: string, hours: WorkingHours): Schedule[] {
@@ -77,13 +169,18 @@ function buildSchedules(professionalId: string, hours: WorkingHours): Schedule[]
 
 export function createPublicBookingPlugin(options: PublicBookingOptions): PublicBookingPlugin {
   const basePath = options.basePath ?? '/agendar'
-  const professionalId = options.professional?.id ?? 'dr-hiago'
+  // Mock needs a concrete seed professional; Supabase can target any (null).
+  const mockProfessionalId = options.professional?.id ?? 'pro-1'
+  const professionalId = options.professional?.id ?? null
   const professionalName = options.professional?.name ?? 'Especialista'
   const window: BookingWindow = { ...DEFAULT_WINDOW, ...options.window }
   const labels: PublicBookingLabels = { ...DEFAULT_LABELS, ...options.labels }
+  const brand = resolveBrand(options.brand, labels)
+  const components: BookingComponents = { ...DEFAULT_BOOKING_COMPONENTS, ...options.components }
   const currency = options.currency ?? 'BRL'
   const locale = options.locale ?? 'pt-BR'
   const hours = options.workingHours ?? DEFAULT_HOURS
+  const staticServices = options.services ?? null
   const payment: ResolvedPayment | null = options.payment?.enabled
     ? {
         reservationFeePercent: options.payment.reservationFeePercent ?? 100,
@@ -92,7 +189,7 @@ export function createPublicBookingPlugin(options: PublicBookingOptions): Public
     : null
 
   const professional: Professional = {
-    id: professionalId,
+    id: mockProfessionalId,
     name: professionalName,
     avatarUrl: null,
     locationId: null,
@@ -101,33 +198,46 @@ export function createPublicBookingPlugin(options: PublicBookingOptions): Public
   }
   const mockSeed: MockAgendaSeed = options.seed ?? {
     professionals: [professional],
-    schedules: buildSchedules(professionalId, hours),
+    schedules: buildSchedules(mockProfessionalId, hours),
     bookings: [],
   }
 
   const provider =
     options.dataProvider ??
-    createSafeDataProvider(
-      () => createSupabaseAgendaProvider(),
-      () => createMockAgendaProvider({ seed: mockSeed }),
+    createSafeDataProvider<PublicBookingDataProvider>(
+      () => {
+        if (!options.tenantId) {
+          throw new Error(
+            '[plugin-agenda/public] `tenantId` is required when a Supabase client is configured (setGlobalSupabaseClient).',
+          )
+        }
+        return createSupabasePublicBookingProvider({ tenantId: options.tenantId })
+      },
+      () =>
+        createMockPublicBookingProvider({
+          seed: mockSeed,
+          services: staticServices ?? [],
+          professionalId: mockProfessionalId,
+        }),
     )
 
-  const value: PublicBookingContextValue = {
+  const base: Omit<PublicBookingContextValue, 'services' | 'servicesLoading'> = {
     provider,
     professionalId,
     professionalName,
-    services: options.services,
     businessHours: hours,
     payment,
     paymentProvider: options.paymentProvider ?? null,
     onIdentityVerified: options.onIdentityVerified ?? null,
     window,
     labels,
+    brand,
+    components,
     currency,
     locale,
   }
   const Provider: FC<{ children: ReactNode }> = ({ children }) =>
-    createElement(BookingProvider, { value, children })
+    createElement(BookingProvider, { base, staticServices, children })
   Provider.displayName = 'PublicBookingProvider'
 
   const BookingScreen: FC<unknown> = () =>
@@ -140,7 +250,7 @@ export function createPublicBookingPlugin(options: PublicBookingOptions): Public
     id: 'booking',
     name: 'Agendamento',
     icon: 'CalendarCheck',
-    version: '0.1.0',
+    version: '0.3.0',
     scope: options.scope ?? 'universal',
     verticalId: options.verticalId,
     scaffolds: ['website', 'landing_page'],