diff --git a/src/components/products/share/SharePreviewDialog.tsx b/src/components/products/share/SharePreviewDialog.tsx index 2581e0eb0..445fa76f4 100644 --- a/src/components/products/share/SharePreviewDialog.tsx +++ b/src/components/products/share/SharePreviewDialog.tsx @@ -1,22 +1,22 @@ -import { useState, useCallback, useMemo, useEffect } from "react"; -import { MessageCircle, Send, Eye, Pencil } from "lucide-react"; -import { Button } from "@/components/ui/button"; +import { useState, useCallback, useMemo, useEffect } from 'react'; +import { MessageCircle, Send, Eye, Pencil } from 'lucide-react'; +import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, -} from "@/components/ui/dialog"; -import { Textarea } from "@/components/ui/textarea"; -import { useToast } from "@/hooks/ui"; -import type { Product } from "@/hooks/products"; -import { PhotoSelector } from "./PhotoSelector"; -import { ShareContactSelector, type ShareContactSelection } from "./ShareContactSelector"; -import { MESSAGE_TEMPLATES, type TemplateKey } from "./MessageTemplates"; -import { WhatsAppPreview } from "./WhatsAppPreview"; -import { openWhatsAppShare } from "./whatsapp"; -import { cn } from "@/lib/utils"; +} from '@/components/ui/dialog'; +import { Textarea } from '@/components/ui/textarea'; +import { useToast } from '@/hooks/ui'; +import type { Product } from '@/hooks/products'; +import { PhotoSelector } from './PhotoSelector'; +import { ShareContactSelector, type ShareContactSelection } from './ShareContactSelector'; +import { MESSAGE_TEMPLATES, type TemplateKey } from './MessageTemplates'; +import { WhatsAppPreview } from './WhatsAppPreview'; +import { openWhatsAppShare } from './whatsapp'; +import { cn } from '@/lib/utils'; interface SelectedVariantInfo { variantName?: string | null; @@ -31,9 +31,14 @@ interface SharePreviewDialogProps { selectedVariant?: SelectedVariantInfo | null; } -export function SharePreviewDialog({ open, onOpenChange, product, selectedVariant }: SharePreviewDialogProps) { +export function SharePreviewDialog({ + open, + onOpenChange, + product, + selectedVariant, +}: SharePreviewDialogProps) { const { toast } = useToast(); - const [activeTemplate, setActiveTemplate] = useState("informal"); + const [activeTemplate, setActiveTemplate] = useState('informal'); const [customMessage, setCustomMessage] = useState(null); const [contactSelection, setContactSelection] = useState(null); const [previewMode, setPreviewMode] = useState(false); @@ -58,13 +63,15 @@ export function SharePreviewDialog({ open, onOpenChange, product, selectedVarian }); const filtered = product.images.filter((img) => !colorImageUrls.has(img)); - preferredImages.push(...(filtered.length > 0 ? filtered : product.images[0] ? [product.images[0]] : [])); + preferredImages.push( + ...(filtered.length > 0 ? filtered : product.images[0] ? [product.images[0]] : []), + ); return Array.from(new Set(preferredImages)); }, [product.images, product.colors, selectedVariant?.thumbnailUrl]); const [selectedImages, setSelectedImages] = useState>( - () => new Set(mainImages.map((_, i) => i)) + () => new Set(mainImages.map((_, i) => i)), ); // Reset selected images when the available images change (e.g. different variant) @@ -72,7 +79,8 @@ export function SharePreviewDialog({ open, onOpenChange, product, selectedVarian setSelectedImages(new Set(mainImages.map((_, i) => i))); }, [mainImages]); - const currentTemplate = MESSAGE_TEMPLATES.find((t) => t.key === activeTemplate)!; + const currentTemplate = + MESSAGE_TEMPLATES.find((t) => t.key === activeTemplate) ?? MESSAGE_TEMPLATES[0]; const defaultMessage = useMemo(() => { const baseMessage = currentTemplate.generate(product); @@ -111,7 +119,7 @@ export function SharePreviewDialog({ open, onOpenChange, product, selectedVarian }; const handleSend = () => { - const target = contactSelection?.contactName || contactSelection?.companyName || "destinatário"; + const target = contactSelection?.contactName || contactSelection?.companyName || 'destinatário'; const { opened } = openWhatsAppShare({ message, @@ -120,14 +128,14 @@ export function SharePreviewDialog({ open, onOpenChange, product, selectedVarian if (opened) { toast({ - title: "WhatsApp aberto", + title: 'WhatsApp aberto', description: `Mensagem preparada para ${target}`, }); } else { toast({ - title: "Não foi possível abrir o WhatsApp", - description: "Verifique se popups estão permitidos no navegador.", - variant: "destructive", + title: 'Não foi possível abrir o WhatsApp', + description: 'Verifique se popups estão permitidos no navegador.', + variant: 'destructive', }); } onOpenChange(false); @@ -135,15 +143,22 @@ export function SharePreviewDialog({ open, onOpenChange, product, selectedVarian return ( - e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()}> + e.stopPropagation()} + onPointerDown={(e) => e.stopPropagation()} + > Enviar Produto {selectedVariant?.variantName && ( - + {selectedVariant.colorHex && ( - + )} — {selectedVariant.variantName} @@ -151,9 +166,7 @@ export function SharePreviewDialog({ open, onOpenChange, product, selectedVarian )} - - Selecione fotos, modelo de mensagem e contato - + Selecione fotos, modelo de mensagem e contato
@@ -176,10 +189,10 @@ export function SharePreviewDialog({ open, onOpenChange, product, selectedVarian type="button" onClick={() => handleTemplateChange(t.key)} className={cn( - "px-3 py-1.5 rounded-full text-xs font-medium transition-colors", + 'rounded-full px-3 py-1.5 text-xs font-medium transition-colors', activeTemplate === t.key - ? "bg-primary text-primary-foreground" - : "bg-secondary text-secondary-foreground hover:bg-secondary/80" + ? 'bg-primary text-primary-foreground' + : 'bg-secondary text-secondary-foreground hover:bg-secondary/80', )} title={t.description} > @@ -196,10 +209,10 @@ export function SharePreviewDialog({ open, onOpenChange, product, selectedVarian type="button" onClick={() => setPreviewMode(!previewMode)} className={cn( - "flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium transition-colors", + 'flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium transition-colors', previewMode - ? "bg-[hsl(142,40%,28%)] text-primary-foreground" - : "bg-secondary text-secondary-foreground hover:bg-secondary/80" + ? 'bg-[hsl(142,40%,28%)] text-primary-foreground' + : 'bg-secondary text-secondary-foreground hover:bg-secondary/80', )} > {previewMode ? ( @@ -216,7 +229,7 @@ export function SharePreviewDialog({ open, onOpenChange, product, selectedVarian
-
+
{previewMode ? ( ) : ( -
+