feat(chat): add payment marked-as-paid handler and milestone status e…

p2p-safe-swap/app/p2p/orders/page.tsx

@@ -2,7 +2,9 @@
 
 import { useState } from "react";
 import { P2POrderList } from "@/frontend/components/p2p";
+import { ChatScreen } from "@/frontend/components/chat/chat-screen";
 import type { OrderMode, P2POrder } from "@/frontend/components/p2p";
+import type { ChatMessage } from "@/frontend/components/chat/types";
 
 const MOCK_ORDERS: P2POrder[] = [
   {
@@ -60,8 +62,105 @@ const MOCK_ORDERS: P2POrder[] = [
 
 const BEST_PRICE = 0.9201;
 
+// Mock messages for demonstration
+const MOCK_MESSAGES: ChatMessage[] = [
+  {
+    id: "msg-1",
+    type: "text",
+    text: "Hola, quiero comprar 1000 EUR",
+    author: "counterpart",
+    timestamp: new Date(Date.now() - 3600000),
+  },
+  {
+    id: "msg-2",
+    type: "request",
+    amount: 1000,
+    currency: "EUR",
+    memo: "Payment for crypto swap",
+    status: "pending",
+    author: "self",
+    timestamp: new Date(Date.now() - 1800000),
+  },
+  {
+    id: "msg-3",
+    type: "payment",
+    amount: 912,
+    currency: "USDT",
+    memo: "Your crypto",
+    status: "pending",
+    author: "counterpart",
+    timestamp: new Date(),
+  },
+];
+
 export default function OrdersPage() {
   const [mode, setMode] = useState<OrderMode>("buy");
+  const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null);
+  const [messages, setMessages] = useState<ChatMessage[]>(MOCK_MESSAGES);
+
+  const selectedOrder = selectedOrderId
+    ? MOCK_ORDERS.find((o) => o.id === selectedOrderId)
+    : null;
+
+  if (selectedOrder) {
+    return (
+      <main className="mx-auto flex min-h-screen w-full max-w-md flex-col">
+        <ChatScreen
+          counterpartAddress={selectedOrder.user.address}
+          messages={messages}
+          onSendMessage={(text) => {
+            const newMessage: ChatMessage = {
+              id: `msg-${Date.now()}`,
+              type: "text",
+              text,
+              author: "self",
+              timestamp: new Date(),
+            };
+            setMessages((prev) => [...prev, newMessage]);
+          }}
+          onSendPayment={() => {
+            console.log("Send payment");
+          }}
+          onAcceptPaymentRequest={(messageId) => {
+            console.log("✅ Step 1: Pagar button clicked for message:", messageId);
+
+            // This is where the escrow integration happens
+            // Parent component should:
+            // 1. Call trustlessWork.escrow.changeMilestoneStatus()
+            // 2. Get unsigned XDR
+            // 3. Sign with wallet
+            // 4. Submit transaction
+            // 5. Update message status to "completed"
+
+            setMessages((prev) =>
+              prev.map((msg) =>
+                msg.id === messageId && msg.type === "request"
+                  ? { ...msg, status: "completed" as const }
+                  : msg
+              )
+            );
+          }}
+          onRejectPaymentRequest={(messageId) => {
+            console.log("Reject payment request:", messageId);
+            setMessages((prev) =>
+              prev.map((msg) =>
+                msg.id === messageId && msg.type === "request"
+                  ? { ...msg, status: "rejected" as const }
+                  : msg
+              )
+            );
+          }}
+          onViewReceipt={(messageId) => {
+            console.log("View receipt:", messageId);
+          }}
+          onBack={() => {
+            setSelectedOrderId(null);
+          }}
+          lang="es"
+        />
+      </main>
+    );
+  }
 
   return (
     <main className="mx-auto flex min-h-screen w-full max-w-md flex-col">
@@ -72,6 +171,7 @@ export default function OrdersPage() {
         onModeChange={setMode}
         onBuy={(orderId) => {
           console.log("Order action:", { mode, orderId });
+          setSelectedOrderId(orderId);
         }}
       />
     </main>

p2p-safe-swap/frontend/components/chat/chat-screen.tsx

@@ -76,6 +76,11 @@ function renderMessage(
             ? () => handlers.onViewReceipt?.(message.id)
             : undefined
         }
+        onMarkPaid={
+          !isRequest && isSelf
+            ? () => handlers.onMarkPaymentPaid?.(message.id, contractId, buyerAddress)
+            : undefined
+        }
       />
       <time
         dateTime={new Date(message.timestamp).toISOString()}

p2p-safe-swap/lib/trustless-work.ts

@@ -61,5 +61,11 @@ export const trustlessWork = {
         method: "POST",
         body: JSON.stringify(body),
       }),
+
+    changeMilestoneStatus: (body: Record<string, unknown>) =>
+      request("/escrow/single-release/v2/change-milestone-status", {
+        method: "POST",
+        body: JSON.stringify(body),
+      }),
   },
 };