Block 8 complete: streaks, notifications, referrals, premium identity, gamification

2026-06-15 10:32:10 +02:00
parent 6423430275
commit 5e73d1d7ad
24 changed files with 1565 additions and 38 deletions
@@ -7,47 +7,125 @@ import { useRouter } from "next/navigation";
 import {
  Bot, ShoppingBag, MessageCircle, Wallet,
  Flame, Sparkles, Star, ChevronRight,
-  BookOpen, MapPin, Crown, Zap,
+  BookOpen, MapPin, Crown, Zap, TrendingUp,
+  Gift, Trophy,
 } from "lucide-react";
 import { DAILY_VERSE, generateAIResponse } from "@/lib/ai";
+import PremiumBadge from "@/components/PremiumBadge";

 export default function HomePage() {
-  const { user, token, loading } = useAuth();
+  const { user, token, loading, streak, xp, refreshStreak, refreshXp, refreshUser } = useAuth();
  const router = useRouter();
-  const [streak, setStreak] = useState(0);
-  const [verse, setVerse] = useState(DAILY_VERSE[Math.floor(Math.random() * DAILY_VERSE.length)]);
+  const [verse] = useState(DAILY_VERSE[Math.floor(Math.random() * DAILY_VERSE.length)]);
+  const [claiming, setClaiming] = useState(false);
+  const [claimResult, setClaimResult] = useState<string | null>(null);

  useEffect(() => {
    if (!loading && !token) router.push("/login");
  }, [loading, token, router]);

+  // Refresh streak/XP data every 60 seconds
+  useEffect(() => {
+    if (!token) return;
+    const interval = setInterval(() => {
+      refreshStreak();
+      refreshXp();
+    }, 60000);
+    return () => clearInterval(interval);
+  }, [token, refreshStreak, refreshXp]);
+
+  const handleClaimReward = async () => {
+    if (!token || claiming) return;
+    setClaiming(true);
+    setClaimResult(null);
+    try {
+      const res = await fetch("/api/gamification/streak", {
+        method: "POST",
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setClaimResult(
+          `Claimed! +${data.reward} FLH, +${data.xpGain} XP${
+            data.newLevel ? ` — Level Up! You're now level ${data.newLevel}! 🎉` : ""
+          }`
+        );
+        refreshStreak();
+        refreshXp();
+        refreshUser(); // update FLH balance
+      } else if (res.status === 409) {
+        setClaimResult("Already claimed today!");
+      } else {
+        const err = await res.json();
+        setClaimResult(err.error || "Failed to claim");
+      }
+    } catch {
+      setClaimResult("Network error — try again");
+    } finally {
+      setClaiming(false);
+      setTimeout(() => setClaimResult(null), 5000);
+    }
+  };
+
  if (loading) return <LoadingScreen />;
  if (!user) return null;

  const isPremium = user.isPremium || user.isPro;
  const isPro = user.isPro;
+  const currentStreak = streak?.currentStreak ?? 0;
+  const canClaim = streak?.canClaim ?? false;
+  const todayReward = streak?.todayReward ?? 0;
+  const level = xp?.level ?? 1;
+  const currentXp = xp?.xp ?? 0;
+  const xpToNext = xp?.xpToNext ?? 100;
+  const xpPercent = xpToNext > 0 ? Math.min(Math.round((currentXp / xpToNext) * 100), 100) : 0;

  return (
    <div className="min-h-dvh bg-[#0a0a0f] pb-24">
      {/* Header */}
      <div className="px-4 pt-6 pb-4">
        <div className="flex items-center justify-between mb-1">
-          <div>
-            <h1 className="text-xl font-bold text-white">
+          <div className="flex-1">
+            <h1 className="text-xl font-bold text-white flex items-center gap-2">
              Assalamualaikum, {user.name.split(" ")[0]} ☪️
+              {/* Level Badge */}
+              <div className="flex items-center gap-1 bg-gradient-to-r from-purple-900/40 to-purple-800/20 border border-purple-700/30 rounded-full px-2.5 py-0.5">
+                <Trophy size={12} className="text-purple-400" />
+                <span className="text-xs font-bold text-purple-300">Lv.{level}</span>
+              </div>
+              {user.isPro && <PremiumBadge tier="pro" size="sm" />}
+              {user.isPremium && !user.isPro && <PremiumBadge tier="premium" size="sm" />}
            </h1>
            <p className="text-xs text-gray-500 mt-0.5">
              {new Date().toLocaleDateString("en-MY", { weekday: "long", day: "numeric", month: "long", year: "numeric" })}
            </p>
          </div>
          {/* Streak */}
-          {streak > 0 && (
-            <div className="flex items-center gap-1.5 bg-gradient-to-r from-orange-900/40 to-orange-800/20 border border-orange-700/30 rounded-xl px-3 py-2">
-              <Flame size={16} className="text-orange-400 flame" />
-              <span className="text-sm font-bold text-orange-300">{streak}</span>
-              <span className="text-[10px] text-orange-400/70">day</span>
-            </div>
-          )}
+          <div className={`flex items-center gap-1.5 rounded-xl px-3 py-2 ${
+            currentStreak > 0
+              ? "bg-gradient-to-r from-orange-900/40 to-orange-800/20 border border-orange-700/30"
+              : "bg-gray-900/40 border border-gray-800/30"
+          }`}>
+            <Flame size={16} className={currentStreak > 0 ? "text-orange-400 flame" : "text-gray-600"} />
+            <span className={`text-sm font-bold ${currentStreak > 0 ? "text-orange-300" : "text-gray-500"}`}>
+              {currentStreak}
+            </span>
+            <span className="text-[10px] text-gray-500">day</span>
+          </div>
+        </div>
+
+        {/* XP Progress Bar */}
+        <div className="mt-2">
+          <div className="flex items-center justify-between mb-1">
+            <span className="text-[10px] text-gray-500">XP Progress</span>
+            <span className="text-[10px] text-gray-500">{currentXp} / {xpToNext} XP</span>
+          </div>
+          <div className="h-1.5 bg-gray-800 rounded-full overflow-hidden">
+            <div
+              className="h-full bg-gradient-to-r from-purple-500 to-amber-400 rounded-full transition-all duration-500"
+              style={{ width: `${xpPercent}%` }}
+            />
+          </div>
        </div>

        {/* Premium banner */}
@@ -74,6 +152,15 @@ export default function HomePage() {
            <span className="text-sm font-medium text-purple-300">Pro Member — Unlimited Everything</span>
          </div>
        )}
+
+        {/* FLH Earning Rate - shown for premium/pro */}
+        {(isPremium || isPro) && (
+          <div className="mt-2 flex items-center gap-2 bg-gradient-to-r from-[#D4AF37]/10 to-purple-900/10 border border-[#D4AF37]/20 rounded-2xl px-4 py-2">
+            <TrendingUp size={14} className="text-[#D4AF37]" />
+            <span className="text-xs font-semibold text-[#D4AF37]">2x Earning Active</span>
+            <span className="text-[10px] text-gray-500">— Earn double FLH on marketplace sales</span>
+          </div>
+        )}
      </div>

      {/* Daily Verse */}
@@ -91,6 +178,62 @@ export default function HomePage() {
        <p className="text-[10px] text-gray-600 text-center mt-1">— {verse.reference}</p>
      </div>

+      {/* Streak Reward Card */}
+      <div className="mx-4 mb-5">
+        <div className={`bg-gradient-to-br ${
+          canClaim
+            ? "from-orange-900/20 to-amber-900/10 border-orange-700/30"
+            : "from-gray-900/30 to-gray-800/10 border-gray-800/30"
+        } border rounded-2xl p-4`}>
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-2">
+              <div className={`w-9 h-9 rounded-xl ${canClaim ? "bg-orange-900/40" : "bg-gray-800/40"} flex items-center justify-center`}>
+                <Gift size={18} className={canClaim ? "text-orange-400" : "text-gray-600"} />
+              </div>
+              <div>
+                <h3 className="text-sm font-semibold text-white">Daily Reward</h3>
+                <p className="text-[10px] text-gray-500">
+                  {canClaim
+                    ? `Claim your streak reward — +${todayReward} FLH`
+                    : "Reward claimed — come back tomorrow!"}
+                </p>
+              </div>
+            </div>
+            <div className="text-right">
+              <p className="text-lg font-bold text-orange-400">{todayReward.toLocaleString()}</p>
+              <p className="text-[9px] text-gray-600">FLH reward</p>
+            </div>
+          </div>
+
+          {/* Claim button */}
+          {canClaim ? (
+            <button
+              onClick={handleClaimReward}
+              disabled={claiming}
+              className="w-full py-2.5 bg-gradient-to-r from-orange-600 to-amber-600 hover:from-orange-500 hover:to-amber-500 disabled:opacity-50 text-white text-sm font-semibold rounded-xl active:scale-[0.98] transition-all"
+            >
+              {claiming ? "Claiming..." : "🔥 Claim Streak Reward"}
+            </button>
+          ) : (
+            <div className="w-full py-2.5 bg-gray-800/50 text-gray-500 text-sm font-medium rounded-xl text-center">
+              ✅ Claimed
+            </div>
+          )}
+
+          {/* Claim result toast */}
+          {claimResult && (
+            <div className="mt-2 text-xs text-center font-medium text-orange-300 animate-pulse">
+              {claimResult}
+            </div>
+          )}
+
+          {/* XP hint */}
+          <p className="text-[10px] text-gray-700 text-center mt-2">
+            +{Math.min(10 + currentStreak * 2, 100)} XP also awarded on claim
+          </p>
+        </div>
+      </div>
+
      {/* Quick Actions */}
      <div className="px-4 mb-5">
        <h2 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Quick Actions</h2>
@@ -127,16 +270,20 @@ export default function HomePage() {

      {/* Premium upsell at bottom for free users */}
      {!isPremium && (
-        <div className="mx-4 mt-5 bg-gradient-to-r from-[#D4AF37]/10 to-purple-900/10 border border-[#D4AF37]/20 rounded-2xl p-4">
-          <div className="flex items-start gap-3">
+        <div className="mx-4 mt-5 bg-gradient-to-r from-[#D4AF37]/10 to-purple-900/10 border border-[#D4AF37]/20 rounded-2xl p-4 relative overflow-hidden">
+          <div className="absolute top-0 right-0 w-24 h-24 bg-[#D4AF37]/5 rounded-full -translate-y-1/2 translate-x-1/2 blur-2xl" />
+          <div className="flex items-start gap-3 relative">
            <div className="w-10 h-10 rounded-2xl bg-[#D4AF37]/15 flex items-center justify-center shrink-0">
              <Star size={20} className="text-[#D4AF37]" />
            </div>
            <div className="flex-1">
-              <h3 className="font-semibold text-white text-sm">Unlock Your Full Potential</h3>
-              <p className="text-xs text-gray-500 mt-1">Premium gives you unlimited AI, halal monitor, and marketplace access.</p>
+              <h3 className="font-semibold text-white text-sm flex items-center gap-2">
+                Unlock Your Full Potential
+                <PremiumBadge tier="free" size="sm" />
+              </h3>
+              <p className="text-xs text-gray-500 mt-1">Premium gives you unlimited AI, halal monitor, <strong className="text-gray-400">2x FLH earning</strong>, and marketplace access.</p>
              <Link href="/upgrade"
-                className="inline-block mt-3 text-xs font-semibold text-[#D4AF37] border border-[#D4AF37]/40 rounded-full px-4 py-1.5 active:bg-[#D4AF37]/10 transition">
+                className="inline-block mt-3 text-xs font-semibold text-[#D4AF37] border border-[#D4AF37]/40 rounded-full px-4 py-1.5 active:bg-[#D4AF37]/10 transition hover:shadow-[0_0_12px_rgba(212,175,55,0.3)]">
                See Plans
              </Link>
            </div>