1542 lines
55 KiB
TypeScript
1542 lines
55 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, Suspense } from 'react'
|
|
import Image from 'next/image'
|
|
import AuthModal from './AuthModal'
|
|
import UnlockModal from './UnlockModal'
|
|
import { useI18n } from '@/lib/i18n'
|
|
|
|
interface DropData {
|
|
id: number
|
|
item: string
|
|
size: number
|
|
fill: number
|
|
unit: string
|
|
ppu: number
|
|
image_url: string | null
|
|
images?: string[] // Array of image URLs (up to 4)
|
|
created_at: string
|
|
start_time: string | null
|
|
is_upcoming?: boolean
|
|
sales_fill?: number // Only confirmed sales
|
|
pending_fill?: number // Items on hold (pending orders)
|
|
}
|
|
|
|
interface User {
|
|
id: number
|
|
username: string
|
|
email: string
|
|
}
|
|
|
|
export default function Drop() {
|
|
const { t } = useI18n()
|
|
const [drop, setDrop] = useState<DropData | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [selectedSize, setSelectedSize] = useState(50)
|
|
const [customQuantity, setCustomQuantity] = useState<string>('')
|
|
const [quantityError, setQuantityError] = useState<string>('')
|
|
const [selectedCurrency, setSelectedCurrency] = useState<string>('btc')
|
|
const [availableCurrencies, setAvailableCurrencies] = useState<string[]>([])
|
|
const [loadingCurrencies, setLoadingCurrencies] = useState(false)
|
|
const [buyerFullname, setBuyerFullname] = useState<string>('')
|
|
const [buyerAddress, setBuyerAddress] = useState<string>('')
|
|
const [buyerPhone, setBuyerPhone] = useState<string>('')
|
|
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)
|
|
const [isWholesaleUnlocked, setIsWholesaleUnlocked] = useState(false)
|
|
const [showUnlockModal, setShowUnlockModal] = useState(false)
|
|
const [selectedImageIndex, setSelectedImageIndex] = useState(0)
|
|
const [shippingFee, setShippingFee] = useState<number | null>(null)
|
|
const [loadingShippingFee, setLoadingShippingFee] = useState(false)
|
|
const [currency, setCurrency] = useState<'CHF' | 'EUR'>('EUR') // Default to EUR
|
|
|
|
useEffect(() => {
|
|
fetchActiveDrop()
|
|
checkAuth()
|
|
checkWholesaleStatus()
|
|
fetchShippingFee() // Fetch currency info on mount
|
|
|
|
// Poll active drop every 30 seconds
|
|
const interval = setInterval(() => {
|
|
fetchActiveDrop()
|
|
}, 30000) // 30 seconds
|
|
|
|
return () => clearInterval(interval)
|
|
}, [])
|
|
|
|
const checkWholesaleStatus = async () => {
|
|
try {
|
|
const response = await fetch('/api/referrals/status', {
|
|
credentials: 'include',
|
|
})
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
setIsWholesaleUnlocked(data.isUnlocked || false)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error checking wholesale status:', error)
|
|
}
|
|
}
|
|
|
|
// 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', {
|
|
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', {
|
|
// Add cache control to prevent stale data
|
|
cache: 'no-store',
|
|
})
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
// Handle both null response and actual drop data
|
|
setDrop(data) // data can be null if no active drop
|
|
} else {
|
|
// If response is not ok, log the error
|
|
const errorData = await response.json().catch(() => ({ error: 'Unknown error' }))
|
|
console.error('Error fetching active drop:', errorData)
|
|
setDrop(null)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching active drop:', error)
|
|
setDrop(null)
|
|
} 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 getRemainingInGrams = () => {
|
|
if (!drop) return 0
|
|
if (drop.unit === 'kg') {
|
|
return (drop.size - drop.fill) * 1000
|
|
}
|
|
return drop.size - drop.fill
|
|
}
|
|
|
|
const getMinimumGrams = () => {
|
|
if (!drop) return 0
|
|
// Minimum price is 5 in user's currency
|
|
// Calculate minimum grams needed for 5 (EUR or CHF)
|
|
const pricePerGramEur = drop.ppu / 1000
|
|
const minPriceEur = currency === 'CHF' ? 5 / 0.97 : 5 // Convert min CHF to EUR equivalent
|
|
// Use the higher price (standard) to ensure minimum is met
|
|
return Math.ceil(minPriceEur / pricePerGramEur)
|
|
}
|
|
|
|
const handleCustomQuantityChange = (value: string) => {
|
|
setCustomQuantity(value)
|
|
setQuantityError('')
|
|
|
|
// Clear selected preset size when custom input is used
|
|
if (value.trim() !== '') {
|
|
const numValue = parseInt(value, 10)
|
|
if (!isNaN(numValue) && numValue > 0) {
|
|
setSelectedSize(numValue)
|
|
}
|
|
}
|
|
}
|
|
|
|
const validateCustomQuantity = () => {
|
|
if (!drop || !customQuantity.trim()) {
|
|
setQuantityError('')
|
|
return true
|
|
}
|
|
|
|
const numValue = parseInt(customQuantity, 10)
|
|
const remaining = getRemainingInGrams()
|
|
const minimum = getMinimumGrams()
|
|
|
|
if (isNaN(numValue) || numValue <= 0) {
|
|
setQuantityError(t('drop.enterValidNumber'))
|
|
return false
|
|
}
|
|
|
|
if (numValue < minimum) {
|
|
setQuantityError(t('drop.minimumRequired', { minimum }))
|
|
return false
|
|
}
|
|
|
|
if (numValue > remaining) {
|
|
setQuantityError(t('drop.maximumAvailable', { maximum: remaining }))
|
|
return false
|
|
}
|
|
|
|
setQuantityError('')
|
|
return true
|
|
}
|
|
|
|
const handleQuantityButtonClick = (size: number) => {
|
|
setSelectedSize(size)
|
|
setCustomQuantity('')
|
|
setQuantityError('')
|
|
}
|
|
|
|
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 fetchBuyerData = async () => {
|
|
try {
|
|
const response = await fetch('/api/buyer-data', {
|
|
credentials: 'include',
|
|
})
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
if (data.buyer_data) {
|
|
// Autofill form fields with existing buyer data
|
|
setBuyerFullname(data.buyer_data.fullname || '')
|
|
setBuyerAddress(data.buyer_data.address || '')
|
|
setBuyerPhone(data.buyer_data.phone || '')
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching buyer data:', error)
|
|
}
|
|
}
|
|
|
|
const fetchShippingFee = async () => {
|
|
setLoadingShippingFee(true)
|
|
try {
|
|
const response = await fetch('/api/shipping-fee', {
|
|
credentials: 'include',
|
|
})
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
setShippingFee(data.shipping_fee || 40)
|
|
setCurrency(data.currency || 'EUR')
|
|
} else {
|
|
// Default to 40 EUR if fetch fails
|
|
setShippingFee(40)
|
|
setCurrency('EUR')
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching shipping fee:', error)
|
|
// Default to 40 EUR on error
|
|
setShippingFee(40)
|
|
setCurrency('EUR')
|
|
} finally {
|
|
setLoadingShippingFee(false)
|
|
}
|
|
}
|
|
|
|
// Convert EUR price to user's currency (CHF for Swiss, EUR for others)
|
|
// Database stores prices in EUR, so we need to convert if user is Swiss
|
|
const convertPrice = (priceInEur: number): number => {
|
|
if (currency === 'CHF') {
|
|
// Convert EUR to CHF (1 EUR ≈ 0.97 CHF)
|
|
return priceInEur * 0.97
|
|
}
|
|
return priceInEur
|
|
}
|
|
|
|
const handleJoinDrop = () => {
|
|
// Validate custom quantity if entered
|
|
if (customQuantity && !validateCustomQuantity()) {
|
|
return
|
|
}
|
|
|
|
// Check if user is logged in
|
|
if (!user) {
|
|
setShowAuthModal(true)
|
|
return
|
|
}
|
|
// Fetch available currencies, buyer data, and shipping fee when opening confirm modal
|
|
fetchAvailableCurrencies()
|
|
fetchBuyerData()
|
|
fetchShippingFee()
|
|
setShowConfirmModal(true)
|
|
}
|
|
|
|
const handleLogin = (loggedInUser: User) => {
|
|
setUser(loggedInUser)
|
|
setShowAuthModal(false)
|
|
// After login, fetch buyer data and show the confirmation modal
|
|
fetchAvailableCurrencies()
|
|
fetchBuyerData()
|
|
fetchShippingFee()
|
|
setShowConfirmModal(true)
|
|
}
|
|
|
|
const handleConfirmPurchase = async () => {
|
|
if (!drop) return
|
|
|
|
// Validate buyer data fields
|
|
if (!buyerFullname.trim() || !buyerAddress.trim() || !buyerPhone.trim()) {
|
|
setErrorMessage(t('drop.fillDeliveryInfo'))
|
|
setShowErrorModal(true)
|
|
return
|
|
}
|
|
|
|
setProcessing(true)
|
|
try {
|
|
// First, get or create buyer_data
|
|
const buyerDataResponse = await fetch('/api/buyer-data/get-or-create', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
credentials: 'include',
|
|
body: JSON.stringify({
|
|
fullname: buyerFullname.trim(),
|
|
address: buyerAddress.trim(),
|
|
phone: buyerPhone.trim(),
|
|
}),
|
|
})
|
|
|
|
if (!buyerDataResponse.ok) {
|
|
const error = await buyerDataResponse.json()
|
|
setErrorMessage(error.error || 'Failed to save delivery information')
|
|
setShowErrorModal(true)
|
|
setProcessing(false)
|
|
return
|
|
}
|
|
|
|
const buyerData = await buyerDataResponse.json()
|
|
|
|
// Create NOWPayments payment
|
|
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
|
|
pay_currency: selectedCurrency, // Selected payment currency
|
|
buyer_data_id: buyerData.buyer_data_id, // Buyer delivery data ID
|
|
}),
|
|
})
|
|
|
|
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
|
|
}
|
|
// 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 confirmation modal
|
|
setShowConfirmModal(false)
|
|
setProcessing(false)
|
|
|
|
// Show payment modal with payment details
|
|
if (data.pay_address) {
|
|
setPaymentData(data)
|
|
setShowPaymentModal(true)
|
|
} else {
|
|
setErrorMessage('Payment created but no payment address received')
|
|
setShowErrorModal(true)
|
|
await fetchActiveDrop()
|
|
}
|
|
} catch (error) {
|
|
console.error('Error creating payment invoice:', error)
|
|
setErrorMessage('Failed to create payment invoice. Please try again.')
|
|
setShowErrorModal(true)
|
|
setProcessing(false)
|
|
}
|
|
}
|
|
|
|
const handleCancelPurchase = () => {
|
|
setShowConfirmModal(false)
|
|
}
|
|
|
|
const calculatePrice = () => {
|
|
if (!drop) return 0
|
|
// ppu is stored as integer where 1000 = 1.00 EUR, so divide by 1000 to get actual price in EUR
|
|
// Assuming ppu is per gram
|
|
const pricePerGramEur = drop.ppu / 1000
|
|
const priceToUseEur = isWholesaleUnlocked ? pricePerGramEur * 0.76 : pricePerGramEur
|
|
const priceEur = selectedSize * priceToUseEur
|
|
// Convert to user's currency
|
|
return convertPrice(priceEur)
|
|
}
|
|
|
|
const calculateStandardPrice = () => {
|
|
if (!drop) return 0
|
|
const pricePerGramEur = drop.ppu / 1000
|
|
const priceEur = selectedSize * pricePerGramEur
|
|
// Convert to user's currency
|
|
return convertPrice(priceEur)
|
|
}
|
|
|
|
const calculateWholesalePrice = () => {
|
|
if (!drop) return 0
|
|
const pricePerGramEur = drop.ppu / 1000
|
|
const priceEur = selectedSize * pricePerGramEur * 0.76
|
|
// Convert to user's currency
|
|
return convertPrice(priceEur)
|
|
}
|
|
|
|
// Get price per gram in user's currency
|
|
const getPricePerGram = () => {
|
|
if (!drop) return 0
|
|
const pricePerGramEur = drop.ppu / 1000
|
|
return convertPrice(pricePerGramEur)
|
|
}
|
|
|
|
// Get wholesale price per gram in user's currency
|
|
const getWholesalePricePerGram = () => {
|
|
if (!drop) return 0
|
|
const pricePerGramEur = drop.ppu / 1000
|
|
return convertPrice(pricePerGramEur * 0.76)
|
|
}
|
|
|
|
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) {
|
|
const dayText = diffDays === 1 ? t('drop.day') : t('drop.days')
|
|
const hourText = diffHours > 0 ? (diffHours === 1 ? t('drop.hour') : t('drop.hours')) : ''
|
|
return `${diffDays} ${dayText}${diffHours > 0 ? ` ${diffHours} ${hourText}` : ''}`
|
|
} else if (diffHours > 0) {
|
|
const hourText = diffHours === 1 ? t('drop.hour') : t('drop.hours')
|
|
const minuteText = diffMinutes > 0 ? (diffMinutes === 1 ? t('drop.minute') : t('drop.minutes')) : ''
|
|
return `${diffHours} ${hourText}${diffMinutes > 0 ? ` ${diffMinutes} ${minuteText}` : ''}`
|
|
} else {
|
|
const minuteText = diffMinutes === 1 ? t('drop.minute') : t('drop.minutes')
|
|
return `${diffMinutes} ${minuteText}`
|
|
}
|
|
}
|
|
|
|
// Get images array (prioritize new images array, fallback to legacy image_url)
|
|
// Must be defined before early returns to maintain hook order
|
|
const images = drop?.images && drop.images.length > 0
|
|
? drop.images
|
|
: (drop?.image_url ? [drop.image_url] : [])
|
|
|
|
// Reset selected image index when images change
|
|
// Must be called before early returns to maintain hook order
|
|
useEffect(() => {
|
|
if (images.length > 0 && selectedImageIndex >= images.length) {
|
|
setSelectedImageIndex(0)
|
|
} else if (images.length === 0) {
|
|
setSelectedImageIndex(0)
|
|
}
|
|
}, [images, selectedImageIndex])
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="drop">
|
|
<div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '40px' }}>
|
|
<p style={{ color: 'var(--muted)' }}>{t('drop.loading')}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!drop) {
|
|
return (
|
|
<div className="drop">
|
|
<div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '60px' }}>
|
|
<h2 style={{ marginBottom: '16px' }}>{t('drop.dropSoldOut')}</h2>
|
|
<p style={{ color: 'var(--muted)', marginBottom: '20px' }}>
|
|
{t('drop.fullyReserved')}
|
|
</p>
|
|
<p style={{ color: 'var(--muted)' }}>
|
|
{t('drop.nextDropComingSoon')}
|
|
</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">
|
|
{images.length > 0 ? (
|
|
<div>
|
|
{/* Main large image */}
|
|
<div style={{ marginBottom: '12px' }}>
|
|
<Image
|
|
src={images[selectedImageIndex]}
|
|
alt={`${drop.item} - Image ${selectedImageIndex + 1}`}
|
|
width={420}
|
|
height={420}
|
|
style={{
|
|
width: '100%',
|
|
height: 'auto',
|
|
borderRadius: '16px',
|
|
objectFit: 'cover',
|
|
aspectRatio: '1 / 1'
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Thumbnails */}
|
|
{images.length > 1 && (
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: `repeat(${Math.min(images.length, 4)}, 1fr)`,
|
|
gap: '8px'
|
|
}}>
|
|
{images.slice(0, 4).map((imgUrl, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => setSelectedImageIndex(index)}
|
|
style={{
|
|
padding: 0,
|
|
border: selectedImageIndex === index
|
|
? '2px solid var(--accent)'
|
|
: '2px solid transparent',
|
|
borderRadius: '8px',
|
|
background: 'transparent',
|
|
cursor: 'pointer',
|
|
overflow: 'hidden',
|
|
aspectRatio: '1 / 1'
|
|
}}
|
|
>
|
|
<Image
|
|
src={imgUrl}
|
|
alt={`${drop.item} - Thumbnail ${index + 1}`}
|
|
width={100}
|
|
height={100}
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
objectFit: 'cover',
|
|
opacity: selectedImageIndex === index ? 1 : 0.7,
|
|
transition: 'opacity 0.2s'
|
|
}}
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
aspectRatio: '1 / 1',
|
|
background: 'var(--bg-soft)',
|
|
borderRadius: '16px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: 'var(--muted)',
|
|
}}
|
|
>
|
|
{t('common.noImage')}
|
|
</div>
|
|
)}
|
|
<div>
|
|
<h2>{drop.item}</h2>
|
|
<div className="meta">
|
|
{formatSize(drop.size, drop.unit)} {t('drop.batch')}
|
|
</div>
|
|
<div className="price">
|
|
{(() => {
|
|
// Get prices in user's currency
|
|
const pricePerGram = getPricePerGram();
|
|
const wholesalePricePerGram = getWholesalePricePerGram();
|
|
|
|
if (isWholesaleUnlocked) {
|
|
return (
|
|
<>
|
|
<strong>{t('drop.wholesalePriceLabel')} {wholesalePricePerGram.toFixed(2)} {currency} / g</strong>
|
|
<span className="muted" style={{ display: 'block', marginTop: '6px', fontSize: '14px' }}>
|
|
{t('drop.standard')}: {pricePerGram.toFixed(2)} {currency} / g
|
|
</span>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<strong>{t('drop.standardPriceLabel')} {pricePerGram.toFixed(2)} {currency} / g</strong>
|
|
<span className="muted">
|
|
{t('drop.wholesale')}: {wholesalePricePerGram.toFixed(2)} {currency} / g 🔒 <a href="#unlock" onClick={(e) => { e.preventDefault(); setShowUnlockModal(true); }}>{t('drop.unlock')}</a>
|
|
</span>
|
|
<div className="hint">{t('drop.unlockOnce')}</div>
|
|
</>
|
|
);
|
|
})()}
|
|
</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' }}>
|
|
{t('drop.dropStartsIn')} <strong>{timeUntilStart}</strong>
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="progress">
|
|
<span style={{ width: `${progressPercentage}%` }}></span>
|
|
</div>
|
|
<div className="meta">
|
|
{(() => {
|
|
const fillDisplay = drop.unit === 'kg' ? Math.round(drop.fill * 1000) : Math.round(drop.fill);
|
|
const sizeDisplay = drop.unit === 'kg' ? Math.round(drop.size * 1000) : drop.size;
|
|
return `${fillDisplay}g ${t('drop.of')} ${sizeDisplay}g ${t('drop.reserved')}`;
|
|
})()}
|
|
</div>
|
|
{(() => {
|
|
const pendingFill = Number(drop.pending_fill) || 0;
|
|
console.log(`pending fill:${pendingFill}`)
|
|
return pendingFill > 0 && (
|
|
<div className="meta" style={{ fontSize: '12px', color: 'var(--muted)', marginTop: '4px' }}>
|
|
{drop.unit === 'kg' ? pendingFill.toFixed(2) : Math.round(pendingFill)}
|
|
{drop.unit} {t('drop.onHold')}
|
|
</div>
|
|
)
|
|
})()}
|
|
</>
|
|
)}
|
|
|
|
{!isUpcoming && hasRemaining && (
|
|
<>
|
|
<div style={{ display: 'flex', gap: '12px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
|
|
{availableSizes.length > 0 && (
|
|
<div className="options" style={{ flex: '1', minWidth: '200px' }}>
|
|
{availableSizes.map((size) => (
|
|
<button
|
|
key={size}
|
|
className={selectedSize === size && !customQuantity ? 'active' : ''}
|
|
onClick={() => handleQuantityButtonClick(size)}
|
|
>
|
|
{size}g
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
<div style={{ flex: availableSizes.length > 0 ? '1' : '100%', minWidth: '150px' }}>
|
|
<input
|
|
type="number"
|
|
value={customQuantity}
|
|
onChange={(e) => handleCustomQuantityChange(e.target.value)}
|
|
onBlur={validateCustomQuantity}
|
|
placeholder={t('drop.custom')}
|
|
min={getMinimumGrams()}
|
|
max={getRemainingInGrams()}
|
|
style={{
|
|
width: '100%',
|
|
padding: '14px',
|
|
borderRadius: '12px',
|
|
border: `1px solid ${quantityError ? '#dc2626' : 'var(--border)'}`,
|
|
background: 'var(--bg-soft)',
|
|
color: 'var(--text)',
|
|
fontSize: '14px',
|
|
}}
|
|
/>
|
|
{quantityError && (
|
|
<div style={{ marginTop: '6px', fontSize: '12px', color: '#dc2626' }}>
|
|
{quantityError}
|
|
</div>
|
|
)}
|
|
{!quantityError && customQuantity && (
|
|
<div style={{ marginTop: '6px', fontSize: '12px', color: 'var(--muted)' }}>
|
|
{t('drop.min')}: {getMinimumGrams()}g · {t('drop.max')}: {getRemainingInGrams()}g
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ marginTop: '24px', marginBottom: '16px' }}>
|
|
{isWholesaleUnlocked ? (
|
|
<>
|
|
<div style={{ fontSize: '18px', fontWeight: 500, marginBottom: '8px' }}>
|
|
{t('drop.total')}: {calculatePrice().toFixed(2)} {currency}
|
|
</div>
|
|
<div style={{ fontSize: '14px', color: 'var(--muted)' }}>
|
|
{t('drop.standardTotal')}: {calculateStandardPrice().toFixed(2)} {currency}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div style={{ fontSize: '18px', fontWeight: 500, marginBottom: '8px' }}>
|
|
{t('drop.total')}: {calculateStandardPrice().toFixed(2)} {currency}
|
|
</div>
|
|
<div style={{ fontSize: '14px', color: 'var(--muted)', display: 'flex', alignItems: 'center', gap: '6px' }}>
|
|
{t('drop.wholesaleTotal')}: {calculateWholesalePrice().toFixed(2)} {currency} 🔒
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<button className="cta" onClick={handleJoinDrop}>
|
|
{t('drop.joinTheDrop')}
|
|
</button>
|
|
<div className="cta-note">{t('drop.noSubscription')}</div>
|
|
</>
|
|
)}
|
|
|
|
{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)' }}>
|
|
{t('drop.lessThanRemaining', { amount: 50, unit: drop.unit })}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{!hasRemaining && (
|
|
<div style={{ marginTop: '30px', padding: '20px', background: 'var(--bg-soft)', borderRadius: '12px', textAlign: 'center' }}>
|
|
<p style={{ margin: 0, color: 'var(--muted)' }}>{t('drop.fullyReservedText')}</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' }}>
|
|
{t('drop.confirmPurchase')}
|
|
</h2>
|
|
<div style={{ marginBottom: '24px' }}>
|
|
<p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
|
|
<strong>{t('drop.item')}:</strong> {drop.item}
|
|
</p>
|
|
<p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
|
|
<strong>{t('drop.quantity')}:</strong> {selectedSize}g
|
|
</p>
|
|
<p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
|
|
<strong>{t('drop.pricePerUnit', { unit: drop.unit })}:</strong> {getPricePerGram().toFixed(2)} {currency}
|
|
</p>
|
|
|
|
{/* Delivery Information */}
|
|
<div style={{ marginTop: '24px', marginBottom: '16px' }}>
|
|
<h3 style={{ marginBottom: '16px', fontSize: '16px', color: 'var(--text)' }}>
|
|
{t('drop.deliveryInformation')}
|
|
</h3>
|
|
|
|
<div style={{ marginBottom: '12px' }}>
|
|
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', color: 'var(--muted)' }}>
|
|
<strong>{t('drop.fullNameRequired')}</strong>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={buyerFullname}
|
|
onChange={(e) => setBuyerFullname(e.target.value)}
|
|
placeholder={t('drop.enterFullName')}
|
|
required
|
|
style={{
|
|
width: '100%',
|
|
padding: '12px',
|
|
background: 'var(--bg-soft)',
|
|
border: '1px solid var(--border)',
|
|
borderRadius: '8px',
|
|
fontSize: '14px',
|
|
color: 'var(--text)',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div style={{ marginBottom: '12px' }}>
|
|
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', color: 'var(--muted)' }}>
|
|
<strong>{t('drop.addressRequired')}</strong>
|
|
</label>
|
|
<textarea
|
|
value={buyerAddress}
|
|
onChange={(e) => setBuyerAddress(e.target.value)}
|
|
placeholder={t('drop.enterAddress')}
|
|
required
|
|
rows={3}
|
|
style={{
|
|
width: '100%',
|
|
padding: '12px',
|
|
background: 'var(--bg-soft)',
|
|
border: '1px solid var(--border)',
|
|
borderRadius: '8px',
|
|
fontSize: '14px',
|
|
color: 'var(--text)',
|
|
fontFamily: 'inherit',
|
|
resize: 'vertical',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div style={{ marginBottom: '12px' }}>
|
|
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', color: 'var(--muted)' }}>
|
|
<strong>{t('drop.phoneRequired')}</strong>
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
value={buyerPhone}
|
|
onChange={(e) => setBuyerPhone(e.target.value)}
|
|
placeholder={t('drop.enterPhone')}
|
|
required
|
|
style={{
|
|
width: '100%',
|
|
padding: '12px',
|
|
background: 'var(--bg-soft)',
|
|
border: '1px solid var(--border)',
|
|
borderRadius: '8px',
|
|
fontSize: '14px',
|
|
color: 'var(--text)',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Currency Selection */}
|
|
<div style={{ marginTop: '24px', marginBottom: '16px' }}>
|
|
<label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', color: 'var(--muted)' }}>
|
|
<strong>{t('drop.paymentCurrency')}:</strong>
|
|
</label>
|
|
{loadingCurrencies ? (
|
|
<p style={{ color: 'var(--muted)', fontSize: '14px' }}>{t('drop.loadingCurrencies')}</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',
|
|
background: 'var(--bg-soft)',
|
|
borderRadius: '8px',
|
|
marginTop: '16px',
|
|
}}
|
|
>
|
|
<div style={{ marginBottom: '12px' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
|
|
<span style={{ color: 'var(--muted)', fontSize: '14px' }}>{t('drop.subtotal')}:</span>
|
|
<span style={{ fontWeight: 500, fontSize: '14px' }}>
|
|
{calculatePrice().toFixed(2)} {currency}
|
|
</span>
|
|
</div>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
|
|
<span style={{ color: 'var(--muted)', fontSize: '14px' }}>{t('drop.shippingFee')}:</span>
|
|
<span style={{ fontWeight: 500, fontSize: '14px' }}>
|
|
{loadingShippingFee ? '...' : (shippingFee !== null ? shippingFee.toFixed(2) : '40.00')} {currency}
|
|
</span>
|
|
</div>
|
|
<div style={{ marginBottom: '8px', marginLeft: '0', paddingLeft: '0' }}>
|
|
<span style={{ color: 'var(--muted)', fontSize: '12px', fontStyle: 'italic' }}>
|
|
{t('drop.shippingFeeNote')}
|
|
</span>
|
|
</div>
|
|
<div style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
marginTop: '12px',
|
|
paddingTop: '12px',
|
|
borderTop: '1px solid var(--border)'
|
|
}}>
|
|
<span style={{ fontSize: '18px', fontWeight: 'bold' }}>{t('drop.total')}:</span>
|
|
<span style={{ fontSize: '18px', fontWeight: 'bold' }}>
|
|
{loadingShippingFee ? '...' : ((calculatePrice() + (shippingFee || 40)).toFixed(2))} {currency}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<p
|
|
style={{
|
|
margin: '4px 0 0 0',
|
|
fontSize: '14px',
|
|
color: 'var(--muted)',
|
|
}}
|
|
>
|
|
{t('drop.inclVat')}
|
|
</p>
|
|
<p
|
|
style={{
|
|
margin: '8px 0 0 0',
|
|
fontSize: '12px',
|
|
color: 'var(--muted)',
|
|
}}
|
|
>
|
|
{t('drop.payWith')}: {String(selectedCurrency || '').toUpperCase()}
|
|
</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',
|
|
}}
|
|
>
|
|
{t('common.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 ? t('common.processing') : t('drop.confirmPurchase')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Auth Modal */}
|
|
<Suspense fallback={null}>
|
|
<AuthModal
|
|
isOpen={showAuthModal}
|
|
onClose={() => setShowAuthModal(false)}
|
|
onLogin={handleLogin}
|
|
/>
|
|
</Suspense>
|
|
|
|
{/* Unlock Modal */}
|
|
<UnlockModal
|
|
isOpen={showUnlockModal}
|
|
onClose={() => setShowUnlockModal(false)}
|
|
/>
|
|
|
|
{/* 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' }}>
|
|
{t('drop.paymentConfirmed')}
|
|
</h2>
|
|
<p style={{ marginBottom: '16px', color: 'var(--text)' }}>
|
|
{t('drop.orderProcessed')}
|
|
</p>
|
|
<div style={{ marginBottom: '24px' }}>
|
|
<p style={{ marginBottom: '12px', fontWeight: '600', color: 'var(--text)' }}>
|
|
{t('drop.whatHappensNext')}:
|
|
</p>
|
|
<ul style={{
|
|
margin: 0,
|
|
paddingLeft: '20px',
|
|
color: 'var(--muted)',
|
|
lineHeight: '1.8'
|
|
}}>
|
|
<li>{t('drop.orderProcessed24h')}</li>
|
|
<li>{t('drop.shippedExpress')}</li>
|
|
<li>{t('drop.shippingConfirmation')}</li>
|
|
</ul>
|
|
</div>
|
|
<p style={{ marginBottom: '24px', color: 'var(--muted)', fontStyle: 'italic' }}>
|
|
{t('drop.thankYouCollective')}
|
|
</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',
|
|
}}
|
|
>
|
|
{t('common.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' }}>
|
|
{t('drop.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',
|
|
}}
|
|
>
|
|
{t('common.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' }}>
|
|
{t('drop.completePayment')}
|
|
</h2>
|
|
|
|
<div style={{ marginBottom: '24px' }}>
|
|
<p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
|
|
<strong>{t('drop.amountToPay')}:</strong> {paymentData.pay_amount} {paymentData.pay_currency.toUpperCase()}
|
|
</p>
|
|
|
|
<div style={{
|
|
marginTop: '20px',
|
|
marginBottom: '20px',
|
|
padding: '16px',
|
|
background: 'var(--bg-soft)',
|
|
borderRadius: '8px'
|
|
}}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
|
|
<span style={{ color: 'var(--muted)' }}>{t('drop.subtotal')}:</span>
|
|
<span style={{ fontWeight: 500 }}>
|
|
{paymentData.subtotal?.toFixed(2) || (paymentData.price_amount - (paymentData.shipping_fee || 0)).toFixed(2)} {paymentData.price_currency.toUpperCase()}
|
|
</span>
|
|
</div>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
|
|
<span style={{ color: 'var(--muted)' }}>{t('drop.shippingFee')}:</span>
|
|
<span style={{ fontWeight: 500 }}>
|
|
{paymentData.shipping_fee?.toFixed(2) || '0.00'} {paymentData.price_currency.toUpperCase()}
|
|
</span>
|
|
</div>
|
|
<div style={{ marginBottom: '8px', marginLeft: '0', paddingLeft: '0' }}>
|
|
<span style={{ color: 'var(--muted)', fontSize: '12px', fontStyle: 'italic' }}>
|
|
{t('drop.shippingFeeNote')}
|
|
</span>
|
|
</div>
|
|
<div style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
marginTop: '12px',
|
|
paddingTop: '12px',
|
|
borderTop: '1px solid var(--border)'
|
|
}}>
|
|
<span style={{ fontWeight: 600, fontSize: '16px' }}>{t('drop.total')}:</span>
|
|
<span style={{ fontWeight: 600, fontSize: '16px' }}>
|
|
{paymentData.price_amount} {paymentData.price_currency.toUpperCase()}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ marginTop: '20px', marginBottom: '20px' }}>
|
|
<label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', color: 'var(--muted)' }}>
|
|
{t('drop.sendPaymentTo')}
|
|
</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',
|
|
}}
|
|
>
|
|
{t('drop.copyAddress')}
|
|
</button>
|
|
</div>
|
|
|
|
{paymentData.payin_extra_id && (
|
|
<div style={{ marginTop: '20px', marginBottom: '20px' }}>
|
|
<label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', color: 'var(--muted)' }}>
|
|
{t('drop.memoRequired')}:
|
|
</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',
|
|
}}
|
|
>
|
|
{t('drop.copyMemo')}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{paymentData.expiration_estimate_date && (
|
|
<p style={{ marginTop: '16px', fontSize: '12px', color: 'var(--muted)' }}>
|
|
{t('drop.paymentExpires')}: {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>{t('drop.status')}:</strong> {paymentData.payment_status}
|
|
</p>
|
|
<p style={{ margin: '12px 0 0 0', fontSize: '12px', color: '#dc2626', fontWeight: 500 }}>
|
|
{t('drop.closingWarning')}
|
|
</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',
|
|
}}
|
|
>
|
|
{t('common.close')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|