race condition fixed, payment inside
This commit is contained in:
root
@@ -29,8 +29,16 @@ export default function Drop() {
|
||||
const [drop, setDrop] = useState<DropData | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [selectedSize, setSelectedSize] = useState(50)
|
||||
const [selectedCurrency, setSelectedCurrency] = useState<string>('btc')
|
||||
const [availableCurrencies, setAvailableCurrencies] = useState<string[]>([])
|
||||
const [loadingCurrencies, setLoadingCurrencies] = useState(false)
|
||||
const [showConfirmModal, setShowConfirmModal] = useState(false)
|
||||
const [showAuthModal, setShowAuthModal] = useState(false)
|
||||
const [showPaymentModal, setShowPaymentModal] = useState(false)
|
||||
const [showSuccessModal, setShowSuccessModal] = useState(false)
|
||||
const [showErrorModal, setShowErrorModal] = useState(false)
|
||||
const [errorMessage, setErrorMessage] = useState<string>('')
|
||||
const [paymentData, setPaymentData] = useState<any>(null)
|
||||
const [processing, setProcessing] = useState(false)
|
||||
const [user, setUser] = useState<User | null>(null)
|
||||
const [checkingAuth, setCheckingAuth] = useState(true)
|
||||
@@ -40,6 +48,41 @@ export default function Drop() {
|
||||
checkAuth()
|
||||
}, [])
|
||||
|
||||
// Poll payment status when payment modal is open
|
||||
useEffect(() => {
|
||||
if (!showPaymentModal || !paymentData?.payment_id) return
|
||||
|
||||
const checkPaymentStatus = async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/payments/check-status?payment_id=${paymentData.payment_id}`, {
|
||||
credentials: 'include',
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
const status = await response.json()
|
||||
|
||||
// If pending order is gone and sale exists, payment was processed
|
||||
if (!status.has_pending_order && status.has_sale) {
|
||||
// Close payment modal
|
||||
setShowPaymentModal(false)
|
||||
// Show success modal
|
||||
setShowSuccessModal(true)
|
||||
// Refresh drop data
|
||||
await fetchActiveDrop()
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error checking payment status:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// Check immediately, then poll every 3 seconds
|
||||
checkPaymentStatus()
|
||||
const interval = setInterval(checkPaymentStatus, 3000)
|
||||
|
||||
return () => clearInterval(interval)
|
||||
}, [showPaymentModal, paymentData?.payment_id])
|
||||
|
||||
const checkAuth = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/auth/session', {
|
||||
@@ -105,12 +148,58 @@ export default function Drop() {
|
||||
return sizes.filter((size) => size <= remainingInGrams)
|
||||
}
|
||||
|
||||
const fetchAvailableCurrencies = async () => {
|
||||
setLoadingCurrencies(true)
|
||||
try {
|
||||
const response = await fetch('/api/payments/currencies')
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
|
||||
// When fixed_rate=true, API returns objects with { currency, min_amount, max_amount }
|
||||
// When fixed_rate=false, API returns array of strings
|
||||
const currencies: string[] = []
|
||||
if (Array.isArray(data.currencies)) {
|
||||
data.currencies.forEach((c: any) => {
|
||||
let currencyCode: string | null = null
|
||||
|
||||
// Handle object format (when fixed_rate=true)
|
||||
if (typeof c === 'object' && c !== null && c.currency) {
|
||||
currencyCode = String(c.currency).trim().toLowerCase()
|
||||
}
|
||||
// Handle string format (when fixed_rate=false)
|
||||
else if (typeof c === 'string') {
|
||||
currencyCode = c.trim().toLowerCase()
|
||||
}
|
||||
|
||||
// Add to array if valid
|
||||
if (currencyCode && currencyCode.length > 0) {
|
||||
currencies.push(currencyCode)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
setAvailableCurrencies(currencies)
|
||||
// Set default to BTC if available, otherwise first currency
|
||||
if (currencies.length > 0) {
|
||||
const defaultCurrency = currencies.includes('btc') ? 'btc' : currencies[0]
|
||||
setSelectedCurrency(defaultCurrency)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching currencies:', error)
|
||||
} finally {
|
||||
setLoadingCurrencies(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleJoinDrop = () => {
|
||||
// Check if user is logged in
|
||||
if (!user) {
|
||||
setShowAuthModal(true)
|
||||
return
|
||||
}
|
||||
// Fetch available currencies when opening confirm modal
|
||||
fetchAvailableCurrencies()
|
||||
setShowConfirmModal(true)
|
||||
}
|
||||
|
||||
@@ -126,7 +215,7 @@ export default function Drop() {
|
||||
|
||||
setProcessing(true)
|
||||
try {
|
||||
// Create NOWPayments invoice and sale record
|
||||
// Create NOWPayments payment
|
||||
const response = await fetch('/api/payments/create-invoice', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -136,6 +225,7 @@ export default function Drop() {
|
||||
body: JSON.stringify({
|
||||
drop_id: drop.id,
|
||||
size: selectedSize, // Size in grams
|
||||
pay_currency: selectedCurrency, // Selected payment currency
|
||||
}),
|
||||
})
|
||||
|
||||
@@ -148,26 +238,33 @@ export default function Drop() {
|
||||
setProcessing(false)
|
||||
return
|
||||
}
|
||||
alert(`Error: ${error.error || 'Failed to create payment invoice'}`)
|
||||
// Show error modal instead of alert
|
||||
setErrorMessage(error.error || 'Failed to create payment')
|
||||
setShowErrorModal(true)
|
||||
setShowConfirmModal(false)
|
||||
setProcessing(false)
|
||||
return
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
// Close modal
|
||||
// Close confirmation modal
|
||||
setShowConfirmModal(false)
|
||||
setProcessing(false)
|
||||
|
||||
// Redirect to NOWPayments invoice
|
||||
if (data.invoice_url) {
|
||||
window.location.href = data.invoice_url
|
||||
// Show payment modal with payment details
|
||||
if (data.pay_address) {
|
||||
setPaymentData(data)
|
||||
setShowPaymentModal(true)
|
||||
} else {
|
||||
alert('Payment invoice created but no redirect URL received')
|
||||
setErrorMessage('Payment created but no payment address received')
|
||||
setShowErrorModal(true)
|
||||
await fetchActiveDrop()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating payment invoice:', error)
|
||||
alert('Failed to create payment invoice. Please try again.')
|
||||
setErrorMessage('Failed to create payment invoice. Please try again.')
|
||||
setShowErrorModal(true)
|
||||
setProcessing(false)
|
||||
}
|
||||
}
|
||||
@@ -384,6 +481,57 @@ export default function Drop() {
|
||||
<p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
|
||||
<strong>Price per {drop.unit}:</strong> {(drop.ppu / 1000).toFixed(2)} CHF
|
||||
</p>
|
||||
|
||||
{/* Currency Selection */}
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', color: 'var(--muted)' }}>
|
||||
<strong>Payment Currency:</strong>
|
||||
</label>
|
||||
{loadingCurrencies ? (
|
||||
<p style={{ color: 'var(--muted)', fontSize: '14px' }}>Loading currencies...</p>
|
||||
) : (
|
||||
<select
|
||||
value={selectedCurrency}
|
||||
onChange={(e) => setSelectedCurrency(e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px',
|
||||
background: 'var(--bg-soft)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '8px',
|
||||
fontSize: '14px',
|
||||
color: 'var(--text)',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{availableCurrencies.map((currency, index) => {
|
||||
// Ensure currency is a string - handle both string and object cases
|
||||
let currencyStr: string
|
||||
if (typeof currency === 'string') {
|
||||
currencyStr = currency.trim().toLowerCase()
|
||||
} else if (currency && typeof currency === 'object') {
|
||||
// If it's an object, try to extract a string value
|
||||
currencyStr = (currency as any).value || (currency as any).code || String(currency).trim().toLowerCase()
|
||||
} else {
|
||||
currencyStr = String(currency || '').trim().toLowerCase()
|
||||
}
|
||||
|
||||
// Fallback if we still don't have a valid string
|
||||
if (!currencyStr || currencyStr === '[object object]' || currencyStr === 'null' || currencyStr === 'undefined') {
|
||||
console.warn('Invalid currency value:', currency, 'at index', index)
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<option key={`${currencyStr}-${index}`} value={currencyStr}>
|
||||
{currencyStr.toUpperCase()}
|
||||
</option>
|
||||
)
|
||||
}).filter(Boolean)}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
padding: '16px',
|
||||
@@ -404,6 +552,15 @@ export default function Drop() {
|
||||
>
|
||||
incl. 2.5% VAT
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
margin: '8px 0 0 0',
|
||||
fontSize: '12px',
|
||||
color: 'var(--muted)',
|
||||
}}
|
||||
>
|
||||
Pay with: {String(selectedCurrency || '').toUpperCase()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -464,6 +621,362 @@ export default function Drop() {
|
||||
onClose={() => setShowAuthModal(false)}
|
||||
onLogin={handleLogin}
|
||||
/>
|
||||
|
||||
{/* Success Modal */}
|
||||
{showSuccessModal && (
|
||||
<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: 1001,
|
||||
padding: '20px',
|
||||
}}
|
||||
onClick={() => setShowSuccessModal(false)}
|
||||
>
|
||||
<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', color: '#0a7931' }}>
|
||||
✓ Payment Confirmed!
|
||||
</h2>
|
||||
<p style={{ marginBottom: '24px', color: 'var(--muted)' }}>
|
||||
Your payment has been successfully processed. Your order is confirmed and will be included in the drop.
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowSuccessModal(false)
|
||||
setPaymentData(null)
|
||||
}}
|
||||
style={{
|
||||
padding: '12px 24px',
|
||||
background: '#0a7931',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '14px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '15px',
|
||||
fontWeight: 500,
|
||||
lineHeight: '1.5',
|
||||
boxSizing: 'border-box',
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error Modal */}
|
||||
{showErrorModal && (
|
||||
<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: 1001,
|
||||
padding: '20px',
|
||||
}}
|
||||
onClick={() => {
|
||||
setShowErrorModal(false)
|
||||
setErrorMessage('')
|
||||
// Don't refresh - just return to drop view as is
|
||||
}}
|
||||
>
|
||||
<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', color: '#dc2626' }}>
|
||||
⚠️ Error
|
||||
</h2>
|
||||
<p style={{ marginBottom: '24px', color: 'var(--muted)' }}>
|
||||
{errorMessage}
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowErrorModal(false)
|
||||
setErrorMessage('')
|
||||
// Don't refresh - just return to drop view as is
|
||||
// The drop should still be visible with current inventory state
|
||||
}}
|
||||
style={{
|
||||
padding: '12px 24px',
|
||||
background: '#dc2626',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '14px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '15px',
|
||||
fontWeight: 500,
|
||||
lineHeight: '1.5',
|
||||
boxSizing: 'border-box',
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Payment Modal */}
|
||||
{showPaymentModal && paymentData && (
|
||||
<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={async () => {
|
||||
// Check if payment was already processed before cancelling
|
||||
if (paymentData?.payment_id) {
|
||||
try {
|
||||
const statusResponse = await fetch(`/api/payments/check-status?payment_id=${paymentData.payment_id}`, {
|
||||
credentials: 'include',
|
||||
})
|
||||
|
||||
if (statusResponse.ok) {
|
||||
const status = await statusResponse.json()
|
||||
// Only cancel if payment hasn't been processed yet
|
||||
if (status.has_pending_order && !status.has_sale) {
|
||||
await fetch('/api/payments/cancel-pending', {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({
|
||||
payment_id: paymentData.payment_id,
|
||||
}),
|
||||
})
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error checking/cancelling pending order:', error)
|
||||
}
|
||||
}
|
||||
setShowPaymentModal(false)
|
||||
// Refresh drop data to show updated inventory
|
||||
await fetchActiveDrop()
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--card)',
|
||||
borderRadius: '16px',
|
||||
padding: '32px',
|
||||
maxWidth: '600px',
|
||||
width: '100%',
|
||||
boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h2 style={{ marginTop: 0, marginBottom: '20px' }}>
|
||||
Complete Payment
|
||||
</h2>
|
||||
|
||||
<div style={{ marginBottom: '24px' }}>
|
||||
<p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
|
||||
<strong>Amount to Pay:</strong> {paymentData.pay_amount} {paymentData.pay_currency.toUpperCase()}
|
||||
</p>
|
||||
<p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
|
||||
<strong>Price:</strong> {paymentData.price_amount} {paymentData.price_currency.toUpperCase()}
|
||||
</p>
|
||||
|
||||
<div style={{ marginTop: '20px', marginBottom: '20px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', color: 'var(--muted)' }}>
|
||||
Send payment to this address:
|
||||
</label>
|
||||
<div
|
||||
style={{
|
||||
padding: '12px',
|
||||
background: 'var(--bg-soft)',
|
||||
borderRadius: '8px',
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '14px',
|
||||
wordBreak: 'break-all',
|
||||
marginBottom: '12px',
|
||||
}}
|
||||
>
|
||||
{paymentData.pay_address}
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
navigator.clipboard.writeText(paymentData.pay_address)
|
||||
// Show brief success feedback
|
||||
const button = e.currentTarget as HTMLButtonElement
|
||||
const originalText = button.textContent
|
||||
button.textContent = 'Copied!'
|
||||
setTimeout(() => {
|
||||
if (button) button.textContent = originalText
|
||||
}, 2000)
|
||||
}}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
background: 'var(--bg-soft)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
}}
|
||||
>
|
||||
Copy Address
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{paymentData.payin_extra_id && (
|
||||
<div style={{ marginTop: '20px', marginBottom: '20px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', color: 'var(--muted)' }}>
|
||||
Memo / Destination Tag (Required):
|
||||
</label>
|
||||
<div
|
||||
style={{
|
||||
padding: '12px',
|
||||
background: 'var(--bg-soft)',
|
||||
borderRadius: '8px',
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '14px',
|
||||
marginBottom: '12px',
|
||||
}}
|
||||
>
|
||||
{paymentData.payin_extra_id}
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
navigator.clipboard.writeText(paymentData.payin_extra_id)
|
||||
// Show brief success feedback
|
||||
const button = e.currentTarget as HTMLButtonElement
|
||||
const originalText = button.textContent
|
||||
button.textContent = 'Copied!'
|
||||
setTimeout(() => {
|
||||
if (button) button.textContent = originalText
|
||||
}, 2000)
|
||||
}}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
background: 'var(--bg-soft)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
}}
|
||||
>
|
||||
Copy Memo
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{paymentData.expiration_estimate_date && (
|
||||
<p style={{ marginTop: '16px', fontSize: '12px', color: 'var(--muted)' }}>
|
||||
Payment expires: {new Date(paymentData.expiration_estimate_date).toLocaleString()}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div style={{ marginTop: '24px', padding: '16px', background: 'var(--bg-soft)', borderRadius: '8px' }}>
|
||||
<p style={{ margin: 0, fontSize: '14px', color: 'var(--muted)' }}>
|
||||
<strong>Status:</strong> {paymentData.payment_status}
|
||||
</p>
|
||||
<p style={{ margin: '12px 0 0 0', fontSize: '12px', color: '#dc2626', fontWeight: 500 }}>
|
||||
⚠️ Closing this window will cancel your reservation and free up the inventory.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
|
||||
<button
|
||||
onClick={async () => {
|
||||
// Check if payment was already processed before cancelling
|
||||
if (paymentData?.payment_id) {
|
||||
try {
|
||||
const statusResponse = await fetch(`/api/payments/check-status?payment_id=${paymentData.payment_id}`, {
|
||||
credentials: 'include',
|
||||
})
|
||||
|
||||
if (statusResponse.ok) {
|
||||
const status = await statusResponse.json()
|
||||
// Only cancel if payment hasn't been processed yet
|
||||
if (status.has_pending_order && !status.has_sale) {
|
||||
await fetch('/api/payments/cancel-pending', {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({
|
||||
payment_id: paymentData.payment_id,
|
||||
}),
|
||||
})
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error checking/cancelling pending order:', error)
|
||||
}
|
||||
}
|
||||
setShowPaymentModal(false)
|
||||
// Refresh drop data to show updated inventory
|
||||
await fetchActiveDrop()
|
||||
}}
|
||||
style={{
|
||||
padding: '12px 24px',
|
||||
background: '#dc2626',
|
||||
border: 'none',
|
||||
borderRadius: '14px',
|
||||
cursor: 'pointer',
|
||||
color: '#fff',
|
||||
fontSize: '15px',
|
||||
fontWeight: 500,
|
||||
lineHeight: '1.5',
|
||||
boxSizing: 'border-box',
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user