@fayz-ai/plugin-agenda 0.2.1 → 0.3.0

package/src/public/data.supabase.ts

@@ -0,0 +1,94 @@
+// ---------------------------------------------------------------------------
+// Supabase implementation of PublicBookingDataProvider — anon-safe.
+//
+// Public booking pages run with the publishable (anon) key and NO user session,
+// so the canonical tenant RLS (`tenant_id IN user_tenant_ids()`) yields nothing.
+// This provider therefore only touches objects designed for anon access:
+//   - public.v_public_services   (column-whitelisted view of active services)
+//   - public.get_available_slots (SECURITY DEFINER RPC, mirrors the mock algo)
+//   - public.create_public_booking (SECURITY DEFINER RPC: validates the slot,
+//     upserts the customer person, writes order+booking+order_item atomically)
+// Shipped by plugins/plugin-agenda/src/migrations/001_public_booking.sql.
+// ---------------------------------------------------------------------------
+
+import { getSupabaseClientOptional } from '@fayz-ai/core'
+import type { TimeSlot } from '../types'
+import type { PublicService } from './types'
+import type { PublicBookingDataProvider } from './data'
+
+export interface SupabasePublicBookingOptions {
+  /** The tenant this public page books against (RPC arg — required). */
+  tenantId: string
+}
+
+interface SupabaseLikeClient {
+  from(table: string): any
+  rpc(fn: string, args: Record<string, unknown>): PromiseLike<{ data: unknown; error: { message: string } | null }>
+}
+
+function getClient(): SupabaseLikeClient {
+  const client = getSupabaseClientOptional() as SupabaseLikeClient | null
+  if (!client) throw new Error('[plugin-agenda/public] Supabase client not initialized')
+  return client
+}
+
+/** Digits-only phone (RPC normalizes again server-side; keep the dial code). */
+function toPhoneDigits(phone: string | undefined): string {
+  return (phone ?? '').replace(/\D/g, '')
+}
+
+export function createSupabasePublicBookingProvider(options: SupabasePublicBookingOptions): PublicBookingDataProvider {
+  const { tenantId } = options
+
+  return {
+    async getServices(): Promise<PublicService[]> {
+      const { data, error } = await getClient()
+        .from('v_public_services')
+        .select('id, name, description, price, currency, duration_minutes, sort_order')
+        .eq('tenant_id', tenantId)
+        .order('sort_order', { ascending: true })
+      if (error) throw new Error(`[plugin-agenda/public] getServices: ${error.message}`)
+      return ((data ?? []) as Array<Record<string, unknown>>).map((row) => ({
+        id: String(row.id),
+        name: String(row.name),
+        description: (row.description as string | null) ?? undefined,
+        price: Number(row.price ?? 0),
+        durationMinutes: Number(row.duration_minutes ?? 30),
+      }))
+    },
+
+    async getAvailableSlots(query): Promise<TimeSlot[]> {
+      const { data, error } = await getClient().rpc('get_available_slots', {
+        p_tenant_id: tenantId,
+        p_assignee_id: query.assigneeId,
+        p_date: query.date,
+        p_duration_minutes: query.durationMinutes,
+        p_slot_interval: query.slotInterval,
+      })
+      if (error) throw new Error(`[plugin-agenda/public] getAvailableSlots: ${error.message}`)
+      return ((data ?? []) as Array<{ slot_start: string; slot_end: string }>).map((row) => ({
+        start: row.slot_start,
+        end: row.slot_end,
+      }))
+    },
+
+    async createBooking(input) {
+      const phone = toPhoneDigits(input.contact.phone)
+      const { data, error } = await getClient().rpc('create_public_booking', {
+        p_tenant_id: tenantId,
+        p_service_id: input.serviceId,
+        p_starts_at: input.startsAt,
+        p_name: input.contact.name.trim(),
+        p_phone: phone,
+        p_email: input.contact.email?.trim() || null,
+        p_notes: input.contact.notes?.trim() || null,
+      })
+      if (error) throw new Error(`[plugin-agenda/public] createBooking: ${error.message}`)
+      const row = (Array.isArray(data) ? data[0] : data) as
+        | { booking_id: string; starts_at: string; ends_at: string }
+        | undefined
+      if (!row) throw new Error('[plugin-agenda/public] createBooking: empty RPC response')
+      return { bookingId: row.booking_id, startsAt: row.starts_at, endsAt: row.ends_at }
+    },
+  }
+}

package/src/public/data.ts

