Implement bidirectional customer conversations with customer-based grouping and order tagging
This commit is contained in:
sysadmin
149
LittleShop/Areas/Admin/Views/Messages/Customer.cshtml
Normal file
149
LittleShop/Areas/Admin/Views/Messages/Customer.cshtml
Normal file
@@ -0,0 +1,149 @@
|
||||
@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>
|
||||
86
LittleShop/Areas/Admin/Views/Messages/Index.cshtml
Normal file
86
LittleShop/Areas/Admin/Views/Messages/Index.cshtml
Normal file
@@ -0,0 +1,86 @@
|
||||
@model IEnumerable<LittleShop.DTOs.MessageThreadDto>
|
||||
|
||||
@{
|
||||
ViewData["Title"] = "Customer Messages";
|
||||
}
|
||||
|
||||
<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> Customer Messages</h2>
|
||||
</div>
|
||||
|
||||
@if (!Model.Any())
|
||||
{
|
||||
<div class="alert alert-info">
|
||||
<i class="fas fa-info-circle"></i> No customer messages yet.
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5>Active Conversations</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Customer</th>
|
||||
<th>Subject</th>
|
||||
<th>Last Message</th>
|
||||
<th>Messages</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var thread in Model.OrderByDescending(t => t.LastMessageAt))
|
||||
{
|
||||
<tr class="@(thread.HasUnreadMessages ? "table-warning" : "")">
|
||||
<td>
|
||||
<strong>@thread.CustomerName</strong>
|
||||
<br><small class="text-muted">Customer conversation</small>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-muted">Latest activity</span>
|
||||
</td>
|
||||
<td>
|
||||
@thread.LastMessageAt.ToString("MMM dd, HH:mm")
|
||||
<br><small class="text-muted">Started: @thread.StartedAt.ToString("MMM dd")</small>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-primary">@thread.MessageCount</span>
|
||||
@if (thread.HasUnreadMessages)
|
||||
{
|
||||
<span class="badge bg-warning ms-1">Unread</span>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
@if (thread.RequiresResponse)
|
||||
{
|
||||
<span class="badge bg-danger">Needs Response</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="badge bg-success">Up to date</span>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<a href="@Url.Action("Customer", new { id = thread.CustomerId })" class="btn btn-sm btn-primary">
|
||||
<i class="fas fa-comments"></i> View Conversation
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user