88 lines
3.4 KiB
TypeScript
88 lines
3.4 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from "react";
|
||
import { CreditCard } from "lucide-react";
|
||
import { getPaymentMethods, PaymentMethod } from '@/public/src/services/payment methods/api'
|
||
|
||
export default function PaymentMethodsSection() {
|
||
const [methods, setMethods] = useState<PaymentMethod[]>([]);
|
||
const [selectedMethod, setSelectedMethod] = useState<string | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
|
||
useEffect(() => {
|
||
async function fetchMethods() {
|
||
try {
|
||
const data = await getPaymentMethods();
|
||
setMethods(data);
|
||
|
||
// انتخاب پیشفرض اولین روش
|
||
if (data.length > 0) setSelectedMethod(data[0].code);
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
|
||
fetchMethods();
|
||
}, []);
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="bg-white rounded-[1rem] p-6 md:p-8 shadow-sm">
|
||
<p className="text-gray-500 text-sm">در حال دریافت روشهای پرداخت...</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="bg-white pt-4 pb-4">
|
||
<div className="flex items-center gap-3 mb-6 pb-4 border-gray-100">
|
||
<div className="bg-[#1A2332]/5 p-2 rounded-lg text-[#1A2332]">
|
||
<CreditCard size={20} />
|
||
</div>
|
||
<h2 className="text-base md:text-lg font-bold text-[#1A2332]">روش پرداخت</h2>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
{methods.map((method) => (
|
||
<label
|
||
key={method.id}
|
||
className={`flex items-center justify-between p-4 rounded-xl border cursor-pointer transition-all
|
||
${selectedMethod === method.code
|
||
? 'border-[#ffb900] bg-[#ffb900]/5'
|
||
: 'border-gray-100 hover:border-gray-200'
|
||
}`}
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<div
|
||
className={`w-5 h-5 rounded-full border flex items-center justify-center
|
||
${selectedMethod === method.code ? 'border-[#ffb900]' : 'border-gray-300'}
|
||
`}
|
||
>
|
||
{selectedMethod === method.code && (
|
||
<div className="w-2.5 h-2.5 bg-[#ffb900] rounded-full" />
|
||
)}
|
||
</div>
|
||
|
||
<div>
|
||
<div className="font-bold text-[#1A2332]">{method.title}</div>
|
||
<div className="text-xs text-gray-500 mt-1">{method.description}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<input
|
||
type="radio"
|
||
className="hidden"
|
||
name="paymentMethod"
|
||
value={method.code}
|
||
checked={selectedMethod === method.code}
|
||
onChange={() => setSelectedMethod(method.code)}
|
||
/>
|
||
</label>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|