import type { Metadata } from "next"; import { getSupabaseClient } from "@/lib/supabase"; import { notFound } from "next/navigation"; import Image from "next/image"; import { AlertCircle, Ban, Check, FileCode2, FileText, MessageCircle, ThumbsUp } from "lucide-react"; import { OrderStatusRefreshButton } from "@/components/OrderStatusRefreshButton"; import { notasPublicasDoPedido, type NotaPublica } from "@/lib/nota-fiscal-da-loja"; import { createAdminClient } from "@/lib/supabase-admin"; export const revalidate = 0; export const dynamic = "force-dynamic"; export const dynamicParams = true; const DISPLAY_TIMEZONE = "America/Sao_Paulo"; interface PublicQuoteProfile { id: string; store_name: string | null; catalog_name: string | null; logo_url: string | null; catalog_logo_url: string | null; quote_signature_required?: boolean | null; quote_art_registration_enabled?: boolean | null; quote_art_approval_required?: boolean | null; cnpj?: string | null; phone: string | null; company_phone: string | null; company_whatsapp?: string | null; company_email: string | null; address: string | null; slug?: string | null; status_page_bg_color?: string | null; status_page_box_bg_color?: string | null; status_page_icon_color?: string | null; status_page_text_color?: string | null; status_page_button_color?: string | null; } interface PublicQuoteClient { id: string; name: string; company_name: string | null; document?: string | null; email: string | null; phone: string | null; whatsapp: string | null; address_city?: string | null; address_state?: string | null; } interface PublicQuoteRow { id: string; number: number; created_at?: string; updated_at?: string; status?: string; title: string | null; currency?: string; subtotal?: number; discount?: number; shipping?: number; total?: number; expires_at: string | null; delivery_date?: string | null; notes: string | null; } interface PublicOrderRow { id: string; number: number; created_at: string; updated_at?: string; // Note: RPC get_public_quote might not return updated_at for order, we handle this status: string; total_amount: number; paid_amount?: number | null; financial_status?: string | null; approval_signature?: string | null; approval_signed_at?: string | null; approval_signed_name?: string | null; production_stage_id?: string | null; production_stage_label?: string | null; delivery_date?: string | null; } interface PublicQuotePayload { profile: PublicQuoteProfile; quote: PublicQuoteRow; client: PublicQuoteClient; order: PublicOrderRow | null; items: unknown[]; order_items: unknown[]; } async function fetchOrderStatus(token: string): Promise { const supabase = getSupabaseClient(); const orderStatusResult = await supabase.rpc("get_public_order_status", { p_token: token }); if (!orderStatusResult.error && orderStatusResult.data) { return orderStatusResult.data as unknown as PublicQuotePayload; } const legacyResult = await supabase.rpc("get_public_quote", { p_token: token }); if (legacyResult.error || !legacyResult.data) return null; return legacyResult.data as unknown as PublicQuotePayload; } function formatDateBr(value: string | null | undefined) { if (!value) return ""; const normalized = String(value).split("T")[0]; const parts = normalized.split("-"); if (parts.length === 3 && parts[0].length === 4) { const [y, m, d] = parts; return `${d}/${m}/${y}`; } const dt = new Date(value); if (!Number.isFinite(dt.getTime())) return ""; return dt.toLocaleDateString("pt-BR", { timeZone: DISPLAY_TIMEZONE }); } function formatDateTimeBr(value: string | null | undefined) { if (!value) return ""; const dt = new Date(value); if (!Number.isFinite(dt.getTime())) return ""; return dt.toLocaleString("pt-BR", { dateStyle: "short", timeStyle: "short", timeZone: DISPLAY_TIMEZONE }); } function formatMoney(currency: string | null | undefined, value: number) { const resolvedCurrency = currency || "BRL"; return new Intl.NumberFormat("pt-BR", { style: "currency", currency: resolvedCurrency }).format( Number.isFinite(value) ? value : 0 ); } function getOrderStatusBadge(status: string | null | undefined) { switch (status) { case "pending_production": return { label: "Aguardando produção", className: "border-amber-200 bg-amber-50 text-amber-800", panelClassName: "border-amber-200 bg-amber-50 text-amber-900", }; case "in_production": return { label: "Em produção", className: "border-sky-200 bg-sky-50 text-sky-800", panelClassName: "border-sky-200 bg-sky-50 text-sky-900", }; case "finished": return { label: "Finalizado", className: "border-violet-200 bg-violet-50 text-violet-800", panelClassName: "border-violet-200 bg-violet-50 text-violet-900", }; case "delivered": return { label: "Entregue", className: "border-emerald-200 bg-emerald-50 text-emerald-800", panelClassName: "border-emerald-200 bg-emerald-50 text-emerald-900", }; case "canceled": return { label: "Cancelado", className: "border-rose-200 bg-rose-50 text-rose-800", panelClassName: "border-rose-200 bg-rose-50 text-rose-900", }; default: return { label: "Pedido em andamento", className: "border-zinc-200 bg-zinc-50 text-zinc-700", panelClassName: "border-zinc-200 bg-zinc-50 text-zinc-900", }; } } // Calcula contraste inteligente para garantir que o texto fique legível sobre qualquer fundo function getContrastTextColor(hexColor: string) { if (!hexColor) return "#ffffff"; const hex = hexColor.replace("#", ""); const r = parseInt(hex.substring(0, 2), 16) || 0; const g = parseInt(hex.substring(2, 4), 16) || 0; const b = parseInt(hex.substring(4, 6), 16) || 0; // Formula YIQ para luminância const yiq = (r * 299 + g * 587 + b * 114) / 1000; return yiq >= 128 ? "#09090b" : "#ffffff"; } export async function generateMetadata(props: { params: Promise<{ slug: string; token: string }> }): Promise { const params = await props.params; const data = await fetchOrderStatus(params.token); const storeName = data?.profile.catalog_name || data?.profile.store_name || "Loja"; const orderNumber = data?.order?.number ? `#${data.order.number}` : ""; const title = `Acompanhar Pedido ${orderNumber} | ${storeName}`; const description = "Veja o status atualizado do seu pedido em tempo real."; return { title: { absolute: title }, description, openGraph: { title, description, }, }; } export default async function OrderStatusPage(props: { params: Promise<{ slug: string; token: string }> }) { const params = await props.params; const { token } = params; const data = await fetchOrderStatus(token); if (!data) return notFound(); const { order, profile, client, quote } = data; if (!order) return notFound(); /* Notas fiscais autorizadas do pedido, para o cliente baixar daqui mesmo. */ let notasFiscais: NotaPublica[] = []; try { notasFiscais = await notasPublicasDoPedido(createAdminClient(), order.id); } catch { notasFiscais = []; } const logoUrl = profile.logo_url || profile.catalog_logo_url; const orderStatusSteps = [ { key: "pending_production", title: "Aguardando produção", description: "Seu pedido foi confirmado e entrou na fila de produção.", }, { key: "in_production", title: "Em produção", description: "Nossa equipe está produzindo os itens do seu pedido.", }, { key: "finished", title: "Finalizado", description: "A produção foi concluída e está pronta para entrega/retirada.", }, { key: "delivered", title: "Entregue", description: "Pedido entregue com sucesso.", }, ]; const currentOrderStepIndex = orderStatusSteps.findIndex((step) => step.key === (order.status || "")); const isOrderCanceled = order.status === "canceled"; const isOrderDelivered = order.status === "delivered"; const isOrderFinished = order.status === "finished"; const totalAmount = Number(order.total_amount) || 0; const paidAmount = Number(order.paid_amount) || 0; const remainingAmount = Math.max(0, totalAmount - paidAmount); const paymentProgress = totalAmount > 0 ? Math.min(100, Math.max(0, (paidAmount / totalAmount) * 100)) : 0; const shouldShowPaymentReminder = isOrderFinished && remainingAmount > 0.009; const whatsappDigits = (profile.company_whatsapp || profile.phone || "").replace(/\D/g, ""); const paymentReminderMessage = `Olá! Sobre o pedido #${order.number}, vi que falta ${formatMoney( quote?.currency, remainingAmount )} para pagamento. Pode me orientar para quitar antes da retirada?`; const paymentReminderWhatsappUrl = whatsappDigits ? `https://wa.me/${whatsappDigits}?text=${encodeURIComponent(paymentReminderMessage)}` : null; const deliveredDate = formatDateBr(order.updated_at || order.created_at); const lastUpdatedAt = formatDateTimeBr(order.updated_at || order.created_at); const statusBadge = getOrderStatusBadge(order.status); const timelineProgress = isOrderCanceled || currentOrderStepIndex < 0 ? 0 : ((Math.min(currentOrderStepIndex, orderStatusSteps.length - 1) + 1) / orderStatusSteps.length) * 100; const customStyles = { "--status-bg": profile.status_page_bg_color || "#f5f7fb", "--status-box": profile.status_page_box_bg_color || "#ffffff", "--status-icon": profile.status_page_icon_color || "#4b2ae6", "--status-text": profile.status_page_text_color || "#09090b", "--status-button": profile.status_page_button_color || "#4b2ae6", "--status-button-text": getContrastTextColor(profile.status_page_button_color || "#4b2ae6"), "--status-text-muted": "color-mix(in srgb, var(--status-text) 60%, transparent)", "--status-border": "color-mix(in srgb, var(--status-text) 10%, transparent)", "--status-overlay": "color-mix(in srgb, var(--status-text) 4%, transparent)", } as React.CSSProperties; return (
{/* Header Compacto */}
{logoUrl ? (
Logo
) : null}

{profile.catalog_name || profile.store_name}

Pedido #{order.number} • {client.name}
{statusBadge.label}
{/* Resumo em Strip */}
Status Atual
{order.production_stage_label || statusBadge.label}
{isOrderDelivered ? "Data da entrega" : "Previsão"}
{isOrderDelivered && deliveredDate ? deliveredDate : quote?.delivery_date ? formatDateBr(quote.delivery_date) : "A definir"}
Atualização
{lastUpdatedAt || "-"}
{/* Timeline Stepper Horizontal (Desktop) / Vertical (Mobile) */}
Andamento do pedido
{/* Linha horizontal Desktop */}
{!isOrderCanceled && (
)}
{orderStatusSteps.map((step, index) => { const isDone = !isOrderCanceled && currentOrderStepIndex >= index; const isCurrent = !isOrderCanceled && currentOrderStepIndex === index; const markerClass = isCurrent ? "border-[var(--status-icon)] bg-[var(--status-icon)] text-[var(--status-box)] shadow-sm" : isDone ? "border-[var(--status-text)] bg-[var(--status-text)] text-[var(--status-box)]" : "border-[var(--status-border)] bg-[var(--status-box)] text-[var(--status-text-muted)]"; return (
{/* Linha vertical Mobile */} {index < orderStatusSteps.length - 1 && (
index ? 'bg-[var(--status-icon)]' : 'bg-[var(--status-overlay)]'}`} /> )}
{isDone ? : index + 1}
{step.title}
{isCurrent && (
{step.description}
)}
); })}
{notasFiscais.length > 0 && (
{notasFiscais.length === 1 ? "Nota fiscal" : "Notas fiscais"}
{notasFiscais.map((nota) => { const sigla = nota.modelo === "nfce" ? "NFC-e" : nota.modelo === "nfse" ? "NFS-e" : "NF-e"; const cancelada = nota.status === "cancelada"; return (
{sigla} {nota.numero ? ` nº ${nota.numero}` : ""} {cancelada ? " · cancelada" : ""} {nota.teste ? " · teste, sem valor fiscal" : ""}
{formatMoney(quote?.currency, nota.valor)} {nota.autorizadaEm ? ` · ${formatDateBr(nota.autorizadaEm)}` : ""}
{!cancelada && nota.temPdf ? ( Baixar PDF ) : null} {nota.temXml ? ( XML ) : null}
); })}
)} {/* Alertas: Pagamento / Entregue / Cancelado */}
{shouldShowPaymentReminder && (
{/* Efeitos de luz sutis para dar "vida" baseados nas cores */}
Falta {formatMoney(quote?.currency, remainingAmount)}

Seu pedido já está pronto! Regularize o valor pendente no atendimento ou fale conosco pelo WhatsApp para liberar a retirada.

Valor Total
{formatMoney(quote?.currency, totalAmount)}
Valor Pago
{formatMoney(quote?.currency, paidAmount)}
{paymentProgress.toFixed(0)}% pago
{paymentReminderWhatsappUrl && ( )}
)} {isOrderDelivered && (
Obrigado pela confiança! Pedido finalizado e entregue.
)} {isOrderCanceled && (
Este pedido foi cancelado. Fale com a loja para mais detalhes.
)} {(profile.company_whatsapp || profile.phone) && !isOrderDelivered && !isOrderCanceled && !shouldShowPaymentReminder && ( )}
); }