payment section

src/app/[name]/(Dialogs)/order/checkout/[id]/components/PaymentSection.tsx

@@ -1,20 +1,43 @@
 'use client';
 
 import { Card, Icon, Wallet2 } from 'iconsax-react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useGetPaymentMethod } from '../../hooks/useOrderData';
 
 type PaymentSectionProps = {
     paymentType: string;
     onPaymentTypeChange: (id: string) => void;
 };
 
-export const PaymentSection = ({ paymentType, onPaymentTypeChange }: PaymentSectionProps) => {
-    const { t } = useTranslation('parallels', { keyPrefix: 'OrderDetail' });
+const getIconByKeyName = (keyName: string, isOnline: boolean): Icon => {
+    const normalizedKeyName = keyName.toLowerCase();
+    if (normalizedKeyName.includes('online') || normalizedKeyName.includes('card') || isOnline) {
+        return Card;
+    }
+    if (normalizedKeyName.includes('cash') || normalizedKeyName.includes('delivery')) {
+        return Wallet2;
+    }
+    return Card;
+};
 
-    const paymentOptions: Array<{ id: string, label: string, icon: Icon }> = [
-        { id: '0', label: t("SectionPayment.InputPaymentType.Options.Online"), icon: Card },
-        { id: '1', label: t("SectionPayment.InputPaymentType.Options.CashOnDelivery"), icon: Wallet2 },
-    ];
+export const PaymentSection = ({ paymentType, onPaymentTypeChange }: PaymentSectionProps) => {
+
+    const { t } = useTranslation('parallels', { keyPrefix: 'OrderDetail' });
+    const { data: paymentMethod } = useGetPaymentMethod();
+
+    const paymentOptions = useMemo(() => {
+        if (!paymentMethod?.data) return [];
+
+        return paymentMethod.data
+            .filter(item => item.isActive && item.paymentMethod.isActive)
+            .sort((a, b) => a.paymentMethod.order - b.paymentMethod.order)
+            .map(item => ({
+                id: item.paymentMethod.id,
+                label: item.paymentMethod.name,
+                icon: getIconByKeyName(item.paymentMethod.keyName, item.paymentMethod.isOnline),
+            }));
+    }, [paymentMethod]);
 
     return (
         <section className="bg-container rounded-container box-shadow-normal p-4">