1272 lines
47 KiB
TypeScript
1272 lines
47 KiB
TypeScript
|
import React, { useState, useEffect, useCallback } from "react";
|
||
|
|
import { Product, OrderItem } from "../types";
|
||
|
|
import FilterSidebar from "../components/FilterSidebar";
|
||
|
|
import Baldinho from "../components/Baldinho";
|
||
|
|
import ProductDetailModal from "../components/ProductDetailModal";
|
||
|
|
import ProductCard from "../components/ProductCard";
|
||
|
|
import ProductListItem from "../components/ProductListItem";
|
||
|
|
import SearchInput from "../components/SearchInput";
|
||
|
|
import CategoryCard from "../components/CategoryCard";
|
||
|
|
import LoadingSpinner from "../components/LoadingSpinner";
|
||
|
|
import NoImagePlaceholder from "../components/NoImagePlaceholder";
|
||
|
|
import NoData from "../components/NoData";
|
||
|
|
import {
|
||
|
|
productService,
|
||
|
|
SaleProduct,
|
||
|
|
FilterProduct,
|
||
|
|
} from "../src/services/product.service";
|
||
|
|
import { authService } from "../src/services/auth.service";
|
||
|
|
|
||
|
|
interface ProductSearchViewProps {
|
||
|
|
onAddToCart: (p: Product | OrderItem) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ProductSearchView: React.FC<ProductSearchViewProps> = ({
|
||
|
|
onAddToCart,
|
||
|
|
}) => {
|
||
|
|
const [searchTerm, setSearchTerm] = useState("");
|
||
|
|
const [showResults, setShowResults] = useState(false);
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
const [searchResults, setSearchResults] = useState<Product[]>([]);
|
||
|
|
const [error, setError] = useState<string | null>(null);
|
||
|
|
const [selectedDeliveryDate, setSelectedDeliveryDate] = useState("");
|
||
|
|
const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
|
||
|
|
const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
|
||
|
|
const [initialQuantity, setInitialQuantity] = useState(1);
|
||
|
|
const [viewMode, setViewMode] = useState<"grid" | "list">("grid"); // Modo de visualização
|
||
|
|
const [productQuantities, setProductQuantities] = useState<
|
||
|
|
Record<string, number>
|
||
|
|
>({}); // Quantidades por produto no modo lista
|
||
|
|
const [isFiltersOpen, setIsFiltersOpen] = useState(false); // Estado para drawer de filtros em mobile
|
||
|
|
|
||
|
|
// Inicializar quantidades quando os produtos mudam
|
||
|
|
useEffect(() => {
|
||
|
|
setProductQuantities((prev) => {
|
||
|
|
const newQuantities = { ...prev };
|
||
|
|
searchResults.forEach((product) => {
|
||
|
|
if (!newQuantities[product.id]) {
|
||
|
|
newQuantities[product.id] = 1;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return newQuantities;
|
||
|
|
});
|
||
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
|
|
}, [searchResults.length, searchResults.map((p) => p.id).join(",")]);
|
||
|
|
|
||
|
|
// Estados para filtros
|
||
|
|
const [selectedDepartment, setSelectedDepartment] = useState("");
|
||
|
|
const [selectedBrands, setSelectedBrands] = useState<string[]>([]);
|
||
|
|
const [availableBrands, setAvailableBrands] = useState<string[]>([]); // Marcas disponíveis extraídas dos produtos
|
||
|
|
const [filters, setFilters] = useState({
|
||
|
|
onlyInStock: false,
|
||
|
|
stockBranch: "",
|
||
|
|
onPromotion: false,
|
||
|
|
discountRange: [0, 100] as [number, number],
|
||
|
|
priceDropped: false,
|
||
|
|
opportunities: false,
|
||
|
|
unmissableOffers: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Converte SaleProduct da API para Product do componente
|
||
|
|
* Segue o mesmo padrão do Angular
|
||
|
|
*/
|
||
|
|
const mapSaleProductToProduct = (saleProduct: SaleProduct): Product => {
|
||
|
|
// Garantir que temos pelo menos um ID válido
|
||
|
|
const productId =
|
||
|
|
saleProduct.idProduct?.toString() || saleProduct.id?.toString() || "";
|
||
|
|
if (!productId) {
|
||
|
|
console.warn("Produto sem ID válido:", saleProduct);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Calcular desconto se houver diferença entre preço original e promocional
|
||
|
|
let discount: number | undefined = saleProduct.offPercent;
|
||
|
|
const listPrice = saleProduct.listPrice || 0;
|
||
|
|
const salePrice = saleProduct.salePrice || saleProduct.salePromotion || 0;
|
||
|
|
if (!discount && listPrice > 0 && salePrice > 0 && salePrice < listPrice) {
|
||
|
|
discount = Math.round(((listPrice - salePrice) / listPrice) * 100);
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
id: productId || `product-${Math.random()}`,
|
||
|
|
code: productId || "",
|
||
|
|
name:
|
||
|
|
saleProduct.title ||
|
||
|
|
saleProduct.smallDescription ||
|
||
|
|
saleProduct.description ||
|
||
|
|
"Produto sem nome",
|
||
|
|
description:
|
||
|
|
saleProduct.description || saleProduct.smallDescription || undefined,
|
||
|
|
price: salePrice || listPrice || 0,
|
||
|
|
originalPrice:
|
||
|
|
listPrice > 0 && salePrice > 0 && salePrice < listPrice
|
||
|
|
? listPrice
|
||
|
|
: undefined,
|
||
|
|
discount: discount,
|
||
|
|
mark: saleProduct.brand || "Sem marca",
|
||
|
|
image: saleProduct.urlImage || "",
|
||
|
|
stockLocal: saleProduct.store_stock || saleProduct.stock || 0,
|
||
|
|
stockAvailable: saleProduct.stock || saleProduct.store_stock || 0,
|
||
|
|
stockGeneral: saleProduct.full_stock || saleProduct.stock || 0,
|
||
|
|
ean: saleProduct.ean || undefined,
|
||
|
|
model: saleProduct.idProduct?.toString() || undefined,
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Busca produtos por departamento/categoria
|
||
|
|
* Segue o padrão do Angular: getProductByFilter com POST e urlCategory no body
|
||
|
|
* Request: POST /sales/products
|
||
|
|
* Body: { urlCategory: "ferragens/cadeados", brands: [], promotion: false, ... }
|
||
|
|
*/
|
||
|
|
const handleDepartmentChange = useCallback(async (urlDepartment: string) => {
|
||
|
|
try {
|
||
|
|
setLoading(true);
|
||
|
|
setError(null);
|
||
|
|
setShowResults(true); // Mostrar resultados ao clicar em departamento
|
||
|
|
setSearchTerm(""); // Limpar termo de busca
|
||
|
|
|
||
|
|
const store = authService.getStore();
|
||
|
|
if (!store) {
|
||
|
|
throw new Error("Loja não encontrada. Faça login novamente.");
|
||
|
|
}
|
||
|
|
|
||
|
|
// Criar FilterProduct seguindo o padrão do Angular
|
||
|
|
// No Angular: { brands: [], text: null, promotion: true, markdown: false, oportunity: false, offers: false, urlCategory: "ferragens/cadeados" }
|
||
|
|
const filterProduct = {
|
||
|
|
brands: [] as string[],
|
||
|
|
text: null as string | null,
|
||
|
|
promotion: false,
|
||
|
|
markdown: false,
|
||
|
|
oportunity: false,
|
||
|
|
offers: false,
|
||
|
|
urlCategory: urlDepartment, // URL do departamento/categoria
|
||
|
|
};
|
||
|
|
|
||
|
|
// Buscar produtos usando POST /sales/products com urlCategory no body
|
||
|
|
// Segue exatamente o padrão do Angular: getProductByFilter(store, page, size, filterProduct)
|
||
|
|
const saleProducts = await productService.getProductByFilter(
|
||
|
|
store,
|
||
|
|
1, // page
|
||
|
|
100, // size
|
||
|
|
filterProduct
|
||
|
|
);
|
||
|
|
|
||
|
|
if (!Array.isArray(saleProducts) || saleProducts.length === 0) {
|
||
|
|
setSearchResults([]);
|
||
|
|
setError(null);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Converter SaleProduct[] para Product[]
|
||
|
|
const mappedProducts = saleProducts.map(mapSaleProductToProduct);
|
||
|
|
setSearchResults(mappedProducts);
|
||
|
|
|
||
|
|
// Extrair marcas dos produtos retornados (seguindo padrão do Angular)
|
||
|
|
const uniqueBrands = Array.from(
|
||
|
|
new Set(
|
||
|
|
mappedProducts
|
||
|
|
.map((p) => p.mark)
|
||
|
|
.filter((b) => b && b !== "Sem marca")
|
||
|
|
)
|
||
|
|
).sort((a, b) => {
|
||
|
|
// Ordenar como no Angular: remover '#' e ordenar alfabeticamente
|
||
|
|
const brandA = a.replace("#", "").toLowerCase();
|
||
|
|
const brandB = b.replace("#", "").toLowerCase();
|
||
|
|
return brandA < brandB ? -1 : brandA > brandB ? 1 : 0;
|
||
|
|
});
|
||
|
|
|
||
|
|
// Atualizar marcas disponíveis
|
||
|
|
setAvailableBrands(uniqueBrands);
|
||
|
|
} catch (err: any) {
|
||
|
|
console.error("Erro ao buscar produtos por departamento:", err);
|
||
|
|
setError(err.message || "Erro ao buscar produtos. Tente novamente.");
|
||
|
|
setSearchResults([]);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Aplica os filtros selecionados e busca produtos
|
||
|
|
* Segue EXATAMENTE o padrão do Angular: getFilterProducts()
|
||
|
|
* No Angular (linha 739-781):
|
||
|
|
* 1. Atualiza this.filters com os valores dos checkboxes
|
||
|
|
* 2. Limpa produtos atuais
|
||
|
|
* 3. Chama getProductByFilter com os filtros
|
||
|
|
* 4. Extrai marcas dos produtos retornados
|
||
|
|
*/
|
||
|
|
const handleApplyFilters = useCallback(async () => {
|
||
|
|
try {
|
||
|
|
setLoading(true);
|
||
|
|
setError(null);
|
||
|
|
setShowResults(true); // Mostrar resultados ao aplicar filtros
|
||
|
|
|
||
|
|
const store = authService.getStore();
|
||
|
|
if (!store) {
|
||
|
|
throw new Error("Loja não encontrada. Faça login novamente.");
|
||
|
|
}
|
||
|
|
|
||
|
|
// Construir FilterProduct seguindo EXATAMENTE o padrão do Angular
|
||
|
|
// No Angular (linha 740-746):
|
||
|
|
// this.filters.promotion = this.productPromotion;
|
||
|
|
// this.filters.markdown = this.markdown;
|
||
|
|
// this.filters.oportunity = this.oportunity;
|
||
|
|
// this.filters.offers = this.offers;
|
||
|
|
// this.filters.onlyWithStock = this.onlyWithStock;
|
||
|
|
// this.filters.percentOffMin = this.percentOff[0];
|
||
|
|
// this.filters.percentOffMax = this.percentOff[1];
|
||
|
|
const filterProduct: FilterProduct = {
|
||
|
|
brands: selectedBrands.length > 0 ? selectedBrands : [],
|
||
|
|
text: searchTerm.trim() || null,
|
||
|
|
urlCategory: selectedDepartment || null,
|
||
|
|
promotion: filters.onPromotion,
|
||
|
|
markdown: filters.priceDropped,
|
||
|
|
oportunity: filters.opportunities,
|
||
|
|
offers: filters.unmissableOffers,
|
||
|
|
onlyWithStock: filters.onlyInStock,
|
||
|
|
storeStock: filters.stockBranch || null,
|
||
|
|
percentOffMin: filters.discountRange[0],
|
||
|
|
percentOffMax: filters.discountRange[1],
|
||
|
|
};
|
||
|
|
|
||
|
|
// Limpar produtos atuais (seguindo padrão do Angular: linha 747-748)
|
||
|
|
setSearchResults([]);
|
||
|
|
|
||
|
|
// Buscar produtos usando POST /sales/products com filtros no body
|
||
|
|
// Segue exatamente o padrão do Angular: getProductByFilter(store, page, size, filterProduct)
|
||
|
|
const saleProducts = await productService.getProductByFilter(
|
||
|
|
store,
|
||
|
|
1, // page
|
||
|
|
100, // size
|
||
|
|
filterProduct
|
||
|
|
);
|
||
|
|
|
||
|
|
if (!Array.isArray(saleProducts) || saleProducts.length === 0) {
|
||
|
|
setSearchResults([]);
|
||
|
|
setError(null);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Converter SaleProduct[] para Product[]
|
||
|
|
const mappedProducts = saleProducts.map(mapSaleProductToProduct);
|
||
|
|
setSearchResults(mappedProducts);
|
||
|
|
|
||
|
|
// Extrair marcas dos produtos retornados (seguindo padrão do Angular: linha 760-779)
|
||
|
|
// No Angular: ordena produtos por marca e extrai marcas únicas
|
||
|
|
const uniqueBrands = Array.from(
|
||
|
|
new Set(
|
||
|
|
mappedProducts
|
||
|
|
.map((p) => p.mark)
|
||
|
|
.filter((b) => b && b !== "Sem marca")
|
||
|
|
)
|
||
|
|
).sort((a, b) => {
|
||
|
|
// Ordenar como no Angular: remover '#' e ordenar alfabeticamente
|
||
|
|
const brandA = a.replace("#", "").toLowerCase();
|
||
|
|
const brandB = b.replace("#", "").toLowerCase();
|
||
|
|
return brandA < brandB ? -1 : brandA > brandB ? 1 : 0;
|
||
|
|
});
|
||
|
|
|
||
|
|
// Atualizar marcas disponíveis (seguindo padrão do Angular: linha 760)
|
||
|
|
// No Angular: this.brands = []; e depois popula com os produtos
|
||
|
|
setAvailableBrands(uniqueBrands);
|
||
|
|
|
||
|
|
// Limpar seleção de marcas quando novos produtos são carregados
|
||
|
|
// (opcional, seguindo padrão do Angular onde marcas são resetadas)
|
||
|
|
// setSelectedBrands([]);
|
||
|
|
} catch (err: any) {
|
||
|
|
console.error("Erro ao aplicar filtros:", err);
|
||
|
|
setError(err.message || "Erro ao aplicar filtros. Tente novamente.");
|
||
|
|
setSearchResults([]);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
}, [
|
||
|
|
selectedDepartment,
|
||
|
|
selectedBrands,
|
||
|
|
filters,
|
||
|
|
searchTerm,
|
||
|
|
mapSaleProductToProduct,
|
||
|
|
]);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Filtra produtos por promoção ("DE" / "POR")
|
||
|
|
* Segue o padrão do Angular: filterPromotion()
|
||
|
|
* No Angular: define promotion: true e os outros como false, depois navega para product-list
|
||
|
|
*/
|
||
|
|
const handleFilterPromotion = useCallback(async () => {
|
||
|
|
try {
|
||
|
|
setLoading(true);
|
||
|
|
setError(null);
|
||
|
|
setShowResults(true);
|
||
|
|
setSearchTerm(""); // Limpar termo de busca
|
||
|
|
setSelectedDepartment(""); // Limpar departamento selecionado
|
||
|
|
setSelectedBrands([]); // Limpar marcas selecionadas
|
||
|
|
|
||
|
|
// Atualizar filtros: promotion = true, outros = false
|
||
|
|
setFilters({
|
||
|
|
onlyInStock: false,
|
||
|
|
stockBranch: "",
|
||
|
|
onPromotion: true, // "DE" / "POR"
|
||
|
|
discountRange: [0, 100],
|
||
|
|
priceDropped: false,
|
||
|
|
opportunities: false,
|
||
|
|
unmissableOffers: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
const store = authService.getStore();
|
||
|
|
if (!store) {
|
||
|
|
throw new Error("Loja não encontrada. Faça login novamente.");
|
||
|
|
}
|
||
|
|
|
||
|
|
// Construir FilterProduct com promotion: true
|
||
|
|
const filterProduct: FilterProduct = {
|
||
|
|
brands: [],
|
||
|
|
text: null,
|
||
|
|
urlCategory: null,
|
||
|
|
promotion: true, // "DE" / "POR"
|
||
|
|
markdown: false,
|
||
|
|
oportunity: false,
|
||
|
|
offers: false,
|
||
|
|
onlyWithStock: false,
|
||
|
|
storeStock: null,
|
||
|
|
percentOffMin: 0,
|
||
|
|
percentOffMax: 100,
|
||
|
|
};
|
||
|
|
|
||
|
|
setSearchResults([]);
|
||
|
|
|
||
|
|
const saleProducts = await productService.getProductByFilter(
|
||
|
|
store,
|
||
|
|
1,
|
||
|
|
100,
|
||
|
|
filterProduct
|
||
|
|
);
|
||
|
|
|
||
|
|
if (!Array.isArray(saleProducts) || saleProducts.length === 0) {
|
||
|
|
setSearchResults([]);
|
||
|
|
setError(null); // Não é um erro, apenas estado vazio
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const mappedProducts = saleProducts.map(mapSaleProductToProduct);
|
||
|
|
setSearchResults(mappedProducts);
|
||
|
|
|
||
|
|
// Extrair marcas
|
||
|
|
const uniqueBrands = Array.from(
|
||
|
|
new Set(
|
||
|
|
mappedProducts
|
||
|
|
.map((p) => p.mark)
|
||
|
|
.filter((b) => b && b !== "Sem marca")
|
||
|
|
)
|
||
|
|
).sort((a, b) => {
|
||
|
|
const brandA = a.replace("#", "").toLowerCase();
|
||
|
|
const brandB = b.replace("#", "").toLowerCase();
|
||
|
|
return brandA < brandB ? -1 : brandA > brandB ? 1 : 0;
|
||
|
|
});
|
||
|
|
setAvailableBrands(uniqueBrands);
|
||
|
|
} catch (err: any) {
|
||
|
|
console.error("Erro ao filtrar produtos em promoção:", err);
|
||
|
|
setError(err.message || "Erro ao buscar produtos. Tente novamente.");
|
||
|
|
setSearchResults([]);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
}, [mapSaleProductToProduct]);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Filtra produtos que baixaram de preço
|
||
|
|
* Segue o padrão do Angular: filterMarkdown()
|
||
|
|
*/
|
||
|
|
const handleFilterMarkdown = useCallback(async () => {
|
||
|
|
try {
|
||
|
|
setLoading(true);
|
||
|
|
setError(null);
|
||
|
|
setShowResults(true);
|
||
|
|
setSearchTerm("");
|
||
|
|
setSelectedDepartment("");
|
||
|
|
setSelectedBrands([]);
|
||
|
|
|
||
|
|
setFilters({
|
||
|
|
onlyInStock: false,
|
||
|
|
stockBranch: "",
|
||
|
|
onPromotion: false,
|
||
|
|
discountRange: [0, 100],
|
||
|
|
priceDropped: true, // BAIXARAM DE PREÇO
|
||
|
|
opportunities: false,
|
||
|
|
unmissableOffers: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
const store = authService.getStore();
|
||
|
|
if (!store) {
|
||
|
|
throw new Error("Loja não encontrada. Faça login novamente.");
|
||
|
|
}
|
||
|
|
|
||
|
|
const filterProduct: FilterProduct = {
|
||
|
|
brands: [],
|
||
|
|
text: null,
|
||
|
|
urlCategory: null,
|
||
|
|
promotion: false,
|
||
|
|
markdown: true, // BAIXARAM DE PREÇO
|
||
|
|
oportunity: false,
|
||
|
|
offers: false,
|
||
|
|
onlyWithStock: false,
|
||
|
|
storeStock: null,
|
||
|
|
percentOffMin: 0,
|
||
|
|
percentOffMax: 100,
|
||
|
|
};
|
||
|
|
|
||
|
|
setSearchResults([]);
|
||
|
|
|
||
|
|
const saleProducts = await productService.getProductByFilter(
|
||
|
|
store,
|
||
|
|
1,
|
||
|
|
100,
|
||
|
|
filterProduct
|
||
|
|
);
|
||
|
|
|
||
|
|
if (!Array.isArray(saleProducts) || saleProducts.length === 0) {
|
||
|
|
setSearchResults([]);
|
||
|
|
setError(null);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const mappedProducts = saleProducts.map(mapSaleProductToProduct);
|
||
|
|
setSearchResults(mappedProducts);
|
||
|
|
|
||
|
|
const uniqueBrands = Array.from(
|
||
|
|
new Set(
|
||
|
|
mappedProducts
|
||
|
|
.map((p) => p.mark)
|
||
|
|
.filter((b) => b && b !== "Sem marca")
|
||
|
|
)
|
||
|
|
).sort((a, b) => {
|
||
|
|
const brandA = a.replace("#", "").toLowerCase();
|
||
|
|
const brandB = b.replace("#", "").toLowerCase();
|
||
|
|
return brandA < brandB ? -1 : brandA > brandB ? 1 : 0;
|
||
|
|
});
|
||
|
|
setAvailableBrands(uniqueBrands);
|
||
|
|
} catch (err: any) {
|
||
|
|
console.error("Erro ao filtrar produtos que baixaram de preço:", err);
|
||
|
|
setError(err.message || "Erro ao buscar produtos. Tente novamente.");
|
||
|
|
setSearchResults([]);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
}, [mapSaleProductToProduct]);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Filtra produtos em oportunidade
|
||
|
|
* Segue o padrão do Angular: filterOportunity()
|
||
|
|
*/
|
||
|
|
const handleFilterOpportunity = useCallback(async () => {
|
||
|
|
try {
|
||
|
|
setLoading(true);
|
||
|
|
setError(null);
|
||
|
|
setShowResults(true);
|
||
|
|
setSearchTerm("");
|
||
|
|
setSelectedDepartment("");
|
||
|
|
setSelectedBrands([]);
|
||
|
|
|
||
|
|
setFilters({
|
||
|
|
onlyInStock: false,
|
||
|
|
stockBranch: "",
|
||
|
|
onPromotion: false,
|
||
|
|
discountRange: [0, 100],
|
||
|
|
priceDropped: false,
|
||
|
|
opportunities: true, // OPORTUNIDADE
|
||
|
|
unmissableOffers: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
const store = authService.getStore();
|
||
|
|
if (!store) {
|
||
|
|
throw new Error("Loja não encontrada. Faça login novamente.");
|
||
|
|
}
|
||
|
|
|
||
|
|
const filterProduct: FilterProduct = {
|
||
|
|
brands: [],
|
||
|
|
text: null,
|
||
|
|
urlCategory: null,
|
||
|
|
promotion: false,
|
||
|
|
markdown: false,
|
||
|
|
oportunity: true, // OPORTUNIDADE
|
||
|
|
offers: false,
|
||
|
|
onlyWithStock: false,
|
||
|
|
storeStock: null,
|
||
|
|
percentOffMin: 0,
|
||
|
|
percentOffMax: 100,
|
||
|
|
};
|
||
|
|
|
||
|
|
setSearchResults([]);
|
||
|
|
|
||
|
|
const saleProducts = await productService.getProductByFilter(
|
||
|
|
store,
|
||
|
|
1,
|
||
|
|
100,
|
||
|
|
filterProduct
|
||
|
|
);
|
||
|
|
|
||
|
|
if (!Array.isArray(saleProducts) || saleProducts.length === 0) {
|
||
|
|
setSearchResults([]);
|
||
|
|
setError(null);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const mappedProducts = saleProducts.map(mapSaleProductToProduct);
|
||
|
|
setSearchResults(mappedProducts);
|
||
|
|
|
||
|
|
const uniqueBrands = Array.from(
|
||
|
|
new Set(
|
||
|
|
mappedProducts
|
||
|
|
.map((p) => p.mark)
|
||
|
|
.filter((b) => b && b !== "Sem marca")
|
||
|
|
)
|
||
|
|
).sort((a, b) => {
|
||
|
|
const brandA = a.replace("#", "").toLowerCase();
|
||
|
|
const brandB = b.replace("#", "").toLowerCase();
|
||
|
|
return brandA < brandB ? -1 : brandA > brandB ? 1 : 0;
|
||
|
|
});
|
||
|
|
setAvailableBrands(uniqueBrands);
|
||
|
|
} catch (err: any) {
|
||
|
|
console.error("Erro ao filtrar oportunidades:", err);
|
||
|
|
setError(err.message || "Erro ao buscar produtos. Tente novamente.");
|
||
|
|
setSearchResults([]);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
}, [mapSaleProductToProduct]);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Filtra ofertas imperdíveis
|
||
|
|
* Segue o padrão do Angular: filterOffers()
|
||
|
|
*/
|
||
|
|
const handleFilterOffers = useCallback(async () => {
|
||
|
|
try {
|
||
|
|
setLoading(true);
|
||
|
|
setError(null);
|
||
|
|
setShowResults(true);
|
||
|
|
setSearchTerm("");
|
||
|
|
setSelectedDepartment("");
|
||
|
|
setSelectedBrands([]);
|
||
|
|
|
||
|
|
setFilters({
|
||
|
|
onlyInStock: false,
|
||
|
|
stockBranch: "",
|
||
|
|
onPromotion: false,
|
||
|
|
discountRange: [0, 100],
|
||
|
|
priceDropped: false,
|
||
|
|
opportunities: false,
|
||
|
|
unmissableOffers: true, // OFERTAS IMPERDÍVEIS
|
||
|
|
});
|
||
|
|
|
||
|
|
const store = authService.getStore();
|
||
|
|
if (!store) {
|
||
|
|
throw new Error("Loja não encontrada. Faça login novamente.");
|
||
|
|
}
|
||
|
|
|
||
|
|
const filterProduct: FilterProduct = {
|
||
|
|
brands: [],
|
||
|
|
text: null,
|
||
|
|
urlCategory: null,
|
||
|
|
promotion: false,
|
||
|
|
markdown: false,
|
||
|
|
oportunity: false,
|
||
|
|
offers: true, // OFERTAS IMPERDÍVEIS
|
||
|
|
onlyWithStock: false,
|
||
|
|
storeStock: null,
|
||
|
|
percentOffMin: 0,
|
||
|
|
percentOffMax: 100,
|
||
|
|
};
|
||
|
|
|
||
|
|
setSearchResults([]);
|
||
|
|
|
||
|
|
const saleProducts = await productService.getProductByFilter(
|
||
|
|
store,
|
||
|
|
1,
|
||
|
|
100,
|
||
|
|
filterProduct
|
||
|
|
);
|
||
|
|
|
||
|
|
if (!Array.isArray(saleProducts) || saleProducts.length === 0) {
|
||
|
|
setSearchResults([]);
|
||
|
|
setError(null);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const mappedProducts = saleProducts.map(mapSaleProductToProduct);
|
||
|
|
setSearchResults(mappedProducts);
|
||
|
|
|
||
|
|
const uniqueBrands = Array.from(
|
||
|
|
new Set(
|
||
|
|
mappedProducts
|
||
|
|
.map((p) => p.mark)
|
||
|
|
.filter((b) => b && b !== "Sem marca")
|
||
|
|
)
|
||
|
|
).sort((a, b) => {
|
||
|
|
const brandA = a.replace("#", "").toLowerCase();
|
||
|
|
const brandB = b.replace("#", "").toLowerCase();
|
||
|
|
return brandA < brandB ? -1 : brandA > brandB ? 1 : 0;
|
||
|
|
});
|
||
|
|
setAvailableBrands(uniqueBrands);
|
||
|
|
} catch (err: any) {
|
||
|
|
console.error("Erro ao filtrar ofertas imperdíveis:", err);
|
||
|
|
setError(err.message || "Erro ao buscar produtos. Tente novamente.");
|
||
|
|
setSearchResults([]);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
}, [mapSaleProductToProduct]);
|
||
|
|
|
||
|
|
const categories = [
|
||
|
|
{
|
||
|
|
label: '"DE" / "POR"',
|
||
|
|
icon: (
|
||
|
|
<div className="flex flex-col items-center">
|
||
|
|
<div className="w-12 h-12 rounded-full border-4 border-orange-500 flex items-center justify-center font-black text-orange-600 text-2xl bg-white shadow-inner">
|
||
|
|
$
|
||
|
|
</div>
|
||
|
|
<svg
|
||
|
|
className="w-8 h-8 text-orange-500 -mt-2 drop-shadow-sm"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
onClick: handleFilterPromotion,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "BAIXARAM DE PREÇO",
|
||
|
|
icon: (
|
||
|
|
<div className="relative">
|
||
|
|
<svg
|
||
|
|
className="w-16 h-16 text-orange-500 drop-shadow-md"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path d="M12.76 2.24A2 2 0 0 0 11.34 2H4a2 2 0 0 0-2 2v7.34a2 2 0 0 0 .59 1.42l9.41 9.41a2 2 0 0 0 2.83 0l7.34-7.34a2 2 0 0 0 0-2.83l-9.41-9.41zM7 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm4.24 6l1.42 1.42L9.42 19.66 8 18.24l3.24-3.24zM16 11l-1.42-1.42 3.24-3.24L19.24 7.76 16 11z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
onClick: handleFilterMarkdown,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "OPORTUNIDADE",
|
||
|
|
icon: (
|
||
|
|
<div className="text-7xl drop-shadow-xl animate-pulse-slow">🤑</div>
|
||
|
|
),
|
||
|
|
onClick: handleFilterOpportunity,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "OFERTAS IMPERDÍVEIS",
|
||
|
|
icon: (
|
||
|
|
<div className="p-4 bg-orange-50 rounded-3xl group-hover:bg-orange-100 transition-colors">
|
||
|
|
<svg
|
||
|
|
className="w-14 h-14 text-orange-600 drop-shadow-sm"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
>
|
||
|
|
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
onClick: handleFilterOffers,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Realiza a busca de produtos por termo de pesquisa
|
||
|
|
* Segue o mesmo padrão do Angular: searchProduct(store, page, size, search)
|
||
|
|
*/
|
||
|
|
const handleSearch = useCallback(async () => {
|
||
|
|
const trimmedSearch = searchTerm.trim();
|
||
|
|
|
||
|
|
// Validação: mínimo de 3 caracteres (seguindo padrão do Angular)
|
||
|
|
if (trimmedSearch.length < 3) {
|
||
|
|
setError("Digite pelo menos 3 caracteres para buscar");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
setLoading(true);
|
||
|
|
setError(null);
|
||
|
|
setShowResults(false);
|
||
|
|
|
||
|
|
const store = authService.getStore();
|
||
|
|
if (!store) {
|
||
|
|
throw new Error("Loja não encontrada. Faça login novamente.");
|
||
|
|
}
|
||
|
|
|
||
|
|
// Buscar produtos usando o método searchProduct (GET /sales/products/{search})
|
||
|
|
// Seguindo o padrão do Angular: searchProduct(store, page, size, search)
|
||
|
|
const saleProducts = await productService.searchProduct(
|
||
|
|
store,
|
||
|
|
1, // page
|
||
|
|
100, // size (no Angular usa 50 ou 5000 dependendo do contexto)
|
||
|
|
trimmedSearch.toUpperCase() // No Angular converte para uppercase
|
||
|
|
);
|
||
|
|
|
||
|
|
if (!Array.isArray(saleProducts) || saleProducts.length === 0) {
|
||
|
|
setSearchResults([]);
|
||
|
|
setError(null);
|
||
|
|
setShowResults(true);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Converter SaleProduct[] para Product[]
|
||
|
|
const mappedProducts = saleProducts.map(mapSaleProductToProduct);
|
||
|
|
setSearchResults(mappedProducts);
|
||
|
|
setShowResults(true);
|
||
|
|
} catch (err: any) {
|
||
|
|
console.error("Erro ao buscar produtos:", err);
|
||
|
|
setError(err.message || "Erro ao buscar produtos. Tente novamente.");
|
||
|
|
setSearchResults([]);
|
||
|
|
setShowResults(true);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
}, [searchTerm]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="h-full flex bg-[#f8fafc] relative">
|
||
|
|
{/* FilterSidebar - Desktop (sidebar fixa) */}
|
||
|
|
<div className="hidden xl:block">
|
||
|
|
<FilterSidebar
|
||
|
|
selectedDepartment={selectedDepartment}
|
||
|
|
onDepartmentChange={(url) => {
|
||
|
|
setSelectedDepartment(url);
|
||
|
|
handleDepartmentChange(url);
|
||
|
|
}}
|
||
|
|
selectedBrands={selectedBrands}
|
||
|
|
onBrandsChange={setSelectedBrands}
|
||
|
|
filters={filters}
|
||
|
|
onFiltersChange={setFilters}
|
||
|
|
onApplyFilters={handleApplyFilters}
|
||
|
|
brands={availableBrands}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Overlay para mobile quando filtros estão abertos */}
|
||
|
|
{isFiltersOpen && (
|
||
|
|
<div
|
||
|
|
className="fixed inset-0 bg-black/50 z-40 xl:hidden"
|
||
|
|
onClick={() => setIsFiltersOpen(false)}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* FilterSidebar - Mobile/Tablet (drawer) */}
|
||
|
|
<div
|
||
|
|
className={`fixed xl:hidden inset-y-0 left-0 z-50 w-full max-w-sm bg-white border-r border-slate-200 flex flex-col overflow-hidden transform transition-transform duration-300 ease-out ${
|
||
|
|
isFiltersOpen ? "translate-x-0" : "-translate-x-full"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<div className="p-safe-top p-4 border-b border-slate-200 flex items-center justify-between bg-[#002147] text-white flex-shrink-0">
|
||
|
|
<h3 className="text-lg font-black">Filtros</h3>
|
||
|
|
<button
|
||
|
|
onClick={() => setIsFiltersOpen(false)}
|
||
|
|
className="p-2 text-white/70 hover:text-white hover:bg-white/10 rounded-lg transition-colors touch-manipulation"
|
||
|
|
title="Fechar filtros"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-6 h-6"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth="2.5"
|
||
|
|
d="M6 18L18 6M6 6l12 12"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div className="flex-1 overflow-y-auto p-safe-bottom">
|
||
|
|
<FilterSidebar
|
||
|
|
selectedDepartment={selectedDepartment}
|
||
|
|
onDepartmentChange={(url) => {
|
||
|
|
setSelectedDepartment(url);
|
||
|
|
handleDepartmentChange(url);
|
||
|
|
setIsFiltersOpen(false); // Fechar drawer após seleção
|
||
|
|
}}
|
||
|
|
selectedBrands={selectedBrands}
|
||
|
|
onBrandsChange={setSelectedBrands}
|
||
|
|
filters={filters}
|
||
|
|
onFiltersChange={setFilters}
|
||
|
|
onApplyFilters={() => {
|
||
|
|
handleApplyFilters();
|
||
|
|
setIsFiltersOpen(false); // Fechar drawer após aplicar filtros
|
||
|
|
}}
|
||
|
|
brands={availableBrands}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<main className="flex-1 flex flex-col overflow-hidden h-full">
|
||
|
|
{!showResults ? (
|
||
|
|
<div className="flex-1 p-4 lg:p-10 overflow-auto custom-scrollbar h-full">
|
||
|
|
<div className="max-w-[1400px] mx-auto py-4 lg:py-8">
|
||
|
|
{/* Barra superior com botão de filtros e input de busca - Mobile/Tablet */}
|
||
|
|
<div className="lg:hidden mb-6 space-y-3">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<button
|
||
|
|
onClick={() => setIsFiltersOpen(true)}
|
||
|
|
className="p-3 bg-white rounded-xl shadow-sm border border-slate-200 text-slate-600 hover:bg-slate-50 transition-all touch-manipulation flex items-center justify-center"
|
||
|
|
title="Filtros"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-6 h-6"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth="2.5"
|
||
|
|
d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<div className="flex-1">
|
||
|
|
<SearchInput
|
||
|
|
value={searchTerm}
|
||
|
|
onChange={setSearchTerm}
|
||
|
|
onSearch={handleSearch}
|
||
|
|
loading={loading}
|
||
|
|
placeholder="Ex: Cimento, Tijolo, Furadeira..."
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Desktop: Título e input centralizado */}
|
||
|
|
<div className="hidden lg:block text-center mb-10">
|
||
|
|
<h2 className="text-3xl font-black text-[#002147] mb-2 tracking-tight">
|
||
|
|
O que vamos vender hoje?
|
||
|
|
</h2>
|
||
|
|
<p className="text-slate-500 text-sm font-medium mb-6">
|
||
|
|
Pesquise por nome, código ou categoria do produto.
|
||
|
|
</p>
|
||
|
|
<div className="max-w-2xl mx-auto">
|
||
|
|
<SearchInput
|
||
|
|
value={searchTerm}
|
||
|
|
onChange={setSearchTerm}
|
||
|
|
onSearch={handleSearch}
|
||
|
|
loading={loading}
|
||
|
|
placeholder="Ex: Cimento, Tijolo, Furadeira..."
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mb-4 ml-1 flex items-center justify-between">
|
||
|
|
<h3 className="text-base font-black text-[#002147] uppercase tracking-tight">
|
||
|
|
Categorias em Destaque
|
||
|
|
</h3>
|
||
|
|
<span className="text-[10px] font-black text-orange-500 uppercase tracking-widest bg-orange-50 px-3 py-1 rounded-full border border-orange-100 animate-pulse">
|
||
|
|
Preços baixos hoje
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 lg:gap-4 mb-8 lg:mb-12">
|
||
|
|
{categories.map((item, idx) => (
|
||
|
|
<CategoryCard
|
||
|
|
key={idx}
|
||
|
|
label={item.label}
|
||
|
|
icon={item.icon}
|
||
|
|
onClick={item.onClick}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Componente "Baldinho" - Versão Evoluída (Painel de Logística) */}
|
||
|
|
<Baldinho
|
||
|
|
selectedDeliveryDate={selectedDeliveryDate}
|
||
|
|
onDateChange={setSelectedDeliveryDate}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="flex flex-col h-full w-full max-w-7xl mx-auto overflow-hidden flex-1">
|
||
|
|
{/* Header Fixo */}
|
||
|
|
<header className="flex-shrink-0 p-4 lg:p-10 pb-4 bg-[#f8fafc] border-b border-slate-200 w-full">
|
||
|
|
<div className="flex flex-col lg:flex-row justify-between items-start max-w-7xl mx-auto gap-4">
|
||
|
|
<div className="flex-1 w-full">
|
||
|
|
{/* Mobile/Tablet: Barra superior com botão de filtros, voltar e input */}
|
||
|
|
<div className="lg:hidden space-y-3 mb-4">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
setShowResults(false);
|
||
|
|
setSearchResults([]);
|
||
|
|
setError(null);
|
||
|
|
setSearchTerm("");
|
||
|
|
setSelectedDepartment("");
|
||
|
|
}}
|
||
|
|
className="p-2.5 text-slate-600 hover:bg-slate-100 rounded-lg transition-colors touch-manipulation"
|
||
|
|
title="Voltar"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-5 h-5"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth="2.5"
|
||
|
|
d="M15 19l-7-7 7-7"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => setIsFiltersOpen(true)}
|
||
|
|
className="p-2.5 bg-white rounded-lg shadow-sm border border-slate-200 text-slate-600 hover:bg-slate-50 transition-all touch-manipulation flex items-center justify-center"
|
||
|
|
title="Filtros"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-5 h-5"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth="2.5"
|
||
|
|
d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<div className="flex-1">
|
||
|
|
<SearchInput
|
||
|
|
value={searchTerm}
|
||
|
|
onChange={setSearchTerm}
|
||
|
|
onSearch={handleSearch}
|
||
|
|
loading={loading}
|
||
|
|
placeholder="Ex: Cimento, Tijolo, Furadeira..."
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Desktop: Layout original */}
|
||
|
|
<div className="hidden lg:block">
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
setShowResults(false);
|
||
|
|
setSearchResults([]);
|
||
|
|
setError(null);
|
||
|
|
setSearchTerm("");
|
||
|
|
setSelectedDepartment("");
|
||
|
|
}}
|
||
|
|
className="text-slate-400 hover:text-slate-600 flex items-center mb-2 font-bold text-sm"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-4 h-4 mr-1"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth="2.5"
|
||
|
|
d="M15 19l-7-7 7-7"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
Voltar para busca
|
||
|
|
</button>
|
||
|
|
<h2 className="text-2xl font-black text-[#002147]">
|
||
|
|
{searchTerm
|
||
|
|
? `Resultados para "${searchTerm}"`
|
||
|
|
: filters.onPromotion
|
||
|
|
? 'Produtos "DE" / "POR"'
|
||
|
|
: filters.priceDropped
|
||
|
|
? "Produtos que Baixaram de Preço"
|
||
|
|
: filters.opportunities
|
||
|
|
? "Oportunidades"
|
||
|
|
: filters.unmissableOffers
|
||
|
|
? "Ofertas Imperdíveis"
|
||
|
|
: selectedDepartment
|
||
|
|
? `Produtos em "${selectedDepartment}"`
|
||
|
|
: "Produtos Encontrados"}
|
||
|
|
</h2>
|
||
|
|
{searchResults.length > 0 && (
|
||
|
|
<p className="text-sm text-slate-500 mt-1">
|
||
|
|
{searchResults.length} produto
|
||
|
|
{searchResults.length !== 1 ? "s" : ""} encontrado
|
||
|
|
{searchResults.length !== 1 ? "s" : ""}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Input de busca para nova pesquisa - Desktop */}
|
||
|
|
<div className="mt-4 mb-[-50px] w-full">
|
||
|
|
<SearchInput
|
||
|
|
value={searchTerm}
|
||
|
|
onChange={setSearchTerm}
|
||
|
|
onSearch={handleSearch}
|
||
|
|
loading={loading}
|
||
|
|
placeholder="Ex: Cimento, Tijolo, Furadeira..."
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Mobile/Tablet: Título dos resultados */}
|
||
|
|
<div className="lg:hidden">
|
||
|
|
<h2 className="text-lg font-black text-[#002147] mb-1">
|
||
|
|
{searchTerm
|
||
|
|
? `Resultados para "${searchTerm}"`
|
||
|
|
: filters.onPromotion
|
||
|
|
? 'Produtos "DE" / "POR"'
|
||
|
|
: filters.priceDropped
|
||
|
|
? "Produtos que Baixaram de Preço"
|
||
|
|
: filters.opportunities
|
||
|
|
? "Oportunidades"
|
||
|
|
: filters.unmissableOffers
|
||
|
|
? "Ofertas Imperdíveis"
|
||
|
|
: selectedDepartment
|
||
|
|
? `Produtos em "${selectedDepartment}"`
|
||
|
|
: "Produtos Encontrados"}
|
||
|
|
</h2>
|
||
|
|
{searchResults.length > 0 && (
|
||
|
|
<p className="text-xs text-slate-500">
|
||
|
|
{searchResults.length} produto
|
||
|
|
{searchResults.length !== 1 ? "s" : ""} encontrado
|
||
|
|
{searchResults.length !== 1 ? "s" : ""}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Botões de alternância de visualização */}
|
||
|
|
{searchResults.length > 0 && (
|
||
|
|
<div className="flex items-center gap-2 bg-white rounded-xl p-1 border border-slate-200 shadow-sm">
|
||
|
|
<button
|
||
|
|
onClick={() => setViewMode("grid")}
|
||
|
|
className={`p-2 rounded-lg transition-all ${
|
||
|
|
viewMode === "grid"
|
||
|
|
? "bg-[#002147] text-white shadow-md"
|
||
|
|
: "text-slate-600 hover:bg-slate-100"
|
||
|
|
}`}
|
||
|
|
title="Visualização em grade"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-5 h-5"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth="2.5"
|
||
|
|
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => setViewMode("list")}
|
||
|
|
className={`p-2 rounded-lg transition-all ${
|
||
|
|
viewMode === "list"
|
||
|
|
? "bg-[#002147] text-white shadow-md"
|
||
|
|
: "text-slate-600 hover:bg-slate-100"
|
||
|
|
}`}
|
||
|
|
title="Visualização em lista"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-5 h-5"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth="2.5"
|
||
|
|
d="M4 6h16M4 12h16M4 18h16"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
{/* Área de Scroll - Apenas produtos */}
|
||
|
|
<div className="flex-1 overflow-y-auto overflow-x-hidden scrollbar-hide p-4 lg:p-10 pt-4 lg:pt-6 min-h-0">
|
||
|
|
<div className="max-w-7xl mx-auto w-full lg:min-w-[600px]">
|
||
|
|
{/* Loading State */}
|
||
|
|
{loading && (
|
||
|
|
<LoadingSpinner
|
||
|
|
message="Carregando produtos..."
|
||
|
|
subMessage="Aguarde enquanto buscamos os melhores produtos para você"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Error State - apenas erros reais (não "nenhum produto encontrado") */}
|
||
|
|
{error && !loading && (
|
||
|
|
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-2xl">
|
||
|
|
<p className="text-red-600 text-sm font-medium">{error}</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Empty State - quando não há resultados e não há erro */}
|
||
|
|
{!loading && searchResults.length === 0 && !error && (
|
||
|
|
<div className="bg-white rounded-2xl border border-slate-100 overflow-hidden w-full">
|
||
|
|
<NoData
|
||
|
|
title={
|
||
|
|
filters.onPromotion
|
||
|
|
? "Nenhum produto em promoção encontrado"
|
||
|
|
: filters.priceDropped
|
||
|
|
? "Nenhum produto que baixou de preço encontrado"
|
||
|
|
: filters.opportunities
|
||
|
|
? "Nenhuma oportunidade encontrada"
|
||
|
|
: filters.unmissableOffers
|
||
|
|
? "Nenhuma oferta imperdível encontrada"
|
||
|
|
: selectedDepartment
|
||
|
|
? `Nenhum produto encontrado para "${selectedDepartment}"`
|
||
|
|
: searchTerm
|
||
|
|
? `Nenhum produto encontrado para "${searchTerm}"`
|
||
|
|
: "Nenhum produto encontrado"
|
||
|
|
}
|
||
|
|
description={
|
||
|
|
filters.onPromotion
|
||
|
|
? "Não há produtos em promoção no momento. Tente novamente mais tarde ou explore outras categorias."
|
||
|
|
: filters.priceDropped
|
||
|
|
? "Não foram encontrados produtos que baixaram de preço. Tente ajustar os filtros ou verificar em outro período."
|
||
|
|
: filters.opportunities
|
||
|
|
? "Não foram encontradas oportunidades no momento. Tente ajustar os filtros ou verificar em outro período."
|
||
|
|
: filters.unmissableOffers
|
||
|
|
? "Não foram encontradas ofertas imperdíveis no momento. Tente novamente mais tarde ou explore outras categorias."
|
||
|
|
: selectedDepartment
|
||
|
|
? `Não foram encontrados produtos para o departamento "${selectedDepartment}". Tente selecionar outro departamento ou usar termos de busca.`
|
||
|
|
: "Não foram encontrados produtos com os filtros selecionados. Tente ajustar os filtros, usar outros termos de busca ou selecione um departamento."
|
||
|
|
}
|
||
|
|
icon={
|
||
|
|
filters.onPromotion ||
|
||
|
|
filters.priceDropped ||
|
||
|
|
filters.opportunities ||
|
||
|
|
filters.unmissableOffers
|
||
|
|
? "file"
|
||
|
|
: "search"
|
||
|
|
}
|
||
|
|
variant="outline"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Results - apenas quando não está carregando e há resultados */}
|
||
|
|
{!loading && searchResults.length > 0 && (
|
||
|
|
<div
|
||
|
|
className={
|
||
|
|
viewMode === "grid"
|
||
|
|
? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6 w-full items-stretch"
|
||
|
|
: "space-y-4 w-full"
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{searchResults.map((product) => (
|
||
|
|
<div
|
||
|
|
key={product.id}
|
||
|
|
className={
|
||
|
|
viewMode === "list"
|
||
|
|
? "bg-white rounded-xl border border-slate-200 p-4 hover:shadow-lg transition-all"
|
||
|
|
: "h-full"
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{viewMode === "list" ? (
|
||
|
|
<ProductListItem
|
||
|
|
product={product}
|
||
|
|
quantity={productQuantities[product.id] || 1}
|
||
|
|
onQuantityChange={(newQty) => {
|
||
|
|
setProductQuantities((prev) => ({
|
||
|
|
...prev,
|
||
|
|
[product.id]: newQty,
|
||
|
|
}));
|
||
|
|
}}
|
||
|
|
onAddToCart={(
|
||
|
|
prod,
|
||
|
|
qty,
|
||
|
|
stockStore,
|
||
|
|
deliveryType
|
||
|
|
) => {
|
||
|
|
onAddToCart({
|
||
|
|
...prod,
|
||
|
|
quantity: qty,
|
||
|
|
stockStore,
|
||
|
|
deliveryType,
|
||
|
|
} as OrderItem);
|
||
|
|
}}
|
||
|
|
onViewDetails={(prod, qty) => {
|
||
|
|
setSelectedProduct(prod);
|
||
|
|
setInitialQuantity(qty || 1);
|
||
|
|
setIsDetailModalOpen(true);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<ProductCard
|
||
|
|
product={product}
|
||
|
|
onAddToCart={onAddToCart}
|
||
|
|
onViewDetails={(p, qty) => {
|
||
|
|
setSelectedProduct(p);
|
||
|
|
setInitialQuantity(qty || 1);
|
||
|
|
setIsDetailModalOpen(true);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</main>
|
||
|
|
<style>{`
|
||
|
|
@keyframes pulse-slow {
|
||
|
|
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0px orange); }
|
||
|
|
50% { transform: scale(1.05); filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.3)); }
|
||
|
|
}
|
||
|
|
.animate-pulse-slow { animation: pulse-slow 3s infinite ease-in-out; }
|
||
|
|
|
||
|
|
/* Esconder scrollbar vertical */
|
||
|
|
.scrollbar-hide::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.scrollbar-hide {
|
||
|
|
-ms-overflow-style: none;
|
||
|
|
scrollbar-width: none;
|
||
|
|
}
|
||
|
|
`}</style>
|
||
|
|
|
||
|
|
{/* Modal de Detalhamento do Produto */}
|
||
|
|
<ProductDetailModal
|
||
|
|
product={selectedProduct}
|
||
|
|
isOpen={isDetailModalOpen}
|
||
|
|
onClose={() => {
|
||
|
|
setIsDetailModalOpen(false);
|
||
|
|
setSelectedProduct(null);
|
||
|
|
setInitialQuantity(1);
|
||
|
|
}}
|
||
|
|
onAddToCart={onAddToCart}
|
||
|
|
initialQuantity={initialQuantity}
|
||
|
|
onProductChange={(newProduct) => {
|
||
|
|
// Atualizar o produto exibido no modal sem fechá-lo
|
||
|
|
setSelectedProduct(newProduct);
|
||
|
|
setInitialQuantity(1);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ProductSearchView;
|