@fayz-ai/plugin-agenda 0.2.1 → 0.3.0

package/src/public/steps/DateTimeStep.tsx

@@ -0,0 +1,138 @@
+import { ChevronLeft, ChevronRight, Clock } from 'lucide-react'
+import type { TimeSlot } from '../../types'
+import type { DayCell } from '../format'
+import type { BookingFormatters, PublicBookingLabels, WorkingHours } from '../types'
+
+interface DateTimeStepProps {
+  labels: PublicBookingLabels
+  fmt: BookingFormatters
+  week: DayCell[]
+  weekOffset: number
+  maxWeekOffset: number
+  onWeekOffset: (updater: (w: number) => number) => void
+  businessHours: WorkingHours
+  date: string | null
+  onSelectDate: (iso: string) => void
+  slots: TimeSlot[]
+  slotsLoading: boolean
+  slotStart: string | null
+  onSelectSlot: (startIso: string) => void
+  onContinue: () => void
+}
+
+/** Week strip + available-slot grid. */
+export function DateTimeStep({
+  labels, fmt, week, weekOffset, maxWeekOffset, onWeekOffset, businessHours,
+  date, onSelectDate, slots, slotsLoading, slotStart, onSelectSlot, onContinue,
+}: DateTimeStepProps) {
+  const openDays = new Set(businessHours.daysOfWeek)
+  return (
+    <div>
+      <div className="flex flex-wrap items-baseline justify-between gap-2">
+        <h3 className="font-heading text-xl font-bold text-foreground">{labels.dateStep}</h3>
+        <span className="flex items-center gap-1 text-xs text-muted-foreground">
+          <Clock className="h-3.5 w-3.5" /> {labels.timezoneNote}
+        </span>
+      </div>
+
+      <div className="mt-5 flex items-center justify-between">
+        <span className="text-sm font-semibold capitalize text-foreground">{fmt.month.format(week[0].date)}</span>
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            disabled={weekOffset === 0}
+            onClick={() => onWeekOffset((w) => Math.max(0, w - 1))}
+            className="flex h-9 w-9 items-center justify-center rounded-lg border border-border text-foreground transition-colors hover:bg-accent disabled:opacity-40 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label={labels.prevWeek}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+          <button
+            type="button"
+            disabled={weekOffset >= maxWeekOffset}
+            onClick={() => onWeekOffset((w) => Math.min(maxWeekOffset, w + 1))}
+            className="flex h-9 w-9 items-center justify-center rounded-lg border border-border text-foreground transition-colors hover:bg-accent disabled:opacity-40 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label={labels.nextWeek}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-3 grid grid-cols-7 gap-1.5">
+        {week.map((d) => {
+          const selected = date === d.iso
+          const closed = !openDays.has(d.date.getDay())
+          return (
+            <button
+              key={d.iso}
+              type="button"
+              disabled={closed}
+              onClick={() => onSelectDate(d.iso)}
+              className={[
+                'flex flex-col items-center gap-0.5 rounded-xl border py-2.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                closed
+                  ? 'cursor-not-allowed border-transparent text-muted-foreground/40'
+                  : selected
+                    ? 'border-primary bg-primary text-primary-foreground'
+                    : 'border-border text-foreground hover:border-primary/60 hover:bg-accent/40',
+              ].join(' ')}
+            >
+              <span className="text-[11px] font-medium capitalize opacity-80">
+                {fmt.weekday.format(d.date).replace('.', '')}
+              </span>
+              <span className="text-sm font-bold tabular-nums">{fmt.dayNum.format(d.date)}</span>
+            </button>
+          )
+        })}
+      </div>
+
+      {date ? (
+        <div className="mt-6">
+          <p className="mb-2 text-sm font-semibold text-foreground">{labels.slotsHeading}</p>
+          {slotsLoading ? (
+            <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <div key={i} className="h-10 animate-pulse rounded-lg bg-muted" />
+              ))}
+            </div>
+          ) : slots.length === 0 ? (
+            <div className="rounded-xl border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
+              {labels.noSlots}
+            </div>
+          ) : (
+            <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
+              {slots.map((s) => {
+                const selected = slotStart === s.start
+                return (
+                  <button
+                    key={s.start}
+                    type="button"
+                    onClick={() => onSelectSlot(s.start)}
+                    className={[
+                      'rounded-lg border py-2.5 text-sm font-semibold tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                      selected
+                        ? 'border-primary bg-primary text-primary-foreground'
+                        : 'border-border text-foreground hover:border-primary/60 hover:bg-accent/40',
+                    ].join(' ')}
+                  >
+                    {fmt.time.format(new Date(s.start))}
+                  </button>
+                )
+              })}
+            </div>
+          )}
+        </div>
+      ) : null}
+
+      <button
+        type="button"
+        disabled={!slotStart}
+        onClick={onContinue}
+        className="mt-6 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.continueCta}
+      </button>
+    </div>
+  )
+}

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

@@ -1,10 +1,18 @@
 // ---------------------------------------------------------------------------
 // Public (customer-facing) booking types. This surface is deliberately decoupled
-// from the admin calendar: it depends only on the AgendaDataProvider interface,
-// so mock slots today and real availability (Supabase RPC / ERP / Google
-// Calendar) later are a provider swap with no widget change.
+// 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
@@ -52,6 +60,119 @@ export interface ResolvedPayment {
   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
@@ -60,4 +181,49 @@ export interface PublicBookingLabels {
   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
 }