made survey page better

src/app/access/[method]/[step]/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useTransition, useEffect, use } from "react";
-import { Asterisk, CheckCircle2, Camera, CameraOff, PartyPopper, ExternalLink, ArrowLeft, Copy } from "lucide-react";
+import { Asterisk, CheckCircle2, Camera, CameraOff, PartyPopper, ExternalLink, ArrowLeft, Copy, Gift } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
@@ -52,6 +52,12 @@ export default function AccessPage({ params }: PageProps) {
   const [copied, setCopied] = useState(false);
   const [profileData, setProfileData] = useState<{ avatarUrl: string; gamertag: string } | null>(null);
 
+  // Survey State
+  const [minecraftUsername, setMinecraftUsername] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [rewardQueued, setRewardQueued] = useState(false);
+  const [surveyStatus, setSurveyStatus] = useState<{ ok: boolean; message?: string }>({ ok: false });
+
   // Loading state to prevent premature redirects
   const [isLoading, setIsLoading] = useState(true);
 
@@ -62,6 +68,8 @@ export default function AccessPage({ params }: PageProps) {
         router.push(`/access/${method}/verify`);
       } else if (step === 'success' && !whitelistSuccess) {
         router.push(`/access/${method}/verify`);
+      } else if (step === 'survey' && !whitelistSuccess) {
+        router.push(`/access/${method}/verify`);
       }
     }
   }, [step, verified, whitelistSuccess, method, router, isLoading]);
