{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pix-automatico", "title": "Pix Automático", "description": "The authorization step for recurring Pix: clear terms, QR Code or bank-app confirmation with a bank picker, a live waiting state that names the bank, and an active view with the next charges.", "dependencies": [ "class-variance-authority", "lucide-react" ], "registryDependencies": [ "badge", "button", "input", "popover", "toggle", "https://uaiblocks.dev/r/uai-number-tick.json", "https://uaiblocks.dev/r/uai-theme.json", "https://uaiblocks.dev/r/uai-utils.json" ], "files": [ { "path": "src/registry/uai/components/pix-automatico.tsx", "content": "\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport {\n Check,\n ChevronLeft,\n Copy,\n Info,\n LoaderCircle,\n QrCode,\n Repeat,\n Search,\n SearchX,\n Smartphone,\n X,\n} from \"lucide-react\";\nimport {\n type ComponentProps,\n createContext,\n type KeyboardEvent,\n type ReactNode,\n useContext,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { toggleVariants } from \"@/components/ui/toggle\";\nimport { NumberTick } from \"@/lib/uai-number-tick\";\nimport { cn } from \"@/lib/uai-utils\";\n\nexport const PIX_AUTOMATICO_VARIANTS = [\"card\", \"plain\", \"compact\"] as const;\nexport const PIX_AUTOMATICO_STATUSES = [\n \"review\",\n \"awaiting\",\n \"active\",\n \"declined\",\n \"expired\",\n \"cancelled\",\n] as const;\nexport const PIX_AUTOMATICO_METHODS = [\"qr\", \"app\"] as const;\nexport const PIX_AUTOMATICO_PERIODS = [\"week\", \"month\", \"quarter\", \"semester\", \"year\"] as const;\n\nexport type PixAutomaticoVariant = (typeof PIX_AUTOMATICO_VARIANTS)[number];\nexport type PixAutomaticoStatus = (typeof PIX_AUTOMATICO_STATUSES)[number];\nexport type PixAutomaticoMethod = (typeof PIX_AUTOMATICO_METHODS)[number];\nexport type PixAutomaticoPeriod = (typeof PIX_AUTOMATICO_PERIODS)[number];\nexport type PixAutomaticoCharge = { date: Date | string; amount: number };\n\nexport type PixAutomaticoBank = {\n /** Stable. Drives the monogram tone and `recentBankId`. */\n id: string;\n /** The full, accessible name: \"Banco do Brasil\". */\n name: string;\n /** Used in copy such as \"Enviar para o app {shortName}\". Falls back to `name`. */\n shortName?: string;\n /** From assets you're licensed to use. Rendered as a decorative image; the monogram on error. */\n logoUrl?: string;\n /** The 8-digit participant code. Passed through untouched, never shown. */\n ispb?: string;\n /** Overrides the derived initials (max 2 characters). */\n monogram?: string;\n /** Extra search terms, such as [\"bb\"] or [\"cef\", \"caixa economica federal\"]. */\n keywords?: readonly string[];\n disabled?: boolean;\n /** Shown on a disabled row. Defaults to \"Indisponível\". */\n disabledReason?: string;\n};\n\nexport type PixAutomaticoBanksStatus = \"ready\" | \"loading\" | \"error\";\n\nexport type PixAutomaticoAuthorizePayload =\n | { method: \"qr\" }\n | { method: \"app\"; bank: PixAutomaticoBank };\n\n/**\n * Example data, not a registry. Names identify the institutions (nominative use); no logos or\n * trademarks are bundled, so pass `logoUrl` from assets you're licensed to use. Pix Automático\n * participation changes, so real integrations should pass their payment provider's participants\n * through `banks`.\n */\nexport const PIX_AUTOMATICO_DEFAULT_BANKS: readonly PixAutomaticoBank[] = [\n { id: \"nubank\", name: \"Nubank\", monogram: \"NU\", keywords: [\"nu\"] },\n { id: \"itau\", name: \"Itaú\", monogram: \"IT\", keywords: [\"itau\", \"itau unibanco\"] },\n { id: \"bb\", name: \"Banco do Brasil\", monogram: \"BB\", keywords: [\"bb\"] },\n { id: \"caixa\", name: \"Caixa\", monogram: \"CX\", keywords: [\"cef\", \"caixa economica federal\"] },\n { id: \"bradesco\", name: \"Bradesco\", monogram: \"BR\" },\n { id: \"santander\", name: \"Santander\", monogram: \"SA\" },\n { id: \"inter\", name: \"Inter\", monogram: \"IN\", keywords: [\"banco inter\"] },\n { id: \"c6\", name: \"C6 Bank\", monogram: \"C6\" },\n { id: \"mercadopago\", name: \"Mercado Pago\", monogram: \"MP\" },\n { id: \"picpay\", name: \"PicPay\", monogram: \"PP\" },\n { id: \"btg\", name: \"BTG Pactual\", monogram: \"BT\" },\n { id: \"sicoob\", name: \"Sicoob\", monogram: \"SC\" },\n { id: \"sicredi\", name: \"Sicredi\", monogram: \"SI\" },\n { id: \"pagbank\", name: \"PagBank\", monogram: \"PB\", keywords: [\"pagseguro\"] },\n { id: \"banrisul\", name: \"Banrisul\", monogram: \"BA\" },\n];\n\n/** Lowercase, without accents: \"Itaú\" → \"itau\". */\nfunction fold(value: string) {\n return value\n .normalize(\"NFD\")\n .replace(/\\p{Diacritic}/gu, \"\")\n .toLowerCase();\n}\n\nconst MONOGRAM_STOPWORDS = new Set([\"banco\", \"de\", \"do\", \"da\", \"dos\", \"das\", \"e\"]);\n\n/** The bank's initials: `monogram`, or two letters derived from its name. */\nexport function pixAutomaticoBankMonogram(bank: PixAutomaticoBank) {\n if (bank.monogram) return bank.monogram.slice(0, 2).toUpperCase();\n const words = fold(bank.shortName ?? bank.name)\n .split(/\\s+/)\n .map((word) => word.replace(/[^a-z0-9]/g, \"\"))\n .filter((word) => word && !MONOGRAM_STOPWORDS.has(word));\n const initials =\n words.length >= 2 ? `${words[0]?.[0]}${words[1]?.[0]}` : (words[0] ?? \"\").slice(0, 2);\n return initials.toUpperCase();\n}\n\nexport const PIX_AUTOMATICO_BANK_TONES = [\"neutral\", \"primary\", \"success\", \"warning\"] as const;\nexport type PixAutomaticoBankTone = (typeof PIX_AUTOMATICO_BANK_TONES)[number];\n\n/** A stable tone from the bank id (FNV-1a), never a brand color. */\nexport function pixAutomaticoBankTone(id: string): PixAutomaticoBankTone {\n let hash = 0x811c9dc5;\n for (let index = 0; index < id.length; index++) {\n hash ^= id.charCodeAt(index);\n hash = Math.imul(hash, 0x01000193) >>> 0;\n }\n return PIX_AUTOMATICO_BANK_TONES[hash % 4] as PixAutomaticoBankTone;\n}\n\nfunction bankShortName(bank: PixAutomaticoBank) {\n return bank.shortName ?? bank.name;\n}\n\n/** 0 when the text starts with the needle, 1 when a word does, 2 for any substring. */\nfunction matchIn(text: string, needle: string): { tier: number; at: number } | null {\n let substring = -1;\n for (let at = text.indexOf(needle); at !== -1; at = text.indexOf(needle, at + 1)) {\n if (at === 0) return { tier: 0, at };\n if (text[at - 1] === \" \") return { tier: 1, at };\n if (substring === -1) substring = at;\n }\n return substring === -1 ? null : { tier: 2, at: substring };\n}\n\ntype BankMatch = { bank: PixAutomaticoBank; tier: number; highlight: number };\n\n/**\n * Name-start, then word-start, then substring matches, each tier kept in `banks` order. Matches\n * that only hit `keywords` come last, so \"ban\" lists Banco do Brasil before Inter (\"banco inter\").\n */\nfunction searchBanks(banks: readonly PixAutomaticoBank[], query: string): BankMatch[] {\n const needle = fold(query.trim());\n const matches: BankMatch[] = [];\n for (const bank of banks) {\n const inName = matchIn(fold(bank.name), needle);\n const inShort = bank.shortName ? matchIn(fold(bank.shortName), needle) : null;\n const inKeywords = (bank.keywords ?? []).some((keyword) => fold(keyword).includes(needle));\n const tier = Math.min(inName?.tier ?? 9, inShort?.tier ?? 9, inKeywords ? 3 : 9);\n if (tier < 9) matches.push({ bank, tier, highlight: inName?.at ?? -1 });\n }\n return matches.sort((first, second) => first.tier - second.tier);\n}\n\nexport function formatBrl(value: number) {\n return new Intl.NumberFormat(\"pt-BR\", { style: \"currency\", currency: \"BRL\" }).format(value);\n}\n\nconst PERIOD_LABELS: Record = {\n week: \"por semana\",\n month: \"por mês\",\n quarter: \"por trimestre\",\n semester: \"por semestre\",\n year: \"por ano\",\n};\n\n/** \"por mês\", \"por semana\"… */\nexport function pixAutomaticoPeriodLabel(period: PixAutomaticoPeriod) {\n return PERIOD_LABELS[period];\n}\n\nconst MONTHS_SHORT = [\n \"jan\",\n \"fev\",\n \"mar\",\n \"abr\",\n \"mai\",\n \"jun\",\n \"jul\",\n \"ago\",\n \"set\",\n \"out\",\n \"nov\",\n \"dez\",\n];\nconst MONTHS_LONG = [\n \"janeiro\",\n \"fevereiro\",\n \"março\",\n \"abril\",\n \"maio\",\n \"junho\",\n \"julho\",\n \"agosto\",\n \"setembro\",\n \"outubro\",\n \"novembro\",\n \"dezembro\",\n];\n\n/** Reads a charge date as a calendar day. \"2026-11-05\" stays the 5th in every time zone. */\nfunction calendarDay(value: Date | string) {\n if (typeof value === \"string\") {\n const match = /^(\\d{4})-(\\d{2})-(\\d{2})/.exec(value);\n if (match) return { day: Number(match[3]), month: Number(match[2]) - 1 };\n }\n const date = new Date(value);\n return { day: date.getDate(), month: date.getMonth() };\n}\n\nfunction toTime(value: Date | string | number) {\n return new Date(value).getTime();\n}\n\nfunction formatClock(seconds: number) {\n const minutes = Math.floor(seconds / 60);\n return `${String(minutes).padStart(2, \"0\")}:${String(seconds % 60).padStart(2, \"0\")}`;\n}\n\nconst STATUS_LABELS: Record = {\n review: \"Pix Automático\",\n awaiting: \"Aguardando\",\n active: \"Ativo\",\n declined: \"Recusado\",\n expired: \"Expirado\",\n cancelled: \"Cancelado\",\n};\n\nconst STATUS_SPOKEN: Partial> = {\n awaiting: \"Aguardando confirmação no banco\",\n active: \"Pix Automático autorizado\",\n declined: \"Autorização recusada\",\n};\n\ntype PixAutomaticoStep = \"terms\" | \"bank\";\n\ntype PixAutomaticoContextValue = {\n variant: PixAutomaticoVariant;\n status: PixAutomaticoStatus;\n method: PixAutomaticoMethod;\n setMethod: (method: PixAutomaticoMethod) => void;\n /** Internal: which review step shows. Only meaningful while status is \"review\". */\n step: PixAutomaticoStep;\n /** Opens the bank step. Focus returns to `opener` (or the checked method) on Back. */\n openBankPicker: (opener?: HTMLElement | null) => void;\n closeBankPicker: () => void;\n banks: readonly PixAutomaticoBank[];\n banksStatus: PixAutomaticoBanksStatus;\n onBanksRetry: (() => void) | undefined;\n recentBank: PixAutomaticoBank | null;\n bank: PixAutomaticoBank | null;\n selectBank: (bank: PixAutomaticoBank) => void;\n changeBank: (() => void) | undefined;\n pending: boolean;\n announce: (message: string) => void;\n waitingTitleId: string;\n secondsLeft: number | null;\n code: string | undefined;\n copied: boolean;\n copyFailed: boolean;\n copy: () => Promise;\n titleId: string;\n authorize: () => void;\n sendToBank: () => void;\n onRetry: (() => void) | undefined;\n onOtherMethod: (() => void) | undefined;\n};\n\nconst PixAutomaticoContext = createContext(null);\n\nfunction usePixAutomatico(name: string) {\n const context = useContext(PixAutomaticoContext);\n if (!context) throw new Error(`${name} must be used within PixAutomatico`);\n return context;\n}\n\nconst rootVariants = cva(\n \"@container/pa flex w-full min-w-0 flex-col text-[13px]/[18px] text-card-foreground [transition:border-color_240ms_ease-out] motion-reduce:transition-none\",\n {\n variants: {\n variant: {\n card: \"max-w-[380px] gap-4 rounded-[14px] border border-border bg-card p-5\",\n plain: \"gap-4\",\n compact: \"max-w-[320px] gap-3 rounded-[12px] border border-border bg-card p-3.5\",\n },\n },\n },\n);\n\nexport type PixAutomaticoProps = Omit, \"children\"> & {\n variant?: PixAutomaticoVariant;\n /** Authorization state owned by the application, from the PSP's webhook or polling. */\n status?: PixAutomaticoStatus;\n method?: PixAutomaticoMethod;\n defaultMethod?: PixAutomaticoMethod;\n onMethodChange?: (method: PixAutomaticoMethod) => void;\n /** The QR Code's copy-and-paste payload, for Copiar código. */\n code?: string;\n /** When the authorization request expires. The countdown ticks while awaiting. */\n expiresAt?: Date | string | number;\n /** Fixes the starting clock so server and client render the same countdown. */\n now?: Date | string | number;\n /** Receives the chosen bank for the app method. Send the request, then set status=\"awaiting\". */\n onAuthorize?: (payload: PixAutomaticoAuthorizePayload) => void;\n /** The bank list, in display order. Defaults to the example list in PIX_AUTOMATICO_DEFAULT_BANKS. */\n banks?: readonly PixAutomaticoBank[];\n banksStatus?: PixAutomaticoBanksStatus;\n /** Shows Tentar de novo when the list fails to load. */\n onBanksRetry?: () => void;\n /** Pinned under \"Usado da última vez\" and selected by default. The component never stores it. */\n recentBankId?: string;\n bankId?: string | null;\n defaultBankId?: string | null;\n onBankSelect?: (bank: PixAutomaticoBank) => void;\n /** Fires when the bank picker opens or closes, for UI around the card that follows it. */\n onBankPickerOpenChange?: (open: boolean) => void;\n /** Shows Trocar banco while awaiting: cancel the open request, then set status=\"review\". */\n onChangeBank?: () => void;\n /** The request is in flight: the bank step locks and its button reads Enviando…. */\n pending?: boolean;\n onRetry?: () => void;\n /** Outra forma de pagamento, after a decline. */\n onOtherMethod?: () => void;\n onExpire?: () => void;\n onCodeCopy?: (code: string) => void;\n children?: ReactNode;\n};\n\n/**\n * The authorization step for recurring Pix. It shows terms and status only: the payer sets any\n * maximum amount in the bank app, never here.\n */\nexport function PixAutomatico({\n variant = \"card\",\n status = \"review\",\n method: methodProp,\n defaultMethod = \"qr\",\n onMethodChange,\n code,\n expiresAt,\n now,\n onAuthorize,\n banks = PIX_AUTOMATICO_DEFAULT_BANKS,\n banksStatus = \"ready\",\n onBanksRetry,\n recentBankId,\n bankId: bankIdProp,\n defaultBankId = recentBankId ?? null,\n onBankSelect,\n onBankPickerOpenChange,\n onChangeBank,\n pending = false,\n onRetry,\n onOtherMethod,\n onExpire,\n onCodeCopy,\n children,\n className,\n ...props\n}: PixAutomaticoProps) {\n const [internalMethod, setInternalMethod] = useState(defaultMethod);\n const method = methodProp ?? internalMethod;\n const [internalBankId, setInternalBankId] = useState(defaultBankId);\n const bankId = bankIdProp === undefined ? internalBankId : bankIdProp;\n const bank = banks.find((item) => item.id === bankId) ?? null;\n const recentBank = banks.find((item) => item.id === recentBankId) ?? null;\n const [step, setStep] = useState(\"terms\");\n const opener = useRef(null);\n const returnFocus = useRef(false);\n const previousStatus = useRef(status);\n const waitingTitleId = useId();\n const deadline = expiresAt === undefined ? null : toTime(expiresAt);\n // A fixed `now` becomes an offset from the real clock, so the countdown keeps ticking.\n const [offset] = useState(() => (now === undefined ? 0 : toTime(now) - Date.now()));\n const [clock, setClock] = useState(() => (now === undefined ? Date.now() : toTime(now)));\n const [copied, setCopied] = useState(false);\n const [copyFailed, setCopyFailed] = useState(false);\n const [announcement, setAnnouncement] = useState(\"\");\n const expiredNotified = useRef(false);\n const minuteNotified = useRef(false);\n const onExpireRef = useRef(onExpire);\n onExpireRef.current = onExpire;\n const titleId = useId();\n\n const awaiting = status === \"awaiting\";\n const secondsLeft = deadline === null ? null : Math.max(0, Math.ceil((deadline - clock) / 1000));\n\n useEffect(() => {\n if (!awaiting || deadline === null) return;\n setClock(Date.now() + offset);\n const timer = window.setInterval(() => setClock(Date.now() + offset), 1000);\n return () => window.clearInterval(timer);\n }, [awaiting, deadline, offset]);\n\n useEffect(() => {\n if (!awaiting || secondsLeft === null) return;\n if (secondsLeft === 0 && !expiredNotified.current) {\n expiredNotified.current = true;\n onExpireRef.current?.();\n }\n if (secondsLeft > 0 && secondsLeft <= 60 && !minuteNotified.current) {\n minuteNotified.current = true;\n setAnnouncement(\"Falta 1 minuto para o pedido expirar\");\n }\n }, [awaiting, secondsLeft]);\n\n // A new request (back to review) re-arms the one-shot notices.\n useEffect(() => {\n if (status !== \"review\") return;\n expiredNotified.current = false;\n minuteNotified.current = false;\n setAnnouncement(\"\");\n }, [status]);\n\n // Leaving review closes the bank step, and a sent request moves focus to the waiting title so it\n // isn't lost to when the review goes inert. Trocar banco reopens the step on its own.\n useEffect(() => {\n const previous = previousStatus.current;\n previousStatus.current = status;\n if (status !== \"review\") setStep((current) => (previous === \"review\" ? \"terms\" : current));\n if (previous === \"review\" && status === \"awaiting\") {\n document.getElementById(waitingTitleId)?.focus();\n }\n }, [status, waitingTitleId]);\n\n // The picker shows only on the review step, so leaving review closes it for the consumer too.\n const bankPickerOpen = status === \"review\" && step === \"bank\";\n const bankPickerWasOpen = useRef(bankPickerOpen);\n const onBankPickerOpenChangeRef = useRef(onBankPickerOpenChange);\n onBankPickerOpenChangeRef.current = onBankPickerOpenChange;\n useEffect(() => {\n if (bankPickerWasOpen.current === bankPickerOpen) return;\n bankPickerWasOpen.current = bankPickerOpen;\n onBankPickerOpenChangeRef.current?.(bankPickerOpen);\n }, [bankPickerOpen]);\n\n // Back returns focus to whatever opened the step.\n useEffect(() => {\n if (step !== \"terms\" || !returnFocus.current) return;\n returnFocus.current = false;\n const target = opener.current?.isConnected\n ? opener.current\n : document\n .getElementById(titleId)\n ?.closest(\"section\")\n ?.querySelector('[role=\"radio\"][aria-checked=\"true\"]');\n target?.focus();\n }, [step, titleId]);\n\n useEffect(() => {\n if (!copied) return;\n const timer = window.setTimeout(() => setCopied(false), 2000);\n return () => window.clearTimeout(timer);\n }, [copied]);\n\n const setMethod = (next: PixAutomaticoMethod) => {\n if (methodProp === undefined) setInternalMethod(next);\n onMethodChange?.(next);\n };\n\n const openBankPicker = (from?: HTMLElement | null) => {\n opener.current = from ?? null;\n setStep(\"bank\");\n };\n\n const closeBankPicker = () => {\n returnFocus.current = true;\n setStep(\"terms\");\n };\n\n const selectBank = (next: PixAutomaticoBank) => {\n if (next.disabled || pending) return;\n if (bankIdProp === undefined) setInternalBankId(next.id);\n onBankSelect?.(next);\n };\n\n const sendToBank = () => {\n if (bank && !bank.disabled && !pending) onAuthorize?.({ method: \"app\", bank });\n };\n\n const copy = async () => {\n if (!code) return;\n try {\n await navigator.clipboard.writeText(code);\n setCopyFailed(false);\n setCopied(true);\n onCodeCopy?.(code);\n } catch {\n setCopied(false);\n setCopyFailed(true);\n }\n };\n\n return (\n {\n opener.current = null;\n setStep(\"bank\");\n onChangeBank();\n }\n : undefined,\n pending,\n announce: setAnnouncement,\n waitingTitleId,\n authorize: () => {\n if (method === \"qr\") onAuthorize?.({ method: \"qr\" });\n else if (bank) sendToBank();\n else openBankPicker(document.activeElement as HTMLElement | null);\n },\n sendToBank,\n onRetry,\n onOtherMethod,\n }}\n >\n \n {children}\n \n {announcement}\n \n \n \n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Header\n * -----------------------------------------------------------------------------------------------*/\n\nexport function PixAutomaticoHeader({ className, ...props }: ComponentProps<\"header\">) {\n return (\n \n );\n}\n\n/** The recipient's initials in a 32px circle (28px in compact). */\nexport function PixAutomaticoAvatar({ className, ...props }: ComponentProps<\"span\">) {\n const context = usePixAutomatico(\"PixAutomaticoAvatar\");\n return (\n \n );\n}\n\n/** Product and recipient lines. The product names the section. */\nexport function PixAutomaticoTitle({\n product,\n recipient,\n className,\n ...props\n}: Omit, \"children\"> & { product: ReactNode; recipient?: ReactNode }) {\n const context = usePixAutomatico(\"PixAutomaticoTitle\");\n return (\n \n \n {product}\n \n {recipient ? (\n

\n {recipient}\n

\n ) : null}\n \n );\n}\n\n/** A polite live region: the short label shows, the full sentence is spoken. */\nexport function PixAutomaticoStatusBadge({\n className,\n children,\n ...props\n}: ComponentProps<\"span\">) {\n const context = usePixAutomatico(\"PixAutomaticoStatusBadge\");\n const { status } = context;\n const spoken =\n status === \"awaiting\" && context.method === \"app\" && context.bank\n ? `Pedido enviado para o app ${bankShortName(context.bank)}. Aguardando confirmação.`\n : STATUS_SPOKEN[status];\n return (\n \n {status === \"review\" ? (\n \n ) : status === \"active\" ? (\n \n ) : (\n \n )}\n {children ?? (\n <>\n {STATUS_LABELS[status]}\n {spoken ? {spoken} : null}\n \n )}\n \n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Review: amount, terms, notice, method, authorize\n * -----------------------------------------------------------------------------------------------*/\n\nconst STEP_FLOOR: Record = { card: 340, plain: 340, compact: 300 };\n\n/** The terms leave 8px left in 160ms; they come back in 240ms after a 60ms beat. */\nconst termsLeave =\n \"-translate-x-2 opacity-0 [transition:opacity_160ms_cubic-bezier(0.23,1,0.32,1),translate_160ms_cubic-bezier(0.23,1,0.32,1)]\";\nconst termsEnter =\n \"[transition:opacity_240ms_cubic-bezier(0.23,1,0.32,1)_60ms,translate_240ms_cubic-bezier(0.23,1,0.32,1)_60ms]\";\n\n/**\n * Holds the review content. It collapses with grid rows once the request is sent. The terms and\n * the bank step share one grid cell, so opening the picker keeps the card's height.\n */\nexport function PixAutomaticoReview({ className, children, ...props }: ComponentProps<\"div\">) {\n const context = usePixAutomatico(\"PixAutomaticoReview\");\n const open = context.status === \"review\";\n const picking = open && context.step === \"bank\";\n const terms = useRef(null);\n const [termsHeight, setTermsHeight] = useState(0);\n\n // Lock the bank step to the terms' height, re-measured while it's open (container or font zoom).\n useLayoutEffect(() => {\n const node = terms.current;\n if (!picking || !node) return;\n const measure = () => setTermsHeight(node.getBoundingClientRect().height);\n measure();\n if (typeof ResizeObserver === \"undefined\") return;\n const observer = new ResizeObserver(measure);\n observer.observe(node);\n return () => observer.disconnect();\n }, [picking]);\n\n return (\n \n
\n \n {children}\n
\n {picking ? (\n \n ) : null}\n \n \n );\n}\n\nexport type PixAutomaticoAmountProps = Omit, \"children\"> & {\n value: number | \"variable\";\n period?: PixAutomaticoPeriod;\n};\n\n/** \"R$ 89,90 por mês\", or \"Valor variável\". */\nexport function PixAutomaticoAmount({\n value,\n period,\n className,\n ...props\n}: PixAutomaticoAmountProps) {\n const context = usePixAutomatico(\"PixAutomaticoAmount\");\n const compact = context.variant === \"compact\";\n return (\n \n \n {value === \"variable\" ? \"Valor variável\" : formatBrl(value)}\n \n {period && value !== \"variable\" ? (\n {PERIOD_LABELS[period]}\n ) : null}\n

