change radio section payment

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

@@ -1,8 +1,9 @@
 'use client';
 
 import { Card, Icon, Wallet2 } from 'iconsax-react';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { useGetPaymentMethod, useSetPaymentMethod } from '../../hooks/useOrderData';
 import { useCheckoutStore } from '../../store/Store';
 
@@ -30,11 +31,11 @@ export const PaymentSection = ({ paymentType, onPaymentTypeChange }: PaymentSect
     const { mutate: setPaymentMethod } = useSetPaymentMethod();
     const { setIsSelectedPayment } = useCheckoutStore();
 
-    const getPaymentMethodTranslation = (method: string, fallbackTitle: string) => {
+    const getPaymentMethodTranslation = useCallback((method: string, fallbackTitle: string) => {
         const translationKey = `paymentMethod.${method}`;
         const translation = tOrders(translationKey);
         return translation !== translationKey ? translation : fallbackTitle;
-    };
+    }, [tOrders]);
 
     const paymentOptions = useMemo(() => {
         if (!paymentMethod?.data) return [];
@@ -47,41 +48,39 @@ export const PaymentSection = ({ paymentType, onPaymentTypeChange }: PaymentSect
                 label: getPaymentMethodTranslation(item.method, item.title),
                 icon: getIconByMethod(item.method, item.gateway),
             }));
-    }, [paymentMethod, tOrders]);
+    }, [paymentMethod, getPaymentMethodTranslation]);
 
     return (
         <section className="bg-container rounded-container box-shadow-normal p-4">
             <div className="py-3">
                 <h3 className="text-sm2 font-medium leading-5">{tOrderDetail("SectionPayment.Title")}</h3>
 
-                <div className='flex flex-col gap-5 mt-6'>
+                <RadioGroup
+                    value={paymentType}
+                    onValueChange={(value) => {
+                        onPaymentTypeChange(value);
+                        setPaymentMethod(value, {
+                            onSuccess: () => {
+                                setIsSelectedPayment(true);
+                            },
+                        });
+                    }}
+                    className='flex flex-col gap-6 mt-6'
+                >
                     {paymentOptions.map(({ id, label, icon: Icon }) => (
-                        <div key={id} className='flex items-center'>
-                            <label className='flex items-center gap-2 w-full' htmlFor={`paymentMethod${id}`}>
+                        <div key={id} className='flex items-center justify-between'>
+                            <RadioGroupItem value={id} id={`paymentMethod${id}`} />
+                            <label className='flex items-center gap-2 cursor-pointer' htmlFor={`paymentMethod${id}`}>
+                                <span className='text-xs mt-0.5'>{label}</span>
                                 <Icon
                                     size={16}
                                     color='currentColor'
                                     className='mr-2'
                                 />
-                                <span className='text-xs mt-0.5'>{label}</span>
                             </label>
-                            <input
-                                checked={paymentType === id}
-                                onChange={() => {
-                                    onPaymentTypeChange(id);
-                                    setPaymentMethod(id, {
-                                        onSuccess: () => {
-                                            setIsSelectedPayment(true);
-                                        },
-                                    });
-                                }}
-                                type='radio'
-                                name='paymentMethod'
-                                id={`paymentMethod${id}`}
-                                className='size-4 accent-primary' />
                         </div>
                     ))}
-                </div>
+                </RadioGroup>
             </div>
         </section>
     );

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

@@ -69,20 +69,13 @@ export const SummarySection = ({ cartModal, onToggleCartModal, deliveryType }: S
 
         createOrder(undefined, {
             onSuccess: (data) => {
-                confirmOrder(data?.data?.order?.id, {
-                    onSuccess: (payment) => {
-                        if (payment?.data?.paymentUrl) {
-                            window.location.href = payment?.data?.paymentUrl;
-                            toast('در حال ریدایرکت به صفحه پرداخت...', 'success');
-                        } else {
-                            window.location.href = `/${name}/verify/${data?.data?.order?.id}`;
-                            toast('سفارش با موفقیت ثبت شد', 'success');
-                        }
-                    },
-                    onError: (error) => {
-                        toast(extractErrorMessage(error), 'error');
-                    }
-                });
+                if (data?.data?.paymentUrl) {
+                    window.location.href = data?.data?.paymentUrl;
+                    toast('در حال ریدایرکت به صفحه پرداخت...', 'success');
+                } else {
+                    window.location.href = `/${name}/verify/${data?.data?.order?.id}`;
+                    toast('سفارش با موفقیت ثبت شد', 'success');
+                }
             },
             onError: (error) => {
                 toast(extractErrorMessage(error), 'error');