286 lines
11 KiB
TypeScript
286 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import { useAuth } from '../../context/AuthContext';
|
|
import Header from '../../components/Header';
|
|
import RewardCard from '../../components/RewardCard';
|
|
import { fetchRandomReward, getReceiptId, addInventoryItem, type Reward } from '../../lib/rewards';
|
|
|
|
export default function SuccessPage() {
|
|
const { user } = useAuth();
|
|
const searchParams = useSearchParams();
|
|
const [isOpening, setIsOpening] = useState(true);
|
|
const [reward, setReward] = useState<Reward | null>(null);
|
|
const [showReward, setShowReward] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [inventoryStatus, setInventoryStatus] = useState<'pending' | 'success' | 'error'>('pending');
|
|
const [receiptId, setReceiptId] = useState<string | null>(null);
|
|
|
|
const boxId = searchParams.get('box_id');
|
|
const sessionId = searchParams.get('session_id');
|
|
|
|
useEffect(() => {
|
|
// Simulate box opening animation
|
|
const timer = setTimeout(async () => {
|
|
setIsOpening(false);
|
|
|
|
try {
|
|
// Fetch real random reward from API
|
|
const randomReward = await fetchRandomReward();
|
|
if (randomReward) {
|
|
setReward(randomReward);
|
|
setShowReward(true);
|
|
|
|
// Get receipt ID from Stripe if session ID is available
|
|
if (sessionId) {
|
|
try {
|
|
console.log('Getting receipt ID for session:', sessionId);
|
|
const stripeReceiptId = await getReceiptId(sessionId);
|
|
|
|
if (stripeReceiptId) {
|
|
setReceiptId(stripeReceiptId);
|
|
console.log('Got receipt ID from Stripe:', stripeReceiptId);
|
|
|
|
// Add reward to inventory with actual receipt ID
|
|
if (user?.uid) {
|
|
try {
|
|
console.log('Adding reward to inventory:', {
|
|
receiptId: stripeReceiptId,
|
|
userId: user.uid,
|
|
rewardId: randomReward.id
|
|
});
|
|
|
|
const success = await addInventoryItem(stripeReceiptId, user.uid, randomReward.id);
|
|
if (success) {
|
|
setInventoryStatus('success');
|
|
console.log('Reward added to inventory successfully');
|
|
} else {
|
|
setInventoryStatus('error');
|
|
setError('Something went wrong');
|
|
setShowReward(false);
|
|
setReward(null);
|
|
}
|
|
} catch (inventoryError) {
|
|
console.error('Error adding to inventory:', inventoryError);
|
|
setInventoryStatus('error');
|
|
setError('Something went wrong');
|
|
setShowReward(false);
|
|
setReward(null);
|
|
}
|
|
}
|
|
} else {
|
|
console.log('No receipt ID found for session, using session ID as fallback');
|
|
// Fallback to using session ID if no receipt ID is found
|
|
if (user?.uid) {
|
|
try {
|
|
const success = await addInventoryItem(sessionId, user.uid, randomReward.id);
|
|
if (success) {
|
|
setInventoryStatus('success');
|
|
} else {
|
|
setInventoryStatus('error');
|
|
setError('Something went wrong');
|
|
setShowReward(false);
|
|
setReward(null);
|
|
}
|
|
} catch (inventoryError) {
|
|
console.error('Error adding to inventory with fallback:', inventoryError);
|
|
setInventoryStatus('error');
|
|
setError('Something went wrong');
|
|
setShowReward(false);
|
|
setReward(null);
|
|
}
|
|
}
|
|
}
|
|
} catch (receiptError) {
|
|
console.error('Error getting receipt ID:', receiptError);
|
|
// Continue with fallback to session ID
|
|
if (user?.uid) {
|
|
try {
|
|
const success = await addInventoryItem(sessionId!, user.uid, randomReward.id);
|
|
if (success) {
|
|
setInventoryStatus('success');
|
|
} else {
|
|
setInventoryStatus('error');
|
|
setError('Something went wrong');
|
|
setShowReward(false);
|
|
setReward(null);
|
|
}
|
|
} catch (inventoryError) {
|
|
console.error('Error adding to inventory with fallback:', inventoryError);
|
|
setInventoryStatus('error');
|
|
setError('Something went wrong');
|
|
setShowReward(false);
|
|
setReward(null);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error('Error fetching random reward:', err);
|
|
setError(err instanceof Error ? err.message : 'Failed to fetch reward');
|
|
}
|
|
}, 3000);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [sessionId, user?.uid]);
|
|
|
|
if (!user) {
|
|
return (
|
|
<>
|
|
<Header />
|
|
<div className="min-h-screen bg-gradient-to-b from-background to-background/95 pt-16">
|
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-center">
|
|
<h1 className="text-2xl font-bold mb-4">Access Denied</h1>
|
|
<p className="text-foreground/60">Please sign in to view this page.</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// Show only error message if there's an error
|
|
if (error) {
|
|
return (
|
|
<>
|
|
<Header />
|
|
<div className="min-h-screen bg-gradient-to-b from-background to-background/95 pt-16">
|
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-center">
|
|
<div className="text-6xl mb-4">❌</div>
|
|
<h1 className="text-3xl font-bold mb-4">Something went wrong</h1>
|
|
<p className="text-foreground/60 mb-8">
|
|
{error}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<button
|
|
onClick={() => window.location.href = '/boxes'}
|
|
className="px-6 py-3 rounded-lg bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold hover:opacity-90 transition-opacity"
|
|
>
|
|
Back to Boxes
|
|
</button>
|
|
<button
|
|
onClick={() => window.location.reload()}
|
|
className="px-6 py-3 rounded-lg border border-foreground/20 hover:bg-foreground/5 transition-colors"
|
|
>
|
|
Try Again
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Header />
|
|
<div className="min-h-screen bg-gradient-to-b from-background to-background/95 pt-16">
|
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
{/* Success Header */}
|
|
<div className="text-center mb-8">
|
|
<div className="text-6xl mb-4">🎉</div>
|
|
<h1 className="text-3xl font-bold mb-2">Payment Successful!</h1>
|
|
<p className="text-foreground/60">
|
|
Your mystery box is being opened...
|
|
</p>
|
|
</div>
|
|
|
|
{/* Box Opening Animation */}
|
|
{isOpening && (
|
|
<div className="text-center py-12">
|
|
<div className="inline-block animate-bounce">
|
|
<div className="text-8xl mb-4">🎁</div>
|
|
</div>
|
|
<p className="text-lg text-foreground/60">Opening your box...</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Reward Reveal */}
|
|
{showReward && reward && (
|
|
<div className="text-center">
|
|
<div className="bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-2xl p-8 mb-8">
|
|
<div className="text-6xl mb-4">✨</div>
|
|
<h2 className="text-2xl font-bold mb-2">Congratulations!</h2>
|
|
<p className="text-foreground/60 mb-6">
|
|
You found something amazing!
|
|
</p>
|
|
|
|
{/* Reward Card */}
|
|
<div className="max-w-sm mx-auto">
|
|
<RewardCard reward={reward} />
|
|
</div>
|
|
|
|
{/* Inventory Status */}
|
|
{inventoryStatus === 'success' && (
|
|
<div className="mt-4 p-3 bg-green-500/10 border border-green-500/20 rounded-lg">
|
|
<p className="text-green-500 text-sm">✅ Added to your inventory!</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<button
|
|
onClick={() => window.location.href = '/inventory'}
|
|
className="px-6 py-3 rounded-lg bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold hover:opacity-90 transition-opacity"
|
|
>
|
|
View in Inventory
|
|
</button>
|
|
<button
|
|
onClick={() => window.location.href = '/boxes'}
|
|
className="px-6 py-3 rounded-lg border border-foreground/20 hover:bg-foreground/5 transition-colors"
|
|
>
|
|
Open Another Box
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Transaction Details */}
|
|
<div className="mt-12 bg-foreground/5 rounded-xl p-6">
|
|
<h3 className="text-lg font-semibold mb-4">Transaction Details</h3>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-foreground/60">Session ID:</span>
|
|
<span className="font-mono">{sessionId}</span>
|
|
</div>
|
|
{receiptId && (
|
|
<div className="flex justify-between">
|
|
<span className="text-foreground/60">Receipt ID:</span>
|
|
<span className="font-mono">{receiptId}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-between">
|
|
<span className="text-foreground/60">Box ID:</span>
|
|
<span className="font-mono">{boxId}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-foreground/60">User:</span>
|
|
<span>{user.email}</span>
|
|
</div>
|
|
{reward && (
|
|
<div className="flex justify-between">
|
|
<span className="text-foreground/60">Reward ID:</span>
|
|
<span className="font-mono">{reward.id}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-between">
|
|
<span className="text-foreground/60">Inventory Status:</span>
|
|
<span className={`font-medium ${
|
|
inventoryStatus === 'success' ? 'text-green-500' :
|
|
inventoryStatus === 'error' ? 'text-red-500' :
|
|
'text-yellow-500'
|
|
}`}>
|
|
{inventoryStatus === 'success' ? 'Added' :
|
|
inventoryStatus === 'error' ? 'Failed' :
|
|
'Pending'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|