Get Ticket Details

{
  "message": "",
  "data": {
    "ticketId": "12345678",
    "subject": "Late Driver - Airport Pickup",
    "content": "Customer reported that driver was 45 minutes late for scheduled airport pickup. Passenger had to wait at arrivals and missed important meeting. Requesting refund for inconvenience.",
    "feedbackCategory": "Late Driver",
    "agentInvolved": "abdullah",
    "status": "closed",
    "priority": "high",
    "createdAt": "2025-10-01T10:30:00.000Z",
    "updatedAt": "2025-10-01T14:45:00.000Z",
    "closedAt": "2025-10-01T14:45:00.000Z",
    "departmentCode": "OPS",
    "passenger_name": "John Smith",
    "passenger_email": "[email protected]",
    "passenger_phone": "+1-555-123-",
    "chauffeur_name": "Mike Johnson",
    "chauffeur_id": "CH78",
    "reservation_id": "RES",
    "pickup_location": "J",
    "dropoff_location": "o",
    "scheduled_time": "2025-10-01T09:00:00.000Z",
    "actual_time": "2025-10-01T09:45:00.000Z",
    "delay_minutes": 45,
    "resolution_notes": "Apology issued, partial refund processed, driver coached on punctuality",
    "tags": ["urgent", "airport", "refund"],
    "custom_properties": {
      "vehicle_type": "Luxury Sedan",
      "service_level": "Premium",
      "complaint_type": "delay"
    },
    "associated_contacts": [
      {
        "id": "contact-123",
        "name": "John Smith",
        "email": "[email protected]",
        "type": "passenger"
      },
      {
        "id": "contact-123",
        "name": "Mike Johnson",
        "email": "[email protected]",
        "type": "chauffeur"
      }
    ],
    "activity_log": [
      {
        "timestamp": "2025-10-01T10:30:00.000Z",
        "action": "created",
        "user": "system",
        "notes": "Ticket automatically created from feedback form"
      },
      {
        "timestamp": "2025-10-01T11:00:00.000Z",
        "action": "assigned",
        "user": "admin",
        "notes": "Assigned to agent abdullah"
      },
      {
        "timestamp": "2025-10-01T14:45:00.000Z",
        "action": "resolved",
        "user": "abdullah",
        "notes": "Issue resolved with customer satisfaction"
      }
    ]
  }
}

{
  "error": {
    "code": "INVALID_TICKET_ID",
    "message": "Invalid or missing ticket ID"
  }
}

{
  "error": {
    "code": "TICKET_NOT_FOUND",
    "message": "Ticket not found"
  }
}

{
  "error": {
    "code": "UNAUTHORIZED",
    "message": "Missing or invalid token"
  }
}

{
  "error": {
    "code": "SERVER_ERROR",
    "message": "Internal server error"
  }
}

curl -X GET 'http://localhost:2000/hubspot/ticket-details/123456' \
  -H 'Authorization:Bearer your-jwt-token'

import React, { useState, useEffect } from 'react';

function TicketDetail({ ticketId }) {
  const [ticket, setTicket] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTicketDetails();
  }, [ticketId]);

  const fetchTicketDetails = async () => {
    try {
      const response = await fetch(`/hubspot/ticket-details/${ticketId}`, {
        headers: { 'Authorization': `Bearer ${token}` }
      });
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      const data = await response.json();
      setTicket(data.data);
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  };

  if (loading) return <LoadingSpinner />;
  if (error) return <ErrorMessage error={error} />;
  if (!ticket) return <div>No ticket found</div>;

  return (
    <div className="ticket-detail">
      <TicketHeader ticket={ticket} />
      <TicketContent ticket={ticket} />
      <TicketActivity activity={ticket.activity_log} />
      <TicketContacts contacts={ticket.associated_contacts} />
    </div>
  );
}

function ActivityTimeline({ activity }) {
  return (
    <div className="activity-timeline">
      <h3>Activity Log</h3>
      {activity.map((item, index) => (
        <div key={index} className="activity-item">
          <div className="activity-time">
            {new Date(item.timestamp).toLocaleString()}
          </div>
          <div className="activity-action">{item.action}</div>
          <div className="activity-user">{item.user}</div>
          <div className="activity-notes">{item.notes}</div>
        </div>
      ))}
    </div>
  );
}

function TicketStatus({ status }) {
  const statusConfig = {
    'open': { color: 'orange', label: 'Open' },
    'closed': { color: 'green', label: 'Closed' },
    'pending': { color: 'blue', label: 'Pending' },
    'escalated': { color: 'red', label: 'Escalated' }
  };

  const config = statusConfig[status] || { color: 'gray', label: status };

  return (
    <span className={`status-badge status-${config.color}`}>
      {config.label}
    </span>
  );
}