@@ -0,0 +1,99 @@
+// ---------------------------------------------------------------------------
+// PublicBookingDataProvider — the narrow data seam the public booking surface
+// depends on. The admin calendar's 15-method AgendaDataProvider is deliberately
+// NOT used here: a public page needs exactly three capabilities, and the
+// Supabase implementation must be anon-safe (SECURITY DEFINER RPCs + whitelisted
+// views) rather than the authenticated table access the admin provider does.
+// ---------------------------------------------------------------------------
+
+import type { TimeSlot } from '../types'
+import { createMockAgendaProvider, type MockAgendaSeed } from '../data/mock'
+import type { PublicService, ContactInfo } from './types'
+
+export interface PublicSlotQuery {
+  /** Staff person id; null → any active professional for the tenant. */
+  assigneeId: string | null
+  /** 'YYYY-MM-DD' local calendar day. */
+  date: string
+  durationMinutes: number
+  slotInterval: number
+}
+
+export interface PublicCreateBookingInput {
+  serviceId: string
+  /** ISO datetime of the chosen slot start. */
+  startsAt: string
+  /** name required; phone should include the country dial for real backends. */
+  contact: ContactInfo
+}
+
+export interface PublicBookingResult {
+  bookingId: string
+  startsAt: string
+  endsAt: string
+}
+
+export interface PublicBookingDataProvider {
+  /** Bookable catalog. Used when the host doesn't pass static `services`. */
+  getServices(): Promise<PublicService[]>
+  getAvailableSlots(query: PublicSlotQuery): Promise<TimeSlot[]>
+  createBooking(input: PublicCreateBookingInput): Promise<PublicBookingResult>
+}
+
+// ---------------------------------------------------------------------------
+// Mock implementation — adapter over the admin mock provider (reuses its slot
+// algorithm + seed machinery, so mock and live behave identically).
+// ---------------------------------------------------------------------------
+
+export interface MockPublicBookingOptions {
+  seed: MockAgendaSeed
+  services: PublicService[]
+  /** The seed professional bookings are created against. */
+  professionalId: string
+}
+
+export function createMockPublicBookingProvider(options: MockPublicBookingOptions): PublicBookingDataProvider {
+  const inner = createMockAgendaProvider({ seed: options.seed })
+  const { services, professionalId } = options
+
+  return {
+    async getServices() {
+      return services
+    },
+    async getAvailableSlots(query) {
+      return inner.getAvailableSlots({
+        assigneeId: query.assigneeId ?? professionalId,
+        date: query.date,
+        durationMinutes: query.durationMinutes,
+        slotInterval: query.slotInterval,
+      })
+    },
+    async createBooking(input) {
+      const service = services.find((s) => s.id === input.serviceId)
+      if (!service) throw new Error('Serviço inválido')
+      const booking = await inner.createBooking({
+        kind: 'appointment',
+        // Mock: the customer is captured as the booking title; the Supabase
+        // path upserts a person record server-side instead.
+        clientId: 'public-guest',
+        professionalId,
+        startsAt: input.startsAt,
+        title: input.contact.name,
+        notes:
+          [input.contact.phone, input.contact.email, input.contact.notes].filter(Boolean).join(' · ') || undefined,
+        services: [
+          {
+            serviceId: service.id,
+            name: service.name,
+            durationMinutes: service.durationMinutes,
+            price: service.price,
+            assigneeId: professionalId,
+          },
+        ],
+      })
+      const endsAt =
+        booking.endsAt ?? new Date(new Date(input.startsAt).getTime() + service.durationMinutes * 60_000).toISOString()
+      return { bookingId: booking.id, startsAt: booking.startsAt, endsAt }
+    },
+  }
+}

package/src/public/format.ts

@@ -0,0 +1,61 @@
+// ---------------------------------------------------------------------------
+// Date/price formatting + calendar helpers shared by the booking widget and
+// its (host-overridable) subcomponents.
+// ---------------------------------------------------------------------------
+
+import { useMemo } from 'react'
+import type { BookingFormatters } from './types'
+
+export const DAY_NAMES = ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado']
+export const WEEK_ORDER = [1, 2, 3, 4, 5, 6, 0] // Monday-first, like the reference
+
+export function useFormatters(locale: string, currency: string): BookingFormatters {
+  return useMemo(
+    () => ({
+      price: new Intl.NumberFormat(locale, { style: 'currency', currency }),
+      time: new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit' }),
+      weekday: new Intl.DateTimeFormat(locale, { weekday: 'short' }),
+      dayNum: new Intl.DateTimeFormat(locale, { day: '2-digit', month: '2-digit' }),
+      longDay: new Intl.DateTimeFormat(locale, { weekday: 'long', day: '2-digit', month: 'long' }),
+      dateShort: new Intl.DateTimeFormat(locale, { day: '2-digit', month: '2-digit', year: 'numeric' }),
+      month: new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }),
+    }),
+    [locale, currency],
+  )
+}
+
+/** Local 'YYYY-MM-DD' for a Date. */
+export function toIso(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+/** Read a preselected service id from the URL (?service=…), router-agnostic. */
+export function readServiceParam(): string | null {
+  if (typeof window === 'undefined') return null
+  return new URLSearchParams(window.location.search).get('service')
+}
+
+export interface DayCell {
+  iso: string
+  date: Date
+  isToday: boolean
+}
+
+/** 7 consecutive days starting `weekOffset*7` days from today. */
+export function buildWeek(weekOffset: number): DayCell[] {
+  const base = new Date()
+  base.setHours(0, 0, 0, 0)
+  const cells: DayCell[] = []
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(base.getFullYear(), base.getMonth(), base.getDate() + weekOffset * 7 + i)
+    cells.push({ iso: toIso(d), date: d, isToday: weekOffset === 0 && i === 0 })
+  }
+  return cells
+}
+
+/** "13/07/2026 – 21:30 até 22:00 (30min)" */
+export function formatSlotRange(startIso: string, durationMin: number, fmt: BookingFormatters): string {
+  const start = new Date(startIso)
+  const end = new Date(start.getTime() + durationMin * 60_000)
+  return `${fmt.dateShort.format(start)} – ${fmt.time.format(start)} até ${fmt.time.format(end)} (${durationMin}min)`
+}

