base create order
This commit is contained in:
hamid zarghami
@@ -0,0 +1,223 @@
|
||||
import { type FC } from 'react'
|
||||
import type { FormikProps } from 'formik'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Input from '@/components/Input'
|
||||
import Textarea from '@/components/Textarea'
|
||||
import { formatPrice } from '@/helpers/func'
|
||||
import type { CreateOrderFormValues } from '../hooks/useCreateOrderForm'
|
||||
import type { RestaurantPaymentMethod, RestaurantShipmentMethod } from '../hooks/useCreateOrderForm'
|
||||
|
||||
interface CreateOrderDeliverySectionProps {
|
||||
formik: FormikProps<CreateOrderFormValues>
|
||||
deliveryMethods: RestaurantShipmentMethod[]
|
||||
cashPaymentMethod?: RestaurantPaymentMethod
|
||||
isCourierDelivery: boolean
|
||||
isCarDelivery: boolean
|
||||
isDineIn: boolean
|
||||
}
|
||||
|
||||
const CreateOrderDeliverySection: FC<CreateOrderDeliverySectionProps> = ({
|
||||
formik,
|
||||
deliveryMethods,
|
||||
cashPaymentMethod,
|
||||
isCourierDelivery,
|
||||
isCarDelivery,
|
||||
isDineIn,
|
||||
}) => {
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
const getDeliveryLabel = (method: string) => {
|
||||
return t(`shipment.${method}`, {
|
||||
defaultValue: method,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='w-full bg-white rounded-4xl p-8'>
|
||||
<div className='text-lg font-light'>تحویل و پرداخت</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<div className='text-sm mb-3'>روش تحویل</div>
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 gap-3'>
|
||||
{deliveryMethods.map((method) => {
|
||||
const isSelected = formik.values.deliveryMethodId === method.id
|
||||
return (
|
||||
<button
|
||||
key={method.id}
|
||||
type='button'
|
||||
onClick={() => formik.setFieldValue('deliveryMethodId', method.id)}
|
||||
className={`text-right p-4 rounded-xl border transition-colors ${
|
||||
isSelected
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border hover:border-primary/40'
|
||||
}`}
|
||||
>
|
||||
<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}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<div className='text-sm mb-3'>روش پرداخت</div>
|
||||
<div className='p-4 rounded-xl border border-primary bg-primary/5'>
|
||||
<div className='text-sm font-medium'>پرداخت نقدی</div>
|
||||
{cashPaymentMethod?.description && (
|
||||
<div className='text-xs text-description mt-1'>
|
||||
{cashPaymentMethod.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{!cashPaymentMethod && (
|
||||
<div className='text-xs text-red-500 mt-2'>
|
||||
روش پرداخت نقدی فعال یافت نشد
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(isDineIn || isCarDelivery) && (
|
||||
<div className='mt-8'>
|
||||
<Input
|
||||
label='شماره میز'
|
||||
name='tableNumber'
|
||||
placeholder='مثال: ۱۲'
|
||||
value={formik.values.tableNumber}
|
||||
onChange={formik.handleChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isCourierDelivery && (
|
||||
<div className='w-full bg-white rounded-4xl p-8 mt-8'>
|
||||
<div className='text-lg font-light'>آدرس تحویل</div>
|
||||
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6'>
|
||||
<Input
|
||||
label='نام گیرنده'
|
||||
name='userAddress.fullName'
|
||||
value={formik.values.userAddress.fullName}
|
||||
onChange={formik.handleChange}
|
||||
/>
|
||||
<Input
|
||||
label='شماره تماس گیرنده'
|
||||
name='userAddress.phone'
|
||||
value={formik.values.userAddress.phone}
|
||||
onChange={formik.handleChange}
|
||||
/>
|
||||
<Input
|
||||
label='استان'
|
||||
name='userAddress.province'
|
||||
value={formik.values.userAddress.province}
|
||||
onChange={formik.handleChange}
|
||||
/>
|
||||
<Input
|
||||
label='شهر'
|
||||
name='userAddress.city'
|
||||
value={formik.values.userAddress.city}
|
||||
onChange={formik.handleChange}
|
||||
/>
|
||||
<Input
|
||||
label='کد پستی'
|
||||
name='userAddress.postalCode'
|
||||
value={formik.values.userAddress.postalCode}
|
||||
onChange={formik.handleChange}
|
||||
/>
|
||||
<Input
|
||||
label='عرض جغرافیایی'
|
||||
type='number'
|
||||
name='userAddress.latitude'
|
||||
value={formik.values.userAddress.latitude || ''}
|
||||
onChange={formik.handleChange}
|
||||
isNotRequired
|
||||
/>
|
||||
<Input
|
||||
label='طول جغرافیایی'
|
||||
type='number'
|
||||
name='userAddress.longitude'
|
||||
value={formik.values.userAddress.longitude || ''}
|
||||
onChange={formik.handleChange}
|
||||
isNotRequired
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<Textarea
|
||||
label='آدرس کامل'
|
||||
name='userAddress.address'
|
||||
value={formik.values.userAddress.address}
|
||||
onChange={formik.handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isCarDelivery && (
|
||||
<div className='w-full bg-white rounded-4xl p-8 mt-8'>
|
||||
<div className='text-lg font-light'>اطلاعات خودرو</div>
|
||||
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6'>
|
||||
<Input
|
||||
label='مدل خودرو'
|
||||
name='carAddress.carModel'
|
||||
value={formik.values.carAddress.carModel}
|
||||
onChange={formik.handleChange}
|
||||
/>
|
||||
<Input
|
||||
label='رنگ خودرو'
|
||||
name='carAddress.carColor'
|
||||
value={formik.values.carAddress.carColor}
|
||||
onChange={formik.handleChange}
|
||||
/>
|
||||
<Input
|
||||
label='پلاک'
|
||||
name='carAddress.plateNumber'
|
||||
value={formik.values.carAddress.plateNumber}
|
||||
onChange={formik.handleChange}
|
||||
/>
|
||||
<Input
|
||||
label='شماره تماس'
|
||||
name='carAddress.phone'
|
||||
value={formik.values.carAddress.phone}
|
||||
onChange={formik.handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='w-full bg-white rounded-4xl p-8 mt-8'>
|
||||
<div className='text-lg font-light'>توضیحات سفارش</div>
|
||||
<div className='mt-6'>
|
||||
<Textarea
|
||||
label='توضیحات'
|
||||
name='description'
|
||||
placeholder='توضیحات اضافی برای سفارش...'
|
||||
value={formik.values.description}
|
||||
onChange={formik.handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateOrderDeliverySection
|
||||
Reference in New Issue
Block a user