diff --git a/src/pages/orders/Create.tsx b/src/pages/orders/Create.tsx index 3ddd83f..ec9bc15 100644 --- a/src/pages/orders/Create.tsx +++ b/src/pages/orders/Create.tsx @@ -4,7 +4,6 @@ import Button from '@/components/Button' import { useCreateOrderForm } from './hooks/useCreateOrderForm' import CreateOrderCustomerSection from './components/CreateOrderCustomerSection' import CreateOrderItemsSection from './components/CreateOrderItemsSection' -import CreateOrderDeliverySection from './components/CreateOrderDeliverySection' import CreateOrderSidebar from './components/CreateOrderSidebar' const CreateOrder: FC = () => { @@ -35,8 +34,8 @@ const CreateOrder: FC = () => { } = useCreateOrderForm() return ( -
-
+
+

ثبت سفارش جدید

-
-
- + +
+
+
- + { onSelectManualAddress={selectManualAddress} onAddressFieldChange={handleAddressFieldChange} onLocationSelect={handleLocationSelect} - /> -
- -
-
diff --git a/src/pages/orders/components/CreateOrderCustomerSection.tsx b/src/pages/orders/components/CreateOrderCustomerSection.tsx index 92622da..d6f9049 100644 --- a/src/pages/orders/components/CreateOrderCustomerSection.tsx +++ b/src/pages/orders/components/CreateOrderCustomerSection.tsx @@ -1,8 +1,8 @@ import { type FC, useState } from 'react' -import { SearchNormal, TickCircle, UserAdd } from 'iconsax-react' +import { Profile, SearchNormal, TickCircle, UserAdd } from 'iconsax-react' import type { FormikProps } from 'formik' import { toast } from 'react-toastify' -import Button from '@/components/Button' +import { clx } from '@/helpers/utils' import Input from '@/components/Input' import { useSearchUserByPhone } from '@/pages/customers/hooks/useUsersData' import type { UserWithAddresses } from '@/pages/customers/types/Types' @@ -76,78 +76,134 @@ const CreateOrderCustomerSection: FC = ({ } const isCustomerLocked = searchState !== 'not_found' + const isNameDisabled = searchState === 'idle' + const customerName = [formik.values.firstName, formik.values.lastName] + .filter(Boolean) + .join(' ') + + const phoneError = + formik.touched.userPhone && formik.errors.userPhone + ? formik.errors.userPhone + : '' return ( -
-
اطلاعات مشتری
- -
-
- { - if (e.key === 'Enter') { - e.preventDefault() - handleSearch() - } - }} - error_text={ - formik.touched.userPhone && formik.errors.userPhone - ? formik.errors.userPhone - : '' - } - /> -
- +
+
اطلاعات مشتری
+ {searchState === 'found' && customerName && ( +
+ {customerName} +
+ )} + {searchState === 'not_found' && ( +
+ مشتری جدید +
+ )} +
+
+ + {searchState === 'found' && ( + + مشتری یافت شد + + )} + {searchState === 'idle' && ( + + ابتدا شماره را جستجو کنید + + )}
- {searchState === 'found' && ( -
- - مشتری یافت شد و اطلاعات تکمیل شد +
+
+ +
+ { + if (e.key === 'Enter') { + e.preventDefault() + handleSearch() + } + }} + className={clx( + 'flex-1 min-w-0 h-10 text-xs px-4 border border-border bg-white', + 'rounded-r-xl border-l-0 focus:outline-none', + phoneError && 'border-red-400', + )} + /> + +
+ {phoneError && ( +

{phoneError}

+ )}
- )} - {searchState === 'not_found' && ( -
- - مشتری یافت نشد. نام و نام خانوادگی را وارد کنید. -
- )} - -
+ = ({ } />
- - {searchState === 'idle' && ( -
- ابتدا با شماره تلفن مشتری را جستجو کنید. -
- )}
) } diff --git a/src/pages/orders/components/CreateOrderDeliveryModal.tsx b/src/pages/orders/components/CreateOrderDeliveryModal.tsx new file mode 100644 index 0000000..9d7d352 --- /dev/null +++ b/src/pages/orders/components/CreateOrderDeliveryModal.tsx @@ -0,0 +1,335 @@ +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 + 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) => void + onLocationSelect: (lat: number, lng: number) => void +} + +const CreateOrderDeliveryModal: FC = ({ + 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 ( + <> + +
+
+
روش تحویل
+ ({ + 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 && ( +
+ {formik.errors.deliveryMethodId} +
+ )} +
+ +
+
روش پرداخت
+ {cashPaymentMethod ? ( + formik.setFieldValue('paymentMethodId', value)} + /> + ) : ( +
+ روش پرداخت نقدی فعال یافت نشد +
+ )} +
+ + {isDineIn && ( +
+ +
+ )} + + {isCourierDelivery && ( +
+
آدرس تحویل
+ + {customerAddresses.length > 0 && ( + + )} + + {hasAddress ? ( +
+ +
+ {formik.values.userAddress.address} +
+ +
+ ) : ( + + )} +
+ )} + + {isCarDelivery && ( +
+
اطلاعات خودرو
+
+ + + + +
+
+ )} + +
+