feat: wire order and chat state flow

This commit is contained in:
zetaloop
2026-02-22 06:40:40 +08:00
parent 4ce7303258
commit 02269dd9c3
10 changed files with 372 additions and 57 deletions
+38 -18
View File
@@ -8,10 +8,11 @@ import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { statusLabels } from "@/lib/constants"
import { mockChatSessions, mockOrders } from "@/lib/mock"
import type { OrderStatus } from "@/lib/types"
import { cn } from "@/lib/utils"
import { useAuthStore } from "@/store/auth"
import { useChatStore } from "@/store/chat"
import { useOrderStore } from "@/store/orders"
const statusColors: Record<OrderStatus, string> = {
pending_payment: "bg-yellow-100 text-yellow-800",
@@ -51,6 +52,9 @@ const ownerTabs = [
export default function OrderListPage() {
const [tab, setTab] = useState<TabFilter | "pending">("all")
const { currentRole, user } = useAuthStore()
const orders = useOrderStore((state) => state.orders)
const sessions = useChatStore((state) => state.sessions)
const ensureOrderSession = useChatStore((state) => state.ensureOrderSession)
const currentUserId = user?.id ?? "u1"
const ownerShopId = "shop1"
@@ -62,7 +66,14 @@ export default function OrderListPage() {
const tabs =
currentRole === "consumer" ? consumerTabs : currentRole === "player" ? playerTabs : ownerTabs
const roleFiltered = mockOrders.filter((order) => {
useEffect(() => {
orders.forEach((order) => {
if (order.status === "pending_payment" || order.status === "cancelled") return
ensureOrderSession(order)
})
}, [orders, ensureOrderSession])
const roleFiltered = orders.filter((order) => {
if (currentRole === "consumer") return order.consumerId === currentUserId
if (currentRole === "player") return order.playerId === currentUserId
return order.shopId === ownerShopId
@@ -70,8 +81,15 @@ export default function OrderListPage() {
const filtered = roleFiltered.filter((order) => {
if (tab === "pending") return order.status === "pending_accept"
if (tab === "active")
return ["in_progress", "pending_close", "pending_review"].includes(order.status)
if (tab === "active") {
return [
"pending_payment",
"pending_accept",
"in_progress",
"pending_close",
"pending_review",
].includes(order.status)
}
if (tab === "completed") return order.status === "completed" || order.status === "cancelled"
if (tab === "disputed") return order.status === "disputed"
return true
@@ -130,20 +148,22 @@ export default function OrderListPage() {
</span>
</div>
<div className="flex gap-2">
{order.status === "in_progress" &&
(() => {
const session = mockChatSessions.find((s) => s.orderId === order.id)
return (
session && (
<Button variant="outline" size="sm" asChild>
<Link href={`/chat/${session.id}`}>
<MessageSquare className="mr-1 h-3.5 w-3.5" />
</Link>
</Button>
)
)
})()}
{(() => {
if (order.status !== "in_progress" && order.status !== "pending_close")
return null
const session = sessions.find(
(item) => item.type === "order" && item.orderId === order.id,
)
if (!session) return null
return (
<Button variant="outline" size="sm" asChild>
<Link href={`/chat/${session.id}`}>
<MessageSquare className="mr-1 h-3.5 w-3.5" />
</Link>
</Button>
)
})()}
{order.status === "completed" && (
<Button variant="outline" size="sm" asChild>
<Link href={`/order/new?serviceId=${order.service.id}`}>