149 lines
8.4 KiB
Plaintext
149 lines
8.4 KiB
Plaintext
@model LittleShop.DTOs.MessageThreadDto
|
|
|
|
@{
|
|
ViewData["Title"] = $"Conversation with {Model.CustomerName}";
|
|
}
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2><i class="fas fa-comments"></i> Conversation with @Model.CustomerName</h2>
|
|
<a href="@Url.Action("Index")" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left"></i> Back to Messages
|
|
</a>
|
|
</div>
|
|
|
|
@if (TempData["Success"] != null)
|
|
{
|
|
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
|
@TempData["Success"]
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
}
|
|
|
|
@if (TempData["Error"] != null)
|
|
{
|
|
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
|
@TempData["Error"]
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
}
|
|
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<!-- Conversation Thread -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5>Conversation with @Model.CustomerName</h5>
|
|
<small class="text-muted">
|
|
@Model.MessageCount messages since @Model.StartedAt.ToString("MMM dd, yyyy")
|
|
</small>
|
|
</div>
|
|
<div class="card-body" style="max-height: 500px; overflow-y: auto;">
|
|
@foreach (var message in Model.Messages.OrderBy(m => m.CreatedAt))
|
|
{
|
|
<div class="mb-3 @(message.Direction == 0 ? "ms-4" : "me-4")">
|
|
<div class="d-flex @(message.Direction == 0 ? "justify-content-end" : "justify-content-start")">
|
|
<div class="card @(message.Direction == 0 ? "bg-primary text-white" : "bg-light") @(message.Direction == 0 ? "ms-auto" : "me-auto")" style="max-width: 70%;">
|
|
<div class="card-body p-3">
|
|
<div class="d-flex justify-content-between align-items-start mb-2">
|
|
<strong class="@(message.Direction == 0 ? "text-white" : "text-primary")">
|
|
@if (message.Direction == 0)
|
|
{
|
|
<i class="fas fa-user-tie"></i>
|
|
@:Admin
|
|
}
|
|
else
|
|
{
|
|
<i class="fas fa-user"></i>
|
|
@Model.CustomerName
|
|
}
|
|
</strong>
|
|
<small class="@(message.Direction == 0 ? "text-white-50" : "text-muted")">
|
|
@message.CreatedAt.ToString("MMM dd, HH:mm")
|
|
</small>
|
|
</div>
|
|
<div class="@(message.Direction == 0 ? "text-white" : "text-dark")">
|
|
@Html.Raw(message.Content.Replace("\n", "<br>"))
|
|
</div>
|
|
@if (!string.IsNullOrEmpty(message.OrderReference))
|
|
{
|
|
<div class="mt-2">
|
|
<a href="@Url.Action("Details", "Orders", new { id = message.OrderId })"
|
|
class="badge @(message.Direction == 0 ? "bg-light text-primary" : "bg-primary text-white") text-decoration-none">
|
|
<i class="fas fa-box"></i> Order @message.OrderReference
|
|
</a>
|
|
</div>
|
|
}
|
|
@if (message.IsUrgent)
|
|
{
|
|
<span class="badge bg-danger mt-2">Urgent</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<!-- Customer Info -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h6><i class="fas fa-user"></i> Customer Information</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<p><strong>Name:</strong> @Model.CustomerName</p>
|
|
<p><strong>Messages:</strong> @Model.MessageCount</p>
|
|
<p><strong>First Contact:</strong> @Model.StartedAt.ToString("MMM dd, yyyy HH:mm")</p>
|
|
<p><strong>Last Message:</strong> @Model.LastMessageAt.ToString("MMM dd, yyyy HH:mm")</p>
|
|
@if (Model.HasUnreadMessages)
|
|
{
|
|
<div class="alert alert-warning p-2">
|
|
<i class="fas fa-exclamation-triangle"></i> Has unread messages
|
|
</div>
|
|
}
|
|
@if (Model.RequiresResponse)
|
|
{
|
|
<div class="alert alert-danger p-2">
|
|
<i class="fas fa-reply"></i> Requires response
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reply Form -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6><i class="fas fa-reply"></i> Send Reply</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post" action="@Url.Action("Reply")">
|
|
<input type="hidden" name="customerId" value="@Model.CustomerId" />
|
|
|
|
<div class="mb-3">
|
|
<label for="content" class="form-label">Message</label>
|
|
<textarea class="form-control" id="content" name="content" rows="4" required placeholder="Type your reply here..."></textarea>
|
|
</div>
|
|
|
|
<div class="mb-3 form-check">
|
|
<input type="checkbox" class="form-check-input" id="isUrgent" name="isUrgent" value="true">
|
|
<label class="form-check-label" for="isUrgent">
|
|
Mark as urgent
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-paper-plane"></i> Send Reply
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |