From ea5d4af30cbf1875a043ace97086f93916364f9c Mon Sep 17 00:00:00 2001
From: Ho Ngoc Hai <hongochai10@icloud.com>
Date: Thu, 16 Apr 2026 03:18:14 +0700
Subject: [PATCH] =?UTF-8?q?fix(web):=20wire=20up=20Nh=E1=BA=AFn=20tin=20bu?=
 =?UTF-8?q?tton=20on=20agent=20profile=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "Nhắn tin" (Message) button on the agent profile ContactCard had no
onClick handler. Now opens the InquiryModal using the agent's first
active listing, or falls back to SMS for agents with no listings.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 .../agents/agent-profile-client.tsx           | 33 ++++++++++++++++---
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/agents/agent-profile-client.tsx b/apps/web/components/agents/agent-profile-client.tsx
index 8c26009..00f872b 100644
--- a/apps/web/components/agents/agent-profile-client.tsx
+++ b/apps/web/components/agents/agent-profile-client.tsx
@@ -12,6 +12,8 @@ import {
   MessageSquare,
 } from 'lucide-react';
 import Image from 'next/image';
+import * as React from 'react';
+import { InquiryModal } from '@/components/listings/inquiry-modal';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -34,6 +36,17 @@ interface AgentProfileClientProps {
 // ---------------------------------------------------------------------------
 
 export function AgentProfileClient({ agent, reviews }: AgentProfileClientProps) {
+  const [inquiryOpen, setInquiryOpen] = React.useState(false);
+  const firstListing = agent.activeListings[0] ?? null;
+
+  const handleMessageClick = React.useCallback(() => {
+    if (firstListing) {
+      setInquiryOpen(true);
+    } else {
+      window.location.href = `sms:${agent.phone}`;
+    }
+  }, [firstListing, agent.phone]);
+
   return (
     <div className="mx-auto max-w-6xl px-4 py-6">
       {/* Breadcrumb */}
@@ -121,7 +134,7 @@ export function AgentProfileClient({ agent, reviews }: AgentProfileClientProps)
 
         {/* CTA Sidebar (desktop) */}
         <div className="hidden shrink-0 sm:block">
-          <ContactCard agent={agent} />
+          <ContactCard agent={agent} onMessageClick={handleMessageClick} />
         </div>
       </div>
 
@@ -247,17 +260,27 @@ export function AgentProfileClient({ agent, reviews }: AgentProfileClientProps)
         {/* Sidebar (mobile + desktop fallback) */}
         <div className="space-y-6">
           <div className="sm:hidden">
-            <ContactCard agent={agent} />
+            <ContactCard agent={agent} onMessageClick={handleMessageClick} />
           </div>
           <div className="hidden sm:block lg:block">
             <div className="lg:sticky lg:top-20">
               <div className="hidden lg:block">
-                <ContactCard agent={agent} />
+                <ContactCard agent={agent} onMessageClick={handleMessageClick} />
               </div>
             </div>
           </div>
         </div>
       </div>
+
+      {firstListing && (
+        <InquiryModal
+          open={inquiryOpen}
+          onOpenChange={setInquiryOpen}
+          listingId={firstListing.id}
+          listingTitle={firstListing.property.title}
+          sellerName={agent.fullName}
+        />
+      )}
     </div>
   );
 }
@@ -286,7 +309,7 @@ function StatPill({
   );
 }
 
-function ContactCard({ agent }: { agent: AgentPublicProfile }) {
+function ContactCard({ agent, onMessageClick }: { agent: AgentPublicProfile; onMessageClick: () => void }) {
   return (
     <Card>
       <CardHeader>
@@ -299,7 +322,7 @@ function ContactCard({ agent }: { agent: AgentPublicProfile }) {
             Gọi ngay
           </Button>
         </a>
-        <Button variant="outline" className="w-full gap-2">
+        <Button variant="outline" className="w-full gap-2" onClick={onMessageClick}>
           <MessageSquare className="h-4 w-4" />
           Nhắn tin
         </Button>