@@ -91,6 +99,8 @@ export default function AccessPage({ params }: PageProps) {
     const savedJavaName = localStorage.getItem(`${prefix}java-name`);
     const savedBedrockName = localStorage.getItem(`${prefix}bedrock-name`);
     const savedPreference = localStorage.getItem(`${prefix}preference`);
+    const savedMinecraftUsername = localStorage.getItem(`${prefix}minecraft-username`);
+    const savedRewardQueued = localStorage.getItem(`${prefix}reward-queued`);
 
     if (savedVerified === 'true') {
       setVerified(true);
@@ -110,6 +120,12 @@ export default function AccessPage({ params }: PageProps) {
     if (savedPreference) {
       setPreference(savedPreference as "java" | "bedrock" | "both");
     }
+    if (savedMinecraftUsername) {
+      setMinecraftUsername(savedMinecraftUsername);
+    }
+    if (savedRewardQueued === 'true') {
+      setRewardQueued(true);
+    }
 
     // Fetch profile data for success step
     if (step === 'success') {
@@ -151,6 +167,16 @@ export default function AccessPage({ params }: PageProps) {
     localStorage.setItem(`${prefix}preference`, preference);
   }, [preference, method]);
 
+  useEffect(() => {
+    const prefix = method === 'qr' ? 'frg-qr-' : 'frg-';
+    localStorage.setItem(`${prefix}minecraft-username`, minecraftUsername);
+  }, [minecraftUsername, method]);
+
+  useEffect(() => {
+    const prefix = method === 'qr' ? 'frg-qr-' : 'frg-';
+    localStorage.setItem(`${prefix}reward-queued`, rewardQueued.toString());
+  }, [rewardQueued, method]);
+
   useEffect(() => {
     const fetchConfig = async () => {
       try {
@@ -371,17 +397,63 @@ export default function AccessPage({ params }: PageProps) {
     localStorage.removeItem(`${prefix}java-name`);
     localStorage.removeItem(`${prefix}bedrock-name`);
     localStorage.removeItem(`${prefix}preference`);
+    localStorage.removeItem(`${prefix}minecraft-username`);
+    localStorage.removeItem(`${prefix}reward-queued`);
     
     setVerified(false);
     setWhitelistSuccess(false);
     setCode("");
     setJavaName("");
     setBedrockName("");
+    setMinecraftUsername("");
+    setRewardQueued(false);
     setStatus({ ok: false });
     
     router.push(`/access/${method}/verify`);
   };
 
+  const handleSurveyReward = async () => {
+    if (!minecraftUsername.trim()) return;
+
+    setIsSubmitting(true);
+    setSurveyStatus({ ok: false });
+
+    try {
+      const response = await fetch("/api/reward", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          player: minecraftUsername,
+        }),
+      });
+
+      const result = await response.json();
+
+      if (response.ok && result.success) {
+        setRewardQueued(true);
+        setSurveyStatus({
+          ok: true,
+          message: result.message || "Successfully queued diamonds!",
+        });
+      } else {
+        setSurveyStatus({
+          ok: false,
+          message: result.error || "Failed to queue reward",
+        });
+      }
+    } catch (error) {
+      console.error("Error queuing reward:", error);
+      setSurveyStatus({
+        ok: false,
+        message: "We couldn't reach the server. Double-check your connection and try again.",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   // Render different steps
   if (step === 'verify') {
     return (
@@ -675,8 +747,8 @@ export default function AccessPage({ params }: PageProps) {
           {/* Actions */}
           <div className="space-y-3">
             <Button asChild className="w-full">
-              <Link href="/survey" target="_blank" rel="noopener noreferrer">
-                <ExternalLink className="w-4 h-4 mr-2" />
+              <Link href={`/access/${method}/survey`}>
+                <Gift className="w-4 h-4 mr-2" />
                 Claim my reward
               </Link>
             </Button>
@@ -690,6 +762,106 @@ export default function AccessPage({ params }: PageProps) {
     );
   }
 
+  if (step === 'survey') {
+    if (!whitelistSuccess) {
+      return null; // Redirect handled by useEffect
+    }
+
+    const TALLY_FORM_URL = "https://tally.so/r/nP5KdL";
+
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center p-4">
+        <div className="w-full max-w-md space-y-6">
+          {/* Header */}
+          <div className="text-center space-y-2">
+            <Link href={`/access/${method}/success`} className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground">
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              Back to success
+            </Link>
+            <h1 className="text-2xl font-semibold">Claim Your Reward</h1>
+            <p className="text-muted-foreground">
+              Help us improve your server experience! Complete this survey to receive 2 diamonds as a thank you.
+            </p>
+          </div>
+
+          {/* Reward Section */}
+          <div className="space-y-4">
+            {!rewardQueued ? (
+              <div className="space-y-2">
+                <Label className="text-xs uppercase tracking-wide text-muted-foreground">
+                  Your Minecraft username
+                </Label>
+                <Input
+                  placeholder="Enter your username"
+                  value={minecraftUsername}
+                  onChange={(e) => setMinecraftUsername(e.target.value)}
+                  className="font-mono"
+                  required
+                />
+              </div>
+            ) : (
+              <div className="text-center space-y-2">
+                <Gift className="w-12 h-12 text-emerald-500 mx-auto" />
+                <p className="text-emerald-600 font-medium">2 diamonds queued for {minecraftUsername}!</p>
+              </div>
+            )}
+
+            {/* Status */}
+            <div className="text-center">
+              {surveyStatus.message && (
+                <p className={surveyStatus.ok ? "text-emerald-500" : "text-destructive"}>
+                  {surveyStatus.ok && <CheckCircle2 className="inline size-4 mr-1" />}
+                  {surveyStatus.message}
+                </p>
+              )}
+            </div>
+
+            {/* Actions */}
+            {!rewardQueued ? (
+              <Button
+                onClick={handleSurveyReward}
+                disabled={isSubmitting || !minecraftUsername.trim()}
+                className="w-full"
+              >
+                {isSubmitting ? "Queuing..." : "Queue Diamonds"}
+              </Button>
+            ) : (
+              <Button asChild className="w-full">
+                <a 
+                  href={TALLY_FORM_URL} 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                >
+                  <ExternalLink className="w-4 h-4 mr-2" />
+                  Take Full Survey
+                </a>
+              </Button>
+            )}
+          </div>
+
+          {/* Survey Info */}
+          {!rewardQueued && (
+            <div className="text-center space-y-2">
+              <p className="text-sm text-muted-foreground">
+                Want to help us improve even more? Take our full survey after claiming your diamonds.
+              </p>
+              <Button variant="outline" asChild>
+                <a 
+                  href={TALLY_FORM_URL} 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                >
+                  <ExternalLink className="w-4 h-4 mr-2" />
+                  Open Survey
+                </a>
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
   // Invalid step - redirect handled by useEffect
   return null;
 }

src/app/api/reward/route.ts

@@ -0,0 +1,66 @@
+import { NextRequest, NextResponse } from "next/server";
+import { minecraft } from "@/lib/servertap";
+
+// Simple in-memory storage for tracking claims
+// In production, this should be replaced with a database
+const claimedUsers = new Set<string>();
+
+export async function POST(request: NextRequest) {
+  try {
+    const { player } = await request.json();
+
+    if (!player || typeof player !== "string" || !player.trim()) {
+      return NextResponse.json(
+        { success: false, error: "Valid player name is required" },
+        { status: 400 }
+      );
+    }
+
+    const playerName = player.trim().toLowerCase();
+
+    // Check if player has already claimed diamonds
+    if (claimedUsers.has(playerName)) {
+      return NextResponse.json(
+        { 
+          success: false, 
+          error: "You have already claimed your diamonds! Each player can only claim once." 
+        },
+        { status: 409 }
+      );
+    }
+
+    // Call the Minecraft API to reward the player
+    const result = await minecraft.rewardPlayer(player);
+
+    if (!result.success) {
+      return NextResponse.json(
+        { 
+          success: false, 
+          error: result.error || "Failed to reward player" 
+        },
+        { status: 500 }
+      );
+    }
+
+    // Mark the player as having claimed
+    claimedUsers.add(playerName);
+
+    return NextResponse.json({
+      success: true,
+      message: `Successfully queued 2 diamonds for ${player}!`,
+    });
+  } catch (error) {
+    console.error("Reward endpoint error:", error);
+    return NextResponse.json(
+      { success: false, error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}
+
+export async function GET() {
+  return NextResponse.json(
+    { error: "Method not allowed" },
+    { status: 405 }
+  );
+}

src/app/survey/page.tsx

@@ -4,24 +4,25 @@ import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { ArrowLeft, ExternalLink, Gift } from "lucide-react";
+import { ArrowLeft, ExternalLink, Gift, CheckCircle2 } from "lucide-react";
 import Link from "next/link";
 
 export default function SurveyPage() {
   const [minecraftUsername, setMinecraftUsername] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [rewardQueued, setRewardQueued] = useState(false);
+  const [status, setStatus] = useState<{ ok: boolean; message?: string }>({ ok: false });
 
   const handleRewardOnly = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!minecraftUsername.trim()) return;
 
     setIsSubmitting(true);
+    setStatus({ ok: false });
 
     try {
       // Call the reward endpoint to give diamonds
-      const response = await fetch("/reward", {
+      const response = await fetch("/api/reward", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -31,107 +32,122 @@ export default function SurveyPage() {
         }),
       });
 
-      if (response.ok) {
+      const result = await response.json();
+
+      if (response.ok && result.success) {
         setRewardQueued(true);
+        setStatus({
+          ok: true,
+          message: result.message || "Successfully queued diamonds!",
+        });
       } else {
-        console.error("Failed to queue reward");
+        setStatus({
+          ok: false,
+          message: result.error || "Failed to queue reward",
+        });
       }
     } catch (error) {
       console.error("Error queuing reward:", error);
+      setStatus({
+        ok: false,
+        message: "We couldn't reach the server. Double-check your connection and try again.",
+      });
     } finally {
       setIsSubmitting(false);
     }
   };
 
-  const TALLY_FORM_URL = "https://tally.so/r/nP5KdL"; // Replace with your actual Tally form URL
+  const TALLY_FORM_URL = "https://tally.so/r/nP5KdL";
 
   return (
-    <div className="min-h-screen flex items-center justify-center p-4 bg-background">
-      <Card className="max-w-2xl w-full">
-        <CardHeader>
-          <div className="flex items-center gap-2 mb-2">
-            <Button variant="ghost" size="sm" asChild>
-              <Link href="/">
-                <ArrowLeft className="w-4 h-4" />
-              </Link>
-            </Button>
-          </div>
-          <CardTitle className="text-2xl">FRG Network Survey</CardTitle>
-          <CardDescription>
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <div className="w-full max-w-md space-y-6">
+        {/* Header */}
+        <div className="text-center space-y-2">
+          <Link href="/" className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground">
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Back to home
+          </Link>
+          <h1 className="text-2xl font-semibold">FRG Network Survey</h1>
+          <p className="text-muted-foreground">
             Help us improve your server experience! Complete this survey to receive 2 diamonds as a thank you.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-6">
-          {/* Quick reward section */}
-          <div className="bg-muted/50 p-4 rounded-lg space-y-4">
-            <div className="flex items-center gap-2">
-              <Gift className="w-5 h-5 text-emerald-500" />
-              <h3 className="font-semibold">Get Your Diamonds</h3>
+          </p>
+        </div>
+
+        {/* Reward Section */}
+        <div className="space-y-4">
+          {!rewardQueued ? (
+            <div className="space-y-2">
+              <Label className="text-xs uppercase tracking-wide text-muted-foreground">
+                Your Minecraft username
+              </Label>
+              <Input
+                placeholder="Enter your username"
+                value={minecraftUsername}
+                onChange={(e) => setMinecraftUsername(e.target.value)}
+                className="font-mono"
+                required
+              />
             </div>
-            <p className="text-sm text-muted-foreground">
-              Enter your Minecraft username to queue 2 diamonds for when you join the server:
-            </p>
-            
-            {!rewardQueued ? (
-              <form onSubmit={handleRewardOnly} className="flex gap-2">
-                <Input
-                  placeholder="Your Minecraft username"
-                  value={minecraftUsername}
-                  onChange={(e) => setMinecraftUsername(e.target.value)}
-                  className="flex-1 font-mono"
-                  required
-                />
-                <Button 
-                  type="submit" 
-                  disabled={isSubmitting || !minecraftUsername.trim()}
-                >
-                  {isSubmitting ? "Queuing..." : "Queue Diamonds"}
-                </Button>
-              </form>
-            ) : (
-              <div className="flex items-center gap-2 text-emerald-600">
-                <Gift className="w-4 h-4" />
-                <span className="text-sm font-medium">2 diamonds queued for {minecraftUsername}!</span>
-              </div>
+          ) : (
+            <div className="text-center space-y-2">
+              <Gift className="w-12 h-12 text-emerald-500 mx-auto" />
+              <p className="text-emerald-600 font-medium">2 diamonds queued for {minecraftUsername}!</p>
+            </div>
+          )}
+
+          {/* Status */}
+          <div className="text-center">
+            {status.message && (
+              <p className={status.ok ? "text-emerald-500" : "text-destructive"}>
+                {status.ok && <CheckCircle2 className="inline size-4 mr-1" />}
+                {status.message}
+              </p>
             )}
           </div>
 
-          {/* Survey section */}
-          <div className="space-y-4">
-            <div>
-              <h3 className="font-semibold mb-2">Take the Full Survey</h3>
-              <p className="text-sm text-muted-foreground mb-4">
-                Help us improve the server by sharing your thoughts and preferences.
-              </p>
-            </div>
-            
-            <Button asChild className="w-full" size="lg">
+          {/* Actions */}
+          {!rewardQueued ? (
+            <Button
+              onClick={handleRewardOnly}
+              disabled={isSubmitting || !minecraftUsername.trim()}
+              className="w-full"
+            >
+              {isSubmitting ? "Queuing..." : "Queue Diamonds"}
+            </Button>
+          ) : (
+            <Button asChild className="w-full">
               <a 
                 href={TALLY_FORM_URL} 
                 target="_blank" 
                 rel="noopener noreferrer"
               >
                 <ExternalLink className="w-4 h-4 mr-2" />
-                Open Survey in Tally
+                Take Full Survey
               </a>
             </Button>
-            
-            <p className="text-xs text-muted-foreground text-center">
-              Opens in a new window • Takes about 2-3 minutes
-            </p>
-          </div>
+          )}
+        </div>
 
-          {/* Navigation */}
-          <div className="pt-4 border-t">
-            <Button variant="outline" asChild className="w-full">
-              <Link href="/">
-                <ArrowLeft className="w-4 h-4 mr-2" />
-                Back to Home
-              </Link>
+        {/* Survey Info */}
+        {!rewardQueued && (
+          <div className="text-center space-y-2">
+            <p className="text-sm text-muted-foreground">
+              Want to help us improve even more? Take our full survey after claiming your diamonds.
+            </p>
+            <Button variant="outline" asChild>
+              <a 
+                href={TALLY_FORM_URL} 
+                target="_blank" 
+                rel="noopener noreferrer"
+              >
+                <ExternalLink className="w-4 h-4 mr-2" />
+                Open Survey
+              </a>
             </Button>
           </div>
-        </CardContent>
-      </Card>
+        )}
+      </div>
     </div>
   );
 }