76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
|
||
type Package = {
|
||
id: string;
|
||
name: string;
|
||
budgetBonus: number;
|
||
price: number;
|
||
description: string | null;
|
||
};
|
||
|
||
const ICONS: Record<string, string> = {
|
||
"pkg-silver": "🥈",
|
||
"pkg-gold": "🥇",
|
||
"pkg-diamond": "💎",
|
||
};
|
||
|
||
export default function ShopClient({ packages }: { packages: Package[] }) {
|
||
const [loading, setLoading] = useState<string | null>(null);
|
||
|
||
async function handleBuy(packageId: string) {
|
||
setLoading(packageId);
|
||
const res = await fetch("/api/payment/request", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ packageId }),
|
||
});
|
||
const data = await res.json();
|
||
if (res.ok && data.paymentUrl) {
|
||
window.location.href = data.paymentUrl;
|
||
} else {
|
||
alert(data.error ?? "خطا در اتصال به درگاه");
|
||
setLoading(null);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
{packages.map((pkg) => (
|
||
<div key={pkg.id}
|
||
className={`bg-white rounded-2xl shadow-lg p-6 flex flex-col items-center text-center border-2 transition hover:shadow-xl ${
|
||
pkg.id === "pkg-gold" ? "border-yellow-400 scale-105" : "border-transparent"
|
||
}`}>
|
||
{pkg.id === "pkg-gold" && (
|
||
<div className="bg-yellow-400 text-yellow-900 text-xs font-bold px-3 py-1 rounded-full mb-3">
|
||
محبوبترین
|
||
</div>
|
||
)}
|
||
<div className="text-5xl mb-4">{ICONS[pkg.id] ?? "📦"}</div>
|
||
<h3 className="text-xl font-bold mb-2">{pkg.name}</h3>
|
||
<p className="text-gray-500 text-sm mb-4">{pkg.description}</p>
|
||
<div className="bg-green-50 rounded-xl px-6 py-3 mb-6 w-full">
|
||
<div className="text-3xl font-bold text-green-700">+{pkg.budgetBonus}M</div>
|
||
<div className="text-xs text-gray-500">افزایش بودجه</div>
|
||
</div>
|
||
<div className="text-2xl font-bold mb-4">
|
||
{pkg.price.toLocaleString("fa-IR")} تومان
|
||
</div>
|
||
<button
|
||
onClick={() => handleBuy(pkg.id)}
|
||
disabled={loading === pkg.id}
|
||
className={`w-full py-3 rounded-xl font-bold transition disabled:opacity-50 ${
|
||
pkg.id === "pkg-gold"
|
||
? "bg-yellow-400 text-yellow-900 hover:bg-yellow-500"
|
||
: "bg-green-700 text-white hover:bg-green-800"
|
||
}`}
|
||
>
|
||
{loading === pkg.id ? "در حال اتصال..." : "خرید"}
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|