hamid zarghami
336 lines
15 KiB
TypeScript
336 lines
15 KiB
TypeScript
import { type FC, useState } from 'react'
|
||
import type { FormikProps } from 'formik'
|
||
import { Edit2, Location } from 'iconsax-react'
|
||
import { useTranslation } from 'react-i18next'
|
||
import Button from '@/components/Button'
|
||
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'
|
||
import LocationPicker from '@/pages/settings/components/LocationPicker'
|
||
import { formatPrice } from '@/helpers/func'
|
||
import type { CreateOrderFormValues } from '../hooks/useCreateOrderForm'
|
||
import type { RestaurantPaymentMethod, RestaurantShipmentMethod } from '../hooks/useCreateOrderForm'
|
||
import type { UserSavedAddress } from '@/pages/customers/types/Types'
|
||
import CreateOrderAddressSelector from './CreateOrderAddressSelector'
|
||
|
||
interface CreateOrderDeliveryModalProps {
|
||
open: boolean
|
||
onClose: () => void
|
||
formik: FormikProps<CreateOrderFormValues>
|
||
deliveryMethods: RestaurantShipmentMethod[]
|
||
cashPaymentMethod?: RestaurantPaymentMethod
|
||
isCourierDelivery: boolean
|
||
isCarDelivery: boolean
|
||
isDineIn: boolean
|
||
customerAddresses: UserSavedAddress[]
|
||
selectedAddressId: string | null
|
||
onSelectSavedAddress: (address: UserSavedAddress) => void
|
||
onSelectManualAddress: () => void
|
||
onAddressFieldChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
|
||
onLocationSelect: (lat: number, lng: number) => void
|
||
}
|
||
|
||
const CreateOrderDeliveryModal: FC<CreateOrderDeliveryModalProps> = ({
|
||
open,
|
||
onClose,
|
||
formik,
|
||
deliveryMethods,
|
||
cashPaymentMethod,
|
||
isCourierDelivery,
|
||
isCarDelivery,
|
||
isDineIn,
|
||
customerAddresses,
|
||
selectedAddressId,
|
||
onSelectSavedAddress,
|
||
onSelectManualAddress,
|
||
onAddressFieldChange,
|
||
onLocationSelect,
|
||
}) => {
|
||
const { t } = useTranslation('global')
|
||
const [isAddressModalOpen, setIsAddressModalOpen] = useState(false)
|
||
const [isLocationModalOpen, setIsLocationModalOpen] = useState(false)
|
||
|
||
const getDeliveryLabel = (method: string) => {
|
||
return t(`shipment.${method}`, { defaultValue: method })
|
||
}
|
||
|
||
const isAddressReadOnly =
|
||
selectedAddressId !== null && customerAddresses.length > 0
|
||
|
||
const handleMapLocationSelect = (lat: number, lng: number) => {
|
||
onLocationSelect(lat, lng)
|
||
setIsLocationModalOpen(false)
|
||
}
|
||
|
||
const latitude = formik.values.userAddress.latitude
|
||
const longitude = formik.values.userAddress.longitude
|
||
const hasAddress = Boolean(formik.values.userAddress.address?.trim())
|
||
|
||
const handleConfirm = () => {
|
||
formik.setFieldTouched('deliveryMethodId', true, false)
|
||
onClose()
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<DefaulModal
|
||
open={open}
|
||
close={onClose}
|
||
isHeader={true}
|
||
title_header='تحویل و پرداخت'
|
||
width={560}
|
||
>
|
||
<div className='p-1 max-h-[70vh] overflow-y-auto'>
|
||
<div>
|
||
<div className='text-sm mb-3'>روش تحویل</div>
|
||
<RadioGroup
|
||
items={deliveryMethods.map((method) => ({
|
||
label:
|
||
method.deliveryFee > 0
|
||
? `${getDeliveryLabel(method.method)} (${formatPrice(method.deliveryFee)})`
|
||
: getDeliveryLabel(method.method),
|
||
value: method.id,
|
||
}))}
|
||
selected={formik.values.deliveryMethodId}
|
||
onChange={(value) => {
|
||
formik.setFieldValue('deliveryMethodId', value)
|
||
formik.setFieldTouched('deliveryMethodId', true, false)
|
||
}}
|
||
/>
|
||
{formik.touched.deliveryMethodId && formik.errors.deliveryMethodId && (
|
||
<div className='text-xs text-red-500 mt-2'>
|
||
{formik.errors.deliveryMethodId}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className='mt-6'>
|
||
<div className='text-sm mb-3'>روش پرداخت</div>
|
||
{cashPaymentMethod ? (
|
||
<RadioGroup
|
||
items={[
|
||
{
|
||
label: cashPaymentMethod.description
|
||
? `پرداخت نقدی (${cashPaymentMethod.description})`
|
||
: 'پرداخت نقدی',
|
||
value: cashPaymentMethod.id,
|
||
},
|
||
]}
|
||
selected={formik.values.paymentMethodId}
|
||
onChange={(value) => formik.setFieldValue('paymentMethodId', value)}
|
||
/>
|
||
) : (
|
||
<div className='text-xs text-red-500'>
|
||
روش پرداخت نقدی فعال یافت نشد
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{isDineIn && (
|
||
<div className='mt-6'>
|
||
<Input
|
||
label='شماره میز'
|
||
name='tableNumber'
|
||
placeholder='مثال: ۱۲'
|
||
value={formik.values.tableNumber}
|
||
onChange={formik.handleChange}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{isCourierDelivery && (
|
||
<div className='mt-6 pt-5 border-t border-border border-dashed'>
|
||
<div className='text-sm mb-3'>آدرس تحویل</div>
|
||
|
||
{customerAddresses.length > 0 && (
|
||
<CreateOrderAddressSelector
|
||
addresses={customerAddresses}
|
||
selectedAddressId={selectedAddressId}
|
||
onSelectAddress={onSelectSavedAddress}
|
||
onSelectManual={onSelectManualAddress}
|
||
/>
|
||
)}
|
||
|
||
{hasAddress ? (
|
||
<div className='flex items-start gap-2 p-3 bg-[#F8F9FC] rounded-xl'>
|
||
<Location size={16} color='#8C90A3' className='flex-shrink-0 mt-0.5' />
|
||
<div className='flex-1 min-w-0 text-xs'>
|
||
{formik.values.userAddress.address}
|
||
</div>
|
||
<button
|
||
type='button'
|
||
onClick={() => setIsAddressModalOpen(true)}
|
||
className='flex-shrink-0'
|
||
>
|
||
<Edit2 size={16} color='#000' />
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<Button
|
||
type='button'
|
||
className='w-full'
|
||
onClick={() => setIsAddressModalOpen(true)}
|
||
>
|
||
ثبت آدرس تحویل
|
||
</Button>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{isCarDelivery && (
|
||
<div className='mt-6 pt-5 border-t border-border border-dashed'>
|
||
<div className='text-sm mb-3'>اطلاعات خودرو</div>
|
||
<div className='grid grid-cols-2 gap-4'>
|
||
<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='mt-6'>
|
||
<Textarea
|
||
label='توضیحات سفارش'
|
||
name='description'
|
||
placeholder='توضیحات اضافی...'
|
||
value={formik.values.description}
|
||
onChange={formik.handleChange}
|
||
isNotRequired
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-6 flex justify-end gap-3 sticky bottom-0 bg-white pt-3'>
|
||
<button
|
||
type='button'
|
||
onClick={onClose}
|
||
className='h-10 px-6 rounded-xl border border-border text-sm hover:bg-[#F8F9FC] transition-colors'
|
||
>
|
||
انصراف
|
||
</button>
|
||
<Button type='button' className='w-fit px-6' onClick={handleConfirm}>
|
||
تأیید
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</DefaulModal>
|
||
|
||
<DefaulModal
|
||
open={isAddressModalOpen}
|
||
close={() => setIsAddressModalOpen(false)}
|
||
isHeader={true}
|
||
title_header='آدرس تحویل'
|
||
width={600}
|
||
>
|
||
<div className='p-2'>
|
||
<CreateOrderAddressSelector
|
||
addresses={customerAddresses}
|
||
selectedAddressId={selectedAddressId}
|
||
onSelectAddress={onSelectSavedAddress}
|
||
onSelectManual={onSelectManualAddress}
|
||
/>
|
||
|
||
<div className='grid grid-cols-2 gap-3 mt-4'>
|
||
<Input
|
||
label='عنوان آدرس'
|
||
name='userAddress.title'
|
||
placeholder='مثال: منزل'
|
||
value={formik.values.userAddress.title}
|
||
onChange={onAddressFieldChange}
|
||
readOnly={isAddressReadOnly}
|
||
/>
|
||
<Input
|
||
label='شماره تماس'
|
||
name='userAddress.phone'
|
||
value={formik.values.userAddress.phone}
|
||
onChange={onAddressFieldChange}
|
||
readOnly={isAddressReadOnly}
|
||
/>
|
||
<Input
|
||
label='کد پستی'
|
||
name='userAddress.postalCode'
|
||
value={formik.values.userAddress.postalCode}
|
||
onChange={onAddressFieldChange}
|
||
readOnly={isAddressReadOnly}
|
||
isNotRequired
|
||
/>
|
||
</div>
|
||
|
||
<div className={isAddressReadOnly ? 'pointer-events-none opacity-60' : ''}>
|
||
<LocationInput
|
||
label='موقعیت روی نقشه'
|
||
latitude={latitude || undefined}
|
||
longitude={longitude || undefined}
|
||
onClick={() => setIsLocationModalOpen(true)}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-4'>
|
||
<Textarea
|
||
label='آدرس کامل'
|
||
name='userAddress.address'
|
||
value={formik.values.userAddress.address}
|
||
onChange={onAddressFieldChange}
|
||
readOnly={isAddressReadOnly}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-4 flex justify-end'>
|
||
<Button
|
||
type='button'
|
||
className='w-fit px-6'
|
||
onClick={() => setIsAddressModalOpen(false)}
|
||
>
|
||
تأیید
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</DefaulModal>
|
||
|
||
<DefaulModal
|
||
open={isLocationModalOpen}
|
||
close={() => setIsLocationModalOpen(false)}
|
||
isHeader={true}
|
||
title_header='انتخاب موقعیت روی نقشه'
|
||
width={800}
|
||
>
|
||
<div className='p-4'>
|
||
<LocationPicker
|
||
initialPosition={
|
||
latitude && longitude ? [latitude, longitude] : undefined
|
||
}
|
||
onLocationSelect={handleMapLocationSelect}
|
||
/>
|
||
<div className='mt-4 text-xs text-gray-600 text-center'>
|
||
روی نقشه کلیک کنید تا موقعیت را انتخاب کنید
|
||
</div>
|
||
</div>
|
||
</DefaulModal>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default CreateOrderDeliveryModal
|