@fayz-ai/plugin-agenda 0.2.0 → 0.3.0

package/src/migrations/index.ts

@@ -0,0 +1,282 @@
+// AUTO-GENERATED from 001_public_booking.sql — regenerate with scripts/embed-migrations.mjs
+// (kept in sync so the manifest can declare migrations as data, plugin-tasks pattern)
+
+export const MIGRATION_001_PUBLIC_BOOKING = `-- ============================================================================
+-- plugin-agenda 001: booking read model + public (anon) booking surface
+--
+-- Ships the objects the agenda providers reference but the spine (packages/db
+-- migrations 001–008) does not define:
+--   §1  order_items columns the admin provider writes (duration/assignee)
+--   §2  public.v_bookings        — admin read model (authenticated, RLS applies)
+--   §3  public.v_public_services — anon-readable service catalog
+--   §4  public.get_available_slots      — anon RPC (mirrors the mock algorithm)
+--   §5  public.create_public_booking    — anon RPC (validated, race-safe write)
+--
+-- Anon-access design: public booking pages run with the publishable key and no
+-- session, so the canonical tenant RLS yields nothing. Anon access is granted
+-- ONLY via the column-whitelisted view (§3) and SECURITY DEFINER RPCs (§4, §5)
+-- with tight input validation and hardcoded statuses.
+-- ============================================================================
+
+-- §1 — columns the agenda provider writes but 004_archetypes lacks
+ALTER TABLE saas_core.order_items
+  ADD COLUMN IF NOT EXISTS duration_minutes integer,
+  ADD COLUMN IF NOT EXISTS assignee_id uuid REFERENCES saas_core.persons(id) ON DELETE SET NULL;
+
+-- Upsert key for public customers (per tenant, by normalized phone)
+CREATE UNIQUE INDEX IF NOT EXISTS persons_tenant_customer_phone
+  ON saas_core.persons(tenant_id, phone)
+  WHERE kind = 'customer' AND phone IS NOT NULL;
+
+-- Slot-conflict scan
+CREATE INDEX IF NOT EXISTS bookings_assignee_time
+  ON saas_core.bookings(assignee_id, starts_at, ends_at)
+  WHERE status NOT IN ('cancelled', 'no_show');
+
+-- §2 — admin read model (security_invoker → underlying RLS applies; anon sees 0 rows)
+CREATE OR REPLACE VIEW public.v_bookings
+WITH (security_invoker = true) AS
+SELECT
+  b.id, b.tenant_id, b.kind, b.starts_at, b.ends_at, b.status, b.notes,
+  b.order_id, b.location_id, b.metadata, b.created_at, b.updated_at,
+  b.party_id                              AS client_id,
+  COALESCE(pc.name, b.metadata->>'title') AS client_name,
+  pc.phone                                AS client_phone,
+  pc.email                                AS client_email,
+  pc.avatar_url                           AS client_avatar_url,
+  b.assignee_id                           AS professional_id,
+  ps.name                                 AS professional_name,
+  ps.avatar_url                           AS professional_avatar_url,
+  l.name                                  AS location_name,
+  o.total                                 AS order_total,
+  o.status                                AS order_status,
+  (EXTRACT(EPOCH FROM (COALESCE(b.ends_at, b.starts_at) - b.starts_at))::int / 60)
+                                          AS total_duration_minutes
+FROM saas_core.bookings b
+LEFT JOIN saas_core.persons   pc ON pc.id = b.party_id
+LEFT JOIN saas_core.persons   ps ON ps.id = b.assignee_id
+LEFT JOIN saas_core.locations l  ON l.id  = b.location_id
+LEFT JOIN saas_core.orders    o  ON o.id  = b.order_id;
+
+GRANT SELECT ON public.v_bookings TO authenticated, service_role;
+REVOKE SELECT ON public.v_bookings FROM anon;
+
+-- §3 — anon-readable public catalog (owner-rights view = deliberate, whitelisted)
+CREATE OR REPLACE VIEW public.v_public_services AS
+SELECT
+  s.id, s.tenant_id, s.name, s.description, s.price, s.currency,
+  COALESCE(s.duration_minutes, 30)                AS duration_minutes,
+  s.image_url,
+  COALESCE((s.metadata->>'sort_order')::int, 0)   AS sort_order
+FROM saas_core.services s
+WHERE s.is_active AND s.status = 'active';
+
+GRANT SELECT ON public.v_public_services TO anon, authenticated, service_role;
+
+-- §4 — availability RPC (mirrors plugin-agenda/src/data/mock.ts getAvailableSlots)
+CREATE OR REPLACE FUNCTION public.get_available_slots(
+  p_tenant_id uuid,
+  p_date date,
+  p_duration_minutes integer,
+  p_assignee_id uuid DEFAULT NULL,
+  p_slot_interval integer DEFAULT 30
+) RETURNS TABLE (slot_start timestamptz, slot_end timestamptz)
+LANGUAGE plpgsql STABLE SECURITY DEFINER
+SET search_path = saas_core, public
+AS $$
+DECLARE
+  v_tz text;
+BEGIN
+  -- tight validation: this function is anon-callable
+  IF p_duration_minutes IS NULL OR p_duration_minutes NOT BETWEEN 5 AND 480 THEN
+    RAISE EXCEPTION 'invalid duration';
+  END IF;
+  IF p_slot_interval IS NULL OR p_slot_interval NOT BETWEEN 5 AND 240 THEN
+    RAISE EXCEPTION 'invalid interval';
+  END IF;
+  IF p_date IS NULL OR p_date < current_date OR p_date > current_date + 90 THEN
+    RETURN;
+  END IF;
+
+  SELECT COALESCE(t.settings->>'timezone', 'America/Sao_Paulo') INTO v_tz
+  FROM tenants t WHERE t.id = p_tenant_id;
+  IF v_tz IS NULL THEN RETURN; END IF;  -- unknown tenant → empty, not an error
+
+  RETURN QUERY
+  WITH day_schedules AS (
+    SELECT sc.assignee_id, sc.starts_at AS win_start, sc.ends_at AS win_end
+    FROM schedules sc
+    WHERE sc.tenant_id = p_tenant_id
+      AND sc.kind = 'working_hours'
+      AND sc.is_active
+      AND (p_assignee_id IS NULL OR sc.assignee_id = p_assignee_id)
+      AND (
+        sc.specific_date = p_date
+        OR (sc.specific_date IS NULL AND sc.day_of_week = EXTRACT(dow FROM p_date)::smallint)
+      )
+  ),
+  candidate AS (
+    SELECT
+      ds.assignee_id,
+      gs                                              AS s_start,
+      gs + make_interval(mins => p_duration_minutes)  AS s_end
+    FROM day_schedules ds
+    CROSS JOIN LATERAL generate_series(
+      (p_date + ds.win_start) AT TIME ZONE v_tz,
+      ((p_date + ds.win_end) AT TIME ZONE v_tz) - make_interval(mins => p_duration_minutes),
+      make_interval(mins => p_slot_interval)
+    ) AS gs
+  )
+  SELECT DISTINCT c.s_start, c.s_end
+  FROM candidate c
+  WHERE NOT EXISTS (
+    SELECT 1 FROM bookings b
+    WHERE b.tenant_id = p_tenant_id
+      AND b.assignee_id = c.assignee_id
+      AND b.status NOT IN ('cancelled', 'no_show')
+      AND b.starts_at < c.s_end
+      AND COALESCE(b.ends_at, b.starts_at) > c.s_start
+  )
+  ORDER BY 1;
+END;
+$$;
+
+REVOKE ALL ON FUNCTION public.get_available_slots(uuid, date, integer, uuid, integer) FROM public;
+GRANT EXECUTE ON FUNCTION public.get_available_slots(uuid, date, integer, uuid, integer)
+  TO anon, authenticated, service_role;
+
+-- §5 — public booking write RPC (validated, race-safe, hardcoded statuses)
+CREATE OR REPLACE FUNCTION public.create_public_booking(
+  p_tenant_id uuid,
+  p_service_id uuid,
+  p_starts_at timestamptz,
+  p_name text,
+  p_phone text,
+  p_email text DEFAULT NULL,
+  p_notes text DEFAULT NULL
+) RETURNS TABLE (booking_id uuid, starts_at timestamptz, ends_at timestamptz)
+LANGUAGE plpgsql SECURITY DEFINER
+SET search_path = saas_core, public
+AS $$
+DECLARE
+  v_service record;
+  v_person_id uuid;
+  v_assignee uuid;
+  v_ends timestamptz;
+  v_order uuid;
+  v_booking uuid;
+  v_phone text;
+  v_tz text;
+  v_notes text;
+BEGIN
+  -- validation: anon-callable, everything tight
+  IF p_name IS NULL OR length(trim(p_name)) NOT BETWEEN 2 AND 120 THEN
+    RAISE EXCEPTION 'invalid name';
+  END IF;
+  v_phone := regexp_replace(COALESCE(p_phone, ''), '\\D', '', 'g');
+  IF length(v_phone) NOT BETWEEN 8 AND 15 THEN
+    RAISE EXCEPTION 'invalid phone';
+  END IF;
+  IF p_email IS NOT NULL AND (length(p_email) > 254 OR p_email !~ '^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$') THEN
+    RAISE EXCEPTION 'invalid email';
+  END IF;
+  v_notes := left(p_notes, 500);
+  IF p_starts_at IS NULL OR p_starts_at <= now() OR p_starts_at > now() + interval '90 days' THEN
+    RAISE EXCEPTION 'invalid start';
+  END IF;
+
+  SELECT s.id, s.name, s.price, COALESCE(s.duration_minutes, 30) AS duration_minutes
+    INTO v_service
+  FROM services s
+  WHERE s.id = p_service_id AND s.tenant_id = p_tenant_id
+    AND s.is_active AND s.status = 'active';
+  IF NOT FOUND THEN RAISE EXCEPTION 'unknown service'; END IF;
+
+  v_ends := p_starts_at + make_interval(mins => v_service.duration_minutes);
+  SELECT COALESCE(t.settings->>'timezone', 'America/Sao_Paulo') INTO v_tz
+  FROM tenants t WHERE t.id = p_tenant_id;
+  IF v_tz IS NULL THEN RAISE EXCEPTION 'unknown tenant'; END IF;
+
+  -- pick the assignee whose working hours cover the slot
+  SELECT sc.assignee_id INTO v_assignee
+  FROM schedules sc
+  WHERE sc.tenant_id = p_tenant_id
+    AND sc.kind = 'working_hours'
+    AND sc.is_active
+    AND (
+      sc.specific_date = (p_starts_at AT TIME ZONE v_tz)::date
+      OR (sc.specific_date IS NULL
+          AND sc.day_of_week = EXTRACT(dow FROM p_starts_at AT TIME ZONE v_tz)::smallint)
+    )
+    AND (p_starts_at AT TIME ZONE v_tz)::time >= sc.starts_at
+    AND (v_ends AT TIME ZONE v_tz)::time <= sc.ends_at
+  ORDER BY sc.assignee_id
+  LIMIT 1;
+  IF v_assignee IS NULL THEN RAISE EXCEPTION 'slot outside working hours'; END IF;
+
+  -- serialize per (tenant, assignee) to kill the double-book race
+  PERFORM pg_advisory_xact_lock(hashtextextended(p_tenant_id::text || v_assignee::text, 0));
+
+  IF EXISTS (
+    SELECT 1 FROM bookings b
+    WHERE b.tenant_id = p_tenant_id
+      AND b.assignee_id = v_assignee
+      AND b.status NOT IN ('cancelled', 'no_show')
+      AND b.starts_at < v_ends
+      AND COALESCE(b.ends_at, b.starts_at) > p_starts_at
+  ) THEN
+    RAISE EXCEPTION 'slot no longer available';
+  END IF;
+
+  -- anti-spam: cap open future public bookings per phone per tenant
+  IF (
+    SELECT count(*) FROM bookings b
+    JOIN persons p ON p.id = b.party_id
+    WHERE b.tenant_id = p_tenant_id
+      AND p.phone = v_phone
+      AND b.starts_at > now()
+      AND b.status = 'scheduled'
+  ) >= 3 THEN
+    RAISE EXCEPTION 'too many open bookings for this phone';
+  END IF;
+
+  -- upsert the customer by (tenant, phone) — matches persons_tenant_customer_phone
+  INSERT INTO persons (tenant_id, kind, name, phone, email, metadata)
+  VALUES (p_tenant_id, 'customer', trim(p_name), v_phone, p_email,
+          jsonb_build_object('source', 'public_booking'))
+  ON CONFLICT (tenant_id, phone) WHERE kind = 'customer' AND phone IS NOT NULL
+  DO UPDATE SET
+    name = EXCLUDED.name,
+    email = COALESCE(EXCLUDED.email, persons.email),
+    updated_at = now()
+  RETURNING id INTO v_person_id;
+
+  -- order + booking + order_item (statuses hardcoded — caller cannot set)
+  INSERT INTO orders (tenant_id, kind, status, party_id, assignee_id, subtotal, total, notes, metadata)
+  VALUES (p_tenant_id, 'appointment', 'scheduled', v_person_id, v_assignee,
+          v_service.price, v_service.price, v_notes,
+          jsonb_build_object('source', 'public_booking',
+                             'serviceNames', v_service.name,
+                             'contactName', trim(p_name)))
+  RETURNING id INTO v_order;
+
+  INSERT INTO bookings (tenant_id, kind, party_id, assignee_id, order_id,
+                        starts_at, ends_at, status, notes, metadata)
+  VALUES (p_tenant_id, 'appointment', v_person_id, v_assignee, v_order,
+          p_starts_at, v_ends, 'scheduled', v_notes,
+          jsonb_build_object('source', 'public_booking', 'serviceNames', v_service.name))
+  RETURNING id INTO v_booking;
+
+  INSERT INTO order_items (order_id, service_id, name, quantity, unit_price, total,
+                           sort_order, duration_minutes, assignee_id)
+  VALUES (v_order, v_service.id, v_service.name, 1, v_service.price, v_service.price,
+          0, v_service.duration_minutes, v_assignee);
+
+  RETURN QUERY SELECT v_booking, p_starts_at, v_ends;
+END;
+$$;
+
+REVOKE ALL ON FUNCTION public.create_public_booking(uuid, uuid, timestamptz, text, text, text, text) FROM public;
+GRANT EXECUTE ON FUNCTION public.create_public_booking(uuid, uuid, timestamptz, text, text, text, text)
+  TO anon, authenticated, service_role;
+`

