262 lines
6.9 KiB
TypeScript
262 lines
6.9 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
AlertTriangle,
|
|
CheckCircle2,
|
|
Clock,
|
|
MessageSquare,
|
|
RefreshCw,
|
|
Star,
|
|
XCircle,
|
|
} from "lucide-react"
|
|
import Link from "next/link"
|
|
import { useCallback, useEffect } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
acceptOrder,
|
|
acceptOrderAsActor,
|
|
cancelPreAccept,
|
|
confirmClose,
|
|
payOrder,
|
|
requestClose,
|
|
} from "@/lib/api/orders"
|
|
import type { Actor } from "@/lib/policy/actor"
|
|
import { notifyInfo, notifySuccess } from "@/lib/toast"
|
|
import type { OrderStatus } from "@/lib/types"
|
|
import { useAuthStore } from "@/store/auth"
|
|
import { useChatStore } from "@/store/chat"
|
|
import { useOrderStore } from "@/store/orders"
|
|
import { useShopStore } from "@/store/shops"
|
|
|
|
interface OrderActionsProps {
|
|
orderId: string
|
|
initialStatus: OrderStatus
|
|
chatSessionId?: string
|
|
serviceId: string
|
|
}
|
|
|
|
function showFeedback(message: string) {
|
|
notifySuccess(message)
|
|
}
|
|
|
|
export default function OrderActions({
|
|
orderId,
|
|
initialStatus,
|
|
chatSessionId,
|
|
serviceId,
|
|
}: OrderActionsProps) {
|
|
const currentUserId = useAuthStore((state) => state.user?.id)
|
|
const order = useOrderStore((state) => state.orders.find((item) => item.id === orderId))
|
|
const sessions = useChatStore((state) => state.sessions)
|
|
const dispatchMode = useShopStore((state) => {
|
|
if (!order?.shopId) return "manual"
|
|
const shop = state.shops.find((item) => item.id === order.shopId)
|
|
return shop?.dispatchMode ?? "manual"
|
|
})
|
|
const resolvedChatSessionId =
|
|
chatSessionId ??
|
|
sessions.find((session) => session.type === "order" && session.orderId === orderId)?.id
|
|
|
|
const status = order?.status ?? initialStatus
|
|
|
|
const handleDecision = useCallback(
|
|
(okMessage: string, result: { decision: { ok: boolean; message?: string } }) => {
|
|
if (result.decision.ok) {
|
|
showFeedback(okMessage)
|
|
return
|
|
}
|
|
|
|
notifyInfo(result.decision.message ?? "当前操作不允许")
|
|
},
|
|
[],
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (!order) return
|
|
if (order.status !== "pending_accept") return
|
|
if (!order.shopId) return
|
|
if (dispatchMode !== "auto") return
|
|
|
|
const timer = setTimeout(() => {
|
|
const systemActor: Actor = {
|
|
userId: order.playerId,
|
|
role: "player",
|
|
shopId: order.shopId,
|
|
}
|
|
const result = acceptOrderAsActor(orderId, systemActor)
|
|
handleDecision("系统已自动派单", result)
|
|
}, 3000)
|
|
|
|
return () => clearTimeout(timer)
|
|
}, [dispatchMode, handleDecision, order, orderId])
|
|
|
|
return (
|
|
<div className="flex gap-2 flex-wrap">
|
|
{status === "pending_payment" && (
|
|
<>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
if (!currentUserId) {
|
|
notifyInfo("请先登录")
|
|
return
|
|
}
|
|
|
|
const result = cancelPreAccept(orderId)
|
|
handleDecision("订单已取消", result)
|
|
}}
|
|
>
|
|
<XCircle className="mr-1 h-4 w-4" />
|
|
取消订单
|
|
</Button>
|
|
<Button
|
|
onClick={() => {
|
|
if (!currentUserId) {
|
|
notifyInfo("请先登录")
|
|
return
|
|
}
|
|
|
|
const result = payOrder(orderId)
|
|
handleDecision("订单支付成功", result)
|
|
}}
|
|
>
|
|
<CheckCircle2 className="mr-1 h-4 w-4" />
|
|
确认支付
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
{status === "pending_accept" && (
|
|
<>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
if (!currentUserId) {
|
|
notifyInfo("请先登录")
|
|
return
|
|
}
|
|
|
|
const result = cancelPreAccept(orderId)
|
|
handleDecision("订单已取消", result)
|
|
}}
|
|
>
|
|
<XCircle className="mr-1 h-4 w-4" />
|
|
取消订单
|
|
</Button>
|
|
{order?.shopId && dispatchMode === "auto" ? (
|
|
<Button disabled>
|
|
<Clock className="mr-1 h-4 w-4" />
|
|
系统派单中
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
onClick={() => {
|
|
if (!currentUserId) {
|
|
notifyInfo("请先登录")
|
|
return
|
|
}
|
|
|
|
const result = acceptOrder(orderId)
|
|
handleDecision("已接单", result)
|
|
}}
|
|
>
|
|
<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={() => {
|
|
if (!currentUserId) {
|
|
notifyInfo("请先登录")
|
|
return
|
|
}
|
|
|
|
const result = requestClose(orderId)
|
|
handleDecision("已发起结单", result)
|
|
}}
|
|
>
|
|
发起结单
|
|
</Button>
|
|
<Button variant="destructive" asChild>
|
|
<Link href={`/dispute/${orderId}`}>
|
|
<AlertTriangle className="mr-1 h-4 w-4" />
|
|
发起争议
|
|
</Link>
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
{status === "pending_close" && (
|
|
<>
|
|
<Button
|
|
onClick={() => {
|
|
if (!currentUserId) {
|
|
notifyInfo("请先登录")
|
|
return
|
|
}
|
|
|
|
const result = confirmClose(orderId)
|
|
handleDecision("已确认结单", result)
|
|
}}
|
|
>
|
|
确认结单
|
|
</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>
|
|
)
|
|
}
|