feat: Complete Portfolio redesign with edit modal, full domain details, health checks
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled
This commit is contained in:
@ -423,9 +423,10 @@ async def submit_inquiry(
|
||||
slug: str,
|
||||
inquiry: InquiryCreate,
|
||||
request: Request,
|
||||
current_user: User = Depends(get_current_user),
|
||||
db: AsyncSession = Depends(get_db),
|
||||
):
|
||||
"""Submit an inquiry for a listing (public)."""
|
||||
"""Submit an inquiry for a listing (requires authentication)."""
|
||||
# Find listing
|
||||
result = await db.execute(
|
||||
select(DomainListing).where(
|
||||
@ -439,6 +440,14 @@ async def submit_inquiry(
|
||||
|
||||
if not listing:
|
||||
raise HTTPException(status_code=404, detail="Listing not found")
|
||||
|
||||
# Require that inquiries are sent from the authenticated account email.
|
||||
# This prevents anonymous spam and makes the buyer identity consistent.
|
||||
if inquiry.email.lower() != (current_user.email or "").lower():
|
||||
raise HTTPException(
|
||||
status_code=400,
|
||||
detail="Inquiry email must match your account email.",
|
||||
)
|
||||
|
||||
# Security: Check for phishing keywords
|
||||
if not _check_content_safety(inquiry.message):
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useMemo } from 'react'
|
||||
import { useEffect, useState, useMemo, useCallback } from 'react'
|
||||
import { useStore } from '@/lib/store'
|
||||
import { api } from '@/lib/api'
|
||||
import { Header } from '@/components/Header'
|
||||
@ -25,6 +25,7 @@ import {
|
||||
Loader2
|
||||
} from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import clsx from 'clsx'
|
||||
|
||||
interface MarketItem {
|
||||
@ -64,6 +65,7 @@ interface Auction {
|
||||
tld: string
|
||||
affiliate_url: string
|
||||
is_pounce?: boolean
|
||||
slug?: string
|
||||
}
|
||||
|
||||
type TabType = 'all' | 'ending' | 'hot'
|
||||
@ -112,6 +114,7 @@ function isVanityDomain(auction: Auction): boolean {
|
||||
|
||||
export default function AcquirePage() {
|
||||
const { isAuthenticated, checkAuth, isLoading: authLoading } = useStore()
|
||||
const router = useRouter()
|
||||
|
||||
const [allAuctions, setAllAuctions] = useState<Auction[]>([])
|
||||
const [endingSoon, setEndingSoon] = useState<Auction[]>([])
|
||||
@ -127,6 +130,8 @@ export default function AcquirePage() {
|
||||
const [selectedPlatform, setSelectedPlatform] = useState('All')
|
||||
const [searchFocused, setSearchFocused] = useState(false)
|
||||
const [showFilters, setShowFilters] = useState(false)
|
||||
|
||||
const [directGate, setDirectGate] = useState<{ domain: string; slug: string } | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
checkAuth()
|
||||
@ -158,6 +163,7 @@ export default function AcquirePage() {
|
||||
age_years: null,
|
||||
tld: item.tld,
|
||||
affiliate_url: item.url,
|
||||
slug: item.slug,
|
||||
})
|
||||
|
||||
const toAuctions = (items: MarketItem[]) => items.map(convertToAuction)
|
||||
@ -224,6 +230,7 @@ export default function AcquirePage() {
|
||||
tld: item.tld,
|
||||
affiliate_url: item.url,
|
||||
is_pounce: true, // Special flag
|
||||
slug: item.slug,
|
||||
}))
|
||||
|
||||
// Apply auth filter
|
||||
@ -254,6 +261,23 @@ export default function AcquirePage() {
|
||||
return 'text-white/40'
|
||||
}
|
||||
|
||||
const getPounceSlug = useCallback((auction: Auction): string | null => {
|
||||
if (!auction.is_pounce) return null
|
||||
if (auction.slug) return auction.slug
|
||||
const match = (auction.affiliate_url || '').match(/^\/buy\/(.+)$/)
|
||||
return match?.[1] || null
|
||||
}, [])
|
||||
|
||||
const handlePounceDirectClick = useCallback((auction: Auction) => {
|
||||
const slug = getPounceSlug(auction)
|
||||
if (!slug) return
|
||||
if (isAuthenticated) {
|
||||
router.push(`/buy/${slug}`)
|
||||
return
|
||||
}
|
||||
setDirectGate({ domain: auction.domain, slug })
|
||||
}, [getPounceSlug, isAuthenticated, router])
|
||||
|
||||
if (authLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#020202]">
|
||||
@ -278,6 +302,72 @@ export default function AcquirePage() {
|
||||
|
||||
<Header />
|
||||
|
||||
{/* Pounce Direct gate (public conversion modal) */}
|
||||
{directGate && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Close"
|
||||
onClick={() => setDirectGate(null)}
|
||||
className="absolute inset-0 bg-black/70"
|
||||
/>
|
||||
<div className="relative w-full max-w-md border border-white/[0.10] bg-[#020202] shadow-2xl">
|
||||
<div className="flex items-start justify-between gap-4 p-4 border-b border-white/[0.08]">
|
||||
<div>
|
||||
<div className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Pounce Direct</div>
|
||||
<h3 className="mt-1 text-lg font-display text-white">{directGate.domain}</h3>
|
||||
<p className="mt-1 text-xs font-mono text-white/40">
|
||||
Verified owner. Contact requires login.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setDirectGate(null)}
|
||||
className="p-1 text-white/40 hover:text-white"
|
||||
aria-label="Close"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-4 space-y-3">
|
||||
<div className="flex items-start gap-3 border border-accent/20 bg-accent/[0.04] p-3">
|
||||
<Lock className="w-4 h-4 text-accent shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-xs font-bold text-white">Seller protection</p>
|
||||
<p className="text-[10px] font-mono text-white/50 mt-1">
|
||||
Log in to send an inquiry. This reduces spam and keeps buyer identity consistent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href={`/buy/${directGate.slug}`}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-white/[0.05] border border-white/[0.10] text-white text-xs font-bold uppercase tracking-wider hover:bg-white/[0.08] transition-colors"
|
||||
>
|
||||
View Details
|
||||
<ArrowUpRight className="w-4 h-4" />
|
||||
</Link>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Link
|
||||
href={`/login?redirect=${encodeURIComponent(`/buy/${directGate.slug}`)}`}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-accent text-black text-xs font-bold uppercase tracking-wider hover:bg-white transition-colors"
|
||||
>
|
||||
Login
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
<Link
|
||||
href={`/register?redirect=${encodeURIComponent(`/buy/${directGate.slug}`)}`}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-3 border border-white/[0.10] bg-white/[0.02] text-white text-xs font-bold uppercase tracking-wider hover:bg-white/[0.05] transition-colors"
|
||||
>
|
||||
Register
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
{/* MOBILE HEADER */}
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
@ -425,61 +515,82 @@ export default function AcquirePage() {
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{filteredAuctions.slice(0, 50).map((auction, i) => (
|
||||
<a
|
||||
key={`${auction.domain}-${i}`}
|
||||
href={auction.affiliate_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={clsx(
|
||||
"block p-3 border active:bg-white/[0.03] transition-all",
|
||||
auction.is_pounce
|
||||
? "bg-accent/[0.03] border-accent/20"
|
||||
: "bg-[#0A0A0A] border-white/[0.08]"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
{auction.is_pounce && (
|
||||
auction.is_pounce ? (
|
||||
<button
|
||||
key={`${auction.domain}-${i}`}
|
||||
type="button"
|
||||
onClick={() => handlePounceDirectClick(auction)}
|
||||
className={clsx(
|
||||
"w-full text-left block p-3 border active:bg-white/[0.03] transition-all",
|
||||
"bg-accent/[0.03] border-accent/20"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="flex items-center gap-0.5 px-1 py-0.5 bg-accent/10 border border-accent/20 text-[8px] font-bold text-accent uppercase shrink-0">
|
||||
<Diamond className="w-2.5 h-2.5" /> Direct
|
||||
</span>
|
||||
)}
|
||||
<span className="text-sm font-bold text-white font-mono truncate">
|
||||
{auction.domain}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-1 text-[10px] font-mono text-white/30">
|
||||
<span className="flex items-center gap-1 text-accent">
|
||||
<ShieldCheck className="w-3 h-3" /> Verified • Instant
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span className="text-white/40">view deal</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right shrink-0">
|
||||
<div className="text-sm font-bold text-accent font-mono">
|
||||
{formatCurrency(auction.current_bid)}
|
||||
</div>
|
||||
<div className="text-[10px] text-accent/60 font-mono">Buy Now</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
) : (
|
||||
<a
|
||||
key={`${auction.domain}-${i}`}
|
||||
href={auction.affiliate_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={clsx(
|
||||
"block p-3 border active:bg-white/[0.03] transition-all",
|
||||
"bg-[#0A0A0A] border-white/[0.08]"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-bold text-white font-mono truncate">
|
||||
{auction.domain}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-1 text-[10px] font-mono text-white/30">
|
||||
{auction.is_pounce ? (
|
||||
<span className="flex items-center gap-1 text-accent">
|
||||
<ShieldCheck className="w-3 h-3" /> Verified • Instant
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<span className="uppercase">{auction.platform}</span>
|
||||
<span>•</span>
|
||||
<span className={getTimeColor(auction.end_time)}>
|
||||
<Clock className="w-3 h-3 inline mr-1" />
|
||||
{calcTimeRemaining(auction.end_time)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
<span className="uppercase">{auction.platform}</span>
|
||||
<span>•</span>
|
||||
<span className={getTimeColor(auction.end_time)}>
|
||||
<Clock className="w-3 h-3 inline mr-1" />
|
||||
{calcTimeRemaining(auction.end_time)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right shrink-0">
|
||||
<div className="text-sm font-bold text-accent font-mono">
|
||||
{formatCurrency(auction.current_bid)}
|
||||
</div>
|
||||
{auction.is_pounce ? (
|
||||
<div className="text-[10px] text-accent/60 font-mono">Buy Now</div>
|
||||
) : auction.num_bids > 0 && (
|
||||
{auction.num_bids > 0 && (
|
||||
<div className="text-[10px] text-white/30 font-mono">
|
||||
{auction.num_bids} bids
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</a>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
@ -617,41 +728,33 @@ export default function AcquirePage() {
|
||||
) : (
|
||||
<div>
|
||||
{filteredAuctions.map((auction, i) => (
|
||||
<a
|
||||
key={`${auction.domain}-${i}`}
|
||||
href={auction.affiliate_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={clsx(
|
||||
"grid grid-cols-[1fr_100px_120px_100px_80px] gap-4 items-center px-6 py-4 border-b transition-all group",
|
||||
auction.is_pounce
|
||||
? "border-accent/20 bg-accent/[0.03] hover:bg-accent/[0.06]"
|
||||
: "border-white/[0.03] hover:bg-white/[0.02]"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{auction.is_pounce && (
|
||||
<div className="flex items-center gap-1 px-1.5 py-0.5 bg-accent/10 border border-accent/20 shrink-0">
|
||||
<Diamond className="w-3 h-3 text-accent" />
|
||||
<span className="text-[8px] font-bold text-accent uppercase">Direct</span>
|
||||
</div>
|
||||
auction.is_pounce ? (
|
||||
<button
|
||||
key={`${auction.domain}-${i}`}
|
||||
type="button"
|
||||
onClick={() => handlePounceDirectClick(auction)}
|
||||
className={clsx(
|
||||
"w-full text-left grid grid-cols-[1fr_100px_120px_100px_80px] gap-4 items-center px-6 py-4 border-b transition-all group",
|
||||
"border-accent/20 bg-accent/[0.03] hover:bg-accent/[0.06]"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-1 px-1.5 py-0.5 bg-accent/10 border border-accent/20 shrink-0">
|
||||
<Diamond className="w-3 h-3 text-accent" />
|
||||
<span className="text-[8px] font-bold text-accent uppercase">Direct</span>
|
||||
</div>
|
||||
<span className="font-mono text-base text-white group-hover:text-accent transition-colors truncate">
|
||||
{auction.domain}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-center text-xs font-mono text-white/40 uppercase">
|
||||
{auction.is_pounce ? (
|
||||
<span className="flex items-center justify-center gap-1 text-accent">
|
||||
<ShieldCheck className="w-3 h-3" /> Verified
|
||||
</span>
|
||||
) : auction.platform}
|
||||
<span className="flex items-center justify-center gap-1 text-accent">
|
||||
<ShieldCheck className="w-3 h-3" /> Verified
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-right font-mono text-base text-accent">
|
||||
{formatCurrency(auction.current_bid)}
|
||||
{auction.is_pounce && (
|
||||
<div className="text-[9px] text-accent/60 font-mono">Buy Now</div>
|
||||
)}
|
||||
<div className="text-[9px] text-accent/60 font-mono">Buy Now</div>
|
||||
</div>
|
||||
<div className={clsx("text-center text-xs font-mono", auction.is_pounce ? "text-accent" : getTimeColor(auction.end_time))}>
|
||||
{auction.is_pounce ? 'Instant' : calcTimeRemaining(auction.end_time)}
|
||||
@ -663,10 +766,43 @@ export default function AcquirePage() {
|
||||
? "border-accent/30 text-accent group-hover:bg-accent group-hover:text-black"
|
||||
: "border-white/10 text-white/30 group-hover:bg-white group-hover:text-black"
|
||||
)}>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
<ArrowUpRight className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</button>
|
||||
) : (
|
||||
<a
|
||||
key={`${auction.domain}-${i}`}
|
||||
href={auction.affiliate_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={clsx(
|
||||
"grid grid-cols-[1fr_100px_120px_100px_80px] gap-4 items-center px-6 py-4 border-b transition-all group",
|
||||
"border-white/[0.03] hover:bg-white/[0.02]"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="font-mono text-base text-white group-hover:text-accent transition-colors truncate">
|
||||
{auction.domain}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-center text-xs font-mono text-white/40 uppercase">{auction.platform}</div>
|
||||
<div className="text-right font-mono text-base text-accent">
|
||||
{formatCurrency(auction.current_bid)}
|
||||
</div>
|
||||
<div className={clsx("text-center text-xs font-mono", getTimeColor(auction.end_time))}>
|
||||
{calcTimeRemaining(auction.end_time)}
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<div className={clsx(
|
||||
"w-8 h-8 border flex items-center justify-center transition-all",
|
||||
"border-white/10 text-white/30 group-hover:bg-white group-hover:text-black"
|
||||
)}>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
import { useEffect, useState, memo } from 'react'
|
||||
import { useParams } from 'next/navigation'
|
||||
import { useStore } from '@/lib/store'
|
||||
import { api } from '@/lib/api'
|
||||
import { Header } from '@/components/Header'
|
||||
import { Footer } from '@/components/Footer'
|
||||
@ -65,6 +66,7 @@ Tooltip.displayName = 'Tooltip'
|
||||
export default function BuyDomainPage() {
|
||||
const params = useParams()
|
||||
const slug = params.slug as string
|
||||
const { isAuthenticated, checkAuth, user, isLoading: authLoading } = useStore()
|
||||
|
||||
const [listing, setListing] = useState<Listing | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
@ -83,9 +85,20 @@ export default function BuyDomainPage() {
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
checkAuth()
|
||||
loadListing()
|
||||
}, [slug])
|
||||
|
||||
// Prefill inquiry identity from authenticated user (no overrides once typed)
|
||||
useEffect(() => {
|
||||
if (!isAuthenticated || !user) return
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
name: prev.name || (user.name || ''),
|
||||
email: prev.email || user.email || '',
|
||||
}))
|
||||
}, [isAuthenticated, user])
|
||||
|
||||
const loadListing = async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
@ -160,7 +173,7 @@ export default function BuyDomainPage() {
|
||||
The domain you are looking for has been sold, removed, or is temporarily unavailable.
|
||||
</p>
|
||||
<Link
|
||||
href="/auctions"
|
||||
href="/buy"
|
||||
className="inline-flex items-center gap-2 px-8 py-4 bg-white text-black font-bold rounded-full hover:bg-zinc-200 transition-all hover:scale-105"
|
||||
>
|
||||
Browse Marketplace
|
||||
@ -331,41 +344,88 @@ export default function BuyDomainPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Always Visible Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4 animate-fade-in">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-bold text-white text-lg">
|
||||
{listing.asking_price ? 'Purchase Inquiry' : 'Contact Seller'}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="w-full bg-zinc-900/50 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 transition-all"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
className="w-full bg-zinc-900/50 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 transition-all"
|
||||
/>
|
||||
{/* Auth Gate: inquiries require login */}
|
||||
{authLoading ? (
|
||||
<div className="flex items-center justify-center py-10">
|
||||
<Loader2 className="w-5 h-5 text-emerald-500 animate-spin" />
|
||||
</div>
|
||||
) : !isAuthenticated ? (
|
||||
<div className="space-y-4 animate-fade-in">
|
||||
<div className="p-4 rounded-xl border border-white/10 bg-zinc-900/30">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-zinc-900 flex items-center justify-center text-zinc-400 border border-white/5 shrink-0">
|
||||
<Lock className="w-5 h-5" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold text-white text-lg">Contact requires login</h3>
|
||||
<p className="text-sm text-zinc-400 mt-1">
|
||||
To protect sellers from spam, inquiries are only available for logged-in accounts.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Link
|
||||
href={`/login?redirect=${encodeURIComponent(`/buy/${slug}`)}`}
|
||||
className="w-full py-3 bg-white text-black font-bold rounded-xl hover:bg-zinc-200 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
Login
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
<Link
|
||||
href={`/register?redirect=${encodeURIComponent(`/buy/${slug}`)}`}
|
||||
className="w-full py-3 bg-zinc-900/50 border border-white/10 text-white font-bold rounded-xl hover:border-emerald-500/40 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
Create Account
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-4 animate-fade-in">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-bold text-white text-lg">
|
||||
{listing.asking_price ? 'Purchase Inquiry' : 'Contact Seller'}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="w-full bg-zinc-900/50 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 transition-all"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
readOnly={isAuthenticated}
|
||||
title={isAuthenticated ? 'Uses your account email' : undefined}
|
||||
className={clsx(
|
||||
"w-full bg-zinc-900/50 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 transition-all",
|
||||
isAuthenticated && "opacity-70 cursor-not-allowed"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
{isAuthenticated && (
|
||||
<p className="text-[10px] text-zinc-600 font-mono">
|
||||
Inquiries are sent from your account email.
|
||||
</p>
|
||||
)}
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Phone (Optional)"
|
||||
value={formData.phone}
|
||||
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
||||
className="w-full bg-zinc-900/50 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 transition-all"
|
||||
type="text"
|
||||
placeholder="Phone (Optional)"
|
||||
value={formData.phone}
|
||||
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
||||
className="w-full bg-zinc-900/50 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 transition-all"
|
||||
/>
|
||||
{listing.allow_offers && (
|
||||
{listing.allow_offers && (
|
||||
<div className="relative">
|
||||
<span className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500">$</span>
|
||||
<input
|
||||
@ -378,28 +438,29 @@ export default function BuyDomainPage() {
|
||||
</div>
|
||||
)}
|
||||
<textarea
|
||||
placeholder="I'm interested in this domain..."
|
||||
rows={3}
|
||||
required
|
||||
value={formData.message}
|
||||
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
||||
className="w-full bg-zinc-900/50 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 transition-all resize-none"
|
||||
placeholder="I'm interested in this domain..."
|
||||
rows={3}
|
||||
required
|
||||
value={formData.message}
|
||||
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
||||
className="w-full bg-zinc-900/50 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 transition-all resize-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
className="w-full py-4 bg-white text-black font-bold text-lg rounded-xl hover:bg-zinc-200 transition-all disabled:opacity-50 flex items-center justify-center gap-2 mt-6 shadow-lg shadow-white/10"
|
||||
>
|
||||
>
|
||||
{submitting ? <Loader2 className="w-5 h-5 animate-spin" /> : <Send className="w-5 h-5" />}
|
||||
{listing.asking_price ? 'Send Purchase Request' : 'Send Offer'}
|
||||
</button>
|
||||
|
||||
<p className="text-center text-xs text-zinc-600 mt-3">
|
||||
Secure escrow transfer available via Escrow.com
|
||||
</p>
|
||||
</form>
|
||||
</button>
|
||||
|
||||
<p className="text-center text-xs text-zinc-600 mt-3">
|
||||
Secure escrow transfer available via Escrow.com
|
||||
</p>
|
||||
</form>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center py-12 animate-fade-in">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user