package/src/public/hooks.ts

@@ -1,13 +1,25 @@
 import { useEffect, useState } from 'react'
 import { useBooking } from './context'
-import type { PublicService, ContactInfo } from './types'
+import type { PublicService } from './types'
+import type { PublicCreateBookingInput, PublicBookingResult } from './data'
 import type { TimeSlot } from '../types'
 
-/** The configured bookable services (from context; POC-static, ERP-driven later). */
+/** 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
@@ -16,7 +28,7 @@ export interface UseAvailableSlotsResult {
 
 /**
  * Available time slots for a service on a given date. Delegates to
- * provider.getAvailableSlots — mock now, real availability later, same call.
+ * 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()
@@ -57,53 +69,29 @@ export function useAvailableSlots(params: { serviceId: string | null; date: stri
   return { slots, loading, error }
 }
 
-export interface CreatePublicBookingInput {
-  serviceId: string
-  /** ISO datetime of the chosen slot start. */
-  startsAt: string
-  contact: ContactInfo
-}
+export type CreatePublicBookingInput = PublicCreateBookingInput
 
 export interface UseCreateBookingResult {
-  submit: (input: CreatePublicBookingInput) => Promise<void>
+  submit: (input: CreatePublicBookingInput) => Promise<PublicBookingResult>
   submitting: boolean
   error: Error | null
   done: boolean
 }
 
-/** Create a booking via the provider. POC: mock append; real persistence later. */
+/** Create a booking via the provider (mock append / Supabase RPC). */
 export function useCreateBooking(): UseCreateBookingResult {
-  const { provider, professionalId, services } = useBooking()
+  const { provider } = useBooking()
   const [submitting, setSubmitting] = useState(false)
   const [error, setError] = useState<Error | null>(null)
   const [done, setDone] = useState(false)
 
-  async function submit(input: CreatePublicBookingInput): Promise<void> {
-    const service = services.find((s) => s.id === input.serviceId)
-    if (!service) throw new Error('Serviço inválido')
+  async function submit(input: CreatePublicBookingInput): Promise<PublicBookingResult> {
     setSubmitting(true)
     setError(null)
     try {
-      await provider.createBooking({
-        kind: 'appointment',
-        // POC: the customer is captured as the booking title; a real flow would
-        // upsert a client/person record and pass its id here.
-        clientId: 'public-guest',
-        professionalId,
-        startsAt: input.startsAt,
-        title: input.contact.name,
-        notes: [input.contact.phone, input.contact.email, input.contact.notes].filter(Boolean).join(' · ') || undefined,
-        services: [
-          {
-            serviceId: service.id,
-            name: service.name,
-            durationMinutes: service.durationMinutes,
-            price: service.price,
-            assigneeId: professionalId,
-          },
-        ],
-      })
+      const result = await provider.createBooking(input)
       setDone(true)
+      return result
     } catch (err) {
       const e = err instanceof Error ? err : new Error(String(err))
       setError(e)

package/src/public/index.ts

@@ -3,13 +3,66 @@
 //
 // 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 } from './context'
-export { useServices, useAvailableSlots, useCreateBooking } from './hooks'
-export type { UseAvailableSlotsResult, UseCreateBookingResult, CreatePublicBookingInput } from './hooks'
-export type { PublicService, ContactInfo, BookingWindow, PublicBookingLabels, WorkingHours } from './types'
+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,
+  BookingBrand,
+  ResolvedBookingBrand,
+  BookingHighlight,
+  BookingFormatters,
+  BookingComponents,
+  BrandHeaderProps,
+  ServiceCardProps,
+  SidebarExtrasProps,
+  SuccessPanelProps,
+  StepRailItemProps,
+  StepState,
+} from './types'

package/src/public/steps/ContactStep.tsx

@@ -0,0 +1,179 @@
+import { Check, ChevronDown, CreditCard, Loader2, ShieldCheck } from 'lucide-react'
+import { COUNTRIES, maskPhone, unmaskPhone, type CountryDef } from '@fayz-ai/core'
+import type { 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'
+  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, 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">{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"
+          >
+            {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" /> {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>
+  )
+}