\n );\n}\n\nexport function PixAutomaticoTerms({ className, ...props }: ComponentProps<\"dl\">) {\n return (\n \n );\n}\n\nexport type PixAutomaticoTermProps = Omit, \"children\"> & {\n label: ReactNode;\n children: ReactNode;\n /** A second line under the value, such as the CNPJ. */\n detail?: ReactNode;\n};\n\n/** One row: Primeira cobrança, Periodicidade, Vigência, Recebedor, Valor máximo mínimo. */\nexport function PixAutomaticoTerm({\n label,\n detail,\n children,\n className,\n ...props\n}: PixAutomaticoTermProps) {\n return (\n
\n
{label}
\n
\n {children}\n {detail ? (\n {detail}\n ) : null}\n
\n
\n );\n}\n\nconst NOTICE =\n \"Você confirma no app do seu banco e pode definir um valor máximo por cobrança. Dá para cancelar quando quiser, direto no banco.\";\n\n/** The max-amount and cancel explanation. In compact it sits behind an info button. */\nexport function PixAutomaticoNotice({ className, children, ...props }: ComponentProps<\"div\">) {\n const context = usePixAutomatico(\"PixAutomaticoNotice\");\n const text = children ?? NOTICE;\n if (context.variant === \"compact\") {\n return (\n \n \n Como funciona o valor máximo\n \n \n \n \n \n \n \n {text}\n \n \n );\n }\n return (\n \n \n {text}\n \n );\n}\n\n/** The variable-amount hint: the bank only pays up to the payer's maximum. */\nexport function PixAutomaticoMaxHint({\n minimum,\n className,\n children,\n ...props\n}: ComponentProps<\"p\"> & { minimum?: number }) {\n usePixAutomatico(\"PixAutomaticoMaxHint\");\n return (\n \n {children ??\n (minimum === undefined\n ? \"O banco só paga cobranças até o valor máximo que você definir no app.\"\n : `O banco só paga cobranças até o valor máximo que você definir no app, e o recebedor pede que ele seja de pelo menos ${formatBrl(minimum)}.`)}\n

