1324 lines
52 KiB
TypeScript
1324 lines
52 KiB
TypeScript
|
import React, { useState, useEffect, useRef } from "react";
|
||
|
|
import { Product, OrderItem } from "../types";
|
||
|
|
import { productService, SaleProduct } from "../src/services/product.service";
|
||
|
|
import { authService } from "../src/services/auth.service";
|
||
|
|
import NoImagePlaceholder from "./NoImagePlaceholder";
|
||
|
|
import RelatedProductCard from "./RelatedProductCard";
|
||
|
|
import FilialSelector from "./FilialSelector";
|
||
|
|
import {
|
||
|
|
X,
|
||
|
|
ChevronRight,
|
||
|
|
ChevronLeft,
|
||
|
|
Minus,
|
||
|
|
Plus,
|
||
|
|
ShoppingCart,
|
||
|
|
FileText,
|
||
|
|
Info,
|
||
|
|
ArrowRight,
|
||
|
|
AlertCircle,
|
||
|
|
} from "lucide-react";
|
||
|
|
import { validateMinValue, validateRequired } from "../lib/utils";
|
||
|
|
|
||
|
|
interface ProductDetailModalProps {
|
||
|
|
product: Product | null;
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
onAddToCart: (p: Product | OrderItem) => void;
|
||
|
|
initialQuantity?: number; // Quantidade inicial ao abrir o modal
|
||
|
|
onProductChange?: (product: Product) => void; // Callback para mudar o produto exibido no modal
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ProductDetail extends SaleProduct {
|
||
|
|
images?: string[];
|
||
|
|
stocks?: Array<{
|
||
|
|
store: string;
|
||
|
|
storeName: string;
|
||
|
|
quantity: number;
|
||
|
|
work: boolean;
|
||
|
|
blocked: string;
|
||
|
|
breakdown: number;
|
||
|
|
transfer: number;
|
||
|
|
allowDelivery: number;
|
||
|
|
}>;
|
||
|
|
installments?: Array<{
|
||
|
|
installment: number;
|
||
|
|
installmentValue: number;
|
||
|
|
}>;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ProductDetailModal: React.FC<ProductDetailModalProps> = ({
|
||
|
|
product,
|
||
|
|
isOpen,
|
||
|
|
onClose,
|
||
|
|
onAddToCart,
|
||
|
|
initialQuantity = 1,
|
||
|
|
onProductChange,
|
||
|
|
}) => {
|
||
|
|
const [productDetail, setProductDetail] = useState<ProductDetail | null>(
|
||
|
|
null
|
||
|
|
);
|
||
|
|
const [buyTogether, setBuyTogether] = useState<SaleProduct[]>([]);
|
||
|
|
const [similarProducts, setSimilarProducts] = useState<SaleProduct[]>([]);
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
const [loadingRelated, setLoadingRelated] = useState(false);
|
||
|
|
const [error, setError] = useState<string | null>(null);
|
||
|
|
const [quantity, setQuantity] = useState(initialQuantity);
|
||
|
|
const [selectedStore, setSelectedStore] = useState("");
|
||
|
|
const [deliveryType, setDeliveryType] = useState("");
|
||
|
|
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
||
|
|
const [activeTab, setActiveTab] = useState<"details" | "specs">("details");
|
||
|
|
const [imageError, setImageError] = useState(false);
|
||
|
|
|
||
|
|
// Estados para validação de formulário
|
||
|
|
const [formErrors, setFormErrors] = useState<{
|
||
|
|
quantity?: string;
|
||
|
|
deliveryType?: string;
|
||
|
|
selectedStore?: string;
|
||
|
|
}>({});
|
||
|
|
|
||
|
|
// Refs para scroll até as seções (scroll vertical)
|
||
|
|
const buyTogetherSectionRef = useRef<HTMLDivElement>(null);
|
||
|
|
const similarProductsSectionRef = useRef<HTMLDivElement>(null);
|
||
|
|
|
||
|
|
// Ref para o container principal do modal (para fazer scroll)
|
||
|
|
const modalContentRef = useRef<HTMLDivElement>(null);
|
||
|
|
|
||
|
|
// Ref para controlar animação em andamento
|
||
|
|
const scrollAnimationRef = useRef<number | null>(null);
|
||
|
|
|
||
|
|
// Refs para containers de rolagem horizontal (Compre Junto e Produtos Similares)
|
||
|
|
const buyTogetherScrollRef = useRef<HTMLDivElement>(null);
|
||
|
|
const similarProductsScrollRef = useRef<HTMLDivElement>(null);
|
||
|
|
|
||
|
|
// Estados para controlar visibilidade dos botões de rolagem
|
||
|
|
const [buyTogetherScrollState, setBuyTogetherScrollState] = useState({
|
||
|
|
canScrollLeft: false,
|
||
|
|
canScrollRight: false,
|
||
|
|
});
|
||
|
|
const [similarProductsScrollState, setSimilarProductsScrollState] = useState({
|
||
|
|
canScrollLeft: false,
|
||
|
|
canScrollRight: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
// Tipos de entrega - seguindo EXATAMENTE o padrão do Angular
|
||
|
|
// Fonte: vendaweb_portal/src/app/sales/components/tintometrico-modal/tintometrico-modal.component.ts
|
||
|
|
const deliveryTypes = [
|
||
|
|
{ type: "RI", description: "Retira Imediata" },
|
||
|
|
{ type: "RP", description: "Retira Posterior" },
|
||
|
|
{ type: "EN", description: "Entrega" },
|
||
|
|
{ type: "EF", description: "Encomenda" },
|
||
|
|
];
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (isOpen && product) {
|
||
|
|
// Inicializar quantidade com o valor inicial ou 1
|
||
|
|
setQuantity(initialQuantity || 1);
|
||
|
|
loadProductDetail();
|
||
|
|
loadRelatedProducts();
|
||
|
|
} else {
|
||
|
|
// Reset states when modal closes
|
||
|
|
setProductDetail(null);
|
||
|
|
setBuyTogether([]);
|
||
|
|
setSimilarProducts([]);
|
||
|
|
setQuantity(1);
|
||
|
|
setCurrentImageIndex(0);
|
||
|
|
setActiveTab("details");
|
||
|
|
}
|
||
|
|
}, [isOpen, product, initialQuantity]);
|
||
|
|
|
||
|
|
// Função para scroll suave e elegante até uma seção específica
|
||
|
|
// Usa animação customizada com easing para uma experiência mais fluida
|
||
|
|
const scrollToSection = (sectionRef: React.RefObject<HTMLDivElement>) => {
|
||
|
|
if (!sectionRef.current || !modalContentRef.current) return;
|
||
|
|
|
||
|
|
// Cancelar animação anterior se houver para evitar conflitos
|
||
|
|
if (scrollAnimationRef.current !== null) {
|
||
|
|
cancelAnimationFrame(scrollAnimationRef.current);
|
||
|
|
scrollAnimationRef.current = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
const sectionElement = sectionRef.current;
|
||
|
|
const containerElement = modalContentRef.current;
|
||
|
|
|
||
|
|
// Calcular a posição relativa da seção dentro do container
|
||
|
|
const containerRect = containerElement.getBoundingClientRect();
|
||
|
|
const sectionRect = sectionElement.getBoundingClientRect();
|
||
|
|
|
||
|
|
// Calcular o offset necessário (posição da seção - posição do container + scroll atual)
|
||
|
|
const targetScroll =
|
||
|
|
sectionRect.top - containerRect.top + containerElement.scrollTop - 24; // 24px de margem elegante
|
||
|
|
|
||
|
|
const startScroll = containerElement.scrollTop;
|
||
|
|
const distance = targetScroll - startScroll;
|
||
|
|
|
||
|
|
// Se a distância for muito pequena, não animar
|
||
|
|
if (Math.abs(distance) < 5) {
|
||
|
|
containerElement.scrollTop = targetScroll;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Duração adaptativa: mais suave para distâncias maiores
|
||
|
|
// Base: 600ms, máximo: 1200ms, proporcional à distância
|
||
|
|
const baseDuration = 600;
|
||
|
|
const maxDuration = 1200;
|
||
|
|
const distanceFactor = Math.min(Math.abs(distance) / 600, 1);
|
||
|
|
const duration =
|
||
|
|
baseDuration + (maxDuration - baseDuration) * distanceFactor;
|
||
|
|
|
||
|
|
let startTime: number | null = null;
|
||
|
|
|
||
|
|
// Função de easing (ease-out-quart) para animação mais elegante e natural
|
||
|
|
// Esta função cria uma curva de aceleração suave que desacelera suavemente no final
|
||
|
|
// Mais suave que cubic, proporciona uma sensação mais premium e fluida
|
||
|
|
const easeOutQuart = (t: number): number => {
|
||
|
|
return 1 - Math.pow(1 - t, 4);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Função de animação usando requestAnimationFrame para máxima fluidez (60fps)
|
||
|
|
const animateScroll = (currentTime: number) => {
|
||
|
|
if (startTime === null) startTime = currentTime;
|
||
|
|
const timeElapsed = currentTime - startTime;
|
||
|
|
const progress = Math.min(timeElapsed / duration, 1);
|
||
|
|
|
||
|
|
// Aplicar easing para movimento suave e natural
|
||
|
|
const easedProgress = easeOutQuart(progress);
|
||
|
|
const currentScroll = startScroll + distance * easedProgress;
|
||
|
|
|
||
|
|
containerElement.scrollTop = currentScroll;
|
||
|
|
|
||
|
|
// Continuar animação até completar
|
||
|
|
if (progress < 1) {
|
||
|
|
scrollAnimationRef.current = requestAnimationFrame(animateScroll);
|
||
|
|
} else {
|
||
|
|
// Garantir que chegamos exatamente na posição final
|
||
|
|
containerElement.scrollTop = targetScroll;
|
||
|
|
scrollAnimationRef.current = null;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Iniciar animação
|
||
|
|
scrollAnimationRef.current = requestAnimationFrame(animateScroll);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Função para verificar estado de rolagem horizontal
|
||
|
|
const checkScrollState = (
|
||
|
|
containerRef: React.RefObject<HTMLDivElement>,
|
||
|
|
setState: React.Dispatch<
|
||
|
|
React.SetStateAction<{ canScrollLeft: boolean; canScrollRight: boolean }>
|
||
|
|
>
|
||
|
|
) => {
|
||
|
|
if (!containerRef.current) return;
|
||
|
|
const container = containerRef.current;
|
||
|
|
const { scrollLeft, scrollWidth, clientWidth } = container;
|
||
|
|
|
||
|
|
// Verificar se há conteúdo suficiente para rolar
|
||
|
|
const hasScrollableContent = scrollWidth > clientWidth;
|
||
|
|
const isAtStart = scrollLeft <= 5; // 5px de tolerância
|
||
|
|
const isAtEnd = scrollLeft >= scrollWidth - clientWidth - 5; // 5px de tolerância
|
||
|
|
|
||
|
|
setState({
|
||
|
|
canScrollLeft: hasScrollableContent && !isAtStart,
|
||
|
|
canScrollRight: hasScrollableContent && !isAtEnd,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// Função para rolar horizontalmente
|
||
|
|
const scrollHorizontally = (
|
||
|
|
containerRef: React.RefObject<HTMLDivElement>,
|
||
|
|
direction: "left" | "right",
|
||
|
|
setState: React.Dispatch<
|
||
|
|
React.SetStateAction<{ canScrollLeft: boolean; canScrollRight: boolean }>
|
||
|
|
>
|
||
|
|
) => {
|
||
|
|
if (!containerRef.current) return;
|
||
|
|
const container = containerRef.current;
|
||
|
|
const scrollAmount = 300; // Quantidade de pixels para rolar
|
||
|
|
const targetScroll =
|
||
|
|
direction === "left"
|
||
|
|
? container.scrollLeft - scrollAmount
|
||
|
|
: container.scrollLeft + scrollAmount;
|
||
|
|
|
||
|
|
container.scrollTo({
|
||
|
|
left: targetScroll,
|
||
|
|
behavior: "smooth",
|
||
|
|
});
|
||
|
|
|
||
|
|
// Verificar estado após um pequeno delay para permitir a animação
|
||
|
|
setTimeout(() => {
|
||
|
|
checkScrollState(containerRef, setState);
|
||
|
|
}, 100);
|
||
|
|
};
|
||
|
|
|
||
|
|
const loadProductDetail = async () => {
|
||
|
|
if (!product?.code) return;
|
||
|
|
|
||
|
|
try {
|
||
|
|
setLoading(true);
|
||
|
|
setError(null);
|
||
|
|
|
||
|
|
const store = authService.getStore();
|
||
|
|
if (!store) {
|
||
|
|
throw new Error("Loja não encontrada. Faça login novamente.");
|
||
|
|
}
|
||
|
|
|
||
|
|
const productId = parseInt(product.code);
|
||
|
|
if (isNaN(productId)) {
|
||
|
|
throw new Error("ID do produto inválido");
|
||
|
|
}
|
||
|
|
|
||
|
|
// Buscar detalhes do produto
|
||
|
|
const detail = await productService.getProductDetail(store, productId);
|
||
|
|
|
||
|
|
// Processar imagens
|
||
|
|
const images: string[] = [];
|
||
|
|
if (detail.urlImage) {
|
||
|
|
// Se urlImage contém múltiplas URLs separadas por vírgula, ponto e vírgula ou pipe
|
||
|
|
const imageUrls = detail.urlImage
|
||
|
|
.split(/[,;|]/)
|
||
|
|
.map((url) => url.trim())
|
||
|
|
.filter((url) => url.length > 0);
|
||
|
|
if (imageUrls.length > 0) {
|
||
|
|
images.push(...imageUrls);
|
||
|
|
} else {
|
||
|
|
// Se não conseguiu separar, usar a URL completa
|
||
|
|
images.push(detail.urlImage);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (images.length === 0 && product.image) {
|
||
|
|
images.push(product.image);
|
||
|
|
}
|
||
|
|
|
||
|
|
setProductDetail({ ...detail, images });
|
||
|
|
|
||
|
|
// Buscar estoques
|
||
|
|
try {
|
||
|
|
const stocks = await productService.getProductStocks(store, productId);
|
||
|
|
setProductDetail((prev) => (prev ? { ...prev, stocks } : null));
|
||
|
|
} catch (err) {
|
||
|
|
console.warn("Erro ao carregar estoques:", err);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Buscar parcelamento
|
||
|
|
try {
|
||
|
|
const installments = await productService.getProductInstallments(
|
||
|
|
store,
|
||
|
|
productId,
|
||
|
|
quantity
|
||
|
|
);
|
||
|
|
setProductDetail((prev) => (prev ? { ...prev, installments } : null));
|
||
|
|
} catch (err) {
|
||
|
|
console.warn("Erro ao carregar parcelamento:", err);
|
||
|
|
}
|
||
|
|
} catch (err: any) {
|
||
|
|
console.error("Erro ao carregar detalhes do produto:", err);
|
||
|
|
setError(err.message || "Erro ao carregar detalhes do produto");
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const loadRelatedProducts = async () => {
|
||
|
|
if (!product?.code) return;
|
||
|
|
|
||
|
|
try {
|
||
|
|
setLoadingRelated(true);
|
||
|
|
|
||
|
|
const store = authService.getStore();
|
||
|
|
if (!store) return;
|
||
|
|
|
||
|
|
const productId = parseInt(product.code);
|
||
|
|
if (isNaN(productId)) return;
|
||
|
|
|
||
|
|
// Buscar produtos "compre junto" e similares em paralelo
|
||
|
|
const [buyTogetherData, similarData] = await Promise.all([
|
||
|
|
productService.getProductsBuyTogether(store, productId).catch(() => []),
|
||
|
|
productService.getProductsSimilar(store, productId).catch(() => []),
|
||
|
|
]);
|
||
|
|
|
||
|
|
setBuyTogether(buyTogetherData || []);
|
||
|
|
setSimilarProducts(similarData || []);
|
||
|
|
} catch (err: any) {
|
||
|
|
console.error("Erro ao carregar produtos relacionados:", err);
|
||
|
|
} finally {
|
||
|
|
setLoadingRelated(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Verificar estado de rolagem quando os produtos relacionados são carregados
|
||
|
|
useEffect(() => {
|
||
|
|
if (buyTogether.length > 0) {
|
||
|
|
// Usar requestAnimationFrame para garantir que o DOM foi renderizado
|
||
|
|
const checkAfterRender = () => {
|
||
|
|
requestAnimationFrame(() => {
|
||
|
|
checkScrollState(buyTogetherScrollRef, setBuyTogetherScrollState);
|
||
|
|
// Verificar novamente após um pequeno delay para garantir
|
||
|
|
setTimeout(() => {
|
||
|
|
checkScrollState(buyTogetherScrollRef, setBuyTogetherScrollState);
|
||
|
|
}, 100);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// Verificar imediatamente e após delays
|
||
|
|
checkAfterRender();
|
||
|
|
const timeout1 = setTimeout(checkAfterRender, 200);
|
||
|
|
const timeout2 = setTimeout(checkAfterRender, 500);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
clearTimeout(timeout1);
|
||
|
|
clearTimeout(timeout2);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}, [buyTogether, isOpen, loadingRelated]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (similarProducts.length > 0) {
|
||
|
|
// Usar requestAnimationFrame para garantir que o DOM foi renderizado
|
||
|
|
const checkAfterRender = () => {
|
||
|
|
requestAnimationFrame(() => {
|
||
|
|
checkScrollState(
|
||
|
|
similarProductsScrollRef,
|
||
|
|
setSimilarProductsScrollState
|
||
|
|
);
|
||
|
|
// Verificar novamente após um pequeno delay para garantir
|
||
|
|
setTimeout(() => {
|
||
|
|
checkScrollState(
|
||
|
|
similarProductsScrollRef,
|
||
|
|
setSimilarProductsScrollState
|
||
|
|
);
|
||
|
|
}, 100);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// Verificar imediatamente e após delays
|
||
|
|
checkAfterRender();
|
||
|
|
const timeout1 = setTimeout(checkAfterRender, 200);
|
||
|
|
const timeout2 = setTimeout(checkAfterRender, 500);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
clearTimeout(timeout1);
|
||
|
|
clearTimeout(timeout2);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}, [similarProducts, isOpen, loadingRelated]);
|
||
|
|
|
||
|
|
// Adicionar listener para scroll manual (mouse/touch) e resize
|
||
|
|
useEffect(() => {
|
||
|
|
const buyTogetherContainer = buyTogetherScrollRef.current;
|
||
|
|
const similarProductsContainer = similarProductsScrollRef.current;
|
||
|
|
|
||
|
|
const handleBuyTogetherScroll = () => {
|
||
|
|
checkScrollState(buyTogetherScrollRef, setBuyTogetherScrollState);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSimilarProductsScroll = () => {
|
||
|
|
checkScrollState(similarProductsScrollRef, setSimilarProductsScrollState);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Função para verificar após resize da janela
|
||
|
|
const handleResize = () => {
|
||
|
|
if (buyTogetherContainer) {
|
||
|
|
checkScrollState(buyTogetherScrollRef, setBuyTogetherScrollState);
|
||
|
|
}
|
||
|
|
if (similarProductsContainer) {
|
||
|
|
checkScrollState(
|
||
|
|
similarProductsScrollRef,
|
||
|
|
setSimilarProductsScrollState
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (buyTogetherContainer) {
|
||
|
|
buyTogetherContainer.addEventListener("scroll", handleBuyTogetherScroll);
|
||
|
|
}
|
||
|
|
if (similarProductsContainer) {
|
||
|
|
similarProductsContainer.addEventListener(
|
||
|
|
"scroll",
|
||
|
|
handleSimilarProductsScroll
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Adicionar listener de resize
|
||
|
|
window.addEventListener("resize", handleResize);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
if (buyTogetherContainer) {
|
||
|
|
buyTogetherContainer.removeEventListener(
|
||
|
|
"scroll",
|
||
|
|
handleBuyTogetherScroll
|
||
|
|
);
|
||
|
|
}
|
||
|
|
if (similarProductsContainer) {
|
||
|
|
similarProductsContainer.removeEventListener(
|
||
|
|
"scroll",
|
||
|
|
handleSimilarProductsScroll
|
||
|
|
);
|
||
|
|
}
|
||
|
|
window.removeEventListener("resize", handleResize);
|
||
|
|
};
|
||
|
|
}, [buyTogether.length, similarProducts.length, isOpen]);
|
||
|
|
|
||
|
|
// Função para validar o formulário
|
||
|
|
const validateForm = (): { isValid: boolean; errors: typeof formErrors } => {
|
||
|
|
const errors: {
|
||
|
|
quantity?: string;
|
||
|
|
deliveryType?: string;
|
||
|
|
selectedStore?: string;
|
||
|
|
} = {};
|
||
|
|
|
||
|
|
// Validar quantidade
|
||
|
|
if (!validateRequired(quantity)) {
|
||
|
|
errors.quantity = "A quantidade é obrigatória";
|
||
|
|
} else if (!validateMinValue(quantity, 0.01)) {
|
||
|
|
errors.quantity = "A quantidade deve ser maior que zero";
|
||
|
|
} else if (isNaN(quantity) || quantity <= 0) {
|
||
|
|
errors.quantity = "A quantidade deve ser um número válido maior que zero";
|
||
|
|
}
|
||
|
|
|
||
|
|
// Validar tipo de entrega
|
||
|
|
if (!validateRequired(deliveryType)) {
|
||
|
|
errors.deliveryType = "O tipo de entrega é obrigatório";
|
||
|
|
}
|
||
|
|
|
||
|
|
// Validar filial de estoque (quando há estoques disponíveis)
|
||
|
|
if (
|
||
|
|
productDetail?.stocks &&
|
||
|
|
productDetail.stocks.length > 0 &&
|
||
|
|
!validateRequired(selectedStore)
|
||
|
|
) {
|
||
|
|
errors.selectedStore =
|
||
|
|
"A filial de estoque é obrigatória quando há estoques disponíveis";
|
||
|
|
}
|
||
|
|
|
||
|
|
setFormErrors(errors);
|
||
|
|
|
||
|
|
// Retorna objeto com isValid e errors
|
||
|
|
return { isValid: Object.keys(errors).length === 0, errors };
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleAddToCart = () => {
|
||
|
|
if (!product) {
|
||
|
|
setError("Produto não encontrado");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Limpar erros anteriores
|
||
|
|
setFormErrors({});
|
||
|
|
setError(null);
|
||
|
|
|
||
|
|
// Validar formulário
|
||
|
|
const validation = validateForm();
|
||
|
|
|
||
|
|
if (!validation.isValid) {
|
||
|
|
// Aguardar um tick para que o estado seja atualizado antes de focar
|
||
|
|
setTimeout(() => {
|
||
|
|
const firstErrorField = Object.keys(validation.errors)[0];
|
||
|
|
|
||
|
|
if (firstErrorField === "quantity") {
|
||
|
|
// Focar no input de quantidade
|
||
|
|
const quantityInput = document.querySelector(
|
||
|
|
'input[type="number"]'
|
||
|
|
) as HTMLInputElement;
|
||
|
|
quantityInput?.focus();
|
||
|
|
} else if (firstErrorField === "deliveryType") {
|
||
|
|
// Focar no select de tipo de entrega
|
||
|
|
const deliverySelect = document.querySelector(
|
||
|
|
"select"
|
||
|
|
) as HTMLSelectElement;
|
||
|
|
deliverySelect?.focus();
|
||
|
|
} else if (firstErrorField === "selectedStore") {
|
||
|
|
// Focar no FilialSelector
|
||
|
|
const storeInput = document.querySelector(
|
||
|
|
'input[placeholder*="buscar"]'
|
||
|
|
) as HTMLInputElement;
|
||
|
|
storeInput?.focus();
|
||
|
|
}
|
||
|
|
}, 100);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Criar OrderItem com todos os campos necessários
|
||
|
|
// Seguindo exatamente o padrão do Angular (product-detail.component.ts linha 173-203)
|
||
|
|
// Se temos productDetail (SaleProduct), usar seus dados diretamente
|
||
|
|
const productWithQuantity: OrderItem = {
|
||
|
|
...product,
|
||
|
|
// Se productDetail existe, usar os dados do SaleProduct (mais completos)
|
||
|
|
...(productDetail && {
|
||
|
|
id: productDetail.idProduct?.toString() || product.id,
|
||
|
|
code: productDetail.idProduct?.toString() || product.code,
|
||
|
|
name: productDetail.title || product.name,
|
||
|
|
description:
|
||
|
|
productDetail.description ||
|
||
|
|
productDetail.smallDescription ||
|
||
|
|
product.description,
|
||
|
|
price: productDetail.salePrice || product.price,
|
||
|
|
originalPrice: productDetail.listPrice || product.originalPrice,
|
||
|
|
discount: productDetail.offPercent || product.discount,
|
||
|
|
mark: productDetail.brand || product.mark,
|
||
|
|
image:
|
||
|
|
productDetail.images?.[0] || productDetail.urlImage || product.image,
|
||
|
|
ean: productDetail.ean || product.ean,
|
||
|
|
model: productDetail.idProduct?.toString() || product.model,
|
||
|
|
productType: productDetail.productType,
|
||
|
|
mutiple: productDetail.mutiple,
|
||
|
|
base: productDetail.base,
|
||
|
|
letter: productDetail.letter,
|
||
|
|
line: productDetail.line,
|
||
|
|
color: productDetail.color,
|
||
|
|
can: productDetail.can,
|
||
|
|
}),
|
||
|
|
quantity,
|
||
|
|
deliveryType, // Tipo de entrega selecionado (obrigatório)
|
||
|
|
stockStore: selectedStore || product.stockLocal?.toString() || null, // Filial selecionada ou estoque local
|
||
|
|
};
|
||
|
|
|
||
|
|
onAddToCart(productWithQuantity);
|
||
|
|
// Opcional: fechar modal após adicionar
|
||
|
|
// onClose();
|
||
|
|
};
|
||
|
|
|
||
|
|
const mapSaleProductToProduct = (saleProduct: SaleProduct): Product => {
|
||
|
|
const productId =
|
||
|
|
saleProduct.idProduct?.toString() || saleProduct.id?.toString() || "";
|
||
|
|
|
||
|
|
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,
|
||
|
|
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,
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
if (!isOpen || !product) return null;
|
||
|
|
|
||
|
|
const images =
|
||
|
|
productDetail?.images || (product.image ? [product.image] : []);
|
||
|
|
const hasMultipleImages = images.length > 1;
|
||
|
|
const hasValidImage =
|
||
|
|
images.length > 0 &&
|
||
|
|
currentImageIndex >= 0 &&
|
||
|
|
currentImageIndex < images.length;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
|
||
|
|
<div className="bg-white rounded-3xl shadow-2xl max-w-7xl w-full max-h-[90vh] overflow-hidden flex flex-col">
|
||
|
|
{/* Header */}
|
||
|
|
<div className="flex items-center justify-between p-6 border-b border-slate-200">
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
<h2 className="text-2xl font-black text-[#002147]">
|
||
|
|
Detalhes do Produto
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
{/* Botões de navegação rápida */}
|
||
|
|
{!loading &&
|
||
|
|
(buyTogether.length > 0 || similarProducts.length > 0) && (
|
||
|
|
<div className="flex items-center gap-2 ml-4 pl-4 border-l border-slate-200">
|
||
|
|
{buyTogether.length > 0 && (
|
||
|
|
<button
|
||
|
|
onClick={() => scrollToSection(buyTogetherSectionRef)}
|
||
|
|
className="px-4 py-2 bg-orange-50 hover:bg-orange-100 text-orange-600 rounded-lg font-bold text-xs uppercase tracking-wider transition-all duration-300 hover:scale-105 border border-orange-200"
|
||
|
|
title="Ir para Compre Junto"
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<ArrowRight className="w-4 h-4" />
|
||
|
|
<span>Compre Junto</span>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
{similarProducts.length > 0 && (
|
||
|
|
<button
|
||
|
|
onClick={() => scrollToSection(similarProductsSectionRef)}
|
||
|
|
className="px-4 py-2 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg font-bold text-xs uppercase tracking-wider transition-all duration-300 hover:scale-105 border border-blue-200"
|
||
|
|
title="Ir para Produtos Similares"
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<ArrowRight className="w-4 h-4" />
|
||
|
|
<span>Similares</span>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="p-2 hover:bg-slate-100 rounded-xl transition-colors"
|
||
|
|
>
|
||
|
|
<X className="w-6 h-6 text-slate-600" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content */}
|
||
|
|
<div
|
||
|
|
ref={modalContentRef}
|
||
|
|
className="flex-1 overflow-y-auto custom-scrollbar p-6"
|
||
|
|
>
|
||
|
|
{loading ? (
|
||
|
|
<div className="flex flex-col items-center justify-center py-20">
|
||
|
|
<div className="animate-spin rounded-full h-16 w-16 border-4 border-slate-200 border-t-orange-500 mb-4"></div>
|
||
|
|
<p className="text-slate-600 font-bold text-sm">
|
||
|
|
Carregando detalhes...
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
) : error ? (
|
||
|
|
<div className="p-4 bg-red-50 border border-red-200 rounded-2xl">
|
||
|
|
<p className="text-red-600 text-sm font-medium">{error}</p>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||
|
|
{/* Left Column - Images */}
|
||
|
|
<div className="space-y-4">
|
||
|
|
{/* Main Image */}
|
||
|
|
<div className="bg-slate-50 rounded-2xl p-8 flex items-center justify-center min-h-[400px] relative overflow-hidden">
|
||
|
|
{hasValidImage && images[currentImageIndex] ? (
|
||
|
|
<>
|
||
|
|
<img
|
||
|
|
src={images[currentImageIndex]}
|
||
|
|
alt={product.name}
|
||
|
|
className="max-h-full max-w-full object-contain mix-blend-multiply"
|
||
|
|
onError={() => {
|
||
|
|
// Se a imagem falhar ao carregar, mostrar placeholder
|
||
|
|
setCurrentImageIndex(-1);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
{/* Navigation Arrows */}
|
||
|
|
{hasMultipleImages && (
|
||
|
|
<>
|
||
|
|
<button
|
||
|
|
onClick={() =>
|
||
|
|
setCurrentImageIndex((prev) =>
|
||
|
|
prev > 0 ? prev - 1 : images.length - 1
|
||
|
|
)
|
||
|
|
}
|
||
|
|
className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-3 rounded-full shadow-lg transition-all"
|
||
|
|
>
|
||
|
|
<ChevronLeft className="w-6 h-6 text-[#002147]" />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() =>
|
||
|
|
setCurrentImageIndex((prev) =>
|
||
|
|
prev < images.length - 1 ? prev + 1 : 0
|
||
|
|
)
|
||
|
|
}
|
||
|
|
className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-3 rounded-full shadow-lg transition-all"
|
||
|
|
>
|
||
|
|
<ChevronRight className="w-6 h-6 text-[#002147]" />
|
||
|
|
</button>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<NoImagePlaceholder size="lg" />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Thumbnails */}
|
||
|
|
{hasMultipleImages && (
|
||
|
|
<div className="flex gap-2 overflow-x-auto custom-scrollbar pb-2">
|
||
|
|
{images.map((img, idx) => (
|
||
|
|
<button
|
||
|
|
key={idx}
|
||
|
|
onClick={() => setCurrentImageIndex(idx)}
|
||
|
|
className={`flex-shrink-0 w-20 h-20 rounded-xl overflow-hidden border-2 transition-all ${
|
||
|
|
currentImageIndex === idx
|
||
|
|
? "border-orange-500"
|
||
|
|
: "border-slate-200 hover:border-slate-300"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src={img}
|
||
|
|
alt={`Imagem ${idx + 1}`}
|
||
|
|
className="w-full h-full object-cover"
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Right Column - Product Info */}
|
||
|
|
<div className="space-y-6">
|
||
|
|
{/* Title and Badges */}
|
||
|
|
<div>
|
||
|
|
<h3 className="text-3xl font-black text-[#002147] mb-4 leading-tight">
|
||
|
|
{productDetail?.title || product.name}
|
||
|
|
</h3>
|
||
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
||
|
|
<span className="bg-orange-500 text-white px-4 py-1.5 rounded-full text-xs font-black uppercase tracking-wider">
|
||
|
|
Código: {productDetail?.idProduct || product.code}
|
||
|
|
</span>
|
||
|
|
{productDetail?.productType === "A" && (
|
||
|
|
<span className="bg-blue-600 text-white px-4 py-1.5 rounded-full text-xs font-bold">
|
||
|
|
Autosserviço
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
{productDetail?.productType === "S" && (
|
||
|
|
<span className="bg-pink-600 text-white px-4 py-1.5 rounded-full text-xs font-bold">
|
||
|
|
Showroom
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
{product.discount ? (
|
||
|
|
<span className="bg-emerald-500 text-white px-4 py-1.5 rounded-full text-xs font-black">
|
||
|
|
{product.discount.toFixed(0)}% OFF
|
||
|
|
</span>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Description */}
|
||
|
|
<div>
|
||
|
|
<h4 className="text-lg font-black text-[#002147] mb-2">
|
||
|
|
Descrição
|
||
|
|
</h4>
|
||
|
|
<p className="text-slate-600 text-sm leading-relaxed">
|
||
|
|
{productDetail?.description ||
|
||
|
|
product.description ||
|
||
|
|
"Sem descrição disponível"}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Price */}
|
||
|
|
<div className="bg-slate-50 rounded-2xl p-6">
|
||
|
|
{product.originalPrice &&
|
||
|
|
product.originalPrice > product.price && (
|
||
|
|
<p className="text-sm text-slate-400 line-through mb-2">
|
||
|
|
de R${" "}
|
||
|
|
{product.originalPrice.toLocaleString("pt-BR", {
|
||
|
|
minimumFractionDigits: 2,
|
||
|
|
maximumFractionDigits: 2,
|
||
|
|
})}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
<div className="flex items-baseline gap-3 mb-2">
|
||
|
|
<p className="text-4xl font-black text-orange-600">
|
||
|
|
por R${" "}
|
||
|
|
{product.price.toLocaleString("pt-BR", {
|
||
|
|
minimumFractionDigits: 2,
|
||
|
|
maximumFractionDigits: 2,
|
||
|
|
})}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
{productDetail?.installments &&
|
||
|
|
productDetail.installments.length > 0 && (
|
||
|
|
<p className="text-sm text-slate-600 mt-2">
|
||
|
|
ou em {productDetail.installments[0].installment}x de R${" "}
|
||
|
|
{productDetail.installments[0].installmentValue.toLocaleString(
|
||
|
|
"pt-BR",
|
||
|
|
{
|
||
|
|
minimumFractionDigits: 2,
|
||
|
|
maximumFractionDigits: 2,
|
||
|
|
}
|
||
|
|
)}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Add to Cart Form */}
|
||
|
|
<div className="bg-white border-2 border-slate-200 rounded-2xl p-6 space-y-4">
|
||
|
|
<h4 className="text-lg font-black text-[#002147]">
|
||
|
|
Adicionar ao Carrinho
|
||
|
|
</h4>
|
||
|
|
|
||
|
|
{/* Quantity */}
|
||
|
|
<div>
|
||
|
|
<label className="block text-xs font-bold text-slate-700 uppercase tracking-wide mb-2">
|
||
|
|
Quantidade <span className="text-red-500">*</span>
|
||
|
|
</label>
|
||
|
|
<div
|
||
|
|
className={`flex items-center border rounded-lg overflow-hidden w-fit ${
|
||
|
|
formErrors.quantity
|
||
|
|
? "border-red-500"
|
||
|
|
: "border-slate-300"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
const newQuantity = Math.max(0.01, quantity - 1);
|
||
|
|
setQuantity(newQuantity);
|
||
|
|
// Limpar erro ao alterar
|
||
|
|
if (formErrors.quantity) {
|
||
|
|
setFormErrors((prev) => ({
|
||
|
|
...prev,
|
||
|
|
quantity: undefined,
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="bg-[#002147] text-white px-4 py-3 hover:bg-[#003366] transition-colors font-bold flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
|
||
|
|
disabled={quantity <= 0.01}
|
||
|
|
>
|
||
|
|
<Minus className="w-4 h-4" />
|
||
|
|
</button>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
min="0.01"
|
||
|
|
step="0.01"
|
||
|
|
value={quantity.toFixed(2)}
|
||
|
|
onChange={(e) => {
|
||
|
|
const val = parseFloat(e.target.value);
|
||
|
|
if (!isNaN(val) && val > 0) {
|
||
|
|
setQuantity(val);
|
||
|
|
// Limpar erro ao alterar
|
||
|
|
if (formErrors.quantity) {
|
||
|
|
setFormErrors((prev) => ({
|
||
|
|
...prev,
|
||
|
|
quantity: undefined,
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
onBlur={() => {
|
||
|
|
// Validar ao sair do campo
|
||
|
|
if (
|
||
|
|
!validateRequired(quantity) ||
|
||
|
|
!validateMinValue(quantity, 0.01)
|
||
|
|
) {
|
||
|
|
setFormErrors((prev) => ({
|
||
|
|
...prev,
|
||
|
|
quantity: "A quantidade deve ser maior que zero",
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className={`w-20 text-center text-sm font-bold border-0 focus:outline-none focus:ring-2 focus:ring-orange-500/20 bg-white ${
|
||
|
|
formErrors.quantity ? "text-red-600" : ""
|
||
|
|
}`}
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
setQuantity((q) => q + 1);
|
||
|
|
// Limpar erro ao alterar
|
||
|
|
if (formErrors.quantity) {
|
||
|
|
setFormErrors((prev) => ({
|
||
|
|
...prev,
|
||
|
|
quantity: undefined,
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="bg-[#002147] text-white px-4 py-3 hover:bg-[#003366] transition-colors font-bold flex items-center justify-center"
|
||
|
|
>
|
||
|
|
<Plus className="w-4 h-4" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{formErrors.quantity && (
|
||
|
|
<div className="flex items-center gap-1 mt-1 text-red-600 text-xs">
|
||
|
|
<AlertCircle className="w-3 h-3" />
|
||
|
|
<span>{formErrors.quantity}</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Stock Info */}
|
||
|
|
{productDetail?.stocks && productDetail.stocks.length > 0 && (
|
||
|
|
<div>
|
||
|
|
<FilialSelector
|
||
|
|
stocks={productDetail.stocks}
|
||
|
|
value={selectedStore}
|
||
|
|
onValueChange={(value) => {
|
||
|
|
setSelectedStore(value);
|
||
|
|
// Limpar erro ao alterar
|
||
|
|
if (formErrors.selectedStore) {
|
||
|
|
setFormErrors((prev) => ({
|
||
|
|
...prev,
|
||
|
|
selectedStore: undefined,
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
label="Filial Retira"
|
||
|
|
placeholder="Digite para buscar..."
|
||
|
|
/>
|
||
|
|
{formErrors.selectedStore && (
|
||
|
|
<div className="flex items-center gap-1 mt-1 text-red-600 text-xs">
|
||
|
|
<AlertCircle className="w-3 h-3" />
|
||
|
|
<span>{formErrors.selectedStore}</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Delivery Type */}
|
||
|
|
<div>
|
||
|
|
<label className="block text-xs font-bold text-slate-700 uppercase tracking-wide mb-2">
|
||
|
|
Tipo de Entrega <span className="text-red-500">*</span>
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
value={deliveryType}
|
||
|
|
onChange={(e) => {
|
||
|
|
setDeliveryType(e.target.value);
|
||
|
|
// Limpar erro ao alterar
|
||
|
|
if (formErrors.deliveryType) {
|
||
|
|
setFormErrors((prev) => ({
|
||
|
|
...prev,
|
||
|
|
deliveryType: undefined,
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
onBlur={() => {
|
||
|
|
// Validar ao sair do campo
|
||
|
|
if (!validateRequired(deliveryType)) {
|
||
|
|
setFormErrors((prev) => ({
|
||
|
|
...prev,
|
||
|
|
deliveryType: "O tipo de entrega é obrigatório",
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className={`w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500/20 text-sm font-medium ${
|
||
|
|
formErrors.deliveryType
|
||
|
|
? "border-red-500 focus:border-red-500"
|
||
|
|
: "border-slate-300 focus:border-orange-500"
|
||
|
|
}`}
|
||
|
|
required
|
||
|
|
>
|
||
|
|
<option value="">Selecione o tipo</option>
|
||
|
|
{deliveryTypes.map((dt) => (
|
||
|
|
<option key={dt.type} value={dt.type}>
|
||
|
|
{dt.description}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
{formErrors.deliveryType && (
|
||
|
|
<div className="flex items-center gap-1 mt-1 text-red-600 text-xs">
|
||
|
|
<AlertCircle className="w-3 h-3" />
|
||
|
|
<span>{formErrors.deliveryType}</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Add Button */}
|
||
|
|
<button
|
||
|
|
onClick={handleAddToCart}
|
||
|
|
className="w-full flex items-center justify-center gap-2 bg-orange-500 text-white py-4 rounded-xl font-black uppercase text-sm tracking-wider hover:bg-orange-600 transition-all shadow-lg"
|
||
|
|
>
|
||
|
|
<ShoppingCart className="w-5 h-5" />
|
||
|
|
Adicionar ao Carrinho
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Tabs */}
|
||
|
|
<div className="border-t border-slate-200 pt-6">
|
||
|
|
<div className="flex gap-4 mb-4">
|
||
|
|
<button
|
||
|
|
onClick={() => setActiveTab("details")}
|
||
|
|
className={`flex items-center gap-2 px-6 py-3 rounded-xl font-bold text-sm transition-all ${
|
||
|
|
activeTab === "details"
|
||
|
|
? "bg-[#002147] text-white"
|
||
|
|
: "bg-slate-100 text-slate-600 hover:bg-slate-200"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<Info className="w-4 h-4" />
|
||
|
|
Características Técnicas
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => setActiveTab("specs")}
|
||
|
|
className={`flex items-center gap-2 px-6 py-3 rounded-xl font-bold text-sm transition-all ${
|
||
|
|
activeTab === "specs"
|
||
|
|
? "bg-[#002147] text-white"
|
||
|
|
: "bg-slate-100 text-slate-600 hover:bg-slate-200"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<FileText className="w-4 h-4" />
|
||
|
|
Especificações
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{activeTab === "details" && (
|
||
|
|
<div className="bg-slate-50 rounded-xl p-6">
|
||
|
|
<div className="grid grid-cols-2 gap-4">
|
||
|
|
<div>
|
||
|
|
<span className="text-xs font-bold text-slate-500 uppercase">
|
||
|
|
EAN
|
||
|
|
</span>
|
||
|
|
<p className="text-sm font-medium text-slate-800">
|
||
|
|
{product.ean || "N/A"}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span className="text-xs font-bold text-slate-500 uppercase">
|
||
|
|
Marca
|
||
|
|
</span>
|
||
|
|
<p className="text-sm font-medium text-slate-800">
|
||
|
|
{product.mark || "N/A"}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span className="text-xs font-bold text-slate-500 uppercase">
|
||
|
|
Estoque Loja
|
||
|
|
</span>
|
||
|
|
<p className="text-sm font-medium text-slate-800">
|
||
|
|
{product.stockLocal || 0} UN
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span className="text-xs font-bold text-slate-500 uppercase">
|
||
|
|
Estoque Disponível
|
||
|
|
</span>
|
||
|
|
<p className="text-sm font-medium text-slate-800">
|
||
|
|
{product.stockAvailable || 0} UN
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{activeTab === "specs" && (
|
||
|
|
<div className="bg-slate-50 rounded-xl p-6">
|
||
|
|
<p className="text-sm text-slate-600">
|
||
|
|
{productDetail?.technicalData ||
|
||
|
|
"Sem especificações técnicas disponíveis"}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Compre Junto Section */}
|
||
|
|
{!loading && buyTogether.length > 0 && (
|
||
|
|
<div
|
||
|
|
ref={buyTogetherSectionRef}
|
||
|
|
className="mt-12 border-t border-slate-200 pt-8 scroll-mt-8"
|
||
|
|
>
|
||
|
|
<h3 className="text-2xl font-black text-[#002147] mb-6">
|
||
|
|
Compre Junto
|
||
|
|
</h3>
|
||
|
|
{loadingRelated ? (
|
||
|
|
<div className="flex items-center justify-center py-8">
|
||
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-orange-500"></div>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="relative -mx-6 px-6">
|
||
|
|
{/* Botão de rolagem esquerda - sempre visível */}
|
||
|
|
<button
|
||
|
|
onClick={() =>
|
||
|
|
scrollHorizontally(
|
||
|
|
buyTogetherScrollRef,
|
||
|
|
"left",
|
||
|
|
setBuyTogetherScrollState
|
||
|
|
)
|
||
|
|
}
|
||
|
|
className={`absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-white/95 hover:bg-white border border-slate-300 rounded-full p-3 shadow-xl transition-all hover:scale-110 ${
|
||
|
|
buyTogetherScrollState.canScrollLeft
|
||
|
|
? "opacity-100 cursor-pointer"
|
||
|
|
: "opacity-30 cursor-not-allowed"
|
||
|
|
}`}
|
||
|
|
disabled={!buyTogetherScrollState.canScrollLeft}
|
||
|
|
title="Rolar para esquerda"
|
||
|
|
>
|
||
|
|
<ChevronLeft className="w-5 h-5 text-[#002147]" />
|
||
|
|
</button>
|
||
|
|
{/* Container com produtos */}
|
||
|
|
<div
|
||
|
|
ref={buyTogetherScrollRef}
|
||
|
|
data-scroll-container
|
||
|
|
className="flex gap-4 overflow-x-auto scrollbar-hide scroll-smooth pb-4 cursor-grab active:cursor-grabbing"
|
||
|
|
style={{
|
||
|
|
WebkitOverflowScrolling: "touch",
|
||
|
|
touchAction: "pan-x",
|
||
|
|
scrollBehavior: "smooth",
|
||
|
|
overscrollBehaviorX: "contain",
|
||
|
|
willChange: "scroll-position",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{buyTogether.map((relatedProduct) => {
|
||
|
|
const mappedProduct =
|
||
|
|
mapSaleProductToProduct(relatedProduct);
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={mappedProduct.id}
|
||
|
|
className="flex-shrink-0 w-[280px] min-w-[280px]"
|
||
|
|
>
|
||
|
|
<RelatedProductCard
|
||
|
|
product={mappedProduct}
|
||
|
|
onAddToCart={(p) =>
|
||
|
|
onAddToCart({ ...p, quantity: 1 })
|
||
|
|
}
|
||
|
|
onClick={() => {
|
||
|
|
// Atualizar o produto exibido no modal
|
||
|
|
if (onProductChange) {
|
||
|
|
onProductChange(mappedProduct);
|
||
|
|
// Scroll para o topo do modal
|
||
|
|
if (modalContentRef.current) {
|
||
|
|
modalContentRef.current.scrollTo({
|
||
|
|
top: 0,
|
||
|
|
behavior: "smooth",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
{/* Botão de rolagem direita - sempre visível quando há scroll */}
|
||
|
|
<button
|
||
|
|
onClick={() =>
|
||
|
|
scrollHorizontally(
|
||
|
|
buyTogetherScrollRef,
|
||
|
|
"right",
|
||
|
|
setBuyTogetherScrollState
|
||
|
|
)
|
||
|
|
}
|
||
|
|
className={`absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-white/95 hover:bg-white border border-slate-300 rounded-full p-3 shadow-xl transition-all hover:scale-110 ${
|
||
|
|
buyTogetherScrollState.canScrollRight
|
||
|
|
? "opacity-100 cursor-pointer"
|
||
|
|
: "opacity-30 cursor-not-allowed"
|
||
|
|
}`}
|
||
|
|
disabled={!buyTogetherScrollState.canScrollRight}
|
||
|
|
title="Rolar para direita"
|
||
|
|
>
|
||
|
|
<ChevronRight className="w-5 h-5 text-[#002147]" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Produtos Similares */}
|
||
|
|
{!loading && similarProducts.length > 0 && (
|
||
|
|
<div
|
||
|
|
ref={similarProductsSectionRef}
|
||
|
|
className="mt-12 border-t border-slate-200 pt-8 scroll-mt-8"
|
||
|
|
>
|
||
|
|
<h3 className="text-2xl font-black text-[#002147] mb-6">
|
||
|
|
Produtos Similares
|
||
|
|
</h3>
|
||
|
|
{loadingRelated ? (
|
||
|
|
<div className="flex items-center justify-center py-8">
|
||
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-orange-500"></div>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="relative -mx-6 px-6">
|
||
|
|
{/* Botão de rolagem esquerda - sempre visível quando há scroll */}
|
||
|
|
<button
|
||
|
|
onClick={() =>
|
||
|
|
scrollHorizontally(
|
||
|
|
similarProductsScrollRef,
|
||
|
|
"left",
|
||
|
|
setSimilarProductsScrollState
|
||
|
|
)
|
||
|
|
}
|
||
|
|
className={`absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-white/95 hover:bg-white border border-slate-300 rounded-full p-3 shadow-xl transition-all hover:scale-110 ${
|
||
|
|
similarProductsScrollState.canScrollLeft
|
||
|
|
? "opacity-100 cursor-pointer"
|
||
|
|
: "opacity-30 cursor-not-allowed"
|
||
|
|
}`}
|
||
|
|
disabled={!similarProductsScrollState.canScrollLeft}
|
||
|
|
title="Rolar para esquerda"
|
||
|
|
>
|
||
|
|
<ChevronLeft className="w-5 h-5 text-[#002147]" />
|
||
|
|
</button>
|
||
|
|
{/* Container com produtos */}
|
||
|
|
<div
|
||
|
|
ref={similarProductsScrollRef}
|
||
|
|
data-scroll-container
|
||
|
|
className="flex gap-4 overflow-x-auto scrollbar-hide scroll-smooth pb-4 cursor-grab active:cursor-grabbing"
|
||
|
|
style={{
|
||
|
|
WebkitOverflowScrolling: "touch",
|
||
|
|
touchAction: "pan-x",
|
||
|
|
scrollBehavior: "smooth",
|
||
|
|
overscrollBehaviorX: "contain",
|
||
|
|
willChange: "scroll-position",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{similarProducts.map((similarProduct) => {
|
||
|
|
const mappedProduct =
|
||
|
|
mapSaleProductToProduct(similarProduct);
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={mappedProduct.id}
|
||
|
|
className="flex-shrink-0 w-[280px] min-w-[280px]"
|
||
|
|
>
|
||
|
|
<RelatedProductCard
|
||
|
|
product={mappedProduct}
|
||
|
|
onAddToCart={(p) =>
|
||
|
|
onAddToCart({ ...p, quantity: 1 })
|
||
|
|
}
|
||
|
|
onClick={() => {
|
||
|
|
// Atualizar o produto exibido no modal
|
||
|
|
if (onProductChange) {
|
||
|
|
onProductChange(mappedProduct);
|
||
|
|
// Scroll para o topo do modal
|
||
|
|
if (modalContentRef.current) {
|
||
|
|
modalContentRef.current.scrollTo({
|
||
|
|
top: 0,
|
||
|
|
behavior: "smooth",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
{/* Botão de rolagem direita - sempre visível quando há scroll */}
|
||
|
|
<button
|
||
|
|
onClick={() =>
|
||
|
|
scrollHorizontally(
|
||
|
|
similarProductsScrollRef,
|
||
|
|
"right",
|
||
|
|
setSimilarProductsScrollState
|
||
|
|
)
|
||
|
|
}
|
||
|
|
className={`absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-white/95 hover:bg-white border border-slate-300 rounded-full p-3 shadow-xl transition-all hover:scale-110 ${
|
||
|
|
similarProductsScrollState.canScrollRight
|
||
|
|
? "opacity-100 cursor-pointer"
|
||
|
|
: "opacity-30 cursor-not-allowed"
|
||
|
|
}`}
|
||
|
|
disabled={!similarProductsScrollState.canScrollRight}
|
||
|
|
title="Rolar para direita"
|
||
|
|
>
|
||
|
|
<ChevronRight className="w-5 h-5 text-[#002147]" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<style>{`
|
||
|
|
.scrollbar-hide::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.scrollbar-hide {
|
||
|
|
-ms-overflow-style: none;
|
||
|
|
scrollbar-width: none;
|
||
|
|
}
|
||
|
|
/* Garantir que o scroll horizontal funcione */
|
||
|
|
[data-scroll-container] {
|
||
|
|
overflow-x: auto !important;
|
||
|
|
overflow-y: visible !important;
|
||
|
|
-webkit-overflow-scrolling: touch;
|
||
|
|
touch-action: pan-x;
|
||
|
|
}
|
||
|
|
`}</style>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ProductDetailModal;
|