danak/negareh-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reusable chat

Browse Source
This commit is contained in:
morteza-mortezai
2026-07-17 23:33:39 +03:30
parent 94a0091d1b
commit 026b605943
12 changed files with 255 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/requests/components/TicketMessage.tsx → src/pages/chat/components/ChatMessage.tsx
+16 -7
View File
@@ -5,11 +5,11 @@ import { getFileNameAndExtensionFromUrl } from '@/config/func'
import { getPresignedUrl } from '@/pages/uploader/service/UploaderService'
import VoicePlayer from '@/components/VoicePlayer'
import UserAvatar from '@/components/UserAvatar'
import type { AttachmentsType } from '@/pages/order/types/Types'
import type { ChatAttachmentType } from '../type/Types'
type Props = {
content: string
attachments?: AttachmentsType[]
attachments?: ChatAttachmentType[]
senderName?: string
senderLabel?: string
createdAt?: string
@@ -19,7 +19,7 @@ type Props = {
lastName?: string | null
}
const TicketMessage: FC<Props> = ({
const ChatMessage: FC<Props> = ({
content,
attachments = [],
senderName,
@@ -61,7 +61,9 @@ const TicketMessage: FC<Props> = ({
</div>
{content && (
<p className="text-sm text-black leading-7 whitespace-pre-wrap">{content}</p>
<p className="text-sm text-black leading-7 whitespace-pre-wrap">
{content}
</p>
)}
{fileAttachments.length > 0 && (
@@ -75,7 +77,11 @@ const TicketMessage: FC<Props> = ({
>
<Paperclip2 size={18} color="#0047FF" />
<span className="text-xs">
{getFileNameAndExtensionFromUrl(attach.url).fileName}
{
getFileNameAndExtensionFromUrl(
attach.url,
).fileName
}
</span>
</button>
))}
@@ -91,7 +97,10 @@ const TicketMessage: FC<Props> = ({
)}
{createdAt && (
<div className="mt-3 text-[11px] text-[#8C90A3] text-left" dir="ltr">
<div
className="mt-3 text-[11px] text-[#8C90A3] text-left"
dir="ltr"
>
{moment(createdAt).format('jYYYY/jMM/jDD HH:mm')}
</div>
)}
@@ -101,4 +110,4 @@ const TicketMessage: FC<Props> = ({
)
}
export default TicketMessage
export default ChatMessage
src/pages/requests/components/TicketSection.tsx → src/pages/chat/components/ChatSection.tsx
+101 -46
View File
@@ -5,23 +5,48 @@ import { Microphone, Play, Pause } from 'iconsax-react'
import { useState, type FC } from 'react'
import { useVoiceRecorder } from '@/hooks/useVoiceRecorder'
import { useMultiUpload, useSingleUpload } from '@/pages/uploader/hooks/useUploader'
import type { AddTicketType } from '@/pages/order/types/Types'
import { useAddTicket, useGetTickets } from '@/pages/order/hooks/useOrderData'
import { useParams } from 'react-router-dom'
import type { AddChatMessageType } from '../type/Types'
import { getChatSenderName } from '../type/Types'
import { useAddChatMessage, useGetChatMessages } from '../hooks/useChatData'
import { toast } from '@/shared/toast'
import { extractErrorMessage } from '@/config/func'
import TicketMessage from './TicketMessage'
import ChatMessage from './ChatMessage'
type Props = {
export type ChatSectionProps = {
refId: string
title?: string
description?: string
/** Label for admin / support / designer side */
senderLabel?: string
/** Label for customer / user side */
userLabel?: string
/** Optional fallback when message.user has no name */
customerName?: string
submitLabel?: string
uploadLabel?: string
showRefresh?: boolean
}
const TicketSection: FC<Props> = ({ customerName }) => {
const { id } = useParams()
const ChatSection: FC<ChatSectionProps> = ({
refId,
title = 'گفتگو',
description,
senderLabel = 'پشتیبان',
userLabel = 'مشتری',
customerName,
submitLabel = 'ارسال پیام',
uploadLabel = 'فایل‌های ضمیمه',
showRefresh = true,
}) => {
const [message, setMessage] = useState('')
const [files, setFiles] = useState<File[]>([])
const addTicket = useAddTicket()
const { data, refetch, isFetching, isPending: isLoadingTickets } = useGetTickets(id!)
const addMessage = useAddChatMessage()
const {
data,
refetch,
isFetching,
isPending: isLoadingMessages,
} = useGetChatMessages(refId)
const singleUpload = useSingleUpload()
const multiUpload = useMultiUpload()
@@ -38,9 +63,9 @@ const TicketSection: FC<Props> = ({ customerName }) => {
resetRecorder,
} = useVoiceRecorder()
const tickets = data?.data ?? []
const messages = data?.data ?? []
const isSubmitting =
singleUpload.isPending || multiUpload.isPending || addTicket.isPending
singleUpload.isPending || multiUpload.isPending || addMessage.isPending
const handleSubmit = async () => {
if (!message.trim() && !audioFile && files.length === 0) {
@@ -48,7 +73,7 @@ const TicketSection: FC<Props> = ({ customerName }) => {
return
}
const params: AddTicketType = {
const params: AddChatMessageType = {
attachments: [],
content: message.trim(),
}
@@ -71,8 +96,8 @@ const TicketSection: FC<Props> = ({ customerName }) => {
})
}
addTicket.mutate(
{ orderId: id!, params },
addMessage.mutate(
{ refId, params },
{
onSuccess: () => {
toast('پیام شما با موفقیت ارسال شد')
@@ -84,7 +109,7 @@ const TicketSection: FC<Props> = ({ customerName }) => {
onError: (error) => {
toast(extractErrorMessage(error), 'error')
},
}
},
)
}
@@ -92,45 +117,53 @@ const TicketSection: FC<Props> = ({ customerName }) => {
<div className="overflow-hidden rounded-2xl bg-white">
<div className="flex items-center justify-between border-b border-[#EBEDF5] px-6 py-4 md:px-8">
<div>
<h2 className="text-sm text-black">گفتگو با مشتری</h2>
<p className="mt-1 text-xs text-[#8C90A3]">
پیام‌ها و فایل‌های مرتبط با درخواست
</p>
<h2 className="text-sm text-black">{title}</h2>
{description && (
<p className="mt-1 text-xs text-[#8C90A3]">
{description}
</p>
)}
</div>
<RefreshButton onClick={() => refetch()} isLoading={isFetching} />
{showRefresh && (
<RefreshButton
onClick={() => refetch()}
isLoading={isFetching}
/>
)}
</div>
<div className="p-6 md:p-8">
<div className="space-y-4 min-h-[80px]">
{isLoadingTickets && tickets.length === 0 && (
<p className="text-xs text-[#8C90A3]">در حال بارگذاری پیام‌ها...</p>
{isLoadingMessages && messages.length === 0 && (
<p className="text-xs text-[#8C90A3]">
در حال بارگذاری پیام‌ها...
</p>
)}
{!isLoadingTickets && tickets.length === 0 && (
{!isLoadingMessages && messages.length === 0 && (
<div className="rounded-xl bg-[#F5F7FC] px-4 py-6 text-center">
<p className="text-sm text-[#8C90A3]">هنوز پیامی ثبت نشده است.</p>
<p className="text-sm text-[#8C90A3]">
هنوز پیامی ثبت نشده است.
</p>
<p className="text-xs text-[#8C90A3] mt-1">
اولین پیام را در فرم زیر ارسال کنید.
</p>
</div>
)}
{tickets.map((item) => {
{messages.map((item) => {
if (item.user) {
return (
<TicketMessage
<ChatMessage
key={item.id}
content={item.content}
attachments={item.attachments}
createdAt={item.createdAt}
senderLabel="مشتری"
senderName={
customerName ||
[item.user.firstName, item.user.lastName]
.filter(Boolean)
.join(' ') ||
item.user.phone
}
senderLabel={userLabel}
senderName={getChatSenderName(
item.user,
customerName,
)}
avatarUrl={item.user.avatarUrl}
firstName={item.user.firstName}
lastName={item.user.lastName}
@@ -140,14 +173,14 @@ const TicketSection: FC<Props> = ({ customerName }) => {
if (item.admin) {
return (
<TicketMessage
<ChatMessage
key={item.id}
content={item.content}
attachments={item.attachments}
createdAt={item.createdAt}
isAdmin
senderLabel="پشتیبان"
senderName={`${item.admin.firstName} ${item.admin.lastName}`}
senderLabel={senderLabel}
senderName={getChatSenderName(item.admin)}
avatarUrl={item.admin.avatarUrl}
firstName={item.admin.firstName}
lastName={item.admin.lastName}
@@ -172,9 +205,13 @@ const TicketSection: FC<Props> = ({ customerName }) => {
<button
type="button"
onClick={isRecording ? stopRecording : startRecording}
onClick={
isRecording ? stopRecording : startRecording
}
className="absolute left-4 bottom-4 bg-[#FFF1D7] size-8 rounded-lg flex items-center justify-center hover:opacity-90 transition-opacity"
aria-label={isRecording ? 'توقف ضبط' : 'ضبط صدا'}
aria-label={
isRecording ? 'توقف ضبط' : 'ضبط صدا'
}
>
<Microphone
size={20}
@@ -193,9 +230,17 @@ const TicketSection: FC<Props> = ({ customerName }) => {
aria-label={isPlaying ? 'توقف' : 'پخش'}
>
{isPlaying ? (
<Pause size={16} color="#fff" variant="Bold" />
<Pause
size={16}
color="#fff"
variant="Bold"
/>
) : (
<Play size={16} color="#fff" variant="Bold" />
<Play
size={16}
color="#fff"
variant="Bold"
/>
)}
</button>
@@ -208,25 +253,35 @@ const TicketSection: FC<Props> = ({ customerName }) => {
className="w-[2px] rounded-full transition-all"
style={{
height: `${Math.random() * 18 + 4}px`,
backgroundColor: passed ? '#0047FF' : '#E5E7EB',
backgroundColor: passed
? '#0047FF'
: '#E5E7EB',
}}
/>
)
})}
</div>
<audio ref={audioRef} src={audioUrl} className="hidden" />
<audio
ref={audioRef}
src={audioUrl}
className="hidden"
/>
</div>
)}
</div>
<div className="mt-6">
<UploadBox label="فایل‌های ضمیمه" isMultiple onChange={setFiles} />
<UploadBox
label={uploadLabel}
isMultiple
onChange={setFiles}
/>
</div>
<div className="flex mt-8 justify-end">
<Button
label="ارسال پیام"
label={submitLabel}
onClick={handleSubmit}
className="w-[150px]"
isLoading={isSubmitting}
@@ -237,4 +292,4 @@ const TicketSection: FC<Props> = ({ customerName }) => {
)
}
export default TicketSection
export default ChatSection
src/pages/chat/hooks/useChatData.ts
+23
View File
@@ -0,0 +1,23 @@
import { useMutation, useQuery } from '@tanstack/react-query'
import * as api from '../service/ChatService'
import type { AddChatMessageType } from '../type/Types'
export const useGetChatMessages = (refId: string) => {
return useQuery({
queryKey: ['chat', refId],
queryFn: () => api.getChatMessages(refId),
enabled: !!refId,
})
}
export const useAddChatMessage = () => {
return useMutation({
mutationFn: ({
refId,
params,
}: {
refId: string
params: AddChatMessageType
}) => api.addChatMessage(refId, params),
})
}
src/pages/chat/index.ts
+15
View File
@@ -0,0 +1,15 @@
export { default as ChatSection } from './components/ChatSection'
export { default as ChatMessage } from './components/ChatMessage'
export type { ChatSectionProps } from './components/ChatSection'
export {
useGetChatMessages,
useAddChatMessage,
} from './hooks/useChatData'
export type {
AddChatMessageType,
ChatAttachmentType,
ChatMessageType,
ChatMessagesResponseType,
ChatParticipantType,
} from './type/Types'
export { getChatSenderName } from './type/Types'
src/pages/chat/service/ChatService.ts
+20
View File
@@ -0,0 +1,20 @@
import axios from '@/config/axios'
import type {
AddChatMessageType,
ChatMessagesResponseType,
} from '../type/Types'
export const getChatMessages = async (refId: string) => {
const { data } = await axios.get<ChatMessagesResponseType>(
`/admin/chat/ref/${refId}`,
)
return data
}
export const addChatMessage = async (
refId: string,
params: AddChatMessageType,
) => {
const { data } = await axios.post(`/admin/chat/ref/${refId}`, params)
return data
}
src/pages/chat/type/Types.ts
+50
View File
@@ -0,0 +1,50 @@
import type { BaseResponse } from '@/shared/types/Types'
export type ChatAttachmentType = {
url: string
type: string
}
export type AddChatMessageType = {
content: string
attachments: ChatAttachmentType[]
}
export type ChatParticipantType = {
id: string
firstName?: string | null
lastName?: string | null
phone?: string
avatarUrl?: string | null
}
export type ChatMessageType = {
admin?: ChatParticipantType | null
user?: ChatParticipantType | null
attachments: ChatAttachmentType[]
content: string
createdAt: string
id: string | number
}
export type ChatMessagesResponseType = BaseResponse<ChatMessageType[]>
/** @deprecated Use AddChatMessageType */
export type AddTicketType = AddChatMessageType
/** @deprecated Use ChatMessageType */
export type TicketType = ChatMessageType
/** @deprecated Use ChatMessagesResponseType */
export type TicketsResponseType = ChatMessagesResponseType
export const getChatSenderName = (
participant?: ChatParticipantType | null,
fallback?: string,
): string => {
if (!participant && !fallback) return ''
return (
[participant?.firstName, participant?.lastName].filter(Boolean).join(' ') ||
participant?.phone ||
fallback ||
''
)
}
src/pages/order/OrderDetail.tsx
+13 -2
View File
@@ -8,7 +8,7 @@ import Button from '@/components/Button'
import { Paths } from '@/config/Paths'
import { extractErrorMessage } from '@/config/func'
import { useGetOrderDetails, useUpdateOrderStatus } from './hooks/useOrderData'
import TicketSection from './components/TicketSection'
import ChatSection from '@/pages/chat/components/ChatSection'
import OrderDetailSidebar from './components/OrderDetailSidebar'
import type { OrderDetailDataType } from './types/Types'
import { OrderStatusEnum } from './enum/OrderEnum'
@@ -21,6 +21,10 @@ const OrderDetail: FC = () => {
const order = data?.data as OrderDetailDataType | undefined
// const { data: invoiceItemData } = useGetInvoiceItem(order?.invoiceItem ?? null)
const invoiceId = order?.invoiceItem?.invoice
const customerName =
[order?.user?.firstName, order?.user?.lastName].filter(Boolean).join(' ') ||
order?.user?.phone ||
undefined
const handleUpdateStatus = (status: OrderStatusEnum) => {
if (!id) return
@@ -101,7 +105,14 @@ const OrderDetail: FC = () => {
<div className="mt-6 flex flex-col-reverse gap-6 xl:flex-row xl:items-start">
<div className="min-w-0 flex-1 space-y-6">
<TicketSection />
<ChatSection
refId={id!}
customerName={customerName}
title="گفتگو با مشتری"
description="پیام‌ها و فایل‌های مرتبط با سفارش"
senderLabel="طراح"
userLabel="مشتری"
/>
</div>
<aside className="w-full shrink-0 xl:sticky xl:top-4 xl:w-[320px]">
src/pages/order/components/TicketSection.tsx
-273
View File
@@ -1,273 +0,0 @@
import Button from '@/components/Button'
import RefreshButton from '@/components/RefreshButton'
import UploadBox from '@/components/UploadBox'
import UserAvatar from '@/components/UserAvatar'
import { Microphone, Paperclip2 } from 'iconsax-react'
import { useState, type FC } from 'react'
import { useVoiceRecorder } from '@/hooks/useVoiceRecorder'
import { Play, Pause } from 'iconsax-react'
import { useMultiUpload, useSingleUpload } from '@/pages/uploader/hooks/useUploader'
import type { AddTicketType } from '../types/Types'
import { useAddTicket, useGetTickets } from '../hooks/useOrderData'
import { useParams } from 'react-router-dom'
import { toast } from '@/shared/toast'
import { extractErrorMessage, getFileNameAndExtensionFromUrl } from '@/config/func'
import { getPresignedUrl } from '@/pages/uploader/service/UploaderService'
import VoicePlayer from '@/components/VoicePlayer'
const TicketSection: FC = () => {
const { id } = useParams()
const [message, setMessage] = useState('')
const [files, setFiles] = useState<File[]>([])
const addTicket = useAddTicket()
const { data, refetch, isFetching } = useGetTickets(id!)
const singleUpload = useSingleUpload()
const multiUpload = useMultiUpload()
const {
isRecording,
isPlaying,
audioUrl,
audioRef,
togglePlayPause,
startRecording,
stopRecording,
progress,
audioFile,
resetRecorder
} = useVoiceRecorder()
const handleSubmit = async () => {
const params: AddTicketType = {
attachments: [],
content: message
}
if (audioFile) {
const voiceResult = await singleUpload.mutateAsync(audioFile)
params.attachments.push({
type: 'voice',
url: voiceResult.data.key,
})
}
if (files.length) {
const filesResult = await multiUpload.mutateAsync(files)
filesResult.data?.forEach((item) => {
params.attachments.push({
type: 'uploads_attach',
url: item.key,
})
})
}
addTicket.mutate({ orderId: id!, params: params }, {
onSuccess: () => {
toast('پیام شما با موفقیت ارسال شد')
refetch()
setMessage('')
setFiles([])
resetRecorder()
},
onError: (error) => {
toast(extractErrorMessage(error), 'error')
},
})
}
const handleOpenLink = async (key: string) => {
const url = await getPresignedUrl(key)
window.open(
url,
'_blank'
)
}
return (
<div className="overflow-hidden rounded-3xl bg-white shadow-sm">
<div className="flex items-center justify-between border-b border-gray-100 px-5 py-4 md:px-6">
<div>
<h2 className="text-base font-medium text-gray-900">گفتگو</h2>
<p className="mt-0.5 text-xs text-gray-500">پیام‌ها و فایل‌های مرتبط با سفارش</p>
</div>
<RefreshButton onClick={() => refetch()} isLoading={isFetching} />
</div>
<div className="p-5 md:p-6">
{
data?.data?.map((item) => {
if (item.user)
return (
<div key={item.id} className='flex gap-3 mt-6'>
<UserAvatar
src={item.user.avatarUrl}
firstName={item.user.firstName}
lastName={item.user.lastName}
className="size-9 mt-1"
/>
<div className='bg-[#F5F7FC] rounded-4xl rounded-tr-none p-6 max-w-[55%]'>
<div className='text-sm font-light text-black leading-6'>
{item.content}
</div>
{/* attachments (non-voice) */}
<div className="flex gap-3 flex-wrap mt-3">
{item.attachments
?.filter((a) => a.type !== 'voice')
.map((attach) => (
<div
key={attach.url}
onClick={() => handleOpenLink(attach.url)}
className="flex cursor-pointer items-center gap-1.5 text-[#0047FF]"
>
<Paperclip2 size={20} color="#0047FF" />
<div className="text-xs">
{getFileNameAndExtensionFromUrl(attach.url).fileName}
</div>
</div>
))}
</div>
{/* voice messages */}
{item.attachments
?.filter((a) => a.type === 'voice')
.map((voice) => (
<VoicePlayer key={voice.url} url={voice.url} />
))}
</div>
</div>
)
else if (item.admin)
return (
<div key={item.id} className='flex justify-end gap-3 mt-6'>
<div className='bg-[#F5F7FC] rounded-4xl rounded-tl-none p-6 max-w-[55%]'>
<div className='flex gap-1 text-sm mb-2'>
<div className='font-bold'>طراح : </div>
<div>{item.admin?.firstName + ' ' + item?.admin?.lastName}</div>
</div>
<div className='text-sm font-light text-black leading-6'>
{item.content}
</div>
{/* attachments (non-voice) */}
<div className="flex gap-3 flex-wrap mt-3">
{item.attachments
?.filter((a) => a.type !== 'voice')
.map((attach) => (
<div
key={attach.url}
onClick={() => handleOpenLink(attach.url)}
className="flex cursor-pointer items-center gap-1.5 text-[#0047FF]"
>
<Paperclip2 size={20} color="#0047FF" />
<div className="text-xs">
{getFileNameAndExtensionFromUrl(attach.url).fileName}
</div>
</div>
))}
</div>
{/* voice messages */}
{item.attachments
?.filter((a) => a.type === 'voice')
.map((voice) => (
<VoicePlayer key={voice.url} url={voice.url} />
))}
</div>
<UserAvatar
src={item.admin.avatarUrl}
firstName={item.admin.firstName}
lastName={item.admin.lastName}
className="size-9 mt-1"
/>
</div>
)
})
}
<div className="mt-6">
<div className="text-sm mb-2 text-black">پیام شما</div>
<div className="relative">
<textarea
value={message}
onChange={(e) => setMessage(e.target.value)}
className="w-full h-40 bg-white border border-border rounded-xl p-4 text-sm resize-none outline-none"
placeholder=""
/>
<button
onClick={isRecording ? stopRecording : startRecording}
className="absolute left-4 bottom-4 bg-[#FFF1D7] size-8 rounded-lg flex items-center justify-center"
>
<Microphone
size={20}
color={isRecording ? '#EF4444' : 'black'}
variant={isRecording ? 'Bold' : 'Outline'}
/>
</button>
</div>
{audioUrl && (
<div className="w-full h-12 bg-white border border-border rounded-xl flex items-center px-3 gap-3 mt-3">
<button
onClick={togglePlayPause}
className="w-8 h-8 rounded-full bg-black flex items-center justify-center flex-shrink-0"
>
{isPlaying ? (
<Pause size={16} color="#fff" variant="Bold" />
) : (
<Play size={16} color="#fff" variant="Bold" />
)}
</button>
<div className="flex-1 flex items-center gap-[2px] h-8">
{Array.from({ length: 60 }).map((_, i) => {
const passed = i / 60 <= progress
return (
<div
key={i}
className="w-[2px] rounded-full transition-all"
style={{
height: `${Math.random() * 18 + 4}px`,
backgroundColor: passed ? '#0047FF' : '#E5E7EB'
}}
/>
)
})}
</div>
<audio ref={audioRef} src={audioUrl} className="hidden" />
</div>
)}
</div>
<div className="mt-6">
<UploadBox
label="فایل های ضمیمه"
isMultiple={true}
onChange={setFiles}
/>
</div>
<div className="flex mt-10 justify-end">
<Button
label="ارسال"
onClick={handleSubmit}
className='w-[150px]'
isLoading={singleUpload.isPending || multiUpload.isPending || addTicket.isPending}
/>
</div>
</div>
</div>
)
}
export default TicketSection
src/pages/order/hooks/useOrderData.ts
-21
View File
@@ -1,7 +1,6 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import * as api from "../service/OrderService";
import type {
AddTicketType,
OrderPrintFormType,
UpdateOrderType,
} from "../types/Types";
@@ -44,26 +43,6 @@ export const useGetOrderDetails = (id: string) => {
});
};
export const useGetTickets = (orderId: string) => {
return useQuery({
queryKey: ["tickets", orderId],
queryFn: () => api.getTickets(orderId),
enabled: !!orderId,
});
};
export const useAddTicket = () => {
return useMutation({
mutationFn: ({
orderId,
params,
}: {
orderId: string;
params: AddTicketType;
}) => api.addTicket(orderId, params),
});
};
export const useCreateOrder = () => {
return useMutation({
mutationFn: api.submitOrder,
src/pages/order/service/OrderService.ts
-14
View File
@@ -1,6 +1,5 @@
import axios from "@/config/axios";
import type {
AddTicketType,
ConvertToOrderItemType,
CreateFinalOrderType,
OrderDetailResponseType,
@@ -8,7 +7,6 @@ import type {
OrderListResponseType,
OrderPrintFormType,
OrderPrintResponseType,
TicketsResponseType,
UpdateOrderType,
} from "../types/Types";
import type { BaseResponse } from "@/shared/types/Types";
@@ -99,18 +97,6 @@ export const getOrderDetail = async (id: string) => {
return data;
};
export const getTickets = async (orderId: string) => {
const { data } = await axios.get<TicketsResponseType>(
`/admin/chat/ref/${orderId}`,
);
return data;
};
export const addTicket = async (ticketId: string, params: AddTicketType) => {
const { data } = await axios.post(`/admin/chat/ref/${ticketId}`, params);
return data;
};
export const submitOrder = async (params: CreateFinalOrderType) => {
const { data } = await axios.post(`/admin/orders`, params);
return data;
src/pages/order/types/Types.ts
+8 -26
View File
@@ -165,31 +165,14 @@ export type AttachmentsType = {
type: string;
};
export type AddTicketType = {
content: string;
attachments: AttachmentsType[];
};
export type TicketType = {
admin?: {
firstName: string;
lastName: string;
phone: string;
id: string;
avatarUrl?: string | null;
};
attachments: AttachmentsType[];
content: string;
createdAt: string;
id: number;
user?: {
id: string;
firstName?: string | null;
lastName?: string | null;
phone?: string;
avatarUrl?: string | null;
} | null;
};
export type {
AddChatMessageType,
AddTicketType,
ChatMessageType,
ChatMessagesResponseType,
TicketType,
TicketsResponseType,
} from "@/pages/chat/type/Types";
export interface MyOrderType extends RowDataType {
balance: number;
@@ -231,7 +214,6 @@ export type OrderItemType = {
fieldId: string;
}[];
};
export type TicketsResponseType = BaseResponse<TicketType[]>;
export type OrderDetailResponseType = BaseResponse<OrderDetailDataType>;
export type StoreType = {
src/pages/requests/Detail.tsx
+9 -2
View File
@@ -4,7 +4,7 @@ import moment from 'moment-jalaali'
import { Calendar, TickSquare } from 'iconsax-react'
import { useGetRequestDetail } from './hooks/useRequestData'
import RequestDetailItem from './components/RequestDetailItem'
import TicketSection from './components/TicketSection'
import ChatSection from '@/pages/chat/components/ChatSection'
import { Paths } from '@/config/Paths'
import BackButton from '@/components/BackButton'
import Button from '@/components/Button'
@@ -120,7 +120,14 @@ const RequestDetail: FC = () => {
)}
</section>
<TicketSection customerName={customerName} />
<ChatSection
refId={id!}
customerName={customerName}
title="گفتگو با مشتری"
description="پیام‌ها و فایل‌های مرتبط با درخواست"
senderLabel="پشتیبان"
userLabel="مشتری"
/>
</div>
)
}