@pubuduth-aplicy/chat-ui 2.1.80 → 2.1.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.80",
+  "version": "2.1.82",
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "license": "ISC",
   "author": "",

package/src/components/messages/Message.tsx

@@ -13,7 +13,10 @@ import { useEffect, useRef, useState } from "react";
 interface MessageProps {
   message: {
     _id?: string;
-    senderId: string;
+    sender: {
+      senderId: string;
+      role: string;
+    };
     message: string;
     status: MessageStatus;
     createdAt: any;
@@ -48,30 +51,74 @@ interface MessageProps {
 
 const Message = ({ message }: MessageProps) => {
   const { userId } = useChatContext();
-  const { apiUrl,cdnUrl } = getChatConfig();
+  const { apiUrl,cdnUrl ,role: role1} = getChatConfig();
 
   if (message.type === "system") {
+    const booking = message.meta?.bookingDetails;
+    const status = booking?.status || "Pending"; // Default to Pending
+    const role = role1; // "provider" or "customer"
+  
+    const handleConfirm = () => {
+      console.log("Booking confirmed!");
+      window.location.href = `/booking/all`;
+      // Update booking status to Confirmed
+    };
+  
+    const handleInProgress = () => {
+      console.log("Booking started (In Progress)");
+      window.location.href = `/booking/all`;
+      // Update booking status to InProgress
+    };
+  
+    const handleComplete = () => {
+      console.log("Booking completed!");
+      window.location.href = `/booking/all`;
+      // Update booking status to Completed
+    };
+  
+    const handleReview = () => {
+      if (role === "customer") {
+        console.log("Navigate to review page for customer → provider");
+        window.location.href = `/customer/customer-reviews`;
+      } else if (role === "provider") {
+        console.log("Navigate to review page for provider → customer");
+        window.location.href = `/booking/all`;
+      }
+    };
+  
     return (
       <div className="system-message booking-details">
-        <h4>{message.meta?.bookingDetails?.status || 'Unknown'}</h4>
+        <h4>{status}</h4>
         <div className="details">
-          <p>Service: {message.meta?.bookingDetails?.serviceId}</p>
-          <p>Date: {message.meta?.bookingDetails?.date}</p>
-          <p>Time: {message.meta?.bookingDetails?.time}</p>
-          <p>Price: ${message.meta?.bookingDetails?.price}</p>
+          <p>Service: {booking?.serviceId}</p>
+          <p>Date: {booking?.date}</p>
+          <p>Time: {booking?.time}</p>
         </div>
-        <button
-          className="confirm-button"
-          onClick={() => {
-            // Add your confirmation logic here
-            console.log('Booking confirmed!');
-          }}
-        >
-          Confirm Booking
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-            <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z" />
-          </svg>
-        </button>
+  
+        {/* Actions based on role + status */}
+        {role === "provider" && status === "Pending" && (
+          <button className="confirm-button" onClick={handleConfirm}>
+            Confirm Booking ✅
+          </button>
+        )}
+  
+        {role === "provider" && status === "Confirmed" && (
+          <button className="confirm-button" onClick={handleInProgress}>
+            Start Service ▶️
+          </button>
+        )}
+  
+        {role === "provider" && status === "InProgress" && (
+          <button className="confirm-button" onClick={handleComplete}>
+            Mark as Completed ✔️
+          </button>
+        )}
+  
+        {status === "Completed" && (
+          <button className="confirm-button" onClick={handleReview}>
+            Leave a Review ✍️
+          </button>
+        )}
       </div>
     );
   }
@@ -92,7 +139,7 @@ const Message = ({ message }: MessageProps) => {
     );
   }
 
-  const fromMe = message.senderId === userId;
+  const fromMe = message.sender?.senderId === userId;
   const timestamp = fromMe ? "timestamp_outgoing" : "timestamp_incomeing";
   const alignItems = fromMe ? "outgoing" : "incoming";
   const [localStatus, setLocalStatus] = useState(message.status);

package/src/components/messages/MessageInput.tsx

@@ -258,7 +258,10 @@ const MessageInput = () => {
         _id: tempId,
         text: message1,
         message: message1,
-        senderId: userId,
+        sender: {
+          senderId: userId,
+          role: role,
+        },
         status: "pending" as MessageStatus,
         createdAt: new Date().toISOString(),
         media: attachmentsRef.current.map((att) => ({

package/src/components/messages/Messages.tsx

@@ -61,7 +61,7 @@ const Messages = () => {
               (msg) =>
                 msg._id === newMessage._id ||
                 (msg.isOptimistic &&
-                  msg.senderId === userId &&
+                  msg.sender.senderId === userId &&
                   msg.message === newMessage.message)
             );
 

package/src/components/sidebar/Conversations.tsx

@@ -265,14 +265,14 @@ const Conversations = () => {
         <button
           className={`flex-1 py-3 px-4 text-sm font-medium text-center border-b-2 transition-colors ${
             activeTab === "personal"
-              ? "border-[#317490] message-text bg-blue-50"
+              ? "border-primary message-text bg-primary/20"
               : "border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-50"
           }`}
           onClick={() => setActiveTab("personal")}
         >
           Personal
           {personalUnreadCount > 0 && (
-            <span className="ml-2 bg-blue-500 text-white text-xs rounded-full px-2 py-1 min-w-5 inline-flex justify-center">
+            <span className="ml-2 bg-blue-primary text-white text-xs rounded-full px-2 py-1 min-w-5 inline-flex justify-center">
               {personalUnreadCount}
             </span>
           )}
@@ -280,14 +280,14 @@ const Conversations = () => {
         <button
           className={`flex-1 py-3 px-4 text-sm font-medium text-center border-b-2 transition-colors ${
             activeTab === "service"
-              ? "border-blue-500 text-blue-600 bg-blue-50"
+              ? "border-primary message-text bg-primary/20"
               : "border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-50"
           }`}
           onClick={() => setActiveTab("service")}
         >
           Service
           {serviceUnreadCount > 0 && (
-            <span className="ml-2 bg-blue-500 text-white text-xs rounded-full px-2 py-1 min-w-5 inline-flex justify-center">
+            <span className="ml-2 bg-primary text-white text-xs rounded-full px-2 py-1 min-w-5 inline-flex justify-center">
               {serviceUnreadCount}
             </span>
           )}

package/src/stores/Zustant.ts

@@ -26,7 +26,10 @@ interface ChatUIState {
   messages: {
     _id: string;
     text: string;
-    senderId: string;
+    sender: {
+      senderId: string;
+      role: string;
+    };
     status: string;
     isOptimistic: boolean;
     message: string;