feat: update payment gateway selection to use active gateways from backend config

components/appointment/paying/index.js

@@ -7,13 +7,9 @@ import { request } from "@/services/response";
 
 const PAYMENT_TTL = 900;
 
-const banks = [
-  { id: "mellat", title: "بانک ملت" },
-  { id: "sep", title: "سامان (سپ)" },
-];
-
 function Paying({ setStep, appointmentId, expiresAt, doctor, data, isForAnother, selectedSlot }) {
-  const [selectedBank, setSelectedBank] = useState("mellat");
+  const [selectedBank, setSelectedBank] = useState("");
+  const [gateways, setGateways] = useState([]);
   const [loading, setLoading] = useState(false);
   const [testMode, setTestMode] = useState(null);
   const [feeRials, setFeeRials] = useState(null);
@@ -33,10 +29,13 @@ function Paying({ setStep, appointmentId, expiresAt, doctor, data, isForAnother,
     request
       .getPaymentConfig()
       .then((res) => {
+        const gws = Array.isArray(res?.data?.gateways) ? res.data.gateways : [];
         setTestMode(Boolean(res?.data?.test_mode));
         setFeeRials(Number(res?.data?.appointment_fee_rials) || 0);
+        setGateways(gws);
+        setSelectedBank(gws[0]?.name ?? "");
       })
-      .catch(() => { setTestMode(false); setFeeRials(0); });
+      .catch(() => { setTestMode(false); setFeeRials(0); setGateways([]); });
   }, []);
 
   const formatTime = (seconds) => {
@@ -54,6 +53,7 @@ function Paying({ setStep, appointmentId, expiresAt, doctor, data, isForAnother,
 
   const handlePayment = async () => {
     if (!appointmentId) return;
+    if (!testMode && !selectedBank) return;
     setLoading(true);
     try {
       const res = await request.postAppointmentPayment({
@@ -61,9 +61,10 @@ function Paying({ setStep, appointmentId, expiresAt, doctor, data, isForAnother,
         gateway: testMode ? "mellat" : selectedBank,
         frontend_address: `${window.location.origin}/payment/result`,
       });
-      const redirectUrl = res?.data?.redirect_url;
-      if (redirectUrl) {
-        window.location.href = redirectUrl;
+      // به بک‌اند می‌رویم؛ آنجا صلاحیت تأیید و به درگاه بانک منتقل می‌شود.
+      const payUrl = res?.data?.pay_url || res?.data?.redirect_url;
+      if (payUrl) {
+        window.location.href = payUrl;
       } else {
         setStep((prev) => prev + 1);
       }
@@ -155,6 +156,12 @@ function Paying({ setStep, appointmentId, expiresAt, doctor, data, isForAnother,
                   </p>
                 </div>
               </div>
+            ) : gateways.length === 0 ? (
+              <div className="rounded-[10px] border border-[#F3C0C1] bg-[#FDEEEE] p-[14px]">
+                <p className="text-[#E0383B] text-[14px] font-medium">
+                  درگاه پرداخت فعالی موجود نیست. لطفاً بعداً تلاش کنید.
+                </p>
+              </div>
             ) : (
               <FormControl fullWidth>
                 <InputLabel id="bank-select-label">انتخاب درگاه پرداخت</InputLabel>
@@ -164,9 +171,9 @@ function Paying({ setStep, appointmentId, expiresAt, doctor, data, isForAnother,
                   label="انتخاب درگاه پرداخت"
                   onChange={(e) => setSelectedBank(e.target.value)}
                 >
-                  {banks.map((bank) => (
-                    <MenuItem key={bank.id} value={bank.id}>
-                      {bank.title}
+                  {gateways.map((g) => (
+                    <MenuItem key={g.name} value={g.name}>
+                      {g.label}
                     </MenuItem>
                   ))}
                 </Select>
@@ -198,7 +205,10 @@ function Paying({ setStep, appointmentId, expiresAt, doctor, data, isForAnother,
                 className="!flex !w-full md:!w-fit !mr-auto !gap-[6px] !px-[16px] !py-[10px] !min-w-[180px]"
                 onClick={handlePayment}
                 variant="contained"
-                disabled={loading || testMode === null || feeRials === null}
+                disabled={
+                  loading || testMode === null || feeRials === null ||
+                  (!testMode && !selectedBank)
+                }
               >
                 <span className={`text-[#FFF] text-[16px] font-medium ${loading ? "opacity-0" : ""}`}>
                   {testMode ? "پرداخت آزمایشی" : `پرداخت ${rials} ریال`}