rc

app/components/Nav.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react'
 import AuthModal from './AuthModal'
+import RedeemPointsModal from './RedeemPointsModal'
 import LanguageSwitcher from './LanguageSwitcher'
 import { useI18n } from '@/lib/i18n'
 
@@ -16,6 +17,7 @@ export default function Nav() {
   const { t } = useI18n()
   const [user, setUser] = useState<User | null>(null)
   const [showAuthModal, setShowAuthModal] = useState(false)
+  const [showRedeemModal, setShowRedeemModal] = useState(false)
   const [loading, setLoading] = useState(true)
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
@@ -73,6 +75,23 @@ export default function Nav() {
     }
   }
 
+  const handleRedeemSuccess = async () => {
+    // Refresh points after successful redemption
+    if (user) {
+      try {
+        const pointsResponse = await fetch('/api/referral-points', {
+          credentials: 'include',
+        })
+        if (pointsResponse.ok) {
+          const pointsData = await pointsResponse.json()
+          setUser({ ...user, referral_points: pointsData.referral_points })
+        }
+      } catch (error) {
+        console.error('Error fetching referral points:', error)
+      }
+    }
+  }
+
   return (
     <>
       <nav>
@@ -104,14 +123,38 @@ export default function Nav() {
                   {user.username}
                 </span>
                 {user.referral_points !== undefined && user.referral_points > 0 && (
-                  <span style={{ 
-                    color: '#0a7931', 
-                    fontSize: '14px', 
-                    marginLeft: '12px',
-                    fontWeight: 500,
-                  }}>
-                    ⭐ {user.referral_points.toFixed(0)} pts
-                  </span>
+                  <>
+                    <span style={{ 
+                      color: '#0a7931', 
+                      fontSize: '14px', 
+                      marginLeft: '12px',
+                      fontWeight: 500,
+                    }}>
+                      ⭐ {user.referral_points.toFixed(0)} pts
+                    </span>
+                    <button
+                      onClick={() => {
+                        setShowRedeemModal(true)
+                        setMobileMenuOpen(false)
+                      }}
+                      style={{
+                        background: 'transparent',
+                        border: '1px solid #0a7931',
+                        color: '#0a7931',
+                        padding: '8px 16px',
+                        borderRadius: '8px',
+                        fontSize: '14px',
+                        marginLeft: '12px',
+                        lineHeight: '1',
+                        boxSizing: 'border-box',
+                        display: 'inline-block',
+                        cursor: 'pointer',
+                        fontWeight: 500,
+                      }}
+                    >
+                      Redeem
+                    </button>
+                  </>
                 )}
                 <a
                   href="/orders"
@@ -189,6 +232,15 @@ export default function Nav() {
         onClose={() => setShowAuthModal(false)}
         onLogin={handleLogin}
       />
+
+      {user && user.referral_points !== undefined && (
+        <RedeemPointsModal
+          isOpen={showRedeemModal}
+          onClose={() => setShowRedeemModal(false)}
+          currentPoints={user.referral_points}
+          onRedeemSuccess={handleRedeemSuccess}
+        />
+      )}
     </>
   )
 }