Arda Samadi
7867db425e
- Product-page chat buttons pass the product id when starting a thread, so it's shared into the conversation as a card the seller can see (and tap through). - MessageBubble renders the product card (image, title, price → product page); card-only messages no longer render an empty bubble. - Inbox preview shows 🛍 <product> instead of "بدون پیام" for product-card threads. ChatProductCard type + product on message/last-message types. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
import { useNavigate } from "@remix-run/react";
|
|
import { MessageCircleMore } from "lucide-react";
|
|
import { ProductDetail } from "src/api/types";
|
|
import { Button } from "~/components/ui/button";
|
|
import { useCreateChatThread } from "~/requestHandler/use-chat-hooks";
|
|
import { useRootData } from "~/hooks/use-root-data";
|
|
import { useState } from "react";
|
|
import { LoginRequiredDialog } from "~/components/LoginRequiredDialog";
|
|
|
|
export const ContactButton = ({ product }: { product: ProductDetail }) => {
|
|
const navigate = useNavigate();
|
|
const { user } = useRootData();
|
|
const [isLoginDialogOpen, setIsLoginDialogOpen] = useState(false);
|
|
const { mutate: createChatThread, isPending: isCreatingChatThread } =
|
|
useCreateChatThread();
|
|
const handleCreateChatThread = () => {
|
|
if (!user) {
|
|
setIsLoginDialogOpen(true);
|
|
return;
|
|
}
|
|
if (!product.seller?.id) return;
|
|
createChatThread(
|
|
{ participantId: product.seller.id, productId: product.id },
|
|
{
|
|
onSuccess: (threadData) => {
|
|
navigate(`/profile/threads/${threadData.id}`);
|
|
},
|
|
}
|
|
);
|
|
};
|
|
return (
|
|
<>
|
|
<div className="mt-10 px-4 pb-4 w-full">
|
|
<Button
|
|
variant="primary"
|
|
onClick={handleCreateChatThread}
|
|
disabled={!product.seller?.id || isCreatingChatThread}
|
|
size="lg"
|
|
className="w-full font-bold"
|
|
>
|
|
<MessageCircleMore size={24} />
|
|
{isCreatingChatThread ? "در حال اتصال..." : "گفتگو با فروشنده"}
|
|
</Button>
|
|
</div>
|
|
<LoginRequiredDialog
|
|
loginTitle="برای ارسال پیام به فروشنده ابتدا باید وارد حساب کاربری خود شوید."
|
|
isOpen={isLoginDialogOpen}
|
|
onOpenChange={setIsLoginDialogOpen}
|
|
/>
|
|
</>
|
|
);
|
|
};
|