@fayz-ai/plugin-agenda 0.2.0 → 0.3.0

package/src/public/steps/OverviewStep.tsx

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

package/src/public/steps/PaymentStep.tsx

@@ -0,0 +1,180 @@
+import { CalendarCheck, Check, Copy, CreditCard, Loader2, Plus, QrCode, ShieldCheck } from 'lucide-react'
+import type { PixCharge } from '@fayz-ai/core'
+import type { BookingFormatters, PublicService, ResolvedPayment } from '../types'
+
+// Static, realistic-looking Pix payload for the POC copia-e-cola fallback
+// (used only when no payment provider is injected).
+const PIX_PAYLOAD =
+  '00020126840014br.gov.bcb.pix2562qrcode.fayz.ai/pix/v2/9d8f7a6b-agendamento5204000053039865802BR5904FAYZ6009SAO PAULO62070503***6304AB12'
+
+/** Deterministic QR-looking placeholder rendered from a payload (POC visual). */
+function QrPlaceholder({ data }: { data: string }) {
+  const size = 25
+  // Seed the data-cell pattern from the payload so different charges look different.
+  let seed = 0
+  for (let i = 0; i < data.length; i++) seed = (seed * 31 + data.charCodeAt(i)) % 100000
+  const cells: { x: number; y: number }[] = []
+  const isFinder = (x: number, y: number) => {
+    const inBox = (bx: number, by: number) => x >= bx && x < bx + 7 && y >= by && y < by + 7
+    return inBox(0, 0) || inBox(size - 7, 0) || inBox(0, size - 7)
+  }
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      if (isFinder(x, y)) {
+        const corner = x < 7 && y < 7 ? { bx: 0, by: 0 } : x >= size - 7 && y < 7 ? { bx: size - 7, by: 0 } : { bx: 0, by: size - 7 }
+        const lx = x - corner.bx
+        const ly = y - corner.by
+        const outer = lx === 0 || lx === 6 || ly === 0 || ly === 6
+        const inner = lx >= 2 && lx <= 4 && ly >= 2 && ly <= 4
+        if (outer || inner) cells.push({ x, y })
+      } else if ((x * 31 + y * 17 + x * y + seed) % 3 === 0) {
+        cells.push({ x, y })
+      }
+    }
+  }
+  return (
+    <svg viewBox={`0 0 ${size} ${size}`} className="h-40 w-40" role="img" aria-label="QR Code Pix (demonstração)">
+      <rect width={size} height={size} fill="white" />
+      {cells.map((c, i) => (
+        <rect key={i} x={c.x} y={c.y} width={1} height={1} fill="currentColor" className="text-foreground" />
+      ))}
+    </svg>
+  )
+}
+
+interface PaymentStepProps {
+  service: PublicService
+  payment: ResolvedPayment
+  paymentStep: 'choose' | 'pix'
+  charge: PixCharge | null
+  busy: boolean
+  error: Error | null
+  copied: boolean
+  fmt: BookingFormatters
+  onPayWithPix: (fee: number) => void
+  onCopy: () => void
+  onSimulatePaid: () => void
+}
+
+/** Payment step: order summary + Pix method → QR/copia-e-cola while polling. */
+export function PaymentStep({
+  service, payment, paymentStep, charge, busy, error, copied, fmt, onPayWithPix, onCopy, onSimulatePaid,
+}: PaymentStepProps) {
+  const feePct = payment.reservationFeePercent
+  const fee = Math.round(service.price * feePct) / 100
+  const remaining = Math.round((service.price - fee) * 100) / 100
+
+  if (paymentStep === 'choose') {
+    return (
+      <div>
+        {/* Order summary */}
+        <div className="rounded-2xl border border-border p-4">
+          <div className="flex items-center justify-between font-semibold text-foreground">
+            <span>{service.name}</span>
+            <span className="tabular-nums">{fmt.price.format(service.price)}</span>
+          </div>
+          <div className="mt-3 space-y-2 text-sm">
+            <div className="flex items-center justify-between text-foreground">
+              <span className="flex items-center gap-2">
+                <span className="flex h-4 w-4 items-center justify-center rounded bg-primary text-primary-foreground"><Check className="h-3 w-3" /></span>
+                Taxa de reserva <span className="rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">{feePct}%</span>
+              </span>
+              <span className="tabular-nums">{fmt.price.format(fee)}</span>
+            </div>
+            <div className="flex items-center justify-between text-muted-foreground">
+              <span className="flex items-center gap-2">
+                <span className="h-4 w-4 rounded border border-border" /> Valor restante
+              </span>
+              <span className="tabular-nums">{remaining <= 0 ? 'Grátis' : fmt.price.format(remaining)}</span>
+            </div>
+            <button type="button" className="flex items-center gap-1 text-sm font-medium text-primary hover:underline">
+              <Plus className="h-3.5 w-3.5" /> Adicionar cupom
+            </button>
+          </div>
+          <div className="mt-3 flex items-center justify-between border-t border-dashed border-border pt-3 font-semibold text-foreground">
+            <span>Valor total</span>
+            <span className="tabular-nums">{fmt.price.format(service.price)}</span>
+          </div>
+        </div>
+
+        {/* Method */}
+        <div className="mt-6 flex items-center justify-between">
+          <h3 className="font-heading text-lg font-bold text-foreground">Escolha como pagar</h3>
+          <span className="flex items-center gap-1 text-xs text-muted-foreground"><ShieldCheck className="h-3.5 w-3.5 text-primary" /> Pagamento seguro</span>
+        </div>
+        <div className="mt-3 rounded-2xl border-2 border-primary bg-accent/20 p-4">
+          <p className="flex items-center gap-2 font-semibold text-foreground">
+            <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-primary-foreground"><Check className="h-3.5 w-3.5" /></span>
+            Pix
+          </p>
+          <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
+            {[
+              { icon: Check, t: 'Finalize o agendamento clicando em "Pagar com Pix".' },
+              { icon: QrCode, t: 'Mostraremos um QR Code e o Pix copia-e-cola.' },
+              { icon: CalendarCheck, t: 'Após o pagamento, seu agendamento é reservado.' },
+            ].map((s, i) => (
+              <div key={i} className="text-sm text-muted-foreground">
+                <span className="mb-2 flex h-8 w-8 items-center justify-center rounded-lg bg-accent text-primary"><s.icon className="h-4 w-4" /></span>
+                <span className="font-semibold text-foreground">{i + 1}.</span> {s.t}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {error ? <p role="alert" className="mt-3 text-sm text-destructive">Não foi possível iniciar o pagamento. Tente novamente.</p> : null}
+        <button
+          type="button"
+          disabled={busy}
+          onClick={() => onPayWithPix(fee)}
+          className="mt-6 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"
+        >
+          {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <CreditCard className="h-4 w-4" />}
+          Pagar {fmt.price.format(fee)} com Pix
+        </button>
+      </div>
+    )
+  }
+
+  // Pix QR — aguardando pagamento
+  return (
+    <div>
+      <div className="rounded-xl border border-amber-300/60 bg-amber-50 p-4 dark:border-amber-400/30 dark:bg-amber-950/30">
+        <p className="flex items-center gap-2 text-sm font-semibold text-foreground">
+          <Loader2 className="h-4 w-4 animate-spin text-primary" /> Realize o pagamento para finalizar
+        </p>
+        <p className="mt-1 text-xs text-muted-foreground">
+          Este código Pix é válido por somente 5 minutos. Não feche esta página até receber a confirmação do pagamento.
+        </p>
+      </div>
+      <h3 className="mt-6 font-heading text-lg font-bold text-foreground">Escaneie ou copie este código para pagar</h3>
+      <ol className="mt-2 space-y-1 text-sm text-muted-foreground">
+        <li>1. Acesse o app do seu banco, pagamentos ou Internet Banking.</li>
+        <li>2. Escolha pagar via Pix.</li>
+        <li>3. Escaneie o QR Code ou use o Pix copia-e-cola:</li>
+      </ol>
+      <div className="mt-4 w-fit rounded-xl border border-border bg-white p-3">
+        <QrPlaceholder data={charge?.pixQrCode ?? PIX_PAYLOAD} />
+      </div>
+      <div className="mt-4 flex max-w-md items-center gap-2">
+        <code className="flex-1 truncate rounded-lg border border-border bg-muted px-3 py-2 text-xs text-muted-foreground">{charge?.pixCopyPaste ?? PIX_PAYLOAD}</code>
+        <button
+          type="button"
+          onClick={onCopy}
+          className="inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-foreground px-3 py-2 text-xs font-medium text-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />} {copied ? 'Copiado' : 'Copiar'}
+        </button>
+      </div>
+      {/* POC shortcut — the mock provider also auto-confirms via polling after a few seconds. */}
+      <button
+        type="button"
+        onClick={onSimulatePaid}
+        className="mt-6 w-full rounded-xl border border-primary py-3 font-semibold text-primary transition-colors hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        Já paguei — confirmar (simulação)
+      </button>
+    </div>
+  )
+}
+
+export { PIX_PAYLOAD }

package/src/public/types.ts

@@ -0,0 +1,229 @@
+// ---------------------------------------------------------------------------
+// Public (customer-facing) booking types. This surface is deliberately decoupled
+// from the admin calendar: it depends only on the narrow PublicBookingDataProvider
+// seam (see ./data), so mock slots today and real availability (Supabase RPC /
+// ERP / Google Calendar) later are a provider swap with no widget change.
+//
+// Customization model: hosts personalize via three levers, cheapest first —
+//   1. `labels`  — every user-visible string (all defaulted, pt-BR)
+//   2. `brand`   — name/logo/tagline/icons/badges/highlights (text + assets)
+//   3. `components` — swap whole subcomponents (BookingComponents) when the
+//      structure itself must change. Defaults are exported for composition.
+// ---------------------------------------------------------------------------
+
+import type { ComponentType, ReactNode } from 'react'
+
+export interface PublicService {
+  id: string
+  name: string
+  durationMinutes: number
+  price: number
+  description?: string
+}
+
+export interface ContactInfo {
+  name: string
+  email?: string
+  phone?: string
+  notes?: string
+}
+
+export interface WorkingHours {
+  /** 0=Sun … 6=Sat. */
+  daysOfWeek: number[]
+  /** 'HH:MM' */
+  start: string
+  /** 'HH:MM' */
+  end: string
+}
+
+export interface BookingWindow {
+  /** Earliest lead time before a slot can be booked. */
+  minAdvanceHours: number
+  /** How many days ahead the date picker offers. */
+  maxAdvanceDays: number
+  /** Slot granularity in minutes. */
+  slotInterval: number
+}
+
+export interface PaymentConfig {
+  /** Show a Pagamento step as the final stage of the flow. */
+  enabled?: boolean
+  /** % of the service price charged up-front as a reservation fee (default 100). */
+  reservationFeePercent?: number
+  /** Payment method (POC ships 'pix'). */
+  method?: 'pix'
+}
+
+export interface ResolvedPayment {
+  reservationFeePercent: number
+  method: 'pix'
+}
+
+// ---------------------------------------------------------------------------
+// Brand
+// ---------------------------------------------------------------------------
+
+/** One icon+text bullet on the overview sidebar. */
+export interface BookingHighlight {
+  icon?: ComponentType<{ className?: string }>
+  text: string
+}
+
+/** Brand/text-level personalization — no components needed for these. */
+export interface BookingBrand {
+  /** e.g. "HempDent · Consulta Canábica". */
+  name?: string
+  /** Avatar letter; defaults to name.charAt(0). Ignored when logoUrl is set. */
+  initials?: string
+  logoUrl?: string
+  /** Subheader line under the name. `null` hides the row. */
+  tagline?: string | null
+  /** Icon on service rows. Default: lucide Video. */
+  serviceIcon?: ComponentType<{ className?: string }>
+  /** Chip after the duration ("Online", "Presencial"…). `null` hides. */
+  serviceMeta?: string | null
+  /** Badge on the first service. `null` disables. Default 'Mais procurado'. */
+  featuredBadge?: string | null
+  /** Overview sidebar bullets (replaces the default generic ones). */
+  highlights?: BookingHighlight[]
+}
+
+export interface ResolvedBookingBrand {
+  name: string
+  initials: string
+  logoUrl?: string
+  tagline: string | null
+  serviceIcon: ComponentType<{ className?: string }>
+  serviceMeta: string | null
+  featuredBadge: string | null
+  highlights: BookingHighlight[]
+}
+
+// ---------------------------------------------------------------------------
+// Formatters (shared Intl instances, see ./format)
+// ---------------------------------------------------------------------------
+
+export interface BookingFormatters {
+  price: Intl.NumberFormat
+  time: Intl.DateTimeFormat
+  weekday: Intl.DateTimeFormat
+  dayNum: Intl.DateTimeFormat
+  longDay: Intl.DateTimeFormat
+  dateShort: Intl.DateTimeFormat
+  month: Intl.DateTimeFormat
+}
+
+// ---------------------------------------------------------------------------
+// Component override seam
+// ---------------------------------------------------------------------------
+
+export type StepState = 'done' | 'active' | 'todo'
+
+export interface BrandHeaderProps {
+  brand: ResolvedBookingBrand
+}
+
+export interface ServiceCardProps {
+  service: PublicService
+  featured: boolean
+  onSelect: () => void
+  fmt: BookingFormatters
+  brand: ResolvedBookingBrand
+}
+
+export interface SidebarExtrasProps {
+  professionalName: string
+  brand: ResolvedBookingBrand
+  /** Renders the primary CTA — replacements can call it from their own button. */
+  onStartBooking: () => void
+  labels: PublicBookingLabels
+}
+
+export interface SuccessPanelProps {
+  service: PublicService | null
+  /** ISO datetime of the booked slot. */
+  slotStart: string | null
+  professionalName: string
+  labels: PublicBookingLabels
+  fmt: BookingFormatters
+}
+
+export interface StepRailItemProps {
+  n: number
+  label: string
+  state: StepState
+  children?: ReactNode
+}
+
+/**
+ * Host-overridable subcomponents. Flow-critical parts (week strip, slot grid,
+ * contact forms, payment panel) stay internal — these are the brand-visible
+ * seams. Defaults are exported so hosts can wrap instead of rewriting.
+ */
+export interface BookingComponents {
+  BrandHeader: ComponentType<BrandHeaderProps>
+  ServiceCard: ComponentType<ServiceCardProps>
+  SidebarExtras: ComponentType<SidebarExtrasProps>
+  SuccessPanel: ComponentType<SuccessPanelProps>
+  StepRailItem: ComponentType<StepRailItemProps>
+}
+
+// ---------------------------------------------------------------------------
+// Labels — every user-visible string in the flow (all defaulted, pt-BR)
+// ---------------------------------------------------------------------------
+
+export interface PublicBookingLabels {
+  title: string
+  serviceStep: string
+  dateStep: string
+  contactStep: string
+  confirmCta: string
+  successTitle: string
+  successBody: string
+  // overview
+  servicesHeading: string
+  aboutHeading: string
+  openingHoursHeading: string
+  closedLabel: string
+  bookNowCta: string
+  // datetime
+  timezoneNote: string
+  slotsHeading: string
+  noSlots: string
+  continueCta: string
+  backToServices: string
+  back: string
+  prevWeek: string
+  nextWeek: string
+  // contact
+  contactIntro: string
+  phoneLabel: string
+  phoneHint: string
+  sendCodeCta: string
+  codeTitle: string
+  codeBody: string
+  codeInvalid: string
+  codeConfirmCta: string
+  codeResendHint: string
+  phoneVerified: string
+  changePhone: string
+  nameLabel: string
+  namePlaceholder: string
+  emailLabel: string
+  emailPlaceholder: string
+  emailHint: string
+  notesLabel: string
+  notesPlaceholder: string
+  saveAndContinueCta: string
+  submitError: string
+  noChargeNote: string
+  // right rail
+  railTitle: string
+  railWaitingPayment: string
+  railService: string
+  railProfessional: string
+  railDatetime: string
+  railContact: string
+  railPayment: string
+}