sync
This commit is contained in:
root
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import Image from 'next/image'
|
||||
import AuthModal from './AuthModal'
|
||||
|
||||
interface DropData {
|
||||
id: number
|
||||
@@ -14,15 +15,43 @@ interface DropData {
|
||||
created_at: string
|
||||
}
|
||||
|
||||
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')
|
||||
@@ -65,6 +94,85 @@ export default function Drop() {
|
||||
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
|
||||
if (drop.unit === 'kg') {
|
||||
return (selectedSize / 1000) * drop.ppu
|
||||
}
|
||||
return selectedSize * drop.ppu
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="drop">
|
||||
@@ -137,7 +245,7 @@ export default function Drop() {
|
||||
<span style={{ width: `${progressPercentage}%` }}></span>
|
||||
</div>
|
||||
<div className="meta">
|
||||
{drop.fill}
|
||||
{drop.unit === 'kg' ? drop.fill.toFixed(2) : Math.round(drop.fill)}
|
||||
{drop.unit} of {drop.size}
|
||||
{drop.unit} reserved
|
||||
</div>
|
||||
@@ -156,7 +264,9 @@ export default function Drop() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button className="cta">Join Drop</button>
|
||||
<button className="cta" onClick={handleJoinDrop}>
|
||||
Join Drop
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -174,6 +284,129 @@ export default function Drop() {
|
||||
</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.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: 'var(--accent)',
|
||||
color: '#000',
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user