final 0.9

app/components/Drop.tsx

@@ -26,6 +26,7 @@ interface User {
   id: number
   username: string
   email: string
+  referral_points?: number
 }
 
 export default function Drop() {
@@ -57,12 +58,17 @@ export default function Drop() {
   const [shippingFee, setShippingFee] = useState<number | null>(null)
   const [loadingShippingFee, setLoadingShippingFee] = useState(false)
   const [currency, setCurrency] = useState<'CHF' | 'EUR'>('EUR') // Default to EUR
+  const [referralPoints, setReferralPoints] = useState<number>(0)
+  const [pointsToChf, setPointsToChf] = useState<number>(100)
+  const [pointsToUse, setPointsToUse] = useState<number>(0)
+  const [loadingPoints, setLoadingPoints] = useState(false)
 
   useEffect(() => {
     fetchActiveDrop()
     checkAuth()
     checkWholesaleStatus()
     fetchShippingFee() // Fetch currency info on mount
+    fetchReferralPoints()
 
     // Poll active drop every 30 seconds
     const interval = setInterval(() => {
@@ -72,6 +78,16 @@ export default function Drop() {
     return () => clearInterval(interval)
   }, [])
 
+  // Fetch referral points when user is authenticated
+  useEffect(() => {
+    if (user) {
+      fetchReferralPoints()
+    } else {
+      setReferralPoints(0)
+      setPointsToUse(0)
+    }
+  }, [user])
+
   const checkWholesaleStatus = async () => {
     try {
       const response = await fetch('/api/referrals/status', {
@@ -86,6 +102,30 @@ export default function Drop() {
     }
   }
 
+  const fetchReferralPoints = async () => {
+    if (!user) {
+      setReferralPoints(0)
+      setPointsToUse(0)
+      return
+    }
+
+    setLoadingPoints(true)
+    try {
+      const response = await fetch('/api/referral-points', {
+        credentials: 'include',
+      })
+      if (response.ok) {
+        const data = await response.json()
+        setReferralPoints(data.referral_points || 0)
+        setPointsToChf(data.points_to_chf || 100)
+      }
+    } catch (error) {
+      console.error('Error fetching referral points:', error)
+    } finally {
+      setLoadingPoints(false)
+    }
+  }
+
   // Poll payment status when payment modal is open
   useEffect(() => {
     if (!showPaymentModal || !paymentData?.payment_id) return
@@ -429,6 +469,7 @@ export default function Drop() {
           size: selectedSize, // Size in grams
           pay_currency: selectedCurrency, // Selected payment currency
           buyer_data_id: buyerData.buyer_data_id, // Buyer delivery data ID
+          points_to_use: pointsToUse, // Points to use for discount
         }),
       })
 
@@ -451,6 +492,12 @@ export default function Drop() {
 
       const data = await response.json()
 
+      // Refresh referral points if any were used
+      if (pointsToUse > 0) {
+        fetchReferralPoints()
+        setPointsToUse(0) // Reset points used
+      }
+
       // Close confirmation modal
       setShowConfirmModal(false)
       setProcessing(false)
@@ -474,6 +521,39 @@ export default function Drop() {
 
   const handleCancelPurchase = () => {
     setShowConfirmModal(false)
+    setPointsToUse(0) // Reset points when canceling
+  }
+
+  const handlePointsToUseChange = (value: string) => {
+    const numValue = parseFloat(value) || 0
+    const maxPoints = Math.min(referralPoints, calculatePriceBeforeDiscount() * pointsToChf)
+    setPointsToUse(Math.max(0, Math.min(numValue, maxPoints)))
+  }
+
+  const calculatePriceBeforeDiscount = () => {
+    if (!drop) return 0
+    const pricePerGramEur = drop.ppu / 1000
+    const priceToUseEur = isWholesaleUnlocked ? pricePerGramEur * 0.76 : pricePerGramEur
+    const priceEur = selectedSize * priceToUseEur
+    return convertPrice(priceEur)
+  }
+
+  const getMaxDiscountFromPoints = () => {
+    if (pointsToChf === 0) return 0
+    return referralPoints / pointsToChf
+  }
+
+  const calculateDiscountFromPoints = () => {
+    if (pointsToUse === 0 || pointsToChf === 0) return 0
+    // Calculate discount in CHF, then convert to user's currency
+    const discountChf = pointsToUse / pointsToChf
+    // Convert CHF discount to user's currency
+    if (currency === 'CHF') {
+      return discountChf
+    } else {
+      // Convert CHF to EUR (1 CHF ≈ 1.03 EUR)
+      return discountChf * 1.03
+    }
   }
 
   const calculatePrice = () => {
@@ -484,7 +564,10 @@ export default function Drop() {
     const priceToUseEur = isWholesaleUnlocked ? pricePerGramEur * 0.76 : pricePerGramEur
     const priceEur = selectedSize * priceToUseEur
     // Convert to user's currency
-    return convertPrice(priceEur)
+    const price = convertPrice(priceEur)
+    // Apply points discount
+    const discount = calculateDiscountFromPoints()
+    return Math.max(0, price - discount)
   }
 
   const calculateStandardPrice = () => {
@@ -587,6 +670,11 @@ export default function Drop() {
   }
 
   const progressPercentage = getProgressPercentage(drop.fill, drop.size)
+  // Calculate separate percentages for sales and pending
+  const salesFill = Number(drop.sales_fill) || 0
+  const pendingFill = Number(drop.pending_fill) || 0
+  const salesPercentage = getProgressPercentage(salesFill, drop.size)
+  const pendingPercentage = getProgressPercentage(pendingFill, drop.size)
   const availableSizes = getAvailableSizes()
   const timeUntilStart = getTimeUntilStart()
   const isUpcoming = drop.is_upcoming && timeUntilStart
@@ -716,7 +804,24 @@ export default function Drop() {
         ) : (
           <>
             <div className="progress">
-              <span style={{ width: `${progressPercentage}%` }}></span>
+              <div style={{ display: 'flex', height: '100%', width: '100%' }}>
+                {salesPercentage > 0 && (
+                  <span style={{ 
+                    width: `${salesPercentage}%`, 
+                    height: '100%',
+                    background: 'linear-gradient(90deg, var(--accent), #1fa463)',
+                    display: 'block'
+                  }}></span>
+                )}
+                {pendingPercentage > 0 && (
+                  <span style={{ 
+                    width: `${pendingPercentage}%`, 
+                    height: '100%',
+                    background: '#808080',
+                    display: 'block'
+                  }}></span>
+                )}
+              </div>
             </div>
             <div className="meta">
               {(() => {
@@ -1001,6 +1106,62 @@ export default function Drop() {
                 )}
               </div>
 
+              {/* Referral Points Usage */}
+              {user && referralPoints > 0 && (
+                <div style={{ marginTop: '24px', marginBottom: '16px' }}>
+                  <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', color: 'var(--muted)' }}>
+                    <strong>⭐ {t('drop.useReferralPoints')}</strong>
+                    <span style={{ marginLeft: '8px', fontSize: '12px', color: 'var(--muted)' }}>
+                      ({referralPoints.toFixed(0)} {t('drop.available')})
+                    </span>
+                  </label>
+                  <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                    <input
+                      type="number"
+                      min="0"
+                      max={referralPoints}
+                      step="1"
+                      value={pointsToUse}
+                      onChange={(e) => handlePointsToUseChange(e.target.value)}
+                      style={{
+                        flex: 1,
+                        padding: '12px',
+                        background: 'var(--bg-soft)',
+                        border: '1px solid var(--border)',
+                        borderRadius: '8px',
+                        fontSize: '14px',
+                        color: 'var(--text)',
+                      }}
+                      placeholder="0"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const maxPoints = Math.min(referralPoints, calculatePriceBeforeDiscount() * pointsToChf)
+                        setPointsToUse(maxPoints)
+                      }}
+                      style={{
+                        padding: '12px 16px',
+                        background: 'var(--bg-soft)',
+                        border: '1px solid var(--border)',
+                        borderRadius: '8px',
+                        fontSize: '12px',
+                        color: 'var(--text)',
+                        cursor: 'pointer',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {t('drop.useMax')}
+                    </button>
+                  </div>
+                  {pointsToUse > 0 && (
+                    <div style={{ marginTop: '8px', fontSize: '12px', color: '#0a7931' }}>
+                      {t('drop.pointsDiscount')}: {(pointsToUse / pointsToChf).toFixed(2)} {currency === 'CHF' ? 'CHF' : 'EUR'}
+                    </div>
+                  )}
+                </div>
+              )}
+
               <div
                 style={{
                   padding: '16px',
@@ -1013,9 +1174,19 @@ export default function Drop() {
                   <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}
+                      {calculatePriceBeforeDiscount().toFixed(2)} {currency}
                     </span>
                   </div>
+                  {pointsToUse > 0 && (
+                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
+                      <span style={{ color: '#0a7931', fontSize: '14px' }}>
+                        ⭐ {t('drop.pointsDiscount')}:
+                      </span>
+                      <span style={{ fontWeight: 500, fontSize: '14px', color: '#0a7931' }}>
+                        -{calculateDiscountFromPoints().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' }}>
@@ -1039,6 +1210,11 @@ export default function Drop() {
                       {loadingShippingFee ? '...' : ((calculatePrice() + (shippingFee || 40)).toFixed(2))} {currency}
                     </span>
                   </div>
+                  {pointsToUse > 0 && (
+                    <div style={{ marginTop: '8px', fontSize: '12px', color: '#0a7931', fontStyle: 'italic' }}>
+                      {t('drop.pointsWillBeDeducted')}
+                    </div>
+                  )}
                 </div>
                 <p
                   style={{