change design in norder

src/components/RadioGroup.tsx

@@ -13,7 +13,7 @@ type Props = {
 
 const RadioGroup: FC<Props> = (props: Props) => {
     return (
-        <div className='flex gap-5 items-center text-xs'>
+        <div className='flex flex-wrap gap-5 items-center text-xs'>
             {
                 props.items.map((item, index) => (
                     <div key={index} className='flex gap-2 items-center'>

src/pages/orders/components/CreateOrderDeliverySection.tsx

@@ -2,6 +2,7 @@ import { type FC, useState } from 'react'
 import type { FormikProps } from 'formik'
 import { useTranslation } from 'react-i18next'
 import Input from '@/components/Input'
+import RadioGroup from '@/components/RadioGroup'
 import Textarea from '@/components/Textarea'
 import DefaulModal from '@/components/DefaulModal'
 import LocationInput from '@/pages/settings/components/LocationInput'
@@ -68,37 +69,20 @@ const CreateOrderDeliverySection: FC<CreateOrderDeliverySectionProps> = ({
 
                 <div className='mt-6'>
                     <div className='text-sm mb-3'>روش تحویل</div>
-                    <div className='grid grid-cols-1 sm:grid-cols-2 gap-3'>
+                    <RadioGroup
-                        {deliveryMethods.map((method) => {
+                        items={deliveryMethods.map((method) => ({
-                            const isSelected = formik.values.deliveryMethodId === method.id
+                            label:
-                            return (
+                                method.deliveryFee > 0
-                                <button
+                                    ? `${getDeliveryLabel(method.method)} (${formatPrice(method.deliveryFee)})`
-                                    key={method.id}
+                                    : getDeliveryLabel(method.method),
-                                    type='button'
+                            value: method.id,
-                                    onClick={() => formik.setFieldValue('deliveryMethodId', method.id)}
+                        }))}
-                                    className={`text-right p-4 rounded-xl border transition-colors ${
+                        selected={formik.values.deliveryMethodId}
-                                        isSelected
+                        onChange={(value) => {
-                                            ? 'border-primary bg-primary/5'
+                            formik.setFieldValue('deliveryMethodId', value)
-                                            : 'border-border hover:border-primary/40'
+                            formik.setFieldTouched('deliveryMethodId', true, false)
-                                    }`}
+                        }}
-                                >
+                    />
-                                    <div className='text-sm font-medium'>
-                                        {getDeliveryLabel(method.method)}
-                                    </div>
-                                    {method.description && (
-                                        <div className='text-xs text-description mt-1 line-clamp-2'>
-                                            {method.description}
-                                        </div>
-                                    )}
-                                    {method.deliveryFee > 0 && (
-                                        <div className='text-xs mt-2 text-primary'>
-                                            {formatPrice(method.deliveryFee)}
-                                        </div>
-                                    )}
-                                </button>
-                            )
-                        })}
-                    </div>
                     {formik.touched.deliveryMethodId && formik.errors.deliveryMethodId && (
                         <div className='text-xs text-red-500 mt-2'>
                             {formik.errors.deliveryMethodId}
@@ -108,16 +92,21 @@ const CreateOrderDeliverySection: FC<CreateOrderDeliverySectionProps> = ({
 
                 <div className='mt-8'>
                     <div className='text-sm mb-3'>روش پرداخت</div>
-                    <div className='p-4 rounded-xl border border-primary bg-primary/5'>
+                    {cashPaymentMethod ? (
-                        <div className='text-sm font-medium'>پرداخت نقدی</div>
+                        <RadioGroup
-                        {cashPaymentMethod?.description && (
+                            items={[
-                            <div className='text-xs text-description mt-1'>
+                                {
-                                {cashPaymentMethod.description}
+                                    label: cashPaymentMethod.description
-                            </div>
+                                        ? `پرداخت نقدی (${cashPaymentMethod.description})`
-                        )}
+                                        : 'پرداخت نقدی',
-                    </div>
+                                    value: cashPaymentMethod.id,
-                    {!cashPaymentMethod && (
+                                },
-                        <div className='text-xs text-red-500 mt-2'>
+                            ]}
+                            selected={formik.values.paymentMethodId}
+                            onChange={(value) => formik.setFieldValue('paymentMethodId', value)}
+                        />
+                    ) : (
+                        <div className='text-xs text-red-500'>
                             روش پرداخت نقدی فعال یافت نشد
                         </div>
                     )}