"use client"; import { AlertCircle, ArrowRight, Ban, Calendar, Check, CreditCard, Heart, Mail, MapPin, MessageCircle, Package, Printer, ReceiptText, ShoppingBag, Star, ThumbsUp, User } from "lucide-react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import PagamentosPendentes from "@/components/client-portal/PagamentosPendentes"; import ClientPortalProfileForm from "@/components/ClientPortalProfileForm"; import ClientPortalFavoriteButton from "@/components/ClientPortalFavoriteButton"; import ClientAddressBook from "@/components/client-portal/ClientAddressBook"; import { getAccessibleAccent, getReadableTextColor } from "@/lib/color-contrast"; import { ClientPortalClient, ClientPortalOrder, ClientPortalPaymentReceipt, PremiumCard, formatDate, formatDateTime, formatMoney, getAddressSummary, getIncompleteProfileFields, getProfileCompletion, getStatusMeta, hexToRgba, } from "@/components/client-portal/shared"; type SharedProps = { slug: string; primaryColor: string; client: ClientPortalClient; customerName: string; orders: ClientPortalOrder[]; completion: number; totalSpent: number; latestOrder: ClientPortalOrder | null; onOpenSection: (section: "orders" | "account" | "addresses") => void; onAvatarChange?: (file: File) => void; }; export function OverviewSection({ slug, primaryColor, client, customerName, orders, completion, totalSpent, latestOrder, onOpenSection, }: SharedProps) { const totalOrders = orders.length; const totalValue = totalSpent; const deliveryRate = totalOrders ? Math.round((orders.filter((item) => item.status === "delivered").length / totalOrders) * 100) : 0; const activeOrders = orders.filter((item) => item.status !== "delivered" && item.status !== "canceled").length; const profileSummary = completion >= 100 ? "Cadastro completo" : "Perfil em atualização"; const addressSummary = getAddressSummary(client) || "Cadastre seu endereço para agilizar a entrega."; const latestStatus = latestOrder ? getStatusMeta(latestOrder.status, primaryColor) : null; const latestOrderDate = latestOrder ? formatDateTime(latestOrder.created_at) : "Você ainda não realizou pedidos."; const recentOrders = orders.slice(0, 4); return (
{profileSummary}

{customerName}

Acompanhe seus pedidos, revise seus dados e mantenha tudo organizado no portal do cliente.

Comprar
Último pedido
{latestOrder ? `#${latestOrder.number}` : "--"}
{latestOrderDate}
{latestOrder && latestStatus ? ( <>
{latestStatus.label}
Valor
{formatMoney(latestOrder.total_amount)}
) : (
Seu histórico aparecerá aqui assim que o primeiro pedido for criado.
)}

Pedidos recentes

