Compare commits
7 Commits
3c6d3f009a
...
2d35a428b1
| Author | SHA1 | Date | |
|---|---|---|---|
 hamid zarghami
|
2d35a428b1 | ||
|
hamid zarghami
|
aac1a4f81b | ||
|
hamid zarghami
|
282e001933 | ||
|
hamid zarghami
|
8ec3f307b0 | ||
|
hamid zarghami
|
4c240ac9a1 | ||
|
hamid zarghami
|
d52ff4f07e | ||
|
hamid zarghami
|
c7b4e77421 |
@@ -95,6 +95,11 @@ const OrderDetails: FC = () => {
|
||||
const isOrderPaid = order.status === OrderStatus.PAID
|
||||
const isPreparing = order.status === OrderStatus.PREPARING
|
||||
const isCanceled = order.status === OrderStatus.CANCELED
|
||||
const canCompleteOrder = [
|
||||
OrderStatus.DELIVERED_TO_WAITER,
|
||||
OrderStatus.DELIVERED_TO_RECEPTIONIST,
|
||||
OrderStatus.SHIPPED,
|
||||
].includes(order.status as OrderStatus)
|
||||
// بررسی وضعیت پرداخت از payments array یا paymentStatus
|
||||
// ابتدا از paymentStatus استفاده میکنیم، اگر نبود از اولین payment در payments array استفاده میکنیم
|
||||
const paymentStatus = order.paymentStatus || order.payments?.[0]?.status
|
||||
@@ -104,7 +109,11 @@ const OrderDetails: FC = () => {
|
||||
const isDineInOrCarDelivery = order.deliveryMethod?.method === DeliveryMethodEnum.DineIn || order.deliveryMethod?.method === DeliveryMethodEnum.DeliveryCar
|
||||
const isCustomerPickup = order.deliveryMethod?.method === DeliveryMethodEnum.CustomerPickup
|
||||
|
||||
const showVerifyPaymentBox = (isCashPayment || isCreditCardPayment) && isPaymentPending && !isCanceled
|
||||
const payment = order.payments?.[0]
|
||||
const hasPaymentDescription = Boolean(payment?.description)
|
||||
const hasPaymentAttachments = Boolean(payment?.attachments && payment.attachments.length > 0)
|
||||
const showPaymentReceiptBox = isCreditCardPayment && (hasPaymentDescription || hasPaymentAttachments)
|
||||
const showVerifyPaymentButton = (isCashPayment || isCreditCardPayment) && isPaymentPending && !isCanceled
|
||||
|
||||
// نمایش دکمه ارسال به آشپزخانه
|
||||
// برای pendingPayment با پرداخت نقدی یا برای paid
|
||||
@@ -185,6 +194,20 @@ const OrderDetails: FC = () => {
|
||||
setShowCancelModal(false)
|
||||
}
|
||||
|
||||
const handleCompleteOrder = () => {
|
||||
changeOrderStatus(
|
||||
{
|
||||
orderId: order.id,
|
||||
status: OrderStatus.COMPLETED,
|
||||
},
|
||||
{
|
||||
onError: (error) => {
|
||||
toast.error(extractErrorMessage(error))
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const handleRefund = (text?: string) => {
|
||||
if (!text) return
|
||||
refundPayment({
|
||||
@@ -232,11 +255,12 @@ const OrderDetails: FC = () => {
|
||||
getPaymentStatusTextColor={getPaymentStatusTextColor}
|
||||
getPaymentStatusText={getPaymentStatusText}
|
||||
/>
|
||||
{showVerifyPaymentBox && (
|
||||
{showPaymentReceiptBox && (
|
||||
<PaymentVerificationBox
|
||||
order={order}
|
||||
isVerifyingPayment={isVerifyingPayment}
|
||||
onVerifyPayment={handleVerifyPayment}
|
||||
showVerifyButton={showVerifyPaymentButton}
|
||||
/>
|
||||
)}
|
||||
<OrderActions
|
||||
@@ -248,11 +272,13 @@ const OrderDetails: FC = () => {
|
||||
isDineInOrCarDelivery={isDineInOrCarDelivery}
|
||||
isCustomerPickup={isCustomerPickup}
|
||||
isCanceled={isCanceled}
|
||||
canCompleteOrder={canCompleteOrder}
|
||||
isChangingStatus={isChangingStatus}
|
||||
onSendToKitchen={handleSendToKitchen}
|
||||
onDeliverToCourier={handleDeliverToCourier}
|
||||
onDeliverToWaiter={handleDeliverToWaiter}
|
||||
onDeliverToReceptionist={handleDeliverToReceptionist}
|
||||
onCompleteOrder={handleCompleteOrder}
|
||||
onCancelOrder={() => setShowCancelModal(true)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,8 @@ import { Profile, SearchNormal, TickCircle, UserAdd } from 'iconsax-react'
|
||||
import type { FormikProps } from 'formik'
|
||||
import { toast } from 'react-toastify'
|
||||
import { clx } from '@/helpers/utils'
|
||||
import Button from '@/components/Button'
|
||||
import DefaulModal from '@/components/DefaulModal'
|
||||
import Input from '@/components/Input'
|
||||
import { useSearchUserByPhone } from '@/pages/customers/hooks/useUsersData'
|
||||
import type { UserWithAddresses } from '@/pages/customers/types/Types'
|
||||
@@ -28,6 +30,7 @@ const CreateOrderCustomerSection: FC<CreateOrderCustomerSectionProps> = ({
|
||||
}) => {
|
||||
const { mutate: searchUser, isPending: isSearching } = useSearchUserByPhone()
|
||||
const [searchState, setSearchState] = useState<CustomerSearchState>('idle')
|
||||
const [isCustomerModalOpen, setIsCustomerModalOpen] = useState(false)
|
||||
|
||||
const handleSearch = () => {
|
||||
const phone = formik.values.userPhone.trim()
|
||||
@@ -87,131 +90,159 @@ const CreateOrderCustomerSection: FC<CreateOrderCustomerSectionProps> = ({
|
||||
: ''
|
||||
|
||||
return (
|
||||
<div className='w-full bg-white rounded-4xl px-5 py-4 flex-shrink-0'>
|
||||
<div className='flex items-center justify-between gap-3 mb-3'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div
|
||||
className={clx(
|
||||
'w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 transition-colors',
|
||||
searchState === 'found'
|
||||
? 'bg-green-50'
|
||||
: searchState === 'not_found'
|
||||
? 'bg-[#EEF0F7]'
|
||||
: 'bg-[#EEF0F7]',
|
||||
)}
|
||||
>
|
||||
{searchState === 'found' ? (
|
||||
<TickCircle size={18} color='#16A34A' />
|
||||
) : searchState === 'not_found' ? (
|
||||
<UserAdd size={18} color='#8C90A3' />
|
||||
) : (
|
||||
<Profile size={18} color='#8C90A3' />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className='text-sm font-light'>اطلاعات مشتری</div>
|
||||
{searchState === 'found' && customerName && (
|
||||
<div className='text-[11px] text-green-600 mt-0.5'>
|
||||
{customerName}
|
||||
</div>
|
||||
)}
|
||||
{searchState === 'not_found' && (
|
||||
<div className='text-[11px] text-description mt-0.5'>
|
||||
مشتری جدید
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{searchState === 'found' && (
|
||||
<span className='text-[11px] text-green-600 bg-green-50 rounded-full px-3 py-1 flex-shrink-0'>
|
||||
مشتری یافت شد
|
||||
</span>
|
||||
)}
|
||||
{searchState === 'idle' && (
|
||||
<span className='text-[11px] text-description bg-[#F8F9FC] rounded-full px-3 py-1 flex-shrink-0 hidden sm:inline'>
|
||||
ابتدا شماره را جستجو کنید
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-[1.2fr_1fr_1fr] gap-3 xl:items-end'>
|
||||
<div className='w-full'>
|
||||
<label className='text-xs text-description'>شماره تلفن</label>
|
||||
<div className='flex mt-1'>
|
||||
<input
|
||||
name='userPhone'
|
||||
placeholder='۰۹۱۲۱۲۳۴۵۶۷'
|
||||
value={formik.values.userPhone}
|
||||
onChange={handlePhoneChange}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault()
|
||||
handleSearch()
|
||||
}
|
||||
}}
|
||||
<>
|
||||
<div className='w-full bg-white rounded-4xl px-5 py-4 flex-shrink-0'>
|
||||
<div className='flex items-center justify-between gap-3'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div
|
||||
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',
|
||||
)}
|
||||
/>
|
||||
<button
|
||||
type='button'
|
||||
disabled={isSearching}
|
||||
onClick={handleSearch}
|
||||
className={clx(
|
||||
'h-10 px-4 flex items-center gap-1.5 flex-shrink-0',
|
||||
'bg-primary text-white text-xs rounded-l-xl',
|
||||
'hover:opacity-90 transition-opacity disabled:opacity-60',
|
||||
'w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 transition-colors',
|
||||
searchState === 'found' ? 'bg-green-50' : 'bg-[#EEF0F7]',
|
||||
)}
|
||||
>
|
||||
{isSearching ? (
|
||||
<span className='w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin' />
|
||||
{searchState === 'found' ? (
|
||||
<TickCircle size={18} color='#16A34A' />
|
||||
) : searchState === 'not_found' ? (
|
||||
<UserAdd size={18} color='#8C90A3' />
|
||||
) : (
|
||||
<SearchNormal size={16} color='#fff' />
|
||||
<Profile size={18} color='#8C90A3' />
|
||||
)}
|
||||
<span className='hidden sm:inline'>جستجو</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div className='text-sm font-light flex items-center gap-2'>
|
||||
اطلاعات مشتری
|
||||
<span className='text-[11px] text-description bg-[#F8F9FC] rounded-full px-2 py-0.5'>
|
||||
اختیاری
|
||||
</span>
|
||||
</div>
|
||||
{searchState === 'found' && customerName && (
|
||||
<div className='text-[11px] text-green-600 mt-0.5'>
|
||||
{customerName}
|
||||
</div>
|
||||
)}
|
||||
{searchState === 'not_found' && (
|
||||
<div className='text-[11px] text-description mt-0.5'>
|
||||
مشتری جدید
|
||||
</div>
|
||||
)}
|
||||
{searchState === 'idle' && (
|
||||
<div className='text-[11px] text-description mt-0.5'>
|
||||
برای این سفارش وارد کردن اطلاعات مشتری الزامی نیست
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{phoneError && (
|
||||
<p className='text-[11px] text-red-500 mt-1'>{phoneError}</p>
|
||||
)}
|
||||
<Button
|
||||
type='button'
|
||||
className='w-fit px-4 h-10'
|
||||
onClick={() => setIsCustomerModalOpen(true)}
|
||||
>
|
||||
{searchState === 'idle' ? 'افزودن مشتری' : 'ویرایش مشتری'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label='نام'
|
||||
name='firstName'
|
||||
placeholder={isNameDisabled ? 'پس از جستجو' : 'نام'}
|
||||
value={formik.values.firstName}
|
||||
onChange={formik.handleChange}
|
||||
readOnly={isCustomerLocked}
|
||||
disabled={isNameDisabled}
|
||||
className={isNameDisabled ? 'bg-[#F8F9FC] border-0 text-description cursor-not-allowed' : ''}
|
||||
error_text={
|
||||
formik.touched.firstName && formik.errors.firstName
|
||||
? formik.errors.firstName
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label='نام خانوادگی'
|
||||
name='lastName'
|
||||
placeholder={isNameDisabled ? 'پس از جستجو' : 'نام خانوادگی'}
|
||||
value={formik.values.lastName}
|
||||
onChange={formik.handleChange}
|
||||
readOnly={isCustomerLocked}
|
||||
disabled={isNameDisabled}
|
||||
className={isNameDisabled ? 'bg-[#F8F9FC] border-0 text-description cursor-not-allowed' : ''}
|
||||
error_text={
|
||||
formik.touched.lastName && formik.errors.lastName
|
||||
? formik.errors.lastName
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DefaulModal
|
||||
open={isCustomerModalOpen}
|
||||
close={() => setIsCustomerModalOpen(false)}
|
||||
isHeader={true}
|
||||
title_header='اطلاعات مشتری'
|
||||
width={700}
|
||||
>
|
||||
<div className='p-2'>
|
||||
<div className='text-xs text-description mb-4'>
|
||||
اطلاعات مشتری اختیاری است و در صورت نیاز میتوانید ثبت کنید.
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-[1.2fr_1fr_1fr] gap-3 xl:items-end'>
|
||||
<div className='w-full'>
|
||||
<label className='text-xs text-description'>شماره تلفن</label>
|
||||
<div className='flex mt-1'>
|
||||
<input
|
||||
name='userPhone'
|
||||
placeholder='۰۹۱۲۱۲۳۴۵۶۷'
|
||||
value={formik.values.userPhone}
|
||||
onChange={handlePhoneChange}
|
||||
onKeyDown={(e) => {
|
||||
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',
|
||||
)}
|
||||
/>
|
||||
<button
|
||||
type='button'
|
||||
disabled={isSearching}
|
||||
onClick={handleSearch}
|
||||
className={clx(
|
||||
'h-10 px-4 flex items-center gap-1.5 flex-shrink-0',
|
||||
'bg-primary text-white text-xs rounded-l-xl',
|
||||
'hover:opacity-90 transition-opacity disabled:opacity-60',
|
||||
)}
|
||||
>
|
||||
{isSearching ? (
|
||||
<span className='w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin' />
|
||||
) : (
|
||||
<SearchNormal size={16} color='#fff' />
|
||||
)}
|
||||
<span className='hidden sm:inline'>جستجو</span>
|
||||
</button>
|
||||
</div>
|
||||
{phoneError && (
|
||||
<p className='text-[11px] text-red-500 mt-1'>{phoneError}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label='نام'
|
||||
name='firstName'
|
||||
placeholder={isNameDisabled ? 'پس از جستجو' : 'نام'}
|
||||
value={formik.values.firstName}
|
||||
onChange={formik.handleChange}
|
||||
readOnly={isCustomerLocked}
|
||||
disabled={isNameDisabled}
|
||||
className={isNameDisabled ? 'bg-[#F8F9FC] border-0 text-description cursor-not-allowed' : ''}
|
||||
error_text={
|
||||
formik.touched.firstName && formik.errors.firstName
|
||||
? formik.errors.firstName
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label='نام خانوادگی'
|
||||
name='lastName'
|
||||
placeholder={isNameDisabled ? 'پس از جستجو' : 'نام خانوادگی'}
|
||||
value={formik.values.lastName}
|
||||
onChange={formik.handleChange}
|
||||
readOnly={isCustomerLocked}
|
||||
disabled={isNameDisabled}
|
||||
className={isNameDisabled ? 'bg-[#F8F9FC] border-0 text-description cursor-not-allowed' : ''}
|
||||
error_text={
|
||||
formik.touched.lastName && formik.errors.lastName
|
||||
? formik.errors.lastName
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5 flex justify-end'>
|
||||
<Button
|
||||
type='button'
|
||||
className='w-fit px-6'
|
||||
onClick={() => setIsCustomerModalOpen(false)}
|
||||
>
|
||||
تایید
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DefaulModal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -29,6 +29,8 @@ interface OrderSummaryData {
|
||||
} | null>
|
||||
subTotal: number
|
||||
deliveryFee: number
|
||||
packingFee: number
|
||||
discountAmount: number
|
||||
total: number
|
||||
totalItems: number
|
||||
}
|
||||
@@ -129,7 +131,7 @@ const CreateOrderSidebar: FC<CreateOrderSidebarProps> = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='bg-white rounded-4xl p-5 flex-1 min-h-0 flex flex-col h-full'>
|
||||
<div className='bg-white rounded-4xl p-4 flex-1 min-h-0 flex flex-col h-full'>
|
||||
<div className='flex items-center justify-between flex-shrink-0'>
|
||||
<div className='flex items-center gap-2 text-sm font-light'>
|
||||
<ShoppingCart size={18} color='#000' />
|
||||
@@ -143,12 +145,12 @@ const CreateOrderSidebar: FC<CreateOrderSidebarProps> = ({
|
||||
</div>
|
||||
|
||||
{(customerName || formik.values.userPhone) && (
|
||||
<div className='mt-3 p-3 bg-[#F8F9FC] rounded-xl flex-shrink-0'>
|
||||
<div className='text-xs font-medium truncate'>
|
||||
<div className='mt-2 p-2.5 bg-[#F8F9FC] rounded-xl flex-shrink-0'>
|
||||
<div className='text-[11px] font-medium truncate'>
|
||||
{customerName || 'مشتری'}
|
||||
</div>
|
||||
{formik.values.userPhone && (
|
||||
<div className='text-[11px] text-description mt-0.5'>
|
||||
<div className='text-[10px] text-description mt-0.5'>
|
||||
{formik.values.userPhone}
|
||||
</div>
|
||||
)}
|
||||
@@ -158,7 +160,7 @@ const CreateOrderSidebar: FC<CreateOrderSidebarProps> = ({
|
||||
<button
|
||||
type='button'
|
||||
onClick={() => setIsDeliveryModalOpen(true)}
|
||||
className={`mt-3 w-full text-right p-3 rounded-xl border transition-colors flex-shrink-0 ${
|
||||
className={`mt-2 w-full text-right p-2.5 rounded-xl border transition-colors flex-shrink-0 ${
|
||||
isDeliverySelected && isPaymentSelected
|
||||
? 'border-border hover:border-primary/40 hover:bg-[#F8F9FC]'
|
||||
: 'border-dashed border-primary/50 bg-primary/5 hover:bg-primary/10'
|
||||
@@ -178,7 +180,7 @@ const CreateOrderSidebar: FC<CreateOrderSidebarProps> = ({
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className='mt-2 space-y-2'>
|
||||
<div className='mt-1.5 space-y-1.5'>
|
||||
<div className='flex items-center gap-2 text-xs'>
|
||||
<Truck size={15} color='#8C90A3' className='flex-shrink-0' />
|
||||
<span
|
||||
@@ -221,8 +223,8 @@ const CreateOrderSidebar: FC<CreateOrderSidebarProps> = ({
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className='mt-4 pt-3 border-t border-border border-dashed flex-1 min-h-0 flex flex-col'>
|
||||
<div className='text-xs text-description mb-2 flex-shrink-0'>سبد سفارش</div>
|
||||
<div className='mt-3 pt-2.5 border-t border-border border-dashed flex-1 min-h-0 flex flex-col'>
|
||||
<div className='text-xs text-description mb-1.5 flex-shrink-0'>سبد سفارش</div>
|
||||
|
||||
<div className='flex-1 min-h-0 overflow-y-auto relative'>
|
||||
{orderSummary.lineItems.length === 0 ? (
|
||||
@@ -233,7 +235,7 @@ const CreateOrderSidebar: FC<CreateOrderSidebarProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className='space-y-2.5 pb-2'>
|
||||
<div className='space-y-2 pb-2'>
|
||||
{orderSummary.lineItems.map((item) => {
|
||||
if (!item) return null
|
||||
return (
|
||||
@@ -319,7 +321,51 @@ const CreateOrderSidebar: FC<CreateOrderSidebarProps> = ({
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='mt-3 space-y-2 text-xs pt-3 border-t border-border flex-shrink-0'>
|
||||
<div className='mt-2 space-y-2 text-xs pt-2.5 border-t border-border flex-shrink-0'>
|
||||
<div className='grid grid-cols-2 gap-2.5 mb-2'>
|
||||
<div>
|
||||
<div className='text-xs mb-1.5'>
|
||||
<span className='font-medium'>هزینه بستهبندی</span>
|
||||
<span className='text-description mr-1'>(اختیاری)</span>
|
||||
</div>
|
||||
<input
|
||||
name='packingFee'
|
||||
type='number'
|
||||
inputMode='numeric'
|
||||
min={0}
|
||||
placeholder='تومان'
|
||||
className='w-full h-10 rounded-xl border border-border px-3 text-sm outline-none focus:border-primary'
|
||||
value={formik.values.packingFee || ''}
|
||||
onChange={(e) =>
|
||||
formik.setFieldValue(
|
||||
'packingFee',
|
||||
Math.max(Number(e.target.value) || 0, 0)
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className='text-xs mb-1.5'>
|
||||
<span className='font-medium'>تخفیف مبلغی</span>
|
||||
<span className='text-description mr-1'>(اختیاری)</span>
|
||||
</div>
|
||||
<input
|
||||
name='discountAmount'
|
||||
type='number'
|
||||
inputMode='numeric'
|
||||
min={0}
|
||||
placeholder='تومان'
|
||||
className='w-full h-10 rounded-xl border border-border px-3 text-sm outline-none focus:border-primary'
|
||||
value={formik.values.discountAmount || ''}
|
||||
onChange={(e) =>
|
||||
formik.setFieldValue(
|
||||
'discountAmount',
|
||||
Math.max(Number(e.target.value) || 0, 0)
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between'>
|
||||
<span className='text-description'>جمع آیتمها</span>
|
||||
<span>{formatPrice(orderSummary.subTotal)}</span>
|
||||
@@ -330,6 +376,20 @@ const CreateOrderSidebar: FC<CreateOrderSidebarProps> = ({
|
||||
<span>{formatPrice(orderSummary.deliveryFee)}</span>
|
||||
</div>
|
||||
)}
|
||||
{orderSummary.packingFee > 0 && (
|
||||
<div className='flex justify-between'>
|
||||
<span className='text-description'>هزینه بستهبندی</span>
|
||||
<span>{formatPrice(orderSummary.packingFee)}</span>
|
||||
</div>
|
||||
)}
|
||||
{orderSummary.discountAmount > 0 && (
|
||||
<div className='flex justify-between'>
|
||||
<span className='text-description'>تخفیف</span>
|
||||
<span className='text-green-600'>
|
||||
-{formatPrice(orderSummary.discountAmount)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className='flex justify-between font-bold text-sm pt-2 border-t-2 border-gray-200'>
|
||||
<span>جمع کل</span>
|
||||
<span>{formatPrice(orderSummary.total)}</span>
|
||||
|
||||
@@ -10,11 +10,13 @@ interface OrderActionsProps {
|
||||
isDineInOrCarDelivery: boolean
|
||||
isCustomerPickup: boolean
|
||||
isCanceled: boolean
|
||||
canCompleteOrder: boolean
|
||||
isChangingStatus: boolean
|
||||
onSendToKitchen: () => void
|
||||
onDeliverToCourier: () => void
|
||||
onDeliverToWaiter: () => void
|
||||
onDeliverToReceptionist: () => void
|
||||
onCompleteOrder: () => void
|
||||
onCancelOrder: () => void
|
||||
}
|
||||
|
||||
@@ -27,11 +29,13 @@ const OrderActions: FC<OrderActionsProps> = ({
|
||||
isDineInOrCarDelivery,
|
||||
isCustomerPickup,
|
||||
isCanceled,
|
||||
canCompleteOrder,
|
||||
isChangingStatus,
|
||||
onSendToKitchen,
|
||||
onDeliverToCourier,
|
||||
onDeliverToWaiter,
|
||||
onDeliverToReceptionist,
|
||||
onCompleteOrder,
|
||||
onCancelOrder
|
||||
}) => {
|
||||
const [loadingAction, setLoadingAction] = useState<string | null>(null)
|
||||
@@ -67,6 +71,11 @@ const OrderActions: FC<OrderActionsProps> = ({
|
||||
onCancelOrder()
|
||||
}
|
||||
|
||||
const handleCompleteOrder = () => {
|
||||
setLoadingAction('completeOrder')
|
||||
onCompleteOrder()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='mt-6 flex flex-col gap-3'>
|
||||
<Button
|
||||
@@ -111,6 +120,15 @@ const OrderActions: FC<OrderActionsProps> = ({
|
||||
/>
|
||||
)}
|
||||
|
||||
{!isCanceled && canCompleteOrder && (
|
||||
<Button
|
||||
label='اتمام سفارش'
|
||||
onClick={handleCompleteOrder}
|
||||
isloading={isChangingStatus && loadingAction === 'completeOrder'}
|
||||
className='bg-green-600 hover:bg-green-700'
|
||||
/>
|
||||
)}
|
||||
|
||||
{!isCanceled && showCancelButton && (
|
||||
<Button
|
||||
label='لغو سفارش'
|
||||
|
||||
@@ -7,12 +7,14 @@ interface PaymentVerificationBoxProps {
|
||||
order: Order
|
||||
isVerifyingPayment: boolean
|
||||
onVerifyPayment: () => void
|
||||
showVerifyButton: boolean
|
||||
}
|
||||
|
||||
const PaymentVerificationBox: FC<PaymentVerificationBoxProps> = ({
|
||||
order,
|
||||
isVerifyingPayment,
|
||||
onVerifyPayment,
|
||||
showVerifyButton,
|
||||
}) => {
|
||||
const payment = order.payments?.[0]
|
||||
const isCreditCard = order.paymentMethod?.method === PaymentMethodEnum.CreditCard
|
||||
@@ -53,12 +55,14 @@ const PaymentVerificationBox: FC<PaymentVerificationBoxProps> = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
label='تایید پرداخت'
|
||||
onClick={onVerifyPayment}
|
||||
isloading={isVerifyingPayment}
|
||||
className='bg-green-600 hover:bg-green-700 w-full'
|
||||
/>
|
||||
{showVerifyButton && (
|
||||
<Button
|
||||
label='تایید پرداخت'
|
||||
onClick={onVerifyPayment}
|
||||
isloading={isVerifyingPayment}
|
||||
className='bg-green-600 hover:bg-green-700 w-full'
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -33,6 +33,8 @@ export interface CreateOrderFormValues {
|
||||
items: CreateOrderItem[]
|
||||
deliveryMethodId: string
|
||||
paymentMethodId: string
|
||||
discountAmount: number
|
||||
packingFee: number
|
||||
description: string
|
||||
tableNumber: string
|
||||
userAddress: CreateOrderUserAddress
|
||||
@@ -97,6 +99,8 @@ export const useCreateOrderForm = () => {
|
||||
items: [],
|
||||
deliveryMethodId: '',
|
||||
paymentMethodId: '',
|
||||
discountAmount: 0,
|
||||
packingFee: 0,
|
||||
description: '',
|
||||
tableNumber: '',
|
||||
userAddress: emptyUserAddress(),
|
||||
@@ -104,9 +108,9 @@ export const useCreateOrderForm = () => {
|
||||
paymentDesc: '',
|
||||
},
|
||||
validationSchema: Yup.object().shape({
|
||||
userPhone: Yup.string().required('شماره تلفن الزامی است'),
|
||||
firstName: Yup.string().required('نام الزامی است'),
|
||||
lastName: Yup.string().required('نام خانوادگی الزامی است'),
|
||||
userPhone: Yup.string(),
|
||||
firstName: Yup.string(),
|
||||
lastName: Yup.string(),
|
||||
deliveryMethodId: Yup.string().required('روش تحویل الزامی است'),
|
||||
paymentMethodId: Yup.string().required('روش پرداخت الزامی است'),
|
||||
items: Yup.array()
|
||||
@@ -117,6 +121,8 @@ export const useCreateOrderForm = () => {
|
||||
})
|
||||
)
|
||||
.min(1, 'حداقل یک آیتم الزامی است'),
|
||||
discountAmount: Yup.number().min(0, 'تخفیف نمیتواند منفی باشد'),
|
||||
packingFee: Yup.number().min(0, 'هزینه بستهبندی نمیتواند منفی باشد'),
|
||||
}),
|
||||
onSubmit: async (values) => {
|
||||
const selectedDelivery = deliveryMethods.find(
|
||||
@@ -154,12 +160,17 @@ export const useCreateOrderForm = () => {
|
||||
return
|
||||
}
|
||||
|
||||
const submitOrder = (userId: string, addressId?: string) => {
|
||||
const submitOrder = (userId?: string, addressId?: string) => {
|
||||
const payload: CreateOrderType = {
|
||||
userId,
|
||||
items: values.items,
|
||||
deliveryMethodId: values.deliveryMethodId,
|
||||
paymentMethodId: values.paymentMethodId,
|
||||
discountAmount: values.discountAmount || 0,
|
||||
packingFee: values.packingFee || 0,
|
||||
}
|
||||
|
||||
if (userId) {
|
||||
payload.userId = userId
|
||||
}
|
||||
|
||||
if (values.description.trim()) {
|
||||
@@ -234,18 +245,23 @@ export const useCreateOrderForm = () => {
|
||||
|
||||
const submitFlow = async () => {
|
||||
try {
|
||||
const isCustomerRequiredForDelivery =
|
||||
selectedDelivery?.method === DeliveryMethodEnum.DeliveryCourier
|
||||
|
||||
const userId = await registerNewCustomer()
|
||||
if (!userId) {
|
||||
toast.error('کاربر انتخاب نشده است')
|
||||
if (isCustomerRequiredForDelivery && !userId) {
|
||||
toast.error('برای ثبت آدرس، انتخاب مشتری الزامی است')
|
||||
return
|
||||
}
|
||||
|
||||
let addressId: string | undefined
|
||||
try {
|
||||
addressId = await resolveAddressId(userId)
|
||||
} catch (error) {
|
||||
toast.error(extractErrorMessage(error as ErrorType, 'خطا در ثبت آدرس'))
|
||||
return
|
||||
if (userId) {
|
||||
try {
|
||||
addressId = await resolveAddressId(userId)
|
||||
} catch (error) {
|
||||
toast.error(extractErrorMessage(error as ErrorType, 'خطا در ثبت آدرس'))
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
@@ -383,16 +399,27 @@ export const useCreateOrderForm = () => {
|
||||
|
||||
const subTotal = lineItems.reduce((sum, item) => sum + (item?.totalPrice || 0), 0)
|
||||
const deliveryFee = selectedDeliveryMethod?.deliveryFee || 0
|
||||
const packingFee = formik.values.packingFee || 0
|
||||
const discountAmount = formik.values.discountAmount || 0
|
||||
const totalItems = lineItems.reduce((sum, item) => sum + (item?.quantity || 0), 0)
|
||||
const total = Math.max(subTotal + deliveryFee + packingFee - discountAmount, 0)
|
||||
|
||||
return {
|
||||
lineItems,
|
||||
subTotal,
|
||||
deliveryFee,
|
||||
total: subTotal + deliveryFee,
|
||||
packingFee,
|
||||
discountAmount,
|
||||
total,
|
||||
totalItems,
|
||||
}
|
||||
}, [formik.values.items, foodsMap, selectedDeliveryMethod])
|
||||
}, [
|
||||
formik.values.items,
|
||||
formik.values.packingFee,
|
||||
formik.values.discountAmount,
|
||||
foodsMap,
|
||||
selectedDeliveryMethod,
|
||||
])
|
||||
|
||||
const addFoodToOrder = (foodId: string) => {
|
||||
const existingIndex = formik.values.items.findIndex((item) => item.foodId === foodId)
|
||||
|
||||
@@ -265,10 +265,12 @@ export interface CreateOrderCarAddress {
|
||||
}
|
||||
|
||||
export interface CreateOrderType {
|
||||
userId: string;
|
||||
userId?: string;
|
||||
items: CreateOrderItem[];
|
||||
deliveryMethodId: string;
|
||||
paymentMethodId: string;
|
||||
discountAmount: number;
|
||||
packingFee: number;
|
||||
description?: string;
|
||||
tableNumber?: string;
|
||||
addressId?: string;
|
||||
|
||||
@@ -5,11 +5,45 @@ import { formatPrice } from "@/helpers/func";
|
||||
import { ArrowDown, ArrowUp, DocumentDownload } from "iconsax-react";
|
||||
import moment from "moment-jalaali";
|
||||
import { type FC, useMemo, useState } from "react";
|
||||
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
||||
import { CartesianGrid, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts";
|
||||
import { useGetPaymentsChart } from "../hooks/useStatsData";
|
||||
|
||||
const PERSIAN_MONTHS = [
|
||||
"فروردین",
|
||||
"اردیبهشت",
|
||||
"خرداد",
|
||||
"تیر",
|
||||
"مرداد",
|
||||
"شهریور",
|
||||
"مهر",
|
||||
"آبان",
|
||||
"آذر",
|
||||
"دی",
|
||||
"بهمن",
|
||||
"اسفند",
|
||||
] as const;
|
||||
|
||||
const toPersianDigits = (value: string | number): string =>
|
||||
String(value).replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[Number(d)]);
|
||||
|
||||
const formatJalaliAxisLabel = (dateString: string, period: "daily" | "monthly" | "yearly"): string => {
|
||||
const m = moment(dateString, "YYYY-MM-DD");
|
||||
const jYear = m.jYear();
|
||||
const jMonth = m.jMonth();
|
||||
const jDate = m.jDate();
|
||||
|
||||
if (period === "yearly") return toPersianDigits(jYear);
|
||||
if (period === "monthly") return `${PERSIAN_MONTHS[jMonth]} ${toPersianDigits(jYear)}`;
|
||||
return toPersianDigits(`${String(jMonth + 1).padStart(2, "0")}/${String(jDate).padStart(2, "0")}`);
|
||||
};
|
||||
|
||||
const formatJalaliFullDate = (dateString: string): string => {
|
||||
const m = moment(dateString, "YYYY-MM-DD");
|
||||
return `${toPersianDigits(m.jDate())} ${PERSIAN_MONTHS[m.jMonth()]} ${toPersianDigits(m.jYear())}`;
|
||||
};
|
||||
|
||||
const RevenueChart: FC = () => {
|
||||
const [selectedTab] = useState<"daily" | "monthly" | "yearly">("monthly");
|
||||
const [selectedTab] = useState<"daily" | "monthly" | "yearly">("daily");
|
||||
const [startDate, setStartDate] = useState<string>("");
|
||||
const [endDate, setEndDate] = useState<string>("");
|
||||
|
||||
@@ -33,38 +67,20 @@ const RevenueChart: FC = () => {
|
||||
|
||||
const { data: paymentsChartData, isLoading } = useGetPaymentsChart(apiParams);
|
||||
|
||||
const formatDateLabel = (dateString: string, period: "daily" | "monthly" | "yearly"): string => {
|
||||
const date = new Date(dateString);
|
||||
const options: Intl.DateTimeFormatOptions = {
|
||||
year: "numeric",
|
||||
};
|
||||
if (period === "monthly") {
|
||||
options.month = "long";
|
||||
} else if (period === "daily") {
|
||||
options.month = "short";
|
||||
options.day = "numeric";
|
||||
}
|
||||
const persianDate = new Intl.DateTimeFormat("fa-IR", options).format(date);
|
||||
return persianDate;
|
||||
};
|
||||
|
||||
const chartData = useMemo(() => {
|
||||
if (!paymentsChartData?.data) return [];
|
||||
return paymentsChartData.data.map((item) => ({
|
||||
month: formatDateLabel(item.date, selectedTab),
|
||||
online: item.online,
|
||||
cash: item.cash,
|
||||
}));
|
||||
return [...paymentsChartData.data]
|
||||
.sort((a, b) => moment(a.date, "YYYY-MM-DD").valueOf() - moment(b.date, "YYYY-MM-DD").valueOf())
|
||||
.map((item) => ({
|
||||
date: item.date,
|
||||
label: formatJalaliAxisLabel(item.date, selectedTab),
|
||||
tooltipLabel: formatJalaliFullDate(item.date),
|
||||
online: item.online,
|
||||
cash: item.cash,
|
||||
}));
|
||||
}, [paymentsChartData?.data, selectedTab]);
|
||||
|
||||
const xAxisInterval = useMemo(() => {
|
||||
const dataLength = chartData.length;
|
||||
if (dataLength <= 7) return 0;
|
||||
if (dataLength <= 15) return 1;
|
||||
if (dataLength <= 30) return 2;
|
||||
if (dataLength <= 60) return 4;
|
||||
return Math.floor(dataLength / 12);
|
||||
}, [chartData.length]);
|
||||
const chartWidth = useMemo(() => Math.max(chartData.length * 48, 640), [chartData.length]);
|
||||
|
||||
const totalRevenue = useMemo(() => {
|
||||
return chartData.reduce((sum, item) => sum + item.online + item.cash, 0);
|
||||
@@ -94,49 +110,16 @@ const RevenueChart: FC = () => {
|
||||
const CustomTooltip = (props: {
|
||||
active?: boolean;
|
||||
payload?: Array<{
|
||||
dataKey?: string;
|
||||
value?: number;
|
||||
color?: string;
|
||||
payload?: {
|
||||
cash?: number;
|
||||
online?: number;
|
||||
month?: string;
|
||||
cash: number;
|
||||
online: number;
|
||||
tooltipLabel: string;
|
||||
};
|
||||
}>;
|
||||
label?: string;
|
||||
}) => {
|
||||
const { active, payload, label } = props;
|
||||
if (!active || !payload || payload.length === 0 || !label) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// استفاده از paymentsChartData.data مستقیم برای دریافت دادههای واقعی
|
||||
// پیدا کردن آخرین آیتمی که label آن با formatDateLabel match میکند
|
||||
let dataPoint: { cash: number; online: number } | null = null;
|
||||
|
||||
if (paymentsChartData?.data) {
|
||||
// پیدا کردن همه آیتمهای match شده و استفاده از آخرین
|
||||
const matchingItems: Array<{ cash: number; online: number }> = [];
|
||||
for (const item of paymentsChartData.data) {
|
||||
const formattedLabel = formatDateLabel(item.date, selectedTab);
|
||||
if (formattedLabel === label) {
|
||||
matchingItems.push({ cash: item.cash, online: item.online });
|
||||
}
|
||||
}
|
||||
if (matchingItems.length > 0) {
|
||||
dataPoint = matchingItems[matchingItems.length - 1];
|
||||
}
|
||||
}
|
||||
|
||||
// اگر پیدا نکردیم، از chartData استفاده میکنیم
|
||||
if (!dataPoint) {
|
||||
const matchingItems = chartData.filter((item) => item.month === label);
|
||||
if (matchingItems.length > 0) {
|
||||
dataPoint = matchingItems[matchingItems.length - 1];
|
||||
}
|
||||
}
|
||||
|
||||
if (!dataPoint) {
|
||||
const { active, payload } = props;
|
||||
const dataPoint = payload?.[0]?.payload;
|
||||
if (!active || !dataPoint) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -145,7 +128,7 @@ const RevenueChart: FC = () => {
|
||||
|
||||
return (
|
||||
<div className="bg-white p-3 rounded-xl shadow-lg border border-gray-200">
|
||||
<p className="text-sm font-medium text-gray-900 mb-2">{label}</p>
|
||||
<p className="text-sm font-medium text-gray-900 mb-2">{dataPoint.tooltipLabel}</p>
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-[#B0BAC9]" />
|
||||
@@ -248,38 +231,26 @@ const RevenueChart: FC = () => {
|
||||
) : chartData.length === 0 ? (
|
||||
<div className="w-full h-[400px] min-h-[400px] flex items-center justify-center text-gray-500">دادهای برای نمایش وجود ندارد</div>
|
||||
) : (
|
||||
<div className="w-full h-[400px] min-h-[400px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={chartData} margin={{ top: 10, right: 10, left: 10, bottom: 40 }}>
|
||||
<defs>
|
||||
<linearGradient id="colorOnline" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#6B7FED" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#6B7FED" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
<linearGradient id="colorCash" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#B0BAC9" stopOpacity={0.2} />
|
||||
<stop offset="95%" stopColor="#B0BAC9" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<div className="w-full overflow-x-auto pb-2">
|
||||
<div style={{ width: chartWidth, height: 420 }}>
|
||||
<LineChart data={chartData} width={chartWidth} height={420} margin={{ top: 10, right: 10, left: 10, bottom: 72 }}>
|
||||
<CartesianGrid strokeDasharray="0" stroke="#f0f0f0" vertical={false} />
|
||||
<XAxis
|
||||
dataKey="month"
|
||||
dataKey="label"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: "#9CA3AF", fontSize: 11 }}
|
||||
reversed
|
||||
interval={xAxisInterval}
|
||||
angle={chartData.length > 15 ? -45 : 0}
|
||||
textAnchor={chartData.length > 15 ? "end" : "middle"}
|
||||
height={chartData.length > 15 ? 60 : 40}
|
||||
minTickGap={10}
|
||||
tick={{ fill: "#9CA3AF", fontSize: 10 }}
|
||||
interval={0}
|
||||
angle={-45}
|
||||
textAnchor="end"
|
||||
height={72}
|
||||
/>
|
||||
<YAxis orientation="right" axisLine={false} tickLine={false} tick={{ fill: "#9CA3AF", fontSize: 10 }} tickFormatter={formatYAxis} domain={[0, "dataMax + 2000000"]} tickMargin={50} />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Area type="natural" dataKey="cash" stroke="#B0BAC9" strokeWidth={2} fillOpacity={1} fill="url(#colorCash)" />
|
||||
<Area type="natural" dataKey="online" stroke="#6B7FED" strokeWidth={2} fillOpacity={1} fill="url(#colorOnline)" />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
<Tooltip content={<CustomTooltip />} cursor={{ stroke: "#E5E7EB", strokeWidth: 1 }} />
|
||||
<Line type="monotone" dataKey="cash" name="پرداخت نقدی" stroke="#B0BAC9" strokeWidth={2} dot={{ r: 3, fill: "#B0BAC9", strokeWidth: 0 }} activeDot={{ r: 5 }} />
|
||||
<Line type="monotone" dataKey="online" name="پرداخت آنلاین" stroke="#6B7FED" strokeWidth={2} dot={{ r: 3, fill: "#6B7FED", strokeWidth: 0 }} activeDot={{ r: 5 }} />
|
||||
</LineChart>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user