package/src/public/BookingWidget.tsx

@@ -0,0 +1,315 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { ChevronLeft } from 'lucide-react'
+import { DEFAULT_COUNTRY, getCountry, maskPhone, unmaskPhone } from '@fayz-ai/core'
+import type { PixCharge } from '@fayz-ai/core'
+import { useBooking } from './context'
+import { useAvailableSlots, useCreateBooking } from './hooks'
+import { buildWeek, toIso, readServiceParam, useFormatters } from './format'
+import type { StepState } from './types'
+import { OverviewStep } from './steps/OverviewStep'
+import { DateTimeStep } from './steps/DateTimeStep'
+import { ContactStep, type ContactDraft } from './steps/ContactStep'
+import { PaymentStep, PIX_PAYLOAD } from './steps/PaymentStep'
+import { SummaryRail, type RailState } from './components/SummaryRail'
+
+type Step = 'overview' | 'datetime' | 'contact' | 'payment' | 'success'
+
+/**
+ * Customer-facing booking surface. Default view is an overview (services +
+ * opening hours + CTA) like Quaddro; picking a service — or landing with
+ * ?service=… — enters a stepped flow (date → time → contact → [payment])
+ * with a live progress + summary rail. Token-only, keyboard-accessible, 44px
+ * targets. Brand-visible parts render via the host-overridable
+ * `components`/`brand` seams; data flows through PublicBookingDataProvider
+ * (mock seed or Supabase RPCs — same calls).
+ */
+export function BookingWidget() {
+  const {
+    services, servicesLoading, professionalName, businessHours, payment, paymentProvider,
+    onIdentityVerified, labels, brand, components: C, window: bookingWindow, locale, currency,
+  } = useBooking()
+  const fmt = useFormatters(locale, currency)
+
+  const preselected = useMemo(() => {
+    const q = readServiceParam()
+    if (q && services.some((s) => s.id === q)) return q
+    return null
+  }, [services])
+  const todayIso = useMemo(() => toIso(new Date()), [])
+
+  const [step, setStep] = useState<Step>(preselected ? 'datetime' : 'overview')
+  const [serviceId, setServiceId] = useState<string | null>(preselected)
+  const [weekOffset, setWeekOffset] = useState(0)
+  const [date, setDate] = useState<string | null>(todayIso)
+  const [slotStart, setSlotStart] = useState<string | null>(null)
+  const [contact, setContact] = useState<ContactDraft>({ name: '', phone: '', email: '', notes: '' })
+  // Contact step is phone-verification-first (like Quaddro): phone → code → details.
+  const [contactStep, setContactStep] = useState<'phone' | 'code' | 'details'>('phone')
+  const [code, setCode] = useState('')
+  const [codeError, setCodeError] = useState(false)
+  // Payment sub-flow: choose method → Pix QR ("aguardando pagamento").
+  const [paymentStep, setPaymentStep] = useState<'choose' | 'pix'>('choose')
+  const [copied, setCopied] = useState(false)
+  const [countryIso, setCountryIso] = useState(DEFAULT_COUNTRY)
+  const country = getCountry(countryIso)
+  // Pix charge from the injected payment provider (null → self-mocked fallback).
+  const [charge, setCharge] = useState<PixCharge | null>(null)
+  const [charging, setCharging] = useState(false)
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  // ?service=… deep link: enter the flow once the (possibly async) catalog resolves.
+  useEffect(() => {
+    if (preselected && step === 'overview') {
+      setServiceId(preselected)
+      setStep('datetime')
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [preselected])
+
+  // Poll the charge status while on the Pix screen; settle → success.
+  useEffect(() => {
+    if (!(step === 'payment' && paymentStep === 'pix' && charge && paymentProvider)) return
+    let active = true
+    const clear = () => { if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null } }
+    const tick = () => {
+      paymentProvider.getChargeStatus(charge.chargeId).then((s) => {
+        if (!active) return
+        if (s === 'paid') { clear(); setStep('success') }
+        else if (s === 'expired' || s === 'failed') clear()
+      }).catch(() => { /* keep polling on transient errors */ })
+    }
+    tick()
+    pollRef.current = setInterval(tick, 2500)
+    return () => { active = false; clear() }
+  }, [step, paymentStep, charge, paymentProvider])
+
+  const week = useMemo(() => buildWeek(weekOffset), [weekOffset])
+  const { slots, loading: slotsLoading } = useAvailableSlots({ serviceId, date })
+  const { submit, submitting, error } = useCreateBooking()
+
+  const minTime = Date.now() + bookingWindow.minAdvanceHours * 3600_000
+  const bookableSlots = slots.filter((s) => new Date(s.start).getTime() >= minTime)
+  const service = services.find((s) => s.id === serviceId) ?? null
+  const maxWeekOffset = Math.floor(bookingWindow.maxAdvanceDays / 7)
+
+  /** Contact with the full international phone, as real backends expect. */
+  function contactForSubmit(): ContactDraft {
+    return { ...contact, phone: `${country.dial} ${contact.phone}` }
+  }
+
+  function startBooking(id?: string) {
+    setServiceId(id ?? serviceId ?? services[0]?.id ?? null)
+    setDate(todayIso)
+    setSlotStart(null)
+    setStep('datetime')
+  }
+
+  async function handleConfirm() {
+    if (!serviceId || !slotStart || !contact.name.trim()) return
+    try {
+      await submit({ serviceId, startsAt: slotStart, contact: contactForSubmit() })
+      setStep('success')
+    } catch {
+      /* error surfaced inline */
+    }
+  }
+
+  function emitIdentity() {
+    onIdentityVerified?.({
+      name: contact.name,
+      phone: `${country.dial} ${contact.phone}`,
+      email: contact.email || undefined,
+    })
+  }
+
+  // Contact sub-step submit handlers (also used by Enter via <form onSubmit>).
+  function sendCode() {
+    if (unmaskPhone(contact.phone).length < 8) return
+    setCode(''); setCodeError(false); setContactStep('code')
+  }
+  function confirmCode() {
+    if (code.trim() === '0000') {
+      setCodeError(false)
+      emitIdentity() // phone verified → host signs the user in
+      setContactStep('details')
+    } else {
+      setCodeError(true)
+    }
+  }
+  function submitDetails() {
+    if (!contact.name.trim() || submitting) return
+    emitIdentity() // re-fire with the full name to enrich the account
+    if (payment) { setPaymentStep('choose'); setStep('payment') } else void handleConfirm()
+  }
+  async function payWithPix(fee: number) {
+    if (charging || !service || !slotStart) return
+    setCharging(true)
+    try {
+      await submit({ serviceId: service.id, startsAt: slotStart, contact: contactForSubmit() })
+      if (paymentProvider) {
+        const c = await paymentProvider.createCharge({
+          amount: fee, currency, method: 'pix', description: service.name,
+          customer: { name: contact.name, email: contact.email || undefined, phone: contact.phone || undefined },
+        })
+        setCharge(c)
+      }
+      setPaymentStep('pix')
+    } catch {
+      /* error surfaced inline */
+    } finally {
+      setCharging(false)
+    }
+  }
+  function copyPixPayload() {
+    const payload = charge?.pixCopyPaste ?? PIX_PAYLOAD
+    try { void navigator.clipboard?.writeText(payload); setCopied(true) } catch { setCopied(true) }
+  }
+
+  // ---- OVERVIEW (default view, no service chosen) ----
+  if (step === 'overview') {
+    return (
+      <div className="mx-auto max-w-4xl">
+        <C.BrandHeader brand={brand} />
+        <OverviewStep
+          services={services}
+          servicesLoading={servicesLoading}
+          businessHours={businessHours}
+          professionalName={professionalName}
+          labels={labels}
+          brand={brand}
+          fmt={fmt}
+          components={C}
+          onStartBooking={startBooking}
+        />
+      </div>
+    )
+  }
+
+  // ---- WIZARD (datetime → contact → [payment] → success) ----
+  const railState: RailState = {
+    service: 'done',
+    professional: 'done',
+    datetime: (slotStart ? 'done' : step === 'datetime' ? 'active' : 'todo') as StepState,
+    contact: (step === 'payment' || step === 'success' ? 'done' : step === 'contact' ? 'active' : 'todo') as StepState,
+    payment: (step === 'success' ? 'done' : step === 'payment' ? 'active' : 'todo') as StepState,
+  }
+  const railTitle = step === 'payment' && paymentStep === 'pix' ? labels.railWaitingPayment : labels.railTitle
+  const contactSummary =
+    (contact.name || contact.phone) && (step === 'payment' || step === 'success' || contactStep === 'details')
+      ? `${contact.name || 'Contato'}${contact.phone ? ` · ${country.dial} ${contact.phone}` : ''}`
+      : null
+
+  return (
+    <div className="mx-auto max-w-4xl">
+      <C.BrandHeader brand={brand} />
+      <div className="grid gap-6 lg:grid-cols-[1fr_18rem]">
+        {/* LEFT — step panel */}
+        <div className="rounded-2xl border border-border bg-card p-6 md:p-7 shadow-sm">
+          <div className="mb-5 flex items-center gap-1.5 lg:hidden">
+            {(['datetime', 'contact'] as const).map((s) => (
+              <span key={s} className={`h-1.5 flex-1 rounded-full ${railState[s] !== 'todo' ? 'bg-primary' : 'bg-muted'}`} />
+            ))}
+          </div>
+
+          {step !== 'success' ? (
+            <button
+              type="button"
+              onClick={() => setStep(step === 'payment' ? 'contact' : step === 'contact' ? 'datetime' : 'overview')}
+              className="mb-4 inline-flex items-center gap-1 rounded text-sm font-medium text-muted-foreground hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <ChevronLeft className="h-4 w-4" /> {step === 'datetime' ? labels.backToServices : labels.back}
+            </button>
+          ) : null}
+
+          {step === 'datetime' ? (
+            <DateTimeStep
+              labels={labels}
+              fmt={fmt}
+              week={week}
+              weekOffset={weekOffset}
+              maxWeekOffset={maxWeekOffset}
+              onWeekOffset={setWeekOffset}
+              businessHours={businessHours}
+              date={date}
+              onSelectDate={(iso) => { setDate(iso); setSlotStart(null) }}
+              slots={bookableSlots}
+              slotsLoading={slotsLoading}
+              slotStart={slotStart}
+              onSelectSlot={setSlotStart}
+              onContinue={() => setStep('contact')}
+            />
+          ) : null}
+
+          {step === 'contact' ? (
+            <ContactStep
+              labels={labels}
+              contact={contact}
+              onContactChange={setContact}
+              contactStep={contactStep}
+              country={country}
+              onCountryChange={(iso2) => {
+                const c = getCountry(iso2)
+                setCountryIso(c.iso2)
+                setContact((prev) => ({ ...prev, phone: maskPhone(unmaskPhone(prev.phone), c.mask) }))
+              }}
+              code={code}
+              onCodeChange={(v) => { setCode(v); setCodeError(false) }}
+              codeError={codeError}
+              onSendCode={sendCode}
+              onConfirmCode={confirmCode}
+              onBackToPhone={() => setContactStep('phone')}
+              onSubmitDetails={submitDetails}
+              payment={payment}
+              submitting={submitting}
+              error={error}
+            />
+          ) : null}
+
+          {step === 'payment' && service && payment ? (
+            <PaymentStep
+              service={service}
+              payment={payment}
+              paymentStep={paymentStep}
+              charge={charge}
+              busy={submitting || charging}
+              error={error}
+              copied={copied}
+              fmt={fmt}
+              onPayWithPix={(fee) => void payWithPix(fee)}
+              onCopy={copyPixPayload}
+              onSimulatePaid={() => setStep('success')}
+            />
+          ) : null}
+
+          {step === 'success' ? (
+            <C.SuccessPanel
+              service={service}
+              slotStart={slotStart}
+              professionalName={professionalName}
+              labels={labels}
+              fmt={fmt}
+            />
+          ) : null}
+        </div>
+
+        {/* RIGHT — progress + summary rail */}
+        <aside className="hidden lg:block">
+          <SummaryRail
+            title={railTitle}
+            railState={railState}
+            service={service}
+            professionalName={professionalName}
+            slotStart={slotStart}
+            contactSummary={contactSummary}
+            payment={payment}
+            paymentReached={step === 'payment' || step === 'success'}
+            labels={labels}
+            fmt={fmt}
+            components={C}
+            serviceMeta={brand.serviceMeta}
+          />
+        </aside>
+      </div>
+    </div>
+  )
+}

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>
+  )
+}