452 lines
13 KiB
TypeScript
452 lines
13 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import Image from 'next/image'
|
|
import AuthModal from './AuthModal'
|
|
|
|
interface DropData {
|
|
id: number
|
|
item: string
|
|
size: number
|
|
fill: number
|
|
unit: string
|
|
ppu: number
|
|
image_url: string | null
|
|
created_at: string
|
|
start_time: string | null
|
|
is_upcoming?: boolean
|
|
}
|
|
|
|
interface User {
|
|
id: number
|
|
username: string
|
|
email: string
|
|
}
|
|
|
|
export default function Drop() {
|
|
const [drop, setDrop] = useState<DropData | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [selectedSize, setSelectedSize] = useState(50)
|
|
const [showConfirmModal, setShowConfirmModal] = useState(false)
|
|
const [showAuthModal, setShowAuthModal] = useState(false)
|
|
const [processing, setProcessing] = useState(false)
|
|
const [user, setUser] = useState<User | null>(null)
|
|
const [checkingAuth, setCheckingAuth] = useState(true)
|
|
|
|
useEffect(() => {
|
|
fetchActiveDrop()
|
|
checkAuth()
|
|
}, [])
|
|
|
|
const checkAuth = async () => {
|
|
try {
|
|
const response = await fetch('/api/auth/session', {
|
|
credentials: 'include',
|
|
})
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
setUser(data.user)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error checking auth:', error)
|
|
} finally {
|
|
setCheckingAuth(false)
|
|
}
|
|
}
|
|
|
|
const fetchActiveDrop = async () => {
|
|
try {
|
|
const response = await fetch('/api/drops/active')
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
setDrop(data)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching active drop:', error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const getProgressPercentage = (fill: number, size: number) => {
|
|
return Math.min((fill / size) * 100, 100)
|
|
}
|
|
|
|
const formatSize = (size: number, unit: string) => {
|
|
if (unit === 'g' && size >= 1000) {
|
|
return `${(size / 1000).toFixed(1)}kg`
|
|
}
|
|
return `${size}${unit}`
|
|
}
|
|
|
|
const getAvailableSizes = () => {
|
|
if (!drop) return []
|
|
const sizes = [50, 100, 250] // Always in grams
|
|
|
|
// Calculate remaining inventory in grams
|
|
let remainingInGrams = 0
|
|
if (drop.unit === 'kg') {
|
|
remainingInGrams = (drop.size - drop.fill) * 1000
|
|
} else {
|
|
// For 'g' or any other unit, assume same unit
|
|
remainingInGrams = drop.size - drop.fill
|
|
}
|
|
|
|
// Only show sizes that don't exceed remaining inventory
|
|
return sizes.filter((size) => size <= remainingInGrams)
|
|
}
|
|
|
|
const handleJoinDrop = () => {
|
|
// Check if user is logged in
|
|
if (!user) {
|
|
setShowAuthModal(true)
|
|
return
|
|
}
|
|
setShowConfirmModal(true)
|
|
}
|
|
|
|
const handleLogin = (loggedInUser: User) => {
|
|
setUser(loggedInUser)
|
|
setShowAuthModal(false)
|
|
// After login, show the confirmation modal
|
|
setShowConfirmModal(true)
|
|
}
|
|
|
|
const handleConfirmPurchase = async () => {
|
|
if (!drop) return
|
|
|
|
setProcessing(true)
|
|
try {
|
|
// Create NOWPayments invoice and sale record
|
|
const response = await fetch('/api/payments/create-invoice', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
credentials: 'include', // Important for cookies
|
|
body: JSON.stringify({
|
|
drop_id: drop.id,
|
|
size: selectedSize, // Size in grams
|
|
}),
|
|
})
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json()
|
|
if (response.status === 401) {
|
|
// User not authenticated - show login modal
|
|
setShowConfirmModal(false)
|
|
setShowAuthModal(true)
|
|
setProcessing(false)
|
|
return
|
|
}
|
|
alert(`Error: ${error.error || 'Failed to create payment invoice'}`)
|
|
setProcessing(false)
|
|
return
|
|
}
|
|
|
|
const data = await response.json()
|
|
|
|
// Close modal
|
|
setShowConfirmModal(false)
|
|
|
|
// Redirect to NOWPayments invoice
|
|
if (data.invoice_url) {
|
|
window.location.href = data.invoice_url
|
|
} else {
|
|
alert('Payment invoice created but no redirect URL received')
|
|
await fetchActiveDrop()
|
|
}
|
|
} catch (error) {
|
|
console.error('Error creating payment invoice:', error)
|
|
alert('Failed to create payment invoice. Please try again.')
|
|
setProcessing(false)
|
|
}
|
|
}
|
|
|
|
const handleCancelPurchase = () => {
|
|
setShowConfirmModal(false)
|
|
}
|
|
|
|
const calculatePrice = () => {
|
|
if (!drop) return 0
|
|
// ppu is stored as integer where 1000 = $1.00, so divide by 1000 to get actual price
|
|
const pricePerUnit = drop.ppu / 1000
|
|
if (drop.unit === 'kg') {
|
|
return (selectedSize / 1000) * pricePerUnit
|
|
}
|
|
return selectedSize * pricePerUnit
|
|
}
|
|
|
|
const getTimeUntilStart = () => {
|
|
if (!drop || !drop.is_upcoming || !drop.start_time) return null
|
|
|
|
const startTime = new Date(drop.start_time)
|
|
const now = new Date()
|
|
const diffMs = startTime.getTime() - now.getTime()
|
|
|
|
if (diffMs <= 0) return null
|
|
|
|
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
|
|
const diffHours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
|
|
const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60))
|
|
|
|
if (diffDays > 0) {
|
|
return `${diffDays} day${diffDays > 1 ? 's' : ''}${diffHours > 0 ? ` ${diffHours} hour${diffHours > 1 ? 's' : ''}` : ''}`
|
|
} else if (diffHours > 0) {
|
|
return `${diffHours} hour${diffHours > 1 ? 's' : ''}${diffMinutes > 0 ? ` ${diffMinutes} minute${diffMinutes > 1 ? 's' : ''}` : ''}`
|
|
} else {
|
|
return `${diffMinutes} minute${diffMinutes > 1 ? 's' : ''}`
|
|
}
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="drop">
|
|
<div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '40px' }}>
|
|
<p style={{ color: 'var(--muted)' }}>Loading...</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!drop) {
|
|
return (
|
|
<div className="drop">
|
|
<div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '60px' }}>
|
|
<h2 style={{ marginBottom: '16px' }}>Drop Sold Out</h2>
|
|
<p style={{ color: 'var(--muted)', marginBottom: '20px' }}>
|
|
The current collective drop has been fully reserved.
|
|
</p>
|
|
<p style={{ color: 'var(--muted)' }}>
|
|
Next collective drop coming soon.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const progressPercentage = getProgressPercentage(drop.fill, drop.size)
|
|
const availableSizes = getAvailableSizes()
|
|
const timeUntilStart = getTimeUntilStart()
|
|
const isUpcoming = drop.is_upcoming && timeUntilStart
|
|
|
|
// Calculate remaining in the drop's unit
|
|
const remaining = drop.size - drop.fill
|
|
const hasRemaining = remaining > 0
|
|
|
|
return (
|
|
<div className="drop">
|
|
{drop.image_url ? (
|
|
<Image
|
|
src={drop.image_url}
|
|
alt={drop.item}
|
|
width={420}
|
|
height={420}
|
|
style={{ width: '100%', height: 'auto', borderRadius: '16px', objectFit: 'cover' }}
|
|
/>
|
|
) : (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
aspectRatio: '1 / 1',
|
|
background: 'var(--bg-soft)',
|
|
borderRadius: '16px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: 'var(--muted)',
|
|
}}
|
|
>
|
|
No Image
|
|
</div>
|
|
)}
|
|
<div>
|
|
<h2>{drop.item}</h2>
|
|
<div className="meta">
|
|
{formatSize(drop.size, drop.unit)} Batch
|
|
</div>
|
|
<div className="price">
|
|
{(drop.ppu / 1000).toFixed(2)} CHF / {drop.unit} · incl. 2.5% VAT
|
|
</div>
|
|
|
|
{isUpcoming ? (
|
|
<div style={{ marginTop: '30px', padding: '20px', background: 'var(--bg-soft)', borderRadius: '12px', textAlign: 'center' }}>
|
|
<p style={{ margin: 0, color: 'var(--muted)', fontSize: '16px' }}>
|
|
Drop starts in <strong>{timeUntilStart}</strong>
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="progress">
|
|
<span style={{ width: `${progressPercentage}%` }}></span>
|
|
</div>
|
|
<div className="meta">
|
|
{drop.unit === 'kg' ? drop.fill.toFixed(2) : Math.round(drop.fill)}
|
|
{drop.unit} of {drop.size}
|
|
{drop.unit} reserved
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{!isUpcoming && hasRemaining && availableSizes.length > 0 && (
|
|
<>
|
|
<div className="options">
|
|
{availableSizes.map((size) => (
|
|
<button
|
|
key={size}
|
|
className={selectedSize === size ? 'active' : ''}
|
|
onClick={() => setSelectedSize(size)}
|
|
>
|
|
{size}g
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<button className="cta" onClick={handleJoinDrop}>
|
|
Join Drop
|
|
</button>
|
|
</>
|
|
)}
|
|
|
|
{hasRemaining && availableSizes.length === 0 && (
|
|
<div style={{ marginTop: '30px', padding: '20px', background: 'var(--bg-soft)', borderRadius: '12px', textAlign: 'center' }}>
|
|
<p style={{ margin: 0, color: 'var(--muted)' }}>
|
|
Less than 50{drop.unit} remaining. This drop is almost fully reserved.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{!hasRemaining && (
|
|
<div style={{ marginTop: '30px', padding: '20px', background: 'var(--bg-soft)', borderRadius: '12px', textAlign: 'center' }}>
|
|
<p style={{ margin: 0, color: 'var(--muted)' }}>This drop is fully reserved</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Confirmation Modal */}
|
|
{showConfirmModal && drop && (
|
|
<div
|
|
style={{
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
background: 'rgba(0, 0, 0, 0.7)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
zIndex: 1000,
|
|
padding: '20px',
|
|
}}
|
|
onClick={handleCancelPurchase}
|
|
>
|
|
<div
|
|
style={{
|
|
background: 'var(--card)',
|
|
borderRadius: '16px',
|
|
padding: '32px',
|
|
maxWidth: '500px',
|
|
width: '100%',
|
|
boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
|
|
}}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<h2 style={{ marginTop: 0, marginBottom: '20px' }}>
|
|
Confirm Purchase
|
|
</h2>
|
|
<div style={{ marginBottom: '24px' }}>
|
|
<p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
|
|
<strong>Item:</strong> {drop.item}
|
|
</p>
|
|
<p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
|
|
<strong>Quantity:</strong> {selectedSize}g
|
|
</p>
|
|
<p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
|
|
<strong>Price per {drop.unit}:</strong> {(drop.ppu / 1000).toFixed(2)} CHF
|
|
</p>
|
|
<div
|
|
style={{
|
|
padding: '16px',
|
|
background: 'var(--bg-soft)',
|
|
borderRadius: '8px',
|
|
marginTop: '16px',
|
|
}}
|
|
>
|
|
<p style={{ margin: 0, fontSize: '18px', fontWeight: 'bold' }}>
|
|
Total: {calculatePrice().toFixed(2)} CHF
|
|
</p>
|
|
<p
|
|
style={{
|
|
margin: '4px 0 0 0',
|
|
fontSize: '14px',
|
|
color: 'var(--muted)',
|
|
}}
|
|
>
|
|
incl. 2.5% VAT
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
gap: '12px',
|
|
justifyContent: 'flex-end',
|
|
}}
|
|
>
|
|
<button
|
|
onClick={handleCancelPurchase}
|
|
disabled={processing}
|
|
style={{
|
|
padding: '12px 24px',
|
|
background: '#dc2626',
|
|
border: 'none',
|
|
borderRadius: '14px',
|
|
cursor: processing ? 'not-allowed' : 'pointer',
|
|
color: '#fff',
|
|
fontSize: '15px',
|
|
fontWeight: 500,
|
|
opacity: processing ? 0.6 : 1,
|
|
lineHeight: '1.5',
|
|
boxSizing: 'border-box',
|
|
display: 'inline-block',
|
|
}}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleConfirmPurchase}
|
|
disabled={processing}
|
|
style={{
|
|
padding: '12px 24px',
|
|
background: '#0a7931',
|
|
color: '#fff',
|
|
border: 'none',
|
|
borderRadius: '14px',
|
|
cursor: processing ? 'not-allowed' : 'pointer',
|
|
fontSize: '15px',
|
|
fontWeight: 500,
|
|
opacity: processing ? 0.6 : 1,
|
|
lineHeight: '1.5',
|
|
boxSizing: 'border-box',
|
|
display: 'inline-block',
|
|
}}
|
|
>
|
|
{processing ? 'Processing...' : 'Confirm Purchase'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Auth Modal */}
|
|
<AuthModal
|
|
isOpen={showAuthModal}
|
|
onClose={() => setShowAuthModal(false)}
|
|
onLogin={handleLogin}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|