{recentOrders.map((order, index) => { const status = getStatusMeta(order.status, primaryColor); return ( ); })} {orders.length === 0 ?
Sem pedidos.
: null}
Resumo da conta
Cadastro {completion}% completo
E-mail {client.email || "Não informado"}
Entrega
{addressSummary}
Visão geral
); } function MetricCard({ label, value }: { label: string; value: string }) { return (
{label}
{value}
); } function OverviewActionRow({ label, value, accentColor, }: { label: string; value: string; accentColor?: string; }) { return (
{label} {value}
); } function SupportActionTile({ title, subtitle, icon: Icon, onClick, href, primaryColor, className = "", }: { title: string; subtitle: string; icon: typeof Package; onClick?: () => void; href?: string; primaryColor?: string; className?: string; }) { const content = ( <>
{title}
{subtitle}
); if (href) { return ( {content} ); } return ( ); } function ContactInfoRow({ label, value, href, last = false, }: { label: string; value: string; href?: string; last?: boolean; }) { const valueContent = href ? ( {value} ) : ( {value} ); return (
{label} {valueContent}
); } function formatPhoneDisplay(value?: string | null) { const digits = String(value || "").replace(/\D/g, ""); if (!digits) return ""; if (digits.length === 11) return digits.replace(/(\d{2})(\d{5})(\d{4})/, "($1) $2-$3"); if (digits.length === 10) return digits.replace(/(\d{2})(\d{4})(\d{4})/, "($1) $2-$3"); return String(value || "").trim(); } function getPaymentMethodLabel(method?: string | null) { switch (String(method || "").trim()) { case "pix": return "Pix"; case "credit_card": return "Cartão de crédito"; case "debit_card": return "Cartão de débito"; case "ticket": return "Boleto"; case "wallet": return "Saldo em conta"; case "cash": return "Dinheiro"; case "transfer": return "Transferência bancária"; default: return "A definir"; } } function getPaymentStatusMeta(status?: string | null) { const normalized = String(status || "").trim(); if (normalized === "approved") { return { label: "Pagamento confirmado com sucesso", description: "Seu pagamento foi recebido e o pedido segue normalmente.", backgroundColor: "#ecfdf3", color: "#027a48", borderColor: "#a7f3d0", }; } if (normalized === "pending") { return { label: "Pagamento aguardando confirmação", description: "Existe uma cobrança iniciada, mas ela ainda não foi liquidada.", backgroundColor: "#fff7ed", color: "#c2410c", borderColor: "#fed7aa", }; } if (normalized === "unpaid") { return { label: "Pagamento ainda não identificado", description: "Este pedido ainda não possui baixa financeira registrada.", backgroundColor: "#f8fafc", color: "#334155", borderColor: "#cbd5e1", }; } if (normalized === "partially_paid") { return { label: "Pagamento parcial registrado", description: "Já recebemos uma parte do valor e ainda existe saldo pendente.", backgroundColor: "#eff6ff", color: "#1d4ed8", borderColor: "#bfdbfe", }; } if (normalized === "rejected") { return { label: "Pagamento não aprovado", description: "Você pode tentar novamente com outra forma de pagamento.", backgroundColor: "#fef2f2", color: "#b91c1c", borderColor: "#fecaca", }; } if (normalized === "cancelled") { return { label: "Pagamento cancelado", description: "Essa tentativa foi encerrada e não gerou cobrança ativa.", backgroundColor: "#f4f4f5", color: "#52525b", borderColor: "#d4d4d8", }; } if (normalized === "refunded") { return { label: "Pagamento estornado", description: "O valor dessa transação foi devolvido.", backgroundColor: "#eff6ff", color: "#1d4ed8", borderColor: "#bfdbfe", }; } return { label: "Pagamento registrado", description: "Os dados do pagamento foram vinculados a este pedido.", backgroundColor: "#f8fafc", color: "#334155", borderColor: "#cbd5e1", }; } function formatRelativeLabel(value?: string | null) { if (!value) return "agora há pouco"; const date = new Date(value); if (Number.isNaN(date.getTime())) return "agora há pouco"; const diffMs = date.getTime() - Date.now(); const diffMinutes = Math.round(diffMs / 60000); const formatter = new Intl.RelativeTimeFormat("pt-BR", { numeric: "auto" }); if (Math.abs(diffMinutes) < 60) return formatter.format(diffMinutes, "minute"); const diffHours = Math.round(diffMinutes / 60); if (Math.abs(diffHours) < 24) return formatter.format(diffHours, "hour"); const diffDays = Math.round(diffHours / 24); return formatter.format(diffDays, "day"); } function getOrderHeroCopy(status?: string | null) { switch (String(status || "").trim()) { case "in_production": return { eyebrow: "Em produção", title: "Seu pedido está ganhando forma.", description: "Nossa equipe está produzindo o seu material com atenção aos detalhes.", }; case "finished": return { eyebrow: "Acabamento concluído", title: "Seu pedido está quase pronto.", description: "Finalizamos a produção e estamos preparando a próxima etapa.", }; case "delivered": return { eyebrow: "Pedido entregue", title: "Seu pedido já chegou até você.", description: "A entrega foi concluída e o histórico continua disponível aqui no portal.", }; case "canceled": return { eyebrow: "Pedido cancelado", title: "Este pedido foi encerrado.", description: "Se precisar, nossa equipe pode orientar os próximos passos.", }; default: return { eyebrow: "Pedido confirmado", title: "Seu pedido entrou em produção.", description: "Recebemos sua compra e já iniciamos a preparação do material.", }; } } export function OrdersSection({ slug, orders, filteredOrders, paginatedOrders, primaryColor, }: { slug?: string; orders: ClientPortalOrder[]; filteredOrders?: ClientPortalOrder[]; paginatedOrders?: ClientPortalOrder[]; primaryColor: string; }) { const router = useRouter(); const sourceOrders = paginatedOrders || filteredOrders || orders; const totalValue = sourceOrders.reduce((sum, order) => (order.status === "canceled" ? sum : sum + Number(order.total_amount || 0)), 0); const activeOrders = sourceOrders.filter((order) => order.status !== "delivered" && order.status !== "canceled").length; const deliveredOrders = sourceOrders.filter((order) => order.status === "delivered").length; const openOrderDetails = (detailsUrl: string) => { try { if (slug) { const key = `ks_portal_return_to:${slug}`; window.sessionStorage.setItem(key, `${window.location.pathname}${window.location.search}`); } } catch { } router.push(detailsUrl); }; if (sourceOrders.length === 0) { return (
{slug ? : null}
Histórico de compras

Meus pedidos

Acompanhe cada compra feita na loja e abra os detalhes completos de produção, pagamento e entrega.

Situação
Sem pedidos
Seu histórico aparecerá aqui assim que a primeira compra for criada.
{slug ? ( Fazer primeiro pedido ) : null}
); } return (
{slug ? : null}
{sourceOrders.length} pedido{sourceOrders.length !== 1 ? "s" : ""}

Meus pedidos

Abra qualquer pedido para consultar comprovante, andamento e informações completas da compra.

Valor movimentado
{formatMoney(totalValue)}
Soma dos pedidos presentes nesta visualização.

Lista de pedidos

Clique em um pedido para abrir o detalhe completo
{sourceOrders.map((order, index) => { const statusMeta = getStatusMeta(order.status, primaryColor); const detailsUrl = slug ? `/${slug}/cliente?section=orders&orderId=${encodeURIComponent(order.id)}` : null; const shareUrl = slug && order.share_token ? `/${slug}/status/${order.share_token}` : null; return (
{ if (!detailsUrl) return; openOrderDetails(detailsUrl); }} onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); if (!detailsUrl) return; openOrderDetails(detailsUrl); } }} className={`cursor-pointer px-4 py-4 transition hover:bg-zinc-50 ${index < sourceOrders.length - 1 ? "border-b border-[#efedf2]" : ""}`} >
Pedido #{order.number}
{formatDateTime(order.created_at)}
{formatMoney(order.total_amount)}
Total
{statusMeta.label}
Ver detalhes {shareUrl ? ( ) : null}
); })}
); } export function OrderDetailsSection({ slug, primaryColor, details, onBackToOrders, }: { slug: string; primaryColor: string; details: { status_token?: string | null; status_payload?: { profile?: { slug?: string | null; store_name?: string | null; catalog_name?: string | null; logo_url?: string | null; catalog_logo_url?: string | null; phone?: string | null; company_phone?: string | null; company_whatsapp?: string | null; } | null; client?: { name?: string | null } | null; quote?: { currency?: string | null; delivery_date?: string | null } | null; order?: { number?: number | null; status?: string | null; created_at?: string | null; updated_at?: string | null; total_amount?: number | null; paid_amount?: number | null; production_stage_label?: string | null; } | null; } | null; order: { id: string; number: number; created_at: string; updated_at?: string | null; status: string; total_amount: number; paid_amount?: number | null; financial_status?: string | null; production_stage_label?: string | null; share_token?: string | null; delivery_date?: string | null; }; quote?: { currency?: string | null; subtotal?: number | null; discount?: number | null; shipping?: number | null; total?: number | null; delivery_date?: string | null; } | null; /* Estes tres blocos ja vinham prontos do servidor e nao eram usados: por isso a previsao de entrega ficava "A definir" mesmo com prazo escolhido no checkout, e o codigo de rastreio que a loja cadastra nunca aparecia aqui, apesar de o admin prometer que apareceria. */ catalog_shipping?: { carrier_name?: string | null; service_name?: string | null; delivery_time?: number | null; pickup?: { name?: string | null; address_summary?: string | null } | null; } | null; delivery_tracking?: { codes?: string[] | null; url?: string | null; notes?: string | null; updated_at?: string | null; } | null; items?: Array<{ id: string; product_id?: string | null; product_name?: string | null; product_image_url?: string | null; title?: string | null; description?: string | null; quantity: number; unit_price: number; total_price: number; unit_type?: string | null; selected_options?: { options?: Array<{ attribute_name?: string | null; label?: string | null }> } | null; }>; payment_receipt?: ClientPortalPaymentReceipt | null; }; onBackToOrders: () => void; }) { const router = useRouter(); const order = details.order; const items = Array.isArray(details.items) ? details.items : []; const statusMeta = getStatusMeta(order.status, primaryColor); const statusToken = String(details.status_token || order.share_token || "").trim(); const statusUrl = statusToken ? `/${slug}/status/${statusToken}` : null; const publicStatus = details.status_payload || null; const paymentReceipt = details.payment_receipt || null; const paymentMethodLabel = paymentReceipt?.method_label || getPaymentMethodLabel(paymentReceipt?.method); const paymentStatusMeta = getPaymentStatusMeta(paymentReceipt?.status); const paymentSettledAmount = Number(order.paid_amount ?? paymentReceipt?.amount ?? 0); const paymentPendingAmount = Math.max(0, Number(order.total_amount || 0) - paymentSettledAmount); const paymentIsSettled = paymentReceipt?.status === "approved" || paymentReceipt?.status === "partially_paid"; const paymentCardTitle = paymentIsSettled ? "Pagamento do pedido" : "Status do pagamento"; const paymentCardValueLabel = paymentIsSettled ? "Valor pago" : "Valor pendente"; const paymentCardValue = paymentIsSettled ? paymentSettledAmount : paymentPendingAmount || Number(order.total_amount || 0); const paymentCardFootnote = paymentReceipt?.paid_at ? formatDateTime(paymentReceipt.paid_at) : paymentReceipt?.status === "pending" ? "Cobranca aguardando confirmacao" : paymentReceipt?.status === "unpaid" ? "Nenhum pagamento identificado" : paymentReceipt?.created_at ? `Atualizado em ${formatDateTime(paymentReceipt.created_at)}` : "Sem baixa financeira"; const paymentDetailsActionLabel = paymentIsSettled ? "Abrir comprovante" : "Abrir detalhes do pagamento"; const formatOptions = ( selectedOptions?: { options?: Array<{ attribute_name?: string | null; label?: string | null }> } | null ) => { const options = Array.isArray(selectedOptions?.options) ? selectedOptions.options : []; return options .map((opt) => { const a = String(opt?.attribute_name || "").trim(); const l = String(opt?.label || "").trim(); if (!a && !l) return ""; if (!a) return l; if (!l) return a; return `${a}: ${l}`; }) .filter(Boolean) .join(" • "); }; 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 publicOrder = publicStatus?.order || null; const publicProfile = publicStatus?.profile || null; const publicQuote = publicStatus?.quote || null; const publicOrderStatus = String(publicOrder?.status || "").trim(); const currentStepIndex = orderStatusSteps.findIndex((step) => step.key === publicOrderStatus); const isCanceled = publicOrderStatus === "canceled"; const isDelivered = publicOrderStatus === "delivered"; const isFinished = publicOrderStatus === "finished"; const totalAmount = Number(publicOrder?.total_amount ?? order.total_amount ?? 0) || 0; const paidAmount = Number(publicOrder?.paid_amount ?? order.paid_amount ?? 0) || 0; const remainingAmount = Math.max(0, totalAmount - paidAmount); const paymentProgress = totalAmount > 0 ? Math.min(100, Math.max(0, (paidAmount / totalAmount) * 100)) : 0; const shouldShowPaymentReminder = isFinished && remainingAmount > 0.009; const whatsappDigits = String(publicProfile?.company_whatsapp || publicProfile?.phone || publicProfile?.company_phone || "") .replace(/\D/g, ""); const paymentReminderMessage = `Olá! Sobre o pedido #${order.number}, vi que falta ${formatMoney( remainingAmount )} para pagamento. Pode me orientar para quitar antes da retirada?`; const paymentReminderWhatsappUrl = whatsappDigits ? `https://wa.me/${whatsappDigits}?text=${encodeURIComponent(paymentReminderMessage)}` : null; const contactWhatsappUrl = whatsappDigits ? `https://wa.me/${whatsappDigits}` : null; const lastUpdatedAt = formatDateTime(String(publicOrder?.updated_at || publicOrder?.created_at || order.updated_at || order.created_at)); const entregaCombinada = order.delivery_date || publicQuote?.delivery_date || null; const fretePortal = details.catalog_shipping || null; const prazoDoFrete = Number(fretePortal?.delivery_time || 0); /* Previsao de entrega, na ordem em que ela existe de verdade: 1. a data que a loja combinou no pedido; 2. a data do orcamento, quando o pedido nasceu de um; 3. o prazo da transportadora escolhida no checkout, contado do dia do pedido. So depois disso e que vira "A combinar" — antes o portal pulava direto para o "A definir" mesmo tendo o prazo na mao. */ const deliveryDate = entregaCombinada ? formatDate(String(entregaCombinada)) : prazoDoFrete > 0 ? formatDate( new Date( new Date(String(order.created_at)).getTime() + prazoDoFrete * 24 * 60 * 60 * 1000 ).toISOString() ) : null; const previsaoEhEstimativa = !entregaCombinada && prazoDoFrete > 0; const rastreio = details.delivery_tracking || null; const codigosDeRastreio = Array.isArray(rastreio?.codes) ? rastreio.codes.filter(Boolean) : []; const statusLabel = publicOrder?.production_stage_label || order.production_stage_label || statusMeta.label; const receiptUrl = `/${slug}/cliente/pedido/${order.id}/comprovante`; const receiptPrintUrl = `${receiptUrl}?print=1`; const heroCopy = getOrderHeroCopy(publicOrderStatus || order.status); const leadItem = items[0] || null; const leadItemName = leadItem?.product_name || leadItem?.title || "Seu material"; const leadItemImage = leadItem?.product_image_url || null; const remainingItemsCount = Math.max(0, items.length - 1); const supportWhatsappUrl = whatsappDigits ? `https://wa.me/${whatsappDigits}?text=${encodeURIComponent(`Olá! Preciso de ajuda com o pedido #${order.number}.`)}` : null; const activityFeed = [ { key: "created", time: order.created_at, title: "Pedido confirmado", description: "Recebemos a sua compra e iniciamos o acompanhamento por aqui.", icon: Check, }, paymentReceipt?.paid_at ? { key: "paid", time: paymentReceipt.paid_at, title: "Pagamento identificado", description: "O pagamento foi reconhecido e o material seguiu para a próxima etapa.", icon: CreditCard, } : null, { key: "progress", time: String(publicOrder?.updated_at || publicOrder?.created_at || order.updated_at || order.created_at), title: heroCopy.eyebrow, description: heroCopy.description, icon: Package, }, deliveryDate ? { key: "forecast", time: String(publicOrder?.updated_at || order.updated_at || order.created_at), title: isDelivered ? "Entrega concluída" : "Próxima etapa prevista", description: isDelivered ? "Seu pedido já foi entregue." : `Previsão atual: ${deliveryDate}.`, icon: ThumbsUp, } : null, ].filter(Boolean) as Array<{ key: string; time: string; title: string; description: string; icon: typeof Check; }>; return (

Pedido #{order.number}

{formatDateTime(order.created_at)}

{statusMeta.label} {order.production_stage_label ? ( Produção: {order.production_stage_label} ) : null}
{leadItemImage ? ( {leadItemName} ) : ( )}
{heroCopy.eyebrow} Atualizado {formatRelativeLabel(publicOrder?.updated_at || order.updated_at || order.created_at)}

{heroCopy.title}

{heroCopy.description}

{leadItemName}
Pedido #{order.number} {formatDateTime(order.created_at)} {remainingItemsCount > 0 ? + {remainingItemsCount} item{remainingItemsCount > 1 ? "s" : ""} : null}
Resumo
{formatMoney(order.total_amount)}
{paymentReceipt ? paymentStatusMeta.label : "Pagamento em análise"}
Pago
{formatMoney(order.paid_amount ?? 0)}
Data
{formatDate(order.created_at)}
{contactWhatsappUrl ? ( WhatsApp ) : null} {statusUrl ? ( Visualizar arte ) : null} Baixar comprovante {supportWhatsappUrl ? ( Solicitar suporte ) : null}
Itens
{items.length} item{items.length !== 1 ? "s" : ""}
{items.map((item) => { const name = item.product_name || item.title || "Item"; const options = formatOptions(item.selected_options); return (
{item.product_image_url ? ( {name} ) : ( )}
{name}
{options ?
{options}
: null} {item.description ?
{item.description}
: null}
{formatMoney(item.total_price)}
Qtd: {item.quantity}
Unit: {formatMoney(item.unit_price)}
); })} {items.length === 0 ?
Nenhum item encontrado.
: null}
Linha do tempo do pedido
Acompanhe o andamento e as próximas etapas.
{statusUrl ? ( Abrir link público ) : null}
{publicStatus && (!publicProfile?.slug || publicProfile.slug === slug) && publicOrder ? (
{statusLabel}
Última atualização em {lastUpdatedAt || "-"}
{statusLabel}
{/* Tres caixas cinzas dentro de um cartao branco, e uma delas repetindo o status que ja esta escrito logo acima. Aqui viraram duas linhas de rotulo e valor, sem moldura. */}
{isDelivered ? "Entregue em" : "Previsão de entrega"}
{deliveryDate || "A combinar com a loja"} {previsaoEhEstimativa ? ( estimado ) : null}
{fretePortal?.pickup?.name || fretePortal?.carrier_name ? (
{fretePortal?.pickup?.name ? "Retirada" : "Envio por"}
{fretePortal?.pickup?.name ? fretePortal.pickup.address_summary || fretePortal.pickup.name : [fretePortal?.carrier_name, fretePortal?.service_name].filter(Boolean).join(" · ")}
) : null}
Última atualização
{lastUpdatedAt || "-"}
{codigosDeRastreio.length || rastreio?.url || rastreio?.notes ? (
Rastreio
{codigosDeRastreio.length ? (
{codigosDeRastreio.map((codigo) => ( {codigo} ))}
) : null} {rastreio?.notes ? (

{rastreio.notes}

) : null} {rastreio?.url ? ( Acompanhar na transportadora ) : null}
) : null}
Andamento
{orderStatusSteps.map((step, index) => { const isDone = !isCanceled && currentStepIndex >= index; const isCurrent = !isCanceled && currentStepIndex === index; const markerStyle = isCurrent ? { backgroundColor: primaryColor, borderColor: primaryColor, color: getReadableTextColor(primaryColor) } : isDone ? { backgroundColor: "#111827", borderColor: "#111827", color: "#fff" } : { backgroundColor: "#fff", borderColor: "#e4e4e7", color: "#71717a" }; return (
{isDone ? : index + 1}
{step.title}
{isCurrent ?
{step.description}
: null}
); })}
Atualizações do pedido
Um histórico claro do que já aconteceu com a sua compra.
Feed
{activityFeed.map((entry, index) => { const EntryIcon = entry.icon; return (
{index < activityFeed.length - 1 ?
: null}
{entry.title}
{formatRelativeLabel(entry.time)}
{entry.description}
{formatDateTime(entry.time)}
); })}
{shouldShowPaymentReminder ? (
Falta {formatMoney(remainingAmount)} para pagamento
Seu pedido já está pronto. Regularize o valor pendente para liberar a retirada ou entrega.
Valor total
{formatMoney(totalAmount)}
Valor pago
{formatMoney(paidAmount)}
{paymentProgress.toFixed(0)}% pago
{paymentReminderWhatsappUrl ? ( ) : null}
) : null} {isDelivered ? (
Obrigado pela confiança. Pedido finalizado e entregue.
) : null} {isCanceled ? (
Este pedido foi cancelado. Fale com a loja para mais detalhes.
) : null} {!isDelivered && !isCanceled && !shouldShowPaymentReminder && contactWhatsappUrl ? ( ) : null}
) : (
Status indisponível
Não foi possível carregar os dados do status agora. Use “Atualizar” ou “Abrir link público”.
)}
{paymentReceipt ? (
{paymentCardTitle}
{paymentMethodLabel}
{paymentStatusMeta.description}
{paymentStatusMeta.label}
{paymentCardValueLabel}
{formatMoney(paymentCardValue)}
{paymentCardFootnote}
Forma de pagamento {paymentMethodLabel}
Status {paymentStatusMeta.label}
{paymentReceipt.paid_at ? (
Data e hora {formatDateTime(paymentReceipt.paid_at)}
) : null}
{paymentReceipt.reference ? (
Referência da transação
{paymentReceipt.reference}
) : null} {paymentReceipt.payer_name || paymentReceipt.payer_email || paymentReceipt.payer_document ? (
Dados do pagador
{paymentReceipt.payer_name ? (
Nome {paymentReceipt.payer_name}
) : null} {paymentReceipt.payer_email ? (
E-mail {paymentReceipt.payer_email}
) : null} {paymentReceipt.payer_document ? (
Documento {paymentReceipt.payer_document}
) : null}
) : null}
{paymentDetailsActionLabel} Salvar PDF / Imprimir
) : null}
); } export function AccountSection({ slug, client, primaryColor, }: { slug: string; client: ClientPortalClient; primaryColor: string; }) { const completion = getProfileCompletion(client); const incompleteFields = getIncompleteProfileFields(client); const profileName = client.company_name || client.name || "Cliente"; const addressSummary = getAddressSummary(client) || "Não informado"; return (
Cadastro do cliente

Meus dados

Mantenha suas informações atualizadas para agilizar atendimento, pagamento e entrega.

Resumo
{completion}%
Perfil completo para uso no portal.
{incompleteFields.length > 0 ? `Pendências: ${incompleteFields.join(", ")}` : "Sem pendências no cadastro."}
Resumo da conta
Entrega
{addressSummary}
Acesso ao portal
Redefina sua senha sempre que precisar. O link sera enviado para o e-mail usado no cadastro.
{client.email ? ( Redefinir senha ) : (
Cadastre um e-mail no perfil para receber o link de redefinicao.
)}
Editar cadastro
Os dados abaixo sao os mesmos utilizados no portal e no acompanhamento dos pedidos.
); } export function AddressesSection({ client, primaryColor, completion, onOpenSection, slug, onClientChange, }: { slug: string; client: ClientPortalClient; primaryColor?: string; completion?: number; onOpenSection?: () => void; onClientChange?: (client: ClientPortalClient) => void; }) { const addressSummary = getAddressSummary(client); const completionValue = typeof completion === "number" ? completion : getProfileCompletion(client); const recipientName = client.company_name || client.name || "Não informado"; return (
{addressSummary ? "Entrega cadastrada" : "Entrega pendente"}

Entrega

Revise o endereço usado nas compras para evitar divergências em retirada, entrega e contato.

Perfil
{completionValue}%
Cadastro concluído para compras e entregas.
{addressSummary ? (
Endereço principal
{client.address_complement ? (
Complemento
{client.address_complement}
) : null} {onOpenSection ? (
) : null}
) : (
Nenhum endereço cadastrado

Adicione um endereço no seu cadastro para facilitar a entrega e manter os dados consistentes em todos os pedidos.

{onOpenSection ? ( ) : null}
)}
); } export function CatalogSection({ slug, storeName, primaryColor, onOpenSection, }: { slug: string; storeName: string; primaryColor: string; onOpenSection: () => void; }) { return (

Catálogo

Volte para a loja e continue comprando

Voltar para {storeName}

Continue explorando nossos produtos e faça seu próximo pedido.

Ver Catálogo
); } export type FavoriteProduct = { id: string; name: string; price: number; image_url: string | null; price_on_request: boolean; unit_type: string; product_price_tiers?: unknown[]; }; export type ReviewHistoryItem = { id: string; product_id: string; product_name: string; product_image_url: string | null; rating: number; comment: string; status: "pending" | "approved" | "rejected"; created_at: string; updated_at?: string | null; }; export function FavoritesSection({ slug, primaryColor, favoriteProducts, onOpenCatalog, clientId, }: { slug: string; primaryColor: string; favoriteProducts: FavoriteProduct[]; onOpenCatalog: () => void; clientId?: string | null; }) { return (

Meus Favoritos

Produtos que você salvou para ver depois

{favoriteProducts.length === 0 ? (

Sua lista está vazia

Você ainda não favoritou nenhum produto. Navegue pelo catálogo e clique no coração para salvar os produtos que você mais gostar.

) : (
{favoriteProducts.map((product) => (
{product.image_url ? ( {product.name} ) : ( )} p.id)} primaryColor={primaryColor} />

{product.name}

{/* Mocked Rating Stars for visual match */}
{[...Array(5)].map((_, i) => ( ))}
{product.price_on_request ? (

Preço sob consulta

) : ( <>

{new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(product.price)}

Seleção
)}
))}
)}
); } export function ReviewsSection({ slug, reviews, onOpenCatalog, }: { slug: string; reviews: ReviewHistoryItem[]; onOpenCatalog: () => void; }) { const statusMap: Record = { pending: { label: "Aguardando aprovacao", className: "bg-amber-50 text-amber-700 border-amber-200", }, approved: { label: "Publicado", className: "bg-emerald-50 text-emerald-700 border-emerald-200", }, rejected: { label: "Precisa revisar", className: "bg-rose-50 text-rose-700 border-rose-200", }, }; return (

Minhas Avaliacoes

Produtos que voce comentou e avaliou

{reviews.length === 0 ? (

Nenhuma avaliacao enviada

Quando voce comentar algum produto, ele aparecera aqui com o status da aprovacao.

) : (
{reviews.map((review) => { const status = statusMap[review.status]; return (
{review.product_image_url ? ( {review.product_name} ) : ( )}

{review.product_name}

{Array.from({ length: 5 }).map((_, index) => ( ))}
{status.label}

{review.comment || "Avaliacao sem comentario detalhado."}

Enviado em {formatDate(review.created_at)}
); })}
)}
); } export function FinanceSection({ latestOrder, totalSpent, orders, }: { latestOrder: ClientPortalOrder | null; totalSpent: number; orders: ClientPortalOrder[]; }) { return (

Pagamentos

Resumo financeiro das suas compras

{formatMoney(totalSpent)}
Total Gasto
{orders.length}
Pedidos Realizados
 {latestOrder && (
{latestOrder ? `#${latestOrder.number}` : 'Nenhum'}
Último Pedido
 )}
{orders.length > 0 && (

Histórico de Pagamentos

{orders.slice(0, 5).map((order) => (
Pedido #{order.number}
{formatDate(order.created_at)}
{formatMoney(order.total_amount)}
))}
)}
); } export function SupportSection({ onOpenOrders, onOpenAccount, primaryColor, storeEmail, storeWhatsapp, storePhone, storeAddress, }: { onOpenOrders: () => void; onOpenAccount: () => void; primaryColor?: string; storeEmail?: string | null; storeWhatsapp?: string | null; storePhone?: string | null; storeAddress?: string | null; }) { const whatsappDigits = String(storeWhatsapp || "").replace(/\D/g, ""); const whatsappUrl = whatsappDigits ? `https://wa.me/${whatsappDigits}` : null; return (
Atendimento

Ajuda e suporte

Use os atalhos abaixo para acompanhar pedidos, revisar seus dados ou falar com a loja pelos canais disponíveis.

Canal principal
{storeWhatsapp ? "WhatsApp" : storeEmail ? "E-mail" : "Portal"}
{storeWhatsapp || storeEmail || "Use os atalhos internos do portal para continuar o atendimento."}
Contato da loja
{storeEmail ? : null} {storeWhatsapp ? : null} {storePhone ? : null} {storeAddress ? : null}
); } export function SettingsSection({ completion, lastLogin, onOpenAccount, }: { completion: number; lastLogin?: string | null; onOpenAccount: () => void; }) { return (

Configurações

Gerencie suas preferências e acesso

{completion}%
Perfil Completo
{lastLogin ? formatDateTime(lastLogin) : 'Primeiro acesso'}
Último Acesso

Preferências

Notificações por Email
Status de pedidos e promoções
Lembretes por WhatsApp
Alertas de entrega e novidades
); }