@fayz-ai/plugin-agenda 0.9.0 → 0.10.0

package/src/public/BookingWidget.tsx

@@ -1,324 +0,0 @@
-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,
-    phoneVerification, 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>).
-  // With phoneVerification 'none' the typed number is trusted: skip the code
-  // modal and go straight to details (identity emitted just the same).
-  function sendCode() {
-    if (unmaskPhone(contact.phone).length < 8) return
-    if (phoneVerification === 'none') {
-      emitIdentity()
-      setContactStep('details')
-      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) }}
-              phoneVerification={phoneVerification}
-              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

@@ -1,27 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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,
-}