Margem Atual
0 ? " − fixos pelo tempo" : ""} − ${variaveisPct.toFixed(1)}% de impostos e taxas) ÷ Preço. É o que sobra de verdade. Mínimo da categoria: ${category?.pricing_rule?.marginMinPct ?? 35}%`} />
{currentMargin.toFixed(1)}%
{suggestion.warnings.length > 0 && (
{suggestion.warnings.join(" ")}
)}
);
}
/**
* Abas do editor de produto. Centralizadas para a barra ser montada por map:
* antes eram 7 blocos JSX quase identicos, com as mesmas ~10 classes repetidas.
*/
const ABAS_PRODUTO = [
{ value: "general", label: "Dados Gerais", icone: Package },
{ value: "composition", label: "Composição (Custos)", icone: Calculator },
{ value: "variations", label: "Variações", icone: Layers },
{ value: "tiers", label: "Preço por quantidade", icone: BadgeDollarSign },
{ value: "custom-fields", label: "Campos Personalizados", icone: Settings2 },
{ value: "combos", label: "Compre Junto", icone: Blocks },
{ value: "logistics", label: "Logística", icone: Truck },
{ value: "production", label: "Produção", icone: Clock3 },
] as const;
/* Estoque novo (v2): a aba Estoque entra logo depois da Composição. */
const ABAS_COM_ESTOQUE = [
...ABAS_PRODUTO.slice(0, 2),
{ value: "estoque", label: "Estoque", icone: Boxes },
...ABAS_PRODUTO.slice(2),
] as const;
export default function EditProductPage(props: { params: Promise<{ id: string }> }) {
const { pode } = usePermissoes();
/* Custo e margem sao dado comercial; o preco de venda nao passa por aqui. */
const podeVerCustos = pode("pricing.read");
const podeMexerNoCusto = pode("pricing.config.write");
const searchParams = useSearchParams();
/* Estoque novo (v2): a aba Estoque substitui o cartão antigo de estoque. Fora
do v2 a tela segue exatamente igual. */
const estoqueNovo = useEstoqueV2();
const noEstoqueV2 = estoqueNovo.v2 && !estoqueNovo.carregando;
const abasDoProduto = noEstoqueV2 ? ABAS_COM_ESTOQUE : ABAS_PRODUTO;
const [abaAtual, setAbaAtual] = useState(() => searchParams.get("aba") || "general");
const isNewMode = searchParams.get("mode") === "new";
const isCatalogSource = searchParams.get("source") === "catalog";
const backHref = isCatalogSource ? "/dashboard/catalog/products" : "/dashboard/products";
const [loading, setLoading] = useState(false);
const [fetching, setFetching] = useState(true);
/* Os avisos da tela. A caixinha do navegador para de aparecer depois de
algumas seguidas, e o aviso flutuante não tem onde aparecer nesta
página: "Produto atualizado" nunca chegava a quem salvava. */
const [erroDaTela, setErroDaTela] = useState(null);
const [avisoDaTela, setAvisoDaTela] = useState(null);
const [erroAoAbrir, setErroAoAbrir] = useState(null);
const avisosRef = useRef(null);
/* O aviso nasce perto do Salvar; se a pessoa salvou com Enter lá embaixo,
a tela sobe até ele. */
useEffect(() => {
if (erroDaTela || avisoDaTela) avisosRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
}, [erroDaTela, avisoDaTela]);
const [categories, setCategories] = useState([]);
const [formData, setFormData] = useState({
name: "",
description: "",
price: "",
price_on_request: false,
use_variation_price_only: false,
/* Valor mínimo do item (migration 194): só em produto por m² ou metro. */
valor_minimo_item: "",
valor_minimo_orcamentos: true,
valor_minimo_loja: true,
valor_minimo_pdv: true,
estimated_base_cost: "",
stock: "",
unit_type: "unit",
category_id: "",
image_url: "",
show_in_catalog: true,
catalog_color: "#ffffff",
min_sale_qty_enabled: false,
min_sale_qty: "",
allowed_sale_qty_enabled: false,
inventory_scope: "product" as "product" | "option" | "variant",
inventory_attribute_name: "",
allow_negative_stock: false,
track_inventory: false,
sku: "",
barcode: "",
shipping_weight_kg: "",
shipping_width_cm: "",
shipping_height_cm: "",
shipping_length_cm: "",
production_time_value: "",
production_time_unit: "business_days",
production_template_url: "",
production_template_name: "",
production_template_format: "pdf" as ProductionTemplateFormat,
production_templates: [] as ProductionTemplateFormItem[],
});
const [productId, setProductId] = useState(null);
const [costTotal, setCostTotal] = useState(0);
/* A medida de referência da precificação: sem ela a ficha (por peça) não
vira custo por m². E os custos variáveis da venda, para a análise usar o
mesmo motor do assistente. */
const [refsDePrecificacao, setRefsDePrecificacao] = useState<{ w: number | null; h: number | null }>({ w: null, h: null });
const [variaveisPct, setVariaveisPct] = useState(0);
/* A hora da estrutura (R$/h) e os minutos da ficha por unidade de venda: é
o par que faz os custos fixos entrarem na análise pelo tempo. */
const [taxaEstrutura, setTaxaEstrutura] = useState(0);
const [minutosFichaPorUnidade, setMinutosFichaPorUnidade] = useState(0);
const [costBreakdown, setCostBreakdown] = useState({
estimated: 0,
processes: 0,
materials: 0
});
useEffect(() => {
fetch("/api/precificacao/preparo", { cache: "no-store" })
.then((r) => r.json())
.then((j) => {
setVariaveisPct(Number(j?.custosVariaveis?.totalPct ?? 0));
setTaxaEstrutura(Number(j?.horaDaEstrutura?.taxa ?? 0));
})
.catch(() => {});
}, []);
// Variations State
const [attributes, setAttributes] = useState([]);
/* Serviços opcionais: o cadastro é da empresa (biblioteca), e o produto só
diz o que oferece. Por isso são dois estados, não um. */
const [gruposDeServico, setGruposDeServico] = useState([]);
const [servicosDaLoja, setServicosDaLoja] = useState([]);
const [custosDeServico, setCustosDeServico] = useState>({});
const [vinculosDeServico, setVinculosDeServico] = useState([]);
const [carregandoServicos, setCarregandoServicos] = useState(true);
/* A biblioteca de serviços da empresa e o que este produto oferece dela.
Duas leituras separadas de propósito: a biblioteca é a mesma para todos os
produtos, e o vínculo é a opinião deste. */
useEffect(() => {
let ativo = true;
fetch("/api/catalog/servicos", { cache: "no-store" })
.then((r) => (r.ok ? r.json() : null))
.then((j) => {
if (!ativo || !j) return;
setGruposDeServico(lerGrupos(j.grupos));
setServicosDaLoja(lerServicos(j.servicos));
const custos: Record = {};
for (const [id, bruto] of Object.entries((j.custos ?? {}) as Record)) {
custos[id] = lerCusto(bruto);
}
setCustosDeServico(custos);
})
.catch(() => {})
.finally(() => {
if (ativo) setCarregandoServicos(false);
});
return () => {
ativo = false;
};
}, []);
useEffect(() => {
if (!productId) return;
let ativo = true;
getSupabaseClient()
.from("product_optional_services")
.select("service_id,enabled")
.eq("product_id", productId)
.then((resposta: { data: unknown }) => {
if (!ativo) return;
setVinculosDeServico(lerVinculosDeServico(resposta.data));
});
return () => {
ativo = false;
};
}, [productId]);
const [variations, setVariations] = useState([]);
const [customFields, setCustomFields] = useState([]);
const [priceTiers, setPriceTiers] = useState([]);
const [productImages, setProductImages] = useState([]);
const [videoDoProduto, setVideoDoProduto] = useState(VIDEO_VAZIO);
const [quantityIntervals, setQuantityIntervals] = useState([]);
const [newIntervalQty, setNewIntervalQty] = useState("");
const [newIntervalPrice, setNewIntervalPrice] = useState("");
const [editingIntervalId, setEditingIntervalId] = useState(null);
const [editingIntervalQty, setEditingIntervalQty] = useState("");
const [editingIntervalPrice, setEditingIntervalPrice] = useState("");
const [erroDoIntervalo, setErroDoIntervalo] = useState(null);
/* Os dados que a nota fiscal usa: tipo, NCM, CEST, origem e tributação. */
const [dadosFiscais, setDadosFiscais] = useState(DADOS_FISCAIS_VAZIOS);
const [generalAccordionOpen, setGeneralAccordionOpen] = useState({
characteristics: true,
value: false,
stock: false,
});
const [isInventoryModalOpen, setIsInventoryModalOpen] = useState(false);
const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false);
function parseMinSaleQtyInput(value: string) {
const normalized = value.replace(",", ".").trim();
if (!normalized) return null;
const parsed = Number(normalized);
if (!Number.isFinite(parsed) || parsed <= 0) return null;
return Number(parsed.toFixed(3));
}
function parseShippingNumberInput(value: string, decimals: number) {
const normalized = value.replace(",", ".").trim();
if (!normalized) return null;
const parsed = Number(normalized);
if (!Number.isFinite(parsed) || parsed <= 0) return null;
return Number(parsed.toFixed(decimals));
}
function normalizeProductionTemplates(value: unknown, fallback?: {
production_template_url?: string | null;
production_template_name?: string | null;
production_template_format?: ProductionTemplateFormat | null;
} | null) {
const templates = Array.isArray(value)
? value
.map((item) => {
const row = item as Partial | null;
const format =
row?.format === "ai" || row?.format === "cdr" || row?.format === "pdf" || row?.format === "canva"
? row.format
: null;
const url = typeof row?.url === "string" ? row.url.trim() : "";
const name = typeof row?.name === "string" ? row.name.trim() : "";
if (!format || !url) return null;
return {
format,
url,
name: name || "Gabarito",
} satisfies ProductionTemplateFormItem;
})
.filter((item): item is ProductionTemplateFormItem => Boolean(item))
: [];
if (templates.length > 0) return templates;
const legacyUrl = typeof fallback?.production_template_url === "string" ? fallback.production_template_url.trim() : "";
const legacyName = typeof fallback?.production_template_name === "string" ? fallback.production_template_name.trim() : "";
const legacyFormat =
fallback?.production_template_format === "ai" ||
fallback?.production_template_format === "cdr" ||
fallback?.production_template_format === "pdf"
? fallback.production_template_format
: null;
if (!legacyUrl || !legacyFormat) return [];
return [
{
format: legacyFormat,
url: legacyUrl,
name: legacyName || "Gabarito",
},
];
}
function upsertProductionTemplate(
templates: ProductionTemplateFormItem[],
nextItem: ProductionTemplateFormItem | null,
format: ProductionTemplateFormat
) {
const base = templates.filter((item) => item.format !== format);
if (!nextItem) return base;
return [...base, nextItem];
}
function findProductionTemplate(templates: ProductionTemplateFormItem[], format: ProductionTemplateFormat) {
return templates.find((item) => item.format === format) || null;
}
const fetchCategories = useCallback(async () => {
const supabase = getSupabaseClient();
const {
data: { user },
} = await supabase.auth.getUser();
if (!user) {
setCategories([]);
return;
}
const ctx = await getCompanyContext(supabase, user);
const tenantIds = ctx.tenantIds?.length ? ctx.tenantIds : [user.id];
const { data } = await supabase
.from('categories')
.select('id, name, pricing_rule')
.in('user_id', tenantIds)
.order('name');
if (data) setCategories(data);
}, []);
const fetchProduct = useCallback(async (id: string) => {
const supabase = getSupabaseClient();
const {
data: { user },
} = await supabase.auth.getUser();
if (!user) {
setErroAoAbrir("Sua sessão terminou. Entre de novo para editar o produto.");
setFetching(false);
return;
}
const ctx = await getCompanyContext(supabase, user);
const tenantIds = ctx.tenantIds?.length ? ctx.tenantIds : [user.id];
const baseSelect =
"*, product_processes(cost_total,minutes,setup_minutes,consumption_base), product_materials(cost_total,quando_sai), product_attributes(*), product_variations(*)";
const selectWithExtras = `${baseSelect}, product_price_tiers(id,min_qty,max_qty,unit_price,sort_order,active), product_images(id,image_url,sort_order,is_primary)`;
let { data, error } = await supabase
.from("products")
.select(selectWithExtras)
.eq("id", id)
.in("user_id", tenantIds)
.single();
if (error) {
const message = String((error as { message?: unknown } | null)?.message ?? "").toLowerCase();
const missingTiers = message.includes("product_price_tiers");
const missingImages = message.includes("product_images");
if (missingTiers || missingImages) {
const fallbackFields = [
baseSelect,
missingTiers ? "" : "product_price_tiers(id,min_qty,max_qty,unit_price,sort_order,active)",
missingImages ? "" : "product_images(id,image_url,sort_order,is_primary)",
]
.filter(Boolean)
.join(", ");
const fallback = await supabase
.from("products")
.select(fallbackFields)
.eq("id", id)
.in("user_id", tenantIds)
.single();
data = fallback.data as typeof data;
error = fallback.error as typeof error;
}
}
if (error || !data) {
console.error("Error fetching product:", error);
setErroAoAbrir("Não encontramos este produto. Ele pode ter sido excluído.");
setFetching(false);
return;
}
/* Produto digital mora na área Produtos digitais: este editor (de produto
físico, com estoque e frete) não abre ele. */
if ((data as { product_kind?: unknown }).product_kind === "digital") {
window.location.replace(`/dashboard/digitais/produtos/${id}`);
return;
}
/* Produto novo: o rascunho nasce fora da vitrine (products/new), para não
aparecer na loja como "Novo produto" se a pessoa desistir no meio. Aqui
o editor já mostra "Exibir na vitrine" ligado, que é o padrão e o que
vale quando ela salvar pela primeira vez. */
const rascunhoNovo = new URLSearchParams(window.location.search).get("mode") === "new";
setFormData({
name: data.name,
description: descriptionToEditorHtml(data.description || ""),
price_on_request: Boolean((data as { price_on_request?: boolean | null } | null)?.price_on_request),
use_variation_price_only: Boolean((data as { use_variation_price_only?: boolean | null } | null)?.use_variation_price_only),
valor_minimo_item:
Number((data as { valor_minimo_item?: number | string | null }).valor_minimo_item) > 0
? formatMoneyInput(Number((data as { valor_minimo_item?: number | string | null }).valor_minimo_item))
: "",
valor_minimo_orcamentos: (data as { valor_minimo_orcamentos?: boolean | null }).valor_minimo_orcamentos !== false,
valor_minimo_loja: (data as { valor_minimo_loja?: boolean | null }).valor_minimo_loja !== false,
valor_minimo_pdv: (data as { valor_minimo_pdv?: boolean | null }).valor_minimo_pdv !== false,
price: Boolean((data as { price_on_request?: boolean | null } | null)?.price_on_request)
? ""
: formatMoneyInput(data.price),
estimated_base_cost: formatMoneyInput(data.estimated_base_cost),
stock: data.stock.toString(),
unit_type: data.unit_type || "unit",
category_id: data.category_id || "",
image_url: data.image_url || "",
show_in_catalog: rascunhoNovo || data.show_in_catalog !== false,
catalog_color: data.catalog_color || "#ffffff",
min_sale_qty_enabled: Boolean(
(data as { min_sale_qty_enabled?: boolean | null } | null)?.min_sale_qty_enabled
),
min_sale_qty:
(data as { min_sale_qty?: number | null } | null)?.min_sale_qty != null
? String((data as { min_sale_qty?: number | null }).min_sale_qty)
: "",
allowed_sale_qty_enabled: Boolean(
(data as { allowed_sale_qty_enabled?: boolean | null } | null)?.allowed_sale_qty_enabled
),
inventory_scope:
(data as { inventory_scope?: "product" | "option" | "variant" | null } | null)?.inventory_scope || "product",
inventory_attribute_name:
(data as { inventory_attribute_name?: string | null } | null)?.inventory_attribute_name || "",
allow_negative_stock: Boolean(
(data as { allow_negative_stock?: boolean | null } | null)?.allow_negative_stock
),
track_inventory: Boolean(
(data as { track_inventory?: boolean | null } | null)?.track_inventory
),
sku: (data as { sku?: string | null } | null)?.sku || "",
barcode: (data as { barcode?: string | null } | null)?.barcode || "",
shipping_weight_kg:
(data as { shipping_weight_kg?: number | null } | null)?.shipping_weight_kg != null
? String((data as { shipping_weight_kg?: number | null }).shipping_weight_kg)
: "",
shipping_width_cm:
(data as { shipping_width_cm?: number | null } | null)?.shipping_width_cm != null
? String((data as { shipping_width_cm?: number | null }).shipping_width_cm)
: "",
shipping_height_cm:
(data as { shipping_height_cm?: number | null } | null)?.shipping_height_cm != null
? String((data as { shipping_height_cm?: number | null }).shipping_height_cm)
: "",
shipping_length_cm:
(data as { shipping_length_cm?: number | null } | null)?.shipping_length_cm != null
? String((data as { shipping_length_cm?: number | null }).shipping_length_cm)
: "",
production_time_value:
(data as { production_time_value?: number | null } | null)?.production_time_value != null
? String((data as { production_time_value?: number | null }).production_time_value)
: "",
production_time_unit:
(data as { production_time_unit?: string | null } | null)?.production_time_unit || "business_days",
production_template_url:
(data as { production_template_url?: string | null } | null)?.production_template_url || "",
production_template_name:
(data as { production_template_name?: string | null } | null)?.production_template_name || "",
production_template_format:
(data as { production_template_format?: "pdf" | "ai" | "cdr" | null } | null)?.production_template_format || "pdf",
production_templates: normalizeProductionTemplates(
(data as { production_templates?: unknown } | null)?.production_templates,
{
production_template_url: (data as { production_template_url?: string | null } | null)?.production_template_url || null,
production_template_name: (data as { production_template_name?: string | null } | null)?.production_template_name || null,
production_template_format: (data as { production_template_format?: ProductionTemplateFormat | null } | null)?.production_template_format || null,
}
),
});
setDadosFiscais(lerDadosFiscaisDoProduto(data as unknown as Record));
setVideoDoProduto(videoDoProdutoSalvo(data as unknown as Record));
setQuantityIntervals(
hydrateQuantityIntervalsFromProduct({
allowedQuantities: (data as { allowed_sale_quantities?: unknown } | null)?.allowed_sale_quantities,
tiers: ((data as { product_price_tiers?: ProductPriceTier[] | null } | null)?.product_price_tiers || []),
fallbackUnitPrice: Number((data as { price?: number | null } | null)?.price || 0),
})
);
const mappedImages = ((data as { product_images?: Array> | null } | null)?.product_images || [])
.map((image, index) => ({
id: typeof image.id === "string" ? image.id : crypto.randomUUID(),
image_url: typeof image.image_url === "string" ? image.image_url : "",
sort_order: typeof image.sort_order === "number" ? image.sort_order : index,
is_primary: Boolean(image.is_primary),
}))
.filter((image) => Boolean(image.image_url))
.sort((a, b) => a.sort_order - b.sort_order)
.map((image, index) => ({ ...image, sort_order: index }));
if (mappedImages.length > 0) {
const hasPrimary = mappedImages.some((image) => image.is_primary);
const normalized = mappedImages.map((image, index) => ({
...image,
is_primary: hasPrimary ? image.is_primary : index === 0,
}));
setProductImages(normalized);
} else if (data.image_url) {
setProductImages([
{
id: crypto.randomUUID(),
image_url: data.image_url,
sort_order: 0,
is_primary: true,
},
]);
} else {
setProductImages([]);
}
const processesCost = ((data.product_processes as Array<{ cost_total?: number | null }> | null) || []).reduce(
(acc, p) => acc + (Number(p.cost_total) || 0),
0
);
/* Estoque v2: linha "só se a opção X" não entra no custo base (só vale
quando a opção é escolhida). Fora do v2 nenhuma linha é `se_opcao`. */
const materialsCost = custoBaseDaComposicao(
(data.product_materials as Array<{ cost_total?: number | null; quando_sai?: "sempre" | "pela_variacao" | "se_opcao" | "so_custo" | null }> | null) || []
);
const estimatedCost = Number(data.estimated_base_cost ?? 0);
setCostBreakdown({
estimated: estimatedCost,
processes: processesCost,
materials: materialsCost
});
const refW = Number(data.pricing_reference_width_m ?? 0) || null;
const refH = Number(data.pricing_reference_height_m ?? 0) || null;
setRefsDePrecificacao({ w: refW, h: refH });
/* Os minutos da ficha na unidade de venda, no espelho da conta do custo:
por peça de referência, ÷ área quando o produto é medido. É por eles
que a análise carrega os custos fixos pelo tempo. */
const minutosDaFicha = ((data.product_processes as Array<{
minutes?: number | null; setup_minutes?: number | null; consumption_base?: string | null;
}> | null) || []).reduce((acc, p) => {
const base = (p.consumption_base ?? "por_peca") as BaseDeConsumo;
const medida = medidaDaBase(base, refW ?? 0, refH ?? 0);
if (base !== "por_peca" && medida <= 0) return acc;
return acc + (Number(p.minutes) || 0) * medida + (Number(p.setup_minutes) || 0);
}, 0);
const areaRef = (refW ?? 0) * (refH ?? 0);
setMinutosFichaPorUnidade(
data.unit_type === "square_meter" && areaRef > 0 ? minutosDaFicha / areaRef : minutosDaFicha
);
/* A conta ciente de unidade: a ficha é por peça de referência, e no
produto medido a unidade de venda é o m². A soma cega dobrava o custo do
banner nascido no assistente. */
setCostTotal(custoDoProduto({
estimatedBaseCost: estimatedCost,
somaDaFicha: processesCost + materialsCost,
unitType: data.unit_type,
referenceWidthM: refW,
referenceHeightM: refH,
}));
// Load variations data
if (data.product_attributes) {
/* O saldo por opção exibido é o VIVO (product_option_stocks, que as
vendas movimentam) — o número gravado no JSON do atributo é só o
chute inicial e fica para trás a cada venda. */
const { data: liveOptionStocks } = await supabase
.from("product_option_stocks")
.select("option_id,stock,minimum_stock,reorder_point")
.eq("product_id", id)
.eq("active", true);
const liveByOptionId = new Map(
((liveOptionStocks as Array<{ option_id?: string | null; stock?: number | null; minimum_stock?: number | null; reorder_point?: number | null }> | null) || [])
.filter((row) => typeof row.option_id === "string" && row.option_id)
.map((row) => [String(row.option_id), row])
);
// Receita da opção: o vínculo opção → insumo vive em tabela própria.
const { data: liveRecipes } = await supabase
.from("product_option_recipes")
.select("option_id,material_id,qty_per_piece")
.eq("product_id", id)
.eq("active", true);
const recipeByOptionId = new Map(
((liveRecipes as Array<{ option_id?: string | null; material_id?: string | null; qty_per_piece?: number | null }> | null) || [])
.filter((row) => typeof row.option_id === "string" && row.option_id)
.map((row) => [String(row.option_id), row])
);
const attributesData = data.product_attributes as Array<{
id?: string | null;
name?: string | null;
options?: Array | null;
allow_multiple?: boolean | null;
is_required?: boolean | null;
position?: number | null;
display_style?: string | null;
show_in_store?: boolean | null;
}>;
setAttributes(
attributesData
.map((a, index) => ({
id: a.id ?? undefined,
name: a.name ?? "",
options: Array.isArray(a.options)
? a.options.map((opt) => {
if (typeof opt === "string") {
return { label: opt, price: 0, is_required: false, price_applies_per_quantity: true };
}
const live = opt.id ? liveByOptionId.get(String(opt.id)) : undefined;
const recipe = opt.id ? recipeByOptionId.get(String(opt.id)) : undefined;
return {
...opt,
...(live
? {
stock: Number(live.stock) || 0,
minimum_stock: Number(live.minimum_stock) || 0,
reorder_point: Number(live.reorder_point) || 0,
}
: {}),
material_id: recipe?.material_id ?? null,
material_qty: recipe ? Number(recipe.qty_per_piece) || 0 : 0,
price_applies_per_quantity: opt.price_applies_per_quantity !== false,
};
})
: [],
allow_multiple: a.allow_multiple ?? false,
is_required: a.is_required ?? false,
position: a.position ?? index,
display_style: a.display_style ?? null,
/* Nasce mostrando: o que já existe continua na vitrine. */
show_in_store: a.show_in_store !== false,
}))
.sort((a, b) => (a.position ?? 0) - (b.position ?? 0))
);
}
const { data: isolatedVariationsData, error: isolatedVariationsError } = await supabase
.from("product_variations")
.select("id,combination,sku,price,stock,cost_adjustment,active")
.eq("product_id", id)
.eq("active", true);
if (!isolatedVariationsError && Array.isArray(isolatedVariationsData)) {
setVariations(
isolatedVariationsData.map((v) => ({
id: v.id ?? undefined,
combination: (v.combination as Record | null) ?? {},
sku: v.sku || "",
price: v.price ?? null,
stock: v.stock ?? 0,
cost_adjustment: v.cost_adjustment ?? 0,
}))
);
} else if (data.product_variations) {
const variationsData = data.product_variations as Array<{
id?: string | null;
combination?: Record | null;
sku?: string | null;
price?: number | null;
stock?: number | null;
cost_adjustment?: number | null;
active?: boolean | null;
}>;
setVariations(
variationsData
.filter((v) => v.active !== false)
.map((v) => ({
id: v.id ?? undefined,
combination: v.combination ?? {},
sku: v.sku || "",
price: v.price ?? null,
stock: v.stock ?? 0,
cost_adjustment: v.cost_adjustment ?? 0,
}))
);
}
setCustomFields(
normalizeProductCustomFieldsConfig(
(data as { custom_fields_config?: unknown } | null)?.custom_fields_config
)
);
if (data.product_price_tiers) {
const tiersData = data.product_price_tiers as Array<{
id?: string | null;
min_qty?: number | null;
max_qty?: number | null;
unit_price?: number | null;
sort_order?: number | null;
active?: boolean | null;
}>;
setPriceTiers(
tiersData
.map((tier, index) => ({
id: tier.id ?? undefined,
min_qty: Number(tier.min_qty) || 0,
max_qty: tier.max_qty === null || tier.max_qty === undefined ? null : Number(tier.max_qty) || 0,
unit_price: Number(tier.unit_price) || 0,
sort_order: typeof tier.sort_order === "number" ? tier.sort_order : index,
active: tier.active ?? true,
}))
.sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0))
);
} else {
setPriceTiers([]);
}
setFetching(false);
}, []);
useEffect(() => {
let cancelled = false;
async function init() {
const params = await props.params;
if (cancelled) return;
setProductId(params.id);
await fetchCategories();
await fetchProduct(params.id);
}
init();
return () => {
cancelled = true;
};
}, [fetchCategories, fetchProduct, props.params]);
function handleProductImagesChange(nextImages: ProductImageItem[]) {
setProductImages(nextImages);
setFormData((prev) => ({
...prev,
image_url: getPrimaryProductImageUrl(nextImages, prev.image_url),
}));
}
const parsedQuantityIntervals = useMemo(
() => parseQuantityIntervalsDrafts(quantityIntervals),
[quantityIntervals]
);
const intervalPricingPreview = useMemo(
() => buildAllowedQuantityPricing(parsedQuantityIntervals.intervals),
[parsedQuantityIntervals.intervals]
);
function addQuantityInterval() {
const nextDraft = createQuantityIntervalDraft({
quantity: newIntervalQty,
price: newIntervalPrice,
});
const parsed = parseQuantityIntervalsDrafts([nextDraft]);
if (parsed.error) {
setErroDoIntervalo(parsed.error);
return;
}
if (parsed.intervals.length === 0) {
setErroDoIntervalo("Preencha a quantidade e o valor antes de adicionar.");
return;
}
const nextQuantity = parsed.intervals[0].quantity;
const alreadyExists = quantityIntervals.some((interval) => {
const current = parseQuantityIntervalsDrafts([interval]);
return (
!current.error &&
current.intervals.length > 0 &&
Math.abs(current.intervals[0].quantity - nextQuantity) <= 0.000001
);
});
if (alreadyExists) {
setErroDoIntervalo("Já existe um card com essa quantidade.");
return;
}
setQuantityIntervals((prev) => [...prev, nextDraft]);
setNewIntervalQty("");
setNewIntervalPrice("");
setErroDoIntervalo(null);
}
function removeQuantityInterval(id: string) {
setQuantityIntervals((prev) => prev.filter((interval) => interval.id !== id));
}
function startEditQuantityInterval(interval: QuantityIntervalDraft) {
setEditingIntervalId(interval.id);
setEditingIntervalQty(interval.quantity ?? "");
setEditingIntervalPrice(interval.price ?? "");
}
function saveEditQuantityInterval(id: string) {
const nextDraft = createQuantityIntervalDraft({
quantity: editingIntervalQty,
price: editingIntervalPrice,
});
const parsed = parseQuantityIntervalsDrafts([nextDraft]);
if (parsed.error) {
setErroDoIntervalo(parsed.error);
return;
}
if (parsed.intervals.length === 0) {
setErroDoIntervalo("Preencha a quantidade e o valor antes de salvar.");
return;
}
const nextQuantity = parsed.intervals[0].quantity;
const alreadyExists = quantityIntervals.some((interval) => {
if (interval.id === id) return false;
const current = parseQuantityIntervalsDrafts([interval]);
return (
!current.error &&
current.intervals.length > 0 &&
Math.abs(current.intervals[0].quantity - nextQuantity) <= 0.000001
);
});
if (alreadyExists) {
setErroDoIntervalo("Já existe um card com essa quantidade.");
return;
}
setQuantityIntervals((prev) =>
prev.map((interval) =>
interval.id === id
? { ...interval, quantity: nextDraft.quantity, price: nextDraft.price }
: interval
)
);
setEditingIntervalId(null);
setEditingIntervalQty("");
setEditingIntervalPrice("");
setErroDoIntervalo(null);
}
function handleOptionStockUpdate(optionId: string, newStock: number) {
setAttributes((prev) =>
prev.map((attribute) => ({
...attribute,
options: (attribute.options || []).map((option) => {
if (!option || typeof option === "string") return option;
if (option.id !== optionId) return option;
return { ...option, stock: newStock };
}),
}))
);
}
function handleVariationStockUpdate(variationId: string, newStock: number) {
setVariations((prev) =>
prev.map((variation) => (variation.id === variationId ? { ...variation, stock: newStock } : variation))
);
}
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
setErroDaTela(null);
setAvisoDaTela(null);
if (!productId) return;
setLoading(true);
/* Toda saída antes do envio devolve o botão. Antes, dois avisos do
estoque saíam sem isso e o Salvar ficava preso em "Salvando..." até
recarregar a página, perdendo o que tinha sido editado. */
const recusar = (texto: string) => {
setErroDaTela(texto);
setLoading(false);
};
if (
!formData.price_on_request &&
!formData.allowed_sale_qty_enabled &&
!formData.use_variation_price_only &&
!formData.price
) {
recusar("Informe o preço de venda. Se ele depende de cada pedido, ligue “Sob consulta”.");
return;
}
const price = parseMoneyInput(formData.price);
const estimatedBaseCost = parseMoneyInput(formData.estimated_base_cost);
const minSaleQty = parseMinSaleQtyInput(formData.min_sale_qty);
const shippingWeightKg = parseShippingNumberInput(formData.shipping_weight_kg, 3);
const shippingWidthCm = parseShippingNumberInput(formData.shipping_width_cm, 2);
const shippingHeightCm = parseShippingNumberInput(formData.shipping_height_cm, 2);
const shippingLengthCm = parseShippingNumberInput(formData.shipping_length_cm, 2);
const productionTimeValue = parseMinSaleQtyInput(formData.production_time_value);
const preferredLegacyTemplate =
findProductionTemplate(formData.production_templates, "pdf") ||
findProductionTemplate(formData.production_templates, "ai") ||
findProductionTemplate(formData.production_templates, "cdr");
if (parsedQuantityIntervals.error) {
recusar(parsedQuantityIntervals.error);
return;
}
if (formData.allowed_sale_qty_enabled && parsedQuantityIntervals.intervals.length === 0) {
recusar("Adicione ao menos um card de quantidade + valor.");
return;
}
if (formData.min_sale_qty_enabled && minSaleQty === null) {
recusar("Informe uma quantidade mínima de venda válida.");
return;
}
if (formData.production_time_value.trim() && productionTimeValue === null) {
recusar("Informe um prazo de produção válido.");
return;
}
const derivedIntervalPricing = intervalPricingPreview;
const allowedSaleQuantities = formData.allowed_sale_qty_enabled ? derivedIntervalPricing.allowedQuantities : [];
const tiersToPersist = formData.allowed_sale_qty_enabled ? derivedIntervalPricing.tiers : priceTiers;
if (!formData.price_on_request) {
const tierValidation = validatePriceTiersAgainstSaleLimits(tiersToPersist, {
min_sale_qty_enabled: formData.min_sale_qty_enabled,
min_sale_qty: formData.min_sale_qty_enabled ? minSaleQty : null,
max_sale_qty_enabled: false,
max_sale_qty: null,
allowed_sale_qty_enabled: formData.allowed_sale_qty_enabled,
allowed_sale_quantities: allowedSaleQuantities,
});
if (tierValidation.error) {
recusar(tierValidation.error);
return;
}
}
if (!noEstoqueV2 && formData.track_inventory && formData.inventory_scope === "option" && !(formData.inventory_attribute_name || "").trim()) {
recusar("Com estoque por opção, escolha qual atributo controla o estoque (ex.: Cor) no card Estoque.");
return;
}
if (!noEstoqueV2 && formData.track_inventory && formData.inventory_scope === "variant") {
const multiplos = attributes.filter((a) => a.allow_multiple).map((a) => a.name || "atributo");
if (multiplos.length > 0) {
recusar(
`Com estoque por combinação, cada atributo aceita uma escolha só — senão a baixa não sabe qual combinação usar. Desligue "Múltipla escolha" em: ${multiplos.join(", ")}.`
);
return;
}
}
const problemaFiscal = problemaNosDadosFiscais(dadosFiscais);
if (problemaFiscal) {
recusar(problemaFiscal);
return;
}
const res = await fetch("/api/products", {
method: "PATCH",
headers: { "content-type": "application/json" },
body: JSON.stringify({
id: productId,
patch: {
name: formData.name,
description: formData.description,
price: formData.price_on_request ? 0 : (isNaN(price) ? 0 : price),
price_on_request: formData.price_on_request,
use_variation_price_only: formData.use_variation_price_only,
valor_minimo_item: parseMoneyInput(formData.valor_minimo_item) > 0 ? parseMoneyInput(formData.valor_minimo_item) : null,
valor_minimo_orcamentos: formData.valor_minimo_orcamentos,
valor_minimo_loja: formData.valor_minimo_loja,
valor_minimo_pdv: formData.valor_minimo_pdv,
estimated_base_cost: isNaN(estimatedBaseCost) ? 0 : estimatedBaseCost,
unit_type: formData.unit_type,
category_id: formData.category_id || null,
image_url: getPrimaryProductImageUrl(productImages, formData.image_url) || null,
images: productImages,
...videoParaSalvar(videoDoProduto),
show_in_catalog: formData.show_in_catalog,
catalog_color: formData.catalog_color,
min_sale_qty_enabled: formData.min_sale_qty_enabled,
min_sale_qty: formData.min_sale_qty_enabled ? minSaleQty : null,
max_sale_qty_enabled: false,
max_sale_qty: null,
allowed_sale_qty_enabled: formData.allowed_sale_qty_enabled,
allowed_sale_quantities: formData.allowed_sale_qty_enabled ? allowedSaleQuantities : null,
sku: formData.sku || null,
barcode: formData.barcode || null,
...patchFiscalDoProduto(dadosFiscais),
shipping_weight_kg: shippingWeightKg,
shipping_width_cm: shippingWidthCm,
shipping_height_cm: shippingHeightCm,
shipping_length_cm: shippingLengthCm,
production_time_value: productionTimeValue,
production_time_unit: productionTimeValue ? formData.production_time_unit : null,
production_template_url: preferredLegacyTemplate?.url || null,
production_template_name: preferredLegacyTemplate?.name || null,
production_template_format: preferredLegacyTemplate?.format || null,
production_templates: formData.production_templates,
/* No estoque novo quem decide isto é a aba Estoque (estoque_configurar_produto):
o salvar do produto não regrava o controle antigo. */
...(noEstoqueV2
? {}
: {
track_inventory: formData.track_inventory,
inventory_scope: formData.inventory_scope,
inventory_attribute_name:
formData.inventory_scope === "option" ? (formData.inventory_attribute_name || null) : null,
allow_negative_stock: formData.allow_negative_stock,
}),
attributes,
variations,
custom_fields_config: customFields,
optional_service_links: vinculosDeServico.map((v) => ({ service_id: v.serviceId, enabled: v.ligado })),
price_tiers: tiersToPersist,
},
}),
}).catch(() => null);
if (!res) {
recusar("Não foi possível falar com o sistema. Confira a internet e tente de novo.");
return;
}
const json = (await res.json().catch(() => null)) as { error?: string } | null;
if (!res.ok) {
setErroDaTela("Não foi possível salvar: " + (json?.error || "falha ao atualizar o produto."));
} else {
setAvisoDaTela("Produto salvo.");
/* Salvo uma vez, deixou de ser rascunho: o endereço perde o "mode=new"
para quem recarregar a página ver o que foi gravado (inclusive a
vitrine desligada, se foi a escolha). */
if (isNewMode) {
const endereco = new URL(window.location.href);
endereco.searchParams.delete("mode");
window.history.replaceState(window.history.state, "", `${endereco.pathname}${endereco.search}`);
}
}
setLoading(false);
}
if (erroAoAbrir) {
return (