\n );\n}\n\nconst METHOD_LABELS: Record = {\n qr: { label: \"QR Code\", icon: QrCode },\n app: { label: \"No app do banco\", icon: Smartphone },\n};\n\n/**\n * \"Como você quer autorizar?\": QR Code or No app do banco, as a two-option radio group. A click,\n * tap, or Space on No app do banco opens the bank step; arrow keys only change the selection\n * (WCAG 3.2.2). Once a bank is chosen it shows under the segment with Trocar.\n */\nexport function PixAutomaticoMethod({\n label = \"Como você quer autorizar?\",\n className,\n onKeyDown,\n ...props\n}: Omit, \"children\"> & { label?: string }) {\n const context = usePixAutomatico(\"PixAutomaticoMethod\");\n const refs = useRef>({});\n const labelId = useId();\n const handleKeyDown = (event: KeyboardEvent) => {\n onKeyDown?.(event);\n if (event.defaultPrevented) return;\n const keys = [\"ArrowRight\", \"ArrowLeft\", \"ArrowDown\", \"ArrowUp\", \"Home\", \"End\"];\n if (!keys.includes(event.key)) return;\n event.preventDefault();\n const next: PixAutomaticoMethod =\n event.key === \"Home\"\n ? \"qr\"\n : event.key === \"End\"\n ? \"app\"\n : context.method === \"qr\"\n ? \"app\"\n : \"qr\";\n context.setMethod(next);\n refs.current[next]?.focus();\n };\n return (\n \n \n {label}\n \n \n \n {PIX_AUTOMATICO_METHODS.map((value) => {\n const { label: text, icon: Icon } = METHOD_LABELS[value];\n const checked = context.method === value;\n return (\n // biome-ignore lint/a11y/useSemanticElements: a segment button in a radio group; ToggleGroupItem renders the same role=\"radio\" button.\n {\n refs.current[value] = node;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={checked}\n data-state={checked ? \"on\" : \"off\"}\n tabIndex={checked ? 0 : -1}\n disabled={context.status !== \"review\"}\n onClick={(event) => {\n context.setMethod(value);\n if (value === \"app\") context.openBankPicker(event.currentTarget);\n }}\n className={cn(\n toggleVariants(),\n \"h-7 min-w-0 cursor-pointer gap-1.5 rounded-full border-0 bg-transparent px-3 text-[12px] font-medium text-subtle-foreground [transition:color_120ms_ease-out,scale_140ms_cubic-bezier(0.23,1,0.32,1)] hover:bg-transparent hover:text-foreground focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring focus-visible:outline-solid active:scale-[0.97] aria-checked:text-foreground data-[state=on]:bg-transparent motion-reduce:transition-none motion-reduce:active:scale-100 [&_svg]:size-3.5\",\n )}\n >\n \n {text}\n \n );\n })}\n \n {/* Added on the way back, not behind the open picker, so opening never changes the height. */}\n {context.method === \"app\" && context.bank && context.step === \"terms\" ? (\n \n ) : null}\n \n );\n}\n\n/** The chosen bank on the terms step, with Trocar to reopen the picker. */\nfunction BankSummary({ bank }: { bank: PixAutomaticoBank }) {\n const context = usePixAutomatico(\"PixAutomaticoMethod\");\n const compact = context.variant === \"compact\";\n return (\n \n \n \n {bank.name}\n \n context.openBankPicker(event.currentTarget)}\n className={cn(pillClass, \"h-7 bg-secondary px-3 text-[12px] hover:bg-accent\")}\n >\n Trocar\n \n \n );\n}\n\nconst pillClass =\n \"rounded-full border-0 font-medium [transition:background-color_120ms_ease-out,filter_120ms_ease-out,scale_140ms_cubic-bezier(0.23,1,0.32,1)] focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:outline-solid active:scale-[0.97] motion-reduce:transition-none motion-reduce:active:scale-100\";\n\n/**\n * The one primary action: a full-width 36px pill. With No app do banco and no bank yet it reads\n * Escolher banco and opens the bank step; with a bank it sends the request right away.\n */\nexport function PixAutomaticoAuthorize({\n className,\n children,\n onClick,\n ...props\n}: ComponentProps<\"button\">) {\n const context = usePixAutomatico(\"PixAutomaticoAuthorize\");\n return (\n {\n onClick?.(event);\n if (!event.defaultPrevented) context.authorize();\n }}\n {...props}\n >\n {children ??\n (context.method === \"app\" && !context.bank ? \"Escolher banco\" : \"Autorizar Pix Automático\")}\n \n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Bank picker: the bank step that swaps in for the terms\n * -----------------------------------------------------------------------------------------------*/\n\nconst TONE_CLASSES: Record = {\n neutral: \"bg-muted text-muted-foreground shadow-[inset_0_0_0_1px_var(--border)]\",\n primary: \"bg-[color-mix(in_oklab,var(--primary)_12%,var(--card))] text-primary-ink\",\n success: \"bg-[color-mix(in_oklab,var(--success)_12%,var(--card))] text-success-ink\",\n warning: \"bg-[color-mix(in_oklab,var(--warning)_12%,var(--card))] text-warning-ink\",\n};\n\nexport type PixAutomaticoBankMarkProps = Omit, \"children\"> & {\n bank: PixAutomaticoBank;\n /** \"badge\" is the 24px tile on the waiting phone. Defaults to the variant's row size. */\n size?: \"row\" | \"badge\";\n};\n\n/** The bank's tile: the consumer's logo, or its initials on a stable tone. Always decorative. */\nexport function PixAutomaticoBankMark({\n bank,\n size = \"row\",\n className,\n ...props\n}: PixAutomaticoBankMarkProps) {\n const context = usePixAutomatico(\"PixAutomaticoBankMark\");\n const [logoFailed, setLogoFailed] = useState(false);\n const small = size === \"badge\" || context.variant === \"compact\";\n const logo = bank.logoUrl && !logoFailed;\n return (\n \n {logo ? (\n // biome-ignore lint/performance/noImgElement: the logo comes from the consumer's assets\n setLogoFailed(true)}\n className=\"size-full object-contain\"\n />\n ) : (\n pixAutomaticoBankMonogram(bank)\n )}\n \n );\n}\n\nconst optionRow =\n \"flex min-w-0 shrink-0 cursor-pointer items-center [transition:background-color_120ms_ease-out] select-none motion-reduce:transition-none\";\n\n/** \"Banrisul\" with the matched part in a . */\nfunction Highlight({ text, at, length }: { text: string; at: number; length: number }) {\n const name = text.normalize(\"NFC\");\n if (at < 0 || length === 0) return <>{name};\n return (\n <>\n {name.slice(0, at)}\n \n {name.slice(at, at + length)}\n \n {name.slice(at + length)}\n \n );\n}\n\nfunction quoteQuery(query: string) {\n const trimmed = query.trim();\n return `“${trimmed.length > 32 ? `${trimmed.slice(0, 32)}…` : trimmed}”`;\n}\n\n/**\n * The bank step: a search combobox controlling a single-select listbox, the recent bank pinned on\n * top, and a footer that sends to the selected bank. Focus stays in the field while arrows move.\n */\nfunction PixAutomaticoBankPicker({ className, style }: { className?: string; style?: object }) {\n const context = usePixAutomatico(\"PixAutomaticoBankPicker\");\n const { banks, bank: selected, recentBank, banksStatus, pending } = context;\n const compact = context.variant === \"compact\";\n const baseId = useId();\n const headingId = `${baseId}-heading`;\n const listId = `${baseId}-list`;\n const optionId = (bank: PixAutomaticoBank) => `${baseId}-${bank.id}`;\n const [query, setQuery] = useState(\"\");\n const [activeId, setActiveId] = useState(selected?.id ?? null);\n const [keyboard, setKeyboard] = useState(false);\n const [overflowing, setOverflowing] = useState(false);\n const heading = useRef(null);\n const search = useRef(null);\n const list = useRef(null);\n const send = useRef(null);\n const typeahead = useRef({ buffer: \"\", at: 0 });\n const searching = query.trim() !== \"\";\n const ready = banksStatus === \"ready\";\n\n const results = searching ? searchBanks(banks, query) : [];\n const groups: { label: string; rows: { bank: PixAutomaticoBank; highlight: number }[] }[] =\n searching\n ? [{ label: \"Resultados\", rows: results }]\n : [\n ...(recentBank\n ? [{ label: \"Usado da última vez\", rows: [{ bank: recentBank, highlight: -1 }] }]\n : []),\n {\n label: \"Bancos\",\n rows: banks\n .filter((bank) => bank.id !== recentBank?.id)\n .map((bank) => ({ bank, highlight: -1 })),\n },\n ];\n const visible = groups.flatMap((group) => group.rows.map((row) => row.bank));\n const active = visible.find((bank) => bank.id === activeId) ?? null;\n\n // Fine pointers land in the search field; coarse pointers on the heading, so the keyboard\n // doesn't cover the list. The same happens when a retried list becomes ready, so focus isn't\n // lost with the error state's buttons.\n const landed = useRef(null);\n useEffect(() => {\n const previous = landed.current;\n landed.current = banksStatus;\n if (previous !== null && (previous === \"ready\" || banksStatus !== \"ready\")) return;\n const coarse = window.matchMedia?.(\"(pointer: coarse)\").matches;\n if (!coarse && search.current && !search.current.disabled) search.current.focus();\n else heading.current?.focus();\n }, [banksStatus]);\n\n // The result count, 400ms after the last keystroke and only while searching.\n const { announce } = context;\n useEffect(() => {\n if (!searching) {\n announce(\"\");\n return;\n }\n const count = results.length;\n const timer = window.setTimeout(\n () =>\n announce(\n count === 0\n ? \"Nenhum banco encontrado\"\n : count === 1\n ? \"1 banco encontrado\"\n : `${count} bancos encontrados`,\n ),\n 400,\n );\n return () => window.clearTimeout(timer);\n }, [searching, results.length, announce]);\n\n useEffect(() => {\n if (banksStatus === \"loading\") announce(\"Carregando bancos\");\n if (banksStatus === \"error\") announce(\"Não deu para carregar a lista de bancos\");\n }, [banksStatus, announce]);\n\n // The fade mask only shows when the list overflows: re-checked after each render (filtering)\n // and when the step resizes.\n const measureOverflow = () => {\n const node = list.current;\n if (node) setOverflowing(node.scrollHeight > node.clientHeight + 1);\n };\n useLayoutEffect(measureOverflow);\n useEffect(() => {\n const node = list.current;\n if (!node || typeof ResizeObserver === \"undefined\") return;\n const observer = new ResizeObserver(() => {\n setOverflowing(node.scrollHeight > node.clientHeight + 1);\n });\n observer.observe(node);\n return () => observer.disconnect();\n }, []);\n\n useEffect(() => {\n if (!activeId) return;\n document.getElementById(`${baseId}-${activeId}`)?.scrollIntoView?.({ block: \"nearest\" });\n }, [activeId, baseId]);\n\n const activate = (bank: PixAutomaticoBank | undefined) => {\n if (!bank) return;\n setKeyboard(true);\n setActiveId(bank.id);\n // Selection follows focus; disabled rows are reachable so their reason is read.\n context.selectBank(bank);\n };\n\n const move = (delta: 1 | -1) => {\n const index = active ? visible.indexOf(active) : -1;\n if (index === -1) {\n const enabled = visible.filter((bank) => !bank.disabled);\n activate(delta === 1 ? enabled[0] : enabled[enabled.length - 1]);\n return;\n }\n activate(visible[Math.min(visible.length - 1, Math.max(0, index + delta))]);\n };\n\n const commit = () => {\n if (active) context.selectBank(active);\n send.current?.focus();\n };\n\n const clear = () => {\n setQuery(\"\");\n search.current?.focus();\n };\n\n const useQr = () => {\n context.setMethod(\"qr\");\n context.closeBankPicker();\n };\n\n const onSearchKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n move(event.key === \"ArrowDown\" ? 1 : -1);\n } else if (event.key === \"Enter\") {\n event.preventDefault();\n if (active) commit();\n } else if (event.key === \"Escape\") {\n event.preventDefault();\n if (query) setQuery(\"\");\n else context.closeBankPicker();\n }\n };\n\n const onListKeyDown = (event: KeyboardEvent) => {\n const enabled = visible.filter((bank) => !bank.disabled);\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n move(event.key === \"ArrowDown\" ? 1 : -1);\n } else if (event.key === \"Home\" || event.key === \"End\") {\n event.preventDefault();\n activate(event.key === \"Home\" ? enabled[0] : enabled[enabled.length - 1]);\n } else if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n commit();\n } else if (event.key === \"Escape\") {\n event.preventDefault();\n context.closeBankPicker();\n } else if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {\n // Type-ahead: a 500ms buffer; repeating one letter cycles through its matches.\n const now = Date.now();\n const state = typeahead.current;\n state.buffer = now - state.at > 500 ? event.key : state.buffer + event.key;\n state.at = now;\n const needle = fold(state.buffer);\n const cycling = needle.length > 1 && new Set(needle).size === 1;\n const prefix = cycling ? (needle[0] ?? \"\") : needle;\n const current = active ? enabled.indexOf(active) : -1;\n const start = current === -1 ? 0 : current + (needle.length === 1 || cycling ? 1 : 0);\n const ordered = [...enabled.slice(start), ...enabled.slice(0, start)];\n activate(ordered.find((bank) => fold(bank.name).startsWith(prefix)));\n }\n };\n\n const sendLabel = pending\n ? \"Enviando…\"\n : selected\n ? `Enviar para o app ${bankShortName(selected)}`\n : \"Escolha um banco\";\n const canSend = Boolean(selected) && !pending && ready;\n let position = 0;\n\n return (\n // biome-ignore lint/a11y/useSemanticElements: the step is a labelled group inside the card, not a fieldset of form inputs.\n setKeyboard(false)}\n >\n
\n \n \n \n
\n \n Escolha seu banco\n \n {!compact ? (\n

\n O pedido vai para o app que você escolher.\n

\n ) : null}\n
\n
\n\n {banksStatus === \"error\" ? (\n \n ) : (\n \n \n \n setQuery(event.target.value)}\n onKeyDown={onSearchKeyDown}\n className=\"peer h-auto min-w-0 flex-1 rounded-none border-0 bg-transparent p-0 text-[13px] text-foreground shadow-none outline-none placeholder:text-subtle-foreground focus-visible:border-0 focus-visible:ring-0 disabled:opacity-100 md:text-[13px] dark:bg-transparent [&::-webkit-search-cancel-button]:hidden\"\n />\n {query ? (\n \n \n \n ) : null}\n \n )}\n\n 0 ? 0 : -1}\n onKeyDown={onListKeyDown}\n onFocus={() => {\n if (!active && visible.length > 0) setActiveId(selected?.id ?? visible[0]?.id ?? null);\n }}\n className={cn(\n \"grid min-h-0 min-w-0 content-start overflow-y-auto overscroll-contain outline-none\",\n overflowing && \"[mask-image:linear-gradient(black_calc(100%-28px),transparent)]\",\n (banksStatus !== \"ready\" || (searching && results.length === 0)) && \"content-center\",\n )}\n >\n {banksStatus === \"loading\" ? (\n
\n {Array.from({ length: compact ? 3 : 4 }, (_, index) => (\n \n \n \n
\n ))}\n \n ) : banksStatus === \"error\" ? (\n
\n

\n Não deu para carregar a lista de bancos.\n

\n

\n Tente de novo ou use o QR Code.\n

\n
\n svg]:px-3\",\n )}\n >\n \n Usar QR Code\n \n {context.onBanksRetry ? (\n \n Tentar de novo\n \n ) : null}\n
\n
\n ) : searching && results.length === 0 ? (\n
\n \n \n \n

\n Nenhum banco encontrado para {quoteQuery(query)}\n

\n

\n Confira o nome ou use o QR Code, que funciona com qualquer banco.\n

\n
\n \n Limpar busca\n \n svg]:px-3\",\n )}\n >\n \n Usar QR Code\n \n
\n
\n ) : (\n groups.map((group) => {\n const groupId = `${baseId}-group-${group.label.length}`;\n return (\n // biome-ignore lint/a11y/useSemanticElements: an ARIA group of options inside a listbox; a fieldset can't own options.\n \n \n {group.label}\n \n {group.rows.map(({ bank, highlight }) => {\n position += 1;\n const isSelected = bank.id === selected?.id;\n const isActive = keyboard && bank.id === active?.id;\n const reasonId = `${optionId(bank)}-reason`;\n return (\n // biome-ignore lint/a11y/useKeyWithClickEvents: keys go to the search field or the listbox, which own aria-activedescendant.\n {\n setKeyboard(false);\n setActiveId(bank.id);\n context.selectBank(bank);\n }}\n className={cn(\n optionRow,\n compact\n ? \"h-10 gap-[9px] rounded-lg px-2 pointer-coarse:h-11\"\n : \"h-11 gap-2.5 rounded-[10px] px-2.5\",\n \"data-active:outline-2 data-active:-outline-offset-2 data-active:outline-primary data-active:outline-solid\",\n bank.disabled\n ? \"cursor-default\"\n : isSelected\n ? \"bg-[color-mix(in_oklab,var(--primary)_6%,var(--card))]\"\n : \"hover:bg-muted\",\n )}\n >\n \n \n \n \n {bank.disabled ? (\n // Read through aria-describedby, so the option's name stays the bank name.\n \n {bank.disabledReason ?? \"Indisponível\"}\n \n ) : (\n \n {isSelected ? : null}\n \n )}\n \n );\n })}\n \n );\n })\n )}\n \n\n
\n
\n Não achou seu banco?\n \n Usar QR Code\n \n
\n {\n if (canSend) context.sendToBank();\n }}\n className={cn(\n pillClass,\n \"h-9 w-full gap-2 bg-primary text-[13px] text-primary-foreground hover:bg-primary\",\n canSend ? \"hover:brightness-[1.08]\" : \"cursor-default\",\n !canSend && !pending && \"opacity-45\",\n )}\n >\n {pending ? (\n \n ) : null}\n {sendLabel}\n \n
\n \n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Awaiting\n * -----------------------------------------------------------------------------------------------*/\n\nconst enterPanel =\n \"grid min-w-0 animate-in gap-4 delay-120 duration-240 ease-out-quint fill-mode-backwards fade-in-0 slide-in-from-bottom-1 motion-reduce:animate-none\";\n\nconst QR_STEPS = [\n \"Abra o app do seu banco e escolha ler QR Code.\",\n \"Confira os dados e defina um valor máximo, se quiser.\",\n \"Confirme. Avisamos aqui na hora.\",\n];\n\nexport type PixAutomaticoQrCodeProps = Omit, \"children\"> & {\n /** The QR image from your PSP. Use `children` instead for an inline SVG. */\n src?: string;\n alt?: string;\n children?: ReactNode;\n steps?: readonly ReactNode[];\n};\n\n/** Awaiting with QR Code: the white tile, three steps, the countdown, and Copiar código. */\nexport function PixAutomaticoQrCode({\n src,\n alt = \"QR Code do Pix Automático\",\n steps = QR_STEPS,\n children,\n className,\n ...props\n}: PixAutomaticoQrCodeProps) {\n const context = usePixAutomatico(\"PixAutomaticoQrCode\");\n if (context.status !== \"awaiting\" || context.method !== \"qr\") return null;\n const compact = context.variant === \"compact\";\n const urgent = context.secondsLeft !== null && context.secondsLeft <= 60;\n return (\n \n \n \n {/* biome-ignore lint/performance/noImgElement: the QR comes from the payment provider */}\n {children ?? (src ? {alt} : null)}\n \n {!compact ? (\n
    \n {steps.map((step, index) => (\n \n {step}\n \n ))}\n
\n ) : null}\n \n
\n {context.secondsLeft !== null ? (\n \n Expira em{\" \"}\n \n \n \n

\n ) : (\n \n )}\n {context.code ? (\n void context.copy()}\n className={cn(\n pillClass,\n \"h-7 gap-1.5 px-3 text-[12px] has-[>svg]:px-3\",\n context.copied\n ? \"bg-success/14 text-success-ink hover:bg-success/14\"\n : \"bg-secondary hover:bg-accent\",\n )}\n >\n {context.copied ? (\n \n ) : (\n \n )}\n \n \n Copiar código\n \n \n Copiado\n \n \n \n ) : null}\n
\n {context.copyFailed ? (\n

\n Não deu para copiar. Leia o QR Code no app do banco.\n

\n ) : null}\n \n {context.copied ? \"Código copiado\" : \"\"}\n \n \n );\n}\n\n/**\n * Awaiting in the bank app: a pulsing phone tile badged with the bank, a shimmering title that\n * names it, the QR fallback, and Trocar banco when the consumer passes onChangeBank.\n */\nexport function PixAutomaticoAppPending({\n className,\n ...props\n}: Omit, \"children\">) {\n const context = usePixAutomatico(\"PixAutomaticoAppPending\");\n if (context.status !== \"awaiting\" || context.method !== \"app\") return null;\n const compact = context.variant === \"compact\";\n const { bank } = context;\n const app = bank ? bankShortName(bank) : null;\n return (\n \n
\n \n \n \n {bank ? (\n \n ) : null}\n \n
\n \n \n {app ? `Aguardando confirmação no app ${app}` : \"Aguardando confirmação no banco\"}\n \n \n

\n {app\n ? `Abra o app ${app} e confirme o Pix Automático. O pedido pode levar alguns minutos para aparecer.`\n : \"Enviamos o pedido para o app do seu banco. Pode levar alguns minutos para aparecer.\"}\n

\n
\n
\n
\n Não apareceu?\n
\n {context.changeBank ? (\n \n Trocar banco\n \n ) : null}\n context.setMethod(\"qr\")}\n className={cn(\n pillClass,\n \"h-7 gap-1.5 bg-secondary px-3 text-[12px] hover:bg-accent has-[>svg]:px-3\",\n )}\n >\n \n Usar QR Code\n \n
\n
\n \n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Active\n * -----------------------------------------------------------------------------------------------*/\n\n/** The success tile, \"Pix Automático autorizado\", and the consumer's summary line. */\nexport function PixAutomaticoActive({ className, children, ...props }: ComponentProps<\"div\">) {\n const context = usePixAutomatico(\"PixAutomaticoActive\");\n if (context.status !== \"active\") return null;\n return (\n \n \n \n \n
\n

Pix Automático autorizado

\n {children ? (\n

{children}

\n ) : null}\n
\n \n );\n}\n\nconst CHIP_DELAYS = [\n \"delay-0\",\n \"delay-[40ms]\",\n \"delay-[80ms]\",\n \"delay-[120ms]\",\n \"delay-[160ms]\",\n \"delay-[200ms]\",\n];\n\nexport type PixAutomaticoScheduleProps = Omit, \"children\"> & {\n charges: readonly PixAutomaticoCharge[];\n /** The change-or-cancel line under the timeline. Pass `null` to hide it. */\n hint?: ReactNode;\n};\n\n/** The next charges as a horizontal timeline; the first is marked Próxima. */\nexport function PixAutomaticoSchedule({\n charges,\n hint = \"Para mudar o valor máximo ou cancelar, use o app do seu banco.\",\n className,\n ...props\n}: PixAutomaticoScheduleProps) {\n const context = usePixAutomatico(\"PixAutomaticoSchedule\");\n const labelId = useId();\n if (context.status !== \"active\") return null;\n const shown = charges.slice(0, 6);\n return (\n \n \n Próximas cobranças\n \n \n {shown.map((charge, index) => {\n const { day, month } = calendarDay(charge.date);\n const next = index === 0;\n const amount = formatBrl(charge.amount);\n return (\n \n \n {`${day} de ${MONTHS_LONG[month]}, ${amount}${next ? \", próxima\" : \"\"}`}\n \n \n {next ? (\n \n ) : null}\n \n \n {String(day).padStart(2, \"0\")} {MONTHS_SHORT[month]}\n \n \n {amount}\n \n {next ? (\n \n Próxima\n \n ) : null}\n \n );\n })}\n \n {hint ?

{hint}

: null}\n \n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Outcomes\n * -----------------------------------------------------------------------------------------------*/\n\n/** Declined, expired, or cancelled: one sentence and the way forward. */\nexport function PixAutomaticoOutcome({ className, children, ...props }: ComponentProps<\"div\">) {\n const context = usePixAutomatico(\"PixAutomaticoOutcome\");\n const { status } = context;\n if (status !== \"declined\" && status !== \"expired\" && status !== \"cancelled\") return null;\n const compact = context.variant === \"compact\";\n const size = compact ? \"h-7 px-3 text-[12px]\" : \"h-8 px-3.5 text-[12.5px]\";\n const message =\n status === \"declined\"\n ? \"A autorização foi recusada no app do banco. Nenhuma cobrança foi feita.\"\n : status === \"expired\"\n ? \"O pedido expirou antes da confirmação.\"\n : \"Você cancelou o Pix Automático no seu banco. Nenhuma nova cobrança será feita.\";\n return (\n \n

{children ?? message}

\n {status !== \"cancelled\" && (context.onRetry || context.onOtherMethod) ? (\n
\n {status === \"declined\" && context.onOtherMethod ? (\n \n Outra forma de pagamento\n \n ) : null}\n {context.onRetry ? (\n \n {status === \"declined\" ? \"Tentar de novo\" : \"Gerar novo pedido\"}\n \n ) : null}\n
\n ) : null}\n \n );\n}\n", "type": "registry:ui", "target": "@ui/uai/pix-automatico.tsx" } ], "categories": [ "brazil", "commerce", "checkout" ], "type": "registry:ui" }