"use client";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { ChevronDown, CreditCard, LogIn, Minus, Plus, Send, ShoppingBag, Sparkles, Tag, Trash2, Truck, X } from "lucide-react";
import { useCart } from "@/context/CartContext";
import { BoutiqueValorMinimo } from "./BoutiqueValorMinimo";
import { useVisaoDaLoja } from "@/components/VisaoDaLojaContext";
import { faltaParaOPedidoMinimo } from "@/lib/loja/regras-da-loja";
import { normalizeWhatsappForLink } from "@/lib/phone";
import { trackCatalogEvent } from "@/lib/catalog-analytics";
import { isPickupShippingOption } from "@/lib/catalog-shipping";
import { moedaDaBoutique, numeroDaBoutique } from "./formato";
import { getReadableTextColor, normalizeHexColor } from "@/lib/color-contrast";
/*
O carrinho da Boutique, no desenho da referência: no computador, gaveta da
direita de 430 px com o cabeçalho preto "MEU CARRINHO"; no celular, folha
de tela inteira com o cabeçalho preto "Meu carrinho" e a seta que fecha.
Itens em linhas (foto, nome em caixa alta, opções, medidas, quantidade e
valor), cupom, totais e o botão preto. O carrinho dos outros templates
continua onde está, intocado.
A conta, o cupom e o frete vêm do contexto do carrinho — os mesmos números
que o checkout vai cobrar. Aqui só se decide como isso aparece.
O fechamento obedece às regras da loja (lib/loja/regras-da-loja.ts):
entrar antes de fechar, loja em pausa, lista de orçamento ou carrinho comum.
O pedido sem pagamento online nasce no servidor (/api/catalog/pedido), que
precifica pelo banco, confere cupom, estoque e frete e avisa a loja. Antes
o navegador gravava o pedido direto, com os preços que ele mesmo mandava.
*/
/* O símbolo do WhatsApp, usado nos botões que levam à conversa. */
function IconeDoWhats() {
return (
);
}
/* O campo de texto do painel (pedido de orçamento): borda fina, sem raio. */
const CLASSE_DO_CAMPO = "bq-campo text-[13px]";
function Linha({ rotulo, valor, forte }: { rotulo: string; valor: string; forte?: boolean }) {
return (
{rotulo}{valor}
);
}
/* Num produto por m², o preço guardado no carrinho é o do METRO: o valor da
linha só fecha multiplicando pela área de cada peça. Sem isso a linha
mostrava um número e o total do carrinho cobrava outro. */
function areaDaPeca(item: { unit_type?: string | null; width_m?: number | null; height_m?: number | null }) {
if (item.unit_type !== "square_meter") return 0;
const l = Number(item.width_m) || 0;
const a = Number(item.height_m) || 0;
return l > 0 && a > 0 ? l * a : 0;
}
function valorDaLinha(item: {
price: number;
quantity: number;
unit_type?: string | null;
width_m?: number | null;
height_m?: number | null;
valor_minimo_aplicado?: number | null;
}) {
/* Valor mínimo do item: a linha inteira vale o mínimo. */
if (item.valor_minimo_aplicado != null && item.valor_minimo_aplicado > 0) return item.valor_minimo_aplicado;
const area = areaDaPeca(item);
return item.price * item.quantity * (area > 0 ? area : 1);
}
export function BoutiqueCarrinho({
slug,
whatsapp,
corDaLoja,
}: {
slug: string;
whatsapp?: string | null;
/* A cor principal da loja (Personalização). O carrinho é montado pelo
StoreLayout, fora do shell onde moram as cores do lojista: sem esta
prop o cabeçalho e os botões ficavam pretos em qualquer loja. */
corDaLoja?: string | null;
}) {
const router = useRouter();
/* O que este visitante pode ver e fazer (regras da loja). */
const visao = useVisaoDaLoja();
const comPreco = visao.mostrarPreco;
const modoOrcamento = visao.modoDeCompra === "quote";
const modoCarrinho = visao.modoDeCompra === "cart";
const textoSemPreco = visao.textoNoLugarDoPreco;
/* Preço só para quem entrou, ou cadastro exigido para fechar: o botão de
fechar leva ao login, e o pedido vem depois. */
const precisaEntrarParaFechar = visao.precisaEntrar || (visao.exigeLoginParaFechar && !visao.cliente);
/* "Meu Carrinho" é o nome de sempre deste painel; no pedido de orçamento
ele vira a lista, com o nome que as regras dão. */
const titulo = modoOrcamento ? visao.tituloDoCarrinho : "Meu Carrinho";
const {
items,
isCartOpen,
toggleCart,
removeFromCart,
updateQuantity,
clearCart,
applyCoupon,
clearCoupon,
appliedCoupons,
removeCoupon,
orderCouponCodes,
couponNotices,
availableCoupons,
cartSubtotal,
discountTotal,
shippingDiscount,
cartTotal,
shippingTotal,
shippingSelection,
avisosDeEstoque,
} = useCart();
/* O pedido mínimo da loja (em reais ou em unidades), conferido aqui e de
novo no servidor. */
const faltaMinimo = faltaParaOPedidoMinimo(visao.regras, {
total: cartSubtotal,
unidades: items.filter((i) => !i.is_combo_item).reduce((soma, i) => soma + Number(i.quantity || 0), 0),
mostrarPreco: visao.mostrarPreco,
});
/* Se a loja aceita pagamento online. Enquanto não se sabe, o WhatsApp fica
escondido: mostrar e sumir é pior do que aparecer um instante depois. */
const [temPagamento, setTemPagamento] = useState(null);
const [cupom, setCupom] = useState("");
const [avisoDoCupom, setAvisoDoCupom] = useState<{ ok: boolean; texto: string } | null>(null);
const [aplicando, setAplicando] = useState(false);
const [aviso, setAviso] = useState("");
const [enviando, setEnviando] = useState(false);
/* O que deu errado no fechamento, mostrado junto do botão. */
const [erro, setErro] = useState("");
/* O pedido de orçamento enviado: o carrinho esvazia e a confirmação fica
no lugar da lista até o painel fechar. */
const [sucesso, setSucesso] = useState("");
/* O pedido já nasceu na loja, mas o navegador barrou a janela do
WhatsApp: o link fica à mão, para não registrar o pedido duas vezes. */
const [linkPendente, setLinkPendente] = useState("");
/* Quem pede, quando não há cadastro: o pedido de orçamento precisa de um
nome e um contato para a loja responder. */
const [contato, setContato] = useState({ nome: "", whatsapp: "", email: "", observacoes: "" });
/* Há item "sob consulta" com preço visível: o total é parcial. */
const temSobConsulta = items.some((item) => item.price_on_request);
/* Fechar o painel por dentro (X, fundo, Esc, link): as mensagens do
fechamento anterior não devem reaparecer na próxima abertura. */
const fecharPainel = useCallback(() => {
setSucesso("");
setErro("");
setLinkPendente("");
toggleCart();
}, [toggleCart]);
/* Com o painel aberto, a página de trás não pode rolar junto. */
useEffect(() => {
if (!isCartOpen) return;
const antes = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => {
document.body.style.overflow = antes;
};
}, [isCartOpen]);
/* Perguntado só quando o carrinho abre, e uma vez por visita. Fora do
carrinho comum não há pagamento a perguntar. */
useEffect(() => {
if (!isCartOpen || temPagamento !== null || !slug || !modoCarrinho) return;
let ativo = true;
fetch(`/api/catalog/payment/ativo?slug=${encodeURIComponent(slug)}`)
.then((r) => (r.ok ? r.json() : { ativo: false }))
.then((j) => {
if (ativo) setTemPagamento(Boolean(j?.ativo));
})
.catch(() => {
if (ativo) setTemPagamento(false);
});
return () => {
ativo = false;
};
}, [isCartOpen, temPagamento, slug, modoCarrinho]);
useEffect(() => {
if (!isCartOpen) return;
const comEsc = (evento: KeyboardEvent) => {
if (evento.key === "Escape") fecharPainel();
};
document.addEventListener("keydown", comEsc);
return () => document.removeEventListener("keydown", comEsc);
}, [isCartOpen, fecharPainel]);
const digitosDoWhats = useMemo(() => normalizeWhatsappForLink(whatsapp), [whatsapp]);
/* O mesmo pedido, em texto, para o modo "pedir pelo WhatsApp", em que a
conversa é o pedido e nada é registrado na loja. Sem preço na tela, a
mensagem também sai sem valor. */
const mensagemDoWhats = useMemo(() => {
if (!items.length) return "";
const linhas = items.map((item) => {
const detalhe = item.variation_description ? ` (${item.variation_description})` : "";
const area = areaDaPeca(item);
const medida =
area > 0
? ` (${numeroDaBoutique(Number(item.width_m) || 0, 2)}m x ${numeroDaBoutique(Number(item.height_m) || 0, 2)}m = ${numeroDaBoutique(area, 2)}m²)`
: "";
const valor = comPreco && !item.price_on_request ? ` — ${moedaDaBoutique(valorDaLinha(item))}` : "";
return `• ${item.quantity}x ${item.name}${medida}${detalhe}${valor}`;
});
const total = comPreco ? `\n\nTotal: ${moedaDaBoutique(cartTotal)}` : "";
return encodeURIComponent(`Olá! Quero fazer este pedido:\n\n${linhas.join("\n")}${total}`);
}, [items, cartTotal, comPreco]);
/* Os itens como o servidor os lê (lib/pedido-da-loja.server.ts). O preço
vai só de pista: quem precifica é o banco. */
const itensParaOServidor = () =>
items.map((item) => ({
product_id: item.product_id,
name: item.name,
price: Number(item.price || 0),
quantity: Number(item.quantity || 0),
unit_type: item.unit_type || "unit",
width_m: item.width_m ?? 0,
height_m: item.height_m ?? 0,
length_m: item.length_m ?? 0,
shipping_weight_kg: item.shipping_weight_kg ?? 0,
shipping_width_cm: item.shipping_width_cm ?? 0,
shipping_height_cm: item.shipping_height_cm ?? 0,
shipping_length_cm: item.shipping_length_cm ?? 0,
variation_description: item.variation_description || "",
selected_options: item.selected_options || null,
price_on_request: Boolean(item.price_on_request),
is_combo_item: Boolean(item.is_combo_item),
combo_parent_id: item.combo_parent_id || null,
}));
/* O pedido nasce no servidor: é lá que o preço vem do banco, o cupom é
conferido, o frete é validado e a loja é avisada. */
async function enviarPedido(modo: "whatsapp" | "orcamento") {
try {
const resposta = await fetch("/api/catalog/pedido", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
slug,
modo,
items: itensParaOServidor(),
couponCodes: orderCouponCodes,
shippingSelection: modo === "whatsapp" ? shippingSelection : null,
clearAfterOpen: true,
customer: { name: contato.nome, whatsapp: contato.whatsapp, email: contato.email, notes: contato.observacoes },
}),
});
const dados = (await resposta.json().catch(() => null)) as
| { ok?: boolean; order_number?: number | null; whatsapp_url?: string | null; error?: string }
| null;
if (!resposta.ok || !dados?.ok) {
return { ok: false as const, mensagem: dados?.error || "Não foi possível registrar o pedido." };
}
return { ok: true as const, numero: dados.order_number ?? null, whatsappUrl: dados.whatsapp_url || "" };
} catch {
return { ok: false as const, mensagem: "Não foi possível registrar o pedido. Tente de novo em instantes." };
}
}
/* Fechar pelo WhatsApp não é só abrir a conversa: o pedido tem de nascer na
loja, senão ele existe apenas no celular de quem atende. O servidor grava
e devolve o endereço da conversa já com o número do pedido. */
async function enviarPeloWhats() {
if (enviando || !digitosDoWhats) return;
setEnviando(true);
setErro("");
setLinkPendente("");
void trackCatalogEvent({
slug,
eventName: "checkout_started",
meta: { items_count: items.length, cart_total: Number(cartTotal.toFixed(2)) },
});
const resultado = await enviarPedido("whatsapp");
if (!resultado.ok) {
setEnviando(false);
setErro(resultado.mensagem);
return;
}
void trackCatalogEvent({
slug,
eventName: "order_created",
meta: { items_count: items.length, cart_total: Number(cartTotal.toFixed(2)) },
});
const endereco = resultado.whatsappUrl || `https://wa.me/${digitosDoWhats}?text=${mensagemDoWhats}`;
const janela = window.open(endereco, "_blank");
if (!janela) {
setEnviando(false);
setErro("O navegador bloqueou a janela do WhatsApp. O pedido já foi registrado: abra a conversa pelo botão abaixo.");
setLinkPendente(endereco);
return;
}
clearCoupon();
clearCart();
setEnviando(false);
if (isCartOpen) toggleCart();
}
/* O pedido de orçamento: a lista vai para a loja (sem valor nenhum quando
o visitante não vê preço); a loja recebe com os preços do cadastro e
responde. */
async function enviarPedidoDeOrcamento() {
if (enviando) return;
if (!visao.cliente) {
if (!contato.nome.trim()) {
setErro("Diga o seu nome para a loja responder.");
return;
}
if (!contato.whatsapp.trim() && !contato.email.trim()) {
setErro("Informe um WhatsApp ou e-mail para a loja responder.");
return;
}
}
setEnviando(true);
setErro("");
void trackCatalogEvent({ slug, eventName: "checkout_started", meta: { items_count: items.length, quote_request: true } });
const resultado = await enviarPedido("orcamento");
setEnviando(false);
if (!resultado.ok) {
setErro(resultado.mensagem);
return;
}
void trackCatalogEvent({ slug, eventName: "order_created", meta: { items_count: items.length, quote_request: true } });
clearCoupon();
clearCart();
setSucesso(`Pedido de orçamento${resultado.numero ? ` nº ${resultado.numero}` : ""} enviado! A loja vai responder em breve.`);
if (resultado.whatsappUrl) window.open(resultado.whatsappUrl, "_blank");
}
/* O botão de fechar leva ao login e traz de volta para esta página. */
function irParaOLogin() {
if (isCartOpen) fecharPainel();
router.push(`/${slug}/cliente/login?next=${encodeURIComponent(window.location.pathname)}`);
}
/* O pedido já existe na loja; a conversa abriu pelo link de reserva. */
function concluirPeloLinkPendente() {
setLinkPendente("");
setErro("");
clearCoupon();
clearCart();
if (isCartOpen) toggleCart();
}
async function usarCupom(digitado?: string) {
const codigo = (digitado ?? cupom).trim();
if (!codigo) return;
setAplicando(true);
const resposta = await applyCoupon(codigo);
setAplicando(false);
setAvisoDoCupom({ ok: resposta.ok, texto: resposta.message });
if (resposta.ok) setCupom("");
}
if (!isCartOpen) return null;
const quantosItens = items.filter((i) => !i.is_combo_item).length;
/* As cores de ação do carrinho (cabeçalho, Aplicar, Seguir para pagamento)
pela cor da loja; o texto é escolhido pelo contraste para nunca sumir. */
const cor = String(corDaLoja || "").trim() ? normalizeHexColor(corDaLoja, "#000000") : null;
const coresDoCarrinho = cor
? ({
"--bq-primary": cor,
"--bq-primary-fg": getReadableTextColor(cor),
"--bq-primary-hover": `color-mix(in srgb, ${cor} 85%, #000000)`,
} as React.CSSProperties)
: undefined;
return (
/* Acima do chat: com o balão da loja por cima, o botão de pagar ficava
coberto na hora de fechar a compra. */
{/* Computador: gaveta da direita de 430 px, altura total. Celular: folha
de tela inteira, com o cabeçalho preto "Meu carrinho" e a seta para
baixo que fecha (REFERENCIA.md 4.2/4.3). */}