feat(listing): make an offer (prefilled DM) + share listing

On the listing detail page, buyers get 'Make an offer' (opens the DM with the
seller pre-filled with an offer message about the listing) and 'Share listing'
(copies the URL). Replaces the redundant 'Message' button (Contact Seller is
already in the shared trade actions).

Gate: 101 tests, 0 errors/warnings, boot smoke green.
This commit is contained in:
SkateSpots 2026-09-26 23:03:06 +07:00
parent e0e41ae625
commit 269d5d6c09

View file

@ -25,7 +25,6 @@ import { genUserName } from '@/lib/genUserName';
import { cn } from '@/lib/utils';
import {
ArrowLeft,
MessageCircle,
CheckCircle,
RotateCcw,
Trash2,
@ -33,6 +32,8 @@ import {
MapPin,
Calendar,
Tag,
Handshake,
Share2,
} from 'lucide-react';
/**
@ -104,6 +105,17 @@ export default function ListingDetailPage() {
const lightboxImages: LightboxImage[] = item.images.map((url) => ({ url, isOwner: isOwnListing }));
const offerMessage = `Hi! I saw your listing “${item.title}” on SkateSpots and I'd like to make an offer.`;
const handleShare = async () => {
try {
await navigator.clipboard.writeText(window.location.href);
toast({ title: 'Link copied', description: 'Share it with a skater.' });
} catch {
toast({ title: 'Could not copy the link', variant: 'destructive' });
}
};
const handleRelist = async () => {
try {
await relist(item.event);
@ -304,15 +316,23 @@ export default function ListingDetailPage() {
<Card className="bg-black/90 border-white/10">
<CardContent className="p-4">
<ListingTradeActions item={item} />
<Button
variant="outline"
size="sm"
onClick={() =>
navigate(`/messages/${npub}?message=${encodeURIComponent(offerMessage)}`)
}
className="mt-2 w-full gap-2 border-orange-500/40 text-orange-400 hover:bg-orange-500/10"
>
<Handshake className="h-4 w-4" /> Make an offer
</Button>
<Button
variant="ghost"
size="sm"
asChild
className="mt-2 w-full gap-2 text-gray-400 hover:text-white"
onClick={handleShare}
className="mt-1 w-full gap-2 text-gray-400 hover:text-white"
>
<Link to={`/messages/${npub}`}>
<MessageCircle className="h-4 w-4" /> Message {displayName}
</Link>
<Share2 className="h-4 w-4" /> Share listing
</Button>
</CardContent>
</Card>