Files
juwan-frontend/components/order-actions.tsx
T
2026-02-22 06:40:40 +08:00

177 lines
4.8 KiB
TypeScript

"use client"
import { AlertTriangle, CheckCircle2, MessageSquare, RefreshCw, Star, XCircle } from "lucide-react"
import Link from "next/link"
import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import type { OrderStatus } from "@/lib/types"
import { useChatStore } from "@/store/chat"
import { useOrderStore } from "@/store/orders"
interface OrderActionsProps {
orderId: string
initialStatus: OrderStatus
chatSessionId?: string
serviceId: string
}
function showFeedback(message: string) {
if (typeof window === "undefined") return
window.alert(message)
}
export default function OrderActions({
orderId,
initialStatus,
chatSessionId,
serviceId,
}: OrderActionsProps) {
const order = useOrderStore((state) => state.orders.find((item) => item.id === orderId))
const updateOrderStatus = useOrderStore((state) => state.updateOrderStatus)
const ensureOrderSession = useChatStore((state) => state.ensureOrderSession)
const [resolvedChatSessionId, setResolvedChatSessionId] = useState(chatSessionId)
const status = order?.status ?? initialStatus
useEffect(() => {
if (chatSessionId) {
setResolvedChatSessionId(chatSessionId)
return
}
if (!order) return
const session = ensureOrderSession(order)
setResolvedChatSessionId(session.id)
}, [chatSessionId, order, ensureOrderSession])
return (
<div className="flex gap-2 flex-wrap">
{status === "pending_payment" && (
<>
<Button
variant="outline"
onClick={() => {
updateOrderStatus(orderId, "cancelled")
showFeedback("订单已取消")
}}
>
<XCircle className="mr-1 h-4 w-4" />
</Button>
<Button
onClick={() => {
updateOrderStatus(orderId, "pending_accept")
}}
>
<CheckCircle2 className="mr-1 h-4 w-4" />
</Button>
</>
)}
{status === "pending_accept" && (
<>
<Button
variant="outline"
onClick={() => {
updateOrderStatus(orderId, "cancelled")
showFeedback("订单已取消")
}}
>
<XCircle className="mr-1 h-4 w-4" />
</Button>
<Button
onClick={() => {
updateOrderStatus(orderId, "in_progress")
showFeedback("已接单")
}}
>
<CheckCircle2 className="mr-1 h-4 w-4" />
</Button>
</>
)}
{(status === "in_progress" || status === "pending_close") && resolvedChatSessionId && (
<Button asChild>
<Link href={`/chat/${resolvedChatSessionId}`}>
<MessageSquare className="mr-1 h-4 w-4" />
</Link>
</Button>
)}
{status === "in_progress" && (
<>
<Button
onClick={() => {
updateOrderStatus(orderId, "pending_close")
showFeedback("已发起结单")
}}
>
</Button>
<Button variant="destructive" asChild>
<Link href={`/dispute/${orderId}`}>
<AlertTriangle className="mr-1 h-4 w-4" />
</Link>
</Button>
</>
)}
{status === "pending_close" && (
<>
<Button
onClick={() => {
updateOrderStatus(orderId, "pending_review")
}}
>
</Button>
<Button variant="destructive" asChild>
<Link href={`/dispute/${orderId}`}>
<AlertTriangle className="mr-1 h-4 w-4" />
</Link>
</Button>
</>
)}
{status === "pending_review" && (
<Button asChild>
<Link href={`/review/${orderId}`}>
<Star className="mr-1 h-4 w-4" />
</Link>
</Button>
)}
{status === "completed" && (
<Button variant="outline" asChild>
<Link href={`/order/new?serviceId=${serviceId}`}>
<RefreshCw className="mr-1 h-4 w-4" />
</Link>
</Button>
)}
{status === "cancelled" && (
<Button variant="outline" asChild>
<Link href={`/order/new?serviceId=${serviceId}`}>
<RefreshCw className="mr-1 h-4 w-4" />
</Link>
</Button>
)}
{status === "disputed" && (
<Button variant="outline" asChild>
<Link href={`/dispute/${orderId}`}></Link>
</Button>
)}
</div>
)
}