"use client"; import { usePermissoes } from "@/lib/permissoes-do-usuario"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { getSupabaseClient } from "@/lib/supabase"; import { MessageCircle, Save, Loader2, CheckCircle2, AlertCircle, RotateCcw, ShoppingBag, FileText, Package, ChevronDown, ChevronUp, Eye, EyeOff, Info, Copy, Check, } from "lucide-react"; import { PageHeader } from "@/components/ui/page-header"; /* ------------------------------------------------------------------ */ /* Template types */ /* ------------------------------------------------------------------ */ interface TemplateConfig { product_inquiry: string; cart_checkout_header: string; cart_checkout_footer: string; quote_share: string; order_status: string; } interface TemplateDefinition { key: keyof TemplateConfig; label: string; description: string; icon: typeof MessageCircle; shortcodes: { code: string; label: string }[]; defaultValue: string; previewBuilder: (template: string) => string; } /* ------------------------------------------------------------------ */ /* Default templates (match existing code) */ /* ------------------------------------------------------------------ */ const DEFAULTS: TemplateConfig = { product_inquiry: "Olá! Tenho interesse no produto {{nome_produto}}", cart_checkout_header: "*Novo Pedido*", cart_checkout_footer: "{{resumo_itens}}\n\n{{subtotal}}\n{{desconto}}\n*Total: {{total}}*", quote_share: "Olá! Segue o orçamento #{{numero_orcamento}}. Total: {{total}}.{{validade}} {{link}}", order_status: "Olá! Segue atualização sobre seu pedido #{{numero_pedido}}. Status atual: *{{status}}*. Acompanhe o progresso em tempo real: {{link}}", }; /* ------------------------------------------------------------------ */ /* Templates definition */ /* ------------------------------------------------------------------ */ const TEMPLATE_DEFS: TemplateDefinition[] = [ { key: "product_inquiry", label: "Dúvidas sobre Produto", description: 'Mensagem enviada quando o cliente clica em "Tirar dúvidas no WhatsApp" na página do produto no catálogo.', icon: ShoppingBag, shortcodes: [ { code: "{{nome_produto}}", label: "Nome do produto" }, ], defaultValue: DEFAULTS.product_inquiry, previewBuilder: (t) => t.replace("{{nome_produto}}", "Adesivo Vinílico Premium"), }, { key: "cart_checkout_header", label: "Carrinho — Cabeçalho", description: "Cabeçalho da mensagem quando o cliente finaliza o pedido pelo carrinho no catálogo. Os itens do carrinho são inseridos automaticamente abaixo.", icon: ShoppingBag, shortcodes: [], defaultValue: DEFAULTS.cart_checkout_header, previewBuilder: (t) => `${t}\n\n2x Adesivo Vinílico - R$ 50,00\n1x Papel Fotográfico - R$ 25,00`, }, { key: "cart_checkout_footer", label: "Carrinho — Rodapé / Resumo", description: "Rodapé da mensagem do carrinho com o resumo de valores. Os itens já estarão listados acima.", icon: ShoppingBag, shortcodes: [ { code: "{{resumo_itens}}", label: "Lista de itens (automático)" }, { code: "{{subtotal}}", label: "Subtotal formatado" }, { code: "{{desconto}}", label: "Desconto (se houver cupom)" }, { code: "{{total}}", label: "Valor total formatado" }, ], defaultValue: DEFAULTS.cart_checkout_footer, previewBuilder: (t) => t .replace("{{resumo_itens}}", "2x Adesivo Vinílico - R$ 50,00\n1x Papel Fotográfico - R$ 25,00") .replace("{{subtotal}}", "Subtotal: R$ 75,00") .replace("{{desconto}}", "Desconto (PROMO10): -R$ 7,50") .replace("{{total}}", "R$ 67,50"), }, { key: "quote_share", label: "Compartilhar Orçamento", description: "Mensagem enviada quando você compartilha um orçamento pelo WhatsApp com o cliente.", icon: FileText, shortcodes: [ { code: "{{numero_orcamento}}", label: "Número do orçamento" }, { code: "{{total}}", label: "Valor total formatado" }, { code: "{{validade}}", label: "Data de validade (se definida)" }, { code: "{{condicoes}}", label: "Condições de pagamento (se definidas)" }, { code: "{{link}}", label: "Link público do orçamento" }, ], defaultValue: DEFAULTS.quote_share, previewBuilder: (t) => t .replace("{{numero_orcamento}}", "42") .replace("{{total}}", "R$ 1.500,00") .replace("{{validade}}", " Validade: 15/03/2025.") .replace("{{condicoes}}", " Pagamento: Entrada de 50% (R$ 750,00) na aprovação e saldo na entrega. Pix ou cartão de crédito.") .replace("{{link}}", "https://loja.ktalogu.com/minha-loja/o/abc123"), }, { key: "order_status", label: "Atualização de Pedido", description: "Mensagem enviada quando você envia uma atualização de status do pedido para o cliente via WhatsApp.", icon: Package, shortcodes: [ { code: "{{numero_pedido}}", label: "Número do pedido" }, { code: "{{status}}", label: "Status atual do pedido" }, { code: "{{link}}", label: "Link de acompanhamento" }, ], defaultValue: DEFAULTS.order_status, previewBuilder: (t) => t .replace("{{numero_pedido}}", "15") .replace("{{status}}", "Em Produção") .replace("{{link}}", "https://loja.ktalogu.com/minha-loja/status/abc123"), }, ]; /* ------------------------------------------------------------------ */ /* Shortcode Badge component */ /* ------------------------------------------------------------------ */ function ShortcodeBadge({ code, label, onInsert, }: { code: string; label: string; onInsert: (code: string) => void; }) { const [copied, setCopied] = useState(false); return ( ); } /* ------------------------------------------------------------------ */ /* Template card component */ /* ------------------------------------------------------------------ */ function TemplateCard({ def, value, onChange, }: { def: TemplateDefinition; value: string; onChange: (value: string) => void; }) { const [expanded, setExpanded] = useState(false); const [showPreview, setShowPreview] = useState(false); const textareaRef = useRef(null); const Icon = def.icon; const isModified = value !== def.defaultValue; const preview = def.previewBuilder(value); const insertShortcode = useCallback( (code: string) => { const ta = textareaRef.current; if (!ta) { onChange(value + code); return; } const start = ta.selectionStart; const end = ta.selectionEnd; const newValue = value.slice(0, start) + code + value.slice(end); onChange(newValue); requestAnimationFrame(() => { ta.focus(); const pos = start + code.length; ta.setSelectionRange(pos, pos); }); }, [onChange, value] ); const autoResize = useCallback(() => { const ta = textareaRef.current; if (!ta) return; ta.style.height = "auto"; ta.style.height = `${Math.max(80, ta.scrollHeight)}px`; }, []); useEffect(() => { if (expanded) autoResize(); }, [expanded, value, autoResize]); return (
{/* Header */} {/* Body */} {expanded && (
{/* Shortcodes */} {def.shortcodes.length > 0 && (
Variáveis disponíveis — Clique para inserir
{def.shortcodes.map((sc) => ( ))}
)} {/* Textarea */}